@charset "utf-8";
/* 2026 入浴剤LP */
:where(.lp-daichi) {
	--bath-bg: #deecb8;
	--bathTop-bg: #4ab97c;
	--font-color01: #202726;
	--font-color02: #46715c;
	--font-color03: #3e2a07;
	--font-color04: #1d8a44;
	--green-cv: #99e666;
	--shadow1-cv: rgba(195, 133, 0, .9);
	--shadow2-cv: rgba(81, 155, 32, 0.9);

	/* https://min-max-calculator.9elements.com/ */
	/* 480px-960px幅 */
	--min8max14: clamp(0.5rem, 0.125rem + 1.25vw, 0.875rem);
	--min14max16: clamp(0.875rem, 0.75rem + 0.42vw, 1rem);
	--min14max18: clamp(0.875rem, 0.625rem + 0.83vw, 1.125rem);
	--min15max20: clamp(0.938rem, 0.625rem + 1.04vw, 1.25rem);
	--min17max23: clamp(1.063rem, 0.589rem + 1.58vw, 1.438rem);
	--min18max23: clamp(1.125rem, 0.813rem + 1.04vw, 1.438rem);
	--min20max28: clamp(1.25rem, 0.618rem + 2.11vw, 1.75rem);
	--min22max31: clamp(1.375rem, 0.813rem + 1.88vw, 1.938rem);
	--min22max35: clamp(1.375rem, 0.563rem + 2.71vw, 2.188rem);
	--min30max50: clamp(1.875rem, 0.296rem + 5.26vw, 3.125rem);
	--min30max70: clamp(1.875rem, -1.283rem + 10.53vw, 4.375rem);
	--min40max66: clamp(2.5rem, 0.875rem + 5.42vw, 4.125rem);
	--min50max100: clamp(3.125rem, 0.013rem + 10.4vw, 6.25rem);
	--min50max120: clamp(3.125rem, -2.401rem + 18.42vw, 7.5rem);
	--min70max113: clamp(4.375rem, 1.688rem + 8.96vw, 7.063rem);
	--min150max350: clamp(9.375rem, -6.414rem + 52.63vw, 21.875rem);
}

:where([class]).-bgBath {
	background: var(--bath-bg);
}
.item-detail .lp-daichi:not(:has(.lp-end, .-goyomiDetail)) {
	margin-top: 0;
}
.point-area,
.block-section--deli,
.healing-area {
	width: calc(100% + (2 * var(--min10max20)));
	transform: translateX(calc(-1 * (var(--min10max20))));
	box-sizing: border-box;
	padding-inline: var(--min10max20);
}
:where([class]).-tile {
	background: url(/external/category/image/2026/bathsalts/tile_bg.jpg);
	background-position: -16px top;
}
.area-head {
	text-align: center;
}
.area-head > .inner {
	display: inline-block;
	border-block: 1px solid var(--font-color04);
	padding: 1.5% 2%;
	color: var(--font-color04);
	font-size: var(--min27max40);
	line-height: 1;
	text-align: center;
	letter-spacing: 0.01em;
}
.title-small.-benefit {
	font-size: var(--min25max35);
}

