@charset "UTF-8";

/* ============================================================
   global-menu.css
   グローバルメニュー（ヘッダーのMENUボタンで下に展開）
   ・全画面を覆わず、必要な高さだけ下に開くパネル型
   ・展開は2パターンだけ（v14）。切替点はヘッダーがハンバーガーに変わる1150px
       PC（1150px以上）… このパネルは出ない。横並びナビ＋ドロップダウン（common.css）
       SP（1149px以下）… 最上部に店舗一覧 → リンク → CTAの順
   ・v13までは 769〜999px だけ「左にリンク2カラム / 右にCTA」の第3のパターンがあった。
     ハンバーガーは999px以下で出るのに中身はPC展開、という食い違いで、
     さらに実測で900px以下は文字が2行に折り返していた（下の§SPのコメント参照）
============================================================ */

/* ------------------------------------------------------------
   メニューパネル本体（高さは内容ぶんだけ・下に影）
------------------------------------------------------------ */
.global-menu {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
  max-height: 100vh;
  background: rgba(255, 252, 253, 0.98);
  backdrop-filter: blur(15px);
  z-index: 998;
  padding-top: 80px;
  overflow-y: auto;
  transform: translateY(-105%);
  transition: transform 0.5s ease;
  font-family: var(--font-gothic);
  visibility: hidden; /* 閉じている間はフォーカス対象から外す */
  border-bottom: 1px solid var(--border-color);
  box-shadow: 0 15px 35px rgba(34, 34, 34, 0.1);
}
.global-menu.is-open {
  transform: translateY(0);
  visibility: visible;
}
/* 閉じるアニメーション完了後に visibility を切り替える */
.global-menu:not(.is-open) {
  transition: transform 0.5s ease, visibility 0s linear 0.5s;
}

.gm-inner {
  padding: 30px 40px 40px;
  max-width: 1200px;
  margin: 0 auto;
}

/* 左右レイアウト */
.gm-layout {
  display: flex;
  gap: 50px;
}
.gm-left { flex: 1; }
.gm-right {
  flex: 0 0 300px;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

/* ------------------------------------------------------------
   トップページへ（左上）
------------------------------------------------------------ */
.gm-home-link {
  display: inline-flex;
  align-items: center;
  font-size: 1.05rem;
  color: var(--text-main);
  margin-bottom: 25px;
  border-bottom: 1px solid var(--text-main);
  padding-bottom: 5px;
}
/* トップページへの先頭に置く家アイコン */
.gm-home-icon {
  width: 1.1em;
  height: 1.1em;
  margin-right: 8px;
  object-fit: contain;
  flex-shrink: 0;
}

/* ------------------------------------------------------------
   リンク2カラム（親リンク＋子リンク常時表示）
------------------------------------------------------------ */
.gm-links-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 40px;
}
.gm-link-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.gm-link-list > li {
  border-bottom: 1px solid var(--border-color);
}

/* 親リンク（子を持たない項目：末尾に›） */
.gm-link-list > li > a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 13px 5px;
  font-size: 1.0rem;
  color: var(--text-main);
}
.gm-link-list > li > a::after {
  content: '›';
  color: var(--color-blue-ink);
  font-size: 1.2rem;
}

/* 子を持つ項目（テキストリンク＋展開ボタンを横並び） */
.gm-parent-row {
  display: flex;
  align-items: center;
  border-bottom: none; /* 親liのborder-bottomで制御 */
}
.gm-parent-link {
  flex: 1;
  padding: 13px 5px;
  font-size: 1.0rem;
  color: var(--text-main);
}
/* .gm-parent-linkには末尾の›を付けない */
.gm-parent-link::after { display: none; }

/* ＋展開ボタン（アイコンのみ・右端に配置） */
.gm-toggle-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 44px;
  flex-shrink: 0;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}

/* アコーディオン開閉トリガー（旧button型・互換のため残す） */
.gm-accordion-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 13px 5px;
  font-size: 1.0rem;
  font-family: var(--font-gothic);
  font-weight: 400;
  color: var(--text-main);
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
}

/* ＋アイコン（開くと×に回転） */
.gm-plus {
  position: relative;
  width: 13px;
  height: 13px;
  flex-shrink: 0;
  display: block;
  transition: transform 0.25s ease;
}
.gm-plus::before,
.gm-plus::after {
  content: '';
  position: absolute;
  background: var(--color-blue-ink);
}
.gm-plus::before {
  left: 0;
  right: 0;
  top: 50%;
  height: 1px;
  transform: translateY(-50%);
}
.gm-plus::after {
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1px;
  transform: translateX(-50%);
}
/* 展開ボタンが開いているとき＋を×に */
.gm-toggle-btn[aria-expanded="true"] .gm-plus {
  transform: rotate(45deg);
}
.gm-accordion-trigger[aria-expanded="true"] .gm-plus {
  transform: rotate(45deg);
}

/* サブリンク（アコーディオンの中身・クリックで開閉） */
.gm-sub-list {
  list-style: none;
  padding: 0 5px 12px 14px;
  margin: 0;
}
.gm-sub-list[hidden] { display: none; }
.gm-sub-list li a {
  display: block;
  padding: 6px 0;
  font-size: 0.88rem;
  color: var(--text-light);
}
.gm-sub-list li a::before {
  content: 'ー ';
  color: var(--color-blue-ink);
}

