@charset "utf-8";

:root{
	--header-top-height: clamp(28rem, calc(40 / var(--inr) * var(--font-ref)), 40rem);
	--section-gap: clamp(58rem, calc(70 / var(--inr) * var(--font-ref)), 70rem);
}
body{ background: var(--bg-3); }
body.drawerExpanded{ overflow: hidden; }

/* font */
@media(max-width:767px){
	#wrap{
		.font-a{ font: 16rem/1.68 var(--font-chw); }
		.font-b{ font: 20rem/1.65 var(--font-chw); }
		.font-c{ font: 700 20rem/1.3750375 var(--font-goyo); }
		.font-d{ font: 700 16rem/1.66666667 var(--font-goyo); }
		.font-e{ font: 14rem/1.7776 var(--font-goyo); }
		.font-f{ font: 12rem/1.66666667 var(--font-goyo); }
	}
}

/* kurokakko */
.kurokakko{ display: inline-block; width: .90909091em; aspect-ratio: 60/19; background: url('/images/common/kurokakko.svg') no-repeat 100% 0 / contain; }
.kurokakko-start{ margin-bottom: 1px;}
.kurokakko-end{ rotate: 180deg; margin-top: 1px; }

/* kagikakko */
.kagikakko{ display: inline-block; width: 1em; aspect-ratio: 60/30; background: url('/images/common/kagikakko.svg') no-repeat 100% 0 / 66.66666667%; }
.kagikakko-end{ rotate: 180deg; }

/* yamakakko */
.yamakakko{ display: inline-block; width: .93333333em; aspect-ratio: 60/18; background: url('/images/common/yamakakko.svg') no-repeat 100% 0 / contain; }
.yamakakko-start{ margin-bottom: 1px; }
.yamakakko-end{ rotate: 180deg; margin-top: 1px; }


/* inner */
@media(width>=1280px){
	.inr{ position: relative; margin: 0 auto; width: calc( 100% - (var(--section-gap) * 2)); }
}
@media(width<1280px){
	.inr{ position: relative; margin: 0 auto; max-width: calc(var(--inr) * 1rem); width: calc(var(--inr-width) * 100%); }
}

.inr-narrow{ max-width: calc(var(--inr-narrow) * 1rem); }
.inr-wide{ max-width: calc(var(--inr-wide) * 1rem); }

/* common */
.bg-color-3{ background: var(--bg-6); }
#wrap .font-goyo{ font-family: var(--font-goyo); }
#wrap .writing-initial{ -webkit-writing-mode: initial; -ms-writing-mode: initial; writing-mode: initial; }
.common-title{ width: 100%; font: clamp(20rem, calc(33.33 / var(--inr) * var(--font-ref)), 33.33rem)/1.65 var(--font-chw); -webkit-writing-mode: vertical-rl; -ms-writing-mode: tb-rl; writing-mode: vertical-rl; }
.common-subTitle{ font: 600 var(--fs22) var(--font-goyo); }
.common-description{ font: var(--fs18)/1.7776 var(--font-goyo); }
.common-link{ display: inline-block; padding: clamp(7rem, calc(17 / var(--inr) * var(--font-ref)), 17rem) clamp(26rem, calc(66 / var(--inr) * var(--font-ref)), 66rem); border: 2rem solid currentColor; border-radius: 5em; font: clamp(14rem, calc(20 / var(--inr) * var(--font-ref)), 20rem) var(--font-goyo); }
.writing-mode-initial{ -webkit-writing-mode: initial; -ms-writing-mode: initial; writing-mode: initial; line-height: 1; }
@media(min-width:1280px){
	.common-title{ translate: 8rem; }
}
@media(max-width:767px){
	.safari .common-title:has(.writing-initial, .writing-mode-initial){ white-space: nowrap; }
	.common-description{ line-height: 1.55; }
}

.sns-group{ display: flex; align-items: center;
	.sns-link, .sns-icon{ display: block; }
	.blog{ width: clamp(27rem, calc(41 / var(--inr) * var(--font-ref)), 41rem); height: auto; }
	.instagram{ width: clamp(14rem, calc(22 / var(--inr) * var(--font-ref)), 22rem); height: auto; }
	.youtube{ width: clamp(18rem, calc(29 / var(--inr) * var(--font-ref)), 29rem); height: auto; }
}

.sticky-menu{ position: -webkit-sticky; position: sticky; top: 0; z-index: 11; display: grid; place-items: center; height: var(--header-top-height); background: #ece4d3; font: 600 clamp(12rem, calc(16.67 / var(--inr) * var(--font-ref)), 16.67rem) var(--font-goyo); text-align: center;
	.inr{ display: flex; align-items: center; justify-content: center; gap: 2ch; }
}

