@charset "UTF-8";

/**
 * 独自のハンバーガーボタン（全ページ共通・画面右上に固定）
 * ドロワー（z-index: 100000）より手前に置き、開いている間は「×」で閉じられるようにする
 * ドロワー内のカスタマイズ
 */

.c-drawer,
.c-dropdown {
	background-color: #fff !important;
	color: inherit !important;
}

@media (min-width: 1024px) {
	.c-dropdown .c-dropdown__inner {
		padding: calc(120px + 30px) var(--_padding3);
	}

    #menu-global-nav_sub {
        display: flex;
        gap: 2em;
    }
}

/*
 * ドロワーの開閉の演出
 * 開く：ボタンの位置から白い円が広がる → ロゴ・メニュー・ビル群が順に出現（下の「中身の出現」）
 * 閉じる：中身がすっと消える → 円がボタンへ縮む
 * 円の中心（--mg-drawer-x / -y）と半径（--mg-drawer-r）は menu.js がボタンの位置から計算して上書きする
 * 時間・遅延（--mg-open-duration など）は menu.js の MENU_TIMING で指定する（ここの値は JS が動かないときの予備）
 */
[id=drawer-nav].c-drawer--overall {
    --mg-drawer-x: calc(100% - 48px);
    --mg-drawer-y: 48px;
    --mg-drawer-r: 150vmax;
    --mg-drawer-ease: cubic-bezier(.65, 0, .35, 1);
    --mg-open-duration: .45s;
    --mg-close-duration: .3s;
    --mg-close-delay: .075s;

    display: block;
    padding-top: 0;   /* テーマ標準の 60px を打ち消す */
    opacity: 1;
    visibility: hidden;
    clip-path: circle(0 at var(--mg-drawer-x) var(--mg-drawer-y));
    /*
     * 閉じている間は画面の上の外へずらしておく
     * iOS 26 の Safari は、画面の端に接する固定要素（白い全画面のドロワー）の色をツールバーの部分に広げるため、
     * 見えていなくてもスクロール時に上下が白く塗られ、メニューボタンがその下に隠れて上がって見える
     */
    translate: 0 calc(-100% - 10px);
    transition:
        clip-path var(--mg-close-duration) var(--mg-drawer-ease) var(--mg-close-delay),
        visibility 0s linear calc(var(--mg-close-delay) + var(--mg-close-duration)),
        translate 0s linear calc(var(--mg-close-delay) + var(--mg-close-duration));
}

[id=drawer-nav].c-drawer--overall[aria-hidden="false"] {
    visibility: visible;
    clip-path: circle(var(--mg-drawer-r) at var(--mg-drawer-x) var(--mg-drawer-y));
    translate: none;
    transition:
        clip-path var(--mg-open-duration) var(--mg-drawer-ease),
        visibility 0s,
        translate 0s;
}

/*
 * レイアウト：左上にロゴ → メインナビ → サブナビ、一番下にビル群
 */
[id=drawer-nav].c-drawer--overall .c-drawer__inner {
    --mg-drawer-pad: 26px;   /* 画面の端からの余白（PC） */

    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-height: 100%;
    margin: 0;
    padding: 24px var(--mg-drawer-pad) 0;
}

@media (max-width: 767px) {
    [id=drawer-nav].c-drawer--overall .c-drawer__inner {
        --mg-drawer-pad: 16px;   /* スマホ */
        padding-top: 16px;
    }
}

.mg-drawer-logo {
    display: block;
    width: 280px;
}

.mg-drawer-logo img {
    display: block;
    width: 100%;
    height: auto;
}

@media (max-width: 767px) {
    .mg-drawer-logo {
        width: 128px;
    }
}

/* メインナビ */
[id=drawer-nav] .c-drawer__inner > .c-drawer__menu {
    margin-top: 24px;
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1.4;
}

[id=drawer-nav] .c-drawer__inner > .c-drawer__menu > .c-drawer__item {
    padding-block: var(--mg-hover-lift) 0;   /* 余白は a 側に持たせる（せり上がる枠を a の大きさにするため）。上はホバーで上がる分 */
    margin-top: calc(-1 * var(--mg-hover-lift));
}

[id=drawer-nav] .c-drawer__inner > .c-drawer__menu > .c-drawer__item > a {
    padding-block: 12px;
}

