@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/mzz3tbg.css');

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

	共通設定

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

/*
	変数
*/
/* SP・PC共通、SP専用 */
:root {
	/* width */
	--w-spDesign: 414;
	--w-spContents: calc(var(--w-spDesign) - var(--pd-spHNum) * 2);
	--w-pcDesign: 1000;
	
	/* padding */
	--pd-spH: 24px;
	--pd-spHNum: 24;
	--pd-pcH: 50px;
	--pd-pcHNum: 50;
	--pd-pcHContents: 100px;
	--pd-pcHContentsNum: 100;
	
	/* border-radius */
	--br-basic: 12px;
	--br-small: 6px;
	
	/* color */
	--cl-brand01: #004EA2; /* rgba(0, 78, 162) */
	--cl-brand02: #007BC7;
	--cl-brand03: #EC6B81;
	
	--cl-note: #888;
	
	--cl-bg01: #F7FAFF;
	--cl-bg02: #E9F3FF;
	
	--cl-paleGray: #d9d9d9;
	
	/* linear-gradient */
	--lg-brand01: linear-gradient(to right, var(--cl-brand01) 0%, var(--cl-brand01) 100%);
	--lg-brand02: linear-gradient(15deg, var(--cl-brand01) 0%, #009BFA 100%);
	--lg-we01: linear-gradient(to right, #0251D3 0%, #2CB5FF 30%, #9FFCF9 70%, #D7FFF4 100%);
	--lg-we02: linear-gradient(to right, var(--cl-brand01), #379ACC);
	--lg-pink01: linear-gradient(15deg, #FF4767 0%, #FF8C72 100%);
	
	/* font-family */
	--ff-basic: 'Noto Sans JP', sans-serif;
	--ff-stylish: 'futura-pt', 'Noto Sans JP', sans-serif;
	
	/* font-size */
	--fs-basic: 14px;
	--fs-small: 10px;
	--fs-bigger: 19px;
	
	/* font-weight */
	--fw-normal: 400;
	--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.5;
	--lh-title: 1.8;
	--lh-mv: 1.5;
	
	/* box-shadow */
	--bs-basic: 0 0 20px 0 rgba(0, 78, 162, 0.2);
	--bs-narrow: 0 0 6px 0 rgba(0, 78, 162, 0.65);
	
	/* text-shadow */
	--ts-mv: 0 0 6px rgba(0, 78, 162, 0.65);
	
	/* フォントサイズ調整分：デザイン幅から小さくなった分だけ、係数分フォントサイズを縮小する。末尾の数字が係数 */
	--spfs-diff: calc((var(--w-spDesign) * 1px - 100dvw) / var(--w-spDesign) * -5);
}
/* PC専用 */
@media (width > 768px) {
	:root {
		/* border-radius */
		--br-basic: 16px;
		--br-small: 8px;
		
		/* font-size */
		--fs-basic: 16px;
		--fs-small: 12px;
		--fs-bigger: 28px;
	}
}


/*
	基本要素の設定
*/
section[id^="home"] :is(img, video) {
	display: block;
	width: 100%;
	height: auto;
}

section[id^="home"] :is(strong, b) {
	font-weight: var(--fw-bold);
}

section[id^="home"] :is(a, button) {
	cursor: pointer;
	transition: opacity 300ms ease;
}
section[id^="home"] :is(a, button):hover {
	opacity: 1;
}
@media (width > 768px) {
	section[id^="home"] :is(a, button):hover {
		opacity: 0.5;
	}
}


/*
	ページレイアウト
*/
section[id^="home"] {
	color: var(--cl-brand01);
	font-family: var(--ff-basic);
	font-size: var(--fs-basic);
	font-weight: var(--fw-normal);
	letter-spacing: var(--ls-basic);
	line-height: var(--lh-basic);
}
section[id^="home"] * {
	letter-spacing: var(--ls-basic);
}

@media (width <= 768px) {
	section[id^="home"] .pcOnly {
		display: none;
	}
}
@media (width > 768px) {
	section[id^="home"] .spOnly {
		display: none;
	}
}

section[id^="home"] .contentInner {
	width: 100%;
	padding: 0 var(--pd-spH);
}
@media (width > 768px) {
	section[id^="home"] .contentInner {
		max-width: calc(var(--w-pcDesign) * 1px + var(--pd-pcH) * 2);
		margin: 0 auto;
		padding: 0 var(--pd-pcH);
	}
}


/*
	共通アニメーション
*/
/* 下からふわっと表示 */
:is(section[id^="home"], section[id^="home"] *).fadeInUp {
	--fadeInUp-translate: 0 30px;
	
	opacity: 0;
	translate: var(--fadeInUp-translate);
}
:is(section[id^="home"], section[id^="home"] *).fadeInUpDone {
	--fadeInUp-transition: 500ms ease;
	--fadeInUp-transition-property: opacity, translate;
	
	transition: var(--fadeInUp-transition);
	transition-property: var(--fadeInUp-transition-property);
}

/* 上記アニメーションの疑似要素適用 */
:is(section[id^="home"], section[id^="home"] *).fadeInUp.pseudo {
	opacity: 1;
	translate: 0;
}
:is(section[id^="home"], section[id^="home"] *).fadeInUp.pseudo::before,
:is(section[id^="home"], section[id^="home"] *).fadeInUp.pseudo::after {
	opacity: 0;
	translate: var(--fadeInUp-translate);
}
:is(section[id^="home"], section[id^="home"] *).fadeInUpDone.pseudo::before,
:is(section[id^="home"], section[id^="home"] *).fadeInUpDone.pseudo::after {
	transition: var(--fadeInUp-transition);
	transition-property: var(--fadeInUp-transition-property);
}


/*
	タイトル
*/

/* 両脇ダイヤ付き */
section[id^="home"] .ttlStyle01 {
	--diamondw: min(17px, calc(17 / var(--w-spDesign) * 100dvw));
	
	display: flex;
	justify-content: center;
	align-items: center;
	width: fit-content;
	max-width: 100%;
	min-height: min(38px, calc(38 / var(--w-spDesign) * 100dvw));
	margin: 0 auto 40px;
	padding: 0 calc(var(--diamondw) + min(19px, calc(19 / var(--w-spDesign) * 100dvw)));
	background:
		url("images/img_jewel.webp") no-repeat left center / var(--diamondw) auto,
		url("images/img_jewel.webp") no-repeat right center / var(--diamondw) auto;
	font-family: var(--ff-stylish);
	font-size: min(19px, calc(19 / var(--w-spDesign) * 100dvw + var(--spfs-diff)));
	font-weight: var(--fw-medium);
	line-height: var(--lh-title);
	text-align: center;
	white-space: nowrap;
}
@media (width > 768px) {
	section[id^="home"] .ttlStyle01 {
		min-height: 67px;
		margin-bottom: 90px;
		padding: 0 calc(32px + 30px);
		background-size: 32px auto, 32px auto;
		font-size: 28px;
		white-space: normal;
	}
}

/* 左に線ダイヤ付き */
section[id^="home"] .ttlStyle02 {
	display: flex;
	align-items: center;
	position: relative;
	min-height: min(27px, calc(27 / var(--w-spDesign) * 100dvw));
	margin-bottom: 20px;
	padding-left: calc(min(13px, calc(13 / var(--w-spDesign) * 100dvw)) + min(15px, calc(15 / var(--w-spDesign) * 100dvw)));
	font-size: min(17px, calc(17 / var(--w-spDesign) * 100dvw + var(--spfs-diff)));
	font-weight: var(--fw-bold);
	line-height: var(--lh-title);
	white-space: nowrap;
}
@media (width > 768px) {
	section[id^="home"] .ttlStyle02 {
		min-height: 37px;
		margin-bottom: 40px;
		padding-left: calc(18px + 24px);
		font-size: 20px;
		white-space: normal;
	}
}
section[id^="home"] .ttlStyle02::before {
	content: '';
	flex: 0 0 auto;
	display: block;
	position: absolute;
	left: 0;
	top: 50%;
	width: min(14px, calc(14 / var(--w-spDesign) * 100dvw));
	aspect-ratio: 1;
	border: 1px solid currentColor;
	transform: skew(20deg, 20deg);
	rotate: 45deg;
	translate: 0 -50%;
}
@media (width > 768px) {
	section[id^="home"] .ttlStyle02::before {
		width: 19px;
	}
}

/* 一部にブランドカラー太め下線 */
section[id^="home"] .ttlStyle03 {
	width: fit-content;
	max-width: 100%;
	margin: 0 auto;
	padding-bottom: 3px;
	font-size: min(18px, calc(18 / var(--w-spDesign) * 100dvw + var(--spfs-diff)));
	font-weight: var(--fw-medium);
	line-height: var(--lh-title);
	text-align: center;
	white-space: nowrap;
}
@media (width > 768px) {
	section[id^="home"] .ttlStyle03 {
		font-size: 22px;
		white-space: normal;
	}
}
section[id^="home"] .ttlStyle03 .border {
	padding-bottom: 6px;
	background: var(--lg-brand01) no-repeat left bottom / 100% 3px;
}
@media (width <= 768px) {
	section[id^="home"] .ttlStyle03 .border.pc {
		padding-bottom: 0;
		background: none;
	}
}
@media (width > 768px) {
	section[id^="home"] .ttlStyle03 .border.sp {
		padding-bottom: 0;
		background: none;
	}
}

/* ttlStyle03の直前に縦線を付けたもの */
section[id^="home"] .ttlStyle03.preBorder {
	position: relative;
	padding-top: calc(46px + 10px);
}
@media (width > 768px) {
	section[id^="home"] .ttlStyle03.preBorder {
		padding-top: calc(64px + 20px);
	}
}
section[id^="home"] .ttlStyle03.preBorder::before {
	content: '';
	display: block;
	position: absolute;
	left: 50%;
	top: 0;
	width: 1px;
	height: 46px;
	background: var(--cl-brand01);
}
@media (width > 768px) {
	section[id^="home"] .ttlStyle03.preBorder::before {
		height: 64px;
	}
}

/* 一部にグラデーション太め下線 */
section[id^="home"] .ttlStyle04 {
	width: fit-content;
	max-width: 100%;
	margin: 0 auto;
	padding-bottom: 3px;
	font-size: min(19px, calc(19 / var(--w-spDesign) * 100dvw + var(--spfs-diff)));
	font-weight: var(--fw-medium);
	line-height: var(--lh-title);
	text-align: center;
	white-space: nowrap;
}
@media (width > 768px) {
	section[id^="home"] .ttlStyle04 {
		font-size: 26px;
		white-space: normal;
	}
}
section[id^="home"] .ttlStyle04 .border {
	padding-bottom: 6px;
	background: var(--lg-we01) no-repeat left bottom / 100% 3px;
}
@media (width <= 768px) {
	section[id^="home"] .ttlStyle04 .border.pc {
		padding-bottom: 0;
		background: none;
	}
}
@media (width > 768px) {
	section[id^="home"] .ttlStyle04 .border.sp {
		padding-bottom: 0;
		background: none;
	}
}

/* 装飾なしの大きめテキスト */
section[id^="home"] .ttlStyle05 {
	font-size: var(--fs-bigger);
	font-weight: var(--fw-medium);
	line-height: var(--lh-title);
}


/*
	ボタン・リンク
*/

/* 青グラデーション両側丸めボタン */
section[id^="home"] .btnStyle01 {
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
	width: min(318px, calc(318 / var(--w-spContents) * 100dvw));
	max-width: 100%;
	height: 56px;
	margin: 0 auto;
	padding: 0 min(30px, 8%) 2px;
	background: var(--lg-brand02) no-repeat center / cover;
	border-radius: 28px;
	color: #fff;
	font-size: min(14px, calc(calc(14 / var(--w-spContents) * 100dvw + var(--spfs-diff) * 2)));
	font-weight: var(--fw-bold);
	white-space: nowrap;
}
@media (width > 768px) {
	section[id^="home"] .btnStyle01 {
		width: 366px;
		height: 64px;
		border-radius: 32px;
		font-size: min(16px, calc(16 / var(--w-pcDesign) * 100dvw));
	}
}
section[id^="home"] .btnStyle01::after {
	content: '';
	display: block;
	position: absolute;
	right: 6%;
	top: 50%;
	width: 0.61em;
	aspect-ratio: 1;
	border: 1px currentColor;
	border-style: solid solid none none;
	translate: 0 -50%;
	rotate: 45deg;
}

/* 上記ボタンのピンクver */
section[id^="home"] .btnStyle01.pink {
	background-image: var(--lg-pink01);
}

/* 青文字、青下線で右側に下向き矢印付きのリンク */
section[id^="home"] .linkStyle01 {
	display: block;
	position: relative;
	padding-right: 1.2em;
	background: var(--lg-brand01) no-repeat left bottom 3px / 100% 1px;
	font-size: 15px;
	white-space: nowrap;
}
@media (width > 768px) {
	section[id^="home"] .linkStyle01 {
		padding-right: 1.38em;
		font-size: 16px;
	}
}
section[id^="home"] .linkStyle01::after {
	content: '';
	display: block;
	position: absolute;
	right: 0;
	top: 50%;
	width: 0.6em;
	aspect-ratio: 1;
	border: 1px currentColor;
	border-style: none solid solid none;
	rotate: 45deg;
	translate: -40% -60%;
}

/* 上記リンクの灰色ver */
section[id^="home"] .linkStyle01.gray {
	background-image: linear-gradient(to right, var(--cl-note), var(--cl-note));
	color: var(--cl-note);
}

/* 上記リンクの右向き矢印ver */
section[id^="home"] .linkStyle01.right::after {
	rotate: -45deg;
	translate: -40% -40%;
}

/* commonSec */
@keyframes secMapShine {
	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%;
	}
}

:is(section, nav, div)[id^="home"] {
	.commonSec &,
	&.commonSec,
	.commonSec {
		/*
			色
		*/
		/* 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 */
		@media (width <= 768px) {
			--w-designNum: 414;
		}
		@media (width > 768px) {
			--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);
		
		--bs-basic-filter: 0 0 20px var(--cl-brand01_20);
		--bs-narrow-filter: 0 0 6px var(--cl-brand01_65);
		
		/* text-shadow */
		--ts-basic: 0 0 6px var(--cl-brand01_65);
		
		/* transition */
		--tr-basic: all 300ms ease;
		
		--tr-opacity: 0.7;

		
		/* 全体 */
		* {
			letter-spacing: var(--ls-basic);
		}

		color: var(--cl-brand01);
		font-family: var(--ff-basic);
		font-size: var(--fs-basic);
		font-weight: var(--fw-regular);
		line-height: var(--lh-basic);
		overflow: clip auto;


		/*
			コンテンツ幅
		*/
		.contentsInner {
			width: 100%;
			padding: 0 var(--pd-h);

			@media (width > 768px) {
				--baseWidthNum: var(--w-contentsNum);
				--w-contentsInnerNum: calc(var(--baseWidthNum) + var(--pd-hNum) * 2);

				max-width: calc(var(--w-contentsInnerNum) * 1px);
				margin: 0 auto;

				&.narrow {
					--baseWidthNum: var(--w-contentsNarrowNum);
				}

				&.wide {
					--baseWidthNum: var(--w-contentsWideNum);
				}
			}
		}


		/*
			タイトル
		*/
		/* セクションタイトル */
		.ttlSection {
			display: flex;
			justify-content: center;
			align-items: center;
			gap: 19px;
			margin-bottom: 40px;
			color: var(--cl-brand01);
			font-family: var(--ff-en);
			font-size: min(var(--fs-big), calc(var(--fs-bigNum) * 100dvw / var(--w-designNum)));
			font-weight: var(--fw-medium);
			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 {
				display: inline-block;
				font-size: min(var(--fs-basic), calc(var(--fs-basicNum) * 100dvw / var(--w-designNum)));
				line-height: var(--lh-basic);

				@media (width > 768px) {
					font-size: var(--fs-basic);
				}
			}
		}


		/* 汎用ボタン */
		.btnBasic {
			--height: 56px;

			@media (width > 768px) {
				--height: 64px;
			}

			display: flex;
			justify-content: center;
			align-items: center;
			position: relative;
			width: 318px;
			max-width: 100%;
			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-designNum)));
			font-weight: var(--fw-bold);
			line-height: var(--lh-basic);
			white-space: nowrap;

			@media (width > 768px) {
				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(from #fff r g b / 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: var(--tr-basic);
				transition-property: rotate;
			}

			.open &::after {
				rotate: 0deg;
			}

			.text {
				display: block;
				width: 1px;
				height: 1px;
				clip-path: inset(50%);
				overflow: hidden;
			}
		}


		/*
			近くのWEを探す
		*/
		.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-designNum) * 100dvw);
					aspect-ratio: 68 / 50;
					margin-bottom: calc(12 / var(--w-designNum) * 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-designNum) * 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-designNum) * 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-designNum) * 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-designNum) * 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-designNum) * 100dvw);
					font-size: calc(var(--fs-smallerNum) / var(--w-designNum) * 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: secMapShine 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);
				}
			}
			
			.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;
				
				.faq.open & {
					grid-template-rows: 1fr;
					margin-top: var(--pd-vItem);
				}
				
				.tag {
					color: var(--cl-brand03);
				}
			}
			
			.aInner {
				align-items: flex-start;
				padding-top: 0;
				padding-bottom: 0;
				overflow: hidden;
				
				.faq.open & {
					padding-top: var(--padV);
					padding-bottom: var(--padV);
				}
			}
			
			.aContents {
				a {
					display: inline;
					text-decoration: underline;
				}

				ul {
					> li {
						padding-left: 1.0em;
						text-indent: -1.0em;

						&::before {
							content: '・';
						}
					}
				}

				ol {
					counter-reset: ol;

					> li {
						padding-left: 1.0em;
						text-indent: -1.0em;

						&:nth-child(1)::before {
							content: '①';
						}

						&:nth-child(2)::before {
							content: '②';
						}

						&:nth-child(3)::before {
							content: '③';
						}

						&:nth-child(4)::before {
							content: '④';
						}

						&:nth-child(5)::before {
							content: '⑤';
						}
					}
				}
			}

			.q048 {
				.flows {
					> :nth-child(n+2) {
						margin-top: var(--pd-vItem);
					}
					
					.title {
						&::before {
							content: '【';
						}
						
						&::after {
							content: '】';
						}
					}
					
					.detail {
						margin-top: var(--pd-vItem);
					}
					
					.step {
						--pd: 34px;
						
						display: flex;
						flex-wrap: wrap;
						align-items: flex-start;
						gap: 0 18px;
						position: relative;
						padding: 8px;
						background: var(--cl-bg01);
						border-radius: var(--br-basic);
						text-indent: 0;
						
						@media (width > 768px) {
							align-items: center;
							gap: var(--pd-vSmall) var(--pd-h);
							padding: 18px var(--pd-h);
						}

						&::before {
							content: none;
						}
						
						&:nth-child(n+2) {
							margin-top: var(--pd);
							
							&::before {
								content: '';
								display: block;
								position: absolute;
								left: 50%;
								bottom: calc(100% + var(--pd) / 2);
								width: 0;
								height: 0;
								border-color: var(--cl-brand02) transparent;
								border-width: 8px;
								border-style: solid solid none;
								translate: -50% 50%;
							}
						}
						
						&::after {
							content: '';
							flex: 0 0 auto;
							display: block;
							width: 100px;
							aspect-ratio: 1;
							background: no-repeat center / cover;
							border-radius: var(--br-small);
							
							@media (width > 768px) {
								width: 152px;
								aspect-ratio: 152 / 100;
							}
						}
					}
					
					.textArea {
						flex: 1 1 auto;
						width: 0;
					}
					
					.num {
						font-family: var(--ff-en);
						font-size: var(--fs-big);
						font-weight: var(--fw-medium);
						line-height: var(--lh-smaller);
					}
					
					.text {
						font-size: var(--fs-smaller);
						line-height: var(--lh-small);
						
						@media (width > 768px) {
							font-size: var(--fs-basic);
							line-height: var(--lh-basic);
						}
					}
					
					.option {
						margin-top: var(--pd-vSmall);
						color: var(--cl-gry01);
						font-size: var(--fs-small);
						line-height: var(--lh-small);
					}
					
					.yellow {
						flex: 0 0 auto;
						order: 10;
						display: flex;
						justify-content: flex-start;
						align-items: center;
						gap: 10px;
						width: 100%;
						
						.image {
							flex: 0 0 auto;
							width: 150px;
							aspect-ratio: 150 / 92;
						}
						
						.text {
							font-size: var(--fs-basic);
							line-height: var(--lh-basic);
							
							@media (width <= 768px) {
								max-width: 110px;
							}
						}
					}
					
					.ow .step {
						&:nth-child(1)::after {
							background-image: url("/common/images/img_owflow_01_sp.webp");
							
							@media (width > 768px) {
								background-image: url("/common/images/img_owflow_01_pc.webp");
							}
						}
						
						&:nth-child(2)::after,
						&:nth-child(4)::after {
							background-image: url("/common/images/img_owflow_02_sp.webp");
							
							@media (width > 768px) {
								background-image: url("/common/images/img_owflow_02_pc.webp");
							}
						}
						
						&:nth-child(3)::after {
							background-image: url("/common/images/img_owflow_03_sp.webp");
							
							@media (width > 768px) {
								background-image: url("/common/images/img_owflow_03_pc.webp");
							}
						}
					}
					
					.hw .step {
						&:nth-child(1)::after {
							background-image: url("/common/images/img_hwflow_01_sp.webp");
							
							@media (width > 768px) {
								background-image: url("/common/images/img_hwflow_01_pc.webp");
							}
						}
						
						&:nth-child(2)::after {
							background-image: url("/common/images/img_hwflow_02_sp.webp");
							
							@media (width > 768px) {
								background-image: url("/common/images/img_hwflow_02_pc.webp");
							}
						}
						
						&:nth-child(3)::after {
							background-image: url("/common/images/img_hwflow_03_sp.webp");
							
							@media (width > 768px) {
								background-image: url("/common/images/img_hwflow_03_pc.webp");
							}
						}
						
						&:nth-child(4)::after {
							background-image: url("/common/images/img_hwflow_04_sp.webp");
							
							@media (width > 768px) {
								background-image: url("/common/images/img_hwflow_04_pc.webp");
							}
						}
					}
				}
			}
		}
	}
}


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

	ホームホワイトニングページ用設定

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

