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



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

	旧スタイル

-------------------------------------------------- */
.l-main__inner {
	max-width: 1196px;
	min-width: 1024px;
	margin: 0 auto;
	padding: 0 30px;
}
@media (max-width: 767px) {
	.l-main__inner {
		min-width: 100%;
		padding: 0 4%;
	}
}

.c-breadcrumb {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	padding: 6px 2em 5px;
	line-height: 1.5;
}
.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;
}
.c-breadcrumb__current a {
	text-decoration: underline;
}
@media (max-width: 767px) {
	.c-breadcrumb {
		padding: 3px 0;
	}
}



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

	変数定義

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



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

	reset

-------------------------------------------------- */
[id^="beforeAfter"] {
	&,
	* {
		&,
		&::before,
		&::after {
			color: inherit;
			font: inherit;
			box-sizing: border-box;
		}
	}

	a,
	button {
		border: none;
		text-decoration: none;
	}
}



[id^="beforeAfter"] {
	/* --------------------------------------------------

		ノーマライズ

	-------------------------------------------------- */
	/* 全体 */
	&,
	* {
		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);

	+ [id^="beforeAfter"] {
		margin-top: var(--pd-vSec);
	}

	b,
	strong {
		font-weight: inherit;
	}

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



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

		共通クラス

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

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

	/* 左端線タイトル */
	.ttlLeftLine {
		padding-left: 23px;
		background: var(--lg-blu01) no-repeat left center / 3px 100%;
		color: var(--cl-brand01);
		font-size: 17px;
		font-weight: var(--fw-bold);
		line-height: var(--lh-smaller);
		
		@media (width > 768px) {
			font-size: 24px;
		}
	}


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

		/* 白ボタン */
		&.wht {
			background-image: var(--lg-blu04);
			border: 1px solid currentColor;
			color: var(--cl-brand01);
		}

		/* 濃い色背景ボタン */
		&.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;
		}
	}

	/* LINE CTAボタン */
	.layoutBtnLine {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 6px;
		white-space: nowrap;
		
		@media (width > 768px) {
			display: none;
		}

		.balloon {
			display: flex;
			justify-content: center;
			align-items: center;
			gap: 6px;
			color: transparent;
			font-family: var(--ff-basic);
			font-size: 16px;
			font-weight: var(--fw-bold);
			line-height: var(--lh-smaller);

			&::before,
			&::after {
				content: '／';
			}
			
			&::before,
			&::after,
			.text {
				flex: 0 0 auto;
				display: block;
				background: var(--lg-pnk01) no-repeat center / cover;
				background-clip: text;
			}

			&::before {
				scale: -1 1;
			}

			.ticket {
				flex: 0 0 auto;
				display: block;
				width: 84px;
				aspect-ratio: 84 / 29;
			}
		}

		.button {
			width: 100%;

			.btn {
				justify-content: flex-start;
				gap: 14px;
				padding-left: 12px;
				background: var(--cl-line);
			}

			.logo {
				display: flex;
				justify-content: center;
				align-items: center;
				width: 83px;
				height: 31px;
				background: #fff;
				border-radius: 16px;

				img {
					flex: 0 0 auto;
					width: auto;
					height: 16px;
					aspect-ratio: 201 / 70;
				}
			}

			.text {
				flex: 0 0 auto;
				display: block;
				font-size: 16px;
				text-shadow: var(--ts-basic);
			}
		}
	}


	/*
		症例写真
	*/
	.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);
				}
			}
		}
	}



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

		共通セクション

	-------------------------------------------------- */
	/*
		限定解除要件
	*/
	&.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: '：';
			}
		}
	}
}



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

	ページ専用

-------------------------------------------------- */
#beforeAfterHead {
	margin-top: var(--pd-vGroup);
	text-align: center;
	
	+ .bg {
		margin-top: var(--pd-vGroup);

		@media (width > 768px) {
			padding: var(--pd-h) 0;
			background: var(--cl-bg01);
		}
	}

	.title {
		font-size: 30px;
		font-weight: var(--fw-medium);
		line-height: var(--lh-smaller);
		
		@media (width > 768px) {
			font-size: 27px;
		}
	}

	.text {
		margin-top: var(--pd-vItem);
		color: #383838;
		font-size: 22px;
		
		@media (width > 768px) {
			font-size: 19px;
		}

		.num {
			display: inline-block;
			color: var(--cl-brand01);
			font-size: 30px;
			font-weight: var(--fw-medium);
			line-height: var(--lh-smaller);
			
			@media (width > 768px) {
				font-size: 27px;
			}
		}

		.note {
			font-size: 16px;
			line-height: var(--lh-small);
			
			@media (width > 768px) {
				font-size: 13px;
			}
		}
	}
}


#beforeAfterCases {
	.tabs {
		@media (width <= 768px) {
			.contentsInner {
				padding: 0;
			}
		}

		.list {
			display: flex;
			align-items: stretch;
			gap: 6px;
			border-bottom: 7px solid var(--cl-brand01);
			
			@media (width > 768px) {
				gap: 12px;
			}
		}

		.tab {
			flex: 1 1 auto;
			width: 100%;

			&.active .btn {
				background: var(--cl-brand01);
				color: #fff;
				
				@media (width > 768px) {
					cursor: default;

					&:hover {
						opacity: 1.0;
					}
				}
			}
		}

		.btn {
			display: flex;
			justify-content: center;
			align-items: center;
			width: 100%;
			height: 100%;
			padding: 3px;
			background: var(--cl-bg02);
			border-radius: var(--br-small) var(--br-small) 0 0;
			font-size: 12px;
			line-height: var(--lh-small);
			text-align: center;
			
			@media (width > 768px) {
				padding: 20px 5px;
				border: 2px var(--cl-brand01);
				border-style: solid solid none solid;
				font-size: var(--fs-basic);
			}
		}
	}

	.cases {
		padding-top: var(--pd-vGroup);
		
		@media (width > 768px) {
			padding: 0;
		}

		.container {
			@media (width > 768px) {
				background: #fff;
				
				@media (width > 768px) {
					padding: var(--pd-h);
				}
			}
		}

		.buttons {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			gap: var(--pd-vSmall);
			margin-top: var(--pd-vGroup);
			
			@media (width > 768px) {
				flex-direction: row;
			}

			.item {
				overflow: hidden;
				
				&:has(.hide) {
					display: none;
				}
			}
		}

		.casesList {
			.item {
				&:nth-child(n+2 of :not(.hide)) {
					margin-top: var(--pd-vGroup);
				}

				&.hide {
					display: none;
				}
			}
		}
	}
}


#beforeAfterLink {
	margin: var(--pd-vGroup) 0 var(--pd-vSec);
	
	@media (width > 768px) {
		margin-bottom: 0;
	}
}