.cv-area {
	margin-top: var(--min20max30);
  padding-bottom: 0;
}
.block-grid.-cv {
	background: #fff;
}
.cv-item {
	padding: 5% 1.7%;
	max-width: 480px;
	margin: 0 auto;
}
.js-item-sales .item-summary .info .cart {
	width: 99%;
	max-width: 380px;
	margin: var(--min8max14) auto 0;
}
.js-item-sales:where(:not(.-cart6, .every-cart16, .-rakutoku)) .item-summary .info .cart .add-to-cart fieldset .button:not(.edit) {
	filter: none;
	box-shadow: 0 6px 0 var(--shadow1-cv);
	border-radius: var(--min8max14);
	padding-block: 16px 10px;
	transition: all .7s;
	margin: 0;
	color: initial;
}
.js-item-sales.-first .item-summary .info .cart .add-to-cart fieldset .button {
	background-color: var(--green-cv);
	box-shadow: 0 6px 0 var(--shadow2-cv);
}
.js-item-sales .item-summary .info .cart .add-to-cart fieldset .button.edit.button-gourmet {
	box-shadow: 0 6px 0 var(--shadow1-cv);
	transition: all .7s;
}
.js-item-sales .item-summary .info .cart .add-to-cart fieldset .button.edit.button-gourmet:hover {
	transition: all .7s;
	box-shadow: 0 2px 0 var(--shadow1-cv);
	transform: translateY(6px);
}
.js-item-sales .item-summary .info .cart .add-to-cart fieldset .button.edit {
  padding-block: 10px;
}
.js-item-sales .item-summary .info .cart .add-to-cart fieldset .button::before {
  display: none;
}
.js-item-sales .item-summary .info .cart .add-to-cart fieldset .button:hover {
	transition: all .7s;
	box-shadow: 0 2px 0 var(--shadow1-cv);
	transform: translateY(6px);
}
.js-item-sales.-first .item-summary .info .cart .add-to-cart fieldset .button:hover {
	box-shadow: 0 2px 0 var(--shadow2-cv);
}
.js-item-sales .item-summary .info .cart .add-to-cart fieldset .button[data-terms=""] > span {
	background: none;
	padding: 0;
	margin: 0;
	display: grid;
	grid-template-columns: auto 0 1fr;
	column-gap: 3px;
	align-items: center;
	font-size: 0;
	color: #242424;
}
.js-item-sales .item-summary .info .cart .add-to-cart fieldset .button[data-terms=""].edit > span {
	grid-template-columns: auto 1fr;
}
.js-item-sales .item-summary .info .cart .add-to-cart fieldset .button.edit > span {
  font-size: var(--min20max24);
  color: #8d5f1c;
}
.js-item-sales .item-summary .info .cart .add-to-cart fieldset .button.edit > .btn-txt-sm {
  font-size: var(--min15max20);
}
.js-item-sales .item-summary .info .cart .add-to-cart .button[data-terms=""] > span::before {
	content: "";
	display: block;
	width: 30px;
	aspect-ratio: 17 / 15;
	background: url(/assets/img/icon_reserve-renewal.png) no-repeat;
	background-size: contain;
}
.js-item-sales .item-summary .info .cart .add-to-cart .button[data-terms=""]:not(.edit) > span::after {
	content: "毎月お届けを申し込む";
	font-size: var(--min16max24);
	line-height: 1;
	letter-spacing: 0;
}
.js-item-sales.-second .item-summary .info .cart .add-to-cart .button[data-terms=""]:not(.edit) > span::after {
	content: "隔月お届けを申し込む";
}
.js-item-sales .item-summary .info .cart .add-to-cart .button:disabled[data-terms=""] > span::after,
.js-item-sales.-second .item-summary .info .cart .add-to-cart .button:disabled[data-terms=""] > span::after {
	content: "申し込み済み";
}
.js-item-sales .item-summary .info .cart .add-to-cart fieldset .button.edit > .btn-txt::before {
  height: 30px;
  background: #8d5f1c;
}
.js-item-sales .item-summary .info .cart .add-to-cart fieldset .button.edit > .btn-txt-sm::before {
  display: none;
}
.cv-list {
	display: block;
	width: calc(100% - var(--min25max100));
	max-width: 695px;
	margin: var(--min20max30) auto 0;
	padding-bottom: var(--min38max70);
	color: #333;
	font-size: var(--min9max13);
	line-height: 1.7;
	font-weight: bold;
}
.cv-list.-first {
	padding-bottom: 0;
}
.js-item-sales .item-summary .info .cart::after {
  content: "お休み、途中解約もOK";
  display: block;
  font-size: 17px;
  color: initial;
  font-weight: bold;
  margin-top: 15px;
}

.contents-area:has( > .lead-area) {
	padding-block: 0;
}
.main-area {
	background: var(--bathTop-bg);
}
.lead-area.-bath {
	width: calc(100% + 2 * var(--min10max20));
	transform: translateX(calc(-1 * var(--min10max20)));
	padding-block: var(--min25max40) var(--min10max20);
	color: var(--font-color01);
	font-size: var(--min23max27);
	background: var(--bathTop-bg);
}
.lead-area.-bath > .text {
	line-height: 1.75;
	color: #fff;
}

