@charset "UTF-8";
/*! ==========================================================================
 *  この muran.css は **生成物**。手で編集しても次のビルドで消える。
 *  直す場所 → site/themes/muran2026/src/scss/  ビルド → npm run css
 *  ずれていないかの検査 → npm run css:check
 *  ========================================================================== */
/*
 * 夢卵2026 シグネチャ装飾層。
 *
 * 原則:
 *  - コンテンツは常にプレーンなコアブロック+クラス名。装飾の実体はすべてここに置く
 *    (編集画面のマークアップを汚さない=ラウンドトリップ安全を最優先)。
 *  - コアのブロックCSSと同格で競合する箇所は `:is(.muran-theme,.editor-styles-wrapper)`
 *    で1段詳細度を上げて勝つ。読み込み順に依存しないので `!important` を使わない。
 *    (`@layer` は非レイヤーのコアCSSに勝てないため解にならない = 検証済みの教訓)
 *  - 数値は Figma 実測。マジックナンバーは --m-* トークンに集約する。
 *  - セクション固有の指定は必ずセクションクラス配下に置く(全称セレクタでの誤爆防止)。
 */
/* ---------- DENSO コーポレートフォント(amdenso と同一構成) ---------- */
@font-face {
  font-family: denso-jp;
  src: url(../fonts/DENSOTP2017-Light.woff) format("woff");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: denso-jp;
  src: url(../fonts/DENSOTP2017-Regular.woff) format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: denso-jp;
  src: url(../fonts/DENSOTP2017-Bold.woff) format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: denso-jp;
  src: url(../fonts/DENSOTP2017-Black.woff) format("woff");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: denso-en;
  src: url(../fonts/ORIG_DENSO_LIGHT.woff) format("woff");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: denso-en;
  src: url(../fonts/ORIG_DENSO_REGULAR.woff) format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: denso-en;
  src: url(../fonts/ORIG_DENSO_BLACK_BOLD.woff) format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: denso-en;
  src: url(../fonts/ORIG_DENSO_BLACK.woff) format("woff");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
/* ==========================================================
   トークン(Figma実測値の一元管理)
   ========================================================== */
:root {
  /* 罫線 */
  --m-line: var(--wp--preset--color--line);
  --m-line-strong: var(--wp--preset--color--line-strong);
  --m-line-soft: var(--wp--preset--color--line-soft);
  --m-ui-border: var(--wp--preset--color--ui-border);
  /* ブランド */
  /* 原稿のグラデーション(色の等値線は第2ハンドル方向に平行)。
     ストップ位置は要素サイズに依らず一定で、**角度だけ**が縦横比で変わる。
     算出は `rasterize.py` の gradient_css()。 */
  --m-grad-stops: var(--wp--preset--color--accent-cyan) 0.76%, var(--wp--preset--color--accent-pink) 96.62%;
  /* ⚠ **この角度を差し替えられるのは `:root` だけ**(規律115)。
     下の `--m-grad` は var() を含むので **ここで置換されてリテラルに畳まれ**、
     子孫はその畳んだ文字列を継承する。子で `--m-grad-angle` を書いても届かない。
     要素ごとに角度を変えたくなったら、合成をその要素側へ降ろすこと。 */
  --m-grad-angle: 132.5deg; /* 英字見出し(横長)の既定。実際に全節がこれで出ている */
  --m-grad: linear-gradient(var(--m-grad-angle), var(--m-grad-stops));
  /* ヘッダー。
     ⚠ 原稿の実測値は **theme.json の settings.custom が出所**。ここは受け皿。
     同じ数値を2箇所に書くと、片方だけ直したときに黙って食い違う
     (実際 `radius.card`(theme.json 16px)と `--m-card-radius`(8px)が
     食い違ったまま放置されていた)。SP 値は原稿が別カンプなのでここで持つ。 */
  --m-header-h: var(--wp--custom--header--height);
  --m-header-h-sp: 60px; /* Figma SP-header */
  --m-header-logo-w: var(--wp--custom--header--logo-width);
  --m-header-logo-w-sp: 96px; /* Figma SP-header のロゴ */
  --m-header-nav-gap: 40px;
  /* 大画面(原稿の1440超)で「中身の広がりを止める」幅。
     版面は 1120(theme.json contentSize)。原稿ではヘッダーが左右120px、
     パンくずが左右80px だけ版面より外側にあるので、その分を足した値で頭打ちにする。
     これを超える幅では地色だけ全幅で、中身は版面と同じく中央に寄る。 */
  --m-shell-header: 1360px; /* 1120 + 120*2 */
  --m-shell-crumb: 1280px; /* 1120 + 80*2 */
  /* ページヘッダー */
  --m-ph-h: 240px;
  --m-ph-h-sp: 160px;
  --m-crumb-h: 24px;
  /* 新着情報レイアウト(数値の出所は theme.json の settings.custom.news) */
  --m-news-side-w: var(--wp--custom--news--side-width);
  --m-news-col-gap: var(--wp--custom--news--column-gap);
  --m-news-thumb-w: var(--wp--custom--news--thumb-width);
  --m-news-thumb-h: var(--wp--custom--news--thumb-height);
  --m-news-item-gap: 24px;
  /* 本文ブロック */
  --m-body-lh: 1.7857; /* Figma 14px/25 */
  --m-h-rule: 2px;
  --m-h2-accent-w: 40px;
  /* TOP の装飾係留(超ワイドで画面端に散らばらせない) */
  --m-anchor-half: 700px;
  --m-canvas-half: 720px; /* 原稿カンバス 1440 の半分。版面外へ抜ける装飾の右端 */
  /* ---------- ホバーの寄り(2026-08-05 ユーザ指定)----------
     「いずれのリンクも、矢印もしくは＞記号が、**その向き**にホバー中は動く」。
     色は反転させない(原稿の配色を変えない)。動くのは**あしらいだけ**。

     向きは素材の幾何そのもの(`fig.py svg` が出した viewBox で確定):
       `fg-arrow-*` / `fg-cat-arrow-*`  … 15.95x14 の `>` = **右向き** → translateX
       `fg-chev-*` / `fg-faq-chev`      … 10x6 の `∨`    = **下向き** → translateY
     丸の中に敷いてある山形・矢印は要素ごと動かすと**丸まで動く**ので、
     `background-position` を動かして中身だけ寄せる。

     ⚠ 動かす側の部品は `components/*` の自分のファイルに書く(規律61)。
       ここに置くのは**量と間合いだけ**。 */
  --m-nudge: 4px; /* 矢印(→)。文字から離れた位置にあるので大きめ */
  --m-nudge-sm: 3px; /* 山形(∨)。25〜28px の丸に収まるので小さめ */
  --m-nudge-xs: 2px; /* 8x4 の極小山形(夢卵とはのボタン)*/
  --m-nudge-ease: 0.25s cubic-bezier(0.22, 0.61, 0.36, 1); /* ふわっと出て静かに止まる */
  /* ---------- ホバーの走査(2026-08-05 ユーザ指定)----------
     「矩形ボタンの内部を、半透明の青・赤の平行四辺形が左から右に走り抜ける」。
     矢印の寄り(上の `--m-nudge`)とは**別軸**で、両方が同時に走る。

     なぜこの形か: **背景装飾と同じ語彙**を借りている。TOP の `.m-deco__i` は
     青(#0093c0)と赤(#e6002d)の平行四辺形が半透明で散っていて、`m-deco-in` で
     横から寄ってくる。同じ色・同じ傾き・同じ「移動」をボタンの中でやる。

     実装は **`background-image` の位置送り**。理由:
       ・疑似要素が足りない。矢印(`::after`)と丸(`::before`)で**両方埋まっている**
         ボタンがある(`.m-catbtn--outline` / `.m-abtbtn`)
       ・`background-image` は角丸で自動的にクリップされる(`overflow` を触らなくてよい)
       ・DOM を1つも増やさない = ブロックの `save` に影響しない(規律23)

     傾き: 装飾の平行四辺形は clip-path で上底が右にずれる形(= 右に倒れる)。
     グラデーションの帯は進行方向に垂直なので、97deg で同じ向きに倒れる。

     ⚠ **傾きは「見た目の好み」では決められない**(2026-08-05 ユーザ指摘)。
       帯は `background-size` の箱の**左右端で垂直に切られる**。倒すほど帯は
       `高さ × tan(傾き)` だけ横にずれるので、**背の高い部品では箱の幅を食い破る**。
       初版の 105deg(垂直から15°)は、TOP のカテゴリカード(265x294 / 箱 122px 幅)で
       ずれが 79px にもなり、**青い帯の左側が切り落とされていた**。

       切られない条件(θ=グラデ角 / w=箱の幅 / h=要素の高さ / L=|sinθ|w+|cosθ|h):
           帯の開始 f1 ≧ |cosθ|·h / L      帯の終了 f2 ≦ |sinθ|·w / L
       全部品(最も厳しいのは m-catcard と m-workcard)で解くと安全域は
           105deg → 40.5〜59.5%(19.0%しかない)
            97deg → 23.8〜76.2%(52.5%)
       なので **97deg** にし、色の帯を 28〜66% に収めた。
       `hovernudge.js` がこの不等式を全部品で検算する。

     ⚠ 静止時は**版面の外**に置く(下の計算)。1px も見えてはいけない:
         画像幅 = 0.46W / 位置 x = (W − 0.46W) × p = 0.54W × p
         p=-150% → x=-0.81W(右端 -0.35W)… 完全に左の外
         p= 250% → x= 1.35W          … 完全に右の外 */
  --m-sweep-w: 46%;
  --m-sweep-from: -150%;
  --m-sweep-to: 250%;
  --m-sweep-angle: 97deg;
  --m-sweep-img: linear-gradient(var(--m-sweep-angle),
  	transparent 0 28%,
  	rgba(0, 147, 192, 0.28) 28% 41%,
  	transparent 41% 53%,
  	rgba(230, 0, 45, 0.28) 53% 66%,
  	transparent 66% 100%);
  /* ---------- ベタ塗りのボタン用(2本目の色と濃さを変える)----------
     ⚠ **白地用の帯をベタ塗りの上に乗せると濁る**(2026-08-05 ユーザ指摘
       「真っ赤・真っ黒背景の上を走る菱形の色が汚い」)。理由は2つ:
         ・`accent-cyan`(#0093C0)は**それ自体が暗い**。黒の上では沈む
         ・不透明度 .28 では地色が透けすぎて、地色と混ざった中間色になる
       → **同系で明るい色**に置き換え、不透明度を上げる。装飾の語彙(青と赤)は保つ:
         青 `accent-cyan`(#0093C0) → `cat-blue`(#46A0D6)
         赤 `accent-red`(#E6002D)  → `accent-pink`(#FF4469。装飾のグラデにも使う色)

     **真っ赤な地**(ヘッダーの「参加・投票する」/ フォームの送信)。
     赤地に赤は乗らないので2本目は白。 */
  --m-sweep-img-onred: linear-gradient(var(--m-sweep-angle),
  	transparent 0 28%,
  	rgba(70, 160, 214, 0.62) 28% 41%,
  	transparent 41% 53%,
  	rgba(255, 255, 255, .58) 53% 66%,
  	transparent 66% 100%);
  /* **真っ黒(#333)・カテゴリ色などのベタ塗り**(「詳しく見る」/ 現在のタブ)。
     ここは赤も乗るので、装飾どおり青と赤の2本にする。 */
  --m-sweep-img-ondark: linear-gradient(var(--m-sweep-angle),
  	transparent 0 28%,
  	rgba(70, 160, 214, 0.62) 28% 41%,
  	transparent 41% 53%,
  	rgba(255, 68, 105, 0.62) 53% 66%,
  	transparent 66% 100%);
  /* ---------- 走る速さ ----------
     ⚠ **`--m-sweep-dur` は「速さ」ではなく「所要時間」**。移動量は
       `(要素幅 − 帯幅) × (250% − (−150%))` = **ボタン幅に比例**する。
       だから固定秒だと**大きいボタンほど速く見える**(2026-08-05 ユーザ指摘①)。

     ⚠ それを「幅に正比例」で揃えたら、今度は**立ち上がりが遅い**と出た(指摘②)。
       帯は版面の外(左)から入ってくるので、**押してから帯が見え始めるまでの
       空走距離も幅に比例する**。速さを完全に揃えると空走時間まで比例して伸び、
       540px のカードでは 0.54 秒も「何も起きない」時間ができていた。

     → **幅の増加より秒数の増加をゆるくする**。切片を持たせた1次式:

           秒数 = 0.341 + 0.002461 × 幅(px)

       93px(最小のタブ)= 0.57s は据え置き / 540px(最大のカード)= 1.67s。
       旧式(幅 ÷ 162)では 540px が 3.33s だったので、**最大サイズでちょうど2倍速**
       (ユーザ指定)。空走時間も 0.54s → 0.27s に半減する。
       大きいボタンほど「やや速い」が、立ち上がりの体感はこちらのほうが揃う。

     部品ごとに自分の実測幅から出した秒数を持つ(下の既定値は 240px 級のピル用)。
     幅を変えたら秒数も見直す(`hovernudge.js` が実測の帯の位置を出す)。 */
  --m-sweep-dur: 0.93s;
}

/* 動きを減らす設定のときは**量を 0 にするだけ**で全部の寄りが止まる。
   部品ごとに `@media` を書くと書き漏らしが出るので、出所を1箇所にする。
   ⚠ `0` ではなく `0px`。`calc(50% + 0)` は無単位が混ざって**無効**になる
     (`background-position` を使う部品が黙って初期値に落ちる)。 */
@media (prefers-reduced-motion: reduce) {
  :root {
    --m-nudge: 0px;
    --m-nudge-sm: 0px;
    --m-nudge-xs: 0px;
    /* 走査は**行き先を出発点と同じ**にする(= 動かない)。
       画像を `none` にしないのは、`background-image` の有無が
       トランジションではなく再描画になるため。位置を揃えるほうが確実。 */
    --m-sweep-to: -150%;
    --m-sweep-dur: 0s;
  }
}
/* ==========================================================
   コア競合の上書き(.muran-theme スコープ / !important を使わない)
   ========================================================== */
/* ==========================================================
   レイアウト衛生
   ========================================================== */
/* テンプレート直下のセクションは自前で余白を持つ(ヘッダー→ページヘッダー→パンくず→main
   →フッターが密着する設計)。コアは `.wp-site-blocks > * + *` に blockGap を入れるので外す。 */
:is(.muran-theme, .editor-styles-wrapper) .wp-site-blocks > * + * {
  margin-block-start: 0;
}

.wp-element-button {
  /* ボタン文言は改行させない(狭幅で「参加・投票す/る」と縦割れする事故防止) */
  white-space: nowrap;
}

.wp-block-navigation a {
  white-space: nowrap;
}

@media (min-width: 1120px) and (max-width: 1199px) {
  :root {
    zoom: 0.87;
  }
}
@media (min-width: 1040px) and (max-width: 1119px) {
  :root {
    zoom: 0.81;
  }
}
@media (min-width: 960px) and (max-width: 1039px) {
  :root {
    zoom: 0.75;
  }
}
@media (min-width: 880px) and (max-width: 959px) {
  :root {
    zoom: 0.68;
  }
}
@media (min-width: 800px) and (max-width: 879px) {
  :root {
    zoom: 0.62;
  }
}
@media (min-width: 782px) and (max-width: 799px) {
  :root {
    zoom: 0.61;
  }
}
:root {
  --m-vw-unit: 1vw;
}

@media (min-width: 1120px) and (max-width: 1199px) {
  :root {
    --m-vw-unit: calc(1vw / 0.87);
  }
}
@media (min-width: 1040px) and (max-width: 1119px) {
  :root {
    --m-vw-unit: calc(1vw / 0.81);
  }
}
@media (min-width: 960px) and (max-width: 1039px) {
  :root {
    --m-vw-unit: calc(1vw / 0.75);
  }
}
@media (min-width: 880px) and (max-width: 959px) {
  :root {
    --m-vw-unit: calc(1vw / 0.68);
  }
}
@media (min-width: 800px) and (max-width: 879px) {
  :root {
    --m-vw-unit: calc(1vw / 0.62);
  }
}
@media (min-width: 782px) and (max-width: 799px) {
  :root {
    --m-vw-unit: calc(1vw / 0.61);
  }
}
.muran-header {
  min-height: var(--m-header-h);
  /* Figma: ロゴ x=40 / 高さ96。下罫線1pxを高さに含めるため下 padding を 23 にする
     (原稿の Line 62 は y=96 に引かれており、ヘッダー全体で 96px) */
  padding: 24px 40px 23px;
  /* 大画面(>1440)でロゴとCTAが画面の左右端まで離れていくのを止める。
     地色は全幅のまま、**中身だけ**を版面と同じ理屈で中央に寄せる。
     原稿(1440)ではヘッダーの中身 40..1400 が版面 160..1280 の
     左右 120px 外側にある。その関係を広い幅でも保つ = 1120+240 = 1360 で頭打ち。
     `vw` ではなく `%` を使う(スクロールバーの分だけ版面とズレるのを避ける)。
     `--m-header-pad` は原稿値 40px。狭い幅では下の @media が詰める。 */
  --m-header-pad: 40px;
  padding-inline: max(var(--m-header-pad), (100% - var(--m-shell-header)) / 2);
  border-bottom: 1px solid var(--m-line-strong);
  background: var(--wp--preset--color--base);
}

/* ⚠ **ロゴは縮ませない。** ヘッダーは `flexWrap:nowrap` の flex なので、
   中身が入りきらないと flex は**どれかを縮めて**帳尻を合わせる。
   `figure` は既定で `flex-shrink:1` なので、真っ先にロゴが縮む。

   2026-08-02 に English を足して実測したとき、これが起きていた:
   ナビのラベルは**1行のまま**で、代わりに **ロゴが 124px → 42.5px(1120幅)**
   まで潰れた。「タイトルが2行になっていないか」だけを見る検査は**素通りする**し、
   横スクロールも出ないので、5幅検証も sweep も通ってしまう。

   縮まない側を固定して、**入りきらないときはナビのラベルが折れる**ようにする。
   折れれば目で見て分かるし `navmeasure` 系の検査にも出る。 */
.muran-logo,
.muran-header .wp-block-buttons {
  flex-shrink: 0;
}

/* ==========================================================
   2026 非表示 — 「参加・投票する」(先方指示 2026-08-07)
   ==========================================================
   **1コンテンツの応募・投票導線を全ページから張る必要は無い**という判断。
   次回夢卵で戻せるように、ボタンも参加ダイアログも**マークアップは残したまま**
   CSS 1本で消す(`src/templates/parts/header.php`)。
   → `grep -rn '2026 非表示' src/scss/`

   ⚠ 消すのは `.muran-join-open`(ボタン)ではなく **`.wp-block-buttons`(入れ物)**。
     ボタンだけ消すと空の入れ物が残り、ナビとの gap ぶんだけ**ナビが左にずれる**。
   ⚠ この宣言は下の SP 用(≤781)の同じ規則より**前**に置く。後ろに置くと
     `cascade.js` が「@media の宣言が死んでいる」として拾う。 */
.muran-header .wp-block-buttons {
  display: none;
}

.muran-logo img {
  width: var(--m-header-logo-w);
  height: auto;
}

.muran-header .wp-block-navigation {
  font-size: var(--wp--custom--font-size--15);
  font-weight: 700;
  letter-spacing: 0.1em;
}

.muran-header .wp-block-navigation .wp-block-navigation__container {
  gap: var(--m-header-nav-gap);
}

/* ============================ 横方向の予算 ============================
   ここが**このファイルでいちばん壊れやすい**ので、数字の出どころを全部書く。

   ヘッダーは1本の flex 行で、入りきらないと黙って何かが潰れる(規律80)。必要幅は

     左右余白×2 + 124(ロゴ) + ロゴ→右の塊 + ナビ + ナビ→CTA + 179.2(CTA)

   ナビの中身(実測・15px/700/字間0.10em):

     ラベル  デンソー夢卵とは 132.3 / コンテンツ 82.8 / イベント 65.4 /
             来場案内 66.0 / 新着情報 66.0 / お問い合わせ 99.1 / **English 60.8**
             = 572.4
     山形    3個 ×(10 + 山形の隙間)
     項目間  6隙間 × ナビ間隔

   2026-08-02 に「English」(60.8 + 隙間1つ)が増えて、予算が **61px + 1隙間**太った。
   原稿値のままだと **1201.6px 必要**で、境目 1120px には収まらない。

   **ユーザ判断(2026-08-02): 縮んで1列に入るならそれでよい。
     タブレット(iPad 横 1180〜1194)でハンバーガーにしなくてよい。**

   → 原稿値から**5つを線形に詰める**ことで 1120px に収めた:

     |                | @1120 | @1440(原稿) |
     |----------------|-------|--------------|
     | 左右余白        |  20   |  40          |
     | ロゴ→右の塊     |  16   |  16 ※       |
     | 山形の隙間      |   8   |  16          |
     | ナビ項目の間隔  |  16   |  40          |
     | ナビ→CTA        |  24   |  45          |

     必要幅 @1120 = **1105.6**(余り 14.4)/ @1280 = 1224.1(余り 55.9)
             @1440 = **1342.6**(余り 97.4)= **原稿幅では原稿値そのまま**

   ※ ロゴ→右の塊は `blockGap`(→ `src/templates/parts/header.php`)。
     ヘッダーは `space-between` なので**これは下限にしか効かない**
     (1440 では実測 121px 空く)。下限が効くのは 1250px 未満だけなので、
     16px の一定値にしてある = 詰める必要がない。

   ⚠ 13インチ Mac(1280 / 1440 / 1470)は**全部余裕がある側**。
     ユーザ指定「13インチで**タイトルが2行にならない**」の根拠がこの表。

   ⚠ 詰める帯は**段差を作らない**。1120 の値から 1440 の原稿値へ線形に戻す。
     1440 以上は clamp の上限=原稿値なので一切変わらない。
     `100vw` はスクロールバーを含むぶん数px大きく出るが、余りの範囲に収まる。

   ⚠ 変えたら **`node site/setup/verify/navfit.js`** を通す(規律80)。
     入りきらなくなっても**横スクロールには出ない**。
   ==================================================================== */
/* ナビ→CTA の間隔(Figma: ナビ右端1178 → ボタン左端1223 = 45px)。
   ⚠ **この基底は下の @media より前に置く。** @media は詳細度を上げないので、
   後ろに置くと同じ (0,2,0) で常に勝ってしまい、$bp-nav〜1439 の clamp が
   1文字も効かなくなる(2026-08-01 に `cascade.js` が検出。それまで効いていなかった)。 */
.muran-header > .wp-block-group {
  gap: 45px;
}

@media (min-width: 782px) and (max-width: 1439px) {
  .muran-header {
    /* 320px($bp-nav-tight 1120 → 1440)で増える量から傾きを出す。
       ⚠ 起点は `$bp-nav`(ハンバーガーの境目)**ではない** → `_breakpoints.scss`。
       タブレット幅(zoom の帯)では `100vw - 1120px` が負になり最小値に張り付くが、
       その帯の実効幅は 1280 以上あるので最小値でも余裕で入る。 */
    --m-header-pad: clamp(20px, calc(20px + (100vw - 1120px) / 16), 40px); /* +20 */
    --m-header-chev-gap: clamp(8px, calc(8px + (100vw - 1120px) / 40), 16px); /* +8  */
    --m-header-nav-gap: clamp(16px, calc(16px + (100vw - 1120px) * 3 / 40), 40px); /* +24 */
  }
  .muran-header > .wp-block-group {
    gap: clamp(24px, 24px + (100vw - 1120px) * 21 / 320, 45px); /* +21 */
  }
}
/* 言語の入口(`.muran-lang`)は **components/lang** に置いてある。
   ヘッダーとフッターの両方に出るので、どちらか片方のファイルに書くと
   同じ部品が2ファイルに散る(規律61)。 */
/* ドロップダウンの山形。原稿は 10x6(線幅込み)でラベルから 16px 離れる。
   コアの既定は 6x6 相当のSVGを 0 間隔で置くので、原稿のSVGに差し替えて間隔を作る。 */
/* コアは `.wp-block-navigation__submenu-icon` に margin-left:-9px を当てるので、
   .muran-theme を足して (0,3,0) にして勝つ */
:is(.muran-theme, .editor-styles-wrapper) .muran-header .wp-block-navigation__submenu-icon {
  width: 10px;
  height: 6px;
  /* 原稿は 16px。狭い幅では上の @media が詰める(横方向の予算)。 */
  margin-left: var(--m-header-chev-gap, 16px);
  background: url(../img/fg-chev-dark.svg) center/10px 6px no-repeat;
  transition: transform var(--m-nudge-ease);
}

/* ホバー中は山形が向いている方(下)へ寄る(→ `_01-tokens` の `--m-nudge-sm`)。
   下にパネルが開くので、向きと動きと結果が一致する。
   ⚠ 見るのは**項目**(`.has-child:hover`)。山形は 10x6 しかないので、
     山形自身を見ると「メニューには乗っているのに動かない」になる。
   ⚠ この山形は `<button>`(`openSubmenusOnClick:false` でコアが別に出す)。
     動かすのは `transform` だけなので当たり判定は変わらない(規律69)。 */
@media (hover: hover) {
  :is(.muran-theme, .editor-styles-wrapper) .muran-header .wp-block-navigation-item.has-child:hover .wp-block-navigation__submenu-icon {
    transform: translateY(var(--m-nudge-sm));
  }
}
:is(.muran-theme, .editor-styles-wrapper) .muran-header .wp-block-navigation__submenu-icon svg {
  display: none;
}

.muran-header .wp-block-navigation .wp-block-navigation-item__label {
  line-height: 1.4667; /* Figma 15/22 */
}

/* ハンバーガー開閉ボタン: Figmaの赤3本線/赤× */
.wp-block-navigation__responsive-container-open,
.wp-block-navigation__responsive-container-close {
  color: var(--wp--preset--color--brand-red);
}

.wp-block-navigation__responsive-container-open svg,
.wp-block-navigation__responsive-container-close svg {
  width: 34px;
  height: 34px;
}

/* ---------- ハンバーガーが出る幅(≤ $bp-nav-max) ---------- */
@media (max-width: 781px) {
  /* 横並びナビを隠し、ハンバーガーを出す(コアが >600px で開くボタンを隠すため上書き) */
  :is(.muran-theme, .editor-styles-wrapper) .muran-header .wp-block-navigation__responsive-container:not(.is-menu-open) {
    display: none;
  }
  :is(.muran-theme, .editor-styles-wrapper) .muran-header .wp-block-navigation__responsive-container-open:not(.always-shown) {
    display: flex;
  }
  .muran-header {
    flex-wrap: nowrap;
  }
}
/* SPヘッダー(Figma SP-header: 390x60 / pad16,20 / ロゴ96x28 / 赤3本線24x2 gap7 / 下罫線#EDEDED)。
   ハンバーガーが出る幅と同じ ≤ $bp-nav-max に適用する。
   以前は ≤599px 限定だったため 600〜1119px でロゴがPCサイズのまま残り「勝手に巨大化」して見えていた。

   ⚠ 2026-08-02 に English を足したとき、いったんこの境目を 1219 へ上げたが
     **ユーザ判断で 1119 に戻した**(「縮んで1列に入るならそれでよい。
     タブレットでハンバーガーにしなくてよい」)。iPad 横向き(1180〜1194)は
     **横並びのグロナビのまま**。収め方は上の「横方向の予算」。 */
@media (max-width: 781px) {
  :is(.muran-theme, .editor-styles-wrapper) .muran-header {
    min-height: var(--m-header-h-sp);
    padding: 16px 20px;
    border-bottom-color: var(--m-line);
  }
  .muran-logo img {
    width: var(--m-header-logo-w-sp);
  }
  /* CTAはSPデザインではヘッダーに無い。中間幅でも出すとヘッダーが 81px になり
     SPヘッダー(60px)と食い違うので、ハンバーガーと同じ幅で外す。 */
  .muran-header .wp-block-buttons {
    display: none;
  }
  /* ハンバーガー(Figma: 24x2px の #FE0000 が3本・間隔7px)。
     コアのSVGは2本線に見える描画になるため、自前で3本線を描く。 */
  :is(.muran-theme, .editor-styles-wrapper) .muran-header .wp-block-navigation__responsive-container-open {
    width: 24px;
    height: 16px;
    padding: 0;
    background-image: linear-gradient(var(--wp--preset--color--brand-red) 0 0), linear-gradient(var(--wp--preset--color--brand-red) 0 0), linear-gradient(var(--wp--preset--color--brand-red) 0 0);
    background-size: 24px 2px;
    background-position: 0 0, 0 7px, 0 14px;
    background-repeat: no-repeat;
  }
  .muran-header .wp-block-navigation__responsive-container-open svg {
    display: none;
  }
}
@media (min-width: 782px) {
  /* ナビ項目の下端(ヘッダー96 の中で 24 + (48 − 27)/2 + 27 = 61.5)から
     原稿のパネル上端 112 まで。ラベルの行送りを変えたらここも変わる。 */
  .muran-header {
    --m-navpanel-gap: 50.5px;
  }
  /* ==========================================================
     ① 隙間を埋める(見えない)— これが無いとパネルに手が届かない
     ========================================================== */
  /* ⚠ **`[aria-expanded="true"]` も要る**(2026-08-02)。
     マウスの無い端末では hover が起きないので、親を押して開く経路を足した
     (→ `assets/js/muran.js`「グロナビの親項目」)。押して開いた状態は
     `:hover` でも `:focus-within` でもなく、コアが開閉ボタンに立てる
     `aria-expanded` でしか分からない。ここを足さないと
     **押しては開くが、パネルへ動かす途中の隙間で閉じる**。 */
  .muran-header .wp-block-navigation-item.has-child:hover::after,
  .muran-header .wp-block-navigation-item.has-child:focus-within::after,
  .muran-header .wp-block-navigation-item.has-child:has(> .wp-block-navigation-submenu__toggle[aria-expanded=true])::after {
    content: "";
    position: absolute;
    top: 100%;
    /* **パネルと同じ幅で受ける**。ナビ項目の幅(91px)しか無いと、
       パネルの左右の端へ斜めに動いたときに外れて閉じる */
    left: 50%;
    transform: translateX(-50%);
    width: var(--m-navpanel-w);
    height: var(--m-navpanel-gap);
    /* ⚠ **これが無いと隙間の下半分でメニューが閉じる。**
       ヘッダーは本文より前にあるので、`z-index:auto` のままだと
       ヘッダー下端(96)から先は**本文側の位置指定要素が上に乗って**
       ポインタを奪う(実測: y=98 で当たりが `.m-sec` に移り、そこで閉じていた)。
       霞み(10)と同じ層まで上げる。見えないので見た目には出ない。 */
    z-index: 11;
  }
  /* ==========================================================
     ② 開いている間はページ側を白く霞ませる
        原稿 `メニューBG`(0,96) 1440x672 = 白50% + BACKGROUND_BLUR 20
        (Figma の 20 は CSS の blur(10px) 相当)。
        ヘッダーの下端から画面の下まで。**パネルより奥・ページより手前**。
     ========================================================== */
  .muran-header:has(.wp-block-navigation-item.has-child:hover)::after,
  .muran-header:has(.wp-block-navigation-item.has-child:focus-within)::after,
  .muran-header:has(.wp-block-navigation-item.has-child > .wp-block-navigation-submenu__toggle[aria-expanded=true])::after {
    content: "";
    position: fixed;
    left: 0;
    right: 0;
    top: var(--m-header-h);
    bottom: 0;
    z-index: 10;
    pointer-events: none;
    background: rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(10px);
  }
  /* ==========================================================
     ③ パネル本体 — 原稿 245x233 / r16 / 影 #000@8% blur16
     ========================================================== */
  /* パネルの幅。**原稿は3つとも 245**。
     🔴 コンテンツだけ 296 に広げてある(2026-08-21 指定⑤)。
     「ソフトウェアチャレンジコンテスト」(16文字)は項目の中身 197 に**1行で入らず**、
     コアの `white-space: nowrap` のままだとパネルの外へはみ出して矢印を押し出す。
     折り返しを許すと「…チャレンジコ / ンテスト」と**語の途中で切れる**ので、
     **パネルの側を項目の自然幅に合わせた**(ラベル235 + 矢印10.85 + 余白2.2 = 248 に、
     ラベルと矢印が触れないよう 16 足して項目 264 / + 左右パディング48 = **312**)。
     ⚠ 幅は**受け皿(隙間を埋める `::after`)にも同じ値**が要る。別々に持つと、
       パネルの端へ斜めに動いたときだけメニューが閉じる(規律69 と同じ型)。
       → 親項目に置いた1つの変数を両方が読む。 */
  /* ⚠ **どちらも `<li>` に置く**(受け皿の `::after` は `<li>` の疑似要素で、
       パネルの `<ul>` は `<li>` から継承する)。しかも `muran-sub--*` は
       **`<li>` と `<ul>` の両方に付く**ので、`.muran-sub--contents` だけで書くと
       `<ul>`(0,2,0)には効くのに `<li>` では既定(0,3,0)に負け、
       **パネルだけ広がって受け皿が 245 のまま**になる(実測で踏んだ:
       ドロップダウンは広いのに、左右の端へ動くと途中で閉じた)。 */
  .muran-header .wp-block-navigation-item.has-child {
    --m-navpanel-w: 245px;
  }
  .muran-header .wp-block-navigation-item.has-child.muran-sub--contents {
    --m-navpanel-w: 312px;
  }
  :is(.muran-theme, .editor-styles-wrapper) .muran-header .wp-block-navigation .has-child > .wp-block-navigation__submenu-container {
    top: calc(100% + var(--m-navpanel-gap));
    /* 上の霞み(10)より手前。ページ側の最大は `.m-contest__sticker` の 3 */
    z-index: 11;
    /* 原稿はナビ項目(ラベル+山形)の中央に対して左右対称に置かれている */
    left: 50%;
    transform: translateX(-50%);
    box-sizing: border-box;
    width: var(--m-navpanel-w);
    min-width: 0;
    padding: 8px 24px 1px;
    border: none;
    border-radius: 16px;
    background: #ffffff;
    box-shadow: 0 0 16px rgba(0, 0, 0, 0.08);
  }
  /* ==========================================================
     ④ 項目 197x56 — ラベル / 赤い矢印 / 点線の仕切り
     ========================================================== */
  :is(.muran-theme, .editor-styles-wrapper) .muran-header .wp-block-navigation .has-child > .wp-block-navigation__submenu-container > .wp-block-navigation-item {
    /* 原稿 197 = パネル 245 − 左右パディング 48。**パネル幅から引いて作る**
       (直値で持つと ③ の `--m-navpanel-w` を広げても項目が 197 のまま = 規律89)。 */
    width: calc(var(--m-navpanel-w) - 48px);
  }
  :is(.muran-theme, .editor-styles-wrapper) .muran-header .wp-block-navigation .has-child > .wp-block-navigation__submenu-container > .wp-block-navigation-item > .wp-block-navigation-item__content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
    width: 100%;
    height: 56px;
    /* 原稿はラベルも矢印も項目の中心より 2px 上にある。
       下に 4px 余らせて「中身の箱 52」を作り、その中央に置くと原稿に合う */
    padding: 0 0 4px;
    font-size: var(--wp--preset--font-size--small);
    font-weight: 400;
    line-height: 16px;
    letter-spacing: 0.05em;
    color: #333;
    text-decoration: none;
    /* 仕切り: 項目の下端から 1.8 上に 3on/3off の点線。
       `border-bottom: dashed` は刻みがブラウザ任せなので使わない */
    background: repeating-linear-gradient(to right, #d9d9d9 0 3px, transparent 3px 6px) left bottom 1.8px/100% 1px no-repeat;
  }
  /* 原稿では最後の項目の矩形が visible:false = 仕切りが無い */
  :is(.muran-theme, .editor-styles-wrapper) .muran-header .wp-block-navigation .has-child > .wp-block-navigation__submenu-container > .wp-block-navigation-item:last-child > .wp-block-navigation-item__content {
    background-image: none;
  }
  /* 赤い矢印。**この寸法のまま Figma から出した SVG**(縮めると線が細って別物になる) */
  :is(.muran-theme, .editor-styles-wrapper) .muran-header .wp-block-navigation .has-child > .wp-block-navigation__submenu-container > .wp-block-navigation-item > .wp-block-navigation-item__content::after {
    content: "";
    flex: 0 0 auto;
    width: 10.85px;
    height: 9.37px;
    margin-right: 2.2px;
    background: url(../img/fg-arrow-red-sub.svg) center/100% 100% no-repeat;
    transition: transform var(--m-nudge-ease);
  }
  /* ホバー中は矢印が右へ寄る(→ `_01-tokens` の `--m-nudge`)。
     ⚠ パネルはタップでも開く(規律86)ので、`hover:hover` で囲わないと
       タップした項目が寄ったまま残る。sass が `and` で合成する。 */
}
@media (min-width: 782px) and (hover: hover) {
  :is(.muran-theme, .editor-styles-wrapper) .muran-header .wp-block-navigation .has-child > .wp-block-navigation__submenu-container > .wp-block-navigation-item > .wp-block-navigation-item__content:hover::after {
    transform: translateX(var(--m-nudge));
  }
}
@media (min-width: 782px) {
  /* ==========================================================
     ⑤ キャラクター — 参加ダイアログと同じ原画(`fg-modal-char-l/r.png`)。
        **原画はまだ Coming Soon のプレースホルダ**なので正規アセットで差し替わる。
        パネルからはみ出すが、コアは開いている間だけ `overflow:visible` にするので
        閉じている間(height:0 / visibility:hidden)は一緒に隠れる。
     ========================================================== */
  :is(.muran-sub--contents, .muran-sub--events) > .wp-block-navigation__submenu-container::before,
  :is(.muran-sub--events, .muran-sub--access) > .wp-block-navigation__submenu-container::after {
    content: "";
    position: absolute;
    pointer-events: none;
    background: center/contain no-repeat;
  }
  /* 左のキャラ(66x62.8)— パネルの左下から外へはみ出す */
  :is(.muran-sub--contents, .muran-sub--events) > .wp-block-navigation__submenu-container::before {
    width: 66px;
    height: 62.8px;
    background-image: url(../img/fg-modal-char-l.png);
  }
  .muran-sub--contents > .wp-block-navigation__submenu-container::before {
    left: -40.8px;
    bottom: -16.7px;
  }
  .muran-sub--events > .wp-block-navigation__submenu-container::before {
    left: -40px;
    bottom: -22.8px;
  }
  /* 右のキャラ(57.5x53.5)— 3件目の行の右、パネルの縁にまたがる。
     矢印(右端から 2.66〜12.8)とは重ならない(キャラは左端から +223) */
  :is(.muran-sub--events, .muran-sub--access) > .wp-block-navigation__submenu-container::after {
    width: 57.5px;
    height: 53.5px;
    right: -35.5px;
    top: 131px;
    background-image: url(../img/fg-modal-char-r.png);
  }
}
/* コアが .is-menu-open に background-color:inherit を同格(0,2,0)で当て、
   コアCSSが後に出力されるため同格では負ける。親クラスを足して (0,4,0) にする。
   上60pxを白帯にしてヘッダーを見せ、その下だけ赤にする。 */
:is(.muran-theme, .editor-styles-wrapper) .muran-header .wp-block-navigation__responsive-container.is-menu-open {
  background-color: transparent;
  background-image: linear-gradient(to bottom, #ffffff 0, #ffffff var(--m-header-h-sp), var(--wp--preset--color--accent-red) var(--m-header-h-sp));
  color: #ffffff;
  padding: 0;
  align-items: flex-start;
}

/* 白帯の下辺罫線とロゴ(オーバーレイがヘッダーを覆うため、ここに再掲する) */
.wp-block-navigation__responsive-container.is-menu-open::before {
  content: "";
  position: absolute;
  top: calc(var(--m-header-h-sp) - 1px);
  left: 0;
  right: 0;
  height: 1px;
  background: var(--m-line);
}

.wp-block-navigation__responsive-container.is-menu-open::after {
  content: "";
  position: absolute;
  top: 16px;
  left: 20px;
  width: 96px;
  height: 28px;
  background: url(../img/logo-header.png) left center/contain no-repeat;
}

/* 閉じる×: Figma は 19x19 の赤い2本線 */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
  position: absolute;
  top: 20px;
  right: 24px;
  color: var(--wp--preset--color--brand-red);
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close svg {
  width: 20px;
  height: 20px;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog {
  margin-top: 0;
  width: 100%;
}

:is(.muran-theme, .editor-styles-wrapper) .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
  padding: calc(var(--m-header-h-sp) + 48px) 20px 48px;
  width: 100%;
  align-items: stretch;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
  gap: 24px;
  width: 100%;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
  width: 100%;
}

/* セクション見出し(Figma: 16px/20 700 白) */
.wp-block-navigation__responsive-container.is-menu-open :is(.wp-block-navigation-item > a, .wp-block-navigation-submenu__toggle) {
  color: #ffffff;
  font-size: var(--wp--preset--font-size--medium);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: 0.05em;
}

/* 親は **リンク**、開閉は **右端の丸ボタン**。
   `openSubmenusOnClick` を false にした(= 親から `/contents/` `/events/` へ行けるようにした)ので、
   オーバーレイの1行は `<a>` と `<button class="…submenu-icon …__toggle">` の2要素になる。
   ボタンは PC では山形の背景画像だが、ここでは +/− の丸に作り替える。
   ⚠ このボタンは `.wp-block-navigation__submenu-icon` でもあるので、
     「アイコンを消す」規則を**そのまま**当てると SPで開けなくなる(実際に開けなくなった)。 */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.has-child {
  display: flex;
  /* コアはオーバーレイの項目を `flex-direction: column` にする。
     打ち消さないと **ラベルの下に丸が回り込む**(実際にそう出た)。 */
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.has-child > a {
  flex: 1 1 auto;
}

:is(.muran-theme, .editor-styles-wrapper) .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu__toggle {
  display: grid;
  place-items: center;
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
  margin: 0;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 50%;
  background: none;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu__toggle svg {
  display: none;
}

/* 開閉の目印。Figma の menu-open には明示のアイコンが無いが、
   アコーディオンの操作対象が分からなくなるため最小限の +/− を置く(要確認事項)。 */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu__toggle::after {
  content: "+";
  font-size: var(--wp--custom--font-size--13);
  font-weight: 400;
  line-height: 1;
  color: #ffffff;
}

/* サブメニューは行の下に丸ごと入れる(flex-wrap した2行目) */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.has-child > .wp-block-navigation__submenu-container {
  flex: 0 0 100%;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu__toggle[aria-expanded=true]::after {
  content: "−";
}

/* 閉時はサブメニューを隠す(コアが強制表示するため詳細度で対抗) */
:is(.muran-theme, .editor-styles-wrapper) .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu__toggle[aria-expanded=false] ~ .wp-block-navigation__submenu-container {
  display: none;
}

:is(.muran-theme, .editor-styles-wrapper) .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
  background: transparent;
  box-shadow: none;
  padding: 24px 0 0;
  min-width: 0;
  gap: 24px;
  position: static;
  opacity: 1;
  visibility: visible;
  width: 100%;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item {
  padding: 0;
}

/* サブメニューの左右パディング。コアが
   `.…is-menu-open:where(…) .…-content .has-child .…__submenu-container { padding-inline: 2rem }`
   を (0,5,0) で当ててくるので、`.has-child` を含めて同じ形で書かないと負ける
   (原稿は子リンクのテキストが x=36 = 版面20 + 山形5 + gap12。実装は 32px 余計に入っていた)。 */
:is(.muran-theme, .editor-styles-wrapper) .wp-block-navigation__responsive-container.is-menu-open .has-child .wp-block-navigation__submenu-container {
  padding-inline: 0;
}

/* 子リンク(Figma: 13px/16 400 白 + 左に白い山形 4x8、テキストは x=36 = 20+16) */
:is(.muran-theme, .editor-styles-wrapper) .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container a {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: var(--wp--custom--font-size--13);
  font-weight: 400;
  line-height: 1.2308;
  color: #ffffff;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container a::before {
  content: "";
  width: 5px;
  height: 5px;
  flex: 0 0 5px;
  border-top: 2px solid #ffffff;
  border-right: 2px solid #ffffff;
  transform: rotate(45deg);
}

/* ---------- ハンバーガーが出る幅(≤ $bp-nav-max) ---------- */
@media (max-width: 781px) {
  /* 閉じる×は 20x20(PC の 34x34 を上書き) */
  .wp-block-navigation__responsive-container-close svg {
    width: 20px;
    height: 20px;
  }
}
/* ==========================================================
   ① 基底(PC)+ あしらい — 旧 _06-page-header
   装飾は fillGeometry から生成した正確なSVG(手描き近似はしない)
   ========================================================== */
/* 縦中央寄せに grid(align-content)を使う。
   注意: flex/grid のアイテムは `margin-inline:auto` があると fit-content に縮むため、
   constrained レイアウトの「max-width:1120px + auto マージン」が中央寄せではなく
   縮小として効いてしまい、Figma の左端 x=160 揃えが崩れる。
   子に width:100% を与えて幅を確定させ、max-width で 1120 に収めることで解決する。 */
.muran-page-header {
  position: relative;
  min-height: var(--m-ph-h);
  display: grid;
  align-content: center;
  background-image: var(--m-grad);
  overflow: hidden;
  isolation: isolate;
}

:is(.muran-theme, .editor-styles-wrapper) .muran-page-header > * {
  width: 100%;
}

/* あしらい(平行四辺形)は **1枚ずつの要素**にして右から寄せる。
   出力時に `<i>` を合成する(`inc/page-header-deco.php`。幾何は gen-ph-deco.py が生成)。
   1枚絵の背景だった頃は ①動かせない ②`cover` なので幅ごとに拡大率が変わる、の2つがあった。

   **エディタのキャンバスは `render_block` を通らない**ので `<i>` が来ない。
   編集中の見えかたが変わらないよう、エディタでだけ元の1枚絵を敷き直す
   (カテゴリMVの `.editor-styles-wrapper .m-cathero::before` と同じ処置)。 */
.editor-styles-wrapper .muran-page-header::after {
  content: "";
  position: absolute;
  inset: 0;
  background: url(../img/page-header-deco.svg) center/cover no-repeat;
  pointer-events: none;
  z-index: -1;
}

/* `.muran-page-header` は constrained レイアウトなので、コアが **子全部**に
   `max-width:1120px + margin-inline:auto` を当てる。絶対配置でも効くので、
   打ち消さないとレイヤが 160..1280 に縮み、**版面の外に出る板が切り落とされる**
   (左端から差し込む1枚が丸ごと消えた)。 */
:is(.muran-theme, .editor-styles-wrapper) .m-phdeco {
  position: absolute;
  inset: 0;
  width: auto;
  max-width: none;
  margin: 0;
  /* 寄ってくる前の位置(帯の外)を隠す。1枚絵の SVG 枠が担っていた役割 */
  overflow: hidden;
  z-index: -1;
  pointer-events: none;
}

/* 初期状態は **最終位置のまま opacity:0**。ずらすのはキーフレームの `from` 側
   (位置をずらすと交差判定が空振りしうる = TOP・カテゴリと同じ理由)。 */
.m-phdeco__i {
  position: absolute;
  display: block;
  opacity: 0;
}

.m-phdeco__i.m-in {
  animation: m-deco-in 1.15s cubic-bezier(0.16, 0.72, 0.28, 1) var(--m-deco-d, 0ms) both;
}

/* 寄ってくる距離。帯の高さが 240 しかないので、カテゴリMVと同じ 280px にする */
.m-phdeco__i[data-from=r] {
  --m-deco-x: 280px;
}

.m-phdeco__i[data-from=l] {
  --m-deco-x: -280px;
}

@media (max-width: 781px) {
  .m-phdeco__i[data-from=r] {
    --m-deco-x: 130px;
  }
  .m-phdeco__i[data-from=l] {
    --m-deco-x: -130px;
  }
}
/* PC/SP の出し分け。**`.m-phdeco__i` の後ろに置くこと**(クラス1つ同士で詳細度が同じなので、
   前に置くと `display:block` に負けて SP で PC 用も一緒に出る = 規律27)。 */
@media (max-width: 781px) {
  .m-phdeco__i--pc {
    display: none;
  }
}
@media (min-width: 782px) {
  .m-phdeco__i--sp {
    display: none;
  }
}
/* @ph-deco-gen:start — site/setup/figma/gen-ph-deco.py が生成。手で編集しない */
/* PC(原稿 1440x240 カンバス。中心を帯の中心に係留する) */
.m-phdeco__i0 {
  left: calc(50% + 379px);
  top: 176px;
  width: 154.378px;
  height: 12.486px;
  clip-path: polygon(7.353% 0%, 100% 0%, 92.647% 100%, 0% 100%);
  background: rgba(255, 255, 255, 0.6);
}

.m-phdeco__i1 {
  left: calc(50% + 728px);
  top: 250.5px;
  width: 84.378px;
  height: 12.486px;
  clip-path: polygon(13.453% 0%, 100% 0%, 86.547% 100%, 0% 100%);
  background: rgba(255, 255, 255, 0.6);
}

.m-phdeco__i2 {
  left: calc(50% + 556.19px);
  top: 212.49px;
  width: 267.405px;
  height: 26.108px;
  clip-path: polygon(10.771% 0%, 100% 0%, 89.229% 100%, 0% 100%);
  background: rgba(255, 255, 255, 0.1);
}

.m-phdeco__i3 {
  left: calc(50% + 157px);
  top: 78.5px;
  width: 256px;
  height: 23px;
  clip-path: polygon(6.579% 0%, 100% 0%, 93.421% 100%, 0% 100%);
  background: rgba(255, 255, 255, 0.1);
}

.m-phdeco__i4 {
  left: calc(50% + 480.5px);
  top: 63px;
  width: 173px;
  height: 17px;
  clip-path: polygon(10.405% 0%, 100% 0%, 89.595% 100%, 0% 100%);
  background: rgba(255, 255, 255, 0.12);
}

.m-phdeco__i5 {
  left: calc(50% - 793px);
  top: 30px;
  width: 253px;
  height: 17px;
  clip-path: polygon(7.115% 0%, 100% 0%, 92.885% 100%, 0% 100%);
  background: rgba(255, 255, 255, 0.1);
}

.m-phdeco__i6 {
  left: calc(50% + 393.5px);
  top: 42px;
  width: 140px;
  height: 9px;
  clip-path: polygon(7.143% 0%, 100% 0%, 92.857% 100%, 0% 100%);
  background: rgba(255, 255, 255, 0.12);
}

.m-phdeco__i7 {
  left: calc(50% - 159px);
  top: 201px;
  width: 146px;
  height: 9px;
  clip-path: polygon(6.849% 0%, 100% 0%, 93.151% 100%, 0% 100%);
  background: rgba(255, 255, 255, 0.6);
}

.m-phdeco__i8 {
  left: calc(50% - 51px);
  top: 182px;
  width: 104px;
  height: 9px;
  clip-path: polygon(9.615% 0%, 100% 0%, 90.385% 100%, 0% 100%);
  background: rgba(255, 255, 255, 0.3);
}

/* SP(原稿 390x160 カンバス。左端に係留する) */
@media (max-width: 781px) {
  .m-phdeco__i9 {
    left: -61px;
    top: 17px;
    width: 126.5px;
    height: 8.5px;
    clip-path: polygon(7.115% 0%, 100% 0%, 92.885% 100%, 0% 100%);
    background: rgba(255, 255, 255, 0.1);
  }
  .m-phdeco__i10 {
    left: 279px;
    top: 37.25px;
    width: 128px;
    height: 11.5px;
    clip-path: polygon(6.579% 0%, 100% 0%, 93.421% 100%, 0% 100%);
    background: rgba(255, 255, 255, 0.1);
  }
  .m-phdeco__i11 {
    left: 347px;
    top: 62px;
    width: 86.5px;
    height: 8.5px;
    clip-path: polygon(10.405% 0%, 100% 0%, 89.595% 100%, 0% 100%);
    background: rgba(255, 255, 255, 0.12);
  }
  .m-phdeco__i12 {
    left: 338.25px;
    top: 19px;
    width: 70px;
    height: 4.5px;
    clip-path: polygon(7.143% 0%, 100% 0%, 92.857% 100%, 0% 100%);
    background: rgba(255, 255, 255, 0.12);
  }
  .m-phdeco__i13 {
    left: 270px;
    top: 137.65px;
    width: 73px;
    height: 4.5px;
    clip-path: polygon(6.849% 0%, 100% 0%, 93.151% 100%, 0% 100%);
    background: rgba(255, 255, 255, 0.6);
  }
  .m-phdeco__i14 {
    left: 324px;
    top: 128.15px;
    width: 52px;
    height: 4.5px;
    clip-path: polygon(9.615% 0%, 100% 0%, 90.385% 100%, 0% 100%);
    background: rgba(255, 255, 255, 0.3);
  }
}
/* @ph-deco-gen:end */
.muran-page-header__eyebrow {
  font-family: var(--wp--preset--font-family--display);
  font-size: var(--wp--preset--font-size--medium);
  font-weight: 700;
  line-height: 1.25;
  color: #ffffff;
  opacity: 0.5;
  margin: 0;
}

.muran-page-header__title {
  font-size: var(--wp--preset--font-size--display);
  font-weight: 700;
  line-height: 1.125;
  color: #ffffff;
  margin: 0;
}

.muran-page-header__lead {
  font-size: var(--wp--preset--font-size--small);
  line-height: var(--m-body-lh);
  color: #ffffff;
  margin: 0;
}

/* ==========================================================
   ② SP(≤781)— 旧 _22-sp-layer。Figma SP 390x160 / タイトル28px
   ========================================================== */
@media (max-width: 781px) {
  .muran-page-header {
    min-height: var(--m-ph-h-sp);
  }
  .editor-styles-wrapper .muran-page-header::after {
    background-image: url(../img/page-header-deco-sp.svg);
  }
  .muran-page-header__title {
    font-size: var(--wp--preset--font-size--huge);
    line-height: 1.2;
  }
}
/* ==========================================================
   ③ 文脈: コアの flow レイアウトを切る — 旧 _31-about
   `core/post-content` が本文を1枚のラッパで包むので、帯は `.m-page` の**孫**になる。
   `.m-page > *` ではラッパにしか当たらず、既定の blockGap 24px が乗ったままになる。
   ========================================================== */
.m-page .muran-page-header {
  margin-block: 0;
}

/* ==========================================================
   ④ 変種: リード無しの2行版 — 旧 _31-about / _32-gourmet / _36-contact
   原稿は英字 y=160 / タイトル y=205(帯は 96..336)。
   新着情報版は3行なので、2行のこちらは中央から少し上に置く。
   ========================================================== */
.muran-page-header--about .muran-page-header__inner {
  padding-bottom: 13px;
}

.muran-page-header--gourmet .muran-page-header__inner {
  padding-bottom: 13px;
}

.muran-page-header--contact .muran-page-header__inner {
  padding-bottom: 13px;
}

/* ==========================================================
   ⑤ 変種: 3行版(開催概要・アクセス)PC — 旧 _39-access
   原稿は英字16 / 見出し48 / リード **16px・幅480の2行**(新着情報の3行版はリードが14px)。
   幅を切らないと1行になって帯の中の重心がずれる(実際に 12px 上に寄った)。
   ========================================================== */
:is(.muran-theme, .editor-styles-wrapper) .muran-page-header--access .muran-page-header__lead {
  max-width: 480px;
  font-size: var(--wp--preset--font-size--medium);
  line-height: 24px;
  letter-spacing: 0.05em;
}

/* ==========================================================
   ⑥ 変種: 3行版 — SP(≤781)。旧 _41-access-sp
   原稿 SP は3行が隙間なく積まれていて(169 / 190 / 244)、
   PC と同じ blockGap 24 のままだと 13px 上にずれる。行間を原稿の値にして詰める。
   ========================================================== */
@media (max-width: 781px) {
  :is(.muran-theme, .editor-styles-wrapper) .muran-page-header--access .muran-page-header__inner {
    row-gap: 0;
  }
  :is(.muran-theme, .editor-styles-wrapper) .muran-page-header--access .muran-page-header__title {
    line-height: 54px;
  }
  :is(.muran-theme, .editor-styles-wrapper) .muran-page-header--access .muran-page-header__lead {
    font-size: var(--wp--preset--font-size--small); /* 原稿 SP は 14px(PC だけ 16px) */
    /* ⚠ **この幅では字間が字送りの 5% にならない**。
       原稿は幅ごとに font-size を変えたのに、**字間は PC の px を据え置いて**いた
       (SP 側で letter-spacing を書き直していない)。track() にすると見た目が変わるので、
       **いまの描画を保つために px を明示**する。原稿がこの字間を意図したのかは未確認。
       → __doc__/rebuild-plan.md 4.8 */
    letter-spacing: 0.8px;
    line-height: 25.2px;
  }
}
/* ==========================================================
   ① 基底 — 旧 _06-page-header
   Figma: 帯24px / 左80px・SP20px / 10px / 現在地は不透明度50%
   Figma の高さはグリフのバウンディングボックス基準なので、行送りを詰めて帯を24pxに合わせる。
   ========================================================== */
.muran-breadcrumb {
  font-size: var(--wp--custom--font-size--10);
  line-height: 1;
  color: var(--wp--preset--color--ink);
  padding-top: 15px;
  padding-bottom: 0;
  /* 大画面ではヘッダーと同じ理屈で頭打ちにする。
     原稿(1440)のパンくずは 80..1360 = 版面 160..1280 の左右 80px 外側 → 1120+160 = 1280。 */
  padding-inline: max(clamp(20px, 5.6vw, 80px), (100% - var(--m-shell-crumb)) / 2);
}

.muran-breadcrumb .wp-block-list,
.muran-breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.muran-breadcrumb li {
  display: flex;
  align-items: center;
  gap: 8px;
}

.muran-breadcrumb li:not(:last-child)::after {
  content: "";
  width: 7px;
  height: 8px;
  border-right: 1px solid var(--wp--preset--color--ink);
  transform: skewX(-12deg);
}

.muran-breadcrumb li:last-child {
  opacity: 0.5;
}

.muran-breadcrumb a {
  text-decoration: none;
}

/* ==========================================================
   ② コアの flow レイアウトを切る — 旧 _26-category / _31-about
   原稿は版面を実測値で組むので、blockGap を 0 に戻してから原稿どおりの間隔を与える。
   詳細度はクラス2つ(= コアの `> * + *` に勝つ)にとどめ、
   後段の間隔指定(同じ詳細度)が順序で勝つようにする。`!important` は使わない。
   ========================================================== */
:is(.m-cat-index, .m-work) .muran-breadcrumb {
  margin-block-start: 0;
}

.m-page .muran-breadcrumb {
  margin-block: 0;
}

/* ==========================================================
   ③ 変種 `--work`: 作品詳細 — 旧 _27-work-single
   コアブロック3つを横並びにする(ほかのページは `<ol>` 1つ)
   ========================================================== */
.muran-breadcrumb--work {
  gap: 8px;
  align-items: center;
}

:is(.muran-theme, .editor-styles-wrapper) .muran-breadcrumb--work > * {
  margin: 0;
  font-size: var(--wp--custom--font-size--10);
  line-height: 1;
}

.muran-breadcrumb--work .muran-breadcrumb__current {
  opacity: 0.5;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 40ch;
}

.muran-breadcrumb--work > *:not(:last-child)::after {
  content: "";
  display: inline-block;
  width: 7px;
  height: 8px;
  margin-left: 8px;
  border-right: 1px solid var(--wp--preset--color--ink);
  transform: skewX(-12deg);
}

.muran-breadcrumb--work a {
  text-decoration: none;
}

/* セクション余白は CSS 側に持つ。
   ブロック属性(= インライン style)に置くと SP レイヤーから上書きできず、
   結果として `!important` が要る構造になる。パターン/テンプレートに余白を焼かない。 */
.muran-news {
  padding-top: 96px; /* Figma: パンくず(360)→ 記事一覧(456) */
  padding-bottom: 104px;
}

.muran-news-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--m-news-side-w);
  grid-template-areas: "main side";
  column-gap: var(--m-news-col-gap);
  align-items: start;
}

.muran-news-main {
  grid-area: main;
  min-width: 0;
}

/* ---------- SP(≤781)— 1カラム。カテゴリは上へ ---------- */
@media (max-width: 781px) {
  /* Figma SP: パンくず(336)→ メインコンテンツ(392) = 56px */
  :is(.muran-theme, .editor-styles-wrapper) .muran-news {
    padding-top: 56px;
    padding-bottom: 64px;
  }
  .muran-news-layout {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "side" "main";
    row-gap: 24px;
  }
}
.muran-news-item {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: var(--m-news-item-gap);
  padding-bottom: var(--m-news-item-gap);
  border-bottom: 1px solid var(--m-line);
}

.wp-block-post-template > li:last-child .muran-news-item {
  border-bottom: none;
}

.muran-news-item__thumb {
  flex: 0 0 var(--m-news-thumb-w);
  width: var(--m-news-thumb-w);
  margin: 0;
}

:is(.muran-theme, .editor-styles-wrapper) .muran-news-item__thumb img {
  width: 100%;
  height: var(--m-news-thumb-h);
  object-fit: cover;
  border: 1px solid var(--m-line);
  border-radius: var(--wp--custom--radius--thumb);
}

.muran-news-item__body {
  min-width: 0;
  flex: 1 1 auto;
}

.muran-news-item__meta {
  font-size: var(--wp--preset--font-size--x-small);
  line-height: 1;
}

.muran-news-item__date {
  font-family: var(--wp--preset--font-family--display);
  font-size: var(--wp--preset--font-size--x-small);
  line-height: 1;
  margin: 0;
}

.muran-news-item__title {
  font-size: var(--wp--preset--font-size--large);
  font-weight: 700;
  line-height: 1.5;
  margin: 0;
}

.muran-news-item__title a {
  text-decoration: none;
}

.muran-news-item__excerpt {
  font-size: var(--wp--preset--font-size--small);
  line-height: var(--m-body-lh);
  margin: 0;
}

.muran-news-item__excerpt .wp-block-post-excerpt__more-text {
  display: none;
}

/* ---------- SP(≤781。Figma SP: サムネ120x80 / gap16 / 本文gap8) ---------- */
@media (max-width: 781px) {
  .muran-news-item {
    --m-news-thumb-w: 120px;
    --m-news-thumb-h: 80px;
    --m-news-item-gap: 16px;
    align-items: flex-start;
    border-bottom-color: var(--m-line-soft);
  }
  .muran-news-item__body {
    row-gap: 8px;
  }
  .muran-news-item__title {
    font-size: var(--wp--preset--font-size--small);
    line-height: 1.5;
  }
  /* ⚠ 下の2本は**この順序**。日付は字サイズを揃えてから書体だけ base に戻す */
  .muran-news-item__excerpt,
  .muran-news-item__date {
    font-size: var(--wp--preset--font-size--xx-small);
    line-height: 1.4545;
  }
  .muran-news-item__date {
    font-family: var(--wp--preset--font-family--base);
  }
}
.muran-chip-terms {
  margin: 0;
}

.muran-chip-terms .wp-block-post-terms__separator {
  display: none;
}

.muran-chip-terms a,
.muran-chip-terms .wp-block-post-terms__prefix {
  display: inline-block;
  border: 1px solid var(--wp--preset--color--ink);
  border-radius: var(--wp--custom--radius--chip);
  padding: 4px 6px;
  font-size: var(--wp--preset--font-size--xx-small);
  line-height: 1.4545;
  text-decoration: none;
  background: var(--wp--preset--color--base);
  margin-right: 4px;
}

/* 記事詳細のヘッダーの中だけ一回り大きい(詳細度で勝つので順序には依存しない) */
.muran-article__meta .muran-chip-terms a {
  font-size: var(--wp--preset--font-size--small);
  line-height: 1.5;
}

.muran-news-side {
  grid-area: side;
}

.muran-article-layout > .muran-news-side {
  grid-area: side;
}

.muran-news-side .muran-cat-list {
  border-top: 1px solid var(--m-line);
  padding-top: 32px;
}

.muran-news-side ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.muran-news-side li {
  font-size: var(--wp--preset--font-size--small);
  line-height: 1;
  font-weight: 500;
}

.muran-news-side li a {
  text-decoration: none;
}

.muran-news-side li .post-count,
.muran-news-side li .wp-block-categories__count {
  display: none;
}

/* アクティブ: 赤文字 + 4pxドット(一覧TOPでは絞り込み無しのタブ、カテゴリ別では該当カテゴリ)。
   判定はコアが body に付けるクラス(blog / category-{slug})に任せる。

   ⚠ **ここだけ slug を CSS に書き写している**(`.category-{slug}` は body クラスなので、
     `inc/data/news-categories.php` の表からは作れない)。カテゴリを増減したら
     このセレクタ列も直す。**忘れても `dead-css.js` が落とす**
     (2026-08-05 の 5件→2件で実際に落ちた: `.category-event` ほか8クラス)。
     2026-09-25 に `kids`(こども未来絵)を足した。
   英語のカテゴリーの一覧(`category-stories` など)は、`inc/i18n.php` が body に**日本語の訳の slug**
   (`category-story`)も足すので、ここに英語の slug を書き写さなくてよい。 */
.blog .muran-cat-item--all > a,
.category-story .muran-cat-item--story > a,
.category-kids .muran-cat-item--kids > a,
.category-notice .muran-cat-item--notice > a {
  color: var(--wp--preset--color--accent-red);
  position: relative;
}

.blog .muran-cat-item--all > a::before,
.category-story .muran-cat-item--story > a::before,
.category-kids .muran-cat-item--kids > a::before,
.category-notice .muran-cat-item--notice > a::before {
  content: "";
  position: absolute;
  left: -14px;
  top: 50%;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--wp--preset--color--accent-red);
  transform: translateY(-50%);
}

/* ---------- SP(≤781)— 横スクロールのピルタブへ ---------- */
@media (max-width: 781px) {
  .muran-news-side .muran-cat-list {
    border-top: none;
    padding-top: 0;
  }
  .muran-news-side ul {
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 6px;
    overflow-x: auto;
    scrollbar-width: none;
    padding-bottom: 4px;
  }
  .muran-news-side ul::-webkit-scrollbar {
    display: none;
  }
  .muran-news-side li {
    flex: 0 0 auto;
  }
  .muran-news-side li > a {
    display: block;
    border: 1px solid var(--wp--preset--color--ink);
    border-radius: var(--wp--custom--radius--tab);
    padding: 6px 9px;
    font-size: var(--wp--preset--font-size--xx-small);
    line-height: 1.4545;
    font-weight: 400;
    white-space: nowrap;
  }
  /* アクティブは塗りで示す(Figma SP: #333 塗り+白文字) */
  .blog .muran-cat-item--all > a,
  .category-story .muran-cat-item--story > a,
  .category-kids .muran-cat-item--kids > a,
  .category-notice .muran-cat-item--notice > a {
    background: var(--wp--preset--color--ink);
    color: #ffffff;
  }
  /* ドットはPCのみ。⚠ この `content:none` は上の `::before` の**後**でなければ効かない */
  .blog .muran-cat-item--all > a::before,
  .category-story .muran-cat-item--story > a::before,
  .category-kids .muran-cat-item--kids > a::before,
  .category-notice .muran-cat-item--notice > a::before {
    content: none;
  }
  /* 記事詳細の SP にサイドバーは無い(原稿どおり) */
  .muran-article-layout > .muran-news-side {
    display: none;
  }
}
/* --- ページネーション(Figma: 現在ページ #0093C0 塗り / 枠 #99A1AF) --- */
.muran-news-pagination {
  justify-content: center;
  gap: 8px;
  font-family: var(--wp--preset--font-family--display);
}

.muran-news-pagination .wp-block-query-pagination-numbers {
  display: flex;
  gap: 8px;
}

.muran-news-pagination :is(a, span).page-numbers,
.muran-news-pagination .wp-block-query-pagination-previous,
.muran-news-pagination .wp-block-query-pagination-next {
  display: grid;
  place-items: center;
  box-sizing: border-box;
  min-width: 40px;
  height: 42px;
  padding: 0 8px;
  border: 1px solid var(--m-ui-border);
  background: var(--wp--preset--color--base);
  color: var(--wp--preset--color--ink-strong);
  font-size: var(--wp--preset--font-size--medium);
  font-weight: 500;
  line-height: 1.5;
  text-decoration: none;
  letter-spacing: 0.05em;
}

.muran-news-pagination :is(a, span).page-numbers.current {
  background: var(--wp--preset--color--accent-cyan);
  color: #ffffff;
}

/* Figma: 38x38 の枠 / アイコン枠 20x20 / 山形は 5x10 の stroke2 #0A0A0A。
   ボーダーを45度回す方法は回転で光学中心がずれて枠の中央に収まらなかったので、
   20x20 の viewBox に座標で山形を描いた SVG を背景中央に置く(=確実に中央)。 */
.muran-news-pagination :is(.wp-block-query-pagination-previous, .wp-block-query-pagination-next) {
  min-width: 38px;
  width: 38px;
  height: 38px;
  padding: 0;
  font-size: 0;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 20px 20px;
}

.muran-news-pagination .wp-block-query-pagination-next {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M7.5 5 12.5 10 7.5 15' fill='none' stroke='%230A0A0A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.muran-news-pagination .wp-block-query-pagination-previous {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M12.5 5 7.5 10 12.5 15' fill='none' stroke='%230A0A0A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* Figma は1ページ目でも「前へ」の枠を(不透明度50%で)置いて左右対称にしている。
   コアは前/次のリンクが無いページでは要素自体を出力しないため、
   :has() で「無い時だけ」ダミー枠を出して桁を保つ。 */
.muran-news-pagination:not(:has(.wp-block-query-pagination-previous))::before,
.muran-news-pagination:not(:has(.wp-block-query-pagination-next))::after {
  content: "";
  box-sizing: border-box;
  width: 38px;
  height: 38px;
  border: 1px solid var(--m-ui-border);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 20px 20px;
  opacity: 0.5;
  pointer-events: none;
}

.muran-news-pagination:not(:has(.wp-block-query-pagination-previous))::before {
  order: -1;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M12.5 5 7.5 10 12.5 15' fill='none' stroke='%230A0A0A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.muran-news-pagination:not(:has(.wp-block-query-pagination-next))::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M7.5 5 12.5 10 7.5 15' fill='none' stroke='%230A0A0A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* 詳細ページのレイアウト。
   Figma: タイトル(800幅)は1列目のみ、サイドバーは本文行から始まる
   (= タイトル領域の高さ + 40px 下がる)。Grid の行で宣言して高さ依存を作らない。 */
.muran-article-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--m-news-side-w);
  grid-template-areas: "head ." "body side";
  column-gap: var(--m-news-col-gap);
  row-gap: 40px;
  align-items: start;
}

.muran-article-head {
  grid-area: head;
  min-width: 0;
}

/* ---------- SP(≤781)— 1カラム ---------- */
@media (max-width: 781px) {
  .muran-article-layout {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "head" "body";
    row-gap: 24px;
  }
}
.muran-article {
  padding-top: 56px; /* Figma: パンくず(120)→ Article Header(176) */
  padding-bottom: 104px;
}

.muran-article__meta {
  font-size: var(--wp--preset--font-size--small);
  line-height: 1;
}

.muran-article__date {
  font-family: var(--wp--preset--font-family--display);
  font-size: var(--wp--preset--font-size--small);
  line-height: 1;
  margin: 0;
}

.muran-article__title {
  font-size: var(--wp--preset--font-size--huge);
  font-weight: 700;
  line-height: 1.5;
  margin: 0;
}

:is(.muran-theme, .editor-styles-wrapper) .muran-article__featured img {
  width: 100%;
  height: auto;
  border: 1px solid var(--m-ui-border);
}

/* ---------- SP(≤781。Figma SP: パンくず(336)→ メインコンテンツ(392) = 56px) ---------- */
@media (max-width: 781px) {
  :is(.muran-theme, .editor-styles-wrapper) .muran-article {
    padding-top: 56px;
    padding-bottom: 64px;
  }
  .muran-article__title {
    font-size: var(--wp--preset--font-size--x-large);
  }
}
.muran-article-body {
  grid-area: body;
  min-width: 0;
}

/* --- 本文の見出し3階層(Figma実測) --- */
.muran-article-body h2,
.is-style-heading-major {
  font-size: var(--wp--preset--font-size--xx-large);
  line-height: 1.5;
  letter-spacing: normal;
  padding-bottom: 16px;
  border-bottom: var(--m-h-rule) solid var(--m-line);
  background-image: var(--m-grad);
  background-repeat: no-repeat;
  background-position: left bottom;
  background-size: var(--m-h2-accent-w) var(--m-h-rule);
}

.muran-article-body h3,
.is-style-heading-mid {
  font-size: var(--wp--preset--font-size--x-large);
  line-height: 1.5;
  letter-spacing: normal;
  padding-left: 16px;
  background-image: var(--m-grad);
  background-repeat: no-repeat;
  background-position: left top;
  background-size: 2px 100%;
}

.muran-article-body h4,
.is-style-heading-minor {
  font-size: var(--wp--preset--font-size--medium);
  line-height: 1.5;
  letter-spacing: normal;
  padding-bottom: 8px;
  border-bottom: var(--m-h-rule) solid var(--m-line);
}

.muran-article-body p {
  font-size: var(--wp--preset--font-size--small);
  line-height: var(--m-body-lh);
}

/* --- 引用/注記枠(Figma: 1px #EDEDED / pad24) --- */
.is-style-note-box {
  border: 1px solid var(--m-line);
  padding: 24px;
  margin: 0;
}

.is-style-note-box p {
  margin: 0;
}

/* --- 表(Figma: 見出し行グレー地 / 狭幅では横スクロール) --- */
.muran-article-body .wp-block-table,
.is-style-muran-table {
  overflow-x: auto;
}

.is-style-muran-table table {
  border-collapse: collapse;
  font-size: var(--wp--preset--font-size--small);
}

.is-style-muran-table :is(th, td) {
  border: 1px solid var(--m-line);
  padding: 16px 20px;
  text-align: left;
  vertical-align: top;
  line-height: var(--m-body-lh);
}

.is-style-muran-table :is(thead th, th) {
  background: var(--wp--preset--color--gray-bg);
  font-weight: 700;
}

/* 埋め込み(YouTube / 地図)のキャプション。コアの `.wp-block-embed` の側はここ、
   独自の `.muran-embed` の側は components/embed(主語ごとに割った = 規律61)。 */
.muran-article-body .wp-block-embed figcaption {
  font-size: var(--wp--preset--font-size--small);
  line-height: var(--m-body-lh);
  text-align: left;
  margin-top: 8px;
}

.muran-speech {
  align-items: center;
}

.muran-speech__avatar img {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  object-fit: cover;
}

.muran-speech__bubble {
  position: relative;
  border: 1px solid var(--m-line);
  border-radius: 8px;
  padding: 16px 20px;
}

.muran-speech__bubble::before,
.muran-speech__bubble::after {
  content: "";
  position: absolute;
  top: 50%;
  border: 9px solid transparent;
  transform: translateY(-50%);
}

.muran-speech--left .muran-speech__bubble::before {
  right: 100%;
  border-right-color: var(--m-line);
}

.muran-speech--left .muran-speech__bubble::after {
  right: calc(100% - 1px);
  border-right-color: var(--wp--preset--color--base);
}

.muran-speech--right .muran-speech__bubble::before {
  left: 100%;
  border-left-color: var(--m-line);
}

.muran-speech--right .muran-speech__bubble::after {
  left: calc(100% - 1px);
  border-left-color: var(--wp--preset--color--base);
}

.muran-article-body .muran-embed figcaption {
  font-size: var(--wp--preset--font-size--small);
  line-height: var(--m-body-lh);
  text-align: left;
  margin-top: 8px;
}

.muran-embed iframe {
  display: block;
  width: 100%;
  border: 0;
  aspect-ratio: 16/9;
}

.muran-embed--map iframe {
  aspect-ratio: 708/380;
}

.muran-article-nav {
  border-top: 1px solid var(--m-line-strong);
  padding-top: 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  font-size: var(--wp--custom--font-size--15);
  font-weight: 700;
}

.muran-article-nav > * {
  flex: 1 1 0;
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
}

.muran-article-nav__list {
  justify-content: center;
  border-left: 1px solid var(--m-line-strong);
  border-right: 1px solid var(--m-line-strong);
}

.muran-article-nav .wp-block-post-navigation-link {
  flex-wrap: nowrap;
}

.muran-article-nav a {
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}

.muran-article-nav__next {
  justify-content: flex-end;
}

/* 円形の矢印(Figma: 円20x20 #46A0D6 + 白い山形)。
   以前は `a::before, a::after` の両方に円を定義し、打ち消し規則が詳細度で負けて
   「円が2つ出る」バグになっていた。必要な側だけに定義する。
   山形は白帯2本では形にならなかったので、インラインSVGで円と山形を一体で描く。 */
.muran-article-nav__prev a::before,
.muran-article-nav__next a::after {
  content: "";
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 20px 20px;
}

.muran-article-nav__prev a::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='10' fill='%2346A0D6'/%3E%3Cpath d='M11.6 6.2 7.8 10l3.8 3.8' fill='none' stroke='%23fff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.muran-article-nav__next a::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='10' fill='%2346A0D6'/%3E%3Cpath d='M8.4 6.2 12.2 10l-3.8 3.8' fill='none' stroke='%23fff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* 一覧へ戻る のアイコン。
   Figma原稿は 27x27 のドット群を 16x16 のクリップに入れていて崩れているため、
   ユーザ指示に従い「グレーの丸4つ(2x2)」として描く。 */
.muran-article-nav__list a::before {
  content: "";
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cg fill='%23BBBBBB'%3E%3Ccircle cx='4.5' cy='4.5' r='2'/%3E%3Ccircle cx='11.5' cy='4.5' r='2'/%3E%3Ccircle cx='4.5' cy='11.5' r='2'/%3E%3Ccircle cx='11.5' cy='11.5' r='2'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 16px 16px;
}

/* ---------- SP(≤781) ---------- */
@media (max-width: 781px) {
  .muran-article-nav {
    font-size: var(--wp--preset--font-size--xx-small);
  }
  .muran-article-nav__list {
    padding-inline: 8px;
  }
}
/* ==========================================================
   TOP(Figma `TOP_pc` 12:7435 実測。1440幅で 1:1)

   方針:
     ・原稿は 1440 の固定カンバスで重なりが多い。座標・寸法は
       `python3 site/setup/figma/rasterize.py place 12:7435 <node-id>…` で出した
       実測値をそのまま使う(手計算しない)。
     ・縦位置は「前セクション下端 → 当セクション上端」を padding-top で持たせる。
       各ブロックの高さは Figma のボックス高で固定するので、合計が原稿の 7612px になる。
     ・コンテンツ列は 1120px(原稿 x=160..1280)。theme.json の contentSize と一致。
     ・フォントは DENSO コーポレートフォントを維持する(決定事項)。原稿の
       Poppins / Hiragino Sans / A1Gothic は代替指定として扱い、
       **サイズ・行送り・字送り・ボックス位置は原稿どおり**にする。
     ・背景の斜め帯(Decoration Lines *)はアニメーション仕様の確定待ちなので未実装。
   ========================================================== */
.m-top {
  position: relative;
  /* 原稿は要素が版面外へはみ出す(右端まで届く写真帯・見出し左のマーク等)。
     はみ出しでスクロールバーを出さないための保険。clip はスクロールを作らない。 */
  overflow-x: clip;
}

/* 全面の淡いグラデ(Figma: Background Main -87,1700 1614x5683 / layer blur 84 / 10%)。
   ヘッダー下端を原点にした絶対配置。ぼかしが強く輪郭を持たないので、
   1440 以外でも見た目の差は出ない。 */
.m-top::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: 1604px; /* 1700 - 96(ヘッダー) */
  /* 原稿 x=-87 → 中心から -807。**広い画面では画面幅まで伸ばす**(カテゴリと同じ処置)。
     `max()` なので 1614px 以下では今までと同じ。 */
  left: 50%;
  transform: translateX(-50%);
  width: max(1614px, 100%);
  height: 5683px;
  /* 1614x5683 の面では実質ほぼ水平(91.02deg)。
     以前 136deg にしていたため、原稿では左が青み・右がピンクの横グラデなのに
     実装は「下へ行くほどピンク」になっていた。 */
  background: linear-gradient(91.022deg, var(--m-grad-stops));
  opacity: 0.1;
  filter: blur(42px);
  pointer-events: none;
}

.m-sec {
  position: relative;
  z-index: 1;
}

/* SPだけで効かせる改行。原稿の折り位置が PC と違う箇所に置く
   (PCでは無かったことにする = display:none で改行そのものを消す) */
.m-sp-br {
  display: none;
}

/* コアはブロック要素にしか box-sizing を入れないので、段落・見出しに padding と
   height を同時に指定すると高さが膨らむ(イベントカードのタグが 26→34px になった)。
   TOP 配下は一律 border-box にして、Figma の実測値をそのまま書けるようにする。 */
.m-sec *,
.m-sec *::before,
.m-sec *::after {
  box-sizing: border-box;
}

/* コアは `.wp-container-… > * + *` に blockGap(24px)を注入する。TOP は縦位置を
   全部 Figma 実測で持つので、セクション配下の自動余白はまず一括で消し、
   このあとの各規則で必要な分だけ与える(パターンにインライン余白を焼かない
   = cascade-rules.md 規律1)。同格なので**この規則より後**に書いた分が勝つ。 */
:is(.muran-theme, .editor-styles-wrapper) .m-sec * + * {
  margin-block-start: 0;
}

/* ---------- 各セクションの縦位置(原稿 1440 の実測。旧 11〜17) ---------- */
.m-sec--hero {
  padding-top: 52px; /* ヘッダー96 → ヒーロー148 */
}

.m-sec--about {
  padding-top: 107px; /* ヒーロー下端866 → 973 */
}

.m-sec--enjoy {
  padding-top: 313px; /* 夢卵とは下端1614 → EN見出し1927 */
}

.m-sec--contest {
  padding-top: 47px; /* カード下端2426 → パネル2473 */
}

.m-sec--events {
  padding-top: 203px; /* パネル下端4776 → EN見出し4979 */
}

.m-sec--goto {
  padding-top: 213px; /* イベント下端5541 → EN見出し5754 */
}

.m-sec--news {
  padding-top: 316px; /* 会場へ向かう下端6131 → EN見出し6447 */
  padding-bottom: 173px; /* 一覧リンク下端6981 → フッター7154 */
}

/* ---------- セクションのリード文 ---------- */
:is(.muran-theme, .editor-styles-wrapper) .m-sec__lead {
  margin: 32px 0 0;
  height: 29px;
  font-size: 16px;
  line-height: 29px;
  letter-spacing: 0.05em;
  color: var(--wp--preset--color--ink);
}

:is(.muran-theme, .editor-styles-wrapper) .m-sec__lead--lg {
  margin-top: 33px;
  height: 32px;
  font-size: 18px;
  line-height: 32px;
  letter-spacing: 0.05em;
}

/* ---------- 中間幅(≤1199)。原稿は無い = 機能優先の適応(旧 21) ---------- */
@media (max-width: 781px) {
  .m-sec--hero {
    padding-top: 24px;
  }
  .m-sec--about {
    padding-top: 64px;
  }
  .m-sec--enjoy,
  .m-sec--contest,
  .m-sec--events,
  .m-sec--goto {
    padding-top: 80px;
  }
  .m-sec--news {
    padding-top: 80px;
    padding-bottom: 80px;
  }
  /* 背景の淡いグラデは固定オフセットが合わなくなるので出さない */
  .m-top::before {
    display: none;
  }
}
/* ---------- SP(≤781。原稿 `TOP_SP` 33:1676 実測。390幅で 1:1)----------

   原稿フレームは上に「ブラウザUIのモック 92px」を積んでいるので、
   **ページ座標 = フレーム座標 − 92**。以降のコメントの数値はページ座標。

     SP-header      0 ..   60
     MV            92 ..  682   (590)
     夢卵とは      752 .. 1609.2 (857.2)
     コンテンツ紹介 1673.2 .. 4705.2 (3032)  = enjoy(見出し・説明) + contest(4色帯)
     イベント体験  4769.2 .. 5519.4 (750.2)
     来場案内     5583.3 .. 6055.3 (472)
     新着情報     6119.3 .. 7219.3 (1100)
     フッター     7285   .. 8107   (822)

   セクション間は原稿の「メインコンテンツ」オートレイアウト gap=64。
   版面は 390 − ルート左右パディング20 = 350(原稿の 350 と一致)。 */
@media (max-width: 781px) {
  .m-sec--hero {
    padding-top: 32px;
  } /* ヘッダー60 → MV 92 */
  .m-sec--about {
    padding-top: 70px;
  } /* MV下端682 → 752 */
  .m-sec--enjoy {
    padding-top: 64px;
  } /* 1609.2 → 1673.2 */
  .m-sec--contest {
    padding-top: 64px;
  } /* 見出し・説明の下端2313.2 → カード一覧2377.2 */
  .m-sec--events {
    padding-top: 64px;
  } /* 4705.2 → 4769.2 */
  .m-sec--goto {
    padding-top: 64px;
  } /* 5519.4 → 5583.3 */
  .m-sec--news {
    padding-top: 64px; /* 6055.3 → 6119.3 */
    padding-bottom: 65.7px; /* 7219.3 → フッター7285 */
  }
  /* 原稿SPの折り位置(PCでは1行に収まるので出さない) */
  .m-sp-br {
    display: inline;
  }
  /* 全面の淡いグラデ。SPにも原稿がある(TOP_SP `bg` 33:1681)。
     ≤1199 の層で切っているので、SP専用の実測値で出し直す。
     原稿: -15,1501(ページ座標) 420x6328 / 90.239deg / 10% / layer blur 84(=CSS 42) */
  .m-top::before {
    display: block;
    top: 1441px; /* 1501 − ヘッダー60 */
    left: calc(50% - 210px);
    width: 420px;
    height: 6328px;
    background: linear-gradient(90.239deg, var(--m-grad-stops));
  }
  :is(.muran-theme, .editor-styles-wrapper) .m-sec__lead,
  :is(.muran-theme, .editor-styles-wrapper) .m-sec__lead--lg {
    margin-top: 16px;
    height: 54px; /* 15px/27 の 2行 */
    font-size: 15px;
    line-height: 27px;
    letter-spacing: 0.05em;
  }
  /* 会場へ向かうのリードは見出しから 24px(原稿: 来場案内フレームの V gap24) */
  :is(.muran-theme, .editor-styles-wrapper) .m-sec__lead--lg {
    margin-top: 24px;
  }
  :is(.muran-theme, .editor-styles-wrapper) .m-sec--hero {
    padding-top: 32px; /* ヘッダー60 → MV 92 */
  }
}
.m-shead {
  position: relative;
  height: 96px; /* EN32 + 32 + JP32 */
  /* 英字見出しの負マージン(下記)が親の外へ伝播して
     セクションごと 24px ずつ上へずれるのを防ぐ(マージン相殺の遮断) */
  display: flow-root;
}

.m-shead::before {
  content: "";
  position: absolute;
  left: -55px;
  top: -10px;
  width: 39px;
  height: 35px;
  background: url(../img/fg-mark.svg) center/contain no-repeat;
}

:is(.muran-theme, .editor-styles-wrapper) .m-shead__en {
  /* `background-clip:text` の背景描画領域は **要素のボックス**。原稿は 72px のグリフを
     32px の行ボックスに入れているので、そのまま height:32px にすると
     枠外に出たグリフ下部が無塗り(=透明)になって「上半分だけ」に見える。
     パディングで描画領域を広げ、同じ量の負マージンで版面位置を戻す。 */
  margin: -24px 0 -52px;
  padding: 24px 0 52px;
  height: 108px; /* 32 + 24 + 52 */
  width: fit-content;
  font-family: var(--wp--preset--font-family--display);
  font-size: 72px;
  font-weight: 700;
  line-height: 32px;
  letter-spacing: 0;
  white-space: nowrap;
  /* 原稿は textCase=TITLE。原文は小文字のまま置き、表示だけ整える */
  text-transform: capitalize;
  background-image: var(--m-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  /* 原稿(Poppins)は大文字上端が左のマーク上端と揃う。DENSO EN はグリフが
     同じ行ボックス内で 8px 低く座るため、その分だけ塗りを上へ寄せる
     (ボックス位置=版面は動かさない)。 */
  transform: translateY(-8px);
}

:is(.muran-theme, .editor-styles-wrapper) .m-shead__jp {
  margin: 32px 0 0;
  height: 32px;
  font-size: 21px;
  font-weight: 700;
  line-height: 32px;
  letter-spacing: 0.05em;
  color: var(--wp--preset--color--ink);
}

/* 🔴 **節ごとのグラデ角度は 2026-09-01 に削除した。**(ユーザ判断)

   原稿(Figma)は見出しごとに角度が違う。ハンドルは全節で同じで、等値線が箱の
   縦横比で寝るため **箱の幅ぶんだけ角度が変わる**(値と導出は規律115 に残した):
     PC   about 132.56 / enjoy 133.70 / events 115.86 / goto 138.55 / news 111.62
     SP   114.603(350x48)/ goto だけ 102.895(2行=350x96)

   ここにはその7本が書いてあったが、**1本も描画に届いたことがない**。
   `_01-tokens.scss` が `:root` でグラデを合成しており、
   **カスタムプロパティの `var()` は宣言した要素で置換される**ので、
   合成結果は `:root` の時点で `linear-gradient(132.5deg, …)` という
   リテラルに畳まれて継承される。子で角度を差し替えても届かない。

   → **実際に出ているのは全節 132.5deg の1本**で、プロトタイプの頃からこの姿。
     先方が見てきたのもこれなので、**「直す」= 承認済みの見た目を後から変える**ことになる。
     そこで**効かない宣言のほうを消した**。ソースが嘘をつかない状態にするのが目的で、
     見た目は 1px も変わらない(基準線・計算値とも差 0 で確認済み)。

   ⚠ 原稿どおりの角度に寄せたくなったら、合成を `:root` ではなく
     **使う側**(この部品)へ降ろしたうえで上の7値を戻す。 */
/* 夢卵とは / 夢卵を楽しむ は 20px/32 ls+1.00 */
:is(.m-sec--about, .m-sec--enjoy) .m-shead__jp {
  font-size: 20px;
  letter-spacing: 0.05em;
}

/* ---------- 中間幅(≤1199) ---------- */
@media (max-width: 781px) {
  :is(.muran-theme, .editor-styles-wrapper) .m-shead__en {
    font-size: 56px;
    line-height: 44px;
  }
}
/* ---------- SP(≤781。原稿 `TOP_SP` 33:1676) ---------- */
@media (max-width: 781px) {
  /* --- セクション見出し: 原稿SPはマークが見出しの「上」(PCは左) ---
     マーク 30x26 → gap24 → EN 350x48(48px/48) → gap → JP 350x32(16px/32) */
  .m-shead {
    height: auto;
    padding-top: 50px; /* マーク26 + gap24 */
  }
  .m-shead::before {
    left: 0;
    top: 0;
    width: 30px;
    height: 26px;
  }
  :is(.muran-theme, .editor-styles-wrapper) .m-shead__en {
    /* 原稿の EN ボックスは版面いっぱい(350)で、グラデも 350 に張る。
       PC の `width:fit-content` のままだと短い語(News)が青→ピンクまで
       出てしまう(原稿の News はほぼ青一色)。 */
    width: 100%;
    /* 会場へ向かうは 2 行になるので height は固定しない。
       `background-clip:text` の描画域だけパディングで広げ、同量の負マージンで戻す */
    height: auto;
    margin: -16px 0 -24px;
    padding: 16px 0 24px;
    font-size: 48px;
    line-height: 48px;
    white-space: normal;
    transform: translateY(-5px); /* DENSO EN が行ボックス内で低く座る分(PC の -8px を 48/72 で按分) */
  }
  :is(.muran-theme, .editor-styles-wrapper) .m-shead__jp {
    margin-top: 8px;
    height: 32px;
    font-size: 16px;
    line-height: 32px;
    letter-spacing: 0.05em;
  }
  /* 原稿は見出しごとに EN→JP の間隔が違う(コンポーネントの手当てが不揃い)。
     ピクセル突合のため原稿の実測どおりにする。 */
  .m-sec--enjoy .m-shead__jp {
    margin-top: 24px;
  }
  .m-sec--events .m-shead__jp {
    margin-top: 16px;
  }
}
/* ==========================================================
   ① 基底(PC)— 旧 _10-top。ピル 240x56 + 右端に矢印
   ========================================================== */
:is(.muran-theme, .editor-styles-wrapper) .m-cta {
  margin: 0;
  gap: 0;
}

:is(.muran-theme, .editor-styles-wrapper) .m-cta .wp-block-button__link {
  position: relative;
  display: grid;
  place-items: center;
  width: 240px;
  height: 56px;
  padding: 0;
  border-radius: var(--wp--custom--radius--pill);
  font-size: 15px;
  font-weight: 600;
  line-height: 20px;
  letter-spacing: 0.05em;
}

.m-cta .wp-block-button__link::after {
  content: "";
  position: absolute;
  right: 26px;
  top: 50%;
  width: 16px;
  height: 14px;
  margin-top: -7px;
  background: center/contain no-repeat;
  transition: transform var(--m-nudge-ease);
}

/* ホバー中は矢印が向いている方(右)へ寄る。`hover:hover` で囲うのは、
   タブレット(782〜1199 は PC の版面)でタップ後に寄ったまま残るのを避けるため。 */
@media (hover: hover) {
  .m-cta .wp-block-button__link:hover::after {
    transform: translateX(var(--m-nudge));
  }
}
.m-cta .is-style-pill-dark .wp-block-button__link::after,
.is-style-pill-dark .wp-block-button__link::after {
  background-image: url(../img/fg-arrow-white.svg);
}

.m-cta .is-style-pill-outline .wp-block-button__link::after,
.is-style-pill-outline .wp-block-button__link::after {
  background-image: url(../img/fg-arrow-dark.svg);
}

/* ピルボタンの地色。theme.json の elements.button は brand-red なので、
   ブロックスタイルで打ち消す(黒ピル=夢卵とは / 白ピル=コンテスト特集)。 */
:is(.muran-theme, .editor-styles-wrapper) .is-style-pill-dark .wp-block-button__link {
  background-color: var(--wp--preset--color--ink);
  color: #ffffff;
}

:is(.muran-theme, .editor-styles-wrapper) .is-style-pill-outline .wp-block-button__link {
  background-color: #ffffff;
  color: var(--wp--preset--color--ink);
}

/* ==========================================================
   ② 文脈: 夢卵とはの本文 — 旧 _12-top-about
   ========================================================== */
:is(.muran-theme, .editor-styles-wrapper) .m-about__body .m-cta {
  margin-top: 32px;
}

/* ==========================================================
   ③ 文脈: コンテスト特集の白パネル — 旧 _14-top-contest
   ========================================================== */
:is(.muran-theme, .editor-styles-wrapper) .m-contest__panel .m-cta {
  margin-top: 32px;
}

/* ==========================================================
   ④ SP(≤781)— 旧 _22-sp-layer
   矢印は PC用(16x14)を縮めず、原稿SPのノードから 10x8.3・線幅2 のまま書き出したものを使う
   (縮めると線まで 0.63倍になって別物に細る = 拡大目視で発覚)
   ========================================================== */
@media (max-width: 781px) {
  :is(.muran-theme, .editor-styles-wrapper) .m-cta .wp-block-button__link {
    width: 240px;
    height: 48px;
    font-size: 14px;
    line-height: 20px;
    letter-spacing: 0.05em;
  }
  .m-cta .wp-block-button__link::after {
    right: 23.3px; /* 24 − はみ出し 0.7 */
    width: 11.41px;
    height: 10.26px;
    margin-top: -5.13px;
  }
  .m-cta .is-style-pill-dark .wp-block-button__link::after,
  .is-style-pill-dark .wp-block-button__link::after {
    background-image: url(../img/fg-arrow-white-sp.svg);
  }
  .m-cta .is-style-pill-outline .wp-block-button__link::after,
  .is-style-pill-outline .wp-block-button__link::after {
    background-image: url(../img/fg-arrow-dark-sp.svg);
  }
  :is(.muran-theme, .editor-styles-wrapper) .m-about__body .m-cta {
    margin-top: 32px;
    justify-content: center; /* 原稿は 350 の中央(x=75) */
  }
  :is(.muran-theme, .editor-styles-wrapper) .m-contest__panel .m-cta {
    order: 5;
    justify-content: center;
    margin-top: 24px;
  }
}
/* ---------- ホバーの走査(青・赤の平行四辺形が左→右に抜ける)----------
   仕組みと寸法の根拠は `_01-tokens.scss` の `--m-sweep-*`。
   静止時は版面の外にあるので**見た目は1px も変わらない**(基準線は不変)。
   ⚠ この宣言は**地色を決める規則より後**に置く。`background:` の一括指定は
     `background-image` を `none` に戻すので、前に置くと黙って消える。 */
:is(.muran-theme, .editor-styles-wrapper) .m-cta .wp-block-button__link {
  background-image: var(--m-sweep-img);
  background-repeat: no-repeat;
  background-size: var(--m-sweep-w) 100%;
  background-position: var(--m-sweep-from) 0;
}

@media (hover: hover) {
  :is(.muran-theme, .editor-styles-wrapper) .m-cta .wp-block-button__link:hover {
    background-position: var(--m-sweep-to) 0;
    transition: background-position var(--m-sweep-dur) ease-out;
  }
}
/* 地色がベタ塗り(黒ピル(#333))なので、**濁らない濃いめの帯**に差し替える
   (白地用の `--m-sweep-img` は地色と混ざって中間色になる → `_01-tokens`)。 */
:is(.muran-theme, .editor-styles-wrapper) .m-cta .is-style-pill-dark .wp-block-button__link {
  background-image: var(--m-sweep-img-ondark);
}

.m-hero {
  position: relative;
  height: 718px;
}

.m-hero > * {
  position: absolute;
  margin: 0;
}

/* ロゴ 291x80 @ 164,176 */
.m-hero__logo {
  left: 4px;
  top: 28px;
  width: 291px;
  height: 80px;
}

.m-hero__logo img {
  width: 291px;
  height: 80px;
}

/* 会場+会期の帯 497x60 @ 160,276 */
.m-hero__badge {
  left: 0;
  top: 128px;
  width: 497px;
  height: 60px;
}

.m-hero__venue {
  position: absolute;
  left: 0;
  top: 4px;
  width: 195px;
}

:is(.muran-theme, .editor-styles-wrapper) .m-hero__venue-name {
  margin: 0;
  height: 24px;
  padding-left: 32px; /* ピン22 + gap10 */
  font-size: 26px;
  line-height: 24px;
  letter-spacing: 0.05em;
  white-space: nowrap;
  background: url(../img/fg-pin-red.svg) 0 0/22px 26px no-repeat;
}

:is(.muran-theme, .editor-styles-wrapper) .m-hero__venue-addr {
  margin: 14px 0 0;
  height: 13px;
  font-size: 18px;
  line-height: 13px;
  letter-spacing: 0.05em;
}

/* 縦罫(Figma: LINE 0x60 を -91.7° 回転 = ほぼ垂直で 1.7° 傾く) */
.m-hero__badge::before {
  content: "";
  position: absolute;
  left: 219px; /* 379 - 160 */
  top: 0;
  width: 1px;
  height: 60px;
  background: #000;
  transform: rotate(1.67deg);
}

.m-hero__dates {
  position: absolute;
  left: 243px; /* 403 - 160 */
  top: 0;
  width: 254px;
}

:is(.muran-theme, .editor-styles-wrapper) .m-hero__date {
  position: relative;
  display: flex;
  align-items: baseline;
  margin: 0;
  height: 26px;
  font-size: 20px;
  line-height: 20px;
  letter-spacing: 0.05em;
  white-space: nowrap;
  /* 原稿は「11」「月」「28」「日」「（土）」「時刻」を **素のオートレイアウト**で
     並べていて(gap 2 / 2 / 2 / −8 / −5)、全部が同じベースラインに乗る。
     曜日と時刻を x=+100 / +157 の絶対配置にしていたため
     ①箱ごとに行ボックスが別になりベースラインが揃わない
     ②DENSOの字幅が狭いぶん「日」と「（土）」の間に 21px の穴が空く(原稿は9.5px)
     の2つが出ていた。原稿と同じ流し込みに戻す。 */
  gap: 2px;
  /* DENSO のグリフは行ボックス内で 1.5px 低く座る(規律15)。塗りだけ上へ寄せる */
  transform: translateY(-1.5px);
}

:is(.muran-theme, .editor-styles-wrapper) .m-hero__date + .m-hero__date {
  margin-top: 8px;
}

.m-hero__date .m-num {
  font-size: 28px;
  line-height: 20px;
  letter-spacing: 0;
}

.m-hero__date .m-dow--sat {
  color: #1558d6;
}

.m-hero__date .m-dow--sun {
  color: #fe0000;
}

/* 原稿の実測位置に固定(行の左端 403 → （土）は +100、時刻は +157) */
/* 原稿のオートレイアウト gap(容器の gap:2px との差分をマージンで足す) */
.m-hero__date .m-dow {
  margin-left: -10px; /* 原稿 gap −8 */
  line-height: 20px;
}

.m-hero__date .m-time {
  margin-left: -7px; /* 原稿 gap −5 */
  font-size: 16px;
  line-height: 20px;
  letter-spacing: -0.15px;
}

/* ---------- 英語(2026-09-14)— 会場名と住所が日本語より長い ----------
   「DENSO Headquarters」(26px)は 195px の列を越えて日付の列に重なり、
   住所「1-1 Showa-cho, Kariya, Aichi」は2行に折れて高さ 13px の行から溢れた。
   英語のときだけ会場の列を広げ(195 → 232)、縦罫と日付を右へ送り(219 → 248 / 243 → 272)、
   字を一回り小さくする(名前 26 → 20 / 住所 18 → 14・折り返さない)。**日本語の版面は1pxも動かない**。 */
@media (min-width: 782px) {
  :lang(en) .m-hero__venue {
    width: 232px;
  }
  :lang(en) :is(.muran-theme, .editor-styles-wrapper) .m-hero__venue-name {
    font-size: 20px;
    letter-spacing: 0;
  }
  :lang(en) :is(.muran-theme, .editor-styles-wrapper) .m-hero__venue-addr {
    font-size: 14px;
    letter-spacing: 0;
    white-space: nowrap;
  }
  :lang(en) .m-hero__badge::before {
    left: 248px;
  }
  :lang(en) .m-hero__dates {
    left: 272px;
  }
  /* 曜日と時刻の負のマージンは**全角括弧「（土）」の左右の余白を詰める**ためのもの。
     英語の「(Sat)」は半角で余白が無いので、そのままだと「28(Sat」と「)10:00」が重なる。 */
  :lang(en) .m-hero__date .m-dow {
    margin-left: 3px;
  }
  :lang(en) .m-hero__date .m-time {
    margin-left: 6px;
  }
}
/* DXキャッチ(Figma `Hero Headline` 12:7981 を公式エクスポートしたSVG)。
   原稿は A1Gothic を字詰め -29.69px + せん断で組んだ **ロゴタイプ相当**の見出しで、
   DENSOフォントに置き換えると字が衝突して成立しない。
   CLAUDE.md の規律(ロゴ・モチーフは原稿からの切り出しで再現する)に従い画像で置く。
   読み上げ・SEO用の文字は同セクションの screen-reader-text の h1 が持つ。 */
.m-hero__headline {
  left: 0;
  top: 237px; /* 385 - 148 */
  width: 631px;
  height: 167px;
}

.m-hero__headline img {
  display: block;
  width: 631px;
  height: 167px;
}

/* 丸写真 503x503 @ 807,179 */
.m-hero__photo {
  left: 647px;
  top: 31px;
  width: 503px;
  height: 503px;
}

.m-hero__photo img {
  width: 503px;
  height: 503px;
}

/* タグレール 550x106 @ 160,615。点線罫(2x106)5本 + 項目87幅4つ、罫と項目の間 24。
   罫は「項目の左」を各項目の擬似要素で描き、末尾の1本だけ容器側で描く。
   項目1が x=26 から始まるので padding-left で 26 を確保する(0..2 が1本目の罫)。 */
.m-hero__tags {
  left: 0;
  top: 467px;
  width: 550px;
  height: 106px;
  padding-left: 26px;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 50px; /* 87 + 50 = 項目ピッチ137 */
}

.m-hero__tags::after {
  /* 末尾の点線罫(容器の右端) */
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  width: 2px;
  height: 106px;
  background: radial-gradient(circle at 50% 1px, #888 0 1.1px, transparent 1.2px) 0 0/2px 8px repeat-y;
}

.m-hero__tag {
  position: relative;
  width: 87px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.m-hero__tag::before {
  /* 各項目の左の点線罫 */
  content: "";
  position: absolute;
  left: -26px;
  top: 50%;
  width: 2px;
  height: 106px;
  margin-top: -53px;
  background: radial-gradient(circle at 50% 1px, #888 0 1.1px, transparent 1.2px) 0 0/2px 8px repeat-y;
}

.m-hero__tag::after {
  /* アイコン(項目ごとに差し替え) */
  content: "";
  order: -1;
  width: 24px;
  height: 24px;
  background: center/contain no-repeat;
}

.m-hero__tag--contents::after {
  height: 18px;
  background-image: url(../img/fg-tag-contents.svg);
}

.m-hero__tag--events::after {
  background-image: url(../img/fg-tag-events.svg);
}

.m-hero__tag--access::after {
  background-image: url(../img/fg-tag-access.svg);
}

.m-hero__tag--news::after {
  background-image: url(../img/fg-tag-news.svg);
}

:is(.muran-theme, .editor-styles-wrapper) .m-hero__tag-label {
  position: relative;
  margin: 0;
  width: 87px;
  height: 53px; /* 文字12 + gap16 + 丸25 */
  font-size: 16px;
  font-weight: 700;
  line-height: 12px;
  letter-spacing: 0.1em;
  text-align: center;
  white-space: nowrap;
  color: var(--wp--preset--color--ink);
}

.m-hero__tag-label a {
  text-decoration: none;
}

/* **枠の中はどこを押してもリンク**(2026-08-01 ユーザ指定)。
   包含ブロックは `.m-hero__tag-label`(position:relative)なので、
   アイコン(24)+ gap(16)= 40 ぶん上へ、左右は項目の間隔 50 の半分ずつ広げる。
   隣同士はちょうど接するだけで重ならない(87 + 50 = ピッチ137)。 */
.m-hero__tag-label a::after {
  content: "";
  position: absolute;
  inset: -40px -25px 0;
  z-index: 1;
}

.m-hero__tag-label::after {
  /* 青丸 25x25 + 白い山形(8x4) */
  content: "";
  position: absolute;
  left: 31px;
  top: 28px;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: var(--wp--preset--color--accent-cyan) url(../img/fg-chev-white.svg) center/10px 6px no-repeat;
  transition: background-position var(--m-nudge-ease);
}

/* ホバー中は山形が向いている方(下)へ寄る(→ `_01-tokens` の `--m-nudge-sm`)。
   ⚠ 山形は青丸の**背景**なので `background-position`(丸は動かさない)。
   ⚠ 押し所は上の面リンク(`a::after` が枠の外まで広がる)なので、ラベルを見れば足りる。 */
@media (hover: hover) {
  .m-hero__tag-label:hover::after {
    background-position: center calc(50% + var(--m-nudge-sm));
  }
}
/* ---------- 中間幅(≤1199)— 縦積み ---------- */
@media (max-width: 781px) {
  /* --- ヒーロー: 縦積み --- */
  .m-hero {
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .m-hero > * {
    position: static;
  }
  :is(.muran-theme, .editor-styles-wrapper) .m-hero__logo {
    margin-inline: auto;
  }
  :is(.muran-theme, .editor-styles-wrapper) .m-hero__badge {
    display: flex;
    align-items: center;
    gap: 24px;
    width: auto;
    height: auto;
    margin-top: 24px;
    text-align: left;
  }
  :is(.muran-theme, .editor-styles-wrapper) .m-hero__badge::before {
    position: static;
    flex: 0 0 1px;
    align-self: stretch;
    height: auto;
    transform: none;
  }
  .m-hero__venue,
  .m-hero__dates {
    position: static;
  }
  .m-hero__date .m-time {
    margin-left: 16px;
  }
  /* DXキャッチは .m-hero__headline の子で `.m-hero > *` の static が届かないため、
     個別に static へ戻す(基底の position:absolute は同格・先出しなので残る) */
  .m-hero__headline {
    width: 100%;
  }
  :is(.muran-theme, .editor-styles-wrapper) .m-hero__headline {
    position: static;
    width: min(100%, 631px);
    height: auto;
    margin-top: 28px;
  }
  .m-hero__headline img {
    width: 100%;
    height: auto;
  }
  :is(.muran-theme, .editor-styles-wrapper) .m-hero__photo {
    margin-top: 32px;
  }
  :is(.muran-theme, .editor-styles-wrapper) .m-hero__tags {
    /* ⚠ **`position` を静的にしない**(2026-08-02 ユーザ指摘・iPad11 で発覚)。
       上の `.m-hero > * { position: static }` はこの要素にも当たるが、
       静的にすると**末尾の点線罫(`::after`)の包含ブロックが `.m-hero` まで飛ぶ**。
       `right: 0` が「レールの右端」ではなく「ヒーロー全体の右端」になり、
       **画面の右上に点線が1本だけ現れる**(実測 1194px で x=1447 相当の位置)。

       項目側の罫(`.m-hero__tag::before`)は `.m-hero__tag` に
       `position: relative` があるので無事 = **1本だけ飛ぶ**ので気づきにくい。
       `sweep.js` も横スクロールが出ないため素通りする。

       ⚠⚠ **`top` / `left` を `auto` に戻すのを忘れない。**
       基底は `left: 0; top: 467px`(PC の絶対配置)。`static` の間はこの2つは
       **無視される**が、`relative` にした瞬間に**生き返って 467px 下へずれる**。
       実測: レールが `y 1054 → 1521` へ飛び、**次の節「夢卵とは」の見出しに
       重なった**(2026-08-02。この直しを入れた本人が踏んだ)。 */
    position: relative;
    top: auto;
    left: auto;
    width: auto;
    height: auto;
    margin-top: 40px;
  }
}
/* ---------- SP(≤781) ---------- */
@media (max-width: 781px) {
  /* --- ヒーロー: 原稿 `TOP_SP`(33:1676)の MV を実測して組み直す ---
     原稿の並びは PC と違い「DXキャッチ → 丸写真 → ロゴ → 会場/会期」。
     ページ座標(ブラウザUIのモック 92px を差し引いた値):
       SP-header 0..60 / DXキャッチ 338x102 @26,92 / 丸写真 240x240 @75,214
       ロゴ 200x55 @95,478 / 会場情報 232x125 @79,557 / MV下端 682
     タグレールは原稿の MV に無いので出さない。 */
  .m-hero {
    align-items: center;
  }
  :is(.muran-theme, .editor-styles-wrapper) .m-hero__headline {
    order: 1;
    width: 338px;
    max-width: 100%;
    height: auto;
    margin-top: 0;
  }
  :is(.muran-theme, .editor-styles-wrapper) .m-hero__photo {
    order: 2;
    width: 240px;
    height: 240px;
    margin-top: 20px;
  }
  .m-hero__photo img {
    width: 240px;
    height: 240px;
  }
  :is(.muran-theme, .editor-styles-wrapper) .m-hero__logo {
    order: 3;
    width: 200px;
    height: 55px;
    margin-top: 24px;
  }
  .m-hero__logo img {
    width: 200px;
    height: 55px;
  }
  :is(.muran-theme, .editor-styles-wrapper) .m-hero__badge {
    order: 4;
    flex-direction: column;
    align-items: center;
    width: 232px;
    height: auto;
    margin-top: 24px;
    gap: 0;
  }
  /* 会場ブロック(上)と会期ブロック(下)の間に横罫。原稿 Line 72 @y=622。
     Figma の LINE は高さ0(ストロークは CENTER で±0.5)なので、
     1px の実体を置くと会場情報が 125→126 に膨らむ。負マージンで高さを返す。 */
  :is(.muran-theme, .editor-styles-wrapper) .m-hero__badge::before {
    position: static;
    order: 2;
    width: 232px;
    height: 1px;
    margin: 16px 0 -1px;
    /* 原稿 Line 72 は #333333(--m-line=#EDEDED では罫が見えない)。
       PC側の縦罫(Logo Badge / Divider 1)も原稿は #000 なので、そちらは要判断 */
    background: var(--wp--preset--color--ink);
    transform: none;
  }
  .m-hero__venue {
    position: static;
    order: 1;
    width: 100%;
    text-align: center;
  }
  :is(.muran-theme, .editor-styles-wrapper) .m-hero__venue-name {
    display: inline-block;
    /* inline-block はベースラインに乗るので、行ボックスに親のディセンダ分
       (3.2px)が足され、会場ブロックが 49→52.2 に膨らむ。上端揃えで殺す */
    vertical-align: top;
    height: 26px;
    font-size: 21px;
    /* ⚠ **この幅では字間が字送りの 5% にならない**。
       原稿は幅ごとに font-size を変えたのに、**字間は PC の px を据え置いて**いた
       (SP 側で letter-spacing を書き直していない)。track() にすると見た目が変わるので、
       **いまの描画を保つために px を明示**する。原稿がこの字間を意図したのかは未確認。
       → __doc__/rebuild-plan.md 4.8 */
    letter-spacing: 1.3px;
    line-height: 26px;
    padding-left: 30px; /* ピン21 + gap9 */
    background-size: 21px 26px;
  }
  :is(.muran-theme, .editor-styles-wrapper) .m-hero__venue-addr {
    /* 原稿: 開催概要 = 名前26 + gap10 + 住所13 = 49、その下に横罫(y=622) */
    margin-top: 10px;
    height: 13px;
    font-size: 18px;
    line-height: 13px;
  }
  /* 英語(2026-09-14): 住所が 232px の列に1行で入らず、折れた2行目が下の罫に重なった → 小さくして折り返さない */
  :lang(en) :is(.muran-theme, .editor-styles-wrapper) .m-hero__venue-addr {
    font-size: 14px;
    letter-spacing: 0;
    white-space: nowrap;
  }
  :is(.muran-theme, .editor-styles-wrapper) .m-hero__dates {
    position: static;
    order: 3;
    width: 232px;
    margin-top: 16px;
  }
  /* 原稿SP: 数字24px/36 ・ 月日(土)14px/21 ・ 時刻18px/18、行は 232x18。
     原稿は6つの文字要素すべてが **ベースライン共有**(行1でページ y=655。
     「11」「月」「28」「日」「（土）」のグリフ下端が全部 655 で一致)で、
     並びは絶対配置ではなく **素の流し込み**(（土）の前だけ gap −6・時刻は gap 0)。
     → 曜日と時刻を PC の絶対配置から流しに戻し、`align-items:baseline`(基底規則)に任せる。
       絶対配置のままだと箱ごとに行ボックスが別なのでベースラインが揃わない。 */
  :is(.muran-theme, .editor-styles-wrapper) .m-hero__date {
    height: 18px;
    justify-content: flex-start;
    white-space: nowrap;
    font-size: 14px;
    line-height: 18px;
    letter-spacing: 0.05em;
    /* 原稿SPの gap は PC と違う: 「11月」「28日」の中は 0 で、その間だけ 2 */
    gap: 0;
    /* DENSO のグリフは行ボックス内で低く座る(規律15)。ベースラインが原稿より
       5px 下がるので、**ボックスは動かさず**塗りだけ上へ寄せる。
       実測: 原稿の行1ベースライン 654.0〜656.5 / 補正後 654.0〜656.75 */
    transform: translateY(-4px);
  }
  .m-hero__date .m-num + .m-num {
    margin-left: 2px; /* 原稿SP: 「11月」と「28日」の間だけ gap2 */
  }
  .m-hero__date .m-dow {
    position: static;
    margin-left: -6px; /* 原稿の itemSpacing。全角括弧の side bearing を詰める */
    line-height: 18px;
  }
  /* 英語(2026-09-14): 半角の「(Sat)」には詰める余白が無い(PC 側の同じ規則の注記) */
  :lang(en) .m-hero__date .m-dow {
    margin-left: 2px;
  }
  :lang(en) .m-hero__date .m-time {
    margin-left: 4px;
  }
  .m-hero__date .m-num {
    font-size: 24px;
    line-height: 18px;
  }
  .m-hero__date .m-time {
    position: static;
    margin-left: 0; /* 原稿は（土）の直後(gap 0) */
    font-size: 18px;
    line-height: 18px;
    letter-spacing: 0;
  }
  :is(.muran-theme, .editor-styles-wrapper) .m-hero__date + .m-hero__date {
    margin-top: 8px;
  }
  /* 原稿の MV にタグレールは無い */
  :is(.muran-theme, .editor-styles-wrapper) .m-hero__tags {
    display: none;
  }
}
.m-about {
  position: relative;
  height: 641px;
}

.m-about__body {
  position: absolute;
  left: calc(50% - 560px);
  top: 68px; /* 1041 - 973 */
  width: 480px;
  z-index: 2;
}

:is(.muran-theme, .editor-styles-wrapper) .m-about__desc {
  margin: 32px 0 0;
  height: 261px;
  font-size: 16px;
  line-height: 29px;
  letter-spacing: 0.05em;
}

:is(.muran-theme, .editor-styles-wrapper) .m-about__desc > p {
  margin: 0;
}

:is(.muran-theme, .editor-styles-wrapper) .m-about__desc > p + p {
  margin-top: 29px; /* 原稿は空行1つ分 */
}

/* 英語(2026-09-14): 本文が日本語より長く、高さ 261px(SP 297px)の箱から溢れて「Learn More」の下に潜った。
   英語のときだけ高さを中身なりにする(ボタンが押し下がる。PC の節の高さ 641 にはまだ余裕がある)。 */
:lang(en) :is(.muran-theme, .editor-styles-wrapper) .m-about__desc {
  height: auto;
}

/* 写真帯 720x641。原稿では版面の右端(=1440カンバスの右端)に接している。
   ここを `right:0`(ビューポート右端)にすると、ワイドモニタで帯だけが画面端へ飛び、
   本文列との間に巨大な空白ができる(27インチで発覚)。
   原稿の関係を保つには **1440 のカンバスを画面中央に置いた時の右端**に係留する:
     帯の右端 = min(ビューポート右端, 中央 + 720)
   1440 では 50%-720 = 0 なので従来と完全に同じ。2560 では中央+720 に止まり、
   帯の左端が版面の中央(=原稿と同じ関係)に来る。 */
.m-about__gallery {
  position: absolute;
  top: 0;
  right: max(0px, 50% - var(--m-canvas-half));
  width: 720px;
  height: 641px;
  display: flex;
  flex-wrap: nowrap;
  gap: 2px;
  overflow: hidden;
}

.m-about__col {
  width: 359px;
  flex: 0 0 359px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* 左列は原点 y=-80。可視窓 y=973 から見えるので 1053px 上へずらす */
.m-about__col--l {
  transform: translateY(-1053px);
}

:is(.muran-theme, .editor-styles-wrapper) .m-about__col figure {
  margin: 0;
  flex: 0 0 auto;
}

.m-about__col img {
  display: block;
  width: 359px;
  height: auto;
}

/* ---------- 中間幅(≤1199)— 本文 → 写真帯(全幅の横並び)の縦積み ---------- */
@media (max-width: 781px) {
  .m-about {
    height: auto;
  }
  :is(.muran-theme, .editor-styles-wrapper) .m-about__body {
    position: static;
    width: auto;
    max-width: 640px;
    margin-inline: auto;
  }
  .m-about__desc {
    height: auto;
  }
  :is(.muran-theme, .editor-styles-wrapper) .m-about__gallery {
    position: static;
    width: 100vw;
    max-width: 100vw;
    height: 220px;
    margin-top: 40px;
    /* 中央合わせで全幅へ。コアの constrained レイアウトは
       `margin-left/right:auto` を !important で当てるため、ここは同じ強さで返す
       (cascade-rules.md 規律1 の「コア自身が !important の箇所」の例外) */
    margin-inline: calc(50% - 50vw) !important;
    flex-direction: row;
  }
  .m-about__col {
    display: contents;
  }
  :is(.muran-theme, .editor-styles-wrapper) .m-about__col figure {
    flex: 0 0 auto;
  }
  .m-about__col img {
    width: auto;
    height: 220px;
  }
}
/* ---------- SP(≤781) ---------- */
@media (max-width: 781px) {
  /* ==========================================================
     ① 夢卵とは(752..1609.2 / 857.2)
       見出し138 → gap32 → 本文350x297(15px/27 の11行) → gap32 → CTA 240x48
       → gap64 → 写真帯(全幅 246.2)
     ========================================================== */
  /* DOM は「写真帯 → 本文」の順(PCは絶対配置なので順序に意味がない)。
     原稿SPは「本文 → 写真帯」なので order で入れ替える。 */
  .m-about {
    display: flex;
    flex-direction: column;
    /* 版面外へ抜けるのは写真帯だけ。本文列はルートパディングに合わせる */
    padding-inline: var(--wp--style--root--padding-right, 20px);
  }
  :is(.muran-theme, .editor-styles-wrapper) .m-about__body {
    order: 1;
    max-width: none;
  }
  :is(.muran-theme, .editor-styles-wrapper) .m-about__desc {
    margin-top: 32px;
    height: 297px;
    font-size: 15px;
    line-height: 27px;
    letter-spacing: 0.05em;
  }
  :is(.muran-theme, .editor-styles-wrapper) .m-about__desc > p + p {
    margin-top: 27px; /* 原稿は空行1つ分 */
  }
  /* 写真帯: 原稿SPは PC の縦2列を **横2段のモザイク**に組み替えたもの。
     タイル 177.5x122.6 / 段の中は gap0.99 / 段間 0.99。
     段ごとに左オフセット(1段目 -111.3 / 2段目 -21.9)があるので、
     1段目は左端が途中から、2段目は 1/2 タイルずれて見える。 */
  :is(.muran-theme, .editor-styles-wrapper) .m-about__gallery {
    order: 2;
    height: 246.2px;
    margin-top: 64px;
    flex-direction: column;
    gap: 0.99px;
  }
  .m-about__col {
    display: flex;
    flex-direction: row;
    flex: 0 0 122.6px;
    width: auto;
    height: 122.6px;
    gap: 0.99px;
    overflow: hidden;
    transform: none;
  }
  /* 原稿の 1段目 = PC の右列(Frame 6550) / 2段目 = PC の左列(Frame 6551) */
  .m-about__col--r {
    order: 1;
    margin-left: -111.3px;
  }
  .m-about__col--l {
    order: 2;
    margin-left: -21.9px;
  }
  :is(.muran-theme, .editor-styles-wrapper) .m-about__col figure {
    flex: 0 0 177.5px;
    width: 177.5px;
    height: 122.6px;
  }
  .m-about__col img {
    width: 177.5px;
    height: 122.6px;
    object-fit: cover;
  }
}
/* ---------- ② 写真帯の縦オートスライド(旧 24)----------
   タイルを2周ぶん並べて、ちょうど1周ぶん(P)動かして戻す=継ぎ目が出ない。
     左列 P = 1686(タイル計) + 5×2(gap) = 1696
     右列 P = 2157          + 6×2       = 2169
   静止状態(検証済みの版面)は左列 translateY(-1053) / 右列 0 なので、
   キーフレームの端をそこに合わせてある(t=0 で原稿と同じ画になる)。
   速度は 35px/s 相当。 */
@keyframes m-about-down {
  from {
    transform: translateY(-2749px); /* -1053 - 1696 */
  }
  to {
    transform: translateY(-1053px);
  }
}
@keyframes m-about-up {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(-2169px);
  }
}
.m-about__col--l {
  animation: m-about-down 48s linear infinite;
}

.m-about__col--r {
  animation: m-about-up 62s linear infinite;
}

/* 画面外では止める。クラスは **動かない入れ物**(写真帯の窓)に付く = muran.js のコメント参照。
   動く要素自身に付けると箱が画面外へ出て復帰できない。
   詳細度は (0,3,0)。`animation` ショートハンドは `animation-play-state` を `running` に
   リセットするので、(0,2,0) では**一時停止が効かない**。 */
:is(.muran-theme, .editor-styles-wrapper) .m-anim-pause .m-about__col {
  animation-play-state: paused;
}

/* エディタ側は muran.js が走らないのでループは編集の邪魔。止めて最終状態で見せる。 */
.editor-styles-wrapper .m-about__col {
  animation: none;
}

.editor-styles-wrapper .m-about__col--l {
  transform: translateY(-1053px); /* 原稿の初期フレーム */
}

@media (prefers-reduced-motion: reduce) {
  .m-about__col--l,
  .m-about__col--r {
    animation: none;
  }
  /* 静止状態は検証済みの版面に戻す */
  .m-about__col--l {
    transform: translateY(-1053px);
  }
}
@media (max-width: 781px) {
  /* 写真帯は横2段のモザイクなので、縦ではなく横へ逆向きに流す。
         1段目(=PCの右列)P = 1065 + 6×0.99 = 1070.94
         2段目(=PCの左列)P =  887.5 + 5×0.99 = 892.45

     段自身の `overflow:hidden` を外す。**動かす要素が自分でクリップしていると
     クリップ枠も一緒に動く**ので、段が画面外へ滑り出してタイルが消える。
     外側の枠は `.m-about__gallery` の `overflow:hidden` が持っているので静止画は変わらない。 */
  .m-about__col {
    overflow: visible;
  }
  @keyframes m-about-sp-left {
    from {
      transform: translateX(0);
    }
    to {
      transform: translateX(-1070.94px);
    }
  }
  @keyframes m-about-sp-right {
    from {
      transform: translateX(-892.45px);
    }
    to {
      transform: translateX(0);
    }
  }
  .m-about__col--r {
    animation: m-about-sp-left 36s linear infinite;
  }
  .m-about__col--l {
    animation: m-about-sp-right 30s linear infinite;
  }
}
@media (max-width: 781px) and (prefers-reduced-motion: reduce) {
  .m-about__col--l,
  .m-about__col--r {
    animation: none;
    transform: none; /* SPの静止状態は translateY なし */
  }
}
/* ==========================================================
   ① 基底(PC)— 旧 _13-top-enjoy。Figma TOP 2132..2426
   ========================================================== */
:is(.muran-theme, .editor-styles-wrapper) .m-catcards {
  margin-top: 48px; /* リード下端2084 → 2132 */
  /* 🔴 258 → 288(2026-08-21)。見出しが2行に伸びたぶん(30)。下の `.m-catcard` を見ること */
  height: 288px;
  gap: 20px;
  flex-wrap: nowrap;
}

.m-catcard {
  position: relative;
  width: 265px;
  flex: 0 0 265px;
  /* 原稿294 − 対象タグ36(2026-08-07 に廃止)= 258 だったが、
     🔴 **2026-08-21 の先方指定⑤**でソフトウェアが正式名(16文字)になり、
     20px × 16 = 320 は中身の幅 233 に**1行では入らない**(実測で丸矢印に重なった)。
     → 見出しを2行ぶんの箱にして 258 + 30 = **288**。
     **写真→見出しの間隔(8)と、見出しの箱→丸矢印の間隔(16)は原稿のまま**で、
     1行の3枚は箱の下半分が空く(4枚の高さを揃えるため)。 */
  height: 288px;
  padding: 24px 16px 32px;
  border-radius: 16px;
  background: #ffffff;
  text-align: center;
}

.m-catcard--idea {
  box-shadow: inset 0 0 0 2px #ebf4ff;
  --m-cat: var(--wp--preset--color--cat-blue);
}

.m-catcard--software {
  box-shadow: inset 0 0 0 2px #ffebca;
  --m-cat: var(--wp--preset--color--cat-orange);
}

.m-catcard--kids {
  box-shadow: inset 0 0 0 2px #e1f1ef;
  --m-cat: var(--wp--preset--color--cat-teal);
}

.m-catcard--skills {
  box-shadow: inset 0 0 0 2px #fbebdf;
  --m-cat: #af8462;
}

:is(.muran-theme, .editor-styles-wrapper) .m-catcard__photo {
  margin: 0 auto;
  width: 120px;
  height: 120px;
}

.m-catcard__photo img {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 2px #ffffff;
}

/* ⚠ ここに原稿では**対象ラベル**(「学生・社会人対象」/ 両側に括弧あしらい 5x20)が
   あったが、**2026-08-07 に先方判断でタグ状意匠ごと廃止**(→ `inc/data/contents.php`)。
   高さ20 + 上の余白16 = 36 を落としたぶん、カード 294 → 258 / 丸矢印 234 → 198 に詰めてある
   (**写真→見出し→矢印の間隔は原稿のまま**)。 */
:is(.muran-theme, .editor-styles-wrapper) .m-catcard__title {
  margin: 8px 0 0;
  height: 60px; /* 🔴 2行ぶん(30 → 60)。上の `.m-catcard` を見ること */
  font-size: 20px;
  font-weight: 700;
  line-height: 30px;
  letter-spacing: 0;
  color: var(--wp--preset--color--ink);
}

.m-catcard__title a {
  text-decoration: none;
}

/* 🔴 見出しの `<br>` は **SP でだけ効かせる**(2026-08-24 ユーザ指定
   「改行位置は『チャレンジ』の後に」)。位置の出所は `muran_contest_defs()` の `name_br`。
   ⚠ **`<br>` 自身にクラスを付けない**(`.m-sp-br` にしない)。ブロックエディタは
     編集したブロックを DOM から読み直すので **属性が落ち**、
     PC でも改行が出るようになる(規律114)。→ 親の側で当てる。 */
.m-catcard__title br {
  display: none;
}

.m-catcard::after {
  /* 丸矢印 28x28(カテゴリ色 + 2px白枠) */
  content: "";
  position: absolute;
  left: 50%;
  top: 228px; /* 原稿234 − 対象タグ36 + 見出し2行化30(見出しの箱の下端→矢印の16pxは原稿のまま)*/
  width: 28px;
  height: 28px;
  margin-left: -14px;
  border-radius: 50%;
  background: var(--m-cat) url(../img/fg-chev-cat.svg) center/12px 7px no-repeat;
  box-shadow: 0 0 0 2px #ffffff;
  transition: background-position var(--m-nudge-ease);
}

/* ホバー中は山形が向いている方(下)へ寄る(→ `_01-tokens` の `--m-nudge-sm`)。
   ⚠ 山形は丸の**背景**なので `background-position` を動かす(丸は動かさない)。
   ⚠ 押し所は面リンクでカード全面なので、見るのは**カード**。 */
@media (hover: hover) {
  .m-catcard:hover::after {
    background-position: center calc(50% + var(--m-nudge-sm));
  }
}
/* ==========================================================
   ② 中間幅(≤1199)— 旧 _21-top-mid。265x4 + gap20 = 1120 が入らない幅で折り返す
   ========================================================== */
@media (max-width: 781px) {
  :is(.muran-theme, .editor-styles-wrapper) .m-catcards {
    height: auto;
    flex-wrap: wrap;
    justify-content: center;
  }
}
/* ==========================================================
   ③ SP(≤781)— 旧 _22-sp-layer。横型カード 350x92 を gap8 で4枚
   ========================================================== */
@media (max-width: 781px) {
  :is(.muran-theme, .editor-styles-wrapper) .m-catcards {
    margin-top: 24px;
    height: auto;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 8px;
  }
  /* 丸写真60 → gap16 → [対象ラベル20 / gap4 / 見出し24] → 丸シェブロン28 */
  .m-catcard {
    display: grid;
    grid-template-columns: 60px minmax(0, 1fr) 28px;
    /* 原稿は `20px 24px` + row-gap4(1行目 = 対象タグ)。**2026-08-07 に廃止**したので
       空の1行目を 0 に畳んで見出しを中央に戻す
       (`.m-catcard__title` の `grid-row: 2` は動かさない)。
       カード高 92 は丸写真60 + padding32 で決まるので**原稿のまま**。 */
    /* 🔴 2行目は `24px` 決め打ちだったが、正式名(16文字・16px)は中身の幅 198 に
       1行では入らない(2026-08-21 指定⑤)。行を `auto` にして 2行を許す。 */
    grid-template-rows: 0 auto;
    align-content: center;
    column-gap: 16px;
    row-gap: 0;
    width: 100%;
    flex: 0 0 auto;
    /* 丸写真60 + padding32 = 92 が原稿。見出しが2行になるカードだけ素直に伸びる
       (SP は縦積みなので、伸びても他のカードは動かない)。
       ⚠ `height` を **`auto` に戻す**のを忘れない。PC 側が `288px` を持っているので、
         `min-height` を足すだけだと SP のカードが 288 のまま巨大化する(実測で踏んだ)。 */
    height: auto;
    min-height: 92px;
    padding: 16px;
    border-radius: 8px;
    text-align: left;
  }
  /* 原稿SPは4枚とも同じ淡青の枠(PCはカテゴリ色) */
  :is(.m-catcard--idea, .m-catcard--software, .m-catcard--kids, .m-catcard--skills) {
    box-shadow: inset 0 0 0 2px #ebf4ff;
  }
  :is(.muran-theme, .editor-styles-wrapper) .m-catcard__photo {
    grid-column: 1;
    grid-row: 1/3;
    align-self: center;
    width: 60px;
    height: 60px;
    margin: 0;
  }
  /* SPは原稿のマスク(60x60・丸)どおりに焼いた専用画像。白枠は原稿の
     `stroke=#FFFFFF/2.0INS` に合わせて内側に置く */
  .m-catcard__photo img {
    width: 60px;
    height: 60px;
  }
  /* ⚠ 原稿 SP では grid の1行目が**対象ラベル**(20px・括弧あしらい無し)だったが、
     2026-08-07 に廃止。行は 0 に畳んである(上の `grid-template-rows`)。 */
  .m-catcard__title br {
    display: inline;
  }
  :is(.muran-theme, .editor-styles-wrapper) .m-catcard__title {
    grid-column: 2;
    grid-row: 2;
    margin: 0;
    /* ⚠ PC は2行ぶんの箱(60px)を決め打ちしているので **`auto` に戻す**。
       SP は1行24 / 2行48 のどちらでも 60(= 92 − padding32)に収まるので、
       **カードの高さ 92 は原稿のまま動かない**。
       ⚠ `align-self: center` が要る。行の高さは**丸写真60が決めている**ので、
         既定の `stretch` だと箱が 60 に伸びて文字が行の上端に貼り付く
         (1行の3枚が 18px 上がる。実測で踏んだ)。 */
    align-self: center;
    height: auto;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0.05em;
  }
  /* 丸シェブロンは原稿ノードを丸ごと書き出したSVGに差し替える。
     CSSの丸+PC用山形(12x7.41)を 10x5 に縮める組み方だと線が細って別物になる。
     書き出しは 32x32(芯28 + 外側の白2px)なので、負マージンで版面上は 28x28 に戻す。 */
  .m-catcard::after {
    position: static;
    grid-column: 3;
    grid-row: 1/3;
    align-self: center;
    width: 32px;
    height: 32px;
    margin: -2px;
    border-radius: 0;
    box-shadow: none;
    background: center/32px 32px no-repeat;
  }
  .m-catcard--idea::after {
    background-image: url(../img/fg-catbtn-sp-idea.svg);
  }
  .m-catcard--software::after {
    background-image: url(../img/fg-catbtn-sp-software.svg);
  }
  .m-catcard--kids::after {
    background-image: url(../img/fg-catbtn-sp-kids.svg);
  }
  .m-catcard--skills::after {
    background-image: url(../img/fg-catbtn-sp-skills.svg);
  }
}
/* ==========================================================
   ④ コアの flow レイアウトを切る — 旧 _26-category
   `> * + *` の 24px がカード行に乗ると1行ごとに下がる
   ========================================================== */
:is(.m-cat-index, .m-work) .m-catcards > * {
  margin-block-start: 0;
}

/* ==========================================================
   ⑤ 文脈: 下層の回遊ブロック(`.m-goaround`)— 旧 _28-explore
   ========================================================== */
:is(.muran-theme, .editor-styles-wrapper) .m-goaround .m-catcards {
  margin-top: 40px;
  gap: 20px;
  flex-wrap: nowrap;
  height: auto;
}

/* 回遊版のカテゴリカードは枠色・カテゴリ色とも TOP と同じ(原稿の stroke 実測:
   #EBF4FF / #FFEBCA / #E1F1EF / #FBEBDF)。違うのは **丸矢印が90度回って右向き**なことだけ
   (TOP は下向き。`relativeTransform` [[0,1],[-1,0]] 実測) */
.m-catcard--flat::after {
  transform: rotate(-90deg);
}

/* ==========================================================
   ⑥ 文脈: 回遊ブロック — 中間幅(≤1219)。旧 _29-category-mid
   ========================================================== */
@media (max-width: 781px) {
  :is(.muran-theme, .editor-styles-wrapper) .m-goaround .m-catcards {
    flex-wrap: wrap;
    justify-content: center;
  }
}
/* ==========================================================
   ⑦ 文脈: 回遊ブロック — SP(≤781)。旧 _30-category-sp
   ========================================================== */
@media (max-width: 781px) {
  :is(.muran-theme, .editor-styles-wrapper) .m-goaround .m-catcards {
    flex-direction: column;
    align-items: stretch;
    gap: 32px;
    margin-top: 24px;
  }
  .m-goaround .m-catcard {
    flex-basis: auto;
    width: 100%;
  }
}
/* ==========================================================
   ⑧ 面リンク — 旧 _43-clickable-cards
   `z-index` は**カードの中のアイコン(z-index:1)より上**。
   透明なので見た目は変わらないが、下だとアイコンの上でだけ押せない穴が空く。
   実測 = `node site/setup/verify/clickable.js`
   ========================================================== */
.m-catcard__title a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
}

/* ---------- ホバーの走査(青・赤の平行四辺形が左→右に抜ける)----------
   仕組みと寸法の根拠は `_01-tokens.scss` の `--m-sweep-*`。
   **大きなカード型のボタンにも同じ効果を入れる**(2026-08-05 ユーザ指定)。
   矢印の寄りとは別軸なので、ホバー中は両方が同時に走る。
   静止時は版面の外にあるので**見た目は1px も変わらない**(基準線は不変)。
   ⚠ この宣言は**地色を決める規則より後**に置く。`background:` の一括指定は
     `background-image` を `none` に戻すので、前に置くと黙って消える。 */
.m-catcard {
  background-image: var(--m-sweep-img);
  background-repeat: no-repeat;
  background-size: var(--m-sweep-w) 100%;
  background-position: var(--m-sweep-from) 0;
  /* 見かけの速さ: 実測幅 265px → 0.99s(式は `_01-tokens`)*/
  --m-sweep-dur: 0.99s;
}

@media (hover: hover) {
  .m-catcard:hover {
    background-position: var(--m-sweep-to) 0;
    transition: background-position var(--m-sweep-dur) ease-out;
  }
}
.m-panel {
  width: 1120px;
  max-width: 100%;
  margin-inline: auto;
  padding: 80px;
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.6);
  box-shadow: inset 0 0 0 2px #ffffff;
  backdrop-filter: blur(4px);
}

.m-contest {
  position: relative;
  width: 960px;
  height: 455px;
}

/* 原稿のカード間(内容ボックスの下端→次の上端)。
   Kids だけ 115px なので、`.m-contest + .m-contest` と同じ (0,2,0) で後出しして勝つ */
.m-contest + .m-contest {
  margin-top: 104px;
}

.m-contest + .m-contest--kids {
  margin-top: 115px;
}

.m-contest > * {
  position: absolute;
  margin: 0;
}

.m-contest__photo {
  top: 0;
  width: 682px;
  height: 455px;
}

.m-contest__photo img {
  display: block;
  width: 682px;
  height: 455px;
}

/* 原稿は `top:40px / height:372px`。チップ行(高さ30 + 見出しとの gap16)を 2026-08-07 に廃止し、
   落としたぶん 46px 縮め、**色面の中心は原稿と同じ y=226 に置く**
   (写真 682x455 に対する上下の見え方を変えないため。40/43 → 63/66)。 */
.m-contest__panel {
  top: 63px;
  width: 528px;
  height: 326px;
  border-radius: 16px;
  background: var(--m-cat);
}

/* 色面が右(写真は左) / 色面が左(写真は右) */
.m-contest--right .m-contest__photo {
  left: 0;
}

.m-contest--right .m-contest__panel {
  left: 432px;
}

.m-contest--left .m-contest__photo {
  left: 278px;
}

.m-contest--left .m-contest__panel {
  left: 0;
}

/* Idea だけ色面が 8px 下(原稿の実測差)。原稿48 → 中心 y=234 を保って 71 */
.m-contest--idea .m-contest__panel {
  top: 71px;
}

/* 🔴 ソフトウェアだけ**見出しが2行**(正式名16文字。2026-08-21 指定⑤)。
   色面をその1行ぶん(48)伸ばし、**中心 y=226 が動かないよう上端を24 上げる**
   (63 − 24 = 39 / 39 + 374/2 = 226)。写真の帯は 455 高なので 39..413 は**その中に収まる**
   = 節の高さも下の帯の位置も 1px も動かない。
   透かし英字は色面の下端に接する位置(高さ − 86)なので一緒に下げる。 */
.m-contest--software .m-contest__panel {
  top: 39px;
  height: 374px;
}

.m-contest--software .m-contest__mark {
  top: 288px;
}

.m-contest--idea {
  --m-cat: var(--wp--preset--color--cat-blue);
}

.m-contest--software {
  --m-cat: var(--wp--preset--color--cat-orange);
}

.m-contest--kids {
  --m-cat: var(--wp--preset--color--cat-teal);
}

.m-contest--skills {
  --m-cat: #af8462;
}

/* 色面の中身: Info Content 400x252 @ +64,+56 */
.m-contest__panel > *:not(.m-contest__mark) {
  position: relative;
  width: 400px;
  margin-left: 64px;
}

/* ⚠ ここに原稿では**チップ行**(高さ30 / ステータス「投票受付中」+ 対象者「学生・社会人対象」)が
   あったが、**2026-08-07 に先方判断でタグ状意匠ごと廃止**(→ `inc/data/contents.php`)。
   高さ30 + 見出しとの gap16 = 46 を落としたぶん色面 372 → 326 に詰め、
   **色面の中心 y=226 は原稿のまま**にしてある(上の `.m-contest__panel`)。 */
:is(.muran-theme, .editor-styles-wrapper) .m-contest__title {
  /* 原稿16(チップ行の下)。チップが無くなったので**色面の上余白 56 をここが引き継ぐ**
     (16 のままだと見出しが色面の上端に貼り付く)。 */
  margin-top: 56px;
  /* 🔴 `height: 48px` 決め打ちだったが、正式名(16文字・32px = 512)は
     色面の中身の幅 400 に**1行では入らない**(2026-08-21 指定⑤。実測で本文に重なった)。
     → 下限だけ残して2行を許す。伸びる色面の側は下の `--software` を見ること。 */
  min-height: 48px;
  font-size: 32px;
  font-weight: 700;
  line-height: 48px;
  letter-spacing: 0.05em;
  color: #ffffff;
}

:is(.muran-theme, .editor-styles-wrapper) .m-contest__desc {
  margin-top: 16px;
  height: 54px;
  font-size: 15px;
  line-height: 27px;
  letter-spacing: 0.05em;
  color: #ffffff;
}

/* 透かし英字。原稿は 519x86 のフレームでクリップされていて右側が切れる */
:is(.muran-theme, .editor-styles-wrapper) .m-contest__mark {
  position: absolute;
  box-sizing: border-box;
  left: 9px;
  top: 240px; /* 原稿286。色面の下端に接する位置(326 − 86)*/
  width: 519px;
  height: 86px;
  margin: 0;
  overflow: hidden;
  font-family: var(--wp--preset--font-family--display);
  /* padding 24 のままだと DENSO EN のグリフが 17px 低く座り、
     86px のクリップ枠に下端を削がれて字が切れる */
  padding-top: 7px;
  font-size: 108px;
  font-weight: 700;
  line-height: 48px;
  letter-spacing: 0;
  white-space: nowrap;
  text-transform: capitalize;
  color: #ffffff;
  opacity: 0.1;
  pointer-events: none;
}

/* ステッカー(原稿の回転を焼き込んだ画像。位置はノード実測) */
.m-contest__sticker {
  z-index: 3;
}

.m-contest__sticker img {
  display: block;
}

.m-contest--idea .m-contest__sticker {
  left: 758px;
  top: -17px;
  width: 159px;
  height: 144px;
}

.m-contest--software .m-contest__sticker {
  left: 334px;
  top: -19px;
  width: 149px;
  height: 132px;
}

.m-contest--kids .m-contest__sticker {
  left: 727px;
  top: -19px;
  width: 188px;
  height: 137px;
}

.m-contest--skills .m-contest__sticker {
  left: 344px;
  top: -3px;
  width: 128px;
  height: 115px;
}

/* ---------- 中間幅(≤1199)— 写真の上に色面を縦積み ---------- */
@media (max-width: 781px) {
  :is(.muran-theme, .editor-styles-wrapper) .m-panel {
    width: 100%;
    padding: 40px 24px;
  }
  .m-contest {
    width: 100%;
    height: auto;
  }
  :is(.muran-theme, .editor-styles-wrapper) .m-contest + .m-contest,
  :is(.muran-theme, .editor-styles-wrapper) .m-contest--kids {
    margin-top: 48px;
  }
  .m-contest > * {
    position: static;
  }
  :is(.muran-theme, .editor-styles-wrapper) .m-contest__photo,
  :is(.muran-theme, .editor-styles-wrapper) .m-contest__photo img {
    width: 100%;
    height: auto;
  }
  :is(.muran-theme, .editor-styles-wrapper) .m-contest__panel {
    position: relative;
    width: 92%;
    max-width: 528px;
    height: auto;
    margin: -40px auto 0;
    padding-bottom: 40px;
  }
  .m-contest__panel > *:not(.m-contest__mark) {
    width: auto;
    margin-left: 0;
    padding-inline: 24px;
  }
  :is(.muran-theme, .editor-styles-wrapper) .m-contest__desc {
    height: auto;
  }
  :is(.muran-theme, .editor-styles-wrapper) .m-contest__mark {
    left: 0;
    top: auto;
    bottom: 0;
    width: 100%;
  }
  /* 2クラス(0,2,0)で書いて後出し勝ちにする(!important を足さない) */
  :is(.m-contest--idea, .m-contest--software, .m-contest--kids, .m-contest--skills) .m-contest__sticker {
    position: absolute;
    left: auto;
    right: 12px;
    top: -18px;
  }
}
/* ---------- SP(≤781) ---------- */
@media (max-width: 781px) {
  /* ==========================================================
     ② コンテンツ紹介 / 前半 = 夢卵を楽しむ(1673.2..2313.2)
       見出し154 → gap16 → リード54 → gap24 → 横カード4枚(350x92 / gap8)
     ========================================================== */
  /* ==========================================================
     ③ コンテンツ紹介 / 後半 = コンテスト4本(2377.2..4705.2)
       PC の「白パネル上のオーバーラップ」ではなく、**全幅の色帯4本**。
       帯 = 透かし英字(64px/48 白10%)+ バッジ行 + 見出し + 本文 + 写真310x233 + 白ピル
     ========================================================== */
  /* 白パネルの装飾を全部落として全幅の器にする。
     コアの constrained レイアウトが `margin-left/right:auto` を !important で
     当てるため、フルブリードだけは同じ強さで返す
     (cascade-rules.md 規律1 の「コア自身が !important の箇所」の例外) */
  :is(.muran-theme, .editor-styles-wrapper) .m-panel {
    width: 100vw;
    max-width: 100vw;
    margin-inline: calc(50% - 50vw) !important;
    padding: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    backdrop-filter: none;
  }
  .m-contest {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    height: auto;
    padding: 56px var(--wp--style--root--padding-right, 20px) 42px;
    background: var(--m-cat);
    overflow: hidden; /* 透かし英字を帯で切る */
  }
  /* 帯どうしは隙間なく積む(原稿の V gap0) */
  :is(.muran-theme, .editor-styles-wrapper) .m-contest + .m-contest,
  :is(.muran-theme, .editor-styles-wrapper) .m-contest--kids {
    margin-top: 0;
  }
  /* 帯ごとの下余白(原稿の実測差) */
  .m-contest--software {
    padding-bottom: 50px;
  }
  .m-contest--kids,
  .m-contest--skills {
    padding-bottom: 48px;
  }
  /* 色面はもう箱ではないので、中身を帯の直下の並びへ出す */
  .m-contest__panel {
    display: contents;
  }
  .m-contest > *,
  .m-contest__panel > *:not(.m-contest__mark) {
    position: static;
    width: 100%;
    max-width: 350px;
    margin-left: 0;
    padding-inline: 0;
  }
  /* ⚠ 原稿 SP では帯の先頭が**チップ行**(`order:1` / 高さ30)だったが 2026-08-07 に廃止。
     `order` は 2 以降のまま(番号を詰めても並びは同じなので触らない)。 */
  :is(.muran-theme, .editor-styles-wrapper) .m-contest__title {
    order: 2;
    /* 原稿8(チップ行の下)。チップが帯の先頭(`margin-top:0`)だったので、
       0 にして**見出しが帯の上余白 56 の位置に来る**ようにする。
       帯の高さは padding で決まるので、消したぶん(30 + 8)だけ素直に縮む。 */
    margin-top: 0;
    height: auto;
    font-size: 31px;
    /* 原稿の行送りは 40.3 だがボックスは 1行40 / 2行80 に丸められている。
       40 にして帯の高さ(567/615/573/573)を原稿どおりにする */
    line-height: 40px;
    letter-spacing: 0.05em;
    text-align: center;
  }
  :is(.muran-theme, .editor-styles-wrapper) .m-contest__desc {
    order: 3;
    margin-top: 8px;
    height: 54px;
    text-align: center;
  }
  :is(.muran-theme, .editor-styles-wrapper) .m-contest__photo {
    order: 4;
    width: 310px;
    height: 233px;
    margin-top: 24px;
  }
  :is(.muran-theme, .editor-styles-wrapper) .m-contest__photo img {
    width: 310px;
    height: 233px;
    object-fit: cover;
  }
  /* 透かし英字は帯の左上(+20)。右へはみ出した分は帯が切る */
  :is(.muran-theme, .editor-styles-wrapper) .m-contest__mark {
    left: 10px;
    top: 20px;
    width: auto;
    max-width: none;
    height: 48px;
    padding-top: 4px; /* PC の 7px を 64/108 で按分 */
    font-size: 64px;
    line-height: 48px;
    overflow: visible;
  }
  .m-contest--software .m-contest__mark {
    left: 6px;
  }
  .m-contest--kids .m-contest__mark {
    left: 8px;
  }
  .m-contest--skills .m-contest__mark {
    left: 7px;
  }
  /* ステッカーは帯の座標系(=ページ座標)で置く */
  :is(.m-contest--idea, .m-contest--software, .m-contest--kids, .m-contest--skills) .m-contest__sticker {
    position: absolute;
    right: auto;
    max-width: none;
  }
  .m-contest--idea .m-contest__sticker {
    left: 279.4px;
    top: 388px;
    width: 106.1px;
    height: 89px;
  }
  .m-contest--software .m-contest__sticker {
    left: 8px;
    top: 378px;
    width: 99px;
    height: 84.9px;
  }
  .m-contest--kids .m-contest__sticker {
    left: 280.9px;
    top: 409.1px;
    width: 97.5px;
    height: 66.7px;
  }
  .m-contest--skills .m-contest__sticker {
    left: 23px;
    top: 399px;
    width: 79px;
    height: 68px;
  }
  :is(.m-contest--idea, .m-contest--software, .m-contest--kids, .m-contest--skills) .m-contest__sticker img {
    width: 100%;
    height: 100%;
  }
}
/* ---------- ③ ステッカーの振り子スイング(旧 24)----------
   0% を回転なし(=原稿の位置)にしておくと、遅延で段をつけても
   t=0 では4枚とも原稿どおりに揃う。上端中央が支点。 */
@keyframes m-swing {
  0%, 100% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(-3.5deg);
  }
  75% {
    transform: rotate(3.5deg);
  }
}
/* 速度はユーザ指示(2026-07-31)で 3倍。3.8s → 1.27s(遅延も同じ比で詰める) */
:is(.muran-theme, .editor-styles-wrapper) .m-contest__sticker {
  transform-origin: 50% 0;
  animation: m-swing 1.27s ease-in-out infinite;
}

.m-contest--software .m-contest__sticker {
  animation-duration: 1.43s;
  animation-delay: 0.13s;
}

.m-contest--kids .m-contest__sticker {
  animation-duration: 1.33s;
  animation-delay: 0.27s;
}

.m-contest--skills .m-contest__sticker {
  animation-duration: 1.53s;
  animation-delay: 0.4s;
}

/* ⚠ 一時停止は上の `animation` ショートハンドより**後**でなければ効かない
   (ショートハンドが `animation-play-state:running` にリセットするため)。詳細度も (0,3,0)。 */
:is(.muran-theme, .editor-styles-wrapper) .m-anim-pause .m-contest__sticker {
  animation-play-state: paused;
}

.editor-styles-wrapper .m-contest__sticker {
  animation: none;
}

@media (prefers-reduced-motion: reduce) {
  :is(.muran-theme, .editor-styles-wrapper) .m-contest__sticker {
    animation: none;
  }
}
:is(.muran-theme, .editor-styles-wrapper) .m-evcards {
  margin-top: 56px; /* 見出し下端5075 → 5131 */
  height: 410px;
  gap: 9px; /* 原稿は 160/442/724/1006(右に1px余る) */
  flex-wrap: nowrap;
}

.m-evcard {
  position: relative;
  width: 273px;
  flex: 0 0 273px;
  height: 410px;
  background: #000;
  overflow: hidden;
}

.m-evcard > * {
  position: absolute;
  margin: 0;
}

/* 写真は「黒地 + 50%(体験のみ40%)」を焼き込み済み */
.m-evcard__photo {
  inset: 0;
}

.m-evcard__photo img {
  display: block;
  width: 273px;
  height: 410px;
}

/* ⚠ 写真の左上(+10,+10)に原稿では**特性タグ**が2つ(「予約不要」「当日自由参加」等)
   並んでいたが、**2026-08-07 に先方判断でタグ状意匠ごと廃止**(→ `inc/data/contents.php`)。
   ここは子が全部 `position: absolute` なので、**外しても見出し以下は 1px も動かない**。 */
:is(.muran-theme, .editor-styles-wrapper) .m-evcard__title {
  left: 0;
  top: 150px;
  width: 273px;
  height: 32px;
  font-size: 21px;
  font-weight: 700;
  line-height: 32px;
  letter-spacing: 0.05em;
  text-align: center;
  color: #ffffff;
}

:is(.muran-theme, .editor-styles-wrapper) .m-evcard__desc {
  left: 32px;
  top: 198px;
  width: 209px;
  font-size: 14px;
  line-height: 25px;
  letter-spacing: 0.05em;
  color: #ffffff;
}

:is(.muran-theme, .editor-styles-wrapper) .m-evcard__more {
  left: 203px;
  top: 340px;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.5);
  background: url(../img/fg-arrow-thin.svg) center/15px 13px no-repeat;
  transition: background-position var(--m-nudge-ease);
}

/* ホバー中は矢印が右へ寄る(→ `_01-tokens` の `--m-nudge`)。
   ⚠ 矢印は丸の**背景**なので、要素を動かすと丸ごと動く。`background-position`
     だけを動かして中身を寄せる。
   ⚠ 押し所は下の面リンク(`.m-evcard__more a::after` がカード全面まで広がる)なので、
     見るのは**カード**。丸だけを見ると「カードに乗っているのに動かない」になる。 */
@media (hover: hover) {
  :is(.muran-theme, .editor-styles-wrapper) .m-evcard:hover .m-evcard__more {
    background-position: calc(50% + var(--m-nudge)) center;
  }
}
.m-evcard__more a {
  display: block;
  width: 100%;
  height: 100%;
}

/* ---------- 中間幅(≤1199)— 折り返し ---------- */
@media (max-width: 781px) {
  :is(.muran-theme, .editor-styles-wrapper) .m-evcards {
    height: auto;
    flex-wrap: wrap;
    justify-content: center;
    gap: 24px;
  }
}
/* ---------- SP(≤781) ---------- */
@media (max-width: 781px) {
  /* ==========================================================
     ④ イベント体験(4769.2..5519.4 / 750.2)
       見出し146 → gap24 → カード4枚(350x139 / gap8)
       カード = 写真地 + [バッジ行23 / 見出し24 / 本文40] + 丸シェブロン26
     ========================================================== */
  :is(.muran-theme, .editor-styles-wrapper) .m-evcards {
    margin-top: 24px;
    height: auto;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 8px;
  }
  .m-evcard {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 26px;
    align-content: center;
    column-gap: 20px;
    width: 100%;
    flex: 0 0 auto;
    height: 139px;
    padding: 20px 16px 20px 20px;
    border-radius: 16px;
  }
  /* 写真は絶対配置なので **位置指定要素**として静的な文字より後に描かれる。
     文字側も relative にしておかないとカードの中身が写真に隠れる
     (PCは子が全部 absolute なので DOM 順で決まっていた。SPで実際に踏んだ) */
  .m-evcard__photo {
    position: absolute;
    inset: 0;
  }
  .m-evcard__photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  /* ⚠ 原稿 SP では grid の1行目が**特性タグ**(23px)だったが 2026-08-07 に廃止。
     行は暗黙で作られていたので、消せば行ごと無くなる(`align-content:center` が
     残りを 139px の中で中央に戻す)。 */
  :is(.muran-theme, .editor-styles-wrapper) .m-evcard__title {
    position: relative;
    inset: auto;
    grid-column: 1;
    grid-row: 2;
    width: auto;
    height: 24px;
    margin-top: 8px;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0;
    text-align: left;
  }
  :is(.muran-theme, .editor-styles-wrapper) .m-evcard__desc {
    position: relative;
    inset: auto;
    grid-column: 1;
    grid-row: 3;
    width: auto;
    height: 40px;
    margin-top: 4px;
    font-size: 13px;
    line-height: 19.5px;
    letter-spacing: 0.05em;
  }
  :is(.muran-theme, .editor-styles-wrapper) .m-evcard__more {
    position: relative;
    inset: auto;
    grid-column: 2;
    grid-row: 1/4;
    align-self: center;
    /* 原稿ノード(丸26 + 1px白の外側ストローク + 右向きシェブロン)を
       そのまま書き出した 28x28。負マージンで版面上は 26x26 に戻す */
    width: 28px;
    height: 28px;
    margin: -1px;
    border-radius: 0;
    box-shadow: none;
    background: url(../img/fg-evbtn-sp.svg) center/28px 28px no-repeat;
  }
}
/* ---------- 面で押せるようにする(旧 43。2026-08-01 ユーザ指摘)----------
   リンクは右下の丸ボタン(絶対配置)の中にあるので、PC は負の inset でカード
   (273x410)まで広げる。SP はグリッドの升なので親を静的に戻せば `inset:0` が効く。 */
.m-evcard__more a::after {
  content: "";
  position: absolute;
  inset: -340px -20px -20px -203px; /* ボタン 203,340 50x50 → カード 273x410 */
  z-index: 2;
}

@media (max-width: 781px) {
  :is(.muran-theme, .editor-styles-wrapper) .m-evcard__more {
    position: static;
  }
  .m-evcard__more a::after {
    inset: 0;
  }
}
/* ==========================================================
   ① 基底(PC)— Figma TOP「会場へ向かう」5971..6131
   ========================================================== */
/* コアの flow レイアウトが `> * + *` に付ける `margin-block-start:24px` を切る。
   `.m-page` 配下(= post_content の中)でカードが縦に 24px ずつ下がるのを止める。
   TOP は `.m-top` 配下なので当たらない。旧 _39-access の `:is()` の相乗りから独立させた。 */
.m-page .m-gotocards > * {
  margin-block-start: 0;
}

:is(.muran-theme, .editor-styles-wrapper) .m-gotocards {
  margin-top: 56px; /* リード下端5915 → 5971 */
  height: 160px;
  gap: 40px;
  flex-wrap: nowrap;
}

.m-gotocard {
  position: relative;
  width: 540px;
  flex: 0 0 540px;
  height: 160px;
  background: #ffffff;
  box-shadow: inset 0 0 0 1px var(--wp--preset--color--line);
}

.m-gotocard::before {
  /* グラデ丸 56x56 @ +32,+52 */
  content: "";
  position: absolute;
  left: 32px;
  top: 52px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  /* 56x56 では 93.59deg(ほぼ水平)。106.7deg だと 13° 傾いて左下が紫に寄る */
  background-image: linear-gradient(93.593deg, var(--m-grad-stops));
}

.m-gotocard::after {
  /* 矢印 19x15 */
  content: "";
  position: absolute;
  right: 39px;
  top: 71px;
  width: 20px;
  height: 18px;
  background: url(../img/fg-arrow-gray.svg) center/contain no-repeat;
  transition: transform var(--m-nudge-ease);
}

/* ホバー中は矢印が右へ寄る(→ `_01-tokens` の `--m-nudge`)。
   ⚠ 押し所は⑧の面リンク(`.m-gotocard__jp a::after` が `inset:0`)なので、
     `a:hover` ではなく**カード**を見る。カード全面 = リンク全面(`clickable.js` で 100%)。 */
@media (hover: hover) {
  .m-gotocard:hover::after {
    transform: translateX(var(--m-nudge));
  }
}
:is(.muran-theme, .editor-styles-wrapper) .m-gotocard__icon {
  position: absolute;
  left: 49px;
  top: 67px;
  width: 22px;
  height: 27px;
  margin: 0;
  z-index: 1;
}

.m-gotocard__icon img {
  display: block;
  width: 100%;
  height: auto;
}

/* 見出しは**カード全面に広げて**、文字の位置は padding で作る。
   こうしておくと中の `a::after { inset:0 }` がカード全体を覆える(面リンク)。
   `left/top` で置くと `a::after` は見出しの箱しか覆えない。
   ⚠ この形は **SP の節より前**に置くこと(規律49)。 */
:is(.muran-theme, .editor-styles-wrapper) .m-gotocard__jp {
  position: absolute;
  inset: 0;
  padding: 48px 0 0 112px;
  margin: 0;
  height: auto;
  font-size: 24px;
  font-weight: 700;
  line-height: 32px;
  letter-spacing: 0.05em;
  color: var(--wp--preset--color--ink);
}

.m-gotocard__jp a {
  text-decoration: none;
}

/* 英語(2026-09-14): 見出しの下の英字は、原稿では**日本語の見出しに添える英語**。英語のページでは
   見出しと同じ語が2つ並ぶ(「Access / access」)ので出さない。 */
:lang(en) :is(.muran-theme, .editor-styles-wrapper) .m-gotocard__en {
  display: none;
}

:is(.muran-theme, .editor-styles-wrapper) .m-gotocard__en {
  position: absolute;
  left: 112px;
  top: 79px;
  margin: 0;
  height: 32px;
  font-family: var(--wp--preset--font-family--display);
  font-size: 17px;
  font-weight: 500;
  line-height: 32px;
  letter-spacing: 0;
  text-transform: capitalize;
  color: #888;
}

/* ==========================================================
   ② 中間幅(≤1199)— 旧 _21-top-mid
   540 が2枚 + gap40 = 1120 なので、版面が縮む幅では折り返す
   ========================================================== */
@media (max-width: 781px) {
  :is(.muran-theme, .editor-styles-wrapper) .m-gotocards {
    height: auto;
    flex-wrap: wrap;
    justify-content: center;
    gap: 24px;
  }
}
/* ==========================================================
   ③ SP(≤781)— 旧 _22-sp-layer
   TOP 来場案内 5583.3..6055.3。行カード 350x88 を gap8 で2枚
   ========================================================== */
@media (max-width: 781px) {
  :is(.muran-theme, .editor-styles-wrapper) .m-gotocards {
    margin-top: 24px;
    height: auto;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 8px;
  }
  :is(.muran-theme, .editor-styles-wrapper) .m-gotocard {
    width: 100%;
    flex: 0 0 auto;
    height: 88px;
  }
  /* ⚠ **縦位置は「50% - 半分」で置く。カード高の直値から引き算しない**(2026-08-06)。
     ここは長らく `top: 26px`(= 88px カード用の (88-36)/2)と書いてあった。
     TOP の来場案内は 88 なので合っていたが、**同じ部品を 109 で使う夢卵とはの足元**では
     丸が 11px 上にずれ、原稿と別物になっていた。高さは文脈ごとに 88 / 109 と違うので、
     「その文脈の高さ」を知らないこの層は中央合わせで書くのが正しい。
     → 88 のときの計算結果は 26 / 38 で**従来と同値**(TOP の基準線は動かない)。 */
  .m-gotocard::before {
    left: 20px;
    top: 50%;
    width: 36px;
    height: 36px;
    margin-top: -18px;
  }
  /* 矢印も PC用(19x15)を縮めず、原稿SPの 12.1x10・線幅2 の書き出しを使う
     (書き出し 13.52x12 = 線のはみ出し 0.7 込み) */
  .m-gotocard::after {
    right: 19.3px;
    top: 50%;
    width: 13.52px;
    height: 12px;
    margin-top: -6px;
    background-image: url(../img/fg-arrow-gray-sp.svg);
  }
  /* 以下の left は **カード基準**(カードはページ x=20 から始まる)。
     原稿のページ座標(丸40 / 文字92)から 20 を引いた値。
     アイコンは丸と同じ 36x36 の枠で書き出してあるので、丸にそのまま重ねる。 */
  :is(.muran-theme, .editor-styles-wrapper) .m-gotocard__icon {
    left: 20px;
    top: 50%;
    width: 36px;
    height: 36px;
    margin-top: -18px;
  }
  /* ⚠ **箱の寸法をここで直値にしない**(2026-08-06)。以前は `36px` 固定で、
     `__icon` を 13x16 や 16x21 にしている文脈(開催概要・アクセス / 夢卵とは)でも
     **中の `<img>` だけが 36 のまま**だった。SVG は `preserveAspectRatio` で
     letterbox されるので絵は潰れず、代わりに**箱の外へ 10px ずれて描かれる**
     —— 見た目は「丸からグリフがはみ出す」。座標検査は `__icon` の箱しか見ないので
     すべて素通りしていた。箱に追従させれば文脈が何を指定しても正しく収まる。 */
  .m-gotocard__icon img {
    width: 100%;
    height: 100%;
  }
  :is(.muran-theme, .editor-styles-wrapper) .m-gotocard__jp {
    padding: 20px 0 0 72px;
    font-size: 18px;
    line-height: 27px;
    letter-spacing: 0.05em;
  }
  :is(.muran-theme, .editor-styles-wrapper) .m-gotocard__en {
    left: 72px;
    top: 47px;
    height: 21px;
    font-size: 14px;
    line-height: 21px;
  }
}
/* ==========================================================
   ④ 文脈: 夢卵とはの足元(`.m-abt--links`)— 旧 _31-about(PC)
   帯そのもの(地色・padding)は `_31-about` の持ち物。
   ここに置くのは**カードの見え方が変わる指定だけ**。
   どれも (0,3,0) なので基底 (0,2,0) に対しては順序によらず勝つ。
   ========================================================== */
/* TOP の回遊カードは見出しの下に置くので `margin-top:56px` を持っている。
   こちらは帯の padding だけで位置が決まるので消す。 */
:is(.muran-theme, .editor-styles-wrapper) .m-abt--links .m-gotocards {
  margin-top: 0;
}

/* 開催概要のアイコンは 16x21(TOP のアクセス/マップは 22x27)。
   グラデ丸 191..247 の中で原稿は 211,2515 → 丸の左上から +20,+18 */
:is(.muran-theme, .editor-styles-wrapper) .m-abt--links .m-gotocard__icon {
  left: 52px;
  top: 70px;
  width: 16px;
  height: 21px;
}

/* 文字のアイコン("Q")。グラデ丸は `.m-gotocard::before` が描く */
:is(.muran-theme, .editor-styles-wrapper) .m-gotocard__glyph {
  position: absolute;
  left: 32px;
  top: 52px;
  width: 56px;
  height: 56px;
  margin: 0;
  display: grid;
  place-items: center;
  font-family: var(--wp--preset--font-family--display);
  font-size: 24px;
  line-height: 36px;
  letter-spacing: 0.05em;
  color: #ffffff;
  z-index: 1;
}

/* 副題(17px/32 #888)。TOP の回遊カードは英字だが、こちらは説明文 */
:is(.muran-theme, .editor-styles-wrapper) .m-gotocard__sub {
  position: absolute;
  left: 112px;
  top: 96px;
  margin: 0;
  font-size: 17px;
  line-height: 32px;
  color: #888;
}

/* ==========================================================
   ⑤ 文脈: 夢卵とはの足元 — SP(≤781)。旧 _31-about
   縦積み(350x109 / gap8)
   ========================================================== */
@media (max-width: 781px) {
  :is(.muran-theme, .editor-styles-wrapper) .m-abt--links .m-gotocards {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    height: auto;
  }
  :is(.muran-theme, .editor-styles-wrapper) .m-abt--links .m-gotocard {
    flex: 0 0 auto;
    width: 100%;
    height: 109px;
  }
  /* アイコン・グリフは**グラデ丸の中心**に置く(原稿 33:2084)。
     丸は左20・36x36 なので、11x13 の絵は左 20+(36-11)/2 = 32.5。
     ⚠ 以前は `left: 20px`(= 丸の左端)だったので、グリフが丸の左端から
       はみ出して描かれていた(2026-08-06 のユーザ指摘)。**寸法も PC の 16x21 が
       残っていた**ので、SP の 11x13 をここで上書きする。 */
  :is(.muran-theme, .editor-styles-wrapper) .m-abt--links .m-gotocard__icon {
    left: 32.5px;
    top: 50%;
    width: 11px;
    height: 13px;
    margin-top: -6.5px;
  }
  /* "Q" は丸と同じ箱に置いて中央寄せ(箱が PC の 56 のままだと 10px 右下にずれる)。
     原稿 SP は Poppins 15px/23。 */
  :is(.muran-theme, .editor-styles-wrapper) .m-abt--links .m-gotocard__glyph {
    left: 20px;
    top: 50%;
    width: 36px;
    height: 36px;
    margin-top: -18px;
    font-size: 15px;
    line-height: 23px;
  }
  :is(.muran-theme, .editor-styles-wrapper) .m-abt--links .m-gotocard__jp {
    padding: 20px 0 0 72px; /* 原稿 4208 - 4188 = 20 */
    font-size: 18px;
    line-height: 27px;
  }
  /* 原稿は 14px/21 で本文と同じ組み(12px/20 は原稿に無い値だった)。上端 4235 - 4188 = 47 */
  :is(.muran-theme, .editor-styles-wrapper) .m-abt--links .m-gotocard__sub {
    left: 72px;
    top: 47px;
    width: 230px;
    font-size: var(--wp--preset--font-size--small);
    line-height: 21px;
  }
}
/* ==========================================================
   ⑥ 文脈: 開催概要・アクセスの関連ページ帯(`.m-linksec--wide`)— 旧 _39-access(PC)
   帯そのもの(地色・padding・CTA)は `components/relpages` の持ち物。
   ここに置くのは**カードの見え方が変わる指定だけ**(規則の主語がカードのもの)。
   ========================================================== */
/* TOP の回遊カードは見出しの下に置くので `margin-top:56px` を持っている。
   こちらは関連ページの見出しの直下(4056 → 4062)。 */
:is(.muran-theme, .editor-styles-wrapper) .m-linksec--wide .m-gotocards {
  margin-top: 6px;
}

/* アイコンはグラデ丸(56)の中。原稿の寸法が2枚とも違うので modifier で持つ */
:is(.muran-theme, .editor-styles-wrapper) .m-gotocard--gourmet .m-gotocard__icon {
  left: 51px;
  top: 71px;
  width: 16px;
  height: 19px;
}

/* 封筒は線画。書き出しSVGは線幅2をアウトライン化した塗りなので、
   原稿の 19x15 に縮めず **はみ出しぶん(0.75)を含む 20.5x16.5 のまま**置く(規律: 線画は縮めない)。 */
:is(.muran-theme, .editor-styles-wrapper) .m-gotocard--contact .m-gotocard__icon {
  left: 50.25px;
  top: 72.25px;
  width: 20.5px;
  height: 16.5px;
}

/* 副題は 14px/32(夢卵とはの導線カードは 17px/32。あちらは `.m-abt--links` 側で持つ) */
:is(.muran-theme, .editor-styles-wrapper) .m-linksec--wide .m-gotocard__sub {
  top: 84px;
  width: 336px;
  font-size: var(--wp--preset--font-size--small);
  line-height: 32px;
  letter-spacing: 0.05em;
}

/* ==========================================================
   ⑦ 文脈: 開催概要・アクセスの関連ページ帯 — SP(≤781)。旧 _41-access-sp
   350幅の縦積み。高さは本文で決まる(原稿も 88 と 109 で違う)
   ========================================================== */
@media (max-width: 781px) {
  :is(.muran-theme, .editor-styles-wrapper) .m-linksec--wide .m-gotocards {
    margin-top: 11px; /* 見出し 2797 → カード 2808 */
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    height: auto;
  }
  :is(.muran-theme, .editor-styles-wrapper) .m-linksec--wide .m-gotocard {
    flex: 0 0 auto;
    width: 100%;
    height: auto;
    min-height: 88px;
    padding: 20px 40px 20px 72px;
  }
  /* グラデ丸は③が中央合わせで置くようになったので、ここでの再指定は不要になった
     (2026-08-06。以前の③は 88px カード決め打ちだったのでここに写しが要った)。 */
  .m-linksec--wide .m-gotocard::after {
    right: 20px;
    top: 50%;
    width: 12px;
    height: 10px;
    margin-top: -5px;
  }
  :is(.muran-theme, .editor-styles-wrapper) .m-linksec--wide .m-gotocard--gourmet .m-gotocard__icon {
    left: 31px;
    top: 50%;
    width: 13px;
    height: 16px;
    margin-top: -8px;
  }
  :is(.muran-theme, .editor-styles-wrapper) .m-linksec--wide .m-gotocard--contact .m-gotocard__icon {
    left: 30px;
    top: 50%;
    width: 14px;
    height: 11.3px;
    margin-top: -5.65px;
  }
  /* 縦積みでは高さが本文で決まるので、絶対配置をやめて素直に積む */
  :is(.muran-theme, .editor-styles-wrapper) .m-linksec--wide .m-gotocard__jp {
    position: static;
    height: auto;
    padding: 0; /* 基底が面リンク用に padding で文字を置いているので戻す */
    font-size: var(--wp--preset--font-size--large);
    line-height: 27px;
    letter-spacing: 0.05em;
  }
  :is(.muran-theme, .editor-styles-wrapper) .m-linksec--wide .m-gotocard__sub {
    position: static;
    width: auto;
    font-size: var(--wp--preset--font-size--small);
    line-height: 21px;
  }
}
/* ==========================================================
   ⑧ 面リンク — 旧 _43-clickable-cards
   カード全面を押せるようにする(2026-08-01 ユーザ指摘)。
   見出しが絶対配置なので、①で `inset:0` + padding にしてある箱の中に重ねる。
   実測 = `node site/setup/verify/clickable.js`
   ========================================================== */
.m-gotocard__jp a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
}

/* ---------- ホバーの走査(青・赤の平行四辺形が左→右に抜ける)----------
   仕組みと寸法の根拠は `_01-tokens.scss` の `--m-sweep-*`。
   **大きなカード型のボタンにも同じ効果を入れる**(2026-08-05 ユーザ指定)。
   矢印の寄りとは別軸なので、ホバー中は両方が同時に走る。
   静止時は版面の外にあるので**見た目は1px も変わらない**(基準線は不変)。
   ⚠ この宣言は**地色を決める規則より後**に置く。`background:` の一括指定は
     `background-image` を `none` に戻すので、前に置くと黙って消える。 */
.m-gotocard {
  background-image: var(--m-sweep-img);
  background-repeat: no-repeat;
  background-size: var(--m-sweep-w) 100%;
  background-position: var(--m-sweep-from) 0;
  /* 見かけの速さ: 実測幅 540px → 1.67s(式は `_01-tokens`)*/
  --m-sweep-dur: 1.67s;
}

@media (hover: hover) {
  .m-gotocard:hover {
    background-position: var(--m-sweep-to) 0;
    transition: background-position var(--m-sweep-dur) ease-out;
  }
}
:is(.muran-theme, .editor-styles-wrapper) .m-newstabs {
  margin-top: 33px; /* 見出し下端6543 → 6576 */
  height: 40px;
  gap: 8px;
  flex-wrap: nowrap;
}

:is(.muran-theme, .editor-styles-wrapper) .m-newstab {
  margin: 0;
  height: 40px;
  padding: 8px 16px;
  border-radius: 6px;
  box-shadow: inset 0 0 0 1px var(--wp--preset--color--ink);
  background: #ffffff;
  font-size: 13px;
  line-height: 20px;
  letter-spacing: 0.05em;
  white-space: nowrap;
}

:is(.muran-theme, .editor-styles-wrapper) .m-newstab--active {
  background: var(--wp--preset--color--ink);
}

.m-newstab a {
  text-decoration: none;
}

.m-newstab--active a {
  color: #ffffff;
}

/* Query Loop 化(2026-07-31)。`.m-newscards` は `core/post-template` の <ul> になり、
   カードは <li> に包まれる。幅・高さは <li> 側で持つ(カテゴリの `.m-cattrack` と同じ手)。
   静止版のマークアップ(<div class="m-newscard"> が直下)でも壊れないよう両方に当てる。 */
:is(.muran-theme, .editor-styles-wrapper) .m-newscards {
  display: flex;
  margin: 48px 0 0; /* タブ下端6616 → 6664 */
  padding: 0;
  list-style: none;
  height: 250px;
  gap: 29px; /* 原稿は 160/447/734/1021(右に1px余る) */
  flex-wrap: nowrap;
}

.m-newscards > li,
.m-newscards > .m-newscard {
  flex: 0 0 258px;
  width: 258px;
  height: 250px;
}

.m-newscard {
  position: relative;
  width: 258px;
  height: 250px;
}

.m-newscard > * {
  position: absolute;
  margin: 0;
}

.m-newscard__thumb {
  left: 0;
  top: 0;
  width: 258px;
  height: 172px;
}

.m-newscard__thumb img {
  display: block;
  width: 258px;
  height: 172px;
}

.m-newscard__meta {
  left: 0;
  top: 184px;
  height: 25px;
  gap: 15px;
  flex-wrap: nowrap;
  align-items: center;
}

/* 原稿は全カード「イベント情報」で 82px。実データはカテゴリ名の長さが変わるので、
   82px を **下限**にして長い名前(「コンテスト関連」等)では伸ばす。
   固定幅のままだと `white-space:nowrap` と噛み合ってバッジからはみ出す。 */
:is(.muran-theme, .editor-styles-wrapper) .m-newscard__cat {
  margin: 0;
  min-width: 82px;
  width: fit-content;
  height: 25px;
  padding: 4px 6px;
  border-radius: 3px;
  box-shadow: inset 0 0 0 1px var(--wp--preset--color--ink);
  background: #ffffff;
  font-size: 11px;
  line-height: 16px;
  letter-spacing: 0.05em;
  text-align: center;
  white-space: nowrap;
}

:is(.muran-theme, .editor-styles-wrapper) .m-newscard__date {
  margin: 0;
  height: 17px;
  font-family: var(--wp--preset--font-family--display);
  font-size: 11px;
  line-height: 16px;
  letter-spacing: 0.05em;
}

:is(.muran-theme, .editor-styles-wrapper) .m-newscard__title {
  left: 0;
  top: 225px;
  width: 258px;
  height: 24px;
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
  letter-spacing: 0.05em;
  /* 原稿の枠は 258x24 = 1行ぶん。実データの見出しは原稿より長いものがあるので、
     途中で切れっぱなしにせず省略記号を出す(原稿の文言は1行に収まるので見た目は変わらない) */
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: var(--wp--preset--color--ink);
}

.m-newscard__title a {
  text-decoration: none;
}

/* `core/post-terms` はタームを <a> で出す。バッジの見た目は箱側が持っているので、
   中のリンクは素の文字に戻す(下線・色が付くとバッジが二重装飾になる) */
.m-newscard__cat a {
  color: inherit;
  text-decoration: none;
}

/* `core/post-featured-image` は <figure> の中に <a><img> を入れる。
   サイズはCSSで持つ(ブロック属性に width/height を書くとインライン style が出て上書きできない) */
.m-newscard__thumb a {
  display: block;
}

.m-newsq__empty {
  margin: 48px 0 0;
}

:is(.muran-theme, .editor-styles-wrapper) .m-viewall {
  margin: 47px 0 0; /* カード下端6914 → 6961 */
  height: 20px;
  text-align: right;
  font-size: 15px;
  font-weight: 600;
  line-height: 20px;
  letter-spacing: 0.05em;
}

.m-viewall a {
  position: relative;
  padding-right: 24px; /* 文字→矢印 gap8 + 矢印16 */
  /* 原稿の View All Text は textDecoration: UNDERLINE */
  text-decoration: underline;
  text-underline-offset: 4px;
}

.m-viewall a::after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  width: 16px;
  height: 14px;
  margin-top: -7px;
  background: url(../img/fg-arrow-viewall.svg) center/contain no-repeat;
  transition: transform var(--m-nudge-ease);
}

/* ホバー中は矢印が右へ寄る(→ `_01-tokens` の `--m-nudge`)。 */
@media (hover: hover) {
  .m-viewall a:hover::after {
    transform: translateX(var(--m-nudge));
  }
}
/* ---------- 中間幅(≤1199)— 折り返し ---------- */
@media (max-width: 781px) {
  :is(.muran-theme, .editor-styles-wrapper) .m-newscards {
    height: auto;
    flex-wrap: wrap;
    justify-content: center;
    gap: 24px;
  }
}
/* ---------- SP(≤781) ---------- */
@media (max-width: 781px) {
  /* ==========================================================
     ⑤ 来場案内(5583.3..6055.3 / 472)
       見出し186(EN 2行) → gap24 → リード54 → gap24 → 行カード2枚(350x88 / gap8)
     ========================================================== */
  /* ==========================================================
     ⑥ 新着情報(6119.3..7219.3 / 1100)
       見出し138 → gap24 → タブ2段68 → gap24 → 記事一覧774 → gap24 → ボタン48
       記事一覧 = 大カード(サムネ350x233 + New)314 → 罫 → 横カード100 x3
     ========================================================== */
  :is(.muran-theme, .editor-styles-wrapper) .m-newstabs {
    /* 原稿は2段に折り返す(横スクロールではない) */
    margin-top: 24px;
    height: 68px;
    flex-wrap: wrap;
    gap: 6px;
    overflow: visible;
  }
  :is(.muran-theme, .editor-styles-wrapper) .m-newstab {
    height: 31px;
    padding: 7px 9px;
    font-size: 11px;
    line-height: 17px;
    letter-spacing: 0.05em;
  }
  :is(.muran-theme, .editor-styles-wrapper) .m-newscards {
    margin-top: 24px;
    height: auto;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 0;
  }
  /* PC の 258x250 固定を解除。`core/post-template` の <li> が箱になる */
  .m-newscards > li,
  .m-newscards > .m-newscard {
    flex: 0 0 auto;
    width: 100%;
    height: auto;
  }
  .m-newscard {
    width: 100%;
    height: auto;
  }
  .m-newscard > * {
    position: static;
  }
  /* --- 1枚目だけ大カード(サムネ全幅 + New バッジ) ---
     Query Loop 化で各カードが <li> に包まれたため、`:first-child` / `+` / `:last-child` は
     **カードではなく <li> 側で見る**。カード同士は DOM 兄弟ではなくなっている(2026-07-31)。 */
  .m-newscards > li:first-child,
  .m-newscards > li:first-child .m-newscard {
    height: 314px;
  }
  :is(.muran-theme, .editor-styles-wrapper) .m-newscards > li:first-child .m-newscard__thumb {
    position: relative;
    width: 100%;
    height: 233px;
    background: #ffffff;
    box-shadow: inset 0 0 0 1px var(--wp--preset--color--line);
  }
  .m-newscards > li:first-child .m-newscard__thumb img {
    width: 100%;
    height: 233px;
    object-fit: contain;
  }
  /* New バッジ 56x56(原稿 33:1961 を公式エクスポートから切り出し) */
  .m-newscards > li:first-child .m-newscard__thumb::after {
    content: "";
    position: absolute;
    left: 286px;
    top: 7.9px;
    width: 56px;
    height: 56px;
    background: url(../img/fg-sp-new-badge.png) center/contain no-repeat;
  }
  .m-newscards > li:first-child .m-newscard__meta {
    margin-top: 16px;
  }
  :is(.muran-theme, .editor-styles-wrapper) .m-newscards > li:first-child .m-newscard__title {
    width: 100%;
    height: 24px;
    margin-top: 16px;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0.05em;
  }
  /* --- 2枚目以降は横並び(サムネ150x100 + 本文184) --- */
  .m-newscards > li + li .m-newscard {
    position: relative;
    display: grid;
    grid-template-columns: 150px minmax(0, 1fr);
    align-content: start;
    column-gap: 16px;
    height: 100px;
    margin-top: 48px; /* 罫線 24 + 24 */
  }
  /* 区切り罫は原稿では独立した LINE(カード間の中央) */
  .m-newscards > li + li .m-newscard::before {
    content: "";
    position: absolute;
    left: 0;
    top: -24px;
    width: 100%;
    height: 1px;
    background: var(--m-line-soft);
  }
  .m-newscards > li:last-child .m-newscard {
    height: 116px;
    padding-bottom: 16px;
  }
  :is(.muran-theme, .editor-styles-wrapper) .m-newscards > li + li .m-newscard__thumb {
    grid-column: 1;
    grid-row: 1/3;
    width: 150px;
    height: 100px;
    box-shadow: inset 0 0 0 1px var(--wp--preset--color--line);
  }
  .m-newscards > li + li .m-newscard__thumb img {
    width: 150px;
    height: 100px;
    object-fit: cover;
  }
  .m-newscards > li + li .m-newscard__meta {
    grid-column: 2;
    grid-row: 1;
  }
  :is(.muran-theme, .editor-styles-wrapper) .m-newscards > li + li .m-newscard__title {
    grid-column: 2;
    grid-row: 2;
    width: 100%;
    height: 42px;
    margin-top: 16px;
    font-size: 14px;
    line-height: 21px;
    letter-spacing: 0.05em;
    white-space: normal;
  }
  /* --- 共通: メタ行(カテゴリ25 + gap12 + 日付) --- */
  :is(.muran-theme, .editor-styles-wrapper) .m-newscard__meta {
    height: 25px;
    gap: 12px;
  }
  :is(.muran-theme, .editor-styles-wrapper) .m-newscard__cat {
    padding: 4px 6px;
    line-height: 17px;
  }
  :is(.muran-theme, .editor-styles-wrapper) .m-newscard__date {
    line-height: 17px;
  }
  /* 英語のページ: カテゴリー名が長い(Stories Behind MURAN)。横並びカードの本文列 184px に日付と1行では入らず、
     `nowrap` のまま縮められて**文字がバッジからはみ出し、日付に重なった**(2026-09-14 の目視。
     英語の新着一覧が空だった間は出なかった)。→ 英語だけ、バッジの中で折り返す
     (新着一覧・カテゴリー一覧のバッジも SP では同じく2行に折れる)。
     2行になっても バッジ42 + 16 + 見出し42 = 100 でカードの高さに収まる。日本語は1px も動かない。 */
  :lang(en) :is(.muran-theme, .editor-styles-wrapper) .m-newscards > li + li .m-newscard__meta {
    height: auto;
  }
  :lang(en) :is(.muran-theme, .editor-styles-wrapper) .m-newscards > li + li .m-newscard__cat {
    height: auto;
    white-space: normal;
  }
  /* --- 一覧リンクは原稿SPでは黒ピル(240x48) --- */
  :is(.muran-theme, .editor-styles-wrapper) .m-viewall {
    width: 240px;
    height: 48px;
    margin: 24px auto 0;
  }
  .m-viewall a {
    display: grid;
    place-items: center;
    width: 240px;
    height: 48px;
    padding-right: 0;
    border-radius: var(--wp--custom--radius--pill);
    background: var(--wp--preset--color--ink);
    color: #ffffff;
    text-decoration: none;
    font-size: 14px;
    line-height: 20px;
    letter-spacing: 0.05em;
  }
  .m-viewall a::after {
    right: 23.3px;
    width: 11.41px;
    height: 10.26px;
    margin-top: -5.13px;
    background-image: url(../img/fg-arrow-white-sp.svg);
  }
}
/* ---------- 面で押せるようにする(旧 43。2026-08-01 ユーザ指摘)----------
   サムネと見出しが別々にリンクになっていて**間に押せない帯**が残るので、
   見出しの面リンクで埋める(行き先は1種類なので重ならない)。
   ⚠ `.m-newscard__title` 自身が絶対配置(258x24)なので、`inset:0` が覆うのは
     見出しの箱だけ = 旧 43 のコメントで言う「② 祖先が絶対配置」の型。
     カード全面にしたいなら測り直しが要る(`clickable.js`)。ここでは**挙動を変えない**。 */
.m-newscard__title a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
}

/* ---------- ホバーの走査(青・赤の平行四辺形が左→右に抜ける)----------
   仕組みと寸法の根拠は `_01-tokens.scss` の `--m-sweep-*`。
   静止時は版面の外にあるので**見た目は1px も変わらない**(基準線は不変)。
   ⚠ この宣言は**地色を決める規則より後**に置く。`background:` の一括指定は
     `background-image` を `none` に戻すので、前に置くと黙って消える。 */
:is(.muran-theme, .editor-styles-wrapper) .m-newstab {
  background-image: var(--m-sweep-img);
  background-repeat: no-repeat;
  background-size: var(--m-sweep-w) 100%;
  background-position: var(--m-sweep-from) 0;
  /* 見かけの速さ: 実測幅 93px → 0.57s(式は `_01-tokens`)*/
  --m-sweep-dur: 0.57s;
}

@media (hover: hover) {
  :is(.muran-theme, .editor-styles-wrapper) .m-newstab:hover {
    background-position: var(--m-sweep-to) 0;
    transition: background-position var(--m-sweep-dur) ease-out;
  }
}
/* 地色がベタ塗り(現在のタブ(#333))なので、**濁らない濃いめの帯**に差し替える
   (白地用の `--m-sweep-img` は地色と混ざって中間色になる → `_01-tokens`)。 */
:is(.muran-theme, .editor-styles-wrapper) .m-newstab--active {
  background-image: var(--m-sweep-img-ondark);
}

/* ==========================================================
   フッター(Figma: 下地#F2F2F2 + ぼかし写真 + 黒60% / 6カラム155px)
   ========================================================== */
/* Figma: 下地 #F2F2F2 + ぼかし写真 + 黒60%。
   暗幕を擬似要素(z-index:-1)でやると親の背景を覆えず写真が明るいまま出てしまったので、
   background-image の重ね(写真の上に半透明黒のグラデーションを敷く)で確実に効かせる。 */
.muran-footer-bg {
  padding-top: 120px; /* Figma: フッター上端→カラム = 120px */
  padding-bottom: 44px;
  background-color: var(--wp--preset--color--footer-base);
  background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url(../img/footer-bg-blur.jpg);
  /* Figma実測: 写真は 1666x1111 を x=-212 / y=+11 に配置(1440幅基準)。
     1440 で一致し、他幅でも比例するよう vw で表す(1666/1440=115.69% / -212/1440=-14.72%)。 */
  /* ⚠ `vw` は `zoom` で正しく縮まないので **`--m-vw-unit` を通す**
     (タブレット幅では `1vw / zoom` になる → `_04-tablet-zoom.scss`)。
     素の `vw` のままだと、写真だけが版面より小さく貼られて位置がずれる。 */
  background-position: 0 0, calc(-14.72 * var(--m-vw-unit)) 11px;
  background-size: auto, calc(115.69 * var(--m-vw-unit)) auto;
  background-repeat: no-repeat;
}

.muran-footer-bottom {
  margin-top: 65px; /* Figma: カラム下端(309)→ SNS(374) */
}

/* theme.json の elements.link が ink(#333) を当てるため、暗いフッターでは明示的に白へ戻す。
   これが「フッターの文字が真っ黒で読めない」の直接原因だった。 */
.muran-footer-bg :is(a, li, p, h2) {
  color: #ffffff;
}

.muran-footer-bg a {
  text-decoration: none;
}

/* 外部リンクの印(`.muran-extlink`)は **`components/extlink` に移した**(2026-08-06)。
   フッター以外(お問い合わせ本文・フォーム)からも使うようになったため。 */
.muran-footer-cols {
  gap: 32px;
}

/* コアの constrained/flex レイアウトが flex-grow を当てるので、
   .muran-theme を足して (0,3,0) にして 155px 固定を通す
   (効いていなかったため列ピッチが 187→192px になり、右端の列で 26px ずれた) */
:is(.muran-theme, .editor-styles-wrapper) .muran-footer-cols .wp-block-column {
  flex-basis: 155px;
  flex-grow: 0;
  flex-shrink: 0;
}

/* 782〜1169: 6列が版面に入らない(2026-07-31)。
   155px × 6 + 32px × 5 = **1090px が下限**で、`flex-shrink:0` なので1pxも縮まない。
   版面は「幅 - 80」なので 1170px 未満では必ずはみ出す = **全ページで横スクロールが出ていた**
   (`scrollWidth` 1121@782 〜 1130@1024)。原稿にこの帯のカンプが無く、
   検証の5幅(390/768/1280/1440/2560)もここを素通りするので長く残っていた(規律36)。

   縮める方向は取れない。155px を割るとリンク(「プライバシーポリシー」等)が折れて読めなくなる。
   → **段で折る**。3列×2段にすると 782 でも収まり、列の対応関係(夢卵/コンテンツ/イベント・
   来場案内/参加/関連)も崩れない。

   **`flex-wrap: wrap` では折れない。** コアが 782px 以上で
   `.wp-block-columns{flex-wrap:nowrap!important}` を当てているため(規律4 の「コア自身が
   `!important`」パターン)。`!important` を増やさずに済ませるため **Grid に切り替える**
   — `display:grid` なら `flex-wrap` も子の `flex-basis/grow/shrink` も無視される。
   SP で既に使っている手と同じ。

   ※ ここは原稿が無い帯なので、2列×3段にしたければ `repeat(3, 1fr)` を `repeat(2, 1fr)` に。 */
/* ⚠ 2026-08-02 に **この帯ごと削除**した。782〜1169 は
   「PC の版面を zoom で縮めて出す」帯になり(→ `_04-tablet-zoom.scss`)、
   実効幅が常に 1280 以上あるので **6列がそのまま入る**。
   3列×2段に折る必要がなくなった。 */
.muran-footer-cols h2 {
  font-size: var(--wp--preset--font-size--medium);
  font-weight: 700;
  line-height: 1.25;
  padding-bottom: 9px;
  border-bottom: 1px solid rgba(74, 85, 101, 0.1);
  margin: 0;
}

.muran-footer-cols ul {
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.muran-footer-cols li {
  font-size: var(--wp--preset--font-size--small);
  line-height: 1.1429;
}

/* ==========================================================
   2026 非表示 — 「参加・アクション」列の「応募する」(先方指示 2026-08-07)
   ==========================================================
   ヘッダーの「参加・投票する」と**同じ導線**(どちらも参加ダイアログを開く)。
   次回夢卵で戻せるように**表(`src/templates/parts/footer.php`)は残したまま**消す。
   → `grep -rn '2026 非表示' src/scss/`

   ⚠ 目印は行き先そのもの。列の中の順番(`nth-child`)で狙うと、
     上の行が1つ増減した瞬間に**黙って別のリンクが消える**。
   ⚠ `<li>` ごと消す。`<a>` だけだと `ul` の `gap:16px` が残って**穴が開く**。 */
.muran-footer-cols li:has(> a[href$="#muran-join"]) {
  display: none;
}

.muran-footer-copyright {
  font-size: var(--wp--preset--font-size--xx-small);
  line-height: 1.4545;
  margin: 0;
}

.muran-sns {
  margin: 0;
}

.muran-sns img {
  width: 40px;
  height: 40px;
}

/* ---------- SP(≤781) ---------- */
@media (max-width: 781px) {
  /* --- フッター: 背景写真の置き方は PC と別 ---
     原稿SP(`33:2017` の `Footer / Background Image`)は **775x517 を x=-192 / y=+383**。
     PC(1666x1111 を x=-212 / y=+11)の vw 換算をそのまま使うと 390幅で
     451x301 が **上端**に来てしまい、原稿では下半分にうっすら見えるだけの写真が
     フッター上部にくっきり出る(2026-07-31 ユーザ指摘)。
     x と幅は版面比で vw 化(775/390 / -192/390)、y は原稿どおりの実寸。

     画像も SP 用に出し直す。Figma の LAYER_BLUR 16 は **表示CSSピクセル**に効くので、
     PC用(1666px幅で事前ぼかし)を 775px で出すと実効 7.4px 相当まで薄まって
     建物の輪郭が読めてしまう。表示幅ごとに掛け直したものを使う。 */
  .muran-footer-bg {
    background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url(../img/footer-bg-blur-sp.jpg);
    background-position: 0 0, -49.231vw 383px;
    background-size: auto, 198.718vw auto;
  }
  /* --- フッター: アコーディオン(開閉はJS、関連リンクは常時展開) --- */
  .muran-footer-cols .wp-block-column {
    flex-basis: 100%;
    border-bottom: 1px solid rgba(255, 255, 255, 0.25);
    padding-bottom: 10px;
  }
  .muran-footer-cols .wp-block-column:last-child {
    border-bottom: none;
  }
  .muran-footer-cols h2 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    border-bottom: none;
    padding-bottom: 0;
  }
  .muran-footer-cols h2::after {
    content: "+";
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #ffffff;
    color: var(--wp--preset--color--brand-red);
    display: grid;
    place-items: center;
    font-weight: 700;
    font-size: 1.1rem;
  }
  .muran-footer-cols .m-open h2::after {
    content: "−";
    background: var(--wp--preset--color--brand-red);
    color: #ffffff;
  }
  .muran-footer-cols .wp-block-column ul {
    display: none;
  }
  .muran-footer-cols .wp-block-column.m-open ul {
    display: flex;
  }
  .muran-footer-cols .wp-block-column:last-child h2::after {
    content: none;
  }
  .muran-footer-cols .wp-block-column:last-child ul {
    display: flex;
  }
}
/* 原稿は 10x10 のベクタ(テキストの「↗」ではない) */
:is(.muran-extlink > a, a.muran-extlink)::after {
  content: "";
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-left: 5px;
  vertical-align: 0.15em;
  background-color: currentColor;
  -webkit-mask: url(../img/fg-extlink.svg) center/contain no-repeat;
  mask: url(../img/fg-extlink.svg) center/contain no-repeat;
}

/* ==========================================================
   Back To Top
   ========================================================== */
.muran-backtop {
  position: fixed;
  right: 24px;
  bottom: 24px;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(110, 110, 112, 0.8);
  color: #ffffff;
  border: none;
  cursor: pointer;
  z-index: 99;
  font-family: var(--wp--preset--font-family--display);
  font-size: var(--wp--preset--font-size--x-small);
  font-weight: 700;
  line-height: 1.2;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s;
}

.muran-backtop.m-show {
  opacity: 1;
  pointer-events: auto;
}

/* ==========================================================
   アニメーション
   出典: Figma「TOP_補足コメント」① 直線のあしらい → インタラクティブな動き
        (スクロール連動パララックス / フェードイン / カーソル追従。手段は自由・要提案)
   → 出典が明確な「フェードイン」のみ実装。パララックス等の背景演出は仕様確定まで実装しない。
   ========================================================== */
@media (prefers-reduced-motion: no-preference) {
  .m-reveal {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity 0.7s ease, transform 0.7s ease;
  }
  .m-reveal.m-in {
    opacity: 1;
    transform: none;
  }
}
/* ---------- 装飾の平行四辺形が「寄ってくる」動き ----------
   **TOP(`.m-deco__i` = components/deco)とカテゴリ index の MV(`.m-catdeco__i`
   = components/cathero)が共有する**。`@keyframes` は名前で解決されるので
   出力位置に意味は無いが、**同じ名前を2つ作ると後勝ちで片方が黙って変わる**。
   だから持ち主が2人いるものは、部品ではなくこの共通層に1つだけ置く。 */
@keyframes m-deco-in {
  from {
    opacity: 0;
    transform: translateX(var(--m-deco-x, 0));
  }
  to {
    opacity: 1;
    transform: none;
  }
}
/* ==========================================================
   汎用
   ========================================================== */
/* ---------- ① 装飾の平行四辺形 ----------
   レイヤ自身には z-index を付けない(付けるとスタッキング文脈ができて
   `--front` の 2 が `.m-sec` の 1 を越えられなくなる)。 */
.m-deco {
  position: absolute;
  inset: 0;
  pointer-events: none;
  /* 1200未満で使う「ファーストビュー帯」の実寸(`.m-top` 上端からの相対)。
     生成CSS側は帯の中の比率だけを持つので、breakpoint ごとにここを差し替える。 */
  --m-fv-top: 24px; /* 782〜1199: `.m-hero` は `.m-top` + 24 / 高さ1027 */
  --m-fv-h: 1027px;
}

@media (max-width: 781px) {
  .m-deco {
    --m-fv-top: 32px; /* SP: `.m-sec--hero { padding-top:32px }` / MV 590 */
    --m-fv-h: 590px;
  }
}
/* 初期状態は **最終位置のまま opacity:0**。ずらすのは `.m-in` が付いてからで、
   キーフレームの `from` で持たせる。
   理由: 初期状態を `translateX(±200px)` にすると、版面の端にある帯が
   `.m-top` の `overflow-x:clip` の外へ完全に出てしまい、IntersectionObserver の
   交差矩形が空になって **永久に発火しない**(1440幅で7本が動かないまま止まった)。
   opacity は交差判定に影響しないので、位置は動かさず透明にしておくのが正解。 */
.m-deco__i {
  position: absolute;
  display: block;
  z-index: 0; /* 白パネル・各セクション(z-index:1)より奥 */
  opacity: 0;
}

.m-deco__i.m-in {
  animation: m-deco-in 1.15s cubic-bezier(0.16, 0.72, 0.28, 1) var(--m-deco-d, 0ms) both;
}

/* 原稿の重ね順。Hero の装飾は Hero グループの最下層なので奥のままでよい */
.m-deco__i--front {
  z-index: 2;
}

/* 寄ってくる距離。200px では帯の幅と大差なく「動いた」と分かりにくかったので、
   版面の 1/4 強(=画面端から入ってくるのが分かる量)まで伸ばした。 */
.m-deco__i[data-from=l] {
  --m-deco-x: -380px;
}

.m-deco__i[data-from=r] {
  --m-deco-x: 380px;
}

/* エディタ側は muran.js が走らないので `.m-in` が付かない = 装飾が透明のままになる。
   最終状態で見せる。 */
.editor-styles-wrapper .m-deco__i {
  opacity: 1;
  animation: none;
}

@media (prefers-reduced-motion: reduce) {
  .m-deco__i {
    opacity: 1;
    animation: none;
  }
}
@media (max-width: 781px) {
  /* SP: 寄ってくる距離は画面幅なりに詰める(390 の 45% 前後) */
  .m-deco__i[data-from=l] {
    --m-deco-x: -175px;
  }
  .m-deco__i[data-from=r] {
    --m-deco-x: 175px;
  }
}
/* @deco-gen:start — site/setup/figma/gen-deco.py が生成。手で編集しない */
.m-deco__i0 {
  left: calc(50% - 666px);
  top: 52px;
  width: 104px;
  height: 9px;
  clip-path: polygon(9.615% 0%, 100% 0%, 90.385% 100%, 0% 100%);
  background: rgba(0, 147, 192, 0.4);
}

.m-deco__i1 {
  left: calc(50% - 734px);
  top: 71px;
  width: 146px;
  height: 9px;
  clip-path: polygon(6.849% 0%, 100% 0%, 93.151% 100%, 0% 100%);
  background: rgba(230, 0, 45, 0.4);
}

.m-deco__i2 {
  left: calc(50% + 447px);
  top: 71px;
  width: 140px;
  height: 9px;
  clip-path: polygon(7.143% 0%, 100% 0%, 92.857% 100%, 0% 100%);
  background: rgba(230, 0, 45, 0.4);
}

.m-deco__i3 {
  left: calc(50% + 25.5px);
  top: 73px;
  width: 256px;
  height: 23px;
  clip-path: polygon(6.579% 0%, 100% 0%, 93.421% 100%, 0% 100%);
  background: linear-gradient(124.952deg, rgba(0, 147, 192, 0.1) 0.76%, rgba(255, 68, 105, 0.1) 96.624%);
}

.m-deco__i4 {
  left: calc(50% + 534px);
  top: 92px;
  width: 113px;
  height: 17px;
  clip-path: polygon(15.929% 0%, 100% 0%, 84.071% 100%, 0% 100%);
  background: linear-gradient(112.656deg, rgba(0, 147, 192, 0.4) 0.76%, rgba(255, 68, 105, 0.4) 96.624%);
}

.m-deco__i5 {
  left: calc(50% + 469px);
  top: 231px;
  width: 225px;
  height: 23px;
  clip-path: polygon(6.579% 0%, 100% 0%, 93.421% 100%, 0% 100%);
  background: linear-gradient(121.563deg, rgba(0, 147, 192, 0.1) 0.76%, rgba(255, 68, 105, 0.1) 96.624%);
}

.m-deco__i6 {
  left: calc(50% + 608px);
  top: 418px;
  width: 136px;
  height: 11px;
  clip-path: polygon(7.353% 0%, 100% 0%, 92.647% 100%, 0% 100%);
  background: rgba(230, 0, 45, 0.6);
}

.m-deco__i7 {
  left: calc(50% - 23px);
  top: 444px;
  width: 177px;
  height: 15px;
  clip-path: polygon(6.579% 0%, 100% 0%, 93.421% 100%, 0% 100%);
  background: rgba(0, 147, 192, 0.1);
}

.m-deco__i8 {
  left: calc(50% + 496px);
  top: 592px;
  width: 180px;
  height: 15px;
  clip-path: polygon(5.556% 0%, 100% 0%, 94.444% 100%, 0% 100%);
  background: rgba(0, 147, 192, 0.2);
}

.m-deco__i9 {
  left: calc(50% + 439px);
  top: 604px;
  width: 136px;
  height: 11px;
  clip-path: polygon(7.353% 0%, 100% 0%, 92.647% 100%, 0% 100%);
  background: rgba(230, 0, 45, 0.2);
}

.m-deco__i10 {
  left: calc(50% + 25.5px);
  top: 605px;
  width: 105px;
  height: 11px;
  clip-path: polygon(6.579% 0%, 100% 0%, 93.421% 100%, 0% 100%);
  background: linear-gradient(120.939deg, rgba(0, 147, 192, 0.4) 0.76%, rgba(255, 68, 105, 0.4) 96.624%);
}

.m-deco__i11 {
  left: calc(50% - 730px);
  top: 757px;
  width: 166px;
  height: 13px;
  clip-path: polygon(6.579% 0%, 100% 0%, 93.421% 100%, 0% 100%);
  background: rgba(230, 0, 45, 0.2);
}

.m-deco__i12 {
  left: calc(50% + 287px);
  top: 950.79px;
  width: 173px;
  height: 17px;
  clip-path: polygon(10.405% 0%, 100% 0%, 89.595% 100%, 0% 100%);
  background: linear-gradient(122.58deg, #0093c0 0.76%, #ff4469 96.624%);
}

.m-deco__i13 {
  left: calc(50% - 55px);
  top: 1393.49px;
  width: 136px;
  height: 11px;
  clip-path: polygon(7.353% 0%, 100% 0%, 92.647% 100%, 0% 100%);
  background: #e6002d;
}

.m-deco__i14 {
  left: calc(50% + 10px);
  top: 1419.55px;
  width: 136px;
  height: 11px;
  clip-path: polygon(7.353% 0%, 100% 0%, 92.647% 100%, 0% 100%);
  background: #0791be;
}

.m-deco__i15 {
  left: calc(50% + 512.24px);
  top: 1607px;
  width: 105px;
  height: 11px;
  clip-path: polygon(6.579% 0%, 100% 0%, 93.421% 100%, 0% 100%);
  background: rgba(0, 147, 192, 0.4);
}

.m-deco__i16 {
  left: calc(50% + 267px);
  top: 1682.63px;
  width: 267.88px;
  height: 17.22px;
  clip-path: polygon(7.143% 0%, 100% 0%, 92.857% 100%, 0% 100%);
  background: #e6002d;
}

.m-deco__i17 {
  left: calc(50% + 456.63px);
  top: 1726.07px;
  width: 216.21px;
  height: 32.53px;
  clip-path: polygon(15.929% 0%, 100% 0%, 84.071% 100%, 0% 100%);
  background: linear-gradient(112.656deg, #0093c0 0.76%, #ff4469 96.624%);
}

.m-deco__i18 {
  left: calc(50% + 20px);
  top: 1742.33px;
  width: 332.33px;
  height: 29.86px;
  clip-path: polygon(6.579% 0%, 100% 0%, 93.421% 100%, 0% 100%);
  background: linear-gradient(124.952deg, rgba(0, 147, 192, 0.1) 0.76%, rgba(255, 68, 105, 0.1) 96.624%);
}

.m-deco__i19 {
  left: calc(50% - 537.45px);
  top: 2401.57px;
  width: 262.66px;
  height: 16.89px;
  clip-path: polygon(92.857% 0%, 0% 0%, 7.143% 100%, 100% 100%);
  background: rgba(230, 0, 45, 0.4);
}

.m-deco__i20 {
  left: calc(50% + 35.71px);
  top: 2405.32px;
  width: 480.29px;
  height: 43.15px;
  clip-path: polygon(93.421% 0%, 0% 0%, 6.579% 100%, 100% 100%);
  background: linear-gradient(235.048deg, rgba(0, 147, 192, 0.1) 0.76%, rgba(255, 68, 105, 0.1) 96.624%);
}

.m-deco__i21 {
  left: calc(50% - 650.01px);
  top: 2480.97px;
  width: 212px;
  height: 31.89px;
  clip-path: polygon(84.071% 0%, 0% 0%, 15.929% 100%, 100% 100%);
  background: linear-gradient(247.344deg, rgba(0, 147, 192, 0.4) 0.76%, rgba(255, 68, 105, 0.4) 96.624%);
}

.m-deco__i22 {
  left: calc(50% - 758.19px);
  top: 2701.75px;
  width: 422.13px;
  height: 43.15px;
  clip-path: polygon(93.421% 0%, 0% 0%, 6.579% 100%, 100% 100%);
  background: linear-gradient(238.437deg, rgba(0, 147, 192, 0.1) 0.76%, rgba(255, 68, 105, 0.1) 96.624%);
}

.m-deco__i23 {
  left: calc(50% - 862px);
  top: 3042.59px;
  width: 255.16px;
  height: 20.64px;
  clip-path: polygon(92.647% 0%, 0% 0%, 7.353% 100%, 100% 100%);
  background: rgba(230, 0, 45, 0.6);
}

.m-deco__i24 {
  left: calc(50% + 507.92px);
  top: 3420.76px;
  width: 332.08px;
  height: 28.14px;
  clip-path: polygon(93.421% 0%, 0% 0%, 6.579% 100%, 100% 100%);
  background: rgba(0, 147, 192, 0.1);
}

.m-deco__i25 {
  left: calc(50% + 19.13px);
  top: 3471.32px;
  width: 422.13px;
  height: 43.15px;
  clip-path: polygon(93.421% 100%, 0% 100%, 6.579% 0%, 100% 0%);
  background: linear-gradient(301.563deg, rgba(0, 147, 192, 0.1) 0.76%, rgba(255, 68, 105, 0.1) 96.624%);
}

.m-deco__i26 {
  left: calc(50% + 427.5px);
  top: 3501.43px;
  width: 196.99px;
  height: 20.64px;
  clip-path: polygon(93.421% 0%, 0% 0%, 6.579% 100%, 100% 100%);
  background: linear-gradient(239.061deg, #0093c0 0.76%, #ff4469 96.624%);
}

.m-deco__i27 {
  left: calc(50% + 19.13px);
  top: 3582.12px;
  width: 422.13px;
  height: 43.15px;
  clip-path: polygon(93.421% 0%, 0% 0%, 6.579% 100%, 100% 100%);
  background: linear-gradient(238.437deg, rgba(0, 147, 192, 0.1) 0.76%, rgba(255, 68, 105, 0.1) 96.624%);
}

.m-deco__i28 {
  left: calc(50% - 622.28px);
  top: 3614.52px;
  width: 197px;
  height: 20.64px;
  clip-path: polygon(93.421% 100%, 0% 100%, 6.579% 0%, 100% 0%);
  background: linear-gradient(300.939deg, rgba(0, 147, 192, 0.4) 0.76%, rgba(255, 68, 105, 0.4) 96.624%);
}

.m-deco__i29 {
  left: calc(50% - 591.86px);
  top: 3687.68px;
  width: 332.08px;
  height: 28.14px;
  clip-path: polygon(93.421% 100%, 0% 100%, 6.579% 0%, 100% 0%);
  background: rgba(0, 147, 192, 0.1);
}

.m-deco__i30 {
  left: calc(50% - 758.19px);
  top: 4351.69px;
  width: 422.13px;
  height: 43.15px;
  clip-path: polygon(93.421% 100%, 0% 100%, 6.579% 0%, 100% 0%);
  background: linear-gradient(301.563deg, rgba(0, 147, 192, 0.1) 0.76%, rgba(255, 68, 105, 0.1) 96.624%);
}

.m-deco__i31 {
  left: calc(50% + 86px);
  top: 4714.73px;
  width: 212px;
  height: 31.89px;
  clip-path: polygon(84.071% 100%, 0% 100%, 15.929% 0%, 100% 0%);
  background: rgba(0, 147, 192, 0.4);
}

.m-deco__i32 {
  left: calc(50% + 198.57px);
  top: 4739.14px;
  width: 262.66px;
  height: 16.89px;
  clip-path: polygon(92.857% 100%, 0% 100%, 7.143% 0%, 100% 0%);
  background: rgba(230, 0, 45, 0.4);
}

.m-deco__i33 {
  left: calc(50% + 351.71px);
  top: 4819.11px;
  width: 490.29px;
  height: 43.15px;
  clip-path: polygon(91.516% 100%, 0% 100%, 8.484% 0%, 100% 0%);
  background: linear-gradient(305.508deg, rgba(0, 147, 192, 0.1) 0.76%, rgba(255, 68, 105, 0.1) 96.624%);
}

.m-deco__i34 {
  left: calc(50% - 196px);
  top: 4862.26px;
  width: 156.87px;
  height: 16.04px;
  clip-path: polygon(93.421% 100%, 0% 100%, 6.579% 0%, 100% 0%);
  background: linear-gradient(301.563deg, rgba(0, 147, 192, 0.1) 0.76%, rgba(255, 68, 105, 0.1) 96.624%);
}

.m-deco__i35 {
  left: calc(50% + 405.29px);
  top: 5005.47px;
  width: 196.99px;
  height: 20.64px;
  clip-path: polygon(6.579% 100%, 100% 100%, 93.421% 0%, 0% 0%);
  background: linear-gradient(59.061deg, rgba(0, 147, 192, 0.4) 0.76%, rgba(255, 68, 105, 0.4) 96.624%);
}

.m-deco__i36 {
  left: calc(50% + 239.78px);
  top: 5078.63px;
  width: 332.08px;
  height: 28.14px;
  clip-path: polygon(6.579% 100%, 100% 100%, 93.421% 0%, 0% 0%);
  background: rgba(0, 147, 192, 0.1);
}

.m-deco__i37 {
  left: calc(50% + 586.84px);
  top: 5424.31px;
  width: 255.15px;
  height: 20.64px;
  clip-path: polygon(7.353% 100%, 100% 100%, 92.647% 0%, 0% 0%);
  background: rgba(230, 0, 45, 0.6);
}

.m-deco__i38 {
  left: calc(50% - 765px);
  top: 5529.34px;
  width: 267.4px;
  height: 26.11px;
  clip-path: polygon(10.771% 0%, 100% 0%, 89.229% 100%, 0% 100%);
  background: linear-gradient(122.748deg, rgba(0, 147, 192, 0.1) 0.76%, rgba(255, 68, 105, 0.1) 96.624%);
}

.m-deco__i39 {
  left: calc(50% - 563.19px);
  top: 5550.36px;
  width: 84.38px;
  height: 12.49px;
  clip-path: polygon(13.453% 0%, 100% 0%, 86.547% 100%, 0% 100%);
  background: rgba(245, 71, 108, 0.6);
}

.m-deco__i40 {
  left: calc(50% + 355px);
  top: 5742.63px;
  width: 422.13px;
  height: 43.15px;
  clip-path: polygon(6.579% 100%, 100% 100%, 93.421% 0%, 0% 0%);
  background: linear-gradient(58.437deg, rgba(0, 147, 192, 0.1) 0.76%, rgba(255, 68, 105, 0.1) 96.624%);
}

.m-deco__i41 {
  left: calc(50% + 390.73px);
  top: 6164.85px;
  width: 212px;
  height: 31.89px;
  clip-path: polygon(15.929% 100%, 100% 100%, 84.071% 0%, 0% 0%);
  background: rgba(0, 147, 192, 0.4);
}

.m-deco__i42 {
  left: calc(50% + 227.51px);
  top: 6189.26px;
  width: 262.66px;
  height: 16.89px;
  clip-path: polygon(7.143% 100%, 100% 100%, 92.857% 0%, 0% 0%);
  background: rgba(230, 0, 45, 0.4);
}

.m-deco__i43 {
  left: calc(50% - 153.27px);
  top: 6269.24px;
  width: 490.29px;
  height: 43.15px;
  clip-path: polygon(8.484% 100%, 100% 100%, 91.516% 0%, 0% 0%);
  background: linear-gradient(54.492deg, rgba(0, 147, 192, 0.1) 0.76%, rgba(255, 68, 105, 0.1) 96.624%);
}

/* 1200未満: 版面が PC 原稿(1440固定・全高7613)と別物になるので、
   PC座標のまま出すと帯が中身と無関係な位置に落ちる(800幅でページ全高 9223)。
   ファーストビューの 12 本だけを、ヒーロー帯の相対位置で出す。
   帯の実寸は `.m-deco` の `--m-fv-top` / `--m-fv-h` で breakpoint ごとに与える。 */
@media (max-width: 781px) {
  .m-deco__i:not(.m-deco__i--fv) {
    display: none;
  }
  .m-deco__i0 {
    left: calc(7.361% - 28.6px);
    top: calc(var(--m-fv-top) + var(--m-fv-h) * 0 - 2.48px);
    width: 57.2px;
    height: 4.95px;
  }
  .m-deco__i1 {
    left: calc(4.097% - 40.15px);
    top: calc(var(--m-fv-top) + var(--m-fv-h) * 0.02646 - 2.48px);
    width: 80.3px;
    height: 4.95px;
  }
  .m-deco__i2 {
    left: calc(85.903% - 38.5px);
    top: calc(var(--m-fv-top) + var(--m-fv-h) * 0.02646 - 2.48px);
    width: 77px;
    height: 4.95px;
  }
  .m-deco__i3 {
    left: calc(60.66% - 70.4px);
    top: calc(var(--m-fv-top) + var(--m-fv-h) * 0.02925 - 6.33px);
    width: 140.8px;
    height: 12.65px;
  }
  .m-deco__i4 {
    left: calc(91.007% - 31.08px);
    top: calc(var(--m-fv-top) + var(--m-fv-h) * 0.05571 - 4.68px);
    width: 62.15px;
    height: 9.35px;
  }
  .m-deco__i5 {
    left: calc(90.382% - 61.88px);
    top: calc(var(--m-fv-top) + var(--m-fv-h) * 0.2493 - 6.33px);
    width: 123.75px;
    height: 12.65px;
  }
  .m-deco__i6 {
    left: calc(96.944% - 37.4px);
    top: calc(var(--m-fv-top) + var(--m-fv-h) * 0.50975 - 3.03px);
    width: 74.8px;
    height: 6.05px;
  }
  .m-deco__i7 {
    left: calc(54.549% - 48.68px);
    top: calc(var(--m-fv-top) + var(--m-fv-h) * 0.54596 - 4.12px);
    width: 97.35px;
    height: 8.25px;
  }
  .m-deco__i8 {
    left: calc(90.694% - 49.5px);
    top: calc(var(--m-fv-top) + var(--m-fv-h) * 0.75209 - 4.12px);
    width: 99px;
    height: 8.25px;
  }
  .m-deco__i9 {
    left: calc(85.208% - 37.4px);
    top: calc(var(--m-fv-top) + var(--m-fv-h) * 0.7688 - 3.03px);
    width: 74.8px;
    height: 6.05px;
  }
  .m-deco__i10 {
    left: calc(55.417% - 28.88px);
    top: calc(var(--m-fv-top) + var(--m-fv-h) * 0.77019 - 3.03px);
    width: 57.75px;
    height: 6.05px;
  }
  .m-deco__i11 {
    left: calc(5.069% - 45.65px);
    top: calc(var(--m-fv-top) + var(--m-fv-h) * 0.98189 - 3.58px);
    width: 91.3px;
    height: 7.15px;
  }
}
/* @deco-gen:end */
/* ==========================================================
   「参加・投票する」押下後のダイアログ(Figma `12:8426 参加する押下後_展開`)

   実測(1440x768 のフレーム内):
     オーバーレイ  全面 #000@34%
     パネル       266,161  908x403  #FFF r16
     閉じる       中心 1141.9,194.3(40x40の当たり / ✕は33x33)
     見出し       424,241  600x17   21px/31.5 700 ls+2.10 中央(「応募・投票」だけ #FE0000)
     斜線         404,244 と 1021,244  長さ28.28 / 1px #333 / ±56.3°
     カード       383,291 と 744,291  313x209 r16(#E48040 / #46A0D6)
       タグ       +40   25.4高 白地・枠1px / 13px/13 700
       見出し     +82.4 54高  21px(先頭)+16px / 行送り24 / 中央
       外部リンク  +153  16高  13px/16 500 + アイコン12x12(右カードは10x10)
       キャラクター カード左端 -33.2 / 右端 +37.5 にはみ出す
   遷移先は未確定(href は placeholder)。
   ========================================================== */
.m-join {
  width: 908px;
  max-width: calc(100vw - 40px);
  padding: 0;
  border: 0;
  border-radius: 16px;
  background: #ffffff;
  color: var(--m-ink, #333333);
  overflow: visible; /* キャラクターがカードの外へ出る */
}

.m-join::backdrop {
  background: rgba(0, 0, 0, 0.34);
}

/* --- 閉じる --- */
.m-join__close {
  position: absolute;
  /* 見出しの <p> は幅いっぱいで上パディング73px、DOM 順で後に来るので
     何もしないと ✕ の上に乗ってクリックを奪う(実際に押せなくなった) */
  z-index: 1;
  top: 13px;
  right: 12px;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  background: url(../img/fg-modal-close.svg) center/19px 19px no-repeat;
  cursor: pointer;
}

/* --- 見出し --- */
:is(.muran-theme, .editor-styles-wrapper) .m-join__title {
  position: relative;
  margin: 0;
  padding: 73px 138px 0;
  font-size: 21px;
  font-weight: 700;
  line-height: 31.5px;
  letter-spacing: 0.1em;
  text-align: center;
  white-space: nowrap;
}

.m-join__title b {
  color: #fe0000;
}

/* 両端の斜線。原稿は 28.28px の 1px 線を ±56.3°(= 垂直から ∓33.7°)に倒したもの */
.m-join__slash {
  position: absolute;
  top: 83px;
  width: 0;
  height: 28.28px;
  border-left: 1px solid #333333;
}

/* 回転は「上端を軸に下端がどちらへ倒れるか」で決まる。CSS の正回転(時計回り)は
   縦線の下端を **左**へ振るので、原稿の `＼`(下端が右)は負回転になる。
   left は倒れたあとの外接矩形が原稿の x に来る値(左 138..153.7 / 右 755..770.7)。 */
.m-join__slash--l {
  left: 138px;
  transform: rotate(-33.7deg);
  transform-origin: top left;
}

.m-join__slash--r {
  left: 770.7px;
  transform: rotate(33.7deg);
  transform-origin: top left;
}

/* --- カード --- */
.m-join__cards {
  display: flex;
  justify-content: center;
  gap: 48px; /* 383+313 → 744 */
  margin-top: 25.5px; /* 見出しの行ボックス下端(104.5)→ カード上端 130 */
}

.m-join__card {
  position: relative;
  flex: 0 0 313px;
  width: 313px;
  height: 209px;
  border-radius: 16px;
  color: #ffffff;
  text-decoration: none;
}

.m-join__card--sw {
  background: #e48040;
}

.m-join__card--idea {
  background: #46a0d6;
}

/* キャラクター(原稿はカードの外へはみ出す)。透過PNGなのでカードの色が透ける */
.m-join__card::after {
  content: "";
  position: absolute;
  background: center/contain no-repeat;
  pointer-events: none;
}

.m-join__card--sw::after {
  left: -33.2px;
  top: 138.7px;
  width: 92.7px;
  height: 88.3px;
  background-image: url(../img/fg-modal-char-l.png);
}

.m-join__card--idea::after {
  left: 270.5px;
  top: 149px;
  width: 80px;
  height: 74.4px;
  background-image: url(../img/fg-modal-char-r.png);
}

/* カード内の3要素は原稿の実測位置で置く(いずれも中央揃え) */
.m-join__name,
.m-join__ext {
  position: absolute;
  left: 0;
  right: 0;
  text-align: center;
}

/* タグは白地が文字幅ぶんだけ = 中身に合わせて縮む箱。
   原稿は 25.4高 / 左右パディング 6.91 / 枠は白の 0.69px(内側)= 実質見えない */
.m-join__tag {
  position: absolute;
  top: 40px;
  left: 50%;
  transform: translateX(-50%);
  height: 25.4px;
  padding: 0 6.91px;
  background: #ffffff;
  font-size: 13px;
  font-weight: 700;
  line-height: 25.4px;
  letter-spacing: 0.05em;
  white-space: nowrap;
}

.m-join__card--sw .m-join__tag {
  color: #e48040;
}

.m-join__card--idea .m-join__tag {
  color: #46a0d6;
}

.m-join__name {
  top: 82.4px;
  height: 54px;
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
  letter-spacing: 0.05em;
}

.m-join__name b {
  font-size: 21px;
  font-weight: 700;
}

.m-join__ext {
  top: 153px;
  height: 16px;
  font-size: 13px;
  font-weight: 500;
  line-height: 16px;
  letter-spacing: 0.05em;
}

.m-join__ext::after {
  content: "";
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-left: 4px;
  vertical-align: -0.1em;
  background: url(../img/fg-extlink-white.svg) center/contain no-repeat;
}

.m-join__card--idea .m-join__ext::after {
  width: 10px;
  height: 10px; /* 原稿は左右でアイコンの大きさが違う(10 と 12) */
}

.m-join__card:is(:hover, :focus-visible) {
  opacity: 0.88;
}

/* パネル下端まで 403px(カード下端 500 → パネル下端 564 = +64) */
.m-join__cards {
  margin-bottom: 64px;
}

/* 908px 入らない幅では原稿が無いので機能優先。カードは縦積みにする。
   ⚠ 2026-08-02 に **979 → $bp-sp-max** へ。782〜979 は zoom の帯に入り、
   実効幅が 1280 以上あるので 908px のダイアログはそのまま入る。 */
@media (max-width: 781px) {
  :is(.muran-theme, .editor-styles-wrapper) .m-join__title {
    padding: 40px 56px 0;
    font-size: 18px;
    /* ⚠ **この幅では字間が字送りの 5% にならない**。
       原稿は幅ごとに font-size を変えたのに、**字間は PC の px を据え置いて**いた
       (SP 側で letter-spacing を書き直していない)。track() にすると見た目が変わるので、
       **いまの描画を保つために px を明示**する。原稿がこの字間を意図したのかは未確認。
       → __doc__/rebuild-plan.md 4.8 */
    letter-spacing: 2.1px;
    white-space: normal;
  }
  .m-join__slash {
    display: none;
  }
  .m-join__cards {
    flex-wrap: wrap;
    gap: 24px;
    margin-bottom: 40px;
  }
}
/* ---------- ホバーの走査(2026-08-05 ユーザ指定)----------
   ダイアログを開くボタン「参加・投票する」(ヘッダー / フッター / SPメニュー)。
   地色は theme.json の `elements.button`(brand-red)なので `background-color` だけが
   埋まっていて `background-image` は空いている。

   ⚠ **赤地なので赤の帯は乗らない**(ユーザ指摘)。2本目を白にした
   `--m-sweep-img-onred` を使う。仕組みと寸法は `_01-tokens.scss`。 */
:is(.muran-theme, .editor-styles-wrapper) .muran-join-open .wp-block-button__link {
  background-image: var(--m-sweep-img-onred);
  background-repeat: no-repeat;
  background-size: var(--m-sweep-w) 100%;
  background-position: var(--m-sweep-from) 0;
  /* 見かけの速さ: 実測幅 179px → 0.78s(式は `_01-tokens`)*/
  --m-sweep-dur: 0.78s;
}

@media (hover: hover) {
  :is(.muran-theme, .editor-styles-wrapper) .muran-join-open .wp-block-button__link:hover {
    background-position: var(--m-sweep-to) 0;
    transition: background-position var(--m-sweep-dur) ease-out;
  }
}
/* ==========================================================
   色は **`--m-cat` だけ**を見る。値は `muran_category` タームの term meta を
   mu-plugin が `wp_head` で流し込む(色の出所を1箇所にする)。
   エディタや万一の未設定でも壊れないよう既定値を持たせておく。
   ========================================================== */
:root {
  --m-cat: var(--wp--preset--color--accent-cyan);
  /* ヒーロー(Figma: MV 1440x297 + パンくず24 = 321) */
  --m-cathero-h: 297px;
  --m-cathero-h-sp: 393px;
  /* セクション間(works-list-area の col gap104) */
  --m-catsec-gap: 104px;
  /* カード */
  --m-card-radius: 8px;
  --m-card-thumb-h: 208px; /* 3列カードのサムネ(312x208) */
  --m-badge-yellow: #ffde1e;
  /* theme.json のルートパディングと同じ値。ヒーローだけ constrained を使わないので明示 */
  --m-gutter: clamp(20px, 4vw, 40px);
}

@media (max-width: 781px) {
  :root {
    --m-cathero-h: 393px;
    --m-catsec-gap: 56px;
    --m-card-thumb-h: 160px;
  }
}
/* ---------- WP のレイアウト間隔(blockGap 24px)を切る ----------
   コアの constrained/flow レイアウトは `> * + *` に `margin-block-start:24px` を付ける。
   原稿は版面を実測値で組むので、カテゴリ系のブロックではこれを 0 に戻してから
   各要素に原稿どおりの間隔を与える。詳細度はクラス2つ(=コアの `> * + *` に勝つ)に
   とどめ、後段の間隔指定(同じ詳細度)が順序で勝つようにする。`!important` は使わない。
   **同じ形の規則が catsec / catcarousel / goaround / workbody / relworks にもある**
   (元は1本の `:is()` だったものを主語ごとに割った = 規律61)。 */
:is(.m-cat-index, .m-work) .m-catq > * {
  margin-block-start: 0;
}

/* ---------- 背景の淡いグラデーション(Figma: `bg` 1614幅 / 不透明度8% / LAYER_BLUR 84) ----------
   巨大な線形グラデ(#0093C0→#FF4469)を 8% で敷いたもの。84px のぼかしは
   面の内側ではほぼ何も変えず **上下端のフェード**としてしか効かないので、mask で再現する。
   位置・高さ・角度はカテゴリごとに違う(原稿の実測値)。角度は Figma のハンドル
   h1-h0=(1, 0.3)(正規化)を実寸に直した atan(0.3*高さ / 1614) + 90deg。
   `<main>` の上端 = ヘッダー下端なので、原稿のフレーム内 y から 96 を引いた値を使う。 */
.m-cat-index {
  position: relative;
  overflow-x: clip; /* 版面外へ出る 1614px の帯で横スクロールを出さない */
}

/* **幅は原稿の 1614 を下限にして、広い画面では画面幅いっぱいまで伸ばす**
   (2026-07-31 ユーザ指摘)。原稿の帯は左右の端をぼかさない(マスクは上下だけ)ので、
   1614 固定のままだと 1614 より広い画面で **縦の切れ目がはっきり見える**
   (2560 では両側に白が 473px ずつ残っていた)。
   `max()` なので **1614px 以下の幅では今までと1px も変わらない**(1440 の実測は不変)。 */
.m-cat-index::before {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: var(--m-wash-top, 0);
  width: max(1614px, 100%);
  height: var(--m-wash-h, 0);
  pointer-events: none;
  opacity: 0.08;
  background: linear-gradient(var(--m-wash-angle, 101deg), var(--wp--preset--color--accent-cyan), var(--wp--preset--color--accent-pink));
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 84px, #000 calc(100% - 84px), transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 84px, #000 calc(100% - 84px), transparent 100%);
  z-index: 0;
}

.muran-cat--software {
  --m-wash-top: 210px;
  --m-wash-h: 1040px;
  --m-wash-angle: 100.9deg;
}

.muran-cat--idea {
  --m-wash-top: 262px;
  --m-wash-h: 1858px;
  --m-wash-angle: 109.1deg;
}

.muran-cat--kids {
  --m-wash-top: -96px;
  --m-wash-h: 3083px;
  --m-wash-angle: 119.8deg;
}

.muran-cat--skills {
  --m-wash-top: -96px;
  --m-wash-h: 2225px;
  --m-wash-angle: 112.5deg;
}

.muran-cat--gallery {
  --m-wash-top: -96px;
  --m-wash-h: 5484px;
  --m-wash-angle: 135.6deg;
}

.m-cat-index > * {
  position: relative;
  z-index: 1;
}

:is(.muran-theme, .editor-styles-wrapper) .m-catbtn .wp-block-button__link {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  gap: 16px;
  min-height: 45px;
  padding: 10px 12px 10px 32px;
  border-radius: var(--wp--custom--radius--pill);
  font-size: var(--wp--custom--font-size--15);
  font-weight: 700;
  line-height: 22px;
  letter-spacing: 0.1em;
  text-decoration: none;
}

.m-catbtn .wp-block-button__link::after {
  content: "";
  flex: 0 0 25px;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: center/10px 6px no-repeat;
  transition: background-position var(--m-nudge-ease);
}

/* ホバー中は山形が向いている方(下)へ寄る。**ページ内の節へ送るリンク**なので
   下向きで正しい(→ `_01-tokens` の `--m-nudge-sm`)。
   ⚠ solid は丸の**背景**が山形なので `background-position`(丸は動かさない)。
     outline は下の `::before` が山形の実体なので、そちらを `transform` で動かす。 */
@media (hover: hover) {
  .m-catbtn--solid .wp-block-button__link:hover::after {
    background-position: center calc(50% + var(--m-nudge-sm));
  }
}
:is(.muran-theme, .editor-styles-wrapper) .m-catbtn--solid .wp-block-button__link {
  background: #ffffff;
  color: var(--m-cat);
}

.m-catbtn--solid .wp-block-button__link::after {
  background-color: var(--m-cat);
  background-image: url(../img/fg-cat-chev-white.svg);
}

:is(.muran-theme, .editor-styles-wrapper) .m-catbtn--outline .wp-block-button__link {
  background: transparent;
  box-shadow: inset 0 0 0 2px #ffffff;
  color: #ffffff;
}

/* 白丸の中はカテゴリ色の山形。SVG を色ごとに出し分けずに済むよう mask で塗る */
.m-catbtn--outline .wp-block-button__link::after {
  background-color: #ffffff;
  background-image: none;
}

.m-catbtn--outline .wp-block-button__link::before {
  content: "";
  position: absolute;
  right: 19.5px;
  width: 10px;
  height: 6px;
  background: var(--m-cat);
  -webkit-mask: url(../img/fg-cat-chev-white.svg) center/10px 6px no-repeat;
  mask: url(../img/fg-cat-chev-white.svg) center/10px 6px no-repeat;
  transition: transform var(--m-nudge-ease);
}

/* outline は `::before` が山形の実体(`::after` は白丸)なので、こちらを動かす。 */
@media (hover: hover) {
  .m-catbtn--outline .wp-block-button__link:hover::before {
    transform: translateY(var(--m-nudge-sm));
  }
}
.m-catbtn--outline .wp-block-button__link {
  position: relative;
}

/* ---------- 別のページへ送るボタン(`.m-catbtn--page`。2026-09-25〜)----------
   `/kids/` の「作品化までのストーリー」(→ 記事カテゴリー「こども未来絵」)。**原稿に版面は無い**
   (先方の添付は「ページ内リンクの下の段に1つ」という枠だけ)ので、同じピルで**丸の中の山形だけ右向き**にした
   (下向き = このページの下の節へ / 右向き = 別のページへ)。
   山形は下向きの素材を右へ倒したもの(`fg-cat-chev-right-white.svg`。線の太さは用途サイズのまま)。
   ⚠ solid だけを想定している(outline は `::before` が山形の実体なので、使うならそちらも倒す)。 */
.m-catbtn--page .wp-block-button__link::after {
  background-image: url(../img/fg-cat-chev-right-white.svg);
  background-size: 6px 10px;
}

/* ホバーは向いている方(右)へ寄る。量は山形の `--m-nudge-sm`(丸に収まる小さい山形)。
   ⚠ solid の「下へ寄る」規則と詳細度が同じ (0,3,1) なので、**その後ろ**に置いて勝たせている。 */
@media (hover: hover) {
  .m-catbtn--page .wp-block-button__link:hover::after {
    background-position: calc(50% + var(--m-nudge-sm)) center;
  }
}
/* PC は**段を変える**(先方の添付どおり、ページ内リンクの下の段)。同じ器の中で、ボタンの箱だけを
   1行ぶんに広げて折り返させる(リンク自体は文字の幅のまま)。段の間と MV の余白は `_cathero.scss`。
   ⚠ PC だけ。SP の器は縦積み(`flex-direction: column`)なので、そこで `flex-basis: 100%` を当てると**高さ**になる。 */
@media (min-width: 782px) {
  .m-cathero__btns > .m-catbtn--page {
    flex-basis: 100%;
  }
  .m-catbtn--page .wp-block-button__link {
    width: fit-content;
  }
}
/* ---------- SP(≤781。原稿 02_SPデザイン 390基準)— 塗りと枠が反転する ---------- */
@media (max-width: 781px) {
  :is(.muran-theme, .editor-styles-wrapper) .m-catbtn .wp-block-button__link {
    justify-content: space-between;
    width: 100%;
    font-size: var(--wp--custom--font-size--13);
    line-height: 20px;
    letter-spacing: 0.1em;
  }
  /* ⚠ 地色は **`background-color`** で書く(一括指定の `background:` にしない)。
     一括指定は `background-image` も `none` に戻すので、後ろにあるホバーの走査
     (`--m-sweep-img-*`)と**打ち消し合う**。`cascade.js` が
     「後出しの広いルールに殺されている」で落とす(規律49)。 */
  :is(.muran-theme, .editor-styles-wrapper) .m-catbtn--solid .wp-block-button__link {
    background-color: #ffffff;
    box-shadow: inset 0 0 0 2px var(--m-cat);
  }
  :is(.muran-theme, .editor-styles-wrapper) .m-catbtn--outline .wp-block-button__link {
    background-color: var(--m-cat);
    box-shadow: none;
    color: #ffffff;
  }
  .m-catbtn--outline .wp-block-button__link::after {
    background-color: #ffffff;
  }
}
/* ---------- ホバーの走査(青・赤の平行四辺形が左→右に抜ける)----------
   仕組みと寸法の根拠は `_01-tokens.scss` の `--m-sweep-*`。
   静止時は版面の外にあるので**見た目は1px も変わらない**(基準線は不変)。
   ⚠ この宣言は**地色を決める規則より後**に置く。`background:` の一括指定は
     `background-image` を `none` に戻すので、前に置くと黙って消える。 */
:is(.muran-theme, .editor-styles-wrapper) .m-catbtn .wp-block-button__link {
  background-image: var(--m-sweep-img);
  background-repeat: no-repeat;
  background-size: var(--m-sweep-w) 100%;
  background-position: var(--m-sweep-from) 0;
  /* 見かけの速さ: 実測幅 236px → 0.92s(式は `_01-tokens`)*/
  --m-sweep-dur: 0.92s;
}

/* 枠のほうは 168px と細い。見かけの速さ: 実測幅 168px → 0.75s(式は `_01-tokens`)*/
:is(.muran-theme, .editor-styles-wrapper) .m-catbtn--outline .wp-block-button__link {
  --m-sweep-dur: 0.75s;
}

/* 別のページへ送るボタン(2026-09-25)。見かけの速さ: 実測幅 267px → 1.00s(式は `_01-tokens`)*/
:is(.muran-theme, .editor-styles-wrapper) .m-catbtn--page .wp-block-button__link {
  --m-sweep-dur: 1s;
}

@media (hover: hover) {
  :is(.muran-theme, .editor-styles-wrapper) .m-catbtn .wp-block-button__link:hover {
    background-position: var(--m-sweep-to) 0;
    transition: background-position var(--m-sweep-dur) ease-out;
  }
}
/* 地色がベタ塗り(枠ボタン(MVのカテゴリ色の上))なので、**濁らない濃いめの帯**に差し替える
   (白地用の `--m-sweep-img` は地色と混ざって中間色になる → `_01-tokens`)。 */
:is(.muran-theme, .editor-styles-wrapper) .m-catbtn--outline .wp-block-button__link {
  background-image: var(--m-sweep-img-ondark);
}

/* ---------- WP のレイアウト間隔(blockGap 24px)を切る ----------
   コアの constrained/flow レイアウトは `> * + *` に `margin-block-start:24px` を付ける。
   原稿は版面を実測値で組むので、カテゴリ系のブロックではこれを 0 に戻してから
   各要素に原稿どおりの間隔を与える。詳細度はクラス2つ(=コアの `> * + *` に勝つ)に
   とどめ、後段の間隔指定(同じ詳細度)が順序で勝つようにする。`!important` は使わない。 */
:is(.m-cat-index, .m-work) .m-catsec {
  margin-block-start: 0;
}

:is(.m-cat-index, .m-work) .m-catsec__head > * {
  margin-block-start: 0;
}

.m-catsec {
  position: relative;
  padding-block: 0;
}

/* 原稿は works-list-area(col gap104)。最初のセクションだけ 56px 上に空きがある。
   ヒーローも <section> なので `:first-of-type` では拾えない → パンくずの次で拾う。
   英字見出しの箱は原稿のトリム箱より 2.5px 上に出るので、その分だけ間隔から引く。
   王冠見出し(中央)は箱の上端＝原稿の上端なので引かない。 */
.m-catsec + .m-catsec {
  margin-top: calc(var(--m-catsec-gap) - 2.5px);
}

.m-catsec + .m-catsec:has(.m-catsec__head--mark) {
  margin-top: var(--m-catsec-gap);
}

/* ヒーロー直下の1本目。原稿は王冠見出しなら 56 / 英字見出しなら 80 空く
   (software=56 / idea・kids・skills・gallery=80。実測) */
.muran-breadcrumb + .m-catsec {
  margin-top: 77.5px;
}

.muran-breadcrumb + .m-catsec:has(.m-catsec__head--mark) {
  margin-top: 56px;
}

/* ⚠ **ステージイベントだけ原稿が 66px**(2026-08-07 実測)。
   パンくず下端からの実測値は software 56 / idea・kids・skills 80 / gallery・exp 78 /
   **stage 66** とページごとに揃っていない。上の既定(77.5 = 80 − 英字見出しのトリム 2.5)で
   gallery・exp は ±0.5px に収まるが、stage だけ 11.5px 開いてしまう。
   ページ単位の値なので、**本文にも版面クラスにも印を持たせず** body の
   `muran-cat--<slug>`(`inc/blocks/chrome.php` が出す既存のフック)で当てる。 */
.muran-cat--stage .muran-breadcrumb + .m-catsec {
  margin-top: 63.5px;
}

/* 見出し。原稿は Figma の leading-trim(cap height)で積まれているので、行ボックスではなく
   **インクの位置**を合わせる。DENSO フォントの実測(canvas TextMetrics):
     EN 20px/32 → 行ボックス上端からインク上端まで 11.5 / インク高 14.2
     JP 32px/32 → 3.33 / 30.08   JP 32px/48 → 11.33   リード 16px/28.8 → 7.93
   原稿(Hiragino, トリム後)の箱: EN 0..14 / JP 38..63 / リード 87..116 */
.m-catsec__head {
  position: relative;
  display: flow-root; /* 先頭の負マージンを外へ漏らさない */
}

:is(.muran-theme, .editor-styles-wrapper) .m-catsec__en {
  margin: -2.5px 0 0;
  font-family: var(--wp--preset--font-family--display);
  font-size: var(--wp--preset--font-size--x-large);
  font-weight: 700;
  line-height: 14px;
  letter-spacing: 0;
  width: fit-content;
  background-image: var(--m-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  /* `background-clip:text` の**塗りの範囲は要素のボックス**。行ボックスを原稿の
     トリム箱(14px)まで詰めているので、そのままだとベースライン下が無塗り=切れて見える。
     下にパディングで塗り範囲を広げ、同じ量の負マージンで版面位置を戻す
     (TOP の `.m-shead__en` と同じ手当て) */
  padding-bottom: 16px;
  margin-bottom: -16px;
}

:is(.muran-theme, .editor-styles-wrapper) .m-catsec__title {
  margin: 20.7px 0 0;
  font-size: var(--wp--custom--font-size--32);
  font-weight: 700;
  line-height: 32px;
  letter-spacing: 0.05em;
  color: var(--wp--preset--color--ink);
}

:is(.muran-theme, .editor-styles-wrapper) .m-catsec__lead {
  margin: 22.8px 0 0;
  font-size: var(--wp--preset--font-size--medium);
  font-weight: 400;
  line-height: 28.8px;
  letter-spacing: 0.05em;
  color: var(--wp--preset--color--ink);
}

/* 優秀作品セクション: 王冠マーク + 中央寄せ(Figma: マーク40x29 / gap16) */
.m-catsec__head--mark {
  text-align: center;
  /* 原稿: マーク 0..29 → gap16 → タイトル箱 45(32px/48)。
     DENSO は 48px 行ボックス内のインク上端が +11.33 なので箱を 42.2 に置く */
  padding-top: 42.2px;
}

.m-catsec__head--mark::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  width: 40px;
  height: 29px;
  margin-left: -20px;
  background: url(../img/fg-cat-mark.svg) center/contain no-repeat;
}

:is(.muran-theme, .editor-styles-wrapper) .m-catsec__head--mark .m-catsec__title {
  margin: 0;
  line-height: 48px;
}

:is(.muran-theme, .editor-styles-wrapper) .m-catsec__head--mark .m-catsec__lead {
  margin: 18.8px 0 0;
  line-height: 29px;
}

/* 背景のグラデ帯(`.m-cat-index::before` = ページの持ち物)より上に出す */
.m-catsec > * {
  position: relative;
  z-index: 1;
}

/* ---------- SP(≤781。原稿 02_SPデザイン 390基準) ---------- */
@media (max-width: 781px) {
  /* 原稿の SP は MV(393)→パンくず(24)→gap20→ボタン。
     ボタンはヒーローの子のままにしておき(PCと同じマークアップ)、
     SP だけ main を基準に絶対配置してパンくずの下へ出す(→ components/cathero)。
     ヒーローも <section> なので `:first-of-type` では拾えない。パンくずの次で拾う。
     原稿: パンくず下端 → gap20 → ボタン(45/本・間8) → gap64 → 1本目のセクション
     ⚠ 下の 181/235/129 は components/_cathero.scss のボタン段組みから逆算した値。
       あちらを触ったらここも計算し直す。 */
  .m-cat-index .muran-breadcrumb + .m-catsec {
    margin-top: 181px; /* 20 + (45+8+45) + 64 */
  }
  .m-cat-index:has(.m-cathero__btns .wp-block-button:nth-child(3)) .muran-breadcrumb + .m-catsec {
    margin-top: 235px; /* 20 + (45+8+45+8+45) + 64 */
  }
  .m-cat-index:not(:has(.m-cathero__btns .wp-block-button:nth-child(2))) .muran-breadcrumb + .m-catsec {
    margin-top: 129px; /* 20 + 45 + 64 */
  }
  /* ボタンが**1本も無い**とき(カテゴリが「準備中」で、記事カテゴリーへのボタンも出ていない)。
     上の規則は「2本目が無い」で拾うので**0本も1本と数えていた** = 存在しないボタン1本ぶん(20 + 45)の
     空きがパンくずの下に出ていた(2026-09-14 の「準備中」から。英語のカテゴリ index で実測 129)。
     → ボタンが無ければ「ボタン → 節」の間(64)だけ残す。詳細度は上と同じ (0,6,0) で、後ろに置いて勝たせる。 */
  .m-cat-index:not(:has(.m-cathero__btns .wp-block-button:nth-child(1))) .muran-breadcrumb + .m-catsec {
    margin-top: 64px;
  }
  .m-catsec {
    padding-inline: 20px;
  }
  :is(.muran-theme, .editor-styles-wrapper) .m-catsec__en {
    font-size: var(--wp--preset--font-size--medium);
    line-height: 24px;
    margin-top: -6px;
  }
  :is(.muran-theme, .editor-styles-wrapper) .m-catsec__title {
    margin-top: 12px;
    font-size: var(--wp--preset--font-size--xx-large);
    line-height: 32px;
    letter-spacing: 0.05em;
  }
  :is(.muran-theme, .editor-styles-wrapper) .m-catsec__lead {
    margin-top: 12px;
    font-size: var(--wp--custom--font-size--13);
    line-height: 23px;
    letter-spacing: 0.05em;
  }
  .m-catsec__head--mark {
    padding-top: 30px;
  }
  .m-catsec__head--mark::before {
    width: 26px;
    height: 19px;
    margin-left: -13px;
    background-image: url(../img/fg-cat-mark-sp.svg);
  }
  :is(.muran-theme, .editor-styles-wrapper) .m-catsec__head--mark .m-catsec__title {
    line-height: 36px;
  }
}
/* コアの flow レイアウトが `> * + *` に付ける margin-block-start を切る */
:is(.m-cat-index, .m-work) .m-cattrack > * {
  margin-block-start: 0;
}

.m-catcarousel {
  margin-top: 40px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  scroll-behavior: smooth;
  padding-inline: 0;
}

.m-catcarousel::-webkit-scrollbar {
  display: none;
}

/* 大画面(原稿の1440超)では帯が版面の外まで伸び、カードが画面の左右端で
   **直角に切り落とされる**。切り口をグラデーションで消す。
   ・背景色を塗り重ねるのではなく `mask-image` で抜く。この帯の地色は
     セクションによって白 / 淡いグラデと変わるので、色を決め打ちすると必ずズレる
   ・マスクは要素の**見えている箱**(= ビューポート幅)に掛かる。中のスクロール量に
     つれて動かないので、端はいつも同じ位置で薄くなる
   ・掛ける量は JS が `--m-fade-l` / `--m-fade-r`(0か1)で切り替える。
     先頭では左を、末尾では右をフェードしない = 「まだ続きがある」の合図になる。
     JSが動かない場合も既定値(左0 / 右1)が初期表示の正解。
   1440以下は原稿どおりの見え方を保つため掛けない。 */
@media (min-width: 1441px) {
  .m-catcarousel {
    --m-fade: clamp(80px, 5vw, 160px);
    --m-fade-l: 0;
    --m-fade-r: 1;
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 calc(var(--m-fade) * var(--m-fade-l)), #000 calc(100% - var(--m-fade) * var(--m-fade-r)), transparent 100%);
    mask-image: linear-gradient(to right, transparent 0, #000 calc(var(--m-fade) * var(--m-fade-l)), #000 calc(100% - var(--m-fade) * var(--m-fade-r)), transparent 100%);
  }
}
:is(.muran-theme, .editor-styles-wrapper) .m-cattrack {
  display: flex;
  gap: 40px;
  margin: 0;
  padding: 0 clamp(20px, 4vw, 40px) 0 max(clamp(20px, 4vw, 40px), 50% - 560px);
  list-style: none;
  width: max-content;
}

.m-cattrack > li {
  flex: 0 0 400px;
  width: 400px;
  scroll-snap-align: start;
}

/* ---------- SP(≤781)— 272幅 / サムネ240x160 ---------- */
@media (max-width: 781px) {
  .m-catcarousel {
    margin-inline: -20px;
  }
  :is(.muran-theme, .editor-styles-wrapper) .m-cattrack {
    gap: 20px;
    padding-inline: 20px;
  }
  .m-cattrack > li {
    flex-basis: 272px;
    width: 272px;
  }
}
:is(.muran-theme, .editor-styles-wrapper) .m-catnav {
  gap: 16px;
  margin: 40px 0 0;
  justify-content: center;
}

:is(.muran-theme, .editor-styles-wrapper) .m-catnav__prev,
:is(.muran-theme, .editor-styles-wrapper) .m-catnav__next {
  margin: 0;
  width: 40px;
  height: 40px;
  font-size: 0;
}

.m-catnav__prev a,
.m-catnav__next a {
  display: block;
  width: 40px;
  height: 40px;
  border: 1px solid #dedede;
  border-radius: 50%;
  background: #ffffff center/4.17px 8.33px no-repeat;
  text-decoration: none;
}

.m-catnav__prev a {
  background-image: url(../img/fg-cat-carousel-prev.svg);
}

.m-catnav__next a {
  background-image: url(../img/fg-cat-carousel-next.svg);
}

.m-catnav__prev[aria-disabled=true] a,
.m-catnav__next[aria-disabled=true] a {
  opacity: 0.35;
  pointer-events: none;
}

:is(.muran-theme, .editor-styles-wrapper) .m-catnav__bar {
  position: relative;
  width: 200px;
  height: 3px;
  background: #bcbcbc;
}

.m-catnav__bar::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  height: 3px;
  width: var(--m-progress, 33px);
  background: var(--wp--preset--color--brand-red);
  transition: width 0.2s ease, transform 0.2s ease;
  transform: translateX(var(--m-progress-x, 0));
}

/* ---------- 文脈: /about/ の「夢卵のあゆみ」(旧 31)----------
   (0,3,0) なので `.m-catnav`(0,2,0)には詳細度で勝つ = 順序に依存しない。 */
:is(.muran-theme, .editor-styles-wrapper) .m-abt--history .m-catnav {
  margin: 23px 0 0;
}

@media (max-width: 781px) {
  :is(.muran-theme, .editor-styles-wrapper) .m-abt--history .m-catnav {
    margin: 0;
    justify-content: center;
  }
}
:is(.muran-theme, .editor-styles-wrapper) .m-catmore {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin: 40px 0 0;
}

.m-catmore a {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  border-bottom: 2px solid var(--wp--preset--color--ink);
  font-size: var(--wp--custom--font-size--15);
  font-weight: 600;
  line-height: 20px;
  letter-spacing: 0.05em;
  color: var(--wp--preset--color--ink);
  text-decoration: none;
}

.m-catmore a::after {
  content: "";
  width: 12px;
  height: 14.53px;
  background: url(../img/fg-cat-more.svg) center/contain no-repeat;
}

.m-catsec.is-open .m-catmore {
  display: none;
}

:is(.muran-theme, .editor-styles-wrapper) .m-cattabs {
  gap: 8px;
  margin: 40px 0 0;
  padding: 24px 32px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.8);
}

:is(.muran-theme, .editor-styles-wrapper) .m-cattab {
  margin: 0;
}

.m-cattab a {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  justify-content: center;
  padding: 6px 20px;
  min-height: 41px;
  border: 1px solid #e7e7e7;
  border-radius: 100px;
  background: #ffffff;
  font-size: var(--wp--preset--font-size--medium);
  line-height: 29px;
  letter-spacing: 0.05em;
  color: var(--wp--preset--color--ink);
  text-decoration: none;
}

.m-cattab.is-current a {
  border-color: var(--m-cat);
  background: var(--m-cat);
  color: #ffffff;
}

/* ---------- SP(≤781) ---------- */
@media (max-width: 781px) {
  :is(.muran-theme, .editor-styles-wrapper) .m-cattabs {
    margin-top: 24px;
    padding: 16px;
    gap: 6px;
  }
  .m-cattab a {
    padding: 4px 12px;
    min-height: 32px;
    font-size: var(--wp--custom--font-size--13);
    /* ⚠ **この幅では字間が字送りの 5% にならない**。
       原稿は幅ごとに font-size を変えたのに、**字間は PC の px を据え置いて**いた
       (SP 側で letter-spacing を書き直していない)。track() にすると見た目が変わるので、
       **いまの描画を保つために px を明示**する。原稿がこの字間を意図したのかは未確認。
       → __doc__/rebuild-plan.md 4.8 */
    letter-spacing: 0.8px;
    line-height: 22px;
  }
}
/* ---------- ホバーの走査(青・赤の平行四辺形が左→右に抜ける)----------
   仕組みと寸法の根拠は `_01-tokens.scss` の `--m-sweep-*`。
   静止時は版面の外にあるので**見た目は1px も変わらない**(基準線は不変)。
   ⚠ この宣言は**地色を決める規則より後**に置く。`background:` の一括指定は
     `background-image` を `none` に戻すので、前に置くと黙って消える。 */
:is(.muran-theme, .editor-styles-wrapper) .m-cattab a {
  background-image: var(--m-sweep-img);
  background-repeat: no-repeat;
  background-size: var(--m-sweep-w) 100%;
  background-position: var(--m-sweep-from) 0;
  /* 見かけの速さ: 実測幅 126px → 0.65s(式は `_01-tokens`)*/
  --m-sweep-dur: 0.65s;
}

@media (hover: hover) {
  :is(.muran-theme, .editor-styles-wrapper) .m-cattab a:hover {
    background-position: var(--m-sweep-to) 0;
    transition: background-position var(--m-sweep-dur) ease-out;
  }
}
/* 地色がベタ塗り(現在のタブ(カテゴリ色))なので、**濁らない濃いめの帯**に差し替える
   (白地用の `--m-sweep-img` は地色と混ざって中間色になる → `_01-tokens`)。 */
:is(.muran-theme, .editor-styles-wrapper) .m-cattab.is-current a {
  background-image: var(--m-sweep-img-ondark);
}

/* ==========================================================
   ① コアの flow レイアウトを切る — 旧 _26-category
   ========================================================== */
:is(.m-cat-index, .m-work) .m-catgrid > * {
  margin-block-start: 0;
}

/* ==========================================================
   ② 基底(PC)— 旧 _26-category。3列 352x410 / gap32
   ========================================================== */
:is(.muran-theme, .editor-styles-wrapper) .m-catgrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  margin: 40px 0 0;
  padding: 0;
  list-style: none;
}

/* 「さらに表示する」で畳む(PC は 9件で畳む)— 旧 _26-category
   ⚠ **畳むのはボタンがある節だけ**(`:has(.m-catmore)`。2026-08-07)。
   以前は `--grid` / `--exhibit` という**版面のクラス**だけで畳んでいたので、
   ボタンを出さない節(体験イベントの2節 = 原稿が畳んでいない)に当たると
   **開く手段が無いまま 10件目以降が消える**。畳みと開く手段は同じ条件で出す。
   ※ 既存5ページの `--grid` / `--exhibit` の節はすべてボタンを持つので描画は不変
     (こども未来絵の「アイデアが形になった4作品」だけボタン無しだが4件なので元から畳まれない)。 */
.m-catsec--grid:has(.m-catmore) .m-catgrid > *:nth-child(n+10),
.m-catsec--exhibit:has(.m-catmore) .m-catgrid > *:nth-child(n+10) {
  display: none;
}

.m-catsec.is-open .m-catgrid > *:nth-child(n+10) {
  display: flex;
}

/* タブ付きの節では見出しとの間が 32(既定の 40 ではない)。
   ⚠ **基底より後ろに置くこと**(どちらも (0,2,0) なので順序で決まる) */
.m-catsec--tabbed .m-catgrid {
  margin-top: 32px;
}

/* JS が畳むときに使う。`[hidden]` はコアの `display:block` に負けるので明示する */
.m-catgrid > [hidden] {
  display: none;
}

.m-catgrid > * > [hidden] {
  display: none;
}

/* ==========================================================
   ③ 中間幅(≤1199)— 旧 _29-category-mid
   ========================================================== */
@media (max-width: 781px) {
  :is(.muran-theme, .editor-styles-wrapper) .m-catgrid {
    grid-template-columns: repeat(2, 1fr);
  }
}
/* ==========================================================
   ④ SP(≤781)— 旧 _30-category-sp。全作品一覧は 350x100 の横組みリスト / 5件で畳む
   ========================================================== */
@media (max-width: 781px) {
  :is(.muran-theme, .editor-styles-wrapper) .m-catsec--grid .m-catgrid,
  :is(.muran-theme, .editor-styles-wrapper) .m-catsec--tabbed .m-catgrid,
  :is(.muran-theme, .editor-styles-wrapper) .m-catsec--exhibit .m-catgrid {
    grid-template-columns: 1fr;
    gap: 8px;
    margin-top: 24px;
  }
  /* SP の一覧は 5件で畳む(PC と同じく**ボタンがある節だけ**) */
  .m-catsec--grid:has(.m-catmore) .m-catgrid > *:nth-child(n+6),
  .m-catsec--exhibit:has(.m-catmore) .m-catgrid > *:nth-child(n+6) {
    display: none;
  }
  .m-catsec.is-open .m-catgrid > *:nth-child(n+6) {
    display: grid;
  }
  .m-catsec--exhibit.is-open .m-catgrid > *:nth-child(n+6) {
    display: flex;
  }
}
/* ==========================================================
   ① コアの flow レイアウトを切る — 旧 _26-category
   ========================================================== */
:is(.m-cat-index, .m-work) :is(.m-cathero, .m-cathero__inner) {
  margin-block-start: 0;
}

/* ==========================================================
   ② 基底(PC)+ あしらい — 旧 _26-category。Figma MV 1440x297
   ========================================================== */
.m-cathero {
  position: relative;
  overflow: hidden;
  min-height: var(--m-cathero-h);
  display: flex;
  align-items: center;
  background: var(--m-cat);
  /* alignfull の左右パディングはコアが親から継承させるので明示的に消す */
  padding-block: 0;
}

/* あしらい(Figma: 白の平行四辺形 PC9枚 / SP6枚)。
   原稿は 1440 カンバスの x=13 から 1507 幅で、右端は版面外へ抜ける。
   幅が変わっても版面中央に係留する(=1440では原稿と同じ x=13 に来る)。

   **1枚絵の背景SVGをやめて1枚ずつの要素にしてある。** 理由は2つ:
     ①TOP と同じ「左右から寄ってきて定位置で止まる」演出を1枚ずつに掛けるため
     ②アートボード(viewBox 1427)の外に出ていた右上の1枚が **垂直に切り落とされて
       平行四辺形に見えていなかった**(1507 が原稿の実寸)。要素なら切れない
   幾何は `site/setup/figma/gen-cathero-deco.py` が SVG から機械的に出す(下のマーカー間)。

   `<i>` は render_block で出力時に合成する(パターン/post_content を汚さない → 規律24)。

   動きの定義(`@keyframes m-deco-in`)は TOP と共有するが、**クラスは共有しない**。
   TOP 側は「SPはファーストビューだけ」の都合で
   `@media (max-width: 781px) { .m-deco__i:not(.m-deco__i--fv){display:none} }` を持っており、
   `.m-deco__i` を借りると **1200px 未満でカテゴリMVのあしらいが丸ごと消える**
   (実際に消えた)。→ CLAUDE.md「クラス名の使い回しで別ページが壊れる」 */
.m-catdeco {
  position: absolute;
  inset: 0;
  /* 寄ってくる前の位置(版面の外)を隠す。旧実装で SVG の枠が担っていた役割 */
  overflow: hidden;
  /* ここでスタッキング文脈を閉じる。閉じないと `.m-deco__i` の z-index:0 が
     外に持ち上がり、写真(z-index:auto)より前に出うる */
  z-index: 0;
  pointer-events: none;
}

/* 初期状態は **最終位置のまま opacity:0**。ずらすのはキーフレームの `from` 側で持つ
   (`.m-deco__i` と同じ理由 = 位置をずらすと交差判定が空になりうる)。 */
/* エディタ側は muran.js が走らないので `.m-in` が付かない = 装飾が透明のままになる。
   最終状態で見せる。ループは編集の邪魔になるので止める(旧 24。主語ごとに割った = 規律61)。 */
.editor-styles-wrapper .m-catdeco__i {
  opacity: 1;
  animation: none;
}

/* ⚠ **この規則は下の `.m-catdeco__i { opacity: 0 }` より前**。どちらも (0,1,0) なので
   順序だけで勝敗が決まり、いまは `opacity:0` が勝っている
   = **reduced-motion の利用者にはカテゴリ MV のあしらいが出ていない**。
   旧 24 に置かれていたときと同じ挙動を保つためにここへ置いた。
   直すなら「この規則を `opacity:0` の後ろへ移す」だけだが、**見た目が変わる**ので別途判断。 */
@media (prefers-reduced-motion: reduce) {
  .m-catdeco__i {
    opacity: 1;
    animation: none;
  }
}
.m-catdeco__i {
  position: absolute;
  display: block;
  opacity: 0;
}

.m-catdeco__i.m-in {
  animation: m-deco-in 1.15s cubic-bezier(0.16, 0.72, 0.28, 1) var(--m-deco-d, 0ms) both;
}

/* 寄ってくる距離。MV は高さ297しかないので TOP より短くして、横切る感じを出さない */
.m-catdeco__i[data-from=l] {
  --m-deco-x: -280px;
}

.m-catdeco__i[data-from=r] {
  --m-deco-x: 280px;
}

@media (max-width: 781px) {
  .m-catdeco__i[data-from=l] {
    --m-deco-x: -130px;
  }
  .m-catdeco__i[data-from=r] {
    --m-deco-x: 130px;
  }
}
/* PC/SP の出し分け。座標系が別(PCは版面中央係留・SPは左端係留)なので両方出しておいて
   幅で隠す。SP用画像の出し分け(`inc/sp-art-direction.php`)と同じ考え方。

   **`.m-catdeco__i` の後ろに置くこと。** どちらもクラス1つで詳細度が同じなので、
   前に置くと `display:block` に負けて **SPでPC用の9枚も一緒に出る**(実際に出た)。
   → 規律27「クラス1つだと負ける」 */
@media (max-width: 781px) {
  .m-catdeco__i--pc {
    display: none;
  }
}
@media (min-width: 782px) {
  .m-catdeco__i--sp {
    display: none;
  }
}
/* エディタのキャンバスは `render_block` を通さないので `<i>` が来ない(= あしらいが消える)。
   編集中の見えかたが変わらないよう、**エディタでだけ**元の1枚絵を敷き直す。
   右端が切れているのはフロントでは直っているので、ここは編集用の下絵と割り切る。 */
.editor-styles-wrapper .m-cathero::before {
  content: "";
  position: absolute;
  left: calc(50% - 707px);
  top: 18px;
  width: 1427px;
  height: 250.24px;
  background: url(../img/fg-cat-deco.svg) 0 0/1427px 250.24px no-repeat;
  pointer-events: none;
}

/* @cathero-deco-gen:start — site/setup/figma/gen-cathero-deco.py が生成。手で編集しない */
/* PC(原稿 1440 カンバス。版面中央に係留する) */
.m-catdeco__i0 {
  left: calc(50% + 640px);
  top: 58px;
  width: 160px;
  height: 20px;
  clip-path: polygon(10.969% 0%, 100% 0%, 89.031% 100%, 0% 100%);
  background: rgba(255, 255, 255, 0.08);
}

.m-catdeco__i1 {
  left: calc(50% + 633px);
  top: 237px;
  width: 82px;
  height: 9px;
  clip-path: polygon(10.969% 0%, 100% 0%, 89.031% 100%, 0% 100%);
  background: rgba(255, 255, 255, 0.32);
}

.m-catdeco__i2 {
  left: calc(50% - 642px);
  top: 249px;
  width: 197.013px;
  height: 19.235px;
  clip-path: polygon(10.771% 0%, 100% 0%, 89.229% 100%, 0% 100%);
  background: rgba(255, 255, 255, 0.08);
}

.m-catdeco__i3 {
  left: calc(50% - 82px);
  top: 69px;
  width: 197.013px;
  height: 19.235px;
  clip-path: polygon(10.771% 0%, 100% 0%, 89.229% 100%, 0% 100%);
  background: rgba(255, 255, 255, 0.24);
}

.m-catdeco__i4 {
  left: calc(50% - 707px);
  top: 51px;
  width: 100.174px;
  height: 9px;
  clip-path: polygon(6.579% 0%, 100% 0%, 93.421% 100%, 0% 100%);
  background: rgba(255, 255, 255, 0.08);
}

.m-catdeco__i5 {
  left: calc(50% - 626px);
  top: 18px;
  width: 145px;
  height: 17px;
  clip-path: polygon(7.143% 0%, 100% 0%, 92.857% 100%, 0% 100%);
  background: rgba(255, 255, 255, 0.08);
}

.m-catdeco__i6 {
  left: calc(50% - 47px);
  top: 204px;
  width: 112px;
  height: 13px;
  clip-path: polygon(7.143% 0%, 100% 0%, 92.857% 100%, 0% 100%);
  background: rgba(255, 255, 255, 0.08);
}

.m-catdeco__i7 {
  left: calc(50% - 661px);
  top: 223px;
  width: 92px;
  height: 10px;
  clip-path: polygon(6.849% 0%, 100% 0%, 93.151% 100%, 0% 100%);
  background: rgba(255, 255, 255, 0.32);
}

.m-catdeco__i8 {
  left: calc(50% - 111px);
  top: 38px;
  width: 128px;
  height: 13px;
  clip-path: polygon(7.143% 0%, 100% 0%, 92.857% 100%, 0% 100%);
  background: rgba(255, 255, 255, 0.08);
}

/* SP(原稿 390 カンバス。左端に係留する) */
@media (max-width: 781px) {
  .m-catdeco__i9 {
    left: -61px;
    top: 17px;
    width: 126.5px;
    height: 8.5px;
    clip-path: polygon(7.115% 0%, 100% 0%, 92.885% 100%, 0% 100%);
    background: rgba(255, 255, 255, 0.1);
  }
  .m-catdeco__i10 {
    left: 279px;
    top: 37.25px;
    width: 128px;
    height: 11.5px;
    clip-path: polygon(6.579% 0%, 100% 0%, 93.421% 100%, 0% 100%);
    background: rgba(255, 255, 255, 0.1);
  }
  .m-catdeco__i11 {
    left: 347px;
    top: 62px;
    width: 86.5px;
    height: 8.5px;
    clip-path: polygon(10.405% 0%, 100% 0%, 89.595% 100%, 0% 100%);
    background: rgba(255, 255, 255, 0.12);
  }
  .m-catdeco__i12 {
    left: 338.25px;
    top: 19px;
    width: 70px;
    height: 4.5px;
    clip-path: polygon(7.143% 0%, 100% 0%, 92.857% 100%, 0% 100%);
    background: rgba(255, 255, 255, 0.12);
  }
  .m-catdeco__i13 {
    left: -40px;
    top: 157.648px;
    width: 73px;
    height: 4.5px;
    clip-path: polygon(6.849% 0%, 100% 0%, 93.151% 100%, 0% 100%);
    background: rgba(255, 255, 255, 0.6);
  }
  .m-catdeco__i14 {
    left: 14px;
    top: 148.148px;
    width: 52px;
    height: 4.5px;
    clip-path: polygon(9.615% 0%, 100% 0%, 90.385% 100%, 0% 100%);
    background: rgba(255, 255, 255, 0.3);
  }
}
/* @cathero-deco-gen:end */
/* 写真(Figma: 560x297 を x=800。版面左端160 + 640 と一致するので中央係留でよい) */
:is(.muran-theme, .editor-styles-wrapper) .m-cathero__photo {
  position: absolute;
  left: calc(50% + 80px);
  top: 0;
  margin: 0;
  width: 560px;
  height: var(--m-cathero-h);
}

.m-cathero__photo img {
  display: block;
  width: 560px;
  height: var(--m-cathero-h);
  object-fit: cover;
}

.m-cathero__inner {
  position: relative;
  z-index: 1;
  box-sizing: border-box;
  width: 100%;
  /* 版面 1120 + 左右のガター。1440 で内容が x=160 から始まる */
  max-width: calc(var(--wp--style--global--content-size) + var(--m-gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--m-gutter);
  /* 原稿は本文ブロックが MV の縦中央に来る(software 48/48・idea 35/34) */
  padding-block: 24px;
}

/* 写真は版面左端+640 から始まる。テキストが写真の下に潜らないよう幅を切る */
.m-cathero__inner > * {
  max-width: 640px;
}

/* 🔴 ここに **MV のバッジ**(31px チップ)の版面があったが、
   **2026-08-21 の先方指定①でタグ状意匠ごと撤去**した(→ `inc/blocks/category.php`)。
   出ていたのはステージ / 体験の2ページだけ(コンテスト5ページは 08-05 に空にしてある)。 */
/* 🔴 見出しの `<br>` は **SP でだけ効かせる**(2026-08-24)。位置の出所は
   `muran_category_pages()` の `title` に入れた `|`。**`<br>` にクラスを付けない**理由は
   `.m-catcard__title br` と同じ(保存で属性が落ちる = 規律114)。 */
.m-cathero__title br {
  display: none;
}

:is(.muran-theme, .editor-styles-wrapper) .m-cathero__title {
  margin: 16px 0 0;
  font-size: var(--wp--custom--font-size--32);
  font-weight: 700;
  line-height: 48px;
  letter-spacing: 0.05em;
  color: #ffffff;
}

:is(.muran-theme, .editor-styles-wrapper) .m-cathero__lead {
  margin: 10px 0 0;
  font-size: var(--wp--custom--font-size--15);
  font-weight: 400;
  line-height: 27px;
  letter-spacing: 0.05em;
  color: #ffffff;
}

:is(.muran-theme, .editor-styles-wrapper) .m-cathero__btns {
  margin: 24px 0 0;
  align-items: center;
}

/* 別のページへ送るボタン(`.m-catbtn--page`。2026-09-25〜 `/kids/`)があると PC はボタンが**2段**になり、
   MV(297)に入りきらない(`/kids/` の中身 197 → 16+45 足して 258。上下の余白 24 を足すと 306)。
   **写真は 297 固定**(円のマスクを焼いた絵)なので、MV を伸ばすと写真の下に地色の帯が出る。
   → 段の間を 12(横の間 16 より詰めて1組に見せる)、上下の余白を 24 → 20 にして 294 に収める。
   中身は MV の縦中央に来る(上下 21.5)。1段しか無いとき(ページ内リンクが「準備中」で消えたとき)は
   余白が詰まるだけで見た目は変わらない(中身が 297 より十分小さいので中央寄せが効く)。 */
@media (min-width: 782px) {
  :is(.muran-theme, .editor-styles-wrapper) .m-cathero:has(.m-catbtn--page) .m-cathero__btns {
    row-gap: 12px;
  }
  :is(.muran-theme, .editor-styles-wrapper) .m-cathero:has(.m-catbtn--page) .m-cathero__inner {
    padding-block: 20px;
  }
}
/* ==========================================================
   ③ 中間幅(≤1199)— 旧 _29-category-mid
   ========================================================== */
@media (max-width: 781px) {
  :is(.muran-theme, .editor-styles-wrapper) .m-cathero__photo {
    left: auto;
    right: 0;
  }
}
/* ==========================================================
   ④ SP(≤781)— 旧 _30-category-sp
   SP の MV は「文字 → 写真」の縦積み。ボタンは MV の外(パンくずの下)へ出す
   ========================================================== */
@media (max-width: 781px) {
  /* SP の MV は「文字 → 写真」の縦積み。原稿は 393px 固定だが、DENSO フォントは
     Hiragino より字幅が広く、タイトルが2行になるカテゴリがある。絶対配置のままだと
     文字が写真に重なるので、**写真を通常フローの最後**に置いて下端に寄せる
     (min-height で原稿どおり 393、文字が増えたら MV ごと伸びる)。 */
  .m-cathero {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 393px;
    /* ボタンは MV の外(パンくずの下)へ絶対配置するので、ここで切らない */
    overflow: visible;
  }
  /* SP のあしらいは1枚ずつの座標を持つ(下の生成CSS `@cathero-deco-gen`)。
     MV 自体は切らない(ボタンが外に出る)が、あしらいの層は `.m-catdeco` 側で切る。 */
  :is(.muran-theme, .editor-styles-wrapper) .m-cathero__photo {
    position: static;
    order: 2;
    margin-top: auto; /* 文字が短いときは原稿どおり下端(= top 189)に来る */
    width: 100%;
    height: 204px;
  }
  /* ボタンの絶対配置の基準を MV にする(inner が relative だと inner の高さで計算される) */
  :is(.muran-theme, .editor-styles-wrapper) .m-cathero__inner {
    position: static;
    order: 1;
  }
  .m-cathero__photo img {
    width: 100%;
    height: 204px;
    object-fit: cover;
    object-position: top center;
  }
  :is(.muran-theme, .editor-styles-wrapper) .m-cathero__inner {
    padding: 32px 20px 0;
    text-align: center;
  }
  .m-cathero__title br {
    display: inline;
  }
  :is(.muran-theme, .editor-styles-wrapper) .m-cathero__title {
    margin-top: 16px;
    font-size: 27px;
    line-height: 27px;
    letter-spacing: 0;
  }
  :is(.muran-theme, .editor-styles-wrapper) .m-cathero__lead {
    margin-top: 24px;
    font-size: var(--wp--custom--font-size--13);
    line-height: 23px;
    letter-spacing: 0.05em;
  }
  /* ボタンは MV の外(パンくずの下)へ。色が反転して全幅になる */
  :is(.muran-theme, .editor-styles-wrapper) .m-cathero__btns {
    position: absolute;
    left: 0;
    z-index: 2;
    width: 100%;
    margin: 0;
    padding-inline: 20px;
    flex-direction: column;
    /* コアの blockGap はクラス1つ(.wp-container-…)なので、2クラスで後出し勝ちできる */
    gap: 8px;
  }
  :is(.muran-theme, .editor-styles-wrapper) .m-cathero__btns .wp-block-button {
    width: 100%;
  }
  /* MV の下端から数える(MV が伸びても追従する)。24 = パンくず / 20 = 原稿の gap */
  :is(.muran-theme, .editor-styles-wrapper) .m-cat-index .m-cathero__btns {
    top: calc(100% + 44px);
  }
}
/* ==========================================================
   ① 共有の基底(PC)— 旧 _26-category
   ========================================================== */
.m-workcard,
.m-exhibitcard {
  position: relative; /* 面リンクのオーバーレイの包含ブロック(無いと**隣のカードまで覆う**) */
  display: flex;
  flex-direction: column;
  align-items: center;
  /* 原稿は 400x467(3列は 352x410)の内側に padding20 で 360(312)の中身が入る。
     枠を `border` にすると内容幅が 2px 痩せるので、場所を取らない inset shadow で描く */
  box-sizing: border-box;
  padding: 20px 20px 24px;
  box-shadow: inset 0 0 0 1px var(--m-line);
  border-radius: var(--m-card-radius);
  background: #ffffff;
  height: 100%;
}

:is(.muran-theme, .editor-styles-wrapper) .m-workcard__thumb,
:is(.muran-theme, .editor-styles-wrapper) .m-exhibitcard__thumb {
  box-sizing: border-box;
  margin: 0;
  width: 100%;
  height: var(--m-card-thumb-h);
  box-shadow: inset 0 0 0 1px var(--m-line);
  background: #ffffff;
}

.m-workcard__thumb img,
.m-exhibitcard__thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 文字の入った画像は枠に**収める**(`is-fit-contain` = post meta `muran_thumb_fit`。2026-09-14)。
   3:2 の cover で切ると文字が欠ける(manuscript-intake 4.3)。余りは枠の地色(白)で埋まる。
   クラスは `inc/filters.php` が作品ごとに付ける。 */
.m-workcard__thumb.is-fit-contain img {
  object-fit: contain;
}

:is(.muran-theme, .editor-styles-wrapper) .m-workcard__body,
:is(.muran-theme, .editor-styles-wrapper) .m-exhibitcard__body {
  margin: 20px 0 0;
  width: 100%;
}

/* 本文の箱を伸ばして「詳しく見る」を**カードの下端に揃える**(2026-09-14)。
   原稿はダミーの1行タイトルで高さが揃っていたが、実データはタイトルが1〜3行あり、
   同じ行のカードの中でボタンの高さがばらついた(/idea/ の33件で実測)。
   `margin-top: auto` にしない(ボタンの上の 20px を食う = 規律112)。本文の側を伸ばす。
   SP の横組み(grid)では flex の指定が効かないので版面は変わらない。展示カードは CTA が無いので対象外。 */
.m-workcard__body {
  flex: 1 0 auto;
}

/* タイトル行の頭に 6px のカテゴリ色ドット(Figma: Ellipse 34) */
:is(.muran-theme, .editor-styles-wrapper) .m-workcard__title {
  position: relative;
  margin: 0;
  padding-left: 16px;
  font-size: var(--wp--preset--font-size--medium);
  font-weight: 700;
  line-height: 29px;
  letter-spacing: 0.05em;
  color: var(--wp--preset--color--ink);
}

.m-workcard__title::before {
  content: "";
  position: absolute;
  left: 0;
  top: 11.5px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--m-cat);
}

.m-workcard__title a {
  text-decoration: none;
}

:is(.muran-theme, .editor-styles-wrapper) .m-workcard__excerpt {
  margin: 8px 0 0;
  font-size: var(--wp--preset--font-size--small);
  line-height: 25px;
  letter-spacing: 0.05em;
  color: var(--wp--preset--color--ink);
}

.m-workcard__excerpt p {
  margin: 0;
}

/* 原稿のカード高は固定(3列 410 / カルーセル 467)。実データの抜粋は長さが揃わないので
   行数で切る(3列=1行 / カルーセル=2行)。タイトルは切らない(作品名は落とせない)。 */
.m-catgrid .m-workcard__excerpt,
.m-cattrack .m-workcard__excerpt {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.m-catgrid .m-workcard__excerpt {
  -webkit-line-clamp: 1;
}

.m-cattrack .m-workcard__excerpt {
  -webkit-line-clamp: 2;
}

/* 「詳しく見る」(Figma: 240x56 / #333 / 右端に矢印) */
:is(.muran-theme, .editor-styles-wrapper) .m-workcard__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  margin: 20px 0 0;
  width: 240px;
  max-width: 100%;
  height: 56px;
  border-radius: var(--wp--custom--radius--pill);
  background: var(--wp--preset--color--ink);
  font-size: var(--wp--custom--font-size--15);
  font-weight: 600;
  line-height: 20px;
  letter-spacing: 0.05em;
  color: #ffffff;
  text-decoration: none;
}

.m-workcard__cta::after {
  content: "";
  position: absolute;
  right: 26px;
  width: 15.95px;
  height: 14px;
  background: url(../img/fg-cat-arrow-white.svg) center/contain no-repeat;
  transition: transform var(--m-nudge-ease);
}

/* ホバー中は矢印が右へ寄る(→ `_01-tokens` の `--m-nudge`)。
   `.m-workcard__cta` は `<a>` そのもの(`core/read-more`)。 */
@media (hover: hover) {
  .m-workcard__cta:hover::after {
    transform: translateX(var(--m-nudge));
  }
}
/* 展示カード(CTA なし。副題 + エリアチップ) */
:is(.muran-theme, .editor-styles-wrapper) .m-exhibitcard__title {
  margin: 0;
  font-size: var(--wp--preset--font-size--medium);
  font-weight: 700;
  line-height: 29px;
  letter-spacing: 0.05em;
}

.m-exhibitcard__title a {
  text-decoration: none;
}

:is(.muran-theme, .editor-styles-wrapper) .m-exhibitcard__sub {
  margin: 8px 0 0;
  font-size: var(--wp--preset--font-size--small);
  line-height: 25px;
  letter-spacing: 0.05em;
}

:is(.muran-theme, .editor-styles-wrapper) .m-exhibitcard__area {
  display: inline-flex;
  align-items: center;
  box-sizing: border-box;
  justify-content: center;
  margin: 8px 0 0;
  padding: 3px 6px;
  min-height: 25px;
  border: 1px solid var(--wp--preset--color--ink);
  border-radius: var(--wp--custom--radius--chip);
  font-size: var(--wp--preset--font-size--xx-small);
  line-height: 16px;
  letter-spacing: 0.05em;
}

.m-exhibitcard__area:empty,
.m-exhibitcard__sub:empty {
  display: none;
}

/* ==========================================================
   ② 文脈: 横スクロールのカルーセル(400x467)— 旧 _26-category
   ========================================================== */
.m-cattrack > .m-workcard {
  flex: 0 0 400px;
  width: 400px;
  scroll-snap-align: start;
}

.m-cattrack .m-workcard {
  --m-card-thumb-h: 240px;
}

/* ==========================================================
   ③ SP(≤781)— 旧 _30-category-sp
   ========================================================== */
@media (max-width: 781px) {
  .m-cattrack > .m-workcard {
    flex-basis: 272px;
    width: 272px;
  }
  .m-cattrack .m-workcard {
    --m-card-thumb-h: 160px;
  }
  /* ---------- 全作品一覧(SP: 350x100 の横組みリスト) ---------- */
  .m-catsec--grid .m-workcard,
  .m-catsec--tabbed .m-workcard {
    position: relative;
    display: grid;
    grid-template-columns: 120px 1fr;
    grid-template-areas: "thumb body";
    align-items: center;
    gap: 10px;
    padding: 10px;
    min-height: 100px;
    border-radius: 6px;
  }
  :is(.muran-theme, .editor-styles-wrapper) .m-catsec--grid .m-workcard__thumb,
  :is(.muran-theme, .editor-styles-wrapper) .m-catsec--tabbed .m-workcard__thumb {
    grid-area: thumb;
    width: 120px;
    height: 80px;
  }
  :is(.muran-theme, .editor-styles-wrapper) .m-catsec--grid .m-workcard__body,
  :is(.muran-theme, .editor-styles-wrapper) .m-catsec--tabbed .m-workcard__body {
    grid-area: body;
    margin: 0;
    padding-top: 4px;
  }
  :is(.muran-theme, .editor-styles-wrapper) .m-catsec--grid .m-workcard__title,
  :is(.muran-theme, .editor-styles-wrapper) .m-catsec--tabbed .m-workcard__title {
    padding-left: 12px;
    font-size: var(--wp--preset--font-size--small);
    line-height: 25px;
    letter-spacing: 0.05em;
  }
  .m-catsec--grid .m-workcard__title::before,
  .m-catsec--tabbed .m-workcard__title::before {
    top: 10.5px;
    width: 4px;
    height: 4px;
  }
  :is(.muran-theme, .editor-styles-wrapper) .m-catsec--grid .m-workcard__excerpt,
  :is(.muran-theme, .editor-styles-wrapper) .m-catsec--tabbed .m-workcard__excerpt {
    margin: 0;
    font-size: var(--wp--preset--font-size--x-small);
    line-height: 22px;
    letter-spacing: 0.05em;
  }
  /* CTA は右下角の 30x30 の矢印ボタンになる */
  :is(.muran-theme, .editor-styles-wrapper) .m-catsec--grid .m-workcard__cta,
  :is(.muran-theme, .editor-styles-wrapper) .m-catsec--tabbed .m-workcard__cta {
    position: absolute;
    right: 0;
    bottom: 0;
    margin: 0;
    width: 30px;
    height: 30px;
    border-radius: 8px 0 5px 0;
    font-size: 0;
    /* ⚠ ここは `font-size: 0` で文字を隠すアイコン表示。**字送りが 0 なので track() は 0 になる**
       (Chrome の計算値は `normal`)。PC の 0.75px を据え置いていた元の描画を保つために明示する。
       → __doc__/rebuild-plan.md 4.8 */
    letter-spacing: 0.75px;
  }
  .m-catsec--grid .m-workcard__cta::after,
  .m-catsec--tabbed .m-workcard__cta::after {
    right: 10px;
    width: 10px;
    height: 8.26px;
    background-image: url(../img/fg-cat-arrow-white-sp.svg);
  }
  /* 展示カードは SP でも縦組み(サムネ + 文言) */
  .m-catsec--exhibit .m-exhibitcard {
    padding: 16px;
  }
}
/* ==========================================================
   ④ 面リンク — 旧 _43-clickable-cards
   サムネと見出しが別々にリンクになっていて**間に押せない帯**が残るので、
   見出しの面リンクで埋める(行き先はどれも1種類なので重ならない)。
   実測 = `node site/setup/verify/clickable.js`

   ⚠ **作品カードからは外した**(2026-08-05 ユーザ指定)。
     「この意匠ではリンクは『詳しく見る→』だけ。矩形全体でボタンではない」。
     サムネと見出しの `isLink` も `inc/blocks/cards.php` で切ってある。
     **展示カードは CTA を持たない**(原稿がそう)ので、こちらは全面リンクのまま。
   ========================================================== */
.m-exhibitcard__title a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
}

/* ---------- ホバーの走査(青・赤の平行四辺形が左→右に抜ける)----------
   仕組みと寸法の根拠は `_01-tokens.scss` の `--m-sweep-*`。
   静止時は版面の外にあるので**見た目は1px も変わらない**(基準線は不変)。
   ⚠ この宣言は**地色を決める規則より後**に置く。`background:` の一括指定は
     `background-image` を `none` に戻すので、前に置くと黙って消える。 */
:is(.muran-theme, .editor-styles-wrapper) .m-workcard__cta {
  background-image: var(--m-sweep-img);
  background-repeat: no-repeat;
  background-size: var(--m-sweep-w) 100%;
  background-position: var(--m-sweep-from) 0;
}

@media (hover: hover) {
  :is(.muran-theme, .editor-styles-wrapper) .m-workcard__cta:hover {
    background-position: var(--m-sweep-to) 0;
    transition: background-position var(--m-sweep-dur) ease-out;
  }
}
/* ---------- ホバーの走査(青・赤の平行四辺形が左→右に抜ける)----------
   仕組みと寸法の根拠は `_01-tokens.scss` の `--m-sweep-*`。
   **大きなカード型のボタンにも同じ効果を入れる**(2026-08-05 ユーザ指定)。
   矢印の寄りとは別軸なので、ホバー中は両方が同時に走る。
   静止時は版面の外にあるので**見た目は1px も変わらない**(基準線は不変)。
   ⚠ この宣言は**地色を決める規則より後**に置く。`background:` の一括指定は
     `background-image` を `none` に戻すので、前に置くと黙って消える。 */
/* ⚠ **作品カードには当てない**(2026-08-05 ユーザ指定)。「詳しく見る」だけがリンクで、
   矩形全体はボタンではないため。展示カードは CTA を持たず全面がリンクなので当てる。 */
.m-exhibitcard {
  background-image: var(--m-sweep-img);
  background-repeat: no-repeat;
  background-size: var(--m-sweep-w) 100%;
  background-position: var(--m-sweep-from) 0;
  /* 見かけの速さ: 実測幅 352px → 1.21s(式は `_01-tokens`)*/
  --m-sweep-dur: 1.21s;
}

@media (hover: hover) {
  .m-exhibitcard:hover {
    background-position: var(--m-sweep-to) 0;
    transition: background-position var(--m-sweep-dur) ease-out;
  }
}
/* 地色がベタ塗り(「詳しく見る」(#333))なので、**濁らない濃いめの帯**に差し替える
   (白地用の `--m-sweep-img` は地色と混ざって中間色になる → `_01-tokens`)。 */
:is(.muran-theme, .editor-styles-wrapper) .m-workcard__cta {
  background-image: var(--m-sweep-img-ondark);
}

/* ==========================================================
   ① 基底(PC)
   ========================================================== */
.m-stagecard {
  position: relative; /* 面リンクのオーバーレイの包含ブロック(無いと**隣のカードまで覆う**) */
  display: flex;
  flex-direction: column;
  align-items: center;
  /* 枠を `border` にすると内容幅が 2px 痩せるので、場所を取らない inset shadow で描く
     (`contentcard` と同じ理由・同じ値) */
  box-sizing: border-box;
  padding: 20px 20px 24px;
  box-shadow: inset 0 0 0 1px var(--m-line);
  border-radius: var(--m-card-radius);
  background: #ffffff;
  height: 100%;
}

:is(.muran-theme, .editor-styles-wrapper) .m-stagecard__thumb {
  /* ⚠ コアの `.wp-block-post-featured-image` は `position: relative`(オーバーレイ用)。
     そのままだと下の面リンク(`__thumb a::after { inset:0 }`)が**サムネの箱に閉じる**
     ので静的に戻す。この部品はオーバーレイを使わないので副作用は無い。 */
  position: static;
  box-sizing: border-box;
  margin: 0;
  width: 100%;
  height: var(--m-card-thumb-h);
  box-shadow: inset 0 0 0 1px var(--m-line);
  background: #ffffff;
}

.m-stagecard__thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

:is(.muran-theme, .editor-styles-wrapper) .m-stagecard__body {
  margin: 20px 0 0;
  width: 100%;
}

/* 演目。行頭に 6px のカテゴリ色ドット(Figma: Ellipse 34) */
:is(.muran-theme, .editor-styles-wrapper) .m-stagecard__title {
  position: relative;
  margin: 0;
  padding-left: 16px;
  font-size: var(--wp--preset--font-size--medium);
  font-weight: 700;
  line-height: 29px;
  letter-spacing: 0.05em;
  color: var(--wp--preset--color--ink);
}

.m-stagecard__title::before {
  content: "";
  position: absolute;
  left: 0;
  top: 11.5px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--m-cat);
}

.m-stagecard__title a {
  text-decoration: none;
}

/* 日付 + 時刻(Figma: gap4・14px/25)。
   ⚠ 日付は `muran_group` ターム / 時刻は post meta と**出所が別**
   (理由は `inc/blocks/cards.php`)。版面の上では1行として揃える。 */
:is(.muran-theme, .editor-styles-wrapper) .m-stagecard__when {
  gap: 4px;
  margin: 8px 0 0;
}

:is(.muran-theme, .editor-styles-wrapper) .m-stagecard__date,
:is(.muran-theme, .editor-styles-wrapper) .m-stagecard__time {
  margin: 0;
  font-size: var(--wp--preset--font-size--small);
  line-height: 25px;
  letter-spacing: 0.05em;
  color: var(--wp--preset--color--ink);
}

/* 時刻が空の投稿では隙間だけが残らないようにする(日付は必ずタームから出る) */
.m-stagecard__time:empty {
  display: none;
}

:is(.muran-theme, .editor-styles-wrapper) .m-stagecard__excerpt {
  margin: 8px 0 0;
  font-size: var(--wp--preset--font-size--small);
  line-height: 25px;
  letter-spacing: 0.05em;
  /* 原稿の説明文は #888。パレットに無い色なので直値(他の説明文と同じ扱い
     = `_gocard` / `_gotocard` / `_relpages` / `_gmsec` も同じ書き方) */
  color: #888;
}

.m-stagecard__excerpt p {
  margin: 0;
}

/* 原稿のカード高は固定(417)。実データの説明文は長さが揃わないので**3行で切る**
   (原稿の説明枠が 312x75 = 25px × 3)。演目は切らない。 */
.m-catgrid .m-stagecard__excerpt {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

/* ==========================================================
   ② SP(≤781)— 全作品一覧と同じ 350x100 の横組みリスト
   `contentcard` の `.m-workcard` と同じ版面。ステージも同じ器に並ぶ
   (原稿の SP カンプはソフトウェアチャレンジの複製で、この節の版面を持っていない
    → 既存のカテゴリ index と同じ扱いにする。詳細は `__doc__/category-pages.md`)
   ========================================================== */
@media (max-width: 781px) {
  .m-catsec--tabbed .m-stagecard {
    position: relative;
    display: grid;
    grid-template-columns: 120px 1fr;
    grid-template-areas: "thumb body";
    align-items: center;
    gap: 10px;
    padding: 10px;
    min-height: 100px;
    border-radius: 6px;
  }
  :is(.muran-theme, .editor-styles-wrapper) .m-catsec--tabbed .m-stagecard__thumb {
    grid-area: thumb;
    width: 120px;
    height: 80px;
  }
  :is(.muran-theme, .editor-styles-wrapper) .m-catsec--tabbed .m-stagecard__body {
    grid-area: body;
    margin: 0;
    padding-top: 4px;
  }
  :is(.muran-theme, .editor-styles-wrapper) .m-catsec--tabbed .m-stagecard__title {
    padding-left: 12px;
    font-size: var(--wp--preset--font-size--small);
    line-height: 25px;
    letter-spacing: 0.05em;
  }
  .m-catsec--tabbed .m-stagecard__title::before {
    top: 10.5px;
    width: 4px;
    height: 4px;
  }
  :is(.muran-theme, .editor-styles-wrapper) .m-catsec--tabbed .m-stagecard__date,
  :is(.muran-theme, .editor-styles-wrapper) .m-catsec--tabbed .m-stagecard__time,
  :is(.muran-theme, .editor-styles-wrapper) .m-catsec--tabbed .m-stagecard__excerpt {
    margin: 0;
    font-size: var(--wp--preset--font-size--x-small);
    line-height: 22px;
    letter-spacing: 0.05em;
  }
  :is(.muran-theme, .editor-styles-wrapper) .m-catsec--tabbed .m-stagecard__when {
    margin: 0;
  }
  /* 横組みでは説明は1行(縦 100px の中に演目・日付時刻・説明が入る) */
  .m-catgrid .m-stagecard__excerpt {
    -webkit-line-clamp: 1;
  }
}
/* ==========================================================
   ③ 面リンク + ホバーの走査
   カードは CTA を持たない(原稿がそう)ので**全面がリンク**。
   → `.m-exhibitcard` と同じ扱い(規律47 / `clickable.js` が実測する)
   ⚠ 走査の宣言は**地色を決める規則より後**に置く。`background:` の一括指定は
     `background-image` を `none` に戻すので、前に置くと黙って消える。
   ========================================================== */
/* ⚠ **面リンクは「サムネのリンク」に付ける。見出しのリンクではない**(規律46)。
   `inset:0` は**直近の位置指定祖先**に効く。この部品は見出しに ● を絶対配置するので
   `.m-stagecard__title` が `position: relative` で、そこに `::after` を置くと
   **見出しの行だけが押せる**(実測 60%)。展示カードは見出しを位置指定していないので
   同じ書き方で 100% になる = **書き方を写すと静かに縮む**型。
   サムネの `<figure>` は位置指定していないので、ここに置くと箱はカード全体になる。
   行き先はどちらも同じ作品詳細なので、押し所が増えても遷移先は1種類のまま。 */
.m-stagecard__thumb a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
}

.m-stagecard {
  background-image: var(--m-sweep-img);
  background-repeat: no-repeat;
  background-size: var(--m-sweep-w) 100%;
  background-position: var(--m-sweep-from) 0;
  /* 見かけの速さ: 実測幅 352px → 1.21s(式は `_01-tokens`。展示カードと同寸) */
  --m-sweep-dur: 1.21s;
}

@media (hover: hover) {
  .m-stagecard:hover {
    background-position: var(--m-sweep-to) 0;
    transition: background-position var(--m-sweep-dur) ease-out;
  }
}
:is(.muran-theme, .editor-styles-wrapper) .m-catfig {
  margin: 40px 0 0; /* 見出し下端 1845 → 画像 1885(原稿 col gap40) */
}

.m-catfig img {
  display: block;
  width: 100%;
  /* 原稿の枠は 1120x460。素材は 1344x552(= 同じ比)なので、比で固定して
     幅が変わっても縦が原稿どおりに従う。 */
  aspect-ratio: 1120/460;
  object-fit: contain;
}

/* ==========================================================
   SP(≤781)— 版面 350px。原稿の SP カンプはこの節を持っていない
   (ソフトウェアチャレンジの複製だったため)ので、比を保って縮めるだけにする。
   読めない大きさになるのは承知のうえで、**押せば拡大できる**ことで担保する。
   ========================================================== */
@media (max-width: 781px) {
  :is(.muran-theme, .editor-styles-wrapper) .m-catfig {
    margin-top: 24px;
  }
}
/* `box-sizing` を明示する。`<p>` の既定は content-box で、左右の余白 24px x2 が
   `max-width: 1120px` に**足されて 1168px** になっていた(2026-09-14 に撮って発覚)。 */
.m-pending {
  box-sizing: border-box;
  margin: 0;
  padding: 40px 24px;
  border-radius: 8px;
  background: #f7f7f7;
  color: #333333;
  font-size: var(--wp--preset--font-size--small);
  line-height: 25px;
  letter-spacing: 0.05em;
  text-align: center;
}

/* カテゴリ index: 節1本ぶん。`alignfull` の節の中で版面(1120)に収める */
.m-catsec--pending .m-pending {
  max-width: 1120px;
  margin-inline: auto;
}

/* ---------- 置き換えた相手と同じ上の間隔 ----------
   仮素材の画像・グルメのタブの**代わりに**出るので、相手が持っていた上の余白が消えて
   見出しに張り付く(駐車場・グルメ一覧で実際に張り付いた)。相手のクラスは引き継がない:
   `.m-accparking` は幅421・枠線・余白1px、`.m-gm__map` は高さ735 を持つので、
   引き継ぐと箱が化ける。**上の余白の値だけ**を相手の部品から写す(数字の出所はコメント)。
   詳細度は相手の部品と同じ `:is(…)` 付きにする(後ろのファイルの余白のリセットに負けない)。 */
:is(.muran-theme, .editor-styles-wrapper) .m-accsec--parking .m-pending--figure {
  margin-top: 28px; /* = `.m-accparking`(_accmap.scss) */
}

:is(.muran-theme, .editor-styles-wrapper) .m-catsec--image .m-pending--figure,
:is(.muran-theme, .editor-styles-wrapper) .m-gm--map .m-pending--figure {
  margin-top: 40px; /* = `.m-catfig`(_catfig.scss)/ `.m-gm__map`(_gm.scss) */
}

:is(.muran-theme, .editor-styles-wrapper) .m-gm--dir .m-pending {
  margin-top: 33px; /* = `.m-gmtabs`(_gmtabs.scss)。タブの位置に出るため */
}

@media (max-width: 781px) {
  .m-pending {
    padding: 32px 16px;
  }
  /* 駐車場は元の画像が SP で 0(小見出しに接して置かれる)。灰色の箱が見出しの帯に
     接すると詰まって見えるので、ここだけ元の値から離して 16 にした(原稿に版面が無い箇所) */
  :is(.muran-theme, .editor-styles-wrapper) .m-accsec--parking .m-pending--figure {
    margin-top: 16px;
  }
  :is(.muran-theme, .editor-styles-wrapper) .m-catsec--image .m-pending--figure {
    margin-top: 24px; /* = `.m-catfig` の SP */
  }
  :is(.muran-theme, .editor-styles-wrapper) .m-gm--map .m-pending--figure {
    margin-top: 25px; /* = `.m-gm__map` の SP */
  }
  :is(.muran-theme, .editor-styles-wrapper) .m-gm--dir .m-pending {
    margin-top: 40px; /* = `.m-gmtabs` の SP */
  }
}
:is(.muran-theme, .editor-styles-wrapper) .m-notfound {
  padding-top: 96px;
  padding-bottom: 104px;
}

:is(.muran-theme, .editor-styles-wrapper) .m-notfound > * {
  margin-block: 0;
}

:is(.muran-theme, .editor-styles-wrapper) .m-notfound__lead {
  text-align: center;
  text-wrap: balance; /* SP で3行に折れたとき、最後の行が「さい。」だけにならないように行の長さをそろえる(PC は1行) */
}

:is(.muran-theme, .editor-styles-wrapper) .m-notfound__back {
  margin-top: 48px;
}

@media (max-width: 781px) {
  :is(.muran-theme, .editor-styles-wrapper) .m-notfound {
    padding-top: 56px;
    padding-bottom: 64px;
  }
  :is(.muran-theme, .editor-styles-wrapper) .m-notfound__back {
    margin-top: 32px;
  }
}
/* ==========================================================
   ① コアの flow レイアウトを切る — 旧 _26-category
   原稿は版面を実測値で組むので、blockGap を 0 に戻してから原稿どおりの間隔を与える。
   ========================================================== */
:is(.m-cat-index, .m-work) .m-workhero {
  margin-block-start: 0;
}

:is(.m-cat-index, .m-work) .m-workhero__inner > * {
  margin-block-start: 0;
}

/* ==========================================================
   ② 基底(PC)— 旧 _27-work-single。Figma カテゴリ_詳細 1440x6211
   ========================================================== */
.m-workhero {
  background: var(--m-cat);
  padding-block: 40px;
}

:is(.muran-theme, .editor-styles-wrapper) .m-workhero__inner {
  display: flex;
  align-items: center;
  gap: 40px;
  max-width: var(--wp--style--global--content-size);
  margin-inline: auto;
}

.m-workhero__text {
  flex: 1 1 628px;
  min-width: 0;
}

:is(.muran-theme, .editor-styles-wrapper) .m-workhero__tags {
  gap: 8px;
  margin: 0;
}

/* 🔴 ここには **ステータスのチップ**(黄地の「投票受付中」= `.m-workhero__status`)も
   相乗りしていたが、**2026-08-21 の先方指定①でタグ状意匠ごと撤去**した
   (→ `src/templates/single-muran_work.php`)。残るのはカテゴリーの1枚だけ。 */
:is(.muran-theme, .editor-styles-wrapper) .m-workhero__cat {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  margin: 0;
  padding: 8px 10px;
  min-height: 33px;
  font-size: var(--wp--custom--font-size--15);
  font-weight: 700;
  line-height: 15px;
  letter-spacing: 0.05em;
  border: 1px solid #ffffff;
  color: #ffffff;
}

.m-workhero__cat a {
  color: #ffffff;
  text-decoration: none;
}

:is(.muran-theme, .editor-styles-wrapper) .m-workhero__title {
  margin: 16px 0 0;
  font-size: var(--wp--custom--font-size--32);
  font-weight: 700;
  line-height: 48px;
  letter-spacing: 0.05em;
  color: #ffffff;
}

:is(.muran-theme, .editor-styles-wrapper) .m-workhero__author {
  margin: 16px 0 0;
}

:is(.muran-theme, .editor-styles-wrapper) .m-workhero__role {
  margin: 0;
  padding-left: 12px;
  border-left: 2px solid rgba(255, 255, 255, 0.23);
  font-size: var(--wp--preset--font-size--medium);
  font-weight: 600;
  line-height: 29px;
  letter-spacing: 0.05em;
  color: #ffffff;
}

:is(.muran-theme, .editor-styles-wrapper) .m-workhero__name {
  margin: 0;
  font-size: var(--wp--preset--font-size--medium);
  line-height: 29px;
  letter-spacing: 0.05em;
  color: #ffffff;
}

:is(.muran-theme, .editor-styles-wrapper) .m-workhero__summary {
  /* Block Bindings(core/post-meta)はHTMLを通さないので、メタの改行は
     `<br>` ではなく white-space で出す(原稿は2行組み) */
  white-space: pre-line;
  margin: 16px 0 0;
  font-size: var(--wp--preset--font-size--small);
  line-height: 25px;
  letter-spacing: 0.05em;
  color: #ffffff;
}

:is(.muran-theme, .editor-styles-wrapper) .m-workhero__thumb {
  flex: 0 0 452px;
  margin: 0;
  width: 452px;
  height: 301px;
}

.m-workhero__thumb img {
  display: block;
  width: 452px;
  height: 301px;
  object-fit: cover;
  border: 1px solid var(--m-line);
  background: #ffffff;
}

/* 文字の入った画像は枠に収める(`is-fit-contain`。理由は _contentcard.scss と同じ)。
   余りは img 自身の地色(白)。中間幅で `height: auto` になる帯では元から切れない。 */
.m-workhero__thumb.is-fit-contain img {
  object-fit: contain;
}

/* ==========================================================
   ③ 中間幅(≤1199)— 旧 _29-category-mid。写真を折り返して全幅にする
   ========================================================== */
@media (max-width: 781px) {
  :is(.muran-theme, .editor-styles-wrapper) .m-workhero__inner {
    flex-wrap: wrap;
  }
  :is(.muran-theme, .editor-styles-wrapper) .m-workhero__thumb,
  .m-workhero__thumb img {
    flex-basis: auto;
    width: 100%;
    height: auto;
  }
}
/* ==========================================================
   ④ SP(≤781)— 旧 _30-category-sp
   ========================================================== */
@media (max-width: 781px) {
  .m-workhero {
    padding: 40px 20px;
  }
  :is(.muran-theme, .editor-styles-wrapper) .m-workhero__inner {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 20px;
  }
  :is(.muran-theme, .editor-styles-wrapper) .m-workhero__text {
    display: contents;
  }
  :is(.muran-theme, .editor-styles-wrapper) .m-workhero__tags {
    order: 1;
  }
  :is(.muran-theme, .editor-styles-wrapper) .m-workhero__title {
    order: 2;
    margin: -8px 0 0;
    font-size: var(--wp--preset--font-size--xx-large);
    line-height: 36px;
    letter-spacing: 0;
  }
  :is(.muran-theme, .editor-styles-wrapper) .m-workhero__thumb {
    order: 3;
    width: 100%;
    height: 233px;
  }
  .m-workhero__thumb img {
    width: 100%;
    height: 233px;
  }
  :is(.muran-theme, .editor-styles-wrapper) .m-workhero__author {
    order: 4;
    margin: 0;
  }
  :is(.muran-theme, .editor-styles-wrapper) .m-workhero__summary {
    order: 5;
    margin: -4px 0 0;
    font-size: var(--wp--custom--font-size--13);
    line-height: 23px;
    letter-spacing: 0.05em;
  }
  :is(.muran-theme, .editor-styles-wrapper) .m-workhero__cat {
    padding: 6px 8px;
    min-height: 25px;
    font-size: var(--wp--preset--font-size--xx-small);
    line-height: 11px;
    letter-spacing: 0.05em;
  }
  :is(.muran-theme, .editor-styles-wrapper) .m-workhero__role,
  :is(.muran-theme, .editor-styles-wrapper) .m-workhero__name {
    font-size: var(--wp--custom--font-size--15);
    line-height: 27px;
    letter-spacing: 0.05em;
  }
}
/* ==========================================================
   ① コアの flow レイアウトを切る — 旧 _26-category
   ========================================================== */
:is(.m-cat-index, .m-work) .m-relgrid > * {
  margin-block-start: 0;
}

/* ==========================================================
   ② 基底(PC)— 旧 _27-work-single
   ========================================================== */
:is(.muran-theme, .editor-styles-wrapper) .m-relgrid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin: 40px 0 0;
  padding: 0;
  list-style: none;
}

/* ==========================================================
   ③ 中間幅(≤1199)— 旧 _29-category-mid
   ========================================================== */
@media (max-width: 781px) {
  :is(.muran-theme, .editor-styles-wrapper) .m-relgrid {
    grid-template-columns: repeat(2, 1fr);
  }
}
/* ==========================================================
   ④ SP(≤781)— 旧 _30-category-sp
   ========================================================== */
@media (max-width: 781px) {
  :is(.muran-theme, .editor-styles-wrapper) .m-relgrid {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin-top: 24px;
  }
}
/* ==========================================================
   ① 基底(PC)— 旧 _27-work-single。写真 480 + gap24 + 文章
   ========================================================== */
:is(.muran-theme, .editor-styles-wrapper) .m-workbody .m-workmt {
  margin: 48px 0;
}

:is(.muran-theme, .editor-styles-wrapper) .m-workbody .m-workmt {
  grid-template-columns: 480px 1fr;
  gap: 24px;
  /* 原稿はテキスト側が上揃え(コアの既定は中央揃え) */
  align-items: start;
}

.m-workbody .m-workmt .wp-block-media-text__media img {
  width: 100%;
  height: 320px;
  object-fit: cover;
}

.m-workbody .m-workmt .wp-block-media-text__content {
  padding: 24px 0;
}

/* ==========================================================
   ② 中間幅(≤1199)— 旧 _29-category-mid
   ========================================================== */
@media (max-width: 781px) {
  :is(.muran-theme, .editor-styles-wrapper) .m-workbody .m-workmt {
    grid-template-columns: 1fr 1fr;
  }
}
/* ==========================================================
   ③ SP(≤781)— 旧 _30-category-sp。1列に折る
   ========================================================== */
@media (max-width: 781px) {
  :is(.muran-theme, .editor-styles-wrapper) .m-workbody .m-workmt {
    grid-template-columns: 1fr;
  }
  .m-workbody .m-workmt .wp-block-media-text__media img {
    height: 233px;
  }
}
:is(.m-cat-index, .m-work) .m-workbody {
  margin-block-start: 0;
}

.m-workbody {
  padding-top: 56px;
}

:is(.muran-theme, .editor-styles-wrapper) .m-workbody :where(p) {
  font-size: var(--wp--preset--font-size--small);
  line-height: 25px;
  letter-spacing: 0.05em;
}

/* 大見出し: 1px枠 + カテゴリ色(Figma: pad 20,16 / 28px/50 / 600) */
:is(.muran-theme, .editor-styles-wrapper) .m-workbody .is-style-work-h2 {
  margin: 48px 0 24px;
  padding: 20px 16px;
  /* 原稿の箱は 960x62(= pad20 + 行22 + pad20)で、1px の線は場所を取らない */
  box-shadow: inset 0 0 0 1px var(--m-cat);
  font-size: var(--wp--preset--font-size--huge);
  font-weight: 600;
  line-height: 22px;
  letter-spacing: 0.05em;
  color: var(--m-cat);
}

/* 本文の先頭ブロックには上の余白を付けない(セクションの 56px と二重になる) */
.m-workbody .entry-content > :first-child {
  margin-top: 0;
}

/* 中見出し: 左2px縦棒(Figma: gap16 / 20px/36 / 600)。
   `.m-workmt`(写真+文章)の中でも同じ見出しを使うので、主語は同じ = ここが持ち場。 */
:is(.muran-theme, .editor-styles-wrapper) .m-workbody .is-style-work-h3,
:is(.muran-theme, .editor-styles-wrapper) .m-workmt .is-style-work-h3 {
  display: flex;
  align-items: center;
  min-height: 38px; /* 原稿の縦棒は 38px */
  margin: 48px 0 24px;
  padding-left: 16px;
  border-left: 2px solid var(--m-cat);
  font-size: var(--wp--preset--font-size--x-large);
  font-weight: 600;
  line-height: 36px;
  letter-spacing: 0.05em;
  color: var(--wp--preset--color--ink);
}

/* 小見出し: 下2px罫線。先頭40pxだけカテゴリ色(Figma: Line 85 / Line 86) */
:is(.muran-theme, .editor-styles-wrapper) .m-workbody .is-style-work-h4 {
  position: relative;
  margin: 48px 0 24px;
  /* 原稿は「文字のインク下端から 20px 下」に罫線。32px の行ボックスだと
     インク下端が 23 付近なので 11px 足すと原稿と同じ位置に来る */
  padding-bottom: 11px;
  border-bottom: 2px solid var(--m-line);
  font-size: var(--wp--preset--font-size--large);
  font-weight: 600;
  line-height: 32px;
  letter-spacing: 0.05em;
  color: var(--wp--preset--color--ink);
}

.m-workbody .is-style-work-h4::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: var(--m-h2-accent-w);
  height: 2px;
  background: var(--m-cat);
}

:is(.muran-theme, .editor-styles-wrapper) .m-workbody .m-workimg,
:is(.muran-theme, .editor-styles-wrapper) .m-workbody .m-workvideo {
  margin: 48px 0;
}

.m-workbody .m-workimg img {
  width: 100%;
  height: auto;
}

:is(.muran-theme, .editor-styles-wrapper) .m-workbody .m-workvote {
  margin: 48px 0;
}

/* スペック表(Figma: 見出し列240px カテゴリ色 / 値 #E6F6FF / 隙間2px) */
:is(.muran-theme, .editor-styles-wrapper) .m-workbody .is-style-work-spec {
  margin: 48px 0;
}

.m-workbody .is-style-work-spec table {
  border-collapse: separate;
  border-spacing: 2px;
  margin: -2px;
  width: calc(100% + 4px);
  table-layout: fixed;
}

.m-workbody .is-style-work-spec :is(th, td) {
  border: 0;
  /* 原稿の行高は 53(= トリム箱13 + 上下20)。行ボックス29 で組むので上下は 12 */
  padding: 12px 20px;
  font-size: var(--wp--preset--font-size--medium);
  line-height: 29px;
  letter-spacing: 0.05em;
}

.m-workbody .is-style-work-spec th {
  width: 240px;
  min-width: 240px;
  max-width: 240px;
  background: var(--m-cat);
  font-weight: 600;
  color: #ffffff;
  text-align: center;
}

.m-workbody .is-style-work-spec td {
  background: #e6f6ff;
  color: var(--wp--preset--color--ink);
}

/* ---------- SP(≤781。原稿 02_SPデザイン 390基準) ---------- */
@media (max-width: 781px) {
  .m-workbody {
    padding-inline: 20px;
  }
  :is(.muran-theme, .editor-styles-wrapper) .m-workbody .is-style-work-h2 {
    margin: 32px 0 16px;
    padding: 12px;
    font-size: var(--wp--preset--font-size--x-large);
    line-height: 24px;
    letter-spacing: 0.05em;
  }
  :is(.muran-theme, .editor-styles-wrapper) .m-workbody .is-style-work-h3 {
    margin: 32px 0 16px;
    font-size: var(--wp--preset--font-size--large);
    /* ⚠ **この幅では字間が字送りの 5% にならない**。
       原稿は幅ごとに font-size を変えたのに、**字間は PC の px を据え置いて**いた
       (SP 側で letter-spacing を書き直していない)。track() にすると見た目が変わるので、
       **いまの描画を保つために px を明示**する。原稿がこの字間を意図したのかは未確認。
       → __doc__/rebuild-plan.md 4.8 */
    letter-spacing: 1px;
    line-height: 28px;
  }
  :is(.muran-theme, .editor-styles-wrapper) .m-workbody .is-style-work-h4 {
    margin: 32px 0 16px;
    font-size: var(--wp--preset--font-size--medium);
    /* ⚠ **この幅では字間が字送りの 5% にならない**(上と同じ) */
    letter-spacing: 0.9px;
    line-height: 26px;
  }
  .m-workbody .is-style-work-spec table {
    table-layout: auto;
  }
  .m-workbody .is-style-work-spec :is(th, td) {
    display: block;
    width: auto;
    padding: 12px;
    font-size: var(--wp--preset--font-size--small);
    /* ⚠ **この幅では字間が字送りの 5% にならない**(上と同じ) */
    letter-spacing: 0.8px;
    line-height: 24px;
  }
}
:is(.m-cat-index, .m-work) .m-relworks {
  margin-block-start: 0;
}

.m-work .m-relworks {
  margin-top: 104px;
  padding-block: 104px 0;
  border-top: 1px solid var(--m-line);
}

/* ---------- SP(≤781) ---------- */
@media (max-width: 781px) {
  .m-work .m-relworks {
    margin-top: 56px;
    padding: 56px 20px 0;
  }
}
.m-relcard {
  position: relative; /* 面リンクのオーバーレイの包含ブロック */
  box-sizing: border-box;
  padding: 16px;
  box-shadow: inset 0 0 0 1px var(--m-line);
  border-radius: var(--m-card-radius);
  background: #ffffff;
}

:is(.muran-theme, .editor-styles-wrapper) .m-relcard__thumb {
  box-sizing: border-box;
  margin: 0;
  height: 153px;
  box-shadow: inset 0 0 0 1px var(--m-line);
}

.m-relcard__thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 文字の入った画像は枠に収める(`is-fit-contain`。理由は _contentcard.scss と同じ)。
   この枠は地色を持たないので、余りを白で埋める。 */
.m-relcard__thumb.is-fit-contain img {
  object-fit: contain;
  background: #ffffff;
}

:is(.muran-theme, .editor-styles-wrapper) .m-relcard__no {
  margin: 16px 0 0;
  font-size: var(--wp--preset--font-size--small);
  line-height: 25px;
  letter-spacing: 0.05em;
}

:is(.muran-theme, .editor-styles-wrapper) .m-relcard__title {
  margin: 0;
  font-size: var(--wp--custom--font-size--15);
  font-weight: 700;
  line-height: 27px;
  letter-spacing: 0.05em;
}

.m-relcard__title a {
  text-decoration: none;
}

/* ---------- 面で押せるようにする(旧 43。2026-08-01 ユーザ指摘)----------
   サムネと見出しが別々にリンクになっていて**間に押せない帯**が残るので、
   見出しの面リンクで埋める(行き先は1種類なので重ならない)。
   包含ブロックは上の `.m-relcard { position: relative }`。 */
.m-relcard__title a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
}

/* ---------- SP(≤781) ---------- */
@media (max-width: 781px) {
  :is(.muran-theme, .editor-styles-wrapper) .m-relcard__thumb {
    height: 104px;
  }
}
:is(.m-cat-index, .m-work) .m-goaround {
  margin-block-start: 0;
}

.m-catsec + .m-goaround {
  margin-top: var(--m-catsec-gap);
}

:is(.m-cat-index, .m-work) .m-goaround {
  margin-top: 104px;
  padding-block: 104px;
  border-top: 1px solid #e8e8e8;
  background: var(--wp--preset--color--gray-bg); /* 原稿 #F7F7F7 */
}

.m-goaround__head2 {
  margin-top: 64px;
}

:is(.muran-theme, .editor-styles-wrapper) .m-goaround__back {
  margin-top: 64px;
  padding-top: 64px;
  border-top: 1px solid #ededed;
}

/* ---------- SP(≤781) ---------- */
@media (max-width: 781px) {
  :is(.m-cat-index, .m-work) .m-goaround {
    margin-top: 56px;
    padding: 56px 20px;
  }
  .m-goaround__head2 {
    margin-top: 48px;
  }
  :is(.muran-theme, .editor-styles-wrapper) .m-goaround__back {
    margin-top: 48px;
    padding-top: 48px;
  }
}
/* ==========================================================
   ① コアの flow レイアウトを切る — 旧 _26-category
   ========================================================== */
:is(.m-cat-index, .m-work) .m-gocards > * {
  margin-block-start: 0;
}

/* ==========================================================
   ② 基底(PC)— 旧 _28-explore。Figma「回遊ボタン」265x228 / r16 / 2px #EBF4FF
   ========================================================== */
/* イベントカード(Figma: 265x228 / r16 / 2px #EBF4FF / pad 32,16,24) */
:is(.muran-theme, .editor-styles-wrapper) .m-gocards {
  margin-top: 40px;
  gap: 20px;
  flex-wrap: nowrap;
}

.m-gocard {
  position: relative;
  flex: 0 0 265px;
  width: 265px;
  min-height: 202px; /* 原稿228 − 特性タグ26。下の空き(24px)は原稿のまま */
  padding: 32px 16px 24px;
  border-radius: 16px;
  background: #ffffff;
  box-shadow: inset 0 0 0 2px #ebf4ff;
  text-align: center;
}

/* ⚠ ここに原稿では**特性タグ**が2つ(「予約不要」「当日自由参加」等・26px の枠付きチップ)
   並んでいたが、**2026-08-07 に先方判断でタグ状意匠ごと廃止**(→ `inc/data/contents.php`)。
   カードは `min-height` で高さが決まるので、そちらを 228 → 202 に詰めてある。 */
:is(.muran-theme, .editor-styles-wrapper) .m-gocard__title {
  margin: 16px 0 0;
  font-size: var(--wp--preset--font-size--x-large);
  font-weight: 700;
  line-height: 30px;
  letter-spacing: 0;
  color: var(--wp--preset--color--ink);
}

.m-gocard__title a {
  text-decoration: none;
}

:is(.muran-theme, .editor-styles-wrapper) .m-gocard__desc {
  margin: 16px 0 0;
  font-size: var(--wp--custom--font-size--13);
  line-height: 20px;
  letter-spacing: 0.05em;
  color: var(--wp--preset--color--ink);
}

/* 丸矢印は原稿で 90度回っている(= 右向き)。`relativeTransform` [[0,1],[-1,0]] 実測 */
.m-gocard::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -14px;
  width: 28px;
  height: 28px;
  margin-left: -14px;
  border: 1px solid var(--wp--preset--color--ink);
  border-radius: 50%;
  background: #ffffff url(../img/fg-chev-dark.svg) center/10px 6px no-repeat;
  transform: rotate(-90deg);
  transition: background-position var(--m-nudge-ease);
}

/* ホバー中は矢印が向いている方(**画面上は右**)へ寄る。
   ⚠ ここだけ「下へ動かすと右へ動く」。丸ごと `rotate(-90deg)` してあるので
     背景の座標系も一緒に回っており、局所座標の +Y が画面の +X になる
     (rotate(-90°): (x,y) → (y,-x) なので (0,+3) → (+3,0) = 右)。
     画面基準で右へ動かそうとして `calc(50% + …) center` と書くと**上へ動く**。
   ⚠ 山形は丸の背景なので `background-position`(丸と枠線は動かさない)。 */
@media (hover: hover) {
  .m-gocard:hover::after {
    background-position: center calc(50% + var(--m-nudge-sm));
  }
}
/* ==========================================================
   ③ 中間幅(≤1219)— 旧 _29-category-mid
   ========================================================== */
@media (max-width: 781px) {
  :is(.muran-theme, .editor-styles-wrapper) .m-gocards {
    flex-wrap: wrap;
    justify-content: center;
  }
}
/* ==========================================================
   ④ SP(≤781)— 旧 _30-category-sp
   ========================================================== */
@media (max-width: 781px) {
  :is(.muran-theme, .editor-styles-wrapper) .m-gocards {
    flex-direction: column;
    align-items: stretch;
    gap: 32px;
    margin-top: 24px;
  }
  .m-gocard {
    flex-basis: auto;
    width: 100%;
  }
}
/* ==========================================================
   ⑤ 面リンク — 旧 _43-clickable-cards
   このカードは **下に 14px はみ出す ○> アイコン**も押せるようにする
   (原稿では ○> がカードの下端にぶら下がる。ユーザ指定)。
   SP では ○> が出ない(はみ出し量が違う)ので素直に面だけ。
   実測 = `node site/setup/verify/clickable.js`
   ========================================================== */
.m-gocard__title a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
}

.m-gocard__title a::after {
  inset: 0 0 -14px;
}

@media (max-width: 781px) {
  .m-gocard__title a::after {
    inset: 0;
  }
}
/* ---------- ホバーの走査(青・赤の平行四辺形が左→右に抜ける)----------
   仕組みと寸法の根拠は `_01-tokens.scss` の `--m-sweep-*`。
   **大きなカード型のボタンにも同じ効果を入れる**(2026-08-05 ユーザ指定)。
   矢印の寄りとは別軸なので、ホバー中は両方が同時に走る。
   静止時は版面の外にあるので**見た目は1px も変わらない**(基準線は不変)。
   ⚠ この宣言は**地色を決める規則より後**に置く。`background:` の一括指定は
     `background-image` を `none` に戻すので、前に置くと黙って消える。 */
.m-gocard {
  background-image: var(--m-sweep-img);
  background-repeat: no-repeat;
  background-size: var(--m-sweep-w) 100%;
  background-position: var(--m-sweep-from) 0;
  /* 見かけの速さ: 実測幅 265px → 0.99s(式は `_01-tokens`)*/
  --m-sweep-dur: 0.99s;
}

@media (hover: hover) {
  .m-gocard:hover {
    background-position: var(--m-sweep-to) 0;
    transition: background-position var(--m-sweep-dur) ease-out;
  }
}
/* ---------- 背景の装飾(グラデの帯・装飾ライン・散らした写真6枚・青い丸) ----------
   全部「版面の外に散る装飾」なので **文書構造に入れず CSS の背景**にする
   (カテゴリMVのあしらいと同じ考え方)。座標は原稿のフレーム内座標から
   `.m-page` の上端(= ヘッダー96px)を引いた値。1440 を中央に係留するので、
   広い幅でも原稿の関係が崩れない。 */
.m-page:has(.m-abt) {
  position: relative;
  isolation: isolate;
}

/* Background: -2,1307 1440x1619 / #0093C0→#FF4469 を10%。原稿は layer blur が
   掛かっていて上下の境目が見えないので、マスクで両端を溶かす */
.m-page:has(.m-abt)::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 1211px; /* 1307 - 96 */
  height: 1619px;
  background: linear-gradient(to right, #0093c0, #ff4469);
  opacity: 0.1;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 12%, #000 88%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 12%, #000 88%, transparent 100%);
  pointer-events: none;
  z-index: -2;
}

/* `core/post-content` は本文を1枚のラッパで包むので、セクションは `.m-page` の
   **孫**になる。`.m-page > *` ではラッパにしか当たらず、既定の blockGap 24px が
   各セクションに乗ったままになる(カテゴリ index が子孫セレクタで書いているのと同じ理由)。 */
.m-page .m-abt {
  margin-block: 0;
}

/* ---------- 共通(セクションの版面と見出し) ---------- */
.m-abt {
  position: relative;
  z-index: 0;
}

/* Main Content は col gap104。最初のセクションだけパンくず(360)から 120 空く */
.m-abt--hero {
  padding-top: 120px;
}

.m-abt--program,
.m-abt--history {
  padding-top: 104px;
}

/* 原稿の Program Cards 枠は 383 だが、中身(Card Inner)は 356。
   カードに空白27pxを持たせるのではなく、セクションの下端で吸収して
   次のセクションとの間隔(Main Content の col gap104)を原稿どおりにする。 */
.m-abt--program {
  padding-bottom: 27px;
}

/* 英字小見出し(グラデ)+ 見出し。TOP の `.m-catsec__en` と同じ組み */
:is(.muran-theme, .editor-styles-wrapper) .m-abt__en {
  margin: 0;
  font-family: var(--wp--preset--font-family--display);
  font-size: 20px;
  font-weight: 700;
  line-height: 32px;
  background-image: var(--m-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  width: fit-content;
}

:is(.muran-theme, .editor-styles-wrapper) .m-abt__stitle {
  margin: 6px 0 0; /* 英字 1190(h32) → 見出し 1228 */
  font-size: 32px;
  font-weight: 700;
  line-height: 32px;
  letter-spacing: 0.05em;
  color: var(--wp--preset--color--ink);
}

:is(.muran-theme, .editor-styles-wrapper) .m-abt__slead {
  margin: 25px 0 0; /* 見出し 1228(h32) → リード 1285 */
  font-size: 16px;
  line-height: 29px;
  letter-spacing: 0.05em;
  color: var(--wp--preset--color--ink);
}

/* ---------- ヒーロー ---------- */
:is(.muran-theme, .editor-styles-wrapper) .m-abt__subtitle {
  margin: 0;
  font-size: 28px;
  font-weight: 700;
  line-height: 42px;
  letter-spacing: 0.05em;
  text-align: center;
  background-image: var(--m-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

:is(.muran-theme, .editor-styles-wrapper) .m-abt__title {
  margin: 8px 0 0; /* 480+42=522 → 530 */
  font-size: 42px;
  font-weight: 700;
  line-height: 63px;
  letter-spacing: 0.05em;
  text-align: center;
  background-image: var(--m-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

:is(.muran-theme, .editor-styles-wrapper) .m-abt__lead {
  margin: 32px 0 0; /* Hero Content の col gap32 */
  font-size: 16px;
  line-height: 29px;
  letter-spacing: 0.05em;
  text-align: center;
  color: var(--wp--preset--color--ink);
}

/* 英語(2026-10-01): 日本語は <br> で最長 850px に組んであり、左右の散らし写真
   (版面の中心から左 −479 / 右 +474 より外 = `_abtdeco.scss`)に届かない。英語は1行が長く、
   @1440 で x=173〜1265 まで広がって**両側の写真に重なった**。日本語の最長行と同じ幅に収める。
   英語では散らし写真のレイヤーごと出ていなかった(`inc/filters.php`)ので、それまで見えなかった。 */
:lang(en) :is(.muran-theme, .editor-styles-wrapper) .m-abt__lead {
  max-width: 850px;
  margin-inline: auto;
}

/* CTA 2本(258x56 / 白地 / 1px #333 / r120 / 右端に丸矢印25) */
:is(.muran-theme, .editor-styles-wrapper) .m-abt__cta {
  margin-top: 32px;
  gap: 8px;
}

:is(.muran-theme, .editor-styles-wrapper) .m-abtbtn .wp-block-button__link {
  position: relative;
  display: grid;
  place-items: center;
  width: 258px;
  height: 56px;
  padding: 0;
  border-radius: 120px;
  background: #ffffff;
  box-shadow: inset 0 0 0 1px var(--wp--preset--color--ink);
  color: var(--wp--preset--color--ink);
  font-size: 15px;
  font-weight: 600;
  line-height: 20px;
  letter-spacing: 0.05em;
}

/* 英語(2026-09-14): 中央寄せの文字が長いと右端の丸矢印(25px)の下に潜る(「MURAN Through the Years」で実測)。
   英語のときは右に矢印ぶんの余白を取り、幅は中身なり(最小は原稿の 258)。 */
:lang(en) :is(.muran-theme, .editor-styles-wrapper) .m-abtbtn .wp-block-button__link {
  width: auto;
  min-width: 258px;
  padding: 0 52px 0 28px;
}

/* 丸矢印 25x25(原稿: 右端から 258-(674-457)-25 = 16px)。
   原稿は「白い丸 + #333 の山形(8x4・下向き)」= ページ内の下のセクションへ送る印。
   白いSVGを反転すると丸まで黒くなるので、**山形はマスクで塗る**(規律: 線画は用途サイズで) */
.m-abtbtn .wp-block-button__link::after {
  content: "";
  position: absolute;
  right: 16px;
  top: 50%;
  width: 25px;
  height: 25px;
  margin-top: -12.5px;
  border-radius: 50%;
  background: #ffffff;
}

.m-abtbtn .wp-block-button__link::before {
  content: "";
  position: absolute;
  right: 24.5px;
  top: 50%;
  width: 8px;
  height: 4px;
  margin-top: -2px;
  background: var(--wp--preset--color--ink);
  -webkit-mask: url(../img/fg-cat-chev-white.svg) center/8px 4px no-repeat;
  mask: url(../img/fg-cat-chev-white.svg) center/8px 4px no-repeat;
  z-index: 1;
  transition: transform var(--m-nudge-ease);
}

/* ホバー中は山形が下へ寄る。**8x4 の極小**なので寄り幅も小さい `--m-nudge-xs`
   (`--m-nudge-sm` だと 25px の白丸からはみ出して見える)。 */
@media (hover: hover) {
  .m-abtbtn .wp-block-button__link:hover::before {
    transform: translateY(var(--m-nudge-xs));
  }
}
/* ---------- キャラクターバナー(上下に罫線・中央に赤バナー380x74) ---------- */
.m-abt__chara {
  margin-top: 48px; /* Hero Content 下端916 → Divider Top 964 */
  width: 650px;
  margin-inline: auto;
  /* 原稿の罫線(LINE)は高さ0。border で描くぶん padding から 1px ずつ引いて
     ブロック全体を 122px に合わせる(24+74+24 = 122) */
  padding-block: 23px;
  border-top: 1px solid var(--m-line-strong);
  border-bottom: 1px solid var(--m-line-strong);
}

:is(.muran-theme, .editor-styles-wrapper) .m-abt__chara-link {
  position: relative;
  margin: 0 auto;
  width: 380px;
  height: 74px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: #e6002d;
  font-size: 18px;
  font-weight: 700;
  line-height: 18px;
  letter-spacing: 0.05em;
  text-align: center;
}

/* ⚠ **赤い矩形の全面が押せること**(2026-08-02 ユーザ指摘)。
   もとは `<a>` が文字幅ぶん(312x18)しか無く、**バナー 380x74 の 20% しか押せなかった**。
   ボタンに見えるものは面で押せないといけない(規律47)。

   `<a>` をバナーいっぱいに広げるが、**文字の位置は1pxも動かさない**:
   `padding-right: 28px` を残したまま `place-items: center` で中央に置くと、
   文字は内容ボックス(380 − 28 = 352)の中央 = バナー左から 33.9px に来る。
   これは `<a>` が縮んで中央に置かれていた従来と**同じ値**(実測で確認済み)。 */
.m-abt__chara-link a {
  position: relative;
  display: grid;
  place-items: center;
  /* ⚠ `box-sizing` を明示する。既定の `content-box` のままだと
     `width:100%` に `padding-right:28px` が**足されて** 408px になり、
     バナー(380)から左右に 14px ずつはみ出す(実測 -14..394)。
     はみ出した分は隣の余白を覆うので、**押せる面積が 107% と過剰**になる。 */
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  padding-right: 28px;
  color: #ffffff;
  text-decoration: none;
}

/* 赤バナーの左右に立つキャラクター 71x66(原稿 477,996 / 890,996。バナーは 529..909)。
   **中身は「Coming Soon」のプレースホルダ**(原稿の imageRef が coming-soon-material)。
   正規の原画が来たらこの2枚を差し替える。 */
.m-abt__chara-link::before,
.m-abt__chara-link::after {
  content: "";
  position: absolute;
  top: 8px; /* バナー 988 → キャラ 996 */
  width: 71px;
  height: 66px;
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  pointer-events: none;
}

.m-abt__chara-link::before {
  left: -52px; /* 529 - 477 */
  background-image: url(../img/fg-abt-chara-l.png);
}

.m-abt__chara-link::after {
  right: -71px; /* 909 → 890..961 */
  background-image: url(../img/fg-abt-chara-r.png);
}

/* 右の外部リンク風アイコン 12x12(原稿 866,1019 / バナー 529..909 = **右端から31px**)。
   ⚠ `<a>` を全面に広げたので `right: 0` はバナーの右端になってしまう。
   従来の描画位置(右端から 33.9px)を保つ **固定値**にする。
   33.9 は「`<a>` が文字幅ぶんで中央に置かれていた」結果の従属値で、
   **文字を編集すると動いていた**。固定にしたので今後は動かない。
   原稿の 31px との差 2.9px は従来のまま(ここで直すと版面が動くので据え置き)。 */
.m-abt__chara-link a::after {
  content: "";
  position: absolute;
  right: 34px;
  top: 50%;
  width: 12px;
  height: 12px;
  margin-top: -6px;
  border: 2px solid #ffffff;
  border-left-width: 0;
  border-bottom-width: 0;
  transform: rotate(45deg);
}

/* ---------- 夢卵のあゆみ(タイムライン。カルーセルは TOP10 と同じ部品) ---------- */
/* 原稿は見出し(1832..1895)の下端にナビ(1855..1895)が揃う。ただし原稿のテキスト箱は
   グリフのバウンディングボックス(14/25)で、実装は行送りの箱(32/32)なので下端が7px違う。
   下揃えに頼らず、**ナビの上端を実測値で置く**(1855 = 見出し上端 +23)。 */
:is(.muran-theme, .editor-styles-wrapper) .m-abt__hhead {
  align-items: flex-start;
}

/* ---------- 足元の導線カード(地色 #F7F7F7 の帯) ---------- */
/* `.m-page :is(…)` の margin-block:0 と同じ詳細度(0,2,0)なので、
   `.m-page` を付けて後勝ちさせる(規律34 と同じ型) */
.m-page .m-abt--links {
  margin-top: 104px;
}

.m-abt--links {
  padding-block: 80px;
  background: #f7f7f7;
}

/* ---------- SP(≤781。Figma `33:2084` 390x5300 実測) ---------- */
@media (max-width: 781px) {
  .m-abt--hero {
    padding-top: 203px;
  } /* パンくず下端336 → 見出し539 */
  /* 原稿は バナー下端1305 → 写真ストリップ1345 → Program 1547(ストリップの下半分に見出しが重なる)。
     ストリップは装飾レイヤーなので、その分の高さをこのセクションの padding で空ける。 */
  .m-abt--program {
    padding-top: 240px;
    padding-bottom: 0;
  }
  .m-abt--history {
    padding-top: 3px;
  } /* 原稿 History 3605(SP原稿の y から 91 引いた値で突合) */
  /* ヒーロー */
  :is(.muran-theme, .editor-styles-wrapper) .m-abt__subtitle {
    font-size: 16px;
    line-height: 25px;
    letter-spacing: 0.05em;
  }
  :is(.muran-theme, .editor-styles-wrapper) .m-abt__title {
    margin-top: 0;
    font-size: 28px;
    line-height: 42px;
    letter-spacing: 0.05em;
  }
  :is(.muran-theme, .editor-styles-wrapper) .m-abt__lead {
    margin-top: 36px; /* 見出し下端648 → 本文684 */
    font-size: 14px;
    line-height: 25px;
    letter-spacing: 0.05em;
    text-align: left;
  }
  /* CTA は縦2本(350x48 / gap8) */
  :is(.muran-theme, .editor-styles-wrapper) .m-abt__cta {
    margin-top: 40px;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
  :is(.muran-theme, .editor-styles-wrapper) .m-abtbtn .wp-block-button__link {
    width: 100%;
    height: 48px;
    font-size: 14px;
    letter-spacing: 0.05em;
  }
  /* キャラバナーは幅いっぱい。キャラは原稿SPでは出ない */
  .m-abt__chara {
    margin-top: 40px;
    width: 100%;
    padding-block: 24px;
  }
  :is(.muran-theme, .editor-styles-wrapper) .m-abt__chara-link {
    width: 100%;
    height: 64px;
    font-size: 15px;
    /* ⚠ **この幅では字間が字送りの 5% にならない**。
       原稿は幅ごとに font-size を変えたのに、**字間は PC の px を据え置いて**いた
       (SP 側で letter-spacing を書き直していない)。track() にすると見た目が変わるので、
       **いまの描画を保つために px を明示**する。原稿がこの字間を意図したのかは未確認。
       → __doc__/rebuild-plan.md 4.8 */
    letter-spacing: 0.9px;
    line-height: 22px;
  }
  .m-abt__chara-link::before,
  .m-abt__chara-link::after {
    display: none;
  }
  /* セクション見出し */
  :is(.muran-theme, .editor-styles-wrapper) .m-abt__stitle {
    font-size: 24px;
    line-height: 36px;
    letter-spacing: 0.05em;
  }
  :is(.muran-theme, .editor-styles-wrapper) .m-abt__slead {
    margin-top: 20px;
    font-size: 14px;
    line-height: 25px;
    letter-spacing: 0.05em;
  }
  /* あゆみ: 見出しとナビは縦、年表は横スクロール */
  :is(.muran-theme, .editor-styles-wrapper) .m-abt__hhead {
    flex-direction: column;
    align-items: stretch;
    gap: 24px;
  }
  /* 足元の導線カードは縦積み(350x109 / gap8)。帯の pad は64 */
  .m-page .m-abt--links {
    margin-top: 15px;
  } /* 原稿 関連ページ帯 4124 */
  .m-abt--links {
    padding-block: 64px;
  }
}
/* ---------- ホバーの走査(青・赤の平行四辺形が左→右に抜ける)----------
   仕組みと寸法の根拠は `_01-tokens.scss` の `--m-sweep-*`。
   静止時は版面の外にあるので**見た目は1px も変わらない**(基準線は不変)。
   ⚠ この宣言は**地色を決める規則より後**に置く。`background:` の一括指定は
     `background-image` を `none` に戻すので、前に置くと黙って消える。 */
:is(.muran-theme, .editor-styles-wrapper) .m-abtbtn .wp-block-button__link {
  background-image: var(--m-sweep-img);
  background-repeat: no-repeat;
  background-size: var(--m-sweep-w) 100%;
  background-position: var(--m-sweep-from) 0;
  /* 見かけの速さ: 実測幅 258px → 0.98s(式は `_01-tokens`)*/
  --m-sweep-dur: 0.98s;
}

@media (hover: hover) {
  :is(.muran-theme, .editor-styles-wrapper) .m-abtbtn .wp-block-button__link:hover {
    background-position: var(--m-sweep-to) 0;
    transition: background-position var(--m-sweep-dur) ease-out;
  }
}
/* ---------- ホバーの走査: 公式キャラクターのバナー(2026-08-05 ユーザ指定)----------
   仕組みと寸法の根拠は `_01-tokens.scss` の `--m-sweep-*`。
   ⚠ **赤地なので帯の2本目は白**(`--m-sweep-img-onred`)。赤に赤は乗らない。
   ⚠ 地色を持っているのは `<p>`(`.m-abt__chara-link`)のほうで、`<a>` は透明。
     `<a>` に書くと帯が地色の**上ではなく手前**に出て角丸から溢れるので、
     **箱に書いて箱のホバーで走らせる**(`<a>` は箱の全面を覆っている = 規律85)。 */
:is(.muran-theme, .editor-styles-wrapper) .m-abt__chara-link {
  background-image: var(--m-sweep-img-onred);
  background-repeat: no-repeat;
  background-size: var(--m-sweep-w) 100%;
  background-position: var(--m-sweep-from) 0;
  /* 見かけの速さ: 実測幅 380px → 1.28s(式は `_01-tokens`)*/
  --m-sweep-dur: 1.28s;
}

@media (hover: hover) {
  :is(.muran-theme, .editor-styles-wrapper) .m-abt__chara-link:hover {
    background-position: var(--m-sweep-to) 0;
    transition: background-position var(--m-sweep-dur) ease-out;
  }
}
/* 装飾ラインと写真は1枚のレイヤーにまとめて背景で置く(要素を増やさない) */
/* **レイヤーは画面幅ぴったりにして、中の1枚ずつを版面中央から測る。**
   1440固定+中央寄せにすると、1440未満で箱そのものが画面外へ出て横スクロールが立つ。
   入れ物を `overflow-x: clip` で切ると直るが、それだと **SPの版面崩れまで隠れて
   5幅検証が素通りする**(規律30 の型)。位置の方を直すのが正解。 */
/* ⚠ **高さは直値で持たない**(2026-08-07)。以前は `height: 3047px`(= 原稿の全高
   3143 − ヘッダー96)と書いてあったが、これは**ページの中身がその高さのときだけ正しい**。
   実測すると中身は 3112(PC)/ 5250(SP)しか無く、装飾レイヤーだけがそれを超えて
   伸びて `document.scrollHeight` を決めていた = **フッターの下に白い帯**
   (PC 31px / SP 110px)。タグを消して中身が縮んだとき 69px / 290px まで広がって表に出た。
   `bottom: 0` にすると入れ物(`.m-page:has(.m-abt)` = position:relative)そのものの高さになり、
   中身が変わっても二度とはみ出さない。**中の飾りは一番深いものでも y≈1316** なので
   `overflow: hidden` に切られることはない。 */
.m-abt-deco {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  pointer-events: none;
  z-index: -1;
  overflow: hidden;
}

/* `background` ショートハンドで書くと `background-image` まで初期化され、
   詳細度も (0,1,1) > (0,1,0) で個別指定に勝ってしまう。**画像が出ない**(実際に出なかった)。
   → 位置・寸法だけロングハンドで指定する。規律27 と同じ型。 */
.m-abt-deco > i {
  position: absolute;
  display: block;
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
}

/* SP 用の11枚は **PC では出さない**(2026-09-14)。絵を `style` で渡すようになったので、
   大きさ0のまま `display: block` だと **PC でも SP 用の絵をダウンロードする**
   (以前は絵の指定が SP のメディアクエリの中にしか無かったので落ちてこなかった)。
   SP のメディアクエリの `display: block` が同じ詳細度・後ろなので SP では出る。 */
.m-abt-deco > i[class*=__sp] {
  display: none;
}

/* 原稿の座標 - 96。**写真の絵は `inc/filters.php` が `style` で渡す**(2026-09-14。メディアライブラリの添付。
   中身は先方の原稿写真を `site/setup/content/photos.py` が Figma の版と同じ寸法・マスクで焼いたもの)。
   ここは位置と寸法と不透明度だけを持つ。 */
.m-abt-deco__childtop {
  left: calc(50% - 561px);
  top: 356px;
  width: 177px;
  height: 122px;
}

.m-abt-deco__contestright {
  left: calc(50% + 405px);
  top: 344px;
  width: 153px;
  height: 106px;
  filter: opacity(0.7);
}

.m-abt-deco__rightlarge {
  left: calc(50% + 474px);
  top: 423px;
  width: 196px;
  height: 256px;
}

.m-abt-deco__left {
  left: calc(50% - 666px);
  top: 583px;
  width: 187px;
  height: 245px;
  filter: opacity(0.6);
}

.m-abt-deco__workshop {
  left: calc(50% + 380px);
  top: 813px;
  width: 178px;
  height: 123px;
}

.m-abt-deco__bottomleft {
  left: calc(50% - 549px);
  top: 813px;
  width: 165px;
  height: 114px;
}

/* 「ワクワクがもりだくさん」横のあしらい4本。
   **1枚絵(fg-abt-deco.svg)をやめて1本ずつの要素にした**(2026-07-31 ユーザ指摘):
     ① 書き出しSVGの viewBox が 620.83 しか無く、**右端の1本(667.84 まである)が
        垂直に切れて平行四辺形に見えていなかった**(カテゴリMVで踏んだのと同じ型)
     ② 1枚絵では TOP と同じ「右から寄ってきて止まる」演出を1本ずつに掛けられない
   幾何は原稿 `12:8704`〜`12:8707` の fillGeometry から起こした値。
   **不透明度は色側(rgba)に入れる**。要素の opacity はアニメーションが使うため。 */
.m-abtline__i {
  position: absolute;
  display: block;
  opacity: 0;
  --m-deco-x: 280px; /* 全部「右から」 */
}

.m-abtline__i.m-in {
  animation: m-deco-in 1.15s cubic-bezier(0.16, 0.72, 0.28, 1) var(--m-deco-d, 0ms) both;
}

.m-abtline__i0 {
  left: calc(50% + 99px);
  top: 1168px;
  width: 332px;
  height: 30px;
  clip-path: polygon(6.579% 0%, 100% 0%, 93.421% 100%, 0% 100%);
  background: linear-gradient(91.54deg, rgba(0, 147, 192, 0.1), rgba(255, 68, 105, 0.1));
}

.m-abtline__i1 {
  left: calc(50% + 560px);
  top: 1152px;
  width: 207px;
  height: 33px;
  clip-path: polygon(12.278% 0%, 100% 0%, 87.722% 100%, 0% 100%);
  background: linear-gradient(92.7deg, var(--m-grad-stops));
}

.m-abtline__i2 {
  left: calc(50% + 466px);
  top: 1118px;
  width: 168px;
  height: 17px;
  clip-path: polygon(11.398% 0%, 100% 0%, 88.602% 100%, 0% 100%);
  background: rgba(230, 0, 45, 0.5);
}

.m-abtline__i3 {
  left: calc(50% + 591px);
  top: 1032px;
  width: 105px;
  height: 11px;
  clip-path: polygon(6.579% 0%, 100% 0%, 93.421% 100%, 0% 100%);
  background: rgba(0, 147, 192, 0.4);
}

/* 散らした写真は **左右からフェードインして定位置に納まる**(2026-08-01 ユーザ指定)。
   ・**原稿にある不透明度(0.7 / 0.6)は `filter: opacity()` に移した**。
     要素の `opacity` はアニメーションが 0→1 で使うので、そこに静的な値を置くと
     動き終わりに 1 まで上がって**原稿より濃くなる**
   ・初期状態は「定位置のまま opacity:0」。ずらすのはキーフレームの from 側
     (位置をずらすと交差判定が空振りしうる = TOP・カテゴリと同じ理由) */
.m-abtph {
  opacity: 0;
}

.m-abtph.m-in {
  animation: m-deco-in 1.15s cubic-bezier(0.16, 0.72, 0.28, 1) var(--m-deco-d, 0ms) both;
}

.m-abtph[data-from=l] {
  --m-deco-x: -280px;
}

.m-abtph[data-from=r] {
  --m-deco-x: 280px;
}

/* Decoration Circle Medium 219,720 197x197 #0093C0 / blur / 10% */
.m-abt-deco__circle {
  left: calc(50% - 501px);
  top: 624px;
  width: 197px;
  height: 197px;
  border-radius: 50%;
  background: #0093c0;
  opacity: 0.1;
  filter: blur(20px);
}

/* ---------- SP(≤781) ---------- */
@media (max-width: 781px) {
  /* SP の写真ストリップ2本(原稿 `実績数値/カウンター` 376 と `画像ギャラリー` 1345)。
     どちらも版面の外へ抜ける飾り。PC の散らし(`.m-abt-deco__*`)と同じ扱いで
     文書構造に入れず、`.m-abt-deco` レイヤーに背景で置く。
     top は原稿の y からページヘッダー上端(152)を引いた値。 */
  .m-abt-deco {
    display: block;
    /* 高さは基底の `bottom: 0` に任せる(旧 `height: 5300px` = 直値。上の注記) */
  }
  .m-abt-deco > i {
    display: none;
  }
  .m-abt-deco > i[class*=__sp] {
    display: block;
  }
  /* 原稿の枠(`画像ギャラリー` 892x123)は **123px でクリップ**する。
     中の背の高い画像(233)は枠からはみ出して切られるので、帯の高さに揃えて cover で置く。
     絵は PC と同じく `inc/filters.php` が `style` で渡す(2026-09-14)。 */
  .m-abt-deco > i[class*=__sp] {
    background-size: cover;
  }
  .m-abt-deco__sp0 {
    left: -111px;
    top: 224px;
    width: 178px;
    height: 123px;
  }
  .m-abt-deco__sp1 {
    left: 67px;
    top: 224px;
    width: 178px;
    height: 123px;
  }
  .m-abt-deco__sp2 {
    left: 246px;
    top: 224px;
    width: 178px;
    height: 123px;
  }
  .m-abt-deco__sp3 {
    left: 424px;
    top: 224px;
    width: 178px;
    height: 123px;
  }
  .m-abt-deco__sp4 {
    left: 603px;
    top: 224px;
    width: 178px;
    height: 123px;
  }
  .m-abt-deco__sp5 {
    left: 781px;
    top: 224px;
    width: 178px;
    height: 123px;
  }
  .m-abt-deco__sp6 {
    left: -251px;
    top: 1193px;
    width: 178px;
    height: 123px;
  }
  .m-abt-deco__sp7 {
    left: -72px;
    top: 1193px;
    width: 178px;
    height: 123px;
  }
  .m-abt-deco__sp8 {
    left: 106px;
    top: 1193px;
    width: 178px;
    height: 123px;
  }
  .m-abt-deco__sp9 {
    left: 285px;
    top: 1193px;
    width: 178px;
    height: 123px;
  }
  .m-abt-deco__sp10 {
    left: 463px;
    top: 1193px;
    width: 178px;
    height: 123px;
  }
}
.m-histcarousel {
  margin-top: 41px; /* 見出しの箱の下端1902 → 帯1943 */
}

:is(.muran-theme, .editor-styles-wrapper) .m-histtrack {
  gap: 8px;
  align-items: start;
}

.m-histtrack > .m-histcard {
  flex: 0 0 340px;
  width: 340px;
}

/* カードは「白い箱(340x182)+ その下に本文」。箱は疑似要素で敷き、
   本文は箱の外に出す(原稿がそうなっている = 本文の行数でカードの高さが変わる) */
.m-histcard {
  position: relative;
  padding-top: 8px; /* ドット 1943 → 白箱 1951 */
}

.m-histcard::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 340px;
  height: 182px;
  background: #ffffff;
}

:is(.muran-theme, .editor-styles-wrapper) .m-histcard > * {
  position: relative;
  margin: 0;
}

/* 年号(Poppins 700 24/36 #FE0000)。上にドット18x18 */
:is(.muran-theme, .editor-styles-wrapper) .m-histcard__year {
  margin-top: 34px; /* 1943 → 1985 は 42。padding-top 8 を引く */
  font-family: var(--wp--preset--font-family--display);
  font-size: 24px;
  font-weight: 700;
  line-height: 36px;
  letter-spacing: 0.05em;
  text-align: center;
  color: var(--wp--preset--color--brand-red);
}

.m-histcard__year::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -42px;
  width: 18px;
  height: 18px;
  margin-left: -9px;
  border-radius: 50%;
  background: var(--wp--preset--color--brand-red);
  box-shadow: 0 0 0 4px #ffffff;
}

/* **見出しは行数が変わっても本文の位置を動かさない。**
   原稿は 1行(1962)・2行(1991…)・3行(2008)が混ざるが、本文の先頭は
   **全部 y=2141 で揃っている**(見出しは 2021..2111 の枠の中で上下中央):
     1行 2056..2080 / 2行 2042..2090 / 3行 2029..2101 … 中心はどれも ≈2066
   `margin-top` で2行ぶんを決め打ちしていたため、1行の年(1962・2016)は本文が 24px 上、
   3行の年(2008・2024)は下にずれていた(ユーザ指摘 2026-08-01)。 */
:is(.muran-theme, .editor-styles-wrapper) .m-histcard__title {
  display: grid;
  place-items: center;
  min-height: 90px; /* 年号下端 2021 → 2111 */
  margin-top: 0;
  padding-inline: 20px;
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
  letter-spacing: 0.05em;
  text-align: center;
  color: var(--wp--preset--color--ink);
}

:is(.muran-theme, .editor-styles-wrapper) .m-histcard__desc {
  margin-top: 30px; /* 見出し枠の下端 2111 → 本文 2141(白箱の下端2133 + 8) */
  padding-inline: 10px;
  font-size: 13px;
  line-height: 20px;
  letter-spacing: 0.05em;
  color: var(--wp--preset--color--ink);
}

/* 「夢卵のあゆみ」の帯は **左右とも常にフェード**させる(2026-08-01 ユーザ指定)。
   カテゴリのカルーセルは「まだ続きがある側だけ」を 1441px 以上で薄くする作りだが、
   こちらは幅によらず両端を溶かす(帯が版面の外へ抜ける切り口を出さない)。
   マスクは要素の**見えている箱**に掛かるので、中のスクロール量では動かない。 */
.m-histcarousel {
  --m-fade: clamp(40px, 4vw, 120px);
  --m-fade-l: 1;
  --m-fade-r: 1;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 calc(var(--m-fade) * var(--m-fade-l)), #000 calc(100% - var(--m-fade) * var(--m-fade-r)), transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 calc(var(--m-fade) * var(--m-fade-l)), #000 calc(100% - var(--m-fade) * var(--m-fade-r)), transparent 100%);
}

/* ---------- SP(≤781) ---------- */
@media (max-width: 781px) {
  .m-histcarousel {
    margin-top: 24px;
  }
}
/* ==========================================================
   ① 基底(PC)— 旧 _31-about。Figma 258x356
   ========================================================== */
/* 🔴 **横スクロールのカルーセル**(2026-08-24 ユーザ指定)。
   指定③でカードが 4 → 8枚になり、いったん 4列×2段に折ったが
   「4段組みが縦にずらずら並んでいるだけ」なので**1列の横スクロール**にした。
   器は下の「夢卵のあゆみ」と同じ `m-catcarousel` / `m-cattrack` を**重ね着**する
   (`patterns/about-body.php`)。スクロール・端のフェード・JS はあちらの持ち物で、
   ここが持つのは**間隔とカードの幅だけ**。
   ⚠ **このファイルは `components/catcarousel` より後に `@use` すること**
     (`muran.scss` は 80 → 101 で満たしている)。`.m-progtrack` の `gap` は
     `.m-cattrack` と同じ詳細度なので、順序だけで勝っている。 */
.m-progcarousel {
  /* 原稿は Section Heading(1190..1297)から gap48 でカード 1345。
     実装のリードは行送り29の箱なので下端が 1317 になる → 28 で 1345 に着く */
  margin-top: 30px;
}

:is(.muran-theme, .editor-styles-wrapper) .m-progtrack {
  gap: 29.33px;
  /* 8枚の高さを揃える(説明文が 1〜3行に散るため。CTA は ⑤ で下端に寄る) */
  align-items: stretch;
}

.m-progtrack > .m-progcard {
  position: relative; /* 面リンクのオーバーレイ(`__cta a::after`)の包含ブロック */
  width: 258px;
  flex: 0 0 258px;
  /* CTA を下端に寄せるための縦フレックス(⑤)。中身は元から縦積みなので見た目は変わらない */
  display: flex;
  flex-direction: column;
}

:is(.muran-theme, .editor-styles-wrapper) .m-progcard > * {
  margin: 0;
}

.m-progcard__thumb {
  width: 258px;
  height: 172px;
  overflow: hidden;
  box-shadow: inset 0 0 0 1px var(--wp--preset--color--line);
  background: #ffffff;
}

.m-progcard__thumb img {
  display: block;
  width: 258px;
  height: 172px;
  object-fit: cover;
}

/* ⚠ ここに原稿では**対象者タグ**(104x25 の枠付きチップ「学生・社会人対象」等)が
   あったが、**2026-08-07 に先方判断でタグ状意匠ごと廃止**(→ `inc/data/contents.php`)。
   このカードは高さ可変の縦並びなので、**外すと 38px(タグ25 + 上の余白13)素直に縮む**
   =詰めの指定は要らない(4枚とも同じだけ縮むので横の揃いも崩れない)。 */
:is(.muran-theme, .editor-styles-wrapper) .m-progcard__title {
  margin-top: 13px;
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
  letter-spacing: 0.05em;
  color: var(--wp--preset--color--ink);
}

:is(.muran-theme, .editor-styles-wrapper) .m-progcard__desc {
  margin-top: 8px; /* 見出し 1568(h24) → 本文 1600 */
  font-size: 15px;
  line-height: 27px;
  letter-spacing: 0.05em;
  color: var(--wp--preset--color--ink);
}

/* ⑤ **CTA は段の下端に寄せる**(2026-08-21)。
   説明文の行数がカードごとに違うと(下段のイベント4枚がそう)、上から積むだけでは
   ボタンの高さが揃わず段がガタつく。`margin-top: auto` で余りを上に集めて下端に着ける。
   ⚠ 原稿の間隔18px は `margin` では書けない(`auto` と同じ property なので消える)。
     `padding-top` に移してある。上段は伸びしろ 0 なので **1645 のまま**。 */
:is(.muran-theme, .editor-styles-wrapper) .m-progcard__cta {
  margin-top: auto;
  padding-top: 18px; /* 本文 1600(h27) → CTA 1645 */
}

:is(.muran-theme, .editor-styles-wrapper) .m-progcard__cta .wp-block-button__link {
  position: relative;
  display: grid;
  place-items: center;
  width: 240px;
  height: 56px;
  padding: 0;
  border-radius: 140px;
  background: var(--wp--preset--color--ink);
  color: #ffffff;
  font-size: 15px;
  font-weight: 600;
  line-height: 20px;
  letter-spacing: 0.05em;
}

/* 右矢印 15x12(原稿 Group 6656: 線14 + 山形6x12)。TOP の CTA と同じ白矢印を使う */
.m-progcard__cta .wp-block-button__link::after {
  content: "";
  position: absolute;
  right: 22px;
  top: 50%;
  width: 16px;
  height: 14px;
  margin-top: -7px;
  background: url(../img/fg-arrow-white.svg) center/contain no-repeat;
  transition: transform var(--m-nudge-ease);
}

/* ホバー中は矢印が右へ寄る(→ `_01-tokens` の `--m-nudge`)。
   ④で面リンクを外したので、**ボタン自身の `:hover`** で正しく発火する。 */
@media (hover: hover) {
  .m-progcard__cta .wp-block-button__link:hover::after {
    transform: translateX(var(--m-nudge));
  }
}
/* ==========================================================
   ② 中間幅(782〜1219)— 旧 _35-mid-width。**原稿にカンプが無い帯**(規律36)
   258x4 + gap29.33x3 = 1120 が固定幅・`nowrap` なので、版面が 1120 を切る幅では
   必ずはみ出す(実測: 782〜1219 の全幅で横スクロール)。
   4枚は原稿の並びなので崩さず、**2列×2段に折る**(カードの寸法は原稿のまま)。
   ========================================================== */
/* ⚠ **横スクロールにしたので「折り返し方」の指定は要らなくなった。**
   258x4 + gap29.33x3 = 1120 の固定幅 + `nowrap` は、以前は 782〜1219 で
   必ずはみ出していた(規律36)。いまは器がスクロールするので**どの幅でも溢れない**。 */
/* ==========================================================
   ③ SP(≤781)— 旧 _31-about。縦積み(サムネ 350x233 / 中身は中央揃え)
   ========================================================== */
@media (max-width: 781px) {
  .m-progcarousel {
    margin-top: 46px;
  }
  /* SP も**横スクロールのまま**(2026-08-24)。原稿は縦積みだが、8枚を縦に積むと
     節だけで 3,400px を超える。カードは SP のカルーセル幅(272)に合わせる。 */
  :is(.muran-theme, .editor-styles-wrapper) .m-progtrack {
    gap: 20px;
  }
  .m-progtrack > .m-progcard {
    flex: 0 0 272px;
    width: 272px;
    text-align: center;
  }
  .m-progcard__thumb,
  .m-progcard__thumb img {
    width: 100%;
    height: 181px; /* 272 : 181 = 258 : 172(原稿の比のまま) */
  }
  :is(.muran-theme, .editor-styles-wrapper) .m-progcard__cta {
    justify-content: center;
  }
}
/* ==========================================================
   ④ 面リンクは **外した**(2026-08-05 ユーザ指定)
   「この意匠ではリンクは『詳しく見る→』だけ。矩形全体でボタンではない」。
   2026-08-01 にサムネのリンクをカード全面へ広げていたが(旧 _43)、
   ホバーで帯が走る意匠を足したことで「カード全体がボタンに見える」形になった。
   → **オーバーレイもサムネのリンクも削除**し、押し所は CTA の1つだけにした。
   ⚠ 副作用として `.m-progcard` の `:hover` を見る必要が無くなり、
     ボタン自身の `:hover` が正しく発火するようになった(規律46 の解消)。
   ========================================================== */
/* ---------- ホバーの走査(青・赤の平行四辺形が左→右に抜ける)----------
   仕組みと寸法の根拠は `_01-tokens.scss` の `--m-sweep-*`。
   静止時は版面の外にあるので**見た目は1px も変わらない**(基準線は不変)。
   ⚠ この宣言は**地色を決める規則より後**に置く。`background:` の一括指定は
     `background-image` を `none` に戻すので、前に置くと黙って消える。 */
:is(.muran-theme, .editor-styles-wrapper) .m-progcard__cta .wp-block-button__link {
  background-image: var(--m-sweep-img);
  background-repeat: no-repeat;
  background-size: var(--m-sweep-w) 100%;
  background-position: var(--m-sweep-from) 0;
}

@media (hover: hover) {
  :is(.muran-theme, .editor-styles-wrapper) .m-progcard__cta .wp-block-button__link:hover {
    background-position: var(--m-sweep-to) 0;
    transition: background-position var(--m-sweep-dur) ease-out;
  }
}
/* 地色がベタ塗り(「詳しく見る」(#333))なので、**濁らない濃いめの帯**に差し替える
   (白地用の `--m-sweep-img` は地色と混ざって中間色になる → `_01-tokens`)。 */
:is(.muran-theme, .editor-styles-wrapper) .m-progcard__cta .wp-block-button__link {
  background-image: var(--m-sweep-img-ondark);
}

/* about と同じ理由(`core/post-content` のラッパがあるのでセクションは `.m-page` の孫)。 */
.m-page .m-gm {
  margin-block: 0;
}

.m-gm {
  position: relative;
}

.m-gm--map {
  padding-top: 63px;
} /* パンくず下端 361 → 英字 424 */
.m-gm--dir {
  padding-top: 104px;
} /* メイン画像下端 1315 → 英字 1419 */
/* 英字小見出し(グラデ)+ 見出し + リード。
   Figma では夢卵とはの Program と同じ「見出し」コンポーネント(9:3961)だが、
   **クラスは共有しない**。共有すると片方を直したときにもう片方の版面が動く
   (回遊カードに `.m-evcard` を使い回して TOP の全高が変わった件 = 規律33)。 */
:is(.muran-theme, .editor-styles-wrapper) .m-gm__en {
  margin: 0;
  font-family: var(--wp--preset--font-family--display);
  font-size: 20px;
  font-weight: 700;
  line-height: 32px;
  background-image: var(--m-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  width: fit-content;
}

:is(.muran-theme, .editor-styles-wrapper) .m-gm__stitle {
  margin: 6px 0 0; /* 英字 424(h32) → 見出し 462 */
  font-size: 32px;
  font-weight: 700;
  line-height: 32px;
  letter-spacing: 0.05em;
  color: var(--wp--preset--color--ink);
}

:is(.muran-theme, .editor-styles-wrapper) .m-gm__slead {
  margin: 17px 0 0; /* 見出し 462(h32) → リード 511 */
  font-size: 16px;
  line-height: 29px;
  letter-spacing: 0.05em;
  color: var(--wp--preset--color--ink);
}

/* ---------- 会場マップ(1120x735) ---------- */
/* 原稿の画像は「10月中旬ご支給予定(一旦このmapを仮あて)」の注記付き = **仮当て**。
   注記そのものは開発者向けなので焼き込まない(素材は注記を外して切り出してある)。 */
:is(.muran-theme, .editor-styles-wrapper) .m-gm__map {
  margin: 40px 0 0; /* リード 511(h29) → 画像 580 */
  width: 100%;
  height: 735px;
}

.m-gm__map img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---------- 背景のグラデ帯(原稿 `bg` -87,306 1614x1009 / op 0.08) ----------
   夢卵とはと同じ扱い。原稿は layer blur 84 が掛かっていて上下の境目が見えないので、
   マスクで両端を溶かす。ノイズ(NOISE エフェクト)は TOP・夢卵とはと同じく未実装。
   SP 原稿(33:2673)にはこの帯が無いので、SP では消す。 */
.m-page:has(.m-gm) {
  position: relative;
  isolation: isolate;
}

.m-page:has(.m-gm)::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 210px; /* 306 - 96(ヘッダー) */
  height: 1009px;
  /* ハンドルから算出した CSS 角度(rasterize.py の gradient_css と同じ規則) */
  background: linear-gradient(100.62deg, #0093c0, #ff4469);
  opacity: 0.08;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 12%, #000 88%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 12%, #000 88%, transparent 100%);
  pointer-events: none;
  z-index: -2;
}

/* ---------- SP(≤781。原稿 33:2673) ---------- */
@media (max-width: 781px) {
  .m-page:has(.m-gm)::before {
    display: none;
  }
  .m-gm--map {
    padding-top: 56px;
  } /* パンくず下端 245 → 英字 301 */
  .m-gm--dir {
    padding-top: 64px;
  } /* マップ下端 639 → 英字 703 */
  :is(.muran-theme, .editor-styles-wrapper) .m-gm__en {
    font-size: 16px;
    line-height: 16px;
  }
  :is(.muran-theme, .editor-styles-wrapper) .m-gm__stitle {
    margin-top: 3px; /* 英字 301(h16) → 見出し 320 */
    font-size: 21px;
    line-height: 32px;
    letter-spacing: 0.05em;
  }
  :is(.muran-theme, .editor-styles-wrapper) .m-gm__slead {
    margin-top: 12px; /* 見出し 320(h32) → リード 364 */
    font-size: 14px;
    line-height: 20px;
    letter-spacing: 0.05em;
  }
  :is(.muran-theme, .editor-styles-wrapper) .m-gm__map {
    margin-top: 25px; /* リード 364(h20) → 画像 409 */
    height: 230px;
  }
}
/* コアの flow レイアウトが `> * + *` に付ける `margin-block-start:24px` を切る。 */
.m-page .m-gmtabs > * {
  margin-block-start: 0;
}

/* ---------- 灰色パネル ---------- */
:is(.muran-theme, .editor-styles-wrapper) .m-gmtabs {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  box-sizing: border-box;
  margin: 33px 0 0; /* 見出し 1457(h32) → タブ 1522 */
  padding: 24px 32px;
  border-radius: 16px;
  background: #f9f9f9;
}

:is(.muran-theme, .editor-styles-wrapper) .m-gmtabs__days {
  margin: 0;
  gap: 8px;
}

/* 罫線 626x1 はカテゴリタブ行の上端。行を `fit-content` にすると原稿と同じ幅になる */
:is(.muran-theme, .editor-styles-wrapper) .m-gmtabs__cats {
  box-sizing: border-box;
  margin: 0;
  gap: 16px;
  width: fit-content;
  max-width: 100%;
  padding-top: 16px;
  border-top: 1px solid var(--m-line-strong);
}

/* ---------- 日付タブ ---------- */
:is(.muran-theme, .editor-styles-wrapper) .m-gmday {
  margin: 0;
}

.m-gmday a {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-width: 150px;
  height: 41px;
  padding: 6px 20px;
  /* 原稿の枠は #E7E7E7。パレットの line(#EDEDED)/line-strong(#DEDEDE)のどちらでもない */
  border: 1px solid #e7e7e7;
  border-radius: var(--wp--custom--radius--pill);
  background: #ffffff;
  font-size: 16px;
  line-height: 29px;
  letter-spacing: 0.05em;
  color: var(--wp--preset--color--ink);
  text-decoration: none;
}

/* 現在の日付。基底が枠1pxなので色替えも枠込みで書く(片方だけだと枠が残る = 規律27) */
.m-gmday.is-current a {
  border-color: #f678a2;
  background: #f678a2;
  color: #ffffff;
}

/* ---------- 食カテゴリタブ ---------- */
:is(.muran-theme, .editor-styles-wrapper) .m-gmtab {
  margin: 0;
}

.m-gmtab a {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  height: 38px;
  padding: 8px 16px;
  border: 1px solid var(--wp--preset--color--ink);
  border-radius: 4px;
  background: #ffffff;
  font-size: 12px;
  line-height: 21px;
  letter-spacing: 0.05em;
  color: var(--wp--preset--color--ink);
  text-decoration: none;
  white-space: nowrap;
}

/* ---------- SP(≤781。原稿 33:2673) ---------- */
@media (max-width: 781px) {
  /* 灰色パネルをやめて、日付タブとカテゴリタブが独立して並ぶ形にする */
  :is(.muran-theme, .editor-styles-wrapper) .m-gmtabs {
    display: block;
    margin-top: 40px; /* 見出し 722(h32) → 日付タブ 794 */
    padding: 0;
    border-radius: 0;
    background: none;
  }
  :is(.muran-theme, .editor-styles-wrapper) .m-gmtabs__days {
    gap: 10px;
  }
  .m-gmday a {
    min-width: 170px;
    height: 40px;
    padding: 7px 24px;
    font-size: 14px;
    font-weight: 300;
    line-height: 26px;
    /* ⚠ ここだけ字送りの 5.14%。他は全部 5% か 10% なので**原稿を写すときの丸め**の疑いが濃い。
       0.7px(=track())にすると描画が変わるので、要デザイナー確認まで px のまま残す。 */
    letter-spacing: 0.72px;
  }
  /* カテゴリタブは版面の外まで伸びて横に流れる帯(原稿 0,957 390x55 pad0/16/24/20)。
     `overflow-x:auto` を **この帯の中だけ**に閉じるので、ページには横スクロールが立たない。 */
  :is(.muran-theme, .editor-styles-wrapper) .m-gmtabs__cats {
    gap: 6px;
    width: auto;
    max-width: none; /* PC の `max-width:100%` が残ると版面(350)で止まって全幅にならない */
    margin: 32px -20px 0; /* 日付タブ下端 834 → +8 → カテゴリタブ 866 */
    padding: 0 16px 24px 20px; /* 下 24 は原稿のパディング(帯 957..1012) */
    border-top: 0;
    justify-content: flex-start;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .m-gmtabs__cats::-webkit-scrollbar {
    display: none;
  }
  .m-gmtab a {
    height: 31px;
    padding: 6px 9px;
    border-radius: var(--wp--custom--radius--tab);
    font-size: var(--wp--preset--font-size--xx-small);
    line-height: 16px;
    letter-spacing: 0.05em;
  }
  /* 原稿は1枚目だけ地色 #333 の「現在」表示(PC は現在表示が無い) */
  .m-gmtab.is-current a {
    background: var(--wp--preset--color--ink);
    color: #ffffff;
  }
}
/* ---------- ホバーの走査(青・赤の平行四辺形が左→右に抜ける)----------
   仕組みと寸法の根拠は `_01-tokens.scss` の `--m-sweep-*`。
   静止時は版面の外にあるので**見た目は1px も変わらない**(基準線は不変)。
   ⚠ この宣言は**地色を決める規則より後**に置く。`background:` の一括指定は
     `background-image` を `none` に戻すので、前に置くと黙って消える。 */
:is(.muran-theme, .editor-styles-wrapper) :is(.m-gmday, .m-gmtab) a {
  background-image: var(--m-sweep-img);
  background-repeat: no-repeat;
  background-size: var(--m-sweep-w) 100%;
  background-position: var(--m-sweep-from) 0;
  /* 見かけの速さ: 実測幅 148px → 0.71s(式は `_01-tokens`)*/
  --m-sweep-dur: 0.71s;
}

@media (hover: hover) {
  :is(.muran-theme, .editor-styles-wrapper) :is(.m-gmday, .m-gmtab) a:hover {
    background-position: var(--m-sweep-to) 0;
    transition: background-position var(--m-sweep-dur) ease-out;
  }
}
/* コアの flow レイアウトが `> * + *` に付ける `margin-block-start:24px` を切る。
   `core/post-template` の <li> に乗るとカード行が 24px ずつ下がる
   (カテゴリ index が `.m-cat-index` 配下で同じことをしているのと同じ処置)。 */
.m-page .m-gmgrid > * {
  margin-block-start: 0;
}

:is(.muran-theme, .editor-styles-wrapper) .m-gmsec {
  margin-top: 40px; /* タブ下端 1681 → 1本目 1721 / セクション間も 40 */
}

/* 原稿のテキスト箱は **グリフのバウンディングボックス**(21px の見出しが h16)。
   行送りの箱をそのまま使うとカード行の y が原稿とずれるので、行箱を 16 にする。 */
:is(.muran-theme, .editor-styles-wrapper) .m-gmsec__title {
  margin: 0;
  font-size: 21px;
  font-weight: 600;
  line-height: 16px;
  letter-spacing: 0.05em;
  color: var(--wp--preset--color--ink);
}

/* アイコン枠(20x20)が付くのは **1本目だけ**(原稿どおり。2本目以降は文字だけ)。
   その分だけ見出しの箱が 20 になり、セクション1のカード行が 4px 下がる。 */
:is(.muran-theme, .editor-styles-wrapper) .m-gmsec--gm-cafe .m-gmsec__title {
  position: relative;
  padding-left: 28px;
  line-height: 20px;
}

.m-gmsec--gm-cafe .m-gmsec__title::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 20px;
  height: 20px;
  background: url(../img/fg-gm-coffee.svg) center/contain no-repeat;
}

:is(.muran-theme, .editor-styles-wrapper) .m-gmq {
  margin: 0;
}

:is(.muran-theme, .editor-styles-wrapper) .m-gmgrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
}

:is(.muran-theme, .editor-styles-wrapper) .m-gmq__empty {
  margin: 24px 0 0;
  font-size: var(--wp--preset--font-size--small);
  color: #888;
}

/* ---------- SP(≤781。原稿 33:2673) ---------- */
@media (max-width: 781px) {
  :is(.muran-theme, .editor-styles-wrapper) .m-gmsec {
    margin-top: 24px; /* カテゴリタブ下端 921 → 見出し 945 */
  }
  /* SP はアイコンが非表示(原稿で HIDDEN)。ただし枠の20pxは残るので行箱は 20 のまま */
  :is(.muran-theme, .editor-styles-wrapper) .m-gmsec__title {
    line-height: 20px;
  }
  :is(.muran-theme, .editor-styles-wrapper) .m-gmsec--gm-cafe .m-gmsec__title {
    padding-left: 0;
  }
  .m-gmsec--gm-cafe .m-gmsec__title::before {
    display: none;
  }
  :is(.muran-theme, .editor-styles-wrapper) .m-gmgrid {
    display: block;
    margin-top: 24px;
  }
}
.m-gmcard {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  /* 枠を `border` にすると内容幅が 2px 痩せるので inset shadow で描く(作品カードと同じ) */
  padding: 20px 20px 24px;
  border-radius: var(--m-card-radius);
  background: #ffffff;
  box-shadow: inset 0 0 0 1px var(--m-line);
  height: 100%;
}

/* サムネは 312x208。`--m-card-thumb-h` は大画面/SP で別の値に上書きされる別部品用の
   トークンなので、ここでは使わずに実測値を直に書く。 */
:is(.muran-theme, .editor-styles-wrapper) .m-gmcard__thumb {
  margin: 0;
  width: 100%;
  height: 208px;
}

.m-gmcard__thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

:is(.muran-theme, .editor-styles-wrapper) .m-gmcard__body {
  margin: 20px 0 0;
  width: 100%;
}

:is(.muran-theme, .editor-styles-wrapper) .m-gmcard__title {
  margin: 0;
  font-size: var(--wp--preset--font-size--medium);
  font-weight: 700;
  line-height: 29px;
  letter-spacing: 0.05em;
  color: var(--wp--preset--color--ink);
}

:is(.muran-theme, .editor-styles-wrapper) .m-gmcard__sub {
  margin: 8px 0 0;
  font-size: var(--wp--preset--font-size--small);
  line-height: 25px;
  letter-spacing: 0.05em;
  color: var(--wp--preset--color--ink);
}

/* エリアチップ。**1ページの中で件ごとに色が変わる**ので、色はカテゴリ色(`--m-cat`)では
   決まらない。post meta `muran_area_color` を出力時にカード の `--m-area` へ配る
   (inc/cat-blocks.php)。展示カードの「白地に枠」とは別物なのでクラスも分けてある。 */
:is(.muran-theme, .editor-styles-wrapper) .m-gmcard__area {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  margin: 8px 0 0;
  min-width: 94px;
  min-height: 25px;
  padding: 4px 6px;
  border-radius: var(--wp--custom--radius--chip);
  background: var(--m-area, var(--wp--preset--color--ink));
  font-size: var(--wp--preset--font-size--xx-small);
  line-height: 16px;
  letter-spacing: 0.05em;
  color: #ffffff;
}

.m-gmcard__area:empty,
.m-gmcard__sub:empty {
  display: none;
}

/* ---------- SP(≤781。原稿 33:2673) ---------- */
@media (max-width: 781px) {
  /* 行 136 = pad16 + 中身80 + 罫線まで24 + 罫線の下 16。
     罫線を `border-bottom` や下端の inset shadow で描くと **行の最後に置くしかない**ので、
     原稿の「罫線の下に 16 空く」が作れない(最後の行の margin は親から抜け落ちて
     一覧の高さも 16 足りなくなる)。位置を指定できる `::after` で引く。 */
  .m-gmcard {
    position: relative;
    display: grid;
    grid-template-columns: 120px 1fr;
    column-gap: 16px;
    align-items: start;
    height: auto;
    padding: 16px 0 40px;
    border-radius: 0;
    background: none;
    box-shadow: none;
  }
  .m-gmcard::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 120px;
    height: 1px;
    background: var(--m-line-soft);
  }
  :is(.muran-theme, .editor-styles-wrapper) .m-gmcard__thumb {
    width: 120px;
    height: 80px;
  }
  :is(.muran-theme, .editor-styles-wrapper) .m-gmcard__body {
    margin: 0;
  }
  :is(.muran-theme, .editor-styles-wrapper) .m-gmcard__title {
    font-size: var(--wp--preset--font-size--small);
    line-height: 21px;
    letter-spacing: 0.05em;
  }
  :is(.muran-theme, .editor-styles-wrapper) .m-gmcard__sub {
    font-size: var(--wp--preset--font-size--xx-small);
    line-height: 16px;
    letter-spacing: 0.05em;
  }
  :is(.muran-theme, .editor-styles-wrapper) .m-gmcard__area {
    min-width: 0;
  }
}
/* ==========================================================
   ① コアの flow レイアウトを切る — 旧 _32-gourmet
   `core/post-content` のラッパがあるのでセクションは `.m-page` の孫。
   コアが `> * + *` に付ける `margin-block-start:24px` がカード行に乗ると
   1行ごとに 24px 下がる。
   ⚠ **②より前**に置くこと(どちらも (0,2,0)。後ろに置くと帯の 104px を殺す)。
   ========================================================== */
.m-page .m-linksec {
  margin-block: 0;
}

.m-page .m-linkcards > * {
  margin-block-start: 0;
}

/* ==========================================================
   ② 帯とカードの基底(PC)— 旧 _33-related-pages
   Figma 1440x312 #F7F7F7。グルメのほか、開催概要・アクセスの原稿にも同じものが載っている。
   TOP の回遊カード(540x160)とは寸法も文字サイズも枠も違う **別部品**。
   ========================================================== */
:is(.muran-theme, .editor-styles-wrapper) .m-linksec {
  margin-block: 104px 0; /* 最後のカード行 3920 → 帯 4024 */
  padding-block: 64px;
  background: var(--wp--preset--color--gray-bg);
}

:is(.muran-theme, .editor-styles-wrapper) .m-linksec__title {
  margin: 0;
  font-size: var(--wp--preset--font-size--large);
  font-weight: 600;
  line-height: 32px;
  letter-spacing: 0.05em;
  color: var(--wp--preset--color--ink);
}

:is(.muran-theme, .editor-styles-wrapper) .m-linkcards {
  margin: 6px 0 0; /* 見出し 4088(h32) → カード 4126 */
  gap: 30px;
  flex-wrap: nowrap;
}

.m-linkcard {
  position: relative;
  box-sizing: border-box;
  flex: 1 1 0;
  height: 146px;
  background: #ffffff;
  box-shadow: inset 0 0 0 1px var(--m-line);
}

/* グラデ丸 48x48 @ +29,+49。角度は回遊カードと同じ考え方(ほぼ正方形なので水平に近い) */
.m-linkcard::before {
  content: "";
  position: absolute;
  left: 29px;
  top: 49px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background-image: linear-gradient(93.593deg, var(--m-grad-stops));
}

/* 矢印 19x15 @ 右から 16 */
.m-linkcard::after {
  content: "";
  position: absolute;
  right: 16px;
  top: 65px;
  width: 19px;
  height: 15px;
  background: url(../img/fg-arrow-gray.svg) center/contain no-repeat;
  transition: transform var(--m-nudge-ease);
}

/* ホバー中は矢印が右へ寄る(→ `_01-tokens` の `--m-nudge`)。
   ⚠ 押し所は⑧の面リンク(`.m-linkcard__jp a::after` が `inset:0`)なので、
     `a:hover` ではなく**カード**を見る。カード全面 = リンク全面(`clickable.js` で 100%)。 */
@media (hover: hover) {
  .m-linkcard:hover::after {
    transform: translateX(var(--m-nudge));
  }
}
/* アイコンはグラデ丸の中。原稿の寸法が3枚とも違うので modifier で持つ */
:is(.muran-theme, .editor-styles-wrapper) .m-linkcard__icon {
  position: absolute;
  margin: 0;
  z-index: 1;
}

.m-linkcard__icon img {
  display: block;
  width: 100%;
  height: 100%;
}

:is(.muran-theme, .editor-styles-wrapper) .m-linkcard--overview .m-linkcard__icon {
  left: 46px;
  top: 65px;
  width: 14px;
  height: 18px;
}

:is(.muran-theme, .editor-styles-wrapper) .m-linkcard--access .m-linkcard__icon {
  left: 45px;
  top: 64px;
  width: 17px;
  height: 17px;
}

:is(.muran-theme, .editor-styles-wrapper) .m-linkcard--map .m-linkcard__icon {
  left: 46px;
  top: 63px;
  width: 14px;
  height: 20px;
}

/* `.m-gotocard__jp` と同じ理由でカード全面に広げる(面リンクの受け皿)。 */
:is(.muran-theme, .editor-styles-wrapper) .m-linkcard__jp {
  position: absolute;
  inset: 0;
  padding: 34px 0 0 93px;
  margin: 0;
  font-size: 21px;
  font-weight: 700;
  line-height: 32px;
  letter-spacing: 0.05em;
  color: var(--wp--preset--color--ink);
}

.m-linkcard__jp a {
  text-decoration: none;
  color: inherit;
}

:is(.muran-theme, .editor-styles-wrapper) .m-linkcard__sub {
  position: absolute;
  left: 93px;
  top: 70px;
  margin: 0;
  width: 206px;
  font-size: var(--wp--preset--font-size--small);
  line-height: 21px;
  letter-spacing: 0.05em;
  color: #888;
}

/* ==========================================================
   ③ SP(≤781)— 旧 _34-gourmet-sp
   390x533。カード 350x117 を gap8 で3枚
   ========================================================== */
@media (max-width: 781px) {
  :is(.muran-theme, .editor-styles-wrapper) .m-linksec {
    margin-block: 64px 0; /* 最後の行 3392 → 帯 3456(原稿の値。−91 済みで 3301 → 3365) */
  }
  :is(.muran-theme, .editor-styles-wrapper) .m-linkcards {
    flex-direction: column;
    gap: 8px;
  }
  /* PC は `flex:1 1 0` で3等分するが、縦積みでは basis が **高さ**になって潰れる */
  .m-linkcard {
    flex: 0 0 117px;
    width: 100%;
    height: 117px;
  }
  .m-linkcard::before {
    left: 20px;
    top: 41px;
    width: 36px;
    height: 36px;
  }
  .m-linkcard::after {
    right: 20px;
    top: 54px;
    width: 12px;
    height: 10px;
  }
  /* アイコンはグラデ丸(36)の中心へ。PC の 48 に対して 0.75 倍 */
  :is(.muran-theme, .editor-styles-wrapper) .m-linkcard--overview .m-linkcard__icon {
    left: 33px;
    top: 52px;
    width: 11px;
    height: 13px;
  }
  :is(.muran-theme, .editor-styles-wrapper) .m-linkcard--access .m-linkcard__icon {
    left: 32px;
    top: 53px;
    width: 13px;
    height: 13px;
  }
  :is(.muran-theme, .editor-styles-wrapper) .m-linkcard--map .m-linkcard__icon {
    left: 32px;
    top: 51px;
    width: 13px;
    height: 16px;
  }
  :is(.muran-theme, .editor-styles-wrapper) .m-linkcard__jp {
    padding: 20px 0 0 72px;
    font-size: var(--wp--preset--font-size--large);
    line-height: 27px;
    letter-spacing: 0.05em;
  }
  :is(.muran-theme, .editor-styles-wrapper) .m-linkcard__sub {
    left: 72px;
    top: 55px;
    width: 230px;
  }
}
/* ==========================================================
   ④ 【削除済み】旧「中間幅(782〜1219)」— 旧 _35-mid-width

   ここには「3枚横並びだと1枚 227px しか無いので縦積みにする」という
   **原稿にカンプが無い帯**(規律36)向けの3規則があった。

   2026-08-02(規律88)で中間幅の帯そのものを無くし、23本の `max-width: 1199px`
   を機械的に `$bp-sp-max` へ寄せたときに、この3規則も一緒に SP へ落ちた。
   縦積みと gap は③と同じなので無害だったが、**`flex: 0 0 146px` だけは
   ③の 117px を上書きしていた**(縦積みでは basis が高さになる。規律: `height` より
   `flex-basis` が主軸で勝つ)。結果、グルメ・お問い合わせの SP カードが
   **原稿 117 に対して 146** になり、中の座標(丸41 / 副題55)は 117 用のままなので
   丸も文字も上に寄っていた —— 2026-08-06 のユーザ指摘。

   **移設のときに「同じ効果だから無害」と見た規則が、実は片方だけ値を持っていた**型。
   `cssdiff` は移設前後を比べる道具なので、移設と同時に境目が動くこの型は出ない。
   → 規律: **帯を畳むときは、畳んだ先に同じ主語の規則が既に無いかを確かめる。**
   ========================================================== */
/* ==========================================================
   ⑤ 文脈: お問い合わせ — 旧 _36-contact
   ========================================================== */
/* 関連ページ帯は privacy に**くっつく**(グルメでは 104 空くが、この原稿では 0)。
   `.m-linksec` の既定(margin-top:104)を打ち消す。詳細度はクラス2つで揃える。 */
:is(.muran-theme, .editor-styles-wrapper) .m-ct--privacy + .m-linksec {
  margin-block-start: 0;
}

/* ==========================================================
   ⑥ 変種 `--wide`: 開催概要・アクセス(PC)— 旧 _39-access
   帯・見出し・地色は共通。**カードだけ原稿が別部品**(TOP の回遊カードと同じ 540x160)なので、
   `muran_relpages_blocks( …, $wide = true )` が `.m-gotocard` を出す。
   カードの基底は `components/gotocard`。ここはこの帯での差分だけ。
   ========================================================== */
.m-page .m-linksec--wide {
  margin-block: 0;
}

:is(.muran-theme, .editor-styles-wrapper) .m-linksec--wide {
  margin-block: 106px 0; /* 本文下端 3854 → 帯 3960 */
  padding-block: 64px 56px; /* CTA の下は 56(原稿 CTAエリア 4342 → 4398) */
}

/* カードそのものの見え方(アイコン位置・副題)は `components/gotocard` ⑥。 */
:is(.muran-theme, .editor-styles-wrapper) .m-linksec--wide .m-linksec__back {
  margin-top: 64px; /* カード下端 4222 → ボタン 4286 */
}

/* ==========================================================
   ⑦ 変種 `--wide`: 開催概要・アクセス(SP ≤781)— 旧 _41-access-sp
   350幅の縦積み。高さは本文で決まる(原稿も 88 と 109 で違う)
   ========================================================== */
@media (max-width: 781px) {
  :is(.muran-theme, .editor-styles-wrapper) .m-linksec--wide {
    margin-block: 65px 0; /* 注意事項の下端 2636 → 帯 2701 */
  }
  /* 縦積み・アイコン・見出し・副題は `components/gotocard` ⑦。 */
  :is(.muran-theme, .editor-styles-wrapper) .m-linksec--wide .m-linksec__back {
    margin-top: 40px; /* カード下端 3013 → ボタン 3053 */
  }
}
/* ==========================================================
   ⑧ 面リンク — 旧 _43-clickable-cards
   カード全面を押せるようにする(2026-08-01 ユーザ指摘)。
   見出しが絶対配置なので、②で `inset:0` + padding にしてある箱の中に重ねる。
   実測 = `node site/setup/verify/clickable.js`
   ========================================================== */
.m-linkcard__jp a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
}

/* ---------- ホバーの走査(青・赤の平行四辺形が左→右に抜ける)----------
   仕組みと寸法の根拠は `_01-tokens.scss` の `--m-sweep-*`。
   **大きなカード型のボタンにも同じ効果を入れる**(2026-08-05 ユーザ指定)。
   矢印の寄りとは別軸なので、ホバー中は両方が同時に走る。
   静止時は版面の外にあるので**見た目は1px も変わらない**(基準線は不変)。
   ⚠ この宣言は**地色を決める規則より後**に置く。`background:` の一括指定は
     `background-image` を `none` に戻すので、前に置くと黙って消える。 */
.m-linkcard {
  background-image: var(--m-sweep-img);
  background-repeat: no-repeat;
  background-size: var(--m-sweep-w) 100%;
  background-position: var(--m-sweep-from) 0;
  /* 見かけの速さ: 実測幅 356px → 1.22s(式は `_01-tokens`)*/
  --m-sweep-dur: 1.22s;
}

@media (hover: hover) {
  .m-linkcard:hover {
    background-position: var(--m-sweep-to) 0;
    transition: background-position var(--m-sweep-dur) ease-out;
  }
}
.m-page .m-ct {
  margin-block: 0;
}

.m-ct {
  position: relative;
}

/* ---------- リード ---------- */
.m-ct--intro {
  padding-top: 63px; /* パンくず下端 361 → リード 424 */
  padding-bottom: 81px; /* 例の下端 586 → FAQ 帯 667 */
}

:is(.muran-theme, .editor-styles-wrapper) .m-ct__lead {
  margin: 0;
  font-size: 16px;
  line-height: 29px;
  letter-spacing: 0.05em;
  text-align: center;
  color: #101828;
}

/* ---------- FAQ の帯(地色 #ECF3FE) ---------- */
.m-ct--faq {
  padding-block: 101px; /* 帯 667 → 見出し 768 */
  background: #ecf3fe;
}

:is(.muran-theme, .editor-styles-wrapper) .m-ct__en {
  margin: 0;
  font-family: var(--wp--preset--font-family--display);
  font-size: 20px;
  font-weight: 700;
  line-height: 32px;
  background-image: var(--m-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  width: fit-content;
}

:is(.muran-theme, .editor-styles-wrapper) .m-ct__stitle {
  margin: 6px 0 0; /* 英字 768(h32) → 見出し 806 */
  font-size: 32px;
  font-weight: 700;
  line-height: 32px;
  letter-spacing: 0.05em;
  color: var(--wp--preset--color--ink);
}

/* CTA 帯の中は白抜き(グラデ文字にしない)。
   原稿は `textCase: TITLE`(= 中身は "contact" だが "Contact" と出る)+ 不透明度 0.5。
   **文字は原稿の characters のまま**にして、見た目は CSS で作る。 */
:is(.muran-theme, .editor-styles-wrapper) .m-ct__en--light {
  background-image: none;
  -webkit-text-fill-color: #ffffff;
  color: #ffffff;
  opacity: 0.5;
  text-transform: capitalize;
}

:is(.muran-theme, .editor-styles-wrapper) .m-ct__stitle--light {
  color: #ffffff;
}

/* ---------- フォームへの導線の帯(地色 #E6002D) ---------- */
.m-ct--cta {
  padding-block: 104px;
  background: var(--wp--preset--color--accent-red);
}

/* ---------- 個人情報の取り扱い ---------- */
/* 原稿は 1837..2106(269)。上 68 は見出しまでの実測、下は帯の高さから逆算した値
   (原稿の Container が 268 / Section が 269 で 1px ずれており、リンク下端 2024 から
   帯の下端 2106 までは 82 ある。ここは 81 にして 269 ちょうどに収める)。 */
.m-ct--privacy {
  padding-block: 68px 81px;
}

/* 原稿のテキスト箱はグリフのバウンディングボックス(21px の見出しが h16) */
:is(.muran-theme, .editor-styles-wrapper) .m-ct__ptitle {
  margin: 0 0 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--m-line);
  font-size: 21px;
  font-weight: 600;
  line-height: 16px;
  letter-spacing: 0.05em;
  color: var(--wp--preset--color--ink);
}

:is(.muran-theme, .editor-styles-wrapper) .m-ct__ptext {
  margin: 25px 0 0; /* 罫線 1941 → 本文 1966 */
  font-size: 16px;
  line-height: 29px;
  letter-spacing: 0.05em;
  color: #101828;
}

:is(.muran-theme, .editor-styles-wrapper) .m-ct__plink {
  margin: 8px 0 0; /* 本文 1966(h29) → リンク 2003 */
  font-size: 14.78px;
  line-height: 21px;
  color: #155dfc;
}

.m-ct__plink a {
  color: inherit;
}

/* ---------- SP(≤781。原稿 33:2264) ---------- */
@media (max-width: 781px) {
  .m-ct--intro {
    padding-top: 40px; /* パンくず下端 245 → リード 285 */
    padding-bottom: 64px; /* 例の下端 604 → FAQ 帯 668 */
  }
  /* SP のリードは中央寄せではなく左揃え(原稿 20,376 350x108 の4行) */
  :is(.muran-theme, .editor-styles-wrapper) .m-ct__lead {
    font-size: var(--wp--custom--font-size--15);
    line-height: 27px;
    letter-spacing: 0.05em;
    text-align: left;
    color: var(--wp--preset--color--ink);
  }
  .m-ct--faq {
    padding-block: 64px;
  }
  :is(.muran-theme, .editor-styles-wrapper) .m-ct__stitle {
    margin-top: 4px; /* 英字 732(h32) → 見出し 768 */
    font-size: 24px;
    line-height: 31px;
    letter-spacing: 0.05em;
  }
  .m-ct--cta {
    padding-block: 64px;
  }
  .m-ct--privacy {
    padding-block: 64px;
  }
  :is(.muran-theme, .editor-styles-wrapper) .m-ct__ptitle {
    margin-bottom: 17px;
    padding-bottom: 17px;
    font-size: 17px;
    line-height: 13px;
    letter-spacing: 0.05em;
  }
}
/* コアの flow レイアウトが `> * + *` に付ける margin-block-start を切る */
.m-page .m-ctex > * {
  margin-block-start: 0;
}

:is(.muran-theme, .editor-styles-wrapper) .m-ctex {
  box-sizing: border-box;
  margin: 32px auto 0;
  padding: 16px 0;
  width: fit-content;
  max-width: 100%;
  gap: 10px;
  border-top: 1px solid var(--m-line-strong);
  border-bottom: 1px solid var(--m-line-strong);
}

:is(.muran-theme, .editor-styles-wrapper) .m-ctex__label {
  margin: 0;
  padding-right: 8px;
  font-size: var(--wp--preset--font-size--small);
  line-height: 25px;
  letter-spacing: 0.05em;
  color: #4a5565;
  white-space: nowrap;
}

:is(.muran-theme, .editor-styles-wrapper) .m-ctex__tag {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  margin: 0;
  height: 38px;
  padding: 8px 16px;
  border-radius: 4px;
  background: var(--wp--preset--color--gray-bg);
  font-size: var(--wp--preset--font-size--x-small);
  line-height: 21px;
  letter-spacing: 0.05em;
  color: var(--wp--preset--color--ink);
  white-space: nowrap;
}

/* ---------- SP(≤781。原稿 33:2264) ---------- */
@media (max-width: 781px) {
  /* 縦積み。ラベルは1行使って中央、タグは 171px が2列で並ぶ(5枚目は3段目の左) */
  :is(.muran-theme, .editor-styles-wrapper) .m-ctex {
    margin-top: 24px;
    padding: 8px 0;
    width: 100%;
    justify-content: flex-start;
    row-gap: 10px;
    column-gap: 8px;
  }
  :is(.muran-theme, .editor-styles-wrapper) .m-ctex__label {
    width: 100%;
    padding-right: 0;
    text-align: center;
  }
  :is(.muran-theme, .editor-styles-wrapper) .m-ctex__tag {
    flex: 0 0 171px;
    justify-content: center;
    max-width: calc(50% - 4px);
  }
}
/* コアの flow レイアウトが `> * + *` に付ける margin-block-start を切る */
.m-page .m-faq > * {
  margin-block-start: 0;
}

:is(.muran-theme, .editor-styles-wrapper) .m-faq {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 44px 0 0; /* 見出し 806(h32) → 一覧 882 */
}

:is(.muran-theme, .editor-styles-wrapper) .m-faqitem {
  box-sizing: border-box;
  margin: 0;
  padding: 0 32px;
  border-radius: var(--m-card-radius);
  background: #ffffff;
}

.m-faqitem > summary {
  position: relative;
  display: block; /* 既定の三角(marker)を消す。`list-style` だけだと Safari に残る */
  box-sizing: border-box;
  padding: 26px 60px 26px 47px;
  min-height: 82px;
  font-size: var(--wp--preset--font-size--medium);
  line-height: 29px;
  letter-spacing: 0.05em;
  color: #101828;
  cursor: pointer;
}

.m-faqitem > summary::-webkit-details-marker {
  display: none;
}

/* Q の丸(30x30 #0093C0 @+32,+26。カード内側 padding 32 の左端から) */
.m-faqitem > summary::before {
  content: "Q";
  position: absolute;
  left: 0;
  top: 26px;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--wp--preset--color--accent-cyan);
  font-family: var(--wp--preset--font-family--display);
  font-size: 17px;
  font-weight: 500;
  line-height: 1;
  color: #ffffff;
}

/* 山形 13x7 #CCC。開いたら反転させる */
.m-faqitem > summary::after {
  content: "";
  position: absolute;
  right: 0;
  top: 37px;
  width: 13px;
  height: 7px;
  background: url(../img/fg-faq-chev.svg) center/contain no-repeat;
  transition: transform 0.2s ease;
}

.m-faqitem[open] > summary::after {
  transform: rotate(180deg);
}

/* ホバー中は山形が**いま向いている方**へ寄る(→ `_01-tokens` の `--m-nudge-sm`)。
   閉じている = ∨ なので下へ。開いている = 180°回って ∧ なので上へ。
   回転後の座標系で `translateY(+)` を足せば、上へ動くのは自動で出る
   (回した中で足すので「開いたときだけ符号を反転する」を書かなくてよい)。
   ⚠ `[open]:hover` は (0,3,1) で素の `:hover`(0,2,1)より強い = 順序に依存しない。 */
@media (hover: hover) {
  .m-faqitem > summary:hover::after {
    transform: translateY(var(--m-nudge-sm));
  }
  .m-faqitem[open] > summary:hover::after {
    transform: rotate(180deg) translateY(var(--m-nudge-sm));
  }
}
:is(.muran-theme, .editor-styles-wrapper) .m-faqitem__a {
  margin: 0;
  padding: 0 0 26px 47px;
  font-size: var(--wp--preset--font-size--medium);
  line-height: 29px;
  letter-spacing: 0.05em;
  color: #4a5565;
}

/* 回答の中のリンク(2026-09-14。先方の原稿で「青文字 = 別ページへのリンク想定」)。
   **原稿にこの版面は無い**ので、同じページの「プライバシーポリシーを見る」の青(#155DFC。
   `.m-ct__plink`)に揃えた。文の途中に出るので**下線も付ける**(色だけで見分けさせない)。 */
.m-faqitem__a a {
  color: #155dfc;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---------- SP(≤781。原稿 33:2264) ---------- */
@media (max-width: 781px) {
  :is(.muran-theme, .editor-styles-wrapper) .m-faq {
    margin-top: 24px; /* 見出し 768(h31) → 一覧 823 */
  }
  /* カードの内側は 20(PC は 32)。Q 丸と山形の位置もそれに合わせる */
  :is(.muran-theme, .editor-styles-wrapper) .m-faqitem {
    padding: 0 20px;
  }
  .m-faqitem > summary {
    padding: 25px 40px 25px 47px;
  }
  :is(.muran-theme, .editor-styles-wrapper) .m-faqitem__a {
    padding-bottom: 25px;
  }
}
/* コアの flow レイアウトが `> * + *` に付ける margin-block-start を切る */
.m-page .m-ctcta > * {
  margin-block-start: 0;
}

:is(.muran-theme, .editor-styles-wrapper) .m-ctcta {
  margin: 0;
  gap: 94px;
  flex-wrap: nowrap;
}

:is(.muran-theme, .editor-styles-wrapper) .m-ctcta__body {
  margin: 0;
  flex: 1 1 auto;
}

:is(.muran-theme, .editor-styles-wrapper) .m-ctcta__lead {
  margin: 15px 0 0; /* 見出し 1658(h32) → リード 1705 */
  font-size: 16px;
  line-height: 29px;
  letter-spacing: 0.05em;
  color: #ffffff;
}

/* 白いピル 320x56。矢印は赤 */
:is(.muran-theme, .editor-styles-wrapper) .m-ctcta__btn {
  margin: 0;
  flex: 0 0 320px;
}

.m-ctcta__btn a {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 320px;
  height: 56px;
  border-radius: var(--wp--custom--radius--pill);
  background: #ffffff;
  font-size: var(--wp--custom--font-size--15);
  font-weight: 600;
  line-height: 20px;
  letter-spacing: 0.05em;
  color: var(--wp--preset--color--accent-red);
  text-decoration: none;
}

.m-ctcta__btn a::after {
  content: "";
  position: absolute;
  right: 24px;
  width: 15px;
  height: 12px;
  background: url(../img/fg-arrow-red.svg) center/contain no-repeat;
  transition: transform var(--m-nudge-ease);
}

/* ホバー中は矢印が右へ寄る(→ `_01-tokens` の `--m-nudge`)。 */
@media (hover: hover) {
  .m-ctcta__btn a:hover::after {
    transform: translateX(var(--m-nudge));
  }
}
/* ---------- SP(≤781。原稿 33:2264)— 縦積み・ボタンは全幅 ---------- */
@media (max-width: 781px) {
  :is(.muran-theme, .editor-styles-wrapper) .m-ctcta {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 24px;
  }
  :is(.muran-theme, .editor-styles-wrapper) .m-ctcta__lead {
    margin-top: 11px; /* 見出し 1518(h32) → リード 1561 */
  }
  :is(.muran-theme, .editor-styles-wrapper) .m-ctcta__btn {
    flex: 0 0 auto;
  }
  .m-ctcta__btn a {
    width: 100%;
  }
}
/* ---------- ホバーの走査(青・赤の平行四辺形が左→右に抜ける)----------
   仕組みと寸法の根拠は `_01-tokens.scss` の `--m-sweep-*`。
   静止時は版面の外にあるので**見た目は1px も変わらない**(基準線は不変)。
   ⚠ この宣言は**地色を決める規則より後**に置く。`background:` の一括指定は
     `background-image` を `none` に戻すので、前に置くと黙って消える。 */
.m-ctcta__btn a {
  background-image: var(--m-sweep-img);
  background-repeat: no-repeat;
  background-size: var(--m-sweep-w) 100%;
  background-position: var(--m-sweep-from) 0;
  /* 見かけの速さ: 実測幅 320px → 1.13s(式は `_01-tokens`)*/
  --m-sweep-dur: 1.13s;
}

@media (hover: hover) {
  .m-ctcta__btn a:hover {
    background-position: var(--m-sweep-to) 0;
    transition: background-position var(--m-sweep-dur) ease-out;
  }
}
.m-page .m-formsec {
  margin-block: 0;
}

.m-formsec {
  padding-block: 63px 104px;
}

/* 入力欄の版面は 800(新着情報の本文と同じ)。1120 だと1行が長すぎる */
.m-formsec > * {
  box-sizing: border-box;
  margin-inline: auto;
  max-width: 800px;
}

:is(.muran-theme, .editor-styles-wrapper) .m-formsec__lead {
  margin: 0;
  font-size: 16px;
  line-height: 29px;
  letter-spacing: 0.05em;
  color: var(--wp--preset--color--ink);
}

:is(.muran-theme, .editor-styles-wrapper) .m-formsec__note {
  margin: 24px 0 0;
  font-size: var(--wp--preset--font-size--small);
  line-height: 25px;
  color: #4a5565;
}

.m-formsec__req {
  display: inline-flex;
  align-items: center;
  margin-right: 4px;
  padding: 2px 8px;
  border-radius: var(--wp--custom--radius--chip);
  background: var(--wp--preset--color--accent-red);
  font-size: var(--wp--preset--font-size--xx-small);
  line-height: 16px;
  color: #ffffff;
}

/* ---------- Fluent Forms の素のマークアップに当てる ---------- */
.m-formsec .fluentform {
  margin-top: 40px;
}

.m-formsec .ff-el-group {
  margin-bottom: 32px;
}

.m-formsec .ff-el-input--label label {
  font-size: var(--wp--preset--font-size--medium);
  font-weight: 700;
  line-height: 29px;
  letter-spacing: 0.05em;
  color: var(--wp--preset--color--ink);
}

/* 必須の印。プラグインの既定は `*` なので、サイトの「必須」チップに差し替える。
   ⚠ プラグインは同じ `label:after` を **後から読まれるスタイルシート**で
   `.fluentform .ff-el-is-required.asterisk-right label:after`(0,3,1)として持っている。
   クラス2つ分では `content` と `color` だけ負けて **赤いチップの中に `*` が出る**
   (背景は勝つので「効いているように見えて中身だけ違う」型)。クラスを1つ増やして勝たせる。 */
.m-formsec .ff-el-input--label.ff-el-is-required.asterisk-right label::after {
  content: "必須";
  display: inline-flex;
  align-items: center;
  margin-left: 8px;
  padding: 2px 8px;
  border-radius: var(--wp--custom--radius--chip);
  background: var(--wp--preset--color--accent-red);
  font-size: var(--wp--preset--font-size--xx-small);
  font-weight: 400;
  line-height: 16px;
  color: #ffffff;
  vertical-align: middle;
}

/* 英語のページでは「Required」(2026-09-14)。**CSS の中の文字には対訳表が届かない**ので、ここだけ言語で分ける。 */
.m-formsec:lang(en) .ff-el-input--label.ff-el-is-required.asterisk-right label::after {
  content: "Required";
}

.m-formsec :is(.ff-el-form-control, select.ff-el-form-control) {
  box-sizing: border-box;
  width: 100%;
  min-height: 56px;
  padding: 14px 16px;
  border: 1px solid var(--m-line-strong);
  border-radius: 4px;
  background: #ffffff;
  font-size: var(--wp--preset--font-size--medium);
  line-height: 29px;
  color: var(--wp--preset--color--ink);
}

.m-formsec textarea.ff-el-form-control {
  min-height: 200px;
  line-height: 29px;
  resize: vertical;
}

.m-formsec .ff-el-form-control:focus {
  border-color: var(--wp--preset--color--accent-cyan);
  outline: 2px solid rgba(0, 147, 192, 0.2);
  outline-offset: 0;
}

.m-formsec .ff-el-form-control::placeholder {
  color: #9aa1ab;
}

/* 同意チェックはラベルを1行にして押しやすくする */
.m-formsec .ff-el-form-check {
  display: flex;
  align-items: center;
  gap: 8px;
}

.m-formsec .ff-el-form-check-label {
  font-size: var(--wp--preset--font-size--medium);
  line-height: 29px;
  color: var(--wp--preset--color--ink);
  cursor: pointer;
}

.m-formsec .ff-el-form-check input[type=checkbox] {
  width: 20px;
  height: 20px;
  accent-color: var(--wp--preset--color--accent-red);
}

/* 送信ボタン。お問い合わせページの CTA と同寸・同色(320x56 の赤いピル) */
.m-formsec .ff-btn-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 320px;
  height: 56px;
  padding: 0 32px;
  border: 1px solid var(--wp--preset--color--accent-red);
  border-radius: var(--wp--custom--radius--pill);
  background: var(--wp--preset--color--accent-red);
  font-size: var(--wp--custom--font-size--15);
  font-weight: 600;
  letter-spacing: 0.05em;
  color: #ffffff;
}

/* ⚠ `background:`(一括)ではなく `background-color:` にしてある。
   一括指定は `background-image` を `none` に戻すので、下の走査の帯が
   **ホバーした瞬間に消える**(ホバー中しか出ない効果なので実質何も起きない)。 */
.m-formsec .ff-btn-submit:hover {
  background-color: #ffffff;
  color: var(--wp--preset--color--accent-red);
}

/* ---------- ホバーの走査(2026-08-05 ユーザ指定)----------
   仕組みと寸法は `_01-tokens.scss` の `--m-sweep-*`。
   このボタンは**ホバーすると地色が白に反転する**ので、赤地用ではなく
   通常の青・赤の帯を使う(白地なら赤も乗る)。 */
:is(.muran-theme, .editor-styles-wrapper) .m-formsec .ff-btn-submit {
  background-image: var(--m-sweep-img);
  background-repeat: no-repeat;
  background-size: var(--m-sweep-w) 100%;
  background-position: var(--m-sweep-from) 0;
  /* 見かけの速さ: 実測幅 320px → 1.13s(式は `_01-tokens`)*/
  --m-sweep-dur: 1.13s;
}

@media (hover: hover) {
  :is(.muran-theme, .editor-styles-wrapper) .m-formsec .ff-btn-submit:hover {
    background-position: var(--m-sweep-to) 0;
    transition: background-position var(--m-sweep-dur) ease-out;
  }
}
.m-formsec .ff-el-group.ff-text-center,
.m-formsec .ff_submit_btn_wrapper {
  text-align: center;
}

.m-formsec .ff-el-is-error .ff-el-form-control {
  border-color: var(--wp--preset--color--accent-red);
}

.m-formsec .error.text-danger {
  margin-top: 8px;
  font-size: var(--wp--preset--font-size--small);
  color: var(--wp--preset--color--accent-red);
}

:is(.muran-theme, .editor-styles-wrapper) .m-formsec__privacy {
  margin: 48px 0 0;
  padding-top: 32px;
  border-top: 1px solid var(--m-line);
  font-size: var(--wp--preset--font-size--small);
  line-height: 25px;
  color: #4a5565;
}

.m-formsec__privacy a {
  color: #155dfc;
}

/* ---------- SP(≤781) ---------- */
@media (max-width: 781px) {
  .m-formsec {
    padding-block: 40px 64px;
  }
  .m-formsec .ff-btn-submit {
    min-width: 100%;
  }
}
/* ==========================================================
   開催概要・アクセス(/access/)— 座標は patterns/access-body.php の冒頭に実測値がある。

   **このページだけ2段組**(左に目次240 / 本文880 / 間99)。他の下層は版面1120の中央。
   ========================================================== */
/* コアの flow レイアウトが `> * + *` に付ける 24px を切る(グルメ・カテゴリと同じ処置)。
   間隔は部品の側で1つずつ原稿の値を入れる。
   （移設前は `.m-page :is(.m-acc, .m-accmain, .m-accsec, .m-accnotes) > *` の1本だった。
   `:is()` の詳細度は引数の最大なので、単一クラスに割っても等価。
   `.m-accsec` は components/accsec、`.m-accnotes` は components/accnotes が持つ） */
.m-page .m-acc {
  margin-block: 0;
}

.m-page .m-acc > * {
  margin-block-start: 0;
}

.m-page .m-accmain > * {
  margin-block-start: 0;
}

/* ---------- 2段組の骨格 ----------
   原稿(1440): 目次 61..301 / 間 99 / 本文 400..1280。
   本文の**右端 1280** はサイト共通の版面(1120 中央)の右端と同じなので、
   右パディングを版面と同じ式にして右端を係留し、左は目次の幅ぶん自然に決まる
   (1440 で左端がちょうど 61 になる)。1441 以上でも版面と同じだけしか動かない。 */
.m-acc {
  display: grid;
  grid-template-columns: 240px minmax(0, 880px);
  column-gap: 99px;
  justify-content: end;
  align-items: start;
  padding-top: 79px; /* パンくず下端 361 → 440 */
  padding-left: 20px;
  padding-right: max(20px, (100% - 1120px) / 2);
}

/* ---------- 中間幅(≤1219)— 旧 _40-access-mid ----------
   **原稿にカンプが無い帯**(規律36)。2段組は 240+99+880 = 1219 が下限なので、
   ここから下は **SP と同じ1段組**に寄せる(目次のチップ化は components/accnav)。 */
@media (max-width: 781px) {
  .m-acc {
    display: block;
    padding-inline: clamp(20px, 4vw, 40px);
  }
}
/* ---------- SP(≤781)— 旧 _41-access-sp。原稿 `33:2949`(原稿 y − 91 = 実装 y) ---------- */
@media (max-width: 781px) {
  .m-acc {
    padding-top: 56px; /* パンくず 245 → タブ 301 */
    padding-inline: 20px;
  }
}
/* ==========================================================
   ① 基底(PC)— 旧 _39-access。左の目次(240 / 上に罫線 / 行送り46)
   ========================================================== */
.m-accnav {
  border-top: 1px solid var(--m-line);
  padding-top: 32px; /* 罫線 440 → 1項目め 472 */
}

:is(.muran-theme, .editor-styles-wrapper) .m-accnav__items {
  display: flex;
  flex-direction: column;
  gap: 32px; /* 14 + 32 = 行送り46 */
  margin: 0;
  padding: 0;
  list-style: none;
}

.m-accnav__item {
  font-size: var(--wp--preset--font-size--small);
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.05em;
}

.m-accnav__item > a {
  position: relative;
  text-decoration: none;
  color: var(--wp--preset--color--ink);
}

/* 現在地 = 赤文字 + 4px のドット(原稿は先頭「開催概要」に付いている)。
   **原稿は静止画なので「先頭が現在地」の状態しか描かれていない。**
   アンカーで飛んだ節が `:target` になったらそこへ移す(JS は持たない)。
   `#notes` は駐車場の節の中なので、駐車場を現在地として扱う。 */
.m-acc:not(:has(:target)) .m-accnav__item--overview > a,
.m-acc:has(#overview:target) .m-accnav__item--overview > a,
.m-acc:has(#map:target) .m-accnav__item--map > a,
.m-acc:has(#access:target) .m-accnav__item--access > a,
.m-acc:has(#parking:target) .m-accnav__item--parking > a,
.m-acc:has(#notes:target) .m-accnav__item--parking > a {
  color: var(--wp--preset--color--accent-red);
}

.m-acc:not(:has(:target)) .m-accnav__item--overview > a::before,
.m-acc:has(#overview:target) .m-accnav__item--overview > a::before,
.m-acc:has(#map:target) .m-accnav__item--map > a::before,
.m-acc:has(#access:target) .m-accnav__item--access > a::before,
.m-acc:has(#parking:target) .m-accnav__item--parking > a::before,
.m-acc:has(#notes:target) .m-accnav__item--parking > a::before {
  content: "";
  position: absolute;
  left: -14px;
  top: 50%;
  width: 4px;
  height: 4px;
  margin-top: -2px;
  border-radius: 50%;
  background: var(--wp--preset--color--accent-red);
}

/* ==========================================================
   ② 中間幅(≤1219)— 旧 _40-access-mid
   **原稿にカンプが無い帯**(規律36)。2段組は 240+99+880 = 1219 が下限なので、
   ここから下は SP と同じ「横並びチップ」に寄せる。
   ========================================================== */
@media (max-width: 781px) {
  .m-accnav {
    border-top: none;
    padding-top: 0;
    margin-bottom: 40px;
  }
  :is(.muran-theme, .editor-styles-wrapper) .m-accnav__items {
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 6px;
    overflow-x: auto;
    scrollbar-width: none;
    padding-bottom: 4px;
  }
  .m-accnav__items::-webkit-scrollbar {
    display: none;
  }
  .m-accnav__item {
    flex: 0 0 auto;
  }
  .m-accnav__item > a {
    display: block;
    border: 1px solid var(--wp--preset--color--ink);
    border-radius: var(--wp--custom--radius--tab);
    padding: 6px 9px;
    font-size: var(--wp--preset--font-size--xx-small);
    font-weight: 400;
    line-height: 1.4545;
    white-space: nowrap;
  }
  /* 現在地は塗りで示す(原稿 SP: #333 塗り + 白文字)。ドットは PC のみ */
  .m-acc:not(:has(:target)) .m-accnav__item--overview > a,
  .m-acc:has(#overview:target) .m-accnav__item--overview > a,
  .m-acc:has(#map:target) .m-accnav__item--map > a,
  .m-acc:has(#access:target) .m-accnav__item--access > a,
  .m-acc:has(#parking:target) .m-accnav__item--parking > a,
  .m-acc:has(#notes:target) .m-accnav__item--parking > a {
    background: var(--wp--preset--color--ink);
    color: #ffffff;
  }
  .m-acc:not(:has(:target)) .m-accnav__item--overview > a::before,
  .m-acc:has(#overview:target) .m-accnav__item--overview > a::before,
  .m-acc:has(#map:target) .m-accnav__item--map > a::before,
  .m-acc:has(#access:target) .m-accnav__item--access > a::before,
  .m-acc:has(#parking:target) .m-accnav__item--parking > a::before,
  .m-acc:has(#notes:target) .m-accnav__item--parking > a::before {
    content: none;
  }
}
/* ==========================================================
   ③ SP(≤781)— 旧 _41-access-sp。原稿 `33:2949`(原稿 y − 91 = 実装 y)
   ========================================================== */
@media (max-width: 781px) {
  .m-accnav {
    margin-bottom: 37px; /* タブ 332 → 英字 372(原稿 392→463。帯の下 4px はスクロールバー逃し) */
  }
}
/* ==========================================================
   ① 基底(PC)— 旧 _39-access
   ========================================================== */
/* コアの flow レイアウトが `> * + *` に付ける 24px を切る。
   間隔はこの下で1つずつ原稿の値を入れる。
   （移設前は `.m-page :is(.m-acc, .m-accmain, .m-accsec, .m-accnotes) > *` の
   1本だった。`:is()` の詳細度は引数の最大なので、単一クラスに割っても等価） */
.m-page .m-accsec > * {
  margin-block-start: 0;
}

/* 節と節は gap104(原稿 メインコンテンツ `col gap104`)。
   アンカーで飛ぶので、上に少し余白を取って見出しが隠れないようにする。 */
.m-accsec {
  scroll-margin-top: 24px;
}

.m-accsec + .m-accsec {
  margin-top: 104px;
}

/* 英字(グラデ)+ 見出し。グルメと同じ Figma コンポーネント(9:4851)だが別クラス。
   原稿の characters は小文字("map" "access")で、**見た目だけ `textCase: TITLE`**。
   文字は原稿のまま持ち、大文字化は CSS でやる(お問い合わせの CTA と同じ扱い)。 */
:is(.muran-theme, .editor-styles-wrapper) .m-accsec__en {
  margin: 0;
  width: fit-content;
  font-family: var(--wp--preset--font-family--display);
  font-size: 20px;
  font-weight: 700;
  line-height: 32px;
  text-transform: capitalize;
  background-image: var(--m-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

:is(.muran-theme, .editor-styles-wrapper) .m-accsec__title {
  margin: 6px 0 0; /* 英字 440(h32) → 見出し 478 */
  font-size: var(--wp--custom--font-size--32);
  font-weight: 700;
  line-height: 32px;
  letter-spacing: 0.05em;
  color: var(--wp--preset--color--ink);
}

/* 見出しの下は 543 − 510 = 33(3節とも同じ。駐車場だけ原稿が 62)。
   間隔は**見出し側の margin-bottom** で持つ。下に来るのが `core/table` や `core/image` で、
   コアが `margin:0` を当てているため `+ *` 側では負ける(実際に 33 が効かなかった)。 */
:is(.muran-theme, .editor-styles-wrapper) .m-accsec__head {
  margin: 0 0 33px;
}

:is(.muran-theme, .editor-styles-wrapper) .m-accsec--parking .m-accsec__head {
  margin-bottom: 62px;
}

/* 小見出し(左にグラデの縦棒 2x30 + 20px/30)。原稿 `車でお越しの方` / `駐車場` */
:is(.muran-theme, .editor-styles-wrapper) .m-accbar {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  line-height: 30px;
  color: var(--wp--preset--color--ink);
}

.m-accbar::before {
  content: "";
  flex: 0 0 2px;
  width: 2px;
  height: 30px;
  background-image: var(--m-grad);
}

:is(.muran-theme, .editor-styles-wrapper) .m-accsec__lead {
  margin: 13px 0 0; /* 小見出し 2051(h30) → リード 2094 */
  font-size: var(--wp--preset--font-size--small);
  line-height: 20px;
  color: var(--wp--preset--color--ink);
}

/* ==========================================================
   ② SP(≤781)— 旧 _41-access-sp。原稿 `33:2949`(原稿 y − 91 = 実装 y)
   ========================================================== */
@media (max-width: 781px) {
  /* --- 節(gap64) --- */
  .m-accsec + .m-accsec {
    margin-top: 64px;
  }
  /* 原稿の `textCase: TITLE` は **PC だけ**(SP は "map" "access" と小文字のまま) */
  :is(.muran-theme, .editor-styles-wrapper) .m-accsec__en {
    font-size: var(--wp--preset--font-size--medium);
    line-height: 16px;
    text-transform: none;
  }
  :is(.muran-theme, .editor-styles-wrapper) .m-accsec__title {
    margin-top: 3px; /* 英字 372(h16) → 見出し 391 */
    font-size: 21px;
    line-height: 31.5px;
    letter-spacing: 0.05em;
  }
  /* 見出しの下は SP だと4節とも 24(PC は 33 / 駐車場だけ 62)。
     PC 側と**同じ形のセレクタ**で書かないと打ち消せない(`+ *` では負ける)。 */
  :is(.muran-theme, .editor-styles-wrapper) .m-accsec__head,
  :is(.muran-theme, .editor-styles-wrapper) .m-accsec--parking .m-accsec__head {
    margin-bottom: 24px;
  }
  /* 原稿 SP に「駐車場」の小見出しは無い(節の見出しがそれを兼ねている)。
     PC 原稿にはあるので、消すのは SP だけ。 */
  .m-accsec--parking .m-accbar {
    display: none;
  }
  :is(.muran-theme, .editor-styles-wrapper) .m-accbar {
    gap: 14px;
    font-size: 17px;
    line-height: 25.5px;
  }
  .m-accbar::before {
    height: 26px;
  }
  :is(.muran-theme, .editor-styles-wrapper) .m-accsec__lead {
    margin-top: 14px; /* 小見出し 1225(h25.5) → リード 1265 */
  }
}
/* ==========================================================
   ① 情報テーブル(PC / 880x468 / ラベル列192)— 旧 _39-access
   ========================================================== */
:is(.muran-theme, .editor-styles-wrapper) .m-acctable {
  margin: 0;
}

.m-acctable table {
  width: 100%;
  /* ラベル列の幅(192)を**そのまま**効かせる。auto レイアウトだと余りが
     指定幅にも配分されて広がる(実測 192→245 / 149→190 になった)。 */
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid #d1d5dc;
  border-radius: 11px;
  overflow: hidden;
  background: #ffffff;
}

.m-acctable td {
  /* ラベル列の「192」は**枠込みの外寸**。既定の content-box のままだと padding 26x2 が
     外に付いて 244 になる(`core/post-featured-image` と同じ型の取りこぼし)。 */
  box-sizing: border-box;
  padding: 23px 34px;
  border: 0;
  font-size: var(--wp--custom--font-size--15);
  line-height: 26px;
  letter-spacing: 0.05em;
  color: #364153;
  vertical-align: middle;
  word-break: normal;
}

.m-acctable td:first-child {
  width: 192px;
  padding: 23px 26px;
  background: var(--wp--preset--color--gray-bg);
  font-weight: 500;
  color: var(--wp--preset--color--ink);
  vertical-align: top;
}

.m-acctable tr + tr td {
  border-top: 1px solid #e5e7eb;
}

/* 行の高さは原稿の値(72 / 99 / 74x4 = 468)。`height` は表では**下限**なので、
   本文が増えれば伸びる(編集で行を足しても壊れない)。 */
.m-acctable tr {
  height: 74px;
}

.m-acctable tr:first-child {
  height: 72px;
}

/* 原稿の2行目(開催時間)は箱が 99 しか無く、3行(77)に対して余白が 10 しか残っていない
   (auto-layout が潰れている)。原稿どおりの高さにするため、この行だけ詰める。 */
.m-acctable tr:nth-child(2) {
  height: 99px;
}

.m-acctable tr:nth-child(2) td {
  padding-block: 10px;
}

/* ==========================================================
   ② アクセスの表(PC / 880x167 / ラベル列149)— 旧 _39-access
   ========================================================== */
:is(.muran-theme, .editor-styles-wrapper) .m-accroute {
  margin: 24px 0 0; /* リード 2094(h20) → 表 2138 */
}

.m-accroute table {
  width: 100%;
  /* ラベル列の幅(149)を**そのまま**効かせる。auto レイアウトだと余りが
     指定幅にも配分されて広がる(実測 192→245 / 149→190 になった)。 */
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid #d1d5dc;
  border-radius: 9px;
  overflow: hidden;
  background: #ffffff;
}

.m-accroute td {
  box-sizing: border-box;
  padding: 17px 21px;
  border: 0;
  font-size: var(--wp--preset--font-size--small);
  line-height: 20px;
  color: #364153;
  vertical-align: middle;
}

.m-accroute td:first-child {
  width: 149px;
  background: #f3f4f6;
  font-weight: 500;
  color: var(--wp--preset--color--ink);
}

.m-accroute tr + tr td {
  border-top: 1px solid #e5e7eb;
}

/* ==========================================================
   ③ SP(≤781)— 旧 _41-access-sp。11px / ラベル列77 / r4
   ========================================================== */
@media (max-width: 781px) {
  .m-acctable table {
    border-radius: 4px;
  }
  .m-acctable td {
    padding: 9px 14px;
    font-size: var(--wp--preset--font-size--xx-small);
    line-height: 16.5px;
    letter-spacing: 0.05em;
  }
  .m-acctable td:first-child {
    width: 77px;
    padding: 9px 10px;
  }
  /* SP は原稿でも潰れていないので、2行目だけ詰める処置は要らない */
  .m-acctable tr:nth-child(2) td {
    padding-block: 9px;
  }
  /* 行の高さも SP の原稿値(36 / 70 / 36x4 = 249)。PC の 72/99/74 が残ると
     表だけ 469 のままになる(実測でそうなった)。 */
  .m-acctable tr,
  .m-acctable tr:first-child {
    height: 36px;
  }
  .m-acctable tr:nth-child(2) {
    height: 70px;
  }
  .m-accroute td {
    font-size: var(--wp--preset--font-size--x-small);
  }
  :is(.muran-theme, .editor-styles-wrapper) .m-accroute {
    margin-top: 25px; /* リード 1265(h20) → 表 1310 */
  }
}
/* ==========================================================
   ① 基底(PC)— 旧 _39-access
   ========================================================== */
/* 会場マップ 880x626 */
:is(.muran-theme, .editor-styles-wrapper) .m-accmap {
  margin: 0;
}

.m-accmap img {
  display: block;
  width: 100%;
  aspect-ratio: 880/626;
  object-fit: cover;
}

/* Google Map の枠。**原稿は「埋め込み」の指定**だが、外部読み込みの可否が未確認なので
   いまは原稿の仮当て画像を置いてある(枠の寸法・角丸・枠線は原稿どおり)。 */
/* 枠線ぶんを外寸に含める(`core/post-featured-image` と同じで**既定は content-box**。
   原稿の「880x426(枠込み)」に合わせるには border-box を明示する = 規律の再発防止) */
:is(.muran-theme, .editor-styles-wrapper) .m-accgmap {
  box-sizing: border-box;
  margin: 47px 0 0; /* 表 2305 → 地図 2352 */
  aspect-ratio: 880/426;
  border: 1px solid #d1d5dc;
  border-radius: 11px;
  overflow: hidden;
  background: #e5e7eb;
}

.m-accgmap img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 駐車場マップ 421x421(本文の中央) */
:is(.muran-theme, .editor-styles-wrapper) .m-accparking {
  box-sizing: border-box;
  width: 421px;
  margin: 28px auto 0; /* 小見出し 3014(h30) → 3072 */
  padding: 1px;
  border: 1px solid #d1d5dc;
  border-radius: 8px;
  background: #e5e7eb;
}

.m-accparking img {
  display: block;
  width: 100%;
  aspect-ratio: 1/1;
  object-fit: cover;
}

/* ==========================================================
   ② 中間幅(≤1219)— 旧 _40-access-mid
   駐車場マップは版面が 421 を切ったら縮める
   ========================================================== */
@media (max-width: 781px) {
  :is(.muran-theme, .editor-styles-wrapper) .m-accparking {
    width: min(421px, 100%);
  }
  .m-accparking img {
    width: 100%;
    height: auto;
    aspect-ratio: 1/1;
  }
}
/* ==========================================================
   ③ SP(≤781)— 旧 _41-access-sp。原稿 `33:2949`(原稿 y − 91 = 実装 y)
   ========================================================== */
@media (max-width: 781px) {
  :is(.muran-theme, .editor-styles-wrapper) .m-accgmap {
    margin-top: 24px; /* 表 1478 → 地図 1502 */
    aspect-ratio: 350/165;
    border-radius: 4px;
  }
  :is(.muran-theme, .editor-styles-wrapper) .m-accparking {
    width: 100%;
    margin-top: 0;
    border-radius: 7px;
  }
}
/* ==========================================================
   ① 基底(PC)— 旧 _39-access
   ========================================================== */
/* コアの flow レイアウトが `> * + *` に付ける 24px を切る。
   （移設前は `.m-page :is(.m-acc, .m-accmain, .m-accsec, .m-accnotes) > *` の
   1本だった。`:is()` の詳細度は引数の最大なので、単一クラスに割っても等価） */
.m-page .m-accnotes > * {
  margin-block-start: 0;
}

:is(.muran-theme, .editor-styles-wrapper) .m-accnotes {
  margin-top: 56px; /* 駐車場マップ 3493 → 見出し 3549 */
  scroll-margin-top: 24px;
}

:is(.muran-theme, .editor-styles-wrapper) .m-accnotes__title {
  margin: 0;
  font-size: var(--wp--custom--font-size--15);
  font-weight: 700;
  line-height: 22px;
  color: var(--wp--preset--color--ink);
}

:is(.muran-theme, .editor-styles-wrapper) .m-accnotes__list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 16px 0 0; /* 見出し 3549(h22) → 1件目 3587 */
  padding: 0;
  list-style: none;
}

.m-accnotes__list li {
  position: relative;
  padding-left: 13px; /* ドット5 + gap8 */
  font-size: var(--wp--custom--font-size--13);
  line-height: 21px;
  color: var(--wp--preset--color--ink);
}

.m-accnotes__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 7px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--wp--preset--color--accent-red);
}

/* ==========================================================
   ② SP(≤781)— 旧 _41-access-sp。原稿 `33:2949`(原稿 y − 91 = 実装 y)
   ========================================================== */
@media (max-width: 781px) {
  :is(.muran-theme, .editor-styles-wrapper) .m-accnotes {
    margin-top: 24px; /* 駐車場マップ 2155 → 見出し 2179 */
  }
  :is(.muran-theme, .editor-styles-wrapper) .m-accnotes__list {
    margin-top: 22px; /* 見出し 2179(h22) → 1件目 2223 */
  }
}
/* ==========================================================
   公式キャラクターのモーダル(夢卵とは)— Figma `12:8791` 実測
     パネル 908x403 r16 / オーバーレイ #000@34%
     ✕ 33x33(右16・上17)/ 中身 row gap48 pad40/48
     左 キャラクターエリア 300 幅(136x126 を gap8 で2枚・上下中央)
     右 464 幅 col gap12 … タグ 132x33 #CC2200 r4 / 見出し 32/46 / 本文 15/27
   ヘッダーの参加ダイアログ(`.m-join`)と**同じ作り**だが、寸法も中身も別物なので
   クラスは分ける(規律33)。動き(開閉)の実装だけ JS 側で共有する。
   ========================================================== */
/* **画面中央に出す。** `<dialog>` の UA 既定は `margin:auto` で上下左右とも中央に来るが、
   このダイアログは post_content の中(`wp:html`)にあるので、コアの flow レイアウトが
   `margin-block-start:24px; margin-block-end:0` を当てて**縦の auto を潰す**
   (実測 margin: 24px 266px 0 → 上に寄る)。margin を戻して中央に固定する。 */
:is(.muran-theme, .editor-styles-wrapper) .m-chara {
  margin: auto;
}

.m-chara {
  /* 原稿の 908x403 は**枠込みの外寸**。既定の content-box のままだと
     padding 48x2 が外に付いて 1004 になる(規律の再発。表でも同じことをやった) */
  box-sizing: border-box;
  width: 908px;
  max-width: calc(100vw - 40px);
  padding: 40px 48px;
  border: 0;
  border-radius: 16px;
  background: #ffffff;
  color: var(--wp--preset--color--ink);
}

.m-chara::backdrop {
  background: rgba(0, 0, 0, 0.34);
}

.m-chara__close {
  position: absolute;
  z-index: 1;
  top: 17px;
  right: 16px;
  width: 33px;
  height: 33px;
  padding: 0;
  border: 0;
  background: url(../img/fg-modal-close.svg) center/33px 33px no-repeat;
  cursor: pointer;
}

/* 高さは原稿の「キャラクターエリア 323」で決まる(パネル 403 = 323 + pad40x2)。
   中身(右の文章 238)より高いので、min-height で原稿の箱を保つ。 */
.m-chara__inner {
  display: flex;
  align-items: center;
  gap: 48px;
  min-height: 323px;
}

/* キャラクター2枚。原稿は 300 幅の枠に 136x126 を gap8 で並べて中央寄せ */
.m-chara__figs {
  display: flex;
  flex: 0 0 300px;
  justify-content: center;
  align-items: center;
  gap: 8px;
}

.m-chara__fig {
  display: block;
  width: 136px;
  height: 126px;
  object-fit: contain;
}

.m-chara__body {
  flex: 1 1 464px;
  min-width: 0;
}

/* タグ 132x33(#CC2200 は原稿の値。ブランドの赤 #E6002D とは別) */
.m-chara__tag {
  display: inline-block;
  margin: 0;
  padding: 8px 10px;
  border-radius: 4px;
  background: #cc2200;
  font-size: var(--wp--preset--font-size--small);
  font-weight: 700;
  line-height: 17px;
  color: #ffffff;
}

.m-chara__title {
  margin: 12px 0 0;
  font-size: var(--wp--custom--font-size--32);
  font-weight: 700;
  line-height: 46px;
  color: var(--wp--preset--color--ink);
}

.m-chara__desc {
  margin: 12px 0 0;
  font-size: var(--wp--custom--font-size--15);
  line-height: 27px;
  letter-spacing: 0.05em;
  color: #444;
}

/* SP のカンプは無い(原稿は `_modal_PC` だけ)。
   幅が足りない帯では**縦積み**にして、キャラクターを上に置く。 */
@media (max-width: 781px) {
  .m-chara {
    padding: 32px 20px 28px;
  }
  .m-chara__close {
    top: 10px;
    right: 10px;
    width: 24px;
    height: 24px;
    background-size: 24px 24px;
  }
  .m-chara__inner {
    flex-direction: column;
    gap: 20px;
  }
  .m-chara__figs {
    flex: 0 0 auto;
  }
  /* 28px だと「むーちゃん・らんちゃん」が2行に折れるので 24px にする
     (SP のカンプが無いのでこちらの判断。1行に収まる最大) */
  .m-chara__title {
    font-size: 24px;
    line-height: 34px;
  }
  .m-chara__desc {
    font-size: var(--wp--preset--font-size--small);
    /* ⚠ **この幅では字間が字送りの 5% にならない**。
       原稿は幅ごとに font-size を変えたのに、**字間は PC の px を据え置いて**いた
       (SP 側で letter-spacing を書き直していない)。track() にすると見た目が変わるので、
       **いまの描画を保つために px を明示**する。原稿がこの字間を意図したのかは未確認。
       → __doc__/rebuild-plan.md 4.8 */
    letter-spacing: 0.75px;
    line-height: 24px;
  }
}
/* ==========================================================
   ① 押し所 — 本文の中の画像を包む <button>
   ⚠ `<button>` はブラウザ既定で `display:inline-block` / 独自の枠と地色を持つ。
     全部消したうえで **`display:block; width:100%`** にしないと、
     `.m-accmap img { width:100% }` が「ボタンの幅」を基準にして縮む。
   ========================================================== */
.m-lightbox__trigger {
  display: block;
  position: relative;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  cursor: zoom-in;
}

/* 虫めがね(素材を増やさず CSS で描く。線画の語彙に合わせて線幅2)。
   ⚠ 押し所の中に置くので `pointer-events` は既定のまま(ボタンが受ける)。 */
.m-lightbox__zoomicon {
  position: absolute;
  right: 12px;
  bottom: 12px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.55);
  transition: background-color var(--m-nudge-ease), transform var(--m-nudge-ease);
}

/* レンズ */
.m-lightbox__zoomicon::before {
  content: "";
  position: absolute;
  left: 11px;
  top: 11px;
  width: 14px;
  height: 14px;
  box-sizing: border-box;
  border: 2px solid #ffffff;
  border-radius: 50%;
}

/* 柄 */
.m-lightbox__zoomicon::after {
  content: "";
  position: absolute;
  left: 25px;
  top: 24px;
  width: 2px;
  height: 8px;
  border-radius: 1px;
  background: #ffffff;
  transform: rotate(-45deg);
  transform-origin: top center;
}

@media (hover: hover) {
  .m-lightbox__trigger:hover .m-lightbox__zoomicon {
    background: rgba(0, 0, 0, 0.8);
    transform: scale(1.08);
  }
}
/* ==========================================================
   ② ダイアログ本体
   `showModal()` は最上位レイヤーに出るので、祖先の `overflow` や `z-index` に縛られない。
   Esc・フォーカストラップ・背景の不活性化はネイティブが持っている。
   ========================================================== */
dialog.m-lightbox {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  height: 100%;
  max-height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  overflow: hidden;
}

dialog.m-lightbox::backdrop {
  background: rgba(0, 0, 0, 0.88);
}

/* 閉じる。**丸い下地 + 白い ✕**(2026-08-07 のユーザ指摘「見えにくい」で作り直した)。
   元は素材をそのまま背景に敷いていたが、**`fg-modal-close.svg` は `fill="#000000"`**
   で、以前ここに書いてあった「白抜きなので暗い地でもそのまま乗る」は**誤り**だった。
   参加ダイアログ・キャラクターダイアログは**白いパネルの上**なので黒で成立していて、
   暗い地に置いたこの部品だけが割を食っていた。

   ⚠ 地色は2通りある。**どちらでも見える必要がある**:
     ・収めた状態 … 暗幕(#000@88%)の上   → 黒い ✕ は**ほぼ見えない**
     ・拡大した状態 … 白い地図が下を流れる → 白い ✕ は**完全に見えない**(実測)
   → **暗い円**を敷いて白い ✕ を乗せる。同じ部品の虫めがね
     (`.m-lightbox__zoomicon`)が既にこの作りなので、語彙も揃う。

   ✕ は素材を **`mask` で白く塗り直して**使う(形は3つのダイアログで共通のまま)。 */
.m-lightbox__close {
  position: absolute;
  z-index: 2;
  top: 16px;
  right: 16px;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.55);
  cursor: pointer;
  transition: background-color var(--m-nudge-ease), transform var(--m-nudge-ease);
}

.m-lightbox__close::before {
  content: "";
  position: absolute;
  inset: 0;
  background: #ffffff;
  -webkit-mask: url(../img/fg-modal-close.svg) center/18px 18px no-repeat;
  mask: url(../img/fg-modal-close.svg) center/18px 18px no-repeat;
}

@media (hover: hover) {
  .m-lightbox__close:hover {
    background: rgba(0, 0, 0, 0.8);
    transform: scale(1.08);
  }
}
/* 絵の置き場。**初期は「画面に収める」**、拡大中は原寸ではみ出すのでスクロールで見る。
   ⚠ **`display:grid` + `place-items:center` にしない**(2026-08-06 に実測で発覚)。
     グリッドの行は中身に合わせて伸びるので、子の `max-height:100%` が
     **その伸びた行**を基準に解決してしまい、@1440 で 1002px の絵が 900px の画面から
     はみ出したまま「収まっている」ことになる。
     flex + `margin:auto` なら ①縮小時は中央 ②拡大時は左上から素直にスクロールできる
     (`align-items:center` だと拡大時に上端へスクロールできなくなる有名な罠も避けられる)。
   高さが確定した箱(`position:absolute; inset:0`)の**content box**を基準にするので、
   `max-height:100%` は padding を引いた値になる。 */
.m-lightbox__stage {
  box-sizing: border-box;
  position: absolute;
  inset: 0;
  padding: 64px 16px 52px;
  overflow: auto;
  overscroll-behavior: contain;
  display: flex;
  -webkit-overflow-scrolling: touch;
}

/* ⚠ **`width: auto` を必ず書く**(2026-08-07 のユーザ指摘で発覚)。
   `<img>` は `width="1760" height="1252"` の属性を持っていて、これは
   **presentational hint として `width` / `height` プロパティに載る**。
   `height: auto` だけ書くと `width` は 1760px のまま残るので、
   ブラウザは「幅を max-width で切る」「高さを max-height で切る」を**別々に**やる:

     width  1760 → max-width  100%(1408)で 1408
     height auto → 1408/1.406 = 1001 → max-height 100%(784)で 784
     = **1408x784(比 1.796)**。原寸の比 1.406 に対して横に 1.28 倍伸びる

   **両方 auto** にして初めて CSS 2.1 §10.4 の「制約違反」の表が働き、
   縦横比を保ったまま**きつい方の制約**に合わせてくれる(→ 1102x784)。

   出るのは **max-height が効くときだけ**なので、
   ・横長の絵(スケジュール 1344x552)では出ない
   ・SP の縦長ビューポートでも出ない
   = **会場マップを PC で開いたときだけ**表に出ていた。→ 規律109 */
.m-lightbox__img {
  display: block;
  margin: auto;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  cursor: zoom-in;
  background: #ffffff;
}

/* 拡大中。原寸を JS が `width` に入れる(素材の `naturalWidth`)。
   はみ出したぶんは stage 側のスクロールで見る = ピンチ操作なしでも読める。 */
.m-lightbox__img.is-zoom {
  max-width: none;
  max-height: none;
  cursor: zoom-out;
}

.m-lightbox__hint {
  position: absolute;
  z-index: 2;
  left: 0;
  right: 0;
  bottom: 16px;
  margin: 0;
  text-align: center;
  font-size: var(--wp--preset--font-size--x-small);
  line-height: 20px;
  letter-spacing: 0.05em;
  color: rgba(255, 255, 255, 0.75);
}

/* 拡大中は案内を出しっぱなしにしない(次の操作は「戻す」なので文言が変わる) */
.m-lightbox.is-zoomed .m-lightbox__hint {
  visibility: hidden;
}

/* ⚠ **収めた時点で既に原寸以上のときは、案内もカーソルも出さない**(2026-08-07)。
   スケジュール表(1344px)は **@1440 の PC で既に原寸**なので、押しても1px も変わらない。
   それでも「画像を押すとさらに拡大できます」と出ていた = 嘘の案内。
   判定は `muran.js` の `syncZoomable()`(絵が届いてから / 幅が変わるたび)。 */
.m-lightbox.is-nozoom .m-lightbox__hint {
  visibility: hidden;
}

.m-lightbox.is-nozoom .m-lightbox__img {
  cursor: default;
}

/* ==========================================================
   ③ SP(≤781)
   ========================================================== */
@media (max-width: 781px) {
  .m-lightbox__zoomicon {
    right: 8px;
    bottom: 8px;
    width: 32px;
    height: 32px;
  }
  .m-lightbox__zoomicon::before {
    left: 9px;
    top: 9px;
    width: 11px;
    height: 11px;
  }
  .m-lightbox__zoomicon::after {
    left: 20px;
    top: 19px;
    height: 7px;
  }
  .m-lightbox__close {
    top: 8px;
    right: 8px;
    width: 32px;
    height: 32px;
  }
  .m-lightbox__close::before {
    -webkit-mask-size: 15px 15px;
    mask-size: 15px 15px;
  }
  .m-lightbox__stage {
    padding: 48px 8px 44px;
  }
}

/*# sourceMappingURL=muran.css.map */