@charset "UTF-8";

/* default
----------------------------------------------- */
* { -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:#111; font-family: 游ゴシック体, YuGothic, 'Yu Gothic', "游ゴシック Medium", "Yu Gothic Medium", 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif; font-size:3.6vw; line-height:1.8;}
article, aside, canvas, details, figcaption, figure, header, footer, hgroup, main, menu, nav, section, summary { display: block; }
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%;width: 100%;}
*:before, *:after { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; -moz-transition: all 0.4s cubic-bezier(0.05, 0.05, 0.31, 0.97); -o-transition: all 0.4s cubic-bezier(0.05, 0.05, 0.31, 0.97); -webkit-transition: all 0.4s cubic-bezier(0.05, 0.05, 0.31, 0.97); transition: all 0.4s cubic-bezier(0.05, 0.05, 0.31, 0.97); }
a { color: #28282d; text-decoration: none; display: block; -moz-transition: all 0.4s cubic-bezier(0.05, 0.05, 0.31, 0.97); -o-transition: all 0.4s cubic-bezier(0.05, 0.05, 0.31, 0.97); -webkit-transition: all 0.4s cubic-bezier(0.05, 0.05, 0.31, 0.97); transition: all 0.4s cubic-bezier(0.05, 0.05, 0.31, 0.97); }
.pc { display: none; }
.sp { display: block; }

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

/* common
----------------------------------------------- */
.container p{line-height: 1.8;margin-bottom: 4vw;}

/* header sp
----------------------------------------------- */
.header{position: fixed;z-index: 3;padding: 2vw 2vw 2vw 5vw;-moz-transition: all 0.4s cubic-bezier(0.05, 0.05, 0.31, 0.97);-o-transition: all 0.4s cubic-bezier(0.05, 0.05, 0.31, 0.97);-webkit-transition: all 0.4s cubic-bezier(0.05, 0.05, 0.31, 0.97);transition: all 0.4s cubic-bezier(0.05, 0.05, 0.31, 0.97);}
.header-content{display: -webkit-flex;display: flex;-webkit-justify-content: space-between;justify-content: space-between;-webkit-align-items: center;align-items: center;}
.header-content .logo{width: 32%;}
.header-right{width: 44%;}
.header-content .logo img{width: 100%;}
.header.active {background-color: rgba(255, 255, 255, 0.9);}

/* footer sp
----------------------------------------------- */
.footer{margin: 0 auto; padding: 3.2vw;font-family: futura-pt, sans-serif;font-weight: 400;}
.footer .copyright{text-align: center;margin-bottom: 0;font-size: 3.4vw;}

/* cv
----------------------------------------------- */
.cv{position: absolute;width: 90%;transform: translateX(-50%);left: 50%;}
.cv a{position:absolute;bottom: 29vw;left:50%;-moz-transform: translate(-50%,124%);-ms-transform: translate(-50%,124%);-webkit-transform: translate(-50%,124%);transform: translate(-50%,124%);width: 90%;}
.yureru-updown {animation: yureru-updown 2s infinite;}
@keyframes yureru-updown {0% {transform: translate(0px, 3px);}5% {transform: translate(0px, -3px);}10% {transform: translate(0px, 3px);}15% {transform: translate(0px, -3px);}20% {transform: translate(0px, 3px);}25% {transform: translate(0px, -3px);}30% {transform: translate(0px, 0px);}}

/* hero
----------------------------------------------- */
.hero{position: relative;}
.hero .cv{z-index: 1;bottom: 2vw;}

/* contents
----------------------------------------------- */
.top-slider{padding: 2vw 0;}
.top-slider .slid-items img{width: 44vw;margin: 0 1vw;}
.top-slider .slick-slider{margin-top: 0;}

.onayami{position: relative ; z-index: 2;}
.solution{margin-top: -20vw;position: relative;z-index: 1;}
.recommend{position: relative;}
.recommend .cv{bottom: 10vw;}
.case{background: url(../images/case.jpg) top center no-repeat;background-size: 100%;padding: 70vw 0 32vw;}
.case .slick-prev, .case .slick-next{width: 12vw;margin: 0;}
.case_items img{width: 80vw;margin: 0 3vw;}
.feature{margin-bottom: 7vw;}
.treatment{width: 90%; margin: 0 auto;}
.treatment{margin-bottom: 10vw;}
.consultation{position: relative;margin-bottom: 8vw;}
.consultation:last-of-type{margin-bottom: 0;}
.salon{width: 100%;margin: 0 auto 8vw;position: relative;}
.solon-text{position: absolute;width: 12%;top: 50vw;left: 8vw;}
.solon01{width: 70%;margin: 0 0 10vw auto;}
.salon .ttl{text-align: center;font-family: var(--mincho);font-size: 5vw;margin-bottom: 6vw;line-height: 1.5;}
.salon .salon-contents{width: 90%; margin: 0 auto;}
.salon .inner{margin-bottom:6vw;}
.salon .inner p{margin-bottom: 2vw;}
.salon .inner p:last-child{margin-bottom: 0;}
.salon .inner p span{display: block;background: #edf1f2;padding-left: 2vw;font-size: 90%;font-weight: bold;}
.salon dl {display: flex;}
.salon dl:first-of-type dd{border-top: 1px solid #e8e8e8;}
.salon dt {font-size: 5vw;line-height: 1.5;font-weight: bold;width: 26%;border-bottom: 1px solid #ffffff;line-height: 1;display: flex;align-items: center;justify-content: center;font-size: 3.4vw;background: #edf1f2;}
.salon dd {margin-bottom: 0vw;width: 80%;line-height: 1.6;padding: 4% 0 4% 4%;border-bottom: 1px solid #e8e8e8;font-size: 3.6vw;text-align: left;}
.map {height: 300px;margin-bottom:6vw;}
.root {display: -webkit-flex;display: flex;-webkit-justify-content: space-between;justify-content: space-between;-webkit-align-items: center;align-items: center;}
.root li {width: 48%;margin: 0 0.5vw;}
.root li a {padding: 8px;color: #fff;position: relative;font-weight: bold;text-align: center;background: #222;letter-spacing: 0.1em;border-radius: 50px;}
.root li a:after {content: "\f105";margin-left: 10px;font-weight: normal;font-family: 'icon';}
.root .googlemap a:before { content: "\f041"; margin-right: 4%; font-family: icon; display: inline-block; }
.root .googleroot a:before { content: "\f183"; margin-right:4%; font-family: icon; display: inline-block; }


/* =============================================
pc-size
================================================*/
@media screen and (min-width: 736px) { 

body {font-size: 18px;background: #fdf5f3;}
body:before {position:fixed;top: 0;left: 50%;transform: translateX(-50%);-webkit-transform: translateX(-50%);-ms-transform: translateX(-50%);z-index:-1;width:2000px;height: 4000px;-webkit-background-size:contain;background-size: contain;content:"";background: #f0ece6;}
.wrapper{width: 570px;background: #fff;margin: 0 auto;overflow-x: hidden;box-shadow: 0px 0px 8px 4px rgb(140 140 140 / 20%);}

/* common
----------------------------------------------- */
.container p{margin-bottom: 30px;}

/* header 
----------------------------------------------- */
.header{padding: 10px 14px 12px 30px;width: 570px;overflow: hidden;}
.header-content{display: -webkit-flex;display: flex;-webkit-justify-content: space-between;justify-content: space-between;-webkit-align-items: center;align-items: center;}
.header-right{width: auto;}
.header .logo{width: 32%;}
.header .reserve{width: 235px;margin-left: 14px;}

/* footer 
----------------------------------------------- */
.footer{padding: 0 20px 20px;}
.footer .copyright{letter-spacing: .08em;font-size: 16px;}

/* cv
----------------------------------------------- */
.cv{width: 90%;}
.cv a{bottom: 168px;width: 90%;}

/* herointro
----------------------------------------------- */
.hero .cv{margin: 0;bottom: 10px;}

/* contents
----------------------------------------------- */
.top-slider{padding: 10px 0;}
.top-slider .slid-items img{width: 270px;margin: 0 6px;}
.top-slider .slick-slider{margin-top: 0;}

.solution{margin-top: -120px;}
.recommend{position: relative;}
.recommend .cv{bottom: 60px;}
.case{padding: 275px 0 180px;}
.case_items img{width: 450px;margin: 0 15px;}
.case .slick-prev, .case .slick-next{width: 65px;margin: 0;}
.feature{margin-bottom: 40px;}
.treatment{margin-bottom: 55px;}
.consultation{margin-bottom: 40px;}
.salon{margin-bottom: 45px;}
.solon-text{top: 280px;left: 45px;}
.solon01{margin-bottom: 60px;}
.salon .ttl{font-size: 30px;margin-bottom: 20px;}
.salon .inner{margin-bottom: 30px;}
.salon .inner p{margin-bottom: 10px;}
.salon .inner p span{padding-left: 6px;}
.salon dl {margin-bottom: 0;}
.salon dt {font-size: 16px;margin-bottom: 0;}
.salon dd {font-size: 18px;}
.map{margin-bottom: 30px;}
.root li {margin: 0 6px;}
.root li a{font-size: 20px;}
.root .googlemap a:before { margin-right: 20px;}
.root .googleroot a:before { margin-right:20px;}
}

/* =============================================
 retina-size
================================================*/
@media screen and (min-width: 736px) and (-webkit-min-device-pixel-ratio: 2), screen and (min-width: 736px) and (min-resolution: 2dppx) {
.case{background-image :url("../images/case@2x.jpg") ;}
}