@import url('https://fonts.googleapis.com/css2?family=Fira+Sans+Extra+Condensed&family=Noto+Sans+JP&display=swap');
html {width: 100%;height: 100%;}
body {display:block;width:100%;height:100%;font-family:'Noto Sans JP',sans-serif; background-color:#faf7f9}
img {width:100%;vertical-align:middle;}
ul {list-style:none;}
a {text-decoration:none;transition:opacity .3s;}
a:hover {opacity:.85;}
.sp {display:none;}
.pc {display:block;}
section {position:relative;}
h1, h2, h3, h4, h5, h6, p.tuku {font-family:'Noto Sans JP', sans-serif;font-weight:700;color:#1D1313;letter-spacing:.15em;}
p {font-size:13px;line-height:1.65;color:#1D1313;}
p.center {text-align:center;}
p.attention {font-size:12px;color:#666666;margin-top:5px;}
.header {position:fixed;background:#fff;top:0;left:0;width:100%;display:flex;justify-content:space-between;align-items:center;z-index:99;box-shadow:0px 3px 6px rgba(0, 0, 0, 0.11);}
.header .logo {width:24.6%;max-width:210px;margin-left:30px;}
.header a {text-decoration:none;}


#hero {width:100%;padding-top:77px;padding-bottom:0;position:relative;line-height:0;}
#hero h1{position:relative;width:100%;}
#hero div.cta_box{position:absolute;top:20%;right:9.9vw;width:26.7vw;}
#hero div.cta_box p{position:relative;width:100%; right:0;}
#hero div.cta_box ul{display:flex; margin:0 7.5%; position:absolute; bottom:5%;}
#hero span{position: absolute; bottom:10.6%; right:40.5%; width:6%}


.nav {display:flex;align-items:center;background:linear-gradient(90deg, #fff 0%, #fff 38%, #385a80 38%, #385a80 100%);justify-content:right;}
.nav h3{position:relative;display:inline-block;margin-left:30px;margin-right:10px;padding:4px 3px 4px 8px;color:#fff;background:#000;font-size:0.88rem;line-height:1;font-family: 'Noto Sans JP', sans-serif;}
.nav h3 em{font-weight:600; font-style:normal;}
.nav h3 span{font-size:0.75rem;}
.nav h3:after {position: absolute;top: 0;right: -10px;content: '';border-width: 11px 0 10px 10px;border-style: solid;border-color: transparent  transparent transparent #000;}
.nav div.tel,.nav div.line,.nav div.web{width:125px;align-items:center;padding:15px 0 15px ;margin:0 auto;}
.nav div.line{margin-right:14px;}
.nav .tel a {display:block;text-align:center;margin:0 auto;padding:12px 0; background:url("../img/freedial.png") no-repeat 13px 18px #ffe045;background-size:19px;transition:0.3s;}
.nav .web a{display:block;text-align:center;margin:0 auto;padding:12px 0;background:url("../img/web.svg") no-repeat 13px 15px #333333;background-size:17px;transition:0.3s;border-right:1px solid #fff;}
.nav .line a {display:block;text-align:center;margin:0 auto;padding:12px 0; background:url("../img/line.svg") no-repeat 13px 16px #06c755;background-size:15px;transition:0.3s;line-height:0;}
.nav a:hover {transform:translateY(1px);text-decoration:none;}
.nav .web a p,.nav .line a p{color:#fff;}
.nav .tel a p,.nav .web a p,.nav .line a p{font-size:0.88rem; text-indent:15px;}
section {position:relative;padding:0px 0 80px;}
section .inner {width:90%;max-width:960px;margin:0 auto;}



.pcarea{line-height:0;vertical-align:middle;}
#attention {padding-top:5%;}
#attention .inner {max-width:860px;}
#attention h2{line-height:2;}
#attention ul li {margin-top:30px;}
#attention ul li .q {border-bottom:1px solid #707070;margin-bottom:10px;padding-bottom:10px;}
#attention ul li .q p {font-size:15px;font-weight:500;font-weight:700;}
#attention p.bold {margin-top:20px;font-weight:600;}
#attention .more {margin:0 auto;cursor:pointer;}
#attention .more p {text-align:center;}
#attention .more p:after {content:"";transform:rotate(90deg);}
footer {text-align:center;background:#d7d9e0;}
footer p {text-align:center;padding:15px 0;font-family:'Noto Sans JP', sans-serif;font-weight:400;}
.scrollView {transition:all 1.2s 0s ease;opacity:0;transform:scale(1, 1) translate(0%, 20px);transition-delay:.25s;}
.scrollView.view {opacity:1;transform:scale(1, 1) translate(0%, 0%);}
#clinicinfo{background-color:#fff;}
#clinicinfo .infoarea{display:flex;}
#clinicinfo .gmap {flex-basis:58%;}
#clinicinfo .gmap iframe {width:100%;height:420px;}
#clinicinfo .addressinfo{flex-basis:40%;padding-left:2%;}
#clinicinfo .addressinfo p{border-bottom:1px solid #000;padding:2%;}
#clinicinfo .addressinfo .maplogo img{width:180px;padding:3% 0 5%;}
.slidearea * {margin:0;padding:0;}
.slider {width:80%;margin:0 auto 80px;}
.slick-slide img {width:100%;height:auto;}
.mypattern{width:100%;}
.mypattern .slick-slide{margin:5px;}
.slidearea{background:url("../img/slider_bg.png") no-repeat center top;background-size:cover;padding:1% 0 15% 0;}
#flow .inner h2{font-size:1.6rem;margin:0 auto;text-align:center;padding:15% 0 5% 0;}
#flow .inner .imgbox{width:100%;margin:0 auto;padding:1% 0;text-align:center;}
#flow .inner p{padding:4% 6% 15% 6%;font-size:0.95rem;line-height:2;}
#reason{background:url("../img/reason_txt_bg.jpg") repeat-y center;background-size:100%; padding:5% 0 17% 0;}
#reason h3{padding:0;width:100%;}
#reason p{padding:2% 5% 0 5%;font-size:0.95rem;line-height:2;color:#fff;}
#reason p.gray{ background-color:#f2f3f7;color:#1D1313;}
.cta_bg01{background:url("../img/reason_txt_bg.jpg") repeat-y center top;background-size:100%;}
.cta_bg02{background:url("../img/cta02_bg.png") repeat-y center top;background-size:100%;}
.cta_box{position:relative;}
.cta_box h5{position:relative;width:100%;padding:0 0 10% 0;}
.cta_box h5 img{position:relative;}
.cta_box ul{display:flex; margin:0 7.5%; position:absolute; bottom:10%;}
.cta_box li{margin:2% 1.5%;flex-basis:50%;}
.cta_box a{line-height:1;display:block;}
#casephoto{padding:20% 0 25% 0;}
#casephoto img.case_hairline{padding:17% 0 5% 0;}
#monitor h2,#attention h2,#clinicinfo h2{font-size:1.8rem;margin:0 auto;text-align:center;padding:10% 0 5% 0;}
#menu p{padding:2% 5% 2% 5%;font-size:0.95rem;line-height:2;}
#menu ul{display:flex; padding:4%;flex-wrap: wrap;}
#menu ul li{flex-basis: 46%;padding:2%;}
#menu ul li span{display:inline-block;background-color:#de2525;color:#fff;padding:0 5%;}
#pricelist{background:url("../img/cta02_bg.png") repeat-y center top;background-size:100%; padding:12% 0 5% 1%;}
#pricelist p{font-size: 0.8rem;margin: 0 auto;text-align: left;padding: 2% 5% 12% 5%;line-height: 1.7;color: #fff;}
#monitor{padding:10% 3% 5% 2%;}
#monitor h2{padding-bottom:15%;}
#monitor .toggle {display:none;}
#monitor .accordion{padding:6% 4% 6% 4%;}
#monitor .Label {padding:5% 15% 7% 14%;display:block;color:#fff;background: linear-gradient(90deg, #1b2e43 0%, #1b2e43 87%, #000 87%, #000 100%);line-height:1.7;border-radius:7px;position:relative;font-size:0.95rem; margin:3% 0;}
#monitor .Label span{font-size:2rem;font-family:'Fira Sans Extra Condensed', sans-serif;display:block;float:left;line-height:1.4;position:absolute;top:2%;left:3%;}
#monitor .Label::before{content:"";width:6px;height:6px;border-top:2px solid #fff;border-right:2px solid #fff;-webkit-transform:rotate(45deg);position:absolute;top:calc( 50% - 3px );right:18px;transform:rotate(135deg);}
#monitor .Label,#monitor .content {-webkit-backface-visibility:hidden;backface-visibility:hidden;transform:translateZ(0);transition:all 0.3s;}
#monitor .content {height:0;margin-bottom:10px;padding:0 20px;overflow:hidden;}
#monitor .content p{font-size:0.95rem;line-height:1.9;}
#monitor .toggle:checked + .Label + .content {/*開閉時*/height:auto;padding:3% 3% 10% 3%;transition:all .3s;}
#monitor .toggle:checked + .Label::before {transform:rotate(-45deg) !important;}
.drawer_hidden {display:none;}
.drawer_open {display:flex;height:45px;width:55px;justify-content:center;align-items:center;position:relative;z-index:100;cursor:pointer;top:0;right:0;}
.drawer_open span,.drawer_open span:before,.drawer_open span:after {content:'';display:block;height:1px;width:25px;border-radius:3px;background:#333;transition:0.5s;position:absolute;}
.drawer_open span:before {bottom:8px;}
.drawer_open span:after {top:8px;}
#drawer_input:checked ~ .drawer_open span {background:rgba(255, 255, 255, 0);}
#drawer_input:checked ~ .drawer_open span::before {bottom:0;transform:rotate(45deg);}
#drawer_input:checked ~ .drawer_open span::after {top:0;transform:rotate(-45deg);}
.index_content {width:100%;height:100%;position:fixed;top:0;left:100%; z-index:101;background:rgba(56, 90, 128, 0.95);transition:.5s;}
.index_list {list-style:none; padding:7%;}
.index_list a{color:#fff; display:block; padding:3% 0; font-size:0.95rem; line-height:1.4;}
#drawer_input:checked ~ .index_content {left:0;}
#clinicinfo h4{text-align:right;margin-bottom:20px;}
#clinicinfo h4 a{ display:inline-block; font-size:0.8rem;line-height:1;background:rgba(0, 0, 0, 1); color:#fff; padding:8px 20px; text-decoration:none; border-radius:17px;}
.campaignbanner{background:#f9e8ec; padding:0;}

.cta_box_all,cta_box_all img.allbtn{position:relative;}
.cta_box_all{width:92%; padding:0 0 2% 4%;}
.cta_all{padding:0 5% 2%;margin:0 auto;text-align:center;position:absolute;width:28%; top:14%;right:0;}
.cta_all ul{display:block; }
.cta_all li{margin:16% 0;display:block;}
.cta_all li.retouchbtn{margin:39% 0 14%;display:block;}
.cta_all a{line-height:1;display:block;}

@media (max-width:768px) {
.header .logo {width:136px;margin:0;padding:13px;}
section {padding:50px 0;}
section .inner {max-width:560px;}
footer p {font-size:11px;}
}

@media (max-width:960px) {
.sp {display:block;}
.pc {display:none !important;}
.header {background:none;position:absolute;top:0;left:0;width:100%;display:flex;justify-content:space-between;align-items:center;z-index:99;box-shadow:none;}
.drawer_open span,.drawer_open span:before,.drawer_open span:after {content:'';display:block;height:1px;width:25px;border-radius:3px;background:#fff;transition:0.5s;position:absolute;}
.nav {display:flex;position:fixed;bottom:0;left:0;width:100%;z-index:100;background:#000;justify-content:stretch;align-items:unset;}
.nav h3{position:absolute;margin:0 auto;padding:4px;color:#fff;background:#000;font-size:3.5vw;font-weight:600;line-height:1;width:100%;text-align:center; flex-basis:100%;}
.nav h3:after {position:inherit;content:none;border:none;}
.nav a p{font-size:0.9rem; text-indent:9%}
.nav div.tel,.nav div.line,.nav div.web{align-items:center;margin:0 auto;padding:4vw 0 0 0;flex-basis:100%;width:100%;font-weight:600;}
.nav .tel a {display:block;text-align:center;margin:0 auto;padding:4vw 0 4vw 5px; background:url("../img/freedial.png") no-repeat 3.7vw 5.8vw #ffe045;background-size:5.5vw;transition:0.3s;line-height:0;}
.nav .web a{display:block;text-align:center;margin:0 auto;padding:4vw 0 4vw 5px;background:url("../img/web.svg") no-repeat 3.7vw 5vw #333;background-size:4.6vw;transition:0.3s;line-height:0;}
.nav .line a {display:block;text-align:center;margin:0 auto;padding:4vw 0 4vw 5px; background:url("../img/line.svg") no-repeat 10.8vw 5.1vw #06c755;background-size:4.2vw;transition:0.3s;line-height:0;}
.nav .web a p,.nav .line a p{color:#fff;}
.header .index{position:absolute; top:0;right:0;}
#hero {width:100%;padding-top:0;position:relative;display:block;}
#hero,#hero h1{position:relative;width:100%;}
#hero div.cta_box{position:absolute;top:50%;left:0;width:100%;}
#hero div.cta_box p{position:relative;width:100%; right:0;}
#hero div.cta_box ul{display:flex; margin:0 7.5%; position:absolute; bottom:5%;}
#hero span{position: absolute; top:44911; right:4.5%; width:18%}
#clinicinfo .infoarea{display:block;width:100%;}
#clinicinfo .gmap iframe{width:100%;height:360px;}
#clinicinfo .addressinfo{padding-left:0;}
#clinicinfo .addressinfo p{font-size:3.6vw;}
#clinicinfo .addressinfo .maplogo img{width:180px;padding:5% 0;}
p {font-size:13px;}
}


@media (max-width:960px)and (min-width:768px) {
.nav h3{font-size:2.5vw;}
.nav .tel a {padding:2.5vw 0 2.5vw 5px;background:url("../img/freedial.png") no-repeat 6.7vw 3.8vw #ffe045; background-size:4vw;}
.nav .web a{padding:2.5vw 0 2.5vw 5px;background:url("../img/web.svg") no-repeat 6.7vw 3.4vw #333;background-size:3.2vw;transition:0.3s;line-height:0;}
.nav .line a {padding:2.5vw 0 2.5vw 5px;background:url("../img/line.svg") no-repeat 7.3vw 3.6vw #06c755; background-size:3vw;}
.nav .tel a p, .nav .web a p, .nav .line a p {font-size:2.7vw;}
.nav span.min {font-size:2vw;display:block;}
#hero {width:100%;padding-top:5%;position:relative;display:block;}
#hero h1{width:100%;}
#hero h2{position:absolute;top:8%;}
#hero h3{position:absolute;top:38.5%;}
#clinicinfo .addressinfo p{font-size:1.8vw;}
}


@media (min-width:961px){
.index{display:none;}
.pcarea{width:650px;margin:0 auto;padding:0 150px;line-height:0;}
}



/*アコーディオンメニュー*/
.answer {padding: 0;background:rgb(255,255,255,1)}
@media not all and (min-width: 768px){
.answer {padding: 0;}
}

/*
#pricelist h3{
padding:0 0 5% 0;
}
.scroll_list{
padding:0 0 15% 0;
}
.scroll_list > .list {
position: relative;
}
.scroll_list > .list > .title {
position: absolute;
top: 0;
left: 0;
width: 30%;
}
.scroll_list > .list > .title > img {
width: 98%;
padding-top: 3%;
}
.scroll_list > .list > .table {
margin-left: 30%;
overflow-x: scroll;
background: #fff;
box-sizing: border-box;
}
.pricetable > .list > .table > img {
border: solid 1px #C7D2D8;
width: 214%;
padding:0.7%;
max-width: none;
}
.artisttable > .list > .table > img {
border: solid 1px #C7D2D8;
width: 184%;
padding:0.7%;
max-width: none;
}
.scroll_bar::-webkit-scrollbar {
background-color: #fff;
border:none;
height:10px;
width: 120px;
}
.scroll_bar::-webkit-scrollbar-thumb {
background-color: #878B91;
border-radius:5px;
border:none;
}
.scroll_bar2::-webkit-scrollbar {
background-color: #fff;
border:none;
height:12px;
width: 120px;
}
.scroll_bar2::-webkit-scrollbar-thumb {
background-color: #878B91;
border-radius:6px;
border: 1px solid #fff;
}
.scroll_list > .icon {
margin: auto;
margin-right: 0;
margin-top: 10px;
margin-bottom: 0;
width: 96%;
margin-right: 5px;
}
*/



#pricelist h3{
padding:0 0 5% 0;
}
.artistrank img{margin:0 4% 5% 4%; width:92%;}
.scroll_list{
padding:0 0 2% 4%;
}
.scroll_list h5{padding: 1% 4% 1% 0;}
.scroll_list > .list {
position: relative;
}
.scroll_list > .list > .title {
position: absolute;
top: 0;
left: 0;
width: 21%;
}
.scroll_list > .list > .title > img {
width: 100%;
padding-top: 0;
}
.scroll_list > .list > .title > img.smp {
width: 100%;
padding-top: 3%;
}

.scroll_list > .list > .table {
margin-left: 21%;
overflow-x: scroll;
box-sizing: border-box;
}
.pricetable > .list > .table > img {
border: none;
width: 116%;
padding:0;
max-width: none;
}
.artisttable > .list > .title {
    position: absolute;
    top: 0;
    left: 0;
    width: 18%;
}
.artisttable > .list > .table {
    margin-left: 18%;
    overflow-x: scroll;
    box-sizing: border-box;
}
.artisttable > .list > .table > img {
border: none;
width:95%;
padding:0.7% 0;
max-width: none;
}
.scroll_bar::-webkit-scrollbar {
border:none;
height:10px;
width: 120px;
}
.scroll_bar::-webkit-scrollbar-thumb {
background-color: #878B91;
border-radius:5px;
border:none;
}
.scroll_bar2::-webkit-scrollbar {
border:none;
height:12px;
width: 120px;
}
.scroll_bar2::-webkit-scrollbar-thumb {
background-color: #878B91;
border-radius:6px;
}
.scroll_list > .icon {
margin: auto;
margin-right: 0;
margin-top: 10px;
margin-bottom: 0;
width: 96%;
margin-right: 5px;
}
.price_at{padding: 0 5% 5% 5%;}

@media (min-width:751px){
.scroll_list h5{padding: 1% 5% 1% 0;}
.scroll_list > .list > .title {width: 17%;}
.scroll_list > .list > .title > img {width: 100%; padding-top:0;}
.scroll_list > .list > .table {margin-left: 17%;}
.pricetable > .list > .table > img {border: none;width: 88.5%;padding: 0;max-width: none;}
.scroll_list > .icon {display:none;margin:0 0 0 0;}
.artisttable> .list > .title {position: absolute;top: 0;left: 0;width: 18%;}.scroll_list > .list > .title > img.smp {width: 100%;padding-top: 8%;}
.artisttable > .list > .table {margin-left: 18%;overflow-x: scroll;box-sizing: border-box;}
.artisttable > .list > .table > img {border: none;width: 95%;padding: 2% 0;max-width: none;}
}