@charset "UTF-8";
/* ============================================
   TSUBAME Plugin Front CSS
   Version: 1.0.0
   ============================================ */

/* CSS変数

   --vk-color-primary は Lightning が「外観 → カスタマイズ → 色 →
   キーカラー」の値を `:root` に注入してくれる。TSUBAME 側ではそれを
   `var(--vk-color-primary, ...)` で参照するだけで自動連動する
   （PHP 側で値を取り出す必要はない）。ここでは独自に持たない。
*/
:root {
    --tsubame-center-width: 450px;
    --tsubame-center-padding-x: 1.5rem;
    --tsubame-center-padding-bottom: 4rem;

    /* 中央カラムの両脇シャドウ。X 方向のオフセットと負の spread で
       左右にだけシャドウを伸ばす（縦に積まれたカラム同士の継ぎ目に
       影の帯を出さないために、上下方向には可能な限り抑える設計）。 */
    --tsubame-side-shadow:
        -8px 0 12px -10px rgba(0, 0, 0, 0.15),
         8px 0 12px -10px rgba(0, 0, 0, 0.15);

    /* スティッキーヘッダー下端の落ち影（ヘッダーが本文の上に「浮いて
       スクロールしている」感を出すため）。 */
    --tsubame-sticky-bottom-shadow: 0 6px 8px -4px rgba(0, 0, 0, 0.15);
}

/* ============================================
   1. 中央カラム450px固定
   ============================================ */
@media (min-width: 782px) {
    body.tsubame .kotori-fixed-center {
        flex-basis: var(--tsubame-center-width) !important;
        flex-grow: 0 !important;
        flex-shrink: 0 !important;
        width: var(--tsubame-center-width) !important;
        max-width: var(--tsubame-center-width) !important;
        min-width: var(--tsubame-center-width) !important;
        margin-left: auto !important;
        margin-right: auto !important;
        box-sizing: border-box !important;
    }
}

/* ============================================
   2. 左右カラムを画面の上下中央に固定
   ============================================ */
@media (min-width: 782px) {
    body.tsubame .kotori-fixed-left {
        position: fixed !important;
        top: 50% !important;
        left: 0 !important;
        transform: translateY(-50%) !important;
        width: calc((100vw - var(--tsubame-center-width)) / 2) !important;
        max-width: calc((100vw - var(--tsubame-center-width)) / 2) !important;
        z-index: 100;
    }
    body.tsubame .kotori-fixed-right {
        position: fixed !important;
        top: 50% !important;
        right: 0 !important;
        transform: translateY(-50%) !important;
        width: calc((100vw - var(--tsubame-center-width)) / 2) !important;
        max-width: calc((100vw - var(--tsubame-center-width)) / 2) !important;
        z-index: 100;
    }
}

/* ============================================
   3. ページトップ戻るボタン（パーフェクトサークル＋キーカラー連動）

   Lightning 標準のボタン `.page_top_btn` は背景に `#000` 等の
   塗りと、Vektor が用意した CSS 変数 `--ver_page_top_button_url`
   （上向きシェブロン SVG の data URL）を background-image として
   重ねる構造。

   塗りには Lightning のキーカラー（`:root` の `--vk-color-primary`
   に Lightning が自動注入）を使う。これで「外観 → カスタマイズ →
   色 → キーカラー」を変更するだけでボタンの色も追従する。
   `#03989e` はキーカラー未定義時のフォールバック。

   `background:` ショートハンドだけで色を上書きすると
   background-image までリセットされてシェブロンが消えるので、
   shorthand で色を当てた直後に background-image を再指定する。
   ============================================ */
body.tsubame .page_top_btn {
    width: 40px !important;
    height: 40px !important;
    background: var(--vk-color-primary, #03989e) !important;
    background-image: var(--ver_page_top_button_url) !important;
    background-size: 65% !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.8),
                0 0 0 2px rgba(25, 79, 55, 0.8) !important;
    border-radius: 50% !important;
}

/* ============================================
   4. メニューオーバーレイをセンター配置（450px）
   ============================================ */
@media (min-width: 782px) {
    body.tsubame .wp-block-navigation__responsive-container.is-menu-open {
        position: fixed !important;
        top: 0 !important;
        bottom: 0 !important;
        left: 50% !important;
        right: auto !important;
        transform: translateX(-50%);
        width: var(--tsubame-center-width) !important;
        max-width: var(--tsubame-center-width) !important;
        padding: 2rem !important;
    }
    body.tsubame .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation__responsive-container-content {
        width: 100%;
    }
    body.tsubame .wp-block-navigation__responsive-close {
        position: absolute !important;
        top: 1rem !important;
        right: 1rem !important;
    }
}

/* ============================================
   5. リンク下線非表示

   text-decoration ショートハンド単独だと、テーマ／プラグイン側が
   text-decoration-style 等のロングハンドを個別に書いていた場合に
   下線が残ることがあるため、ロングハンドも明示的に unset で潰す。
   ============================================ */
body.tsubame .no-underline a {
    text-decoration: none;
    text-decoration-style: unset;
    text-decoration-color: unset;
    text-decoration-thickness: unset;
    text-underline-offset: unset;
}

/* ============================================
   6. sticky ヘッダー

   `position: sticky` は、祖先要素のいずれかに `overflow: hidden`
   が掛かっていると効かなくなる。WordPress 環境では body や
   wp-block-cover にデフォルトで overflow 制御が乗っていることが
   多いため、TSUBAME 適用ページでは明示的に visible へ戻す。
   左右ヘッダーカラム（vk_hidden-xs）の背景色も、Lightning が
   付ける塗りを透明化してフロート的に見せる。
   ============================================ */
