@charset "utf-8";

/* ===============================================
   PART 1: グローバル設定 (フォント, 変数など)
================================================== */
/* --- フォント定義（Google Fonts経由で 400/500/600/700 を読み込み） --- */
/* BIZ UDGothic は header.php の管理者設定ブロックで読み込み */

/* --- グローバル変数定義 --- */
:root {

/*色設定*/
  --c-sign: #162447; /* 象徴の紺・場の印（ダーク243a6aで前へ出る）　ロゴ、上端ライン、強調アクセント、極限定的なポイント*/
  --c-blue:  #162447;   /* 構造・空間骨格の紺（ダーク1c2e57で空間に溶ける） 見出し、境界、ベース紺、hover基準、新色の元色*/

  --c-front: #1f2738;   /* 本文色 */
  --c-back:  #f4f2ec;   /* 背景色（暖色系オフホワイト） */


  --c-highlight: #b84000;  /* 検索ハイライト用（旧 --c-orange） */
  --c-red:    #a03000;    /* エラー・警告用 */
  --c-gray:   #6c717a;    /* 補助情報用（scroll-info・expand-toggle等） */
                          /* = --c-front(#1f2738) × opacity 0.62 on --c-back(#f4f2ec) の実効色 */
                          /* WCAG AAA達成：c-back 4.82:1 / c-bg-sft 4.95:1 / c-bg-str 5.12:1 */
  --c-gold:  #d4b24a;
  --c-lgold:  #e2c76a;
/*　記録として  --c-seablue: #1e6c94;*/


  --c-bg-sft: #e6e4dd; /* 暖色系薄グレー（c-backの一段深み） */
  --c-bg-str: #e4e1d9; /* 暖色系グレー（現在地・区切り用） */
  --c-link: #1f356d;
  --c-link-visited: #6a7aa5;
  --c-link-hov: #1f356d;   /* 色は変えない */


  /* --- フォント・レイアウト設定 --- */

  /* ━━ フォントウェイト設計（ここだけ変更すれば全体に反映） ━━
     Shippori Mincho 利用可能ウェイト: 400 / 500 / 600 / 700 / 800
     BIZ UDGothic    利用可能ウェイト: 400 / 700 のみ
  */
  --fw-body:    400;   /* 本文 */
  --fw-ui:      400;   /* ナビ・ボタン等UI */
  --fw-ui-menu: 600;   /* メインメニューフォント */
  --fw-h4:      400;   /* h4 */
  --fw-h3:      500;   /* h3 */
  --fw-h2:      500;   /* h2 */
  --fw-h1:      600;   /* h1 */
  --fw-strong:  700;   /* strong・太字 */
  --fw-midashi: 600;   /* .midashi-box等の装飾見出し */

  /* ━━ 字間・行間設計（Shippori Mincho基準） ━━ */
  --ls-body:    0.03em;   /* 本文字間 */
  --ls-heading: 0.05em;   /* 見出し字間 */
  --lh-body:    1.88;     /* 本文行間（既存 --base-ln-height と同値）1.95 */
  --lh-heading: 1.6;      /* 見出し行間 */

  /* ━━ 1カラム時の本文幅制限 ━━ */
  --w-text-1col-em: 46em;
  --w-text-1col-px: 830px;

/*行間設定*/
  --base-ln-height: 1.95;
  --base-space: 1.2em;

  /* --- 本文ベースサイズ（環境×スイッチャー）9変数 --- */
  --fs-mobile-std:   16px;
  --fs-mobile-lg:    19px;
  --fs-mobile-xl:    22px;
  --fs-tablet-std:   17px;
  --fs-tablet-lg:    20px;
  --fs-tablet-xl:    23px;
  --fs-pc-std:       18px;
  --fs-pc-lg:        21px;
  --fs-pc-xl:        24px;
  /* --- 見出し比率（全環境・全スイッチャー共通）--- */
  --h-ratio-1: 1.25;
  --h-ratio-2: 1.2;
  --h-ratio-3: 1.15;
  --h-ratio-4: 1.1;
  --h-ratio-5: 1.05;
  --h-ratio-6: 1.0;

  /* --- その他 --- */
  --font-stack: "Shippori Mincho", "Noto Serif JP", "YuMincho", "Hiragino Mincho ProN", serif;

  /* --- モバイルメニュー専用配色（ライト・ダーク問わず常時ダーク配色）---
     将来ライト・ダークで分けたいときは body:not(.dark-mode) ブロックで上書きする */
  --mm-bg:        #162447;              /* メニュー全体背景（c-signと同値） */
  --mm-bg-header: #1a2a54;              /* ヘッダー行（少し明るい紺） */
  --mm-text:      var(--c-gold);        /* メニュー文字色 */
  --mm-bg-sft:    rgba(255,255,255,0.07);  /* hover・parent-active背景 */
  --mm-bg-str:    rgba(255,255,255,0.14);  /* current背景 */
  --mm-border:    rgba(255,255,255,0.12);  /* 区切り線 */
  --mm-bar:       var(--c-gold);        /* 現在地縦棒 */
  --mm-close:     var(--c-gold);        /* ×ボタン色 */
  --mm-text-hov:  var(--c-lgold);       /* hover・current テキスト（少し明るい金） */

  /* ─── 透明度付き色（rgba）変数 ─────────────────────────── */
  --c-overlay:       rgba(0, 0, 0, 0.46);   /* hero ヒーロー画像オーバーレイ */
  --c-text-shadow:   rgba(0, 0, 0, 0.9);    /* hero ヒーロー文字テキストシャドウ */
  --c-scrollbar:     rgba(0, 0, 0, 0.35);   /* スクロールバーつまみ */
  --c-shadow-soft:   rgba(0, 0, 0, 0.1);    /* ドロップシャドウ（検索ボックス等） */
}

/* --- ダークモード時の変数上書き --- */
body.dark-mode {

  --c-sign: #243a6a;
  --c-blue: #1c2e57;

  --c-front: #d8dcea;
  --c-back: #0e1424;

  --c-bg-sft: #1E2433; 
  --c-bg-str: #283047; 
  --c-gray:   #a8afbd;  /* dark mode: AAA 7.03:1 */

--c-link: #f0f3ff;        /* やや明るい白 */
--c-link-visited: #b8c0d8; /* 少し沈める */
--c-link-hov: #f0f3ff;     /* 色は変えない */

  /* モバイルメニュー配色（ダークモードでも同値。将来分離するならここで上書き） */
  --mm-bg:        #162447;
  --mm-bg-header: #1a2a54;
  --mm-text:      var(--c-gold);
  --mm-bg-sft:    rgba(255,255,255,0.07);
  --mm-bg-str:    rgba(255,255,255,0.14);
  --mm-border:    rgba(255,255,255,0.12);
  --mm-bar:       var(--c-gold);
  --mm-close:     var(--c-gold);
  --mm-text-hov:  var(--c-lgold);

  /* ─── 透明度付き色（ダークモードで上書き） ──────────────── */
  --c-overlay:       rgba(0, 0, 0, 0.60);
  --c-scrollbar:     rgba(255, 255, 255, 0.25);
  --c-shadow-soft:   rgba(0, 0, 0, 0.3);
}

/* ===============================================
   PART 2: ベーススタイル (Mobile First: 0pxから適用)
================================================== */

/* --- 基本要素リセット & ページ設定 --- */
h1, h2, h3, h4, h5, h6,
p, ul, ol, dl, li, dt, dd,
form, figure {
    margin: 0;
    padding: 0;
}

strong {
    font-weight: var(--fw-strong);
}
h1, h2, h3, h4, h5, h6 {
    font-weight: normal;
}

/* ruby 表示位置（漢字の上に表示） */
ruby {
    ruby-position: over;
}
ruby rt {
    ruby-position: over;
}

a {
    color: var(--c-link);
}
a:visited { color: var(--c-link-visited); }
a:hover, a:active, a:focus {
    color: var(--c-link-hov);
}

body {
    margin: 0;
    padding: 0;
    color: var(--c-front);
    font-family: var(--font-stack);
    font-weight: var(--fw-body);
    font-size: var(--fs-mobile-std);
    background: var(--c-back) ;
    -webkit-text-size-adjust: none;
    line-height: var(--lh-body);
    letter-spacing: var(--ls-body);
}

body.font-size-large       { font-size: var(--fs-mobile-lg); }
body.font-size-extra-large { font-size: var(--fs-mobile-xl); }

/* --- 見出しサイズ（全環境・全スイッチャー共通の比率） --- */
main h1, .list-box h1 { font-size: calc(var(--h-ratio-1) * 1em); }
main h2, .list-box h2 { font-size: calc(var(--h-ratio-2) * 1em); }
main h3, .list-box h3 { font-size: calc(var(--h-ratio-3) * 1em); }
main h4, .list-box h4 { font-size: calc(var(--h-ratio-4) * 1em); }
main h5               { font-size: calc(var(--h-ratio-5) * 1em); }
main h6               { font-size: calc(var(--h-ratio-6) * 1em); }

/* ===== 全体縦リズム設計 ===== */

p,
ul,
ol,
dl,
blockquote {
    margin: 0 0 var(--base-space);
}

/* ── ダッシュ（―）前後の約物詰め ───────────────────────────────────────
   palt（proportional alternate widths）でフォント側の字幅情報を使い
   ―前後の余白を自動調整する。Shippori Minchoがpaltデータを持つ場合に有効。
   main内の本文に限定し、UI要素（ナビ・ボタン等）には影響させない。
   効果が出ない場合はこのブロックを削除してよい。
──────────────────────────────────────────────────────── */
main p,
main li,
main blockquote,
main figcaption,
main cite {
    font-feature-settings: "palt" 1;
}

/* main見出しベース（構造＋余白） */

/* --- 元の見出し設定箇所をこのように書き換え --- */

main h1, main h2, main h3, main h4 {
    clear: both;
    line-height: var(--lh-heading);
    font-weight: var(--fw-h2);   /* デフォルト500、h1のみ下で上書き */
    letter-spacing: var(--ls-heading);
    color: var(--c-front);
    /* 最初はマージンを0にしておく */
    margin-top: 0; 
    margin-bottom: var(--base-space);
}

main h1 { font-weight: var(--fw-h1); }
main h3 { font-weight: var(--fw-h3); }
main h4 { font-weight: var(--fw-h4); }

/* 2番目以降の要素（最初ではないもの）だけに 2.4倍の余白をつける */
main * + h1,
main * + h2,
main * + h3,
main * + h4,
main * + .midashi-box {
    margin-top: calc(var(--base-space) * 2.4);
}

/* h*タグにmidashiクラスが付く場合は隣接セレクタより自身のmarginを優先 */
main * + h1.midashi-box,
main * + h2.midashi-left,
main * + h3.midashi-btm,
main * + h4.midashi-left2 {
    margin-top: revert; /* 各クラスのmargin-topをそのまま使う */
}

/* サイズ階層 */

main h1 { font-size: 1.8rem; }
main h2 { font-size: 1.45rem; }
main h3 { font-size: 1.2rem; }
main h4 { font-size: 1.05rem; }


body:has(#m-menu.is-open) {
    overflow: hidden !important;
    height: 100vh;           /* iOS Safari のアドレスバー対策も兼ねる */
}

/* 通常テキストの選択：網掛けのみ */
::selection {
    background: var(--c-bg-str);
}

/* 網掛け背景がある要素：破線下線＋網掛け */
figcaption::selection,
figcaption *::selection,
.inyou::selection,
.inyou *::selection,
.comment::selection,        /* ← 今回追加 */
.comment *::selection,      /* ← 今回追加 */
.table th::selection,
.table th *::selection,
.table .bg::selection,      /* ← .bg セルも対象に */
.table .bg *::selection,    /* ← 同上 */
#date dd.ddinfo::selection,
#date dd.ddinfo *::selection {
    background: transparent;
    text-decoration: underline dotted var(--c-front);
    text-decoration-thickness: 0.08em;
    text-underline-offset: 0.15em;
}

/* リンクの選択：薄い網掛けのみ（下線との重複を避ける） */
a::selection,
a *::selection {
    background: transparent;
    text-decoration: none;
}

/* ダークモード */
.dark-mode ::selection { 
    background: var(--c-gray); 
    color: var(--c-back); 
}
.dark-mode a::selection,
.dark-mode a *::selection {
    background: var(--c-gray);
    opacity: 0.7;
    color: var(--c-back);
}
.dark-mode figcaption::selection,
.dark-mode figcaption *::selection,
.dark-mode .inyou::selection,
.dark-mode .inyou *::selection,
.dark-mode .comment::selection,        /* ← 今回追加 */
.dark-mode .comment *::selection,      /* ← 今回追加 */
.dark-mode .table th::selection,
.dark-mode .table th *::selection,
.dark-mode .table .bg::selection,      /* ← .bg セルも対象に */
.dark-mode .table .bg *::selection,    /* ← 同上 */
.dark-mode #date dd.ddinfo::selection,
.dark-mode #date dd.ddinfo *::selection { 
    background: var(--c-gray); 
    color: var(--c-back); 
}

a, button, input, select, textarea {
    -webkit-tap-highlight-color: transparent;
}

button {
    border-radius: 0;
}

ul {
    list-style-type: none;
    margin: var(--base-space) 0;
}
/*ulはliとともにsubのメニューに必要なため消さないこと。*/
img {
    border: none;
    max-width: 100%;
    height: auto;
    vertical-align: bottom;
}
table {
    border-collapse: collapse;
    font-size: 100%;
    border-spacing: 0;
    color: var(--c-front);
}
iframe {
    width: 100%;
}


/* ========================================
   汎用テキストクラス
   ======================================== */

/* ── .text-sm ──────────────────────────────
   補助情報（スワイプヒント・続きを読む・検索時間等）の
   共通スタイル。color: --c-gray で本文より控えめに。

   【使い方】
     <p class="text-sm">補足テキスト</p>
     <span class="text-sm c-red">エラー文</span>
     <span class="text-sm c-front">やや目立つ補足</span>

   【設計メモ】
   figcaption / cite / blockquote footer / .scroll-info /
   .expand-toggle は要素・機能セレクタ側で同値を設定し、
   HTML側のclass付与を省略している（後述の各セクション参照）。
   ─────────────────────────────────────── */