/*
	ページレイアウト
*/

/* ページ全体のレイアウト */
main > [id^="home"] + [id^="home"] {
	margin-top: 100px;
}
@media (width > 768px) {
	main > [id^="home"] + [id^="home"] {
		margin-top: 120px;
	}
}

/* エキスパンドレイアウト */
section[id^="home"] .expandLayout {
	border-top: 1px solid var(--cl-brand01);
}
section[id^="home"] .expandLayout .expandItem {
	border-bottom: 1px solid var(--cl-brand01);
}
section[id^="home"] .expandLayout .expandTitle {
	display: flex;
	align-items: center;
	padding: 20px 0;
	font-size: 16px;
	font-weight: var(--fw-medium);
	line-height: var(--lh-title);
}
@media (width > 768px) {
	section[id^="home"] .expandLayout .expandTitle {
		font-size: 18px;
	}
}
section[id^="home"] .expandLayout .expandText {
	flex: 1 1 auto;
}
section[id^="home"] .expandLayout .expandButton {
	flex: 0 0 auto;
	margin-left: 15px;
}
@media (width > 768px) {
	section[id^="home"] .expandLayout .expandButton {
		margin-left: 30px;
	}
}
section[id^="home"] .expandLayout .expandButton button {
	display: block;
	position: relative;
	width: 18px;
	aspect-ratio: 1;
	color: transparent;
	font-size: 0;
}
@media (width > 768px) {
	section[id^="home"] .expandLayout .expandButton button {
		width: 24px;
	}
}
section[id^="home"] .expandLayout .expandButton button::before,
section[id^="home"] .expandLayout .expandButton button::after {
	content: '';
	display: block;
	position: absolute;
	left: 50%;
	top: 50%;
	width: 100%;
	height: 1px;
	background: var(--cl-brand01);
	translate: -50% 0;
	transition: rotate 200ms ease;
}
section[id^="home"] .expandLayout .expandDetail {
	display: grid;
	grid-template-rows: 1fr;
	padding-bottom: 40px;
	transition: grid-template-rows 300ms ease;
}
@media (width > 768px) {
	section[id^="home"] .expandLayout .expandDetail {
		padding-bottom: 60px;
	}
}
section[id^="home"] .expandLayout .expandInner {
	overflow: hidden;
}
section[id^="home"] .expandLayout .expandItem.close .expandButton button::after {
	rotate: -90deg;
}
section[id^="home"] .expandLayout .expandItem.close .expandDetail {
	grid-template-rows: 0fr;
	padding-bottom: 0;
}

