@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');


button{
    border: none;
}
a{
    color: #004EA2;
    text-decoration: none;
    line-height: 1;
}
/* --------------------------------------------------

	変数定義

-------------------------------------------------- */
: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-tblPlainCell: 124px;
	--w-tblCompareCell: 94px;

	@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);

		--w-tblPlainCell: 240px;
		--w-tblCompareCell: 240px;
	}
	
	/* padding */
	--pd-h: 5dvw;
	
	--pd-vSec: 100px;
	--pd-vGroup: 40px;
	--pd-vItem: 24px;
	--pd-vSmall: 10px;

	--pd-tblH: 10px;
	--pd-tblV: 16px;
	
	@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;
		
		--pd-tblH: 20px;
	}
	
	
	/*
		装飾
	*/
	/* 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);
}

body {
	display: flex;
	flex-direction: column;
	width: 100dvw;
	min-height: 100dvh;
	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;
}

header,
footer {
	flex: 0 0 auto;
}

main {
	flex: 1 0 auto;
	
	> :nth-child(n+2) {
		margin-top: var(--pd-vSec);
	}
}

/* 画像 */
img,
svg {
	display: block;
	width: 100%;
	max-width: 100%;
	height: auto;
}

/* ボタン・リンク */
@media (width > 768px) {
	a,
	button {
		display: block;
		width: 100%;
		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;

	width: fit-content;
	padding: 0;
	border: none;
	color: inherit;
	font-family: inherit;
	font-size: inherit;
	font-weight: inherit;
	line-height: inherit;

	&::backdrop {
		background: var(--cl-bgPopup);
		animation: var(--openAnimation);
	}

	&[open] {
		animation: var(--openAnimation);

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

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



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

	共通クラス

-------------------------------------------------- */
/*
	汎用
*/
@media (width <= 768px) {
	.pcOnly {
		display: none;
	}
}

@media (width > 768px) {
	.spOnly {
		display: none;
	}
}

/* 下からふわっと表示アニメーション */
.fadeInUp {
	--fadeInUp-translate: 0 30px;

	opacity: 0;
	translate: var(--fadeInUp-translate);

	&.pseudo {
		opacity: 1;
		translate: 0;

		&::before,
		&::after {
			opacity: 0;
			translate: var(--fadeInUp-translate);
		}
	}
}

.fadeInUpDone {
	&,
	&::before,
	&::after {
		transition: 500ms ease;
		transition-property: opacity, translate;
	}
}


/*
	コンテンツ幅
*/
.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);
		}
	}
}

/* 白ダイヤタイトル */
.ttlDiamondWht {
	display: flex;
	justify-content: flex-start;
	align-items: center;
	gap: 15px;
	margin-bottom: 20px;
	color: var(--cl-brand01);
	font-family: var(--ff-basic);
	font-size: min(17px, calc(17 * 100dvw / var(--w-designNum)));
	font-weight: var(--fw-bold);
	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 {
	color: var(--cl-brand01);
	font-family: var(--ff-basic);
	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) {
		font-size: var(--fs-big);
	}

	.border {
		display: inline-block;
		width: fit-content;
		background: var(--lg-blu03) no-repeat center bottom / 100% 3px;
	}

	/* 小さめ行 */
	.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);
		}
	}
}

/* 背景付きタイトル */
.clmTtlBg {
	padding: 8px 15px;
	background: var(--cl-bg01);
	border-radius: var(--br-small);
	color: var(--cl-brand01);
	font-family: var(--ff-ja);
	font-size: 14px;
	font-weight: var(--fw-bold);
	line-height: 1.8;
	text-align: left;

	@media (width > 768px) {
		padding: 10px 20px;
		font-size: 18px;
	}
}