.text-sm {
    font-size: 0.85em;
    color: var(--c-gray);
    line-height: 1.6;
}
.text-sm.c-front { color: var(--c-front); }  /* 本文色（やや目立つ補足） */
.text-sm.c-red   { color: var(--c-red); }    /* エラー・警告 */

/* --- ヘッダー & ロゴ (モバイル固定) --- */
#header-top-border {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background-color: var(--c-sign);
    z-index: 70;
}

@media screen and (min-width: 768px) {
    #header-top-border {
        height: 3.5px;
    }
}

.site-logo-svg {
    display: block;
    color: var(--c-sign);
    transition: color 0.3s ease;
}

/* 初期状態：ダーク用ロゴを隠す */
.site-logo-dark {
    display: none;
}

/* ライトモード（通常時）：ライト用ロゴを表示 */
.site-logo-light {
    display: block;
}

/* ダークモード時（bodyに.dark-modeがある場合） */
body.dark-mode .site-logo-light {
    display: none;    /* ライト用を隠す */
}

body.dark-mode .site-logo-dark {
    display: block;   /* ダーク用を表示 */
}

/* ===============================
   QR
================================= */

.site-qr {
    color: var(--c-front);
    width: 33.3%;
    height: auto;
    max-width: 150px; /* 1カラム時に巨大になるのを防ぐ */
}


/* ===============================
   モバイル
================================= */


.site-settings {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    max-width: 70%;
    box-sizing: border-box;
    z-index: 10;
    font-size: 16px; /* bodyのfont-size変化（文字サイズ切替）の影響を完全に遮断 */
}

/* 下線リセットをよりシンプルに */
.site-settings a {
    border-bottom: none !important;
    text-decoration: none !important;
}

/* 画面調節のテキストラベル（<span>画面の調節：</span>） */
.size-btns span {
    font-size: 14px;
    color: var(--c-front);
    margin-right: 4px;
    white-space: nowrap;
    display: inline-block;
    vertical-align: middle;
}

.size-btns {
    display: flex;
    align-items: center;
    gap: 4px;
    flex: 0 0 auto;
    line-height: 1;
}

/* モバイル（画面が狭い時）は自動で隠したい場合はこちらを追記 */
@media (max-width: 600px) {
  .size-btns span {
    display: none;
  }
}

/* 【画面コントロールスイッチ】*/

/*  ① ボタン共通構造 */

.btn {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    padding: 0;

    font-family: var(--font-stack);
    font-weight: var(--fw-ui);

    cursor: pointer;
    -webkit-appearance: none;  /* iOS Safari のデフォルト角丸を排除 */
    appearance: none;
    border-radius: 0;
    transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
    box-sizing: border-box;
}

/* SVG共通 */
.btn svg {
    display: block;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.8;
    stroke-linecap: square;
    stroke-linejoin: miter;
}

/* ==============================
   ② サイズ分類
============================== */

/* 小ボタン */
.btn-s {
    width: 36px;
    height: 36px;
}

.btn-s svg {
    width: 100%;
    height: 100%;
}

.btn-s span {
    font-size: 70%;
}

/* 大ボタン（検索・メニュー） */
.btn-l {
    width: 42px;
    height: 42px;
}

.btn-l svg {
    width: 42px;
    height: 42px;
}

/* ==============================
   ③ 色グループ
============================== */

.btn-outline {
    background: var(--c-back);
    color: var(--c-front);
    border: 0.5px solid var(--c-front);
    border-radius: 0;
    outline: none;
}

.btn-outline:hover {
    background: var(--c-front);
    color: var(--c-back);
}

.btn-outline:focus {
    outline: none;
}

.btn-solid {
    background: var(--c-front);
    color: var(--c-back);
    border: none;
}

.btn-solid:hover {
    filter: brightness(1.15);
}

/* ==============================
   ④ 状態
============================== */

.btn-outline.active {
    background: var(--c-front);
    color: var(--c-back);
    border-color: var(--c-front);
    outline: none;
}

/* ==============================
   ⑤ 文字サイズ専用
   クラスに依存せずdata-font-size属性で固定
============================== */

[data-font-size="small"]  { font-size: 14px; }
[data-font-size="medium"] { font-size: 18px; }
[data-font-size="large"]  { font-size: 22px; }

/* ==============================
   ⑥ レスポンシブ
============================== */

#layout-sw { display: none; }

@media screen and (min-width: 744px) {
    #layout-sw { display: flex; }

    /* --- レイアウト --- */
    #contents { padding: 15px 3%; }
    /* ★変更：2カラム適用条件を :not(.has-hero) から :not(.onecol-fixed):not(.hero-layout-enabled) に変更。
       has-hero の有無は2カラム制御と無関係。除外対象は1カラム固定ページ（onecol-fixed）と
       index.phpメンテ用2カラム（hero-layout-enabled）のみ。 */
    body.side-toc-layout:not(.onecol-fixed):not(.hero-layout-enabled) #contents {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        /* height は header.js の updateLayout() が JS で動的に上書きする。
           ここは JS 初期化前のフォールバック値。 */
        height: calc(100vh - var(--header-total-h));
        overflow: hidden;
        padding: 0;
    }
    body.side-toc-layout:not(.onecol-fixed):not(.hero-layout-enabled) #contents-inner {
        display: flex;
        flex-direction: row;
        align-items: stretch;
        flex: 1 1 0;
        min-height: 0;
        overflow: hidden;
    }
    body.side-toc-layout:not(.onecol-fixed):not(.hero-layout-enabled) main {
        width: 70%;
        padding: 15px 3% 120px 4.5%; /* padding-bottom を大きめに */
        overflow-y: auto;
        height: 100%;
        box-sizing: border-box;
        scrollbar-width: none;
        flex-shrink: 0;
    }
    body.side-toc-layout:not(.onecol-fixed):not(.hero-layout-enabled) main::-webkit-scrollbar { display: none; }
    body.side-toc-layout:not(.onecol-fixed):not(.hero-layout-enabled) #sub {
        width: 28%;
        padding: 15px 1.5% 120px 1%;
        margin-top: 0;
        overflow-y: auto;
        height: 100%;
        box-sizing: border-box;
        scrollbar-width: none;
        flex-shrink: 0;
    }
    body.side-toc-layout:not(.onecol-fixed):not(.hero-layout-enabled) #sub::-webkit-scrollbar { display: none; }
    /*
     * ──────────────────────────────────────────────────────────────
     * has-hero かつ 2カラム有効ページ（404・410）の2カラム設定
     * ──────────────────────────────────────────────────────────────
     * 404・410 は $_1COL_SLUGS に入っておらず has-hero を持つページ。
     * 通常の2カラムルール（:not(.has-hero)）では除外されるため専用に定義する。
     * onecol-fixed（1カラム固定：503・403）は除外し、
     * hero-layout-enabled（index.phpメンテ用）も別セレクタで管理するため除外する。
     * ────────────────────────────────────────────────────────────── */
    body.side-toc-layout.has-hero:not(.hero-layout-enabled):not(.onecol-fixed) #contents {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        height: calc(100vh - var(--header-total-h));
        overflow: hidden;
        padding: 0;
    }
    body.side-toc-layout.has-hero:not(.hero-layout-enabled):not(.onecol-fixed) #contents-inner {
        display: flex;
        flex-direction: row;
        align-items: stretch;
        flex: 1 1 0;
        min-height: 0;
        overflow: hidden;
    }
    body.side-toc-layout.has-hero:not(.hero-layout-enabled):not(.onecol-fixed) main {
        width: 70%;
        padding: 15px 3% 120px 4.5%;
        overflow-y: auto;
        height: 100%;
        box-sizing: border-box;
        scrollbar-width: none;
        flex-shrink: 0;
    }
    body.side-toc-layout.has-hero:not(.hero-layout-enabled):not(.onecol-fixed) main::-webkit-scrollbar { display: none; }
    body.side-toc-layout.has-hero:not(.hero-layout-enabled):not(.onecol-fixed) #sub {
        width: 28%;
        padding: 15px 1.5% 120px 1%;
        margin-top: 0;
        overflow-y: auto;
        height: 100%;
        box-sizing: border-box;
        scrollbar-width: none;
        flex-shrink: 0;
    }
    body.side-toc-layout.has-hero:not(.hero-layout-enabled):not(.onecol-fixed) #sub::-webkit-scrollbar { display: none; }
    /*
     * ──────────────────────────────────────────────────────────────
     * has-hero（index.php）の2カラム設定【無効化】
     * ──────────────────────────────────────────────────────────────
     * もともとヒーロー画像をwindowスクロールで流しながら
     * コンテンツが #contents { position: sticky; bottom: 0 } で
     * 下から貼り付いて出てくる演出を意図した設計でした。
     *
     * しかし実際には「コンテンツがヒーロー画像の下に潜り込む」
     * 問題が解消できなかったため、has-hero ページ（index.php）では
     * 通常は2カラムレイアウトを適用しません。
     *
     * ただし hero-config.php の layout_switch_enabled: true のとき
     * body に hero-layout-enabled クラスが付与され、
     * メンテ用に2カラムを確認できます。
     *
     * 将来この演出を完全復活させたい場合は、このブロックの
     * セレクタから body.hero-layout-enabled を外してください。
     * ────────────────────────────────────────────────────────────── */
    body.hero-layout-enabled.side-toc-layout.has-hero #contents {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        position: sticky;
        bottom: 0;
        overflow: hidden;
        padding: 0;
    }
    body.hero-layout-enabled.side-toc-layout.has-hero #contents-inner {
        display: flex;
        flex-direction: row;
        align-items: stretch;
        flex: 1 1 0;
        min-height: 0;
        overflow: hidden;
    }
    body.hero-layout-enabled.side-toc-layout.has-hero main {
        width: 70%; padding: 15px 3% 120px 4.5%;
        overflow-y: auto; height: 100%;
        box-sizing: border-box; scrollbar-width: none;
    }
    body.hero-layout-enabled.side-toc-layout.has-hero main::-webkit-scrollbar { display: none; }
    body.hero-layout-enabled.side-toc-layout.has-hero #sub {
        width: 28%; margin-top: 0;
        padding: 15px 1.5% 120px 1%;
        overflow-y: auto; height: 100%;
        box-sizing: border-box; scrollbar-width: none;
    }
    body.hero-layout-enabled.side-toc-layout.has-hero #sub::-webkit-scrollbar { display: none; }
    body.hero-layout-enabled.side-toc-layout.has-hero 
/* ================================================================
   子ページ内目次統合：has-pageindex / toc-parent-link / ul#pageindex
================================================================ */

/* toc-parent-link：現在いる子ページのリンク。▼は表示しない（展開機能がないため）。
   li.has-pageindex 自体を position:relative の基準にする（ビューポート基準化を防ぐ） */
#sub .submenu-items li.has-pageindex {
    position: relative;
}
#sub .submenu-items li.has-pageindex > a.toc-parent-link:focus,
#sub .submenu-items li.has-pageindex > a.toc-parent-link:focus-visible {
    outline: none;
    box-shadow: none;
}
/* ▼ アイコン不使用（content:none で確実に抑制） */
#sub .submenu-items li.has-pageindex > a.toc-parent-link::after {
    content: none;
}

/* has-submenu の ::after（▶/▼トグル）は ul.submenu の直下 li のみに適用し
   submenu-items 内の li.has-pageindex には影響させない */
#sub nav.box ul.submenu > li.has-submenu > a.site-title {
    position: relative;
    padding-right: 25px;
}
#sub nav.box ul.submenu > li.has-submenu > a.site-title::after {
    content: '▶';
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.8em;
    color: var(--c-gray);
    transition: transform 0.2s ease-in-out;
}
#sub nav.box ul.submenu > li.has-submenu.submenu-open > a.site-title::after {
    transform: translateY(-50%) rotate(90deg);
}

/* ul#pageindex（submenu-items 内に統合されたページ内目次） */
#sub .submenu-items li.has-pageindex > ul#pageindex {
    list-style: none;
    margin: 0;
    padding: 0;
    background: transparent;
}

/* ul#pageindex 内の li は #sub #pageindex li と同じスタイルを継承 */
#sub .submenu-items li.has-pageindex > ul#pageindex li a {
    display: block;
    padding: 0.6em 0.5em;
    border-left: 2px solid transparent;
    transition: border-left 0.2s, color 0.2s, background 0.2s;
    text-decoration: none;
    color: var(--c-sub);
    font-size: 0.9em;
    line-height: 1.5;
}
#sub .submenu-items li.has-pageindex > ul#pageindex li a:hover {
    color: var(--c-front);
    background: transparent;
}

/* toc-active（現在地）ハイライト：網掛け＋文字色変更 */
#sub .submenu-items li.has-pageindex > ul#pageindex li a.toc-active {
    background: var(--c-bg-str) !important;
    border-left: 2px solid transparent;
    color: var(--c-front);
    outline: none;
    box-shadow: none;
    border-radius: 0;
}

/* toc-group-has-active：h3/h4 がアクティブ中は親h2のハイライトを出さない。
   h3/h4を抜けてh2がアクティブになったときは toc-active で弱い網掛けがつく。
   ⇒ toc-group-has-active はスタイルを付与しない（display系のみCSSで関与しない） */
#sub .submenu-items li.has-pageindex > ul#pageindex li.toc-group-item.toc-group-has-active > a {
    background: transparent !important;
    border-left: 2px solid transparent;
    color: inherit;
}
#sub .submenu-items li.has-pageindex > ul#pageindex li.toc-group-item.toc-group-has-active:not(.toc-group-open) > a {
    border-left: 2px solid transparent;
}
#sub .submenu-items li.has-pageindex > ul#pageindex li.toc-group-item.toc-group-has-active.toc-group-open > a {
    border-left: 2px solid transparent;
}

