@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-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-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;
	
	/* 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);
	
	/* 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;
	}
}


/*
	基本要素の設定
*/
body:has(section[id^="whitening"]) {
	transition: opacity 1500ms ease;
}
body:has(section[id^="whitening"]).loading {
	opacity: 0;
}

body:has(section[id^="whitening"] dialog[open]) {
	overflow: clip;
}

section[id^="whitening"] img {
	display: block;
	width: 100%;
	height: auto;
}

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

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

@keyframes dialogFadeIn {
	0% {
		opacity: 0;
	}
	
	100% {
		opacity: 1;
	}
}
@keyframes dialogFadeOut {
	0% {
		opacity: 1;
	}
	
	100% {
		opacity: 0;
	}
}
section[id^="whitening"] dialog {
	--openAnimation: dialogFadeIn both 400ms ease;
	--closeAnimation: dialogFadeOut both 300ms ease;
	
	max-width: calc(100% - var(--pd-spH) * 2);
	max-height: calc(100% - var(--pd-spH) * 2);
	padding: 0;
	color: inherit;
	font-family: inherit;
	font-size: inherit;
	font-weight: inherit;
	line-height: inherit;
	overflow: auto;
}
@media (width > 768px) {
	section[id^="whitening"] dialog {
		max-width: calc(100% - var(--pd-pcH) * 2);
		max-height: calc(100% - var(--pd-pcH) * 2);
	}
}
section[id^="whitening"] dialog[open] {
	animation: var(--openAnimation);
}
section[id^="whitening"] dialog[open].fadeOut {
	animation: var(--closeAnimation);
}
section[id^="whitening"] dialog::backdrop {
	background: rgba(0, 78, 162, 0.5);
	animation: var(--openAnimation);
}
section[id^="whitening"] dialog[open].fadeOut::backdrop {
	animation: var(--closeAnimation);
}


/*
	ページレイアウト
*/
section[id^="whitening"] {
	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^="whitening"] * {
	letter-spacing: var(--ls-basic);
}

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

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


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


/*
	タイトル
*/

/* OUR COMMITMENT */
section[id^="whitening"] .ttlStyleCommitment {
	display: flex;
	flex-direction: column;
	align-items: center;
	font-weight: var(--fw-medium);
	line-height: var(--lh-title);
	text-align: center;
}
section[id^="whitening"] .ttlStyleCommitment::before {
	content: '';
	display: block;
	width: 68px;
	aspect-ratio: 68 / 50;
	margin-bottom: 3px;
	background: url("images/icon_logo-symbol.svg") no-repeat center / contain;
}
@media (width > 768px) {
	section[id^="whitening"] .ttlStyleCommitment::before {
		width: 83px;
		aspect-ratio: 83 / 61;
		margin-bottom: 11px;
	}
}
section[id^="whitening"] .ttlStyleCommitment .en {
	font-family: var(--ff-stylish);
	font-size: 12px;
	letter-spacing: 0.4em;
	text-transform: uppercase;
}
@media (width > 768px) {
	section[id^="whitening"] .ttlStyleCommitment .en {
		font-size: 14px;
	}
}
section[id^="whitening"] .ttlStyleCommitment .ja {
	margin-top: 9px;
	font-size: min(19px, calc(19 / var(--w-spDesign) * 100dvw + var(--spfs-diff)));
}
@media (width > 768px) {
	section[id^="whitening"] .ttlStyleCommitment .ja {
		margin-top: 20px;
		font-size: 26px;
	}
}

section[id^="whitening"] .ttlStyleCommitment.preBorder::before,
section[id^="whitening"] .ttlStyleCommitment.preBorder > * {
	order: 1;
}
section[id^="whitening"] .ttlStyleCommitment.preBorder::after {
	content: '';
	display: block;
	width: 1px;
	height: 46px;
	margin-bottom: 20px;
	background: var(--cl-brand01);
}
@media (width > 768px) {
	section[id^="whitening"] .ttlStyleCommitment.preBorder::after {
		height: 64px;
		margin-bottom: 30px;
	}
}

