@charset "UTF-8";

/* ============================================================
   common.css
   全ページ共通のリセット・変数・ユーティリティ・
   ヘッダー・固定ナビ・フローティング・フッター
============================================================ */

/* ============================================================
   カラー変数・フォント変数
============================================================ */
:root {
  /* ============================================================
     配色トークン（セイバン準拠 / v12）
     ・基準色はセイバン公式サイトの実測値（Display P3 → sRGB 変換済み）
       上部帯 #18BFD7 ／ 主要ボタン #01A0E9 ／ 背景 #EDF8FE（暖色系は別途 赤紫に調整）
     ・水色系は面 #01A0E9 / 明るい面 #18BFD7 / 文字 #0065B0 の3段
     ・「面用」と「文字用」を分ける。面用は白地2〜3のため文字には使わない
     ・変数名は旧配色のまま（pink=コーラル、mauve=水色）。改名は別途
     ============================================================ */

  /* 文字 */
  --text-heading: #222222;        /* 見出し：白地 15.91 */
  --text-main:    #333333;        /* 本文：白地 12.63 */
  --text-light:   #666666;        /* 補助：白地 5.74 */

  /* 水色（セイバン #01A0E9 / 色相199°・彩度99% の軸） */
  --color-blue-ink:    #0065B0;   /* 文字用の青（リンク・白文字CTA・グラデ起点）：白地 6.02 */
  --color-mauve:       #01A0E9;   /* 面・帯・バッジ用。白地 2.91 なので文字には使わない */
  --color-mauve-light: #18BFD7;   /* 明るい面（セイバン上部帯）。白地 2.22 */
  --color-champagne:   #EDF8FE;   /* ベース面（セイバン背景） */
  --bg-base:           #EDF8FE;

  /* 赤紫系（--color-pink-text #D00C3D の色相345°に統一）
     ※面色はセイバン実測の #FB7267（色相4°）から意図的にずらしている */
  --color-pink-text:   #D00C3D;   /* 文字用：白地 5.52 */
  --color-pink-bright: #FB658A;   /* 面・バッジ用：白地 2.86 */
  --color-pink-pale:   #FEE1E9;   /* 淡面 */

  /* 黄（固定ナビ・フッター） */
  --color-yellow-nav:    #F6F2CB;
  --color-yellow-footer: #FBF8E5;
  --color-yellow-hover:  #F2EDB5;

  --border-color: rgba(1, 160, 233, 0.28);   /* 水色系の罫線 */
  --border-coral: rgba(251, 101, 138, 0.28); /* 赤紫系の罫線 */
  --border-tag:   #8C8C8C;                   /* タグ枠線。白地 3.36（非テキスト基準 3.0） */
  --font-mincho: 'Noto Serif JP', serif;
  --font-gothic: 'Noto Sans JP', sans-serif;

  /* --- グラデーションは5パターンのみ（v19で --gradient-pink を追加） ---
     いずれも「濃い側 → 明るい側」。面と枠にだけ使い、文字には使わない
     （明るい側は白地2:1前後になるため、文字に使うと必ず読めなくなる）。
     白文字を載せる要素（CTA・ボタン）は単色 --color-blue-ink を使う */
  --gradient-blue:    linear-gradient(120deg, #01A0E9 0%, #18BFD7 100%);  /* CTA・枠線・店舗帯 */
  --gradient-heading: linear-gradient(120deg, #0065B0 0%, #18BFD7 100%);  /* 大見出し文字 */
  --gradient-coral:   linear-gradient(120deg, #FB658A 0%, #D00C3D 100%);  /* 見出し文字（下層） */
  /* v19追加。--color-pink-bright → --color-pink-pale の淡いピンク。
     他の3本と同じく「濃い側 → 明るい側」。面（カード上部のアクセントバー等）専用。
     明るい側 #FEE1E9 は白地1.13なので、文字にも枠線にも使わないこと。 */
  --gradient-pink:    linear-gradient(120deg, #FB658A 0%, #FEE1E9 100%);  /* 淡い面（voiceのカード上部） */
}

/* ============================================================
   リセット・ベーススタイル
============================================================ */
html {
  scroll-behavior: smooth;
  /* 112.5% = 既定16pxのブラウザで18px。px固定と違い、
     ブラウザ側で文字を大きくしている人（40代以上に一定数いる）の設定に追随する */
  font-size: 112.5%;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
@media screen and (min-width: 769px) {
  html { font-size: 112.5%; }
}

body {
  margin: 0;
  padding: 0;
  /* 本文はゴシックの方が小さい文字でも読みやすいため、基本フォントをゴシックに。
     見出し（h2.section-title等）は各所でfont-minchoを明示指定しているため、
     タイトル＝明朝／本文＝ゴシックの使い分けはそのまま維持される。 */
  font-family: var(--font-gothic);
  color: var(--text-main);
  background-color: var(--bg-base);
  line-height: 1.9;
  font-weight: 400;
  position: relative;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  line-height: 1.4;
  font-weight: 300;
}
p { margin: 0 0 1em 0; }
a {
  color: inherit;
  text-decoration: none;
  transition: opacity 0.3s ease;
}
a:hover { opacity: 0.6; }
img { max-width: 100%; height: auto; vertical-align: bottom; }

/* ============================================================
   ユーティリティ
============================================================ */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
}

/* PCのみ表示 */
.pc-only { display: block; }
/* SPのみ表示 */
.sp-only { display: none; }

/* PCのみ改行 */
.pc-br { display: block; }
/* SPのみ改行 */
.sp-br { display: none; }

@media screen and (max-width: 768px) {
  .pc-only { display: none; }
  .sp-only { display: block; }
  .pc-br { display: none; }
  .sp-br { display: block; }
}

/* 語句の途中で改行されたくない箇所に使う（例：固有名詞、スラッシュを含む語句） */
.nowrap { white-space: nowrap; }

/* ============================================================
   華やかさを添える演出パーツ
============================================================ */
/* ホバー時にキラッと光の帯が走るシャインエフェクト（ボタン用） */
.shine-hover {
  position: relative;
  overflow: hidden;
}
.shine-hover::after {
  content: '';
  position: absolute;
  top: 0;
  left: -60%;
  width: 40%;
  height: 100%;
  background: linear-gradient(115deg, transparent, rgba(255, 255, 255, 0.75), transparent);
  transform: skewX(-20deg);
  pointer-events: none;
  transition: left 0.65s ease;
}
.shine-hover:hover::after { left: 130%; }
@media (prefers-reduced-motion: reduce) {
  .shine-hover::after { transition: none; left: -60%; }
}

/* 見出し脇に添えるきらめきアイコン */
.sparkle-deco {
  display: inline-block;
  color: var(--color-pink-bright);
  font-size: 0.8em;
  vertical-align: middle;
  animation: sparkle-twinkle 2.6s ease-in-out infinite;
}
.sparkle-deco.sparkle-delay { animation-delay: 1.1s; }
@keyframes sparkle-twinkle {
  0%, 100% { opacity: 0.35; transform: scale(0.85); }
  50% { opacity: 1; transform: scale(1.1); }
}
@media (prefers-reduced-motion: reduce) {
  .sparkle-deco { animation: none; opacity: 0.85; }
}

/* ゴールドを添えた強調テキスト（価格・数字などの特別感を演出） */
.text-gold-accent {
  color: var(--color-pink-text);
}

/* テキスト装飾 */
.text-larger { font-size: 1.15em !important; }
.text-smaller { font-size: 0.85em !important; }
.text-red { color: var(--color-pink-text) !important; }

/* 文中の一部を大きく・紫（モーブ）で強調したいときに使う */
.text-accent-purple {
  font-size: 1.25em;
  color: var(--color-blue-ink);
  font-weight: 700;
}

/* ============================================================
   レイアウト補助
============================================================ */
.container {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 20px;
  width: 100%;
  box-sizing: border-box;
}
.section-padding { padding: 80px 0; }
/* SP：最初のセクションの上余白を詰めて、ファーストビューに見出しが入るように
   ※対象はヒーロー直下のセクション。スタッフの声を下へ移動したので
     .staff-voice-section → .support-illust-section に付け替え済み（どちらもindex.htmlのみ） */
@media screen and (max-width: 768px) {
  .support-illust-section.section-padding { padding-top: 34px; }
}

/* セクション背景色（ベージュ／白の帯を交互に配置してリズムを作る） */
.section-bg-beige { background: var(--color-champagne); }
.section-bg-white { background: #ffffff; }
.margin-top-lg { margin-top: 80px; }

/* ============================================================
   フェードイン・アニメーション共通クラス
============================================================ */
.fade-in {
  opacity: 0;
  transition: opacity 1s ease;
}
.fade-in.is-visible { opacity: 1; }

.fade-in-up {
  opacity: 0;
  transform: translateY(20px);
  transition: all 1s ease;
}
.fade-in-up.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ============================================================
   全体背景グラデーション
============================================================ */
.bg-pale-tone {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: -1;
  /* v23：左上のピンクを --color-pink-bright(#FB658A) の8%から
     --color-pink-pale(#FEE1E9) の45%に変更。
     #FB658A は青が大きく落ちる色なので、薄く敷いても灰紫がかって見えていた。
     #FEE1E9 は白との差が小さいぶん、透過率を上げても色味が濁らない。
     濃さの調整はこの 0.45 を触るだけでよい（0.25＝かなり薄い／0.7＝はっきりピンク）。
     右下のクリーム(#FBF8E5 60%)は変更していない。 */
  background:
    radial-gradient(circle at 15% 20%, rgba(254, 225, 233, 0.45) 0%, transparent 50%),
    radial-gradient(circle at 85% 80%, rgba(251, 248, 229, 0.6) 0%, transparent 50%);
  pointer-events: none;
}

/* ============================================================
   ヘッダー
============================================================ */
.header {
  position: sticky;
  top: 0;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border-color);
  z-index: 1000;
  transition: transform 0.35s ease; /* 下スクロールで隠す/上スクロールで出すアニメーション */
}
/* 下スクロール時に隠す（JSで is-hidden を付け外し／上スクロールで再表示） */
.header.is-hidden { transform: translateY(-100%); }

/* h1 をヘッダー構成要素として使用（SEO：h1はページに1つ） */
.header-left {
  display: flex;
  align-items: center;
  gap: 20px;
  margin: 0;
  font-weight: normal;
}

.header-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 20px;
  max-width: 1200px;
  margin: 0 auto;
}

/* ロゴは縦長（175×209）なので、幅ではなく高さで揃える */
.logo img {
  width: auto;
  height: 52px;
  display: block;
}

.header-text {
  font-family: var(--font-gothic);
  font-size: 0.78rem;
  color: var(--text-light);
  margin: 0;
  line-height: 1.4;
}
/* .header-text-sub は2行目を別サイズにしたくなった時のためのフック（現在は1行目と同サイズ） */

/* ハンバーガーボタン */
.menu-toggle {
  display: flex;
  flex-direction: row;
  width: 112px;   /* 「メニュー」61px＋gap9px＋3本線20px＝90px。92pxだと実効89pxで1px足りず改行していた */
  height: 44px;
  padding: 0;        /* ブラウザ標準の 1px 6px を打ち消す。これが無いと文字幅が12px削られる */
  flex-shrink: 0;    /* 幅が足りない時にボタン側が潰れないようにする */
  justify-content: center;
  align-items: center;
  gap: 9px;
  border: 1.5px solid transparent;
  border-radius: 6px;
  background:
    linear-gradient(#fff, #fff) padding-box,
    var(--gradient-blue) border-box;
  cursor: pointer;
  font-family: var(--font-gothic);
  color: var(--color-blue-ink);
  transition: 0.3s;
}
.menu-toggle-text {
  font-size: 0.83rem;
  line-height: 1;
  margin: 0;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

/* ハンバーガーアイコン（三＝3本線・spanで実装） */
.hamburger {
  position: relative;
  width: 20px;
  height: 14px;
  background: linear-gradient(currentColor, currentColor) center / 100% 1px no-repeat; /* 中央の線 */
}
.hamburger::before,
.hamburger::after {
  content: '';
  position: absolute;
  left: 0;
  width: 100%;
  height: 1px;
  background: currentColor;
  transition: 0.3s;
}
.hamburger::before { top: 0; }
.hamburger::after { bottom: 0; }

/* アクティブ時 → ✕ マーク（中央線を消し、上下を回転） */
.menu-toggle.active .hamburger {
  background: none;
}
.menu-toggle.active .hamburger::before {
  transform: translateY(6px) rotate(45deg);
}
.menu-toggle.active .hamburger::after {
  transform: translateY(-6px) rotate(-45deg);
}

/* SPヘッダー（1149px以下＝ハンバーガーを出す幅すべて／v14で768→1149pxに拡張）
   v13までは 769〜999px に「横長ハンバーガー（枠線ボタン・CTAなし）」という
   third patternがあった。表示を PC / SP の2つに絞るため、この帯はSPに寄せた。
   切替点1150pxの根拠は §6 の実測：
     左右padding48＋ロゴ48.6＋ナビ537.8＋CTA198.4＋gap36 = 868.8px
     ＋gap12＋タグライン188.9 = 1069.7px（＝タグラインまで出せる最小幅）
   1150pxなら80.3pxの余裕。1000pxではタグラインが69.7px足りず、
   v13はそこを「タグラインだけ消す」第2のpatternで凌いでいた。 */
@media screen and (max-width: 1149px) {
  .header-inner { padding: 8px 15px; }
  /* 縦長ロゴに合わせて横並びへ。ヘッダー高さが約88px→約68pxに縮む */
  .header-left {
    flex-direction: row;
    align-items: center;
    gap: 10px;
  }
  .logo img { height: 52px; }
  /* 例外：ここは「読ませる」テキストではなく、2行に収めることを優先する。
     制約は2行目（全角22.5文字）。端末幅からメニューボタン(58px)と左右padding(30px)を
     引いた幅に収める必要があるため vw 基準にする。
     320px端末で223px（使える幅232px）／375px端末で262px（同287px）。 */
  .header-text {
    font-size: clamp(7.5px, 2.45vw, 11px);
    line-height: 1.4;
    word-break: keep-all;
  }

  /* GM（メニュー）を開いている間は、ロゴ＋紹介文を隠して「×」だけ表示。
     上部がすっきりし、メニューが1画面に収まりやすくなる。閉じると元に戻る。 */
  .header-inner:has(.menu-toggle.active) .header-left { display: none; }
  .header-inner:has(.menu-toggle.active) { justify-content: flex-end; }

  /* SPはスペースが狭いため、メニューボタンはコンパクト型（縦積み・四角）にする。
     v14：枠線と地を外し、文字と3本線の色だけで見せる。
     ・「メニュー」… var(--color-blue-ink) 太字（白地 6.02／AA適合）
     ・3本線     … var(--color-mauve) の2px（白地 2.91。非テキストの基準3.0に0.09届かない。
                    満たすなら var(--color-blue-ink) にすると6.02。指示書§8-A） */
  .menu-toggle {
    flex-direction: column;
    width: 58px;
    height: 58px;
    gap: 0;
    border-radius: 0;
    background: none;
    border: 0;
  }
  /* 「メニュー」は全角4文字。58pxの中に収める */
  .menu-toggle-text {
    font-size: 0.72rem;   /* 12.96px × 4文字 = 51.8px */
    font-weight: 700;
    color: var(--color-blue-ink);
    letter-spacing: 0;
    white-space: nowrap;
    margin: 0 0 5px;
  }
  /* 3本線（PC共通のベース実装を使い、太さ1→2.5px・色を水色に）。
     v17：横長化。幅 24→50px ／ 高さ 14→16px ／ 線 2→2.5px。
     ボタン本体（58×58）は変更していない。50pxは「メニュー」の実測幅
     （0.72rem＝12.96px×4文字＝51.8px）とほぼ同じで、文字幅と線幅が揃う。
     高さ16px・線2.5pxなので線の中心は (16−2.5)÷2 = 6.75px。
     ベースの ✕ 変形は translateY(±6px) なので、下で ±6.75px に上書きする。 */
  .hamburger {
    width: 50px;
    height: 16px;
    color: var(--color-mauve);
    background-size: 100% 2.5px;
    transition: width 0.3s;   /* ✕ の回転（0.3s）と幅の戻りを同じ速度で揃える */
  }
  .hamburger::before,
  .hamburger::after { height: 2.5px; }

  /* 開いた状態（✕）だけ幅を26pxに戻す。
     50pxのまま45°回すと対角の縦方向の広がりが 50÷√2 ≒ 35px になり、
     上の「メニュー」（margin-bottom 5px）に思い切り重なるため。
     26pxなら 26÷√2 ≒ 18.4px、線の太さを足しても約21px。
     ボックス16pxからのはみ出しは上下 約2.5px ずつで、5pxの余白に収まる
     （変更前の 24px＝約19px・はみ出し2.5px と同等）。 */
  .menu-toggle.active .hamburger { width: 26px; }
  .menu-toggle.active .hamburger::before {
    transform: translateY(6.75px) rotate(45deg);
  }
  .menu-toggle.active .hamburger::after {
    transform: translateY(-6.75px) rotate(-45deg);
  }
}

/* ============================================================
   固定ナビゲーション（PC：左縦並び / SP：下部横並び）
============================================================ */
.floating-nav {
  position: fixed;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 500;
  display: flex;
  flex-direction: column;
  font-family: var(--font-gothic);
  font-weight: 300;
  /* SPの下部固定バーと同じ薄黄色。本文 #333333 で 11.00 */
  background: var(--color-yellow-nav);
  box-shadow: 2px 2px 15px rgba(0, 0, 0, 0.05);
  border: 1px solid #ffffff;   /* PC：薄黄色の面を白い枠で締める */
}
.floating-nav a {
  padding: 20px 12px;
  text-align: center;
  font-size: 1.15rem;
  color: var(--text-main);
  border-bottom: 1px solid #ffffff;   /* PC：項目の区切りも白 */
  writing-mode: vertical-rl;
  text-orientation: upright;
  letter-spacing: 0.1em;
  transition: background 0.3s;
}
.floating-nav a:hover { background: var(--color-yellow-hover); } /* 地色を1段だけ濃くする（水色に飛ばさない） */

/* 1149px以下：下部横並びの固定バーへ（v14で768→1149px）。
   ヘッダー・GMと同じ1150pxを唯一の切替点に揃えるため。
   v13までは 769〜1149px が「SPヘッダー＋PCの左縦ナビ」という混在状態だった */
@media screen and (max-width: 1149px) {
  .floating-nav {
    top: auto;
    bottom: 0;
    flex-direction: row;
    width: 100%;
    border-top: 2px solid var(--color-mauve);
    box-shadow: 0 -3px 10px rgba(34, 34, 34, 0.08);
    /* 薄黄色。青文字 --color-blue-ink とのコントラストは 5.18（基準4.5） */
    background: var(--color-yellow-footer);
    /* 初期は非表示。少しスクロールしてから .is-visible で出現（JS制御） */
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    pointer-events: none;
    transition: opacity 0.35s ease, transform 0.35s ease, visibility 0.35s;
  }
  .floating-nav.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
  }
  .floating-nav a {
    flex: 1;
    writing-mode: horizontal-tb;
    padding: 8px 5px 20px; /* 上下計28pxのまま、文字だけ少し上へ */
    border-right: 1px solid var(--border-color);
    border-bottom: none;
    font-size: 1.05rem;
    letter-spacing: -0.04em;
    color: var(--color-blue-ink); /* リンクと分かるようモーヴ文字に */
    font-weight: 500;
  }
  .floating-nav a:nth-child(2) {
    flex: 0.7;
    letter-spacing: normal;
  }
  .floating-nav a::after {
    content: none; /* 矢印は非表示 */
  }
}

@media screen and (min-width: 1150px) {
  .floating-nav {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-50%) translateX(-12px);
    transition: opacity 0.35s ease, transform 0.35s ease, visibility 0.35s;
  }
  .floating-nav.is-visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(-50%) translateX(0);
  }
}

/* ============================================================
   右下「上へ」ボタン ＋ SP下部CTAバー
============================================================ */
.floating-wrap {
  position: fixed;
  bottom: 20px;
  right: 15px;
  z-index: 600;
  display: flex;
  flex-direction: column;
  align-items: center;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  pointer-events: none;
  transition: opacity 0.35s ease, transform 0.35s ease, visibility 0.35s;
}
.floating-wrap.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}
.floating-cta { display: none; }
.back-to-top {
  width: 48px;
  height: 48px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  font-family: var(--font-gothic);
  font-size: 0.78rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0;
  text-decoration: none;
  box-shadow: 0 3px 10px rgba(34, 34, 34, 0.16);
  opacity: 0.92;
  transition: opacity 0.2s ease, transform 0.2s ease;
  border-radius: 50%;
  background: var(--gradient-blue);
  color: #fff;
  border: 0;
}
.back-to-top:hover { opacity: 1; transform: translateY(-2px); }
/* 「上へ」の文字を外し、矢印だけを大きく見せる（§8の12px例外は不要になった） */
.back-to-top .btt-arrow { font-size: 1.75rem; line-height: 1; }

@media screen and (max-width: 768px) {
  .floating-wrap {
    left: 0;
    right: 0;
    bottom: 66px;
  }
  .floating-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    box-sizing: border-box;
    padding: 12px 16px;
    /* 白文字のコントラストは左端 2.91 → 右端 2.22（基準4.5）。意匠優先の指定 */
    background: var(--gradient-blue);
    color: #fff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.22);
    font-family: var(--font-gothic);
    /* 1.0rem だと375px幅で文言＋バッジが約381pxになり2行に折れるため 0.95rem（17.1px）に留める */
    font-size: 0.95rem;
    font-weight: 500;
    text-decoration: none;
    text-align: center;
    line-height: 1.3;
  }
  .floating-cta-badge {
    /* 白文字のコントラストは左端 2.86 → 右端 5.52（基準4.5） */
    background: var(--gradient-coral);
    color: #fff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.22); /* 親が text-shadow:none になったため個別に持たせる */
    font-size: 0.78rem;
    font-weight: 500;
    padding: 3px 9px;
    border-radius: 20px;
    white-space: nowrap;
  }
  .floating-cta-arrow {
    margin-left: 5px;
    font-weight: 400;
  }
  .back-to-top {
    position: absolute;
    bottom: 100%;
    right: 10px;
    margin-bottom: 10px;
    width: 44px;
    height: 44px;
    font-size: 0.67rem;
  }
}