/* toc-level インデント（ul#pageindex 内） */
#sub .submenu-items li.has-pageindex > ul#pageindex li.toc-level-1 a { padding-left: 0.5em; }
#sub .submenu-items li.has-pageindex > ul#pageindex li.toc-level-2 a { padding-left: 0.5em; }
#sub .submenu-items li.has-pageindex > ul#pageindex li.toc-level-3 a { padding-left: 1.5em; font-size: 0.85em; }
#sub .submenu-items li.has-pageindex > ul#pageindex li.toc-level-4 a { padding-left: 2.2em; font-size: 0.82em; }
#sub .submenu-items li.has-pageindex > ul#pageindex li.toc-level-5 a { padding-left: 2.8em; font-size: 0.80em; }
#sub .submenu-items li.has-pageindex > ul#pageindex li.toc-level-6 a { padding-left: 3.2em; font-size: 0.78em; }

/* toc-group-item（h3/h4 折りたたみ親）の ▶▼ アイコン */
#sub .submenu-items li.has-pageindex > ul#pageindex li.toc-group-item > a {
    position: relative;
    padding-right: 22px;
    cursor: pointer;
}
#sub .submenu-items li.has-pageindex > ul#pageindex li.toc-group-item > a::after {
    content: '▶';
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.7em;
    color: var(--c-gray);
    transition: transform 0.2s ease-in-out;
    line-height: 1;
}
#sub .submenu-items li.has-pageindex > ul#pageindex li.toc-group-item.toc-group-open > a::after {
    transform: translateY(-50%) rotate(90deg);
}

/* toc-group-children（h3/h4 グループ子 ul） */
#sub .submenu-items li.has-pageindex > ul#pageindex ul.toc-group-children {
    display: none;
    margin: 0;
    padding: 0;
    list-style: none;
}
#sub .submenu-items li.has-pageindex > ul#pageindex li.toc-group-item.toc-group-open > ul.toc-group-children {
    display: block;
}
#sub .submenu-items li.has-pageindex > ul#pageindex ul.toc-group-children li {
    border: none;
}

/* toc-chapter（章立て）スタイル */
#sub .submenu-items li.has-pageindex > ul#pageindex li a.toc-chapter {
    font-size: 0.82em;
    color: var(--c-gray);
    border-left: none;
}

.page-footer { flex-shrink: 0; width: 100%; }
}

/* main内のSVGアイコン（説明用）は常に表示 */
main svg.icon-moon,
main svg.icon-sun {
    display: inline-block !important;
}

/* ==============================
   ⑦ ２面型アイコンの表示切替
============================== */

/* 背景色切り替え */
body:not(.dark-mode) #light-dark-sw .icon-sun { display: none !important; }
body:not(.dark-mode) #light-dark-sw .icon-moon { display: block !important; }
body.dark-mode #light-dark-sw .icon-sun { display: block !important; }
body.dark-mode #light-dark-sw .icon-moon { display: none !important; }

/* レイアウト切り替え */
body:not(.side-toc-layout) #layout-sw .icon-layout-2col { display: block !important; }
body:not(.side-toc-layout) #layout-sw .icon-layout-1col { display: none !important; }
body.side-toc-layout #layout-sw .icon-layout-2col { display: none !important; }
body.side-toc-layout #layout-sw .icon-layout-1col { display: block !important; }


/* --- モバイルメニュー (#m-menu) --- */
/* モバイルメニュー全体 */
#m-menu {
    position: fixed;
    top: 0;                /* 完全全画面化 */
    left: 0;
    width: 100%;
    bottom: 0;
    background: var(--mm-bg);
    padding-top: 50px;
    box-sizing: border-box;
    box-shadow: 2px 0 5px var(--mm-bg-sft);
    z-index: 140;           /* layer-header(130)より上 */
    transform: translateX(-100%);
    transition: transform 0.3s ease-out;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    display: block !important;
}

#m-menu.is-open {
    transform: translateX(0);
}

/* ヘッダー部分 */
#m-menu .m-menu-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 50px;
    padding: 0 15px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    background: var(--mm-bg-header);
    border-bottom: 1px solid var(--mm-border);
    z-index: 70;            /* m-menu内最上位 */
    box-sizing: border-box;
}

/* リスト共通 */
#m-menu ul {
    width: 100%;
    margin-top: 0;
}

#m-menu li {
    width: 100%;
    min-height: auto;
    line-height: 1.4;
    box-sizing: border-box;
    text-align: center;
    background: transparent; /* デフォルトリセット */
}

#m-menu li a:hover,
#m-menu li.current > a,
#m-menu li a:hover span,
#m-menu li.current > a span {
    color: var(--mm-text-hov);
}

/* リンク基本スタイル */
#m-menu li a {
    font-family: var(--font-stack);
    font-weight: var(--fw-ui-menu);
    color: var(--mm-text);
    text-decoration: none;
    transition: color 0.3s ease;
    font-size: 14px;
    display: block;
    padding: 20px 10px;
    background-color: transparent;
    word-break: break-all;
}

#m-menu li a span.site-title {
    font-size: 18px;
    font-weight: var(--fw-ui);
    color: inherit;
    display: block;
}

#m-menu li a span.menu-subtitle {
    font-size: 11px;
    font-weight: var(--fw-ui);
    color: inherit;
    display: block;
}
/* ==================================================
   MENU STATE SYSTEM – PC / Mobile 完全統一版
   （PCデザインを基準に再設計）
================================================== */

/* ─────────────────────────────
   1. ベース（通常状態）
───────────────────────────── */

/* ─────────────────────────────
   1. ベース（通常状態）
───────────────────────────── */
#sub nav.box ul.submenu li,
#m-menu li {
    /* 線の太さを 1px に統一。!important で優先順位を確実にします */
    border-bottom: 1px solid var(--mm-border) !important;
}

/* nav.php で a タグに直接指定されている線を消して重複を防止 */
#sub nav.box ul.submenu li > a,
#m-menu li > a {
    background: transparent;
    border-bottom: none !important; /* li との二重線を防止 */
    transition: background 0.2s ease, border 0.2s ease;
}


/* ─────────────────────────────
   2. Hover（最弱）ナビのため消さないこと
───────────────────────────── */

/* #sub：hover は本文系変数 */
#sub nav.box ul.submenu li > a:hover {
    background: transparent;
}
/* submenu-items 内のリンク（他ページ）にも同じホバー効果 */
#sub .submenu-items li > a:hover {
    background: transparent;
}
/* #m-menu：hover は .menu-parent 全体に統合 */
#m-menu li > a:hover,
#m-menu .menu-parent:hover {
    background: var(--mm-bg-sft);
}


/* ─────────────────────────────
   3. Current（最強）
───────────────────────────── */

/* 単独ページの現在地、および子ページが現在地のとき「子」 → 面＋線 */
/* #sub：本文系変数を使用（ライトモードで視認できる色） */
#sub nav.box ul.submenu li.current > a,
#sub nav.box .submenu-items li.current-submenu-item > a {
    background: var(--c-bg-str) !important;
    border-left: 3px solid var(--c-gold);
    font-weight: 500;
}
/* #m-menu：モバイルメニュー専用変数を使用（紺地に白半透明） */
/* ★ border-left を PCと同じ 2px に変更（旧3px → 2px に細く統一） */
#m-menu li.current > a,
#m-menu .submenu-items li.current-submenu-item > a {
    background: var(--mm-bg-str) !important;
    border-left: 2px solid var(--mm-bar);
}


/* ─────────────────────────────
   4. Parent Active（中間）
───────────────────────────── */

/* 子が現在地のとき「親トグル」：
   閉じているとき → 面＋線（グループの現在地を示す）
   開いているとき → 面のみ（線は子に移譲、競合を避ける）
   ※ m-menu は .menu-parent 全体を着色（menu-parent-link と submenu-toggle を統一） */

/* #sub：共通面・閉じ線・開き消し（本文系変数） */
#sub nav.box ul.submenu li.has-submenu:has(.current-submenu-item) > a.site-title {
    background: var(--c-bg-sft) !important;
}
#sub nav.box ul.submenu li.has-submenu:not(.submenu-open):has(.current-submenu-item) > a.site-title {
    border-left: 3px solid var(--c-gold);
}
#sub nav.box ul.submenu li.has-submenu.submenu-open:has(.current-submenu-item) > a.site-title {
    border-left: none;
}

/* #m-menu：共通面・閉じ線・開き消し（モバイルメニュー専用変数） */
#m-menu li.has-submenu:has(.current-submenu-item) > .menu-parent,
#m-menu li.has-submenu.is-parent-active > .menu-parent {
    background: var(--mm-bg-sft) !important;
}
#m-menu li.has-submenu:not(.submenu-open):has(.current-submenu-item) > .menu-parent,
#m-menu li.has-submenu.is-parent-active:not(.submenu-open) > .menu-parent {
    border-left: 3px solid var(--mm-bar);
}
#m-menu li.has-submenu.submenu-open:has(.current-submenu-item) > .menu-parent,
#m-menu li.has-submenu.is-parent-active.submenu-open > .menu-parent {
    border-left: none;
}


/* ─────────────────────────────
   5. 子メニューコンテナ
───────────────────────────── */
#sub .submenu-items,
#m-menu .submenu-items {
    background: transparent;
    /* 縦線は既存のまま（実線か点線はお好みで） */
    border-left: 1px solid var(--mm-border);
}

/* ─────────────────────────────
   6. Mobile 子メニュー（追加設定）
───────────────────────────── */
/* 子メニュー内の各項目にも一貫した 1px の線を引く */
#m-menu .submenu-items li {
    border-bottom: 1px solid var(--mm-border) !important;
}

/* ただし、最後の項目だけは下の線を消すと、枠線との重複がなくなります */
#sub .submenu-items li:last-child,
#m-menu .submenu-items li:last-child {
    border-bottom: none !important;
}


/* ─────────────────────────────
   6. Mobile 子メニュー開閉
───────────────────────────── */

#m-menu .submenu-items {
    display: none;
    list-style: none;
    padding-left: 0;
    margin: 0;
}

#m-menu .has-submenu.submenu-open > .submenu-items {
    display: block;
}

/* ul#pageindex（ページ内目次）は submenu-items 内に入るが
   submenu-items の display:none に巻き込まれないよう常時 block にする */
#m-menu .submenu-items li.has-pageindex > ul#pageindex {
    display: block;
    list-style: none;
    padding-left: 0;
    margin: 0;
}
/* ページ内目次リンクのスタイル */
#m-menu .submenu-items li.has-pageindex > ul#pageindex li a {
    display: block;
    padding: 10px 8px 10px 40px;
    font-size: 13px;
    color: var(--mm-sub);
    text-decoration: none;
    text-align: left;
    line-height: 1.4;
}
#m-menu .submenu-items li.has-pageindex > ul#pageindex li a:hover {
    background: var(--mm-bg-sft);
    color: var(--mm-front);
}

#m-menu .submenu-items li {
    border: none;
}

#m-menu .submenu-items li a.site-title {
    padding: 10px 8px 10px 30px;
    text-align: left;
}

#m-menu .submenu-items li a.site-title span.site-title {
    font-size: 14px;
}

#m-menu .submenu-items li a.site-title span.menu-subtitle {
    font-size: 10px;
}


/* ─────────────────────────────
   7. トグル構造（Mobile）
───────────────────────────── */

#m-menu .menu-parent {
    position: relative;  /* submenu-toggle の absolute 基準 */
    display: flex;
    align-items: stretch;
    width: 100%;
}

#m-menu .menu-parent-link {
    flex: 1;
    min-width: 0;
    display: flex !important;
    flex-direction: column;
    justify-content: center;
    /* 左右に submenu-toggle 幅(48px)分のパディングを取り、テキストを真中央に */
    padding: 20px 48px;
    text-align: center;
}

#m-menu .submenu-toggle {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    transition: background 0.2s;
}

/* submenu-toggle の個別 hover は .menu-parent:hover で統合済み */


/* ▶ 矢印 */

#m-menu .submenu-toggle .toggle-arrow {
    display: block;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 6px 0 6px 9px;
    border-color: transparent transparent transparent var(--mm-border);
    transition: transform 0.2s ease;
}

#m-menu .has-submenu.submenu-open > .menu-parent .toggle-arrow {
    transform: rotate(90deg);
}


/* ─────────────────────────────
   8. Closeボタン
───────────────────────────── */

#m-menu .close-btn {
    background: none;
    border: none;
    padding: 0;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--mm-close);
    cursor: pointer;
    pointer-events: none;
    flex-shrink: 0;
}

#m-menu .close-btn svg {
    width: 22px;
    height: 22px;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.5;
    stroke-linecap: round;
}


/* --- コンテンツエリア --- */
#container {
    /* padding-top は header.css の #container で --header-total-h を使って管理 */
    margin: 0;
    width: 100%;
    max-width: 100%;
    background: var(--c-back);
    /* box-shadow は新ヘッダー構造では除去 */
    box-sizing: border-box;
}
#contents {
    clear: both;
    display: flow-root; /* floatクリア（overflow:hiddenの代替）*/
    max-width: 1200px;
    margin: 0 auto;
    padding: 15px 3%;
    box-sizing: border-box;
}
/* 通常レイアウトではcontents-innerはブロック（透過的） */
#contents-inner {
    display: block;
}

main {
    float: none;
    width: auto;
    padding-right: 0;
    min-width: 0;
    box-sizing: border-box;
}
#sub {
    float: none;
    width: auto;
    margin-top: 20px;
}


/* ==================================================
   ■ 装飾クラス（自由に組み合わせ可）
================================================== */

/* 箱型（h1） */
.midashi-box {
    padding: 0.35em 1.2em;
    background: var(--c-blue);
    color: var(--c-back);
    border-left: 4px solid var(--c-lgold);
    font-weight: var(--fw-midashi);
    clear: both;
}

body.dark-mode .midashi-box {
    color: var(--c-front);
}

/* 基本見出し（h2） */
#sub h2 {
    font-size: 0.9rem;
    letter-spacing: 0.05em;
    font-weight: 400;
}

/* 強調見出し（h2） */
.midashi-left {
    margin-top: 2.4em;
    margin-bottom: 1.0em;
    padding: 0.55em 1.1em;
    border-left: 2px solid var(--c-blue);
    color: var(--c-front);
    clear: both;
}

