@charset "UTF-8";
/* =========================================================================
 * SP版 サイト共通ヘッダー 高さ圧縮（AGILE-75）
 *  - 対象：SP版(max-width:767)のみ。PCは影響なし。
 *  - ヘッダー「バーごと」低くする（中身だけ縮めるのではない）。
 *    元：#header 高さ 0.64rem / ハンバーガーは 0.64rem 角（ヘッダー全高と同寸の正方形）。
 *    変更：#header 高さを 0.52rem にし、ハンバーガーも 0.52rem 角の正方形に追従。
 *    ロゴは据え置き(高さ約0.32rem)で、ヘッダーの上下padding を詰めて縦中央を保つ。
 *  - common.css（ビルド済み共有）は未変更。本CSSで上書きする。
 * ========================================================================= */
@media screen and (max-width: 767px) {
    /* ヘッダーバー自体を低くする。body id(#mypage/#front)が付かないページ
       （会員登録フロー等）でも効くよう、id非依存の #header に !important で上書き。
       （common.css 側は #mypage #header 等 id2つで詳細度が高いため） */
    #header {
        height: 0.52rem !important;
    }
    /* ロゴの縦中央化はヘッダー種別で仕組みが違うため、種別ごとに分けて当てる。

       [1] #mypage / #front（マイページ系・トップ）:
           元から .header__inner に padding:0.16rem 0 0.16rem 0.24rem があり、
           これでロゴが縦中央だった。高さ0.64→0.52 に合わせ上下 padding のみ
           0.16→0.10rem((0.52-0.32)/2) に詰める。左 0.24rem はそのまま維持。 */
    #mypage .header__inner,
    #front .header__inner {
        padding-top: 0.1rem !important;
        padding-bottom: 0.1rem !important;
    }

    /* [2] body id が付かないヘッダー（login=header.php 等。.header__inner に padding 指定
           が無く、#header の padding でロゴが上寄せになる）だけ flex で縦中央化する。
           :not(#mypage):not(#front) で [1] の対象を除外し、mypage/front には影響させない。 */
    body:not(#mypage):not(#front) #header .header__inner {
        display: flex !important;
        align-items: center !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }
    /* ハンバーガー：ヘッダー全高と同寸の正方形を維持（元 0.64rem角 → 0.52rem角）。
       top:0;right:0 は元のままなのでヘッダーにぴったり収まる（中央化不要）。 */
    .globalNaviMenu {
        width: 0.52rem;
        height: 0.52rem;
    }
    /* 3本線の横位置を 0.52rem 幅で中央化（元 left:0.23rem は 0.64rem 幅前提）。
       線幅 0.18rem → (0.52-0.18)/2 = 0.17rem */
    .globalNaviMenu__icon::before,
    .globalNaviMenu__icon::after {
        left: 0.17rem;
    }
    /* 閉じ状態の3本線：0.52rem 内で中央対称（間隔 0.14rem・中心 0.26rem） */
    .globalNaviMenu__icon::before { top: 0.18rem; }
    .globalNaviMenu__icon::after { bottom: 0.18rem; }
    /* ×状態（.-menuOpen）：2本を中央 0.26rem に重ねて交差させる */
    .-menuOpen .globalNaviMenu__icon::before { top: 0.25rem; }
    .-menuOpen .globalNaviMenu__icon::after { bottom: 0.25rem; }
}