/* ============================================================
   フッター
============================================================ */
.footer {
  /* 薄黄色を2段階薄く（#F6F2CB → #F6F2CB → #FBF8E5）。
     本文 #333333 で 11.83、リンク #0065B0 で 5.64、補助文字 #666666 で 5.38 */
  background-color: var(--color-yellow-footer);
  padding: 60px 0 30px;
  border-top: 1px solid var(--border-color);
}

/* サイトマップグリッド（グローバルメニューと同じ書体・サイズ感で統一） */
.sitemap-grid {
  display: grid;
  /* 店舗案内カラムを削除したため 4→3。空きカラムが出ないようにする */
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 50px;
  font-family: var(--font-gothic);
  font-size: 0.93rem;
  line-height: 1.9;
}
/* PC：フッターのページ一覧を細く・約4/5に縮小・行間を少し詰める */
@media screen and (min-width: 769px) {
  .footer-sitemap { font-size: 0.83rem; line-height: 1.55; font-weight: 300; }
  .footer-sitemap .fw-bold { font-size: 0.8rem; font-weight: 400; }
}
.sitemap-col { display: flex; flex-direction: column; gap: 15px; min-width: 0; }
.sitemap-block { list-style: none; padding: 0; margin: 0; }
.sitemap-block li { margin-bottom: 5px; }