body.tsubame {
    overflow: visible !important;
}

body.tsubame .kotori-sticky-header {
    position: sticky !important;
    top: 0;
    z-index: 100;
    background-color: transparent !important;
}

body.tsubame .kotori-sticky-header > .wp-block-column.vk_hidden-xs {
    background-color: transparent !important;
}

body.tsubame .wp-block-cover,
body.tsubame .wp-block-cover__inner-container {
    overflow: visible !important;
}

/* admin bar 表示中は Lightning のモバイルナビボタンを隠す。
   TSUBAME のヘッダー／メニュー UI と二重表示にならないように。 */
body.tsubame.admin-bar .vk-mobile-nav-menu-btn {
    display: none !important;
}

/* ============================================
   7. Lightning標準パーツ非表示（保険）
   PHPフックが効かない場合の保険として併用。

   「TSUBAME レイアウト適用」とは別軸の `body.tsubame-hide-lightning`
   クラスでガードする。これがないと、レイアウト ON ＆ 非表示 OFF
   の組み合わせで、PHP は remove_action しないのに CSS だけ
   ヘッダー / タイトル帯 / フッターを display:none にしてしまう
   食い違いが起きる。
   ============================================ */
body.tsubame-hide-lightning .site-header,
body.tsubame-hide-lightning .page-header,
body.tsubame-hide-lightning .breadcrumb,
body.tsubame-hide-lightning .site-footer {
    display: none !important;
}

/* ============================================
   8. 中央カラム実測 450px 保証（仕様書 13.1 対策）

   Computed では指定値どおりに表示されるのに ScreenPresso 実測で広く
   なる問題への対処。原因候補は以下:
     a) WordPress の wp-block-cover__inner-container が独自 max-width を
        持ち、中の columns が右側にはみ出す形で計算される
     b) wp-block-columns の column-gap が flex-basis に加算される
     c) WordPress 6.x のグローバルスタイル
        (--wp--style--global--content-size 等) による上書き
     d) Lightning の .entry-content > * 系セレクタによる max-width 制約
     e) padding が box-sizing 計算に乗ってしまう

   いずれも !important + 詳細度の高いセレクタで強制固定する。
   ============================================ */

/* 中央カラムの内側パディング（左右）。
   box-sizing: border-box があるので外形 width は変わらず内側だけ縮む。
   PC・スマホ両方で当てる（モバイルでもコンテンツが画面端に貼り付かない
   ように一定の余白を確保）。値は --tsubame-center-padding-x（既定 1.5rem）。 */
body.tsubame .wp-block-columns > .kotori-fixed-center {
    padding-left: var(--tsubame-center-padding-x) !important;
    padding-right: var(--tsubame-center-padding-x) !important;
}

@media (min-width: 782px) {

    /* 親 wp-block-columns の gap / padding を 0 にして、中央カラム幅に
       他カラムの分の幅が乗らないようにする。
       左右カラムは position: fixed で抜けているため、gap は不要。 */
    body.tsubame .wp-block-columns:has(> .kotori-fixed-center) {
        gap: 0 !important;
        column-gap: 0 !important;
        row-gap: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-left: auto !important;
        margin-right: auto !important;
        max-width: var(--tsubame-center-width) !important;
        box-sizing: border-box !important;
    }

    /* WordPress グローバルスタイルの content-size を上書き。
       中央カラム配下のコンテンツが「想定より広がる」のを防ぐ。 */
    body.tsubame .kotori-fixed-center {
        --wp--style--global--content-size: var(--tsubame-center-width);
        --wp--style--global--wide-size: var(--tsubame-center-width);
    }

    /* wp-block-cover の inner-container に独自 max-width が掛かっている
       ケースの解除（仕様書 13.1.2）。 */
    body.tsubame .kotori-fixed-center .wp-block-cover__inner-container {
        max-width: none !important;
        width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        box-sizing: border-box !important;
    }

    /* Lightning の .entry-content 系が中央カラムを上書きしないように。 */
    body.tsubame .entry-content .kotori-fixed-center,
    body.tsubame .kotori-fixed-center.entry-content {
        max-width: var(--tsubame-center-width) !important;
        width: var(--tsubame-center-width) !important;
    }
}

/* ============================================
   9. 中央カラム下端の余白（コンテンツの終わりを示す空白）

   フッター同期パターンとの間に「ここで本文が終わり」と分かる
   ホワイトスペースを確保する。モバイルでも適用する。

   除外: .kotori-pattern クラスを併記したカラム（同期パターン側の
   ヘッダー/タイトル/フッターなど）には適用しない。
   コンテンツ用の中央カラム（顧客編集領域）にのみ効かせる。
   ============================================ */
body.tsubame .kotori-fixed-center:not(.kotori-pattern) {
    padding-bottom: var(--tsubame-center-padding-bottom) !important;
}

/* ============================================
   10. 中央カラムのパディング除去（明示クラス指定）

   .kotori-no-padding を中央カラムに付けると上下左右のパディングを
   すべて 0 化する。トップページなど画像をカラム端まで広げたいページで使用。

   1.1.5 で padding-top も 0 化対象に追加。それまでは padding-top のみ
   Section 12 任せ + インライン style 側に Gutenberg の preset spacing
   が残ると上端だけ余白が出る不具合があった（フロントページで顕在化）。

   注: 顧客が編集する中央カラムに付ける場合、追加 CSS クラス欄を
   誤削除されるとパディングが復活するリスクあり（実害は白い余白が
   出るだけで深刻ではない）。
   ============================================ */
