/* ------------------------------------------------------------
   lp.css — ランディングページ専用（/dinner/ ほか）

   方針
     ・トップと同じ「森と余白」のまま、夜の時間帯に寄せた濃度で組む
     ・派手さではなく「決めるための情報が迷わず並んでいる」ことで転換させる
     ・LP でしか使わないクラスはすべて .lp- 接頭辞。main.css には触らない
     ・読み込みは enqueue.php で LP のときだけ（melimelo_lp_slugs()）

   ★見出しの色は必ず明示する。要素セレクタや別コンポーネントの指定に
     継承が負けて「濃色の上に黒い見出し」になる事故を防ぐため。
   ------------------------------------------------------------ */

/* ============ ヒーロー ============ */
.lp-hero {
	position: relative;
	padding-top: calc(var(--header-h) + 44px);
	padding-bottom: 52px;
	background:
		radial-gradient(120% 90% at 80% 0%, rgba(43, 61, 47, .95) 0%, rgba(22, 32, 26, 0) 60%),
		linear-gradient(170deg, #1a251d 0%, #16201a 55%, #131b16 100%);
	color: #fff;
	overflow: hidden;
}

.lp-hero__inner {
	position: relative;
	display: grid;
	gap: var(--sp-7);
}

.lp-hero__en {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	font-family: var(--font-display);
	font-size: 12px;
	letter-spacing: .3em;
	text-transform: uppercase;
	color: var(--moss);
}

.lp-hero__en::before {
	content: "";
	width: 34px;
	height: 1px;
	background: var(--moss);
	opacity: .8;
}

.lp-hero__h1 {
	margin-top: 20px;
	font-family: var(--font-serif);
	font-weight: 300;
	font-size: 27px;
	line-height: 1.85;
	letter-spacing: .06em;
	color: #fff;
}

.lp-hero__lead {
	margin-top: var(--sp-5);
	max-width: 34em;
	font-size: 14px;
	line-height: 2.15;
	color: rgba(255, 255, 255, .76);
}

.lp-hero__facts {
	margin-top: var(--sp-6);
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1px;
	background: rgba(255, 255, 255, .14);
	border: 1px solid rgba(255, 255, 255, .14);
}

.lp-hero__facts li {
	background: rgba(19, 27, 22, .72);
	padding: 14px 14px 15px;
	display: grid;
	gap: 5px;
}

.lp-hero__facts b {
	font-family: var(--font-display);
	font-size: 10.5px;
	font-weight: 400;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--moss);
}

.lp-hero__facts span {
	font-size: 12.5px;
	line-height: 1.7;
	letter-spacing: .03em;
	color: rgba(255, 255, 255, .9);
}