/* リンクの見た目（大項目） */
.fw-bold { font-weight: 400; color: var(--color-blue-ink); font-size: 0.97rem; }
.fw-normal::before { content: 'ー '; color: var(--text-light); }

/* 大項目リンクにリンクと分かる「»」を付ける（フッターサイトマップ内のみ） */
.sitemap-block .fw-bold a::after {
  content: ' »';
  color: var(--color-blue-ink);
  font-size: 0.85em;
}

/* 「採用お問い合わせ・ご応募」だけCTAボタン風に（大きすぎない小型ボタン） */
.sitemap-cta { margin-top: 10px; }
.sitemap-cta-btn {
  /* ⚠ display はここに書かない。後段の「.sitemap-cta-btn, .sitemap-tel .footer-hq-tel-num」
     が display:flex を同じ詳細度で後勝ち指定している（幅240pxを揃えるため） */
  font-size: 0.9rem;
  font-weight: 500;
  padding: 8px 18px;
  line-height: 1.3;
  transition: opacity 0.2s ease;
  border-radius: 999px;
  background: var(--gradient-blue);
  color: #fff;
  border: 0;
}
.sitemap-cta-btn:hover { opacity: 0.85; }

/* サブ項目（店舗名など長いテキストも1行に収まるよう小さめに） */
.sub-li {
  padding-left: 16px;
  position: relative;
  font-size: 0.87rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sub-li::before { content: 'ー'; position: absolute; left: 0; color: var(--text-light); font-weight: 300; }

/* ============================================================
   店舗の種別ラベル（「美容室」「カラー専門店」）※サイト共通部品
   ・「美容室 / カラー専門店」とまとめず、1つずつ独立したラベルにする
   ・地は --color-pink-pale、文字は --text-main の普通の太さ（10.32・AAA）
   ・§3の「非リンク＝角丸6px・白地・枠線」に対する意図的な例外。
     ご指定どおり長方形（角丸0）・塗りつぶしで統一している
   ・使用箇所：GMパネル(#gn-shop) / フッター店舗カード /
     shop.html サムネ / company.html 店舗一覧
============================================================ */
.store-type-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 0;
  min-width: 0;
}
.store-type-tag {
  display: inline-block;
  box-sizing: border-box;
  flex-shrink: 0;
  margin: 0;
  padding: 2px 8px;
  border: 0;
  border-radius: 0;              /* 長方形 */
  background: var(--color-pink-pale);
  font-family: var(--font-gothic);
  font-size: 0.78rem;            /* 14.04px＝§4の下限ちょうど */
  font-weight: 400;              /* 普通の太さ */
  line-height: 1.5;
  color: var(--text-main);       /* #FEE1E9 地で 10.32 */
  white-space: nowrap;
}