/* 下線型（h3） */
.midashi-btm {
    margin-top: 2.2em;
    margin-bottom: 1.0em;
    padding: 0.45em 0;
    border-bottom: 2px solid var(--c-bg-str);
    color: var(--c-front);
    clear: both;
}

/* 控えめ左線（h4） */
.midashi-left2 {
    margin-top: 2.0em;
    margin-bottom: 0.9em;
    padding-left: 0.8em;
    border-left: 2px solid var(--c-bg-str);
    color: var(--c-front);
    font-size: 1.1rem;  /* h4(1.05rem)より上、h3(1.2rem)より下の補助見出し */
    clear: both;
}


/* =========================
   list-box 基本
========================= */
.list-box {
    position: relative;
    display: flow-root; /* float画像を包み込む（overflow:hiddenの代替） */
    margin-bottom: 20px;
    border: 1.5px solid var(--c-front);
    padding: 10px 15px 15px;   /* ← 上を15px→10pxに変更 */
    background: var(--c-back);
}

/* リンクカード */
.list-box.is-link {
    cursor: pointer;
}

/* ブラウザ左下にURLを表示するためのカバーリンク */
.list-box-cover-link {
    position: absolute;
    inset: 0;
    z-index: 0;
}
/* 内部リンクをカバーリンクより上に配置 */
.list-box a:not(.list-box-cover-link) {
    position: relative;
    z-index: 1;
}

/* ホバー */
.list-box.is-link:hover,
.list-box.is-link:focus-within {
    background: transparent;
    transition: background 0.2s ease;
}

/* カード内見出し */
.list-box h3 {
    margin: 0.8rem 0 0.6rem;
}

/* 先頭要素のmargin-topをリセット（上余白の二重がかりとマージン相殺を防ぐ） */
/* 最も確実な方法：cover-linkの直後の兄弟要素も対象にする */
.list-box > *:not(.list-box-cover-link):first-of-type,
.list-box > .list-box-cover-link + * {
    margin-top: 0;
}

/* =========================================================
   フロントイメージ & ヒーロー文字（span方式）
   ========================================================= */

/* --- ヒーロー共通ベース --- */
.hero-static,
.hero-overlay-src {
  position: relative;
  width: 100%;
  margin-left: 0;
  margin-right: 0;
}

/* hero-staticがcontainer外に出た場合、container自身のpadding-topは不要 */
body.has-hero #container {
  padding-top: 0 !important;
}



/* hero-staticはcontainer外・fixed headerの下に配置 → ヘッダー分だけ押し下げ */
/* gridで画像・暗幕・文字を同一セルに重ねる */
.hero-static {
  display: grid;
  position: relative;
  margin-top: var(--header-total-h);
  overflow: hidden; /* p要素のwhite-space:nowrapによるはみ出しを封じる */
}
.hero-static > * {
  grid-area: 1 / 1;
}

/* オーバーレイ用ソースはJSがcloneするまで非表示 */
.hero-overlay-src {
  display: none;
}

/* hero-static の画像：コンテナ全体を埋める・高さはJSで制御 */
.hero-static .hero-img {
  display: block;
  width: 100%;
  height: var(--static-height, 50vh);
  max-height: var(--static-height, 50vh);
  object-fit: cover;
  object-position: var(--hero-position, center);
  z-index: 10;
}

/* hero-overlay の画像：全画面cover */
#hero-overlay .hero-img,
.hero-overlay-src .hero-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--hero-position, center);
  z-index: 10;
}

/* メッセージ遅延表示 */
#hero-overlay > p {
  opacity: 0;
}
#hero-overlay > p.hero-msg-animate {
  animation: heroMsgFadeIn 0.8s ease forwards;
  animation-delay: var(--msg-delay, 0.5s);
}
@keyframes heroMsgFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* 黒いオーバーレイ（文字を読みやすくするフィルター） */
.hero-static::before,
.hero-overlay-src::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--c-overlay);
  z-index: 20;
}
/* hero-static の::beforeはgridセル内でimgに重ねる */
.hero-static::before {
  position: relative;
  grid-area: 1 / 1;
  align-self: stretch;
  z-index: 20;
  pointer-events: none;
}

/* --- 文字（span方式） --- */
/* overlay系（absolute配置）*/
.hero-overlay-src > p {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  z-index: 30;
  margin: 0;
  padding: 2rem 1.5rem;

  /* フォント規定 */
  font-family: "Shippori Mincho", serif;
  font-weight: 500;  /* ヒーロー演出のため意図的に500固定（変数化対象外） */
  letter-spacing: 0.24em;
  line-height: 1.75;
  color: #fff;
  text-align: center;
  text-shadow: 2px 2px 14px var(--c-text-shadow);
  font-size: clamp(1.72rem, 3.2vw, 3.3rem);

  /* spanを横並びにする設定（PCでは1行） */
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0;             /* 自動的な隙間をゼロにする */
  white-space: nowrap; /* PCで勝手に改行されるのを防ぐ */
}

/* hero-static の文字：absoluteで中央固定 */
.hero-static > p {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  grid-area: 1 / 1;
  z-index: 30;
  margin: 0;
  padding: 2rem 1.5rem;
  width: 100%;
  font-family: "Shippori Mincho", serif;
  font-weight: 500;
  letter-spacing: 0.24em;
  line-height: 1.75;
  color: #fff;
  text-align: center;
  text-shadow: 2px 2px 14px var(--c-text-shadow);
  font-size: clamp(1.72rem, 3.2vw, 3.3rem);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0;
  white-space: nowrap;
}

/* スマホ版（500px以下）：span位置で強制的に2行にする */
@media (max-width: 500px) {
  .hero-static > p,
.hero-overlay-src > p {
    white-space: normal; /* 折り返しを許可 */
  }
  .hero-static > p span,
  .hero-overlay-src > p span {
    display: block;      /* 100%幅のブロックにして改行させる */
    width: 100%;
    font-size: clamp(1.55rem, 4.2vw, 2.7rem);
  }
  /* 2行目がある場合に上の余白を少し開ける（必要に応じて調整） */
  .hero-static > p span:nth-child(2),
  .hero-overlay-src > p span:nth-child(2) {
    margin-top: 0.2em;
  }
}

/* ヒーロー文字をヘッダーと完全に揃えたいとき用（PC大画面） */
@media (min-width: 1200px) {
  .hero-static > p,
.hero-overlay-src > p { 
    font-size: 2.6rem;   
  }
}

/* =========================================================
/* 初回全画面オーバーレイ（front-overlay） */
   ========================================================= */

/* #hero-overlay の直下およびすべての内部要素に強制適用 */
#hero-overlay,
#hero-overlay * {
    cursor: pointer !important;
}

#hero-overlay {
  display: block; 
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  z-index: 210;           /* ヘッダー全層(最大200)より上 */
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
  cursor: pointer !important;
  transition: opacity 1.5s ease-in-out, visibility 0s linear 0s;
}

/* フェードアウト状態（クラス名をclosingに変更） */
#hero-overlay.closing {
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  /* ★修正2: visibilityの遅延時間を 1.5s に戻す */
  transition: opacity 1.5s ease-in-out, visibility 0s linear 1.5s;
}

/* ★追加: クリック時専用の高速トランジションクラス */
.fast-transition {
    transition: opacity 0.8s ease-in-out, visibility 0s linear 0s !important;
}
.fast-transition.closing {
    transition: opacity 0.8s ease-in-out, visibility 0s linear 0.8s !important;
}


/* --- サイドバー (#sub) --- */

/* 1. すべてのナビゲーションブロックに共通の余白を設定 */
#sub nav {
    margin-bottom: calc(var(--base-space) * 1.5); /* 索引とご連絡の間の隙間 */
    padding: 0;
    background: none;
    box-shadow: none;
}

/* 2. 最後のブロックだけは下の余白をゼロにする（美観のため） */
#sub nav:last-child {
    margin-bottom: 0;
}

/* 目次ナビ（#pageindex）は2カラム時にcontentsのpadding直下から始まるため、
   本文h1の中心線に視線が揃うようpadding-topで調整する。
   nav.box以降のh2には影響しない。
   ※ #sub nav { padding: 0 } より詳細度を上げるため #sub #pageindex で指定。 */
#sub #pageindex {
    padding-top: 1.2em;
}

/* nav.boxなどの個別設定 */

/* ── サイドバー基準フォントサイズ ──────────────────────────
   bodyに緩やかに追従しつつ最小14px・最大17pxに収める。
   スイッチャー拡大時に本文との差が開きすぎるのを防ぎ、
   縮小時にも崩れないようclampで制御する。
   ─────────────────────────────────────── */
#sub {
    font-size: clamp(14px, 0.88em, 17px);
}

#sub nav.box ul.submenu { margin-bottom: 0px; background: transparent; }
#sub nav.box ul.submenu li { background: transparent; }
#sub nav.box ul.submenu li a.site-title {
    text-decoration: none;
    display: block;
    padding: 10px 8px;
    border-bottom: 0.5px solid var(--c-bg-str);
    color: var(--c-front);
    line-height: 1.3;
    background: transparent;
}
#sub nav.box ul.submenu li a.site-title span.site-title {
    display: block;
    color: var(--c-front);
    font-size: 1.1em; /* #sub基準の1.1倍 */
}
#sub nav.box ul.submenu li a.site-title span.menu-subtitle {
    margin-top: 3px;
    color: var(--c-gray);   /* サブタイトルは補助情報としてc-gray（c-frontより控えめ） */
    line-height: 1.2;
    font-size: 1em; /* #sub基準サイズそのまま */
}
#sub ul.submenu li a.page-title,
#sub ul.submenu li a:not(.site-title) {
    text-decoration: none;
    display: block;
    padding: 5px 5px;
    border-bottom: 0.5px solid var(--c-bg-str);
    color: var(--c-front);
    font-size: 1em; /* #sub基準サイズそのまま */
}


#sub ul.sub-qr { margin: 0; padding: 0; }
#sub ul.sub-qr li a {
display: flex; /* ブロック要素からフレックスコンテナに変更 */
    justify-content: center; /* QRコード（子要素）を水平中央に配置 */
    align-items: center; /* 垂直方向の中央揃えも念のため追加 */
    padding: 10px 0;
    border-bottom: 0.5px solid var(--c-bg-str);
    text-decoration: none;
    color: var(--c-front) !important;
}

/* 余白の調整（必要に応じて数値を変更してください） */
.sub-qr {
    margin: 20px auto;
    text-align: center;
}

.sub-qr img {
    width: 40% !important;
    max-width: 150px; /* サイドバーに合わせたサイズ */
}


/* has-submenu の ::after は上の「子ページ内目次統合」ブロック内で
   ul.submenu > li.has-submenu に限定して定義済み。ここには重複記述しない。 */
.submenu-items {
    display: none;
    list-style: none;
    padding-left: 15px;
    margin: 5px 0 10px 0;
    border-left: 2px solid var(--c-bg-str);
    background: none;
}

.has-submenu.submenu-open > .submenu-items {
    display: block;
}

.submenu-items li { border: none; }
.submenu-items li a.site-title {
    padding: 10px 8px;
    border-bottom: 1px solid var(--c-front);
}
.submenu-items li a.site-title span.site-title {
    font-size: 1em; /* #sub基準サイズそのまま */
}
.submenu-items li a.site-title span.menu-subtitle {
    font-size: 0.85em;
    color: var(--c-gray);   /* サブタイトルは補助情報としてc-gray */
}

/* --- フッター --- */

/* 1. フッター全体の枠組みと背景 */

/* 2ペイン時：footerは#contents内の#contents-innerの下に表示
   ★変更：:not(.has-hero) → :not(.onecol-fixed):not(.hero-layout-enabled) */
body.side-toc-layout:not(.onecol-fixed):not(.hero-layout-enabled) .page-footer {
    flex-shrink: 0;
    width: 100%;
}

/* ================================================================
   sub-hidden：1カラム表示時のサイドバー非表示制御
   $sidebar_hidden = 1 のページで body に付与される。
   side-toc-layout（2カラム）時は適用されない（ui.jsが制御）。
================================================================ */
body.sub-hidden:not(.side-toc-layout) #sub {
    display: none;
}


/* ページ内目次スクロールハイライト */
#sub #pageindex li a {
    border-left: 2px solid transparent;
    padding-left: 0.5em;
    transition: border-left 0.2s, color 0.2s;
}
/* toc-active の詳細スタイルは折りたたみブロック内で定義（下記） */
#sub #pageindex li a.toc-active {
    outline: none;
    box-shadow: none;
    border-radius: 0;
}
/* 章立て：補助ラベル（toc-chapter） */
#sub li a.toc-chapter {
    font-size: 0.85em;
    color: var(--c-gray) !important;
    /* pointer-events は削除済み：クリック可能 */
    border-left: none;
}

/* サイドメニュー統合版の章立て行 */
#sub .submenu-chapter-item > a {
    font-size: 0.82em;
    color: var(--c-gray);
    font-weight: 600;
    padding-left: 0.5em;
    border-left: 2px solid transparent;
    letter-spacing: 0.02em;
}
#sub .submenu-chapter-item > a:hover {
    color: var(--c-front);
}

/* ================================================================
   ページ内目次（#pageindex）階層インデント
   設計：
   - toc-level-{N} を <li> に付与 → padding-left でインデント制御
   - toc-h{N} を <a> に付与       → font-size・color で視覚階層
   - h1=0, h2=1em, h3=2em, h4=3em, h5=4em, h6=5em
   - hなし要素は level=2（h2相当）にフォールバック（toc.php処理済み）
   - data-toc-level 属性で個別上書き可能（toc.php処理済み）
================================================================ */

/* ── インデント（liに付与） ── */
#sub #pageindex li.toc-level-1 { padding-left: 0; }
#sub #pageindex li.toc-level-2 { padding-left: 1em; }
#sub #pageindex li.toc-level-3 { padding-left: 2em; }
#sub #pageindex li.toc-level-4 { padding-left: 3em; }
#sub #pageindex li.toc-level-5 { padding-left: 4em; }
#sub #pageindex li.toc-level-6 { padding-left: 5em; }

