@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700&display=swap');
@import url('https://use.typekit.net/esu3ubd.css');

/* ----------------------------------------

	共通設定

---------------------------------------- */
/*
	変数
*/
:root {
	/*
		色
	*/
	/* color */
	--cl-brand01: #004EA2;
	--cl-brand02: #007BC7;
	--cl-brand03: #EC6B81;
	
	--cl-brand01_20: rgb(from var(--cl-brand01) r g b / 0.2);
	--cl-brand01_65: rgb(from var(--cl-brand01) r g b / 0.65);
	
	--cl-gry01: #888888;
	--cl-gry02: #D9D9D9;
	
	--cl-gld01: #B67715;
	--cl-yel01: #A37F00;
	
	--cl-marker01: #FDFF95;
	
	--cl-bg01: #F7FAFF;
	--cl-bg02: #E9F3FF;
	--cl-bg03: #F6F6F1;
	--cl-bgPopup: rgb(from var(--cl-brand01) r g b / 0.5);
	
	--cl-line: #06C755;
	--cl-rakuten: #BF0000;
	--cl-yahoo: #FF0033;
	
	/* linear-gradient */
	--lg-blu01: linear-gradient(45deg, var(--cl-brand01), #009BFA);
	--lg-blu02: linear-gradient(to right, var(--cl-brand01), #379ACC);
	--lg-blu03: linear-gradient(to right, #0251D3, #2CB5FF 30%, #9FFCF9 70%, #D7FFF4);
	--lg-blu04: linear-gradient(45deg, #DCF0FF, #FFFFFF);
	
	--lg-pnk01: linear-gradient(45deg, #FF4767, #FF8C72);
	
	--lg-gld01: linear-gradient(35deg, var(--cl-gld01), #FBDB78 50%, var(--cl-gld01));
	
	
	/*
		フォント
	*/
	/* font-family */
	--ff-basic: 'Noto Sans JP', sans-serif;
	--ff-en: 'futura-pt', 'Noto Sans JP', sans-serif;
	
	/* font-size */
	--fs-basicNum: 14;
	--fs-smallerNum: 12;
	--fs-smallNum: 10;
	--fs-bigNum: 19;
	
	@media (width > 768px) {
		--fs-basicNum: 16;
		--fs-smallerNum: 14;
		--fs-smallNum: 12;
		--fs-bigNum: 28;
	}
	
	--fs-basic: calc(var(--fs-basicNum) * 1px);
	--fs-smaller: calc(var(--fs-smallerNum) * 1px);
	--fs-small: calc(var(--fs-smallNum) * 1px);
	--fs-big: calc(var(--fs-bigNum) * 1px);
	
	/* font-weight */
	--fw-regular: 400;
	--fw-book: 400;
	--fw-medium: 500;
	--fw-bold: 700;
	
	/* letter-spacing */
	--ls-basic: 0.05em;
	
	/* line-height */
	--lh-basic: 2.0;
	--lh-small: 1.3;
	--lh-smaller: 1.8;
	
	
	/*
		幅・余白
	*/
	/* width */
	--w-design: 414;
	
	@media (width > 768px) {
		--w-design: 1440;
		
		--w-contentsNum: 1000;
		--w-contentsNarrowNum: 800;
		--w-contentsWideNum: 1200;
		
		--w-contents: calc(var(--w-contentsNum) * 1px);
		--w-contentsNarrow: calc(var(--w-contentsNarrowNum) * 1px);
		--w-contentsWide: calc(var(--w-contentsWideNum) * 1px);
	}
	
	/* padding */
	--pd-h: 5dvw;
	
	--pd-vSec: 100px;
	--pd-vGroup: 40px;
	--pd-vItem: 24px;
	--pd-vSmall: 10px;
	
	@media (width > 768px) {
		--pd-hNum: 50;
		
		--pd-h: calc(var(--pd-hNum) * 1px);
	
		--pd-vSec: 120px;
		--pd-vGroup: 60px;
		--pd-vItem: 40px;
		--pd-vSmall: 12px;
	}
	
	
	/*
		装飾
	*/
	/* border-radius */
	--br-basic: 12px;
	--br-small: 6px;
	
	@media (width > 768px) {
		--br-basic: 16px;
		--br-small: 8px;
	}
	
	/* box-shadow */
	--bs-basic: 0 0 20px 0 var(--cl-brand01_20);
	--bs-narrow: 0 0 6px 0 var(--cl-brand01_65);
	
	/* text-shadow */
	--ts-basic: 0 0 6px 0 var(--cl-brand01_65);
	
	/* transition */
	--tr-basic: all 300ms ease;
	
	--tr-opacity: 0.7;
}


/*
	基本レイアウト・スタイル
*/
section[id^="whitening"] {
	/* 全体 */
	color: var(--cl-brand01);
	font-family: var(--ff-basic);
	font-size: var(--fs-basic);
	font-weight: var(--fw-regular);
	letter-spacing: var(--ls-basic);
	line-height: var(--lh-basic);
	
	* {
		letter-spacing: var(--ls-basic);
	}

	/* ページ全体のレイアウト */
	& + & {
		margin-top: 100px;

		@media (width > 768px) {
			margin-top: 120px;
		}
	}
	
	/* 画像 */
	img {
		display: block;
		width: 100%;
		height: auto;
	}
	
	/* ボタン・リンク */
	@media (width > 768px) {
		:is(a, button) {
			cursor: pointer;
			transition: var(--tr-basic);
			transition-property: opacity;
			
			&:hover {
				opacity: var(--tr-opacity);
			}
		}
	}
	
	/* ダイアログ */
	body:has(& dialog[open]) {
		overflow: clip;
	}
	
	@keyframes dialogFadeIn {
		0% {
			opacity: 0;
		}

		100% {
			opacity: 1;
		}
	}
	
	@keyframes dialogFadeOut {
		0% {
			opacity: 1;
		}

		100% {
			opacity: 0;
		}
	}
	
	dialog {
		--openAnimation: dialogFadeIn both 400ms ease;
		--closeAnimation: dialogFadeOut both 300ms ease;

		max-width: calc(100dvw - var(--pd-h) * 2);
		max-height: calc(100dvw - var(--pd-h) * 2);
		padding: 0;
		color: inherit;
		font-family: inherit;
		font-size: inherit;
		font-weight: inherit;
		line-height: inherit;
		overflow: clip auto;
		
		&::backdrop {
			background: var(--cl-bgPopup);
			animation: var(--openAnimation);
		}
		
		&[open] {
			animation: var(--openAnimation);

			&.fadeOut {
				animation: var(--closeAnimation);

				&::backdrop {
					animation: var(--closeAnimation);
				}
			}
		}
	}
}


/*
	共通クラス
*/
section[id^="whitening"] {
	/*
		汎用
	*/
	@media (width <= 768px) {
		.pcOnly {
			display: none;
		}
	}
	
	@media (width > 768px) {
		.spOnly {
			display: none;
		}
	}
	
	
	/*
		コンテンツ幅
	*/
	.contentsInner {
		width: 100%;
		padding: 0 var(--pd-h);

		@media (width > 768px) {
			--baseWidthNum: var(--w-contentsNum);
			--w-contentsInner: calc(var(--baseWidthNum) + var(--pd-hNum) * 2);
			
			max-width: calc(var(--w-contentsInner) * 1px);
			margin: 0 auto;
			
			&.narrow {
				--baseWidthNum: var(--w-contentsNarrowNum);
			}
			
			&.wide {
				--baseWidthNum: var(--w-contentsWideNum);
			}
		}
	}
	
	
	/*
		テキスト
	*/
	/* 本文 */
	.txtBasic {
		font-family: var(--ff-basic);
		font-size: var(--fs-basic);
		font-weight: var(--fw-regular);
		letter-spacing: var(--ls-basic);
		line-height: var(--lh-basic);
		
		/* 本文・強調 */
		&.strong {
			font-weight: var(--fw-medium);
		}
		
		/* 本文小さめ */
		&.smaller {
			font-size: var(--fs-smaller);

			/* 本文小さめ・強調 */
			&.strong {
				font-weight: var(--fw-medium);
			}
		}
	}
	
	/* 注釈 */
	.txtSmall {
		font-family: var(--ff-basic);
		font-size: var(--fs-small);
		font-weight: var(--fw-regular);
		letter-spacing: var(--ls-basic);
		line-height: var(--lh-small);
		
		/* 注釈・強調 */
		&.strong {
			font-weight: var(--fw-bold);
		}
	}
	
	/* タイトル・強調 */
	.txtTitle {
		font-family: var(--ff-basic);
		font-size: var(--fs-big);
		font-weight: var(--fw-medium);
		letter-spacing: var(--ls-basic);
		line-height: var(--lh-smaller);
		
		/* タイトル・強調_英語 */
		&.en {
			font-family: var(--ff-en);
		}
	}
	
	
	/*
		装飾
	*/
	/* 縦棒 */
	.decoBorder01 {
		--borderHeight: 60px;
		--color: var(--cl-brand01);

		@media (width > 768px) {
			--borderHeight: 100px;
		}
		
		position: relative;
		
		&::before {
			content: '';
			display: block;
			width: 1px;
			height: var(--borderHeight);
			margin: 0 auto var(--pd-vItem);
			background: var(--color);
		}
		&::after {
			content: '';
			display: block;
			position: absolute;
			left: 50%;
			top: var(--borderHeight);
			width: 3px;
			aspect-ratio: 1;
			background: var(--color);
			border-radius: 50%;
			translate: -1px -100%;
		}
	}
	
	
	/*
		タイトル
	*/
	/* セクションタイトル */
	.ttlSection {
		display: flex;
		justify-content: center;
		align-items: center;
		gap: 19px;
		margin-bottom: 40px;
		font-family: var(--ff-en);
		font-size: min(var(--fs-big), calc(var(--fs-bigNum) * 100dvw / var(--w-design)));
		font-weight: var(--fw-medium);
		letter-spacing: var(--ls-basic);
		line-height: var(--lh-smaller);
		text-align: center;
		white-space: nowrap;
	
		@media (width > 768px) {
			gap: 30px;
			margin-bottom: 90px;
			font-size: var(--fs-big);
		}
		
		&::before,
		&::after {
			content: '';
			flex: 0 0 auto;
			display: block;
			width: 18px;
			aspect-ratio: 18 / 37;
			background: url(/common/images/img_diamond.webp) no-repeat center / contain;

			@media (width > 768px) {
				width: 32px;
			}
		}
		
		.text {
			flex: 0 0 auto;
			display: block;
		}
		
		/* 小さめ行 */
		.smaller {
			font-size: min(var(--fs-basic), calc(var(--fs-basicNum) * 100dvw / var(--w-design)));
			line-height: var(--lh-basic);

			@media (width > 768px) {
				font-size: var(--fs-basic);
			}
		}
	}
	
	/* 白ダイヤタイトル */
	.ttlDiamondWht {
		display: flex;
		justify-content: flex-start;
		align-items: center;
		gap: 15px;
		margin-bottom: 20px;
		font-family: var(--ff-basic);
		font-size: min(17px, calc(17 * 100dvw / var(--w-design)));
		font-weight: var(--fw-bold);
		letter-spacing: var(--ls-basic);
		line-height: var(--lh-smaller);
		white-space: nowrap;

		@media (width > 768px) {
			gap: 24px;
			margin-bottom: 40px;
			font-size: 20px;
		}
		
		&::before {
			content: '';
			flex: 0 0 auto;
			display: block;
			width: 13px;
			aspect-ratio: 18 / 37;
			background: url(/common/images/img_diamond_line.svg) no-repeat center / contain;

			@media (width > 768px) {
				width: 18px;
			}
		}
		
		.text {
			flex: 0 0 auto;
			display: block;
		}
	}
	
	/* グラデ下線タイトル */
	.ttlBorderGrad {
		font-family: var(--ff-basic);
		font-size: min(var(--fs-big), calc(var(--fs-bigNum) * 100dvw / var(--w-design)));
		font-weight: var(--fw-medium);
		letter-spacing: var(--ls-basic);
		line-height: var(--lh-smaller);
		text-align: center;
		white-space: nowrap;

		@media (width > 768px) {
			font-size: var(--fs-big);
		}
		
		.border {
			display: inline-block;
			width: fit-content;
			background: var(--lg-blu03) no-repeat center bottom / 100% 3px;
		}
		
		/* 小さめ行 */
		.smaller {
			font-size: min(var(--fs-basic), calc(var(--fs-basicNum) * 100dvw / var(--w-design)));
			line-height: var(--lh-basic);
	
			@media (width > 768px) {
				font-size: var(--fs-basic);
			}
		}
	}
	
	/* Our Commitment */
	.ttlCommitment {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 17px;
		font-family: var(--ff-en);
		font-size: 12px;
		font-weight: var(--fw-medium);
		letter-spacing: 0.4em;
		line-height: 1.0;
		text-align: center;
		white-space: nowrap;
		text-transform: uppercase;

		@media (width > 768px) {
			gap: 19px;
			font-size: 20px;
		}
		
		&::before {
			content: '';
			display: block;
			width: 68px;
			aspect-ratio: 68 / 50;
			background: url(/common/images/logo_we.svg) no-repeat center / contain;

			@media (width > 768px) {
				width: 145px;
			}
		}
	}
	
	
	/*
		テキストリンク
	*/
	/* テキストリンク */
	.linkBasic {
		display: flex;
		justify-content: flex-start;
		align-items: center;
		gap: 14px;
		width: fit-content;
		background: linear-gradient(currentColor) no-repeat center bottom / 100% 1px;
		font-family: var(--ff-basic);
		font-size: var(--fs-basic);
		font-weight: var(--fw-medium);
		letter-spacing: var(--ls-basic);
		line-height: var(--lh-basic);
		white-space: nowrap;

		@media (width > 768px) {
			gap: 16px;
		}
		
		&::after {
			content: '';
			flex: 0 0 auto;
			display: block;
			width: 9px;
			aspect-ratio: 1;
			border: 1px currentColor;
			border-style: solid solid none none;
			clip-path: polygon(0 0, 100% 0, 100% 100%);
			rotate: 45deg;
			translate: -30% 0;
		}
		
		/* 注釈サイズ */
		&.small {
			padding-bottom: 4px;
			font-size: var(--fs-small);
			font-weight: var(--fw-bold);
			line-height: var(--lh-small);
			
			&::after {
				width: 7px;
			}
		}
		
		/* 下矢印 */
		&.down::after {
			margin-left: 5px;
			rotate: 135deg;
			translate: -25% 0;
		}
		
		/* 上矢印 */
		&.up::after {
			margin-left: 5px;
			rotate: -45deg;
			translate: -25% 40%;
		}
		
		/* ？マーク */
		&.qMark {
			&::after {
				width: 14px;
				background: url(/common/images/ico_question.svg) no-repeat center / contain;
				border: none;
				clip-path: none;
				rotate: none;
				translate: none;
			}
			
			&.small::after {
				width: 12px;
			}
		}
	}
	
	
	/*
		ボタン
	*/
	/* 汎用ボタン */
	.btnBasic {
		--height: 56px;

		@media (width > 768px) {
			--height: 64px;
		}
		
		display: flex;
		justify-content: center;
		align-items: center;
		position: relative;
		width: 100%;
		max-width: 318px;
		height: var(--height);
		margin: 0 auto;
		background: var(--lg-blu01) no-repeat center / cover;
		border-radius: calc(var(--height) / 2);
		color: #fff;
		font-family: var(--ff-basic);
		font-size: min(var(--fs-basic), calc(var(--fs-basicNum) * 100dvw / var(--w-design)));
		font-weight: var(--fw-bold);
		letter-spacing: var(--ls-basic);
		line-height: var(--lh-basic);
		white-space: nowrap;

		@media (width > 768px) {
			max-width: 366px;
			font-size: var(--fs-basic);
		}
		
		&::after {
			content: '';
			display: block;
			position: absolute;
			right: 18px;
			top: 50%;
			width: 9px;
			aspect-ratio: 1;
			border: 1px currentColor;
			border-style: solid solid none none;
			rotate: 45deg;
			translate: 0 -50%;

			@media (width > 768px) {
				right: 20px;
			}
		}
		
		/* CTAボタン */
		&.cta {
			background-image: var(--lg-pnk01);
		}
		
		/* 濃い色背景ボタン */
		&.darkBg {
			background: rgb(#fff / 0.2);
			border: 1px solid #fff;
		}
		
		/* 低優先ボタン */
		&.lowPrio {
			background: #fff;
			border: 1px solid currentColor;
			color: var(--cl-brand01);
			
			&::before {
				content: none;
				display: block;
				position: absolute;
				left: 30px;
				top: 50%;
				height: 30px;
				background: no-repeat center / contain;
				translate: 0 -50%;

				@media (width > 768px) {
					height: 34px;
				}
			}
			
			/* 人アイコン */
			&.icoPerson::before {
				content: '';
				aspect-ratio: 1;
				background-image: url(/common/images/ico_person.svg);
			}
			
			/* ピンアイコン */
			&.icoPin::before {
				content: '';
				aspect-ratio: 24 / 30;
				background-image: url(/common/images/ico_pin.svg);
			}
		}
		
		/* 外部リンクボタン */
		&.ext {
			--bg: var(--lg-blu01);
			
			background:
				url(/common/images/ico_window.svg) no-repeat right 18px center / 12px auto,
				var(--bg) no-repeat center / cover;

			@media (width > 768px) {
				background-position:
					right 20px center,
					center;
			}
			
			&::after {
				content: none;
			}
			
			/* Amazon */
			&.amazon {
				--bg: linear-gradient(#ff9900);
			}
			
			/* 楽天 */
			&.rakuten {
				--bg: linear-gradient(var(--cl-rakuten));
			}
			
			/* Yahoo! */
			&.yahoo {
				--bg: linear-gradient(var(--cl-yahoo));
			}
			
			/* Qoo10 */
			&.qoo10 {
				--bg: linear-gradient(to right, #FC4231, #B235DC);
			}
		}
	}
	
	/* 開閉ボタン */
	.btnOpenClose {
		display: block;
		position: relative;
		width: 18px;
		aspect-ratio: 1;
		color: var(--cl-brand01);
		
		@media (width > 768px) {
			width: 24px;
		}
		
		&::before,
		&::after {
			content: '';
			display: block;
			position: absolute;
			top: 50%;
			left: 50%;
			width: 100%;
			height: 1px;
			background: currentColor;
			translate: -50% 0;
		}
		&::after {
			rotate: -90deg;
			transition: rotate 300ms ease;
		}
		
		.open &::after {
			rotate: 0deg;
		}
		
		.text {
			display: block;
			width: 1px;
			height: 1px;
			clip-path: inset(50%);
			overflow: hidden;
		}
	}
}


/*
	セクション
*/
/* 監修医師 */
.secDoctors {
	.doctor {
		padding: var(--pd-h);
		border: 1px solid var(--cl-brand01);
		border-radius: var(--br-basic);

		&:nth-child(n+2) {
			margin-top: var(--pd-vItem);
		}

		> :nth-child(n+2) {
			margin-top: var(--pd-vItem);
		}
	}
	
	.photo {
		max-width: 240px;
		aspect-ratio: 1;
		margin: 0 auto var(--pd-vSmall);
		border-radius: var(--br-basic);
		overflow: hidden;
		
		@media (width > 768px) {
			max-width: 288px;
		}
	}
	
	.nameArea {
		display: flex;
		justify-content: center;
		gap: 1.0em;
		font-weight: var(--fw-medium);
	}
	
	.additional {
		font-size: var(--fs-smaller);
		line-height: var(--lh-small);
	}
}

/* 近くのWEを探す */
@keyframes btnShine {
	0% {
		opacity: 0;
		translate: -120% -50%;
	}

	33% {
		opacity: 0;
		translate: -120% -50%;
	}

	50% {
		opacity: 1;
		translate: 0 -50%;
	}

	67% {
		opacity: 0;
		translate: 20% -50%;
	}

	100% {
		opacity: 0;
		translate: 20% -50%;
	}
}

.secMap {
	.contents {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: var(--pd-vItem);
	}
	
	.action {
		.slash {
			display: inline-block;
			width: 1px;
			height: 1px;
			clip-path: inset(50%);
			overflow: hidden;
		}
	}
	
	.mapContainer {
		width: 100%;
		
		@media (width > 768px) {
			max-width: 700px;
		}
	}
	
	.map {
		--w: 372;
		--h: 380;
		
		@media (width > 768px) {
			--w: 512;
			--h: 524;
		}
		
		position: relative;
		width: 100%;
		aspect-ratio: var(--w) / var(--h);
		background: url("/common/images/img_japan_map.svg") no-repeat center / contain;
		
		@media (width > 768px) {
			max-width: calc(var(--w) * 1px);
			margin: 0 auto;
		}
	}
	
	.clinicNum {
		display: flex;
		flex-direction: column;
		align-items: center;
		position: absolute;
		left: calc(45 / var(--w) * 100%);
		top: calc(53 / var(--h) * 100%);
		
		@media (width > 768px) {
			left: calc(35 / var(--w) * 100%);
			top: calc(82 / var(--h) * 100%);
		}
		
		&::before {
			content: '';
			display: block;
			width: calc(41 / var(--w-design) * 100dvw);
			aspect-ratio: 68 / 50;
			margin-bottom: calc(12 / var(--w-design) * 100dvw);
			background: url("/common/images/logo_we.svg") no-repeat center / contain;
			
			@media (width > 768px) {
				width: 50px;
				margin: 0;
			}
		}
		
		&::after {
			content: '';
			display: block;
			width: 100%;
			height: calc(3 / var(--w-design) * 100dvw);
			background: var(--lg-blu03) no-repeat center / cover;
			
			@media (width > 768px) {
				height: 3px;
			}
		}
		
		.text {
			position: relative;
			font-size: calc(var(--fs-bigNum) / var(--w-design) * 100dvw);
			font-weight: var(--fw-medium);
			line-height: var(--lh-smaller);
			
			@media (width > 768px) {
				font-size: var(--fs-big);
			}
		}
		
		.num {
			font-family: var(--ff-en);
			font-size: calc(40 / var(--w-design) * 100dvw);
			line-height: 1.0;
			letter-spacing: 0;
			
			@media (width > 768px) {
				font-size: 80px;
			}
		}
		
		.noteMark {
			position: absolute;
			left: 100%;
			top: 25%;
			font-size: calc(var(--fs-smallNum) / var(--w-design) * 100dvw);
			line-height: var(--lh-small);
			
			@media (width > 768px) {
				font-size: var(--fs-small);
			}
		}
	}
	
	.areaList {
		.area {
			position: absolute;
			width: calc(100 / var(--w) * 100%);
			aspect-ratio: 100 / 30;
			
			@media (width > 768px) {
				width: calc(120 / var(--w) * 100%);
				aspect-ratio: 120 / 40;
			}
			
			&[data-target="hokkaido"] {
				left: calc(262 / var(--w) * 100%);
				top: calc(97 / var(--h) * 100%);
				
				@media (width > 768px) {
					left: calc(365 / var(--w) * 100%);
					top: calc(133 / var(--h) * 100%);
				}
			}
			
			&[data-target="koshinetsu"] {
				left: calc(173 / var(--w) * 100%);
				top: calc(186 / var(--h) * 100%);
				
				@media (width > 768px) {
					left: calc(256 / var(--w) * 100%);
					top: calc(262 / var(--h) * 100%);
				}
			}
			
			&[data-target="kanto"] {
				left: calc(261 / var(--w) * 100%);
				top: calc(237 / var(--h) * 100%);
				
				@media (width > 768px) {
					left: calc(376 / var(--w) * 100%);
					top: calc(329 / var(--h) * 100%);
				}
			}
			
			&[data-target="tokai"] {
				left: calc(211 / var(--w) * 100%);
				top: calc(281 / var(--h) * 100%);
				
				@media (width > 768px) {
					left: calc(303 / var(--w) * 100%);
					top: calc(391 / var(--h) * 100%);
				}
			}
			
			&[data-target="kansai"] {
				left: calc(167 / var(--w) * 100%);
				top: calc(325 / var(--h) * 100%);
				
				@media (width > 768px) {
					left: calc(227 / var(--w) * 100%);
					top: calc(453 / var(--h) * 100%);
				}
			}
			
			&[data-target="chugoku"] {
				left: calc(99 / var(--w) * 100%);
				top: calc(260 / var(--h) * 100%);
				
				@media (width > 768px) {
					left: calc(132 / var(--w) * 100%);
					top: calc(363 / var(--h) * 100%);
				}
			}
			
			&[data-target="kyushu"] {
				left: calc(18 / var(--w) * 100%);
				top: calc(305 / var(--h) * 100%);
				
				@media (width > 768px) {
					left: calc(36 / var(--w) * 100%);
					top: calc(424 / var(--h) * 100%);
				}
			}
		}
		
		.btn {
			display: flex;
			justify-content: center;
			align-items: center;
			position: relative;
			width: 100%;
			height: 100%;
			background: var(--lg-blu04) no-repeat center / cover;
			border: 1px solid var(--cl-brand01);
			border-radius: calc(21 / var(--w-design) * 100dvw);
			font-size: calc(var(--fs-smallerNum) / var(--w-design) * 100dvw);
			font-weight: var(--fw-medium);
			white-space: nowrap;
			overflow: hidden;

			@media (width > 768px) {
				border-radius: 21px;
				font-size: var(--fs-smaller);
				font-weight: var(--fw-bold);
				transition-property: background, color;
				
				&:hover {
					background: linear-gradient(to right, var(--cl-brand01), var(--cl-brand01));
					color: #fff;
					opacity: 1;
				}
			}

			&::after {
				content: '';
				display: block;
				position: absolute;
				left: 50%;
				top: 50%;
				width: 250%;
				height: 150%;
				background: linear-gradient(to bottom, transparent, #fff 45%, #fff 55%, transparent) no-repeat center / cover;
				mix-blend-mode: overlay;
				rotate: 30deg;
				animation: btnShine 3.5s linear infinite;
			}
		}
	}
	
	.noteList {
		margin-top: var(--pd-vSmall);
		color: var(--cl-gry01);
		font-size: var(--fs-small);
		line-height: var(--lh-small);
	}
	
	.prefecturesList {
		position: relative;
		
		&:has(.active) {
			margin-top: var(--pd-vItem);
		}
		
		.area {
			position: absolute;
			left: 0;
			top: 0;
			height: 0;
			overflow: hidden;
			opacity: 0;
			
			&.active {
				position: relative;
				height: auto;
				opacity: 1;
				transition: var(--tr-basic);
				transition-property: opacity;
				transition-delay: 100ms;
				transition-duration: 800ms;
			}
		}
		
		.areaName {
			display: flex;
			justify-content: center;
			align-items: center;
			background: var(--cl-brand01);
			border-radius: var(--br-small);
			color: #fff;
			font-weight: var(--fw-medium);
		}
		
		.prefectures {
			margin-top: var(--pd-vItem);
		}
		
		.list {
			display: grid;
			grid-template-columns: repeat(3, 1fr);
			gap: 10px 40px;
			
			@media (width > 768px) {
				grid-template-columns: repeat(4, 1fr);
				gap: 24px var(--pd-h);
			}
		}
		
		.link {
			justify-content: space-between;
			width: 100%;
			
			&.disabled {
				color: var(--cl-gry01);
			}
		}
	}
	
	.search {
		width: 100%;
	}
}

/* よくある質問 */
.secFaq {
	--padH: 18px;
	--padV: 8px;

	@media (width > 768px) {
		--padH: var(--pd-h);
	}

	.faq {
		&:nth-child(n+2) {
			margin-top: var(--pd-vItem);
		}
		
		&.open {
			.answer {
				grid-template-rows: 1fr;
				margin-top: var(--pd-vItem);
			}

			.aInner {
				padding-top: var(--padV);
				padding-bottom: var(--padV);
			}
		}
	}
	
	.question,
	.aInner {
		display: flex;
		align-items: center;
		gap: var(--padH);
		padding: var(--padV) var(--padH);
	}
	
	.tag {
		flex: 0 0 auto;
		color: var(--cl-brand02);
		font-family: var(--ff-en);
		font-size: var(--fs-big);
		font-weight: var(--fw-medium);
		line-height: var(--lh-smaller);
	}
	
	.qText,
	.aContents {
		flex: 1 1 auto;
	}
	
	.question {
		background: var(--cl-bg01);
		border-radius: var(--br-basic);
		transition: var(--tr-basic);
		transition-property: opacity;
		
		@media (width > 768px) {
			cursor: pointer;
			
			&:hover {
				opacity: var(--tr-opacity);
			}
		}
		
		.button {
			flex: 0 0 auto;
			
			.btnOpenClose:hover {
				opacity: 1;
			}
		}
	}
	
	.qText {
		font-weight: var(--fw-medium);
	}
	
	.answer {
		display: grid;
		grid-template-rows: 0fr;
		transition: var(--tr-basic);
		transition-property: grid-template-rows, margin-top;
		
		.tag {
			color: var(--cl-brand03);
		}
	}
	
	.aInner {
		align-items: flex-start;
		padding-top: 0;
		padding-bottom: 0;
		overflow: hidden;
	}
}


/* ----------------------------------------

	ページ専用設定

---------------------------------------- */
/*
	セクション
*/
#whiteningMv {
	--w: 372;
	--h: 218;

	@media (width > 768px) {
		--w: 1200;
		--h: 550;
	}
	
	.mv {
		position: relative;
		aspect-ratio: var(--w) / var(--h);
		background: url("images/img_kv_sp.webp") no-repeat center / cover;
		border-radius: var(--br-basic);

		@media (width > 768px) {
			background-image: url("images/img_kv_pc.webp");
		}
	}
	
	.textArea {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: calc(10 / var(--w-design) * 100dvw);
		position: absolute;
		left: calc(40 / var(--w) * 100%);
		top: calc(80 / var(--h) * 100%);

		@media (width > 768px) {
			gap: min(24px, calc(24 / var(--w-contentsInner) * 100dvw));
			left: calc(291 / var(--w) * 100%);
			top: calc(186 / var(--h) * 100%);
		}
	}
	
	.pre {
		background: var(--lg-blu01);
		background-clip: text;
		color: transparent;
		font-family: var(--ff-en);
		font-size: calc(12 / var(--w-design) * 100dvw);
		font-weight: var(--fw-medium);
		line-height: 1.2;

		@media (width > 768px) {
			font-size: min(var(--fs-big), calc(var(--fs-bigNum) / var(--w-contentsInner) * 100dvw));
			line-height: var(--lh-smaller);
		}
	}
	
	.title {
		font-size: calc(var(--fs-bigNum) / var(--w-design) * 100dvw);

		@media (width > 768px) {
			font-size: min(var(--fs-big), calc(var(--fs-bigNum) / var(--w-contentsInner) * 100dvw));
		}
	}
}


#whiteningAbout {
	> :nth-child(n+2),
	> .contentsInner > :not(.secTitle) + * {
		margin-top: var(--pd-vItem);
	}
	
	.kibamiArea {
		@media (width > 768px) {
			display: flex;
			align-items: center;
			gap: 60px;
		}
		
		@media (width <= 768px) {
			> :nth-child(n+2) {
				margin-top: var(--pd-vItem);
			}
		}
	}
	
	.kibami {
		aspect-ratio: 372 / 180;
		border-radius: var(--br-basic);
		overflow: hidden;
		
		@media (width > 768px) {
			flex: 0 0 auto;
			width: 470px;
			max-width: 50%;
			aspect-ratio: 470 / 228;
		}
	}
	
	@media (width > 768px) {
		.summary {
			flex: 1 1 auto;
			order: 1;
		}
	}
	
	.catch {
		position: relative;
		
		&::before {
			content: '';
			display: block;
			position: absolute;
			left: 50%;
			top: 60px;
			width: 100%;
			aspect-ratio: 414 / 159;
			background: url("images/img_bg_wave.webp") no-repeat center / cover;
			z-index: -1;
			translate: -50% -50%;
			
			@media (width > 768px) {
				top: 110px;
			}
		}
		
		.text {
			display: block;
			width: 100%;
			
			@media (width <= 768px) {
				&::after {
					content: '';
					display: block;
					width: 100%;
					aspect-ratio: 372 / 218;
					margin-top: var(--pd-vItem);
					background: url("images/img_we_kv_lera02_sp.webp") no-repeat center / cover;
					border-radius: var(--br-basic);
				}
			}
			@media (width > 768px) {
				--w: 1000;
				
				display: flex;
				align-items: center;
				aspect-ratio: var(--w) / 390;
				padding-left: calc(121 / var(--w) * 100%);
				border-radius: var(--br-basic);
				background: url("images/img_we_kv_lera02_pc.webp") no-repeat center / cover;
				font-size: min(var(--fs-big), calc(var(--fs-bigNum) / var(--w-contentsInner) * 100dvw))
			}
		}
	}
}


#whitening3types {
	.summary {
		text-align: center;
	}
	
	.typeList {
		margin-top: var(--pd-vGroup);
		
		@media (width > 768px) {
			margin-top: var(--pd-vItem);
		}
	}
	
	.type {
		--padTop: 48px;

		@media (width > 768px) {
			--padTop: 21px;
		}
		
		position: relative;
		padding: 0 var(--pd-h) var(--pd-h);

		@media (width > 768px) {
			padding-top: calc(var(--padTop) + var(--pd-h));
		}
		
		&:nth-child(n+2) {
			margin-top: var(--pd-vItem);
		}
		
		&::before {
			content: '';
			display: block;
			position: absolute;
			left: 0;
			top: var(--padTop);
			width: 100%;
			height: calc(100% - var(--padTop));
			background: var(--cl-bg01);
			border-radius: var(--br-basic);
			box-shadow: var(--bs-basic);
			z-index: -1;
		}
		
		> :nth-child(n+2) {
			margin-top: var(--pd-vItem);
		}
	}

	.head {
		.title {
			margin-top: 16px;
			text-align: center;
			
			@media (width > 768px) {
				margin: 0;
			}
		}

		.number {
			display: flex;
			justify-content: center;
			align-items: center;
			width: 95px;
			aspect-ratio: 1;
			background: url("/common/images/img_octagon.svg") no-repeat center / contain;
			color: #fff;
			font-family: var(--ff-en);
			font-size: 40px;
			font-weight: var(--fw-medium);
			line-height: 1.0;
			
			@media (width > 768px) {
				position: absolute;
				left: var(--pd-h);
				top: 0;
				width: 120px;
				font-size: 50px;
			}
		}
	}
	
	.featureArea {
		@media (width > 768px) {
			display: flex;
			align-items: center;
			gap: 40px;
			max-width: 700px;
			margin-right: auto;
			margin-left: auto;
		}
		
		&::before {
			content: '';
			display: block;
			width: 100%;
			aspect-ratio: 330 / 136;
			margin-bottom: var(--pd-vItem);
			background: url("images/img_we_as_34.webp") no-repeat center / cover;
			border-radius: var(--br-small);
			
			@media (width > 768px) {
				flex: 0 0 auto;
				width: 300px;
				margin: 0;
			}
		}
	}
	
	.home .featureArea::before {
		background-image: url("images/img_we_hw_mp.webp");
	}
	
	.dual .featureArea::before {
		background-image: url("images/img_we_as_hw.webp");
	}
	
	.featureList {
		color: var(--cl-brand02);
		font-size: var(--fs-smaller);
		font-weight: var(--fw-medium);
		line-height: var(--lh-small);
		
		@media (width > 768px) {
			flex: 1 1 auto;
		}
		
		> :nth-child(n+2) {
			margin-top: 10px;
		}
	}
	
	.feature {
		display: flex;
		align-items: center;
		gap: 10px;
		
		&::before {
			content: '';
			flex: 0 0 auto;
			display: block;
			width: 16px;
			aspect-ratio: 1;
			background: url("/common/images/ico_check.svg") no-repeat center / contain;
		}
		
		.text {
			flex: 1 1 auto;
			display: block;
		}
	}
	
	.bridal {
		aspect-ratio: 732 / 284;
		margin: var(--pd-vGroup) auto 0;
		
		@media (width > 768px) {
			max-width: var(--w-contentsNarrow);
			aspect-ratio: 1600 / 470;
		}
	}
}


#whiteningFeature {
	.contentsInner > :not(.secTitle) + * {
		margin-top: var(--pd-vGroup);
	}
	
	.bleachShade {
		aspect-ratio: 372 / 326;
		border-radius: var(--br-basic);
		overflow: hidden;
		
		@media (width > 768px) {
			aspect-ratio: 800 / 400;
		}
	}
	
	.achievement {
		.image {
			aspect-ratio: 372 / 249;
			border-radius: var(--br-basic);
			overflow: hidden;

			@media (width > 768px) {
				aspect-ratio: 800 / 400;
			}
		}

		.note {
			position: relative;
			margin-top: var(--pd-vSmall);
			padding-left: 1.5em;
			color: var(--cl-gry01);
			font-size: var(--fs-small);
			line-height: var(--lh-small);
			
			@media (width > 768px) {
				padding-left: 1.0em;
			}

			&::before {
				content: '※';
				display: block;
				position: absolute;
				left: 0;
				top: 0;
			}

			@media (width <= 768px) {
				.item {
					display: flex;
					align-items: flex-start;
				}

				.title {
					flex: 0 0 auto;
				}

				.detail {
					flex: 1 1 auto;
				}
			}
			@media (width > 768px) {
				.item,
				.title,
				.detail {
					display: inline;
				}
				
				.item:nth-child(n+2) {
					margin-left: 1.0em;
				}
			}

			.title::after {
				content: '：';
			}
		}
	}
	
	.method {
		padding: var(--pd-h);
		background: var(--cl-bg01);
		border-radius: var(--br-basic);
		box-shadow: var(--bs-basic);
		
		&:nth-child(n+2) {
			margin-top: var(--pd-vItem);
		}
		
		.target {
			display: flex;
			align-items: center;
			gap: 10px;
			font-weight: var(--fw-medium);
			
			.main {
				display: block;
				padding: 1px var(--pd-vItem);
				background: var(--lg-blu01);
				border-radius: 100px;
				color: #fff;
			}
		}
		
		.title {
			margin-top: 10px;
			
			@media (width > 768px) {
				margin-top: 0;
			}
		}
		
		.summaryArea {
			margin-top: var(--pd-vGroup);
			
			@media (width > 768px) {
				display: flex;
				align-items: center;
				gap: var(--pd-h);
			}
			
			&::before {
				content: '';
				display: block;
				width: 100%;
				aspect-ratio: 330 / 136;
				margin-bottom: var(--pd-vItem);
				background: url("images/img_we_as_hw.webp") no-repeat center / cover;
				border-radius: var(--br-small);
				
				@media (width > 768px) {
					flex: 0 0 auto;
					width: 330px;
					max-width: 50%;
					margin: 0;
				}
			}
		}
		
		&.office .summaryArea::before {
			background-image: url("images/img_we_as_34.webp");
		}
		
		&.home .summaryArea::before {
			background-image: url("images/img_we_hw_mp.webp");
		}

		@media (width > 768px) {
			.textArea {
				flex: 1 1 auto;
			}
		}

		.summary {
			font-weight: var(--fw-medium);

			.small {
				font-size: var(--fs-smaller);
				line-height: var(--lh-small);
			}

			.note {
				font-size: var(--fs-small);
				font-weight: var(--fw-regular);
				line-height: var(--lh-small);
				vertical-align: super;
			}
		}
		
		.summaryNote,
		.noteDetail {
			color: var(--cl-gry01);
			font-size: var(--fs-small);
			line-height: var(--lh-small);
		}
		
		.detail {
			margin-top: var(--pd-vItem);
		}
		
		.noteDetail {
			margin-top: var(--pd-vSmall);
		}
	}
}


#whiteningFaq {
	.answer {
		&.howTo {
			.typeTitle {
				margin-bottom: var(--pd-vItem);
				
				&:nth-child(n+2) {
					margin-top: 18px;
					
					@media (width > 768px) {
						margin-top: var(--pd-vItem);
					}
				}
				
				&::before {
					content: '【';
				}
				&::after {
					content: '】';
				}
			}
			
			.stepList {
				--stepPad: 34px;
				
				font-size: var(--fs-smaller);
				line-height: var(--lh-small);
				
				&.office {
					:nth-child(2 of .step)::after,
					:nth-child(4 of .step)::after {
						background-image: url("images/img_owfllow-02_sp.webp");
						
						@media (width > 768px) {
							background-image: url("images/img_owfllow-02_pc.webp");
						}
					}
					
					:nth-child(3 of .step)::after {
						background-image: url("images/img_owfllow-03_sp.webp");
						
						@media (width > 768px) {
							background-image: url("images/img_owfllow-03_pc.webp");
						}
					}
				}
				
				&.home {
					:nth-child(1 of .step)::after {
						background-image: url("images/img_hwfllow-01_sp.webp");
						
						@media (width > 768px) {
							background-image: url("images/img_hwfllow-01_pc.webp");
						}
					}
					
					:nth-child(2 of .step)::after {
						background-image: url("images/img_hwfllow-02_sp.webp");
						
						@media (width > 768px) {
							background-image: url("images/img_hwfllow-02_pc.webp");
						}
					}
					
					:nth-child(3 of .step)::after {
						background-image: url("images/img_hwfllow-03_sp.webp");
						
						@media (width > 768px) {
							background-image: url("images/img_hwfllow-03_pc.webp");
						}
					}
					
					:nth-child(4 of .step)::after {
						background-image: url("images/img_hwfllow-04_sp.webp");
						
						@media (width > 768px) {
							background-image: url("images/img_hwfllow-04_pc.webp");
						}
					}
				}
			}
			
			.step {
				display: flex;
				align-items: flex-start;
				gap: 18px;
				position: relative;
				padding: 8px;
				background: var(--cl-bg01);
				border-radius: var(--br-basic);
				
				@media (width > 768px) {
					align-items: center;
					gap: var(--pd-h);
					padding: 18px var(--pd-h);
					border-radius: var(--br-small);
				}
				
				&:nth-child(n+2) {
					margin-top: var(--stepPad);
					
					&::before {
						content: '';
						display: block;
						position: absolute;
						left: 50%;
						top: calc(var(--stepPad) / 2 * -1);
						width: 0;
						height: 0;
						border-width: 8px;
						border-style: solid solid none;
						border-color: var(--cl-brand02) transparent;
						translate: -50% -50%;
					}
				}
				
				&::after {
					content: '';
					flex: 0 0 auto;
					display: block;
					width: 100px;
					aspect-ratio: 1;
					background: url("images/img_owfllow-01_sp.webp") no-repeat center / cover;
					border-radius: var(--br-small);
					
					@media (width > 768px) {
						width: 152px;
						aspect-ratio: 152 / 100;
						background-image: url("images/img_owfllow-01_pc.webp");
					}
				}

				.textArea {
					flex: 1 1 auto;
				}

				.num {
					font-family: var(--ff-en);
					font-size: var(--fs-big);
					font-weight: var(--fw-medium);
					line-height: var(--lh-smaller);
				}
				
				.option {
					margin-top: var(--pd-vSmall);
					color: var(--cl-gry01);
					font-size: var(--fs-small);
					line-height: var(--lh-small);
				}
			}
		}
		
		.source {
			position: relative;
			margin-top: var(--pd-vSmall);
			padding-left: 1.5em;
			color: var(--cl-gry01);
			font-size: var(--fs-small);
			line-height: var(--lh-small);
			
			&::before {
				content: '※';
				display: block;
				position: absolute;
				left: 0;
				top: 0;
			}
		}
		
		&.repayment {
			.aContents > :nth-child(n+2) {
				margin-top: var(--pd-vItem);
			}
			
			.link > * {
				margin: 0 auto;
			}
			
			.note {
				color: var(--cl-gry01);
				font-size: var(--fs-small);
				line-height: var(--lh-small);
			}
		}
	}
}


#whiteningNotice {
	a {
		text-decoration: underline;
	}
	
	.title {
		&:nth-child(n+2) {
			margin-top: calc(var(--lh-basic) * 1em);
			
			@media (width > 768px) {
				margin-top: var(--pd-vItem);
			}
		}
		
		&::before {
			content: '■';
		}
	}
}