/* LINEバナーセクションレイアウト */
section[id^="home"].lineBannerLayout {
	margin-top: 60px;
}
@media (width > 768px) {
	section[id^="home"].lineBannerLayout {
		display: none;
	}
}
@media (width <= 768px) {
	section[id^="home"].lineBannerLayout + section {
		margin-top: 60px;
	}
}
section[id^="home"].lineBannerLayout a {
	display: block;
	aspect-ratio: 366 / 408;
}


/*
	セクション
*/

/* homeMv */
#homeMv {
	--w: 366;
	--h: 531;

	@media (width > 768px) {
		--w: 1200;
		--h: 550;
		--pcBase: calc(var(--w) + var(--pd-pcHNum) * 2);

		.contentInner {
			max-width: calc(var(--w) * 1px + var(--pd-pcH) * 2);
		}
	}
	
	.mv {
		position: relative;
		aspect-ratio: var(--w) / var(--h);
		background: url("images/img_hwmv03_sp.webp") no-repeat center / cover;
		border-radius: var(--br-basic);
		line-height: 1.3;
		text-align: center;
		white-space: nowrap;
		overflow: hidden;
		
		@media (width > 768px) {
			background-image: url("images/img_hwmv03_pc.webp");
		}
		
		:is(.title, .catch) {
			position: absolute;
			left: 50%;
			translate: -50% 0;
			
			@media (width > 768px) {
				translate: none;
			}
		}

		.badge {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			position: absolute;
			left: calc(9 / var(--w) * 100%);
			top: calc(26 / var(--h) * 100%);
			width: calc(140 / var(--w-spDesign) * 100dvw);
			aspect-ratio: 1;
			border-radius: 50%;
			background: rgb(from #fff r g b / 0.6);
			overflow: hidden;
			box-shadow: 0 0 calc(13 / var(--w-spDesign) * 100dvw) 0 rgb(from var(--cl-brand01) r g b / 0.2);
			
			@media (width > 768px) {
				left: calc(81 / var(--w) * 100%);
				top: calc(45 / var(--h) * 100%);
				width: min(190px, calc(190 / var(--pcBase) * 100dvw));
				box-shadow: 0 0 min(20px, calc(20 / var(--pcBase) * 100dvw)) 0 rgb(from var(--cl-brand01) r g b / 0.2);
			}

			&::before {
				content: '';
				display: block;
				position: absolute;
				left: 0;
				top: 0;
				width: 100%;
				height: 100%;
				background: var(--lg-we01) no-repeat center / cover;
				border-radius: 50%;
				mask: radial-gradient(closest-side, transparent 94%, #000 96%) alpha no-repeat center / cover;
				
				@media (width > 768px) {
					mask-image: radial-gradient(closest-side, transparent 95%, #000 97%);
				}
			}

			> * {
				position: relative;
				background: var(--lg-brand02) no-repeat center / cover;
				background-clip: text;
				color: transparent;
				font-size: calc(14 / var(--w-spDesign) * 100dvw);
				font-weight: var(--fw-medium);
				
				@media (width > 768px) {
					font-size: min(16px, calc(16 / var(--pcBase) * 100dvw));
				}
			}

			.from {
				background-image: var(--lg-pink01);
				line-height: var(--lh-basic);
			}

			.clinics {
				line-height: 1.5;

				.num {
					display: inline-block;
					font-family: var(--ff-stylish);
					font-size: calc(21 / var(--w-spDesign) * 100dvw);
					letter-spacing: 0;
					line-height: var(--lh-title);
				
					@media (width > 768px) {
						font-size: min(32px, calc(32 / var(--pcBase) * 100dvw));
					}
				}

				.note {
					display: inline-block;
					font-size: calc(10 / var(--w-spDesign) * 100dvw);
					line-height: 1.3;
				
					@media (width > 768px) {
						font-size: min(12px, calc(12 / var(--pcBase) * 100dvw));
					}
				}
			}
		}
		
		.title {
			display: flex;
			align-items: flex-end;
			top: calc(258 / var(--h) * 100%);
			
			@media (width > 768px) {
				left: calc(314 / var(--w) * 100%);
				top: calc(115 / var(--h) * 100%);
			}
			
			&::after {
				content: '';
				display: block;
				position: absolute;
				top: 105%;
				left: -2%;
				width: 100%;
				height: calc(2 / var(--w-spDesign) * 100dvw);
				background: var(--lg-we01) no-repeat center / cover;
				
				@media (width > 768px) {
					height: min(3px, calc(3 / var(--pcBase) * 100dvw));
				}
			}
			
			* {
				display: block;
			}
			
			.new {
				flex: 0 0 auto;
				background: var(--lg-we01) no-repeat center / cover;
				background-clip: text;
				color: transparent;
				font-size: calc(40 / var(--w-spDesign) * 100dvw);
				transform: skewX(-13deg);
				
				@media (width > 768px) {
					font-size: min(54px, calc(54 / var(--pcBase) * 100dvw));
				}
			}
			
			.main {
				flex: 0 0 auto;
				background: var(--lg-brand02) no-repeat center / cover;
				background-clip: text;
				color: transparent;
				font-size: calc(24 / var(--w-spDesign) * 100dvw);
				font-weight: var(--fw-bold);
				text-align: left;
				transform: skewX(-13deg);
				
				@media (width > 768px) {
					font-size: min(32px, calc(32 / var(--pcBase) * 100dvw));
				}
			}
			
			.we {
				font-size: calc(20 / var(--w-spDesign) * 100dvw);
				
				@media (width > 768px) {
					font-size: min(28px, calc(28 / var(--pcBase) * 100dvw));
				}
			}
		}
		
		.catch {
			bottom: calc(34 / var(--h) * 100%);
			background: var(--lg-brand02) no-repeat center / cover;
			background-clip: text;
			color: transparent;
			font-size: calc(19 / var(--w-spDesign) * 100dvw);
			font-weight: var(--fw-medium);
			
			@media (width > 768px) {
				left: calc(262 / var(--w) * 100%);
				bottom: calc(72 / var(--h) * 100%);
				font-size: min(24px, calc(24 / var(--pcBase) * 100dvw));
			}
		}
	}

	.noteDetail {
		margin-top: 10px;
		color: var(--cl-note);
		font-size: var(--fs-small);
		line-height: var(--lh-small);
		
		@media (width > 768px) {
			margin-top: 12px;
		}
	}

	.reserve {
		margin-top: 24px;
		
		@media (width > 768px) {
			margin-top: 90px;
		}
	}
}


/* homeAbout */
#homeAbout .summary {
	display: flex;
	flex-wrap: wrap;
	gap: 24px 10px;
	text-align: center;
}
@media (width > 768px) {
	#homeAbout .summary {
		gap: 91px 24px;
		max-width: 800px;
		margin: 0 auto;
	}
}
#homeAbout .summary::before,
#homeAbout .summary::after {
	content: '';
	flex: 1 0 auto;
	display: block;
	width: 100px;
	aspect-ratio: 178 / 130;
	background: no-repeat center / cover;
	border-radius: var(--br-small);
}
@media (width > 768px) {
	#homeAbout .summary::before,
	#homeAbout .summary::after {
		border-radius: var(--br-basic);
	}
}
#homeAbout .summary::before {
	background-image: url("images/img_abouthw01.webp");
}
#homeAbout .summary::after {
	background-image: url("images/img_abouthw02.webp");
}
#homeAbout .summary .text {
	flex: 0 0 auto;
	order: 1;
	display: block;
	width: 100%;
}

