@charset "UTF-8";
/**
 * common.css -- 全ページ共通部分だけのスタイル
 *
 * 前提: Bootstrap 5.3 を先に読み込む。
 *   reboot / .container / .row / .col-* / ユーティリティ / .btn / .card /
 *   .accordion / .breadcrumb / .table は Bootstrap のものをそのまま使う。
 *   ここに書くのは「Bootstrap に無い自社固有の部品」だけ。
 *
 * 目次
 *   1. デザイントークン
 *   2. ベース（Bootstrap への上書きは最小限）
 *   3. アイコン
 *   4. ボタン（Bootstrap .btn のバリアントとして定義）
 *   5. ヘッダー
 *   6. グローバルナビ／メガメニュー
 *   7. ローカルナビ（スクロールで出るカテゴリバー）
 *   8. フッター
 *   9. SP固定CTAバー
 *  10. パンくず
 *  11. モーション設定
 *
 * 規約
 * - モバイルファースト。部品ごとに base → @media の順で1か所にまとめる。
 * - デスクトップ切り替えは 1200px の1か所だけ。assets/js/common.js の
 *   DESKTOP_QUERY と対で管理する。
 */

/* 1. デザイントークン
--------------------------------------------- */
:root {
  /* Layout */
  --header-height: 3.5rem;
  --local-nav-height: 3rem;
  /* ローカルナビが出るまでのスクロール量。しきい値はCSS側の設計値。 */
  --local-nav-offset: 50svh;

  /* Color */
  --color-black: #111111;
  --color-white: #ffffff;
  --color-blue: #254ac8;
  /* ブランドのアクセント。グラデーションの終点色。 */
  --color-pink: #e4007f;
  /* 白地に対して約 7:1。旧 #6e6e73 は 4.7:1 で AA ぎりぎりだった。 */
  --color-gray: #55575e;
  /**
   * ブランドのグラデーション。斜めだが回り込ませない。
   *
   * 45deg が破綻するのは、勾配軸に対して左上の角が左下より先に進むため。
   * 横長のボタンではその差が軸長の3割以上になり、左上がピンク側へ入る。
   * 角度を水平から25度（65deg）に寝かせると、その差は軸長の13〜17%まで
   * 縮む。そこに「35%までは青のまま」を重ねて、左端の角が必ず青の区間に
   * 収まるようにしてある。縦長でなければ回り込まない。
   */
  --gradient-brand: linear-gradient(65deg, var(--color-blue) 0%, var(--color-blue) 35%, var(--color-pink) 100%);
  /* 不透明の薄いグレー。半透明（rgba(0,0,0,0.12)）だと線の色が下に何が
     あるかで変わる。固定CTAバーの区切り線は白い本文の上では薄いグレー、
     黒いフッターに重なると真っ黒になっていた。
     白地での見え方は従来と同じ値（rgba(0,0,0,0.12) over #fff = #e0e0e0）。 */
  --color-border: #e0e0e0;
  --color-border-dark: rgba(255, 255, 255, 0.14);
  --surface-subtle: #f7f7f9;
  --glass-background: rgba(255, 255, 255, 0.82);
  --glass-blur: 1.5rem;
  --glass-saturation: 180%;

  /* Motion */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-emphasized: cubic-bezier(0.22, 1, 0.36, 1);
  --transition-fast: 0.16s var(--ease-standard);
  --transition-default: 0.28s var(--ease-standard);
  --transition-emphasized: 0.42s var(--ease-emphasized);

  /* Type scale */
  --font-size-s2: 0.75rem;
  --font-size-s1: 0.875rem;
  --font-size-base: 1rem;
  --font-size-l1: 1.25rem;
  --font-size-l2: 1.5rem;

  /**
   * アイコン幾何。--icon-line-width だけ絶対 px。rem にすると SP のルート
   * サイズで 0.875px になり、線がデバイスの2行にまたがって太さが揺れる。
   */
  --icon-line-width: 1px;
  --icon-menu-width: 1.25rem;
  --icon-plus-width: 0.875rem;
  --icon-gap: 0.25rem;

  /* マスク本体。同じ形をパンくずの区切りでも使うので、URIは1か所に置く。 */
  --icon-home-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='560' height='631.54' viewBox='200 -791.54 560 631.54' fill='%23000000'%3E%3Cpath d='M240-200h147.69v-235.38h184.62V-200H720v-360L480-741.54 240-560v360Zm-40 40v-420l280-211.54L760-580v420H532.31v-235.38H427.69V-160H200Zm280-310.77Z'/%3E%3C/svg%3E");
  --icon-down-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='424.62' height='240.62' viewBox='267.69 -612.31 424.62 240.62' fill='%23000000'%3E%3Cpath d='M480-371.69 267.69-584 296-612.31l184 184 184-184L692.31-584 480-371.69Z'/%3E%3C/svg%3E");
  --icon-right-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240.62' height='424.62' viewBox='347.69 -692.31 240.62 424.62' fill='%23000000'%3E%3Cpath d='m531.69-480-184-184L376-692.31 588.31-480 376-267.69 347.69-296l184-184Z'/%3E%3C/svg%3E");

  /* Bootstrap 側のトークンを自社トークンに合わせる（個別上書きを不要にする） */
  --bs-body-color: var(--color-black);
  --bs-body-font-family:
    system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Sans",
    "Hiragino Kaku Gothic ProN", "Yu Gothic", "YuGothic", "Meiryo", sans-serif;
  --bs-body-line-height: 1.6;
  --bs-primary: var(--color-blue);
  --bs-link-color-rgb: 37, 74, 200;
  --bs-border-color: var(--color-border);
  --bs-secondary-color: var(--color-gray);
  /* .bg-body-tertiary は --bs-tertiary-bg ではなく -rgb の方を見るので、
     両方そろえないとユーティリティだけ Bootstrap 既定の #f8f9fa のまま
     残り、CSS で塗った面と 1 だけずれる。 */
  --bs-tertiary-bg: var(--surface-subtle);
  --bs-tertiary-bg-rgb: 247, 247, 249;
}

/* 2. ベース
--------------------------------------------- */
/* ルートサイズを段階的に上げる。px 指定のブレークポイントと max-width は
   Bootstrap の値のままなので、カラム幅は動かず文字だけが大きくなる。 */
