/* ============================================================
   WordPress（Twenty Twenty-Five）向けの読み替えレイヤー

   カンプ（common.css）はデザインの正としてそのまま維持し、
   「ブロックが出力する構造がカンプのHTMLと違う箇所」だけをここで吸収する。

   ★2026/09/18: TOP専用だった top.css は common.css に統合して廃止した。
     読み込み順は全ページで common.css → wp-overrides.css になり、
     このファイルが常に最後＝同じ詳細度ならこちらが勝つ。

   ★TT5のブロックスタイルは詳細度が高いものがあるため、
     ここでは要素セレクタやクラスを重ねて詳細度を上げている。
   ============================================================ */

/* ---- ヘッダーのナビゲーション ----
   カンプ: <nav><ul><li><a class="nav-shop">
   ブロック: <nav class="wp-block-navigation"><ul class="wp-block-navigation__container"><li class="wp-block-navigation-item nav-shop"><a>
   → className が <li> に付くため、装飾は <li> と <a> に振り分ける */

/* ★`.head-in …` も併記している理由: サイトエディターでヘッダーのテンプレートパーツを
     単体で編集すると <header> タグが出力されず、`header …` の指定がすべて外れるため。
     公開側では .head-in は header の内側なので、どちらのセレクタでも同じ結果になる。 */
header nav.wp-block-navigation,
header nav.wp-block-navigation .wp-block-navigation__container,
.head-in nav.wp-block-navigation,
.head-in nav.wp-block-navigation .wp-block-navigation__container {
  font-size: 13.5px;
  gap: 24px;
}

header nav.wp-block-navigation a,
.head-in nav.wp-block-navigation a {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink);
}

header nav.wp-block-navigation a:hover {
  color: var(--sea);
}

/* お問い合わせの朱ボタン。padding は <li> ではなく <a> 側に置き、
   クリック領域とボタンの見た目を一致させる。

   ★セレクタに .wp-block-navigation を挟んでいる理由:
     TT5 の `.wp-block-navigation .wp-block-navigation-item { background-color: inherit }`
     が詳細度 (0,2,0) で当たっており、`header li.nav-shop` (0,1,2) では負けて
     背景が親から継承した透明になってしまう。クラスを2つにして (0,2,2) で上回る。
     打ち消す相手が background-color なので、ショートハンドではなく同じプロパティで指定する。 */
header .wp-block-navigation li.nav-shop {
  background-color: var(--shu);
  border-radius: 3px;
  padding: 0;
  transition: opacity .2s;
}

header .wp-block-navigation li.nav-shop > a,
header .wp-block-navigation li.nav-shop > a:hover {
  display: inline-block;
  padding: 9px 16px;
  font-size: 12.5px;
  color: #fff;
}

header .wp-block-navigation li.nav-shop:hover {
  opacity: .88;
}

/* ---- フッターのナビゲーション ----
   .foot-nav は <nav> に付く。カンプでは <ul> に当てていたスタイルなので、
   gap と list-style は内側の container に効かせる */

footer nav.foot-nav .wp-block-navigation__container {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  list-style: none;
  padding: 0;
}

footer nav.foot-nav,
footer nav.foot-nav a {
  font-size: 12.5px;
}

footer nav.foot-nav a {
  color: rgba(255, 255, 255, .8);
}

/* 2026/09/17 修正: ホバーしても白にならなかった。
   ナビゲーションブロック本体の
   `.wp-block-navigation .wp-block-navigation-item__content.wp-block-navigation-item__content { color: inherit }`
   （詳細度 0,3,0）が `footer nav.foot-nav a:hover`（0,2,3）に勝ち、親の色（白80%）のままだった。
   リンクのクラスを重ねて 0,3,3 に上げる。 */
footer nav.foot-nav a.wp-block-navigation-item__content:hover {
  color: #fff;
}

/* ---- サイトロゴ / サイトタイトル ----
   カンプ: <a class="logo"><img><span class="logo-txt"></a>
   ブロック: <div class="logo"><div class="wp-block-site-logo"><a><img></a></div><p class="logo-txt">
   → 画像の高さ指定がブロック側の width/height 属性に負けないようにする */

.logo .wp-block-site-logo img,
.logo .custom-logo {
  height: 42px;
  width: auto;
  max-width: none;
}

.foot-logo .wp-block-site-logo img,
.foot-logo .custom-logo {
  height: 36px;
  width: auto;
  max-width: none;
}

/* site-title はブロックが <p> で出すため、余白をリセットして
   カンプの .logo-txt と同じ見え方に揃える */
.logo-txt,
p.logo-txt {
  margin: 0;
}

.logo-txt a {
  color: inherit;
  text-decoration: none;
}

.foot-logo .logo-txt a {
  color: #fff;
}

/* ---- 画像ブロックの <figure> ラップを透過させる ----
   カンプ: <div class="cta-half"><img>
   ブロック: <div class="cta-half"><figure class="wp-block-image"><img>
   → figure が1枚挟まると、position:absolute や grid アイテムの指定が
     img ではなく figure に対して働くべき位置関係になり崩れる。
     display:contents で figure をレイアウト上消し、img を直接の子として扱わせる。 */

.cta-half .wp-block-image,
.split .wp-block-image,
.page-hero .bg .wp-block-image,
.hero .bg .wp-block-image,
.scene-gallery .wp-block-image {
  display: contents;
}

/* 念のため figure 側の余白も殺しておく（display:contents が効かない環境の保険） */
.cta-half .wp-block-image,
.split .wp-block-image,
.page-hero .bg .wp-block-image,
.hero .bg .wp-block-image,
.scene-gallery .wp-block-image {
  margin: 0;
}

/* ★スクロールで現れる画像（リビール対象）の figure には display:contents を当ててはいけない。

   top.js のリビールは「clip-path で幅0に隠した img は IntersectionObserver が交差ゼロと判定する」
   ため、img の親要素（= figure）を代理で監視する設計になっている。
   その figure を display:contents にすると箱が 0x0 になり、代理監視も交差ゼロになって
   is-in が永遠に付かず、画像が隠れたまま表示されなくなる（働く現場4枚・オンラインショップで発生）。

   .day-item img / .shop-ph img はどちらも img 自身に width・aspect-ratio が当たっており、
   figure が通常のブロックとして挟まってもレイアウトは変わらないので、余白だけ消しておく。 */
.day-item .wp-block-image,
.shop-ph .wp-block-image {
  display: block;
  margin: 0;
}