/* 両脇ダイヤ付き */
section[id^="whitening"] .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^="whitening"] .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^="whitening"] .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^="whitening"] .ttlStyle02 {
		min-height: 37px;
		margin-bottom: 40px;
		padding-left: calc(18px + 24px);
		font-size: 20px;
		white-space: normal;
	}
}
section[id^="whitening"] .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^="whitening"] .ttlStyle02::before {
		width: 19px;
	}
}

/* 一部にブランドカラー太め下線 */
section[id^="whitening"] .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^="whitening"] .ttlStyle03 {
		font-size: 22px;
		white-space: normal;
	}
}
section[id^="whitening"] .ttlStyle03 .border {
	padding-bottom: 6px;
	background: var(--lg-brand01) no-repeat left bottom / 100% 3px;
}
@media (width <= 768px) {
	section[id^="whitening"] .ttlStyle03 .border.pc {
		padding-bottom: 0;
		background: none;
	}
}
@media (width > 768px) {
	section[id^="whitening"] .ttlStyle03 .border.sp {
		padding-bottom: 0;
		background: none;
	}
}

/* ttlStyle03の直前に縦線を付けたもの */
section[id^="whitening"] .ttlStyle03.preBorder {
	position: relative;
	padding-top: calc(46px + 10px);
}
@media (width > 768px) {
	section[id^="whitening"] .ttlStyle03.preBorder {
		padding-top: calc(64px + 20px);
	}
}
section[id^="whitening"] .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^="whitening"] .ttlStyle03.preBorder::before {
		height: 64px;
	}
}

/* 一部にグラデーション太め下線 */
section[id^="whitening"] .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^="whitening"] .ttlStyle04 {
		font-size: 26px;
		white-space: normal;
	}
}
section[id^="whitening"] .ttlStyle04 .border {
	padding-bottom: 6px;
	background: var(--lg-we01) no-repeat left bottom / 100% 3px;
}
@media (width <= 768px) {
	section[id^="whitening"] .ttlStyle04 .border.pc {
		padding-bottom: 0;
		background: none;
	}
}
@media (width > 768px) {
	section[id^="whitening"] .ttlStyle04 .border.sp {
		padding-bottom: 0;
		background: none;
	}
}

/* 角丸ボックスで囲むタイトル付きレイアウト */
section[id^="whitening"] .borderBoxLayout01 {
	padding: 24px var(--pd-spH) 40px;
	border: 1px solid var(--cl-brand01);
	border-radius: var(--br-basic);
}
@media (width > 768px) {
	section[id^="whitening"] .borderBoxLayout01 {
		padding: 28px 70px 60px;
	}
}
section[id^="whitening"] .borderBoxLayout01 .borderBoxTitle {
	display: flex;
	align-items: center;
	padding-bottom: 22px;
	border-bottom: 1px solid var(--cl-brand01);
	font-size: min(17px, calc(17 / var(--w-spDesign) * 100dvw + var(--spfs-diff)));
	font-weight: var(--fw-medium);
	line-height: var(--lh-title);
	white-space: nowrap;
}
@media (width > 768px) {
	section[id^="whitening"] .borderBoxLayout01 .borderBoxTitle {
		padding-bottom: 28px;
		font-size: 24px;
		white-space: normal;
	}
}
section[id^="whitening"] .borderBoxLayout01 .borderBoxTitle::before {
	content: '';
	flex: 0 0 auto;
	width: min(13px, calc(13 / var(--w-spDesign) * 100dvw));
	aspect-ratio: 13 / 27;
	background: url("images/img_jewel.webp") no-repeat center / contain;
}
@media (width > 768px) {
	section[id^="whitening"] .borderBoxLayout01 .borderBoxTitle::before {
		width: 17px;
		aspect-ratio: 17 / 35;
	}
}
section[id^="whitening"] .borderBoxLayout01 .borderBoxTitle::after {
	content: '';
	flex: 0 0 auto;
	order: 1;
	align-self: stretch;
	width: 1px;
	margin: 0 min(20px, calc(20 / var(--w-spDesign) * 100dvw));
	background: var(--lg-brand01) no-repeat center / 100% calc(47 / 62 * 100%);
}
@media (width > 768px) {
	section[id^="whitening"] .borderBoxLayout01 .borderBoxTitle::after {
		margin: 0 40px;
		background-size: 100% calc(35 / 43 * 100%);
	}
}
section[id^="whitening"] .borderBoxLayout01 .borderBoxTitle > * {
	flex: 1 1 auto;
	order: 2;
}