/* 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;

	@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;
		}
	}
}


/*
	テキストスタイル
*/
/* 本文 */
.txtBasic {
	font-family: var(--ff-basic);
	font-size: var(--fs-basic);
	font-weight: var(--fw-regular);
	line-height: var(--lh-basic);

	/* 本文・強調 */
	&.strong {
		font-weight: var(--fw-medium);
	}

	/* 本文小さめ */
	&.smaller {
		font-size: var(--fs-smaller);
		line-height: var(--lh-small);

		/* 本文小さめ・強調 */
		&.strong {
			font-weight: var(--fw-medium);
		}
	}
}

/* 注釈 */
.txtSmall {
	font-family: var(--ff-basic);
	font-size: var(--fs-small);
	font-weight: var(--fw-regular);
	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);
	line-height: var(--lh-smaller);

	/* タイトル・強調_英語 */
	&.en {
		font-family: var(--ff-en);
	}
}

/* アンダーライン */
.underline {
	text-decoration: underline solid var(--cl-bg02) 10px;
	text-underline-offset: -0.07lh;
	
	@media (width > 768px) {
		text-decoration-thickness: 12px;
	}
}

/* マーカー */
.marker {
	text-decoration: underline solid var(--cl-marker01) 20px;
	text-underline-offset: -0.5lh;
	
	@media (width > 768px) {
		text-decoration-thickness: 24px;
	}
}


/*
	装飾
*/
/* 縦棒 */
.decoBorder01 {
	--borderHeight: 60px;

	@media (width > 768px) {
		--borderHeight: 100px;
	}

	position: relative;

	&::before {
		content: '';
		display: block;
		width: 1px;
		height: var(--borderHeight);
		margin: 0 auto var(--pd-vItem);
		background: var(--cl-brand01);
	}
	&::after {
		content: '';
		display: block;
		position: absolute;
		left: 50%;
		top: var(--borderHeight);
		width: 3px;
		aspect-ratio: 1;
		background: var(--cl-brand01);
		border-radius: 50%;
		translate: -1px -100%;
	}
}


/*
	テキストリンク
*/
/* テキストリンク */
.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);
	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% -20%;
	}

	/* 上矢印 */
	&.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: 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;
	}
}

/* 閉じるボタン */
.btnClose {
	display: block;
	position: relative;
	width: 16px;
	aspect-ratio: 1;
	color: var(--cl-brand01);

	@media (width > 768px) {
		width: 20px;
	}

	&::before,
	&::after {
		content: '';
		display: block;
		position: absolute;
		top: 50%;
		left: 50%;
		width: 100%;
		height: 1px;
		background: currentColor;
		rotate: 45deg;
		translate: -50% -50%;
	}
	&::after {
		rotate: -45deg;
	}
	
	.text {
		display: block;
		width: 1px;
		height: 1px;
		clip-path: inset(50%);
		overflow: hidden;
	}
}


/*
	テーブル
*/
/* プレーンテーブル */
.tblPlain {
	table-layout: fixed;
	width: 100%;
	color: var(--cl-brand01);
	font-size: var(--fs-smaller);
	line-height: var(--lh-small);

	th,
	td {
		padding: var(--pd-tblH) var(--pd-tblV);
		border: 1px solid var(--cl-gry02);
		vertical-align: middle;
	}

	th {
		background: var(--cl-bg02);
		font-weight: var(--fw-medium);
		text-align: center;

		&:first-child {
			width: var(--w-tblPlainCell);
		}
	}
}

/* 比較テーブル */
.tblCompare {
	table-layout: fixed;
	width: 100%;
	font-size: var(--fs-smaller);
	line-height: var(--lh-small);
	text-align: center;

	th,
	td {
		padding: var(--pd-tblH) var(--pd-tblV);
		border: 1px solid var(--cl-gry02);
		vertical-align: middle;
	}

	th {
		font-weight: var(--fw-medium);

		&:nth-child(1) {
			width: var(--w-tblCompareCell);
		}
	}

	thead {
		color: #fff;

		th {
			&:nth-child(2) {
				background: var(--cl-gry01);
			}

			&:nth-child(3) {
				background: var(--lg-blu01);
			}
		}
	}

	td {
		&:nth-child(2) {
			background: var(--cl-bg03);
			color: var(--cl-gry01);
		}

		&:nth-child(3) {
			color: var(--cl-brand01);
		}
	}
}


