@charset "UTF-8";
* { /*-webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; */-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, section, summary, time, mark, audio, video { margin: 0; padding: 0; font: inherit; word-wrap: break-word; border: 0; vertical-align: baseline; outline: none; }
body {padding: 0;margin: 0;color: #000000;font-size: 3.5vw;font-family: "Noto Serif JP", "游明朝","Yu Mincho",YuMincho,"Hiragino Mincho ProN","Hiragino Mincho Pro",HGS明朝E,メイリオ,Meiryo,serif;-webkit-text-size-adjust: 100%;line-height: 1;}
article, aside, canvas, details, figcaption, figure, header, footer, hgroup, main, menu, nav, section, summary { display: block; }
@media only screen and (min-width:600px) {body {font-size: 18px;}}
blockquote, q { quotes: none; }
ul, ol, li { list-style: none; }
table { border-spacing: 0; border-collapse: collapse; }
img, video, object { height: auto; border: none; display: block; max-width: 100%; }
ins { background: none; color: #000; text-decoration: none; }
mark { background-color: #ff9; color: #000; font-style: italic; font-weight: bold; }
del { text-decoration: line-through; }
abbr[title], dfn[title] { border-bottom: 1px dotted; cursor: help; }
hr { height: 1px; padding: 0; margin: 1em 0; border: 0; border-top: 1px solid #ccc; display: block; }
*:before, *:after { -moz-transition: 0.3s; -o-transition: 0.3s; -webkit-transition: 0.3s; transition: 0.3s; }
a {text-decoration: none;display: block;-moz-transition: 0.3s;-o-transition: 0.3s;-webkit-transition: 0.3s;transition: 0.3s;color: #000;}
a:hover { opacity: 0.6; }
.clearfix::after { content: ''; display: block; clear: both; }
.pc { display: none; }
.sp { display: block; }
.inner { width: 100%; margin: auto; }
.container { width: 100%; overflow: hidden; }
.js-body { width: 100%; height: 100%; position: fixed; }
.google-map { width: 100%; position: relative; }
.google-map iframe, .google-map object, .google-map embed { width: 100%; height: 100%; position: absolute; top: 0; left: 0; }
.social-items { width: 100%; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: box; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-justify-content: center; justify-content: center; }
.social-items li { margin: 0 4%; font-size: 10.53vw; }
.social-items li a{ color: #fff; }
.ja {font-family: 'Noto Serif JP', serif;}
.en {font-family: 'EB Garamond', serif;}
.flex {display: -webkit-box;display: -moz-box;display: -webkit-flex;display: box;}
.flex.wrap {flex-wrap:wrap;}
.flex.reverse {}
.gold { color:#52AFAD;}
.txtc {text-align: center;}
/* js */
.fade { opacity: 0; -moz-transition: 1.4s; -o-transition: 1.4s; -webkit-transition: 1.4s; transition: 1.4s; }
.fade-left { -moz-transform: translateX(-30px); -ms-transform: translateX(-30px); -webkit-transform: translateX(-30px); transform: translateX(-30px); }
.fade-right { -moz-transform: translateX(30px); -ms-transform: translateX(30px); -webkit-transform: translateX(30px); transform: translateX(30px); }
.fade-bottom { -moz-transform: translateY(30px); -ms-transform: translateY(30px); -webkit-transform: translateY(30px); transform: translateY(30px); }
.fade-active { opacity: 1; -moz-transform: translate(0); -ms-transform: translate(0); -webkit-transform: translate(0); transform: translate(0); }
.curtain { overflow: hidden; }
.curtain.first-anime .js-curtain-inner:after { transition-property: transform, opacity; transition-duration: 0.5s; transition-delay: 0s; transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1); transform: translate3d(0, 0, 0); }
.curtain.second-anime .js-curtain-inner:after { transition-property: transform; transition-duration: 0.5s; transition-delay: 0s; transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1); transform: translate3d(103%, 0, 0); }
.curtain.second-anime img { opacity: 1; left: 0; }
.curtain img { opacity: 0; position: relative; left: -4%; -moz-transition: 0.4s; -o-transition: 0.4s; -webkit-transition: 0.4s; transition: 0.4s; }
.curtain-inner { overflow: hidden; position: relative; display: inline-block; }
.curtain-inner:after { content: ''; position: absolute; opacity: 1; left: 0; top: 0; bottom: 0; width: 100%; background: #ede9ea; transform: translate3d(-101%, 0, 0); }


/* header
----------------------------------------------- */
.main {padding-top:60px;}
.header {width: 100%;height: 60px;padding: 14px 0;background: #FFF;z-index: 10;position: fixed;top: 0;left: 0;}

.header-logo {width: 120px;margin: auto;}
.header-logo img { width: 100%; }

.header-mypage { width: 42px; position: absolute; top: 9px; right: 60px; }
.header-mypage img { width: 100%; }

.checkbox-toggle {width: 32px;height: 32px;margin: 0;opacity: 0;z-index: 12;cursor: pointer;position: absolute;top: 9px;left: 10px;}
.checkbox-toggle:checked + .hamburger > div { transform: rotate(135deg); }
.checkbox-toggle:checked + .hamburger > div:before, .checkbox-toggle:checked + .hamburger > div:after { top: 0; transform: rotate(90deg); }
.checkbox-toggle:checked + .hamburger > div:after { opacity: 0; }
.checkbox-toggle:checked ~ .header-navi { pointer-events: auto; visibility: visible; }
.checkbox-toggle:checked ~ .header-navi > div { -moz-border-radius: 0; -webkit-border-radius: 0; border-radius: 0; transform: scale(1); transition-duration: .75s; }
.checkbox-toggle:checked ~ .header-navi > div > div { opacity: 1; transition: opacity 0.4s ease 0.4s; }
.checkbox-toggle:checked:hover + .hamburger > div { transform: rotate(225deg); }

.hamburger {width: 35px;height: 35px;padding-top: 9px;backface-visibility: hidden;z-index: 11;cursor: pointer;position: absolute;top: 8px;left: 10px;transition: box-shadow 0.4s ease;}
.hamburger > div {position: relative;flex: none;width: 24px;height: 1px;margin: 15px auto 0;background: #000;transition: all 0.4s ease;}
.hamburger > div:before, .hamburger > div:after {content: '';position: absolute;z-index: 1;top: -7px;left: 0;width: 100%;height: 1px;background: inherit;transition: all 0.4s ease;}
.hamburger > div:after {top: 7px;}

.header-navi { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; visibility: hidden; overflow: hidden; backface-visibility: hidden; outline: 1px solid transparent; display: flex; align-items: center; justify-content: center; }
.header-navi > div {text-align: center;border-radius: 50%;transition: all 0.4s ease;flex: none;transform: scale(0);backface-visibility: hidden;overflow: hidden;display: flex;align-items: center;justify-content: center;}
.header-navi > div > div { text-align: center; opacity: 0; transition: opacity 0.4s ease; overflow-y: auto; flex: none; }
.header-navi > div > div > ul > li.current a {padding: 4px 10px 2px;color: #52AFAD;background: #fff;}
.header-navi > div > div > ul > li > a { position: relative; display: inline; cursor: pointer; transition: color 0.4s ease; }
.header-navi > div > div > ul > li > a:hover {color: #52AFAD;opacity: 1;}
.header-navi > div > div > ul > li > a:hover:after { width: 100%; }
.header-navi > div > div > ul > li > a:after {content: '';position: absolute;z-index: 1;bottom: -.15em;left: 0;width: 0;height: 2px;background: #52AFAD;transition: width 0.4s ease;}

.header-navi-inner {width: 200vh;height:200vh;background: #FFF;overflow: auto;position: relative;-webkit-overflow-scrolling: touch;}
.header-navi-scroll {width: 100vw;height: 100vh;padding: 80px 0 120px;overflow-y: auto;-webkit-overflow-scrolling: touch;}
.header-navi-items { width: 100%; }
.header-navi-items li {margin-bottom: 24px;font-size:160%;font-weight: 400;}
.reserveBTM {background: #52AFAD;width: 38px;height: 38px;border-radius: 50%;position: absolute;right: 2%;padding: 9px 0 0 11px;top: 10px;}
.reserveBTM img {width: 70%;}

/* footer
----------------------------------------------- */
.footer {padding: 60px 0 20vw;background: #52AFAD;color: #FFF;position: relative;}
@media only screen and (min-width:600px) {.footer {padding: 60px 0 110px; }}

.footer-content { padding-top: 40px; }
.salon_logo { max-width:112px; width: 26%; margin: 0 auto 15px; }
.salon_logo img { width: 100%; }
.footer-fixed { background: #fddfe2; z-index: 9; position: fixed; left: 0; bottom: 0; }
.footer-fixed-items { width: 100%; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: box; display: flex; }
.footer-fixed-items li { width: 100%; background: #f86a7c; }
.footer-fixed-items li:nth-child(even) { background: #f8949f; }
.footer-fixed-items img { width: 100%; margin: auto; }
.copyright {padding: 2em 0;font-size: 80%;text-align: center;}
.salon_name { text-align: center; font-size: 210%; line-height: 1.4; margin-top: .8em;}
.address { text-align: center; line-height: 1.4; margin: 1.2em 0;}
.telnumber { width:440px; max-width:65%; margin:1.5em auto;}
.sns-list { justify-content: center;margin:2em auto;}
.sns-list li {width: 3em;height:3em;line-height:1;max-width: 60px;max-height:60px;border:1px solid;border-radius:50%;}
.sns-list li:nth-child(n+2) {margin-left:4%;}
.sns-list li a{width:100%; height:100%; position:relative;display:table;}
.sns-list li a img {width: 54%;height: 54%;margin: auto;left: 0;right: 0;position:absolute;display:table-cell;vertical-align: middle;bottom: 0;top: 0;}
.sns-list li:last-child a img {width: 84%;height: 84%;}
.footer .aten {text-align:center; font-size:80%;margin:0 auto 3em;}
.aten{ content:""; }
.mem1 {margin-top:1.2em;}
.midashi { text-align: center; padding: 0 0 2em;}
.midashi .en {color:#52AFAD;margin-bottom: .5em;}
.midashi .ja {font-size: 160%;line-height: 1.4;}
.midashi .txt {font-size: 90%;line-height: 1.4; margin-top:1.5em;}

.midashi2 {text-align: center;font-size: 120%;color: #52AFAD;position: relative;margin: 0 auto .5em;}
.qa_list * + .midashi2 { margin: 1.5em auto 1em;}
.midashi2 span{padding: 0 .5em;background: #FFF;}
.midashi2:before {content:"";display:block;width: 100%;height: 1px;background: #52AFAD;position: absolute;z-index: -1;top: .5em;}
.wkbox {border:1px solid #52AFAD;padding: 6%;margin: 0 6%;background: url(../img/boxt.svg) no-repeat center top,url(../img/boxb.svg) no-repeat center bottom #FFF;background-size: contain;box-shadow: 0px 0px 38px 0px rgba(148, 148, 148, 0.26);}

.bgstne { background:url(../img/bg_gost.jpg) repeat; background-size:cover;}
.bgline { background:url(../img/bg_dod.gif) repeat; }



ul.fv { width: 100%;}
ul.fv .slick-track li{width:100vw;}
ul.fv li img { width:100%;}

.massage {padding: 3em 0 0;}
.massage .inner {}
.massage .txt { padding: 0 6%; line-height: 1.6;}
.massage .midashi {}
.massage .img { width: 100%; margin: 2.5em 0 0;}

.check { padding: 3em 4%;}
.check .inner {padding: 3em 6% 6%; background:#FFF; }
.check ul.box {}
.check ul.box li {background: url(../img/check.svg) no-repeat left top;background-size: 1.2em;padding-left: 1.5em;padding-bottom: .5em;}
.check ul.box li + li {margin-top:1em;}

.point { padding: 3em 0;}
.point .inner{}
.point ul.pbox {}

.point li { padding-top: 2em;}
.point li + li { padding-top: 4em;}

.point ul.pbox .img { position: relative;}
.point ul.pbox .img p.en.gold { font-size: 340%; position: absolute; top: -.5em; left: .2em;}
.point ul.pbox .wkbox {margin-top: -1.5em;position: relative;z-index: 2;line-height: 1.6;padding-top: 10%;}
.point ul.pbox p.title.gold { text-align: center; font-size: 140%;}
.point ul.pbox p.title.gold:after { content:"";display:block;width:3em; height:2px; background:#d3d3d3; margin:1.2em auto;}

.point ul.pbox .txt { line-height: 1.8;}

.menu {padding:3em 0;}
.morebtm {text-align: center;position:relative;z-index:2;}
.morebtm > * {width:100%;}
.morebtm > * a{color:#fff;padding: 1.5em 0;}
.morebtm .grry a {background:#b5b5ae;}
.morebtm .gld a {background:#52AFAD;}

.findreserve {position:fixed;bottom:0;left:0;right:0;z-index: 100;}
.findreserve .morebtm {}
.findreserve .morebtm > * {width:50%;}
.findreserve .morebtm > * a{height:100%;width:100%;max-width: initial;margin: 0;}
.findreserve .morebtm > * a.telnumber img {width:80%;margin: 0 auto .5em;max-width: 270px;}
.findreserve .morebtm > * a .box {max-width:282px; margin:auto;}
.findreserve .morebtm > * a .box.flex  {align-items: end;justify-content: center;}
.findreserve .morebtm > * a .box.flex img {width: 2.5em;}
.findreserve .morebtm > * a .box.flex .txt {width: calc(100% - 5em);}
.findreserve .txt .en { font-size: 200%;}


.staff { padding: 1em 0;}
.staff .photobox.flex { margin: 6%; justify-content: space-between;}
.staff .photobox.flex.only {display:block; }
.staff .photobox.flex.only .name {width:100%;padding: 4% 0 8%;}
.staff .photobox.flex .photo { width: 42%;}
.staff .photobox.flex .name { width: 57%; background: #52AFAD; color: #FFF; text-align: center;}
.staff .photobox.flex p.salon_logo { margin-top: 8%;}
.staff .photobox.flex p.title { font-size: 150%; margin: 1em auto .5em;}
.staff .photobox.flex p.en { font-size: 80%;}
.staff .txtbox { margin: 0 6% 3em; line-height: 1.6;}
.staff .txtbox .txt { margin: 2% 2% 2em;}
.staff .txtbox dl { border-bottom: 1px solid #bcbcbc; padding: 1em 0;}
.staff .txtbox dt { width: 12em; text-align: center;}
.staff .txtbox dd { width: calc(100% - 9em);}


ul.stepUL {margin:0 4%;padding:3em 0; }
ul.stepUL>li {padding:6%;background:#FFF;}
ul.stepUL>li+li {margin-top: .5em;padding: 4% 30px;}
ul.stepUL>li .midashi {padding: 1.5em 0 3.5em;}
ul.stepUL p.title {position:relative; font-size:130%; font-weight:500;padding-left:5.4em; margin-bottom:1em;}
ul.stepUL p.title span.en {position:absolute; background:#52AFAD; font-weight:normal;color:#FFF; font-size:70%;padding:.4em 2em;left:0;}
ul.stepUL .txt {line-height:1.8;text-align: justify; font-feature-settings: "palt";}
ul.stepUL p.txtc { text-align: center; margin: 2em 0 .8em;}
ul.stepUL ul.reserve_btm { margin: auto;}




.menu .morebtm {margin:0 6% 4em;}

.reserve_btm {max-width:500px;margin: 0 8%;}
@media only screen and (min-width:510px) {.reserve_btm { margin: 0 auto;}}
.reserve_btm li{ margin:auto;}
.reserve_btm li + li{margin-top: .8em;}
.reserve_btm li a{display: -webkit-box;display: -moz-box;display: -webkit-flex;display: box;align-items: center;display: flex;padding: 1.2em;color:#FFF;border-radius:999px;justify-content: center;position: relative;}
.reserve_btm li a .icon { width: 2em;margin-right:.8em;}
.reserve_btm li a img{}
.reserve_btm li a .txt {}
.reserve_btm .tels {padding: .15em; border: 1px solid #bcbcbc;border-radius:999px; }
.reserve_btm .tels a { margin: auto;}
.reserve_btm .hpbs a {background:#96315a;}
.reserve_btm li.hpbs a .icon {border:1px solid #FFF; border-radius:.6em;}
.reserve_btm .lines a{background: #00B900;}

.top-faq { padding:3em 6%;}
.qa_list {}
.qa_list dl {margin: 0 auto 0%;border: 1px solid #bcbcbc;border-radius: .5em;padding: 4%;background:#FFF; }
.qa_list dl + dl {margin-top:1.5em;}
.qa_list dt {position: relative;padding: 0 12% 0 2.4em;cursor: pointer;line-height: 1;font-family: source-han-serif-japanese, 游明朝, "Yu Mincho", YuMincho, "Hiragino Mincho ProN", HGS明朝E, メイリオ, Meiryo;font-weight: 400;font-feature-settings: "palt"1;display: inline-block;width: 100%;text-indent: -2.5em;}
.qa_list dt.open {padding-bottom:1em;}
.qa_list dt span{font-size: 120%;color: #52AFAD;background: #f4f2e5;line-height: 1.8;font-weight: 400;padding: .2em .4em;margin-right: 3%;font-family: cormorant-garamond, serif;}
.qa_list dt:before, .qa_list dt:after {content: '';background: #bcbcbc;position: absolute;top: 0;right: 0;}
.qa_list dt:before {width: 20px;height: 2px;top: 50%;right: 0;}
.qa_list dt:after {width: 2px;height: 20px;top: 50%;right: 9px;-webkit-transition: 0.3s;transition: 0.3s;margin-top: -12px;transform: translate(0, 3px);}
.qa_list dt.open:after {-moz-transform: rotate(90deg) translate(3px, 0);-ms-transform: rotate(90deg) translate(3px, 0);-webkit-transform: rotate(90deg) translate(3px, 0);transform: rotate(90deg) translate(3px, 0);}
.qa_list dd {display: none;padding: 4% 0 .5em 2.4em;text-indent: -2.5em;line-height: 1.6;border-top: 1px solid #bcbcbc;text-align: justify;font-feature-settings: "palt";}
.qa_list dd span.asbox{font-size: 120%;color: #52AFAD;background: #f4f2e5;line-height: 1.8;font-weight: 400;padding: .2em .4em;margin-right: 3%;font-family: cormorant-garamond, serif;}


.instabox {}
.instabox .img { max-width: 184px;
 max-height: 184px; width: 25%; height: 22vw;
 border-radius: 50%; background: #1d1d1e; padding-top: 5%; line-height: 1;}
.instabox .img img { width: 42%; height: auto; margin: auto;}
.instabox .namebox { margin: 3em 6% 1em; align-items: center; justify-content: space-between;}

.instabox .title { width: calc(100% - 32%); font-size: 160%;}
.instabox .title p.gold { font-size: 110%; margin-bottom: .5em;}
.instabox .title p.sub { font-size: 85%;}

.instabox ul.instaboxarea {
    justify-content: space-between;
}
.instabox ul.instaboxarea li { width: calc(100% / 3);}
.instabox ul.instaboxarea li a:hover {opacity:.79;}
.instabox ul.instaboxarea img {}

/* faq
----------------------------------------------- */
.faq-items li {color: #666;padding: 10px 30px 10px;margin: 17% auto 24%;background: #fff;position: relative;}
.faq-items li::before,.faq-items li::after{width: calc(100% - 20px);height: 0;display: block;position: absolute;left: 0;content: "";}
.faq-items li::before{border-bottom: solid 20px #fff;border-left: solid 20px transparent;bottom: 100%;}
.faq-items li::after{border-top: solid 20px #fff;border-right: solid 20px transparent;top: 100%;}