.point-area {
	position: relative;
	color: var(--font-color01);
	padding-block: var(--min50max100) var(--min30max70);
}
.point-area::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	width: 100%;
	height: var(--min30max50);
	background: linear-gradient(
		to bottom,
		#4ab97c 0%,
		rgba(74, 185, 124, 0.75) 30%,
		rgba(74, 185, 124, 0.35) 65%,
		rgba(74, 185, 124, 0) 100%
	);
}
.point-text {
	max-width: 785px;
	margin: var(--min20max30) auto 0;
	display: grid;
	grid-template-columns: var(--min30max50) auto;
	gap: 1.3%;
	align-items: center;
	line-height: 1.3;
	font-size: var(--min20max28);
}
.point-text:nth-of-type(1) {
	margin-top: var(--min30max40);
}
.point-text::before {
	content: "";
	display: block;
	background: url(/external/category/image/2026/bathsalts/check_icon.png);
	background-repeat: no-repeat;
	background-size: contain;
	aspect-ratio: 52 / 48;
}
.point-mark {
	background: linear-gradient(0deg, transparent 0.2em, #f4c3b4 0.3em, #f4c3b4 0.5em, transparent 0.2em);
}

.benefit-area {
	margin-top: var(--min30max50);
}
.block-grid.-benefit {
	gap: 20px;
	margin-top: var(--min25max35);
}
.block-grid.-benefit.-reverse > .image {
	order: 2;
}
.benefit-textwrap {
	color: var(--font-color01);
}
.benefit-textwrap > .title {
	font-size: var(--min22max30);
}
.benefit-textwrap > .text {
	margin-top: var(--min10max15);
	font-size: var(--min17max20);
	line-height: 1.5;
}
.benefit-small {
	font-size: var(--min14max16);
}

.block-section {
	margin-top: var(--min30max50);
	padding-block: var(--min30max50);
}
.block-section.block-section--deli .block-grid.-col2.-deli {
	column-gap: 3%;
	row-gap: var(--min15max20);
	margin-top: var(--min25max35);
}
.block-section.block-section--deli .card {
	background-color: #fff;
	border: solid 1px #bcbcbc;
}
.block-section.block-section--deli .card .name {
	padding: 4% 4.5% 1.5%;
	background-color: #c8ebd7;
	color: var(--font-color02);
	font-size: var(--min22max31);
	font-weight: bold;
	line-height: 1.25;
}
.name-small {
	display: block;
	line-height: 1.5;
	font-size: var(--min18max23);
}
.block-section.block-section--deli .card .specwrap {
	padding: 4% 4.5%;
}
.block-section.block-section--deli .card .specwrap .date {
	color: var(--font-color02);
	font-size: var(--min14max18);
	font-weight: bold;
}
.block-section.block-section--deli .card .specwrap .amount {
	font-size: var(--min14max16);
}
.block-section.block-section--deli .card .specwrap .price {
	font-size: var(--min14max16);
	font-weight: bold;
}
.block-section.block-section--deli .card .detailwrap {
	padding: 4% 4.5%;
	font-size: 0.875rem;
	line-height: 1.5;
}
.block-section.block-section--deli .card .detailwrap .wrap-grid {
	display: grid;
	gap: 4%;
	grid-template-columns: 34% 62%;
}
.block-section.block-section--deli .card .detailwrap p + p, .block-section.block-section--deli .card .detailwrap div + p, .block-section.block-section--deli .card .detailwrap p + div {
	margin-top: 2.5%;
}
.deli-note {
	margin-top: var(--min15max20);
	font-size: var(--min10max13);
}
.deli-num1,
.deli-num2 {
	display: block;
  padding: 1.2% 2% .5%;
	border-radius: 3px;
	color: #fff;
	font-size: var(--min14max16);
	text-align: center;
}
.deli-num1 {
	background: #769850;
}
.deli-num2 {
	background: #b2a54d;
}
.deli-num2:nth-of-type(n + 2) {
	margin-top: 2%;
}
.deli-num1 > .month,
.deli-num2 > .month {
	font-weight: bold;
}

.vendor-area {
	margin-top: 0;
	position: relative;
}
.area-head.-vendor {
	margin-top: var(--min20max30);
	color: var(--font-color03);
}
.area-head.-vendor > .sub {
	margin-bottom: 0;
}
.block-grid.-col2.-vendor {
	grid-template-columns: 32.9% auto;
	color: var(--font-color03);
}
.vendor-area > .text {
	margin-top: var(--min15max20);
	font-size: var(--min17max20);
	color: var(--font-color03);
}
.vendor-image {
	filter: none;
}
.vendor-image.-vendor > .image {
	filter: drop-shadow(4px 5px 0px var(--vendor-shadow));
}
.vendor_name {
	padding: 15px 15px 0;
	font-size: var(--min12max18);
}
.vendor-textwrap {
	padding-inline: 0;
}
.vendor-textwrap > .text .small {
	font-size: 80%;
}

.guide-sec > .body {
	padding-bottom: var(--min20max60);
}
.inner.-arrowDL:last-child {
	display: none;
}

@media (max-width: 480px) {
	.block-grid.-benefit.-reverse > .image {
		order: 1;
	}
	.block-grid.-benefit.-reverse > .benefit-textwrap {
		order: 2;
	}
	.block-grid.-col2.-vendor {
		grid-template-columns: 1fr;
	}
	.vendor-image.-vendor {
		display: grid;
		grid-template-columns: 43.5% auto;
		align-items: center;
	}
}