/*
	リスト
*/
/* チェックマークリスト */
.listCheckmark {
	padding-left: 13px;
	background: linear-gradient(to right, #00CC95, #00CC95) no-repeat left center / 3px 100%;
	color: var(--cl-brand01);
	font-size: var(--fs-basic);
	font-weight: var(--fw-medium);
	line-height: var(--lh-basic);

	> .item {
		display: flex;
		justify-content: flex-start;
		align-items: flex-start;
		gap: 10px;

		&:nth-child(n+2) {
			margin-top: 6px;
		}

		&::before {
			content: '';
			flex: 0 0 auto;
			display: block;
			width: 16px;
			aspect-ratio: 1;
			margin-top: 6px;
			background: url("/common/images/ico_check.svg") no-repeat center / contain;
			
			@media (width > 768px) {
				margin-top: 8px;
			}
		}
	}

	&.gray {
		background-image: linear-gradient(to right, var(--cl-gry02), var(--cl-gry02));
		color: var(--cl-gry01);

		> .item {
			&::before {
				background-image: url("/common/images/ico_check_gray.svg");
			}
		}
	}
}


/*
	ページネーション
*/
/* デフォルトページネーション */
.pgntDefault {
	--gap: 13px;

	display: flex;
	justify-content: center;
	align-items: center;
	gap: var(--gap);

	.splide__arrow {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 40px;
		aspect-ratio: 1;
		background: #fff;
		border-radius: 50%;

		&::before {
			content: '';
			flex: 0 0 auto;
			display: block;
			width: 10px;
			aspect-ratio: 1;
			border: 1px var(--cl-brand01);
			border-style: solid none none solid;
			rotate: -45deg;
			translate: 20% 0;
		}

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

		&.splide__arrow--next {
			scale: -1 1;
		}
	}

	.splide__pagination {
		display: flex;
		justify-content: center;
		align-items: center;
		gap: var(--gap);

		> * {
			flex: 0 0 auto;
		}
	}

	.splide__pagination__page {
		display: block;
		width: 8px;
		aspect-ratio: 1;
		background: var(--cl-gry02);
		border-radius: 50%;

		&.is-active {
			background: var(--cl-brand01);
		}
	}

	/* PC時大きめ */
	@media (width > 768px) {
		&.big {
			--gap: 24px;

			.splide__pagination__page {
				width: 12px;
			}
		}
	}
}


/*
	ダイアログ共通パーツ
*/
dialog {
	.dialogInner {
		--padV: 60px;

		max-width: calc(100dvw - var(--pd-h) * 2);
		max-height: 90dvh;
		padding: 0 var(--pd-h) var(--padV);
		overflow: clip auto;

		@media (width > 768px) {
			--padV: 100px;

			max-width: min(var(--w-contents), calc(100dvw - var(--pd-h) * 2));
		}

		.dialogTopClose {
			position: sticky;
			top: 0;
			right: 0;
			width: 0;
			height: var(--padV);
			margin-left: auto;

			.btn {
				position: absolute;
				top: 20px;
				right: 0;
			}
		}
	}
}


/*
	FV下ナビゲーション
*/
.layoutPageNavi {
	.itemList {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		align-items: stretch;
		gap: 14px;
		
		@media (width > 768px) {
			gap: 16px;
		}
	}
	
	.item {
		color: var(--cl-brand01);
		
		.button {
			display: flex;
			flex-direction: column;
			justify-content: flex-start;
			align-items: center;
			height: 100%;
			padding: 12px 0;
			background: var(--lg-blu04) no-repeat center / cover;
			border: 1px solid currentColor;
			border-radius: var(--br-small);
			
			@media (width > 768px) {
				padding: 16px 0;
			}
			
			&::before {
				content: '';
				display: block;
				width: 100%;
				height: 30px;
				margin-bottom: 12px;
				background: no-repeat center / auto 100%;
				
				@media (width > 768px) {
					height: 34px;
					margin-bottom: 16px;
				}
			}
			
			&::after {
				content: '';
				display: block;
				width: 7px;
				aspect-ratio: 1;
				margin-top: 7px;
				border: 1px currentColor;
				border-style: none solid solid none;
				rotate: 45deg;
				
				@media (width > 768px) {
					margin-top: 9px;
				}
			}
			
			&.guarantee::before {
				background-image: url("/common/images/ico_guarantee.svg");
			}
			
			&.person::before {
				background-image: url("/common/images/ico_person.svg");
			}
			
			&.pin::before {
				background-image: url("/common/images/ico_pin.svg");
			}
			
			&.qa::before {
				background-image: url("/common/images/ico_qa.svg");
			}
			
			&.tooth::before {
				background-image: url("/common/images/ico_tooth.svg");
			}
			
			&.we::before {
				background-image: url("/common/images/ico_we.svg");
			}
			
			&.yen::before {
				background-image: url("/common/images/ico_yen.svg");
			}
			
			&.noArrow::after {
				content: none;
			}
		}
		
		.text {
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: var(--fs-small);
			font-weight: var(--fw-bold);
			line-height: var(--lh-small);
			text-align: center;
			white-space: nowrap;
			
			@media (width <= 768px) {
				height: calc(var(--fs-small) * var(--lh-small) * 2);
			}
			
			@media (width > 768px) {
				font-size: var(--fs-smaller);
				font-weight: var(--fw-medium);
			}
		}
	}
	
	.expandButton {
		margin-top: var(--pd-vItem);
		
		@media (width > 768px) {
			display: none;
		}
		
		.button {
			margin: 0 auto;
			
			&.down .close {
				display: none;
			}
			
			&.up .more {
				display: none;
			}
		}
		
		.slash {
			display: inline-block;
			width: 1px;
			height: 1px;
			clip-path: inset(50%);
			overflow: hidden;
		}
	}
	
	@media (width <= 768px) {
		&:has(.expandButton .button.down) {
			.item:nth-child(n+4) {
				display: none;
			}
		}
	}
}


/*
	エキスパンド共通パーツ
*/
.layoutExpand {
	border-top: 1px solid currentColor;
	
	@media (width > 768px) {
		max-width: var(--w-contentsNarrow);
		margin: 0 auto;
	}
	
	.expandItem {
		border-bottom: 1px solid currentColor;
	}
	
	.expandHeader {
		display: flex;
		align-items: center;
		gap: 14px;
		padding: 14px 0;
		font-family: var(--ff-basic);
		font-size: var(--fs-basic);
		font-weight: var(--fw-medium);
		line-height: var(--lh-basic);
		
		@media (width > 768px) {
			gap: 20px;
			padding: 20px 0;
			cursor: pointer;
			transition: var(--tr-basic);
			transition-property: opecity;
			
			&:hover {
				opacity: var(--tr-opacity);
			}
		}
		
		> * {
			flex: 1 1 auto;
		}
		
		button:hover {
			opacity: 1.0;
		}
	}
	
	.expandButton {
		flex: 0 0 auto;
	}
	
	.expandContents {
		display: grid;
		grid-template-rows: 0fr;
		transition: var(--tr-basic);
		transition-property: grid-template-rows;
		
		.open & {
			grid-template-rows: 1fr;
		}
	}
	
	.expandContentsInner {
		transition: var(--tr-basic);
		transition-property: padding;
		overflow: hidden;
		
		.open & {
			padding: var(--pd-vItem) 0;
		}
	}
	
	/* 小さめサイズ */
	&.small {
		.expandHeader {
			font-size: var(--fs-smaller);
			line-height: var(--lh-small);
		}
	}
}


/*
	症例写真
*/
.layoutCases {
	.slideArea {
		position: relative;
		padding: 0 35px;
		
		@media (width > 768px) {
			padding: 0 100px;
		}
	}
	
	.case {
		> :nth-child(n+2) {
			margin-top: var(--pd-vItem);
		}
	}
	
	.caseTitle {
		display: flex;
		justify-content: center;
		align-items: center;
		background: var(--cl-brand01);
		border-radius: var(--br-small);
		color: #fff;
		font-weight: var(--fw-medium);
	}
	
	.photos {
		display: flex;
		flex-direction: column;
		gap: var(--pd-vItem);
		
		@media (width > 768px) {
			flex-direction: row;
			gap: 24px;
		}
	}
	
	.photo {
		flex: 1 1 auto;
		position: relative;
		width: 100%;
		aspect-ratio: 338 / 188;
		border-radius: var(--br-basic);
		overflow: hidden;
	}
	
	.tag {
		display: flex;
		justify-content: center;
		align-items: center;
		position: absolute;
		left: 0;
		top: 0;
		width: 70px;
		height: 20px;
		background: var(--cl-brand01);
		border-bottom-right-radius: var(--br-small);
		color: #fff;
		font-size: var(--fs-smaller);
		font-weight: var(--fw-medium);
		line-height: var(--lh-small);
		
		@media (width > 768px) {
			width: 83px;
			height: 24px;
		}
		
		&.before {
			background: var(--cl-gry01);
		}
	}
	
	.note {
		color: var(--cl-gry01);
		font-size: var(--fs-small);
		line-height: var(--lh-small);
		
		.strong {
			color: var(--cl-brand03);
		}
	}
	
	.splide__arrow {
		display: block;
		position: absolute;
		top: 50%;
		width: 18px;
		aspect-ratio: 1;
		border: 1px var(--cl-brand01);
		rotate: 45deg;
		
		@media (width > 768px) {
			width: 33px;
		}
		
		svg {
			display: none;
		}
	}
	
	.splide__arrow--prev {
		left: 0;
		border-style: none none solid solid;
		translate: 20% -50%;
	}
	
	.splide__arrow--next {
		right: 0;
		border-style: solid solid none none;
		translate: -20% -50%;
	}
	
	.pagination {
		margin-top: var(--pd-vItem);
	}
	
	/* SP横方向 */
	@media (width <= 768px) {
		&.horizon {
			.slideArea {
				padding: 0;
			}

			.photos {
				flex-direction: row;
				gap: 12px;
			}

			.photo {
				border-radius: var(--br-small);
			}

			.tag {
				width: 54px;
				height: 16px;
				font-size: var(--fs-small);
				font-weight: var(--fw-bold);
			}
		}
	}
}


/*
	ステップ
*/
.layoutSteps {
	--innerV: 10px;

	> .item {
		padding: var(--pd-h);
		background: var(--cl-bg01);
		border-radius: var(--br-basic);
		
		@media (width > 768px) {
			display: flex;
			align-items: center;
			gap: 30px;
		}

		&:nth-child(n+2) {
			--outerV: 31px;

			position: relative;
			margin-top: var(--outerV);
		
			@media (width > 768px) {
				--outerV: 58px;
			}

			&::before {
				content: '';
				display: block;
				position: absolute;
				left: 50%;
				bottom: calc(100% + var(--outerV) / 2);
				width: 15px;
				height: 8px;
				background: var(--cl-brand02);
				clip-path: polygon(0 0, 100% 0, 50% 100%);
				translate: -50% 50%;
			
				@media (width > 768px) {
					width: 26px;
					height: 14px;
				}
			}
		}
	}

	.textArea {
		flex: 1 1 auto;
		color: var(--cl-brand01);
		font-size: var(--fs-basic);
		line-height: var(--lh-basic);

		> :nth-child(n+2) {
			margin-top: var(--innerV);
		}
	}

	.titleNum {
		color: var(--cl-brand02);
		font-family: var(--ff-en);
		font-size: var(--fs-big);
		font-weight: var(--fw-medium);
		line-height: var(--lh-smaller);

		.text {
			display: inline-block;
			margin-right: 0.5em;
			font-size: var(--fs-basic);
		}
	}

	.titleText {
		font-size: 15px;
		font-weight: var(--fw-bold);
		line-height: var(--lh-smaller);
		
		@media (width > 768px) {
			font-size: 17px;
		}
	}

	.image {
		flex: 0 0 auto;
		width: 100%;
		aspect-ratio: 324 / 174;
		border-radius: var(--br-small);
		overflow: hidden;

		@media (width <= 768px) {
			margin-top: var(--innerV);
		}
		@media (width > 768px) {
			width: 324px;
		}
	}
}



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

	共通セクション

-------------------------------------------------- */
/*
	無料カウンセリング
*/
.secCounseling {
	.container {
		padding: var(--pd-h);
		background: var(--lg-blu04) no-repeat center / cover;
		border-radius: var(--br-basic);
		text-align: center;
		overflow: hidden;
	}

	.slider {
		margin: 0 calc(var(--pd-h) * -1);
	}
	
	.splide__track {
		overflow: clip visible;
	}
	
	.slide {
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: center;
		gap: var(--pd-vSmall);
		width: 220px;
		aspect-ratio: 220 / 270;
		background: #fff;
		border-radius: var(--br-small);
		overflow: hidden;
		box-shadow: var(--bs-basic);
		
		@media (width > 768px) {
			gap: 0;
			width: 300px;
			aspect-ratio: 300 / 345;
		}
		
		&::before {
			content: '';
			flex: 0 0 auto;
			display: block;
			width: 100%;
			aspect-ratio: 220 / 130;
			background: no-repeat center / cover;
			
			@media (width > 768px) {
				aspect-ratio: 300 / 178;
			}
		}
		
		&.color::before {
			background-image: url("/common/images/img_counseling_measurement_sp.webp");
			
			@media (width > 768px) {
				background-image: url("/common/images/img_counseling_measurement_pc.webp");
			}
		}
		
		&.simulation::before {
			background-image: url("/common/images/img_counseling_simulation_sp.webp");
			
			@media (width > 768px) {
				background-image: url("/common/images/img_counseling_simulation_pc.webp");
			}
		}
		
		&.microscope::before {
			background-image: url("/common/images/img_counseling_microscope_sp.webp");
			
			@media (width > 768px) {
				background-image: url("/common/images/img_counseling_microscope_pc.webp");
			}
		}
		
		.textArea {
			flex: 0 1 auto;
			display: flex;
			flex-direction: column;
			justify-content: flex-start;
			align-items: center;
			gap: var(--pd-vSmall);
			padding: 0 var(--pd-vSmall);
			
			@media (width > 768px) {
				flex: 1 1 auto;
				justify-content: center;
			}
		}
		
		.title {
			font-weight: var(--fw-medium);
		}
		
		.text {
			font-size: var(--fs-smaller);
			line-height: var(--lh-small);
		}
	}

	.pagination {
		margin-top: var(--pd-vItem);

		/* 常にページネーションを表示(自動非表示無効化) */
		.splide__pagination {
			display: flex;
		}
	}

	.description {
		margin-top: var(--pd-vGroup);
		
		&::after {
			content: '';
			display: block;
			aspect-ratio: 330 / 220;
			margin-top: var(--pd-vItem);
			background: url("/common/images/img_counseling_non_sp.webp") no-repeat center / cover;
			border-radius: var(--br-basic);
			
			@media (width > 768px) {
				aspect-ratio: 900 / 400;
				background-image: url("/common/images/img_counseling_non_pc.webp");
			}
		}
	}

	.reserve {
		margin-top: var(--pd-vItem);
	}
}


/*
	近くのWEを探す
*/
@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%;
	}
}