/* ---- テーブルブロック ----
   カンプ: <table class="c-table">
   ブロック: <figure class="wp-block-table c-table"><table>
   → className は figure に付くので、table 自身に当てていた指定は > table へ振り直す。
     沿革（h-table）は table を display:block にして初めて
     「tr を block にしてタイムライン化する」CSSが成立する設計のため、ここが必須。 */

.wp-block-table.c-table > table {
  width: 100%;
  border-collapse: collapse;
}

.wp-block-table.h-table {
  margin: 36px 0 28px;
}

.wp-block-table.h-table > table {
  display: block;
  width: 100%;
  font-size: 0;
  line-height: 0;
}

/* ---- パンくず ----
   カンプは <span> を並べて ::before で区切り文字を出している。
   ブロックでは段落1つに <span> を書くので、.inner を段落自身に付けて flex にする */
/* ★2026/09/18 修正: ここが `margin: 0` だったため、common.css の `.inner { margin: 0 auto }` の
   左右の auto まで消え、1180px より広い画面でパンくずだけ本文カラムより約210px 左に張り付いていた。
   打ち消したいのは段落ブロックの上下の余白だけなので、上下だけ0にする。 */
.crumbs p.inner {
  margin-top: 0;
  margin-bottom: 0;
}

/* ---- CSS内で直接参照している画像のパス差し替え ----
   common.css の `.feat` はカンプ相対パス url("assets/client_seri_wide.jpg") を見ている。
   ブロックに現れない（CSS側にしかない）画像なので、マークアップ変換では拾えず、
   ここでメディアライブラリの画像に差し替える。

   2026/09/17 修正: 強み（.feat）の背景写真が 404 で表示されていなかった。
   ① 当時は TOP だけ top.css が後から読み込まれ、`.feat {...}`（詳細度 0,1,0）では負けて
      カンプの相対パス（themes/tt5_child/assets/assets/…）が使われていた
      → `section.feat`（0,1,1）に上げた。統合後は詳細度を上げる必要はないが、
        HTML側も <section class="feat"> なのでそのままにしている
   ② 以前は http://localhost:8898/… の絶対URLだった。WPvivid が置換するのはデータベース内のURLで、
      テーマのCSSファイルは書き換えない。本番でもローカルを見に行って表示されなくなる
      → このCSSファイルからの相対パスにする（themes/tt5_child/assets/ から 3つ上 = wp-content/）
   ③ background のショートハンドで書くと、common.css の
      `@media (hover: none) { .feat { background-attachment: scroll, scroll } }`
      （スマホで fixed 背景が崩れないようにする指定）まで打ち消してしまう。
      画像だけ差し替え、位置・サイズ・固定表示はカンプ側に任せる。 */

section.feat {
  background-image:
    linear-gradient(rgba(11, 31, 43, .88), rgba(15, 42, 58, .9)),
    url("../../../uploads/2026/09/client_seri_wide.jpg");
}

/* ---- 事業カード1枚目の表示位置 ----
   カンプでは <img style="object-position:50% 100%"> のインライン指定だったが、
   core/image は save 時に任意の style を許さずブロック検証エラーになるため、
   マークアップから外して CSS 側で持たせている。 */

.biz-card:first-child img {
  object-position: 50% 100%;
}

/* ---- グリッド/フレックス内の子に付くブロック間余白を殺す ----
   ★これが効かないと「1列目だけ上にずれる」現象が出る。

   WordPress のブロックレイアウト（is-layout-flow / is-layout-constrained）は
   `> * + *` に margin-block-start を当てる。カンプ側では .scene-day や .feat-grid を
   CSS の grid でレイアウトしているため、2番目以降の子だけが下へ押し出され、
   結果として1列目だけ上に残って見える。

   カンプが自前でレイアウトを持っているコンテナを列挙し、その直下の余白を0に戻す。 */

.scene-day > *,
.feat-grid > *,
.biz-cards > *,
.bp-rail > *,
.split > *,
.flow-grid > *,
.news-list > *,
.rc-env > *,
.cta-split > *,
.cta-half > *,
.head-in > *,
.foot-in > *,
.shop-grid > *,
.about-grid > * {
  margin-block-start: 0;
  margin-block-end: 0;
}

/* ---- main / post-content の余白リセット ----
   カンプは <section> が直接並ぶ前提。TT5 の constrained レイアウトによる
   中央寄せと余白が入るとセクションの全幅が崩れるため打ち消す */

main.wp-block-group {
  margin-top: 0;
  margin-bottom: 0;
}

main > .wp-block-post-content > * {
  margin-block-start: 0;
  margin-block-end: 0;
}

/* ★2026/09/18 追加: お知らせ一覧（home テンプレート）はセクションを <main> の直下に置いており、
   固定ページのような post-content のラッパーが無い。そのため上のリセットが当たらず、
   ヒーロー→パンくず→本文→CTA の3か所に 19.2px の紙色の帯が入っていた（実測）。 */
main.wp-block-group > * {
  margin-block-start: 0;
  margin-block-end: 0;
}


/* ============================================================
   2026/09/16 修正（ユーザー指摘の4点）
   ============================================================ */

/* ---- 1. ファーストビューのボタン ----
   カンプは <a class="btn"> 直置き。ブロックでは <p class="btn"><a> になるため
   ・p が display:block で幅・高さが内容に従わない
   ・カンプの `.btn { margin-top: 24px }`（単独設置用）が flex アイテムに効いて高さが揃わない
   の2点が起きる。p を inline-flex のボタン箱にし、中の a は文字だけ担わせる。 */

.btns > .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  line-height: 1.5;
}

.btns > .btn > a {
  position: relative;
  z-index: 1;
  color: inherit;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  transition: gap .38s cubic-bezier(.22,.65,.3,1);
}

/* 矢印。ホバーで少し右へ伸びる */
.btns > .btn > a::after {
  content: "→";
  font-size: 13px;
  transform: translateX(0);
  transition: transform .38s cubic-bezier(.22,.65,.3,1);
}

/* ---- 2. ホバー: 色面が左から滑り込む ----
   opacity を落とすだけの素朴なホバーをやめ、
   面が塗られて文字が反転する動きにする。トンマナを崩さないよう色数は増やさない。 */

.btns > .btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .42s cubic-bezier(.22,.65,.3,1);
}

.btns > .btn:hover {
  opacity: 1;
  transform: translateY(-2px);
}

.btns > .btn:hover > a::after {
  transform: translateX(4px);
}

/* 白抜きボタン: 白が塗られて文字が紺に反転 */
.btns > .btn-ghost::before {
  background: #fff;
}

.btns > .btn-ghost:hover {
  color: var(--navy);
  border-color: #fff;
}

.btns > .btn-ghost:hover::before {
  transform: scaleX(1);
}