/*
	ボタン・リンク
*/

/* 青グラデーション両側丸めボタン */
section[id^="whitening"] .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^="whitening"] .btnStyle01 {
		width: 366px;
		height: 64px;
		border-radius: 32px;
		font-size: min(16px, calc(16 / var(--w-pcDesign) * 100dvw));
	}
}
section[id^="whitening"] .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^="whitening"] .btnStyle01.pink {
	background-image: var(--lg-pink01);
}

/* 青文字、青下線で右側に下向き矢印付きのリンク */
section[id^="whitening"] .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^="whitening"] .linkStyle01 {
		padding-right: 1.38em;
		font-size: 16px;
	}
}
section[id^="whitening"] .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^="whitening"] .linkStyle01.gray {
	background-image: linear-gradient(to right, var(--cl-note), var(--cl-note));
	color: var(--cl-note);
}

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


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

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

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

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

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


/* 水色ボックスのスライダーレイアウト */
section[id^="whitening"] .caseSliderLayout {
	--sliderw: calc(var(--w-spContents) - var(--pd-spHNum) * 2);
	--space: 10;
	
	padding: 34px var(--pd-spH) 29px;
	background: var(--cl-bg01);
	border-radius: var(--br-basic);
	box-shadow: var(--bs-basic);
}
@media (width > 768px) {
	section[id^="whitening"] .caseSliderLayout {
		--sliderw: calc(var(--w-pcDesign) - 80 * 2);
		--contents-wper-pc: calc(680 / var(--sliderw) * 100%);
		--contents-plusPad: calc(680 + var(--space) * 2);
		
		padding: 40px 80px 44px;
	}
}
section[id^="whitening"] .caseSliderLayout .sliderArea {
	margin-top: 32px;
}
@media (width > 768px) {
	section[id^="whitening"] .caseSliderLayout .sliderArea {
		margin-top: 42px;
	}
}
section[id^="whitening"] .caseSliderLayout .container {
	position: relative;
}
section[id^="whitening"] .caseSliderLayout .track {
	width: calc((230 + var(--space) * 2) / var(--sliderw) * 100%);
	margin: 0 auto;
}
@media (width > 768px) {
	section[id^="whitening"] .caseSliderLayout .track {
		width: calc(var(--contents-plusPad) / var(--sliderw) * 100%);
	}
}
section[id^="whitening"] .caseSliderLayout .slide {
	padding: 0 calc(var(--space) / (230 + var(--space) * 2) * 100%);
}
@media (width > 768px) {
	section[id^="whitening"] .caseSliderLayout .slide {
		display: flex;
		flex-wrap: wrap;
		padding: 0 calc(var(--space) / var(--contents-plusPad) * 100%);
	}
}
section[id^="whitening"] .caseSliderLayout .img {
	position: relative;
	aspect-ratio: 230 / 130;
	border-radius: var(--br-basic);
	overflow: hidden;
}
@media (width > 768px) {
	section[id^="whitening"] .caseSliderLayout .img {
		flex: 1 0 0;
		aspect-ratio: 320 / 180;
	}
}
section[id^="whitening"] .caseSliderLayout .img + .img {
	margin-top: 12px;
}
@media (width > 768px) {
	section[id^="whitening"] .caseSliderLayout .img + .img {
		margin: 0 0 0 calc(40 / 680 * 100%);
	}
}
section[id^="whitening"] .caseSliderLayout img {
	height: 100%;
	object-fit: cover;
}
section[id^="whitening"] .caseSliderLayout .tag {
	display: flex;
	justify-content: center;
	align-items: center;
	position: absolute;
	left: 0;
	top: 0;
	width: 59px;
	height: 20px;
	background: var(--cl-note);
	border-radius: 0 0 var(--br-small) 0;
	color: #fff;
	font-family: var(--ff-stylish);
	font-size: 11px;
	font-weight: var(--fw-medium);
}
@media (width > 768px) {
	section[id^="whitening"] .caseSliderLayout .tag {
		width: 101px;
		height: 34px;
		font-size: 18px;
	}
}
section[id^="whitening"] .caseSliderLayout .tag.after {
	background: var(--cl-brand01);
}
section[id^="whitening"] .caseSliderLayout .up {
	display: flex;
	justify-content: center;
	align-items: center;
	min-height: 22px;
	margin-top: 11px;
	padding: 0 5px;
	background: var(--cl-brand01);
	border-radius: var(--br-small);
	color: #fff;
	text-align: center;
}
@media (width <= 768px) {
	section[id^="whitening"] .caseSliderLayout .up {
		font-size: 12px;
	}
}
@media (width > 768px) {
	section[id^="whitening"] .caseSliderLayout .up {
		flex: 0 0 auto;
		width: 100%;
		min-height: 26px;
		margin-top: 22px;
	}
}
section[id^="whitening"] .caseSliderLayout .arrow {
	display: block;
	position: absolute;
	top: 50%;
	width: 8%;
	aspect-ratio: 1;
	border: 1px var(--cl-brand01);
	border-style: solid solid none none;
	color: transparent;
	font-size: 0;
	translate: 0 -125%;
}
@media (width > 768px) {
	section[id^="whitening"] .caseSliderLayout .arrow {
		width: 5.2%;
		translate: 0 -80%;
	}
}
section[id^="whitening"] .caseSliderLayout .arrow.prev {
	left: 2%;
	rotate: -135deg;
}
@media (width > 768px) {
	section[id^="whitening"] .caseSliderLayout .arrow.prev {
		left: 0.5%;
	}
}
section[id^="whitening"] .caseSliderLayout .arrow.next {
	right: 2%;
	rotate: 45deg;
}
@media (width > 768px) {
	section[id^="whitening"] .caseSliderLayout .arrow.next {
		right: 0.5%;
	}
}
section[id^="whitening"] .caseSliderLayout :is(.about, .notes) {
	color: var(--cl-note);
	font-size: var(--fs-small);
	line-height: var(--lh-small);
}
@media (width > 768px) {
	section[id^="whitening"] .caseSliderLayout :is(.about, .notes) {
		width: var(--contents-wper-pc);
		margin: 0 auto;
	}
}
section[id^="whitening"] .caseSliderLayout .about {
	margin-top: 27px;
	color: var(--cl-brand03);
}
@media (width > 768px) {
	section[id^="whitening"] .caseSliderLayout .about {
		margin-top: 20px;
	}
}
section[id^="whitening"] .caseSliderLayout .notes * {
	display: inline;
}
section[id^="whitening"] .caseSliderLayout .notes dt + dd::before {
	content: '：';
}
section[id^="whitening"] .caseSliderLayout .notes dd + dt::before {
	content: '／';
}
section[id^="whitening"] .caseSliderLayout .pagination {
	margin-top: 30px;
}
section[id^="whitening"] .caseSliderLayout .pagination > * {
	padding: 0 8px;
}
section[id^="whitening"] .caseSliderLayout .pagination button {
	display: block;
	width: 8px;
	aspect-ratio: 1;
	background: var(--cl-paleGray);
	border-radius: 50%;
	overflow: hidden;
}
section[id^="whitening"] .caseSliderLayout .pagination button.is-active {
	background: var(--cl-brand01);
}