html {
  font-size: 87.5%;
  scroll-behavior: smooth;
  scroll-padding-top: var(--local-nav-height);
}
@media (min-width: 768px) {
  html { font-size: 93.75%; }
}
@media (min-width: 1200px) {
  html { font-size: 100%; }
}
body {
  min-width: 20rem;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
/* ドロワーを開いている間だけ背面のスクロールを止める。 */
body.is-drawer-open {
  overflow: hidden;
  overscroll-behavior: none;
}
a {
  color: inherit;
  text-decoration: none;
}
:where(a, button):focus-visible {
  outline: 0.125rem solid var(--color-blue);
  outline-offset: 0.1875rem;
}
/* ナビを飛ばすキーボード用ショートカット。回り込ませずに重ねる。 */
.skip-link {
  position: fixed;
  z-index: 2000;
  top: 0.5rem;
  left: 0.5rem;
  padding: 0.75rem 1.25rem;
  color: var(--color-white);
  background: var(--color-black);
  border-radius: 0.5rem;
  font-size: var(--font-size-s1);
  font-weight: 600;
}
.skip-link:not(:focus) {
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* 3. アイコン
--------------------------------------------- */
/**
 * 単色アイコンはマスク。形を SVG、色を background-color が受け持つので、
 * 1つのマスクがどの背景色でも使える。
 *
 * マスクは外部ファイル参照ではなくデータURIで持つ。WebKit は外部 SVG を
 * マスクにすると (1) fill="currentColor" を透明に解決し、(2) 固有サイズの
 * ない SVG に対して mask-size: contain を解決できず、いずれも空になる。
 *
 * パンくずの区切りは Bootstrap の ::before なので <span class="icon"> に
 * できない。仕組みの部分だけここで共有し、箱の大きさとマスクの絵柄は
 * 使う側がそれぞれ決める。
 */
.icon,
.breadcrumb-item + .breadcrumb-item::before {
  display: inline-block;
  background-color: currentColor;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
}
.icon {
  width: 1em;
  height: 1em;
  flex: 0 0 auto;
}
/* font-size がアイコンの「高さ」。幅は字形の縦横比ぶんだけ狭める。
   マスクの viewBox は字形ぴったりに詰めてあるので、箱＝見た目の大きさ。
   シェブロンは線が斜めで先が尖っているぶん、同じ高さの文字より大きく
   見える。数値は文字より一段小さいところに置いてある。 */
.icon-s { font-size: 0.625rem; }
.icon-m { font-size: 0.875rem; }
.icon-home {
  width: 0.887em;
  -webkit-mask-image: var(--icon-home-mask);
  mask-image: var(--icon-home-mask);
}
.icon-right {
  width: 0.567em;
  -webkit-mask-image: var(--icon-right-mask);
  mask-image: var(--icon-right-mask);
}

.icon-down {
  height: 0.567em;
  -webkit-mask-image: var(--icon-down-mask);
  mask-image: var(--icon-down-mask);
}

/* 4. ボタン
--------------------------------------------- */
/**
 * Bootstrap の .btn はバリアントを CSS 変数だけで定義できる。
 * 自前のベースクラスは持たず、変数ブロックだけを足す。
 */
.btn {
  --bs-btn-border-radius: 999rem;
  --bs-btn-font-weight: 600;
  --bs-btn-padding-y: 0.75em;
  --bs-btn-padding-x: 1.5em;
  --bs-btn-line-height: 1;
  display: inline-flex;
  min-height: 2.75rem;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  white-space: nowrap;
  transition: filter var(--transition-fast), background-color var(--transition-fast), border-color var(--transition-fast);
}
.btn-sm {
  --bs-btn-padding-y: 0.65em;
  --bs-btn-padding-x: 1.25em;
  --bs-btn-font-size: var(--font-size-s2);
  min-height: 2.25rem;
}
.btn-brand {
  --bs-btn-color: var(--color-white);
  --bs-btn-bg: var(--color-blue);
  --bs-btn-border-color: var(--color-blue);
  --bs-btn-hover-color: var(--color-white);
  --bs-btn-hover-bg: #2c56e4;
  --bs-btn-hover-border-color: #2c56e4;
  --bs-btn-active-bg: #1f3fae;
  --bs-btn-active-border-color: #1f3fae;
}
/* ローカルナビの主導線だけに使うブランドのグラデーション。 */
.btn-gradient {
  --bs-btn-color: var(--color-white);
  --bs-btn-hover-color: var(--color-white);
  --bs-btn-active-color: var(--color-white);
  --bs-btn-border-color: transparent;
  --bs-btn-hover-border-color: transparent;
  background-image: var(--gradient-brand);
  /**
   * 既定では背景画像は padding-box を基準に敷かれ、描画だけが border-box
   * まで及ぶ。.btn は 1px の透明ボーダーを持つので、そのリングに
   * グラデーションのタイル継ぎ目（終端のマゼンタと始端の青）が出て、
   * 上下左右に回り込んで見えていた。基準をボーダー基準にそろえる。
   */
  background-origin: border-box;
}
.btn-gradient:hover { filter: brightness(1.08); }
.btn-gradient:active { filter: brightness(1.04); }
/**
 * 濃色面（フッター）用。塗りのボタンをそのまま黒地に置くと、面から浮いて
 * 見えて本文より先に目に入る。線だけにして、ホバーで初めて塗る。
 */
.btn-on-dark {
  --bs-btn-color: var(--color-white);
  --bs-btn-bg: transparent;
  --bs-btn-border-color: rgba(255, 255, 255, 0.4);
  --bs-btn-hover-color: var(--color-black);
  --bs-btn-hover-bg: var(--color-white);
  --bs-btn-hover-border-color: var(--color-white);
  --bs-btn-active-color: var(--color-black);
  --bs-btn-active-bg: var(--color-white);
  --bs-btn-active-border-color: var(--color-white);
}
/* 3つめの導線。あるとは分かるが、主導線とは競わない重さにする。 */
.btn-ghost {
  --bs-btn-color: var(--color-black);
  --bs-btn-border-color: var(--color-border);
  --bs-btn-hover-color: var(--color-blue);
  --bs-btn-hover-bg: transparent;
  --bs-btn-hover-border-color: var(--color-blue);
}

/* 5. ヘッダー
--------------------------------------------- */
/**
 * 読み進めた量を示す線。ヘッダーの上端＝画面の上端に固定で置く。
 * ヘッダーはスクロールで流れていくが、入れ替わりにローカルナビが同じ
 * 位置に出るので、この線は常にどちらかの上端に載る。
 *
 * 伸ばし方は clip-path。scaleX だとグラデーション自体が横に潰れて、
 * 5%進んだところで青からマゼンタまでの全体が見えてしまう。右から
 * 削るだけなら色は画面幅に貼り付いたままなので、進むほどマゼンタに
 * 近づく＝色そのものが進捗になる。
 *
 * ただし clip-path は position: fixed の要素自身には掛けない。WebKit では
 * fixed 要素に clip-path を掛けると位置の基準が変わり、スクロールと一緒に
 * 上へ流れて画面から消えることがある。外側を素の fixed のままにして、
 * 中の <span> を削る。
 *
 * --scroll-progress は 0〜1 の生の数値。カスタムプロパティは継承するので
 * JS は外側に入れるだけでよい。未設定＝0 のときは右を 100% 削るので、
 * JS が動く前は何も出ない。
 */
.scroll-progress {
  position: fixed;
  z-index: 1300;
  top: 0;
  right: 0;
  left: 0;
  height: 0.1875rem;
  pointer-events: none;
}
.scroll-progress-bar {
  display: block;
  height: 100%;
  background: var(--gradient-brand);
  clip-path: inset(0 calc(100% - var(--scroll-progress, 0) * 100%) 0 0);
}
.site-header {
  position: relative;
  z-index: 1200;
  isolation: isolate;
}
/* メガメニューとSPドロワーはこのブロックを基準に絶対配置する。
   下の区切り線は引かない。面は不透明のまま。ヘッダーは position: relative
   で通常フローにあり、背後を通るものが何も無いので、すりガラスにしても
   ぼけるものが無い（＝不透明と同じ見た目でコストだけ増える）。 */
.header-bar {
  position: relative;
  background: var(--color-white);
}
.header-bar-inner {
  display: flex;
  min-height: var(--header-height);
  align-items: center;
  gap: 1rem;
  font-size: var(--font-size-s1);
}
@media (min-width: 1200px) {
  /**
   * ロゴが左、右が2段。上段は補助リンクと連絡導線（＝いつでも同じ場所にある
   * もの）、下段はグローバルナビだけ。役割の違う2種類を上下に分けたうえで、
   * 大きさと色でも差をつける。ロゴの上には何も載せない。
   */
  /* ロゴ・ナビ・連絡導線を1行に収める。SPと同じ flex のまま、
     間隔と余白だけ変える。 */
  .header-bar-inner {
    gap: clamp(1.25rem, 2.5vw, 2.5rem);
    min-height: 3.5rem;
    padding-block: 0;
  }
}
.site-logo {
  display: inline-flex;
  height: 100%;
  flex: 0 0 auto;
  align-items: center;
}
.site-logo img {
  display: block;
  width: auto;
  height: 1.5rem;
}
@media (min-width: 1200px) {
  /* 2段組みぶん縦に余裕ができるので、ロゴも一段大きくして
     ヘッダーの中で最初に目に入るものにする。 */
  .site-logo img {
    height: 1.75rem;
  }
}
/* ハンバーガー。開くと2本が交差する。
   両状態で同じ transform 関数を並べる。関数列が食い違うとブラウザが
   行列補間に落ち、途中で2本が重なって線が濃く見える。 */
.menu-button {
  position: relative;
  display: flex;
  width: 2.5rem;
  align-self: stretch;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin-left: auto;
  background: transparent;
  border: 0;
  cursor: pointer;
}
.menu-button span {
  position: absolute;
  display: block;
  width: var(--icon-menu-width);
  height: var(--icon-line-width);
  background: currentColor;
  transition: transform var(--transition-emphasized);
}
.menu-button span:first-child { transform: translateY(calc(var(--icon-gap) * -1)) rotate(0deg); }
.menu-button span:last-child { transform: translateY(var(--icon-gap)) rotate(0deg); }
.menu-button[aria-expanded="true"] span:first-child { transform: translateY(0) rotate(45deg); }
.menu-button[aria-expanded="true"] span:last-child { transform: translateY(0) rotate(-45deg); }
@media (min-width: 1200px) {
  .menu-button { display: none; }
}

/* 6. グローバルナビ／メガメニュー
--------------------------------------------- */
/**
 * SPはヘッダー下のドロワー、PCは横並び＋全幅パネル。マークアップは1組で、
 * 電話番号とCTAも .header-actions 1ブロックだけ。旧実装はSP用とPC用で
 * 同じリンクを2度書いていたため、更新漏れで内容がずれていた。
 */
.gnav {
  position: absolute;
  z-index: 1201;
  top: 100%;
  right: 0;
  left: 0;
  display: flex;
  height: calc(100dvh - var(--header-height));
  flex-direction: column;
  overflow: hidden;
  background: var(--color-white);
  border-top: 0.0625rem solid var(--color-border);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-0.5rem);
  transition:
    opacity 180ms var(--ease-standard),
    visibility 0s linear 180ms,
    transform 220ms var(--ease-emphasized);
  isolation: isolate;
}
.gnav.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: none;
  transition-delay: 0s;
}
.gnav-scroll {
  min-height: 0;
  flex: 1 1 auto;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.gnav-item {
  border-bottom: 0.0625rem solid var(--color-border);
}
.gnav-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 2.5rem;
  min-height: 3.75rem;
}
/* 下層を持たない項目は .gnav-row が唯一の子になる。「＋」の列は要らない。 */
.gnav-item > .gnav-row:only-child {
  grid-template-columns: minmax(0, 1fr);
}
.gnav-link {
  display: flex;
  min-width: 0;
  min-height: 3.75rem;
  align-items: center;
  padding-inline: calc(var(--bs-gutter-x, 1.5rem) * 0.5);
  /* ドロワーの第1階層。指で押す前提の一覧なので、ヘッダー行が継いでくる
     12.25px ではなく1段上げる。PC側は @media で 12px に戻す。 */
  font-size: var(--font-size-base);
  font-weight: 500;
}
/* ＋と−。縦棒は横棒を回したものではなく独立した箱で、scaleY で畳む。
   回転させると開いた状態で2本のアンチエイリアスが同じ行に重なり、
   線が濃く見える。 */