/* 朱ボタン: 一段深い朱が重なり、影で浮かせる */
.btns > .btn-shu::before {
  background: #A6371F;
}

.btns > .btn-shu:hover {
  box-shadow: 0 10px 24px rgba(196, 71, 44, .32);
}

.btns > .btn-shu:hover::before {
  transform: scaleX(1);
}

/* 動きを抑える設定の利用者には面の移動だけ止める */
@media (prefers-reduced-motion: reduce) {
  .btns > .btn,
  .btns > .btn::before,
  .btns > .btn > a,
  .btns > .btn > a::after {
    transition: none;
  }
  .btns > .btn:hover {
    transform: none;
  }
}

/* ---- 3. ヘッダーメニューのホバー ----
   TT5 は既定でホバー時に text-decoration: underline を出す。これを止めて、
   文字の下に短い朱のバーが中央から開く形にする。全幅の下線より控えめで、
   和のトンマナに合う。現在のページ（aria-current）にも同じバーを出して位置を示す。 */

header .wp-block-navigation a,
header .wp-block-navigation a:hover,
header .wp-block-navigation a:focus,
header .wp-block-navigation a:active {
  text-decoration: none;
}

header .wp-block-navigation li:not(.nav-shop) > a {
  position: relative;
  padding-bottom: 6px;
  transition: color .24s ease;
}

header .wp-block-navigation li:not(.nav-shop) > a::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 18px;
  height: 2px;
  background: var(--shu);
  transform: translateX(-50%) scaleX(0);
  transform-origin: center;
  transition: transform .34s cubic-bezier(.22,.65,.3,1);
}

header .wp-block-navigation li:not(.nav-shop) > a:hover {
  color: var(--sea);
}

header .wp-block-navigation li:not(.nav-shop) > a:hover::after,
header .wp-block-navigation li:not(.nav-shop) > a[aria-current="page"]::after {
  transform: translateX(-50%) scaleX(1);
}

header .wp-block-navigation li:not(.nav-shop) > a[aria-current="page"] {
  color: var(--sea);
}

@media (prefers-reduced-motion: reduce) {
  header .wp-block-navigation li:not(.nav-shop) > a,
  header .wp-block-navigation li:not(.nav-shop) > a::after {
    transition: none;
  }
}


/* ---- 5. クリック時のフォーカスリングを消す ----
   TT5 は :focus でアウトラインを出すため、ロゴやメニューをクリックすると黒い枠が残る。
   ただしキーボード操作の利用者には位置が分からなくなるので、
   :focus-visible（キーボード操作時のみ発火）では控えめなリングを出す。
   マウスクリックだけ消すのが正しい作法。 */

a:focus:not(:focus-visible),
button:focus:not(:focus-visible),
.wp-block-navigation a:focus:not(:focus-visible),
.wp-block-site-logo a:focus:not(:focus-visible),
.wp-block-site-title a:focus:not(:focus-visible) {
  outline: none;
  box-shadow: none;
}

a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--sea);
  outline-offset: 3px;
}

/* 朱ボタンの上では藍のリングが沈むので白に切り替える */
header .wp-block-navigation li.nav-shop > a:focus-visible,
.btns > .btn-shu > a:focus-visible {
  outline-color: #fff;
}

/* ---- 6. 沿革のドットが左で切れる ----
   `.h-table tr::before` は left:-8px で行の外へはみ出して縦罫線の上に乗る設計。
   WordPress のテーブルブロックは `.wp-block-table { overflow-x: auto }` を持つため、
   はみ出した左半分が切り取られてしまう。
   沿革は tr を block にして縦積みにしており横スクロールは不要なので、visible に戻す。 */

.wp-block-table.h-table,
.wp-block-table.h-table > table {
  overflow: visible;
}

/* ドットが乗るぶんの左余白を親側で確保しておく（inner narrow の左端で切れないように） */
.wp-block-table.h-table {
  padding-left: 8px;
}


/* ---- 7. お知らせのカテゴリータグ ----
   カンプ: <span class="tag">EC</span>（短い語を想定した 84px 固定幅の grid 列）
   ブロック: <div class="taxonomy-category tag"><a>カテゴリー名</a>

   クライアントが長いカテゴリー名を作っても枠から溢れないよう、
   1行に収めて溢れた分は省略する。リンクの色はタグの枠色に揃える。 */

.news-item .tag {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  padding-left: 4px;
  padding-right: 4px;
}

.news-item .tag a {
  color: inherit;
  text-decoration: none;
}

.news-item .tag a:hover {
  text-decoration: underline;
}

/* ---- 8. 投稿一覧（クエリーループ）----
   post-template は <ul><li> を出すため、カンプの `.news-list > .news-item` という
   直接の親子関係が崩れる。罫線と余白は .news-item（group）側が持っているので、
   間に入る <ul>/<li> からは余白と装飾を抜いておく。 */

.news-list .wp-block-post-template {
  margin: 0;
  padding: 0;
  list-style: none;
  gap: 0;
}

.news-list .wp-block-post-template > li {
  margin: 0;
  padding: 0;
}

/* 日付ブロックは grid の1列目。<time> 側に文字装飾が当たるので箱の余白だけ消す */
.news-item .wp-block-post-date {
  margin: 0;
}

.news-item .wp-block-post-date time {
  text-decoration: none;
}

/* タイトルは post-title（level:0 → <p>）。カンプの `.news-item p` と同じ扱いにする */
.news-item .wp-block-post-title {
  margin: 0;
  font-size: inherit;
  font-weight: 400;
  line-height: 1.7;
}

.news-item .wp-block-post-title a {
  text-decoration: none;
  color: var(--ink);
}

/* ページネーション。カンプの .pager a と同じ見た目に揃える */
.pager .wp-block-query-pagination-numbers .page-numbers,
.pager .wp-block-query-pagination-previous,
.pager .wp-block-query-pagination-next {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 3px;
  font-size: 13px;
  background: var(--white);
  text-decoration: none;
  color: var(--ink);
}

.pager .wp-block-query-pagination-numbers .page-numbers.current {
  background: var(--navy);
  color: #fff;
  border-color: var(--navy);
}

.pager .wp-block-query-pagination-numbers .page-numbers:hover:not(.current) {
  border-color: var(--sea);
  color: var(--sea);
}

.pager .wp-block-query-pagination-previous,
.pager .wp-block-query-pagination-next {
  width: auto;
  padding: 0 14px;
}


/* ============================================================
   2026/09/16 修正（2回目）
   ============================================================ */