#homeAbout .merits {
	margin-top: 60px;
	padding: 39px 0 42px;
	background: url("images/sp_img_hwbg01.webp") no-repeat center top / cover;
}
@media (width > 768px) {
	#homeAbout .merits {
		margin-top: 120px;
		padding: 90px 0;
		background-image: url("images/pc_img_hwbg01.webp");
	}
}
#homeAbout .merits .list {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 10px;
	margin-top: 24px;
	text-align: center;
}
@media (width <= 768px) {
	#homeAbout .merits .list {
		font-size: 12px;
		line-height: 1.6;
	}
}
@media (width > 768px) {
	#homeAbout .merits .list {
		grid-template-columns: repeat(4, 1fr);
		gap: 27px;
		margin-top: 60px;
	}
}
#homeAbout .merits .list > * {
	display: flex;
	flex-direction: column;
	height: 100%;
	min-height: 172px;
	padding: 19px 19px 6px;
	background: #fff;
	border-radius: var(--br-small);
	box-shadow: var(--bs-basic);
}
@media (width > 768px) {
	#homeAbout .merits .list > * {
		min-height: 0;
		padding: 30px 30px 25px;
		border-radius: var(--br-basic);
	}
}
#homeAbout .merits .list > *::before {
	content: '';
	flex: 0 0 auto;
	width: 100%;
	aspect-ratio: 140 / 96;
	margin-bottom: 2px;
	background: no-repeat center / cover;
	border-radius: var(--br-small);
}
@media (width > 768px) {
	#homeAbout .merits .list > *::before {
		margin-bottom: 30px;
	}
}
#homeAbout .merits .list > :nth-child(1)::before {
	background-image: url("images/img_hwskin.webp");
}
#homeAbout .merits .list > :nth-child(2)::before {
	background-image: url("images/img_hwbath.webp");
}
#homeAbout .merits .list > :nth-child(3)::before {
	background-image: url("images/img_hwtv.webp");
}
#homeAbout .merits .list > :nth-child(4)::before {
	background-image: url("images/img_hwgoo.webp");
}
#homeAbout .merits .text {
	flex: 1 1 auto;
	display: flex;
	justify-content: center;
	align-items: center;
}