/* ── フォント・色（aに付与）
   既存の #sub #pageindex li a に padding-left: 0.5em が定義済み。
   toc-h{N} ではサイズ・色のみ上書きする。 ── */
#sub #pageindex li a.toc-h1 { font-size: 1.05em; font-weight: 600; color: var(--c-front); }
#sub #pageindex li a.toc-h2 { font-size: 1em;    font-weight: 500; color: var(--c-front); }
#sub #pageindex li a.toc-h3 { font-size: 0.92em;                   color: var(--c-front); }
#sub #pageindex li a.toc-h4 { font-size: 0.85em;                   color: var(--c-gray);  }
#sub #pageindex li a.toc-h5 { font-size: 0.80em;                   color: var(--c-gray);  }
#sub #pageindex li a.toc-h6 { font-size: 0.75em;                   color: var(--c-gray);  }
/* ================================================================
   ページ内目次（#pageindex）サイドバー h3/h4 折りたたみ
   ハイライト設計：

   ① 現在地（toc-active）
      → 網掛けなし・文字色を本文色（c-front）に変えるのみ

   ② 親グループ（toc-group-has-active = 子に active がある）
      → 網掛けなし（子の toc-active の文字色変化で判別）
================================================================ */

/* ── グループ親 li ── */
#sub #pageindex li.toc-group-item {
    position: relative;
}

/* 親 a に ::after で ▶ を表示（サイトメニューの has-submenu > a::after と同構造） */
#sub #pageindex li.toc-group-item > a {
    position: relative;
    padding-right: 22px;
    cursor: pointer;
    outline: none;        /* クリック時の黒枠を排除 */
}
#sub #pageindex li.toc-group-item > a:focus,
#sub #pageindex li.toc-group-item > a:focus-visible {
    outline: none;
    box-shadow: none;
}
#sub #pageindex li.toc-group-item > a::after {
    content: '▶';
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.7em;
    color: var(--c-gray);
    transition: transform 0.2s ease-in-out;
    line-height: 1;
}

/* 展開時：▶ を 90° 回転して ▼ に */
#sub #pageindex li.toc-group-item.toc-group-open > a::after {
    transform: translateY(-50%) rotate(90deg);
}

/* 子 ul（初期非表示） */
#sub #pageindex ul.toc-group-children {
    display: none;
    margin: 0;
    padding: 0;
    list-style: none;
    background: transparent;
}

/* 展開時に表示 */
#sub #pageindex li.toc-group-item.toc-group-open > ul.toc-group-children {
    display: block;
}

/* 子 li は toc-level-N のインデントをそのまま継承 */
#sub #pageindex ul.toc-group-children li {
    border: none;
}

/* ── ① 現在地ハイライト（toc-active）
   網掛け＋文字色を本文色に変える。 */
#sub #pageindex li a.toc-active {
    background: var(--c-bg-str) !important;
    border-left: 2px solid transparent;
    color: var(--c-front);
    outline: none;
    box-shadow: none;
    border-radius: 0;
}

/* ── ② 親グループのハイライト（toc-group-has-active）
   h3/h4がアクティブ中は親h2のハイライトを出さない。
   h3/h4を抜けてh2がアクティブになったときは toc-active で弱い網掛けがつく。
   ⇒ toc-group-has-active はスタイルを付与しない */
#sub #pageindex li.toc-group-item.toc-group-has-active > a {
    background: transparent !important;
    border-left: 2px solid transparent;
    color: inherit;
}
#sub #pageindex li.toc-group-item.toc-group-has-active:not(.toc-group-open) > a {
    border-left: 2px solid transparent;
}
#sub #pageindex li.toc-group-item.toc-group-has-active.toc-group-open > a {
    border-left: 2px solid transparent;
}

.page-footer {
    clear: both;
    text-align: center;
    padding: 10px 3%;
    background: var(--c-blue) !important; /* メニューと同じグラデーション */
    width: 100%;
    box-sizing: border-box;
}

/* 2. フッター内の文字（small）とリンク（a）の色設定 */
.page-footer small, 
.page-footer a {
    color: var(--c-gold); 
    font-size: 14px;
    text-decoration: none; /* リンクの下線を消す */
}

/* 3. リンクの状態（訪問済み・ホバー時など）をすべて金色に固定 */
.page-footer a:visited,
.page-footer a:hover,
.page-footer a:active {
    color: var(--c-gold);
}


/* ===============================================
更新情報・お知らせ
================================================= */

#date dl {
    display: grid;
    grid-template-columns: 1fr; 
    margin: 1.5em 0;
    padding: 0;
    margin: var(--base-space) 0;
}

@media screen and (min-width: 600px) {
    #date dl {
        grid-template-columns: 11em 1fr; 
    }
}

/* --- 日付部分 (dt) --- */
#date dt {
    grid-column: 1;
    /* 上下の余白を少し詰める (10px -> 6px) */
    padding: 6px 0 2px 0; 
    border-bottom: none;
    color: var(--c-front);
    line-height: 1.4; /* 日付用のタイトな行間 */
}

/* --- 本文部分 (dd) --- */
#date dd {
    grid-column: auto; 
    margin: 0;
    /* 下の余白を少し詰める (12px -> 8px) */
    padding: 2px 0 8px 0; 
  border-bottom: 1px solid var(--c-bg-str);
    /* 本文の行間を少し詰めると1行の時のスカスカ感が減ります */
    line-height: 1.6; 
}

/* --- PC表示の時の調整 (min-width: 600px) --- */
@media screen and (min-width: 600px) {
    #date dt {
        /* PCで横並びの時、上下中央に見えるようパディングを調整 (12px -> 8px) */
        padding: 8px 0;
  border-bottom: 1px solid var(--c-bg-str);
    }
    #date dd {
        grid-column: 2;
        /* 左の余白を維持しつつ、上下を dt と合わせる */
        padding: 8px 0 8px 1.5em;
  border-bottom: 1px solid var(--c-bg-str);
    }
}

/* 背景色がある特殊な行 (ddinfo) */
#date dd.ddinfo {
    grid-column: 1 / -1;
    background-color: var(--c-bg-sft);
    border-bottom: none;
    padding: 12px 15px; /* 少しコンパクトに */
    margin: 5px 0 15px 0;
}

/* ===============================================
   テーブルスタイル (レスポンシブ・スクロール対応版)
   ※table.jsの干渉を無効化し、CSSで制御します
   【変更点】 パターンBのセレクタを大幅に簡素化
================================================== */

/* 1. テーブルを囲むコンテナ：はみ出し部分をスクロール可能に */
/*    iOS Safari で横スクロールバーが罫線に被る対策*/

/* 1. コンテナ本体：下にわずかな余白を確保（これが最重要！） */
.table-container {
    /* 既存の設定はすべて維持 */
    display: block !important;
    width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    margin-bottom: 20px;

    /* ← これだけ追加（iPadでスクロールバーが罫線の下に来るようになる） */
    padding-bottom: 3px;           /* 1pxだとギリギリ、3pxで確実 */
    box-sizing: border-box;
}

/* 2. iOS専用：スクロールバーを強制的に「overlay」ではなく「inset」にして被りを防止 */
.table-container::-webkit-scrollbar {
    -webkit-appearance: none;
    height: 11px;                  /* iPadで見やすい高さ */
}

.table-container::-webkit-scrollbar-track {
    background: transparent;
    margin-bottom: 3px;            /* 罫線との隙間確保（paddingと連携） */
}

.table-container::-webkit-scrollbar-thumb {
    background-color: var(--c-scrollbar);
    border-radius: 6px;
    border: 2px solid transparent;
    background-clip: content-box;
}

/* 3. 超保険：tableの最下段罫線がスクロールバーで隠れないように強制 */
.table-container > table {
    margin-bottom: 1px;            /* テーブル本体にわずかな下マージン（保険） */
}

/* 4. Firefox / Edge でも見た目を統一（任意・美しさUP） */
.table-container {
    scrollbar-width: thin;
    scrollbar-color: var(--c-scrollbar) transparent;
}

/* 2. テーブル本体の基本設定 */
/* セレクタ変更なし */
.table {
    border-collapse: collapse;
    border-spacing: 0;
    font-size: 100%;
    margin: 0 auto;
}

/* 3. セル（th, td）の共通設定 */
/* セレクタ変更なし */
.table th, .table td {
    border: 0.5px solid var(--c-front);
    padding: 10px 15px;
    vertical-align: middle; /* ← 中央に配置するよう変更 */
    
    /* 重要: JSが付与する width:XXch を強制的に無効化 */
    width: auto !important;
    max-width: none !important;
    min-width: auto !important;
}
.table th {
    text-align: center;
    background-color: var(--c-bg-sft);
}

/* セル個別の網掛け（各ページで class="bg" 指定） */
.table .bg {
    background-color: var(--c-bg-sft);
}

/* gojiseki.php の表向け：年時代セルの折り返しを禁止し、幅をコンテンツ幅に合わせる */
/* セレクタ変更なし */
.table .cell-nowrap {
    white-space: nowrap; /* 強制的に折り返しを禁止 */
    width: 1px;          /* 幅を最小限に抑える */
}

/* --------------------------------------------------
   パターンA: 通常のテーブル (.table)
   画面幅に合わせてテキストを折り返します
-------------------------------------------------- */
/* セレクタ変更なし - .table th, .table td は既に共通設定にあるが、折り返し許可を再定義 */
.table th, .table td {
    white-space: normal; /* 折り返し許可 */
    word-break: break-all; /* 必要なら単語の途中でも改行 */
}

/* --------------------------------------------------
   パターンB: スクロールさせるテーブル (.table-nowrap)
   折り返しを禁止し、コンテンツ幅で表示します
-------------------------------------------------- */
/* 2. テーブル本体：【修正】冗長なセレクタ (table.table.table-nowrap) を削除 */
.table-nowrap { /* ← 修正: これだけでOK */
    table-layout: auto !important;
    width: max-content !important; /* コンテンツ幅に合わせてテーブル自体を広げる */
    min-width: 100% !important;
}
/* 3. セル（th, td）：【修正】冗長なセレクタ (table.table.table-nowrap) を削除 */
.table-nowrap th,
.table-nowrap td { /* ← 修正: これだけでOK */
    width: auto !important;          /* JSの計算値を無視 */
    white-space: nowrap !important;  /* 改行を禁止 */
    word-break: keep-all !important; /* 日本語改行も禁止 */
    max-width: none !important;      /* 幅制限を解除 */
}

/* 【重要】特例措置: 結合セル（colspan）がある場合 */
/* 4. 例外：【修正】冗長なセレクタ (table.table.table-nowrap) を削除 */
.table-nowrap td[colspan],
.table-nowrap th[colspan] { /* ← 修正: これだけでOK */
    white-space: normal !important; /* 改行する */
    min-width: 300px;               /* 最低限の幅を確保 */
    width: auto !important;
}


/* --------------------------------------------------
   モバイル・タブレット向けの調整
-------------------------------------------------- */
@media screen and (max-width: 1024px) {
    /* table-nowrap は強制的に横スクロールモードを維持 */
    /* 【修正】冗長なセレクタ (.table.table-nowrap) を削除 */
    .table-nowrap { /* ← 修正: これだけでOK */
        width: max-content !important;
    }
}


/* ── .scroll-info ───────────────────────────
   【設計メモ】
   テーブルのスワイプヒント。ui.jsが生成し
   class="scroll-info text-sm" を付与するため
   文字スタイル（font-size / color）はtext-smが担当。
   margin-bottomのみ固有設定として残す。

   本来の記述：
     <p class="scroll-info text-sm">▶▶▶スワイプで...</p>
   ─────────────────────────────────────── */
.scroll-info {
    margin-bottom: 10px;
}


/* ── メールフォーム ─────────────────────────── */

/* フォーム全幅テーブル */
.table-full {
    width: 100%;
    max-width: 100%;
    table-layout: auto;
}

/* エラーメッセージ（項目ごと）
   【設計メモ】文字スタイルはtext-sm.c-redが担当。
   本来の記述: <div class="error-message text-sm c-red">...</div>
   ─────────────────────────────────────── */
.error-message {
    margin-top: 0.5em;
    display: block;
    /* font-size / color はtext-sm.c-redが担当 */
}

/* 全体エラー・CSRF警告（JSで .is-visible を付与して表示） */
.form-error-global {
    color: var(--c-red);
    text-align: center;
    margin-bottom: 1em;
    display: none;
}
.form-error-global.is-visible {
    display: block;
}

/* ボタン横並び */
.btn-ctr {
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    gap: 10px;
    margin-top: 1.5em;
    margin-bottom: 0.5em;
}

/* 処理中表示
   【設計メモ】文字スタイルはtext-smが担当。
   本来の記述: <div class="loading text-sm">確認画面を準備...</div>
   ─────────────────────────────────────── */
.loading {
    display: none;
    color: var(--c-highlight);
    text-align: center;
    margin-top: 0.5em;
    line-height: 1.4;
    /* font-size はtext-smが担当 */
}

/* センタリング汎用 */
.text-ctr {
    text-align: center;
}

/* メールフォームテーブルのラベル幅 */
@media (min-width: 768px) {
    .table-full th { width: 30%; }
    .table-full td { width: 70%; }
    .table-full .name-input { max-width: 25ch; }
    .desktop-label { display: block; }
    .mobile-label  { display: none; }
}
@media (max-width: 767px) {
    .table-full th,
    .table-full td  { padding: 0.2em; }
    .table-full th  { width: 30%; }
    .table-full td  { width: 70%; }
    .table-full .name-input { width: calc(100% - 1.5em); }
    .desktop-label  { display: none; }
    .mobile-label   { display: block; }
    .btn-ctr        { gap: 5px; }
    /* .loading / .error-message のfont-sizeはtext-smが担当するため指定不要 */
}

/* フォーム入力欄の基本スタイル（ライト・ダーク共通） */
input[type="text"],
input[type="email"],
input[type="password"],
textarea,
select {
    font-family: var(--font-stack);
    font-size: 18px;                           /* 入力文字サイズを16pxに固定（confirmのp文字と一致） */
    width: 100%;
    padding: 12px;
    border: 1px solid var(--c-front);
    background: var(--c-back);
    color: var(--c-front);
    box-sizing: border-box;
    border-radius: 0 !important;
    transition: none;
    text-shadow: none !important;              /* 文字の影を完全に削除 */
}

