/* ================================================================
   header.css  新構造版
   上層 #layer-header : スイッチャー（上段）＋ロゴ（下段）を1divに統合
   中層 #layer-message: 将来のメッセージ帯（今は空）
   下層 #layer-nav    : PCナビ
================================================================ */

/* ----------------------------------------------------------------
   0. 高さ変数 ＋ ロゴpaddingの調整変数
   --upper-h  : 上段（スイッチャー行）の高さ
   --logo-h   : ロゴ行の高さ（通常時）
   --logo-h-compact : スクロール後のロゴ行の高さ
   --nav-h    : 下層ナビの高さ

   ★ ロゴ余白の調整はここだけ変えればOK ★
   --logo-pad-top          : モバイル・通常時の上余白
   --logo-pad-bottom       : モバイル・通常時の下余白
   --logo-pad-top-compact  : モバイル・収縮時の上余白
   --logo-pad-bottom-compact : モバイル・収縮時の下余白
   （744px以上・1025px以上も同様の変数セットで独立管理）
---------------------------------------------------------------- */
:root {
    --upper-h:        44px;
    --logo-h:         58px;   /* モバイル通常時 */
    --logo-h-compact: 42px;   /* モバイルスクロール後 */
    --nav-h:          0px;    /* モバイルはナビ非表示 */
    --header-total-h: calc(var(--upper-h) + var(--logo-h));

    /* ━━ ロゴ余白調整変数（モバイル） ━━
       logo-h=58px  通常時：上11+下14=25px余白 → SVG実高33px（行高の57%）
       compact=42px 縮小時：上7 +下10=17px余白 → SVG実高25px（行高の60%） */
    --logo-pad-top:             11px;  /* 通常・上 */
    --logo-pad-bottom:          14px;  /* 通常・下 */
    --logo-pad-top-compact:     7px;   /* 収縮・上 */
    --logo-pad-bottom-compact:  10px;  /* 収縮・下 */
}

@media screen and (min-width: 744px) {
    :root {
        --upper-h:        44px;
        --logo-h:         68px;   /* タブレット通常時 */
        --logo-h-compact: 48px;   /* タブレットスクロール後 */
        --nav-h:          72px;
        --header-total-h: calc(var(--upper-h) + var(--logo-h) + var(--nav-h));

        /* ━━ ロゴ余白調整変数（タブレット 744px以上） ━━
           logo-h=68px  通常時：上13+下17=30px余白 → SVG実高38px（行高の56%）
           compact=48px 縮小時：上9 +下11=20px余白 → SVG実高28px（行高の58%） */
        --logo-pad-top:             13px;  /* 通常・上 */
        --logo-pad-bottom:          17px;  /* 通常・下 */
        --logo-pad-top-compact:     9px;   /* 収縮・上 */
        --logo-pad-bottom-compact:  11px;  /* 収縮・下 */
    }
}

@media screen and (min-width: 1025px) {
    :root {
        --upper-h:        44px;
        --logo-h:         74px;   /* PC通常時 */
        --logo-h-compact: 50px;   /* PCスクロール後 */
        --nav-h:          76px;
        --header-total-h: calc(var(--upper-h) + var(--logo-h) + var(--nav-h));

        /* ━━ ロゴ余白調整変数（PC 1025px以上） ━━
           logo-h=74px  通常時：上15+下19=34px余白 → SVG実高40px（行高の54%）
           compact=50px 縮小時：上10+下13=23px余白 → SVG実高27px（行高の54%） */
        --logo-pad-top:             15px;  /* 通常・上 */
        --logo-pad-bottom:          19px;  /* 通常・下 */
        --logo-pad-top-compact:     10px;  /* 収縮・上 */
        --logo-pad-bottom-compact:  13px;  /* 収縮・下 */
    }
}


