/*
 * ヨミの眼 — 納品後の手直し
 *
 * 納品された styles.css はそのまま残し、あとから足した調整はここに分ける
 * （テーマ本体の site.css と extras.css と同じ考え方）。
 */


/* ==========================================================================
   01. 各セクションの上下の余白
   ==========================================================================

   PC版は `main>section{padding:0!important}` で節と節が直に接しており、
   読みづらい。

   **`.section-inner` の中には足さない。** 節の高さは原画座標
   （`min-height:calc(N * var(--u))`）で決まっていて、背景の装飾は
   `.section-inner::before` が描いている。中に余白を入れると装飾と
   文字の位置関係がずれる。外側の section に足せば、装飾と文字の
   関係はそのままに、節と節のあいだだけが空く。

   足すのは背景が伸びる節だけにする。

     ・concerns / profile / flow … atmosphere-light を cover で敷いている
     ・menu … atmosphere-dark を cover
     ・reason / reservation … グラデーション
     → いずれも高さが変わっても破綻しない

   voices と oracle は背景が上端に固定（center top / 100% auto）なので、
   余白を入れると絵と文字がずれる。触らずに、その前後の flow と
   reservation を厚くして帯ごと空かせる。 */

/* 納品CSSの

     main>section:not(.voices):not(.oracle){padding:0!important}

   は詳細度 (0,2,2) ＋ !important で、`main > .concerns` (0,1,1) では
   勝てない。同じ形の :not() を並べて (0,3,2) にする。

   節ごとに値を変えたいところは、詳細度の勝負をもう一度やらずに済むよう
   カスタムプロパティで受け渡す。 */

@media (min-width: 761px) {
	main > section:not(.hero):not(.voices):not(.oracle) {
		padding-top: var(--kj-gap-top, calc(56 * var(--u))) !important;
		padding-bottom: var(--kj-gap-bottom, calc(56 * var(--u))) !important;
	}

	/* voices・oracle の帯の手前と後ろは、そのぶん厚めにとる */
	.flow {
		--kj-gap-bottom: calc(62 * var(--u));
	}

	.reservation {
		--kj-gap-top: calc(62 * var(--u));
	}

	/* 「なぜ、ヨミの鑑定は当たるのか？」と「占術メニュー」は、
	   カードが主役の節なので上下をさらに厚くとる */
	.reason,
	.menu {
		--kj-gap-top: calc(74 * var(--u));
		--kj-gap-bottom: calc(74 * var(--u));
	}
}


/* ---- スマホ ---- */

/* スマホは節ごとに padding が入っているが、やはり詰まって見える。
   左右はそのままに、上下だけ広げる。 */
@media (max-width: 760px) {
	.concerns {
		padding-top: 5cqw;
		padding-bottom: 6cqw;
	}

	.profile,
	.menu,
	.flow,
	.voices,
	.reservation {
		padding-top: 34px;
		padding-bottom: 36px;
	}

	/* 「なぜ、ヨミの鑑定は当たるのか？」の下は触らない。
	   月の絵が `background-position:center bottom` で貼られ、その上に
	   「次に進める。」を `color:#151127`（ほぼ黒）で**乗せる設計**になっている。
	   下の余白を足すと月だけが下がり、黒い文字が暗い夜空に残って読めなくなる。
	   上だけ広げ、下は納品時の 10px に戻す。 */
	.reason {
		padding-top: 34px;
		padding-bottom: 10px;
	}

	/* プロフィールは上に人物の絵が入るので、上の余白は元のまま */
	.profile {
		padding-top: 42cqw;
	}

	.oracle {
		padding-bottom: 32px;
	}
}


/* ==========================================================================
   02. 見出しの直下に余白
   ==========================================================================

   納品時は見出しのすぐ下から中身が始まっていて、読み始めの手がかりが
   弱かった。見出しと中身のあいだを空ける。 */

@media (min-width: 761px) {
	.concerns h2 {
		margin-bottom: calc(50 * var(--u));
	}

	.reason h2,
	.menu h2,
	.flow h2,
	.voices h2 {
		margin-bottom: calc(26 * var(--u));
	}

	/* 「なぜ〜」は見出しの下に説明文が1行入るので、そのぶん控えめに */
	.reason h2 {
		margin-bottom: calc(14 * var(--u));
	}

	.reason-intro {
		margin-bottom: calc(26 * var(--u));
	}
}


/* ==========================================================================
   03. 「こんな悩み」を2列にして、人物の左右を交互にする
   ==========================================================================

   納品時は4つの吹き出しと人物が1枚の絵（concerns.webp 912x160）に
   焼き込まれていて、並べ替えると絵が付いてこなかった。

   人物は支給された透過素材（girl-1〜4）に差し替える。感情の印
   （欠けたハート／はてな／モヤモヤ／ひらめき）が4つの悩みと
   順番どおりに合っている。

   吹き出しは concerns.webp から人物のない側の端だけを取り、左右の端と
   伸ばせる中央で組み直した（parts/bubble-plain.webp）。人物が入って
   いないので、4つとも同じものを使える。

   人物は吹き出しより背を高くして少しはみ出させる。中に収めると
   小さくなりすぎて、せっかくの絵が見えないため。 */

@media (min-width: 761px) {
	.concerns .section-inner {
		min-height: 0;
		padding-top: 0;
	}

	.concerns .section-inner::before {
		display: none;
	}

	.concern-grid {
		grid-template-columns: 1fr 1fr;
		gap: calc(30 * var(--u)) calc(22 * var(--u));
		margin: 0 auto;
		width: min(100%, calc(720 * var(--u)));
	}

	.concern-grid p {
		position: relative;
		display: flex;
		align-items: center;
		aspect-ratio: 480 / 150;
		background: url('parts/bubble-plain.webp') center / 100% 100% no-repeat;
		font-size: calc(14 * var(--u));
		line-height: 1.85;
		font-weight: 600;
		color: #2a2140;
	}

	.concern-grid p::before {
		content: '';
		position: absolute;
		bottom: calc(-2 * var(--u));
		width: calc(80 * var(--u));
		height: calc(134 * var(--u));
		background: bottom center / contain no-repeat;
		pointer-events: none;
	}

	/* 上段は人物が右。
	   文字を左揃えのままにすると、文字の終わりと人物のあいだが
	   120u ほど空いて、吹き出しの中がぽっかりする。右へ寄せて
	   人物の手前まで持っていき、余白は下段（人物が左）と揃える。 */
	.concern-grid p:nth-child(1),
	.concern-grid p:nth-child(2) {
		padding: 0 calc(96 * var(--u)) 0 calc(34 * var(--u));
		justify-content: flex-end;
		text-align: right;
	}

	.concern-grid p:nth-child(1)::before,
	.concern-grid p:nth-child(2)::before {
		right: calc(6 * var(--u));
	}

	/* 下段は人物が左 */
	.concern-grid p:nth-child(3),
	.concern-grid p:nth-child(4) {
		padding: 0 calc(34 * var(--u)) 0 calc(96 * var(--u));
	}

	.concern-grid p:nth-child(3)::before,
	.concern-grid p:nth-child(4)::before {
		left: calc(6 * var(--u));
	}

	.concern-grid p:nth-child(1)::before { background-image: url('parts/girl-1.webp'); }
	.concern-grid p:nth-child(2)::before { background-image: url('parts/girl-2.webp'); }
	.concern-grid p:nth-child(3)::before { background-image: url('parts/girl-3.webp'); }
	.concern-grid p:nth-child(4)::before { background-image: url('parts/girl-4.webp'); }
}


