@charset "UTF-8";

/* ============================================================
   niconowa-child / main.css

   ■ カスケードレイヤー構成（宣言順がそのまま優先順位。後ろほど強い）
     base      … 要素セレクタ・タイポグラフィの下地
     layout    … l-container など配置の骨格
     components… 再利用する UI 部品（BEM・nico- 接頭辞）
     template  … 特定テンプレート専用（archive-construction 等）
     utility   … 単一目的の上書きクラス

     詳細度ではなくレイヤー順で優先順位が決まるため、
     将来ファイルを分割して個別に wp_enqueue_style() しても、
     読み込み順で優先順位が壊れない。レイヤー名は変えないこと。

   ■ @layer に入れてはいけないもの（重要）
     CSS では「レイヤーに属さない宣言」が「レイヤー内の宣言」より
     常に強い（詳細度に関係なく勝つ）。
     親テーマ Twenty Twenty-Five と theme.json が生成する global styles は
     すべてレイヤー外に出力されるため、それらを上書きする目的の宣言を
     @layer の中に書くと効かなくなる。
     → コア／親テーマの上書きが目的の宣言だけ、下の「レイヤー外」節に書く。
        それ以外は必ずどれかのレイヤーに入れる。
   ============================================================ */

@layer base, layout, components, template, utility;

/* ============================================================
   レイヤー外：デザイントークン ＋ コア変数の上書き
   theme.json が :root に出力する値を上書きするため、
   この節は @layer に入れないこと（入れると効かない）。
   ============================================================ */

:root {
  /* CLAUDE.md のレスポンシブ基準 */
  --content-max: 1134px;
  --content-pad: 32px;

  /* ヘッダーの高さ。ファーストビューの高さ計算に使う */
  --nico-header-h: 100px;

  /* 和文のみのスタック。基本フォント（theme.json）は欧文に Figtree を
     先頭で当てているため、数字までりょうゴシックで組みたい箇所で使う。 */
  --nico-font-ja: ryo-gothic-plusn, 'Hiragino Sans', 'Noto Sans JP', 'Yu Gothic', sans-serif;

  /* ブロック側のルートパディング（theme.json 由来）を --content-pad に追従させる。
     これで .l-container で組んだ領域と、ブロックエディタで組んだ領域の
     左右余白が一致する。theme.json はメディアクエリを書けないため、
     SP への切替は下のメディアクエリ側で行う。 */
  --wp--style--root--padding-left: var(--content-pad);
  --wp--style--root--padding-right: var(--content-pad);
}

@media (max-width: 767px) {
  /* SP 確定（375px 基準・左右 18px） */
  :root {
    --content-pad: 18px;
    --nico-header-h: 64px;
  }

  /* フォントサイズの SP 切替。
     theme.json はメディアクエリを書けないため、
     :root に出力されるプリセット変数をここで上書きする。
     見出しは theme.json 側で var:preset|font-size|* を参照しているので、
     この上書きだけで h1〜h4 まで追従する。
     PC → SP：42→24 / 32→20 / 24→18 / 18→16 / 16→14（px） */
  :root {
    --wp--preset--font-size--xx-large: 1.5rem;
    --wp--preset--font-size--x-large: 1.25rem;
    --wp--preset--font-size--large: 1.125rem;
    --wp--preset--font-size--medium: 1rem;
    --wp--preset--font-size--small: 0.875rem;
  }
}

/* ============================================================
   レイヤー外：ヘッダー／SP メニューのリンク色と下線
   theme.json の elements.link はレイヤー外に出力されるため、
   その上書きが目的のこのブロックだけ @layer に入れない。
   （レイアウト・サイズ側は @layer components にある）
   ============================================================ */

.nico-header__logo,
.nico-header__link,
.nico-menu__link,
.nico-menu__utility-link {
  text-decoration: none;
}

.nico-header__logo,
.nico-header__link {
  color: var(--wp--preset--color--contrast);
}

.nico-header__logo:hover,
.nico-header__link:hover {
  color: var(--wp--preset--color--accent-text);
}