/* ----------------------------------------------------------------
   1. 上端ライン・下端ライン
---------------------------------------------------------------- */
#site-top-border,
#site-bottom-border {
    position: fixed;
    left: 0;
    width: 100%;
    background-color: var(--c-sign);
    z-index: 200;
}

/* 上端 */
#site-top-border {
    top: 0;
    height: 3px;
    transition: opacity 0.3s ease;
}
#site-top-border.hidden-during-overlay {
    opacity: 0;
    pointer-events: none;
}
@media screen and (min-width: 768px) {
    #site-top-border { height: 3.5px; }
}

/* 下端（文字付き） */
#site-bottom-border {
    bottom: 0;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
}
#site-bottom-border small {
    color: var(--c-gold);
    font-size: 10px;
    line-height: 1;
}
#site-bottom-border a,
#site-bottom-border a:hover,
#site-bottom-border a:visited,
#site-bottom-border a:active {
    color: var(--c-gold);
    text-decoration: none;
}
@media screen and (min-width: 768px) {
    #site-bottom-border { height: 24px; }
    #site-bottom-border small { font-size: 10.5px; }
}


/* ----------------------------------------------------------------
   2. 上層 #layer-header（スイッチャー＋ロゴ統合）
   下スクロール → .layer-scrolled で上段分だけ上に退場
   ロゴ行は残る
---------------------------------------------------------------- */
#layer-header {
    position: fixed;
    top: 3px; left: 0;
    width: 100%;
    height: calc(var(--upper-h) + var(--logo-h));
    z-index: 130;
    background: var(--c-back);
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    transition: transform 0.5s ease-in-out,
                height 0.5s ease-in-out;
    will-change: transform;
}

/* 上段（スイッチャー行） */
#layer-header .header-upper {
    height: var(--upper-h);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 0 2%;
    box-sizing: border-box;
    flex-shrink: 0;
    overflow: hidden;
}

/* ロゴ行
   ★ height を min-height + padding 構成に変更。
      padding-top / padding-bottom に変数を割り当てることで
      ロゴ行の高さを変えずに余白だけ自由に調整できる。
      box-sizing: border-box のため、padding込みで --logo-h ちょうどに収まる。 */
#layer-header .header-logo {
    height: var(--logo-h);
    display: flex;
    align-items: stretch;   /* ★ center → stretch に変更（子のheight:100%を有効にするため） */
    padding-top:    var(--logo-pad-top);
    padding-bottom: var(--logo-pad-bottom);
    padding-left: 2%;
    padding-right: 2%;
    box-sizing: border-box;
    flex-shrink: 0;
    transition: height    0.5s ease-in-out,
                padding   0.5s ease-in-out;
    overflow: visible;      /* ★ paddingが height に抑え込まれないよう明示 */
}

/* スクロール時：高さ縮小 + 収縮用paddingに切り替わる */
#layer-header.layer-scrolled {
    transform: translateY(calc(-1 * var(--upper-h)));
    height: calc(var(--upper-h) + var(--logo-h-compact));
}
#layer-header.layer-scrolled .header-logo {
    height: var(--logo-h-compact);
    padding-top:    var(--logo-pad-top-compact);
    padding-bottom: var(--logo-pad-bottom-compact);
}

/* フロントオーバーレイ表示中 */
#layer-header.hide-header-for-overlay {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}
#layer-header.header-fade-in {
    animation: headerFadeIn 0.6s ease forwards;
}
#layer-header.header-fade-in.fast-transition {
    animation-duration: 0.3s;
}


/* ----------------------------------------------------------------
   3. 中層 #layer-message（将来用・今は非表示）
---------------------------------------------------------------- */
#layer-message {
    display: none;
}


