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



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

	ページ専用設定

---------------------------------------- */
/*
	共通要素
*/
[id^="wPrice"] {
	.imgShade {
		aspect-ratio: 372 / 108;
		
		@media (width > 768px) {
			aspect-ratio: 800 / 233;
		}
	}
}



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

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

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

	.ja {
		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));
		}
	}

	.pre {
		font-size: calc(var(--fs-smallerNum) / var(--w-designNum) * 100dvw);
		
		@media (width > 768px) {
			font-size: min(25px, calc(25 / var(--w-contentsWideNum) * 100dvw));
		}
	}

	.en {
		font-family: var(--ff-en);
		margin-top: calc(7 / 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(var(--fs-big), calc(var(--fs-bigNum) / var(--w-contentsWideNum) * 100dvw));
		}
	}
}


#wPriceNavi {
	margin-top: var(--pd-vItem);
	
	@media (width > 768px) {
		margin-top: var(--pd-vGroup);
	}
}


#wPriceFeature {
	.bg {
		background: url(images/img_sec01bg_sp.webp) no-repeat center top / 100% auto;
		
		@media (width > 768px) {
			background-image: url(images/img_sec01bg_pc.webp);
		}
	}

	.points {
		aspect-ratio: 372 / 532;
		
		@media (width > 768px) {
			aspect-ratio: 800 / 650;
		}

		&,
		& ~ * {
			margin-top: var(--pd-vItem);
		}
	}

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

		.strong {
			font-weight: var(--fw-medium);
		}
	}
}


#wPricePrice {
	.bannerLine {
		margin-bottom: var(--pd-vGroup);
	}

	.guide {
		margin-top: var(--pd-vGroup);
		padding: var(--pd-h);
		border-radius: var(--br-basic);
		box-shadow: var(--bs-basic);
		
		@media (width > 768px) {
			max-width: 700px;
			margin: var(--pd-vItem) auto 0;
		}

		.image {
			aspect-ratio: 330 / 403;
			
			@media (width > 768px) {
				max-width: 398px;
				aspect-ratio: 398 / 501;
				margin: 0 auto;
			}
		}
	}
}