.gnav-toggle {
  position: relative;
  display: grid;
  place-items: center;
  padding: 0;
  background: transparent;
  border: 0;
}
.gnav-toggle span {
  position: relative;
  display: block;
  width: var(--icon-plus-width);
  height: var(--icon-line-width);
  background: currentColor;
}
.gnav-toggle span::after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--icon-line-width);
  height: var(--icon-plus-width);
  background: currentColor;
  content: "";
  transform: translate(-50%, -50%);
  transition: transform var(--transition-emphasized);
}
.gnav-toggle[aria-expanded="true"] span::after {
  transform: translate(-50%, -50%) scaleY(0);
}
/**
 * SPの開閉は grid-template-rows の 0fr → 1fr。高さを CSS だけで
 * 補間できるので、JS で scrollHeight を測って max-height を書く処理が要らない。
 */
.gnav-panel {
  display: grid;
  grid-template-rows: 0fr;
  /**
   * visibility も併せて畳む。grid-template-rows: 0fr と overflow: hidden は
   * 高さを 0 にするだけで、中のリンクはタブ順とアクセシビリティツリーに
   * 残ったままになる。閉じたメニューへフォーカスが吸い込まれるのを防ぐ。
   * 畳み終わってから消すよう、visibility の遅延はアニメーションと同じ長さ。
   */
  visibility: hidden;
  transition:
    grid-template-rows 320ms var(--ease-emphasized),
    visibility 0s linear 320ms;
}
.gnav-panel > * {
  overflow: hidden;
}
.gnav-item.is-open > .gnav-panel {
  grid-template-rows: 1fr;
  visibility: visible;
  transition-delay: 0s;
}
/* SPでは概要ブロックは出さない。見出しは .gnav-link が兼ねている。 */
.mega-summary {
  display: none;
}
/**
 * SPのグループ見出し。すぐ下のリンク（12.25px / 400）との差は太さで出す。
 * 大きさはラベルらしく小さいままにして、字面で競わせない。
 */