/* ----------------------------------------------------------------
   4. 下層 #layer-nav（PCナビ）
   通常時: top = 3px + upper-h + logo-h
   スクロール後: top = 3px + logo-h-compact（上段退場分詰まる）
   モバイル: 非表示
---------------------------------------------------------------- */
#layer-nav {
    position: fixed;
    top: calc(3px + var(--upper-h) + var(--logo-h));
    left: 0;
    width: 100%;
    height: var(--nav-h);
    z-index: 115;
    overflow: hidden;
    background: var(--c-blue);
    transition: top 0.5s ease-in-out,
                transform 0.5s ease-in-out,
                opacity 0.5s ease-in-out;
    will-change: transform, top;
}

/* 下スクロール時：ナビも退場 */
#layer-nav.layer-hidden {
    transform: translateY(-100%);
    opacity: 0;
    pointer-events: none;
}

/* フロントオーバーレイ表示中 */
#layer-nav.hide-header-for-overlay {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

/* PCナビ本体 */
#pc-menu {
    display: none;
    width: 100%;
    height: 100%;
    background: var(--c-blue);
    border-top: 2px solid var(--c-gold);
    box-sizing: border-box;
}

@media screen and (min-width: 744px) {
    #pc-menu {
        display: flex;
        align-items: stretch;
    }
    #pc-menu ul {
        display: flex;
        justify-content: center;
        width: 100%;
        margin: 0 auto;
        padding: 0;
        list-style: none;
    }
    #pc-menu li {
        flex: 1 1 0;
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;  /* current::after の基準点 */
        transition: background-color 0.3s ease;
    }
    #pc-menu li:hover,
    #pc-menu li.current {
        background: var(--c-blue-hov) !important;
    }
    #pc-menu li:active { background: transparent !important; }
    #pc-menu li a {
        font-family: var(--font-stack);
        font-weight: var(--fw-ui-menu);
        color: var(--c-gold);
        text-decoration: none;
        font-size: 11.5px;
        padding: 6px 4px;
        line-height: 1.2;
        transition: color 0.3s ease;
        display: block;
        width: 100%;
    }
    #pc-menu li.current::after {
        content: '';
        position: absolute;
        bottom: 4px;  /* aのpadding-bottom(6px)内に収まり文字と重ならない */
        left: 50%;
        transform: translateX(-50%);
        width: 50%; height: 2px;
        background: var(--c-gold);
    }
    #pc-menu li a span.site-title    { font-size: 13px; display: block; }
    #pc-menu li a span.menu-subtitle { font-size: 10px; display: block; }
    #pc-menu li a:hover,
    #pc-menu li.current a,
    #pc-menu li a:hover span,
    #pc-menu li.current a span {
        color: var(--c-lgold);
        background-color: transparent !important;
    }
}
@media screen and (min-width: 1025px) {
    #pc-menu li a                    { font-size: 12px;  padding: 6px 6px; }
    #pc-menu li a span.site-title    { font-size: 14.5px; }
    #pc-menu li a span.menu-subtitle { font-size: 10.5px; }
}


/* ----------------------------------------------------------------
   5. ロゴ
   ★ .site-logo-svg の高さ管理を一新
      - height: 100%  → .header-logo の padding 込みの内側全体を使う
      - max-height は不要（paddingが余白として機能するため）
      - padding は .header-logo 側で完結させ、SVG側には設定しない
      - transition は .header-logo 側の height/padding の変化に追従する
---------------------------------------------------------------- */
#logo {
    display: flex;
    align-items: center;
    height: 100%;
}
#logo a {
    display: flex;
    align-items: center;
    text-decoration: none;
    line-height: 0;
    height: 100%;
}

.site-logo-svg {
    display: block;
    color: var(--c-sign);
    /* ★ height: 100% で .header-logo の padding 内側の高さにフィット */
    height: 100%;
    width: auto;
    max-width: 320px;
    margin: 0;
    padding: 0;   /* ★ SVG自身のpaddingは0。余白は親の .header-logo で管理 */
    box-sizing: content-box;
    /* .header-logo の height / padding が変化するので SVG は追従するだけ */
    transition: color 0.3s ease;
}