/* ============================================================
   フッター店舗リスト（小さめ・3店舗共通）
============================================================ */
.footer-store-list-wrap {
  padding-bottom: 30px;
  margin-bottom: 30px;
  border-bottom: 1px solid var(--border-color);
  text-align: center;
}
.footer-store-list-heading {
  font-family: var(--font-gothic);
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--color-blue-ink);
  margin: 0 0 16px;
  letter-spacing: 0.05em;
}
.footer-store-list {
  list-style: none;
  padding: 0;
  margin: 0 auto;
  /* v14：住所の右端に駐車場マークを置いたぶん、1列に必要な幅が増えたため
     1020→1080px（.container の max-width 1120 − padding 20×2 ＝ 実効の上限）。
     1列 = (1080−gap16×2)÷3 = 349.3px、カード内側 = 349.3−border2−padding20 = 327.3px */
  max-width: 1080px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  text-align: left;
}
/* カードを上下2エリアに分ける。
   ・上部＝白地。店舗ページへの導線（店名／種別／キャッチ／写真／住所）
   ・下部＝--gradient-blue の帯。電話番号だけを置く
   「店舗ページへのリンク」と「電話リンク」が地の色で分かれるので、
   どちらを押しているのかが一目で分かる（従来は同じ白地に青文字が2種類あった） */
.footer-store-item {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  overflow: hidden;          /* 下部の帯を角丸で切り落とす */
  font-family: var(--font-gothic);
  box-sizing: border-box;
}

/* ------- 上部エリア（白地） ------- */
.footer-store-top {
  flex: 1;                   /* 3枚のカード高さを揃える */
  display: flex;
  flex-direction: column;
  padding: 12px 10px 14px;
  box-sizing: border-box;
}
/* ① 店名：1行で収める。最長の「2Weeks plus メガドン・キホーテ 西泉店」は
   0.85rem(15.3px)で実測280.8px。
   いちばん狭くなるのは3列のまま横幅が詰まる 901〜1030px の帯で、
   1000px時のカードは309px・内側289pxとなり余裕8.2px。
   0.87rem(287.4px)のままだとこの帯で ellipsis が発動したため一段下げた。
   万一の環境差で溢れても崩れないよう ellipsis は保険に残している */
.footer-store-name {
  display: block;
  font-size: 0.85rem;
  font-weight: 500;
  line-height: 1.4;
  color: var(--text-main);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 7px;
  text-align: center;        /* v14 */
}
.footer-store-name:hover { opacity: 0.8; }
/* SP（768px以下）：店名を大きく。折り返さない範囲の上限で頭打ちにする。
   西泉店だけHTMLの <br class="sp-br"> で2行にしてあり、
   最長行「メガドン・キホーテ 西泉店」は font-size:100px 時に1223px。
     店名の使える幅 ≒ min(vw − 62, 398)px（実測）
     f =（幅 − 余白8）÷ 12.23 ≒ 8.18vw − 5.72px（上限22px）
   ⚠ 769〜1149pxに広げないこと。<br class="sp-br"> が効かず1行になるため、
      22pxだと「2Weeks plus メガドン・キホーテ 西泉店」が入りきらない（実測で11px超過）。
   ⚠ 店名を変えたら実測し直すこと。
   ⚠ このブロックは .footer-store-name より後ろに置くこと（§10-⑤）。 */
@media screen and (max-width: 768px) {
  .footer-store-name { font-size: clamp(15.3px, calc(8.18vw - 5.72px), 22px); }
}
/* ② 種別ラベル（.store-type-tags / .store-type-tag は共通部品側で定義） */
.footer-store-item .store-type-tags { margin-bottom: 8px; justify-content: center; }  /* v14：左右センター */
/* ②' .footer-store-near は v14で廃止。近岡店の「海側環状線沿い」は
   キャッチコピー（.footer-store-catch）へ移した */
/* ③ キャッチコピー（v14：センター・太字・一段小さく・補助色へ）
   0.8rem(14.4px) → 0.78rem(14.04px＝§5の下限ちょうど)。
   色は --color-blue-ink（6.02）→ --text-light（白地 5.74）。
   店舗ページへのリンクは店名と写真が担うので、キャッチはリンク色から外して
   「説明文」であることをはっきりさせる */
.footer-store-catch {
  margin: 0 0 9px;
  text-align: center;
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.45;
  color: var(--text-light);
}
/* ④ 店舗写真：内観⇄外観のクロスフェード。
   元画像が1200×800＝3:2 なので同じ比率にして切り取りを出さない */