/* 現在地。色だけに頼らないよう下線でも示す（WCAG 1.4.1） */
.nico-header__link[aria-current='page'] {
  text-decoration: underline;
  text-decoration-color: var(--wp--preset--color--accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 8px;
}

.nico-menu__link {
  color: var(--wp--preset--color--base);
}

.nico-menu__utility-link {
  color: #b4b4b4;
}

.nico-menu__utility-link:hover {
  color: var(--wp--preset--color--base);
}

/* トップページのリンク（同じくレイヤー外に置く必要がある） */
.nico-btn,
.nico-notice__link,
.nico-posts__link {
  text-decoration: none;
}

.nico-btn,
.nico-notice__link {
  color: var(--wp--preset--color--base);
}

.nico-posts__link {
  color: var(--wp--preset--color--contrast);
}

.nico-posts__link:hover .nico-posts__title,
.nico-notice__link:hover .nico-notice__text {
  text-decoration: underline;
}

/* イベント一覧（niconowa/event-archive）の行リンク・ページネーション。
   レイアウト・サイズは @layer template 側（.nico-event-archive__*）。 */
.nico-event-archive__link {
  text-decoration: none;
  color: var(--wp--preset--color--contrast);
}

.nico-event-archive__link:hover .nico-event-archive__title {
  text-decoration: underline;
}

.nico-event-archive__page {
  text-decoration: none;
  color: var(--wp--preset--color--contrast);
}

.nico-event-archive__page:not(.is-current):not(.is-dots):hover,
.nico-event-archive__page:not(.is-current):not(.is-dots):focus-visible {
  color: var(--wp--preset--color--base);
}

.nico-footer__link,
.nico-footer__policy-link {
  text-decoration: none;
}

.nico-footer__link,
.nico-footer__mail {
  color: var(--wp--preset--color--base);
}

.nico-footer__policy-link {
  color: #b4b4b4;
}

.nico-footer__link:hover,
.nico-footer__policy-link:hover,
.nico-footer__mail:hover {
  color: var(--wp--preset--color--accent);
}

/* メールアドレスは前後が非リンクのテキストなので、色以外の手がかりとして
   下線を残す（WCAG 1.4.1「色の使用」） */
.nico-footer__mail {
  text-decoration: underline;
}

/* 下層ページの帯のパンくずリンク。
   カンプでは現在地と同じ #442D16 で下線なし。
   リンクだと分かる手がかりが色でも下線でも無くなってしまうため、
   hover / focus で下線を出している（レイアウトは @layer components 側）。 */
.nico-pagehead__crumb-link {
  color: var(--wp--preset--color--contrast);
  text-decoration: none;
}

.nico-pagehead__crumb-link:hover,
.nico-pagehead__crumb-link:focus-visible {
  color: var(--wp--preset--color--accent-text);
  text-decoration: underline;
}

/* --------------------------------------------
   マウスクリック時のフォーカスリングを消す。

   親テーマ Twenty Twenty-Five の style.css に
     :where(.wp-site-blocks *:focus) { outline-width: 2px; outline-style: solid; }
   があり、:focus-visible ではなく :focus のため、
   クリックしただけでもリンクやボタンが枠で囲まれてしまう。

   キーボード操作時（:focus-visible）のフォーカス表示は
   WCAG 2.4.7 の必須要件なので残す。ここで消すのはマウス操作時だけ。

   親テーマの指定はレイヤー外に出力されるため、この打ち消しも @layer に入れない。
   -------------------------------------------- */

.wp-site-blocks *:focus:not(:focus-visible) {
  outline: none;
}

/* --------------------------------------------
   ヘッダー／main／フッターの間に入るブロック間隔を消す。

   コアが theme.json の blockGap から
     :where(.wp-site-blocks) > * { margin-block-start: 1.2rem; }
   を出力するため、main（＝ .wp-site-blocks の 2 番目の子）に
   19.2px の上マージンが付き、ヘッダーと MV の間が空いてしまう。
   フッターの上にも同じ隙間ができる。

   blockGap 自体はエディタで組んだ本文のブロック間隔にも使うので
   0 にはせず、最上位の子だけを対象に打ち消す。

   コアの指定はレイヤー外に出力されるため、この打ち消しも @layer に入れない。
   -------------------------------------------- */

:where(.wp-site-blocks) > * {
  margin-block-start: 0;
}

/* ============================================================
   layout
   ============================================================ */

@layer layout {
  .l-container {
    width: min(100% - var(--content-pad) * 2, var(--content-max));
    margin-inline: auto;
  }
}

/* ============================================================
   components
   ============================================================ */

@layer components {
  /* --------------------------------------------
     サイトヘッダー（niconowa/site-header）
     数値は docs/header-spec.md（カンプ実測値）に対応する。
     -------------------------------------------- */

  .nico-header {
    position: relative;
    z-index: 100;
  }

  .nico-header__bar {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100px;
    background-color: var(--wp--preset--color--base);
    /* XD のドロップシャドウ X:0 / Y:3 / ぼかし:8。色と不透明度は未確定のため暫定値 */
    box-shadow: 0 3px 8px rgb(0 0 0 / 16%);
    /* PC 1920px 時に左 56px / 右 73px。768〜1197px は幅だけ流動で縮める */
    padding-inline: clamp(20px, 2.92vw, 56px) clamp(24px, 3.8vw, 73px);
  }

  .nico-header__logo {
    font-size: 36px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.14em;
  }

  .nico-header__list {
    display: flex;
    align-items: center;
    /* 末尾の字送り分を含んだボックス間の間隔 */
    gap: 46px;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .nico-header__link {
    display: inline-block;
    font-size: 16px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.14em;
  }

  .nico-header__toggle,
  .nico-menu {
    display: none;
  }

  /* --------------------------------------------
     SP：ハンバーガーと全画面メニュー
     -------------------------------------------- */

  @media (max-width: 767px) {
    .nico-header__bar {
      height: 64px;
      /* ロゴ側 20px / ハンバーガー側 18px（カンプ実測） */
      padding-inline: 20px 18px;
    }

    .nico-header__logo {
      font-size: 24px;
    }

    .nico-header__nav {
      display: none;
    }

    .nico-header__toggle {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 5px;
      /* 上下に余白を持たせてタップ領域を確保する */
      padding: 12px 10px 6px;
      margin-inline-end: -10px;
      border: 0;
      background: none;
      color: #707070;
      cursor: pointer;
    }

    .nico-header__icon {
      display: block;
    }

    .nico-header__icon--close {
      display: none;
    }

    .nico-header__toggle-label {
      font-size: 8px;
      line-height: 1;
      letter-spacing: 0.02em;
      color: #63594c;
    }

    /* 開いているとき：バーを透過させ、下の全画面メニューを見せる */
    .nico-header.is-menu-open .nico-header__bar {
      background-color: transparent;
      box-shadow: none;
    }

    /* カンプの展開状態にロゴは出てこない */
    .nico-header.is-menu-open .nico-header__logo {
      visibility: hidden;
    }

    .nico-header.is-menu-open .nico-header__toggle {
      color: #eceae0;
    }

    .nico-header.is-menu-open .nico-header__icon--open {
      display: none;
    }

    .nico-header.is-menu-open .nico-header__icon--close {
      display: block;
    }

    .nico-header.is-menu-open .nico-header__toggle-label {
      color: var(--wp--preset--color--base);
    }

    .nico-menu {
      position: fixed;
      z-index: 1;
      inset: 0;
      display: block;
      padding: 81px 20px 40px;
      overflow-y: auto;
      overscroll-behavior: contain;
      background-color: #63594c;
    }

    .nico-menu[hidden] {
      display: none;
    }

    /* メニューを開いている間は背面をスクロールさせない */
    html.nico-menu-open {
      overflow: hidden;
    }

    .nico-menu__list,
    .nico-menu__utility {
      margin: 0;
      padding: 0;
      list-style: none;
    }

    .nico-menu__item {
      padding-bottom: 10px;
      border-bottom: 1px solid #b4b4b4;
    }

    /* 1 行の送り 68px（内容 28 ＋ 下 10 ＋ 罫線 1 ＋ 上 29） */
    .nico-menu__item + .nico-menu__item {
      padding-top: 29px;
    }

    .nico-menu__link {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      min-height: 28px;
      font-size: 14px;
      line-height: 1;
      letter-spacing: 0.02em;
    }

    .nico-menu__utility {
      margin-top: 42px;
    }

    .nico-menu__utility-item + .nico-menu__utility-item {
      margin-top: 11px;
    }

    .nico-menu__utility-link {
      font-size: 12px;
      line-height: 1;
      letter-spacing: 0.02em;
    }
  }

  /* --------------------------------------------
     オレンジの丸＋シェブロン
     SP メニューとフッターで共通の部品
     -------------------------------------------- */

  .nico-chevron {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background-color: var(--wp--preset--color--accent);
    color: var(--wp--preset--color--base);
  }

  /* --------------------------------------------
     サイトフッター（niconowa/site-footer）
     数値は docs/footer-spec.md（カンプ実測値）に対応する。
     -------------------------------------------- */

  .nico-footer__body {
    /* 3px のドットを 23px 間隔で敷いた地（カンプ実測） */
    padding-block: 146px 149px;
    background-color: #69625a;
    background-image: radial-gradient(#726c65 1.5px, transparent 1.5px);
    background-size: 23px 23px;
    background-position: 3px 3px;
  }

  .nico-footer__inner {
    width: min(100% - var(--content-pad) * 2, 1200px);
    margin-inline: auto;
  }

  .nico-footer__body .nico-footer__inner {
    display: flex;
    justify-content: space-between;
    gap: 30px;
  }

  .nico-footer__logo {
    margin: 0;
    font-size: 32px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.14em;
    color: var(--wp--preset--color--base);
  }

  .nico-footer__info {
    margin: 41px 0 0;
    font-size: 16px;
    line-height: 34px;
    letter-spacing: 0.14em;
    color: var(--wp--preset--color--base);
  }

  .nico-footer__nav {
    display: flex;
    gap: 30px;
  }

  .nico-footer__list {
    width: 380px;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  /* 1 行の送り 60px（内容 28 ＋ 下 15 ＋ 罫線 1 ＋ 上 16） */
  .nico-footer__item {
    padding-bottom: 15px;
    border-bottom: 1px solid #b4b4b4;
  }

  .nico-footer__item + .nico-footer__item {
    padding-top: 16px;
  }

  .nico-footer__link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    /* 丸は罫線の右端から 13px 内側 */
    padding-inline-end: 13px;
    min-height: 28px;
    font-size: 16px;
    line-height: 1;
    letter-spacing: 0.02em;
  }

  .nico-footer__bottom {
    background-color: #442d16;
  }

  .nico-footer__bottom .nico-footer__inner {
    display: flex;
    /* DOM はポリシー → コピーライトの順。PC はコピーライトを左に置く */
    flex-direction: row-reverse;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    min-height: 95px;
  }

  .nico-footer__policy {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .nico-footer__policy-item + .nico-footer__policy-item::before {
    content: '｜';
    margin-inline: 30px;
    color: #b4b4b4;
  }

  .nico-footer__policy-link,
  .nico-footer__copyright {
    font-size: 12px;
    line-height: 1;
    letter-spacing: 0.02em;
  }

  .nico-footer__copyright {
    margin: 0;
    color: #b4b4b4;
  }

  /* フッター専用ブレイクポイント（サイト共通の 767px ではない）。

     フッターは PC で「ブランド ＋ ナビ 2 列」の横並びだが、
     ・ナビは 380px × 2 ＋ 列間 30px ＝ 790px より縮まない
     ・ブランドは info@niconowa.com が改行できないため 201px より縮まない
     合計 1021px が本体に必要な内側幅で、これを下回った時点で
     .nico-footer__inner（min(100% - 32px * 2, 1200px)）から右へはみ出す。
     1021 ＋ 32 * 2 ＝ 1085px がぎりぎり収まる限界。
     メディアクエリの幅がスクロールバーを含むかはブラウザで揺れる（＝最大 17px ずれる）ため、
     余裕を見て 1100px を境界にしている。
     ナビ列の 380px を変えるとカンプの PC レイアウトが崩れるため、
     幅を流動にするのではなく切り替えで対応している。 */
  @media (max-width: 1100px) {
    .nico-footer__body {
      padding-block: 46px 0;
    }

    .nico-footer__body .nico-footer__inner,
    .nico-footer__nav {
      display: block;
    }

    .nico-footer__brand {
      text-align: center;
    }

    .nico-footer__logo {
      font-size: 24px;
    }

    .nico-footer__info {
      margin-top: 21px;
      font-size: 12px;
      line-height: 24px;
    }

    .nico-footer__nav {
      /* リストは本文より内側に寄る（カンプ実測 47px） */
      margin-top: 33px;
      padding-inline: 47px;
      padding-bottom: 42px;
    }

    .nico-footer__list {
      width: auto;
    }

    /* 1 行の送り 58px（内容 28 ＋ 下 10 ＋ 罫線 1 ＋ 上 19） */
    .nico-footer__item {
      padding-bottom: 10px;
    }

    .nico-footer__item + .nico-footer__item,
    .nico-footer__list + .nico-footer__list .nico-footer__item:first-child {
      padding-top: 19px;
    }

    .nico-footer__link {
      padding-inline-end: 0;
      font-size: 14px;
    }

    .nico-footer__bottom .nico-footer__inner {
      flex-direction: column;
      gap: 34px;
      min-height: 0;
      padding-block: 35px 56px;
      text-align: center;
    }

    .nico-footer__policy {
      flex-direction: column;
      /* 行の送り 32px（12 ＋ 20） */
      gap: 20px;
    }

    .nico-footer__policy-item + .nico-footer__policy-item::before {
      content: none;
    }
  }

  /* --------------------------------------------
     トップページ共通（niconowa/front-page）
     数値は docs/front-page-spec.md（カンプ実測値）に対応する。
     -------------------------------------------- */

  .nico-front__heading {
    margin: 0;
    font-size: 32px;
    line-height: 1.4;
    letter-spacing: 0.14em;
    color: var(--wp--preset--color--contrast);
  }

  .nico-front__action {
    margin: 0;
    text-align: center;
  }

  /* オレンジのピルボタン。240px、幅広版は 300px */
  .nico-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 240px;
    height: 56px;
    border-radius: 9999px;
    background-color: var(--wp--preset--color--accent);
    font-size: 16px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.02em;
  }

  .nico-btn--wide {
    width: 300px;
  }

  .nico-btn:hover {
    background-color: #d95f28;
  }

  .nico-btn__chevron {
    position: absolute;
    right: 24px;
    display: flex;
  }

  /* タグ（イベント・特徴カード共通の器）

     色の変種は 2 系統ある。混ぜて使わないこと。
       --a / --b                    … トップの 3 カード（施設について）。カンプの色。
       --status / --fee / --target   … イベントのタグ。タクソノミーごとに固定。

     文字は 12px Bold で WCAG の「大きな文字」に当たらないため、
     どの変種もコントラスト比 4.5:1 以上を満たす値を選んである（下のコメント参照）。 */
  .nico-tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* カンプのタグは 76 × 22（イベント）／121 × 28（3 カード）で、
       いずれも枠の外形の値。border-box にしないと min-width / min-height に
       左右のパディング 20px が足されて 96 × 30 になり、
       日付の横に 3 つ並べたときに収まらなくなる。 */
    box-sizing: border-box;
    min-width: 76px;
    min-height: 22px;
    padding: 4px 10px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.04em;
    color: var(--wp--preset--color--base);
  }

  /* --- トップの 3 カード用（カンプの色） --- */

  .nico-tag--a {
    background-color: #deab01;
  }

  .nico-tag--b {
    background-color: #7f474c;
  }

  /* --- イベントのタグ用（タクソノミーごとに固定） ---

     開催ステータス＝グレー／参加費用＝赤／ターゲット＝薄いグレー。
     グレーと赤は新しい色を増やさず既存パレットから採っている
     （#69625a はフッターの地、#8f2014 は「かけはし」のバー）。 */

  /* 開催ステータス。白文字とのコントラスト 6.0:1 */
  .nico-tag--status {
    background-color: #69625a;
  }

  /* 参加費用。白文字とのコントラスト 8.8:1 */
  .nico-tag--fee {
    background-color: #8f2014;
  }

  /* ターゲット。文字は黒の代わりにサイトの文字色（ダークブラウン）を使う。
     コントラスト 8.1:1。

     #eceae0（見出し帯の地）だと、トップのイベント欄の背景 #f8f8f5 との差が
     1.13:1 しかなくタグの形が見えないため、少し濃いこの値を起こしている。 */
  .nico-tag--target {
    background-color: #cfcbc0;
    color: var(--wp--preset--color--contrast);
  }

  /* --------------------------------------------
     ファーストビュー（MV ＋ 重要なお知らせ）

     MV は幅から縦横比で高さが決まり、重要なお知らせはその下に自然な高さで置く。
     0 件のときは MV だけになる。

     以前は min-height: calc(100dvh - ヘッダー) で 1 画面に引き伸ばしていたが、
     縦に長い画面だと MV 枠が画像（1748 × 1004＝比 1.741）より縦長になり、
     object-fit: cover が画像の横を切り落としてしまうため、やめている。
     基準の 1920 × 1080 では MV 840 ＋ 重要なお知らせ 140 ＝ 980 ＝
     100dvh − ヘッダー 100 になり、従来どおりちょうど 1 画面に収まる。
     -------------------------------------------- */

  .nico-fv {
    display: flex;
    flex-direction: column;
  }

  /* --------------------------------------------
     MV
     -------------------------------------------- */

  .nico-mv {
    position: relative;
    flex: 0 0 auto;
    /* カンプの MV 枠 1920 × 840。幅が変わっても比率は固定。

       この比（2.286）は画像の比（1748 : 1004 ＝ 1.741）より必ず横長なので、
       object-fit: cover は縦方向にしか効かない。
       ＝ どの画面幅でも画像の横が切れない。切れるのは手前の道路側だけで、
       これはカンプと同じ切り方。
       高さが幅に追従するため、% で置いた文字やロゴの位置も
       すべての幅で 1920px 時と同じ配置になる。 */
    aspect-ratio: 1920 / 840;
    min-height: 0;
    overflow: hidden;
    /* 空。mv.webp は空を抜いたカットアウト素材なので、空はここで描く。
       空を焼き込んだ版（同じパース）の空部分を、画像を枠に敷いたときの
       位置に合わせて縦 5 点でサンプリングした実測値。
       横方向にも振れがあるが、屋根の稜線ぎわの色が合っていれば
       継ぎ目は出ないため、縦グラデーションのみで近似している。 */
    background-color: #d5e3ee;
    background-image: linear-gradient(
      180deg,
      #dce7ef 0%,
      #c9deec 17%,
      #c5deec 35%,
      #e2e6e7 55%,
      #dae4e6 76%
    );
  }

  /* FV の高さに合わせて切り抜く。
     mv.webp は 1748 × 1004 で、MV 枠（1920 × 840 相当）より縦に余る。
     上端を固定すると屋根の頂点が枠の 44% に来て、コピー（枠の 18〜44%）と
     ロゴのすぐ下に収まる。カンプ（トップページ PDF）の 41% ともほぼ一致する。
     下端固定にすると屋根が 6% まで上がってコピーとロゴに完全に掛かるので、
     上端固定を変えないこと。手前の道路側が切れるのはこのための代償。 */
  .nico-mv__image {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
  }

  /* 画像に対する相対位置で置く。1920px 時にカンプの座標と一致する。
     コピー（3 行）／スラッシュ／ロゴ の横並び。 */
  .nico-mv__inner {
    position: absolute;
    top: 4.1%;
    left: 15.2%;
    display: flex;
    align-items: center;
    width: 67.5%;
  }

  .nico-mv__copy {
    flex: 0 0 47.6%;
  }

  /* 1920px でカンプの 42px。それ未満は画面幅に比例して縮む（42 / 1920 ＝ 2.1875vw）。
     clamp の下限（旧 22px）を外してあるのは、下限で止まると
     画像だけが縮み続けて文字が建物に重なるため。
     1920px を超えたときだけ 42px で頭打ちにする。 */
  .nico-mv__year,
  .nico-mv__title {
    margin: 0;
    text-align: center;
    font-size: min(42px, 2.1875vw);
    /* ベースライン間隔 80px（カンプ実測 78 / 83） */
    line-height: 1.905;
    letter-spacing: 0.14em;
  }

  /* 例外：「2029年度」は数字も含めて全部りょうゴシックの Bold で組む。
     基本スタックは欧文が Figtree のため、和文のみのスタックに差し替える。 */
  .nico-mv__year {
    font-family: var(--nico-font-ja);
    font-weight: 700;
    color: var(--wp--preset--color--base);
  }

  /* 「2029年度」の背景になるオレンジの平行四辺形。
     MV.png の実測：243 × 54、上辺が下辺より 14px 右（約 15 度）。
     文字は傾けたくないので、地だけ疑似要素で傾ける。 */
  .nico-mv__year-mark {
    position: relative;
    isolation: isolate;
    display: inline-block;
    /* 42px 基準で上下 6px / 左右 16px */
    padding: 0.143em 0.381em;
    line-height: 1;
  }

  .nico-mv__year-mark::before {
    content: '';
    position: absolute;
    z-index: -1;
    inset: 0;
    background-color: var(--wp--preset--color--accent);
    transform: skewX(-15deg);
  }

  .nico-mv__title {
    color: var(--wp--preset--color--contrast);
    font-weight: 700;
  }

  /* カンプでは 3 行とも 1 行組み。字送りを含めた実寸が
     .nico-mv__copy の幅をわずかに超えるため、放っておくと
     1920px 以外の幅で「新しい葛城市當麻複合施設が」が 2 行に折れ、
     コピー全体が下に伸びて MV の建物に重なる。 */
  .nico-mv__row {
    display: block;
    white-space: nowrap;
  }

  /* 「スタート」＝ 56px のオレンジ袋文字。
     paint-order で線を文字の背面に回し、外側に約 3px 出るようにする。 */
  .nico-mv__mark {
    /* 56 / 42 */
    font-size: 1.333em;
    line-height: 1;
    color: var(--wp--preset--color--base);
    /* 6 / 1920 ＝ 0.3125vw。paint-order で線が背面に回るため外側には約 3px 出る */
    -webkit-text-stroke: min(6px, 0.3125vw) var(--wp--preset--color--accent);
    paint-order: stroke fill;
  }

  /* コピーとロゴの間のスラッシュ（21 × 58、約 20 度） */
  .nico-mv__divider {
    flex: 0 0 auto;
    /* 文字と同じく 1920px 基準で比例させる（3 / 1920、58 / 1920） */
    width: max(1px, min(3px, 0.15625vw));
    height: min(58px, 3.0208vw);
    margin-inline: 3.2% 5.9%;
    background-color: var(--wp--preset--color--contrast);
    transform: skewX(-20deg);
  }

  .nico-mv__logo {
    flex: 0 0 41.8%;
    width: 41.8%;
    height: auto;
  }

  /* --------------------------------------------
     重要なお知らせ
     -------------------------------------------- */

  .nico-notice {
    flex: 0 0 auto;
    /* 上から下へのグラデーション。
       PDF のシェーディング実測（/Coords [960 0 960 140] ＝垂直、
       /C0 [.267 .176 .086] → /C1 [.102 .067 .031]）に対応する。 */
    background-image: linear-gradient(180deg, #442d16, #1a1108);
  }

  /* 区切り線はコンテンツ左端から 257px、本文はさらに 81px 右
     （カンプ実測：アイコン 360 / 区切り線 617 / 本文 699）

     すべて 1920px で実測値ちょうどになる vw 換算＋下限つき。
     画面幅が縮むと FV 内での比率を保ったままバーも小さくなる。
     下限は文字が読めなくなるのを防ぐためのもの。 */
  .nico-notice__link {
    display: flex;
    align-items: center;
    /* 81 / 1920 */
    gap: clamp(32px, 4.219vw, 81px);
    width: min(100% - var(--content-pad) * 2, 1200px);
    /* 140 / 1920 */
    min-height: clamp(88px, 7.292vw, 140px);
    margin-inline: auto;
    /* 24 / 1920 */
    padding-block: clamp(16px, 1.25vw, 24px);
  }

  .nico-notice__label {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    /* 12 / 1920 */
    gap: clamp(8px, 0.625vw, 12px);
    /* 257 / 1920 */
    width: clamp(150px, 13.385vw, 257px);
    /* 40 / 1920 */
    padding-inline-end: clamp(20px, 2.083vw, 40px);
    border-inline-end: 1px solid var(--wp--preset--color--base);
    /* 21 / 1920 */
    font-size: clamp(16px, 1.094vw, 21px);
    line-height: 1.4;
    letter-spacing: 0.06em;
  }

  .nico-notice__icon {
    display: flex;
    flex-shrink: 0;
    color: var(--wp--preset--color--base);
  }

  /* 26 / 1920 */
  .nico-notice__icon svg {
    width: clamp(20px, 1.354vw, 26px);
    height: clamp(20px, 1.354vw, 26px);
  }

  .nico-notice__body {
    display: flex;
    flex-direction: column;
    gap: clamp(6px, 0.521vw, 10px);
  }

  /* 13 / 1920 */
  .nico-notice__date {
    font-size: clamp(11px, 0.677vw, 13px);
    line-height: 1;
    letter-spacing: 0.06em;
    color: #b4b4b4;
  }

  /* 16 / 1920 */
  .nico-notice__text {
    font-size: clamp(13px, 0.833vw, 16px);
    font-weight: 700;
    line-height: 1.6;
    letter-spacing: 0.06em;
  }

  /* --------------------------------------------
     コンセプト
     -------------------------------------------- */

  .nico-concept {
    padding-block: 148px 0;
    text-align: center;
  }

  .nico-concept__title {
    margin: 0;
    font-size: 32px;
    line-height: 2.19;
    letter-spacing: 0.14em;
    color: var(--wp--preset--color--contrast);
  }

  .nico-concept__row {
    display: block;
  }

  .nico-concept__accent {
    color: #a57747;
  }

  .nico-concept__lead {
    margin: 44px 0 0;
    font-size: 18px;
    line-height: 2;
    letter-spacing: 0.14em;
    color: var(--wp--preset--color--contrast);
  }

  /* --------------------------------------------
     3 つの特徴
     -------------------------------------------- */

  .nico-features {
    padding-block: 48px 0;
  }

  .nico-features__list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 39px;
    width: min(100% - var(--content-pad) * 2, var(--content-max));
    margin: 0 auto;
    padding: 0;
    list-style: none;
  }

  /* カード 351 × 400。角丸 24px、枠線 3px、地は左上→右下のグラデーション */
  .nico-features__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    /* 高さはご指定により 400px 固定（カンプ実測は 459px） */
    height: 400px;
    padding: 41px 24px 44px;
    border: 3px solid #ccaa87;
    border-radius: 24px;
    background-image: linear-gradient(142deg, #e8e6e1, #ffffff);
    text-align: center;
  }

  /* イラストは高さ 140px の枠に原寸のまま中央配置する。
     3 つの SVG は固有サイズが異なり、カンプでもそのまま置かれている。 */
  .nico-features__figure {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 140px;
  }

  .nico-features__icon {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
  }

  .nico-features__title {
    margin: 28px 0 0;
    font-size: 32px;
    line-height: 1;
    letter-spacing: 0.24em;
    /* letter-spacing 分の右アキを打ち消して光学的に中央へ寄せる */
    text-indent: 0.24em;
    color: #a57747;
  }

  .nico-features__text {
    /* 1 行あたり全角 15 文字で折り返す（カンプの改行位置に合わせる） */
    max-width: 280px;
    margin: 17px auto 0;
    font-size: 16px;
    font-weight: 700;
    line-height: 35px;
    letter-spacing: 0.14em;
    color: #ccaa87;
  }

  /* タグはカード下端から 44px の位置に固定（本文が 2 行でも 3 行でも動かない）。
     カンプではタグの上端がカード上から 386.5px の位置にあり、
     高さ 459px・下パディング 44px・タグ高さ 28px で計算が合う。
     本文との間隔は行数によって変わる（2 行なら約 58px、3 行なら約 23px）。 */
  .nico-features__tags {
    display: flex;
    /* 折り返さず常に横並び。カードが狭いときはタグ側を縮める */
    flex-wrap: nowrap;
    justify-content: center;
    gap: min(20px, 5%);
    width: 100%;
    margin: auto 0 0;
    padding: 0;
    list-style: none;
  }

  .nico-features__tag {
    /* 121px を上限に、入らなければ縮む。min-width:0 がないと
       .nico-tag の min-width:76px が効いて縮まない */
    flex: 0 1 121px;
    min-width: 0;
    min-height: 28px;
    padding-inline: 4px;
    white-space: nowrap;
  }

  /* 1198px を下回るとカードが縮むので、文字と字間も少し詰める */
  @media (max-width: 1100px) {
    .nico-features__tag {
      font-size: 11px;
      letter-spacing: 0.02em;
    }
  }

  .nico-features + .nico-front__action,
  .nico-features .nico-front__action {
    margin-top: 46px;
  }

  /* --------------------------------------------
     お知らせ／イベント
     -------------------------------------------- */

  .nico-posts {
    margin-top: 120px;
    padding-block: 157px 137px;
    background-color: #f8f8f5;
  }

  .nico-posts__inner {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 70px;
    width: min(100% - var(--content-pad) * 2, var(--content-max));
    margin-inline: auto;
  }

  /* 2 カラムを同じ高さで揃える。件数やタイトルの行数が違っても
     一覧ボタンが両カラムで同じ位置に来るよう、リスト側で余白を吸収する */
  .nico-posts__col {
    display: flex;
    flex-direction: column;
  }

  .nico-posts__list {
    margin: 40px 0 auto;
    padding: 0;
    list-style: none;
  }

  .nico-posts__item {
    border-bottom: 1px solid #b4b4b4;
  }

  .nico-posts__link {
    display: block;
    padding-block: 22px 26px;
  }

  /* 日付とタグを 1 行に並べる（カンプどおり）。

     タグの高さ（カンプ実測 22px）を最低値にする。タグが無いお知らせ側でも
     同じ高さになり、日付とタイトルの位置が 2 カラムで揃う。

     横の間隔 16px はカンプ実測（日付の右端 1169.6 → 1 つ目のタグ 1187 で約 17px）。
     幅が足りないときはタグが次の行に折り返す。1198px 以上なら
     最長の日付（例：2026年10月10日〜2026年10月17日）＋タグ 3 つでも 1 行に収まる
     （必要 約463px ／ カラム幅 537px）。タグの上限は
     NICO_FRONT_EVENT_TAG_LIMIT（includes/front-page-block.php）で決めている。 */
  .nico-posts__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 16px;
    min-height: 22px;
  }

  .nico-posts__date {
    font-size: 12px;
    line-height: 1;
    letter-spacing: 0.04em;
    color: #b4b4b4;
    /* 日付は途中で改行させない（タグより先に折り返されると 3 行になる） */
    white-space: nowrap;
  }

  .nico-posts__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
  }

  .nico-posts__title {
    display: block;
    margin-top: 14px;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.6;
    letter-spacing: 0.04em;
  }

  .nico-posts__empty {
    margin: 40px 0 auto;
    font-size: 16px;
  }

  .nico-posts__action {
    margin: 60px 0 0;
    text-align: center;
  }

  /* --------------------------------------------
     工事状況
     -------------------------------------------- */

  .nico-cst {
    padding-block: 157px 0;
    text-align: center;
  }

  .nico-cst__lead {
    margin: 60px 0 0;
    font-size: 20px;
    line-height: 1.6;
    letter-spacing: 0.14em;
    color: #63594c;
  }

  .nico-cst__empty {
    margin: 60px 0 0;
    font-size: 16px;
  }

  .nico-cst__slider {
    position: relative;
    width: min(100% - var(--content-pad) * 2, var(--content-max));
    margin: 60px auto 0;
  }

  .nico-cst__track {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    gap: 24px;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  /* 3 枚以上のときだけ横スクロール＋スナップにする */
  .nico-cst__slider.is-slider .nico-cst__track {
    grid-auto-columns: calc((100% - 48px) / 3);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    overscroll-behavior-x: contain;
  }

  .nico-cst__slider.is-slider .nico-cst__slide {
    scroll-snap-align: start;
  }

  .nico-cst__figure {
    margin: 0;
  }

  .nico-cst__figure img {
    width: 100%;
    height: auto;
  }

  .nico-cst__caption {
    margin-top: 12px;
    font-size: 14px;
    line-height: 1.6;
    text-align: left;
    color: var(--wp--preset--color--contrast);
  }

  .nico-cst__nav {
    position: absolute;
    top: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    translate: 0 -50%;
    border: 0;
    border-radius: 50%;
    background-color: var(--wp--preset--color--accent);
    color: var(--wp--preset--color--base);
    cursor: pointer;
  }

  .nico-cst__nav:disabled {
    opacity: 0.35;
    cursor: default;
  }

  .nico-cst__nav--prev {
    left: -24px;
  }

  .nico-cst__nav--next {
    right: -24px;
  }

  .nico-cst .nico-front__action {
    margin-top: 70px;
    padding-bottom: 100px;
  }

  /* --------------------------------------------
     トップページ：SP
     -------------------------------------------- */

  @media (max-width: 767px) {
    /* SP のファーストビューは縦積みの固定構成。
       カンプ実測：MV 390 × 430 ＋ 重要なお知らせ 117px */
    .nico-mv {
      /* 390 : 430。PC と違って枠が縦長になる */
      aspect-ratio: 39 / 43;
      height: auto;
    }

    /* SP は枠（390 × 430）が縦長で cover が横方向にしか効かないため、
       屋根が必ず画像高さの 31%（＝ 135px）に来てロゴ（下端 199px）に掛かる。
       90px 下げると屋根がロゴの下に落ちる（375〜430px 幅で 25〜29px の余裕）。
       下端の 90px は overflow: hidden で切れ、上端の隙間は
       .nico-mv の背景（＝空）で埋まる。 */
    .nico-mv__image {
      top: 90px;
    }

    /* SP は横に並べる幅がないので縦積みにする */
    .nico-mv__inner {
      top: 12%;
      left: var(--content-pad);
      flex-direction: column;
      gap: 16px;
      width: calc(100% - var(--content-pad) * 2);
    }

    .nico-mv__copy,
    .nico-mv__logo {
      flex: 0 0 auto;
    }

    /* 390px でカンプの 14px / 20px に一致する */
    .nico-mv__year {
      font-size: clamp(12px, 3.59vw, 16px);
    }

    .nico-mv__title {
      font-size: clamp(17px, 5.13vw, 22px);
      line-height: 2.1;
    }

    .nico-mv__mark {
      /* SP は本文比 1.5 倍（PC は 1.333 倍） */
      font-size: 1.5em;
    }

    /* 縦積みではスラッシュが成立しないので出さない */
    .nico-mv__divider {
      display: none;
    }

    .nico-mv__logo {
      /* 240 / 390 */
      width: 61.5%;
    }

    /* SP は MV を画面いっぱいにしないほうが収まりが良いので下限を下げる */
    .nico-mv {
      min-height: 320px;
    }

    /* SP は PC と構成が変わる。
       ラベルを中央に置き、その下に全幅の横線、さらに下に日付と本文。
       カンプ実測：バー 117px／アイコン 15.3px／ラベル 14px／横線 y47／本文 14px */
    .nico-notice__link {
      flex-direction: column;
      align-items: stretch;
      gap: 0;
      width: 100%;
      min-height: 0;
      padding: 17px 0 18px;
    }

    .nico-notice__label {
      justify-content: center;
      width: auto;
      gap: 8px;
      padding: 0 var(--content-pad) 15px;
      /* 縦線ではなく全幅の横線になる */
      border-inline-end: 0;
      border-block-end: 1px solid var(--wp--preset--color--base);
      font-size: 14px;
    }

    .nico-notice__icon svg {
      width: 16px;
      height: 16px;
    }

    .nico-notice__body {
      gap: 8px;
      margin-top: 18px;
      padding-inline: 20px;
    }

    /* SP は PC の vw 連動ではなくカンプの固定値に戻す */
    .nico-notice__date {
      font-size: 13px;
    }

    .nico-notice__text {
      font-size: 14px;
    }

    .nico-concept {
      padding-top: 64px;
    }

    /* カンプ実測：24px / ベースライン間隔 40px */
    .nico-concept__title {
      font-size: 24px;
      line-height: 1.67;
    }

    /* 「が奏でる」だけ意図的に小さい。SP では 1 行落とす。
       ベースライン間隔 40px を保つため line-height は 2（20 × 2）。 */
    .nico-concept__after {
      display: block;
      font-size: 20px;
      line-height: 2;
    }

    .nico-concept__lead {
      margin-top: 28px;
      font-size: 14px;
      text-align: left;
    }

    .nico-features__list {
      grid-template-columns: 1fr;
      gap: 32px;
    }

    /* SP は 1 カラムなので高さを内容なりにする */
    .nico-features__item {
      height: auto;
      min-height: 0;
      padding-bottom: 32px;
    }

    /* SP は 1 カラムで幅に余裕があるので原寸に戻す */
    .nico-features__tags {
      gap: 20px;
      margin-top: 32px;
    }

    .nico-features__tag {
      font-size: 12px;
      letter-spacing: 0.04em;
    }

    /* カード見出しは SP でも 32px のまま（カンプ実測） */
    .nico-features__title {
      font-size: 32px;
    }

    .nico-posts {
      margin-top: 64px;
      padding-block: 64px;
    }

    .nico-posts__inner {
      grid-template-columns: 1fr;
      gap: 56px;
    }

    /* お知らせ／イベント／工事状況の見出し（カンプ実測 24px） */
    .nico-front__heading {
      font-size: 24px;
    }

    .nico-cst {
      padding-top: 64px;
    }

    .nico-cst__lead {
      margin-top: 32px;
      font-size: 14px;
    }

    .nico-cst__slider.is-slider .nico-cst__track {
      grid-auto-columns: 100%;
    }

    .nico-cst__nav--prev {
      left: 4px;
    }

    .nico-cst__nav--next {
      right: 4px;
    }

    .nico-cst .nico-front__action {
      margin-top: 48px;
      padding-bottom: 64px;
    }
  }

  /* --------------------------------------------
     フォーカス可視化（CLAUDE.md の必須要件）
     -------------------------------------------- */

  .nico-header__logo:focus-visible,
  .nico-header__link:focus-visible,
  .nico-header__toggle:focus-visible,
  .nico-menu__link:focus-visible,
  .nico-menu__utility-link:focus-visible,
  .nico-footer__link:focus-visible,
  .nico-footer__policy-link:focus-visible,
  .nico-footer__mail:focus-visible,
  .nico-btn:focus-visible,
  .nico-notice__link:focus-visible,
  .nico-posts__link:focus-visible,
  .nico-cst__nav:focus-visible,
  .nico-cst__track:focus-visible,
  .nico-construction__current:focus-visible,
  .nico-construction__option:focus-visible,
  .nico-event-archive__link:focus-visible,
  .nico-event-archive__page:focus-visible {
    outline: 2px solid currentcolor;
    outline-offset: 4px;
  }

  /* スクリーンリーダー専用テキスト（スライダーのボタン名） */
  .screen-reader-text {
    position: absolute;
    width: 1px;
    height: 1px;
    clip-path: inset(50%);
    overflow: hidden;
    white-space: nowrap;
  }

  /* --------------------------------------------
     下層ページの帯（niconowa/page-header）
     数値は docs/page-header-spec.md（カンプ実測値）に対応する。

     文字サイズを theme.json のプリセットではなく px で持っているのは、
     ヘッダーのロゴ（36px）やフッター（32px）と同じ「部品固有のサイズ」だから。
     theme.json のプリセットは記事本文の見出し・本文のためのもの。
     -------------------------------------------- */

  .nico-pagehead {
    /* 帯 540px ＋ 下端の 6px（カンプではグラデーションの終端色と同じ #F8F8F5 の帯） */
    min-height: 546px;
    display: flex;
    /* カンプの上下パディングはどちらも約 40px */
    padding-block: 40px;
    /* 上 #EFDCCB → 下 #F8F8F5 の縦グラデーション（PDF のシェーディング実測値） */
    background-image: linear-gradient(180deg, #efdccb, #f8f8f5);
  }

  .nico-pagehead__inner {
    display: flex;
    flex-direction: column;
    /* パンくずを上端、タイトル群を下端に置く。
       間が大きく空くのがカンプどおり（PC で約 340px） */
    justify-content: space-between;
    gap: 40px;
    width: min(100% - var(--content-pad) * 2, var(--content-max));
  }

  /* --- パンくずリスト --- */

  .nico-pagehead__crumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0 8px;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 14px;
    line-height: 1.5;
  }

  /* 区切りの「>」。装飾なので CSS で描き、マークアップには入れない */
  .nico-pagehead__crumb + .nico-pagehead__crumb::before {
    content: '>';
    margin-inline-end: 8px;
  }

  /* --- タイトルと英字サブタイトル --- */

  .nico-pagehead__title {
    margin: 0;
    font-size: 58px;
    font-weight: 700;
    line-height: 1.2;
    /* カンプの字送りは 59.16px / 58px ＝ 1.02 */
    letter-spacing: 0.02em;
    color: var(--wp--preset--color--contrast);
  }

  .nico-pagehead__sub {
    display: flex;
    align-items: center;
    /* ダッシュとの間隔 6px（カンプ：ダッシュ 244〜254、英字 260 から） */
    gap: 6px;
    margin: 24px 0 0;
    font-size: 15px;
    line-height: 1;
    color: var(--wp--preset--color--accent-text);
  }

  /* 英字の左に付く 10px の横線 */
  .nico-pagehead__dash {
    flex: none;
    width: 10px;
    height: 1px;
    background-color: currentColor;
  }

  @media (max-width: 767px) {
    .nico-pagehead {
      /* 帯 288.5px ＋ 下端の 6px */
      min-height: 295px;
    }

    .nico-pagehead__inner {
      gap: 24px;
    }

    .nico-pagehead__crumbs {
      font-size: 12px;
    }

    .nico-pagehead__title {
      font-size: 36px;
    }

    .nico-pagehead__sub {
      margin-block-start: 20px;
      font-size: 14px;
    }
  }
}

/* ============================================================
   template
   ============================================================ */

@layer template {
  /* --------------------------------------------
     工事状況（construction）一覧
     撮影日プルダウンで日を選び、その日の画像＋撮影場所を出す。
     画像は PC 2 カラム／SP 1 カラム
     -------------------------------------------- */

  .nico-construction__empty {}

  /* 撮影日プルダウン（details/summary ＋ 日付リンク）
     カンプ実測（PC・SP 共通。1920 と 375 で同寸）：
       ボタン 258 × 58 ／ 角丸 10 ／ 枠線 1px contrast ／ 背景 base
       文字 16px・700・中央揃え（ボタン全幅の中央。▼ の分は寄せない）
       ▼ 13 × 12・contrast・右端から 18px・上下中央
     開いた状態はカンプに無いため、ボタンと同じ枠線・角丸で踏襲している。 */
  .nico-construction__control {
    display: flex;
    justify-content: center;
  }

  .nico-construction__select {
    position: relative;
    width: 258px;
  }

  .nico-construction__current {
    display: flex;
    align-items: center;
    justify-content: center;
    /* ▼ に文字が重ならない最小幅。左右そろえてボタン全幅の中央を保つ */
    padding-inline: 40px;
    /* 58px は枠線込みの高さ */
    box-sizing: border-box;
    height: 58px;
    border: 1px solid var(--wp--preset--color--contrast);
    border-radius: 10px;
    background-color: var(--wp--preset--color--base);
    font-size: 16px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.07em;
    cursor: pointer;
    /* 既定の開閉マーカーを消す（::-webkit- は古い Safari 用） */
    list-style: none;
  }
  .nico-construction__current::-webkit-details-marker {
    display: none;
  }

  /* ▼。開いているときは反転して ▲ になる */
  .nico-construction__current::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 18px;
    border-inline: 6.65px solid transparent;
    border-top: 12px solid var(--wp--preset--color--contrast);
    transform: translateY(-50%);
  }
  .nico-construction__select[open] .nico-construction__current::after {
    transform: translateY(-50%) rotate(180deg);
  }

  /* 選択肢。件数が増えても画面を埋めないよう高さで頭打ちにする */
  .nico-construction__options {
    position: absolute;
    z-index: 1;
    top: calc(100% + 4px);
    left: 0;
    box-sizing: border-box;
    width: 100%;
    max-height: 320px;
    overflow-y: auto;
    margin: 0;
    padding: 0;
    border: 1px solid var(--wp--preset--color--contrast);
    border-radius: 10px;
    background-color: var(--wp--preset--color--base);
    list-style: none;
  }

  .nico-construction__option-item + .nico-construction__option-item {
    /* 下層ページ帯のベージュ。区切りが主張しすぎない濃さ */
    border-top: 1px solid #efddcd;
  }

  .nico-construction__option {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    font-size: 16px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.07em;
    text-decoration: none;
  }

  .nico-construction__option:hover {
    background-color: #f5efe7;
  }

  /* 表示中の日付 */
  .nico-construction__option[aria-current] {
    background-color: #efddcd;
  }

  /* 共通のフォーカスリングは outline-offset: 4px だが、
     選択肢はスクロール領域の内側なので外に出すと切れる */
  .nico-construction__option:focus-visible {
    outline-offset: -4px;
  }

  /* 同じ日に複数回撮影があった場合のみ 2 つ目以降のグループが出る */
  .nico-construction__group + .nico-construction__group {
    margin-top: 48px;
  }

  .nico-construction__group-title {}

  .nico-construction__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 32px 24px;
  }

  .nico-construction__item {}

  .nico-construction__figure {
    margin: 0;
  }
  .nico-construction__figure img {
    width: 100%;
    height: auto;
  }

  /* 画像直下の撮影場所テキスト */
  .nico-construction__caption {
    margin-top: 8px;
  }

  @media (max-width: 767px) {
    /* 工事の様子が判別できる大きさを確保するため 1 カラムに切り替える */
    .nico-construction__list {
      grid-template-columns: 1fr;
      gap: 24px;
    }
  }

  /* --------------------------------------------
     イベント一覧（niconowa/event-archive）

     カンプ：イベント一覧.pdf（1920 × 2275）／イベント一覧｜スマホ.pdf（375 × 2252）
     実測値と判断は docs/event-archive-spec.md を参照。

     帯（.nico-pagehead）の下に、開催日の早い順の一覧＋ページネーション。
     行の構造はトップページの .nico-posts と揃えている
     （メタ行＝日付＋タグ／タイトル／下端の区切り線）。
     -------------------------------------------- */

  /* 上は帯の下端から最初の行まで。カンプ実測 154px（.nico-about と同じ値） */
  .nico-event-archive {
    padding-block: 154px 120px;
  }

  .nico-event-archive__empty {
    width: min(100% - var(--content-pad) * 2, var(--content-max));
    margin-inline: auto;
    font-size: 16px;
  }

  .nico-event-archive__list {
    width: min(100% - var(--content-pad) * 2, var(--content-max));
    margin: 0 auto;
    padding: 0;
    list-style: none;
  }

  .nico-event-archive__item {
    border-bottom: 1px solid #b4b4b4;
  }

  .nico-event-archive__link {
    display: block;
    padding-block: 24px 28px;
    /* リンクの色・下線・hover 時の下線はレイヤー外（theme.json の elements.link を上書きする節）で指定している */
  }

  /* 日付とタグを 1 行に並べる。前ページの .nico-posts__meta と同じ考え方
     （タグの高さを最低値にして、タグの無いイベントでも高さを揃える） */
  .nico-event-archive__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 16px;
    min-height: 22px;
  }

  .nico-event-archive__date {
    font-size: 16px;
    line-height: 1;
    letter-spacing: 0.04em;
    color: #b4b4b4;
    white-space: nowrap;
  }

  /* 前ページ（トップ）と違い件数を絞らないため、折り返しを許容する */
  .nico-event-archive__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
  }

  .nico-event-archive__title {
    display: block;
    margin-top: 16px;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.6;
    letter-spacing: 0.04em;
  }

  /* ページネーション（円形の数字。カンプ実測：径 41px／間隔 19px）

     カンプは白文字だが、グレー地（#b4b4b4）・アクセント地（#eE763f）とも
     白文字ではコントラスト比が 2〜2.9:1 しかなく AA（4.5:1）を満たさない
     （docs/design-tokens.md 2-3 の検証結果と同じ理由）。
     既存の「ボタン hover」と同じ組み合わせ（地に対して contrast の文字）に
     差し替えている。 */
  .nico-event-archive__pagination {
    margin-block-start: 60px;
  }

  .nico-event-archive__pages {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 19px;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .nico-event-archive__page {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    min-width: 41px;
    height: 41px;
    padding-inline: 4px;
    border-radius: 50%;
    background-color: #b4b4b4;
    font-size: 16px;
    font-weight: 700;
    line-height: 1;
    /* リンク（現在地・「…」は <span> だが数字リンクは <a>）の色・下線は
       レイヤー外（theme.json の elements.link を上書きする節）で指定している */
  }

  .nico-event-archive__page.is-current {
    background-color: var(--wp--preset--color--accent);
  }

  /* 「…」は円で囲まない（前後のページ数が多いときだけ現れる） */
  .nico-event-archive__page.is-dots {
    background-color: transparent;
  }

  .nico-event-archive__page:not(.is-current):not(.is-dots):hover,
  .nico-event-archive__page:not(.is-current):not(.is-dots):focus-visible {
    /* 文字色（base への切り替え）はレイヤー外側で指定している */
    background-color: var(--wp--preset--color--accent-text);
  }

  @media (max-width: 767px) {
    .nico-event-archive {
      padding-block: 112px 64px;
    }

    .nico-event-archive__link {
      padding-block: 20px 24px;
    }

    .nico-event-archive__date,
    .nico-event-archive__title {
      font-size: 14px;
    }

    .nico-event-archive__title {
      margin-top: 12px;
    }

    .nico-event-archive__pagination {
      margin-block-start: 40px;
    }
  }

  /* --------------------------------------------
     モジュールページ（niconowa/modules）

     ページ自身の体裁だけをここに置く。
     見本の中身のスタイルは assets/css/content.css（レイヤー外）にあり、
     .nico-modules__sample に .entry-content を併記することで当たっている。
     数値は docs/module-page.md（カンプ実測値）に対応する。
     -------------------------------------------- */

  /* 上の余白は帯（.nico-pagehead）との間隔。カンプでは帯の下端から
     最初の見出しまで約 154px あり、リード文のぶんを差し引いて 80px にしている */
  .nico-modules {
    padding-block: 80px 96px;
  }

  .nico-modules__lead {
    margin-block-end: 48px;
  }

  /* セクション見出し。カンプでは記事本文の H2 と同じ装飾になっている。
     見本と紛らわしくならないよう、見本の側を枠で囲って区別している。 */
  .nico-modules__section {
    margin-block-start: 80px;
    margin-block-end: 16px;
    padding: 16px 14px;
    background-color: #eceae0;
    border-block: 3px solid var(--wp--preset--color--accent-text);
  }

  .nico-modules__section-note {
    margin-block-end: 0;
    color: #63594c;
  }

  .nico-modules__item {
    margin-block-start: 48px;
  }

  .nico-modules__name {
    margin-block-end: 0;
    font-weight: 700;
  }

  /* ［パターン］の印。パターンから挿入できるものを見分けるため */
  .nico-modules__badge {
    display: inline-block;
    margin-inline-start: 8px;
    padding: 2px 10px;
    border-radius: 999px;
    background-color: var(--wp--preset--color--accent);
    color: var(--wp--preset--color--base);
    font-size: var(--wp--preset--font-size--small);
    font-weight: 400;
    vertical-align: 2px;
  }

  .nico-modules__note {
    margin-block-start: 4px;
    margin-block-end: 0;
    color: #63594c;
    font-size: var(--wp--preset--font-size--small);
  }

  /* 見本の器。破線で囲って「これは見本」と分かるようにする。
     背景は白のまま（記事本文と同じ地色で見せる必要があるため）。 */
  .nico-modules__sample {
    margin-block-start: 16px;
    padding: 24px;
    border: 1px dashed #e0cbb6;
  }

  .nico-modules__missing {
    color: var(--wp--preset--color--accent-text);
  }

  @media (max-width: 767px) {
    .nico-modules {
      padding-block: 48px 64px;
    }

    .nico-modules__lead {
      margin-block-end: 32px;
    }

    .nico-modules__section {
      margin-block-start: 56px;
      padding: 14px 12px;
    }

    .nico-modules__item {
      margin-block-start: 32px;
    }

    .nico-modules__sample {
      padding: 16px;
    }
  }

  /* --------------------------------------------
     イベント詳細の概要表（niconowa/event-detail）

     記事本文のパターン「テーブル（点線区切り）」と同じ見た目にそろえている。
     ただしこの表は本文の外（テンプレート側）に出るため
     content.css の .nico-table--dotted は当たらない。値だけ写している。
     どちらかの見た目を変えるときは両方そろえること。
     -------------------------------------------- */

  .nico-event-detail {
    /* 罫線色は content.css の --nico-ec-line と同じ値。
       あちらは .entry-content スコープの変数なのでここからは参照できない */
    --nico-event-line: #e0cbb6;

    margin-block-start: 64px;
  }

  .nico-event-detail__table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    /* 1 本目だけ濃くして表の始まりを示す（本文のテーブルと同じ） */
    background-image: repeating-linear-gradient(
      to right,
      var(--wp--preset--color--contrast) 0 2px,
      transparent 2px 4px
    );
    background-size: 100% 1px;
    background-position: left top;
    background-repeat: no-repeat;
  }

  /* 表の名前。画面には出さず読み上げにだけ残す。

     components の .screen-reader-text を使わないのは position: absolute を
     避けるため。caption を絶対配置すると Chrome が table-layout: fixed の
     列幅計算をやめてしまい、下の width: 25% が無視されて 50% ずつになる。 */
  .nico-event-detail__caption {
    height: 1px;
    clip-path: inset(50%);
    overflow: hidden;
    white-space: nowrap;
  }

  /* border-style: dotted はブラウザが粒の形と間隔を決めてしまい
     カンプの点線を再現できないため、本文のテーブルと同じくグラデーションで描く。

     padding と width をこの共通ルールに書かないこと。
     :is() を含むぶん詳細度が下の 2 つより高く、同じレイヤー内で勝ってしまう。 */
  .nico-event-detail__table :is(th, td) {
    border: 0;
    text-align: start;
    vertical-align: top;
    line-height: 1.75;
    background-image: repeating-linear-gradient(
      to right,
      var(--nico-event-line) 0 2px,
      transparent 2px 4px
    );
    background-size: 100% 1px;
    background-position: left bottom;
    background-repeat: no-repeat;
  }

  /* 項目名。太字にして、色だけに頼らず役割が分かるようにする */
  .nico-event-detail__label {
    width: 25%;
    padding: 20px 0;
    font-weight: 700;
  }

  .nico-event-detail__value {
    padding: 20px 0 20px 24px;
  }

  @media (max-width: 767px) {
    .nico-event-detail {
      margin-block-start: 40px;
    }

    /* 375px では 2 カラムだと内容が細くなりすぎるため、
       項目名と内容を縦に積む（本文のテーブルと同じ扱い） */
    .nico-event-detail__table,
    .nico-event-detail__table :is(tbody, tr, th, td) {
      display: block;
      width: auto;
    }

    /* 積んだときは項目名と内容の間に線を入れない（1 組を 1 行として読ませる） */
    .nico-event-detail__label {
      padding: 12px 0 0;
      background-image: none;
    }

    .nico-event-detail__value {
      padding: 0 0 12px;
    }
  }

  /* --------------------------------------------
     niconowaについて（niconowa/about）

     概要（円 4 つ）／コンセプト（全幅の写真 3 本）／動画／完成後イメージ。
     数値は docs/about-page.md（カンプ実測値）に対応する。

     ブロックは align:full で置いているため .nico-about 自体は全幅。
     中身は節ごとに .l-container で 1134px に絞り、
     コンセプトの写真だけを全幅のまま出している。
     -------------------------------------------- */

  /* 上は帯（.nico-pagehead）の下端から最初の見出しまで。カンプ実測 154px */
  .nico-about {
    padding-block: 154px 200px;
  }

  .nico-about__section + .nico-about__section {
    margin-block-start: 120px;
  }

  /* セクション見出し。カンプでは記事本文の H2 と同じ装飾になっている。
     content.css は記事本文（.entry-content）専用のため、
     モジュールページ（.nico-modules__section）と同じく装飾だけを再掲する。 */
  .nico-about__heading {
    margin-block: 0 0;
    padding: 16px 14px;
    background-color: #eceae0;
    border-block: 3px solid var(--wp--preset--color--accent-text);
  }

  /* --- 概要：オレンジの円 4 つ ------------------------------- */

  /* カンプ実測：円 238px、間隔 60px。4 つで 1132px となりコンテンツ幅
     1134px にちょうど収まる。幅が足りなくなったら折り返させる方式にして、
     768〜1197px で文字が円からはみ出すのを防いでいる（8 章 #4） */
  .nico-about__facts {
    list-style: none;
    margin: 56px 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 60px;
  }

  .nico-about__fact {
    /* 親テーマは li に border-box を効かせていないため明示する。
       これが無いと padding のぶん円が 270px に膨らみ、4 つ並ばなくなる */
    box-sizing: border-box;
    width: 238px;
    aspect-ratio: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    /* 32px の「奈良県葛城市」で内側 206px 中 200px を使う。
       文言が少し伸びても収まるよう 12px にしてある */
    padding: 12px;
    border-radius: 50%;
    background-color: var(--wp--preset--color--accent);
    color: var(--wp--preset--color--base);
    text-align: center;
  }

  .nico-about__fact-label {
    margin-block-end: 12px;
    font-size: 16px;
    line-height: 1;
    letter-spacing: 0.08em;
  }

  /* カンプは円ごとに 32px と 24px が混在していたが、文字数に合わせた
     調整と判断して 32px に揃えている（docs/about-page.md 6 章 #3） */
  .nico-about__fact-value {
    font-size: 32px;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: 0.04em;
  }

  .nico-about__fact-line {
    display: block;
  }

  .nico-about__fact-note {
    font-size: 16px;
    line-height: 1.5;
  }

  /* --- コンセプト -------------------------------------------- */

  /* リードはトップページと同じ部品（.nico-concept）を使い、
     前後の余白だけをこのページ用に上書きする。
     components より template のほうがレイヤー順で後のため、!important は不要。 */
  .nico-about__lead .nico-concept {
    padding-block: 64px 0;
  }

  /* トップページではキャッチコピーが h2 で、太字は theme.json の
     elements.heading から来ている。このページは見出し階層の都合で p に
     しているため（includes/about-block.php のコメント参照）、太字をここで補う。 */
  .nico-about__lead .nico-concept__title {
    font-weight: 700;
  }

  .nico-about__concepts {
    margin-block-start: 72px;
  }

  .nico-about__concept + .nico-about__concept {
    margin-block-start: 156px;
  }

  /* 下端の帯の色。タグ側の地色は支給 SVG に含まれている
     （白文字とのコントラストはいずれも AA 適合。docs/about-page.md 3-3） */
  .nico-about__concept--hiroba {
    --nico-about-bar: #0c5f53;
  }

  .nico-about__concept--kakehashi {
    --nico-about-bar: #8f2014;
  }

  .nico-about__concept--michi {
    --nico-about-bar: #634e00;
  }

  .nico-about__concept-visual {
    position: relative;
  }

  .nico-about__concept-image {
    display: block;
    width: 100%;
    /* height: auto を明示しないと img の height 属性が効いたままになり、
       幅・高さの両方が確定して aspect-ratio が無視される */
    height: auto;
    /* カンプ実測 1920 × 460。写真の縦横比が変わっても枠が崩れないよう cover */
    aspect-ratio: 1920 / 460;
    object-fit: cover;
  }

  /* 画像の下端いっぱいに入る 11px の帯 */
  .nico-about__concept-visual::after {
    content: '';
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    height: 11px;
    background-color: var(--nico-about-bar);
  }

  /* タグ（支給 SVG）。左端は .l-container の左端に揃える
     （カンプは x=393 ＝ 1134px のコンテンツ左端と一致していた）。
     帯の上に載る位置に置く。

     SVG はビューポート幅に比例させず原寸で固定する。CLAUDE.md の
     「1198px 以上はコンテンツ 1134px 固定」に合わせ、どの画面幅でも
     タグの左端が見出しの左端と揃うようにするため。 */
  .nico-about__concept-tag {
    position: absolute;
    bottom: 11px;
    left: max(var(--content-pad), (100% - var(--content-max)) / 2);
    margin: 0;
    /* img の下に行ボックス由来の隙間ができて帯と離れるのを防ぐ */
    line-height: 0;
  }

  .nico-about__concept-tag-image {
    display: block;
    width: 401px;
    height: auto;
  }

  /* 本文はコンテンツ幅よりさらに内側（カンプ実測 960px） */
  .nico-about__concept-text {
    width: min(100% - var(--content-pad) * 2, 960px);
    margin: 80px auto 0;
    font-size: var(--wp--preset--font-size--large);
    /* カンプは PC・SP とも行送り 45px。24px に対して 1.875 */
    line-height: 1.875;
  }

  /* --- 動画 --------------------------------------------------- */

  .nico-about__video {
    width: min(100%, 892px);
    margin: 88px auto 0;
    aspect-ratio: 16 / 9;
  }

  .nico-about__video-frame {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
  }

  /* --- 完成後イメージ ----------------------------------------- */

  .nico-about__gallery {
    margin-block-start: 80px;
  }

  /* 左に 5px のオレンジの縦棒が付く小見出し（カンプ実測：棒 5 × 37px） */
  .nico-about__gallery-title {
    display: flex;
    align-items: center;
    min-height: 37px;
    margin: 0;
    padding-inline-start: 15px;
    border-inline-start: 5px solid var(--wp--preset--color--accent-text);
    font-size: 22px;
  }

  /* カンプ実測：436 × 260 を 2 列、列間 20px・行間 24px。
     並び全体（892px）はコンテンツ幅の中央に置かれている */
  .nico-about__gallery-list {
    list-style: none;
    width: min(100%, 892px);
    margin: 24px auto 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px 20px;
  }

  .nico-about__gallery-image {
    display: block;
    width: 100%;
    /* .nico-about__concept-image と同じ理由で height: auto が要る */
    height: auto;
    /* 436 : 260。記事本文の画像枠（--nico-ec-ratio）と同じ比率 */
    aspect-ratio: 436 / 260;
    object-fit: cover;
  }

  .nico-about__action {
    margin: 80px 0 0;
    text-align: center;
  }

  @media (max-width: 767px) {
    .nico-about {
      padding-block: 112px;
    }

    .nico-about__section + .nico-about__section {
      margin-block-start: 80px;
    }

    .nico-about__facts {
      margin-block-start: 40px;
      gap: 32px;
    }

    /* カンプ実測：SP の円は 209px */
    .nico-about__fact {
      width: 209px;
    }

    .nico-about__fact-label {
      margin-block-end: 8px;
      font-size: 14px;
    }

    .nico-about__fact-value {
      font-size: 24px;
    }

    .nico-about__fact-note {
      font-size: 14px;
    }

    .nico-about__lead .nico-concept {
      padding-block: 56px 0;
    }

    .nico-about__concepts {
      margin-block-start: 64px;
    }

    .nico-about__concept + .nico-about__concept {
      margin-block-start: 72px;
    }

    /* カンプ実測 375 × 258 */
    .nico-about__concept-image {
      aspect-ratio: 375 / 258;
    }

    /* カンプ実測 223 × 66。左端は SP の左右パディング（18px）に揃う。
       画像そのものは picture の source で SP 用 SVG に切り替わる。

       height を明示するのは、source に width / height が無いと
       ブラウザが img 側の属性（401 × 115）の比率で高さを決めてしまうため。 */
    .nico-about__concept-tag-image {
      width: 223px;
      height: 66px;
    }

    .nico-about__concept-text {
      margin-block-start: 64px;
      /* カンプの行送り 45px は SP でも変わらない。18px に対して 2.5 */
      line-height: 2.5;
    }

    .nico-about__video {
      margin-block-start: 64px;
    }

    .nico-about__gallery {
      margin-block-start: 64px;
    }

    /* 完成後イメージは 1 列。カンプ実測 339 × 202（比率は PC と同じ） */
    .nico-about__gallery-list {
      grid-template-columns: 1fr;
      gap: 32px;
    }

    .nico-about__action {
      margin-block-start: 64px;
    }
  }
}