@charset "utf-8";

:root{
	--font-description: clamp(14rem, calc(18.75 / var(--inr) * var(--font-ref)), 18.75rem)/1.7776 var(--font-goyo);
}

.bg-test{ display: grid; grid-template-columns: repeat(9, 1fr);
	> *{ height: 200vh; }
	.bg1{ background: var(--bg-1); }
	.bg2{ background: var(--bg-2); }
	.bg3{ background: var(--bg-4); }
	.bg4{ background: var(--bg-5); }
	.bg5{ background: var(--bg-3); }
	.bg6{ background: var(--bg-6); }
	.bg7{ background: var(--bg-7); }
	.bg8{ background: var(--bg-8); }
	.bg9{ background: var(--bg-9); }
}

.main{ contain: content; }

.main .visual{ display: block; width: 100%; height: auto;
	img{ all: inherit; pointer-events: none; user-select: none; }
}

.main section{ padding-block: var(--section-gap); }

.main .introduction{
	.inr{ display: grid; }
	.img{ grid-area: i; display: block; width: 100%; height: auto; }
	.common-title{ grid-area: t; }
	.common-description{ grid-area: d; max-width: 64ch; }
	.common-link{ grid-area: l; justify-self: start; }
	@media(min-width:768px){
		.inr{ grid-template: 'i t' 1fr 'i d' 'i l' / 1fr 1fr; gap: 61rem clamp(20rem, calc(140 / var(--inr) * var(--font-ref)), 140rem); }
	}
	@media(min-width:1280px){
		.common-title{ margin-top: clamp(20rem, calc(69 / var(--inr) * var(--font-ref)), 69rem); }
		.common-link{ margin-bottom: clamp(0rem, calc(68 / var(--inr) * var(--font-ref)), 68rem); }
	}
	@media(max-width:767px){
		.inr{ grid-template: 't' 'i' 'd' 'l'; gap: 0 20rem; }
		.img{ margin-top: 125rem; }
		.common-description{ margin-top: clamp(42rem, calc(59 / var(--inr) * var(--font-ref)), 59rem); }
		.common-link{ margin-top: clamp(22rem, calc(47 / var(--inr) * var(--font-ref)), 47rem) }
	}
}

.main .scar{ background: #e9dfcb; text-align: center;
	.inr{ display: grid; justify-items: center; }
	.common-title{ position: relative; display: flex; align-items: center; gap: clamp(40rem, calc(92 / var(--inr) * var(--font-ref)), 92rem); width: auto; }
	.common-title::after{ content: ''; display: block; width: 2rem; height: 288rem; background: var(--black); }
	.img{ margin: clamp(44rem, calc(100 / var(--inr) * var(--font-ref)), 100rem) auto 0; display: block; width: clamp(300rem, calc(577 / var(--inr) * var(--font-ref)), 577rem); height: auto; }
	/* clamp(165rem, calc(300 / var(--inr) * var(--font-ref)), 300rem); */
	.chinese-character{ margin-top: clamp(42rem, calc(96 / var(--inr) * var(--font-ref)), 96rem); font: clamp(20rem, calc(33.33 / var(--inr) * var(--font-ref)), 33.33rem)/1.65 var(--font-lwt); writing-mode: vertical-rl; }
	.common-description{ margin-top: clamp(44rem, calc(100 / var(--inr) * var(--font-ref)), 100rem); max-width: 80ch; text-align: left; word-break: break-word; }
	.common-link{ margin-top: clamp(22rem, calc(47 / var(--inr) * var(--font-ref)), 47rem); }
	@media(max-width:767px){
		.common-description br{ display: none; }
	}
}

.main .clinic{ --margin: clamp(120rem, calc(167 / var(--inr) * var(--font-ref)), 167rem); 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{ column-gap: 12%; font-size: 12rem; white-space: nowrap; }
	}
}

.main .acne{ 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; object-fit: cover; }
	.common-description{ margin-top: clamp(42rem, calc(59 / var(--inr) * var(--font-ref)), 59rem); }
	.common-link{ 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; }
	}
}