.mega-group-heading {
  margin: 1rem 0 0.25rem;
  padding-inline: 1.25rem 0;
  color: var(--color-gray);
  font-size: var(--font-size-s2);
  font-weight: 700;
  letter-spacing: 0.08em;
}
/* ドロワーの第2階層。実際に押されるのはこの層なので、第1階層と同じ
   14px まで上げる。階層の差は字下げと太さ（第1階層は500）で示す。 */
.mega-group-list a,
.mega-banner {
  display: flex;
  min-height: 3.125rem;
  flex-direction: column;
  justify-content: center;
  padding: 0.5rem 0 0.5rem 1.25rem;
  color: rgba(17, 17, 17, 0.82);
  font-size: var(--font-size-base);
}
.mega-link-note,
.mega-banner-note {
  display: none;
}
@media (min-width: 1200px) {
  /**
   * PC: ドロワーをやめて2段グリッドになる。上段は右寄せの補助リンクと
   * 連絡導線、下段はナビだけが右カラムいっぱいを使う。以前は3つを1行に
   * 並べていたため、ナビとCTAのあいだに200px以上の空洞ができていた。
   *
   * ドロワー用の isolation は外す。メガメニューは .header-bar 基準で
   * 配置したいので、ここで積層コンテキストを作らない。
   */
  /**
   * .gnav は SP のドロワーを成立させるための箱で、PC では箱そのものが要らない。
   * display: contents で箱を消し、中身（補助リンク・ナビ・CTA）を
   * ヘッダーのグリッドに直接置く。こうするとナビの行がロゴの左端＝本文の
   * 左端からそろい、右カラムに閉じ込められない。
   * .gnav は <div> なので、display: contents による意味の欠落は起きない。
   */
  .gnav,
  .gnav.is-open {
    display: contents;
    /* display: contents は箱を消すだけで、継承するプロパティは残る。
       SP用の visibility / pointer-events を戻さないと中身ごと消える。 */
    visibility: visible;
    pointer-events: auto;
  }
  /**
   * 上段は連絡導線だけ、下段はナビ。補助リンクは下段の右端に置く。
   * 上段に寄せると「お問い合わせ」のテキストリンクとボタンが隣り合って
   * 重複し、下段の右半分も空洞のまま残っていた。
   */
  /* ナビが余白を吸い、連絡導線は内容ぶんだけで右端に残る。 */
  /* 下端までいっぱいに伸ばす。下線（.gnav-link::after）がヘッダーの
     境界線に接し、そのすぐ下から始まるメガメニューとつながって見える。 */
  .gnav-scroll {
    flex: 1 1 auto;
    min-width: 0;
    align-self: stretch;
    overflow: visible;
  }
  /**
   * ナビは補助リンクより一段大きく、太くする。同じ 12px のままだと、
   * すぐ上のユーティリティと重さが並んでどちらが主か読めない。
   */
  .gnav-list {
    display: flex;
    height: 100%;
    align-items: center;
    gap: clamp(1rem, 1.8vw, 1.75rem);
  }
  /* パネルの位置基準を .header-bar に預けるため static のまま。 */
  .gnav-item {
    position: static;
    height: 100%;
    border: 0;
  }
  .gnav-row {
    display: flex;
    height: 100%;
    min-height: 0;
  }
  .gnav-link {
    position: relative;
    height: 100%;
    min-height: 0;
    padding: 0;
    font-size: var(--font-size-s2);
    white-space: nowrap;
  }
  /* 下線はヘッダーの下端。リンクが下端まで伸びているので bottom: 0 が
     そのまま境界線の位置になり、メガメニューの上端と接する。 */
  .gnav-link::after {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 0.125rem;
    background: var(--color-blue);
    content: "";
    opacity: 0;
    transform: scaleX(0);
    transition: opacity var(--transition-fast), transform var(--transition-default);
  }
  .gnav-link:hover,
  .gnav-item.is-open .gnav-link {
    color: var(--color-blue);
  }
  .gnav-link:hover::after,
  .gnav-item.is-open .gnav-link::after,
  .gnav-item:focus-within .gnav-link::after {
    opacity: 1;
    transform: scaleX(1);
  }
  .gnav-toggle,
  .gnav-item-utility {
    display: none;
  }
  /* 全幅パネル。高さや transform は動かさず、フェードだけ。 */
  .gnav-panel,
  .gnav-item.is-open > .gnav-panel {
    position: absolute;
    z-index: 1210;
    top: 100%;
    right: 0;
    left: 0;
    display: block;
    background: var(--color-white);
    /**
     * spread を負にして、ぼかしがパネル上端より上に出ないようにする。
     * 0 1rem 3rem だと 3rem のぼかしが 1rem のオフセットを追い越して
     * ヘッダー下端を暗くし、メニューを開くたびヘッダーの明度が
     * 変わって見えた。
     */
    box-shadow: 0 1.5rem 2.5rem -1rem rgba(0, 0, 0, 0.12);
    transition: opacity 160ms var(--ease-standard), visibility 0s linear 160ms;
  }
  .gnav-panel {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }
  .gnav-item.is-open > .gnav-panel {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition-delay: 0s;
  }
  .gnav-panel > * {
    overflow: visible;
  }
  /* 概要／目的別グループ／次アクションの3ブロック。メニューごとに
     グループ数が違っても、この1つのグリッドで受けられる。 */
  .gnav-panel-inner {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 2fr) minmax(0, 1.15fr);
    align-items: start;
    gap: 2.5rem;
    padding-block: 2.5rem 3rem;
  }
  .mega-summary {
    display: block;
  }
  .mega-eyebrow {
    margin: 0 0 0.75rem;
    color: var(--color-blue);
    font-size: var(--font-size-s2);
    font-weight: 600;
  }
  .mega-title {
    margin: 0;
    font-size: var(--font-size-l2);
    font-weight: 700;
  }
  .mega-description {
    margin: 1.25rem 0 0;
    color: var(--color-gray);
    line-height: 1.9;
  }
  .mega-groups {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
    align-items: start;
    gap: 1.75rem 2.5rem;
  }
  /* PCは帯にせず、罫線だけに戻す。 */
  /* PCは罫線を引く。SPより太さを一段落として、列の見出しに収める。 */
  .mega-group-heading {
    padding: 0 0 0.5rem;
    margin: 0 0 0.75rem;
    border-bottom: 0.0625rem solid var(--color-border);
    font-weight: 600;
  }
  .mega-group-list a {
    display: block;
    min-height: 0;
    padding: 0.5rem 0.625rem;
    margin-inline: -0.625rem;
    color: inherit;
    border-radius: 0.5rem;
    font-size: var(--font-size-s1);
    transition: background-color var(--transition-fast);
  }
  .mega-group-list a:hover {
    background: rgba(37, 74, 200, 0.06);
  }
  .mega-link-label {
    display: block;
    font-weight: 500;
    line-height: 1.5;
  }
  .mega-link-note,
  .mega-banner-note {
    display: block;
    margin-top: 0.15rem;
    color: var(--color-gray);
    font-size: var(--font-size-s2);
    line-height: 1.5;
  }
  .mega-banner {
    display: block;
    min-height: 0;
    padding: 0.875rem 1rem;
    color: inherit;
    background: var(--surface-subtle);
    border: 0.0625rem solid var(--color-border);
    border-radius: 0.75rem;
    font-size: var(--font-size-s1);
    transition: background-color var(--transition-fast), border-color var(--transition-fast);
  }
  .mega-banner + .mega-banner {
    margin-top: 0.625rem;
  }
  .mega-banner:hover {
    background: var(--color-white);
    border-color: var(--color-blue);
  }
  .mega-banner-label {
    display: block;
    font-weight: 600;
  }
}
/* ドロワー下部の「その他」リスト（SPのみ）。PC上段ユーティリティと同じ導線。 */
.gnav-item-utility {
  padding: 1.25rem calc(var(--bs-gutter-x, 1.5rem) * 0.5);
}
.gnav-item-utility p {
  margin: 0 0 0.5rem;
  color: var(--color-gray);
  font-size: var(--font-size-s2);
  font-weight: 600;
}
.gnav-item-utility a {
  display: block;
  padding: 0.5rem 0;
  font-size: var(--font-size-s1);
}
/**
 * 電話番号とCTA。SPではドロワー最下部、PCではヘッダー右端。同じ1ブロックを
 * 置き場所だけ変えて使う。
 *
 * SPでの見た目は .cta-bar（9章）が全部決めるので、ここに書くのはPC用と
 * 両方に効くものだけ。
 */