.lp-hero__actions {
	margin-top: var(--sp-6);
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.lp-hero__actions .btn--ghost {
	color: #fff;
	border-color: rgba(255, 255, 255, .55);
}

.lp-hero__actions .btn--ghost:hover {
	background: #fff;
	color: var(--forest-900);
	border-color: #fff;
}

.lp-hero__media {
	position: relative;
	align-self: center;
}

.lp-hero__media img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

/* ★差し込み写真は上の「.lp-hero__media img」に width:100% を取られるため、
   同じ強さ以上のセレクタで幅を指定し直す（指定が負けると全面に広がる）。 */
.lp-hero__media img.lp-hero__inset { display: none; }

@media (min-width: 768px) {
	.lp-hero { padding-top: calc(var(--header-h) + 64px); padding-bottom: 72px; }
	.lp-hero__h1 { font-size: 34px; }

	.lp-hero__media img.lp-hero__inset {
		display: block;
		position: absolute;
		right: -18px;
		bottom: -26px;
		width: 168px;
		aspect-ratio: 1 / 1;
		object-fit: cover;
		border: 7px solid #16201a;
	}
}

@media (min-width: 1024px) {
	.lp-hero { padding-top: calc(var(--header-h) + 84px); padding-bottom: 96px; }
	.lp-hero__inner { grid-template-columns: 1fr .88fr; gap: var(--sp-9); align-items: center; }
	.lp-hero__h1 { font-size: 40px; }
	.lp-hero__media img { aspect-ratio: 5 / 4; }
	.lp-hero__media img.lp-hero__inset { width: 200px; right: -28px; bottom: -34px; }
}

/* ============ コース2枚 ============ */
.lp-price {
	display: grid;
	gap: var(--sp-6);
}

.lp-price__card {
	position: relative;
	background: var(--white);
	border: 1px solid var(--line);
	padding: 34px 22px 26px;
	display: flex;
	flex-direction: column;
}

.lp-price__card--full {
	border-color: rgba(152, 194, 19, .55);
	box-shadow: var(--shadow);
}

.lp-price__card--full::before {
	content: "";
	position: absolute;
	top: -1px;
	left: -1px;
	right: -1px;
	height: 3px;
	background: var(--moss);
}

.lp-price__badge {
	position: absolute;
	top: -13px;
	left: 20px;
	background: var(--forest-800);
	color: #fff;
	font-size: 11.5px;
	letter-spacing: .04em;
	padding: 5px 14px;
}

.lp-price__card--full .lp-price__badge {
	background: var(--moss);
	color: #1b2410;
}

.lp-price__name {
	font-family: var(--font-serif);
	font-size: 18px;
	font-weight: 400;
	line-height: 1.8;
	letter-spacing: .04em;
	color: var(--ink);
}

.lp-price__yen {
	margin-top: 10px;
	font-family: var(--font-display);
	font-size: 42px;
	line-height: 1.2;
	letter-spacing: .02em;
	color: var(--ink);
}

.lp-price__yen small {
	margin-left: 8px;
	font-family: var(--font-sans);
	font-size: 12px;
	letter-spacing: .08em;
	color: var(--ink-faint);
}

.lp-price__note {
	margin-top: 12px;
	padding-bottom: 18px;
	border-bottom: 1px solid var(--line);
	font-size: 13px;
	line-height: 2;
	color: var(--moss-deep);
}

.lp-price__items {
	margin-top: 18px;
	margin-bottom: var(--sp-6);
	display: grid;
	gap: 7px;
}

.lp-price__items li {
	position: relative;
	padding-left: 18px;
	font-size: 13.5px;
	line-height: 1.9;
	color: var(--ink-soft);
}

.lp-price__items li::before {
	content: "";
	position: absolute;
	left: 0;
	top: .95em;
	width: 9px;
	height: 1px;
	background: var(--moss-deep);
}

/* 12,000円のコースだけに出る食材の説明。カードの中で決め手になるので面を持たせる。 */
.lp-price__grade {
	margin-bottom: var(--sp-6);
	background: var(--moss-pale);
	border-left: 2px solid var(--moss);
	padding: 13px 15px;
	font-size: 12.5px;
	line-height: 1.95;
	color: var(--ink);
}

.lp-price__grade b {
	display: block;
	margin-bottom: 4px;
	font-size: 11.5px;
	font-weight: 500;
	letter-spacing: .08em;
	color: var(--moss-deep);
}

.lp-price__card .btn { margin-top: auto; }

.lp-compare {
	margin-top: var(--sp-6);
	background: var(--white);
	border-left: 3px solid var(--moss);
	padding: 24px 22px;
}

.lp-compare__title {
	font-family: var(--font-serif);
	font-size: 16px;
	letter-spacing: .06em;
	color: var(--ink);
}

.lp-compare__text {
	margin-top: 12px;
	font-size: 13.5px;
	line-height: 2.15;
	color: var(--ink-soft);
}

.lp-compare__text strong { color: var(--ink); font-weight: 500; }
.lp-compare__text small { display: inline-block; margin-top: 10px; font-size: 12px; color: var(--ink-faint); }
.lp-compare__text + .lp-compare__list { margin-top: 18px; }

/* 食材の差を1行ずつ突き合わせる表。ここがこのLPの説得の中心。 */
.lp-compare__list {
	margin-top: 18px;
	border-top: 1px solid var(--line);
}

.lp-compare__list > div {
	display: grid;
	gap: 4px;
	padding: 14px 0;
	border-bottom: 1px solid var(--line);
}

.lp-compare__list dt {
	font-family: var(--font-serif);
	font-size: 14.5px;
	letter-spacing: .06em;
	color: var(--moss-deep);
}

.lp-compare__list dd {
	font-size: 13.5px;
	line-height: 2.1;
	color: var(--ink-soft);
}

.lp-compare__list dd strong { color: var(--ink); font-weight: 500; }

.lp-compare__list + .lp-compare__text { margin-top: 18px; }

@media (min-width: 768px) {
	.lp-compare__list > div { grid-template-columns: 8em 1fr; gap: 20px; align-items: baseline; padding: 16px 0; }
}

.lp-rules {
	margin-top: var(--sp-6);
	font-size: 12.5px;
	line-height: 1.95;
	color: var(--ink-faint);
}

.lp-rules li { padding-left: 1.2em; text-indent: -1.2em; }
.lp-rules li + li { margin-top: 6px; }
.lp-rules li::before { content: "・"; color: var(--moss-deep); }

@media (min-width: 768px) {
	.lp-price { grid-template-columns: repeat(2, 1fr); gap: var(--sp-5); }
	.lp-price__card { padding: 38px 30px 30px; }
	.lp-compare { padding: 30px 34px; }
}

/* ============ コースの流れ ============ */
.lp-flow {
	display: grid;
	gap: 0;
	border-top: 1px solid var(--line);
}

.lp-flow__item {
	display: flex;
	gap: 18px;
	align-items: flex-start;
	padding: 20px 4px;
	border-bottom: 1px solid var(--line);
}

.lp-flow__no {
	flex: none;
	font-family: var(--font-display);
	font-size: 19px;
	line-height: 1.5;
	letter-spacing: .06em;
	color: var(--moss-deep);
}

.lp-flow__name {
	font-family: var(--font-serif);
	font-size: 16.5px;
	font-weight: 400;
	line-height: 1.7;
	letter-spacing: .05em;
	color: var(--ink);
}

.lp-flow__text {
	margin-top: 7px;
	font-size: 13.5px;
	line-height: 2;
	color: var(--ink-soft);
}

.lp-flow__note {
	margin-top: var(--sp-6);
	font-size: 12.5px;
	line-height: 2;
	color: var(--ink-faint);
}

@media (min-width: 768px) {
	.lp-flow {
		grid-template-columns: repeat(2, 1fr);
		column-gap: var(--sp-8);
	}
	.lp-flow__item { padding: 22px 4px; }
}

/* ============ 夜だけのこと（濃色セクション内） ============ */
.lp-trio {
	display: grid;
	gap: var(--sp-7);
}

.lp-trio__media {
	overflow: hidden;
	margin-bottom: 20px;
}

.lp-trio__media img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	transition: transform 1s var(--ease);
}