/* フォーカス時も変化なし */
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
textarea:focus,
select:focus {
    outline: none;
    border: 1px solid var(--c-front);
    box-shadow: none;
    background: inherit;
    text-shadow: none !important;
}

/* ダークモード専用：背景は --c-bg-sft（深い紺）、文字とカーソルを純白に固定 */
body.dark-mode input[type="text"],
body.dark-mode input[type="email"],
body.dark-mode input[type="password"],
body.dark-mode textarea,
body.dark-mode select {
    background: var(--c-bg-sft) !important;     /* #0f1c38 → 判読しやすい深い紺 */
    color: var(--c-front) !important;                 /* 文字を純白に固定（見えやすく） */
    caret-color:  var(--c-front) !important;           /* カーソルを純白に固定（点滅が見える） */
    text-shadow: none !important;              /* 影完全削除 */
}

/* プレースホルダーもダークで純白寄りに（フォーム系：背景が--c-bg-sft想定） */
body.dark-mode ::placeholder {
    color: var(--c-back) !important;
    opacity: 1; /* ブラウザによる半透明表示を解除 */
}

/* 検索窓のplaceholderはダークモードでも明るい色（背景が--c-backで暗いため） */
body.dark-mode .search-input-main::placeholder {
    color: var(--c-front) !important;
    opacity: 0.5;
}

/* autofill変色無効化（ダークでは背景を --c-bg-sft に固定） */
input:-webkit-autofill,
textarea:-webkit-autofill,
select:-webkit-autofill {
    -webkit-text-fill-color: var(--c-front) !important;
    -webkit-box-shadow: 0 0 0 1000px var(--c-back) inset !important;
    background-color: var(--c-back) !important;
    caret-color: var(--c-front) !important;
    transition: background-color 50000s ease-in-out 0s !important;
    text-shadow: none !important;
}
body.dark-mode input:-webkit-autofill,
body.dark-mode textarea:-webkit-autofill,
body.dark-mode select:-webkit-autofill {
    -webkit-text-fill-color: #ffffff !important;  /* autofill文字も純白 */
    -webkit-box-shadow: 0 0 0 1000px var(--c-bg-sft) inset !important;
    background-color: var(--c-bg-sft) !important;
    caret-color:  var(--c-front) !important;
    text-shadow: none !important;
}

/* 念のため main と p の影も削除（影が入っている場合） */
main, main p, main textarea {
    text-shadow: none !important;
}

/* メインのボタン共通 */
main .btn {  /* 短縮：すべての .btn をまとめて */
    padding: 10px 20px;
    border: 1px solid var(--c-front);
    font-size: 20px;
    font-family: var(--font-stack);
    font-weight: var(--fw-ui);
    color: var(--c-front);
    background: var(--c-back);
    cursor: pointer;
    transition: all 0.3s ease;
}

/* 送信ボタンだけ反転（誘導用） */
main input[type="submit"].btn {
    color: var(--c-back);
    background: var(--c-front);
    border-color: var(--c-front);
}

/* 送信ボタンのホバー・アクティブ：少し暗くして押下感 */
main input[type="submit"].btn:hover,
main input[type="submit"].btn:focus,
main input[type="submit"].btn:active {
    background: color-mix(in srgb, var(--c-front) 90%, black);
    border-color: color-mix(in srgb, var(--c-front) 90%, black);
}

/* キャンセル・リセット系のホバー・アクティブ：短縮して1つにまとめる */
main input[type="button"].btn:hover,
main input[type="reset"].btn:hover,
main input[type="button"].btn:focus,
main input[type="reset"].btn:focus,
main input[type="button"].btn:active,
main input[type="reset"].btn:active {
    color: var(--c-back);
    background: var(--c-front);
    border-color: var(--c-front);
}

/* 無効状態 */
main .btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

/* aタグのボタン（リンクをボタン表示する場合） */
main a.btn {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
}

/* 進む系ボタン（紺・反転）: submit は自動適用、a/button は明示クラスで指定 */
main .btn-primary {
    color: var(--c-back);
    background: var(--c-front);
    border-color: var(--c-front);
}
main .btn-primary:hover,
main .btn-primary:focus,
main .btn-primary:active {
    background: color-mix(in srgb, var(--c-front) 90%, black);
    border-color: color-mix(in srgb, var(--c-front) 90%, black);
}


/* --- ページトップボタン --- */
#pagetop-btn {
    display: flex;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    position: fixed;
    right: 15px;
    bottom: 40px; /* site-bottom-border(24px) + 余裕 */
    z-index: 60;
    width: 50px;
    height: 50px;
   background-color: color-mix(in srgb, var(--c-back) 80%, transparent) !important; /* 半透過：背景色80% */
    border: 3px solid var(--c-front) !important;      /* 文字色で枠線 */
    color: var(--c-front) !important;                 /* 矢印も文字色 */
    border-radius: 50%;
    text-decoration: none;
    font-style: normal;
    /* box-shadow 削除：枠線で十分 */
    align-items: center;
    justify-content: center;
    color: var(--c-front);
}
#pagetop-btn svg { width: 24px; height: 24px; }
#pagetop-btn.is-visible { opacity: 1; visibility: visible; }
#pagetop-btn:hover {
    background-color: var(--c-front) !important;      /* ホバー時は反転 */
    color: var(--c-back) !important;
    border-color: var(--c-front) !important;
}

/* --- ユーティリティ (マーク, 引用レイアウト, SVG) --- */
[class^="mark"] {
    font-size: 85%;
    line-height: 1.0;
    padding: 2px 5px;
    margin: 0px 5px;
    vertical-align: 1px;
}
/* ===============================================
   強調マーク & 折りたたみボタン（共通スタイルで統一）
================================================== */

/* 共通ベース（マークとボタンの共有スタイル） */
/* --- 1. 共通ベース（マークとボタンの土台を一括指定） --- */
[class^="mark"] {
    font-family: var(--font-stack);
    display: inline-block;
    text-decoration: none;
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
    transition: all 0.3s; /* プロパティを個別に書かず all で短縮 */
    white-space: nowrap !important;
}

/* --- 2. マーク(mark*) 特有の共通設定 --- */
[class^="mark"] {
    font-size: 85%;
    line-height: 1.2 !important;
    padding: 1px 5px !important;
    margin: 0 3px !important; /* 左右のみ指定（上下は0） */
    vertical-align: 0.05em !important; /*行内での高さ位置補正*/
    border-radius: 0 !important;
    height: auto !important;
    width: auto !important;
    aspect-ratio: auto !important;
}

/* --- 3. 個別スタイル（色と枠線のみ） --- */
.markn {
    background: var(--c-front);
    color: var(--c-back);
}

.markg {
    background: transparent !important;
    color: var(--c-front);
    border: 1px solid var(--c-front);
}
/* ========================================
   検索ハイライト用CSS（style.cssの該当箇所を
   まるごとこちらに差し替えてください）
======================================== */

/* ── 検索サマリー ────────────────────── */
.search-summary-wrap {
    font-size: 0.85em;             /* = text-sm：件数表示は一歩引いた扱い */
    color: var(--c-gray);          /* = text-sm */
    margin-bottom: 1.5em;
    line-height: var(--lh-body);
    background: transparent;
    padding: 15px 0;
    border-radius: 0;
}
/* 件数・キーワードのstrongは本文色で視認性を確保 */
.search-summary-wrap strong {
    color: var(--c-front);
    font-weight: var(--fw-body);   /* 太字にはしない */
}
/* ── .search-time ───────────────────────────
   【設計メモ】文字スタイルはtext-smが担当。
   本来の記述: <span class="search-time text-sm">(15ms)</span>
   ─────────────────────────────────────── */
.search-time {
    /* font-size / color はtext-smが担当 */
}

/* ── フォーム ─────────────────────────── */
.search-form-wrap {
    margin: 2em 0;
    display: flex;
    gap: 10px;
}
.search-input-main {
    flex: 1;
    padding: 12px 15px;
    font-size: 16px;
    border: 2px solid #aaa;
    border-radius: 4px;
    background: #fff;
    outline: none;
}
/* ── 検索入力ラッパー（×ボタン用） ──────── */
.search-input-wrap {
    position: relative;
    flex: 1;
    display: flex;
    align-items: center;
}
.search-input-wrap .search-input-main {
    flex: 1;
    width: 100%;
    padding-right: 36px; /* ×ボタン分の余白 */
}
/* ── ×クリアボタン ───────────────────────── */
.search-clear-btn {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    cursor: pointer;
    font-size: 1.1em;
    line-height: 1;
    color: var(--c-front);
    opacity: 0.5;
    transition: opacity 0.2s;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    user-select: none;
}
.search-clear-btn:hover {
    opacity: 0.85;
}

.jump-link,
a.jump-link,
a.jump-link:visited,
a.jump-link:hover,
a.jump-link:active,
a.jump-link:focus {
    color: var(--c-gray);
    text-decoration: none;
    border-bottom: 1px dotted var(--c-gray);
    cursor: pointer;
    transition: border-bottom 0.2s;
    padding: 0 2px;
}
a.jump-link:hover,
a.jump-link:active,
a.jump-link:focus {
    border-bottom: 1px solid var(--c-gray);
}
.list-box p {
    word-break: normal;        /* keep-allは回り込み時に極端な改行を引き起こすため通常に戻す */
    overflow-wrap: break-word;
    line-height: var(--lh-body); /* 本文と同じ行間に統一 */
}

/* ── search-hit 基本（網掛けなし） ───────── */
.search-hit {
    color: var(--c-highlight);
    background: transparent;          /* 網掛けなし */
    text-decoration: none;
    padding-bottom: 1px;
    display: inline;
    box-sizing: border-box;
    border-bottom: 2px dotted var(--c-highlight); /* デフォルト破線（部分一致） */
}

/* 完全一致 → 実線 */
.search-hit[data-match="complete"] {
    border-bottom: 2px solid var(--c-highlight);
    font-weight: var(--fw-strong);
}

/* 部分一致 → 破線（明示） */
.search-hit[data-match="partial"] {
    border-bottom: 2px dotted var(--c-highlight);
}

/* ── ruby + search-hit ─────────────────── */

/* ruby-hit: ルビ全体をオレンジ色に */
ruby.ruby-hit {
    color: var(--c-highlight);
}

/* rt（ルビ読み）は色のみ、下線なし */
ruby.ruby-hit rt {
    color: var(--c-highlight);
    border-bottom: none;
}

/* タイトル行のハイライト：下線なし・太字なし（ruby-hitと同スタイルで共用） */
[data-title-hl] .search-hit,
[data-title-hl] .search-hit[data-match="complete"],
[data-title-hl] .search-hit[data-match="partial"] {
    border-bottom: none;
    font-weight: inherit;
}

/* rt の中に search-hit span が入っても下線を消す（念のため） */
ruby rt .search-hit {
    border-bottom: none;
}


/**********************************************************

/* ========================================
/* --- 4. フォルダボタン特有の設定 --- */
======================================== */


/* expand-btnのデフォルトラベル（data属性未指定時のフォールバック）*/


/* ===============================================
    画像・メディア配置と回り込み（完全復元版）
   =============================================== */

/* --- 1. ボックス要素の上下余白管理 --- */
/* 連続した際の余白を2.5emで統一します */
.m-box,
blockquote.inyou,
.twitter-embed,
.txt-box,
.txt,
.side-by-side,
.tweet,
.twitter-tweet,
.list-box {
    margin-top: 2.5em !important;
    margin-bottom: 2.5em !important;
    clear: both;
}

/* 引用ボックス内のpタグが間延びするのを防ぐ設定 */
blockquote.inyou p {
    line-height: 1.8;      /* 本文と同じ読みやすい行間を確保 */
    margin-bottom: 0.8em;  /* 標準の1.5emから短縮し、引用内の密度を適正化 */
}

/* 最後のpタグの余白を消して、網掛け底辺との隙間を整える */
blockquote.inyou p:last-of-type {
    margin-bottom: 0;
}

/* --- 2. m-box 基本設定 (すべて維持) --- */
.m-box {
    margin: 0 auto;
    max-width: 100%;
}
.m-box.wrap-left {
    float: left;
    clear: left;
    margin: 0 24px 0 0;
    shape-outside: margin-box;
}
.m-box.wrap-right {
    float: right;
    clear: right;
    margin: 0 0 0 24px;
    shape-outside: margin-box;
}
.m-box.wrap-left + p, .m-box.wrap-right + p { margin-top: 0 !important; }
.m-box.size-s { max-width: 300px; }
.m-box.size-m { max-width: 450px; }
.m-box.size-l { max-width: 600px; }
.m-box img, .m-box iframe { display: block; margin: 0 auto; max-width: 100%; height: auto; }

/* --- 3. 引用枠 (inyou) の設定：ここを精密に修正しました --- */
/* 通常のinyouは「横幅いっぱい」を維持 */
.inyou {
overflow: hidden; /* これを追加 */
    background-color: var(--c-bg-sft) !important;
    border-left: 1.5px solid var(--c-blue);
    border-right: 1.5px solid var(--c-blue);
    padding: 20px;
    font-size: 0.95em;
    line-height: 1.75;
    text-align: left;
    display: block;      /* 文章用はブロック要素 */
    width: 100% !important; /* 横幅いっぱいに固定 */
    box-sizing: border-box;
}

/* 「画像回り込み用クラス」を持っている時だけ、幅を画像に合わせる */
blockquote.inyou:has(.wrap-left),
blockquote.inyou:has(.wrap-right) {
    display: block !important;          /* ← table → block に変更。これが重要 */
    width: auto !important;
    clear: none !important;
    padding: 10px;
}

/* 回り込み時の「枠の外」の余白設定 */
blockquote.inyou:has(.wrap-left) {
    float: left;
    margin: 0.5em 1.8em 1.5em 0 !important;
}
blockquote.inyou:has(.wrap-right) {
    float: right;
    margin: 0.5em 0 1.5em 1.8em !important;
}