body.tsubame .wp-block-columns > .kotori-fixed-center.kotori-no-padding {
    padding-top: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-bottom: 0 !important;
}

/* ============================================
   11. 中央カラムの両脇サイドシャドウ＋スティッキーヘッダー下端の落ち影

   経緯:
   - 1.0.17 まで: 全 `.kotori-fixed-center` に `0 4px 16px` の
     上下方向シャドウ。1 枚カラムなら美しいが、ヘッダー／本文／
     前後リンク／フッターの 4 枚積み構成では各カラム下端から
     にじむ影が次のカラム頭部に重なって "影の帯" になる問題。
   - 1.0.18: 影を完全撤去 → 結果として両脇の縦シャドウまで消えて
     味気なくなった。
   - 1.0.19（本セクション）: 両脇は薄いサイドシャドウを残しつつ、
     上下方向は `clip-path` で厳密にクリップしてカラム継ぎ目に
     影の帯が出ないようにする折衷案。スティッキーヘッダー直下
     にだけ別途、下方向の落ち影を加えて「ヘッダーが浮いている感」
     を表現。

   設計詳細:
   - サイドシャドウは X 方向オフセット ±8px、負の spread (-10px) で
     X 軸方向にだけ伸ばす。Y 方向の伸びは spread で大幅に圧縮済み。
   - 加えて `clip-path: inset(0 -50px 0 -50px)` で上下を厳密に
     クリップ。左右 -50px は box-shadow が外へ抜けるためのマージン。
   - スティッキーヘッダー直下の落ち影は別 box-shadow を 1 本追加し、
     `clip-path` の bottom を `-50px` に開けて下方向だけ抜けさせる。

   左右カラム (`kotori-fixed-left/right`) は無影固定（プリセット影への保険）。
   ============================================ */
body.tsubame .kotori-fixed-center {
    box-shadow: var(--tsubame-side-shadow);
    clip-path: inset(0 -50px 0 -50px);
}

body.tsubame .kotori-sticky-header .kotori-fixed-center {
    box-shadow:
        var(--tsubame-side-shadow),
        var(--tsubame-sticky-bottom-shadow);
    clip-path: inset(0 -50px -50px -50px);
}

body.tsubame .kotori-fixed-left,
body.tsubame .kotori-fixed-right {
    box-shadow: none !important;
}

/* ============================================
   12. 本文中央カラム冒頭の余白（非フロントページのみ）

   フロントページ指定されたページ（body.home）には適用せず、
   通常の固定ページ・投稿ページでは
   本文の 3 カラムの中央カラム冒頭（最初の段落／見出しの直前）に
   VK Blocks の md サイズ相当の余白を確保する。

   識別子: .kotori-fixed-center:not(.kotori-pattern)
   = 同期パターン以外（本文用）の中央カラム。

   var(--vk_block-margin-md--margin-top) で VK Blocks の md と同値
   になる。VK Blocks 未読み込み環境のフォールバックとして 1.5rem。
   ============================================ */
body.tsubame:not(.home) .kotori-fixed-center:not(.kotori-pattern):not(.kotori-no-padding) {
    padding-top: var(--vk_block-margin-md--margin-top, 1.5rem) !important;
}

/* ============================================
   13. 単一投稿ページのレイアウト整理

   Lightning の単一投稿テンプレートが標準で出力する記事ヘッダー
   （タイトル＋投稿日／更新日／投稿者の塊）は、同期パターン側で
   別途タイトルを出しているため非表示にする。

   旧 1.0.10〜1.0.18 では、ここに `.vk_posts.next-prev`（Lightning
   純正の前/次の投稿ナビ）を縦積みカード化する CSS も置いていたが、
   1.0.14 で `lightning_is_next_prev` フィルタによりレンダリング
   そのものをサーバー側で停止 + Section 18 でも `display: none`
   フォールバックを当てるようになり、当該 CSS は到達しなくなった
   ため 1.0.26 で削除（約 110 行）。前/次の記事の見た目は Section 16
   の `core/post-navigation-link` ブロック向けスタイルで一本化。

   `body.tsubame.single` でスコープを単一投稿ページに限定する
   （アーカイブ等の他コンテキストには影響しない）。
   ============================================ */

/* 記事ヘッダー（タイトル＋投稿者＋日付の塊）を丸ごと非表示 */
body.tsubame.single .entry-header {
    display: none !important;
}

/* ============================================
   14. クエリループのページ送り（Vektor 風ボックス）

   WordPress 標準の `<!-- wp:query-pagination -->` は数字が裸で並ぶだけで
   タップ領域が狭く、スマホで押しづらい。各ページ番号と前/次ボタンを
   2.5em 角のボックスに整え、現在ページはキーカラー塗りつぶし、
   それ以外はキーカラーの枠線という Vektor テーマ風の見た目にする。

   塗り／枠の色は `var(--vk-color-primary, #03989e)` で取得する。
   `--vk-color-primary` は Lightning が「外観 → カスタマイズ → 色 →
   キーカラー」の値を `:root` に注入するため、クライアントが色を
   変更すると全ページ送りボタンも自動追従する。`#03989e` は
   Lightning が読まれない非常時のフォールバック。

   タップ領域の最小は 2.5em（≒ 40px）。狭幅でも `flex-wrap: wrap` で
   折り返す。
   ============================================ */
