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



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

	ページ専用設定

---------------------------------------- */
/*
	セクション
*/
#cPriceMv {
	.mv {
		--w: 372;
		--h: 234;
		
		@media (width > 768px) {
			--w: 1200;
			--h: 550;
		}
		
		position: relative;
		aspect-ratio: var(--w) / var(--h);
		background: url(images/img_c_price_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_c_price_fv_pc.webp);
		}
	}

	.textContainer {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: calc(5 / var(--w-designNum) * 100dvw);
		position: absolute;
		left: calc(70 / var(--w) * 100%);
		top: 50%;
		translate: 0 -50%;
		
		@media (width > 768px) {
			gap: min(30px, calc(30 / var(--w-contentsWideNum) * 100dvw));
			left: calc(218 / var(--w) * 100%);
		}
	}

	.title,
	.en {
		background: var(--lg-blu01) no-repeat center / cover;
		background-clip: text;
		color: transparent;
		font-weight: var(--fw-medium);
		text-align: center;
	}

	.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);
		font-size: calc(10 / var(--w-designNum) * 100dvw);
		line-height: var(--lh-smaller);
		
		@media (width > 768px) {
			font-size: min(var(--fs-big), calc(var(--fs-bigNum) / var(--w-contentsWideNum) * 100dvw));
		}
	}
}


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


#cPriceFeature {
	padding: var(--pd-vGroup) 0;
	background: url(images/img_about_bg_0_sp.webp) no-repeat center top / cover;
	
	@media (width > 768px) {
		padding: var(--pd-vSec) 0;
		background-image: url(images/img_about_bg_0_pc.webp);
	}

	.secTitle {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: var(--pd-vSmall);
		font-family: var(--ff-en);
		font-size: var(--fs-big);
		font-weight: var(--fw-medium);
		line-height: var(--lh-smaller);
		text-align: center;

		.en {
			background: var(--lg-blu01) no-repeat center / cover;
			background-clip: text;
			color: transparent;
		}

		@media (width <= 768px) {
			~ * {
				margin-top: var(--pd-vGroup);
			}
		}
	}

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

		.item {
			aspect-ratio: 372 / 248;
			border-radius: var(--br-basic);
			box-shadow: var(--bs-basic);
			overflow: hidden;
			
			@media (width > 768px) {
				aspect-ratio: 800 / 330;
			}

			&:nth-child(n+2) {
				margin-top: var(--pd-vGroup);
				
				@media (width > 768px) {
					margin-top: var(--pd-vItem);
				}
			}
		}
	}

	.text {
		font-weight: var(--fw-medium);
		text-align: center;
		
		@media (width > 768px) {
			margin-top: var(--pd-vItem);
		}
	}
}


#cPricePrice {
	.priceTable {
		margin-top: var(--pd-vGroup);
	}
}


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

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

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

	.faqNum {
		width: fit-content;
		margin: 0 auto var(--pd-vItem);
		background: var(--lg-blu01) no-repeat center / cover;
		background-clip: text;
		color: transparent;
		font-family: var(--ff-en);
		font-size: var(--fs-smaller);
		font-weight: var(--fw-medium);
		line-height: var(--lh-small);
	}

	.faqDetail {
		display: flex;
		flex-direction: column;
		align-items: center;

		.img {
			width: 100%;
			margin-top: var(--pd-vItem);

			&.effect {
				aspect-ratio: 330 / 313;
				
				@media (width > 768px) {
					max-width: 800px;
					aspect-ratio: 800 / 425;
				}
			}

			&.teethDrop {
				aspect-ratio: 330 / 274;
				box-shadow: var(--bs-basic);
				
				@media (width > 768px) {
					max-width: 600px;
					aspect-ratio: 600 / 300;
				}
			}

			&.price {
				aspect-ratio: 330 / 240;
				
				@media (width > 768px) {
					max-width: 700px;
					aspect-ratio: 700 / 357;
				}
			}
		}

		.imgNote {
			margin-top: var(--pd-vSmall);
			color: var(--cl-gry01);
			font-size: var(--fs-small);
			line-height: var(--lh-small);
		}

		.detailText {
			margin-top: var(--pd-vItem);
			text-align: center;
		}
	}

	.question,
	.answer {
		display: flex;
		align-items: flex-start;
		gap: 10px;
		width: 100%;
		font-weight: var(--fw-medium);
		
		@media (width > 768px) {
			align-items: center;
		}

		&.answer {
			margin-top: var(--pd-vItem);
			color: var(--cl-brand03);
		}

		> * {
			display: block;
		}

		.tag {
			flex: 0 0 auto;
			font-family: var(--ff-en);
			font-size: var(--fs-big);
			line-height: var(--lh-smaller);
		}

		.text {
			flex: 1 1 auto;
		}
	}

	.more {
		width: fit-content;
		margin: var(--pd-vGroup) auto 0;
		
		@media (width > 768px) {
			margin-top: var(--pd-vItem);
		}
	}
}