header{ position: absolute; inset: 0 0 auto; z-index: 10;
	.drawerExpanded &{ z-index: 11; }
	.header-bottom{
		.inr{ display: flex; justify-content: space-between; }
		.drawer-btn{ position: relative; z-index: 1; width: 36rem; aspect-ratio: 1; }
		.drawer-btn[aria-expanded="true"]{
			.b1{ translate: 0; rotate: 45deg; }
			.b2{ translate: 0; rotate: -45deg; }
		}
		.bar{ position: absolute; inset: 0; margin: auto; display: block; height: 1px; background: currentColor; }
		.b1{ translate: 0 -6rem; }
		.b2{ translate: 0 6rem; }
		.gnb{ translate: -1rem; display: flex; flex-direction: row-reverse; gap: clamp(4ch, calc(47.8 / var(--inr) * var(--font-ref)), 47.8rem); }
		.safari & .gnb{ gap: clamp(6ch, calc(calc(47.8 / var(--inr) * var(--font-ref) + 2ch)), calc(47.8rem + 2ch)); }
		.gnb a{ position: relative; font: var(--fs20) var(--font-chw); -webkit-writing-mode: vertical-lr; -ms-writing-mode: tb-lr; writing-mode: vertical-lr; }
		.logo{ display: block; height: auto; }
	}
	.drawer{ overflow: auto; position: fixed; inset: 0; display: grid; grid-template-rows: 1fr auto auto; padding: 48rem 33rem 30rem; background: var(--bg-5);
		&:not(.isExpanded){ opacity: 0; visibility: hidden; }
		.common-title{ justify-self: end; position: relative; translate: -3rem; display: flex; align-items: center; gap: 20rem; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; -webkit-writing-mode: vertical-rl; -ms-writing-mode: tb-rl; writing-mode: vertical-rl; text-orientation: mixed;}
		.common-title::after{ content: ''; translate: 2rem; display: inline-block; height: 128rem; border-left: 1px solid currentColor; }
		.drawer-gnb{ margin-top: 40rem; display: grid; grid-template-columns: /*repeat(6, auto)*/ repeat(7, auto); gap: 76rem 20rem; text-align: center; direction: rtl;}
		.drawer-gnb a{ font: 20rem var(--font-chw); -webkit-writing-mode: vertical-rl; -ms-writing-mode: tb-rl; writing-mode: vertical-rl; }
		.sns-group{ order: 3; margin-top: 152rem; gap: clamp(24rem, calc(36 / var(--inr) * var(--font-ref)), 36rem); }
	}
	@media(prefers-reduced-motion:no-preference){
		&, .bar, .drawer, .gnb a::before{ transition: .3s; }
		.drawer:not(.isExpanded){ scale: .9; }
	}
	@media(any-hover){
		.gnb a::before{ content: ''; position: absolute; top: 0; left: 50%; translate: -50% -1.25em; width: 16rem; aspect-ratio: 16/15; background: url('/images/common/symbol.svg') no-repeat 50% / contain; }
		.gnb a:not(:hover)::before{ translate: -50% 0; opacity: 0; }
	}
	@media(min-width:768px){
		.header-bottom{ margin-top: clamp(0px, calc(105 / var(--inr) * 100vw), 105rem);
			.drawer-btn{ display: none; }
			.logo{ width: clamp(35rem, calc(45 / var(--inr) * 100vw), 45rem); }
		}
	}
	@media(max-width:767px){
		.drawer-gnb {display: flex !important; gap: 40rem !important; width: 100%; justify-content: space-between; flex-wrap: wrap;}
		.drawer-gnb > li:nth-child(n+8):nth-child(-n+14) {}
		&{ position: -webkit-sticky; position: sticky; top: var(--header-top-height); }
		&.isHidden{ opacity: 0; visibility: hidden; }
		.header-bottom{
			.inr{ display: flex; align-items: center; justify-content: space-between; height: 76rem; }
			.gnb{ display: none; }
			.logo{ width: 65rem; }
		}
	}
}

.section-group{
	@media(min-width:1280px){
		&{ display: grid; grid-template-columns: repeat(2, 1fr); }
		.inr{ width: calc( 100% - (var(--section-gap) * 2)); }
		.swiper{ max-width: 820rem; }
	}
}
.section-group2{
	@media(min-width:1280px){
		&{ display: grid; grid-template-columns: repeat(3, 1fr); }
		.inr{ width: calc( 100% - (var(--section-gap) * 2)); }
		.swiper{ max-width: 820rem; }
	}
}