.main .simulCare{
	.list{ max-width: 1466rem; text-align: center; }
	.order{ margin: 0 auto; font: var(--fs25)/1.83326669 var(--font-chw); writing-mode: vertical-rl; }
	.img{ margin: clamp(42rem, calc(70 / var(--inr) * var(--font-ref)), 70rem) auto 0; display: block; max-width: 360rem; width: 100%; }
	.title{ margin-top: clamp(42rem, calc(80 / var(--inr) * var(--font-ref)), 80rem); font: 600 var(--fs22) var(--font-goyo); }
	.description{ margin: clamp(25rem, calc(53 / var(--inr) * var(--font-ref)), 53rem) auto 0; max-width: 36ch; font: var(--fs18)/1.66666667 var(--font-goyo); text-wrap: balance; word-break: keep-all; }
	@media(prefers-reduced-motion:no-preference){
		.li{ transition: opacity .3s, z-index 0s; }
	}
	@media(min-width:768px){
		.list{ margin-top: 33rem; display: grid; grid-template-columns: repeat(3, 1fr); gap: 13.1%; /* gap: 193rem */ }
	}
	@media(min-width:1280px){
		.list{ margin-left: 46rem; }
	}
	@media(max-width:1279px) and (min-width:768px){
		.description br{ display: none; }
	}
	@media(max-width:767px){
		.inr{ height: 400vh; }
		.common-title{ position: sticky; top: calc(var(--section-gap) * 2); z-index: 4; float: right; height: calc(100svh - 80rem); }
		.sticky{ position: sticky; top: 0; height: 100svh; }
		/* .li{ position: absolute; top: 0; display: grid; place-items: center; width: 100%; height: 100svh; background: var(--bg-3); opacity: 0; transition: opacity 0.5s, z-index 0s; } */
		.li{ position: absolute; top: 0; display: flex; align-items: center; justify-content: center; width: 100%; height: 100svh; background: var(--bg-3); opacity: 0; transition: opacity 0.5s, z-index 0s; }
		.li:nth-child(1).isVisible { z-index: 0; }
		.li:nth-child(2).isVisible { z-index: 1; }
		.li:nth-child(3).isVisible { z-index: 2; }
		.li.isVisible { opacity: 1; z-index: 3; }
		.img{ width: 230rem; }
		.title{ font-size: 16rem; }
		.description{ margin-top: 23.5rem; font-size: 13.2rem; }
	}
}

.main .feature{ height: 500vh; box-sizing: border-box;
	.inr{ padding-top: var(--section-gap); }
	.sticky{ position: sticky; top: 0; height: 100vh; }
	.li{ position: absolute; top: 0; display: grid; place-items: center; width: 100%; height: 100vh; opacity: 0; background: var(--bg-3); transition: opacity 0.5s, z-index 0s; }
	.li:nth-child(1).isVisible { z-index: 0; }
	.li:nth-child(2).isVisible { z-index: 1; }
	.li:nth-child(3).isVisible { z-index: 2; }
	.li:nth-child(4).isVisible { z-index: 3; }
	.li.isVisible { opacity: 1; z-index: 4; }
	hgroup{ display: grid; }
	.common-title{ padding-right: 7ch; white-space: nowrap; }
	.common-description{ align-self: end; margin-top: clamp(110rem, calc(65 / var(--inr) * var(--font-ref)), 65rem); line-height: 1.66666667; }
	@media(prefers-reduced-motion:no-preference){
		.li{ transition: opacity .3s, z-index 0s; }
	}
	@media(min-width:768px){
		hgroup{ grid-template-columns: 1fr 1fr; height: 100%; }
		.common-title{ order: 2; align-self: center; }
	}
	@media(min-width:1280px){
		&{ margin-top: var(--section-gap); }
		.common-title{ padding: 1.4% 302rem 0 0; font-size: var(--fs37); }
		.common-description{ padding-left: 39rem; }
	}
}

