@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;}
.bold{font-weight: bold;color: #AD9D73;}
.indent{display: block; text-indent: -1em;padding-left: 1em;}
.mr5{margin-right: 5px;}

/* font
----------------------------------------------- */
:root {
--mincho: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "MS P明朝", serif;
--gothic: 游ゴシック体, 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;}

.actn{ position: relative; background: url("../images/cv.png") no-repeat top center;background-size: 100%; padding-bottom: 126vw; width: 92vw;}
.actn-btn{ position: absolute;left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); bottom: 4vw; width: 90%; }
.actn-box{ margin: 8vw auto 10vw;}
.actn-box .actn{margin: auto;}

.yureru-updown {animation: yureru-updown 2s infinite;}
@keyframes yureru-updown {0% {transform: translate(0px, 4px);}5% {transform: translate(0px, -4px);}10% {transform: translate(0px, 4px);}15% {transform: translate(0px, -4px);}20% {transform: translate(0px, 4px);}25% {transform: translate(0px, -4px);}30% {transform: translate(0px, 0px);}}

.hero{position: relative; background: url("../images/hero-top.png") no-repeat top center;background-size: 100%;padding-bottom: 341vw;}
.hero h1{position: absolute;left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); width: 94vw; top: 86vw;}
.hero .actn{position: absolute;left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); bottom: 10vw;}

.slide{position: absolute;left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); top: 119vw;}
.slide-item{width:66vw;}
.slide-item img{width: 90%;margin: 0 auto;}
.slide{opacity: 0;transition: opacity .3s linear;}
.slide.slick-initialized{  opacity: 1;}