.footer-store-photo-wrap {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  margin-bottom: 9px;
  border-radius: 6px;
  overflow: hidden;
  background: var(--color-champagne);
}
.footer-store-photo-wrap:hover { opacity: 0.85; }
.footer-store-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* 外観だけを重ねて opacity で明滅させる（JSなし・合成のみで動くので軽い）。
   12秒周期：内観5.0秒 → 1.0秒フェード → 外観5.0秒 → 1.0秒フェード */
.footer-store-photo-out {
  opacity: 0;
  animation: footerStoreFade 12s ease-in-out infinite;
}
@keyframes footerStoreFade {
  0%, 42%   { opacity: 0; }
  50%, 92%  { opacity: 1; }
  100%      { opacity: 0; }
}
/* モーション低減設定では切り替えず内観のみ表示（WCAG 2.2.2 対策） */
@media (prefers-reduced-motion: reduce) {
  .footer-store-photo-out { animation: none; opacity: 0; }
}
.footer-store-logo {
  position: absolute;
  top: 8px;
  left: 8px;
  width: auto;
  height: 40px;
  z-index: 1;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.35));
}
/* ⑤ 住所＋駐車場マーク（v14）
   マークは float:right。flexのspace-betweenだと住所テキストの幅が
   「いちばん長い行」に固定され、1行目が折り返してしまう（実測3行になった）。
   floatなら1行目は幅いっぱいを使え、マークは最終行の右端に載る。
   カード内側327.3pxに対する実測（0.83rem＝14.94px）
     西泉店  1行目「金沢市西泉4-11　MEGAドン・キホーテ」271.0px → 余裕56.3px
     　　　  最終行「ラパーク金沢店1F」116.0px ＋ マーク57.4px = 173.4px
     御経塚  1行「野々市市御経塚1-525　清泉SIDE D-1」247.2px ＋ 57.4 = 304.6px → 余裕22.7px
     近岡    1行157.8px ＋ 57.4 = 215.2px → 余裕112.1px */
.footer-store-addr {
  display: block;
  margin: auto 0 0;          /* カード高さが違っても住所は下端に揃える */
  font-size: 0.83rem;
  color: var(--text-light);
  line-height: 1.5;
}
/* 駐車場マーク：リンクではないので §3 の「四角角丸6px・白地・枠線」に従う。
   文字色 --color-blue-ink は白地 6.02 でAA適合 */
.footer-store-park {
  float: right;
  margin-left: 6px;
  box-sizing: border-box;
  padding: 1px 6px;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  background: #fff;
  font-size: 0.78rem;        /* 14.04px＝§5の下限 */
  font-weight: 700;
  line-height: 1.5;
  color: var(--color-blue-ink);
  white-space: nowrap;
}

/* ------- 下部エリア（電話番号のみ） ------- */
/* ご指定どおり --gradient-blue。白文字のコントラストは 2.91→2.22 で
   AA(4.5)未達。数値を満たすなら linear-gradient(120deg,#0065B0,#01A0E9)（6.02→2.91）か
   単色 var(--color-blue-ink)（6.02）に差し替えれば1行で解決する（指示書§8-A）
   ※v16で未使用トークン --gradient-deep を削除したため、値を直書きしてある */
.footer-store-tel {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 11px 10px;
  background: var(--gradient-blue);
  font-size: 1.0rem;         /* 電話応募の導線。40代以上向けに本文サイズを維持 */
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.02em;
  color: #fff;
}
/* 電話マーク（白抜き）。SVGをマスクにして currentColor（＝#fff）で塗るので、
   帯の地色を変えてもアイコン色が自動で追従する（v14） */
.footer-store-tel::before {
  content: '';
  width: 1.05em;
  height: 1.05em;
  margin-right: 7px;
  flex-shrink: 0;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml;utf8,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%3E%3Cpath%20d=%22M6.6%2010.8c1.4%202.8%203.8%205.2%206.6%206.6l2.2-2.2c.3-.3.7-.4%201-.2%201.1.4%202.4.6%203.6.6.6%200%201%20.4%201%201V20c0%20.6-.4%201-1%201C10.6%2021%203%2013.4%203%204c0-.6.4-1%201-1h3.5c.6%200%201%20.4%201%201%200%201.3.2%202.5.6%203.6.1.4%200%20.8-.2%201l-2.3%202.2z%22/%3E%3C/svg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml;utf8,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%3E%3Cpath%20d=%22M6.6%2010.8c1.4%202.8%203.8%205.2%206.6%206.6l2.2-2.2c.3-.3.7-.4%201-.2%201.1.4%202.4.6%203.6.6.6%200%201%20.4%201%201V20c0%20.6-.4%201-1%201C10.6%2021%203%2013.4%203%204c0-.6.4-1%201-1h3.5c.6%200%201%20.4%201%201%200%201.3.2%202.5.6%203.6.1.4%200%20.8-.2%201l-2.3%202.2z%22/%3E%3C/svg%3E") no-repeat center / contain;
}
.footer-store-tel:hover { opacity: 0.85; }

/* 横並び3つだと1枚あたりが狭くなる幅では、1枚ずつ縦に3段へ。
   切替点は 900px → 999px →（v14）1149px。
   1000〜1149pxでは1枚309px・内側287pxしかなく、v14で住所の右端に
   駐車場マーク（57.4px）を足したことで御経塚店の1行が収まらなくなる。
   サイト全体の切替点（ヘッダー・GM・固定ナビ）も1150pxに揃えたので、
   ここも同じ線にする。1150px以上なら1枚349.3px・内側327.3pxで確定 */
@media screen and (max-width: 1149px) {
  .footer-store-list {
    grid-template-columns: 1fr;
    width: 100%;
    max-width: 420px;
    gap: 10px;
  }
  /* 縦3段になると3:2の写真では1枚あたりが高くなりすぎる（398×265px）。
     16:9に浅くしてフッター全体の丈を約240px縮める */
  .footer-store-photo-wrap { aspect-ratio: 16 / 9; }
}

/* フッター下段（SNS・コピーライト） */
.footer-bottom {
  display: flex;
  flex-direction: column;
  align-items: center;
  border-top: 1px solid var(--border-color);
  padding-top: 30px;
}

/* SNSアイコン（ul使用のためリストマーカーを消す） */
.footer-sns {
  display: flex;
  gap: 30px;
  margin: 0 0 20px;
  padding: 0;
  list-style: none;
}
.footer-sns img { width: 24px; }

.copyright { font-size: 0.8rem; color: var(--text-light); letter-spacing: 0.1em; }

@media screen and (max-width: 768px) {
  .sitemap-grid { grid-template-columns: 1fr; text-align: left; font-size: 0.82rem; gap: 14px; }
  .footer-bottom { align-items: flex-start; }
}

/* 下部固定ナビ（実測高さ72.8px）にフッター末尾が隠れないよう余白を確保。
   固定ナビの切替点に合わせて 768→1149px に拡張（v14） */
@media screen and (max-width: 1149px) {
  .footer { padding-bottom: 100px; }
}

/* ============================================================
   パンくずリスト（全サブページ共通・SEO＋回遊性）
============================================================ */
.breadcrumb { padding: 14px 0 0; }
.breadcrumb-list {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 0;
  margin: 0;
  padding: 0;
  font-family: var(--font-gothic);
  font-size: 0.83rem;
  line-height: 1.6;
  color: var(--text-light);
}
.breadcrumb-list li { display: flex; align-items: center; }
.breadcrumb-list li + li::before {
  content: '›';
  margin: 0 8px;
  color: var(--color-blue-ink);
}
.breadcrumb-list a { color: var(--text-light); }
.breadcrumb-list a:hover { color: var(--color-blue-ink); opacity: 1; }
.breadcrumb-list [aria-current="page"] { color: var(--text-main); }
@media screen and (max-width: 768px) {
  .breadcrumb { padding: 10px 0 0; }
  .breadcrumb-list { font-size: 0.78rem; }
}

