/* theme-20th.css — 成人式（20th）テーマ層
   依存：global.css / components.css / menu.css / menu-shared.css（この順で読み込み＝後勝ち）
   読み込み条件：functions.php で is_page_template('_menu.php') かつ post_slug === '20th'
   役割：共通骨格 menu-shared.css（charcoal×金の寒色デフォルト基調）はそのまま生かし、
        暗地セクション5箇所に「オーナー提供SVG素材（wedding方式＝金の単色mask）」と
        「和柄地紋（753方式＝インラインdata URIタイル）」を交互に重ねる装飾層。配色の上書きはしない。
   柄の割当（同ページ内で同柄を使わない・素材とタイルを交互に）：
     ① 簡易ジャーニー … 素材SVG＝和風の霞（kumo.svg）＝晴れの日の空気。対角コーナー・金mask
     ② 中間CTA       … 地紋＝青海波（オーナー素材 seigaiha.svg 由来）＝穏やかな波がどこまでも続く吉祥柄
                        ★2026-07-21 オーナーFB2回：矢絣（自作）→三崩し（自作）→オーナー指定の青海波素材で確定。
                        素材は青×白地の全面柄のため、白地パスを除去した派生 seigaiha-mask.svg を生成し
                        （docs化：白地除去＋svgo済・元 seigaiha.svg は削除済み＝git履歴が記録）金の単色mask（wedding方式）で敷く
     ③ 料金後CTA     … 素材SVG＝横向きの折り鶴（k0501_1）を対角に鏡写し＝祝い・千羽鶴の願掛け。金mask
                        ＋上端中央に捻じ梅紋（k0835_4）＝短い金線を紋章に格上げ（weddingの紋章ディバイダー先例）
                        ★2026-07-21 オーナーFB：梅の枝（297687）からk素材3点の「適宜使い」へ差し替え指定
     ④ 撮影の流れ    … 地紋＝梅丸文様（オーナー素材 ume_pattern.svg 由来）＝春を告げる吉祥柄。文字量多＝最薄
                        ★2026-07-21 オーナーFB：初版の菱格子（自作）から差し替え指定。青海波と同じく
                        白地パスを除去した派生 ume-mask.svg を生成し金の単色maskで敷く
     ⑤ 緊急性        … 素材SVG＝竹2種＝節目・まっすぐな成長。金mask
                        左＝150004（竹一本・縦長／下端接地）／右＝255516（笹の枝・横長）の非対称構成
                        右はPCのみ上下貫通（下端接地せず上下中央・セクション高より高い340px）
                        ★2026-07-21 オーナーFB3回：150004→255516→297259→150004＋255516の2枚使いで確定
                        ★2026-07-21 大きさ/配置をオーナーFBで確定＝PC右 480×340・right:-10%・上下はみ出し／
                          SP 左140×280(left:-3%)・右280×198(right:-24%・bottom:-28px＝下へはみ出す)
                          ＝左右とも画面外へ逃がす。SPは上方向へは貫通させない（文字と競わせない）
   素材（assets/img/menu/20th/・オーナー提供の黒トレースSVG）：
     ・kumo.svg   … 和風の霞2つ（512×512）→ ①簡易ジャーニー
     ・k0501_1.svg … 折り鶴・横向き（800×519・約1.54:1）→ ③料金後CTA 対角2箇所（元「k0501_1 .svg」＝空白除去リネーム）
     ・k0835_4.svg … 捻じ梅の紋（800×789・約1.01:1）→ ③料金後CTA 上端中央の紋章
     ・150004.svg … 竹一本（640×1280・0.5:1）→ ⑤緊急性 左
     ・255516.svg … 笹付きの竹（1280×907・約1.41:1）→ ⑤緊急性 右
     ・seigaiha-mask.svg … 元素材 seigaiha.svg（青×白全面柄）の白地除去派生 → ②中間CTA
     ・ume-tile.svg … 元素材 ume_pattern.svg（梅丸全面柄）から梅丸1個切り出しの千鳥タイル派生 → ④撮影の流れ
     ※未使用分は削除済み（2026-07-21・git履歴が記録）＝297259（竹林）／k0501_2（羽広げ鶴）／
       ume-mask（旧派生）／元素材 seigaiha.svg・ume_pattern.svg／297687（梅の枝）はオーナー削除
   作法：親に position:relative + overflow:hidden、本文ラッパーに z-index:1、
        装飾は ::before/::after（z-index:0・pointer-events:none）。
        ヒーロー・写真帯・最終CTA（ch9）は写真が入る前提で装飾なし（753/wedding共通ルール）。
        暗地ゆえ素材maskは opacity .1〜.3 帯・タイル地紋は .02〜.10 帯（気配程度）。
        ★2026-07-21 オーナーFB「和柄・竹をもっと薄く」で②青海波 .08→.04／④梅丸 .05→.025／
          ⑤竹 .30/.26→.11/.095 へ引き下げ（3段階比較で選定）。柄でなく地の質感に沈める狙い。
   ================================================================ */