@media (max-width: 767px) {
    [id=drawer-nav] .c-drawer__inner > .c-drawer__menu {
        margin-top: 24px;
        font-size: 24px;
    }

    [id=drawer-nav] .c-drawer__inner > .c-drawer__menu > .c-drawer__item > a {
        padding-block: 8px;
    }
}

/*
 * PC：項目が多いときは列に分ける
 * 上から下へ --mg-menu-rows 個ずつ並べ、あふれたら右の列へ（読む順番は縦のまま）
 * 項目が --mg-menu-rows 個以下なら1列のまま
 * 1列あたりの項目数は、画面（ブラウザの表示領域）の高さに合わせて増やす
 * 目安：メイン1項目 ≒ 63px。ロゴ・サブナビ・ビル群の分を引いた残りに収まる数
 */
@media (min-width: 1024px) {
    [id=drawer-nav] .c-drawer__inner > .c-drawer__menu {
        --mg-menu-rows: 3;   /* 高さ 800px 未満（HD モニターなど） */

        display: grid;
        grid-template-rows: repeat(var(--mg-menu-rows), auto);
        grid-auto-flow: column;
        grid-auto-columns: max-content;
        column-gap: 4em;
    }
}

@media (min-width: 1024px) and (min-height: 800px) {
    [id=drawer-nav] .c-drawer__inner > .c-drawer__menu {
        --mg-menu-rows: 4;
    }
}

@media (min-width: 1024px) and (min-height: 900px) {
    [id=drawer-nav] .c-drawer__inner > .c-drawer__menu {
        --mg-menu-rows: 5;   /* フル HD モニター（表示領域の高さ 900〜1000px 前後） */
    }
}

@media (min-width: 1024px) and (min-height: 1100px) {
    [id=drawer-nav] .c-drawer__inner > .c-drawer__menu {
        --mg-menu-rows: 7;   /* WQHD・4K など */
    }
}

/* サブナビ */
[id=drawer-nav] .c-drawer__sub-nav {
    margin-top: 12px;
    font-size: 0.875rem;
    line-height: 1.6;
}

[id=drawer-nav] .c-drawer__sub-nav .c-drawer__item {
    padding-block: var(--mg-hover-lift) 0;
    margin-top: calc(-1 * var(--mg-hover-lift));
}

[id=drawer-nav] .c-drawer__sub-nav .c-drawer__item > a {
    padding-block: 5px;
}

@media (max-width: 767px) {
    [id=drawer-nav] .c-drawer__sub-nav {
        margin-top: 32px;
        font-size: 14px;
    }
}

/* ビル群（画面の端から端まで） */
.mg-drawer-buildings {
    flex-shrink: 0;
    align-self: stretch;
    margin-top: auto;
    margin-inline: calc(-1 * var(--mg-drawer-pad));
    padding-top: 32px;
}

.mg-drawer-buildings img {
    display: block;
    width: 100%;
    height: auto;
}

/*
 * 中身の出現（参考：union-tec.jp）
 * 円がある程度広がったら（menu.js の contentStartAt）、ロゴ → メインナビ → サブナビ・ビル群の順に出す
 * ロゴはその場でフェードイン、メニュー項目は見えない枠（overflow: hidden）の中で下からせり上がる
 * （translate と transform の2つの動きを速さを変えて重ね、奥行きのある動きにしている）
 */
[id=drawer-nav] {
    --mg-ease-a: cubic-bezier(.47, .16, .24, 1);
    --mg-ease-b: cubic-bezier(.26, .06, 0, 1);
    --mg-delay-logo: .3s;
    --mg-delay-main: .6s;
    --mg-delay-sub: .9s;
    --mg-logo-duration: 1.4s;
    --mg-item-duration: 1.2s;
    --mg-buildings-duration: 1.2s;
    --mg-hover-lift: 4px;  /* ホバーで項目が上がる距離 */
}

/* ロゴ：その場でフェードイン */
[id=drawer-nav] .mg-drawer-logo img {
    opacity: 0;
}

/* メイン・サブナビの項目 */
[id=drawer-nav] .c-drawer__menu .c-drawer__item {
    overflow: hidden;
    pointer-events: none;   /* 上に足した余白（前の項目と重なる部分）でクリックを邪魔しない */
}