/* エキスパンドレイアウト */
section[id^="whitening"] .expandLayout {
	border-top: 1px solid var(--cl-brand01);
}
section[id^="whitening"] .expandLayout .expandItem {
	border-bottom: 1px solid var(--cl-brand01);
}
section[id^="whitening"] .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^="whitening"] .expandLayout .expandTitle {
		font-size: 18px;
	}
}
section[id^="whitening"] .expandLayout .expandText {
	flex: 1 1 auto;
}
section[id^="whitening"] .expandLayout .expandButton {
	flex: 0 0 auto;
	margin-left: 15px;
}
@media (width > 768px) {
	section[id^="whitening"] .expandLayout .expandButton {
		margin-left: 30px;
	}
}
section[id^="whitening"] .expandLayout .expandButton button {
	display: block;
	position: relative;
	width: 18px;
	aspect-ratio: 1;
	color: transparent;
	font-size: 0;
}
@media (width > 768px) {
	section[id^="whitening"] .expandLayout .expandButton button {
		width: 24px;
	}
}
section[id^="whitening"] .expandLayout .expandButton button::before,
section[id^="whitening"] .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^="whitening"] .expandLayout .expandDetail {
	display: grid;
	grid-template-rows: 1fr;
	padding-bottom: 40px;
	transition: grid-template-rows 300ms ease;
}
@media (width > 768px) {
	section[id^="whitening"] .expandLayout .expandDetail {
		padding-bottom: 60px;
	}
}
section[id^="whitening"] .expandLayout .expandInner {
	overflow: hidden;
}
section[id^="whitening"] .expandLayout .expandItem.close .expandButton button::after {
	rotate: -90deg;
}
section[id^="whitening"] .expandLayout .expandItem.close .expandDetail {
	grid-template-rows: 0fr;
	padding-bottom: 0;
}

