/* =============================================================================
占いのトビラ — [cta_fortune] ショートコード専用 CSS
File : cta-fortune-style.css
Version: 1.0.9 (2026-06-01)
Author : overtone / グリッサンド
Changelog:
1.0.9 (2026-06-01): 中村さん指示「cta-fortune-microcopy 上に10px程度余白」。
- §2 .cta-fortune-microcopy に padding-top:10px を追加（マイクロコピーの「上」に約10pxの余白）。
上の要素（誘導文 等）とマイクロコピーの間隔を広げるのが目的。margin だと上方向は隣接マージンと
相殺（margin collapse）して効かないため、相殺しない padding で実装（実測: 上の余白が +10px 反映）。
下の余白（margin-bottom:14px = マイクロコピー↓ボタン）は不変。
- 相談ボックス（.luna-soudan-box）内のマイクロコピーは uranai-door-luna-blocks.css 側の
`.post_content .luna-soudan-box p { padding:0 }` が高詳細度で勝つため、そちらにも同値の
padding-top:10px をスコープ付きで追加（luna-blocks v1.2.3）。本ファイルは相談ボックス外の
一般 CTA（v2-review / listicle 等）に効く。色・発光・カード・PC 1行化（§12）は一切不変。
1.0.8 (2026-05-31): 中村さん指示「デスクトップでCTAボタンは改行禁止で」（PC は常に1行・仕様化）
- §12 追加: PC（min-width:600px）でボタンラベル（.wp-block-button__link）を white-space:nowrap
にして絶対に改行させない。同時にボタン箱（.cta-fortune-button）を width:max-content; max-width:100%
に変え、ラベルの長さぴったりに伸縮させる（=固定幅 480/420px に詰め込んで折り返す現象が消える）。
max-width:100% でラッパー（.cta-fortune-2line max-width:600px / 本文カラム ~640px）を超えないので
横スクロール・はみ出しは出ない。
- PC のみ letter-spacing 0.05em → 0.02em、closing の左右 padding 32px → 28px に微調整。
最長級ラベル（最長サービス名＋最長 tail = 約31字）でも約600px に収まり、1行＆はみ出しなしを成立。
- §6-b（相談ボックス内 in-section の枠拡張 480px）は §12 の width:max-content により実質不要化するが、
無害なので残置（max-content が優先されるため二重指定の衝突なし）。
- SP（max-width:599px）は完全に無干渉。§8 / §11 の 2行折返し（head/tail）はそのまま維持。
- 変えたのは §12 の追加 + 既定 letter-spacing を PC 限定で上書きするのみ。色・発光なし（v1.0.5）・
カードなし（v1.0.4）・マイクロコピー・category 別色は一切変更なし。
1.0.7 (2026-05-29): 中村さん指示「スマホではボタンを適当なところで折り返したい」（SP のみ意味で2行折返し）
- 連動 PHP uranai-door-cta-fortune.php v1.0.7: ボタンラベルを「{NAME}+助詞」の直後で
head（.cta-fortune-label-head）/ tail（.cta-fortune-label-tail）の 2 span に分割出力。
- §11 追加: PC は head/tail とも inline（= 従来どおり1行・不自然な改行や余白を出さない）。
SP（max-width:599px）のみ tail を block 化し、サービス名＋助詞の直後で 2 行に折り返す。
例: 「電話占いヴェルニで／相談できる先生を探す →」。head は白スペースで途中改行しない（nowrap）。
- 変えたのは §11 の span 折返し制御の追加のみ。ボタン色・発光なし（v1.0.5）・カード無し（v1.0.4）・
マイクロコピー・既存レスポンシブ（§8）は一切変更なし。
- 注: v1.0.6 は PHP（文言マトリクス）のみの変更で CSS は不変だったため CSS の version は 1.0.5 のまま
据え置かれていた。今回 PHP/CSS 両方を触るため CSS を 1.0.7 に揃える。
1.0.5 (2026-05-29): 中村さん指示「ボタン光らせない」（発光ゼロのフラットボタン化）
- ボタンの box-shadow を完全撤廃（通常時・hover 時とも）。影による浮き・発光感をゼロに。
- hover は色が少し沈むだけ（紫 → 濃い紫）。影増し・translateY・拡大などの発光的演出なし。
- text-link hover の text-shadow（ゴールドの光彩）を撤廃。
- 連動 PHP uranai-door-cta-fortune.php v1.0.5: ボタン class を is-style-btn_shiny →
is-style-fill に変更（SWELL のシャイン演出フックを外す。ドウジンナビ .cta-2line と同じ素のボタン）。
- 保険: テーマ/SWELL 由来のシャイン（a::before のスライド光沢）・hover 光彩 box-shadow・
translateY が .cta-fortune-2line 配下に万一かかっても打ち消すリセットを §3-r に追加
（他サイト共有の子テーマCSSには触らず、本CTAスコープ内だけで無効化）。
1.0.4 (2026-05-29): 中村さん指示「ダサい背景を取れ。ドウジンナビのCTAの色を変えただけにしろ」
- .cta-fortune-2line のカード装飾を全廃しドウジンナビ .cta-2line 準拠のフラット構造に
削除: background(gradient) / border / border-radius / box-shadow / カード用padding /
position:relative / overflow:hidden / ::before・::after の★装飾
§8(SP) の padding・border-radius・擬似要素サイズ指定も削除
§9(light) の背景 gradient 再付与も削除（背景カード復活の元凶。マイクロコピー文字色のみ維持）
- 維持: ボタンの紫 #6B3FA0（ブランド色＝ドウジンナビとの唯一の差）/ マイクロコピー中央寄せ小フォント /
縦の余白(margin) / max-width / text-align:center
1.0.3 (2026-05-28): mu-plugin v1.0.3 同期（CSS内容変更なし、versionのみバンプ）
- mu-plugin 側で wp_enqueue_style の URLスキームを set_url_scheme('https') で正規化したため
HTTPSページからの mixed content ブロックが解消し、本CSSが正しく読み込まれるようになる
1.0.2 (2026-05-28): 中村さん指示（フラット化）
- ボタンの光沢効果を全廃（linear-gradient → 単色 var(--cta-fortune-purple) #6B3FA0）
- シャインアニメーション（::before キラッ光り）を削除
- hover の transform: translateY / 多重 box-shadow を最小化
- text-shadow / 過剰な box-shadow を削減
- ラッパー全体に text-align: center を明示
- .wp-block-buttons を display:flex; justify-content:center で確実に中央寄せ
- マイクロコピー margin-bottom 10px → 14px に増やしてボタンとの余白追加
- category="chat" / "online" の linear-gradient も単色フラットに切替
1.0.1 (2026-05-28): 中村さん指示
- マイクロコピーを中央揃え（既存）+ font-size 0.85em → 0.78em (小サイズ化) + letter-spacing 軽減
- .cta-fortune-note セクションを CSS から削除 (mu-plugin v1.0.1 で出力停止済)
1.0.0 (2026-05-26): 初版
Loader : uranai-door-cta-fortune.php (mu-plugin) が wp_enqueue_style で自動読み込み
依存 : design-guide.md §2-7 (.swell-block-button hover) のブランド変数を継承
構造 (PHP v1.0.1 出力と完全一致):
(cta-fortune-note は v1.0.1 で全廃)
テキストリンク (text-link-inline):
{NAME}の公式サイトを見る →
============================================================================= */
/* -----------------------------------------------------------------------------
CSS 変数 (design-guide.md §2-1 のブランドカラーを継承)
- 子テーマ/追加CSSで --fortune-purple 等が既に定義されている前提
- 未定義時のフォールバック値を CTA 側でも定義しておく
----------------------------------------------------------------------------- */
:root {
--cta-fortune-purple: var(--fortune-purple, #6B3FA0);
--cta-fortune-purple-dark: var(--fortune-purple-dark, #4A2B70);
--cta-fortune-gold: var(--fortune-gold, #C9A84C);
--cta-fortune-gold-light: var(--fortune-gold-light, #E0C878);
--cta-fortune-gold-dark: #B8972E;
--cta-fortune-navy: var(--fortune-navy, #1A1A2E);
--cta-fortune-text: var(--fortune-text, #E8E0F0);
--cta-fortune-text-sub: var(--fortune-text-sub, #A09AB0);
--cta-fortune-border: var(--fortune-border, rgba(201, 168, 76, 0.3));
--cta-fortune-bg-card: var(--fortune-bg-card, rgba(42, 42, 78, 0.7));
}
/* =============================================================================
1. cta-fortune-2line (ボタン型ラッパー)
v1.0.4 (2026-05-29): 中村さん指示「ダサい背景を取れ。ドウジンナビのCTAの色を変えただけにしろ」。
ドウジンナビ doujin-navi-cta-fanza.php の .cta-2line は背景カードを一切持たず、
SWELL + コア Gutenberg のボタンCSSに素で乗っているだけ。これに合わせてカード装飾を全廃。
削除: background(gradient) / border / border-radius / box-shadow / カード用padding /
position:relative / overflow:hidden / ::before・::after の★装飾。
維持: margin(縦の余白) / max-width / text-align:center（マイクロコピー+ボタンの中央寄せ）。
ボタンの紫 #6B3FA0（ブランド色）はそのまま（=ドウジンナビとの唯一の差が「色」）。
============================================================================= */
.cta-fortune-2line {
margin: 2.5em auto;
max-width: 600px;
/* ラッパー全体を中央揃え（マイクロコピー + ボタン両方）。背景・枠・影・擬似要素は v1.0.4 で全廃 */
text-align: center;
}
/* =============================================================================
2. cta-fortune-microcopy (マイクロコピー)
============================================================================= */
.cta-fortune-microcopy {
/* v1.0.2: マイクロコピー ↓ ボタン の余白を 10px → 14px に拡大（中村さん指示 / 密着気味解消）。
text-shadow を削除しフラットに（中村さん指示 / 光らせない）。
text-align: center 維持。font-size 0.78em 維持。*/
margin: 0 0 14px;
/* v1.0.9: マイクロコピーの「上」に約10pxの余白（中村さん指示）。上の要素（誘導文 等）との間隔を確保。
margin-top だと隣接マージンと相殺して効かないため padding-top で実装（相殺しない）。*/
padding-top: 10px;
text-align: center;
font-size: 0.78em;
font-weight: 500;
color: var(--cta-fortune-gold-light);
letter-spacing: 0.02em;
line-height: 1.5;
}
/* =============================================================================
3. cta-fortune-button (フラットな紫ボタン / is-style-fill / 発光なし)
v1.0.5 (2026-05-29): 中村さん指示「光らせない」。影・光彩を全撤廃しベタ塗りのみ。
============================================================================= */
/* v1.0.2: フラット化 + 中央寄せを CSS 側で明示的に固定（テーマ CSS に依存しない） */
.cta-fortune-2line .wp-block-buttons {
margin: 0 auto;
display: flex;
justify-content: center;
align-items: center;
}
.cta-fortune-2line .wp-block-button.cta-fortune-button {
margin: 0 auto;
width: 100%;
max-width: 480px;
}
.cta-fortune-2line .wp-block-button.cta-fortune-button .wp-block-button__link {
display: block;
width: 100%;
padding: 16px 28px !important;
/* v1.0.2: linear-gradient → 単色（紫=主役色）にしてフラット化（中村さん指示） */
background: var(--cta-fortune-purple) !important;
background-image: none !important;
color: #FFFFFF !important;
font-weight: 700;
font-size: 1.05em;
letter-spacing: 0.05em;
text-align: center;
text-decoration: none;
/* v1.0.2: 派手なゴールド枠線 → 控えめな透明寄り枠線 */
border: 1px solid rgba(255, 255, 255, 0.1) !important;
border-radius: 32px !important;
/* v1.0.5: box-shadow を完全撤廃（中村さん指示「光らせない」）。影による浮き・発光感をゼロに。 */
box-shadow: none !important;
transition: background-color 0.2s ease;
}
/* v1.0.2: シャインアニメーション（::before キラッ光り）を完全削除（中村さん指示） */
.cta-fortune-2line .wp-block-button.cta-fortune-button .wp-block-button__link:hover {
/* v1.0.5: hover は色が少し沈むだけ（紫 → 濃い紫）。影増し・translateY・拡大などの発光的演出なし。 */
background: var(--cta-fortune-purple-dark) !important;
background-image: none !important;
box-shadow: none !important;
transform: none !important;
}
.cta-fortune-2line .wp-block-button.cta-fortune-button .wp-block-button__link:focus-visible {
outline: 2px solid var(--cta-fortune-gold-light);
outline-offset: 3px;
}
/* =============================================================================
3-r. 発光リセット（SWELL / テーマ由来のシャイン・光彩を本CTAスコープ内で打ち消す）
v1.0.5 (2026-05-29): 子テーマ追加CSS（design-guide）が .swell-block-button / is-style-btn_shiny に
付けている「a::before のスライド光沢」「hover の box-shadow 光彩 + translateY」が、万一この
CTA ボタンに乗っても発光しないよう、.cta-fortune-2line 配下に限定して無効化する。
※ 他サイト共有の子テーマCSS本体には触らない（このCTAスコープ内だけのリセット）。
============================================================================= */
/* スライド光沢（::before / ::after）を本CTAボタン内で完全停止 */
.cta-fortune-2line .wp-block-button.cta-fortune-button .wp-block-button__link::before,
.cta-fortune-2line .wp-block-button.cta-fortune-button .wp-block-button__link::after {
display: none !important;
content: none !important;
background: none !important;
}
/* hover 時の光彩 box-shadow / 浮き上がり transform を本CTAボタン内で無効化 */
.cta-fortune-2line .wp-block-button.cta-fortune-button .wp-block-button__link:hover,
.cta-fortune-2line .wp-block-button.cta-fortune-button .wp-block-button__link:focus {
box-shadow: none !important;
transform: none !important;
filter: none !important;
text-shadow: none !important;
}
/* =============================================================================
4. cta-fortune-note (注記) — v1.0.1 で全廃 (mu-plugin 側で出力停止済)
後方互換のため display:none で保険を残す（旧記事に直書き残骸があった場合の救済）。
============================================================================= */
.cta-fortune-note {
display: none !important;
}
/* =============================================================================
5. cta-fortune-text-link (text-link-inline 型)
- 各サービス紹介末尾に控えめに配置する用
============================================================================= */
.cta-fortune-text-link {
margin: 1.2em 0 1.8em;
text-align: right;
font-size: 0.95em;
}
.cta-fortune-text-link a {
display: inline-block;
padding: 6px 14px;
color: var(--cta-fortune-gold) !important;
text-decoration: underline;
text-decoration-color: rgba(201, 168, 76, 0.4);
text-underline-offset: 4px;
border-bottom: none;
transition: all 0.3s ease;
}
.cta-fortune-text-link a:hover {
/* v1.0.5: text-shadow（ゴールドの光彩）を撤廃（中村さん指示「光らせない」）。色変化のみ。 */
color: var(--cta-fortune-gold-light) !important;
text-decoration-color: var(--cta-fortune-gold);
}
/* =============================================================================
6. type 別の細部差分
- data-cta-type="button-after-h1": 大きめ / リード直後の主導CTA
- data-cta-type="button-in-section": 中サイズ / 各サービス紹介末尾
- data-cta-type="button-before-list": 中サイズ / 一覧手前
- data-cta-type="button-closing": 大きめ / 締めCTA (after-h1と同等)
============================================================================= */
/* after-h1 と closing は最大サイズ */
.cta-fortune-2line:has([data-cta-type="button-after-h1"]),
.cta-fortune-2line:has([data-cta-type="button-closing"]) {
margin: 3em auto;
}
.cta-fortune-2line:has([data-cta-type="button-after-h1"]) .wp-block-button__link,
.cta-fortune-2line:has([data-cta-type="button-closing"]) .wp-block-button__link {
font-size: 1.1em;
padding: 18px 32px !important;
}
/* in-section と before-list は中サイズ (compact) */
.cta-fortune-2line:has([data-cta-type="button-in-section"]),
.cta-fortune-2line:has([data-cta-type="button-before-list"]) {
/* v1.0.4: カード padding 撤廃。縦余白のみで詰める */
margin: 1.8em auto;
}
.cta-fortune-2line:has([data-cta-type="button-in-section"]) .wp-block-button.cta-fortune-button,
.cta-fortune-2line:has([data-cta-type="button-before-list"]) .wp-block-button.cta-fortune-button {
max-width: 420px;
}
.cta-fortune-2line:has([data-cta-type="button-in-section"]) .wp-block-button__link,
.cta-fortune-2line:has([data-cta-type="button-before-list"]) .wp-block-button__link {
font-size: 1em;
padding: 14px 24px !important;
}
/* ---------------------------------------------------------------------------
6-b. luna-soudan-box 内の button-in-section だけ枠を広げて PC 1 行化
（2026-05-31）
問題: 相談ボックス(.luna-soudan-box)内の button-in-section CTA は
既定 max-width:420px（内側 = 420 - 24*2 = 372px）に収まらず、
「電話占いヴェリテで相談できる先生を探す →」のような長いラベルが
PC 表示で不自然に 2 行折れする（実測 約380px / 約18px 不足）。
対応: 相談ボックス内に限定して枠を 420px → 480px に拡張し、左右 padding を
24px → 22px に微調整（内側 = 480 - 22*2 = 436px）。最長級ラベルでも
PC 1 行に収まる。文言は一切変更しない。
影響範囲: セレクタを .luna-soudan-box 配下に限定しているため、
相談ボックス外の button-in-section（v2-listicle / v2-review 等の
中盤 CTA）や他サービスの短いボタン・他装飾ブロックには一切干渉しない。
SP（max-width:599px）はビューポート幅で自然に縮むため無影響
（tail の 2 行折返しは §11 の設計どおり維持）。
--------------------------------------------------------------------------- */
.post_content .luna-soudan-box .cta-fortune-2line:has([data-cta-type="button-in-section"]) .wp-block-button.cta-fortune-button,
.luna-soudan-box .cta-fortune-2line:has([data-cta-type="button-in-section"]) .wp-block-button.cta-fortune-button {
max-width: 480px;
}
.post_content .luna-soudan-box .cta-fortune-2line:has([data-cta-type="button-in-section"]) .wp-block-button__link,
.luna-soudan-box .cta-fortune-2line:has([data-cta-type="button-in-section"]) .wp-block-button__link {
padding: 14px 22px !important;
}
/* =============================================================================
7. category 別の色味調整 (デフォルトは phone のゴールド)
- chat: ピンク寄せのゴールド (女性的・話しかけやすさ)
- online: 紫寄せのゴールド (落ち着き・予約のフォーマル感)
============================================================================= */
/* v1.0.2: category 別差分もフラット化（gradient → 単色）
- chat はピンク寄りの単色（暖色で話しかけやすさを残す）
- online は紫濃いめの単色（落ち着き）
- phone（デフォルト）は §3 の var(--cta-fortune-purple) #6B3FA0 */
.cta-fortune-2line[data-cta-service] .wp-block-button.cta-fortune-button .wp-block-button__link[data-category="chat"] {
background: #C95D7A !important;
background-image: none !important;
}
.cta-fortune-2line[data-cta-service] .wp-block-button.cta-fortune-button .wp-block-button__link[data-category="online"] {
background: var(--cta-fortune-purple-dark) !important;
background-image: none !important;
color: #FFFFFF !important;
}
/* =============================================================================
8. レスポンシブ (スマホ最適化)
============================================================================= */
@media screen and (max-width: 599px) {
.cta-fortune-2line {
/* v1.0.4: カード装飾全廃に伴い padding / border-radius を削除。縦余白と全幅化のみ維持 */
margin: 2em auto;
max-width: 100%;
}
.cta-fortune-microcopy {
/* v1.0.1: SP もデスクトップと統一して 0.74em に縮小 */
font-size: 0.74em;
margin-bottom: 8px;
}
.cta-fortune-2line .wp-block-button.cta-fortune-button .wp-block-button__link {
padding: 14px 20px !important;
font-size: 1em;
border-radius: 28px !important;
}
.cta-fortune-2line:has([data-cta-type="button-after-h1"]) .wp-block-button__link,
.cta-fortune-2line:has([data-cta-type="button-closing"]) .wp-block-button__link {
font-size: 1.05em;
padding: 16px 22px !important;
}
/* cta-fortune-note は v1.0.1 で全廃済 (mu-plugin 側で出力停止) */
.cta-fortune-text-link {
text-align: center;
font-size: 0.9em;
}
}
/* =============================================================================
9. 明色テーマ環境でのマイクロコピー可読性の保険
v1.0.4 (2026-05-29): カードの暗色背景を全廃したため、light モード時に
.cta-fortune-2line へ背景 gradient を再付与していた旧ルールを削除（背景カード復活の元凶）。
マイクロコピー文字色（ゴールド）のみ、明色背景でも読めるよう濃いゴールドへ寄せる調整を残す。
============================================================================= */
@media (prefers-color-scheme: light) {
.cta-fortune-microcopy {
color: var(--cta-fortune-gold-dark);
}
}
/* =============================================================================
10. 印刷時は CTA を非表示 (アフィリリンクは紙には不要)
============================================================================= */
@media print {
.cta-fortune-2line,
.cta-fortune-text-link {
display: none !important;
}
/* cta-fortune-note は §4 で常時 display:none 済 */
}
/* =============================================================================
11. ボタンラベルの意味で2行折返し（スマホのみ / v1.0.7）
中村さん指示「スマホではボタンを適当なところで折り返したい」。
PHP v1.0.7 がボタンラベルを「{NAME}+助詞」の直後で 2 span に分割して出力する:
電話占いヴェルニで相談できる先生を探す →
ここで PC は head/tail とも inline（=1行・従来どおり）、SP のみ tail を block 化して 2 行に折り返す。
※対象はボタン（.cta-fortune-button）のみ。テキストリンク（.cta-fortune-text-link）は分割しないため対象外。
============================================================================= */
/* PC（既定）: head/tail とも inline = ラベルは1行で連続。不自然な改行・余白を出さない。
head はサービス名＋助詞のまとまりなので、PC でも途中で割れないよう nowrap。 */
.cta-fortune-2line .wp-block-button.cta-fortune-button .wp-block-button__link .cta-fortune-label-head,
.cta-fortune-2line .wp-block-button.cta-fortune-button .wp-block-button__link .cta-fortune-label-tail {
display: inline;
}
.cta-fortune-2line .wp-block-button.cta-fortune-button .wp-block-button__link .cta-fortune-label-head {
white-space: nowrap;
}
/* SP（max-width:599px）: tail を block 化し、サービス名＋助詞の直後で 2 行目に折り返す。
head（1行目）/ tail（2行目）はそれぞれ中央寄せ（a の text-align:center を継承）。
1行目（head）も nowrap のままなので、長いサービス名でも 1 行目はサービス名＋助詞で収まる。 */
@media screen and (max-width: 599px) {
.cta-fortune-2line .wp-block-button.cta-fortune-button .wp-block-button__link .cta-fortune-label-tail {
display: block;
}
/* 2行になる分、行間を少しだけ詰めて間延びを防ぐ */
.cta-fortune-2line .wp-block-button.cta-fortune-button .wp-block-button__link {
line-height: 1.4;
}
}
/* =============================================================================
12. PC（デスクトップ）はボタンラベル改行禁止（1行固定 / v1.0.8）
中村さん指示「デスクトップでCTAボタンは改行禁止で」。
PC 幅（min-width:600px = §8/§11 の SP 上限 599px の直上）では、ボタンの文字を
絶対に折り返させず常に1行で表示する。
仕組み:
(1) リンク a を white-space:nowrap にしてテキストを1行固定（head/tail とも割れない）。
(2) ボタン箱 .cta-fortune-button を width:max-content に変え、ラベルの長さぴったりに
横幅を伸縮させる。これまでは固定の max-width（480px / in-section・before-list は 420px）に
width:100% で詰め込んでいたため、ラベルがその幅を超えると2行に折れていた。max-content なら
「必要な分だけ」横に広がるので、長いラベルでも1行で収まる。
(3) max-width:100% でラッパー .cta-fortune-2line（max-width:600px / 本文カラム ~640px）を
超えないよう上限を付ける。したがって、はみ出し・横スクロールは発生しない。
（max-content は親の利用可能幅で頭打ちになる = 600px が実質ハードキャップ）
はみ出し対策（最長ラベルでも600px以内に収める微調整・PC限定）:
- letter-spacing 0.05em → 0.02em（既定§3を PC でだけ上書き）
- closing（最大フォント1.1em）の左右 padding 32px → 28px
これで「最長サービス名＋最長 tail（約31字）」でも約600px に収まり、1行＆はみ出しなしを成立。
実在の最長級ラベル（例: 電話占いヴェリテで今の気持ちを話してみる →）は余裕で1行。
無干渉の保証:
- SP（max-width:599px）はこの §12 に入らない。§8/§11 の 2行折返し（head=1行目 / tail=2行目）は
一切変わらない。
- 対象はボタン（.cta-fortune-button）のみ。テキストリンク（.cta-fortune-text-link）は対象外。
- §6-b（相談ボックス内 in-section の枠 480px 拡張）は max-content により実質不要化するが、
width 指定がここで上書きされるため衝突しない（残置して無害）。
============================================================================= */
@media screen and (min-width: 600px) {
/* (1) ラベルを1行固定（折り返し禁止）。head/tail の途中でも割れない。 */
.cta-fortune-2line .wp-block-button.cta-fortune-button .wp-block-button__link {
white-space: nowrap;
/* PC のみ字間を少し詰めて最長ラベルの1行化に余裕を持たせる（§3 の 0.05em を上書き） */
letter-spacing: 0.02em;
}
/* head/tail とも1行内で連続（SP だけ tail を block 化する §11 と背反させない） */
.cta-fortune-2line .wp-block-button.cta-fortune-button .wp-block-button__link .cta-fortune-label-head,
.cta-fortune-2line .wp-block-button.cta-fortune-button .wp-block-button__link .cta-fortune-label-tail {
display: inline;
white-space: nowrap;
}
/* (2)(3) ボタン箱をラベル幅ぴったりに伸縮（max-content）。ただしラッパー超過は禁止（max-width:100%）。
既定§3 の width:100%; max-width:480px / §6 の 420px を PC では上書きして「内容幅」で確定させる。 */
.cta-fortune-2line .wp-block-button.cta-fortune-button,
.cta-fortune-2line:has([data-cta-type="button-in-section"]) .wp-block-button.cta-fortune-button,
.cta-fortune-2line:has([data-cta-type="button-before-list"]) .wp-block-button.cta-fortune-button {
width: -webkit-max-content;
width: max-content;
max-width: 100%;
}
/* リンク a 自体は箱いっぱい（display:block; width:100% は §3 のまま）。テキストは nowrap で1行、
箱が max-content なので a も内容幅に一致する。 */
/* closing は最大フォント（1.1em）。最長ラベルでも 600px に収まるよう左右 padding を微減（32→28px）。 */
.cta-fortune-2line:has([data-cta-type="button-closing"]) .wp-block-button__link,
.cta-fortune-2line:has([data-cta-type="button-after-h1"]) .wp-block-button__link {
padding-left: 28px !important;
padding-right: 28px !important;
}
}