.header-actions {
  flex: 0 0 auto;
}
/* 番号を上、営業時間を下。中央でそろえる。 */
.header-tel {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.15em;
  line-height: 1.3;
  white-space: nowrap;
}
/* ヘッダー・ドロワー・固定バー・フッターで共通の電話ブロック。
   大きさと色だけ、置かれた場所の側で上書きする。
   番号を営業時間より1段大きく保つのは、同じ大きさだとどちらが主か
   読めなくなるため。 */
.tel-number {
  font-size: var(--font-size-s1);
  font-weight: 700;
  letter-spacing: 0.02em;
}
.tel-hours {
  color: var(--color-gray);
  font-size: var(--font-size-s2);
}
@media (min-width: 1200px) {
  .header-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
  }
  /**
   * 2つを同じ最小幅にそろえるのは、文字数（4字と6字）の差がそのまま幅の
   * 差になると、並びが崩れて見えるため。
   */
  .header-actions .btn {
    min-width: 6.5rem;
    --bs-btn-padding-x: 1.25em;
  }
}
/* メガメニューを開いている間、背後を暗くする。PCのみ。 */
.gnav-backdrop {
  display: none;
}
@media (min-width: 1200px) {
  .gnav-backdrop {
    position: fixed;
    z-index: 900;
    inset: 0;
    display: block;
    padding: 0;
    background: rgba(0, 0, 0, 0.18);
    border: 0;
    opacity: 0;
    pointer-events: none;
    transition: opacity 160ms var(--ease-standard);
    /* 暗さは据え置き。文字の形が崩れるくらいのぼかしを足すと、
       「奥にある」ことが暗さだけのときよりはっきりする。強くしすぎると
       ホバーで開くたびにページ全体が波打つので、ローカルナビの
       24px より控えめにしておく。 */
    backdrop-filter: blur(0.375rem);
    -webkit-backdrop-filter: blur(0.375rem);
  }
  body.is-mega-open .gnav-backdrop {
    opacity: 1;
    pointer-events: auto;
  }
}

/* 7. ローカルナビ（スクロールで出るカテゴリバー）
--------------------------------------------- */
/**
 * いま見ているセクションの兄弟ページへの導線。日本語のサイト設計でいう
 * ローカルナビで、グローバルナビ（サイト全体）とページ内リンク（アンカー）
 * のどちらとも役割が違う。
 *
 * - リンクは実URL。押すとページが読み込まれる。
 * - 現在地は aria-current="page"。ページを組む時点で決まり、スクロールでは動かない。
 * - <main> の外に置く。この文書の内容ではなく、サイトの構造を説明する部品だから。
 *
 * SPのリスト開閉は Bootstrap Collapse。出現のトリガーだけ common.js が持つ。
 */