/* ── 装飾オフセット（wedding準拠：左右端に少しだけかかる負値／上下端は余白の正値） ── */
.nb__page {
  --nb20-orn-x: -4px;
  --nb20-orn-y: 18px;
}

/* ① 簡易ジャーニー（charcoal暗地）＝和風の霞（kumo.svg）を左上・右下の対角に（金mask）。
   素材は大きい霞が左下・小さい霞が右上の構成。左上コーナー＝scaleY(-1) で量感を上へ、
   右下コーナー＝scaleX(-1) で量感を右下へ寄せる。面ベタの素材ゆえ細線素材より低opacityで気配に。 */
.nb__page .nb__hero-jrn { position: relative; overflow: hidden; }
.nb__page .nb__hero-jrn-inner { position: relative; z-index: 1; }
.nb__page .nb__hero-jrn::before,
.nb__page .nb__hero-jrn::after {
  content: ''; position: absolute; width: 150px; height: 150px;
  -webkit-mask: url("../../img/menu/20th/kumo.svg") left top / contain no-repeat;
          mask: url("../../img/menu/20th/kumo.svg") left top / contain no-repeat;
  background-color: var(--gold); pointer-events: none; z-index: 0;
}
.nb__page .nb__hero-jrn::before { left: var(--nb20-orn-x); top: var(--nb20-orn-y); transform: scaleY(-1); opacity: .13; }
.nb__page .nb__hero-jrn::after  { right: var(--nb20-orn-x); bottom: var(--nb20-orn-y); transform: scaleX(-1); opacity: .10; }

/* ② 中間CTA（charcoal暗地）＝青海波（seigaiha-mask.svg＝オーナー素材の白地除去派生）を金の単色maskで全面に。
   タイルでなく1920×1080の全面柄素材＝center/cover で敷く（繋ぎ目なし）。暗地×金の気配程度。 */
.nb__page .nb__mid-cta { position: relative; overflow: hidden; }
.nb__page .nb__mid-cta > * { position: relative; z-index: 1; }
.nb__page .nb__mid-cta::after {
  content: ''; position: absolute; inset: 0;
  -webkit-mask: url("../../img/menu/20th/seigaiha-mask.svg") center / cover no-repeat;
          mask: url("../../img/menu/20th/seigaiha-mask.svg") center / cover no-repeat;
  background-color: var(--gold);
  opacity: .04; /* ★2026-07-21 オーナーFB「もっと薄く」＝.08→.04（3段階比較で案2）。柄が地の質感に沈み文字が主役に戻る */
  pointer-events: none; z-index: 0;
}

/* ③ 料金後CTA（charcoal暗地）＝横向きの折り鶴（k0501_1）を対角コーナーに鏡写しで（金mask）＋上端中央に捻じ梅紋。
   menu-shared の ::before（上端中央の短い金線）は鶴に上書き＝線の仕事は紋章（-inner::before）が引き継ぐ（wedding先例）。
   ★2026-07-21 オーナーFB：左上の羽広げ鶴（k0501_2）は端で切れると鶴に見えない→判別しやすい横向き鶴に統一し
   端からはみ出させず内側に完全に収める（k0501_2 は未使用へ）。 */