/* ============================================================
   お問い合わせ：お祝い金の注記（/contact/ CF7本文で使用）
============================================================ */
.contact-bonus-note {
  margin: 0 0 24px;
  text-align: center;
  font-size: 0.85rem;
  line-height: 1.8;
  color: var(--color-pink-text);
}

/* ============================================================
   PCグローバルナビ（ヘッダー内・1段／親会社サイトに合わせて全幅）
   ・PCではハンバーガーを出さず、主要導線を常時表示する
   ・下層は画面幅いっぱいのパネル。丸サムネ＋日本語ラベル＋矢印
   ・ホバーではなくクリック開閉
     （40代以上はマウス操作の精度差が出やすく、ホバー式は
      「通り過ぎると閉じる」ためストレスになりやすい）
   ・幅の余裕に応じて タグライン → ナビ拡大 → 電話番号 の順に足していく
============================================================ */
.header-actions { display: none; }
.pc-gnav { display: none; }

@media screen and (min-width: 1150px) {
  /* ヘッダーを画面幅いっぱいに
     ⚠ padding / gap はここに書かない。同じ min-width:1150px のブロックが後ろにあり
       （.menu-toggle を消しているブロック）、同じ詳細度なので後勝ちで無効になる。
       実効値は後段の 10px 24px / gap 18px、1600px以上で 10px 28px / gap 22px。 */
  .header-inner {
    max-width: none;
  }
  .header-left { flex-shrink: 0; }

  .header-actions {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-shrink: 0;
    margin-left: auto;
  }
  .header-tel { display: none; }   /* 1750px以上でのみ表示 */
  .header-cta {
    display: inline-flex;
    align-items: center;
    min-height: 46px;
    padding: 0 20px;
    font-family: var(--font-gothic);
    font-size: 0.8rem;
    font-weight: 500;
    white-space: nowrap;
    box-shadow: 0 3px 10px rgba(34, 34, 34, 0.16);
    transition: opacity 0.2s ease, transform 0.2s ease;
  border-radius: 999px;
  background: var(--gradient-blue);
  color: #fff;
  border: 0;
}
  .header-cta:hover { opacity: 0.9; transform: translateY(-1px); }
}

/* ------------------------------------------------------------
   1150px以上：ハンバーガーをやめて横並びナビに切り替える（v14で1000→1150px）
   実測：左右padding48＋ロゴ48.6＋ナビ537.8（アイコン込み）＋CTA198.4＋gap36
   = 868.8px。＋gap12＋タグライン188.9＝1069.7px。1150pxで80.3pxの余裕。
   v13は1000pxから横並びにしていたが、その帯ではタグラインが入らず
   「タグラインだけ消えるpattern」が生まれていた。表示をPC/SPの2つに絞るため、
   タグラインまで揃う1150pxを唯一の切替点にした。
   左右padding 10px は1200px以上で戻す。
------------------------------------------------------------ */
@media screen and (min-width: 1150px) {
  .menu-toggle { display: none; }
  .header-inner { padding: 10px 24px; gap: 18px; }
  .header-left { gap: 12px; }
  .logo img { height: 58px; }
  /* タグラインはPC展開では常時表示（v13の1150px専用ブロックをここへ統合） */
  .header-text {
    display: block;
    font-size: clamp(8.5px, 0.72vw, 12.5px);
    line-height: 1.45;
  }

  .pc-gnav { display: block; flex: 1 1 auto; min-width: 0; }
  .pc-gnav-list {
    display: flex;
    justify-content: center;
    list-style: none;
    margin: 0;
    padding: 0;
  }
  /* パネルをヘッダー基準で全幅にするため、li は positioned にしない */
  .pc-gnav-item { position: static; }

  .pc-gnav-link,
  .pc-gnav-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    min-height: 56px;
    padding: 0 7px;   /* 1200px以上で10pxに戻す */
    margin: 0;
    border: 0;
    background: none;
    cursor: pointer;
    /* 常時表示の第1階層は明朝。ドロップダウン内はゴシックのままにして階層差をつける */
    font-family: var(--font-mincho);
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--text-main);
    white-space: nowrap;
    transition: color 0.2s ease;
  }
  .pc-gnav-icon {
    width: 20px;
    height: 20px;
    object-fit: contain;
    flex-shrink: 0;
  }
  .pc-gnav-link:hover,
  .pc-gnav-btn:hover,
  .pc-gnav-btn[aria-expanded="true"] { color: var(--color-blue-ink); }

  .pc-gnav-caret {
    width: 6px;
    height: 6px;
    margin-left: 1px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: translateY(-2px) rotate(45deg);
    transition: transform 0.2s ease;
  }
  .pc-gnav-btn[aria-expanded="true"] .pc-gnav-caret { transform: translateY(1px) rotate(225deg); }

  /* --- 全幅ドロップダウンパネル --- */
  .pc-gnav-panel {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    /* FVの帯と同じ水色。文字はすべて白タイルの上に載せるので 5.61〜12.50 を確保できる。
       この面に直接白文字を置くと 2.20 になるため、白文字は使わない */
    background: var(--color-mauve-light);
    border-top: 0;
    border-radius: 0;
    box-shadow: 0 16px 30px rgba(34, 34, 34, 0.13);
    z-index: 1001;
  }
  /* 3カラム→4カラム。1セルを約380px→約250pxに詰めて、
     写真・文字・矢印を1つのかたまりとして読ませる（視線の移動距離を短くする） */
  .pc-gnav-sub {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    /* box-sizing を直して gap が実寸で出るようになったので 18→10px に戻す */
    gap: 10px;
    max-width: 1060px;
    margin: 0 auto;
    padding: 24px 24px 28px;
    list-style: none;
  }
  /* 各項目に淡い面を敷いてタイル化する。輪郭があると視線が迷いにくい */
  .pc-gnav-sub a {
    display: flex;
    align-items: center;
    gap: 12px;
    height: 100%;
    /* このCSSには全体の box-sizing リセットが無い。border-box を付けないと
       height:100%（＝グリッドセルの高さ）に上下padding 10px×2 が加算され、
       タイルがセルから20px下にはみ出して行間を塗りつぶす。
       gap を 10→16→18px と広げても隙間が出なかったのはこれが原因 */
    box-sizing: border-box;
    padding: 10px 12px;
    /* 角丸をやめて四角に。角丸12pxだと隣接したタイルの角が寄って
       1枚につながって見えるため、直線の辺で切る */
    border-radius: 0;
    /* 濃い面に白タイル（セイバン型）。暗いタイルは面と溶けて重く見えたため反転。
       タイル面積がパネルの約7割を占めるので、パネル全体の印象も明るくなる */
    background: #ffffff;
    transition: background-color 0.2s ease;
  }
  .pc-gnav-sub a:hover { background: var(--color-champagne); }
  /* 丸→角丸の正方形。輪郭が揃うぶん一覧が整って見える */
  .gn-thumb {
    width: 52px;
    height: 52px;
    border-radius: 0;
    /* nav-company.png のみ縦長(175×209)。cover だと上下が切れるため contain。
       他はすべて正方形なので contain でも見た目は変わらない */
    object-fit: contain;
    flex-shrink: 0;
    background: #fff;
  }
  /* 店舗ロゴ＋店名のかたまり。1199px以下では中身がラベル1つだけなので、
     従来の「サムネ｜ラベル｜矢印」の横並びと見た目は変わらない */
  .gn-name {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
  }
  /* 店舗ロゴは写真タイプ（1200px以上）でだけ出す。
     2カラムのタイル表示では横幅が足りず店名が折り返してしまうため */
  .gn-store-logo { display: none; }
  /* 種別ラベルも同じ理由で写真タイプのみ */
  #gn-shop .store-type-tags { display: none; }

  /* flex:1 をやめて、矢印をラベルの直後に置く（従来は右端まで約300px離れていた） */
  .gn-label {
    flex: 0 1 auto;
    font-family: var(--font-gothic);
    font-size: 0.88rem;
    font-weight: 500;
    line-height: 1.45;
    color: var(--text-main);   /* 白タイル上で 12.50 */
  }
  .gn-arrow {
    flex-shrink: 0;
    align-self: center;
    width: 6px;
    height: 6px;
    margin-left: 2px;
    border-right: 1.5px solid var(--color-blue-ink);
    border-top: 1.5px solid var(--color-blue-ink);
    transform: rotate(45deg);
  }

  /* --- パネル別の調整（指定の改行位置どおりに収めるため） --- */
  /* ⚠ #gn-shop の max-width と gn-label の font-size はここに書かない。
     v14で店舗案内パネルを「左に見出し＋右に写真3枚」に組み替えた後段のブロックが
     同じ min-width:1150px かつ同じ詳細度で後ろにあり、後勝ちで無効になる。
     実効値は max-width:1220px（同値）／font-size は 100cqi 基準の clamp()。 */
  /* 私たちについて：「プライバシーポリシー」を1行に。
     10文字×14.4px＝144px（使える幅150px） */
  #gn-about .gn-label { font-size: 0.8rem; }
  /* nowrap で <br> の位置以外では折り返させない（改行位置を固定する） */
  #gn-shop .gn-label,
  #gn-about .gn-label,
  #gn-recruit .gn-label { white-space: nowrap; }
}