/* ---- 9. 沿革のドットを縦罫線の中心に合わせる ----
   実測: tr左端 358px / 罫線幅2px → 罫線の中心は 359px
         ドットは left:-8px で実寸14px（疑似要素には box-sizing:border-box が効かず
         width:10px + border:2px×2 = 14px になる）→ 中心が 357px で 2px 左にずれていた。

   ドット中心 = tr左端 + left + 7 を罫線中心（tr左端 + 1）に合わせるので
   left = 1 - 7 = -6px が正解。 */

.wp-block-table.h-table tr::before {
  left: -6px;
}

/* ---- 10. お知らせ一覧の行を上下中央に ----
   原因: `.news-item` の直下の子に WordPress のブロック間余白（19.2px）が残っており、
   タグだけ margin-top が付いて grid 全体が下へずれていた。
   （余白リセットの対象コンテナに .news-item を入れ忘れていた）

   あわせて align-items を baseline → center にする。
   日付・タグ・タイトルで文字サイズが違うため、baseline だと行の中で上寄りに見える。
   ★2026/09/18: 中央揃えの指定は common.css の `.news-item` 側へ移した（top.css の統合で
     カンプ側が後から勝つ状態が無くなり、こちらで詳細度を上げる必要がなくなった）。
     このブロックには余白のリセットだけを残す（グローバルスタイルの
     `:root :where(.is-layout-flow) > * { margin-block-start: 1.2rem }` を打ち消すのに必要）。 */

.news-item > * {
  margin-block-start: 0;
  margin-block-end: 0;
}


/* ---- 11. FVボタンの幅を揃える ----
   カンプは inline-block で内容幅。文字数が違うため「事業内容を見る」が広く、
   スマホで縦積みになったときに幅の差が目立つ。最小幅を揃えて見た目を整える。 */

.btns > .btn {
  min-width: 200px;
}

@media (max-width: 420px) {
  /* 320px 端末でも左右の余白（20px×2）を確保できる範囲に抑える */
  .btns > .btn {
    min-width: 0;
    width: 100%;
  }
}


/* ---- 12. ハンバーガーメニュー（モバイルのオーバーレイ）----
   ★カンプには「メニューを開いた状態」が存在しないため、指定が漏れていた。

   カンプの `nav ul { display:flex; gap:24px }` と、こちらで足した
   `header nav.wp-block-navigation { font-size:13.5px; gap:24px }` が
   オーバーレイの中にも効いてしまい、項目が横一列のまま画面外へ出て
   1つしか見えない状態になっていた。開いている時だけ縦並びに戻す。 */

header .wp-block-navigation__responsive-container.is-menu-open {
  padding: 28px 20px;
  background-color: var(--paper);
}

header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content,
header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  width: 100%;
  font-size: 15px;
}

header .wp-block-navigation__responsive-container.is-menu-open li {
  width: 100%;
  border-bottom: 1px solid var(--line);
}

header .wp-block-navigation__responsive-container.is-menu-open a {
  display: block;
  padding: 18px 2px;
  font-size: 15px;
  letter-spacing: .06em;
}

/* 縦並びでは下のバーが区切り線とぶつかるので出さない */
header .wp-block-navigation__responsive-container.is-menu-open li:not(.nav-shop) > a::after {
  display: none;
}

/* お問い合わせは最後に朱のブロックとして置く */
header .wp-block-navigation__responsive-container.is-menu-open li.nav-shop {
  margin-top: 20px;
  border-bottom: 0;
}

header .wp-block-navigation__responsive-container.is-menu-open li.nav-shop > a {
  display: block;
  text-align: center;
  padding: 16px;
  font-size: 14px;
}

/* 閉じるボタンの位置と当たり判定 */
header .wp-block-navigation__responsive-container-close {
  top: 20px;
  right: 20px;
  padding: 8px;
}


/* ---- 13. ★ハンバーガーメニューが header の中に閉じ込められる ----
   症状: オーバーレイが position:fixed / inset:0 なのに高さ66px（＝ヘッダーの高さ）しかなく、
         メニュー項目が右上の狭い領域に押し込まれる。

   原因: カンプの `header { backdrop-filter: blur(8px) }`。
         backdrop-filter は filter と同じく **containing block を生成する**ため、
         子孫の position:fixed の基準が viewport ではなく header になる。
         結果 inset:0 が「header の内側いっぱい」を意味してしまう。

   対処: メニューを開いている間だけ backdrop-filter を外す（ぼかしは閉じている間だけで十分）。
         :has() が効かない環境でも破綻しないよう、オーバーレイ自身にも画面高さを与えておく。 */

body:has(.wp-block-navigation__responsive-container.is-menu-open) header {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

header .wp-block-navigation__responsive-container.is-menu-open {
  height: 100vh;
  height: 100dvh;
  max-height: 100dvh;
  overflow-y: auto;
}


/* ---- 14. ハンバーガーメニューの中身を整える（!important を使う理由つき）----

   TT5 のオーバーレイCSSは :where() を含む高詳細度セレクタで、
   たとえば次のような指定を持つ:

     .wp-block-navigation__responsive-container.is-menu-open:where(:not(.disable-default-overlay))
       .wp-block-navigation-item { color: inherit !important; background: transparent }

   詳細度 (0,3,0) かつ一部 !important 付きで、クラスを重ねただけでは安定して勝てない。
   さらにブロックCSSはオンデマンド出力のため読み込み順もWP側の判断に委ねられる。
   ハンバーガーはスマホ利用者が必ず通る導線なので、ここは確実性を優先して !important で固定する。
   （他の箇所は詳細度で解決しており、!important はこのブロックに限定している） */

header .wp-block-navigation__responsive-container.is-menu-open {
  padding: 72px 24px 32px !important;
  background-color: var(--paper) !important;
}

header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content,
header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  gap: 0 !important;
  width: 100% !important;
  padding: 0 !important;
}

header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
  display: block !important;
  width: 100% !important;
  align-items: stretch !important;
  border-bottom: 1px solid var(--line);
  background: transparent;
}

header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item > a {
  display: block !important;
  width: 100% !important;
  padding: 18px 2px !important;
  font-size: 15px !important;
  text-align: left !important;
  color: var(--ink) !important;
  letter-spacing: .06em;
}

/* 縦並びでは下のバーが区切り線と重なるので出さない */
header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item > a::after {
  display: none !important;
}

/* お問い合わせは一覧の下に朱のブロックとして置く */
header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.nav-shop {
  margin-top: 24px;
  border-bottom: 0;
  border-radius: 3px;
  background: var(--shu) !important;
}

header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.nav-shop > a {
  padding: 16px !important;
  text-align: center !important;
  font-size: 14px !important;
  color: #fff !important;
}