[id=drawer-nav] .c-drawer__menu .c-drawer__item > a {
    position: relative;
    top: 0;
    display: inline-block;
    pointer-events: auto;
    opacity: 0;
    translate: 0 50%;              /* 2つ合わせて 105%：枠のすぐ下から動き出す */
    transform: translateY(55%);
}

/* 閉じるとき：すっと消えてから位置を戻す */
[id=drawer-nav] .mg-drawer-logo img,
[id=drawer-nav] .c-drawer__menu .c-drawer__item > a,
[id=drawer-nav] .mg-drawer-buildings {
    transition:
        opacity .2s ease,
        translate 0s .2s,
        transform 0s .2s;
}

/* 開いた状態 */
[id=drawer-nav][aria-hidden="false"] .mg-drawer-logo img,
[id=drawer-nav][aria-hidden="false"] .c-drawer__menu .c-drawer__item > a {
    opacity: 1;
    translate: 0 0;
    transform: translateY(0);
}

[id=drawer-nav][aria-hidden="false"] .mg-drawer-logo img {
    transition: opacity var(--mg-logo-duration) ease var(--mg-delay-logo);
}

[id=drawer-nav][aria-hidden="false"] .c-drawer__menu .c-drawer__item > a {
    transition:
        opacity calc(var(--mg-item-duration) * .67) cubic-bezier(.33, 1, .68, 1) var(--mg-delay-main),   /* 透明度は早めに上げる */
        translate calc(var(--mg-item-duration) * .67) var(--mg-ease-a) var(--mg-delay-main),
        transform var(--mg-item-duration) var(--mg-ease-b) var(--mg-delay-main),
        top .2s ease-out;   /* ホバー（サイト共通の --hover_anime と同じ .2s ease-out） */
}

[id=drawer-nav][aria-hidden="false"] .c-drawer__sub-nav .c-drawer__item > a {
    transition-delay: var(--mg-delay-sub), var(--mg-delay-sub), var(--mg-delay-sub), 0s;
}

/* ホバー：少し上に上がる（出現の動きと重ならないよう top で動かす） */
@media (hover: hover) {
    [id=drawer-nav][aria-hidden="false"] .c-drawer__menu .c-drawer__item > a:hover {
        top: calc(-1 * var(--mg-hover-lift));
    }
}

/* ビル群：フェードインアップ */
[id=drawer-nav] .mg-drawer-buildings {
    opacity: 0;
    transform: translateY(30px);
}

[id=drawer-nav][aria-hidden="false"] .mg-drawer-buildings {
    opacity: 1;
    transform: translateY(0);
    transition:
        opacity var(--mg-buildings-duration) var(--mg-ease-b) var(--mg-delay-sub),
        transform var(--mg-buildings-duration) var(--mg-ease-a) var(--mg-delay-sub);
}

@media (prefers-reduced-motion: reduce) {
    [id=drawer-nav].c-drawer--overall,
    [id=drawer-nav].c-drawer--overall[aria-hidden="false"] {
        transition: none;
    }

    [id=drawer-nav] .mg-drawer-logo img,
    [id=drawer-nav] .c-drawer__menu .c-drawer__item > a,
    [id=drawer-nav] .mg-drawer-buildings {
        translate: none;
        transform: none;
        transition: none !important;
    }
}

.mg-menu-btn {
    --mg-menu-size: 64px;    /* ボタンの大きさ（PC） */
    --mg-menu-gap: 16px;     /* 画面の端からの距離（PC） */
    border-radius: 50%;
    position: fixed;
    top: var(--mg-menu-gap);
    right: var(--mg-menu-gap);
    z-index: 100001;
    display: block;
    width: var(--mg-menu-size);
    height: var(--mg-menu-size);
    line-height: 0;
    transition: transform .3s ease;
    view-transition-name: mg-menu-btn;   /* ページ切り替えのフェード（style.css）で、ボタンは消さずにその場に残す */

    transform: translate3d(0, 0, 0);
    -webkit-transform: translate3d(0, 0, 0);
    contain: layout paint;
}

@media (max-width: 767px) {
    .mg-menu-btn {
        --mg-menu-size: 54px;  /* スマホ */
        --mg-menu-gap: 12px;
    }
}