/* homeEasy */
#homeEasy .target {
	aspect-ratio: 366 / 146;
}
@media (width > 768px) {
	#homeEasy .target {
		aspect-ratio: 800 / 320;
		max-width: 800px;
		margin: 0 auto;
	}
}


/* homeReason */
@media (width <= 768px) {
	#homeReason {
		margin-top: 60px;
	}
}

#homeReason .secTitle {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}
#homeReason .secTitle::before {
	content: '';
	display: block;
	width: 75px;
	aspect-ratio: 75 / 55;
	margin-bottom: 17px;
	background: url("images/icon_logo-symbol.svg") no-repeat center / contain;
}
@media (width > 768px) {
	#homeReason .secTitle::before {
		margin-bottom: 24px;
	}
}

#homeReason .box {
	margin-top: 40px;
}
@media (width > 768px) {
	#homeReason .box {
		max-width: 800px;
		margin: 90px auto 0;
	}
}

#homeReason .newest {
	aspect-ratio: 366 / 246;
	border-radius: var(--br-basic);
	overflow: hidden;
}
@media (width > 768px) {
	#homeReason .newest {
		aspect-ratio: 800 / 537;
		box-shadow: var(--bs-basic);
	}
}

#homeReason .featureTitle {
	margin-top: 24px;
}
@media (width > 768px) {
	#homeReason .featureTitle {
		margin-top: 60px;
	}
}
#homeReason .featureTitle .note {
	display: inline-block;
	margin-right: -0.5em;
	font-size: var(--fs-small);
	line-height: var(--lh-small);
	translate: -30% -90%;
}
#homeReason .featureNote {
	margin-top: 15px;
	color: var(--cl-note);
	font-size: var(--fs-small);
	line-height: var(--lh-small);
}
@media (width > 768px) {
	#homeReason .featureNote {
		margin-top: 26px;
	}
}
#homeReason .featureGraph {
	aspect-ratio: 366 / 368;
	margin-top: 1px;
}
@media (width > 768px) {
	#homeReason .featureGraph {
		aspect-ratio: 800 / 667;
		margin-top: 15px;
	}
}

#homeReason .featureCatch {
	position: relative;
	margin-top: 42px;
	text-align: center;
}
@media (width > 768px) {
	#homeReason .featureCatch {
		margin-top: 61px;
	}
}
#homeReason .featureCatch::before {
	content: '';
	display: block;
	position: absolute;
	left: 50%;
	top: 50%;
	width: 130px;
	aspect-ratio: 1;
	background: url("images/img_wdrop.webp") no-repeat center / contain;
	translate: -50% -50%;
}
@media (width > 768px) {
	#homeReason .featureCatch::before {
		width: 200px;
	}
}
#homeReason .featureCatch > * {
	position: relative;
	z-index: 1;
}
#homeReason .featureCatch :is(b, .percentage) {
	font-family: var(--ff-stylish);
	font-weight: inherit;
}
@media (width <= 768px) {
	#homeReason .featureCatch :is(b, .percentage) {
		font-size: 24px;
		line-height: 1.3;
	}
}
@media (width > 768px) {
	#homeReason .featureCatch b {
		font-size: 36px;
		line-height: 1.3;
	}
}

#homeReason .featureDetailArea {
	--w: 366;
	--h: 257;
	
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-top: 40px;
}
@media (width > 768px) {
	#homeReason .featureDetailArea {
		--w: 800;
		--h: 428;
		--pcBase: calc(var(--w) + var(--pd-pcHNum) * 2);

		margin-top: 74px;
	}
}
#homeReason .featureDetailArea::before {
	content: '';
	display: block;
	width: 1px;
	height: 42px;
	margin-bottom: 13px;
	background: var(--cl-brand01);
}
@media (width > 768px) {
	#homeReason .featureDetailArea::before {
		height: 60px;
		margin-bottom: 30px;
	}
}
#homeReason .featureDetailArea .pictureArea {
	position: relative;
	width: 100%;
	aspect-ratio: var(--w) / var(--h);
	background: url("images/sp_img_mplife.webp") no-repeat center / cover;
	border-radius: var(--br-basic);
}
@media (width > 768px) {
	#homeReason .featureDetailArea .pictureArea {
		background-image: url("images/pc_img_mplife.webp");
	}
}
#homeReason .featureDetailArea .text {
	position: absolute;
	left: calc(24 / var(--w) * 100%);
	top: calc(21 / var(--h) * 100%);
	font-size: calc(19 / var(--w-spDesign) * 100dvw);
	font-weight: var(--fw-medium);
	line-height: var(--lh-title);
	white-space: nowrap;
}
@media (width > 768px) {
	#homeReason .featureDetailArea .text {
		left: calc(80 / var(--w) * 100%);
		top: calc(91 / var(--h) * 100%);
		font-size: min(28px, calc(28 / var(--pcBase) * 100dvw));
	}
}
#homeReason .featureDetailArea .text .pre {
	font-size: calc(14 / var(--w-spDesign) * 100dvw);
}
@media (width > 768px) {
	#homeReason .featureDetailArea .text .pre {
		font-size: min(16px, calc(16 / var(--pcBase) * 100dvw));
		font-weight: var(--fw-regular);
		line-height: var(--lh-basic);
	}
}
#homeReason .featureDetailArea .text .main {
	margin-top: calc(14 / var(--w-spDesign) * 100dvw);
}
@media (width > 768px) {
	#homeReason .featureDetailArea .text .main {
		margin-top: min(4px, calc(4 / var(--pcBase) * 100dvw));
	}
}

#homeReason .safety {
	margin-top: 100px;
	padding: 13px 0 62px;
	background: url("images/sp_img_check_bg.webp") no-repeat center top / cover;
}
@media (width > 768px) {
	#homeReason .safety {
		margin-top: 170px;
		padding: 101px 0 90px;
		background-image: url("images/pc_img_check_bg.webp");
	}
}

#homeReason .safety .titleContainer::after {
	content: '';
	display: block;
	aspect-ratio: 366 / 220;
	margin-top: 24px;
	background: url("images/sp_img_factory.webp") no-repeat center / contain;
}
@media (width > 768px) {
	#homeReason .safety .titleContainer::after {
		aspect-ratio: 800 / 477;
		max-width: 800px;
		margin: 60px auto 0;
		background-image: url("images/pc_img_factory.webp");
	}
}

#homeReason .safety .box {
	margin-top: 11px;
}
@media (width > 768px) {
	#homeReason .safety .box {
		max-width: 800px;
		margin: 7px auto 0;
	}
}

#homeReason .safety .approval {
	display: flex;
	justify-content: flex-start;
	align-items: center;
	gap: 13px;
	width: calc(var(--w-spContents) * 1px);
	max-width: 100%;
	margin: 0 auto;
}
@media (width > 768px) {
	#homeReason .safety .approval {
		gap: 40px;
		width: 540px;
	}
}
#homeReason .safety .approval .image {
	flex: 0 1 auto;
	width: 74px;
	aspect-ratio: 74 / 105;
}
@media (width > 768px) {
	#homeReason .safety .approval .image {
		width: 120px;
	}
}
#homeReason .safety .approval .text {
	flex: 0 0 auto;
	margin: 0;
}
@media (width > 768px) {
	#homeReason .safety .approval .text {
		margin-top: 15px;
	}
}
#homeReason .safety .approval .text .small {
	font-size: min(14px, calc(14 / var(--w-spDesign) * 100dvw));
	font-weight: var(--fw-regular);
	line-height: var(--lh-basic);
}
@media (width > 768px) {
	#homeReason .safety .approval .text .small {
		font-size: var(--fs-basic);
	}
}
#homeReason .safety .approval .text .base {
	position: relative;
}
#homeReason .safety .approval .text .note {
	position: absolute;
	font-size: min(10px, calc(10 / var(--w-spDesign) * 100dvw));
}
@media (width > 768px) {
	#homeReason .safety .approval .text .note {
		font-size: var(--fs-small);
	}
}