/* 閉じるボタン（×）の位置 */
header .wp-block-navigation__responsive-container-close {
  top: 22px !important;
  right: 20px !important;
  padding: 6px;
}


/* ============================================================
   15. Snow Monkey Forms をカンプのトンマナに合わせる

   カンプ: <div class="f-row"><label>ラベル<span class="req">必須</span></label><input></div>
   SMF   : <div class="smf-item">
             <div class="smf-item__col--label"><div class="smf-item__label"><span class="smf-item__label__text">ラベル</span></div></div>
             <div class="smf-item__col--controls"><div class="smf-item__controls">
               <div class="smf-text-control"><input class="smf-text-control__control" data-validations="required"></div>
             </div></div>
           </div>

   ★必須／任意のバッジは、item に手でクラスを付けずに
     data-validations 属性の有無から :has() で出す。
     こうすればクライアントがエディタで必須チェックを切り替えるだけでバッジも追従する。
   ============================================================ */

.snow-monkey-form {
  margin-top: 40px;
}

/* 項目の間隔（カンプの .form { gap: 22px } 相当） */
.snow-monkey-form .smf-form > .smf-item + .smf-item {
  margin-top: 22px;
}

.snow-monkey-form .smf-item {
  display: block;
}

/* ---- ラベル ---- */
.snow-monkey-form .smf-item__col--label {
  margin-bottom: 8px;
}

.snow-monkey-form .smf-item__label {
  display: flex;
  align-items: center;
  gap: 8px;
}

.snow-monkey-form .smf-item__label__text {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--navy);
  letter-spacing: .04em;
}

/* 必須バッジ（data-validations に required を持つ項目） */
.snow-monkey-form .smf-item:has([data-validations~="required"]) .smf-item__label::after {
  content: "必須";
  font-size: 10px;
  letter-spacing: .1em;
  padding: 2px 8px;
  border-radius: 2px;
  font-weight: 700;
  background: var(--shu);
  color: #fff;
  flex: none;
}

/* 任意バッジ（required を持たない項目）
   ★文字色は --muted（#5C6B74）だと #E4E0D7 の上で 4.14:1 しかなく、10pxの文字には足りない
     （WCAG AA は 4.5:1）。少し暗くして 5.4:1 にしている。common.css の .opt と同じ値 */
.snow-monkey-form .smf-item:not(:has([data-validations~="required"])) .smf-item__label::after {
  content: "任意";
  font-size: 10px;
  letter-spacing: .1em;
  padding: 2px 8px;
  border-radius: 2px;
  font-weight: 700;
  background: var(--line);
  color: #4A5A63;
  flex: none;
}

/* ---- 入力欄 ---- */
.snow-monkey-form .smf-text-control,
.snow-monkey-form .smf-select-control,
.snow-monkey-form .smf-textarea-control,
.snow-monkey-form .smf-item__controls {
  width: 100%;
}

.snow-monkey-form .smf-text-control__control,
.snow-monkey-form .smf-select-control__control,
.snow-monkey-form .smf-textarea-control__control {
  width: 100%;
  padding: 14px 16px;
  font-size: 15px;
  font-family: var(--gothic);
  border: 1px solid var(--line);
  border-radius: 3px;
  background: var(--white);
  color: var(--ink);
  line-height: 1.6;
}

.snow-monkey-form .smf-textarea-control__control {
  min-height: 170px;
  resize: vertical;
}

.snow-monkey-form .smf-text-control__control:focus,
.snow-monkey-form .smf-select-control__control:focus,
.snow-monkey-form .smf-textarea-control__control:focus {
  outline: 2px solid var(--sea);
  outline-offset: 1px;
  border-color: var(--sea);
}

/* select の矢印はSMFが span で描くので、余白だけ確保する */
.snow-monkey-form .smf-select-control {
  position: relative;
}

.snow-monkey-form .smf-select-control__control {
  padding-right: 42px;
  appearance: none;
}

/* 矢印は SMF 標準（toggle の ::before に描かれる「⌄」）をそのまま使い、位置だけ右端に寄せる。
   ★SMF は toggle に left:0 を指定しているため、right だけ指定すると left が優先されて
     セレクトボックスの左外側に出てしまう。left:auto を明示する。
   ★以前ここで border の三角を自前で描いていたが、SMF の矢印と二重になるため撤去した。 */
.snow-monkey-form .smf-select-control__toggle {
  position: absolute;
  left: auto;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
}

/* ---- 送信ボタン（カンプの .submit-wrap .btn 相当） ---- */
.snow-monkey-form .smf-action {
  margin-top: 36px;
  text-align: center;
}

.snow-monkey-form .smf-action .smf-button-control__control,
.snow-monkey-form .smf-action button {
  min-width: 280px;
  padding: 16px 34px;
  border: 0;
  border-radius: 3px;
  background: var(--shu);
  color: #fff;
  font-family: var(--gothic);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .08em;
  cursor: pointer;
  transition: opacity .2s, transform .2s, box-shadow .2s;
}

.snow-monkey-form .smf-action .smf-button-control__control:hover,
.snow-monkey-form .smf-action button:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(196, 71, 44, .32);
}

/* 確認画面の「修正する」は副ボタンとして白抜きにし、「送信する」（朱）と区別する。
   ★SMF はボタンをクラスではなく data-action 属性（back / confirm / complete）で区別している。
     以前 .smf-button-control--back で指定していたが、そのクラスは存在せず効いていなかった。 */
.snow-monkey-form .smf-action button[data-action="back"] {
  background: transparent;
  color: var(--navy);
  border: 1px solid var(--navy);
  min-width: 200px;
}

.snow-monkey-form .smf-action button[data-action="back"]:hover {
  box-shadow: none;
  background: var(--sea-soft);
}

/* ---- エラー表示 ---- */
.snow-monkey-form .smf-item__controls .smf-error-messages {
  margin-top: 8px;
  font-size: 12.5px;
  color: var(--shu);
}

.snow-monkey-form .smf-system-error-content {
  margin-top: 20px;
  padding: 16px;
  border: 1px solid var(--shu);
  border-radius: 3px;
  font-size: 13px;
  color: var(--shu);
}

/* ---- 確認画面・完了画面 ---- */
.snow-monkey-form[data-screen="confirm"] .smf-item__controls {
  padding: 12px 0;
  font-size: 15px;
}

/* ---- スマホ ---- */
@media (max-width: 600px) {
  .snow-monkey-form .smf-action .smf-button-control__control,
  .snow-monkey-form .smf-action button {
    min-width: 0;
    width: 100%;
  }
}


