@charset "UTF-8";

/* --------------------------------------------------------------------------
   メインビジュアル（商品名ロゴ・下端の波形ごと画像）
   -------------------------------------------------------------------------- */
.p-pmv__ttl {
	position: relative;
}

.p-pmv img {
	width: 100%;
}

.p-pmv__name {
	position: absolute;
	left: 50%;
	top: 65%;
	transform: translate(-50%, -50%);
	color: var(--c-navy);
	font-family: var(--ff-mincho);
	font-size: 5.4rem;
	line-height: 1.4;
	letter-spacing: .1em;
	white-space: nowrap;
}

@media (max-width: 959px) {
	.p-pmv__name {
		font-size: 3rem;
	}
}

/* --------------------------------------------------------------------------
   リード（マーク / 見出し / 本文 / 利用シーン）
   -------------------------------------------------------------------------- */
.p-plead {
	padding: 100px 20px var(--pb, 0);
	text-align: center;
}

.p-plead--nowave {
	padding-bottom: 40px;
}

.p-plead__mark img {
	width: auto;
	height: var(--mark-h, 105px);
}

.p-plead__mark + .c-lead {
	margin-top: 26px;
}

.p-plead .c-lead {
	--dot-width: var(--line-w, 454px);
}

.p-plead__text {
	margin-top: 30px;
	font-size: 1.6rem;
	line-height: 2;
}

.p-plead__scenes {
	display: flex;
	justify-content: center;
	gap: 30px;
	margin-top: 29px;
}