#homeReason .safety .checkItems {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 150px;
	height: 30px;
	margin: 20px auto 0;
	background: var(--lg-we02) no-repeat center / cover;
	color: #fff;
	font-size: 16px;
	font-weight: var(--fw-medium);
	line-height: 1.3;
}
@media (width > 768px) {
	#homeReason .safety .checkItems {
		width: 276px;
		height: 50px;
		margin-top: 35px;
		font-size: 28px;
		line-height: var(--lh-title);
	}
}
#homeReason .safety .checkItemsList {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 10px;
	width: 100%;
	margin-top: 24px;
}
@media (width > 768px) {
	#homeReason .safety .checkItemsList {
		gap: 40px;
		margin-top: 60px;
	}
}
#homeReason .safety .checkItemsList > * {
	padding: 24px 19px;
	background: #fff;
	border-radius: var(--br-small);
	box-shadow: var(--bs-basic);
}
@media (width > 768px) {
	#homeReason .safety .checkItemsList > * {
		padding: 30px;
		border-radius: var(--br-basic);
	}
}
#homeReason .safety .checkItemsList dt {
	font-size: min(14px, calc(14 / var(--w-spDesign) * 100dvw));
	font-weight: var(--fw-bold);
	text-align: center;
	white-space: nowrap;
}
@media (width > 768px) {
	#homeReason .safety .checkItemsList dt {
		font-size: min(20px, calc(20 / var(--w-pcDesign) * 100dvw));
		font-weight: var(--fw-medium);
	}
}
#homeReason .safety .checkItemsList dd {
	margin-top: 10px;
}
@media (width <= 768px) {
	#homeReason .safety .checkItemsList dd {
		font-size: 12px;
		line-height: 1.6;
	}
}
@media (width > 768px) {
	#homeReason .safety .checkItemsList dd {
		max-width: 250px;
		margin: 16px auto 0;
		text-align: center;
	}
}

#homeReason .safety .safetyNote {
	margin-top: 10px;
	color: var(--cl-note);
	font-size: var(--fs-small);
	line-height: var(--lh-small);
}
@media (width > 768px) {
	#homeReason .safety .safetyNote {
		margin-top: 16px;
	}
}

#homeReason .flow {
	margin-top: 60px;
}
@media (width > 768px) {
	#homeReason .flow {
		margin-top: 89px;
	}
}
#homeReason .flow .flowTitle {
	margin-top: 43px;
}
@media (width > 768px) {
	#homeReason .flow .flowTitle {
		margin-top: 59px;
	}
}
#homeReason .flow .steps {
	margin-top: 24px;
}
@media (width > 768px) {
	#homeReason .flow .steps {
		margin-top: 40px;
	}
}
#homeReason .flow .steps li {
	position: relative;
}
#homeReason .flow .steps li:nth-child(n+2) {
	margin-top: 14px;
}
@media (width > 768px) {
	#homeReason .flow .steps li:nth-child(n+2) {
		margin-top: 80px;
	}
}
#homeReason .flow .steps li:nth-child(1) img {
	aspect-ratio: 366 / 426;
}
@media (width > 768px) {
	#homeReason .flow .steps li:nth-child(1) img {
		aspect-ratio: 1000 / 454;
	}
}
#homeReason .flow .steps li:nth-child(2) img {
	aspect-ratio: 366 / 462;
}
@media (width > 768px) {
	#homeReason .flow .steps li:nth-child(2) img {
		aspect-ratio: 1000 / 454;
	}
}
#homeReason .flow .steps li:nth-child(3) img {
	aspect-ratio: 366 / 430;
}
@media (width > 768px) {
	#homeReason .flow .steps li:nth-child(3) img {
		aspect-ratio: 1000 / 454;
	}
}


/* homeMenu */
#homeMenu .menuList > .item:nth-child(n+2) {
	margin-top: 40px;
	padding-top: 40px;
	border-top: 1px solid var(--cl-note);
}
@media (width > 768px) {
	#homeMenu .menuList > .item:nth-child(n+2) {
		margin-top: 100px;
		padding-top: 100px;
	}
}

@media (width <= 768px) {
	#homeMenu .menuList > .item > dt .contentsBox {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: 0 14px;
		padding: 0 var(--pd-spH);
	}
	#homeMenu .menuList > .item > dt .contentsBox::before {
		content: '';
		flex: 0 0 auto;
		align-self: flex-start;
		width: calc(116 / 318 * 100%);
		aspect-ratio: 1;
		background: no-repeat center / cover;
		border-radius: var(--br-small);
	}
	#homeMenu .menuList > .item.kit > dt .contentsBox::before {
		background-image: url("images/img_hwimage.webp");
	}
	#homeMenu .menuList > .item.gel > dt .contentsBox::before {
		background-image: url("images/sp_img_hwgelimage_menu.webp");
	}
	#homeMenu .menuList > .item > dt .container {
		flex: 1 1 auto;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		width: 1em;
		min-height: 116px;
	}
}
@media (width > 768px) {
	#homeMenu .menuList > .item > :is(dt, dd) {
		max-width: 800px;
		margin-right: auto;
		margin-left: auto;
	}
	#homeMenu .menuList > .item > dt {
		display: flex;
		align-items: center;
	}
	#homeMenu .menuList > .item.kit > dt {
		gap: 28px;
	}
	#homeMenu .menuList > .item.gel > dt {
		gap: 60px;
	}
	#homeMenu .menuList > .item > dt::before {
		content: '';
		flex: 0 0 auto;
		align-self: flex-start;
		background: no-repeat center / cover;
		border-radius: var(--br-basic);
	}
	#homeMenu .menuList > .item.kit > dt::before {
		width: calc(330 / 800 * 100%);
		aspect-ratio: 1;
		background-image: url("images/img_hwimage.webp");
	}
	#homeMenu .menuList > .item.gel > dt::before {
		width: calc(369 / 800 * 100%);
		aspect-ratio: 369 / 260;
		background-image: url("images/pc_img_hwgelimage_menu.webp");
	}
	#homeMenu .menuList > .item > dt .contentsBox {
		flex: 1 1 auto;
	}
}
#homeMenu .menuList .menuTitle {
	font-size: 16px;
	font-weight: var(--fw-bold);
	line-height: var(--lh-title);
}
@media (width > 768px) {
	#homeMenu .menuList .menuTitle {
		min-height: calc(var(--fs-bigger) * 1.5 * 2);
		font-size: var(--fs-bigger);
		font-weight: var(--fw-medium);
	}
}
#homeMenu .menuList .price {
	font-size: 12px;
	font-weight: var(--fw-medium);
	line-height: var(--lh-title);
}
@media (width > 768px) {
	#homeMenu .menuList .price {
		display: flex;
		justify-content: flex-end;
		align-items: flex-end;
		margin-top: 24px;
		font-size: 24px;
		font-weight: var(--fw-bold);
		line-height: 1.0;
	}
}
#homeMenu .menuList .price .num {
	font-size: 18px;
	font-weight: var(--fw-bold);
}
@media (width > 768px) {
	#homeMenu .menuList .price .num {
		flex: 0 0 auto;
		font-size: 50px;
	}
	#homeMenu .menuList .price .post {
		flex: 0 0 auto;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	#homeMenu .menuList .price .unit {
		order: 1;
	}
	#homeMenu .menuList .price .tax {
		font-size: 10px;
	}
}
#homeMenu .menuList .description {
	flex: 0 0 auto;
	width: 100%;
	margin-top: 24px;
	padding: 10px 19px;
	background: var(--cl-bg01);
	border-radius: var(--br-small);
	font-size: var(--fs-small);
	line-height: var(--lh-small);
}
@media (width > 768px) {
	#homeMenu .menuList .description {
		padding: 12px 16px;
		border-radius: var(--br-basic);
		font-size: var(--fs-basic);
		line-height: var(--lh-basic);
	}
	#homeMenu .menuList .description .part {
		width: fit-content;
		max-width: 100%;
		margin: 0 auto;
	}
}
#homeMenu .menuList .description dd {
	position: relative;
	padding-left: 1.0em;
}
#homeMenu .menuList .description dd::before {
	content: '・';
	display: block;
	position: absolute;
	left: 0;
	top: 0;
}
#homeMenu .menuList .description dd.note {
	padding: 0;
	color: var(--cl-note);
}
#homeMenu .menuList .description dd.note::before {
	content: none;
}
#homeMenu .menuList .menuDetail {
	flex: 0 0 auto;
	width: 100%;
	margin-top: 12px;
}
@media (width <= 768px) {
	#homeMenu .menuList .menuDetail {
		font-size: 12px;
		font-weight: var(--fw-medium);
		line-height: var(--lh-title);
	}
}
@media (width > 768px) {
	#homeMenu .menuList .menuDetail {
		margin-top: 30px;
	}
}