#cPriceTechnology {
	.point {
		padding: var(--pd-h);
		background: var(--cl-bg01);
		border-radius: var(--br-basic);
		text-align: center;
		box-shadow: var(--bs-basic);

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

		.pointNum {
			display: flex;
			align-items: center;
			width: fit-content;
			height: 36px;
			margin: 0 auto;
			padding: 0 24px;
			background: var(--lg-blu01) no-repeat center / cover;
			border-radius: 18px;
			color: #fff;
			font-family: var(--ff-en);
			font-size: var(--fs-big);
			font-weight: var(--fw-medium);
			line-height: var(--lh-smaller);
			
			@media (width > 768px) {
				font-size: 19px;
			}
		}

		.catch {
			width: fit-content;
			margin: var(--pd-vSmall) auto 0;
			background: var(--lg-blu01) no-repeat center / cover;
			background-clip: text;
			color: transparent;
			font-family: var(--ff-en);
			font-size: var(--fs-big);
			font-weight: var(--fw-medium);
			line-height: var(--lh-smaller);
		}

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

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

				&.check .itemDetail::before {
					background-image: url(images/img_we_c_simulation_sp.webp);
					
					@media (width > 768px) {
						background-image: url(images/img_we_c_simulation_pc.webp);
					}
				}

				&.air .itemDetail::before {
					background-image: url(images/img_c_airflow_sp.webp);
					
					@media (width > 768px) {
						background-image: url(images/img_c_airflow_pc.webp);
					}
				}

				&.polish {
					.itemDetail::before {
						background-image: url(images/img_c_polishing_sp.webp);
					
						@media (width > 768px) {
							background-image: url(images/img_c_polishing_pc.webp);
						}
					}

					.count {
						margin-top: var(--pd-vItem);
						padding: var(--pd-h);
						background: #fff;
						border-radius: var(--br-basic);
						
						@media (width > 768px) {
							flex: 0 0 auto;
							width: 100%;
							margin: 0;
						}
					}

					.countContents {
						display: flex;
						align-items: flex-start;
						text-align: left;
						line-height: 1.4;

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

						.num {
							flex: 0 0 auto;

							&::after {
								content: '：';
							}
						}

						.text {
							flex: 1 1 auto;
						}
					}
				}

				&.tongue .itemDetail::before {
					background-image: url(images/img_c_tonguecleaning_sp.webp);
					
					@media (width > 768px) {
						background-image: url(images/img_c_tonguecleaning_pc.webp);
					}
				}
			}

			.itemDetail {
				font-weight: var(--fw-medium);
				
				@media (width > 768px) {
					display: flex;
					flex-wrap: wrap;
					justify-content: center;
					align-items: center;
					gap: var(--pd-vItem) 40px;
					width: var(--w-contentsNarrow);
					max-width: 100%;
					margin: 0 auto;
					text-align: left;

					.detailText {
						flex: 1 1 auto;
						width: 0;
					}
				}

				&::before {
					content: '';
					display: block;
					width: 100%;
					aspect-ratio: 330 / 180;
					margin-bottom: var(--pd-vItem);
					background: no-repeat center / cover;
					border-radius: var(--br-basic);
					
					@media (width > 768px) {
						flex: 0 0 auto;
						width: 300px;
						aspect-ratio: 300 / 180;
						margin: 0;
					}
				}
			}
		}

		&.cleaning {
			.summary {
				margin-top: var(--pd-vItem);
				font-weight: var(--fw-medium);

				&::before,
				&::after {
					content: '';
					display: block;
					width: 100%;
					background: no-repeat center / cover;
					border-radius: var(--br-basic);
					
					@media (width > 768px) {
						max-width: var(--w-contentsNarrow);
					}
				}

				&::before {
					aspect-ratio: 330 / 180;
					margin: var(--pd-vItem) 0;
					background-image: url(images/img_we_c_as_3_sp.webp);
					
					@media (width > 768px) {
						aspect-ratio: 700 / 300;
						margin: var(--pd-vItem) auto;
						background-image: url(images/img_we_c_as_3_pc.webp);
					}
				}

				&::after {
					aspect-ratio: 330 / 200;
					margin-top: var(--pd-vItem);
					background-image: url(images/img_we_c_as_4_sp.webp);
					
					@media (width > 768px) {
						aspect-ratio: 700 / 440;
						margin: var(--pd-vItem) auto 0;
						background-image: url(images/img_we_c_as_4_pc.webp);
						filter: drop-shadow(var(--bs-basic-filter));
					}
				}

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

		&.space {
			.summary {
				margin-top: var(--pd-vItem);

				&::before {
					content: '';
					display: block;
					width: 100%;
					aspect-ratio: 330 / 418;
					margin-bottom: var(--pd-vGroup);
					background: url(images/img_we_c_as_5_sp.webp) no-repeat center / contain;
					filter: drop-shadow(var(--bs-basic-filter));
					
					@media (width > 768px) {
						max-width: var(--w-contentsNarrow);
						aspect-ratio: 700 / 388;
						margin: 0 auto var(--pd-vItem);
						background-image: url(images/img_we_c_as_5_pc.webp);
					}
				}
			}

			.text {
				@media (width > 768px) {
					font-weight: var(--fw-medium);
				}

				.bigger {
					font-size: var(--fs-big);
					font-weight: var(--fw-medium);
					line-height: var(--lh-smaller);
				}
				
				.bold {
					font-weight: var(--fw-medium);
				}
			}
		}
	}
}


#cPriceLinks {
	@media (width <= 768px) {
		margin-top: var(--pd-vGroup);
	}
}


#cPriceCustomize {
	.about {
		font-weight: var(--fw-medium);
		text-align: center;
	}

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

		.item {
			padding: var(--pd-h);
			background: var(--cl-bg01);
			border-radius: var(--br-basic);
			box-shadow: var(--bs-basic);

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

		.target {
			aspect-ratio: 330 / 180;
			margin-top: var(--pd-vItem);
			border-radius: var(--br-small);
			overflow: hidden;
			
			@media (width > 768px) {
				aspect-ratio: 700 / 300;
				border-radius: var(--br-basic);
			}
		}

		.options {
			margin-top: var(--pd-vItem);
			padding: var(--pd-h);
			background: #fff;
			border-radius: var(--br-small);
		}

		.optionTitle {
			margin-bottom: var(--pd-vSmall);
			font-weight: var(--fw-medium);
		}

		.option {
			padding-left: 1.0em;
			text-indent: -1.0em;

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