#wPriceReason {
	.secCatch {
		aspect-ratio: 372 / 224;
		border-radius: var(--br-basic);
		overflow: hidden;
		
		@media (width > 768px) {
			aspect-ratio: 800 / 482;
		}
	}

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

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

	.noteList {
		position: relative;
		margin-top: var(--pd-vSmall);
		padding-left: 1.5em;
		color: var(--cl-gry01);
		font-size: var(--fs-small);
		line-height: var(--lh-small);
		
		@media (width > 768px) {
			display: flex;
			align-items: flex-start;
			gap: 1.0em;
		}

		&::before {
			content: '※';
			display: block;
			position: absolute;
			left: 0;
			top: 0;
		}

		.item {
			display: flex;
			align-items: flex-start;
		}

		.tag {
			flex: 0 0 auto;
			display: block;

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

		.detail {
			flex: 1 1 auto;
			display: block;
		}
	}

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

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

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

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

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

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

			+ .contents {
				padding-top: var(--pd-vItem);
				border-top: 1px solid currentColor;
			}

			.summary {
				font-weight: var(--fw-medium);
				text-align: center;

				&::before {
					content: '';
					display: block;
					aspect-ratio: 330 / 97;
					margin-bottom: var(--pd-vItem);
					background: no-repeat center / cover;
					border-radius: var(--br-small);
					
					@media (width > 768px) {
						aspect-ratio: 700 / 205;
					}
				}

				.note {
					display: inline-block;
					font-size: var(--fs-small);
					font-weight: var(--fw-regular);
					line-height: var(--lh-small);
				}
			}

			.imageContainer {
				margin: var(--pd-vItem) auto 0;
			}

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

			.appeal {
				margin-top: var(--pd-vItem);
				font-size: var(--fs-big);
				font-weight: var(--fw-medium);
				line-height: var(--lh-smaller);
				text-align: center;

				.pink {
					display: inline-block;
					background: var(--lg-pnk01) no-repeat center / cover;
					background-clip: text;
					color: transparent;
				}
			}
		}

		> .item.office {
			.title::after {
				background-image: url(images/img_owmain_sp.webp);
				
				@media (width > 768px) {
					background-image: url(images/img_owmain_pc.webp);
				}
			}

			.contents.medication {
				@media (width > 768px) {
					.imageContainer {
						max-width: 344px;
					}
				}

				.summary::before {
					background-image: url(images/img_agent_sp.webp);
					
					@media (width > 768px) {
						background-image: url(images/img_agent_pc.webp);
					}
				}

				.image {
					aspect-ratio: 330 / 272;
					
					@media (width > 768px) {
						aspect-ratio: 344 / 284;
					}
				}

				.noteDetail {
					padding-left: 1.5em;
					text-indent: -1.5em;
				}
			}

			.contents.machine {
				@media (width > 768px) {
					.imageContainer {
						max-width: 344px;
					}
				}

				.summary::before {
					background-image: url(images/img_welight_sp.webp);
					
					@media (width > 768px) {
						background-image: url(images/img_welight_pc.webp);
					}
				}

				.image {
					aspect-ratio: 330 / 271;
					
					@media (width > 768px) {
						aspect-ratio: 344 / 283;
					}
				}

				.appeal {
					font-size: var(--fs-basic);
					font-weight: var(--fw-regular);
					line-height: var(--lh-basic);
					
					@media (width > 768px) {
						font-weight: var(--fw-medium);
					}
				}
			}
		}

		> .item.home {
			.title::after {
				background-image: url(images/img_hwmain_sp.webp);
				
				@media (width > 768px) {
					background-image: url(images/img_hwmain_pc.webp);
				}
			}

			.contents.mouthpiece {
				.product {
					aspect-ratio: 330 / 266;
					
					@media (width > 768px) {
						max-width: 330px;
						margin: 0 auto;
					}

					~ * {
						margin-top: var(--pd-vItem);
					}
				}

				.detail {
					font-weight: var(--fw-medium);

					&::before {
						content: '';
						display: block;
						aspect-ratio: 330 / 97;
						margin-bottom: var(--pd-vItem);
						background: url(images/img_moupi02_sp.webp) no-repeat center / cover;
						border-radius: var(--br-small);
						
						@media (width > 768px) {
							aspect-ratio: 700 / 175;
							background-image: url(images/img_moupi02_pc.webp);
							border-radius: var(--br-basic);
						}
					}
				}

				:is(.contentsOld, .contentsNew) {
					padding: var(--pd-h);
					background: var(--cl-bg01);
					border-radius: var(--br-basic);

					.text {
						margin-bottom: var(--pd-vItem);
						font-weight: var(--fw-medium);
						text-align: center;
					}
				}

				.contentsOld {
					background: var(--cl-bg03);

					.text {
						color: var(--cl-gry01);
					}
				}

				.contentsNew {
					position: relative;
					margin-top: var(--pd-vGroup);
					
					@media (width > 768px) {
						--pad: calc(var(--pd-vItem) * 2 + 23px);

						margin-top: var(--pad);
					}

					&::before {
						content: '';
						display: block;
						position: absolute;
						left: 50%;
						top: calc(var(--pd-vGroup) * -1 / 2);
						width: 120px;
						aspect-ratio: 120 / 20;
						background: linear-gradient(to bottom, transparent, 70%, var(--cl-brand02));
						clip-path: polygon(0 0, 100% 0, 50% 100%);
						translate: -50% -50%;
						
						@media (width > 768px) {
							top: calc(var(--pad) * -1 / 2);
							width: 137px;
							aspect-ratio: 137 / 23;
						}
					}
				}
			}

			.contents.jel {
				.summary::before {
					background-image: url(images/img_jel_sp.webp);
					
					@media (width > 768px) {
						background-image: url(images/img_jel_pc.webp);
						border-radius: var(--br-basic);
					}
				}

				.imageContainer {
					max-width: 299px;
					
					@media (width > 768px) {
						max-width: 334px;
					}
				}

				.image {
					aspect-ratio: 299 / 290;
					box-shadow: var(--bs-basic);
					
					@media (width > 768px) {
						aspect-ratio: 334 / 325;
					}
				}
			}
		}
	}
}


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