/* ---- 確認画面・完了画面では 必須／任意 バッジを出さない ----
   入力欄の無い画面でバッジが残ると意味を持たないため。
   入力画面のバッジは :has() を含む高い詳細度で出しているので、ここは !important で打ち消す。 */
.snow-monkey-form[data-screen="confirm"] .smf-item__label::after,
.snow-monkey-form[data-screen="complete"] .smf-item__label::after {
  content: none !important;
}

/* 確認画面の値は入力欄と同じ左位置・読みやすい大きさに */
.snow-monkey-form[data-screen="confirm"] .smf-item__controls {
  padding: 4px 0 2px;
  font-size: 15px;
  color: var(--ink);
  line-height: 1.8;
}

/* ---- 進捗表示（入力 → 確認 → 完了）をサイトの藍に揃える ----
   SMF 既定は現在ステップが黒丸。フォームの data-screen と各ステップのクラスで現在地を判定する。 */
.snow-monkey-form .smf-progress-tracker {
  margin-bottom: 36px;
}

.snow-monkey-form[data-screen="input"] .smf-progress-tracker__item--input .smf-progress-tracker__item__number,
.snow-monkey-form[data-screen="confirm"] .smf-progress-tracker__item--confirm .smf-progress-tracker__item__number,
.snow-monkey-form[data-screen="complete"] .smf-progress-tracker__item--complete .smf-progress-tracker__item__number {
  background-color: var(--sea);
  border-color: var(--sea);
  color: #fff;
}

.snow-monkey-form[data-screen="input"] .smf-progress-tracker__item--input .smf-progress-tracker__item__text,
.snow-monkey-form[data-screen="confirm"] .smf-progress-tracker__item--confirm .smf-progress-tracker__item__text,
.snow-monkey-form[data-screen="complete"] .smf-progress-tracker__item--complete .smf-progress-tracker__item__text {
  color: var(--navy);
  font-weight: 700;
}

.snow-monkey-form .smf-progress-tracker__item__text {
  font-size: 13px;
  letter-spacing: .06em;
}


/* ============================================================
   16. core/media-text と core/columns への置き換えに伴う調整
   ============================================================ */

/* ---- core/media-text（写真つき2カラム）----
   検証結果: className="split" を付け、mediaWidth を 51 にすると
   インラインの grid-template-columns:51% auto がカンプの 1.05fr 1fr とほぼ一致する
   （1140px 幅で 581px : 505px ／ カンプは 583px : 502px）。
   gap 54px・align-items:center・画像の aspect-ratio 4/3 も .split の指定がそのまま効く。

   画像を右に置く場合（カンプの .split.rev 相当）は mediaPosition:"right" を使う。
   その際 media-text は自動で列順を入れ替えるので .rev クラスは付けない。 */

.wp-block-media-text.split {
  align-items: center;
}

/* ★2026/09/18 追加: 880px 以下で1カラムに落ちていなかった。
   カンプは `@media (max-width: 880px) { .split { grid-template-columns: 1fr } }` で縦積みにする設計だが、
   media-text はブロック自身に style="grid-template-columns:51% auto" をインラインで書き出すため、
   スタイルシートの指定が負ける（コアの縦積みは 600px 以下でしか効かない）。
   601〜880px では画像51%・本文49%の窮屈な2カラムが残っていたので、列指定を !important で上書きし、
   写真→本文の順に縦へ積む。 */
@media (max-width: 880px) {
  .wp-block-media-text.split {
    grid-template-columns: 100% !important;
    gap: 28px;
  }

  .wp-block-media-text.split > .wp-block-media-text__media {
    grid-column: 1;
    grid-row: 1;
  }

  .wp-block-media-text.split > .wp-block-media-text__content {
    grid-column: 1;
    grid-row: 2;
  }
}

.wp-block-media-text.split .wp-block-media-text__media img {
  aspect-ratio: 4 / 3;
  object-fit: cover;
  width: 100%;
  height: 100%;
}

/* media-text の content 側は左右に padding を持つのでリセットする */
.wp-block-media-text.split .wp-block-media-text__content {
  padding: 0;
}

/* ★content の子の margin は一括で 0 にしてはいけない。
   カンプの段落間・見出し下の余白は `.body { margin-top: 14px }` で作っており、
   `> *` で打ち消すと本文が詰まる（事業内容で発生）。
   media-text の content には WordPress のブロック間余白（is-layout-flow）も付かないので、
   先頭要素の上余白だけ消せば十分。 */
.wp-block-media-text.split .wp-block-media-text__content > :first-child {
  margin-top: 0;
}

/* ---- core/columns をカンプのグリッドとして使う ----
   ★`.wp-block-columns { display: flex }` は詳細度 (0,1,0)。カンプ側の
     `.scene-day { display: grid }` も (0,1,0) で同じため、
     ブロックCSSのオンデマンド出力順によっては flex が勝ってレイアウトが壊れる。
     クラスを2つ重ねて (0,2,0) にし、確実に grid を維持する。 */

.wp-block-columns.scene-day,
.wp-block-columns.feat-grid,
.wp-block-columns.flow-grid,
.wp-block-columns.rc-env,
.wp-block-columns.shop-grid,
.wp-block-columns.about-grid {
  display: grid;
}

/* biz-cards は元から flex なので display はそのまま。
   ただし columns のモバイル縦積み（781px以下で flex-direction: column）は
   カンプ側のブレークポイント（860px）と食い違うので打ち消す。 */
.wp-block-columns.biz-cards {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
}

/* core/column は flex-basis をインラインで持つ。grid の中では意味を持たないが、
   幅計算に影響する場面があるので auto に戻す。 */
.scene-day > .wp-block-column,
.feat-grid > .wp-block-column,
.flow-grid > .wp-block-column,
.rc-env > .wp-block-column,
.shop-grid > .wp-block-column,
.about-grid > .wp-block-column,
.biz-cards > .wp-block-column {
  flex-basis: auto !important;
  min-width: 0;
}

/* columns 既定の gap はカンプ側が持つので消す */
.wp-block-columns.scene-day,
.wp-block-columns.feat-grid,
.wp-block-columns.flow-grid,
.wp-block-columns.rc-env,
.wp-block-columns.shop-grid,
.wp-block-columns.about-grid,
.wp-block-columns.biz-cards {
  margin-bottom: 0;
}


/* ============================================================
   17. 開閉メニューのクローズボタンを右上に固定
   ============================================================

   オーバーレイは height:100dvh / overflow-y:auto にしてあるため、
   項目が増えると中身がスクロールする。その際に×が一緒に流れないよう
   position:fixed で viewport に固定する。

   ★これが成立するのは「メニューを開いている間 header の backdrop-filter を
     外している」ため。backdrop-filter があると containing block が header になり、
     fixed が header の内側に閉じ込められる（項目14の対処と同じ理屈）。 */