.nb__page .nb__price-after-cta-inner { position: relative; z-index: 1; }
.nb__page .nb__price-after-cta::before,
.nb__page .nb__price-after-cta::after {
  content: ''; position: absolute;
  top: auto; left: auto; right: auto; bottom: auto;
  width: 150px; height: 97px;
  -webkit-mask: url("../../img/menu/20th/k0501_1.svg") center / contain no-repeat;
          mask: url("../../img/menu/20th/k0501_1.svg") center / contain no-repeat;
  background: var(--gold); pointer-events: none; z-index: 0;
}
/* 暗地上の知覚バランス：左上をわずかに濃く（wedding先例）。左上は鏡写し（頭が内側へ） */
.nb__page .nb__price-after-cta::before { left: 20px; top: 20px; transform: scaleX(-1); opacity: .28; }
.nb__page .nb__price-after-cta::after  { right: 20px; bottom: 20px; opacity: .22; }
/* 上端中央の捻じ梅紋（k0835_4）＝短い金線を紋章に格上げ。top はセクション padding-top（PC96/SP72）と連動した負値 */
.nb__page .nb__price-after-cta-inner::before {
  content: ''; position: absolute; top: -58px; left: 50%; transform: translateX(-50%);
  width: 46px; height: 45px;
  -webkit-mask: url("../../img/menu/20th/k0835_4.svg") center top / contain no-repeat;
          mask: url("../../img/menu/20th/k0835_4.svg") center top / contain no-repeat;
  background-color: var(--gold); opacity: .5; pointer-events: none;
}
@media (min-width: 768px) {
  .nb__page .nb__price-after-cta-inner::before { top: -78px; width: 60px; height: 59px; }
}

/* ④ 撮影の流れ（charcoal暗地）＝梅丸文様を金の単色maskで全面に。
   ★2026-07-21 オーナーFB「柄同士をもう少し離して」＝元素材は梅丸が密（中心間240px・隙間15px）で
   CSSでは間隔だけ広げられない→ ume_pattern から梅丸1個を円クリップで切り出し、間隔広めの
   千鳥タイル ume-tile.svg（430角に2個＝隣接中心間 約304px）を生成して差し替え（ume-mask.svg は未使用へ）。
   表示スケールは従来の梅丸サイズを維持（PC 288px タイル＝梅丸約150px／SP 140px タイル＝梅丸約73px）。 */
.nb__page .nb__flow-detail { position: relative; overflow: hidden; }
.nb__page .nb__flow-detail-inner { position: relative; z-index: 1; }
.nb__page .nb__flow-detail::before {
  content: ''; position: absolute; inset: 0;
  -webkit-mask: url("../../img/menu/20th/ume-tile.svg") 0 0 / 288px auto repeat;
          mask: url("../../img/menu/20th/ume-tile.svg") 0 0 / 288px auto repeat;
  background-color: var(--gold);
  opacity: .025; /* ★2026-07-21 オーナーFB「もっと薄く」＝.05→.025（3段階比較で案2） */
  pointer-events: none; z-index: 0;
}

/* ⑤ 緊急性（indigo暗地）＝竹2種を左右の下端に接地（金mask）。
   地面から竹が生える見え方＝下縁密着（wedding街灯の先例）。
   ★2026-07-21 オーナー指定＝素材を297259（竹林）から 150004＋255516 へ変更。
   縦横比が大きく違う2枚ゆえ同寸ミラーにせず、左＝縦の竹（細く高く）／右＝笹の枝（低く横に張る）
   の非対称構成にして、それぞれの素材本来の形を保つ。 */
.nb__page .nb__urgency { position: relative; overflow: hidden; }
.nb__page .nb__urgency-badge, .nb__page .nb__urgency-body { position: relative; z-index: 1; }
/* 本文の白alpha引き上げ（2026-07-21 オーナー指摘「本文が薄い気がする」）。
   menu-shared の既定 .62 は暗地では薄く、同ブロック内で見出し13.31:1・バッジ10.06:1 に対し
   本文だけ 6.08:1 と沈む（13pxの小さい文字＝一番読ませたい文章）。
   他10メニューのテーマは全て .92 に上書き済みで、新規作成の 20th だけ漏れていた＝横並びに揃える。 */
