@charset "utf-8";

@font-face{ 
  font-family: 'hannari';
  src: url(../../font/Hannari.woff) format('woff');
}

/*------------------------------------------------------------ 
    CLASSROOM css
------------------------------------------------------------*/  

#contents:before{ background-image:url(../img/visual.png);}

/*------------------------------------------------------------ 
    MENU
------------------------------------------------------------*/  

#menu{
	margin-top:50px;
	padding-bottom:80px;
}

.reservation{
	width:auto;
	margin-top:65px;
	padding:35px 20px 20px;
	text-align:center;
	border:1px solid #aaa8a1;
	border-radius:5px;
	position:relative;
}

.reservation h3{
	padding:0 42px;
	line-height:26px;
	font-size:142%;
	font-weight:500;
	position:absolute;
	top:-13px;
	left:50%;
	transform:translateX(-50%);
	z-index:10;
	white-space:nowrap;
	background:#fff;
}

.contents .reservation h3{ background:#F3F9FA;}

.reservationTxt{
	color:#424241;
	font-size:125%;
	line-height:1.8;
}

.reservationTxt2{
	color:#676767;
	font-size:117%;
	margin-top:8px;
}

.reservationLink{
	display:inline-block;
	vertical-align:top;
	margin-top:5px;
}

.reservationLink + .reservationLink{
	position:relative;
	padding-left:36px;
}

.reservationLink + .reservationLink:before{
	display:block;
	content:"/";
	font-size:150%;
	color:#516c9d;
	font-family: 'Lato', sans-serif;
	width:36px;
	text-align:center;
	position:absolute;
	left:0;
	top:50%;
	transform:translateY(-50%);
}

.reservationLink dt,
.reservationLink dd{
	display:inline-block;
	vertical-align:baseline;
	color:#516c9d;
}

.reservationLink dt{
	font-size:142%;
	padding-right:5px;
}

.reservationLink dd{
	font-size:192%;
	font-family: 'Lato', sans-serif;
	font-weight:600;
}

.reservationLink dd a{
	color:#516c9d;
	font-family: 'Lato', sans-serif;
	font-weight:600;
}

/*------------------------------------------------------------ 
    SERVICE
------------------------------------------------------------*/  

#flowHd{
	width:100%;
	margin:50px 0 20px;
	text-align:center;
	font-size:142%;
	padding:12px 0;
	border-top:1px solid #9a9782;
	border-bottom:1px solid #9a9782;
}

.flowList{ margin-bottom:40px;}

.flowItem{
	width:18.54166666666667%;
	padding:20px 15px;
	border-radius:5px;
	text-align:center;
	border:1px solid #c9c6bd;
	position:relative;
	box-sizing:border-box;
}

.flowNum{
	width:26px;
	text-align:center;
	line-height:26px;
	color:#f77915;
	font-size:134%;
	font-family: 'Lato', sans-serif;
	border:1px solid #f77915;
	border-radius:50%;
	position:absolute;
	left:10px;
	top:10px;
	z-index:10;
}

.flowTxt{
	color:#424241;
	font-size:125%;
	margin-top:12px;
}

.flowTxt .small{
	display:inline-block;
	font-size:92%;
	line-height:1.4;
}

.flowTxt .tel-link{
	display:inline-block;
	margin-top:5px;
	color:#e76c0a;
	font-family: 'Lato', sans-serif;
	font-size:109%;
}

.flowTxt .tel-link a{ color:#e76c0a;}

#serviceLeft {
	width:66.66666666666667%;
	border:1px solid #C8C4BB;
	border-top:none;
	box-sizing:border-box;
}

#serviceRight{
	width:31.25%;
	border:1px solid #C8C4BB;
	border-top:none;
	box-sizing:border-box;
}

.serviceTbl{
	width:100%;
	font-size:117%;
	color:#424241;
}

.serviceTbl th,
.serviceTbl td{
	vertical-align:middle;
	padding:9px;
	text-align:center;
	border-top:1px solid #C8C4BB;
	border-right:1px solid #C8C4BB;
	box-sizing:border-box;
}

.serviceTbl th:last-child,
.serviceTbl td:last-child{ border-right:none;}

.serviceTbl .thead{ background:#FFF8E5;}

.serviceTbl .thead1{ width:140px;}
.serviceTbl .thead2{ width:100px;}
.serviceTbl .thead3{ width:33.333333%;}

#serviceLeft td:last-child{
	text-align:left;
	padding:15px 9px;
}

#serviceRight td{ vertical-align:top;}

#serviceRight td ul{
	display:inline-block;
	text-align:left;
}