header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
  position: fixed !important;
  /* ★ログイン中は上に管理バー（782px以下は46px・それ以上は32px）が固定表示され、×が隠れる。
     管理バーがあるときだけその高さぶん下げる（訪問者には影響しない）。 */
  top: calc(18px + var(--wp-admin--admin-bar--height, 0px)) !important;
  right: 16px !important;
  z-index: 10;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  padding: 0 !important;
  color: var(--navy);
}

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

/* ×と項目が重ならないよう、開いている時の上余白を確保する */
header .wp-block-navigation__responsive-container.is-menu-open {
  padding-top: 76px !important;
}

/* ============================================================
   18. ヘッダーメニューの項目増加に備える
   ============================================================

   ホーム／プライバシーポリシーを足して7項目になった。
   さらに今後ECサイトへのボタンが入る想定なので、PCでの詰まりを緩和しておく。
   1180px の中で ロゴ約250px ＋ 7項目＋ボタンが収まる計算（実測で確認済み）。 */

/* ★2026/09/18 修正: セレクタに nav を足した。
   このブロックは以前 `header .wp-block-navigation`（詳細度 0,1,1）で書いていたため、
   ファイル前半の `header nav.wp-block-navigation`（0,1,2）に読み込み順と関係なく負けて、
   まったく効いていなかった（901〜915px でナビが2行に折り返す原因のひとつ）。 */

header nav.wp-block-navigation,
header nav.wp-block-navigation .wp-block-navigation__container,
.head-in nav.wp-block-navigation,
.head-in nav.wp-block-navigation .wp-block-navigation__container {
  gap: 20px;
}

/* 1100px 以下ではさらに詰める（ハンバーガーに切り替わる直前の帯） */
@media (max-width: 1100px) {
  header nav.wp-block-navigation,
  header nav.wp-block-navigation .wp-block-navigation__container,
  .head-in nav.wp-block-navigation,
  .head-in nav.wp-block-navigation .wp-block-navigation__container {
    gap: 14px;
  }
  header nav.wp-block-navigation a,
  .head-in nav.wp-block-navigation a {
    font-size: 12.5px;
  }
  header .wp-block-navigation li.nav-shop > a {
    padding: 8px 12px;
  }
}

/* ---- ECサイトへのボタン（今後追加する想定の受け皿）----
   お問い合わせ（.nav-shop）の隣に置く。ナビゲーションのリンクに
   追加CSSクラス「nav-ec」を付けるだけでこの見た目になる。
   朱はお問い合わせに使っているので、ECは藍にして役割を分ける。 */

header .wp-block-navigation li.nav-ec {
  background-color: var(--sea);
  border-radius: 3px;
  padding: 0;
  transition: opacity .2s;
}

header .wp-block-navigation li.nav-ec > a,
header .wp-block-navigation li.nav-ec > a:hover {
  display: inline-block;
  padding: 9px 16px;
  font-size: 12.5px;
  color: #fff;
}

header .wp-block-navigation li.nav-ec > a::after {
  display: none;
}

header .wp-block-navigation li.nav-ec:hover {
  opacity: .88;
}

/* 開閉メニュー内では朱ボタンと同じ扱い（全幅のブロック）にする */
header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.nav-ec {
  margin-top: 12px;
  border-bottom: 0;
  border-radius: 3px;
  background: var(--sea) !important;
}

header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.nav-ec > a {
  padding: 16px !important;
  text-align: center !important;
  font-size: 14px !important;
  color: #fff !important;
}


/* ---- core/columns の !important 付きルールを取り戻す ----
   ★WordPress のブロックライブラリCSSには次の2つがあり、いずれも !important 付きで
     カンプの指定を打ち消してしまう（変換作業で判明）:

     .wp-block-columns { align-items: normal !important; flex-wrap: wrap !important }
     @media (max-width:781px) {
       .wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column { flex-basis: 100% !important }
     }

   1つ目は align-items: center を潰すので、同じ !important で取り戻す。
   2つ目は BUSINESS の横スクロールレールを781px以下で縦積み＋4倍幅に崩すため、
   マークアップ側で isStackedOnMobile:false（= is-not-stacked-on-mobile）を付けて対象から外し、
   ここでも flex-wrap を固定しておく。 */

.wp-block-columns.about-grid,
.wp-block-columns.shop-grid,
.wp-block-columns.biz-cards {
  align-items: center !important;
}

.wp-block-columns.biz-cards {
  flex-wrap: nowrap !important;
}

/* grid にしているコンテナは列の折り返しをCSS側で持つので、core の flex-wrap は無効化しておく */
.wp-block-columns.scene-day,
.wp-block-columns.feat-grid,
.wp-block-columns.flow-grid,
.wp-block-columns.rc-env,
.wp-block-columns.shop-grid,
.wp-block-columns.about-grid {
  flex-wrap: initial !important;
}

/* ---- media-text で画像を右に置く場合 ----
   ★コアの save は mediaPosition:"right" のとき grid-template-columns を
     `auto <width>%` の順で出力する（`<width>% auto` ではない）。
     カンプの .split.rev（1fr 1.05fr）と同じ比率になるので rev クラスは不要。 */

.wp-block-media-text.has-media-on-the-right.split {
  align-items: center;
}


/* ============================================================
   19. スマホでも BUSINESS を「縦スクロールで横に流れる」動きにする（2026/09/16 ご要望）
   ============================================================

   カンプは 860px 以下で次のように縦スクロール連動を止め、横スワイプにしている:
     .bizpin    { height: auto }
     .bp-sticky { position: static; height: auto; overflow-x: auto; padding: 64px 0 }
     .bp-rail   { padding: 0 20px; transform: none !important }

   これを PC と同じピン留め構造に戻す。transform は JS 側で important 付きで書き込むので、
   CSS ではセクションの高さと sticky だけを取り戻せばよい。

   ★動きを減らす設定（prefers-reduced-motion: reduce）の利用者には適用しない。
     その場合はカンプどおりの横スワイプにフォールバックする。 */

/* ★かつては top.css が wp-overrides.css より後に読み込まれ、同じ詳細度だと
     カンプの `.bizpin { height:auto }` 等が勝ってしまうため、親クラスや要素を重ねて
     詳細度を1段上げていた。統合後は不要だが、HTML側も <section class="bizpin"> なのでそのまま。 */