/*
 * スマホ: 店舗マップ(shop-map プラグイン)を操作している間はメニューボタンを隠す。
 * shop-map が <html> に付けるクラス:
 *   sm-fg-stuck     … フロアガイドのメニューが上部に固定されている
 *   sm-bar-in-view  … マップ/リストのナビ(リスト|マップ・条件検索)が画面に入っている
 *   sm-modal-open   … 店舗モーダルが開いている
 *   sm-index-stuck  … リストの五十音の索引が上部に固定されている
 * どれも無ければ常に表示。ドロワーを開いている間(×のとき)は隠さない
 */
@media (max-width: 767px) {
    .mg-menu-btn {
        transition: transform .3s ease, opacity .25s ease, visibility 0s linear 0s;
    }

    :is(.sm-fg-stuck, .sm-bar-in-view, .sm-modal-open, .sm-index-stuck) .mg-menu-btn:not([aria-expanded="true"]) {
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: transform .3s ease, opacity .25s ease, visibility 0s linear .25s;
    }
}

/* ログイン中は管理バーの下に */
.admin-bar .mg-menu-btn {
    top: calc(var(--mg-menu-gap) + 32px);
}

@media (max-width: 782px) {
    .admin-bar .mg-menu-btn {
        top: calc(var(--mg-menu-gap) + 46px);
    }
}

.mg-menu-btn__svg {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;

    --mg-menu-duration: .4s;                        /* 1つの動きの長さ */
    --mg-menu-ease: cubic-bezier(.33, 1, .68, 1);   /* ふんわり減速 */
}

/*
 * 開閉のアニメーション（SVG の座標は 54×54。中心は 27,27）
 * 開く：赤と黄色の点が中央へ寄って消える → 線が中央から伸びて × に → 青い点が軽く弾む
 * 閉じる：線が中央へ縮む → 点が左右へ戻る
 */
.mg-menu-btn__dot,
.mg-menu-btn__bar {
    transition:
        transform var(--mg-menu-duration) var(--mg-menu-ease),
        opacity var(--mg-menu-duration) var(--mg-menu-ease);
}

.mg-menu-btn__dot {
    transform-box: fill-box;
    transform-origin: center;
    transition-delay: .2s;   /* 閉じるときは、線が縮んでから戻る */
}

.mg-menu-btn__bar {
    transform-box: view-box;
    transform-origin: 27px 27px;
    transform: rotate(-45deg) scale(0);
    opacity: 0;
}

/* 開いた状態 */
.mg-menu-btn[aria-expanded="true"] .mg-menu-btn__dot--red {
    transform: translateX(11.66px) scale(.4);   /* 赤い点（中心 15.35）→ 中央へ */
    opacity: 0;
    transition-delay: 0s;
}

.mg-menu-btn[aria-expanded="true"] .mg-menu-btn__dot--yellow {
    transform: translateX(-11.63px) scale(.4);  /* 黄色い点（中心 38.64）→ 中央へ */
    opacity: 0;
    transition-delay: 0s;
}

.mg-menu-btn[aria-expanded="true"] .mg-menu-btn__bar {
    transform: rotate(0deg) scale(1);
    opacity: 1;
    transition-delay: .15s;
}

.mg-menu-btn[aria-expanded="true"] .mg-menu-btn__bar--red {
    transition-delay: .25s;
}

.mg-menu-btn[aria-expanded="true"] .mg-menu-btn__dot--blue {
    animation: mg-menu-pulse .7s var(--mg-menu-ease) .3s both;
}

@keyframes mg-menu-pulse {
    0%   { transform: scale(1); }
    45%  { transform: scale(1.3); }
    100% { transform: scale(1); }
}

/* 視差効果を減らす設定では、動かさずに切り替える */
@media (prefers-reduced-motion: reduce) {
    .mg-menu-btn__dot,
    .mg-menu-btn__bar {
        transition: none;
    }

    .mg-menu-btn[aria-expanded="true"] .mg-menu-btn__dot--blue {
        animation: none;
    }
}

@media (hover: hover) {
    .mg-menu-btn:hover {
        transform: scale(1.15);
    }
}

.mg-menu-btn:focus-visible {
    outline: 3px solid #004d9f;
    outline-offset: 3px;
    border-radius: 50%;
}

/* スプラッシュ画面の表示中は隠す */
html.mg-splash-on .mg-menu-btn {
    visibility: hidden;
}