/* ------------------------------------------------------------
   右カラム：CTAボタン・電話・店舗一覧
------------------------------------------------------------ */
.gm-actions {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

/* お問い合わせ・ご応募ボタン（ブルーのグラデ） */
.gm-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 15px;
  font-size: 1rem;
  font-weight: bold;
  letter-spacing: 0.1em;
  border-radius: 999px;
  background: var(--gradient-blue);
  color: #fff;
  border: 0;
}

/* 電話番号ボタン（枠線をブルー〜ピンクのグラデ・文字は青） */
.gm-btn-tel {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px;
  font-size: 1rem;
  font-weight: bold;
  letter-spacing: 0.05em;
  border-radius: 999px;
  background: var(--gradient-blue);
  color: #fff;
  border: 0;
}

/* 店舗一覧ブロック */
.gm-stores { margin-top: 5px; }
/* GMの「店舗一覧」見出しは非表示にして、写真を上に詰める（フッターの見出しは別クラスなので影響なし） */
.gm-store-heading { display: none; }
.gm-store-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.gm-store-list a {
  display: block;
  text-align: center;
}
.gm-store-thumb {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 6px;
  border: 1px solid var(--border-color);
  display: block;
  margin-bottom: 5px;
}
.gm-store-name {
  font-size: 0.78rem;
  line-height: 1.4;
  color: var(--text-main);
  display: block;
}
/* 店舗ごとの電話リンク（PC・SP共通で表示・1行に収める）
   ※ .gm-store-list a が display:block/中央ぞろえを付与するので、ここでは色・サイズ・折り返し禁止のみ */
.gm-store-tel {
  margin-top: 4px;
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--color-blue-ink);
  white-space: nowrap;
  padding: 2px 0;
}

/* ------------------------------------------------------------
   SP展開（1149px以下＝ハンバーガーが出ている幅すべて／v14で768→1149pxに拡張）
   ・店舗一覧を最上部へ（display:contents ＋ order で並べ替え）

   769〜1149px を旧「PC展開」から移した理由（Chromium実測）
     1リンクあたりの幅  999px→264.5px ／ 900px→215px ／ 769px→149.5px
     「お知らせ・キャンペーン」(1.0rem) は約190px、「採用お問い合わせ・ご応募」は約216px。
     900px以下で2行に折り返し、769pxでは2項目とも折り返していた。
   ・769px以上でも見え方が768px端末と同じになるよう、内側を768pxで頭打ちにして中央寄せ。
     ヘッダーもSP版に統一したため高さは全幅で75px。padding-top 60px＋gm-inner 14px＝74px
     なので、どの幅でもヘッダーの真下から始まる（重なり1px）
------------------------------------------------------------ */
@media screen and (max-width: 1149px) {
  .global-menu { padding-top: 60px; }
  /* 余白を詰めて1画面に収まりやすく（文字サイズは変えない） */
  .gm-inner { padding: 14px 18px 20px; }
  /* 769px以上で1カラムのリンクが間延びしないよう、768px端末と同じ内側幅で止める。
     このCSSに box-sizing のリセットは無い＝content-box なので、
     max-width は「768 − 左右padding 18×2 = 732px」を指定する（実測 内側732.0px）。
     768px以下では max-width に届かないため無効＝SPの見え方は従来どおり */
  .gm-inner { max-width: 732px; }
  .gm-layout { flex-direction: column; gap: 14px; }

  /* gm-right の中身（店舗一覧・CTA）を gm-layout 直下として扱う */
  .gm-right { display: contents; }

  /* 並び順：店舗一覧 → リンク → CTAボタン */
  .gm-stores { order: -1; margin-top: 0; }
  .gm-left { order: 0; }
  .gm-actions { order: 1; }

  .gm-links-grid { grid-template-columns: 1fr; gap: 0; }

  /* 「トップページへ」の下余白を圧縮 */
  .gm-home-link { margin-bottom: 12px; }

  /* 40代以上の視認性優先：GMの文字を一回り大きく */
  .gm-home-link { font-size: 1.12rem; }
  .gm-link-list > li > a,
  .gm-accordion-trigger { font-size: 1.08rem; }
  .gm-sub-list li a { font-size: 0.96rem; }
  .gm-store-name { font-size: 0.83rem; }
  .gm-store-tel { font-size: 0.95rem; }

  /* 店舗写真を横長にして縦を圧縮（視認性は保ったまま高さだけ削減） */
  .gm-store-list { gap: 8px; }
  .gm-store-thumb {
    aspect-ratio: 3 / 2;
    margin-bottom: 3px;
  }
  .gm-store-tel { margin-top: 2px; }

  /* 各行のタップ領域は確保しつつ、上下を少しだけ詰める */
  .gm-link-list > li > a,
  .gm-accordion-trigger { padding-top: 11px; padding-bottom: 11px; }

  /* SPのGMでは、文字リンクの「採用お問い合わせ・ご応募」を非表示（下の楕円ボタンと重複のため）。
     非表示にした分、下にある gm-actions の楕円ボタンが自動的に上へ詰まる。 */
  .gm-link-list > li:has(> a[href="https://benefitup.jp/contact/"]) {
    display: none;
  }
}