/* ==========================================================================
   04. 占術メニュー — 3つの特長をカードの下へ、3列で
   ==========================================================================

   納品時は menu.webp にカード枠3つと右端の丸3つがまとめて焼き込まれ、
   カードは 689u の左列、丸は右列、という2列組みだった。
   丸を下へ移すとカードだけが左に寄って右が空くので、カード枠は
   焼き込みをやめてCSSで描き直し、横幅いっぱいの3列にする。

   色は menu.webp から拾った実測値（内側 #0c112d、おすすめのカードだけ
   紫が混じる）。中のイラストは images/tarot-detail・star-detail が
   単体で残っているので、それを使う。

   丸アイコン（benefit-line/pdf/chat.webp）は輪まで含んだ完成画なので、
   そのまま3列に並べるだけでよい。 */

@media (min-width: 761px) {
	.menu .section-inner {
		min-height: 0;
		padding-top: 0;
	}

	.menu .section-inner::before {
		display: none;
	}

	/* 納品CSSの `margin:0 23u 0 31u` は2列組みのときの値。3列に
	   組み直したので消していたが、そうすると3枚が画面の端まで
	   広がり、少し大きく見せている3枚目が端で切れてしまう。
	   ほかの節（.reason-body / .concern-grid）と同じ幅に揃える。 */
	.menu-layout {
		display: block;
		width: min(100%, calc(760 * var(--u)));
		margin: 0 auto;
	}

	.menu-grid {
		grid-template-columns: repeat(3, 1fr);
		gap: calc(14 * var(--u));
	}

	.menu-card {
		border: 1px solid #a98a53;
		border-radius: calc(8 * var(--u));
		background: linear-gradient(140deg, #141a3a, #0c112d 60%);
		padding: calc(64 * var(--u)) calc(16 * var(--u)) calc(14 * var(--u));
		text-align: center;
	}

	/* おすすめのカードだけ紫を差す */
	.menu-card:nth-child(3) {
		background: linear-gradient(140deg, #2a1f4a, #0f1331 65%);
	}

	/* カードの絵 */
	.menu-card::before {
		content: '';
		position: absolute;
		top: calc(12 * var(--u));
		left: 50%;
		width: calc(44 * var(--u));
		height: calc(44 * var(--u));
		transform: translateX(-50%);
		background: url('images/tarot-detail.webp') center / contain no-repeat;
	}

	.menu-card:nth-child(2)::before {
		background-image: url('images/star-detail.webp');
	}

	/* 納品CSSは絵をカード左に置く前提で
	   `.menu-card h3{margin-left:calc(77 * var(--u))}` を当てている
	   （3枚目だけ 66u）。絵を上に移したので、文字が右へ 50px ずれていた。 */
	.menu-card h3,
	.menu-card .menu-description,
	.menu-card:nth-child(3) h3,
	.menu-card:nth-child(3) .menu-description {
		margin-left: 0;
	}

	/* 価格とボタンが 5px しか離れていなかった */
	.menu-card .price {
		margin-top: calc(14 * var(--u));
		margin-bottom: calc(20 * var(--u));
	}

	.menu-card h3,
	.menu-card:nth-child(3) h3 {
		font-size: calc(16 * var(--u));
		line-height: 1.6;
	}

	.menu-card .menu-description {
		font-size: calc(11.5 * var(--u));
		line-height: 1.9;
		margin-top: calc(8 * var(--u));
	}

	.menu-card .cta {
		font-size: calc(11 * var(--u));
		min-height: calc(38 * var(--u));
	}

	/* ---- 3つの特長。カードの下に3列で ---- */

	.menu-benefits {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: calc(20 * var(--u));
		margin: calc(34 * var(--u)) 0 0;
	}

	.menu-benefits li {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: calc(10 * var(--u));
		min-height: 0;
	}

	/* 焼き込み時代の絶対配置をやめる */
	.menu-benefits .benefit-icon {
		position: static;
		width: calc(52 * var(--u));
		height: calc(52 * var(--u));
		border-radius: 50%;
		mix-blend-mode: normal;
		object-fit: fill;
	}

	.menu-benefits li p {
		margin-left: 0;
		text-align: center;
		font-size: calc(11.5 * var(--u));
		line-height: 1.8;
	}
}


/* ==========================================================================
   05. 鑑定の流れ — 2列2行にして文字を大きく
   ==========================================================================

   ここも flow.webp に角丸4つが横一列で焼き込まれている。2行にすると
   絵が付いてこないので、焼き込みをやめて角丸をCSSで描く。
   丸アイコンの中身は、スマホ用に用意されている指定をそのまま使う。 */

@media (min-width: 761px) {
	.flow .section-inner {
		min-height: 0;
		padding-top: 0;
	}

	.flow .section-inner::before {
		display: none;
	}

	.flow-grid {
		grid-template-columns: 1fr 1fr;
		gap: calc(14 * var(--u));
		margin: 0;
	}

	.flow-grid li {
		background: #ffffffcc;
		border-radius: calc(18 * var(--u));
		padding: calc(14 * var(--u)) calc(18 * var(--u));
		padding-left: calc(18 * var(--u));
		gap: calc(14 * var(--u));
		font-size: calc(13.5 * var(--u));
		line-height: 1.6;
		white-space: normal;
	}

	.flow-icon {
		background: #15102c;
		border-radius: 50%;
		width: calc(40 * var(--u));
		min-width: calc(40 * var(--u));
		height: calc(40 * var(--u));
		font-size: calc(9 * var(--u));
	}

	.flow-grid li:nth-child(2) .flow-icon::after {
		content: '☰';
		font-size: calc(17 * var(--u));
	}

	.flow-grid li:nth-child(n+3) .flow-icon::after {
		content: '➤';
		font-size: calc(17 * var(--u));
	}

	.flow-grid li div > span {
		font-size: calc(12 * var(--u));
	}
}


/* ==========================================================================
   06. 「お客様の声」と「今日のお告げ」を縦に積む
   ==========================================================================

   納品時は横2列（左：お客様の声／右：お告げ）。縦積みにする。
   どちらも絵は元の幅（596u と 316u）に合わせて描かれているので、
   幅はそのままにして中央へ寄せる。伸ばすと絵が崩れるため。 */

@media (min-width: 761px) {
	/* 納品時は 鑑定の流れ=6行 / お客様の声・お告げ=7行（横並び） /
	   もう一人で悩まないで=8行。お告げを1行下ろすので、以降を
	   1つずつずらす。自動配置に任せると、行を数字で固定されている
	   「もう一人で〜」より後ろへ回り込んで順番が入れ替わった。 */
	main > .voices {
		grid-column: 2 / 4;
		grid-row: 7;
		width: min(100%, calc(870 * var(--u)));
		margin-inline: auto;
	}

	main > .oracle {
		grid-column: 2 / 4;
		grid-row: 8;
		width: calc(316 * var(--u));
		margin-inline: auto;
		padding-top: calc(28 * var(--u));
	}

	main > .reservation {
		grid-row: 9;
	}

	/* 共通の背景は 6/8 行ぶんしか敷かれていない。お告げが1行下がるので
	   そのぶん伸ばす。 */
	main::before {
		grid-row: 6 / 9;
	}
}


/* ==========================================================================
   07. 文字を大きく
   ==========================================================================

   納品時は原画（912px幅）の文字を実寸でそのまま起こしているため、
   1200px 表示だと本文が 11〜16px と小さい。読ませたい文を中心に上げる。

   「なぜ〜」のカードと「お客様の声」のカードは、枠が焼き込みの
   絵（それぞれ 133u / 89u の高さ）なので、はみ出さない範囲にとどめる。 */

@media (min-width: 761px) {
	/* お客様の声 — 11.8px と 10.5px で小さすぎた */
	.voice-grid blockquote,
	.voice-grid blockquote p {
		font-size: calc(11.8 * var(--u));
		line-height: 1.9;
	}

	.voice-grid cite {
		font-size: calc(10 * var(--u));
	}

	/* 今日のお告げ */
	.oracle p {
		font-size: calc(12 * var(--u));
	}

	/* なぜ、ヨミの鑑定は当たるのか？ */
	.reason-intro {
		font-size: calc(13.5 * var(--u));
		line-height: 1.9;
	}

	.reason-card h3 {
		font-size: calc(18 * var(--u));
	}

	.reason-card li {
		font-size: calc(13 * var(--u));
		line-height: 1.95;
	}

	/* プロフィール */
	#profile .yomi-info p,
	.mika-info p {
		font-size: calc(13 * var(--u));
		line-height: 2;
	}

	/* メニューの3つの特長 */
	.menu-benefits li p {
		font-size: calc(12.5 * var(--u));
	}

	.menu-card .menu-description {
		font-size: calc(12.5 * var(--u));
	}

	/* 鑑定の流れ */
	.flow-grid li {
		font-size: calc(14 * var(--u));
	}

	.flow-grid li div > span {
		font-size: calc(11 * var(--u));
	}

	/* 悩み */
	.concern-grid p {
		font-size: calc(14.5 * var(--u));
	}

	/* フッター */
	footer nav a {
		font-size: calc(10.5 * var(--u));
	}
}


/* ==========================================================================
   08. 「なぜ〜」を作り直す
   ==========================================================================

   ・カード枠が焼き込み（133u 固定）で、文字を大きくするとはみ出す
   ・中の絵（星盤・タロット）は暗い背景ごと切り出されていて、
     カードの上に四角い箱として浮いていた
   ・背景の装飾は、左に切れたランタン、右に縁の硬い月が
     浮いているだけで、絵として成立していなかった

   そこで焼き込みの層はやめる。背景は隣の「占術メニュー」と同じ
   atmosphere-dark（星空）を敷き、月は円の縁をぼかして切り出し直し、
   「だから、"当たる"だけじゃない。」はカードの下へ移してその上に置く。

   カードの色は実測値（枠線 #7a7182、内側 #0b102a → #141539）。
   中の絵は暗い背景ごと楕円でぼかして切り出し、**スクリーン合成**で
   暗い部分を消す（このLPが .benefit-icon で使っている手法）。 */

@media (min-width: 761px) {
	.reason {
		background: #0d0c21 url('images/atmosphere-dark.webp') center center / cover no-repeat;
	}

	.reason .section-inner::before {
		display: none;
	}

	/* 2枚のカードを並べ、その下に「だから〜」を置く */
	.reason-body {
		display: grid;
		grid-template-columns: 1fr auto 1fr;
		align-items: stretch;
		gap: calc(16 * var(--u));
		width: min(100%, calc(760 * var(--u)));
		margin: 0 auto;
	}

	.reason-card {
		position: relative;
		border: 1px solid #7a7182;
		border-radius: calc(10 * var(--u));
		background: linear-gradient(180deg, #0b102a, #0c1232 55%, #141539);
		padding: calc(20 * var(--u)) calc(20 * var(--u)) calc(20 * var(--u)) calc(122 * var(--u));
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	/* 中の絵。四角い箱に見えないよう、楕円でぼかした素材を
	   スクリーンで重ねる */
	/* 支給された透過素材。暗い背景ごと切り出した画像ではないので、
	   スクリーン合成のごまかしは要らない。 */
	.reason-card::before {
		content: '';
		position: absolute;
		left: calc(16 * var(--u));
		top: 50%;
		width: calc(94 * var(--u));
		height: calc(74 * var(--u));
		transform: translateY(-50%);
		background: center / contain no-repeat;
		background-image: url('parts/em-star.webp');
	}

	.tarot-card::before {
		background-image: url('parts/em-tarot.webp');
	}

	.reason-card h3,
	.tarot-card h3 {
		white-space: normal;
		font-size: calc(17 * var(--u));
		margin-bottom: calc(12 * var(--u));
	}

	.times {
		align-self: center;
		color: #eed197;
		text-align: center;
	}

	.times::before {
		content: '×';
		font-size: calc(22 * var(--u));
	}

	/* 「だから、"当たる"だけじゃない。次に進める。」をカードの下へ。
	   月をその後ろに敷く。 */
	/* `::before`（月）は z-index:0 の「位置指定された子孫」なので、
	   CSSの描画順では親のテキストより**後**に描かれる。つまり月が
	   文字の上に乗り、文字が薄く見えていた。ここで重なりの文脈を
	   作り、月を z-index:-1 で文字の裏へ回す。 */
	.moon-copy {
		grid-column: 1 / -1;
		position: relative;
		isolation: isolate;
		margin: calc(30 * var(--u)) 0 0;
		padding: calc(26 * var(--u)) 0 calc(10 * var(--u));
		text-align: center;
		white-space: normal;
		color: #fff0c7;
		font-size: calc(15 * var(--u));
		line-height: 1.9;
		text-shadow: 0 calc(2 * var(--u)) calc(10 * var(--u)) #0a0819cc;
	}

	/* カードは常に月より前。`.reason-card` は出現のとき透明度が
	   変わるので、そのあいだだけ重なりの文脈ができて順番が入れ替わる。
	   z-index を明示して、動いている間も後も同じ順にする。 */
	.reason-card,
	.times {
		position: relative;
		z-index: 2;
	}

	.moon-copy::before {
		content: '';
		position: absolute;
		z-index: -1;
		left: 50%;
		top: 50%;
		width: calc(360 * var(--u));
		height: calc(360 * var(--u));
		transform: translate(-50%, -52%);
		background: url('parts/moon.webp') center / contain no-repeat;
		opacity: 0.8;
		pointer-events: none;
	}

	/* 月と文字が正しい順になっても、月の明るい面に白系の文字が
	   重なる場所は読みにくい。文字の後ろにだけ、輪郭の出ない
	   暗がりを敷く（月より前・文字より後ろ）。 */
	.moon-copy::after {
		content: '';
		position: absolute;
		z-index: -1;
		left: 50%;
		top: 50%;
		width: calc(300 * var(--u));
		height: calc(150 * var(--u));
		transform: translate(-50%, -50%);
		background: radial-gradient(closest-side, #120c24e6, #120c2400 78%);
		pointer-events: none;
	}

	.moon-copy strong {
		display: block;
		margin-top: calc(6 * var(--u));
		font-size: calc(22 * var(--u));
		color: #ffffff;
	}
}


/* ==========================================================================
   09. 占術メニューの、絵の枠と「おすすめ」
   ==========================================================================

   絵（tarot-detail / star-detail）は暗い背景ごと切り出された画像なので、
   そのまま置くとカードの上に四角い箱として浮く。「なぜ〜」と同じく、
   楕円でぼかした素材をスクリーン合成に替える。

   「おすすめ」はカードの外に貼り付いた台形のタブで浮いていた。
   カード上辺にまたがる小さな金の丸帯に替える。 */

@media (min-width: 761px) {
	.menu-card::before {
		background-image: url('parts/em-moon-tarot.webp');
		mix-blend-mode: normal;
		width: calc(104 * var(--u));
		height: calc(82 * var(--u));
		top: calc(10 * var(--u));
	}

	.menu-card:nth-child(2)::before {
		background-image: url('parts/em-star-reading.webp');
	}

	.menu-card:nth-child(3)::before {
		background-image: url('parts/em-total.webp');
	}

	.menu-card {
		padding-top: calc(100 * var(--u));
		overflow: visible;
	}

	.menu-card .recommend {
		position: absolute;
		top: 0;
		left: 50%;
		transform: translate(-50%, -50%);
		padding: calc(5 * var(--u)) calc(16 * var(--u));
		border-radius: 999px;
		background: linear-gradient(135deg, #f0d79a, #c8a45d);
		color: #2a1f0a;
		font-size: calc(10 * var(--u));
		font-weight: 700;
		letter-spacing: 0.08em;
		line-height: 1.4;
		white-space: nowrap;
		box-shadow: 0 calc(2 * var(--u)) calc(10 * var(--u)) #00000059;
		/* 納品CSSは台形に切り抜く clip-path を当てている。丸帯にするので外す */
		clip-path: none;
	}

	/* ---- おすすめのカードは、色から変えて「別格」にする ----

	   前は紫のまま金の枠を足して少し拡大していたが、ほかの2枚と
	   同じ色系のまま大きさだけ違うので、気づかない人には
	   「1枚だけ崩れている」と見えてしまう。

	   そこで色そのものを変える。紫のLPの中に深いガーネット（赤）を
	   1枚だけ置き、金と合わせる。赤×金は上位プランの定番の組み
	   合わせで、ひと目で「意図してここだけ違う」と分かる。

	   拡大は transform をやめて、負のマージンで実寸を広げている。
	   scale() は 1px の枠や文字ごと引き伸ばすので、境界がにじんで
	   「崩れている」ように見える原因になっていた。 */
	.menu-card:nth-child(3) {
		border: 2px solid transparent;
		background:
			radial-gradient(120% 70% at 50% -10%, #b8426e4d, transparent 62%) padding-box,
			linear-gradient(160deg, #5a1330, #3a0b1e 55%, #230713) padding-box,
			linear-gradient(140deg, #fbeccb, #e0b06a 38%, #9a6b3a 62%, #f3dcab) border-box;
		box-shadow:
			0 0 calc(50 * var(--u)) #c8455e4d,
			0 0 calc(16 * var(--u)) #e0b06a3d,
			0 calc(10 * var(--u)) calc(30 * var(--u)) #00000080;
		/* 実寸で一回り大きくする（にじまない） */
		transform: none;
		margin: calc(-15 * var(--u)) calc(-6 * var(--u));
		padding: calc(112 * var(--u)) calc(16 * var(--u)) calc(22 * var(--u));
		z-index: 1;
	}

	/* 内側にもう一本、細い金の枠。額装に見せるための二重線 */
	.menu-card:nth-child(3)::after {
		content: '';
		position: absolute;
		inset: calc(5 * var(--u));
		border: 1px solid #e0b06a4d;
		border-radius: calc(5 * var(--u));
		pointer-events: none;
	}

	/* 絵も少し大きく、位置を下げる。素材は紫なので、後ろに
	   暖かい光を敷いて赤いカードから浮かないようにする */
	.menu-card:nth-child(3)::before {
		width: calc(116 * var(--u));
		height: calc(92 * var(--u));
		top: calc(14 * var(--u));
		background-image:
			url('parts/em-total.webp'),
			radial-gradient(closest-side, #e8a06b3d, #e8a06b00 72%);
		background-position: center, center;
		background-size: contain, 120% 120%;
		background-repeat: no-repeat, no-repeat;
	}

	/* 「おすすめ」の帯。赤いカードの上なので金を残し、
	   文字を濃いガーネットにして、カードと呼応させる */
	.menu-card:nth-child(3) .recommend {
		padding: calc(7 * var(--u)) calc(22 * var(--u));
		font-size: calc(12 * var(--u));
		letter-spacing: 0.14em;
		background: linear-gradient(180deg, #fff8e2, #f3dcab 38%, #e0b06a 62%, #b98c45);
		color: #4a0d20;
		border: 1px solid #fff4d6b3;
		box-shadow:
			0 0 calc(20 * var(--u)) #e0b06a8c,
			0 calc(3 * var(--u)) calc(10 * var(--u)) #000000a6;
	}

	.menu-card:nth-child(3) .recommend::before {
		content: '★';
		margin-right: calc(6 * var(--u));
		font-size: 0.95em;
	}

	/* ---- 文字も一回り大きく ---- */

	.menu-card:nth-child(3) h3 {
		font-size: calc(19 * var(--u));
		color: #ffe6c9;
		text-shadow: 0 0 calc(18 * var(--u)) #e0b06a66;
	}

	.menu-card:nth-child(3) .menu-description {
		font-size: calc(12.5 * var(--u));
		color: #f4e2e8;
		margin-top: calc(10 * var(--u));
	}

	/* 説明と価格のあいだに、金の細い罫を1本入れて区切る */
	.menu-card:nth-child(3) .menu-description::after {
		content: '';
		display: block;
		width: calc(120 * var(--u));
		height: calc(2 * var(--u));
		margin: calc(16 * var(--u)) auto calc(-6 * var(--u));
		background:
			linear-gradient(90deg, transparent, #f0cf94, transparent) center / 100% 1px no-repeat;
	}

	.menu-card:nth-child(3) .price {
		color: #ffd9a3;
		text-shadow: 0 0 calc(16 * var(--u)) #e8a06b80;
	}

	.menu-card:nth-child(3) .price strong {
		font-size: calc(34 * var(--u));
	}

	.menu-card:nth-child(3) .price > span {
		font-size: calc(22 * var(--u));
	}

	/* 申し込みボタンも、このカードだけ明るく厚く */
	.menu-card:nth-child(3) .cta {
		min-height: calc(46 * var(--u));
		font-size: calc(12.5 * var(--u));
		background: linear-gradient(135deg, #fff8e2 0%, #f3dcab 42%, #ebcb8c 70%, #d4a457 100%);
		border-color: #fff4d6;
		box-shadow:
			0 0 calc(24 * var(--u)) #e8a06b99,
			inset 0 1px 2px #fffff0;
		color: #3a0b1e;
		font-weight: 700;
	}

	/* ---- 3つの特長は「鑑定の流れ」と内容が重なるので出さない ---- */
	.menu-benefits {
		display: none;
	}
}


/* ==========================================================================
   10. 鑑定の流れ — 幅を詰める
   ========================================================================== */

@media (min-width: 761px) {
	.flow-grid {
		width: min(100%, calc(700 * var(--u)));
		margin-inline: auto;
	}
}


/* ==========================================================================
   11. お客様の声 — 枠からの文字あふれを直す
   ==========================================================================

   枠は voices.webp に焼き込み（89u 固定）で、文字を大きくすると
   はみ出す。枠をCSSで描き直し、中の人物は voices.webp から
   1人ずつ切り出して置く（parts/voice-1〜3.webp）。 */

@media (min-width: 761px) {
	main > .voices {
		background-image: none;
	}

	.voices::before {
		display: none;
	}

	.voice-grid {
		grid-template-columns: repeat(3, 1fr);
		gap: calc(14 * var(--u));
		margin: 0;
	}

	.voice-grid blockquote {
		position: relative;
		background: #fefefe;
		border-radius: calc(17 * var(--u));
		box-shadow: 0 calc(3 * var(--u)) calc(14 * var(--u)) #6b5c8e26;
		padding: calc(16 * var(--u)) calc(14 * var(--u)) calc(14 * var(--u)) calc(68 * var(--u));
		white-space: normal;
		min-height: calc(89 * var(--u));
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	.voice-grid blockquote::before {
		content: '';
		position: absolute;
		left: calc(6 * var(--u));
		top: 50%;
		width: calc(62 * var(--u));
		height: calc(66 * var(--u));
		transform: translateY(-50%);
		background: center / contain no-repeat;
	}

	.voice-grid blockquote:nth-child(1)::before { background-image: url('parts/voice-1.webp'); }
	.voice-grid blockquote:nth-child(2)::before { background-image: url('parts/voice-2.webp'); }
	.voice-grid blockquote:nth-child(3)::before { background-image: url('parts/voice-3.webp'); }
}


/* ==========================================================================
   12. 今日のお告げ — 下に余白がない
   ========================================================================== */

@media (min-width: 761px) {
	main > .oracle {
		padding-bottom: calc(30 * var(--u));
	}
}


/* ==========================================================================
   13. 支給素材への差し替え（鑑定の流れ・お客様の声）
   ==========================================================================

   ・鑑定の流れ … 番号と文言まで入った完成バッジを支給いただいたので、
     角丸もアイコンもCSSで描くのをやめ、バッジ1枚に置き換える。
     HTMLの文字は読み上げ用に残し、目には見えないようにする。
   ・お客様の声 … 切り抜き済みの人物に差し替える。 */

@media (min-width: 761px) {
	.flow-grid {
		grid-template-columns: repeat(4, 1fr);
		width: min(100%, calc(820 * var(--u)));
		gap: calc(16 * var(--u));
	}

	.flow-grid li {
		background: center / contain no-repeat;
		border-radius: 0;
		padding: 0;
		min-height: 0;
		height: calc(112 * var(--u));
		display: block;
		position: relative;
	}

	/* 文字はバッジの絵に入っている。読み上げには残す */
	.flow-grid li > * {
		position: absolute;
		width: 1px;
		height: 1px;
		margin: -1px;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}

	.flow-grid li:nth-child(1) { background-image: url('parts/flow-1.webp'); }
	.flow-grid li:nth-child(2) { background-image: url('parts/flow-2.webp'); }
	.flow-grid li:nth-child(3) { background-image: url('parts/flow-3.webp'); }
	.flow-grid li:nth-child(4) { background-image: url('parts/flow-4.webp'); }

	/* ---- お客様の声の人物 ---- */
	.voice-grid blockquote::before {
		left: calc(4 * var(--u));
		width: calc(60 * var(--u));
		height: calc(67 * var(--u));
	}
}


/* ==========================================================================
   14. 今日のお告げを、読める大きさの帯にする
   ==========================================================================

   納品時は右側の細い列に置く前提で、幅 316u・高さ 142u の絵を
   そのまま敷いていた。縦積みに変えたぶん窮屈で、見出しが上端に
   貼り付き、絵の下辺も直線で切れていた。

   帯を広げて余白をとり、水晶玉は支給素材（em-crystal）に差し替える。
   黒猫ミカは元の絵（316x142）からでは小さすぎて使えないので、
   いまは水晶玉だけにしている。 */

@media (min-width: 761px) {
	main > .oracle {
		width: min(100%, calc(660 * var(--u)));
		margin-inline: auto;
		padding: calc(46 * var(--u)) calc(300 * var(--u)) calc(46 * var(--u)) calc(46 * var(--u));
		border: 1px solid #6a5a90;
		border-radius: calc(18 * var(--u));
		background: linear-gradient(140deg, #2a1f50, #15102f 62%);
		box-shadow: 0 calc(8 * var(--u)) calc(28 * var(--u)) #00000059;
		overflow: hidden;
		isolation: isolate;
	}

	/* 焼き込みの絵をやめ、透過の水晶玉を右に置く */
	.oracle::before {
		display: block;
		inset: auto;
		right: calc(148 * var(--u));
		top: 50%;
		transform: translateY(-50%);
		width: calc(176 * var(--u));
		height: calc(176 * var(--u));
		z-index: 0;
		background-image: url('parts/em-crystal.webp');
		background-position: center;
		background-size: contain;
		mask-image: none;
		-webkit-mask-image: none;
	}

	.oracle h2 {
		font-size: calc(26 * var(--u));
		line-height: 1.55;
		text-align: left;
		margin-bottom: calc(12 * var(--u));
	}

	.oracle p {
		text-align: left;
		font-size: calc(13 * var(--u));
		margin: 0 0 calc(22 * var(--u));
	}

	.oracle .cta {
		min-height: calc(42 * var(--u));
		padding-inline: calc(26 * var(--u));
	}

	/* 黒猫ミカ。水晶玉の手前、右端に座らせる */
	.oracle::after {
		content: '';
		position: absolute;
		z-index: 1;
		right: calc(18 * var(--u));
		bottom: 0;
		width: calc(160 * var(--u));
		height: calc(178 * var(--u));
		background: url('parts/mika.webp') bottom center / contain no-repeat;
		pointer-events: none;
	}

	/* 水晶玉を押せる範囲を、絵に合わせ直す */
	.crystal-trigger {
		left: auto;
		right: calc(148 * var(--u));
		top: 50%;
		transform: translateY(-50%);
		width: calc(176 * var(--u));
		height: calc(176 * var(--u));
		z-index: 2;
	}

	/* ミカの帯の下にも余白を置く */
	main > .oracle {
		margin-bottom: calc(34 * var(--u));
	}
}


/* 3つの特長は「鑑定の流れ」と内容が重なるので、スマホでも出さない */
@media (max-width: 760px) {
	.menu-benefits {
		display: none;
	}
}


/* ==========================================================================
   09b. おすすめのメニュー — スマホでも同じ「赤×金」にする
   ==========================================================================

   PCだけ赤にすると、同じページなのに端末で別物になってしまう。
   スマホは横並び（左に絵、右に文字）なので拡大はせず、
   色・枠・帯・文字の大きさだけを合わせる。 */

@media (max-width: 760px) {
	.menu-card:nth-child(3) {
		border: 2px solid transparent;
		background:
			radial-gradient(120% 70% at 50% -10%, #b8426e4d, transparent 62%) padding-box,
			linear-gradient(140deg, #5a1330, #3a0b1e 58%, #230713) padding-box,
			linear-gradient(140deg, #fbeccb, #e0b06a 38%, #9a6b3a 62%, #f3dcab) border-box;
		box-shadow:
			0 0 26px #c8455e4d,
			0 6px 18px #00000073;
	}

	/* 納品CSSは3枚目にも tarot-detail（1枚目と同じ絵）を当てている。
	   おすすめだけ絵まで同じでは差が出ないので、総合鑑定の絵に替える。
	   素材が横長なので、枠も横に広げる。 */
	.menu-card:nth-child(3):before {
		left: 8px;
		width: 68px;
		height: 68px;
		background-image: url('parts/em-total.webp');
	}

	.menu-card:nth-child(3) h3 {
		font-size: 21px;
		color: #ffe6c9;
	}

	.menu-card:nth-child(3) .menu-description {
		font-size: 13px;
		color: #f4e2e8;
	}

	.menu-card:nth-child(3) .price {
		color: #ffd9a3;
	}

	.menu-card:nth-child(3) .price strong {
		font-size: 35px;
	}

	.menu-card:nth-child(3) .price > span {
		font-size: 22px;
	}

	.menu-card:nth-child(3) .recommend {
		top: -13px;
		padding: 3px 26px;
		font-size: 12px;
		letter-spacing: 0.12em;
		border-radius: 999px;
		clip-path: none;
		background: linear-gradient(180deg, #fff8e2, #f3dcab 38%, #e0b06a 62%, #b98c45);
		color: #4a0d20;
		box-shadow: 0 2px 8px #000000a6;
	}

	.menu-card:nth-child(3) .recommend::before {
		content: '★';
		margin-right: 5px;
	}

	.menu-card:nth-child(3) .cta {
		min-height: 46px;
		font-size: 14px;
		background: linear-gradient(135deg, #fff8e2 0%, #f3dcab 42%, #ebcb8c 70%, #d4a457 100%);
		border-color: #fff4d6;
		color: #3a0b1e;
		font-weight: 700;
	}
}


/* ==========================================================================
   15. ファーストビューの出しかた
   ==========================================================================

   隠す指定は html.kj-hero が付いているときだけ効かせる。このクラスは
   tweaks.js が仕込みを終えてから付けるので、JavaScript が動かない
   環境や「動きを減らす」設定では最初から全部見えている。

   ヨミの絵には触らない（最初から出したいので）。 */

.kj-hero .hero .vertical-copy .kj-ch {
	display: inline-block;
	opacity: 0;
	transform: translateY(-0.35em);
	transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.kj-hero .hero .vertical-copy .kj-ch.is-in {
	opacity: 1;
	transform: none;
}

/* ---- 見出しはバンと出して、少し揺らす ---- */

.kj-hero .hero h1 {
	opacity: 0;
}

/* 大きくぼけた状態から一気に迫ってきて、壁にぶつかって潰れ、
   そのあと揺れが小さくなりながら収まる。

   **transform は1つしか持てない**ので、寄りと揺れを別々の
   アニメーションには分けられない。1本のキーフレームに、
   寄り（0〜30%）と、ぶつかったあとの減衰（30〜100%）を並べる。
   時間の進みは linear にして、打点の位置で速さを作る。 */
.kj-hero .hero h1.is-in {
	animation: kj-slam 0.92s linear both;
	transform-origin: 50% 50%;
	will-change: transform, opacity, filter;
}

@keyframes kj-slam {
	/* ---- 迫ってくる ---- */
	0% {
		opacity: 0;
		transform: scale(3.1);
		filter: blur(10px);
	}

	14% {
		opacity: 1;
		filter: blur(4px);
	}

	/* ---- 壁にぶつかって潰れる ---- */
	30% {
		transform: scale(0.88) translate3d(0, 0.02em, 0);
		filter: blur(0);
	}

	/* ---- 余韻。跳ね返りながら小さくなっていく ---- */
	39% {
		transform: scale(1.07) translate3d(-0.055em, -0.018em, 0) rotate(-1deg);
	}

	48% {
		transform: scale(0.965) translate3d(0.042em, 0.014em, 0) rotate(0.68deg);
	}

	57% {
		transform: scale(1.028) translate3d(-0.03em, -0.009em, 0) rotate(-0.44deg);
	}

	66% {
		transform: scale(0.988) translate3d(0.02em, 0.006em, 0) rotate(0.28deg);
	}

	75% {
		transform: scale(1.011) translate3d(-0.013em, -0.004em, 0) rotate(-0.17deg);
	}

	84% {
		transform: scale(0.996) translate3d(0.008em, 0.002em, 0) rotate(0.1deg);
	}

	92% {
		transform: scale(1.003) translate3d(-0.004em, 0, 0) rotate(-0.05deg);
	}

	100% {
		opacity: 1;
		transform: scale(1) translate3d(0, 0, 0) rotate(0);
		filter: blur(0);
	}
}

/* ---- 本文・ボタン・注記は、上に動かさずに濃さだけで出す ---- */

.kj-hero .hero .hero-prose,
.kj-hero .hero .hero-cta,
.kj-hero .hero .hero-note {
	opacity: 0;
	transition: opacity 0.85s ease;
}

.kj-hero .hero .hero-prose.is-in,
.kj-hero .hero .hero-cta.is-in,
.kj-hero .hero .hero-note.is-in {
	opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
	.kj-hero .hero .vertical-copy .kj-ch,
	.kj-hero .hero h1,
	.kj-hero .hero .hero-prose,
	.kj-hero .hero .hero-cta,
	.kj-hero .hero .hero-note {
		opacity: 1 !important;
		transform: none !important;
		animation: none !important;
	}
}


/* ==========================================================================
   16. ヨミとミカの絵を、支給素材に差し替える
   ==========================================================================

   納品時は profile.webp（912x153）に2人がまとめて焼き込まれ、
   マスクで抜いて敷いていた。透過素材をいただいたので、グリッドの
   升目にそのまま置く。

   `.section-inner::before` は共通の指定で `position:absolute; inset:0`
   になっているため、升目として置くには position を戻す必要がある。 */

@media (min-width: 761px) {
	.profile .section-inner {
		grid-template-columns:
			calc(300 * var(--u)) calc(304 * var(--u))
			calc(118 * var(--u)) 1fr;
		column-gap: calc(16 * var(--u));
		align-items: center;
		min-height: calc(208 * var(--u));
		padding-top: 0;
		background-image: none;
	}

	/* 紫月ヨミ */
	.profile .section-inner::before {
		content: '';
		position: static;
		display: block;
		z-index: auto;
		inset: auto;
		grid-column: 1;
		grid-row: 1;
		align-self: end;
		width: 100%;
		height: calc(206 * var(--u));
		background: url('parts/yomi.webp') left bottom / contain no-repeat;
		mask-image: none;
		-webkit-mask-image: none;
	}

	/* 黒猫ミカ */
	.profile .section-inner::after {
		content: '';
		display: block;
		grid-column: 3;
		grid-row: 1;
		align-self: end;
		width: 100%;
		height: calc(140 * var(--u));
		background: url('parts/mika.webp') center bottom / contain no-repeat;
	}

	.yomi-info,
	.mika-info {
		grid-row: 1;
	}

	.mika-info {
		padding-top: 0;
	}
}


/* ==========================================================================
   17. スマホのプロフィールも、支給素材に差し替える
   ==========================================================================

   スマホは節そのものの背景に profile.webp を敷き、上に 42cqw の余白を
   とって絵の場所を空けていた。背景をやめて、ヨミは要素として置き、
   ミカは「黒猫 ミカ」の段落の右下に座らせる。

   PC側の `.section-inner::before` は min-width:761px の中にあるので、
   スマホぶんはここで別に作る。 */

@media (max-width: 760px) {
	.profile {
		background-image: none;
		padding-top: 18px;
	}

	.profile .section-inner::before {
		content: '';
		display: block;
		width: min(100%, 330px);
		height: 224px;
		margin: 0 auto 4px;
		background: url('parts/yomi.webp') center bottom / contain no-repeat;
	}

	.mika-info {
		position: relative;
		min-height: 96px;
		padding-right: 108px;
	}

	.mika-info::after {
		content: '';
		position: absolute;
		right: -4px;
		bottom: -6px;
		width: 104px;
		height: 116px;
		background: url('parts/mika.webp') right bottom / contain no-repeat;
		pointer-events: none;
	}

	.mika-info p {
		max-width: none;
	}
}


/* ==========================================================================
   18. 今日のお告げを、支給されたバナー1枚に置き換える
   ==========================================================================

   見出し・説明・ボタンまで描かれた完成バナーをいただいたので、
   組み立てをやめて1枚で出す。HTMLの文字は読み上げ用に残し、
   目には見えないようにする。

   押せる場所はバナーの絵に合わせて重ねる（1774x887 の実測）:
     「お告げを見る」 左10.8% 上70.9% 幅31.5% 高15.1%
     水晶玉          左47.6% 上45.7% 幅20.0% 高40.0%

   ※ 支給画像は透過PNGのまま、原寸 1774x887 で webp にしている。
     縮小も合成もしないので、絵が甘くならない。 */

.oracle .cta,
.oracle .crystal-trigger {
	position: absolute;
	z-index: 2;
	min-height: 0;
	padding: 0;
	border: 0;
	border-radius: calc(14 * var(--u));
	background: none;
	box-shadow: none;
	color: transparent;
	font-size: 0;
	transform: none;
}

.oracle .cta {
	left: 10.8%;
	top: 70.9%;
	width: 31.5%;
	height: 15.1%;
}

.oracle .crystal-trigger {
	left: 47.6%;
	top: 45.7%;
	width: 20%;
	height: 40%;
	border-radius: 50%;
}

/* 文字はバナーの絵に入っている。読み上げには残す */
.oracle h2,
.oracle > p {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

@media (min-width: 761px) {
	main > .oracle {
		/* バナーは横に伸ばしすぎると間延びするので 600px で止める */
		width: min(100%, 600px);
		margin-inline: auto;
		margin-top: calc(40 * var(--u));
		margin-bottom: calc(34 * var(--u));
		padding: 0;
		border: 0;
		border-radius: 0;
		background: none;
		box-shadow: none;
		overflow: visible;
		position: relative;
		aspect-ratio: 1774 / 887;
	}

	.oracle::before {
		content: '';
		display: block;
		position: absolute;
		inset: 0;
		z-index: 0;
		width: auto;
		height: auto;
		transform: none;
		background: url('parts/oracle-banner.webp') center / contain no-repeat;
		mask-image: none;
		-webkit-mask-image: none;
	}

	/* 前に置いていた座り猫は、バナーに入っているので出さない */
	.oracle::after {
		display: none;
	}
}

@media (max-width: 760px) {
	.oracle {
		position: relative;
		min-height: 0;
		aspect-ratio: 1774 / 887;
		margin-top: 22px;
		padding: 0;
		background: url('parts/oracle-banner.webp') center / contain no-repeat;
		background-color: transparent;
	}
}


/* ==========================================================================
   19. スマホもPCと同じ素材で組み直す
   ==========================================================================

   PCの手直し（01〜16）はほぼすべて min-width:761px の中にあり、
   スマホは納品時のスマホ用の切り抜き（hero-mobile / concerns-mobile /
   star-detail / tarot-detail / voice-detail）のままだった。
   絵柄がPCと違い、四角い切り抜きや同じ人物の使い回しも残っていたので、
   PCで差し替えた支給素材（parts/）をスマホにも当てる。

   寸法はスマホの実寸（.site の --u は 1px）で書く。 */

@media (max-width: 760px) {

	/* ---- ファーストビュー ----
	   絵はPCの背景と同じ hero-wide（2120x742）から、ヨミ・差し出した
	   手・ミカが入る位置を切り取る。hero.webp は高さ434pxしかなく、
	   縦長に使うと粗くなるので使わない。
	   文字は絵の下の暗い地に置き、顔に重ねない。 */
	.hero {
		background:
			linear-gradient(180deg, #0c0b1a00 58%, #0c0b1acc 82%, #0c0b1a 100%) 0 0 / 100% 112cqw no-repeat,
			url('images/hero-wide.webp') 66% 0 / auto 112cqw no-repeat,
			#0c0b1a;
		padding-bottom: 30px;
	}

	.hero-copy {
		padding-top: 96cqw;
	}

	.hero-prose {
		font-size: 15px;
		line-height: 1.75;
		margin-top: 12px;
	}

	.hero-cta {
		width: min(100%, 320px);
		min-height: 54px;
		margin-top: 18px;
		font-size: 16px;
		border-radius: 14px;
	}

	.hero-cta .line-mark {
		width: 30px;
		height: 30px;
		font-size: 8px;
	}

	/* ---- こんな悩み ----
	   PCと同じ吹き出し（bubble-plain）と支給の人物（girl-1〜4）。
	   1列に積み、人物は右・左・右・左と交互に置く。 */
	.concerns {
		background: #eee8f2 url('images/atmosphere-light.webp') center / cover no-repeat;
		padding: 40px 0 44px;
	}

	/* 20px だと「か？」だけが次の行に落ちた。語の切れ目で折り返す */
	.concerns h2 {
		padding: 0 16px;
		font-size: 19px;
		white-space: normal;
		word-break: auto-phrase;
	}

	.concern-grid {
		grid-template-columns: 1fr;
		gap: 30px;
		margin: 34px 16px 0;
	}

	.concern-grid p,
	.concern-grid p:nth-child(4) {
		position: relative;
		display: flex;
		align-items: center;
		aspect-ratio: 480 / 150;
		background: url('parts/bubble-plain.webp') center / 100% 100% no-repeat;
		font-size: 16px;
		line-height: 1.75;
		font-weight: 600;
		color: #2a2140;
		white-space: normal;
	}

	.concern-grid p::before {
		content: '';
		position: absolute;
		bottom: -4px;
		width: 84px;
		height: 132px;
		background: bottom center / contain no-repeat;
		pointer-events: none;
	}

	.concern-grid p:nth-child(odd) {
		justify-content: flex-end;
		padding: 0 104px 0 28px;
		text-align: right;
	}

	.concern-grid p:nth-child(odd)::before {
		right: 8px;
	}

	.concern-grid p:nth-child(even) {
		padding: 0 28px 0 104px;
	}

	.concern-grid p:nth-child(even)::before {
		left: 8px;
	}

	.concern-grid p:nth-child(1)::before { background-image: url('parts/girl-1.webp'); }
	.concern-grid p:nth-child(2)::before { background-image: url('parts/girl-2.webp'); }
	.concern-grid p:nth-child(3)::before { background-image: url('parts/girl-3.webp'); }
	.concern-grid p:nth-child(4)::before { background-image: url('parts/girl-4.webp'); }

	/* ---- なぜ、ヨミの鑑定は当たるのか？ ----
	   PCと同じく星空の地に、支給素材（em-star / em-tarot）のカード。
	   納品時は四角く切り抜いた絵と、月の帯（reason-moon）に黒い文字を
	   乗せる作りだった。月は parts/moon を文字の後ろに敷き直す。 */
	.reason {
		background: #0d0c21 url('images/atmosphere-dark.webp') center / cover no-repeat;
		padding: 40px 16px 30px;
	}

	.reason h2 {
		font-size: 21px;
		white-space: normal;
	}

	.reason-intro {
		max-width: none;
		margin-top: 10px;
		font-size: 14px;
		line-height: 1.85;
	}

	.reason-body {
		grid-template-columns: 1fr;
		gap: 8px;
		margin: 24px 0 0;
	}

	.reason-card,
	.tarot-card {
		position: relative;
		min-height: 0;
		padding: 18px 16px 18px 116px;
		border: 1px solid #7a7182;
		border-radius: 10px;
		background: linear-gradient(180deg, #0b102a, #0c1232 55%, #141539);
	}

	.reason-card::before {
		content: '';
		position: absolute;
		left: 12px;
		top: 50%;
		width: 92px;
		height: 72px;
		transform: translateY(-50%);
		background: url('parts/em-star.webp') center / contain no-repeat;
	}

	.tarot-card::before {
		background-image: url('parts/em-tarot.webp');
	}

	.reason-card h3,
	.tarot-card h3 {
		min-height: 0;
		margin-bottom: 6px;
		font-size: 17px;
	}

	.reason-card ul {
		font-size: 14px;
		line-height: 1.9;
	}

	.times::before {
		font-size: 22px;
	}

	.moon-copy {
		position: relative;
		isolation: isolate;
		margin: 26px 0 0;
		padding: 46px 0;
		font-size: 16px;
		line-height: 1.8;
		color: #fff0c7;
		text-shadow: 0 2px 10px #0a0819cc;
	}

	.moon-copy strong {
		display: block;
		margin-top: 6px;
		font-size: 23px;
		color: #ffffff;
	}

	.moon-copy::before {
		content: '';
		position: absolute;
		z-index: -1;
		left: 50%;
		top: 50%;
		width: 250px;
		height: 250px;
		transform: translate(-50%, -52%);
		background: url('parts/moon.webp') center / contain no-repeat;
		opacity: 0.8;
		pointer-events: none;
	}

	.moon-copy::after {
		content: '';
		position: absolute;
		z-index: -1;
		left: 50%;
		top: 50%;
		width: 280px;
		height: 150px;
		transform: translate(-50%, -50%);
		background: radial-gradient(closest-side, #120c24e6, #120c2400 78%);
		pointer-events: none;
	}

	/* ---- 占術メニューの絵 ----
	   納品時は tarot-detail / star-detail を四角いまま置いていた。
	   PCと同じ透過素材に替える（3枚目の em-total は 09b で指定済み）。 */
	.menu-card::before {
		left: 6px;
		top: 18px;
		width: 74px;
		height: 64px;
		background-image: url('parts/em-moon-tarot.webp');
		mix-blend-mode: normal;
	}

	.menu-card:nth-child(2)::before {
		background-image: url('parts/em-star-reading.webp');
	}

	.menu-description,
	.menu-card:nth-child(3) .menu-description {
		font-size: 14px;
	}

	/* ---- 鑑定の流れ ----
	   PCと同じ完成バッジ（flow-1〜4）を2列2行で。文字はバッジの絵に
	   入っているので、HTMLの文字は読み上げ用に残して目には見せない。 */
	.flow-grid {
		gap: 18px 10px;
		margin-top: 20px;
	}

	.flow-grid li {
		position: relative;
		display: block;
		height: 140px;
		min-height: 0;
		padding: 0;
		border-radius: 0;
		background: center / contain no-repeat;
	}

	.flow-grid li > * {
		position: absolute;
		width: 1px;
		height: 1px;
		margin: -1px;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}

	.flow-grid li:nth-child(1) { background-image: url('parts/flow-1.webp'); }
	.flow-grid li:nth-child(2) { background-image: url('parts/flow-2.webp'); }
	.flow-grid li:nth-child(3) { background-image: url('parts/flow-3.webp'); }
	.flow-grid li:nth-child(4) { background-image: url('parts/flow-4.webp'); }

	/* ---- お客様の声 ----
	   納品時は同じ人物（voice-detail）を3人ぶん使い回していた。
	   PCと同じ支給の人物（voice-1〜3）に替える。 */
	.voice-grid blockquote {
		padding: 16px 16px 14px 84px;
		background: #fefefe;
		box-shadow: 0 3px 14px #6b5c8e26;
		font-size: 15px;
	}

	.voice-grid blockquote::before {
		left: 10px;
		top: 50%;
		width: 64px;
		height: 72px;
		transform: translateY(-50%);
		background: center / contain no-repeat;
	}

	.voice-grid blockquote:nth-child(1)::before { background-image: url('parts/voice-1.webp'); }
	.voice-grid blockquote:nth-child(2)::before { background-image: url('parts/voice-2.webp'); }
	.voice-grid blockquote:nth-child(3)::before { background-image: url('parts/voice-3.webp'); }

	.voice-grid cite {
		font-size: 12px;
	}
}