@charset "utf-8";

/* =================================================================
   スマホ・タブレット用メニュー（ハンバーガー）
   2026-10-08 / CEO 指示「ハンバーガーメニューのレスポンシブ対応」・D-169

   ★なぜ要るか★
   1024px 以下では、ヘッダーに 6 つのボタンと営業時間・電話・メールを
   縦に積んでいた。ところがヘッダーの max-height: 120px（style.css）が残っていて
   中身が収まらず、**ヘッダーの下へはみ出して本文に重なっていた**。
   ボタンの文字も 10px で、スマホでは読みにくかった。

   ★作り★
   - 1024px 以下は「ロゴとメニューボタン」だけの 56px の帯にする
   - 6 項目と連絡先はメニューの中へ。日本語の名前を大きく、英語は添え字にする
   - 本文の上の余白を 56px の帯に合わせる（トップは 220〜250px 取っていた）
   - <html class="js">（header.php が描画前に付ける）のときだけ畳む。
     JavaScript が動かないときは、これまでどおりヘッダーに全項目を並べる

   既存の style.css は本番とローカルの中身がずれている（D-133 の型枠）ため、
   触る量を増やさないよう別ファイルにした。
================================================================= */

.nav-toggle {
    display: none;   /* PC と、JS が動かないときは出さない */
}

@media (max-width: 1024px) {
    .js body > header {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        height: 56px;
        max-height: none;
        padding: 0 1.2rem;
    }

    .js .nav-left {
        margin: 0;
    }

    .js .nav-left img {
        display: block;
        max-height: 40px;
        width: auto;
        max-width: 140px;
    }

    /* メニュー本体。帯のすぐ下に、画面の幅いっぱいで開く */
    .js .header-info {
        display: none;
        position: absolute;
        top: 56px;
        left: 0;
        right: 0;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        width: auto;
        max-height: calc(100vh - 56px);
        max-height: calc(100dvh - 56px);
        overflow-y: auto;
        overscroll-behavior: contain;
        padding: 0.8rem 1.6rem 2.4rem;
        background-color: rgb(13, 8, 8);   /* 透けると後ろのトップの大きな文字が重なって読みにくい */
        border-top: 1px solid rgba(255, 255, 255, 0.12);
        box-sizing: border-box;
    }

    .js body > header.is-nav-open .header-info {
        display: flex;
    }

    .js .nav-middle {
        flex-direction: column;
        flex-wrap: nowrap;
        align-items: stretch;
        gap: 0.4rem;
        margin: 0;
    }

    .js .nav-middle div {
        width: auto;
    }

    /* 丸いボタン（文字を重ねて入れ替える作り）を、押しやすい一覧の行にする */
    .js .nav-middle .btntextchange {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        min-height: 56px;
        padding: 0.8rem 1.6rem;
        border-radius: 12px;
        box-sizing: border-box;
    }

    .js .nav-middle .btntextchange span {
        position: static;
        transform: none;
        opacity: 1;
        white-space: normal;
    }

    /* 日本語の名前を主に、英語を添え字に（どちらも 12px 以上） */
    .js .nav-middle .btntextchange span:nth-child(2) {
        order: 1;
        font-size: 1.6rem;
        font-weight: bold;
        color: #f1ebf1;
    }

    .js .nav-middle .btntextchange span:nth-child(1) {
        order: 2;
        font-size: 1.2rem;
        letter-spacing: 0.08em;
        color: #b9b1ba;
    }

    .js .nav-middle .btntextchange:hover span:nth-child(1),
    .js .nav-middle .btntextchange:hover span:nth-child(2) {
        opacity: 1;
    }

    .js .nav-right {
        text-align: left;
        margin-top: 1.6rem;
        padding-top: 1.6rem;
        border-top: 1px solid rgba(255, 255, 255, 0.12);
    }

    .js .nav-right p,
    .js .nav-right .mail {
        font-size: 1.4rem;
        padding: 0.6rem 0;
    }

    /* 電話とメールのリンクを押しやすくする（2026-10-10 / CEO 判断 mediracy-tap-size-20261010・D-189）。
       リンクが文字と同じ高さ（電話 37px・メール 26px）しかなかった。
       行いっぱいの箱にして高さを 44px 以上にし、文字は上下の中央に置く。
       余白はリンクの箱が持つので、中の p の余白は消す */
    .js .nav-right a.email {
        display: flex;
        align-items: center;
        min-height: 44px;
    }

    .js .nav-right a.email p,
    .js .nav-right a.email .mail {
        padding: 0;
        margin: 0;
    }

    /* 帯の高さに合わせて本文を下げる（style.css の 220px / 250px を上書き） */
    .js main {
        margin-top: 56px;
    }

    /* お知らせ一覧などは 14vh + 80px の余白を取っていた（info.css）。帯が 56px になったので詰める */
    .js #archive-main {
        margin-top: 56px;
        padding-top: 40px;
    }

    .js .nav-toggle {
        display: inline-grid;
        place-items: center;
        flex: none;
        width: 44px;
        height: 44px;
        padding: 0;
        border: 1px solid #555;
        border-radius: 12px;
        background: transparent;
        color: #f1ebf1;
        cursor: pointer;
    }

    .js .nav-toggle:hover,
    .js .nav-toggle:focus-visible {
        border-color: #ee18dc;
    }

    .nav-toggle svg {
        width: 22px;
        height: 22px;
    }

    .nav-toggle .icon-close {
        display: none;
    }

    .nav-toggle[aria-expanded="true"] .icon-menu {
        display: none;
    }

    .nav-toggle[aria-expanded="true"] .icon-close {
        display: block;
    }
}