.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,
.clmTtlQ,
.clmTtlA {
	--padH: 18px;
	--padV: 8px;

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

	.faq {
		&:nth-child(n+2) {
			margin-top: var(--pd-vItem);
		}
	}
	
	.question,
	.aInner,
	&:is(.clmTtlQ) {
		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,
	&:is(.clmTtlQ) {
		background: var(--cl-bg01);
		border-radius: var(--br-basic);
		transition: var(--tr-basic);
		transition-property: opacity;
		
		@media (width > 768px) {
			&:is(.question) {
				cursor: pointer;
				
				&:hover {
					opacity: var(--tr-opacity);
				}
			}
		}
		
		.button {
			flex: 0 0 auto;
			
			.btnOpenClose:hover {
				opacity: 1;
			}
		}
	}
	
	.qText {
		font-weight: var(--fw-medium);
	}

	.answer,
	&:is(.clmTtlA) {
		&:is(.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);
		}
	}
	
	&:is(.clmTtlA) {
		.aInner {
			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");
					}
				}
			}
		}
	}
}


/*
	監修医師
*/
.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);
	}
	
	.link a {
		margin: 0 auto;
	}
}


/*
	限定解除要件
*/
.secLimited {
	color: var(--cl-gry01);
	font-size: var(--fs-small);
	line-height: var(--lh-small);
	
	.partTitle {
		&:nth-child(n+2) {
			margin-top: calc(var(--lh-small) * 1em);
		}
		
		&::before {
			content: '■';
		}
	}
	
	.itemTitle,
	.itemDetail {
		display: inline;
	}
	
	.itemTitle {
		&::after {
			content: '：';
		}
	}
}