/* ============================================================
   v14：PCのGM（ドロップダウン）の展開を1パターンに統一
   ------------------------------------------------------------
   v13までは 1000〜1199px だけ別の展開になっていた。
     ・全パネル … 4カラム → 2カラム
     ・店舗案内 … 写真タイプ → 白タイル（店舗ロゴ・種別ラベルなし）
   さらにPC開始幅が1000→1150pxになったため、この帯自体が無くなった。
   「幅が狭くなっても広いときと同じ展開にしたい」というご指定により、
   PCナビが出る 1150px 以上は常に広いときの展開にする。
   構造は変えず、足りない幅は余白・サムネ・ロゴ・文字を一段詰めて吸収する。
   （2カラムへの切り替えは廃止。SPは従来どおり768px以下のハンバーガー）
============================================================ */
@media screen and (min-width: 1150px) {
  /* ------------------------------------------------------------
     店舗案内パネルだけ「左に見出し＋右に大きな写真3枚」に切り替える。
     HTMLは他パネルと共通のままで、CSSだけで組み替えている。
     ・1列目 = 店舗案内トップ（サムネを隠して見出し扱い・丸ボタンの矢印）
     ・2〜4列目 = 店舗写真を4:3で大きく出し、店名を下に白文字で置く
     白文字は #0065B0 地で 6.02。18.9px の太字は WCAG の大きい文字
     （14pt太字以上）に該当し基準3.0なので、これを満たす前提のサイズ指定。
     v14：PCの全幅（1150px以上）でこの展開に統一した。店名を0.9remに
     揃えたことで、最狭の1150pxでも寸法を詰めずにそのまま収まる。
  ------------------------------------------------------------ */
  /* 店名の先頭に店舗ロゴを置いたぶん、1列あたりの必要幅が増えた。
     ロゴ最大45.3px（3be.png を高さ26pxに揃えたとき）＋gap 8＝53.3px。
     店名「メガドン・キホーテ西泉店」は 1.0rem(18px) 太字で実測216.0px。
     必要幅 216.0＋53.3＝269.3px。
     max-width 1220px なら 1列 =(1220-48-200-54)/3= 306px、
     タイル内側は 286px なので余裕16.7px で収まる（旧1100pxでは46px不足） */
  #gn-shop .pc-gnav-sub {
    grid-template-columns: 200px repeat(3, 1fr);
    gap: 18px;
    max-width: 1220px;
    padding: 28px 24px 32px;
  }
  /* 店名は 0.9rem(16.2px) 太字でPC全域に統一（v14）。
     v13は1.0rem(18px)で、1150〜1199pxだけ0.9remに落とす2段階になっていた。
     小さい方に寄せることで、PC内の文字サイズの段差が無くなる。
     必要幅「メガドン・キホーテ西泉店」216.0px×0.9＝194.4px（§5の下限14pxはクリア）
     最狭の1150pxで 1列=(1102−見出し列200−gap18×3)÷3=282.7、タイル内側262.7、
     必要=194.4＋ロゴ37.8＋gap8=240.2 → 余裕22.5px（Chromium実測22.5px） */
  #gn-shop .gn-label { font-size: 0.9rem; font-weight: 700; }

  #gn-shop .pc-gnav-sub li:first-child a,
  #gn-shop .pc-gnav-sub li:first-child a:hover {
    background: transparent;
    box-shadow: none;
  }
  /* 見出しは面に直接載るので、白ではなく本文色（#18BFD7 地で 5.69） */
  #gn-shop .pc-gnav-sub li:first-child a {
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 14px;
    padding: 10px 22px 10px 4px;
    border-right: 1px solid rgba(38, 54, 62, 0.25);
    border-radius: 0;
  }
  #gn-shop .pc-gnav-sub li:first-child .gn-thumb { display: none; }
  /* 見出しは白抜き（ご指定）。#18BFD7 地に白は 2.22 で AA(4.5) 未達。
     数値を満たすなら地を var(--color-blue-ink) にすると 6.02 になる（指示書§8-A） */
  #gn-shop .pc-gnav-sub li:first-child .gn-label { color: #fff; }
  #gn-shop .pc-gnav-sub li:first-child .gn-arrow {
    width: 32px;
    height: 32px;
    margin: 0;
    border: 1px solid rgba(255, 255, 255, 0.8);
    border-radius: 50%;
    transform: none;
    position: relative;
  }
  #gn-shop .pc-gnav-sub li:first-child .gn-arrow::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 46%;
    width: 6px;
    height: 6px;
    border-right: 1.5px solid #fff;
    border-top: 1.5px solid #fff;
    transform: translate(-50%, -50%) rotate(45deg);
  }
  /* 見出し列の区切り線も白系に揃える */
  #gn-shop .pc-gnav-sub li:first-child a {
    border-right-color: rgba(255, 255, 255, 0.55);
  }

  /* 写真＋店名を白い箱に入れる。店名は青文字（白地 5.61） */
  #gn-shop .pc-gnav-sub li:not(:first-child) a {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    padding: 10px 10px 12px;
    border-radius: 0;
  }
  #gn-shop .pc-gnav-sub li:not(:first-child) .gn-thumb {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    border-radius: 0;
    object-fit: cover;
    transition: opacity 0.2s ease;
  }
  /* タイルを基準にして、店名の文字サイズとロゴの大きさを幅から決める */
  #gn-shop .pc-gnav-sub li:not(:first-child) a {
    position: relative;
    container-type: inline-size;
  }
  /* 店名は1行・左右センター（白タイル上で 12.63）。
     「2Weeks plus メガドン・キホーテ西泉店」は font-size:100px 時に1831px。
       f =（100cqi − 余白6px）÷ 18.31（上限0.9rem＝16.2px）
     Chromium実測：1150px→14.0px（下限ちょうど）／1200px→14.9px／1280px以上→16.2px。
     ⚠ 店名を1文字でも増やすと1150pxで14pxを割るので、変えたら実測し直すこと。 */
  #gn-shop .pc-gnav-sub li:not(:first-child) .gn-label {
    color: var(--text-main);
    text-align: center;
    line-height: 1.45;
    white-space: nowrap;
    font-size: 0.9rem;   /* cqi非対応ブラウザ用フォールバック */
    font-size: clamp(12.5px, calc((100cqi - 6px) * 0.0546), 16.2px);
  }
  /* 店舗ロゴ：写真の左上に重ねる。高さ12.5cqi＝写真の高さ（0.75×幅）の約1/6。
     写真の柄によっては沈むので、白い下地を薄く敷いて輪郭を確保する */
  #gn-shop .pc-gnav-sub li:not(:first-child) .gn-store-logo {
    display: block;
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 2;
    width: auto;
    height: 12.5cqi;
    padding: 4px 6px;
    box-sizing: content-box;
    background: rgba(255, 255, 255, 0.92);
    border-radius: 3px;
    object-fit: contain;
  }
  #gn-shop .pc-gnav-sub li:not(:first-child) .gn-name { align-items: center; justify-content: center; }
  /* 種別ラベルは店名の下に1つずつ */
  /* 店名とラベルは1つのかたまりに見せたいので、
     列のgap 10px を margin で 6px まで詰める */
  #gn-shop .pc-gnav-sub li:not(:first-child) .store-type-tags {
    display: flex;
    justify-content: center;   /* 店名と揃えて左右センター */
    margin-top: -4px;
  }
  #gn-shop .pc-gnav-sub li:not(:first-child) .gn-arrow { display: none; }
}