/* エキスパンドレイアウト内にスライダーレイアウトがあるパターン */
section[id^="whitening"] .expandLayout:has(.caseSliderLayout) .expandItem:not(.close) {
	padding-bottom: 40px;
}
section[id^="whitening"] .expandLayout:has(.caseSliderLayout) .expandItem .expandDetail {
	padding-bottom: 0;
}
section[id^="whitening"] .expandLayout:has(.caseSliderLayout) .expandItem:not(.close) .expandDetail {
	border-radius: var(--br-basic);
	box-shadow: var(--bs-basic);
}
section[id^="whitening"] .expandLayout:has(.caseSliderLayout) .caseSliderLayout {
	box-shadow: none;
}


/*
	セクション
*/

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



.c-fixed-line{
	right: 10px!important;
	display: none;
	transition: none;
	bottom: 40px!important;
}

.c-fixed-sp a{width: 50%!important;}

@media screen and (max-width: 768px) {
	.show{
		transition: 0.8s;
	}
	
}


.c-fixed-sp .rev{
	background: url(images/sp_footer_web.svg) center no-repeat, #eb6d80!important;
	background-size: 42.13vw !important;
	border-bottom: 4px solid #AB2945;
	height: 10vw;
    min-height: 40px;
}

.c-fixed-sp .tel{
	background: url(images/sp_footer_tel.svg)center no-repeat,#004ea2!important;
	background-size: 30.8vw!important;
	border-bottom: 4px solid #170C45;
	height: 10vw;
    min-height: 40px;
}


/* summer2026 */
.summer2026 {
	aspect-ratio: 318 / 63;
	
	@media (width > 768px) {
		display: none;
	}
}