@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@400;700&display=swap')
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@700&family=Noto+Serif+JP:wght@400;700&display=swap')

html {width: 100%;height: 100%;}
body {display:block;width:100%;height:100%;font-family:'Noto Serif JP', serif;font-weight: 400;font-style: normal;}
img {width:100%;}
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 Serif JP', serif;font-weight:700;color:#49423e;letter-spacing:.15em;}
p {font-size:13px;line-height:1.65;color:#49423e;}
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;}
.nav {display:flex;align-items:center;background:linear-gradient(90deg, #fff 0%, #fff 38%, #ccbdae 38%, #ccbdae 100%);justify-content:right;}
.nav h3{position:relative;display:inline-block;margin-left:30px;margin-right:10px;padding:2px 2px 3px 6px;color:#fff;background:#4b3422;font-size:0.88rem;line-height:1;font-family: "Noto Serif JP", serif;font-weight: 700;}
.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: 9px 0 10px 10px;border-style: solid;border-color: transparent  transparent transparent #4b3422;}
.nav div.tel,.nav div.line,.nav div.web{width:125px;align-items:center;padding:8px 4px 11px ;margin:0 auto;}
.nav div.line{margin-right:10px;}
.nav .tel a {display:block;text-align:center;margin:0 auto;padding:5px 0; background:url("../img/freedial.png") no-repeat 11px 11px #fff;background-size:19px;border-bottom:3px solid #e6e6e6;box-shadow:0 3px 1px #a97b7d;transition:0.3s;border-radius:7px;}
.nav .line a {display:block;text-align:center;margin:0 auto;padding:0 0 7px 0; background:url("../img/line.svg") no-repeat 10px 19px #06c755;background-size:15px;border-bottom:2px solid #00a62a;box-shadow:0 3px 1px #a97b7d;transition:0.3s;border-radius:7px; line-height:0;}
.nav .web a{display:block;text-align:center;margin:0 auto;padding:5px 0;background:url("../img/web.svg") no-repeat 10px 7px #e17594;background-size:17px;border-bottom:2px solid #be5276;box-shadow:0 3px 1px #a94161;transition:0.3s;border-radius:7px;}
.nav p {text-align:center;font-family: "Noto Serif JP", serif;font-weight:700;font-size:14px;line-height:1.6;display:block;text-indent:7px;}
.nav .line p {text-align:center;font-family:'Noto Sans JP', sans-serif;font-weight:700;font-size:14px;line-height:2;display:block;text-indent:7px; padding-top:3px;}
.nav span.min {font-family: "Noto Serif JP", serif;font-size:10px;font-weight:400;line-height:1.5;display:block;}
.nav .tel a p,.nav .tel a span{color:#49423e;}
.nav .line a p,.nav .web a p,.nav .line a span,.nav .web a span{color:#fff;}
.nav .line a div.catchcopy {
color: #fff;ffont-family: "Noto Serif JP", serif;font-size: 0.6rem;background: #e54a6b;border-radius: 8px;padding: 1px 5px;margin: 0 auto;display: inline;line-height:1;font-weight: 400;}
.nav a:hover {transform:translateY(3px);text-decoration:none;box-shadow:0 2px 0 #4c4c4c;}
section {position:relative;padding:80px 0 80px;}
section .inner {width:90%;max-width:960px;margin:0 auto;}
#hero {width:100%;padding-top:70px;padding-bottom:0;position:relative;line-height:0;}
#hero h1{position:relative;}
#hero h2{position:absolute;top:22%;left:4.5%;width:33%;}
#hero h3{position:absolute;bottom:4%;left:47%;width:48%;}
#hero p{position:absolute;top:28%;right:9%;width:35%;}
.pcarea{line-height:0;}
#attention {padding-top:12%;background:#fff;}
#attention .inner {max-width:860px;}
#attention h2{line-height:2; font-weight:400;}
#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;}
#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:#F5F5F5;}
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: #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%;}

#mens,#mens h2{position:relative;}
#mens p{position:absolute; bottom:8%; left:17%; width:66%;}

.cta{padding:1% 7% 2%;margin:0 auto;text-align:center;}
.cta h5{width:80%;padding:0 10% 3% 10%;}
.cta ul,.cta_all ul{display:block;}
.campaignbanner .cta ul{display:flex;}
.cta li{margin:2% 0 5%;}
.cta a{line-height:1;display:block;}



.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:#efe8e4;padding:3% 0 3% 0;}
#flow{background:#fff;}
#flow .inner h2{font-size:1.6rem;margin:0 auto;text-align:center;padding:15% 0 5% 0;}
#flow .inner .imgbox{width:86%;margin:0 auto;padding:5% 8% 5% 5%;text-align:center;}
#flow .inner p{padding:3% 7%;font-size:1.08rem;line-height:2;}
#flow .inner .infobox{padding-bottom:12%;}
#reason{background:url("../img/reason_bg02.jpg") no-repeat center bottom;background-size:cover; padding:15% 5.35% 12% 5.35%;}
#reason h3{padding:5% 0 3% 0;width:100%;}
#reason .bgwhite{background:#fff; padding-bottom:8%;}
#reason p{padding:2% 5.5% 12% 5.5%;font-size:1.08rem;line-height:2;}
#doctor{background:#eae1da; padding:11% 0 5% 0;}
#doctor .bgwhite{background:#fff; margin:0 5.35% 12% 5.35%; padding:5% 4.5% 12% 4.5%;}
#doctor p{font-size:1.08rem;line-height:2;}

.cta_box{background:url("../img/ctabox_20241112.png") no-repeat center top;background-size:96%;padding:76% 0 8% ;margin:10% 0 0 0;}
#menu .cta_box{background-size:100%;padding:80% 0 9% ;}
#step .cta_box{background-size:92%;}
#step .cta_box{padding:72% 0 8% ;}

.cta_box_all,cta_box_all img.allbtn{position:relative;}
.cta_box_all{width:92%; padding:0 0 2% 3%;}
.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:14% 0;display:block;}
.cta_all li.retouchbtn{margin:42% 0 14%;display:block;}
.cta_all a{line-height:1;display:block;}



#menu{background:url("../img/menu_bg.jpg") center center no-repeat;background-size:100% 100%;width:92%;padding:15% 4% 5%;}

#casephoto{background:url("../img/gback.jpg") center center no-repeat;background-size:100% 100%;width:92%;padding:15% 4%;}
#menu h2,#monitor h2,#attention h2,#clinicinfo h2{font-size:1.8rem;margin:0 auto;text-align:center;padding:3% 0 5% 0; font-weight:400;}
#casephoto h2{margin:0 auto;text-align:center;padding:3% 0 9% 0;}


#menu .bgwhite,#casephoto .bgwhite{background:#FFF;margin:0 auto;padding:5% 0 7%;}
#menu .bgwhite h4{margin:0 auto;text-align:center;padding:8% 7%;}
#menu .bgwhite h5{font-size:1.08rem;margin:0 auto;text-align:center;padding:7% 0 0 0;}
#menu .bgwhite p,#casephoto .bgwhite p{padding:2% 5% 2% 5%;font-size:1rem;line-height:1.9;}
#menu .imgbox{width:84%;margin:0 auto;padding:4% 0;}
#menu .imgbox2{width:92%;margin:0 auto;padding:4% 0;}
#pricelist{background:#fff;padding:12% 0 2% 1%;}
#pricelist h3{margin:0 4% 6%;text-align:center;padding:3% 0 4% 0;border-bottom:1px solid #60544c;}
#casephoto .imgbox{width:90%;margin:0 auto;text-align:center;padding:2% 0 4% 0;}
#step{padding:15% 0; background:#f7f1ed;}
#monitor h2{padding-bottom:4%;margin-bottom:10%; border-bottom:1px solid #60544c;}
.toggle {display:none;}


.accordion{background:#fff;padding:6% 4% 12% 4%;}
.Label {padding:5% 10% 6% 14%;display:block;color:#fff;background:#d18097;line-height:1.5;border-radius:3px;position:relative;font-size:1.15rem;}
.Label span{font-size:1.8rem;font-family:'Noto Serif JP', serif;display:block;float:left;line-height:1.5;position:absolute;top:2%;left:3%;}
.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);}
.Label,.content {-webkit-backface-visibility:hidden;backface-visibility:hidden;transform:translateZ(0);transition:all 0.3s;}
.content {height:0;margin-bottom:14px;padding:0 20px;overflow:hidden;}
.content p{font-size:0.95rem;line-height:1.7;}
.toggle:checked + .Label + .content {/*開閉時*/height:auto;padding:20px ;transition:all .3s;}
.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(232, 121, 140, 0.95);transition:.5s;}
.index_list {list-style:none; padding:7%;}
.index_list a{color:#fff; display:block; padding:3% 0; font-size:1rem; 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(232, 121, 140, 1); color:#fff; padding:8px 10px; text-decoration:none; border-radius:17px;}
.campaignbanner{background:#efe8e4;}
.campaignbanner,.campaignbanner h3{ position:relative;}
.campaignbanner h3{ position:relative;}
.campaignbanner .bg_babypink{position:absolute; top:3%; left:0;}
#caseslide{background: #efe8e4;}
#caseslide h2{width:80%; margin:0 auto; text-align:center; padding:3% 10% 1%;}
#apskin p{padding:0;margin:0 auto; line-height:0;}
.campaignbanner202406 {background: #efe8e4;padding: 0 0 20px 0;}
.cta_retouch{background:url("../img/box_retouch02.png") no-repeat center top;background-size:94%;padding:0 0 7% ;margin:0 0 0 0;}
.cta_retouch ul{width:78%; padding: 0 11%;}
.cta_retouch ul li:first-child{}
.cta_retouch ul li:last-child{padding:18% 0 0 0;}
.cta_removal{padding-bottom:8%;}
.cta_removal a img{width: 50%;  padding: 1% 25%;}
@media (max-width:768px) {header .logo {width:140px;margin:0;padding:11px;}
section {padding:50px 0 20px 0;}
section .inner {max-width:560px;}
footer p {font-size:11px;}
#menu .what ul h4 {text-align:center;}
}


@media (max-width:960px) {
.sp {display:block;}
.pc {display:none !important;}
.nav {display:flex;position:fixed;bottom:0;left:0;width:100%;z-index:100;background:#ccbdae;justify-content:stretch;align-items:unset;font-family: 'Noto Serif JP';font-weight: 400;}
.nav h3{position:absolute;display:block;margin:0 auto;padding:3px;color:#fff;background:#4b3422;font-size:3.7vw;font-family:'Noto Serif JP', serif;font-weight:700;line-height:1;width:100%;text-align:center;}
.nav h3:after {position:inherit;content:none;border:none;}
.nav div.tel,.nav div.line,.nav div.web{align-items:center;padding:1.5% 1% 0 0.4%;margin:4.5% auto 1% auto;width:82%;}
.nav div.tel{padding-left:1.2%;}
.nav div.web{padding-left:1.2%;}
.nav div.line{padding-right:1.2%;}
.nav .tel a {display:block;font-family:'Noto Serif JP', serif; text-align:center;margin:0 auto;padding:10px 0; background:url("../img/freedial.png") no-repeat 2.3vw 3.9vw #fff;background-size:5vw;box-shadow:0 3px 1px #a97b7d;transition:0.3s;border-radius:7px;}
.nav .line a {display:block;text-align:center;margin:0 auto;padding:0 0 4px 0; background:url("../img/line.svg") no-repeat 8vw 5.5vw #06c755;background-size:3.7vw;box-shadow:0 2px 1px #816e5f;transition:0.3s;border-radius:4px;line-height:0;}
.nav .web a{display:block;text-align:center;margin:0 auto;padding:4px 0;background:url("../img/web.svg") no-repeat 8vw 4vw #e17594;background-size:4.6vw;box-shadow:0 2px 1px #a94161;transition:0.3s;border-radius:3px;}
.nav p {font-size:3.9vw;text-align:center;line-height:1.45;text-indent:3.5vw;letter-spacing:0.2vw;}
.nav .line p {font-size:3.9vw;text-align:center;line-height:1.9; padding-top:5px; text-indent:0;letter-spacing:0.3vw;}
.nav span.min{font-size:2.7vw;display:block;}
header .index{position:absolute; top:0;right:0;}
#hero {width:100%;padding-top:7%;position:relative;display:block;}
#hero h1{position:relative;width:100%;}
#hero h2{position:absolute;top:10.5%;left:4%;width:64.4%;}
#hero h3{position:absolute;top:39.5%;left:5%;width:91.5%;}
#hero p{position:absolute;top:58%;left:3%;width:94%;}
#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:3vw;}
.nav div.tel,.nav div.line,.nav div.web{align-items:center;padding:2% 0.8%;margin:3% auto 0 auto;width:100%;}
.nav div.tel{padding-left:1.2%;}
.nav div.web{padding-right:1.2%;}
.nav .tel a {padding:10px 1vw;background:url("../img/freedial.png") no-repeat 4.5vw 17px #fff;background-size:27px;}
.nav .line a {padding:0 1vw 4px 1vw; background:url("../img/line.svg") no-repeat 3.5vw 22px #06c755;background-size:24px;}
.nav .web a{padding:12px 1vw 5px 1vw; background:url("../img/web.svg") no-repeat 5vw 13px #f7b22;background-size:24px;}
.nav p {font-size:3vw;}
.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;}
.cta{padding:3% 2% 4%;margin:0 auto;text-align:center;}
.cta h5{width:60%;padding:0 20%;}
.cta ul{display:flex;}
.cta li{margin:2% 2%;flex-basis:50%;}
}


@media (min-width:961px){
body{background:#f9f3ef;}
.index{display:none;}
.pcarea{width:650px;margin:0 auto;padding:0 150px;line-height:0;}
.campaignbanner{background:#efe8e4; padding:25px 0 30px 0; }
.campaignbanner .bg_beige{top:5%; left:5%;}
.campaignbanner .bg_beige .cta{padding:7% 0;margin:0 5%;text-align:center;}
}



/*アコーディオンメニュー*/
#menu h2{padding: 3% 0 7% 0;}
summary {list-style: none;position: relative;padding: 30px 70px 30px 30px;cursor: pointer;background-color: #fff;line-height: 1;
font-size: 1rem;font-family:'Noto Serif JP', serif;font-weight:400;border-radius: 7px;border:1px solid #ddde;box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .2);}
@media not all and (min-width: 768px){
summary {padding: 20px 50px 20px 20px;}
}
summary::-webkit-details-marker {display: none;}
summary:hover, details[open] summary {background-color: #fff;font-size: 1rem;font-family: sans-serif;}
summary::after {content: '+';position: absolute;top: 48%;right: 30px;transform: translateY(-50%);transition: transform 0.5s;font-size: 30px;}
details[open] summary::after {transform: translateY(-50%) rotate(45deg);}
.answer {padding: 0;background:rgb(255,255,255,1)}
@media not all and (min-width: 768px){
summary::after {right: 20px;font-size: 25px;font-weight:700;}
.answer {padding: 0;}
}
details[open] .answer {animation: fadein 0.5s ease;}
@keyframes fadein {0% { opacity: 0; }100% { opacity: 1; }}
body, p {margin: 0;}
details {margin-bottom: 10px;margin-right: auto;margin-left: auto;width: 600px;}
@media not all and (min-width: 640px){
details {width: 100%;}
}
details:first-of-type {margin-top: 20px;}
.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: 4%;
}
.scroll_list > .list > .title > img.smp {
width: 100%;
padding-top: 3%;
}

.scroll_list > .list > .table {
margin-left: 21%;
overflow-x: scroll;
background: #fff;
box-sizing: border-box;
}
.pricetable > .list > .table > img {
border: none;
width: 114%;
padding:0.7% 0;
max-width: none;
}
.artisttable > .list > .title {
    position: absolute;
    top: 0;
    left: 0;
    width: 19%;
}
.artisttable > .list > .table {
    margin-left: 19%;
    overflow-x: scroll;
    background: #fff;
    box-sizing: border-box;
}
.artisttable > .list > .table > img {
border: none;
width:92%;
padding:0.7% 0;
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;
}
.price_at{padding: 0 5% 5% 5%;}

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