.lp-trio__item:hover .lp-trio__media img { transform: scale(1.05); }

.lp-trio__no {
	font-family: var(--font-display);
	font-size: 13px;
	letter-spacing: .22em;
	color: var(--moss);
}

.lp-trio__name {
	margin-top: 8px;
	font-family: var(--font-serif);
	font-size: 19px;
	font-weight: 400;
	line-height: 1.75;
	letter-spacing: .05em;
	color: #fff;
}

.lp-trio__text {
	margin-top: 12px;
	font-size: 13.5px;
	line-height: 2.1;
	color: rgba(255, 255, 255, .74);
}

@media (min-width: 768px) {
	.lp-trio { grid-template-columns: repeat(3, 1fr); gap: var(--sp-6); }
}

/* ============ 予約の入口 ============ */
.lp-reserve {
	display: grid;
	gap: 12px;
}

.lp-reserve__card {
	display: grid;
	gap: 6px;
	background: var(--white);
	border: 1px solid var(--line);
	padding: 22px 24px;
	transition: border-color .25s var(--ease), transform .25s var(--ease);
}

.lp-reserve__card:hover { border-color: var(--moss); transform: translateY(-2px); }

.lp-reserve__card--main {
	background: var(--forest-800);
	border-color: var(--forest-800);
}

.lp-reserve__name {
	font-family: var(--font-serif);
	font-size: 16px;
	letter-spacing: .05em;
	color: var(--ink);
}

.lp-reserve__desc {
	font-size: 12.5px;
	line-height: 1.9;
	color: var(--ink-faint);
}

.lp-reserve__go {
	margin-top: 6px;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 12.5px;
	letter-spacing: .08em;
	color: var(--moss-deep);
}

.lp-reserve__card--main .lp-reserve__name { color: #fff; }
.lp-reserve__card--main .lp-reserve__desc { color: rgba(255, 255, 255, .68); }
.lp-reserve__card--main .lp-reserve__go { color: var(--moss); }

@media (min-width: 768px) {
	/* ★幅を不均等にすると「ポケットコンシェルジュ」が2行に割れる。等幅にして収める。 */
	.lp-reserve { grid-template-columns: repeat(3, 1fr); gap: 14px; align-items: stretch; }
	.lp-reserve__card { padding: 26px 22px 24px; align-content: start; }
	.lp-reserve__name { font-size: 15px; letter-spacing: .02em; }
}