@charset "UTF-8";
/* CSS Document */

@import url('https://fonts.googleapis.com/css?family=Noto+Sans+JP:400,700|Libre+Baskerville:400,700|Noto+Serif+JP:400,500&display=swap&subset=japanese');

#page-top {position: fixed;bottom: 40px;right: 40px;width: 60px; z-index:400;}
@media screen and (max-width: 812px) {
	#page-top {position: fixed;bottom: 5px;right: 5px;width: 30px; z-index:400;}
}

.EN {font-family: 'Libre Baskerville', serif;}
.mincho {font-family: 'Noto Serif JP', serif;}

.bgWH {background-color: #FFF;}
.bgDBL {background-color: #2F3B49;}
.bgBR {background-color: #BF9D63;}
.bgBE {background-color: #F5F6E9;}
.bgGR {background-color: #2AA464;}
.bgGRY {background-color: #EEEEEE;}
.txtWH {color: #FFF;}
.txtBR {color: #BF9D63;}
.txtDBL {color: #2F3B49;}
.txtGR {color: #2AA464;}
.bBR {border-color: #BF9D63;}
.bDBL {border-color: #2F3B49;}

.clone-nav {position: fixed;top: 0;left: 0;z-index: 2; width: 100%; transition: .3s; transform: translateY(-100%);}
.is-show {transform: translateY(0);}
.clone-nav {text-align: center; width: 100%; background: #FFF;}

.ratioBox {position: relative;width: 100%;height: auto;}
.ratioBox1-1:before {content: "";display: block;padding-top: 100%; /* 1:1 */}
.ratioBox2-1:before {content: "";display: block;padding-top: 50%; /* 2:1 */}
.ratioBox3-2:before {content: "";display: block;padding-top: 66%; /* 3:2 */}
.ratioBox4-3:before {content: "";display: block;padding-top: 75%; /* 4:3 */}
.ratioBoxInner {position: absolute;top: 0; left: 0;width: 100%;height: 100%;}

#header h1 {font-size: 12px; font-weight: normal; padding: 10px 0 20px;}
.logo {width: 216px; margin-bottom: 10px; text-align: center; font-size: 12px;}
#header .logo {float: left;}
#header .contact {float: right;}
.tel {width: 255px;}
#header .tel {float: right; margin-bottom: 15px;}
#header .info {clear: both;}
.info .time,.info .holiday {display: inline-block;}
.info .time {line-height: 20px; margin-right: 20px;}
.info .time span,.info .holiday span {line-height: 20px; font-size: 12px; padding: 0 6px; margin-right: 10px; border-radius: 5px;}
@media screen and (max-width: 812px) {
	#header h1 {margin-right: 50px;}
	#header .tel {display: none;}
	#header .info {margin-top: 25px;}
}
@media screen and (max-width: 592px) {
	#header .logo {float: none; margin: 0 auto 20px;}
	#header .contact {float: none;}
	#header .tel {display: none;}
	#header .info {margin-top: 0; text-align: center;}
	.info .time {margin-right: 10px;}
}
@media screen and (max-width: 350px) {
	.info .time {margin-right: 0; margin-bottom: 10px;}
}

#gnavi {clear: both;}
.drawer-toggle {display: none;}
.drawer-navbar {}
.drawer-container {width: auto;}
.drawer-nav {text-align: center;}
ul.drawer-menu {padding:0; margin: 0; list-style: none; letter-spacing: -.4em; border-right: 1px solid #BF9D63;}
.drawer-menu li {width: calc(100%/7 - 5px); display: inline-block; letter-spacing: normal; background: #FFF;}
.drawer-menu li:last-child {width: 16.67%!important;}
.drawer-menu li a.drawer-menu-item {display: block; margin: 0; font-size: 16px; text-decoration: none; line-height: 50px; color: #BF9D63; border-left: 1px solid #BF9D63;}
.drawer-menu li a.drawer-menu-item:hover {color: #FFF; display: block; background: #BF9D63;}
.drawer-menu li.spnav {display: none;}
.drawer-menu li.drawer-dropdown {display: none;}
@media screen and (max-width: 1010px) {
	.drawer-menu li a.drawer-menu-item {font-size: 14px;}
}
@media screen and (max-width: 812px) {
	.drawer-navbar {height: 5px;}
	.drawer-menu {background:#FFF;}
	.drawer-navbar-header button {background: #242D38;}
	.drawer-navbar-header button:hover {background: #242D38;}
	ul.drawer-menu {border-right: none;}
	.drawer-menu ul {padding:0; margin: 0; border-right: none;}
	.drawer-menu li {border-bottom:1px solid #EEE; border-top: 1px solid #EFEFEF; line-height:50px; width: 100%; text-align: left; display: block; border-left: none; width: auto;}
	.drawer-menu li:last-child {width: auto; border-right: none; width: 100%!important;}
	.drawer-menu li a.drawer-menu-item {text-align: left; font-size: 14px; font-weight: 400; color: #222; line-height: 20px; padding: 10px 20px; border-bottom: none;  border-left: none;}
	.drawer-menu li a.drawer-menu-item span {font-size: 12px; font-weight: normal; line-height: 20px; display: block;}
	.drawer-menu li a.drawer-menu-item:hover  {color: #FFF; background: #222; display: block;}
	.drawer-menu li.spnav {display: block;}
	.drawer-hamburger-icon{position:relative;display:block;margin-top:0; background: #CCC;}
	.drawer-dropdown-menu li {border-bottom:1px solid #EEE; border-top: 1px solid #EFEFEF; line-height:50px;}
	.drawer-dropdown-menu a {display: block; padding: 0 30px;}
	#head .icon {margin-left: 0;}
	#head .icon li {margin: 10px 5px;}
}

footer {padding: 80px 0; color: #FFF;}
footer a {color: #FFF!important;}
footer a:hover {color: #F6F5EA;}
footer .logo {margin-right: auto; margin-left: auto;}
footer h2 {font-size: 12px; text-align: center; font-weight: normal;}
footer #address {text-align: center;}
footer ul#navi,footer ul.linkBtn {text-align: center; letter-spacing: -.4em; margin: 0 0 40px;}
footer #navi li,footer .linkBtn li {margin: 0 15px; letter-spacing: normal; display: inline-block;}
footer .linkBtn li {margin: 0 20px; white-space: nowrap;}
footer .tel {margin: 0 auto 20px;}
footer .info {text-align: center;}
.footCopy {text-align: center;}
.footCopy small {font-size: 12px; color: #FFF;}
#ftNavi {display: none;}
@media screen and (max-width: 812px) {
	footer {margin-bottom: 50px; padding: 40px 0;}
	footer #navi li,footer .linkBtn li {margin: 0 10px 10px;}
	#ftNavi {display: block; background: #2F3B49; letter-spacing: -.4em; position: fixed; z-index: 5; bottom: 0; border-top: 1px solid #FFF; width: 100%;}
	#ftNavi ul {text-align: center; font-size: 10px; font-weight: bold;}
	#ftNavi li {letter-spacing: normal; display: inline-block; width: 25%;}
	#ftNavi li a {display: block; padding: 5px 0; color: #FFF; border-left: 1px solid #242D38; border-right: 1px solid #45576C;}
	#ftNavi li:first-child a {border-left: none;}
	#ftNavi li:last-child a {border-right: none;}
	#ftNavi li span {width: 24px; margin: 0 auto 5px; display: block;}
}

#cmnCont {padding: 80px 0; font-size: 16px;}
#cmnCont .btn {max-width: 764px; margin: 0 auto;}
#cmnBtn .col3 a {display: block;}
#cmnBtn .col3 {width: calc(33.333% - 2px)!important; margin: 0 1px!important; position: relative;}
#cmnBtn .col3 .txt {font-size: 24px; height: 30px; line-height: 30px; text-align: center; text-shadow: 2px 2px 2px #000; position: absolute; z-index: 0; top: 0; right: 0; bottom: 0; left: 0; margin: auto;}
#cmnBtn .col3 img {z-index: -1; position: relative;}
@media screen and (max-width: 812px) {
	#cmnBtn .col3 .txt {font-size: 20px;}
}
@media screen and (max-width: 500px) {
	#cmnCont {font-size: 14px;}
	#cmnBtn .col3 {width: 100%!important; margin: 2px 0!important; float: none;}
	#cmnBtn .col3 .txt {font-size: 18px;}
}

.container {width: 98.8%; max-width: 1236px; margin-left: auto; margin-right: auto; padding-left: 0; padding-right: 0;}
.containers {width: 94%; max-width: 884px; margin-left: auto; margin-right: auto; padding-left: 0; padding-right: 0;}
.mlr,.col2,.col2L,.col2R,.col3,.col4 {margin-left: 2.4%; margin-right: 2.4%;}
.col2,.col3,.col4,.col2L {float: left;}
.col2R {float: right;}
.col2,.col2R,.col2L {width: 45.2%;}
.col3 {width: 28.533%;}
.col4 {width: 20.2%;}
.btn {width: 100%;}
.btn a {color: #FFF;}
.fl {float: left;}
.fr {float: right;}
.img30L,.txt65L,.img25L,.txt70L {float: left;}
.txt65C {margin-left: auto; margin-right: auto;}
.txt65R,.img30R,.img25R,.txt70R {float: right;}
.img25L,.img25R {width: 23%;}
.img30L,.img30R {width: 30%;}
.txt65R,.txt65L,.txt65C {width: 65%;}
.txt70L,.txt70R {width: 70%;}
@media screen and (max-width: 812px) {
	.img30L,.img30R {width: 45%;}
	.txt65R,.txt65L {width: 50%;}
}
@media screen and (max-width: 500px) {
	.col4 {width: 45.2%; float: left;}
	.col2,.col2R,.col2L,.col3 {width: 95.2%; float: none;}
	.mb40sp {margin-bottom: 40px;}
	.img30L,.img30R,.txt65R,.txt65L,.txt70L,.img25L,.img25R {float: none;}
	.img30L,.img30R,.img25L,.img25R {width: 70%;}
	.txt65R,.txt65L,.txt65C,.txt70L {width: 100%;}
	.img30L,.img30R,.img25L,.img25R {margin-left: auto; margin-right: auto;}
}

.headEN {font-size: 50px; margin-bottom: 20px;}
.ttlEN,h3.subttl {padding: 0 0 45px; margin-bottom: 30px; background: url("image/cmn/bg_ttl.svg") no-repeat center bottom; background-size: 120px 20px;}
.ttlEN {font-size: 60px;}
.ttlEN span {font-size: 50%;}
h3.subEN {font-size: 30px; margin-bottom: 50px;}
h2.ttl {font-size: 18px; text-align: center;}
h3.subttl {font-size: 30px; text-align: center;}
h3.ttlLine {font-size: 30px; position: relative; display: inline-block; padding: 0 90px;}
h3.ttlLine:before, h3.ttlLine:after {content: ''; position: absolute; top: 50%; display: inline-block; width: 60px; height: 1px; background-color: #2F3B49;}
h3.ttlLine:before {left:0;}
h3.ttlLine:after {right: 0;}
@media screen and (max-width: 1024px) {
	.headEN {font-size: 30px;}
	.ttlEN {font-size: 40px;}
	h3.subEN,h3.ttlLine,h3.subttl {font-size: 24px;}
	h3.subttl {font-size: 18px;}
}
@media screen and (max-width: 500px) {
	.headEN {font-size: 24px;}
	.ttlEN {font-size: 30px;}
	h3.subEN,h3.ttlLine,h3.subttl {font-size: 20px;}
	h3.ttlLine {padding: 0 40px;}
	h3.ttlLine:before, h3.ttlLine:after {width: 30px;}
}

#slider {position: relative;}
#slider .inner {position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; width: 93.6%; max-width: 1136px; height: 30px; color: #FFF; text-shadow: 2px 2px 6px rgba(0,0,0,0.6); z-index: 2;}
#slider .inner h2 {font-size: 30px; margin-bottom: 10px;}
.slick-slider {margin-bottom: 0!important;}
#mainKV {background-image: url("image/cmn/white.png"); background-repeat: repeat-x; background-position: top; padding: 0 0 40px 80px; position: relative; color: #FFF; text-align: center;}
#kvCourse,#kvFaq,#kvSalon,#kvContact {width: 100%; height: 300px; margin-bottom: 30px;}
#kvCourse {background: url("image/course/01.jpg") no-repeat; background-size: cover;} 
#kvFaq {background: url("image/faq/01.jpg") no-repeat; background-size: cover;} 
#kvSalon {background: url("image/salon/01.jpg") no-repeat; background-size: cover;} 
#kvContact {background: url("image/contact/01.jpg") no-repeat; background-size: cover;} 
@media screen and (max-width: 950px) {
	#mainKV {background-image: url("image/white80.png"); padding-left: 40px;}
}
@media screen and (max-width: 736px) {
	#kvCourse,#kvFaq,#kvSalon,#kvContact {height: 150px;}
}

#top01 {padding: 100px 0; background: url("image/top/04.jpg") no-repeat center; background-size: cover;}
#top02 .icon {width: 60px; margin: 0 auto 20px;}
.bbox {border: 1px solid #222; padding: 5px 10px;}
#top03 {padding: 80px 0;}
#top03 .txt65R,#top03 .txt65L {margin-top: 50px;}
@media screen and (max-width: 500px) {
	#top03 .img30R,#top03 .img30L {width: 70%; margin-left: auto; margin-right: auto;}
	#top03 .txt65R,#top03 .txt65L {margin-top: 20px; margin-bottom: 50px;}
	#top03 .txtLeft,#top03 .txtRight {text-align: left!important;}
}

#price .col2 {float: none; margin-left: auto; margin-right: auto;}
.price {border: 2px solid #2F3B49; padding: 5px!important;}
.price .inner {border: 1px solid #2F3B49; padding: 25px 25px 5px 25px;}
.price h4 {font-size: 20px; margin-bottom: 20px;}
.price .btop {border-top: 1px solid #2F3B49; padding: 20px 0;}
.price .txtL {float: left;}
.price .txtR {float: right; font-size: 18px;}
.price .disc {line-height: 20px; min-height: 160px;}
.notice {padding: 30px;}
.notice .txtL {width: 110px; float: left;}
.notice .txtR {width: calc(100% - 110px); float: left;}
.regist {text-align: center; letter-spacing: -.4em;}
.regist li {width: calc(30.333% - 20px); display: inline-block; text-align: center; padding: 15px 10px; letter-spacing: normal; margin: 0 1.5% 20px;}
.adv {width: 304px; float: right;}
@media screen and (max-width: 812px) {
	.regist li {width: calc(260px - 20px);}
}

.iconQ {width: 50px; font-size: 30px; padding: 10px 0; float: left; text-align: center; color: #FFF;}
.iconA {width: 50px; font-size: 30px; padding: 10px 0; float: left; text-align: center; color: #FFF;}
h3.faq {float: left; font-size: 18px; padding: 18px 20px; width: calc(100% - 90px); margin-bottom: 20px;}
.answer {clear: both; margin: 0 0 50px 0;}
.answer .txt {float: left; width: calc(100% - 90px); padding: 20px 20px 20px 20px;}
@media screen and (max-width: 500px) {
	.iconQ,.iconA {width: 30px; font-size: 20px; padding: 5px 0;}
	h3.faq {font-size: 16px; padding: 12px 10px; width: calc(100% - 50px); margin-bottom: 20px;}
}

ul.dot,ul.num {margin-left: 1.5em;}
ul.dot {list-style: disc;}
ul.num {list-style: decimal;}
ul.dot li,ul.num li {line-height: 1.7;}

table {width: 100%;}
table tr:nth-child(odd) {background-color: #F6F5EA;}
table tr:nth-child(even) {background-color: #EEEEEE;}
table th,table td {padding: 10px 20px; font-weight: normal; line-height: 1.7; text-align: left; vertical-align: top}
table.sdata th {width: 60px;}
table.menu {max-width: 480px;}
table.menu th {width: 112px; padding: 10px 0; text-align: center;}
table.menu th.bgBR {background-color: #410007; color: #FFF;}
table.menu td {background-color: #EEEEEE;}
table.price1 th,table.price1 td,table.price2 th,table.price2 td {text-align: center;}
table.price1 {width: 456px;}
table.price2 {width: 224px;}
table .w112 {width: 112px; padding: 10px 0;}
table .w152 {width: 152px; padding: 10px 0;}
@media screen and (max-width: 500px) {
	table th {border-bottom: 1px solid #FFF;}
  table th, table td {display: block; width: clac(100% - 40px);}
}
.w50 {width: 50%;}
@media screen and (max-width: 500px) {
	.w50 {width: 100%;}
}