.salon{background: url("../images/salon_bg01.jpg") no-repeat top center, url("../images/salon_bg02.jpg") no-repeat bottom center, #cb92a8; background-size: 100%;padding: 10vw 6vw 12vw; }
.salon .midashi{ width: 74vw; margin: 0 auto 6vw;}
.salon dl{ background: #fbf6f8; margin-bottom: 4vw; }
.salon dt{ color: #97865e; font-weight: bold; text-align: center; position: relative; padding: 4vw; font-size: 5.5vw; }
.salon dt:hover{cursor: pointer;}
.salon dd{display:none; padding: 0 4vw 6vw;}
.salon dd img{margin-bottom: 2vw;}
.salon .accordion:before, .salon .accordion:after {content: '';background: #97865e;position: absolute;top: 0;right: 0;}
.salon .accordion:before {width: 14px;height: 1.5px;top: calc(50% - 1px);right: 16px;}
.salon .accordion:after {width: 1.5px;height: 14px;top: calc(50% - 10px);right: 22px;-webkit-transition: 0.3s;transition: 0.3s;transform: translate(0, 3px);}
.salon .accordion.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);}

.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: #97865e;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;}
.access-tbl .tel { display: inline; font-size: 6.5vw; font-family: adobe-garamond-pro; font-weight: 400; letter-spacing: .02em; }
.access-tbl .tel:before {content: "\f095";font-family: icon; font-size: 70%; margin-right: 4px;}

.links li:first-child{ margin-bottom: 4vw; }
.link-btn{ position: relative; background: #97865e; color: #fff; font-weight: bold; text-align: center; border-radius: 50vw; padding: 4vw; font-size: 4vw; }
.link-btn::after{content: '\f105';font-family: 'icon';position: absolute;top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%);right: 4vw;}

.qa{padding: 15vw 0;}
.qa .qa_tit{margin: 0 auto 11vw; width: 55vw;}
.faq-list {margin: 0 auto;width: 90%;}
.faq-list dl {margin: 0 auto 5vw;}
.faq-list dt {position: relative;padding: 3vw 10vw;background: #f8f1e6;cursor: pointer;}
.faq-list dt span{font-family: adobe-garamond-pro; color: #97865e; position: absolute; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); left: 2.5vw; font-size: 5.5vw; }
.faq-list dt p{font-weight: bold;color: #444;line-height: 1.4;font-size: 4.4vw;}
.faq-list dt:before, .faq-list dt:after {content: '';background: #888;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 {display: none;padding-top: 3vw;}
.faq-list dd p{line-height: 1.8;text-align: justify;text-justify: auto;font-size: 3.7vw;}
.faq-list dl:first-child dd{display: block;}

.ctc{background:#fae6e8;padding: 5vw 5vw 10vw;}
.ctc .title{margin: 0 auto 8vw;}
.ctc p{line-height: 1.8;margin-bottom: 4vw; font-size: 3.8vw;}
.ctc form#mailformpro .att{text-indent: -1em; padding-left: 1em; margin-bottom: 0;}
.ctc .att a{display: inline; font-weight: bold; color: #cb92a8;}
form#mailformpro dl:nth-last-child(2) label.checkbox04-label{margin-bottom: 5px;}

.formintor{margin-bottom: 5vw;}
.formintor p{line-height: 1.5;}
.ctcbox{background: #fff;padding: 5%;-moz-border-radius: 8px;-webkit-border-radius: 8px;border-radius: 8px;margin-top: 8vw;}
.ctcbox .strong{color: #ff5353;font-weight: bold;}
.ctcbox .privacy-in{border: 1px solid #ddd;margin: 0px auto 10px;padding: 3%;}
.privacy-in iframe{width: 100%;}
form#mailformpro .item-box{font-size: 18px;}
form#mailformpro .item-box label{width: 100%;}
form#mailformpro .item-box input{width: auto;margin: 3px 5px 3px 3px;}
form#mailformpro .item-box .other{font-size: 90%;margin-top: 2%;}
form#mailformpro .item-box .other input{display: block; width: 100%;}
.mb3{margin-bottom: 3%;}
.ctcbox .bold{display: block; font-weight: bold;color: #ff5353;}
.ctcbox .sub{width: 100%;margin: 0 auto 3vw;}
.ctcbox .link-bnr{margin: 3vw 0;}

.fix-bottom{position: fixed;bottom: 0;z-index: 10;}
.fix-bottom a{width:100%;}

.footer{padding: 5vw 0 26vw;}
.footer p{text-align: center; letter-spacing: 0.08em;}

.header-logo{ z-index: 10; position: absolute; left: 3vw; top: 3vw; width: 30vw;}
.sec-hero{background: #fae6e8;position:relative;padding: 25vw 0 15vw;margin-bottom: 6%;}
.sec-hero .ttl-img{width: 64vw;margin: 0 auto;}
.second-footer{padding: 0 0 8vw;}
.thanks{min-height: 96vh;}
.thanks .inner{width:90%;margin: 0 auto;padding-bottom: 20vw;}
.thanks .inner p{margin-bottom:4%;line-height: 1.8;}
.thanks .inner a{background: #cb92a8;margin: 8% 0 0 0;font-size: 3.8vw;text-align: center;color: #fff;padding: 5% 2%;font-weight: bold;}


/* =============================================
pc-size
================================================*/
@media screen and (min-width: 736px) {
    
body { background-attachment: fixed; font-size: 16px;}
body:before { position:fixed; top: 0; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); z-index:-1; width:2000px; height:2000px; background:url("../images/bg.jpg") no-repeat #fff; -webkit-background-size:contain; background-size:contain;content:"";}
.sp { display: none;}
.pc { display: block;}
.wrapper{width:570px;margin:0 auto;box-shadow: 5px 2px 8px 5px rgb(185 185 185 / 71%); background: #fff; }

.header{width:570px;}
.fix-bottom{width:570px;}
    
.actn{ padding-bottom: 715px; width: 530px;}
.actn-btn{ bottom: 20px; }
.actn-box{margin: 40px auto 80px;}

.hero{ padding-bottom: 1950px;}
.hero h1{ width: 530px; top: 500px;}
.hero .actn{ bottom: 70px;}

.slide{ top: 680px;}
.slide-item{width:360px;}

.salon{ padding: 100px 30px 70px; }
.salon .midashi{ width: 420px; margin: 0 auto 40px;}
.salon dl{ margin-bottom: 30px; }
.salon dt{ padding: 20px; font-size: 26px; }
.salon dd{ padding: 0 20px 30px;}
.salon dd img{margin-bottom: 10px;}
.salon .accordion:before {width: 16px;height: 2px;top: calc(50% - 0);right: 16px;}
.salon .accordion:after {width: 2px;height: 16px;top: calc(50% - 10px);right: 23px;}
	
.access-tbl{margin-bottom: 20px;}
.access-tbl th,.access-tbl td{padding: 20px;font-size: 20px;}
.access-tbl .tel { font-size: 30px; }

.links{ display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-pack: justify; justify-content: space-between; }
.links li{width: 49%;}
.links li:first-child{ margin-bottom: 0; }
.link-btn{ padding: 20px 15px; font-size: 17px; }
.link-btn::after{right: 15px;}
	
.qa{padding: 100px 0 50px;}
.qa .qa_tit{margin: 0 auto 50px; width: 300px;}
.faq-list dl {margin: 0 auto 30px;}
.faq-list dt {padding: 15px 50px 15px 55px;}
.faq-list dt span{ left: 15px; font-size: 30px; }
.faq-list dt p{font-size: 24px;}
.faq-list dt:before{width: 20px;right: 14px;}
.faq-list dt:after {height: 20px;top: calc(50% - 12px);}
.faq-list dd {padding-top: 15px;}
.faq-list dd p{font-size: 20px;}

.ctc{padding: 30px;}
.ctc .title{ margin: 0 auto 50px;}
.ctc p{font-size:22px;}
.ctc form#mailformpro p{font-size:18px; margin-bottom: 15px;}
.ctc .copy{font-size:20px;margin: 30px 0 0 0;}
    
.formintor{margin-bottom: 20px;}
.formintor p{font-size: 18px;}
.ctcbox{-moz-border-radius: 12px;-webkit-border-radius: 12px;border-radius: 12px;margin: 50px 0;padding: 5% 5% 8%;}
.ctcbox .privacy-in{padding: 1%;}
.ctcbox .sub{width: 100%;margin: 0 auto 20px;}
.ctcbox .link-bnr{margin: 10px 0;}
    
.privacy p{font-size: 14px; margin-bottom: 30px; }
.privacy dl{margin-bottom: 30px; }
.privacy dt{font-size: 14px;margin-bottom: 10px;padding: 8px 14px;}
.privacy dd{font-size: 14px;margin-bottom: 20px;}
.privacy iframe{padding: 20px;}
    
.footer{padding: 20px 0 140px;}
    
.header-logo{ left: 20px; top: 20px; width: 130px;}
.sec-hero{padding:140px 0 100px;margin-bottom: 40px;}
.sec-hero .ttl-img{width: 350px;}
.second-footer{padding: 0 0 100px;}
.thanks .inner{padding-bottom: 100px;}
.thanks .inner p{font-size: 16px;}
.thanks .inner a{padding:20px;margin: 60px auto;font-size: 18px;}
    
}


/* retina用
----------------------------------------------- */
@media screen and (min-width: 736px) and (-webkit-min-device-pixel-ratio: 2), screen and (min-width: 736px) and (min-resolution: 2dppx) {
    
body:before { background:url("../images/bg@2x.jpg") no-repeat #fff; -webkit-background-size:contain; background-size:contain;}
.actn{ background: url("../images/cv@2x.png") no-repeat top center;background-size: 100%; }
.hero{ background: url("../images/hero-top.png") no-repeat top center;background-size: 100%; }
.salon{background: url("../images/salon_bg01@2x.jpg") no-repeat top center, url("../images/salon_bg02@2x.jpg") no-repeat bottom center, #cb92a8; background-size: 100%; }

}