/* 内部の余白・float解除 */
blockquote.inyou figure.wrap-left,
blockquote.inyou figure.wrap-right { margin: 0 !important; float: none !important; clear: none !important; }
blockquote.inyou figure img { margin: 0; display: block; }

/* --- 4. side-by-side (すべて維持) --- */
.side-by-side { display: flex !important; flex-wrap: wrap !important; flex-direction: row !important; justify-content: center; gap: 24px; clear: both !important; }
.side-by-side .m-box { float: none !important; clear: none !important; margin: 0 !important; flex: 1 1 200px; }
.side-by-side .m-box.size-s { flex: 0 0 300px; max-width: 300px; }
.side-by-side .m-box.size-m { flex: 0 0 450px; max-width: 450px; }
.side-by-side .m-box.size-l { flex: 0 0 600px; max-width: 600px; }
.side-by-side .m-box img, .side-by-side .m-box iframe, .side-by-side .m-box .inyou, .side-by-side .m-box .txt, .side-by-side .m-box .twitter-tweet { width: 100% !important; max-width: 100% !important; min-width: 100% !important; clear: none !important; box-sizing: border-box; }
.side-by-side .m-box iframe { aspect-ratio: 16 / 9; height: auto !important; }

/* --- 5. モバイル・その他装飾 (すべて維持) --- */
@media screen and (max-width: 767px) {
    .m-box.wrap-left, .m-box.wrap-right, blockquote.inyou:has(.wrap-left), blockquote.inyou:has(.wrap-right) { float: none !important; clear: both !important; width: 100% !important; display: block !important; }
    .m-box.size-s, .m-box.size-m, .m-box.size-l { max-width: 100%; }
}

.tweet, .twitter-tweet { overflow: hidden; background: var(--c-back); }
.tweet iframe, .twitter-tweet iframe { display: block; }

/* ========================================
   figcaption / cite / blockquote footer / .inyou footer

   【設計メモ】
   意味的に補足情報であり、text-sm相当（font-size: 0.85em /
   color: --c-gray / line-height: 1.6）を適用。
   HTMLにclass="text-sm"を書かなくて済むよう、
   下部の「text-sm相当」ブロックで要素セレクタに直接設定。

   本来の記述：
     <figcaption class="text-sm">...</figcaption>
     <cite class="text-sm">...</cite>

   text-smを変更する場合は下部のブロックも合わせて変更すること。
   ======================================== */

/* 構造（それぞれ固有） */
figcaption, cite {
    display: block;
    padding: 8px 15px;
    margin-top: 10px;
    box-sizing: border-box;
}
cite {
    text-align: right;
    font-style: italic;
}
figcaption {
    text-align: left;
    font-style: normal;
    background-color: var(--c-bg-sft);
}
.inyou figcaption { background-color: transparent !important; }

/* text-sm相当（HTML側のclass付与を省略するため要素セレクタで設定） */
figcaption,
cite,
blockquote footer,
.inyou footer {
    font-size: 0.85em;    /* = text-sm */
    color: var(--c-gray); /* = text-sm */
    line-height: 1.6;     /* = text-sm */
}

.comment {
  font-size: 1em;
  line-height: var(--lh-body);
  text-align: left !important;
  padding: 0.8em 1em;
  border-top: none !important;
  color: var(--c-front);
  background-color: var(--c-bg-sft);
  border-left: 2px solid var(--c-bg-str);
  border-right: none;
}
.inyou + .comment { margin-top: 1px !important; padding-top: 1.8em !important; }

.twitter-embed, .twitter-embed *, .tweet, .tweet *, .twitter-tweet, .twitter-tweet *, .tweet-rendered, .tweet-rendered *, .css-901oao, .r-1qd0xha, .r-16dba41 { font-family: "Shippori Mincho", "ヒラギノ明朝 ProN W3", "HiraMinProN-W3", "Yu Mincho", "YuMincho", serif !important; font-weight: var(--fw-body) !important; }

.txt { padding: 20px; border: 1.5px solid var(--c-front); font-size: 1em; line-height: var(--lh-body); text-align: left; }

/* blockquote footer / .inyou footer の構造（text-sm相当はfigcaptionブロックで設定） */
blockquote footer, .inyou footer, .txt footer { text-align: right; margin-top: 10px; padding: 0 15px 0 0; }
.m-box figcaption, figure figcaption, .inyou, .comment, .text { margin: 0 !important; }
 figure + *, .m-box + *, *+.m-box, figure + figure, *+figure, *+.inyou, .inyou+.inyou, .inyou+ * { margin-top: 1em !important;  margin-bottom: 1em !important; }


main svg {
  width: 1em;
  height: 1em;
  vertical-align: middle;
  margin:0; /* 0 0.2em;*/
}
main svg.icon-search, main svg.icon-menu, main svg.icon-moon, main svg.icon-sun
main svg.icon-layout-1col, main svg.icon-layout-2col {
  width: 1.2em;
  height: 1.2em;
}


/* article.list-box: flow-rootを継承（blockに上書きしない） */

/* exp マーカー：インライン・非表示・カーソル・余白なし */
span.exp-marker {
    display: inline;
    font-size: 0;
    line-height: 0;
    width: 0;
    height: 0;
    overflow: hidden;
    position: absolute;
}
/* list-boxはクリック可能な見た目に */
article.list-box:has(.expand-content) {
    cursor: pointer;
    user-select: none;
}

/* --- Read more（折りたたみ表示） --- */

article.list-box .expand-content {
    max-height: 0;
    overflow: hidden;
    padding: 0;
    margin: 0;
    opacity: 0;
    transition: max-height 0.45s ease, opacity 0.3s ease;
}

article.list-box .expand-content.is-open {
    padding: 1em 0 0.5em;
    margin-bottom: 0.5em;
    opacity: 1;
    transition: max-height 0.45s ease, opacity 0.3s ease 0.05s;
}

article.list .expand-content {
    max-height: none;
}


/* ── .expand-toggle ─────────────────────────
   【設計メモ】
   機能クラス。ui.jsが直接参照・生成するためクラス名変更不可。
   ui.jsが class="expand-toggle text-sm" を付与するため
   文字スタイル（font-size / color）はtext-smが担当。
   hover時のみcolorを上書き（opacity廃止）。

   本来の記述：
     <p class="expand-toggle text-sm">▼ 続きを読む</p>
   ─────────────────────────────────────── */
.expand-toggle {
    display: block;
    text-align: left;
    cursor: pointer;
    user-select: none;
    padding: 0.2em 0;
    margin: 0;
    transition: color 0.2s;
}
.expand-toggle:hover { color: var(--c-front); }

/* 内部折りたたみ方式：個別toggle はbox内末尾に置き、margin-bottomの空白に浮かせる */
article.list-box > .expand-toggle {
    position: relative;
    top: 10px; /* list-boxのpadding-bottom(15px)の中に収める */
    margin-bottom: -0.2em;
}
.expand-all-btn {
    margin-bottom: 0.4em;
}

/* box高さ制限方式：box外のtoggle（box直後）*/
article.list-box.is-height-limited + .expand-toggle {
    margin-top: -12px; /* boxのmargin-bottomに食い込ませる */
    margin-bottom: 8px;
}

/* box高さ制限方式：box本体 */
article.list-box.is-height-limited {
    display: flow-root;  /* ← 追加 */
    overflow: hidden;
    transition: max-height 0.45s ease;
    -webkit-mask-image: linear-gradient(to bottom, black 55%, transparent 100%);
    mask-image:         linear-gradient(to bottom, black 55%, transparent 100%);
}
article.list-box.is-height-limited.is-expanded {
    -webkit-mask-image: none;
    mask-image:         none;
}


/* ===============================================
   サイト内検索（カスタム検索UI）
================================================== */

/* --- 検索ボックスコンテナ (GCS検索窓をラップするカスタム要素) --- */
/* --- 検索ボックスコンテナ (GCS検索窓をラップするカスタム要素) --- */
.search-container {
    position: relative;
    display: contents; /* flexの子として透明化し、search-btnを直接flex子要素として扱う */
}
#search-box {
    display: none;
    position: fixed;
    top: 80px;
    left: 10px;
    right: 10px;
    width: calc(100% - 20px);
    max-width: none; /* モバイル対応を維持 */
    background-color: var(--c-back);
    border: 1px solid var(--c-front);
    /* box-shadow 削除：枠線で十分 */
    padding: 10px;
    z-index: 90;
    box-sizing: border-box;
}
#search-box.is-active { display: block; }
#search-box p { margin-top: 5px !important; }

/* ダークモードでの検索ボックスの背景と枠線調整 */
body.dark-mode #search-box { 
    background-color: var(--c-back); 
    border-color: var(--c-front); 
}

@media screen and (min-width: 744px) {
    .size-btns span { font-size: 14px; }
    body.side-toc-layout .site-settings { flex-direction: row; }
    body.side-toc-layout #layout-sw { order: 1; }
    #layout-sw { border: 0.5px solid var(--c-front); }

    /* --- タブレット フォントサイズ切り替え --- */
    body                   { font-size: var(--fs-tablet-std); }
    body.font-size-large       { font-size: var(--fs-tablet-lg); }
    body.font-size-extra-large { font-size: var(--fs-tablet-xl); }
}




/* --- ▼▼▼ PC (1025px以上) ▼▼▼ --- */
@media screen and (min-width: 1025px) {
    /* --- 基本設定 --- */
    body                       { font-size: var(--fs-pc-std); }
    body.font-size-large       { font-size: var(--fs-pc-lg); }
    body.font-size-extra-large { font-size: var(--fs-pc-xl); }

    /* --- ヘッダー --- */
    .site-settings { right: 20px; }
    .size-btns span { font-size: 16px; }
    #menu-btn { display: none !important; }

    /* 1カラム固定ページ（has-hero含むすべての onecol-fixed ページ）は
       PC幅でもハンバーガーボタンを表示する。
       1カラム時は #sub が本文の下にあるためメニューへのアクセス手段を確保するため。
       hero-layout-enabled（メンテ用2カラム時）は通常通り非表示。 */
    body.has-hero:not(.hero-layout-enabled) #menu-btn,
    body.onecol-fixed #menu-btn {
        display: flex !important;
    }

    /* --- レイアウト --- */
    #contents { padding: 20px 3%; }
    /* ★変更：744px側と同様に :not(.has-hero) → :not(.onecol-fixed):not(.hero-layout-enabled) */
    body.side-toc-layout:not(.onecol-fixed):not(.hero-layout-enabled) #contents {
        /* height は header.js が動的更新。CSSはフォールバック */
        height: calc(100vh - var(--header-total-h));
    }
    body.side-toc-layout:not(.onecol-fixed):not(.hero-layout-enabled) #contents-inner {
        /* 744px側のflexプロパティを継承、幅調整のみここで上書き */
    }
    body.side-toc-layout:not(.onecol-fixed):not(.hero-layout-enabled) main { width: 72%; }
    body.side-toc-layout:not(.onecol-fixed):not(.hero-layout-enabled) #sub  { width: 24%; }
    /* has-hero 2カラム設定【hero-layout-enabled時のみ有効】 */
    body.hero-layout-enabled.side-toc-layout.has-hero main { width: 72%; padding-right: 2%; }
    body.hero-layout-enabled.side-toc-layout.has-hero #sub  { width: 24%; margin-top: 0; }
    /* has-hero かつ 2カラム有効ページ（404・410）の幅調整【744px側のflexを継承】 */
    body.side-toc-layout.has-hero:not(.hero-layout-enabled):not(.onecol-fixed) main { width: 72%; }
    body.side-toc-layout.has-hero:not(.hero-layout-enabled):not(.onecol-fixed) #sub  { width: 24%; }
    body:not(.side-toc-layout) main {
        width: 100%;
        max-width: min(var(--w-text-1col-em), var(--w-text-1col-px)); /* 46em / 830px */
        margin-left: auto;
        margin-right: auto;
        padding-right: 0;
    }
    body:not(.side-toc-layout) #sub {
        width: 100%;
        max-width: min(var(--w-text-1col-em), var(--w-text-1col-px)); /* 46em / 830px */
        margin-left: auto;
        margin-right: auto;
        margin-top: 20px;
    }

    /* --- サイドバー文字サイズ ---
       font-sizeは#subのclampで制御するためここでの個別指定は不要。
       paddingのみ維持する。 */
    #sub nav.box ul.submenu li a.site-title { padding: 15px 12px; }

}


/* ============================================================
   ━━ has-hero 強制1カラム時の幅制限 ━━
   index.php（has-hero）では header.php の JS により
   side-toc-layout クラスが付与されないため、
   通常1カラムと同じ max-width を明示的に適用する。
   （通常1カラムの幅制限は body:not(.side-toc-layout) で効くが、
   has-hero 時は #container の padding-top:0 など別ルールが重なるため
   念のり専用ルールで補強する）
============================================================ */
@media screen and (min-width: 768px) {
  body.has-hero:not(.side-toc-layout) main,
  body.has-hero:not(.side-toc-layout) #sub {
    max-width: min(var(--w-text-1col-em), var(--w-text-1col-px));
    width: 100%;
    margin-left: auto;
    margin-right: auto;
  }
}

/* ============================================================
   ━━ フォント設計拡張ブロック ━━
   このブロックは独立しており、他のルールに影響しません。
   管理・調整はここを中心に行ってください。
============================================================ */

/* ──────────────────────────────────────────
   1. BIZ UDGothic 用変数上書き（管理者専用）
   body.font-bizud クラスは ?admin=font で切り替え
   BIZ UDGothic 利用可能ウェイト: 400 / 700 のみ
────────────────────────────────────────── */
body.font-bizud {
  --font-stack: "BIZ UDGothic", "Hiragino Sans", "Yu Gothic", sans-serif;
  --fw-body:    400;
  --fw-ui:      400;
  --fw-h4:      400;
  --fw-h3:      700;   /* 500がないため700に切り上げ */
  --fw-h2:      700;
  --fw-h1:      700;
  --fw-strong:  700;
  --fw-midashi: 700;
  --ls-body:    0.05em;  /* ゴシックは字間を少し広く */
  --lh-body:    1.85;    /* ゴシックは行間を少し詰める */
  --ls-heading: 0.06em;
}