.nb__page .nb__urgency-text { color: rgba(255, 255, 255, .92); }
.nb__page .nb__urgency::before,
.nb__page .nb__urgency::after {
  content: ''; position: absolute; bottom: -4px;
  background-color: var(--gold); pointer-events: none; z-index: 0;
}
/* 左＝竹一本（150004・640×1280＝0.5:1）＝縦に高く */
.nb__page .nb__urgency::before {
  left: 4%; width: 120px; height: 240px; opacity: .11; /* ★2026-07-21 オーナーFB「竹ももっと薄く」＝.30→.11（案3） */
  -webkit-mask: url("../../img/menu/20th/150004.svg") center bottom / contain no-repeat;
          mask: url("../../img/menu/20th/150004.svg") center bottom / contain no-repeat;
}
/* 右＝笹付きの竹（255516・1280×907＝1.41:1）＝内向きに反転。
   ★2026-07-21 オーナーFB「右側の竹だけ上下にはみ出すように・もっと右へ」
   下端接地をやめ、セクション高（約260px）より高い340pxを上下中央に置いて
   上下とも枠から突き抜けさせる＝「切り取られた竹林の一部」の見え方。
   right:-10% で幹を画面外へ逃がし、笹だけが内側へ張り出す。 */
.nb__page .nb__urgency::after {
  right: -10%; width: 480px; height: 340px; opacity: .095; /* ★2026-07-21 オーナーFB「竹ももっと薄く」＝.26→.095（案3） */
  bottom: auto; top: 50%; transform: translateY(-50%) scaleX(-1);
  -webkit-mask: url("../../img/menu/20th/255516.svg") center bottom / contain no-repeat;
          mask: url("../../img/menu/20th/255516.svg") center bottom / contain no-repeat;
}

/* ── スマホ（767px以下）＝装飾を小さく・はみ出しを浅く（文字と被らせない） ── */
@media (max-width: 767px) {
  .nb__page { --nb20-orn-x: -3px; --nb20-orn-y: 12px; }
  /* ① 霞 104×104 */
  .nb__page .nb__hero-jrn::before, .nb__page .nb__hero-jrn::after { width: 104px; height: 104px; }
  /* ③ 折り鶴 104×67（1.54:1維持・内側余白も浅く） */
  .nb__page .nb__price-after-cta::before, .nb__page .nb__price-after-cta::after { width: 104px; height: 67px; }
  .nb__page .nb__price-after-cta::before { left: 12px; top: 14px; }
  .nb__page .nb__price-after-cta::after  { right: 12px; bottom: 14px; }
  /* ④ 梅丸：SPは小さめタイル（梅丸サイズは従来の160%時と同等を維持） */
  .nb__page .nb__flow-detail::before {
    -webkit-mask-size: 140px auto;
            mask-size: 140px auto;
  }
  /* ⑤ 竹2種（各素材の比率を維持）。★2026-07-21 オーナーFB「SPは2本とももっと大きく・
     右の竹が真ん中に寄っているので右へ」＝PCの2倍強へ拡大し、右は right:-14% で
     幹を画面外へ逃がす。SPは下端接地のまま（PCのような上下貫通はしない＝文字と競うため）。 */
  /* ★2026-07-21 オーナーFB2回目「左右とも端に寄せて・右は下側に少しはみ出すように」
     ＝左右とも画面外へ逃がし、竹が「画面の外へ続いている」見え方に。本文の左右余白に
     収まるので可読は維持される。 */
  .nb__page .nb__urgency::before {
    width: 140px; height: 280px; left: -3%;                        /* 竹一本 0.5:1 */
  }
  .nb__page .nb__urgency::after  {
    width: 280px; height: 198px; right: -24%;                      /* 笹の枝 1.41:1 */
    bottom: -28px; top: auto; transform: scaleX(-1);               /* 下へはみ出す＋PCの上下中央配置を打ち消す */
  }
}