/* 文書先頭に置く見えない目印。ここが画面から出たらバーを出す。
   しきい値を --local-nav-offset というCSSの値にしておくと、
   JS側にマジックナンバーが残らず、リサイズにも自動で追従する。 */
.local-nav-sentinel {
  position: absolute;
  top: 0;
  left: 0;
  width: 0.0625rem;
  height: var(--local-nav-offset);
  visibility: hidden;
  pointer-events: none;
}
/* すりガラスの面はバーと（SPで下に開く）リストの2枚。値がずれると
   同じ部品なのに透け方が違って見えるので、ここでまとめて持つ。
   非対応環境の逃げ道はこのセクション末尾の @supports not。 */
.local-nav,
.local-nav-links {
  background: var(--glass-background);
  backdrop-filter: saturate(var(--glass-saturation)) blur(var(--glass-blur));
  -webkit-backdrop-filter: saturate(var(--glass-saturation)) blur(var(--glass-blur));
}
.local-nav {
  position: fixed;
  z-index: 1100;
  top: 0;
  right: 0;
  left: 0;
  height: var(--local-nav-height);
  color: var(--color-black);
  border-bottom: 0.0625rem solid var(--color-border);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-100%);
  transition:
    opacity var(--transition-default),
    transform var(--transition-emphasized),
    visibility 0s linear 0.42s;
}
.local-nav.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: none;
  transition-delay: 0s;
}
.local-nav-inner {
  position: relative;
  display: flex;
  height: 100%;
  align-items: center;
  gap: 0.75rem;
}
/* バーの中で唯一「どこにいるか」を示す部分なので、周りのリンクより
   一段大きく太くする。 */