/**ぱんくず*/
.l-main__inner {
    max-width: 1196px;
    min-width: 1200px;
    margin: 0 auto;
    padding: 0 30px;
}
.c-breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  padding: 6px 2em 5px;
  line-height: 1.5;
  margin-bottom: 3rem;
}

.c-breadcrumb li {
  font-size: 12px;
  font-weight: 200;
}
.c-breadcrumb li:first-child {
  position: relative;
}
.c-breadcrumb li:not(:last-child)::after {
  content: ">";
  color: #666666;
  margin: 0 0.75em;
  font-size: 14px;
}
.c-breadcrumb li a {
  color: #666666;
  white-space: nowrap;
  text-decoration: none;
  border-bottom: 1px solid #004ea2;
  display: inline;
}
.c-breadcrumb__current a {
  text-decoration: underline;
}
@media (max-width: 767px) {
    .l-main__inner{
        min-width: 100%;
    }
  .c-breadcrumb {
    padding: 3px 0;
  }
}


/***/

.faqItemQA {
    margin-bottom: 40px;
}
.faqItemContent {
    margin-bottom: 60px;
}

/***/

.ttlLeftLineGrad {
    position: relative;
    padding-left: 20px; 
    font-weight: bold;
    line-height: 1.5;
    font-size: var(--fs-big);
}