/* ──────────────────────────────────────────
   2. 1カラム時の本文幅制限
   モバイル（メディアクエリによる強制1カラム）と
   タブレット以上でユーザーが1カラムを選んだ場合の両方に対応
────────────────────────────────────────── */

/* モバイル（〜767px）は常に1カラム → main・sub両方に幅制限を適用 */
@media screen and (max-width: 767px) {
  main,
  #sub {
    max-width: min(var(--w-text-1col-em), var(--w-text-1col-px));
    width: 100%;
    margin-left: auto;
    margin-right: auto;
  }
}

/* タブレット以上でside-toc-layout（2カラム）でない場合 → main・sub両方に幅制限を適用
   ※デフォルト状態（クラスなし）も1カラムなので含まれる */
@media screen and (min-width: 768px) {
  body:not(.side-toc-layout) main,
  body:not(.side-toc-layout) #sub {
    max-width: min(var(--w-text-1col-em), var(--w-text-1col-px));
    width: 100%;
    margin-left: auto;
    margin-right: auto;
  }
}

/* ──────────────────────────────────────────
   3. 管理者専用フォント切り替えボタン
   通常は非表示。body.admin-mode のときのみ表示。
   既存のボタンデザイン（btn btn-s btn-solid）に準拠。
────────────────────────────────────────── */
#admin-font-sw {
  display: none;  /* デフォルト非表示 */
}
body.admin-mode #admin-font-sw {
  display: inline-flex;  /* 管理者モード時のみ表示 */
}

/* G・明 はspanテキストで表示。bodyのフォント継承を明示的に遮断 */
#admin-font-sw .icon-font-gothic,
#admin-font-sw .icon-font-mincho {
  font-size: 16px;
  line-height: 1;
  letter-spacing: 0;
  color: inherit;   /* btn-solid の color: var(--c-back) を継承 */
}
#admin-font-sw .icon-font-gothic {
  display: block;
  font-family: "BIZ UDGothic", sans-serif;
  font-weight: 400;
}
#admin-font-sw .icon-font-mincho {
  display: none;
  font-family: "Shippori Mincho", serif;
  font-weight: 500;
}
body.font-bizud #admin-font-sw .icon-font-gothic { display: none;  }
body.font-bizud #admin-font-sw .icon-font-mincho { display: block; }


/* ============================================================
   TOCフェッチ展開エンジン用スタイル
   （has-toc-fetch リンク・fetched-toc-list・トグル構造）
   ============================================================ */

/* ── ① has-toc-fetch リンク：▶/▼インジケーター ── */
a.has-toc-fetch {
    position: relative;
    padding-right: 28px !important;
}

a.has-toc-fetch::after {
    content: '';
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 6px solid currentColor;
    opacity: 0.6;
    transition: transform 0.2s;
    /* 初期状態：▶（右向き） */
    transform: translateY(-50%) rotate(-90deg);
}

a.has-toc-fetch.toc-fetch-open::after,
a.has-toc-fetch.is-current-toc.toc-fetch-open::after {
    transform: translateY(-50%) rotate(0deg); /* ▼ */
    opacity: 1;
}

/* ローディング中：点滅 */
a.has-toc-fetch.toc-fetch-loading::after {
    animation: toc-blink 0.6s ease-in-out infinite;
}
@keyframes toc-blink {
    0%, 100% { opacity: 0.2; }
    50%       { opacity: 0.9; }
}

/* ── ② fetched-toc-list（モバイル）── */
ul.fetched-toc-list.m-toc-list {
    list-style: none;
    margin: 0;
    padding: 0;
    width: 100%;
    background: var(--mm-bg-deep, rgba(0,0,0,0.18));
}

ul.fetched-toc-list.m-toc-list li {
    border-bottom: 1px solid var(--mm-border);
}

#m-menu ul.fetched-toc-list.m-toc-list li a {
    display: block;
    padding: 10px 8px 10px 30px;
    font-size: 14px;
    font-weight: var(--fw-ui);
    color: var(--mm-text);
    text-decoration: none;
    line-height: 1.4;
    word-break: break-all;
    transition: color 0.2s, background 0.2s;
}

#m-menu ul.fetched-toc-list.m-toc-list li a:hover {
    background: var(--mm-bg-sft);
    color: var(--mm-text-hov);
}

/* h階層フォントサイズ */
#m-menu ul.fetched-toc-list.m-toc-list li a.toc-h1 { font-size: 14px; font-weight: 600; }
#m-menu ul.fetched-toc-list.m-toc-list li a.toc-h2 { font-size: 14px; font-weight: 500; }
#m-menu ul.fetched-toc-list.m-toc-list li a.toc-h3 { font-size: 12px; padding-left: 44px; }
#m-menu ul.fetched-toc-list.m-toc-list li a.toc-h4 { font-size: 11px; padding-left: 56px; opacity: 0.85; }
#m-menu ul.fetched-toc-list.m-toc-list li a.toc-h5 { font-size: 11px; padding-left: 66px; opacity: 0.75; }
#m-menu ul.fetched-toc-list.m-toc-list li a.toc-h6 { font-size: 11px; padding-left: 74px; opacity: 0.65; }

/* toc-group-item（トグル親）*/
ul.fetched-toc-list.m-toc-list li.toc-group-item > a {
    font-weight: 600;
}

ul.fetched-toc-list.m-toc-list li.toc-group-item > ul.toc-group-children {
    display: none;
    list-style: none;
    margin: 0;
    padding: 0;
    background: var(--mm-bg-deep, rgba(0,0,0,0.12));
}

ul.fetched-toc-list.m-toc-list li.toc-group-item.toc-group-open > ul.toc-group-children {
    display: block;
}

ul.fetched-toc-list.m-toc-list li.toc-group-item > a::after {
    content: ' ▶';
    font-size: 0.7em;
    opacity: 0.6;
    transition: transform 0.2s;
    display: inline-block;
}

ul.fetched-toc-list.m-toc-list li.toc-group-item.toc-group-open > a::after {
    content: ' ▼';
}

/* ミラーリンク（子ul先頭）*/
ul.fetched-toc-list.m-toc-list ul.toc-group-children li a[data-toc-mirror] {
    font-weight: 500;
    border-bottom: 1px solid var(--mm-border);
    padding-left: 30px;
}

/* ── モバイル fetched-toc 章立て行：灰色小文字（nav-chapter-linkに合わせる） ── */
#m-menu ul.fetched-toc-list.m-toc-list li a.toc-chapter {
    font-size: 0.85em !important;
    color: var(--c-gray) !important;
    opacity: 1;
}


/* toc-active ハイライト（モバイル）*/
/* ★ border-left を外す：PCのtoc-activeと統一（網掛けのみ、金棒なし） */
#m-menu ul.fetched-toc-list.m-toc-list li a.toc-active {
    background: var(--mm-bg-str, rgba(255,255,255,0.12)) !important;
    color: var(--mm-text-hov);
    border-left: none;
    outline: none;
}

/* 章立て行（toc-chapter）がアクティブのとき（モバイル）：網掛け・金線なし */
#m-menu ul.fetched-toc-list.m-toc-list li a.toc-chapter.toc-active {
    background: transparent !important;
    border-left: none;
    color: var(--mm-text-hov);
}

/* ── フォーカスリング排除（nav全体） ──────────────────────────
   #m-menu・#sub内のリンク・ボタンはクリック操作主体のためoutlineを非表示にする。
   キーボードアクセシビリティが必要な場合は :focus-visible のみ残すこと。
───────────────────────────────────────────────────────────── */
#m-menu a:focus,
#m-menu a:focus-visible,
#m-menu button:focus,
#m-menu button:focus-visible,
#sub a:focus,
#sub a:focus-visible,
#sub button:focus,
#sub button:focus-visible {
    outline: none;
    box-shadow: none;
}

/* ── テキスト選択可能化（nav全体） ──────────────────────────
   デフォルトでnavのテキストが選択不可になっているケースへの対処。
   コピペ・参照用途のため選択可能にする。
───────────────────────────────────────────────────────────── */
#m-menu,
#sub {
    -webkit-user-select: text;
    user-select: text;
}

/* ── 章立てラベル（nav-chapter-link：PHPで出力する静的な章立て行）── */
.nav-chapter-link {
    font-size: 0.85em;
    color: var(--c-gray);
}
/* #sub内ではより詳細度の高いセレクタ（#sub ul.submenu li a:not(.site-title)）が
   color: var(--c-front)を適用するため、それに勝つ詳細度で上書きする */
#sub .nav-chapter-link,
#m-menu .nav-chapter-link {
    color: var(--c-gray) !important;
    font-size: 0.85em;
}
#m-menu .nav-chapter-link {
    display: block;
    padding: 10px 8px 10px 30px !important;
    line-height: 1.4;
}

/* 目次なし表示 */
ul.fetched-toc-list .toc-empty {
    padding: 8px 30px;
    font-size: 12px;
    opacity: 0.6;
    font-style: italic;
}

/* ── ③ fetched-toc-list（PCサイドバー）── */
ul.fetched-toc-list.sub-toc-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

ul.fetched-toc-list.sub-toc-list li {
    border-bottom: 1px solid var(--c-border);
}

ul.fetched-toc-list.sub-toc-list li a {
    display: block;
    padding: 0.35em 0.5em 0.35em 0.8em;
    font-size: 0.9em;
    color: var(--c-sub);
    text-decoration: none;
    line-height: 1.5;
    transition: color 0.2s, background 0.2s;
    border-left: 2px solid transparent;
}

ul.fetched-toc-list.sub-toc-list li a:hover {
    color: var(--c-front);
    background: transparent;
}

/* fetched-toc-list内の章立て行：li a の後に置いて確実に上書き */
ul.fetched-toc-list.sub-toc-list li a.toc-chapter {
    font-size: 0.85em;
    color: var(--c-gray) !important;
    border-left: none;
}

ul.fetched-toc-list.sub-toc-list li a.toc-h1 { font-size: 0.95em; font-weight: 600; }
ul.fetched-toc-list.sub-toc-list li a.toc-h2 { font-size: 0.9em; font-weight: 500; }
ul.fetched-toc-list.sub-toc-list li a.toc-h3 { font-size: 0.85em; padding-left: 1.5em; }
ul.fetched-toc-list.sub-toc-list li a.toc-h4 { font-size: 0.82em; padding-left: 2.2em; opacity: 0.85; }
ul.fetched-toc-list.sub-toc-list li a.toc-h5 { font-size: 0.80em; padding-left: 2.8em; opacity: 0.75; }
ul.fetched-toc-list.sub-toc-list li a.toc-h6 { font-size: 0.78em; padding-left: 3.2em; opacity: 0.65; }

/* toc-group（PC）*/
ul.fetched-toc-list.sub-toc-list li.toc-group-item > a::after {
    content: ' ▶';
    font-size: 0.7em;
    opacity: 0.5;
}

ul.fetched-toc-list.sub-toc-list li.toc-group-item.toc-group-open > a::after {
    content: ' ▼';
}

ul.fetched-toc-list.sub-toc-list li.toc-group-item > ul.toc-group-children {
    display: none;
    list-style: none;
    margin: 0;
    padding: 0;
    background: transparent;
}

ul.fetched-toc-list.sub-toc-list li.toc-group-item.toc-group-open > ul.toc-group-children {
    display: block;
}

/* toc-active（PC）：網掛け＋文字色を本文色に */
ul.fetched-toc-list.sub-toc-list li a.toc-active {
    background: var(--c-bg-str) !important;
    border-left: 2px solid transparent;
    color: var(--c-front);
    outline: none;
    box-shadow: none;
}

/* 章立て行（toc-chapter）がアクティブのとき：
   網掛けなし・文字色のみ本文色に（#sub付きで詳細度をgray!importantに勝たせる） */
#sub ul.fetched-toc-list.sub-toc-list li a.toc-chapter.toc-active {
    background: transparent !important;
    color: var(--c-front) !important;
}

/* toc-group-has-active（PC）: 子がアクティブ中は親章立ての文字色を本文色に・網掛けなし */
#sub ul.fetched-toc-list.sub-toc-list li.toc-group-item.toc-group-has-active > a {
    background: transparent !important;
    color: var(--c-front) !important;
}
/* toc-group-open かつ has-active: 網掛けなし・文字色は本文色 */
#sub ul.fetched-toc-list.sub-toc-list li.toc-group-item.toc-group-has-active.toc-group-open > a {
    background: transparent !important;
    color: var(--c-front) !important;
}

/* ミラーリンク（PC）*/
ul.fetched-toc-list.sub-toc-list ul.toc-group-children li a[data-toc-mirror] {
    font-weight: 500;
    border-bottom: 1px solid var(--c-border);
}

/* ── ④ toc-fetched-open の li に余白 ── */
#m-menu li.toc-fetched-open,
#sub li.toc-fetched-open {
    flex-wrap: wrap;
}


/* ================================================================
   折りたたみリセットボタン（▲）
   #sub の h2 右端（PC）と #m-menu ヘッダー右端（モバイル）に
   JS が動的挿入する .collapse-all-btn のスタイル
================================================================ */

/* ── PC：#sub h2 内に配置 ── */
#sub nav.box > h2 {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.collapse-all-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px 2px;
    line-height: 1;
    color: var(--c-gray);
    font-size: 0.75rem;
    flex-shrink: 0;
    opacity: 0.7;
    transition: opacity 0.2s, color 0.2s;
    /* タップ領域を最低44px確保 */
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.collapse-all-btn:hover {
    opacity: 1;
    color: var(--c-front);
}

/* ── モバイル：m-menu-header 内に配置 ── */
#m-menu .collapse-all-btn {
    color: var(--mm-text);
    opacity: 0.6;
    font-size: 0.8rem;
    min-width: 44px;
    min-height: 44px;
    /* ヘッダー行全体タップ（closeMenu）を妨げないよう pointer-events を明示 */
    pointer-events: auto;
}
#m-menu .collapse-all-btn:hover {
    opacity: 1;
    color: var(--mm-text-hov);
}