#homeMenu .menuList > .item > dd {
	margin-top: 33px;
}
@media (width > 768px) {
	#homeMenu .menuList > .item > dd {
		margin-top: 60px;
	}
	#homeMenu .menuList .gel > dd {
		margin-top: 90px;
	}
}

@media (width > 768px) {
	#homeMenu .menuList .kit > dd {
		max-width: none;
	}
}
#homeMenu .menuList .kit .expandTitle {
	padding-top: 10px;
	padding-bottom: 10px;
	font-size: var(--fs-basic);
	font-weight: var(--fw-regular);
	line-height: var(--lh-basic);
}
@media (width > 768px) {
	#homeMenu .menuList .kit .expandTitle {
		padding-top: 16px;
		padding-bottom: 16px;
	}
}
#homeMenu .menuList .kit .stepsList {
	padding-top: 94px;
}
@media (width > 768px) {
	#homeMenu .menuList .kit .stepsList {
		padding: 140px var(--pd-pcHContents) 0 0;
	}
}
#homeMenu .menuList .kit .stepsList .step {
	position: relative;
	padding: 54px var(--pd-spH) 28px;
	background: var(--cl-bg01);
	border-radius: var(--br-basic);
}
@media (width > 768px) {
	#homeMenu .menuList .kit .stepsList .step {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 54px 0 54px var(--pd-pcHContents);
	}
	#homeMenu .menuList .kit .stepsList .step::after {
		content: '';
		flex: 0 0 auto;
		width: 307px;
		aspect-ratio: 1;
		margin: 0 -80px 0 30px;
		background: no-repeat center / cover;
		border-radius: var(--br-basic);
		box-shadow: var(--bs-basic);
	}
}
#homeMenu .menuList .kit .stepsList .step:nth-child(n+2) {
	margin-top: 54px;
}
@media (width > 768px) {
	#homeMenu .menuList .kit .stepsList .step:nth-child(n+2) {
		margin-top: 120px;
	}
	#homeMenu .menuList .kit .stepsList .step:nth-child(1)::after {
		background-image: url("images/pc_img_fllow-01.webp");
	}
	#homeMenu .menuList .kit .stepsList .step:nth-child(2)::after {
		background-image: url("images/pc_img_fllow-02.webp");
	}
	#homeMenu .menuList .kit .stepsList .step:nth-child(3)::after {
		background-image: url("images/pc_img_hwbeli02.webp");
	}
}
#homeMenu .menuList .kit .stepsList .num {
	position: absolute;
	left: var(--pd-spH);
	top: 0;
	font-family: var(--ff-stylish);
	font-size: 60px;
	font-weight: var(--fw-medium);
	translate: 0 -50%;
}
@media (width > 768px) {
	#homeMenu .menuList .kit .stepsList .num {
		left: 50px;
		font-size: 120px;
	}
	#homeMenu .menuList .kit .stepsList .contents {
		flex: 0 1 auto;
		width: fit-content;
	}
}
#homeMenu .menuList .kit .stepsList .summary {
	font-size: 16px;
	font-weight: var(--fw-medium);
	line-height: var(--lh-title);
}
@media (width > 768px) {
	#homeMenu .menuList .kit .stepsList .summary {
		font-size: var(--fs-bigger);
	}
}
@media (width <= 768px) {
	#homeMenu .menuList .kit .stepsList .summary::after {
		content: '';
		display: block;
		aspect-ratio: 318 / 200;
		margin-top: 22px;
		background: no-repeat center / cover;
		border-radius: var(--br-basic);
		box-shadow: var(--bs-basic);
	}
	#homeMenu .menuList .kit .stepsList .step:nth-child(1) .summary::after {
		background-image: url("images/sp_img_fllow-01.webp");
	}
	#homeMenu .menuList .kit .stepsList .step:nth-child(2) .summary::after {
		background-image: url("images/sp_img_fllow-02.webp");
	}
	#homeMenu .menuList .kit .stepsList .step:nth-child(3) .summary::after {
		background-image: url("images/sp_img_hwbeli02.webp");
	}
}
#homeMenu .menuList .kit .stepsList .detail {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-top: 26px;
}
@media (width > 768px) {
	#homeMenu .menuList .kit .stepsList .detail {
		margin-top: 0;
	}
}
#homeMenu .menuList .kit .stepsList > :nth-child(2) .detail::before {
	content: '';
	display: block;
	width: 219px;
	max-width: 100%;
	aspect-ratio: 290 / 122;
	margin: 0 auto 11px;
	background: url("images/img_mpgel.webp") no-repeat center / contain;
}
@media (width > 768px) {
	#homeMenu .menuList .kit .stepsList > :nth-child(2) .detail::before {
		order: 1;
		margin: 24px auto 0 0;
	}
}
#homeMenu .menuList .kit .stepsList .detail .text {
	flex: 0 0 auto;
	display: block;
	width: 100%;
}
#homeMenu .menuList .kit .reserve {
	margin-top: 40px;
}
@media (width > 768px) {
	#homeMenu .menuList .kit .reserve {
		margin-top: 90px;
	}
}

#homeMenu .menuList .gel .buy .smaller {
	font-size: min(11px, calc(11 / var(--w-spDesign) * 100dvw));
}
@media (width > 768px) {
	#homeMenu .menuList .gel .buy .smaller {
		font-size: min(12px, calc(12 / var(--w-pcDesign) * 100dvw));
	}
}
#homeMenu .menuList .gel .catch {
	margin-top: 40px;
	text-align: center;
}
@media (width > 768px) {
	#homeMenu .menuList .gel .catch {
		margin-top: 90px;
	}
}
#homeMenu .menuList .gel .calculate {
	max-width: calc(var(--w-spContents) * 1px);
	margin: 27px auto 0;
}
@media (width > 768px) {
	#homeMenu .menuList .gel .calculate {
		max-width: 455px;
		margin-top: 60px;
	}
}
#homeMenu .menuList .gel .calcMain {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: flex-end;
	gap: 10px 41px;
}
@media (width > 768px) {
	#homeMenu .menuList .gel .calcMain {
		justify-content: space-between;
		gap: 0 61px;
	}
}
#homeMenu .menuList .gel .formula {
	flex: 0 0 auto;
	width: fit-content;
	max-width: 100%;
}
#homeMenu .menuList .gel .formula .base {
	position: relative;
}
#homeMenu .menuList .gel .formula .note {
	position: absolute;
	color: var(--cl-note);
	font-size: 10px;
}
#homeMenu .menuList .gel .summary {
	flex: 0 0 auto;
	margin: 0;
}
#homeMenu .menuList .gel .calcNote {
	margin-top: 10px;
	color: var(--cl-note);
	font-size: var(--fs-small);
	line-height: var(--lh-small);
}


/* homeBleachshade */
@media (width > 768px) {
	#homeBleachshade .container {
		max-width: 800px;
		margin: 0 auto;
	}
}

#homeBleachshade .secTitle {
	--w: 366;
	--h: 270;
	
	position: relative;
	aspect-ratio: var(--w) / var(--h);
	background: url("images/sp_img_mplife02.webp") no-repeat center / cover;
	border-radius: var(--br-basic);
}
@media (width > 768px) {
	#homeBleachshade .secTitle {
		--w: 800;
		--h: 550;
		
		background-image: url("images/pc_img_mplife02.webp");
	}
}
#homeBleachshade .secTitle .text {
	display: block;
	position: absolute;
	left: calc(21 / var(--w) * 100%);
	top: 50%;
	font-size: calc(19 / var(--w-spDesign) * 100dvw);
	white-space: nowrap;
	translate: 0 -50%;
}
@media (width > 768px) {
	#homeBleachshade .secTitle .text {
		left: calc(107 / var(--w) * 100%);
		font-size: min(28px, calc(28 / var(--w-pcDesign) * 100dvw));
		font-weight: var(--fw-medium);
		line-height: var(--lh-title);
	}
}

#homeBleachshade .caseTitle {
	margin-top: 40px;
}
@media (width > 768px) {
	#homeBleachshade .caseTitle {
		margin-top: 90px;
	}
}

#homeBleachshade .summary {
	aspect-ratio: 370 / 224;
}
@media (width > 768px) {
	#homeBleachshade .summary {
		aspect-ratio: 791 / 337;
	}
}

