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



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

	ページ専用設定

---------------------------------------- */
/*
	セクション
*/
#bPriceMv {
	.mv {
		--w: 372;
		--h: 234;
		
		@media (width > 768px) {
			--w: 1200;
			--h: 550;
		}
		
		position: relative;
		aspect-ratio: var(--w) / var(--h);
		background: url(images/img_btp_fv_sp.webp) no-repeat center / cover;
		border-radius: var(--br-basic);
		white-space: nowrap;
		overflow: hidden;
		
		@media (width > 768px) {
			background-image: url(images/img_btp_fv_pc.webp);
		}
	}

	.textContainer {
		position: absolute;
		left: calc(50 / var(--w) * 100%);
		bottom: calc(70 / var(--h) * 100%);
		color: transparent;
		font-weight: var(--fw-medium);
		text-align: center;
		
		@media (width > 768px) {
			left: calc(334 / var(--w) * 100%);
			bottom: 50%;
			translate: 0 50%;
		}
	}

	.title,
	.en {
		background: var(--lg-pnk01) no-repeat center / cover;
		background-clip: text;
	}

	.title {
		font-size: calc(var(--fs-bigNum) / var(--w-designNum) * 100dvw);
		line-height: 1.3;
		
		@media (width > 768px) {
			font-size: min(40px, calc(40 / var(--w-contentsWideNum) * 100dvw));
		}
	}

	.en {
		font-family: var(--ff-en);
		margin-top: calc(5 / var(--w-designNum) * 100dvw);
		font-size: calc(10 / var(--w-designNum) * 100dvw);
		line-height: 1.8;
		
		@media (width > 768px) {
			margin-top: min(30px, calc(30 / var(--w-contentsWideNum) * 100dvw));
			font-size: min(28px, calc(28 / var(--w-contentsWideNum) * 100dvw));
		}
	}
}


#bPriceNavi {
	margin-top: var(--pd-vItem);
}


#bPriceFeature {
	padding: var(--pd-vGroup) 0;
	background: url(images/img_bt_menubg_sp.webp) no-repeat center top / 100% 100%;
	
	@media (width > 768px) {
		padding: 0;
		background: none;
		
		.bg {
			padding-bottom: var(--pd-vSec);
			background: url(images/img_bt_menubg_pc.webp) no-repeat center top / 100% 100%;
		}
	}

	.container {
		padding: var(--pd-h);
		background: #fff;
		border-radius: var(--br-basic);
		overflow: hidden;
		box-shadow: var(--bs-basic);

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

	.feature {
		max-width: 500px;
		aspect-ratio: 500 / 256;
		margin-right: auto;
		margin-left: auto;
	}

	.menuList {
		.item {
			aspect-ratio: 330 / 200;
			border-radius: var(--br-basic);
			overflow: hidden;
			
			@media (width > 768px) {
				max-width: 500px;
				aspect-ratio: 500 / 250;
				margin-right: auto;
				margin-left: auto;
			}

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


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

		&.oral .partTitle::after {
			background-image: url(images/img_bt_faq01_sp.webp);
			
			@media (width > 768px) {
				background-image: url(images/img_bt_faq01_pc.webp);
			}
		}
		
		&.lip .partTitle::after {
			background-image: url(images/img_bt_faq02_sp.webp);
			
			@media (width > 768px) {
				background-image: url(images/img_bt_faq02_pc.webp);
			}
		}
		
		&.peeling .partTitle::after {
			background-image: url(images/img_bt_faq03_sp.webp);
			
			@media (width > 768px) {
				background-image: url(images/img_bt_faq03_pc.webp);
			}
		}
	}

	.partTitle {
		&::after {
			content: '';
			display: block;
			aspect-ratio: 372 / 74;
			margin-top: var(--pd-vItem);
			background: no-repeat center / cover;
			border-radius: var(--br-small);
			
			@media (width > 768px) {
				aspect-ratio: 1000 / 136;
			}
		}
	}

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


#bPriceMenu {
	padding: var(--pd-vGroup) 0;
	background: url(images/img_bt_bg_sp.webp) no-repeat center top / cover;
	
	@media (width > 768px) {
		padding: 0;
		background: none;
		
		.bg {
			background: url(images/img_bt_bg_pc.webp) no-repeat center top / 100% 100%;
		}
	}

	.menu {
		padding: var(--pd-h);
		background: #fff;
		border-radius: var(--br-basic);
		box-shadow: var(--bs-basic);

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

		&.oral {
			.menuTitle::after {
				background-image: url(images/img_menuor_sp.webp);
				
				@media (width > 768px) {
					background-image: url(images/img_menuor_pc.webp);
				}
			}

			.menuDetail .beforeAfter .photo {
				aspect-ratio: 330 / 168;
				
				@media (width > 768px) {
					aspect-ratio: 500 / 254;
				}
			}
		}

		&.lip {
			.menuTitle::after {
				background-image: url(images/img_menulip_sp.webp);
				
				@media (width > 768px) {
					background-image: url(images/img_menulip_pc.webp);
				}
			}

			.menuDetail .beforeAfter .photo {
				aspect-ratio: 330 / 120;
				
				@media (width > 768px) {
					aspect-ratio: 500 / 182;
				}
			}
		}

		&.peeling {
			.menuTitle::after {
				background-image: url(images/img_menugum_sp.webp);
				
				@media (width > 768px) {
					background-image: url(images/img_menugum_pc.webp);
				}
			}

			.menuDetail .beforeAfter .photo {
				aspect-ratio: 299 / 109;
				
				@media (width > 768px) {
					aspect-ratio: 500 / 182;
				}
			}
		}
	}

	.menuTitle {
		&::after {
			content: '';
			display: block;
			aspect-ratio: 330 / 180;
			margin-top: var(--pd-vItem);
			background: no-repeat center / cover;
			border-radius: var(--br-basic);
			
			@media (width > 768px) {
				aspect-ratio: 700 / 250;
			}
		}
	}

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

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

		.recommend {
			@media (width > 768px) {
				margin-top: var(--pd-vSmall);
			}

			.text {
				width: fit-content;
				background: var(--lg-pnk01) no-repeat center / cover;
				background-clip: text;
				color: transparent;
				font-size: var(--fs-smaller);
				font-weight: var(--fw-medium);
				line-height: var(--lh-small);
				
				@media (width > 768px) {
					font-size: var(--fs-basic);
					line-height: var(--lh-basic);
				}
			}

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

				@media (width > 768px) {
					margin-top: var(--pd-vSmall);
				}
			}
		}

		.beforeAfter {
			.photo {
				border-radius: var(--br-basic);
				overflow: hidden;
				
				@media (width > 768px) {
					max-width: 500px;
					margin: 0 auto;
				}
			}

			.limited {
				margin-top: var(--pd-vSmall);
				color: var(--cl-gry01);
				font-size: var(--fs-small);
				line-height: var(--lh-small);
				
				@media (width > 768px) {
					margin-top: var(--pd-vItem);
				}
			}
		}
	}
}