.local-nav-title {
  min-width: 0;
  overflow: hidden;
  font-weight: 700;
  font-size: var(--font-size-base);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.local-nav-toggle {
  display: inline-flex;
  width: 2.5rem;
  height: 100%;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin-left: auto;
  background: transparent;
  border: 0;
}
.local-nav-toggle .icon {
  transition: transform var(--transition-emphasized);
}
.local-nav-toggle[aria-expanded="true"] .icon {
  transform: rotate(180deg);
}
/* リストを開いている間、下のコンテンツをメガメニューと同じ扱いにする。
   暗さもぼかし量もメガメニューと同じ値。覆うのはバーの下だけなので、
   バー自体とパネルは素のまま残る（パネルは z-index 1100 の .local-nav
   の中、こちらは 1050）。
   開閉は body のクラス。Bootstrap Collapse の show/hide に合わせる。 */
.local-nav-backdrop {
  position: fixed;
  z-index: 1050;
  inset: var(--local-nav-height) 0 0;
  padding: 0;
  background: rgba(0, 0, 0, 0.18);
  border: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 160ms var(--ease-standard), visibility 0s linear 160ms;
  backdrop-filter: blur(0.375rem);
  -webkit-backdrop-filter: blur(0.375rem);
}
body.is-local-nav-open .local-nav-backdrop {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition-delay: 0s;
}
/* SPではバーの下に開くパネル。画面幅いっぱいに出したいので、
   .container の内側から 100vw に広げ直す。 */
.local-nav-links {
  position: absolute;
  top: 100%;
  left: 50%;
  width: 100vw;
  overflow: hidden;
  border-bottom: 0.0625rem solid var(--color-border);
  transform: translateX(-50%);
}
.local-nav-list a {
  display: flex;
  width: 100%;
  min-height: 3.5rem;
  align-items: center;
  padding: 1rem 0;
  border-bottom: 0.0625rem solid var(--color-border);
  font-size: var(--font-size-s1);
}
.local-nav-list a[aria-current="page"] {
  color: var(--color-blue);
  font-weight: 600;
}
.local-nav-cta {
  flex: 0 0 auto;
}
@media (min-width: 1200px) {
  .local-nav-inner {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: clamp(1rem, 1.5vw, 2rem);
  }
  .local-nav-title {
    min-width: max-content;
  }
  .local-nav-toggle,
  .local-nav-backdrop {
    display: none;
  }
  /* PCは常時展開。フッターと同じく Bootstrap Collapse の display:none を無効化。 */
  .local-nav-links.collapse:not(.show) {
    display: block;
  }
  .local-nav-links {
    position: static;
    width: auto;
    height: auto !important;
    overflow: visible;
    background: transparent;
    border: 0;
    transform: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  /* PCでは .local-nav-inner 側が .container なので、入れ子の分は無効化する。 */
  .local-nav-list.container {
    width: 100%;
    max-width: none;
    padding: 0;
  }
  .local-nav-list {
    display: flex;
    height: 100%;
    align-items: center;
    justify-content: flex-end;
    gap: clamp(1rem, 1.5vw, 2rem);
  }
  .local-nav-list a {
    position: relative;
    width: auto;
    min-height: 0;
    padding: 0;
    color: rgba(17, 17, 17, 0.72);
    border: 0;
    font-size: var(--font-size-s2);
    white-space: nowrap;
  }
  /* 現在地だけの下線。ホバーは色の変化で足りるうえ、ここは項目が
     横に詰まっているので、通るたびに線が出ると落ち着かない。 */
  .local-nav-list a::after {
    position: absolute;
    right: 0;
    bottom: -0.5rem;
    left: 0;
    height: 0.125rem;
    background: currentColor;
    content: "";
    opacity: 0;
    transform: scaleX(0);
    transition: opacity var(--transition-fast), transform var(--transition-default);
  }
  .local-nav-list a:hover,
  .local-nav-list a[aria-current="page"] {
    color: var(--color-black);
  }
  .local-nav-list a[aria-current="page"]::after {
    opacity: 1;
    transform: scaleX(1);
  }
}
/* backdrop-filter が無い環境では、透けたままだと文字が読めない。 */
@supports not ((backdrop-filter: blur(1rem)) or (-webkit-backdrop-filter: blur(1rem))) {
  .local-nav,
  .local-nav-links {
    background: rgba(255, 255, 255, 0.98);
  }
  @media (min-width: 1200px) {
    .local-nav-links {
      background: transparent;
    }
  }
}

/* 8. フッター
--------------------------------------------- */
.site-footer {
  color: var(--color-white);
  background: var(--color-black);
}
.site-footer a {
  transition: color var(--transition-fast), opacity var(--transition-fast);
}
/* 8.1 上段: 社名・連絡先・SNS */
.footer-utility {
  border-bottom: 0.0625rem solid var(--color-border-dark);
}
/**
 * SPは縦に積んで中央、幅のある画面では横一列。
 *
 * SPで横に流すと、社名・電話・ボタン3つ・SNSが中途半端な位置で折り返して
 * 行が揃わない。要素ごとに幅が違うので、左揃えにしても縦のラインが
 * 立たないため、中央に寄せて幅いっぱいに使う。
 */
.footer-utility-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  padding: 2rem 0;
  text-align: center;
}
.footer-brand {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
}
/* 濃色面なので白抜きのロゴを使う。ヘッダーは同じロゴの濃色版。
   フッターは締めくくりなので、ヘッダーと同じ高さまで上げる。 */
.footer-brand-logo {
  display: block;
  width: auto;
  height: 1.75rem;
}
.footer-brand-company {
  display: block;
  margin-top: 0.5em;
  color: rgba(255, 255, 255, 0.52);
  font-size: var(--font-size-s2);
}
.footer-contact {
  display: grid;
  width: 100%;
  gap: 1rem;
  justify-items: center;
}
/* 番号と営業時間は互いに中央でそろえる。 */
.footer-tel {
  display: inline-grid;
  justify-items: center;
  text-align: center;
}
/* 1200px 未満では出さない。同じ3つの導線を画面下の固定バーが常に
   持っているので、ここにも並べると同じボタンが二重になる。
   出す・出さないの境目は .fixed-cta の消える幅とそろえてある。 */
.footer-cta {
  display: none;
}
@media (min-width: 768px) {
  /**
   * 社名だけ左に残し、連絡先とSNSは右にまとめる。3ブロックを space-between
   * で散らすと、真ん中の連絡先がどちらにも属さず宙に浮いて見える。
   */
  .footer-utility-inner {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 1.25rem 2.5rem;
    padding: 1rem 0;
    text-align: left;
  }
  .footer-brand {
    align-items: flex-start;
    margin-right: auto;
  }
  .footer-contact {
    width: auto;
    grid-auto-flow: column;
    align-items: center;
    gap: 1.25rem;
  }
}
@media (min-width: 1200px) {
  .footer-cta {
    display: grid;
    grid-auto-flow: column;
    gap: 0.5rem;
  }
}
/* 濃色面なので営業時間の色だけ差し替える。番号はフッターだけ一段大きい。 */
.footer-tel .tel-number {
  font-size: var(--font-size-l1);
}
.footer-tel .tel-hours {
  color: rgba(255, 255, 255, 0.52);
}
.footer-social-list {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.footer-social-list a {
  display: grid;
  min-width: 2rem;
  min-height: 2rem;
  place-items: center;
  opacity: 0.72;
}
.footer-social-list a:hover,
.footer-social-list a:focus-visible {
  filter: brightness(1.25);
  opacity: 1;
}
.footer-social-list img {
  display: block;
  width: 1.25rem;
  height: 1.25rem;
  object-fit: contain;
}
/* 8.2 サイトマップ: SPはアコーディオン（Bootstrap Collapse）、PCは段組み */
.footer-main {
  padding: 1rem 0 3rem;
}
.footer-navigation-group {
  border-bottom: 0.0625rem solid var(--color-border-dark);
}
/* ＋と−。.gnav-toggle と同じ作り方。 */
.footer-navigation-toggle {
  position: relative;
  display: flex;
  width: 100%;
  min-height: 3.75rem;
  align-items: center;
  padding: 0;
  color: inherit;
  background: transparent;
  border: 0;
  font-size: var(--font-size-s1);
  font-weight: 600;
  text-align: left;
}
.footer-navigation-toggle::before,
.footer-navigation-toggle::after {
  position: absolute;
  top: 50%;
  right: calc(var(--icon-plus-width) / 2);
  background: currentColor;
  content: "";
  transform: translate(50%, -50%);
}
.footer-navigation-toggle::before {
  width: var(--icon-plus-width);
  height: var(--icon-line-width);
}
.footer-navigation-toggle::after {
  width: var(--icon-line-width);
  height: var(--icon-plus-width);
  transition: transform var(--transition-default);
}
.footer-navigation-toggle[aria-expanded="true"]::after {
  transform: translate(50%, -50%) scaleY(0);
}
.footer-navigation-list {
  padding-bottom: 1.5rem;
}
.footer-navigation-list a {
  display: inline-flex;
  padding: 0.75em 0;
  font-size: var(--font-size-s1);
  line-height: 1.7;
}
@media (min-width: 1200px) {
  .footer-main {
    padding: 2rem 0;
  }
  .footer-navigation-groups {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 2rem;
  }
  .footer-navigation-group {
    border: 0;
  }
  .footer-navigation-toggle {
    min-height: 0;
    margin-bottom: 1.25rem;
    font-size: var(--font-size-s2);
    font-weight: 800;
    pointer-events: none;
  }
  .footer-navigation-toggle::before,
  .footer-navigation-toggle::after {
    display: none;
  }
  /* PCは常時展開。Bootstrap Collapse の .collapse:not(.show) を無効化する。 */
  .footer-navigation-list.collapse:not(.show) {
    display: block;
  }
  .footer-navigation-list {
    height: auto !important;
    padding-bottom: 0;
    visibility: visible;
  }
  .footer-navigation-list a {
    padding: 0.25rem 0;
    font-size: var(--font-size-s2);
  }
}
/* 8.3 下段: コピーライトと規約リンク */
.footer-bottom {
  border-top: 0.0625rem solid var(--color-border-dark);
}
.footer-bottom-inner {
  display: flex;
  min-height: 5rem;
  flex-direction: column;
  justify-content: center;
  gap: 0.75rem;
  padding: 1rem 0;
}
.footer-copyright {
  color: rgba(255, 255, 255, 0.42);
  font-size: var(--font-size-s2);
}
.footer-legal-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.25rem;
}
.footer-legal-list a {
  color: rgba(255, 255, 255, 0.52);
  font-size: var(--font-size-s2);
}
@media (min-width: 768px) {
  .footer-bottom-inner {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}
@media (min-width: 1200px) {
  .footer-bottom-inner {
    min-height: 4rem;
    padding: 0;
  }
}

/* 9. SP下部のCTAバー
--------------------------------------------- */
/**
 * SPでCV導線を担う面は2つある。スクロールで出る固定バーと、ドロワーの
 * 最下部。出る場所が違うだけで役割は同じなので、見た目は1つの定義から作る。
 *
 * このブロックだけ max-width で書いている。ファイル全体はモバイル
 * ファーストだが、この部品は 1200px 未満にしか存在しない。素の指定として
 * 置くと、PCでは同じ要素（.header-actions とその中の .btn）に対して
 * 背景・文字色・高さ・角丸を打ち消す指定が並ぶことになり、Bootstrap の
 * ボタン変数との効き方も追いにくくなる。
 *
 * 区切り線は border ではなく、親の背景を 1px の隙間から覗かせて作る。
 * 上端の線も同じ仕組み（padding-top）なので、線の色は1か所で決まる。
 */
@media (max-width: 1199.98px) {
  .cta-bar {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    /* 面は青一色。iPhone のホームバー側の余白（safe-area）もこの色で
       埋まるので、帯の下だけ色が変わることがない。 */
    padding-bottom: env(safe-area-inset-bottom);
    background: var(--color-blue);
    border: 0;
  }
  /**
   * 3つとも青地・白文字。ホバーと押下の色は .btn-brand と同じ値を使う。
   *
   * .btn には生のプロパティではなく Bootstrap の変数で効かせる。color や
   * background を直接書くと、ホバーや押下側のセレクタ（.btn:hover、
   * .btn:first-child:active）の方が詳細度が高く、押した瞬間だけ
   * Bootstrap 既定の色に戻ってしまう。
   */
  .cta-bar > * {
    --bs-btn-color: var(--color-white);
    --bs-btn-hover-color: var(--color-white);
    --bs-btn-active-color: var(--color-white);
    --bs-btn-bg: var(--color-blue);
    --bs-btn-hover-bg: #2c56e4;
    --bs-btn-active-bg: #1f3fae;
    --bs-btn-border-color: transparent;
    --bs-btn-hover-border-color: transparent;
    --bs-btn-active-border-color: transparent;
    --bs-btn-border-radius: 0;
    display: flex;
    min-height: 3.25rem;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.15em;
    min-width: 0;
    padding: 0.5rem;
    color: var(--color-white);
    background: var(--color-blue);
    border: 0;
    border-radius: 0;
    font-size: var(--font-size-s1);
    font-weight: 600;
    line-height: 1.3;
    text-align: center;
    white-space: nowrap;
  }
  /* 区切りは隙間ではなく罫線。隙間だと親の色が覗くことになり、
     safe-area の帯まで区切り色になってしまう。 */
  .cta-bar > * + * {
    border-left: 0.0625rem solid #5c78d6;
  }
  .cta-bar > *:hover,
  .cta-bar > *:focus-visible {
    background: #2c56e4;
  }
  .cta-bar > *:active {
    background: #1f3fae;
  }
  /* 営業時間は導線ではなく補足。番号と同じ白だと同じ強さで主張する。 */
  .cta-bar .tel-hours {
    color: rgba(255, 255, 255, 0.72);
    font-weight: 400;
  }
}
/**
 * 固定バーはここだけ。読み始めてすぐ出すとコンテンツを隠すだけなので、
 * 一定量スクロールしてから出す（しきい値は common.js）。
 */
.fixed-cta {
  position: fixed;
  z-index: 1100;
  right: 0;
  bottom: 0;
  left: 0;
  transform: translateY(100%);
  transition: transform var(--transition-emphasized);
}
.fixed-cta.is-visible {
  transform: none;
}
@media (min-width: 1200px) {
  .fixed-cta { display: none; }
}

/* 10. パンくず
--------------------------------------------- */
/**
 * Bootstrap の .breadcrumb をトーンだけ合わせる。既定では本文と同じ 1rem で、
 * ホームアイコン（1em）のほうが小さく見えていた。文字を一段落として
 * アイコンを一段上げ、アイコンが行の中で主になる比率にする。
 */
/* <main> の外に出したぶん、行そのものが1つの帯になる。
   面はこのサイトで一番薄いグレー。ページ見出しの .bg-body-tertiary と
   同じ値なので、パンくずから h1 までがひと続きの帯になる。 */
.breadcrumb-nav {
  padding-block: 0.75rem;
  background: var(--surface-subtle);
}
.breadcrumb {
  --bs-breadcrumb-font-size: var(--font-size-s2);
  --bs-breadcrumb-item-padding-x: 0.5rem;
  --bs-breadcrumb-divider-color: var(--color-gray);
  --bs-breadcrumb-item-active-color: var(--color-gray);
  /* 既定の "/" は使わない。区切りはボタンやカードと同じシェブロンにそろえる。 */
  --bs-breadcrumb-divider: "";
}
.breadcrumb-item + .breadcrumb-item::before {
  float: none;
  width: 0.397em;
  height: 0.7em;
  /* Bootstrap は右の余白を padding で取るが、box-sizing: border-box では
     それが width に食い込んで矢印が潰れる。余白はマージンで取る。 */
  padding: 0;
  margin-right: var(--bs-breadcrumb-item-padding-x);
  vertical-align: -0.05em;
  /* マスクの土台はアイコンと共有（3. アイコン）。ここは絵柄と色だけ。 */
  background-color: var(--bs-breadcrumb-divider-color);
  -webkit-mask-image: var(--icon-right-mask);
  mask-image: var(--icon-right-mask);
}
.breadcrumb-item a {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
}
/* 当たり判定だけ広げる。ホームはアイコン1つで幅 11px しかなく、
   そのままだと指では狙えない。項目の間隔は 20px あるので、
   左右 4px ずつ広げても隣とは重ならない。 */
.breadcrumb-item a::before {
  position: absolute;
  inset: -0.5rem -0.25rem;
  content: "";
}
/* ホームは家のアイコンだけ。ラベルは .visually-hidden で読み上げにだけ
   残す（消すとリンクに名前が無くなる）。
   大きさは文字と同じ高さ。字形ぴったりのマスクなので、ここを上げると
   ホームだけ文字より大きくなる。 */
.breadcrumb-item .icon {
  font-size: 1em;
}
.breadcrumb-item a:hover {
  color: var(--color-blue);
}

/* 11. モーション設定
--------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}