#homeBleachshade .cases {
	margin-top: 14px;
}
@media (width > 768px) {
	#homeBleachshade .cases {
		margin-top: 90px;
	}
}
#homeBleachshade .cases > dt {
	display: flex;
	justify-content: center;
	align-items: center;
	min-height: 24px;
	background: var(--cl-brand01);
	border-radius: var(--br-small);
	color: #fff;
	font-size: 12px;
	line-height: var(--lh-title);
}
@media (width > 768px) {
	#homeBleachshade .cases > dt {
		min-height: 40px;
		font-size: var(--fs-basic);
		line-height: var(--lh-basic);
	}
}
#homeBleachshade .cases > dd + dt {
	margin-top: 24px;
}
@media (width > 768px) {
	#homeBleachshade .cases > dd + dt {
		margin-top: 60px;
	}
}
#homeBleachshade .cases .images {
	display: flex;
	gap: 12px;
	margin-top: 17px;
}
@media (width > 768px) {
	#homeBleachshade .cases .images {
		gap: 24px;
	}
}
#homeBleachshade .cases .images .item {
	flex: 1 1 auto;
	position: relative;
	width: 100%;
	border-radius: var(--br-small);
	overflow: hidden;
}
@media (width > 768px) {
	#homeBleachshade .cases .images .item {
		border-radius: var(--br-basic);
	}
}
#homeBleachshade .cases .images dt {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 56px;
	min-height: 14px;
	position: absolute;
	left: 0;
	top: 0;
	background: var(--cl-note);
	border-bottom-right-radius: var(--br-small);
	color: #fff;
	font-family: var(--ff-stylish);
	font-size: 10px;
	font-weight: var(--fw-medium);
	line-height: 1.0;
}
@media (width > 768px) {
	#homeBleachshade .cases .images dt {
		width: 109px;
		min-height: 31px;
		border-bottom-right-radius: var(--br-basic);
		font-size: 16px;
		line-height: 2.0;
	}
}
#homeBleachshade .cases .images .after dt {
	background: var(--cl-brand01);
}
#homeBleachshade .cases .images .image {
	aspect-ratio: 178 / 100;
	border-radius: var(--br-small);
	overflow: hidden;
}
@media (width > 768px) {
	#homeBleachshade .cases .images .image {
		border-radius: var(--br-basic);
	}
}
#homeBleachshade .cases .images .level {
	text-align: center;
}
@media (width > 768px) {
	#homeBleachshade .cases .images .level {
		margin-top: 8px;
	}
}

#homeBleachshade .cases .noteArea {
	margin-top: 7px;
	font-size: 8px;
	line-height: 1.2;
}
@media (width > 768px) {
	#homeBleachshade .cases .noteArea {
		margin-top: 8px;
		font-size: var(--fs-small);
		line-height: var(--lh-small);
	}
}
#homeBleachshade .cases .note {
	color: var(--cl-brand03);
}
#homeBleachshade .cases .details {
	color: var(--cl-note);
}
#homeBleachshade .cases .details .item {
	display: flex;
	align-items: flex-start;
}
@media (width > 768px) {
	#homeBleachshade .cases .details :is(.item, dt, dd) {
		display: inline;
	}
	#homeBleachshade .cases .details .item:nth-child(n+2)::before {
		content: '／';
	}
}
#homeBleachshade .cases .details dt {
	flex: 0 0 auto;
}
#homeBleachshade .cases .details dt::after {
	content: '：';
}
#homeBleachshade .cases .details dd {
	flex: 1 1 auto;
}

#homeBleachshade .reserve {
	margin-top: 40px;
}
@media (width > 768px) {
	#homeBleachshade .reserve {
		margin-top: 90px;
	}
}


/* homeInquiry */
#homeInquiry {
	margin-top: 60px;
	text-align: center;
		
	@media (width > 768px) {
		margin-top: 90px;
	}
		
	.link {
		margin-top: 24px;
			
		@media (width > 768px) {
			margin-top: 40px;
		}
	}
}


/* homeAttention */
@media (width > 768px) {
	#homeAttention .list {
		max-width: 750px;
		margin: 0 auto;
	}
}
#homeAttention .list dt::before {
	content: '■';
}
#homeAttention .list dd + dt {
	margin-top: 2.0em;
}
#homeAttention .list a {
	text-decoration: underline;
}


/* homeDoctor */
#homeDoctor .container {
	padding: 34px var(--pd-spH) 20px;
	border: 1px solid var(--cl-brand01);
	border-radius: var(--br-basic);
}
@media (width > 768px) {
	#homeDoctor .container {
		padding: 54px 53px 77px 83px;
	}
	#homeDoctor .contents {
		display: flex;
		align-items: center;
	}
}
#homeDoctor .photoArea {
	display: flex;
	flex-direction: column;
	align-items: center;
}
@media (width > 768px) {
	#homeDoctor .photoArea {
		flex: 0 0 auto;
		width: 240px;
		max-width: 35%;
	}
}
#homeDoctor .photo {
	max-width: 240px;
	aspect-ratio: 1;
	border-radius: var(--br-basic);
	box-shadow: var(--bs-basic);
	overflow: hidden;
}
#homeDoctor .name {
	margin-top: 24px;
}
@media (width > 768px) {
	#homeDoctor .name {
		margin-top: 21px;
	}
}
#homeDoctor .textArea {
	margin-top: 34px;
}
@media (width > 768px) {
	#homeDoctor .textArea {
		flex: 1 1 auto;
		margin: 0 0 0 54px;
	}
}
#homeDoctor .textArea p + p {
	margin-top: 2.0em;
}


/* homeLiftingText */
#homeLiftingText {
	color: var(--cl-note);
	font-size: var(--fs-small);
	line-height: var(--lh-small);
}
@media (width > 768px) {
	#homeLiftingText .list {
		max-width: 750px;
		margin: 0 auto;
	}
}
#homeLiftingText .list > dt::before {
	content: '■';
}
#homeLiftingText .details :is(dt, dd) {
	display: inline;
}
#homeLiftingText .details > dt::after {
	content: '：';
}


/* homeFixedBottom */
#homeFixedBottom {
	position: sticky;
	left: 0;
	bottom: 0;
	width: 100%;
	z-index: 10000;
}
@media (width > 768px) {
	#homeFixedBottom {
		display: none;
	}
}

#homeFixedBottom .buttons {
	display: flex;
	align-items: stretch;
}
#homeFixedBottom .buttons > * {
	flex: 1 1 auto;
	width: 100%;
}
#homeFixedBottom .buttons a {
	display: flex;
	justify-content: center;
	align-items: center;
	min-height: 52px;
	background: no-repeat center / cover;
	border-radius: var(--br-basic) var(--br-basic) 0 0;
	color: #fff;
	font-size: 20px;
	font-weight: var(--fw-bold);
	text-transform: uppercase;
	white-space: nowrap;
	overflow: hidden;
}
#homeFixedBottom .buttons .tel a {
	background-image: var(--lg-brand02);
}
#homeFixedBottom .buttons .web a {
	background-image: var(--lg-pink01);
}
#homeFixedBottom .buttons a::before {
	content: '';
	flex: 0 0 auto;
	display: block;
	width: auto;
	height: 30px;
	margin-right: 12px;
	background: no-repeat center / contain;
}
#homeFixedBottom .buttons .tel a::before {
	aspect-ratio: 1;
	background-image: url("images/icon_phone.svg");
}
#homeFixedBottom .buttons .web a::before {
	aspect-ratio: 35 / 30;
	background-image: url("images/icon_calendar.svg");
}

#homeFixedBottom .line {
	position: absolute;
	right: 6px;
	bottom: calc(100% + 22px);
	opacity: 0;
	visibility: hidden;
	transition: 300ms ease;
	transition-property: opacity, visibility;
}
#homeFixedBottom .line.show {
	opacity: 1;
	visibility: visible;
}
#homeFixedBottom .line .close {
	position: absolute;
	top: 0;
	right: -5px;
	width: 30px;
	aspect-ratio: 1;
	background: #fff;
	border: 1px solid currentColor;
	border-radius: 50%;
	font-size: 0;
	translate: 0 -66.6%;
}
#homeFixedBottom .line .close::before,
#homeFixedBottom .line .close::after {
	content: '';
	display: block;
	position: absolute;
	top: 50%;
	left: 50%;
	width: 60%;
	height: 1px;
	background: currentColor;
	rotate: 45deg;
	translate: -50% -50%;
}
#homeFixedBottom .line .close::after {
	rotate: -45deg;
}
#homeFixedBottom .line a {
	display: block;
	width: 186px;
	aspect-ratio: 186 / 52;
	border-radius: var(--br-small);
	overflow: hidden;
}
#homeFixedBottom .line img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}