#serviceRight td li{ line-height:1.6;}

#serviceRight .tfoot{ border-bottom:1px solid #C8C4BB;}

th.style1,
.tfoot.style1{ background:#FFEEF0;}
td.style1{ background:#FEF8F9;}

th.style2,
.tfoot.style2{ background:#EDFAFA;}
td.style2{ background:#F6FBFB;}

th.style3,
.tfoot.style4{ background:#F0FEF1;}
td.style3{ background:#F7FDF8;}

#cautionList{
	width:auto;
	padding:14px;
}

#cautionList li{
	margin-top:5px;
	color:#424241;
	font-size:117%;
}

#caution{
	width:auto;
	margin-top:30px;
	color:#424241;
	padding:25px 45px 30px;
	background:#F7F6F1;
}

#caution h3{
	text-align:center;
	font-size:125%;
	font-weight:500;
	margin-bottom:15px;
}

#caution p{
	font-size:117%;
	line-height:1.8;
}

#caution p span{ font-weight:bold;}


/*------------------------------------------------------------ 
    MediaQuery 
------------------------------------------------------------*/  

/* TABLET */
@media screen and (max-width: 788px){

.listItem{ width:50%;}

.listItem:not(:nth-child(3n)) .listlabel{ border-right:none;}
.listItem:nth-child(odd) .listlabel{ border-right:1px solid #ECEDE8;}

/* MENU */

#menu{
	margin-top:40px;
	padding-bottom:60px;
}

.reservation{
	margin-top:45px;
	padding:25px 15px 20px;
}

.reservation h3{
	padding:0 30px;
	font-size:134%;
}

.reservationTxt{ font-size:117%;}
.reservationTxt2,
.serviceTbl,
#cautionList li{ font-size:109%;}



/* SERVICE */

#flowHd{
	margin:35px 0 15px;
	font-size:134%;
}

.flowList{ margin-bottom:15px;}

.flowItem{
	width:100%;
	min-height:78px;
	margin-bottom:15px;
	padding:20px 10px 20px 95px;
	text-align:left;
}

.flowNum{
	width:24px;
	line-height:24px;
	font-size:117%;
}

.flowItem img{
	display:block;
	position:absolute;
	left:46px;
	top:20px;
}

.flowTxt{
	font-size:117%;
	margin-top:0;
}

#serviceLeft,
#serviceRight{ width:100%;}

#serviceRight{ margin-top:20px;}

.serviceTbl .thead1{ width:120px;}
.serviceTbl .thead2{ width:90px;}

#caution{
	margin-top:20px;
	padding:25px 20px 20px;
}

}


/* SP */
@media screen and (max-width: 560px){

.listItem{ width:100%;}

.listItem:nth-child(odd) .listlabel{ border-right:none;}

/* MENU */

#menu{
	margin-top:30px;
	padding-bottom:40px;
}

.reservationTxt{ line-height:1.6;}

.reservationLink + .reservationLink{ padding-left:0;}
.reservationLink + .reservationLink:before{ display:none;}



/* SERVICE */

#flowHd{
	font-size:125%;
	padding:10px 0;
	margin-top:25px;
}

.flowList{ margin-bottom:5px;}

.flowItem{
	min-height:68px;
	padding:15px 10px 15px 95px;
}

#caution{ padding:20px 15px;}

#caution h3{ font-size:117%;}

#caution p{
	font-size:109%;
	line-height:1.6;
}

#serviceLeft{ border:none;}

#serviceLeft .serviceTbl,
#serviceLeft .serviceTbl tr,
#serviceLeft .serviceTbl td{ display:block;}

#serviceLeft .serviceTbl thead{ display:none;}

#serviceLeft .serviceTbl tr{
	margin-bottom:15px;
	border:1px solid #C8C4BB;
	border-top:none;
}

#serviceLeft .serviceTbl td{
	padding-left:140px;
	position:relative;
	text-align:left;
	border-right:none;
}

#serviceLeft td:last-child{ padding:9px 9px 9px 140px;}

#serviceLeft .serviceTbl td:before{
	display:block;
	width:130px;
	height:100%;
	padding:10px;
	border-right:1px solid #C8C4BB;
	box-sizing:border-box;
	content:attr(data-label);
	font-size:12px;
	position:absolute;
	left:0;
	top:0;
	font-family: 'Noto Sans JP', "游ゴシック", "Yu Gothic", YuGothic, 'Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro W3', Meiryo, メイリオ, Osaka, 'MS PGothic', arial, helvetica, sans-serif;
	background:#FFF8E5;
}

}