body.tsubame .wp-block-query-pagination {
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.4em !important;
}

body.tsubame .wp-block-query-pagination-numbers {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.4em;
}

body.tsubame .wp-block-query-pagination .page-numbers,
body.tsubame .wp-block-query-pagination-previous,
body.tsubame .wp-block-query-pagination-next {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.25em;
    box-sizing: border-box;
    min-width: 2.5em;
    height: 2.5em;
    padding: 0 0.7em;
    border: 1px solid var(--vk-color-primary, #03989e);
    border-radius: 4px;
    color: var(--vk-color-primary, #03989e);
    text-decoration: none;
    line-height: 1;
}

body.tsubame .wp-block-query-pagination .page-numbers:not(.current):not(.dots):hover,
body.tsubame .wp-block-query-pagination-previous:hover,
body.tsubame .wp-block-query-pagination-next:hover {
    background-color: rgba(0, 0, 0, 0.04);
}

body.tsubame .wp-block-query-pagination .page-numbers.current {
    background-color: var(--vk-color-primary, #03989e);
    border-color: var(--vk-color-primary, #03989e);
    color: #fff;
}

/* 省略記号「…」は枠なし・塗りなしで素のまま見せる */
body.tsubame .wp-block-query-pagination .page-numbers.dots {
    border: none;
    background: transparent;
    color: inherit;
    min-width: auto;
    padding: 0 0.3em;
}

/* ============================================
   15. 投稿フッター（ページ送り入り同期パターン）を /blog/ 限定で表示

   クエリループのページ送りを含む 3 カラム行（投稿フッター用の
   同期パターン）は、スラッグ "blog" の固定ページにだけ表示したい。
   それ以外（他の固定ページ・単一投稿・アーカイブ・ホーム等）では
   テンプレート側に挿入されていても出力面で隠す。

   識別子は body class `tsubame-blog-page`（class-tsubame-output.php
   の add_body_class() が /blog/ スラッグの固定ページに付与する）。
   `:not(.tsubame-blog-page)` で「/blog/ 以外のすべて」をターゲット
   にし、`:has(.wp-block-query-pagination)` で対象の 3 カラム行
   だけをピンポイント特定する。ページ送りを含まない他の同期パターン
   （ヘッダー／フッター等）には一切影響しない。
   ============================================ */
body.tsubame:not(.tsubame-blog-page) .wp-block-columns:has(.wp-block-query-pagination) {
    display: none !important;
}

/* ============================================
   16. 前/次の記事ナビ — WP コアブロック版（縦積みカード）

   投稿テンプレートの同期パターン内で WP コアの
   `core/post-navigation-link` ブロックを 2 つ並べて使うパターンに対応。
   各リンクは下記マークアップで描画される（WP コアが直接 `<a>` を出力）:

       <a class="wp-block-post-navigation-link
                 post-navigation-link-previous|next
                 has-text-align-left|right" href="...">
           タイトル
       </a>

   見た目は Section 13 b の Lightning 純正版（vk_posts.next-prev）と
   同じ「縦積みカード＋chevron＋ラベル」に揃える。

   - ラベル「前の記事」「次の記事」は ::before 疑似要素で挿入する
     （WP コアブロック自体はラベル要素を出さないため）
   - chevron は ::after 疑似要素で左右に絶対配置
   - WP コアの `arrow` 設定で矢印を出している場合の素の矢印
     （`__arrow-previous` / `__arrow-next` span）は重複防止のため
     念のため非表示化
   ============================================ */
body.tsubame.single .wp-block-post-navigation-link {
    display: block !important;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 6px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    padding: 0.85em 1em;
    color: inherit !important;
    text-decoration: none !important;
    position: relative;
    font-weight: 600;
    line-height: 1.4;
}

/* 隣り合うナビ間の間隔 */
body.tsubame.single .wp-block-post-navigation-link + .wp-block-post-navigation-link {
    margin-top: 0.75em;
}

/* WP コアの素の矢印（→ ←）が出ている場合は非表示にして
   こちら側の chevron 一本に統一する。 */
body.tsubame.single .wp-block-post-navigation-link__arrow-previous,
body.tsubame.single .wp-block-post-navigation-link__arrow-next {
    display: none !important;
}

/* 隣接投稿が存在しない場合（最新記事の "次の記事"、最古記事の "前の記事"）、
   WP コアは中身が空のラッパー div だけを出力する:

       <div class="post-navigation-link-next ... wp-block-post-navigation-link"></div>

   このままだと上のカード装飾＋ ::before ラベル＋ ::after chevron が
   空のカードに描画されてしまう。`:empty` 擬似クラスで「中身ゼロの
   ラッパーだけ」を潰す。中に `<a>` がある通常ケースは影響なし。 */
body.tsubame.single .wp-block-post-navigation-link:empty {
    display: none !important;
}

/* === 「前の記事」カード（左寄せ＋左 chevron） === */
body.tsubame.single .wp-block-post-navigation-link.post-navigation-link-previous {
    padding-left: 2.6em !important;
    text-align: left !important;
}
body.tsubame.single .wp-block-post-navigation-link.post-navigation-link-previous::before {
    content: "前の記事";
    display: block;
    font-size: 0.75em;
    font-weight: normal;
    color: rgba(0, 0, 0, 0.5);
    margin-bottom: 0.2em;
    line-height: 1.4;
}
body.tsubame.single .wp-block-post-navigation-link.post-navigation-link-previous::after {
    content: "‹";
    position: absolute;
    left: 0.7em;
    top: 50%;
    transform: translateY(-50%);
    font-size: 2em;
    font-weight: normal;
    color: rgba(0, 0, 0, 0.3);
    line-height: 1;
    pointer-events: none;
}

/* === 「次の記事」カード（右寄せ＋右 chevron） === */
body.tsubame.single .wp-block-post-navigation-link.post-navigation-link-next {
    padding-right: 2.6em !important;
    text-align: right !important;
}
body.tsubame.single .wp-block-post-navigation-link.post-navigation-link-next::before {
    content: "次の記事";
    display: block;
    font-size: 0.75em;
    font-weight: normal;
    color: rgba(0, 0, 0, 0.5);
    margin-bottom: 0.2em;
    line-height: 1.4;
}
body.tsubame.single .wp-block-post-navigation-link.post-navigation-link-next::after {
    content: "›";
    position: absolute;
    right: 0.7em;
    top: 50%;
    transform: translateY(-50%);
    font-size: 2em;
    font-weight: normal;
    color: rgba(0, 0, 0, 0.3);
    line-height: 1;
    pointer-events: none;
}

/* ============================================
   17. サイトコンテント上下余白ゼロ化（Lightning 設定の自動 ON 化）

   Lightning カスタマイザー「Lightningデザイン設定 → サイトコンテントの
   上下余白を無しにする」を ON にしないと、`.main-section` の上下に
   60px 程度のパディングが入り、`min-height: 100vh` のカバーブロックの
   上に空白が出てしまう。

   TSUBAME 適用ページではこの設定を ON にしている前提で組まれている
   ため、ON にしなくても同じ状態になるよう CSS 側で常に padding を
   ゼロ化する。Lightning 側の設定（同名チェックボックス）が ON でも
   OFF でも結果は同じになる。

   関連クラス候補:
     - `.main-section`         本文のメインカラム
     - `.site-body`             サイト本体のラッパー
     - `.site-body-container`   container（Bootstrap）
   ============================================ */
body.tsubame .main-section,
body.tsubame .site-body,
body.tsubame .site-body-container,
body.tsubame .site,
body.tsubame .site-content {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* ============================================
   18. Lightning 投稿後トレイリング — CSS フォールバック

   投稿テンプレート（block-based）でカスタム prev/next 同期パターンを
   持っている前提のため、Lightning が投稿本文の下に出してくる
   トレイリング要素は不要。

   優先順:
     1. サーバー側で `lightning_is_next_prev` フィルタを `false` にし、
        Lightning 純正 prev/next の template part 呼び出し自体を停止
        （class-tsubame-output.php disable_lightning_next_prev_render）。
        DB クエリも HTML 出力も発生しない。
     2. 上記が効かない環境（旧バージョン Lightning 等）や、Lightning Pro
        の「カテゴリー / 関連記事 / 新着記事」タブ UI（`lightning-related-articles`）
        など、サーバー側フィルタが特定できていない要素については
        ここで CSS hide にフォールバックする。

   いずれも `body.tsubame.single` でスコープを単一投稿ページに限定。
   ============================================ */
body.tsubame.single .entry-footer,
body.tsubame.single .vk_posts.next-prev,
body.tsubame.single .lightning-related-articles {
    display: none !important;
}

/* ============================================
   19. モバイルナビゲーション（ショートコード [tsubame_mobile_nav]）

   Lightning「Mobile Navigation」テーマメニュー位置に割り当てた
   メニューを、ハンバーガーボタン + スライドドロワーで出力する
   ショートコード機能のスタイル定義。

   出力構造（PHP 側 class-tsubame-mobile-nav.php 参照）:
       <button class="tsubame-mobile-nav-toggle">☰</button>
       <div id="tsubame-mobile-nav-drawer" class="tsubame-mobile-nav-drawer">
           <button class="tsubame-mobile-nav-close">×</button>
           <nav class="tsubame-mobile-nav-content">
               <ul class="tsubame-mobile-nav-list">...</ul>
           </nav>
       </div>

   ドロワー本体は position: fixed で右からスライドイン。
   スマホでは全幅、PC では最大 450px に収まるサイズ。
   admin bar 表示中は drawer の top をオフセット。
   ============================================ */

/* ハンバーガーボタン */
body.tsubame .tsubame-mobile-nav-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    color: inherit;
    line-height: 1;
}

body.tsubame .tsubame-mobile-nav-toggle:hover,
body.tsubame .tsubame-mobile-nav-toggle:focus-visible {
    background-color: rgba(0, 0, 0, 0.04);
}

body.tsubame .tsubame-mobile-nav-toggle-icon {
    width: 24px;
    height: 24px;
    display: block;
}

/* ドロワー本体 */
body.tsubame .tsubame-mobile-nav-drawer {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    max-width: 100%;
    background: #fff;
    z-index: 9999;
    transform: translateX(100%);
    transition: transform 0.3s ease;
    overflow-y: auto;
    box-shadow: -4px 0 16px -4px rgba(0, 0, 0, 0.15);
    /* 閉じている間は内部要素をフォーカス対象から外す */
    visibility: hidden;
}

body.tsubame .tsubame-mobile-nav-drawer.is-open {
    transform: translateX(0);
    visibility: visible;
}

@media (min-width: 782px) {
    body.tsubame .tsubame-mobile-nav-drawer {
        max-width: 450px;
    }
}

/* admin bar 表示時はドロワーを下にずらす */
body.tsubame.admin-bar .tsubame-mobile-nav-drawer {
    top: 32px;
}
@media screen and (max-width: 782px) {
    body.tsubame.admin-bar .tsubame-mobile-nav-drawer {
        top: 46px;
    }
}

/* 閉じるボタン (×) */
body.tsubame .tsubame-mobile-nav-close {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    width: 40px;
    height: 40px;
    background: transparent;
    border: none;
    cursor: pointer;
    color: inherit;
    z-index: 1;
    line-height: 1;
}

body.tsubame .tsubame-mobile-nav-close:hover,
body.tsubame .tsubame-mobile-nav-close:focus-visible {
    background-color: rgba(0, 0, 0, 0.04);
}

body.tsubame .tsubame-mobile-nav-close svg {
    width: 24px;
    height: 24px;
    display: block;
}

/* Mobile Nav Upper / Bottom ウィジェットエリア（Lightning が登録する
   `vk-mobile-nav-upper` / `vk-mobile-nav-bottom` を drawer 内に表示）。
   検索ボックス・SNSリンク・任意のバナー等が置ける。 */
body.tsubame .tsubame-mobile-nav-upper {
    padding: 3.5rem 1rem 0;
}

body.tsubame .tsubame-mobile-nav-bottom {
    padding: 1rem 1rem 2rem;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    margin-top: 1rem;
}

body.tsubame .tsubame-mobile-nav-upper .widget,
body.tsubame .tsubame-mobile-nav-bottom .widget {
    margin: 0 0 1rem;
}

body.tsubame .tsubame-mobile-nav-upper .widget:last-child,
body.tsubame .tsubame-mobile-nav-bottom .widget:last-child {
    margin-bottom: 0;
}

/* メニュー本体（wp_nav_menu の出力） */
body.tsubame .tsubame-mobile-nav-content {
    padding: 3.5rem 1rem 2rem;
}

/* Upper ウィジェットエリアがある場合はメニュー上部の余白を縮める
   （ダブった padding を避ける） */
body.tsubame .tsubame-mobile-nav-upper + .tsubame-mobile-nav-content {
    padding-top: 1rem;
}

body.tsubame .tsubame-mobile-nav-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

body.tsubame .tsubame-mobile-nav-list li {
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

body.tsubame .tsubame-mobile-nav-list li a {
    display: block;
    padding: 1em 0.75em;
    color: inherit;
    text-decoration: none;
}

body.tsubame .tsubame-mobile-nav-list li a:hover,
body.tsubame .tsubame-mobile-nav-list li a:focus-visible {
    background-color: rgba(0, 0, 0, 0.03);
}

body.tsubame .tsubame-mobile-nav-list .current-menu-item > a {
    color: var(--vk-color-primary, #03989e);
    font-weight: 600;
}

/* サブメニュー */
body.tsubame .tsubame-mobile-nav-list .sub-menu {
    list-style: none;
    margin: 0;
    padding: 0 0 0 1em;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
}

body.tsubame .tsubame-mobile-nav-list .sub-menu li:last-child {
    border-bottom: none;
}

body.tsubame .tsubame-mobile-nav-list .sub-menu li a {
    padding: 0.75em 0.75em;
    font-size: 0.95em;
}

/* オープン時の本体スクロール抑制＋背景オーバーレイ */
body.tsubame.tsubame-mobile-nav-open {
    overflow: hidden !important;
}

body.tsubame.tsubame-mobile-nav-open::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 9998;
    pointer-events: none;
}

/* ============================================
   20. ヘッダー右端のハンバーガーボタンの位置調整

   ヘッダー同期パターン（`.kotori-sticky-header`）内のハンバーガー
   ボタンを、中央カラムの右端に確実に配置する。

   背景:
   - `[tsubame_mobile_nav]` ショートコードを paragraph ブロックに書いた
     ケースでは出力が `<p>` でラップされ、HTML 仕様上 `<p>` 内に
     `<div>`（ドロワー）が入れないためブラウザ DOM が「`<p>` 終端 ＋
     drawer の `<div>`」に分割。flex 親 `is-content-justification-space-between`
     から見ると child が「ロゴ ＋ `<p>` ＋ drawer の `<div>`」の 3 つになり、
     space-between で `<p>`（=ボタン）が**中央寄せ**になってしまう問題があった。
   - shortcode を shortcode ブロックで囲めば回避できるが、ユーザが
     paragraph に書く運用を完全には排除できないため、CSS 側でも安全弁を
     張る。
   - `wp:navigation` ブロックを使うケースでも同様にハンバーガーボタンを
     右端に揃えたい。

   対策:
   - `.kotori-sticky-header` 内の `.kotori-fixed-center` を
     `position: relative` で絶対配置の起点に。
   - ハンバーガーボタン（shortcode の `.tsubame-mobile-nav-toggle` と
     wp:navigation の `.wp-block-navigation__responsive-container-open`
     両方）を `position: absolute` で右上 8px に直接配置。flex の混乱を
     完全に回避し、確実に同じ位置に置ける。
   - drawer 側は元から `position: fixed` なので影響なし。
   ============================================ */
body.tsubame .kotori-sticky-header .kotori-fixed-center {
    position: relative;
}

body.tsubame .kotori-sticky-header .tsubame-mobile-nav-toggle,
body.tsubame .kotori-sticky-header .wp-block-navigation__responsive-container-open {
    position: absolute;
    top: 50%;
    right: 0.5rem;
    transform: translateY(-50%);
    z-index: 5;
    margin: 0;
}

/* ============================================
   21. 404 ページ（プラグイン同梱の `templates/404.php` 用スタイル）

   通常パス（「投稿テンプレート」wp_template が存在する場合）:
   - ユーザの wp_template の構造（cover + 3カラム + 同期パターン）が
     そのまま使われ、中央カラム内に `.tsubame-404` ブロックが置かれる。
   - 中央カラムは Section 11 の白背景＋サイドシャドウ、Section 8 の
     左右パディング等の標準スタイルを既に持っているため、ここで
     カード装飾は出さない。`.tsubame-404` はテキストの整形だけ行う。

   フォールバックパス（wp_template が無い場合）:
   - `.tsubame-404--fallback` クラスが付与される。シンプルなカード
     装飾（白背景＋サイドシャドウ＋角丸）でセンタリング表示する。
   ============================================ */

/* 共通: 404 数字／タイトル／説明文の文字組み（パスを問わない） */
body.tsubame.error404 .tsubame-404-code {
    font-size: 4.5rem;
    line-height: 1;
    font-weight: 700;
    color: var(--vk-color-primary, #03989e);
    margin: 0 0 0.5em;
    text-align: center;
    letter-spacing: 0.05em;
}

body.tsubame.error404 .tsubame-404-title {
    font-size: 1.1rem;
    font-weight: 600;
    margin: 0 0 0.75em;
    color: rgba(0, 0, 0, 0.85);
    text-align: center;
}

body.tsubame.error404 .tsubame-404-description {
    margin: 0 0 1.5em;
    font-size: 0.9rem;
    color: rgba(0, 0, 0, 0.6);
    text-align: center;
}

body.tsubame.error404 .tsubame-404-actions {
    margin: 1.5em 0 0;
    text-align: center;
}

body.tsubame.error404 .tsubame-404-home-link {
    display: inline-block;
    padding: 0.75em 2em;
    background: var(--vk-color-primary, #03989e);
    color: #fff;
    text-decoration: none;
    border-radius: 4px;
    font-weight: 500;
    transition: opacity 0.2s ease;
}

body.tsubame.error404 .tsubame-404-home-link:hover,
body.tsubame.error404 .tsubame-404-home-link:focus-visible {
    opacity: 0.85;
    color: #fff;
    text-decoration: none;
}

/* 404 内のモバイルナビ中身（検索 + メニュー + 任意ウィジェット）。
   ドロワー用に設計された Section 19 の padding-top（閉じるボタン避け）を
   404 の文脈では相殺し、メッセージ直下にすっきり並ぶようにする。 */
body.tsubame.error404 .tsubame-404-nav {
    text-align: left;
    margin-top: 1.5em;
}

body.tsubame.error404 .tsubame-404-nav .tsubame-mobile-nav-upper {
    padding: 0 0 1em;
}

body.tsubame.error404 .tsubame-404-nav .tsubame-mobile-nav-content {
    padding: 0;
}

body.tsubame.error404 .tsubame-404-nav .tsubame-mobile-nav-bottom {
    padding: 1em 0 0;
    margin-top: 0;
}

/* 一番下の li の border-bottom を消す（カード端と二重線にならないように） */
body.tsubame.error404 .tsubame-404-nav .tsubame-mobile-nav-list > li:last-child {
    border-bottom: none;
}

/* === フォールバックパス（wp_template が見つからなかった時） === */

body.tsubame.error404 .tsubame-404--fallback {
    max-width: var(--tsubame-center-width);
    width: 100%;
    margin: 4rem auto;
    padding: 3rem var(--tsubame-center-padding-x);
    background: #fff;
    border-radius: 6px;
    box-shadow: var(--tsubame-side-shadow);
    box-sizing: border-box;
}

/* (Section 22 はフロントページでのページタイトル非表示用 CSS だったが、
    1.1.2 で PHP の `render_block_core/post-title` フィルタで HTML 出力
    ごと潰す方式に切り替えたため削除。) */

/* ============================================
   Section 23: テンプレート最外殻の wp:cover をフルブリードに強制する。

   経緯:
   - 投稿テンプレート / 固定ページテンプレート / フロントページテンプレート
     の最外殻は `wp:cover` (alignfull) で構成されている。元々は inline style
     で `padding: 0`, `margin: 0`, `min-height: 100vh` を保持していた。
   - ユーザがテンプレートを「シンプル化」する目的でこれらの spacing 設定を
     全部外すと、WP コアの `.wp-block-cover` デフォルト
     （`padding: 1em`, `min-height: 430px`）が露出して、ページ上下に
     余白＋浮いた寸法のカバーが出てしまう。
   - 設計上 TSUBAME テンプレートのトップレベル cover は必ずフルビューポート
     かつ余白ゼロでありたいため、CSS で強制する形にして、ユーザが
     テンプレート編集でうっかり外しても見た目が崩れないようにする。

   セレクタ: `wp-site-blocks > .wp-block-cover`
   wp-site-blocks は WP コアがブロックテンプレート出力時に巻く外殻 div。
   その直下に来るのがテンプレートの最外殻ブロック（=> 我々の cover）。
   ネストされた cover（カバー画像セクション等）には影響しない。

   `min-height: 100vh` は !important を付けない: ユーザが inline style 等で
   別の min-height を意図的に指定した場合はそちらを尊重する。
   `padding`/`margin` は !important で固定: TSUBAME レイアウトの前提であり、
   ここを外すと 3 カラムレイアウトとフッター位置が大幅に崩れるため。
   ============================================ */

body.tsubame .wp-site-blocks > .wp-block-cover {
    padding: 0 !important;
    margin: 0 !important;
    min-height: 100vh;
}

/* ============================================
   Section 24: post-content 内の段落の自然な間隔を保証する。

   経緯:
   - Lightning テーマの style-theme-json.css に `p { margin-block-start: 0 }`
     という universal な指定があり、`<p>` の上マージンがすべて潰される。
   - WordPress 標準の `:where(.is-layout-X) > *` レイアウトルール
     (margin-block-start: 24px) は `:where()` 由来で specificity 0 のため
     Lightning の `p` ルールに敗北し、結果として段落同士がぴったり
     くっついてしまう。
   - Lightning の本来の設計では、`figure+h3 { margin-top: 2em }` のような
     隣接セレクタを多数定義して間隔を作るが、段落同士 (p+p) は対象外。

   対応:
   - `body.tsubame .wp-block-post-content p` で post-content 内のすべての
     `<p>` 子孫を対象にし、margin-block-start を強制する。
   - 1.1.8 では `> *` (直接の子) だったが、投稿ページの構造（投稿内容を
     `wp-block-group` 等で包むケース）でカバーしきれなかったため、
     1.1.9 で全 `<p>` 子孫に拡張。
   - `:not(:first-child)` で各親内の最初の `<p>` を除外
     （その親の上端と段落の間に余分な余白を入れないため）。
   - `:not([class*="vk_block-margin-"])` で VK Blocks の margin クラス付き
     段落を除外（ユーザの意図的な margin 設定を尊重するため）。
   - 値は VK Blocks の md 変数（既定 1.5em）を使い、テーマと整合。
   ============================================ */

body.tsubame .wp-block-post-content p:not(:first-child):not([class*="vk_block-margin-"]) {
    margin-block-start: var(--vk_block-margin-md--margin-top, 1.5em);
}

/* ============================================
   Section 25: kotori-no-padding 中央カラム配下の wp-block-cover を
   完全フルブリード化する。

   経緯:
   - WordPress コアの `.wp-block-cover` には `padding: 1em` がデフォルトで
     入っており、PC・スマホとも左右に 1em の白帯が出る原因のひとつ。
   - さらに大きな原因として、Lightning の theme.json が
     `--wp--style--global--content-size: calc(100svw - 15px * 2)` を定義し、
     WP コアの constrained レイアウトルール
     `:where(.is-layout-constrained) > :where(...)` が、その content-size
     を `max-width` として子要素に強制する + `margin-left/right: auto` で
     センタリングするため、カバーがカラム幅より両側 15px ずつ狭く
     描画されていた（1.2.1 で padding 0 にしただけでは効かなかった）。
   - 一方、画像ブロック (`.wp-block-image`) は `:not(.alignleft):not(.alignright):not(.alignfull)`
     条件下でも figure 要素自体が中身の幅で収まるため、視覚的に目立たず
     エッジトゥエッジに見えていた。

   対応 (1.2.2 で padding に加え max-width / margin もリセット):
   - `kotori-no-padding` 中央カラムは「フルブリードしたい」が暗黙の前提
     なので、配下の `.wp-block-cover` に対して以下を強制:
       * 左右パディング 0
       * max-width: none （Lightning の content-size 制約を無効化）
       * margin-left/right: 0 （constrained 由来の auto センタリングを無効化）
   - 上下パディングは維持（カバー内テキスト等の縦方向余白は温存）。
   - これによりカバーブロック / 画像ブロックどちらを使っても同じく
     カラム端まで広がるエッジトゥエッジ表示になる。
   ============================================ */

body.tsubame .kotori-fixed-center.kotori-no-padding .wp-block-cover {
    padding-left: 0 !important;
    padding-right: 0 !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}


/* ============================================
   Section 26 (1.3.4 で再設計): アーカイブ系ページ専用の cover 調整。

   archive.php の出力構造は固定ページの `wp-site-blocks > wp-block-cover`
   ではなく `body > .main-section > .wp-block-cover` のため、Section 23
   のセレクタ (`wp-site-blocks > .wp-block-cover`) では届かない。

   さらに、アーカイブで投稿が少ないと cover の `min-height: 100vh` が
   コンテンツ高より大きくなり、フッターの下に余白ができてしまう。
   アーカイブ系ではコンテンツ高に合わせる必要がある。

   対応:
   - `.main-section > .wp-block-cover` でアーカイブの最外殻 cover にも
     `padding: 0` を強制（WP コアの `padding: 1em` を解除）。
   - `min-height: 0` でビューポート全高制約を解除。コンテンツの自然な
     高さに従ってフッターが詰まる。
   ============================================ */

body.tsubame.archive .main-section > .wp-block-cover,
body.tsubame.search .main-section > .wp-block-cover,
body.tsubame.blog .main-section > .wp-block-cover,
body.tsubame.error404 .main-section > .wp-block-cover {
    padding: 0 !important;
    margin: 0 !important;
    min-height: 0 !important;
}