.common-swiper{
	.img{ display: block; width: 100%; height: auto; aspect-ratio: 820/461; -o-object-fit: cover; object-fit: cover; }
	.control{ position: absolute; inset: 50% 4.9% 0; translate: 0 -50%; z-index: 1; margin: auto; display: flex; align-items: center; justify-content: space-between; pointer-events: none; }
	.btn{ position: relative; width: clamp(13rem, calc(22 / var(--inr) * var(--font-ref)), 22rem); aspect-ratio: 22/42; background: no-repeat 50% / contain; pointer-events: auto; }
	.btn::before{ content: ''; position: absolute; inset: -10rem; }
	.prev{ background-image: url('/images/main/common-prev.png'); }
	.next{ background-image: url('/images/main/common-next.png'); }
}

.common-clinic-acne{
	.clinic{ --margin: clamp(120rem, calc(167 / var(--inr) * var(--font-ref)), 167rem); padding-block: var(--section-gap); background: var(--bg-5);
		.list{ margin: var(--margin) auto; display: grid; grid-template-columns: repeat(8, 1fr); justify-content: center; max-width: 761rem; gap: clamp(50rem, calc(99 / var(--inr) * var(--font-ref)), 99rem) min(60rem, 6%); font-size: var(--fs20); }
		.list > li{ grid-column-end: span 2; }
		.list > li:first-child{ grid-column-start: 2; }
		.link{ position: relative; display: block; }
		.icon{ margin: 0 auto 1em; display: block; max-width: 100%; width: clamp(80rem, calc(106 / var(--inr) * var(--font-ref)), 106rem); height: auto; }
		.clinic-title{ position: relative; left: 50%; translate: -50%; display: inline-block; text-align: center; }
		@media(max-width:767px){
			.list{ -moz-column-gap: 12%; column-gap: 12%; font-size: 12rem; white-space: nowrap; }
		}
	}
	.acne{ padding-block: var(--section-gap); background: var(--bg-6);
		.swiper-slide{ display: grid; grid-template-rows: 116rem auto auto 1fr; justify-items: start; height: auto; background: var(--bg-6); }
		.img-group{ position: relative; margin-top: 97rem; width: 100%; }
		.img{ display: block; width: 100%; height: auto; aspect-ratio: 820/461; -o-object-fit: cover; object-fit: cover; }
		.common-description{ margin-top: clamp(42rem, calc(59 / var(--inr) * var(--font-ref)), 59rem); }
		.common-link{ align-self: start; margin-top: clamp(22rem, calc(47 / var(--inr) * var(--font-ref)), 47rem); }
		@media(min-width:768px){
			.common-description{ text-indent: 5ch; }
		}
		@media(min-width:1280px){
			.swiper{ max-width: 820rem; }
		}
	}
}

footer{ padding: clamp(58rem, calc(100 / var(--inr) * var(--font-ref)), 100rem) 0 clamp(58rem, calc(93 / var(--inr) * var(--font-ref)), 93rem); background: var(--bg-5);
	.common-title{ width: 100%; font: clamp(20rem, calc(33.33 / var(--inr) * var(--font-ref)), 33.33rem)/1.62526253 var(--font-chw); -webkit-writing-mode: vertical-rl; -ms-writing-mode: tb-rl; writing-mode: vertical-rl; }
	.branch{ font-size: var(--fs16);
		.main-list{ display: flex; gap: 60rem clamp(20rem, calc(108 / var(--inr) * var(--font-ref)), 108rem); }
		.sub-list{ margin-top: clamp(28rem, calc(49 / var(--inr) * var(--font-ref)), 49rem); display: grid; gap: clamp(6rem, calc(12 / var(--inr) * var(--font-ref)), 12rem); width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; }
		.area, .name{ font-weight: 600; }
		.name{ margin-right: .3ch; }
		.name::before{ content: '['; }
		.name::after{ content: ']'; }
		.more{ margin-top: clamp(22rem, calc(133 / var(--inr) * var(--font-ref)), 133rem); display: inline-flex; align-items: center; justify-content: center; height: 31.5rem; padding: 0 13rem; border: 1px solid currentColor; border-radius: 5em; font-weight: 600; text-align: center; }
	}
	.info{ font: clamp(10.7rem, calc(16.66 / var(--inr) * var(--font-ref)), 16.66rem)/1.75 var(--font-goyo); }
	.sns-group{ gap: clamp(24rem, calc(47 / var(--inr) * var(--font-ref)), 47rem); }
	@media(min-width:768px){
		.copyright{ display: block; }
	}
	@media(min-width:1280px){
		.inr{ display: grid; grid-template-columns: 1fr auto; gap: 93rem 40rem; padding-left: var(--section-gap); }
		.branch{ order: -1; padding-top: 36rem; }
	}
	@media(max-width:1279px){
		.info{ margin-top: 23rem; }
		.sns-group{ margin-top: 24rem; }
	}
	@media(max-width:767px){
		.branch{
			.main-list{ display: grid; grid-template-columns: repeat(2, 1fr); width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; }
			.more{ margin-top: 22rem; height: 27rem; }
		}
	}
}

.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; white-space: nowrap; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(100%); }