@media (max-width: 860px) and (prefers-reduced-motion: no-preference) {
  section.bizpin {
    /* カード4枚＋見出しのレールがスマホでは画面幅の約4倍になるため、PCより少し長めに取り
       スクロール量に対する横移動が速くなりすぎないようにする */
    height: 360vh;
  }

  .bizpin .bp-sticky {
    position: sticky;
    top: 0;
    /* アドレスバーの出し入れで高さが揺れないよう、小さいビューポート単位を使う */
    height: 100vh;
    height: 100svh;
    overflow: hidden;
    padding: 0;
    display: flex;
    align-items: center;
  }

  .bizpin .bp-rail {
    padding: 0 20px;
    will-change: transform;
  }
}

/* スマホは見出しとカードを縦に積むため、ヘッダー（66px・position:sticky）の下から始める。
   align-items:center のままだと、画面の低い端末で見出しの「BUSINESS」がヘッダーに隠れる
   （実機の iPhone で発生）。上寄せ＋ヘッダー分の余白に変える。 */
@media (max-width: 600px) and (prefers-reduced-motion: no-preference) {
  .bizpin .bp-sticky {
    align-items: flex-start;
    padding-top: 76px;
  }
}

/* ★カード上下の紺の余白について（2026/09/19 検討の記録）
   「sticky の高さに上限を切る」方法を試したが、画面に見える紺の量は減らなかった。
   sticky を 100svh より低くすると、その下に親（.bizpin の紺背景）がそのぶん見えるだけで、
   画面に映る紺の総量（＝画面の高さ − レールの高さ）は変わらない。しかもカードが
   画面中央ではなく上寄りになるので見た目が悪くなる。
   → sticky は 100svh のままにし、余白はカードを大きくすることで詰める（common.css 側）。 */


/* ============================================================
   20. お知らせの行（スマホ）でタイトルが狭い幅で折り返す（2026/09/17）
   ============================================================

   TOP のお知らせ／お知らせ一覧ページ（どちらも .news-list > .news-item）に効く。

   カンプの 640px 以下:
     .news-item   { grid-template-columns: max-content 74px }
     .news-item p { grid-column: 1 / -1 }
   列が「日付ぴったり と 74px」の2本しかないため、タイトルを 1 / -1 で広げても
   日付 + 間隔 + 74px にしかならない（カンプ自体も同じ。320px 幅で実測 188px／行の内側 272px）。
   → 2本目を 1fr にしてタイトルを行の幅いっぱいに広げ、カテゴリーの枠は 74px のまま左に寄せる。
     （3本目に 1fr を足す方法だと、列と間隔の合計が増え、検索結果のような狭い枠で
       はみ出すため、日付＋カテゴリーの幅のまま保てるこの形にした）

   あわせて:
   - 日付・カテゴリーとタイトルの間（14px）が行の上下余白（20〜22px）とほぼ同じで、
     タイトルだけ別の行に見えるため 8px に詰める（日付とカテゴリーの横の間隔は維持）

   ★2026/09/18: ここにあった中央揃え（align-items:center）とカテゴリー枠の左右余白（4px）は
     common.css の `.news-item` 側へ移した。top.css を common.css に統合して
     「カンプ側が後から勝つ」状態が無くなり、詳細度を上げる必要がなくなったため。
     1列目も 96px 固定から max-content（日付の実幅）に変えた。PC と同じ考え方で、
     游ゴシック／メイリオしか無い環境でも折り返さず、余分な余白も出ない。 */

@media (max-width: 640px) {
  .news-list .news-item {
    grid-template-columns: max-content 1fr;
    row-gap: 8px;
  }

  .news-list .news-item .tag {
    justify-self: start;
    width: 74px;
  }

  /* タイトルは <p>（post-title の level:0）なので、カンプの `.news-item p { grid-column:1/-1 }` も効く。
     見出しレベルを変えて <p> でなくなっても崩れないよう、ブロックのクラスでも指定しておく */
  .news-list .news-item .wp-block-post-title {
    grid-column: 1 / -1;
  }
}


/* ============================================================
   21. お知らせ一覧のページ送り（2026/09/17）
   ============================================================

   投稿が1ページの表示件数（設定 → 表示設定、現在10件）を超えると出る。
   いまは6件なので表示されていないが、表示件数を2件にして確認したところ次の崩れがあった:
   ① 番号（1 2 3）が縦に積まれる
      ページ送りブロックは番号を <div class="wp-block-query-pagination-numbers"> で包む。
      カンプの .pager { display:flex } は外側の <nav> にしか効かず、内側の div は通常のブロックのまま
   ② 最後のお知らせの下線にくっつく
      <nav> はクエリーループ（.news-list）の中に出力されるため、3. の `.news-list > * { margin-block:0 }` が
      カンプの `.pager { margin-top:42px }` を打ち消していた */

.pager .wp-block-query-pagination-numbers {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

.news-list > .pager {
  margin-top: 42px;
  gap: 10px;
  flex-wrap: wrap;
}

/* スマホでは「前のページ・番号・次のページ」が1行に入らず、次のページだけが2行目に落ちて
   左右非対称になる（320px で確認）。番号を1行目にまとめ、前後のリンクを2行目に並べる */
@media (max-width: 640px) {
  .news-list > .pager .wp-block-query-pagination-numbers {
    order: -1;
    flex-basis: 100%;
  }
}


/* ============================================================
   22. 600〜900px でヘッダーメニューが2行に折り返して崩れる（2026/09/18）
   ============================================================

   実測（900 / 820 / 781 / 700 / 601px）: ナビが高さ97pxの2行になり、
   1行目はヘッダー（高さ67px）の上へはみ出して隠れ、お問い合わせボタンがヒーローに重なっていた。

   原因: カンプは `@media (max-width: 900px) { nav ul { display:none } }` で
   900px 以下をハンバーガーに切り替える想定だが、
   ① ナビゲーションブロックの `ul` には `.wp-block-navigation__container { display:flex }`（0,1,0）が付き、
      カンプの `nav ul`（0,0,2）では負ける
   ② ハンバーガーのボタンは、ブロック本体の CSS が 600px 未満でしか表示しない
   ため、600〜900px ではメニューが開いたまま横に収まらない状態になっていた。
   （7項目＋お問い合わせで約558px 必要）

   切り替えの位置をカンプの意図どおり 900px に直す。
   ★開いた状態（is-menu-open）は全画面のオーバーレイなので対象外にする。 */

@media (max-width: 900px) {
  header .wp-block-navigation__responsive-container:not(.is-menu-open),
  .head-in .wp-block-navigation__responsive-container:not(.is-menu-open) {
    display: none !important;
  }

  header .wp-block-navigation__responsive-container-open,
  .head-in .wp-block-navigation__responsive-container-open {
    display: flex !important;
  }
}