.ttlLeftLineGrad::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.1em;
    bottom: 0.1em;
    width: 3px; 
    background: linear-gradient(45deg, var(---, #004EA2) -0.25%, #0093F1 89.33%, #009BFA 99.75%);
}

.secLimited{
    margin-top: 10px;
}

/***/

.faqMorelinks{
    margin: 120px auto;
    border-radius: var(---PC-, 16px);
    padding: var(---PC, 50px);
    background: #F7FAFF;
}

.faqMorelinks p{
    text-align: center;
}

.faqMorelinks div{
    max-width: 500px;
    margin: 40px auto;
}

.faqMorelinks div  ul li {
    position: relative;
    padding-left: 1.2em;
    margin-bottom: 8px;  
    text-decoration: underline;
}
.faqMorelinks div  ul li a{
    line-height: 200%
}


.faqMorelinks div  ul li::before {
    content: "・";
    position: absolute;
    left: 0;
    top: 0;
}

.faqMorelinks div  .linkBasic{
    margin-left: auto;
    margin-top: 24px;
}


/* ======================================
   fixBnr  旧追従バナーを新デザインに
====================================== */
.sp_fixed_cv{
	display: none;
}
.fixBnr{
	z-index: 1;
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    margin: 0 auto;
}

.fixBnr .box{
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 52px;
  width: 100%;;
}

.linkTel{
  color: #fff;
  font-size: 20px;
  background:linear-gradient(45deg, var(--cl-brand01), #009BFA);
  display: flex;
  width: 50%;
  min-height: 52px;
  justify-content: center;
  align-items: center;
  border-radius: 12px 12px 0 0;
  gap: 12px;
  font-weight: 700;
  font-size: 20px;
  letter-spacing: 0.05em
}
.linkTel:before{
  content: '';
  flex: 0 0 auto;
  display: block;
  width: auto;
  height: 30px;
  aspect-ratio: 1;
  background: url(../images/ico_phone.svg) no-repeat center / contain;
  aspect-ratio: 35 / 30;
  width: auto;
  height: 30px;
}
.linkWeb{
  font-weight: 700;
  font-size: 20px;
  color: #fff;
  min-height: 52px;
  font-size: 20px;
  background: linear-gradient(45deg, #FF4767, #FF8C72);
  display: flex;
  width: 50%;
  justify-content: center;
  align-items: center;
  gap: 12px;
  border-radius: 12px 12px 0 0;
  letter-spacing: 0.05em
}

.linkWeb:before{
  content: '';
  flex: 0 0 auto;
  display: block;
  width: auto;
  height: 30px;
  aspect-ratio: 1;
  background: url(../images/ico_calendar.svg) no-repeat center / contain;
  aspect-ratio: 35 / 30;
  width: auto;
  height: 30px;

}

.linebtn{
  position: absolute;
  display: block;
  width: 186px;
  aspect-ratio: 186 / 52;
  border-radius: 6px;
  overflow: hidden; 
  right: 6px;
  bottom: calc(100% + 22px);  
}

.linebtn a img{
  width: 100%;
}

.line.show {
  opacity: 1;
  visibility: visible;
  position: absolute;
    right: 6px;
    top: -73px;  
}

.line .close {
  position: absolute;
  top: 0;
  right: -5px;
  width: 30px;
  aspect-ratio: 1;
  background: #fff;
  border: 1px solid currentColor;
  border-radius: 50%;
  translate: 0 -66.6%;
}

.line .close::before,
.line .close::after {
  content: '';
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 60%;
  height: 1px;
  background: currentColor;
  rotate: 45deg;
  translate: -50% -50%;
}

.line .close::after {
  rotate: -45deg;
}

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

.fixBnr .line a{
  display: block;
  width: 186px;
  aspect-ratio: 186 / 52;
  border-radius: 6px;
  overflow: hidden;
}
.fixBnr .line a img{
  width: 100%;
}

.line {
  position: absolute;
  right: 6px;
  top: -73px; 
  width: 186px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s, visibility 0.3s;
  border-radius: 12px 12px 0 0;
}

.line.show {
  opacity: 1;
  visibility: visible;
}

.line.is-hidden {
  display: none !important;
}

.line .link {
  display: block;
  width: 100%;
  aspect-ratio: 186 / 52;
  border-radius: 6px; 
  overflow: hidden;
}

.line .link img {
  width: 100%;
  display: block;
}

x.line .close {
  position: absolute;
  top: 0;
  right: -5px;
  width: 30px;
  aspect-ratio: 1;
  background: #fff;
  border: 1px solid currentColor;
  border-radius: 50%;
  translate: 0 -66.6%;
  cursor: pointer;
  z-index: 10;
}

@media screen and (max-width: 1024px) {
  .fixBnr{
    display: block;
  }



}