.site-logo-dark  { display: none;  }
.site-logo-light { display: block; }
body.dark-mode .site-logo-light { display: none;  }
body.dark-mode .site-logo-dark  { display: block; }


/* ----------------------------------------------------------------
   6. スイッチャーUI（上段内部）
---------------------------------------------------------------- */
.site-settings {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: nowrap;
    width: 100%;
    justify-content: flex-end;
}
.size-btns {
    display: flex;
    align-items: center;
    gap: 4px;
    flex: 0 0 auto;
    line-height: 1;
}
#menu-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: center;
    width: 42px;
    height: 42px;
    order: 2;
}
@media screen and (min-width: 1025px) {
    #menu-btn { display: none !important; }

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


/* ----------------------------------------------------------------
   7. コンテンツトップ余白
---------------------------------------------------------------- */
#container {
    padding-top: var(--header-total-h);
}


/* ----------------------------------------------------------------
   7b. フロントオーバーレイ表示前の早期非表示
   html.overlay-pending のとき、ヘッダー・Navを先行で非表示（一瞬サイトが見えるフラッシュ防止）
---------------------------------------------------------------- */
html.overlay-pending #layer-header,
html.overlay-pending #layer-nav {
    opacity: 0;
    pointer-events: none;
}


/* ----------------------------------------------------------------
   8. フロントオーバーレイアニメーション
---------------------------------------------------------------- */
@keyframes headerFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}


/* ----------------------------------------------------------------
   9. モバイルメニュー内 追加セクション（ご連絡・QRコード）
   nav.php の「ご連絡」「QRコード」ブロックに準じたデザイン
---------------------------------------------------------------- */
#m-menu .m-menu-section {
    border-top: 1px solid var(--mm-border, rgba(255,255,255,0.12));
    padding: 16px 0 8px;
}

#m-menu .m-menu-section h2 {
    font-size: 11px;
    font-weight: var(--fw-ui, 500);
    color: var(--mm-text, #c8a96e);
    letter-spacing: 0.12em;
    padding: 0 16px 8px;
    margin: 0;
    opacity: 0.7;
    text-align: center;
}

#m-menu .m-menu-section ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

#m-menu .m-menu-section ul li {
    border-bottom: 1px solid var(--mm-border, rgba(255,255,255,0.07));
}

#m-menu .m-menu-section ul li:last-child {
    border-bottom: none;
}

#m-menu .m-menu-section ul li a {
    display: block;
    padding: 14px 10px;
    text-align: center;
    color: var(--mm-text, #c8a96e);
    text-decoration: none;
    font-size: 14px;
    font-weight: var(--fw-ui-menu, 500);
    transition: color 0.3s ease;
}

#m-menu .m-menu-section ul li a:hover {
    color: var(--mm-text-hov, #fff);
}

#m-menu .m-menu-section ul li a span.site-title {
    font-size: 16px;
    font-weight: var(--fw-ui, 500);
    display: block;
}

/* QRコード */
#m-menu .m-menu-qr {
    padding-bottom: 24px;
}

#m-menu .m-menu-qr-inner {
    display: flex;
    justify-content: center;
    padding: 8px 0;
}

#m-menu .m-menu-qr-inner a {
    display: inline-block;
    line-height: 0;
}

#m-menu .m-menu-qr-inner .site-qr {
    color: var(--mm-text, #c8a96e);
    width: 120px;
    height: 120px;
    max-width: 140px;
}

/* ================================================================
   モバイルTOC（#m-toc）
   ui.js が #m-menu 内に動的に挿入する nav#m-toc のスタイル
   既存の #m-menu .m-menu-section を継承しつつ
   折りたたみ・インデントを追加定義する

   構造（JS生成）：
     <nav id="m-toc" class="m-menu-section m-toc-section">
       <div class="m-toc-heading">記憶を辿る</div>
       <ul class="m-toc-list">
         <li class="toc-level-2 [m-toc-has-children]">
           <a href="#i-..." class="page-title toc-h2">...</a>
           <button class="m-toc-toggle"><span class="toggle-arrow"></span></button>
           <ul class="m-toc-children">   ← 子がある場合のみ生成
             <li class="toc-level-3"><a class="page-title toc-h3">...</a></li>
           </ul>
         </li>
       </ul>
     </nav>
================================================================ */

