@charset "UTF-8";

@media screen and (min-width: 768px) {
	.br-sp {
		display: none;
	}
}

@media screen and (max-width: 767px) {
	.br-pc {
		display: none;
	}
}



.skin-refining-reset-lotion {

	/* キービジュアル */
	.kv {
		max-width: 1920px;
		margin-inline: auto;
		background: url(../img/kv_bg.webp) no-repeat center center / cover;

		@media (width < 768px) {
			background: url(../img/kv_bg_sp.webp) no-repeat center center / cover;
		}

	}

	/* リード */
	.lead {
		padding-top: min(90px, 10vw);
		padding-inline: min(30px, 5vw);

		.lead__header {
			text-align: center;

			.lead__header--catch {
				font-family: "游明朝", "Yu Mincho", yumincho, "Hiragino Mincho Pro", serif;
				font-size: min(34px, 5.2vw);
				font-weight: 600;
				letter-spacing: .05em;
				background: linear-gradient(265deg, #DF4F0D 30%, #00A5A8 55%);
				/* background: linear-gradient(265deg in oklch, #DF4F0D 20%, #00A5A8 80%); */
				background-clip: text;
				-webkit-background-clip: text;
				-webkit-text-fill-color: transparent;
			}

			.lead__header--subtitle {
				margin-top: min(20px, 6vw);
				font-family: "游明朝", "Yu Mincho", yumincho, "Hiragino Mincho Pro", serif;
				font-size: min(26px, 4.4vw);
				font-weight: 600;
				position: relative;
				display: inline-block;

				&:before,
				&:after {
					content: '';
					position: absolute;
					top: 50%;
					display: inline-block;
					width: min(40px, 5.2vw);
					height: 1px;
					background-color: black;
				}

				&:before {
					left: -35px;
					transform: rotate(65deg);

					@media (width < 768px) {
						left: -4vw;
					}
				}

				&:after {
					right: -35px;
					transform: rotate(-65deg);

					@media (width < 768px) {
						right: -4vw;
					}
				}
			}

			.lead__header--title {
				margin-top: min(35px, 6vw);
				font-family: "游明朝", "Yu Mincho", yumincho, "Hiragino Mincho Pro", serif;
				font-size: min(76px, 12vw);
				font-weight: 600;
				font-style: italic;
				letter-spacing: .1em;
				line-height: 1.2;
				background: linear-gradient(265deg, #DF4F0D 25%, #00A5A8 60%);
				background-clip: text;
				-webkit-background-clip: text;
				-webkit-text-fill-color: transparent;

				span {
					font-style: normal;
					font-size: 30%;
					vertical-align: text-top;
				}
			}
		}

		.lead__body {
			margin-top: min(50px, 6vw);
			max-width: 860px;
			margin-inline: auto;
			display: grid;
			grid-template-columns: 1.5fr 1fr;
			gap: min(50px, 7vw);

			@media (width < 768px) {
				grid-template-columns: 1fr;
			}

			.lead__content {

				.lead__content--title {
					text-align: center;
					width: 100%;
					max-width: 270px;
					margin-inline: auto;
					font-size: min(24px, 4.6vw);
					font-weight: 600;
					color: white;
					background: linear-gradient(265deg, #DF4F0D 20%, #00A5A8 80%);
					border-radius: 40px;
					padding: min(5px, 2vw) min(20px, 3vw);
				}

				.lead__content--list {
					padding-top: min(20px, 3vw);

					li {
						font-size: min(26px, 4.8vw);
						letter-spacing: 0.1em;
						font-weight: 700;
						background: #BEE8E9;
						border-radius: min(10px, 1.5vw);
						padding: min(20px, 3vw);
						margin-top: min(25px, 4vw);
						display: grid;
						grid-template-columns: min(36px, 7vw) auto;
						gap: min(20px, 2vw);

						&:before {
							margin-top: min(5px, 1vw);
							display: block;
							content: '';
							width: min(36px, 6vw);
							height: min(33px, 5vw);
							background: url('../img/ic_check.webp') no-repeat center center / contain;
						}

						span {
							background: linear-gradient(transparent 60%, #fff 60%);
						}

						small {
							font-size: 30%;
							vertical-align: text-top;
						}
					}
				}

				.lead__content--note {
					margin-top: min(20px, 3vw);
					font-size: min(12px, 3.2vw);
					font-weight: 600;
					text-align: right;
				}
			}

			.lead__body--image {
				text-align: center;

				img {
					@media (width < 768px) {
						max-width: 35vw;
						margin-inline: auto;
					}
				}
			}

		}
	}

	/* ポイント */
	.point {
		background: conic-gradient(from 171deg at 45.82% 51.95%, rgba(223, 79, 13, 0.36) 0deg, rgba(0, 165, 168, 0.36) 128.0769181251526deg, rgba(215, 92, 15, 0.36) 335.7692241668701deg);

		.point__inner {
			background: url('../img/bg_wave.webp') no-repeat center top / 100% auto;
			padding-top: min(250px, 22vw);
			padding-bottom: min(100px, 10vw);
			padding-inline: min(30px, 5vw);
		}

		.point__content {
			background-color: white;
			max-width: 1220px;
			width: 100%;
			margin-inline: auto;
			padding-inline: min(30px, 5vw);
			padding-top: min(60px, 7vw);
			padding-bottom: min(40px, 5vw);

			&:not(:first-child) {
				margin-top: min(60px, 7vw);
			}
		}

		.point__title {
			text-align: center;

			h3 {
				font-family: futura-pt, sans-serif;
				font-size: min(36px, 5.6vw);
				font-weight: 600;
				color: #D25416;

				img {
					max-width: 30%;
				}

				&:after {
					content: '';
					display: block;
					width: 100%;
					max-width: 80px;
					margin-inline: auto;
					height: 2px;
					background-color: #D25416;
					margin-top: min(10px, 3vw);

					@media (width < 768px) {
						max-width: 20%;
					}
				}
			}

			p {
				margin-top: min(30px, 6vw);
				font-size: min(24px, 4.6vw);
				font-weight: 600;
				color: #D25416;
			}
		}

		.point__content-01 {

			.point__block01 {
				margin-top: min(80px, 7vw);
				display: flex;
				justify-content: center;

				@media (width < 768px) {
					flex-direction: column;
					align-items: center;
				}

				>div:not(:last-child) {
					display: flex;
					align-items: center;

					@media (width < 768px) {
						flex-direction: column;
						align-items: top;
					}

					img {
						@media (width < 768px) {
							width: 60vw;
						}
					}

					&::after {
						content: '';
						display: block;
						width: 13px;
						height: 50px;
						background: #d25416;
						clip-path: polygon(0 0, 0 100%, 100% 50%);
						margin-inline: min(30px, 3vw);

						@media (width < 768px) {
							width: 50px;
							height: 13px;
							background: #d25416;
							clip-path: polygon(0 0, 100% 0%, 50% 100%);
							margin-inline: 0;
							margin-block: 4vw;
						}

					}
				}
			}

			.point__block02 {
				margin-top: min(80px, 7vw);
				text-align: center;

				@media (width < 768px) {
					display: none;
				}
			}

			.point__block02-sp {
				display: none;

				@media (width < 768px) {
					display: block;
					margin-top: 7vw;
				}

				.point__block02-sp--01 {
					display: grid;
					grid-template-columns: 1fr 4fr;
					align-items: center;
					gap: 5vw;
					padding-inline: 3vw;

					img {
						width: 100%;
					}

					small {
						font-size: 50%;
						vertical-align: text-top;
					}
				}

				.point__block02-sp--01-note {
					font-size: 2.6vw;
					text-align: right;
					margin-top: 2vw;
				}

				.point__block02-sp--02 figure {
					margin-top: 3vw;

					img {
						width: 100%;
					}
				}

				.point__block02-sp--02-note {
					font-size: min(14px, 3vw);
					text-align: right;
					margin-top: min(10px, 2vw);
					margin-right: min(20px, 3vw);
				}
			}

			.point__block03 {
				margin-top: min(80px, 7vw);
				display: flex;
				justify-content: center;
				gap: min(30px, 3vw);

				@media (width < 768px) {
					flex-direction: column;
					align-items: center;
				}
			}

			.point__block04 {
				margin-top: min(60px, 7vw);

				.point__block04--title {
					text-align: center;
					font-size: min(36px, 4.8vw);
					font-weight: 600;
					letter-spacing: 0.1em;
					color: #D25416;
					text-decoration: underline;
				}

				.point__block04--content {
					margin-top: min(30px, 6vw);
					width: 100%;
					max-width: max-content;
					margin-inline: auto;

					ul {
						display: flex;
						justify-content: center;
						gap: min(30px, 2vw);
					}

					.point__block04--note {
						margin-top: min(10px, 2vw);
						font-size: min(12px, 2.8vw);
						text-align: right;
					}
				}

			}

		}

		.point__content-02 {

			h4 {
				margin-top: min(60px, 7vw);
				display: flex;
				justify-content: center;

				span {
					color: #D25416;
					font-family: "游明朝", "Yu Mincho", yumincho, "Hiragino Mincho Pro", serif;
					font-size: min(36px, 5vw);
					font-weight: 600;
					position: relative;
					display: inline-block;

					&:before,
					&:after {
						content: '';
						position: absolute;
						top: 50%;
						display: inline-block;
						width: min(40px, 5.2vw);
						height: 1px;
						background-color: #D25416;
					}

					&:before {
						left: -35px;
						transform: rotate(65deg);

						@media (width < 768px) {
							left: -4vw;
						}
					}

					&:after {
						right: -35px;
						transform: rotate(-65deg);

						@media (width < 768px) {
							right: -4vw;
						}
					}

				}
			}

			.point__main {
				margin-top: min(40px, 5vw);
				display: flex;
				justify-content: center;
				gap: min(30px, 3vw);

				@media (width < 768px) {
					flex-direction: column;
					align-items: center;
				}
			}
		}

		.point__content-03 {
			.point__main {
				margin-top: min(40px, 5vw);
				display: flex;
				justify-content: center;
				align-items: center;
				gap: min(30px, 3vw);
				font-family: "游明朝", "Yu Mincho", yumincho, "Hiragino Mincho Pro", serif;
				font-size: min(36px, 5vw);
				font-weight: 700;
				letter-spacing: .2em;
				color: #D25416;

				@media (width < 768px) {
					flex-direction: column;
					align-items: center;
				}

				figure {
					@media (width < 768px) {
						max-width: 50%;
						margin-inline: auto;
					}
				}
			}
		}


	}

	/* 商品 */
	.product {
		width: 100%;
		max-width: max-content;
		margin-inline: auto;
		display: grid;
		grid-template-columns: 1fr 1.2fr;
		align-items: center;
		gap: min(30px, 3vw);
		padding-top: min(80px, 10vw);
		padding-bottom: min(50px, 10vw);
		padding-inline: min(30px, 5vw);

		@media (width < 768px) {
			grid-template-columns: 1fr;
		}

		.product__img {
			@media (width < 768px) {
				max-width: 75%;
				margin-inline: auto;
			}
		}

		.product__content--title {
			font-size: min(25px, 4.6vw);
			font-weight: 700;
			letter-spacing: .1em;

			span {
				display: block;
				font-size: 150%;
			}
		}

		.product__content--list {
			margin-top: min(10px, 3vw);
			font-size: min(16px, 4.2vw);
			font-weight: 400;
			display: flex;
			align-items: center;
			gap: min(30px, 3vw);

			span {
				display: inline-block;
				background-color: #EFEFEF;
				padding: min(5px, 1vw) min(10px, 2vw);
				margin-right: min(10px, 2vw);
			}
		}

		.product__content--btn {
			margin-top: min(60px, 6vw);
		}
	}

}