.main .feature-new{ background: var(--bg-5);
	.swiper-slide{ display: grid; grid-template: 'i t' 'd d' 1fr / 120fr 129fr; height: auto; background: var(--bg-5); }
	picture{ grid-area: i; margin-top: clamp(104rem, calc(192 / var(--inr) * var(--font-ref)), 192rem); max-width: 160rem; }
	.img{ display: block; width: 100%; height: auto; }
	.common-title{ grid-area: t; position: relative; }
	.h2-t1{ display: flex; align-items: center; gap: 2ch; }
	.h2-t1::after{ content: ''; display: block; height: 3.6em; border-left: 2px solid currentColor; }
	.h2-t2{ position: absolute; inset: 21% 28% 0 0; margin: 0 auto auto; width: fit-content; height: fit-content; font-weight: 400; }
	.pager{ position: absolute; top: 0; left: 0; bottom: auto; z-index: 1; display: grid; gap: clamp(5rem, calc(10 / var(--inr) * var(--font-ref)), 10rem); width: fit-content; height: auto; }
	.swiper-pagination-bullet{ all: unset; display: block; width: clamp(4px, calc(9 / var(--inr) * var(--font-ref)), 9rem); height: auto; aspect-ratio: 1; border: 1px solid var(--black); border-radius: 50%; box-sizing: border-box; }
	.swiper-pagination-bullet-active{ background: var(--black); }
	.common-description{ grid-area: d; margin-top: clamp(54rem, calc(103 / var(--inr) * var(--font-ref)), 103rem); }
	.common-description br{ display: none; }
	@media(min-width:768px){
		.swiper-slide{ padding-left: 41rem; grid-template: 'i t' 'd empty' 1fr / 960fr 779fr; }
		picture{ max-width: 960rem; }
		.h2-t2{ inset: 24% 6% 0 0; }
		.pager{ left: 41rem; }
	}
}

.main .case{ background: var(--bg-6); text-align: center;
	.swiper-slide{ background: var(--bg-6); }
	.img-group{ margin-top: clamp(90rem, calc(99 / var(--inr) * var(--font-ref)), 99rem); display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(23rem, calc(50 / var(--inr) * var(--font-ref)), 50rem); }
	.img{ display: block; width: 100%; height: auto; aspect-ratio: 1; border: clamp(27rem, calc(57 / var(--inr) * var(--font-ref)), 57rem) solid var(--bg-3); object-fit: cover; }
	.control{ margin: clamp(40rem, calc(90 / var(--inr) * var(--font-ref)), 90rem) auto 0; display: flex; align-items: center; justify-content: space-between; gap: 20rem; max-width: 609rem; }
	.btn{ position: relative; width: 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'); }
	.title{ font-size: clamp(16rem, calc(22.92 / var(--inr) * var(--font-ref)), 22.92rem); }
	.common-description{ font-size: var(--fs18); }
	.common-link{ margin-top: clamp(32rem, calc(70 / var(--inr) * var(--font-ref)), 70rem); }
	@media(min-width:1280px){
		.swiper{ margin-inline: -20rem; max-width: 860rem; }
	}
	@media(max-width:767px){
		.control{ margin-top: 56rem; max-width: 390rem; }
		.btn{ width: 13rem; }
		.common-link{ margin-top: 55rem; }
	}
}

.main .video{ background: var(--bg-4); text-align: center;
	.link{ container-type: inline-size; position: relative; margin: clamp(73rem, calc(94 / var(--inr) * var(--font-ref)), 94rem) auto 0; display: block; max-width: 738rem; width: 100%; aspect-ratio: 738/415; }
	.link-img{ display: block; width: 100%; height: 100%; }
	.play-icon{ position: absolute; inset: 0; margin: auto; width: 7.18157182cqw; aspect-ratio: 53/61; background: #fff; clip-path: polygon(0 0, 100% 50%, 0 100%); }
	.link-title{ position: absolute; bottom: 9.4%; left: 5.7%; font: 600 5.08130081cqw/1.2 var(--font-goyo); color: #fff; text-align: left; text-shadow: 0 2rem 1rem #a4948b; }
	.common-description{ margin-top: clamp(67rem, calc(104 / var(--inr) * var(--font-ref)), 104rem); }
	.common-link{ margin-top: clamp(56rem, calc(86 / var(--inr) * var(--font-ref)), 86rem); }
}