/* 1200px以上：ナビの左右padding 10px を戻す（＝従来のデザイン） */
@media screen and (min-width: 1200px) {
  .pc-gnav-link,
  .pc-gnav-btn { padding: 0 10px; }
}

/* 1280px以上：ナビを一段大きく（14.4px → 16.2px）
   縦長ロゴで横幅が約81px空いたため、旧1360pxから前倒しできた */
@media screen and (min-width: 1280px) {
  .pc-gnav-link,
  .pc-gnav-btn { font-size: 0.9rem; padding: 0 13px; gap: 7px; }
  .pc-gnav-icon { width: 24px; height: 24px; }
  .header-cta { font-size: 0.85rem; padding: 0 22px; }
}

/* 1600px以上：さらに一段大きく（16.2px → 18px）＋ロゴも戻す */
@media screen and (min-width: 1600px) {
  .header-inner { padding: 10px 28px; gap: 22px; }
  .header-left { gap: 14px; }
  .logo img { height: 66px; }
  .pc-gnav-link,
  .pc-gnav-btn { font-size: 1.0rem; padding: 0 15px; gap: 8px; }
  .pc-gnav-icon { width: 28px; height: 28px; }
  .header-cta { font-size: 0.9rem; padding: 0 24px; min-height: 48px; }
}

/* 1750px以上：電話番号も出す */
@media screen and (min-width: 1750px) {
  .header-tel {
    display: block;
    font-family: var(--font-gothic);
    font-size: 1.0rem;
    font-weight: 600;
    color: var(--color-blue-ink);
    letter-spacing: 0.02em;
    white-space: nowrap;
    line-height: 1.2;
  }
  .header-tel-label {
    margin-right: 6px;
    font-size: 0.72rem;
    font-weight: 400;
    color: var(--text-light);
  }
}

/* ============================================================
   フッター：本社への電話（全ページ共通）
   サイトマップの「採用お問い合わせ・ご応募」ボタンの直下に置き、
   ボタンと同じ幅（max-width 240px）に揃えている。
   文字は --color-blue-ink（白地 6.02）。塗り＋白抜きにすると 2.91 まで落ちるため、
   ここは白地＋枠線で見せる。
============================================================ */
/* 電話番号の楕円。フッター／/contact/ ／お問い合わせフォームの中で共用する。
   ⚠ 場所ごとに書き分けないこと。ここだけ直せば3か所とも揃う。 */
.footer-hq-tel-num {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: fit-content;
  max-width: 100%;
  margin: 0 auto;
  box-sizing: border-box;
  padding: 6px 14px;
  border: 2px solid var(--color-mauve);
  border-radius: 999px;
  background: #fff;
  font-family: var(--font-gothic);
  font-size: 1.24rem;          /* 22.32px */
  font-weight: 700;
  line-height: 1.25;
  color: var(--color-blue-ink);/* 白地 6.02 */
  text-decoration: none;
  letter-spacing: 0.01em;
  white-space: nowrap;
}
/* サイトマップ内だけ、CTAボタンと幅を揃える */
.sitemap-cta-btn,
.sitemap-tel .footer-hq-tel-num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 240px;
  box-sizing: border-box;
}
.sitemap-tel { margin-top: 8px; }
/* ⚠ margin:0 が必須。基底の .footer-hq-tel-num は margin:0 auto（中央寄せ）なので、
   打ち消さないとサイトマップ列の中で中央に寄り、上のCTAボタンと左端がズレる（実測53px）。 */
.sitemap-tel .footer-hq-tel-num { padding: 6px 12px; margin: 0; }
.footer-hq-tel-num::before {
  content: '';
  width: 0.86em;
  height: 0.86em;
  flex-shrink: 0;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M6.6 10.8c1.4 2.8 3.8 5.1 6.6 6.6l2.2-2.2c.3-.3.7-.4 1-.2 1.2.4 2.4.6 3.6.6.6 0 1 .4 1 1V20c0 .6-.4 1-1 1C10.6 21 3 13.4 3 4c0-.6.4-1 1-1h3.5c.6 0 1 .4 1 1 0 1.3.2 2.5.6 3.6.1.4 0 .8-.2 1l-2.3 2.2z'/></svg>") no-repeat center / contain;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M6.6 10.8c1.4 2.8 3.8 5.1 6.6 6.6l2.2-2.2c.3-.3.7-.4 1-.2 1.2.4 2.4.6 3.6.6.6 0 1 .4 1 1V20c0 .6-.4 1-1 1C10.6 21 3 13.4 3 4c0-.6.4-1 1-1h3.5c.6 0 1 .4 1 1 0 1.3.2 2.5.6 3.6.1.4 0 .8-.2 1l-2.3 2.2z'/></svg>") no-repeat center / contain;
}
.footer-hq-tel-name {
  font-size: 0.78rem;          /* 14.04px＝下限ちょうど */
  font-weight: 500;
  color: var(--text-main);
  letter-spacing: 0.04em;
}

/* /contact/ ページ上部の電話ブロック（benefitup-child/page-contact.php）。
   フッターの本社TELと同じ楕円を使い回すため .footer-hq-tel-num をそのまま当てている。
   .sitemap-tel 配下ではないので、幅と余白だけここで補う。 */
.contact-tel-lead {
  max-width: 480px;
  margin: 0 auto 28px;
  text-align: center;
}
.contact-tel-lead .footer-hq-tel-num { width: 100%; max-width: 240px; }
.contact-tel-lead-label {
  margin: 0 0 10px;
  font-family: var(--font-gothic);
  font-size: 0.89rem;          /* 16.02px */
  font-weight: 500;
  color: var(--text-main);
}
.contact-tel-lead-note {
  margin: 10px 0 0;
  font-family: var(--font-gothic);
  font-size: 0.78rem;          /* 14.04px */
  color: var(--text-light);    /* 白地 5.74 */
  line-height: 1.6;
}

/* ============================================================
   左の固定ナビ「求人概要」の右に出すお祝い金バッジ（PC＝1150px以上のみ）
   縦書き・--color-pink-bright の楕円・白抜き（ご指定。白抜き2.86／基準4.5・§9扱い）
============================================================ */
.fn-bonus {
  position: absolute;
  left: 100%;
  top: 50%;
  transform: translateY(-50%);
  margin-left: 7px;
  writing-mode: vertical-rl;
  text-orientation: upright;
  background: var(--color-pink-bright);
  color: #fff;
  border-radius: 999px;
  padding: 12px 5px;
  font-family: var(--font-gothic);
  font-size: 0.78rem;          /* 14.04px＝下限ちょうど */
  font-weight: 500;            /* 700 から一段細く */
  line-height: 1;
  letter-spacing: 0.04em;
  white-space: nowrap;
  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.08);
}
.floating-nav .fn-job { position: relative; overflow: visible; }
/* 1149px以下は下部の横バーになるので出さない */
@media screen and (max-width: 1149px) {
  .fn-bonus { display: none; }
}