/* ── セクション全体 ── */
#m-toc {
    border-top: 1px solid var(--mm-border);
    padding: 12px 0 8px;
}

/* ── 見出し ── */
#m-toc .m-toc-heading {
    font-size: 11px;
    font-weight: var(--fw-ui, 500);
    color: var(--mm-text);
    letter-spacing: 0.12em;
    padding: 0 16px 8px;
    margin: 0;
    opacity: 0.7;
    text-align: center;
}

/* ── リスト共通 ── */
#m-toc .m-toc-list,
#m-toc .m-toc-children {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* ── li共通 ── */
#m-toc li {
    position: relative;
    border-bottom: 1px solid var(--mm-border);
}
#m-toc li:last-child {
    border-bottom: none;
}

/* ── リンク共通 ── */
#m-toc li a {
    display: block;
    padding: 11px 48px 11px 16px; /* 右48px：トグルボタン幅 */
    color: var(--mm-text);
    text-decoration: none;
    font-size: 14px;
    font-weight: var(--fw-ui-menu, 500);
    line-height: 1.35;
    transition: color 0.2s, background 0.2s;
}
#m-toc li a:hover {
    color: var(--mm-text-hov);
    background: var(--mm-bg-sft);
}

/* ── ハイライト（スクロール連動） ── */
#m-toc li a.toc-active {
    color: var(--mm-text-hov);
    background: var(--mm-bg-str);
    border-left: 2px solid var(--mm-bar);
}

/* ── フォント階層（aに付与されるtoc-h{N}クラス） ── */
#m-toc li a.toc-h1 { font-size: 15px; font-weight: 600; }
#m-toc li a.toc-h2 { font-size: 14px; font-weight: 500; }
#m-toc li a.toc-h3 { font-size: 13px; }
#m-toc li a.toc-h4 { font-size: 12px; opacity: 0.85; }
#m-toc li a.toc-h5 { font-size: 11px; opacity: 0.75; }
#m-toc li a.toc-h6 { font-size: 11px; opacity: 0.65; }

/* ── インデント（liに付与されるtoc-level-{N}クラス） ── */
/* モバイルではpxベース、親項目(level-1/2)は左端揃え */
#m-toc li.toc-level-1 { padding-left: 0; }
#m-toc li.toc-level-2 { padding-left: 0; }
#m-toc li.toc-level-3 { padding-left: 12px; }
#m-toc li.toc-level-4 { padding-left: 24px; }
#m-toc li.toc-level-5 { padding-left: 36px; }
#m-toc li.toc-level-6 { padding-left: 48px; }

/* ── 折りたたみトグルボタン ── */
#m-toc .m-toc-toggle {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    color: var(--mm-text);
    transition: background 0.2s;
}
#m-toc .m-toc-toggle:hover {
    background: var(--mm-bg-sft);
}

/* ── トグル矢印（サイトメニューの .toggle-arrow と同形状） ── */
#m-toc .m-toc-toggle .toggle-arrow {
    display: block;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 5px 0 5px 8px;
    border-color: transparent transparent transparent var(--mm-border);
    transition: transform 0.2s ease;
}
#m-toc .m-toc-has-children.m-toc-open > .m-toc-toggle .toggle-arrow {
    transform: rotate(90deg);
}

/* ── 子リスト（折りたたみ） ── */
#m-toc .m-toc-children {
    display: none;
    border-left: 2px solid var(--mm-border);
    margin-left: 16px;
}
#m-toc .m-toc-has-children.m-toc-open > .m-toc-children {
    display: block;
}