.p-plead__scene {
	display: flex;
	align-items: center;
	width: 379px;
	height: 184px;
	padding: 0 17px;
	border-radius: 24px;
	background: var(--scene-bg, #f7f2e0);
}

.p-plead__scene img {
	flex: 0 0 auto;
	width: 150px;
	height: 150px;
	border: 1px solid #fff;
	border-radius: 50%;
	object-fit: cover;
}

.p-plead__scene-body {
	flex: 1 1 auto;
	padding-left: 13px;
}

.p-plead__scene-num {
	display: flex;
	flex-direction: column;
	align-items: center;
	color: var(--c-pink);
	line-height: 1;
}

.p-plead__scene-num .en {
	font-size: 1.2rem;
	letter-spacing: .1em;
	text-transform: uppercase;
}

.p-plead__scene-num .num {
	margin-top: 4px;
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	font-family: var(--ff-mincho);
	font-size: 3.2rem;
}

.p-plead__scene-num .num::before,
.p-plead__scene-num .num::after {
	content: "";
	flex: 1 1 auto;
	height: 2px;
	background: radial-gradient(circle, #fff 1px, transparent 1.2px) left center / 4px 2px repeat-x;
}

.p-plead__scene-text {
	margin-top: 16px;
	font-size: 1.5rem;
	line-height: 1.5;
}

@media (max-width: 959px) {
	.p-plead {
		padding: 37px 15px var(--pb-sp, 0);
	}

	.p-plead--nowave {
		padding-bottom: 32px;
	}

	.p-plead__mark img {
		height: var(--mark-h-sp, 100px);
	}

	.p-plead__mark + .c-lead {
		margin-top: 22px;
	}

	.p-plead .c-lead {
		--dot-width: min(calc(100% - 15px), 640px);
	}

	.p-plead__text {
		max-width: 640px;
		margin: 17px auto 0;
		text-align: left;
		line-height: 1.75;
	}

	.p-plead__scenes {
		gap: 9px;
		margin-top: 32px;
	}

	.p-plead__scene {
		flex-direction: column;
		width: calc(50% - 4.5px);
		max-width: 240px;
		height: auto;
		margin-top: 47px;
		padding: 0 10px 18px;
		border-radius: 12px;
		background: var(--scene-bg-sp, var(--scene-bg, #f7f2e0));
	}

	.p-plead__scene img {
		width: 150px;
		max-width: 100%;
		height: auto;
		aspect-ratio: 1;
		margin-top: -47px;
	}

	.p-plead__scene-body {
		width: 100%;
		padding: 9px 0 0;
	}

	.p-plead__scene-num .en {
		gap: 8px;
		font-size: 1.1rem;
	}

	.p-plead__scene-num .num {
		margin-top: 3px;
		font-size: 2.7rem;
	}

	.p-plead__scene-text {
		margin-top: 10px;
		font-size: 1.5rem;
	}
}

@media (min-width: 960px) and (max-width: 1100px) {
	.p-plead__text br {
		display: none;
	}
}

/* ------------
   味説明
   ------------ */
.p-flavor {
	overflow: hidden;
}

.p-flavor__stage {
	position: relative;
	width: max(100%, 1300px);
	left: 50%;
	transform: translateX(-50%);
}

.p-flavor__stage > picture img {
	width: 100%;
}

.p-flavor__item {
	position: absolute;
	left: calc(var(--x) / var(--w) * 100%);
	top: calc(var(--y) / var(--h) * 100%);
	width: max-content;
	transform: translateX(-50%);
	text-align: center;
}

.p-flavor__name {
	width: var(--name-w, 184px);
	margin: 0 auto;
	background: var(--flavor-color, var(--c-purple));
	color: #fff;
	font-family: var(--ff-mincho);
	font-size: 1.8rem;
	line-height: 32px;
}

.p-flavor__text {
	margin-top: 6px;
	font-size: 1.5rem;
	line-height: 25px;
}

@media (max-width: 959px) {
	.p-flavor__stage {
		width: 100%;
	}

	.p-flavor__item {
		left: calc(var(--sx) / var(--sw) * 100%);
		top: calc(var(--sy) / var(--sh) * 100%);
		width: var(--sbw);
	}

	.p-flavor__name {
		width: var(--name-w-sp, 120px);
		font-size: 1.5rem;
		line-height: 28px;
	}

	.p-flavor__text {
		margin-top: 6px;
		font-size: 1.4rem;
		line-height: 19px;
	}
}

@media (min-width: 600px) and (max-width: 959px) {
	.p-flavor__item {
		width: calc(var(--sbw) * 1.4);
	}

	.p-flavor__name {
		width: calc(var(--name-w-sp, 120px) * 1.4);
		font-size: 1.8rem;
		line-height: 36px;
	}

	.p-flavor__text {
		font-size: 1.5rem;
		line-height: 24px;
	}
}

/* --------------
   さくころ
   -------------- */
.p-chara {
	--overlap: 85px;
	position: relative;
	margin-top: calc(var(--overlap) * -1);
	padding: 96px 20px 0;
	background: linear-gradient(transparent var(--overlap), var(--c-cream) var(--overlap));
}

.p-chara__box {
	position: relative;
	max-width: 780px;
	margin: 0 auto;
	padding: 82px 56px 43px;
	border-radius: 20px;
	background: #ea764b url("/rakumidou/libs/img/product/sakukoro/v3/bg_chara-box_desk.jpg") no-repeat center / cover;
	color: #fff;
	font-size: 1.8rem;
	font-weight: 500;
	line-height: 2;
}

.p-chara__img {
	position: absolute;
	top: -96px;
	left: 306px;
	width: 135px;
}

@media (max-width: 959px) {
	.p-chara {
		--overlap: 32px;
		padding: 68px 15px 0;
	}

	.p-chara__box {
		max-width: 560px;
		padding: 64px 22px 30px 30px;
		border-radius: 10px;
		background-image: url("/rakumidou/libs/img/product/sakukoro/v3/bg_chara-box_sp.jpg");
		font-size: 1.6rem;
	}

	.p-chara__img {
		top: -68px;
		left: calc(216 / 690 * 100%);
		width: 101px;
	}
}

@media (min-width: 560px) and (max-width: 959px) {
	.p-chara__img {
		left: 50%;
		transform: translateX(-50%);
	}
}

/* --------------------------------------------------------------------------
   商品一覧
   -------------------------------------------------------------------------- */
.p-products {
	padding: max(0px, var(--pt, 96px)) 20px 100px;
	background: var(--c-cream);
}

.p-products--wave {
	position: relative;
}

.p-products--wave::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 61px;
	background: url("/rakumidou/libs/img/common/v3/bg_wave5_desk.svg") no-repeat center / 100% 100%;
}

.p-products__list {
	max-width: 960px;
	margin: 99px auto 0;
}

.p-item {
	display: grid;
	grid-template-columns: 410px 492px;
	grid-template-rows: auto 1fr;
	column-gap: 58px;
	padding: 90px 0 60px;
}

.p-item:first-child {
	padding-top: 0;
}

.p-item,
.p-products__note {
	background: radial-gradient(circle, #524440 .5px, transparent .8px) left bottom / 3px 1px repeat-x;
}

.p-item__head {
	grid-column: 2;
}

.p-item__img {
	grid-row: 1 / 3;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	align-self: start;
	min-height: var(--img-h, 336px);
}
@media (min-width: 960px) {
.p-products--wave .p-item__img {
	padding-top: 36px;
}
}

.p-item__img img {
	border-radius: 16px;
	width: calc(var(--iw) * 1px);
	max-width: 100%;
}

.p-item__period {
	margin-top: 12px;
	color: var(--c-ink-sub);
	font-size: 1.4rem;
	line-height: 1.5;
	text-align: center;
}

.p-item__name {
	color: var(--c-navy);
	font-family: var(--ff-mincho);
	font-size: 2.8rem;
	line-height: 1.4;
	letter-spacing: .09em;
}

.p-item__price {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0 6px;
	margin-top: 9px;
	font-weight: 500;
	line-height: 32px;
}

.p-item__price .in {
	font-size: 2.2rem;
}

.p-item__price .ex {
	font-size: 1.6rem;
}

.p-item__desc {
	margin-top: 10px;
	font-size: 1.5rem;
	line-height: 1.75;
}

.p-item__contents {
	display: flex;
	gap: 44px;
	margin-top: 22px;
	font-size: 1.5rem;
	line-height: 30px;
}

.p-item__contents ul {
	width: 224px;
}

.p-item__contents li {
	position: relative;
	display: flex;
	justify-content: space-between;
	gap: 8px;
	padding-left: 21px;
}

.p-item__contents li::before {
	content: "・";
	position: absolute;
	left: 0;
	color: var(--c-pink);
	font-weight: 700;
}

.p-item__buy {
	position: relative;
	display: flex;
	align-items: center;
	gap: 10px;
	width: 296px;
	height: 70px;
	margin-top: 36px;
	padding-left: 27px;
	border-radius: 35px;
	background: var(--c-pink);
	color: #fff;
	font-size: 1.6rem;
	font-weight: 700;
}

.p-item__buy .c-icon {
	font-size: 2rem;
}

.p-item__buy::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 24px;
	width: 7px;
	height: 7px;
	margin-top: -4px;
	border-top: 1px solid #fff;
	border-right: 1px solid #fff;
	transform: rotate(45deg);
}

.p-item__accs {
	grid-column: 2;
	margin-top: 40px;
}

/* ボタンの無い商品 */
.p-item__head:not(:has(.p-item__buy)) + .p-item__accs {
	margin-top: 30px;
}

.p-item__acc + .p-item__acc {
	margin-top: 16px;
}

.p-item__acc summary {
	position: relative;
	display: block;
	height: 48px;
	border-radius: 8px;
	background: var(--c-yellow);
	color: var(--c-ink-sub);
	font-size: 1.6rem;
	font-weight: 700;
	line-height: 48px;
	text-align: center;
	cursor: pointer;
	list-style: none;
}

.p-item__acc summary::-webkit-details-marker {
	display: none;
}

.p-item__acc summary::before,
.p-item__acc summary::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 30px;
	width: 16px;
	height: 2px;
	margin-top: -1px;
	background: currentColor;
	transition: transform .25s;
}

.p-item__acc summary::after {
	transform: rotate(90deg);
}

.p-item__acc[open] summary {
	border-radius: 8px 8px 0 0;
}

.p-item__acc[open] summary::after {
	transform: rotate(0);
}

.p-item__acc-body {
	padding: 24px 26px 26px;
	border-radius: 0 0 8px 8px;
	background: #fff;
	color: var(--c-ink-sub);
	font-size: 1.4rem;
	line-height: 1.5;
}

.p-products__note {
	max-width: 960px;
	margin: 0 auto;
	height: 1px;
}

.p-products__shop {
	margin-top: 22px;
	font-size: 1.4rem;
	text-align: center;
}

.p-products__shop a {
	color: var(--c-pink);
	text-decoration: underline;
	text-underline-offset: 4px;
}

@media (hover: hover) {
	.p-item__acc summary:hover {
		opacity: .8;
	}
}

@media (min-width: 960px) and (max-width: 1040px) {
	.p-item {
		grid-template-columns: minmax(0, 1fr) 492px;
		column-gap: 40px;
	}
}

@media (max-width: 959px) {
	.p-products {
		padding: max(0px, var(--pt-sp, 48px)) 15px 60px;
	}

	.p-products--wave::before {
		height: 15px;
		background-image: url("/rakumidou/libs/img/common/v3/bg_wave5_sp.svg");
	}

	.p-products__list {
		max-width: 560px;
		margin-top: 80px;
	}

	.p-item {
		display: block;
		padding: 64px 0 40px;
		background-image: radial-gradient(circle, #524440 1px, transparent 1.2px);
		background-size: 4px 1px;
	}

	.p-item__img {
		min-height: 0;
	}

	.p-item__img img {
		border-radius: 8px;
		width: calc(var(--siw) * 1px);
	}

	.p-item__period {
		margin-top: 10px;
		font-size: 1.3rem;
	}

	.p-item__head {
		margin-top: 36px;
		text-align: center;
	}

	.p-item__name {
		font-size: 2.2rem;
		letter-spacing: .05em;
	}

	.p-item__price {
		justify-content: center;
		margin-top: 5px;
	}

	.p-item__price .in {
		font-size: 1.8rem;
	}

	.p-item__price .ex {
		font-size: 1.4rem;
	}

	.p-item__desc {
		margin-top: 10px;
		font-size: 1.4rem;
		text-align: left;
	}

	.p-item__contents {
		flex-direction: column;
		align-items: center;
		gap: 0;
		margin-top: 14px;
		font-size: 1.4rem;
		line-height: 26px;
		text-align: left;
	}

	.p-item__contents ul {
		width: 250px;
		max-width: 100%;
	}

	.p-item__buy {
		justify-content: center;
		width: 259px;
		max-width: 100%;
		height: 50px;
		margin: 20px auto 0;
		padding: 0 10px 0 0;
		font-size: 1.5rem;
	}

	.p-item__buy .c-icon {
		font-size: 1.8rem;
	}

	.p-item__buy::after {
		right: 20px;
		width: 6px;
		height: 6px;
		margin-top: -3px;
	}

	.p-item__accs {
		margin-top: 20px;
	}

	.p-item__acc + .p-item__acc {
		margin-top: 10px;
	}

	.p-item__acc summary {
		height: 34px;
		font-size: 1.5rem;
		line-height: 34px;
	}

	.p-item__acc summary::before,
	.p-item__acc summary::after {
		right: 18px;
		width: 12px;
	}

	.p-item__acc-body {
		padding: 16px 20px 18px;
		font-size: 1.4rem;
	}

	.p-products__note {
		max-width: 560px;
		background-image: radial-gradient(circle, #524440 1px, transparent 1.2px);
		background-size: 4px 1px;
	}

	.p-products__shop {
		margin-top: 16px;
	}
}