@charset "UTF-8";

/* default sp
----------------------------------------------- */
* { -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 { padding: 0; margin: 0; font: inherit; word-wrap: break-word; border: 0; vertical-align: baseline; outline: none;}
body { padding: 0; margin: 0; color: #171717; font-size: 3.6vw; font-family: var(--gothic); -webkit-text-size-adjust: 100%; font-style: normal; line-height: 1;}
article, aside, canvas, details, figcaption, figure, header, footer, hgroup, main, menu, nav, section, summary { display: block;}
blockquote, q { quotes: none;}
strong, b { font-weight: bold;}
ul, ol, li { list-style: none;}
table { border-spacing: 0; border-collapse: collapse;}
img, video, object { height: auto; border: none; display: block;}
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-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;}
a {color: #555555;text-decoration: none;display: block;-moz-transition: all 0.3s cubic-bezier(0.76, 0, 0.24, 1);-o-transition: all 0.3s cubic-bezier(0.76, 0, 0.24, 1);-webkit-transition: all 0.3s cubic-bezier(0.76, 0, 0.24, 1);transition: all 0.3s cubic-bezier(0.76, 0, 0.24, 1);}
a:hover { opacity: 0.6;}
.clearfix:after { content: ''; display: block; clear: both;}
.pc { display: none;}
.sp { display: block;}

.wrapper { width: 100%; overflow: hidden; z-index: 1; position: relative;}


/* font
----------------------------------------------- */
:root {
--mincho: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "MS P明朝", serif;
--gothic: Lato, 游ゴシック体, YuGothic, 'Yu Gothic', "游ゴシック Medium", "Yu Gothic Medium", 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
}

/* sp
----------------------------------------------- */
img{width:100%;}
.inner{width:90%;margin:0 auto;}

.hero{background:url(../images/hero.jpg)top center no-repeat;background-size: 100%;padding-bottom: 326vw;position: relative;z-index: 1;}
.cv-bnr{background:url(../images/cv-bnr.png)top center no-repeat;background-size: 100%;position: absolute;bottom: 7vw;left: 50%;-webkit-transform: translateX(-50%);transform: translateX(-50%);width: 92%;padding: 98.5vw 0 8vw;}
.cv-btn{width: 86%;margin: 0 auto;}

.header{width: 100%;}
.header-content{width: 100%;position: fixed;z-index: 30; padding: 3vw;}
.header-content a{width: 40vw;margin-left: auto;}

.compare{background:url(../images/comparison.jpg)top center no-repeat;background-size: 100%;padding-bottom: 374vw;position: relative;}
.voice{background:url(../images/voice.jpg)top center no-repeat;background-size: 100%;padding-bottom: 576vw;position: relative;}
.compare .cv-btn,.voice .cv-btn{position: absolute;left: 50%;-webkit-transform: translateX(-50%);transform: translateX(-50%);bottom: 3vw;}

.access iframe{vertical-align: bottom;height: 50vw;margin-bottom: 4vw;}
.access-info{background: #f6feff;padding: 6vw;}
.access-info li{border: 1px solid #4CACB9;padding: 6vw;margin-bottom: 10vw;}
.access-info li:last-child{margin-bottom: 0;}
.access-info .reserve{position: relative;background: #3FC25B;color: #fff;font-weight: bold;text-align: center;padding: 4vw 0;font-size: 4.5vw;border-radius: 8vw;}
.access-info .reserve::after{content: '\f105';font-family: 'icon';position: absolute;top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%);right: 4vw;}

.access-ttl{color: #4CACB9;font-weight: bold;line-height: 1.3;background: #e8ffe7;padding: 2vw 4vw;border-left: 5px solid #4CACB9; letter-spacing: 0.04em;font-size: 5.5vw;}
.access-tbl{width: 100%;margin-bottom: 3vw;}
.access-tbl th,.access-tbl td{vertical-align: middle;padding: 5% 4%;font-size: 4vw;}
.access-tbl th{width: 30%;color: #4CACB9;font-weight: bold;}
.access-tbl td{line-height: 1.5;}
.access-tbl tr{border-bottom: 1px solid #dedede;}
.access-tbl tr:last-child{border-bottom: none;}

.qa{background: url("../images/qa_bg.jpg")repeat top center;background-size: 100%;padding: 10vw 0;}
.qa .qa_tit{margin: 0 auto 8vw;width: 56%;}
.faq-list {margin: 0 auto 0;width: 90%;}
.faq-list dl {margin: 0 auto 4%;font-feature-settings: "palt";padding: 2vw;background: #fff;box-shadow: 3px 2px 10px 2px rgb(185 185 185 / 30%);}
.faq-list dt {position: relative;padding: 4vw 10vw 4vw 6vw;background: #fff;cursor: pointer;width: 100%;}
.faq-list dt img{width: 15vw;position: absolute;left: 2vw;top: 48%;-moz-transform: translateY(-50%);-ms-transform: translateY(-50%);-webkit-transform: translateY(-50%);transform: translateY(-50%);}
.faq-list dt img.l2{top: 37%;}
.faq-list dt p{font-size: 5.7vw;font-weight: 400;padding-left: 14vw;line-height: 1.4;font-family: var(--mincho);}
.faq-list dt:before, .faq-list dt:after {content: '';background: #40d1c6;position: absolute;top: 0;right: 0;}
.faq-list dt:before {width: 16px;height: 2px;top: calc(50% - 0px);right: 16px;}
.faq-list dt:after {width: 2px;height: 16px;top: calc(50% - 10px);right: 23px;-webkit-transition: 0.3s;transition: 0.3s;transform: translate(0, 3px);}
.faq-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);}
.faq-list dd {border-top: 1px dashed #40d1c6;display: none;padding: 4vw 2vw 2vw;}
.faq-list dd p{font-size: 5vw;line-height: 1.8;font-weight:400;text-align: justify;text-justify: auto;}


.copy{color:#414141;text-align:center;font-feature-settings: "palt";letter-spacing: 0.06em;font-family: var(--mincho);width: 90%;margin: auto;padding: 4vw 0;font-size: 3.2vw;}
.fixed {position:fixed;z-index:25;bottom:0;}
.fixed .wrap{display: -webkit-box;display: flex;-webkit-box-pack: justify;justify-content: space-between;flex-wrap: wrap;}
.fixed .wrap a{width:100%;}


@-webkit-keyframes pulse {0% {-webkit-transform: scaleX(1);transform: scaleX(1)}
50% {-webkit-transform: scale3d(1.05,1.05,1.05);transform: scale3d(1.05,1.05,1.05)}
to {-webkit-transform: scaleX(1);transform: scaleX(1)}}

@keyframes pulse {
0% {-webkit-transform: scaleX(1);transform: scaleX(1)}
50% {-webkit-transform: scale3d(1.05,1.05,1.05);transform: scale3d(1.05,1.05,1.05)}
to {-webkit-transform: scaleX(1);transform: scaleX(1)}
}

@-webkit-keyframes pulse2 {0% {-webkit-transform: scaleX(1);transform: scaleX(1)}
50% {-webkit-transform: scale3d(1.05,1.05,1.05);transform: scale3d(1.05,1.05,1.05)}
to {-webkit-transform: scaleX(1);transform: scaleX(1)}}

@keyframes pulse2 {
0% {-webkit-transform: scaleX(1);transform: scaleX(1)}
50% {-webkit-transform: scale3d(1.02,1.02,1.02);transform: scale3d(1.02,1.02,1.02)}
to {-webkit-transform: scaleX(1);transform: scaleX(1)}
}

.animate__pulse {
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
  -webkit-animation-name: pulse;
animation-name: pulse;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
}

.animate__pulse2 {
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
  -webkit-animation-name: pulse2;
animation-name: pulse2;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
}

.other-salon{padding: 10vw 6vw;background: #f6feff;}
.other-salon .midashi{text-align: center;margin: 0 auto 12vw;}
.other-salon .midashi .jp{margin-bottom: 2vw;font-size: 9vw;font-family: var(--mincho); font-optical-sizing: auto;font-weight: 400; line-height: 1.1;letter-spacing: 0.6vw;display: block;}
.other-salon .midashi .en{font-size: 3.4vw;font-family: var(--mincho);display: block;color: #40d1c6;font-feature-settings: "palt";}

.other-salon dl{  margin: 0 auto 3vw;}
.other-salon dt{ background: #40d1c6;color: #fff; font-weight: bold; font-size: 110%;position: relative; padding: 4vw 4vw;  }
.other-salon dt span { color: #fff; font-weight: bold;  font-size: 110%; padding: 5px 0;}
.other-salon dd{display:none;padding: 4vw 0 0;}

.other-salon dd ul{display: -webkit-flex;display: -ms-flexbox;display: flex;-webkit-flex-wrap: wrap;-ms-flex-wrap: wrap;flex-wrap: wrap;-webkit-justify-content: space-between;-ms-flex-pack: justify;justify-content: space-between;}
.other-salon dd li{width: 49%;position: relative;border: 1px solid #4CACB9;background: #f5fff4;color: #4CACB9;font-weight: bold;text-align: center;font-size: 3.5vw;margin-bottom: 3vw;border-radius: 50vw;font-feature-settings: "palt";line-height: 1.3;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-pack: center;justify-content: center;-webkit-box-align: center;align-items: center;}
.other-salon li a{padding: 3vw 0;width: 100%;color: #4CACB9;}
.other-salon li a:after{ content: '\f105'; font-family: 'icon'; position: absolute; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); right: 3vw;}

.other-salon .accordion:after{content: "\f105";font-weight: normal;font-family: 'icon';position:absolute;transform:rotate(90deg);right:4vw;}
.other-salon .accordion.open:after{transform:rotate(-90deg);}

/* =============================================
pc-size
================================================*/
@media screen and (min-width: 736px) {
    
body { font-size: 14px;}
.sp { display: none;}
.pc { display: block;}
.wrapper{width:570px;margin:0 auto;box-shadow: 5px 2px 8px 5px rgb(185 185 185 / 71%);}

.hero{padding-bottom: 1858px;}
.cv-bnr{width: 522px;bottom: 40px;padding: 565px 0 40px;}
.cv-btn{width: 463px;}

.header{width:570px;margin: auto;}
.header-content{ width: 570px;margin: 0 auto;padding: 15px 13px;}
.header-content a{width: 245px;}
    
.compare{padding-bottom: 2130px;}
.voice{padding-bottom: 3285px;} 
.compare .cv-btn,.voice .cv-btn{bottom: 20px;}
.access iframe{height: 300px;margin-bottom: 20px;}
    
.access-info{padding: 35px;}
.access-ttl{padding: 14px 20px;border-left: 6px solid #4CACB9; font-size: 28px;}
.access-tbl{margin-bottom: 20px;}
.access-tbl th,.access-tbl td{font-size: 22px;}
    
.access-info li{padding: 35px;margin-bottom: 40px;}
.access-info .reserve{padding: 20px 0;font-size: 28px;border-radius: 40px;}
.access-info .reserve::after{right: 20px;}

.qa{padding: 80px 0 40px;}
.qa .qa_tit{margin: 0 auto 20px;width: 46%;}
.faq-list {margin: 0 auto 10%;width: 90%;}
.faq-list dl {margin: 0 auto 30px;padding: 10px;}
.faq-list dt {padding: 20px 42px 20px 20px;width: 100%;}
.faq-list dt img{width: 70px;left: 3px;}
.faq-list dt p{font-size: 28px;padding-left: 75px;}
.faq-list dt:before {width: 20px;top: calc(50% - 0px);right: 19px;}
.faq-list dt:after {font-size: 40px;top: calc(50% - 12px);right: 28px;height: 20px;}
.faq-list dd {padding: 20px 10px 20px;}
.faq-list dd p{font-size: 26px;}
	
.copy{padding: 30px 0;font-size: 20px;}
.fixed {width:570px;}
.fixed .wrap a{width:100%;}	

	
.other-salon{padding: 50px 35px;}
.other-salon .midashi{text-align: center;margin: 0 auto 40px;}
.other-salon .midashi .jp{margin-bottom: 10px;letter-spacing: 0.02em;font-size: 41px;}
.other-salon .midashi .en{font-size: 15px;}

.other-salon dl{margin: 0 auto 20px;}
.other-salon dt{font-size: 20px;padding: 20px 20px;}
.other-salon dt span { font-size: 20px; padding: 5px 0;}
.other-salon dd{FONT-WEIGHT: 200;padding: 20px 0 0;}

.other-salon dd ul{margin: 0 auto 20px;}
.other-salon dd li{font-size: 16px;margin-bottom: 14px;}
.other-salon dd a{padding: 10px 0;}
.other-salon dd a:after{ right: 10px;}

.other-salon .accordion:after{right: 20px;}
	
}





/* retina用
----------------------------------------------- */
@media screen and (min-width: 736px) and (-webkit-min-device-pixel-ratio: 2), screen and (min-width: 736px) and (min-resolution: 2dppx) {
    
.hero{background: url(../images/hero@2x.jpg) top center no-repeat;background-size: 100%;}
.hero .cv-bnr{background:url(../images/cv-bnr@2x.png)top center no-repeat;background-size: 100%;}

.compare{background:url(../images/comparison@2x.jpg)top center no-repeat;background-size: 100%;}
.voice{background:url(../images/voice@2x.jpg)top center no-repeat;background-size: 100%;}
.qa{background: url("../images/qa_bg@2x.jpg")repeat top center;background-size: 100%;}

}