/*
  base.css
  ------------------------------------------------------------
  ルール：制作側で管理（納品後、基本は触らない想定）
  目的：
  - 共通パーツの最低限の見た目
  - SPグローバルメニュー（overlay/スライド/階層）
  - SP下部固定CTA（店舗/電話）
*/

/* =========================================================
  Global tokens
========================================================= */
:root {
  /* --- ブランド基準色（サイト全体の一括管理ポイント） ---------------
     色を変えたいときは基本ここだけ触ればOK。
     ・個人向け＝緑、法人向け＝青、本文/アイコンの黒 の3系統。
     ・--c-primary / メニュー配色 / CTA文字色 などは全てここを参照する。 */
  --c-brand-personal: #39A7AA;
  --c-brand-personal-rgb: 57, 167, 170;
  --c-brand-business: #3C7EC8;
  --c-brand-business-rgb: 60, 126, 200;

  /* 個人向け（デフォルト） */
  --c-primary: var(--c-brand-personal);
  --c-primary-rgb: var(--c-brand-personal-rgb);
  --c-primary-weak: #e7f6f6;
  --c-text: #1a1a1a;
  --c-text-rgb: 26, 26, 26;
  /* ↑ --c-text の RGB 版（rgba() で不透明度を付けたいとき用） */
  --c-muted: #6b6b6b;
  --c-border: #D1D0CE;
  --c-bg: #F5F5F4;
  --c-table-bg:#ECF7F7;

  /* SP固定要素の基準 */
  --sp-fixed-cta-h: 60px;
  /* デザイン：60px */
  --sp-header-h: 60px;

  /* PC左固定メニュー */
  --pc-menu-w: 280px;
  --pc-submenu-top-offset: 132px;
  /* PCで2階層以降の開始位置（1階層の先頭カードに揃える） */
  --pc-cta-h: 132px;
  /* PC左メニュー下部CTAの占有高（調整用） */

  /* Menu motion (keep JS/CSS in sync) */
  --menu-motion-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --menu-motion-dur-fast: 220ms;
  --menu-motion-dur: 240ms;

  /* Header menu icon (SP/PC共通：見た目サイズだけ調整。タップ領域はボタン側で確保) */
  --menu-btn-size: 60px;
  /* SPヘッダー内の正方形タップエリア */
  --menu-icon-w: 16px;
  /* デザイン書き出しに合わせる */
  --menu-icon-h: 10px;
  /* 2px + 4px gap + 2px = 8px を基準に、余白込み */
  --menu-bar-h: 2px;
  --menu-bar-offset: 3px;
  /* 中央から上下にずらす量（= gap の半分） */
  --menu-icon-text-gap: 9px;
  /* アイコンとMENU/CLOSEの距離（デザイン寄せ） */
  --menu-label-size: 10px;
  /* デザイン：10px */
  --menu-label-tracking: 0em;
  /* 字詰め（デザイン寄せ） */
}

html,
body {
  scroll-behavior: smooth;
}

/* 動きを抑える設定のユーザー向け */
@media (prefers-reduced-motion: reduce) {
  html,
  body {
    scroll-behavior: auto;
  }
}

img {
    max-width: 100%;
    height: auto;
}

figure {
    margin: 0;
    padding: 0;
}

/* ------------------------------------------------------------
 * Utilities: content frame
 * - “インラインフレーム風”の囲み枠（規約/注意書き/長文などの共通箱）
 * - スクロールが必要な場合は .contentFrame--scroll を併用
 * ------------------------------------------------------------ */

.contentFrame {
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: 8px;
  padding: 16px;
  color: var(--c-text);
}

.contentFrame h3 {
  max-width: 100%;
  margin-left: 0;
  margin-right: 0;
}

/* 長文の場合の視認性（任意で微調整OK） */
.contentFrame> :first-child {
  margin-top: 0;
}

.contentFrame> :last-child {
  margin-bottom: 0;
}

/* スクロール版（必要なページだけ付与）
   - iOSで慣性スクロールを効かせる
   - iOSの“スクロール領域が指で反応しにくい”対策（タップ領域の明確化）
*/
.contentFrame--scroll {
  max-height: 65vh;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
}

/* spacing-utilities.css */

.mb-24 {
    margin-bottom: 24px;
}

.mb-40 {
  margin-bottom: 40px;
}

.mb-60 {
  margin-bottom: 60px;
}

.mb-80 {
  margin-bottom: 80px;
}

small {
  font-size: 14px;
  font-weight: bold;
  color: #726D69;
}

/* 法人向け（ページ全体切替：必要なページで body に付ける） */
body.is-business {
  --c-primary: var(--c-brand-business);
  --c-primary-rgb: var(--c-brand-business-rgb);
  --c-primary-weak: #e9f2fb;
  --c-table-bg:#E1EBF6;
}

* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

body {
  margin: 0;
  color: var(--c-text);
  background: var(--c-bg);
  font-family: "Noto Sans JP", system-ui, -apple-system, "Segoe UI", Roboto, "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  line-height: 1.6;
}

a {
  color: inherit;
}

a:hover {
  text-decoration:none;
}

/* =========================================================
  Interactive cursor
  - <button> や role="button" は UA 既定カーソルが arrow のため、hover しても
    指(pointer)に変わらない。クリック可能なコントロールに pointer を統一する。
  - 無効化状態(:disabled / aria-disabled="true")は除外。
  - <a href> は UA で既に pointer のためここでは対象外。
========================================================= */
button:not(:disabled),
[role="button"]:not([aria-disabled="true"]),
.btn,
.spMenuTab,
.spMenuRow__btn,
[data-menu-go],
[data-menu-back],
[data-menu-tab],
.processFlow__choiceBtn {
  cursor: pointer;
}

/* =========================================================
  Media link fix
  - 画像/figure だけを包む <a> は display:inline（既定）のままだと、
    リンクのボックスが行ボックス（数px）に潰れ、クリック/カーソル領域が
    上部の細い帯だけになる（＝hoverしても上部1pxしか pointer にならない）。
    block 化して要素全体をクリック可能にする。
  - 対象は figure/picture、または FV画像(.subpageFv__img)を直下に持つリンクのみ。
    本文中のテキストリンクやインラインアイコンには影響させない。
========================================================= */
a:has(> figure),
a:has(> picture),
a:has(> img.subpageFv__img) {
  display: block;
}

/* =========================================================
  Scroll lock（メニュー展開中）
  site.js が html に is-scroll-locked を付与します
========================================================= */
html.is-scroll-locked,
html.is-scroll-locked body {
  overflow: hidden;
}

/* =========================================================
  Header
  _partials/header.html の siteHeader* に対応
========================================================= */
.siteHeader {
  position: sticky;
  /* PC/デフォルトは sticky（SPは下の @media で fixed） */
  top: 0;
  z-index: 2500;
  /* SPではメニューoverlayより上（ヘッダー共通で常に最前面） */

  /* PCでは左固定メニューを使うため、ヘッダーは非表示がデフォルト。
     SP側の @media(max-width: 767px) で display を戻す（FOUC/チラつき軽減）。 */
  display: none;

  background: rgba(255, 255, 255, .96);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(0, 0, 0, .08);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .06);
}

.siteHeader__inner {
  max-width: 1160px;
  margin: 0 auto;

  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;

  min-height: var(--sp-header-h);
  padding: 10px 16px;
}

.siteHeader__logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}

/* =========================================================
  Logo image sizing
  - HTML側の img width/height は基本SP(140x20)を採用
  - PC左固定メニュー内ではCSSで 225x32 に上書きする
========================================================= */
.siteHeader__logo picture,
.siteHeader__logo img {
  display: block;
}

/* Default / SP: 140×20（左寄せ） */
.siteHeader__logo img {
  width: 140px;
  height: 20px;
  object-fit: contain;
}

/* 中央の表示区分（・個人/法人） */
.siteHeader__audience {
  justify-self: center;
  display: inline-flex;
  align-items: center;
  gap: 0px;

  font-weight: 700;
  font-size: 12px;
  color: #4a4a4a;
  white-space: nowrap;

  transition: opacity 180ms var(--menu-motion-ease), transform 180ms var(--menu-motion-ease);
}

.siteHeader__audienceDot {
  color: var(--c-primary);
  font-weight: 900;
  font-size: 18px;
  line-height: 1;
}

.siteHeader__audienceText {
  display: none;
}

/* 総合ページ（body に is-personal / is-business のどちらも無い）では表示区分自体を出さない */
body:not(.is-personal):not(.is-business) .siteHeader__audience {
  display: none;
}

body.is-personal .siteHeader__audienceText.is-personal {
  display: inline;
}

body.is-business .siteHeader__audienceText.is-business {
  display: inline;
}

/* メニュー展開時：中央の「・個人/法人」をフェードアウト */
html.is-menu-open .siteHeader__audience {
  opacity: 0;
  transform: translateY(-4px);
  pointer-events: none;
}

.siteHeader__menuBtn {
  justify-self: end;

  /* square tappable area (no visual frame) */
  width: var(--menu-btn-size);
  height: var(--menu-btn-size);
  min-width: var(--menu-btn-size);
  min-height: var(--menu-btn-size);

  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 0;
  /* デザインは枠なし */

  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  outline: 0;
  appearance: none;
  -webkit-appearance: none;
  filter: none;

  cursor: pointer;
  color: #111;

  transform: none;

  -webkit-tap-highlight-color: transparent;
}

.siteHeader__menuBtn:focus {
  outline: none;
}

.siteHeader__menuBtn:focus-visible {
  outline: 3px solid rgba(var(--c-primary-rgb), .28);
  outline-offset: 3px;
  border-radius: 10px;
  /* キーボード操作時のみ可視 */
}

.siteHeader__menuBtn:hover,
.siteHeader__menuBtn:active {
  background: transparent;
  box-shadow: none;
}

.siteHeader__menuBtn:active {
  transform: none;
}

.siteHeader__menuBtnInner {
  width: 100%;
  height: 100%;

  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--menu-icon-text-gap);
}

.siteHeader__menuIcon {
  position: relative;
  width: var(--menu-icon-w);
  height: var(--menu-icon-h);
  display: block;
}

.siteHeader__menuBar {
  position: absolute;
  left: 0;
  right: 0;

  /* 2本線 → × の共通基準点（常に中央） */
  top: 50%;
  height: var(--menu-bar-h);
  background: #111;
  border-radius: 2px;

  transform-origin: 50% 50%;
  transition: transform var(--menu-motion-dur-fast) var(--menu-motion-ease);
}

/* OPEN時（2本線：中央から上下にvar(--menu-bar-offset)ずらす） */
.siteHeader__menuBar:nth-child(1) {
  transform: translateY(calc(-50% - var(--menu-bar-offset)));
}

.siteHeader__menuBar:nth-child(2) {
  transform: translateY(calc(-50% + var(--menu-bar-offset)));
}

/* OPEN→CLOSE時：中央で交差（×） */
html.is-menu-open .siteHeader__menuBar:nth-child(1) {
  transform: translateY(-50%) rotate(45deg);
}

html.is-menu-open .siteHeader__menuBar:nth-child(2) {
  transform: translateY(-50%) rotate(-45deg);
}

.siteHeader__menuText {
  /* MENU文字はデザイン指定：Montserrat */
  font-family: "Montserrat", "Noto Sans JP", system-ui, -apple-system, "Segoe UI", Roboto, "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  font-weight: 700;
  font-size: var(--menu-label-size);
  line-height: 1;
  letter-spacing: var(--menu-label-tracking);
  text-transform: uppercase;

  /* center label and prevent width jump between MENU/CLOSE */
  display: block;
  min-width: 5ch;
  /* CLOSE(5) を基準に幅を確保 */
  text-align: center;
  position: relative;
  color: transparent;
  perspective: 600px;
  transform-style: preserve-3d;
}


/* MENU/CLOSE 表示（擬似要素で描画し、開閉でフリップアニメ） */
.siteHeader__menuText::before,
.siteHeader__menuText::after {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #111;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  backface-visibility: hidden;
  transition: transform var(--menu-motion-dur) var(--menu-motion-ease), opacity var(--menu-motion-dur) var(--menu-motion-ease);
}

/* 通常時：MENUが表示（CLOSEは上で待機） */
.siteHeader__menuText::before {
  content: "MENU";
  opacity: 1;
  transform-origin: 50% 0%;
  transform: translateY(0) rotateX(0deg);
}

.siteHeader__menuText::after {
  content: "CLOSE";
  opacity: 0;
  transform-origin: 50% 100%;
  transform: translateY(110%) rotateX(90deg);
}

/* メニューOPEN時：CLOSEが上から“くるん”と出てくる / MENUは下へ退避 */
html.is-menu-open .siteHeader__menuText::before {
  opacity: 0;
  transform: translateY(-110%) rotateX(-90deg);
}

html.is-menu-open .siteHeader__menuText::after {
  opacity: 1;
  transform: translateY(0) rotateX(0deg);
}

/* =========================================================
  ★メニューCSSの読み方（メンテナンス向けガイド）★
  メニュー関連のスタイルは、以下の順で「後勝ち上書き」で成り立っています。
  修正時は同じセレクタが後方にもないか（特にRenewal節）を確認してください。

    (1) 基本（このブロック以降）        … 全幅共通の下地。実際の見た目は下記で上書きされる
    (2) @media (min-width:968px) #globalMenuPc … PC左固定メニュー（下記「PC Global Menu」節）
    (3) @media (max-width:967px)         … SPレイアウト（下記「SP: レイアウト調整」節）
    (4) 「Menu UI Renewal」節（ファイル末尾側）… 2026-07 Figma対応の最新上書き。
        └ 個人/法人/総合の配色・セグメント切替・見出し・戻るバー等はここが最終値。

  データ属性/フックの契約（JSが依存。値を変えない）:
    data-active-tab = general | personal | business（配色・選択セグメントの出し分け）
    .spMenuScreen[data-menu-screen] / [data-menu-go] / [data-menu-back] / [data-menu-tab]
========================================================= */

/* =========================================================
  Menu overlay
  - menu.html の .menuOverlay / .menuPanel（SP）を装飾
  - 開閉：hidden 属性 + html.is-menu-open で制御
========================================================= */
/* SPの overlay メニューはデフォルト非表示（PCで一瞬見えるのを防ぐ）。
   SP側の @media(max-width: 767px) で有効化する。 */
#globalMenu {
  display: none;
}

/* Menu-local theme (tab state) ---------------------------------
   メニュー内は「個人/法人」タブの状態に合わせて色を切り替える。
   body の is-business 状態とは独立させる（＝ページが法人色でも、メニューで個人タブなら個人色）。
*/
[data-menu-overlay] {
  --menu-primary: var(--c-primary);
  --menu-primary-rgb: var(--c-primary-rgb);
}

[data-menu-overlay][data-active-tab="personal"] {
  --menu-primary: var(--c-brand-personal);
  --menu-primary-rgb: var(--c-brand-personal-rgb);
}

[data-menu-overlay][data-active-tab="business"] {
  --menu-primary: var(--c-brand-business);
  --menu-primary-rgb: var(--c-brand-business-rgb);
}

.menuOverlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
  z-index: 2400;
  /* ヘッダー(2500)より下 */

  opacity: 0;
  pointer-events: none;
  transition: opacity var(--menu-motion-dur-fast) var(--menu-motion-ease);
}

html.is-menu-open .menuOverlay {
  opacity: 1;
  pointer-events: auto;
}

.menuPanel {
  position: absolute;
  inset: 0;
  background: #fff;
  overflow: auto;
}

/* =========================================================
  SP Menu (menu.html の spMenu* に対応)
========================================================= */
.menuPanel--sp {
  background: #F5F5F4;

  /* SP：共通ヘッダー固定の下からメニュー内容を開始（menu.htmlのspMenuTop廃止） */
  padding-top: calc(var(--sp-header-h) + env(safe-area-inset-top));

  /*
    画面切替アニメ中（.spMenuScreen が position:absolute になる瞬間）に
    .spMenuScreens の高さが潰れて中身が一瞬見えなくなるのを防ぐ
  */
  display: flex;
  flex-direction: column;
  height: 100%;

  /* 下部固定CTAに隠れない */
  /* padding-bottom: calc(var(--sp-fixed-cta-h) + 40px + env(safe-area-inset-bottom)); */

  will-change: transform;
  transition: transform var(--menu-motion-dur) var(--menu-motion-ease);
}

/* OPEN: 右→左 */
.menuPanel--sp[data-menu-direction="right"] {
  transform: translateX(100%);
}

html.is-menu-open .menuPanel--sp[data-menu-direction="right"] {
  transform: translateX(0);
}

/* 将来用 */
.menuPanel--sp[data-menu-direction="left"] {
  transform: translateX(-100%);
}

html.is-menu-open .menuPanel--sp[data-menu-direction="left"] {
  transform: translateX(0);
}

.menuPanel--sp[data-menu-direction="up"] {
  transform: translateY(100%);
}

html.is-menu-open .menuPanel--sp[data-menu-direction="up"] {
  transform: translateY(0);
}


/* Tab switch（個人/法人セグメント）
   NOTE: 実際の見た目は「Menu UI Renewal」節で上書きされます
   （SP=@media max-width:967px、PC=#globalMenuPc）。ここは下地。 */
.spMenuTabs {
  margin: 24px 16px 12px;

  /* デザイン：外寸 40px */
  height: 40px;
  padding: 4px;
  /* 内側余白（スライダーの上下左右と連動） */

  display: grid;
  grid-template-columns: 1fr 1fr;
  position: relative;
  background: #fff;
  border-radius: 999px;
  border: 1px solid #eee;
}

.spMenuTabs::before {
  content: "";
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: 4px;
  width: calc((100% - 8px) / 2);
  border-radius: 999px;
  transform: translateX(0);
  transition: transform var(--menu-motion-dur-fast) var(--menu-motion-ease), background-color var(--menu-motion-dur-fast) var(--menu-motion-ease);
  background: var(--c-primary);
}

[data-menu-overlay][data-active-tab="personal"] .spMenuTabs::before {
  transform: translateX(0);
  background: var(--menu-primary);
}

[data-menu-overlay][data-active-tab="business"] .spMenuTabs::before {
  transform: translateX(100%);
  background: var(--menu-primary);
}

.spMenuTab {
  height: 30px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
  font-weight: 800;
  color: var(--c-muted);
  font-size: 12px;
  position: relative;
  z-index: 1;
  transition: color var(--menu-motion-dur-fast) var(--menu-motion-ease);
}

@media (min-width: 968px) {
  .spMenuTab {
    height: 40px;
    font-size: 11px;
  }
}

.spMenuTab.is-active {
  color: #fff;
}

/* Screens */
.spMenuScreen {
  display: none;
  padding: 0 16px 120px;
  /* 下部CTAの高さを確保（120px） */

  /* Grid stack: すべて同じセルに重ねる（表示中/アニメ中のみ有効） */
  grid-area: 1 / 1;
}

.spMenuScreen.is-active {
  display: block;
}

/* 目的/シーン（タブに紐づくカード）を active tab 色に（暫定） */
.spMenuScreen.is-active .spMenuCard:first-of-type {
  border-color: var(--menu-primary);
}

.spMenuScreen.is-active .spMenuCard:first-of-type .spMenuRow::before,
.spMenuScreen.is-active .spMenuCard:first-of-type .spMenuList>li:not(.spMenuRow)::before {
  background: var(--menu-primary);
}

.spMenuScreens {
  position: relative;
  /*
    画面切替中に .spMenuScreen を重ねて表示するためのスタック領域。
    absolute にすると一瞬高さ計算が崩れて空白が見えることがあるので、
    Grid で同一セルに重ねる。
  */
  display: grid;
  grid-template-columns: 1fr;
  align-items: start;
  overflow-x: hidden;
  overflow-y: visible;

  /* flex child: 画面内で安定した高さを確保（アニメ中の height collapse 対策） */
  flex: 1 1 auto;
  min-height: 0;
}

/* =========================================================
  Perf: Menu rendering cost cut
  - メニューはDOMが大きくなりがちなので、レイアウト/描画範囲を限定して負荷とブレを軽減
  - 画面スライド（.spMenuScreen.is-animating）の挙動は既存の transform/transition を優先
  - content-visibility は「スクロールで画面外の要素」を中心に効かせる（アニメ対象には直接当てない）
========================================================= */
.spMenuScreens {
  contain: layout paint style;
}

/* スクリーン単位でレイアウト/描画の影響範囲を閉じる */
.spMenuScreen {
  contain: layout paint style;
}

/* カード単位で“折り返し以降”の描画を遅延（スクロール時に段階的に描画） */
.spMenuCard {
  content-visibility: auto;
  contain-intrinsic-size: 240px;
}

/* アニメ中は描画遅延が逆効果になる可能性があるため、必ず通常描画に戻す */
.spMenuScreen.is-animating .spMenuCard {
  content-visibility: visible;
  contain-intrinsic-size: auto;
}

/*
  Fallback: flex が効かない/想定外の入れ子になった場合でも
  アニメ中に高さ 0 に潰れないよう最低限の高さを確保
*/
@supports not (height: 100svh) {
  .spMenuScreens {
    min-height: 40vh;
  }
}

@supports (height: 100svh) {
  .spMenuScreens {
    min-height: 40svh;
  }
}

.spMenuScreen.is-animating {
  display: block;
  position: relative;
  will-change: transform;
  transition: transform var(--menu-motion-dur-fast) var(--menu-motion-ease);
}

.spMenuScreen.is-enter-from-right,
.spMenuScreen.is-enter-from-left,
.spMenuScreen.is-enter-to-center {
  /* Grid stack: absolute ではなく grid で重ねる */
  width: 100%;
  z-index: 2;
  /* 入ってくる画面を常に手前に */
}

.spMenuScreen.is-enter-from-right {
  transform: translateX(100%);
}

.spMenuScreen.is-enter-from-left {
  transform: translateX(-100%);
}

.spMenuScreen.is-enter-to-center {
  transform: translateX(0);
}

.spMenuScreen.is-leave-to-left {
  transform: translateX(-100%);
}

.spMenuScreen.is-leave-to-right {
  transform: translateX(100%);
}

@media (prefers-reduced-motion: reduce) {
  .spMenuScreen.is-animating {
    transition: none;
  }
}

/* カテゴリ見出し（そのカテゴリのトップページへのリンク）: アクセント色バー + 右に丸→
   ※以前は「戻る」トリガーだったが、Figma準拠で「トップへのリンク」に変更。
     1階層戻る操作は別要素 .spMenuBackBar が担う。 */
.spMenuSubHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 8px 0 12px;
  min-height: 56px;
  padding: 2px 14px 2px 18px;
  border-radius: 12px;
  background: var(--menu-primary);
  color: #fff;
  text-decoration: none;

  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.spMenuSubTitle {
  margin: 0;
  flex: 1 1 auto;
  min-width: 0;
  font-size: 16px;
  font-weight: 700;
  text-align: left;
}

/* 見出し右の丸→（トップへ遷移を示す） */
.spMenuSubHeader__circle {
  flex: 0 0 auto;
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.22);
  color: #fff;
  font-size: 14px;
  line-height: 1;
}

/* 戻るバー（1階層上へ）: ‹ + 「戻る」。背景は白（Figma準拠）。SPのみ表示（PCは✕/余白クリックで戻る）
   画面の左右padding(16px)を打ち消して白バーを全幅にする */
.spMenuBackBar {
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 0 -16px;
  padding: 11px 16px 12px;
  border-bottom: 1px solid #EAE8E3;

  background: #fff;
  color: #333;
  font-size: 14px;
  font-weight: 700;

  cursor: pointer;
  touch-action: manipulation;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.spMenuBackBar__icon {
  width: 16px;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}


/* Cards / rows */
.spMenuCard {
  border: 2px solid var(--c-border);
  /* 共通：#D1D0CE 2px */
  border-radius: 8px;
  background: #fff;
  overflow: hidden;
  margin: 0 0 12px;

  /* PC/SP共通：選択行の背景を“枠いっぱい”に広げるため、カード自体の左右paddingは持たせない */
  padding: 0;
}

/* 個人/法人向け枠：2px（色はタブの状態＝--menu-primary） */
.spMenuCard--outline {
  border-color: var(--menu-primary);
}

.spMenuList {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* --- Row (recommended markup: li.spMenuRow > a/button.spMenuRow__link/.spMenuRow__btn) --- */
.spMenuRow {
  position: relative;
}

/* 仕切り線：枠内左右13pxインセット（= .spMenuCard の padding に乗せる） */
.spMenuRow::before {
  content: "";
  position: absolute;
  left: 13px;
  right: 13px;
  top: 0;
  height: 1px;
  background: var(--c-border);
}

.spMenuRow:first-child::before {
  display: none;
}

/* 個人/法人向け枠内の仕切り：各色 1px */
.spMenuCard--outline .spMenuRow::before {
  background: var(--menu-primary);
}

/* 行リンク/ボタン（テキストは常に左寄せ・16px） */
.spMenuRow__btn,
.spMenuRow__link {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;

  padding: 14px 27px;
  /* 13px(枠) + 14px(行) = 27px を行paddingで担保 */

  text-decoration: none;
  border: 0;
  background: transparent;
  cursor: pointer;
  color: inherit;
  text-align: left;

  font-size: 16px;
  line-height: 1.4;
  font-weight: 700;
}

/* ラベル側は伸びて、矢印/丸は右に寄せる */
.spMenuRow__btn> :not(.spMenuRow__chev):not(.spMenuRow__circle),
.spMenuRow__link> :not(.spMenuRow__chev):not(.spMenuRow__circle) {
  flex: 1 1 auto;
  min-width: 0;
  text-align: left;
}

/* 見出し/段落を使っている場合でもズレないようにリセット */
.spMenuRow__btn h1,
.spMenuRow__btn h2,
.spMenuRow__btn h3,
.spMenuRow__btn h4,
.spMenuRow__btn h5,
.spMenuRow__btn p,
.spMenuRow__link h1,
.spMenuRow__link h2,
.spMenuRow__link h3,
.spMenuRow__link h4,
.spMenuRow__link h5,
.spMenuRow__link p {
  margin: 0;
  font: inherit;
}

.spMenuRow__chev {
  font-size: 18px;
  color: var(--c-muted);
  width: 20px;
  text-align: center;
}

.spMenuRow__circle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  background: #666;
  color: #fff;
  font-size: 10px;
  flex: 0 0 auto;
  line-height: 1;
}

/* --- Fallback (if markup does NOT use .spMenuRow/.spMenuRow__link) ---
   li > a/button の場合でも、行が縮んで灰色の小箱になるのを防ぐ
*/
.spMenuList>li:not(.spMenuRow) {
  position: relative;
}

.spMenuList>li:not(.spMenuRow)::before {
  content: "";
  position: absolute;
  left: 13px;
  right: 13px;
  top: 0;
  height: 1px;
  background: var(--c-border);
}

.spMenuList>li:not(.spMenuRow):first-child::before {
  display: none;
}

.spMenuCard--outline .spMenuList>li:not(.spMenuRow)::before {
  background: var(--menu-primary);
}

.spMenuList>li:not(.spMenuRow)>a,
.spMenuList>li:not(.spMenuRow)>button {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;

  padding: 14px 27px;
  /* 13px(枠) + 14px(行) = 27px を行paddingで担保 */

  text-decoration: none;
  border: 0;
  background: transparent;
  cursor: pointer;
  color: inherit;
  text-align: left;

  font-size: 16px;
  line-height: 1.4;
  font-weight: 700;
}

.spMenuList>li:not(.spMenuRow)>a> :not(.spMenuRow__chev):not(.spMenuRow__circle),
.spMenuList>li:not(.spMenuRow)>button> :not(.spMenuRow__chev):not(.spMenuRow__circle) {
  flex: 1 1 auto;
  min-width: 0;
  text-align: left;
}

.spMenuList>li:not(.spMenuRow)>a h1,
.spMenuList>li:not(.spMenuRow)>a h2,
.spMenuList>li:not(.spMenuRow)>a h3,
.spMenuList>li:not(.spMenuRow)>a h4,
.spMenuList>li:not(.spMenuRow)>a h5,
.spMenuList>li:not(.spMenuRow)>a p,
.spMenuList>li:not(.spMenuRow)>button h1,
.spMenuList>li:not(.spMenuRow)>button h2,
.spMenuList>li:not(.spMenuRow)>button h3,
.spMenuList>li:not(.spMenuRow)>button h4,
.spMenuList>li:not(.spMenuRow)>button h5,
.spMenuList>li:not(.spMenuRow)>button p {
  margin: 0;
  font: inherit;
}

.spMenuRow__btn,
.spMenuRow__link {
  /* already handled above; nothing needed here for fallback */
}

/* =========================================================
  PC Global Menu（左固定・常時表示）
  - menu.html で追加した #globalMenuPc を想定
  - SPの #globalMenu（overlay）はPCでは使わない
========================================================= */
/* Default: PC固定メニューはSPでは無効（横スクロール事故防止） */
#globalMenuPc {
  display: none;
}

@media (min-width: 968px){

  /* NOTE: motion token は :root の定義に統一（PCだけ上書きしない） */
  /* PC：上部ヘッダー帯は常に非表示（リロード直後の一瞬表示=FOUC防止）
     ※PCは左固定メニュー（#globalMenuPc）にロゴ/導線を集約する前提 */
  .siteHeader {
    display: none;
  }

  /* SP用の固定ヘッダー分の上余白が残らないように + PCは左固定メニュー幅ぶん右に避ける */
  body {
    padding-top: 0;
    /* PCは常に左固定メニュー幅ぶん右に避ける（JS付与待ちのレイアウトシフト防止） */
    padding-left: var(--pc-menu-w);
  }

  /* PCではSP overlayメニューは使わない（左固定メニューを使用） */
  #globalMenu {
    display: none;
  }

  /* PC左固定メニュー（常時表示） */
  #globalMenuPc {
    display: block;
    position: fixed;
    top: 0;
    left: 0;

    /* 1列目(aside)は常に 280px 固定。JSが幅を増やしても max-width で抑える */
    width: var(--pc-menu-w);
    min-width: var(--pc-menu-w);
    max-width: var(--pc-menu-w);

    height: 100vh;
    height: 100dvh;
    /* modern viewport unit (prevents “not reaching bottom” issues) */

    /* PCでは左固定メニューが主役なので、ヘッダーより前に出す */
    z-index: 3200;

    /* PC左固定メニュー(aside相当)は右側にドロップシャドウを付与（デザイン準拠） */
    box-shadow: 8px 0 24px rgba(0, 0, 0, .12);
    filter: none;

    /* サブレイヤーは別の fixed コンテナで表示するため、溢れは許可 */
    overflow: visible;

    /* 背景抜け防止：列(aside)の下部が空になっても常に同色で埋める */
    background: #F5F5F4;
    /* PCメニューの既定テーマ色（JSで data-active-tab を付け替える前提のフォールバック） */
    --menu-primary: var(--c-brand-personal);
    --menu-primary-rgb: var(--c-brand-personal-rgb);
  }

  /* PC側は overlay の暗幕は不要 */
  #globalMenuPc .menuOverlay {
    position: static;
    inset: auto;
    background: transparent;
    opacity: 1;
    pointer-events: auto;
    transition: none;

    /* 背景抜け防止：overlay側にも高さと背景を持たせる */
    min-height: 0;
    height: 100%;
  }

  /* PC側パネル（左固定の中身） */
  #globalMenuPc .menuPanel {
    position: relative;
    inset: auto;
    height: 100%;

    /* パネル全体はスクロールさせない（列ごとに縦スクロール） */
    overflow: hidden;

    /* ロゴ(brand) + viewport を縦に積む */
    display: flex;
    flex-direction: column;
    min-height: 0;

    background: #F5F5F4;
    min-height: 100%;
    height: 100%;
    box-shadow: none;
    filter: none;

    /* 上部にヘッダー固定が無いので、SPの padding-top を無効化 */
    padding-top: 0;

    /* 余白はSPと同等の見た目に寄せる（必要なら後で微調整） */
    padding-bottom: 0;
  }

  /* PC：左固定メニューを使うときは上部ヘッダー帯を出さない（不要な帯の解消） */
  html.has-pc-menu .siteHeader {
    display: none;
  }

  /* PC：ヘッダーのロゴは左固定メニュー側に表示する（JSでクローンを差し込む） */

  html.has-pc-menu .siteHeader__logo {
    display: none;
  }

  /* PC：ヘッダー中央の「・個人/法人」表示は不要（左固定メニュー側で表示するため） */
  html.has-pc-menu .siteHeader__audience {
    display: none;
  }

  /* PC：ロゴ/中央表示を隠したときに余計なカラムが残らないようにグリッドを詰める */
  html.has-pc-menu .siteHeader__inner {
    grid-template-columns: 1fr auto;
  }

  /* PC：左固定メニューの先頭に置くロゴ領域（JSで .pcMenuBrand を挿入） */
  #globalMenuPc .pcMenuBrand {
    position: sticky;
    top: 0;
    z-index: 2;

    background: rgba(255, 255, 255, .96);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(0, 0, 0, .08);

    padding: 34px 16px;
    order: 1;
    width: 100%;
    max-width: var(--pc-menu-w);

    /* PC: ロゴは中央寄せ */
    display: flex;
    justify-content: center;
  }

  #globalMenuPc .pcMenuBrand .siteHeader__logo {
    display: inline-flex;
    justify-content: center;
  }

  /* PC(左固定メニュー内): 225×32 */
  #globalMenuPc .pcMenuBrand .siteHeader__logo img {
    width: 225px;
    height: 32px;
  }


  #globalMenuPc .menuPanel--sp {
    transform: none;
    transition: none;
    will-change: auto;
  }

  /* =========================================================
    PC: Layered menu viewport (280px columns)
    - JSが `.pcMenuViewport` を挿入し、`.spMenuScreen` を中へ移動します
    - 最上位(0)は sticky のまま固定、増えた列だけ横スクロール
  ========================================================= */
  #globalMenuPc .pcMenuViewport {
    /* 2列目以降は aside の“外側”に重ねて表示する（aside自体は広げない） */
    position: fixed;
    top: 0;
    left: var(--pc-menu-w);
    bottom: 0;

    /* IMPORTANT:
       背景(#F5F5F4)が「開いている列の分だけ」伸びるようにするため、
       right:0 は使わず content 幅に合わせて縮む（max-width で画面内に収める）。
       ※right:0 があると“画面全体が #F5F5F4 で覆われる”事故が起きる。
    */
    right: auto;
    width: max-content;
    max-width: calc(100vw - var(--pc-menu-w));

    z-index: 3150;
    /* .pcMenuShade(3100)より上 / #globalMenuPc(3200)より下 */

    display: flex;
    align-items: stretch;

    overflow-x: auto;
    overflow-y: hidden;

    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;

    /* 右端へスクロールさせる時の“たまにバウンス”を抑える */
    scroll-behavior: auto;

    /* ここで全面を塗っておく（2・3階層の上部が透過で抜けるのを防ぐ） */
    background: var(--c-bg);

    height: 100dvh;
    min-height: 0;

    isolation: isolate;
  }




  #globalMenuPc .pcMenuViewport[hidden] {
    display: none;
  }

  /* SP用のスタック領域（.spMenuScreens）はPCでは使わない（JSがscreenを移動するため） */
  #globalMenuPc .spMenuScreens {
    display: none;
  }

  /* PCでは下層スクリーン用のサブヘッダー(戻る/タイトル)は不要 */
  #globalMenuPc .spMenuSubHeader {
    display: none;
  }

  /* PC: 各スクリーンを「列」として表示 */
  #globalMenuPc .spMenuScreen {
    display: block;

    /* Always paint column background to avoid “top gap / transparency” */
    background: var(--c-bg);

    /* 1列=280px */
    flex: 0 0 var(--pc-menu-w);
    width: var(--pc-menu-w);

    /* 列は常にビューポート高に固定（親の%高さ依存で抜けるのを防ぐ） */
    height: 100vh;
    height: 100dvh;
    max-height: 100dvh;
    box-sizing: border-box;
    min-height: 0;
    align-self: stretch;
    overflow-y: auto;

    /* PCでは余白は列内で管理 */
    padding: 0 0 16px;

    /* 描画コストの局所化 */
    contain: layout style;

    /* Ensure the resting state is always at 0 so removing enter classes doesn't “snap/bounce” */
    transform: translateX(0);

    /* Prevent SP screen transition rules from interfering with PC keyframe animations */
    transition: none;
    will-change: transform;
    position: relative;
    z-index: 1;
  }

  /* PC: JSがスクリーンを .pcMenuTrack 配下へ移動するケースでも、paint containment を外して枠外描画を許可 */
  .pcMenuTrack .spMenuScreen {
    contain: layout style;
    overflow-x: visible;
  }

  /* SP uses .is-animating with transform transitions; disable it for PC stacked columns */
  #globalMenuPc .spMenuScreen.is-animating {
    transition: none;
  }

  /* PC: 2階層以降は1階層（左列）の先頭カード位置に頭を揃える */
  #globalMenuPc .spMenuScreen[data-pc-level]:not([data-pc-level="0"]) {
    padding-top: var(--pc-submenu-top-offset);
    background: var(--c-bg);
    box-sizing: border-box;
  }

  /* 1列目は常に固定（横スクロールしても左に残す） */
  #globalMenuPc .spMenuScreen[data-pc-level="0"] {
    position: sticky;
    left: 0;
    z-index: 3;
    background: var(--c-bg);
    height: 100vh;
    height: 100dvh;
    max-height: 100dvh;
    top: 0;
  }

  /* PC: 重なり順（浅い階層ほど手前）— 枠外インジケータが次カラムに隠れないように */
  #globalMenuPc .spMenuScreen[data-pc-level="1"],
  .pcMenuTrack .spMenuScreen[data-pc-level="1"] {
    z-index: 2;
  }

  #globalMenuPc .spMenuScreen[data-pc-level="2"],
  .pcMenuTrack .spMenuScreen[data-pc-level="2"] {
    z-index: 1;
  }

  /*
    PC列の表示制御：既定はすべて非表示にしておき、表示する列だけ site.js が
    インラインの display:block / transform で見せる（renderPcStack）。
    ここは特異度の高い“安全網”（:is-active等より優先して既定で隠す）なので残す。
    ※以前あった .is-pc-enter/.is-pc-leave のクラス方式アニメは未使用のため削除済み。
  */
  #globalMenuPc .spMenuScreen:not(.is-pc-visible):not(.is-pc-enter):not(.is-pc-leave) {
    display: none;
  }

  /* 2列目以降は、列が増えるほど右に積まれる（横スクロールで追従） */
  #globalMenuPc .spMenuScreen[data-pc-level]:not([data-pc-level="0"]) {
    position: relative;
    z-index: 1;
    background: var(--c-bg);
  }

  /* NOTE: PCの .spMenuTabs / .spMenuScreen / .spMenuCard のレイアウト（幅・余白）は
     「Menu UI Renewal」ブロック（ファイル末尾側）に統合。ここでの旧定義は競合の原因になるため削除した。 */

  /* =========================================================
    PC: Right column shade
    - JSが `.pcMenuShade` を body 直下に追加し、hidden を切り替えます
    - 右カラムを本文黒（--c-text）の 50% でカバー
  ========================================================= */
  .pcMenuShade {
    position: fixed;
    top: 0;
    left: var(--pc-menu-w);
    right: 0;
    bottom: 0;

    background: rgba(var(--c-text-rgb), .50);

    /* PC左固定メニュー(#globalMenuPc z-index:3200)より下、右コンテンツより上 */
    z-index: 3100;
  }

  .pcMenuShade[hidden] {
    display: none;
  }

  /* PCメニュー内のコンテンツは下部固定CTAを考慮しない
     （.spMenuTabs / .spMenuScreen の余白は Renewal ブロックに統合済み） */

  /* =========================================================
    PC: Left menu CTA (店舗を探す / 電話番号)
    - SPの固定CTAとは別に、PC左固定メニューの下部に配置
  ========================================================= */
  #globalMenuPc .pcMenuCtas {
    z-index: 4;
    padding: 0;
    background: var(--c-bg);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 32px;
  }

  /* PC CTA item (店舗を探す / 電話)
     - 店舗：ボタン
     - 電話：リンク無効 + ボタン風の枠/背景は付けない（XD準拠）
  */
  #globalMenuPc a.pcMenuCtas__item:not([href^="tel:"]) {
    width: 100%;
    height: 60px;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;

    background: #fff;
    border: 2px solid #D1D0CE;
    border-radius: 9999px;

    text-decoration: none;
    font-weight: 800;
    line-height: 1;
    white-space: nowrap;

    color: var(--c-text);

    transition: color var(--menu-motion-dur-fast) var(--menu-motion-ease),
      border-color var(--menu-motion-dur-fast) var(--menu-motion-ease),
      background-color var(--menu-motion-dur-fast) var(--menu-motion-ease);
  }

  /* 店舗ボタン：hover/active でアイコン/テキストを #726D69 に */
  #globalMenuPc a.pcMenuCtas__item:not([href^="tel:"]):is(:hover, :active) {
    color: #726D69;
  }

  /* 電話（PCメニュー内）：ボタン化しない + クリック不可 */
  #globalMenuPc a.pcMenuCtas__item[href^="tel:"] {
    width: 100%;
    height: auto;
    min-height: 0;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;

    padding: 8px 0 0;

    background: transparent;
    border: 0;
    border-radius: 0;

    text-decoration: none;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;

    color: var(--c-text);

    pointer-events: none;
    cursor: default;
  }

  #globalMenuPc a.pcMenuCtas__item[href^="tel:"]:is(:hover, :active) {
    color: var(--c-text);
  }

  /* keyboard focus */
  #globalMenuPc a.pcMenuCtas__item:focus {
    outline: none;
  }

  #globalMenuPc a.pcMenuCtas__item:focus-visible {
    outline: 3px solid rgba(var(--menu-primary-rgb, var(--c-primary-rgb)), .28);
    outline-offset: 3px;
  }

  /* icon helpers (placeholder span / inline svg) */
  #globalMenuPc .pcMenuCtas__icon {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    line-height: 1;
    color: inherit;
    flex: 0 0 auto;
  }

  /* 店舗を探す */
  .pcMenuCtas__item .pcMenuCtas__icon::before {
    content: "";
    display: inline-block;
    width: 20px;
    height: 20px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path d='M10 0A8.579 8.579 0 001.42 8.58C1.42 16.652 10 20 10 20s8.58-3.347 8.58-11.419A8.579 8.579 0 0010 0m0 11.408a3.291 3.291 0 113.291-3.29A3.291 3.291 0 0110 11.408' fill='%231a1a1a'/></svg>");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
  }

  /* 電話番号 */
  .pcMenuCtas__item.is-tel .pcMenuCtas__icon::before {
    content: "";
    display: inline-block;
    width: 20px;
    height: 20px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path d='M19.668 15.909l-3.04-3.04a1.132 1.132 0 00-1.6 0l-1.379 1.38a1.132 1.132 0 01-1.493.094 25.476 25.476 0 01-3.475-3.026A25.5 25.5 0 015.656 7.842a1.134 1.134 0 01.095-1.493L7.13 4.971a1.131 1.131 0 000-1.6L4.091.331a1.131 1.131 0 00-1.6 0L.658 2.165c-1.944 1.943.627 7.9 4.953 12.224s10.281 6.9 12.224 4.953l1.833-1.834a1.13 1.13 0 000-1.6z' fill='%231a1a1a'/></svg>");

    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
  }

  .pcMenuCtas__item a.pcMenuCtas__item svg {
    width: 18px;
    height: 18px;
  }

  #globalMenuPc a.pcMenuCtas__item svg,
  #globalMenuPc a.pcMenuCtas__item svg * {
    fill: currentColor;
    stroke: currentColor;
  }

  /* text */
  #globalMenuPc .pcMenuCtas__text {
    color: inherit;
  }

  /* CTAが被らないように、1階層(左列)は下に余白を確保 */

  /* ---------------------------------------------------------
    PC: メニュー内のテーマ色（tab状態に追従）
    ※PCは [data-menu-overlay] が存在しないため、clone した panel 自体に data-active-tab が付く想定
  --------------------------------------------------------- */
  #globalMenuPc [data-pc-menu-panel] {
    --menu-primary: var(--c-brand-personal);
    --menu-primary-rgb: var(--c-brand-personal-rgb);
  }

  #globalMenuPc [data-pc-menu-panel][data-active-tab="business"] {
    --menu-primary: var(--c-brand-business);
    --menu-primary-rgb: var(--c-brand-business-rgb);
  }

  /* Fallback: JSが data-active-tab を #globalMenuPc / pcMenuViewport 側に付与するケースにも追従 */
  #globalMenuPc[data-active-tab="personal"],
  #globalMenuPc .pcMenuViewport[data-active-tab="personal"] {
    --menu-primary: var(--c-brand-personal);
    --menu-primary-rgb: var(--c-brand-personal-rgb);
  }

  #globalMenuPc[data-active-tab="business"],
  #globalMenuPc .pcMenuViewport[data-active-tab="business"] {
    --menu-primary: var(--c-brand-business);
    --menu-primary-rgb: var(--c-brand-business-rgb);
  }

  /* PC: タブのスライダー色/位置（SPの [data-menu-overlay] セレクタの代替） */
  #globalMenuPc [data-pc-menu-panel] .spMenuTabs::before {
    background: var(--menu-primary);
    transform: translateX(0);
  }

  #globalMenuPc [data-pc-menu-panel][data-active-tab="business"] .spMenuTabs::before {
    transform: translateX(100%);
  }

  /* PC: 各階層の「先頭カード」の枠色（PCのホーム/カードは border:0 のため実質不可視。フォールバック用） */
  #globalMenuPc .spMenuScreen .spMenuCard:first-of-type {
    border-color: var(--menu-primary);
  }

  /* 項目間の区切り線は 総合/個人/法人 で統一（Figma個人・法人準拠の #E4E3DF）。
     ※以前はタブ色(--menu-primary)で状態ごとに色が変わっていたが、Figmaは統一グレーのため修正。 */
  #globalMenuPc .spMenuScreen .spMenuCard:first-of-type .spMenuRow::before,
  #globalMenuPc .spMenuScreen .spMenuCard:first-of-type .spMenuList>li:not(.spMenuRow)::before {
    background: #E4E3DF;
  }

  /* Fallback: 2階層以降の枠線/仕切りが黒化・消失しないように（--menu-primary が未定義な時のため） */
  #globalMenuPc .spMenuCard--outline {
    border-color: var(--menu-primary);
  }

  #globalMenuPc .spMenuCard--outline .spMenuRow::before,
  #globalMenuPc .spMenuCard--outline .spMenuList>li:not(.spMenuRow)::before {
    background: var(--menu-primary);
  }

  /* ---------------------------------------------------------
    PC: Hover / Active styles
    - 枠内（spMenuCard--outline）：個人= #39A7AA / 法人= #3C7EC8
    - それ以外：#726D69
    - タブ切替：表示中タブの“反対側”を hover/active で相手色に
    NOTE: is-selected（白文字+背景色）を優先するため、選択行は除外
  --------------------------------------------------------- */

  /* どちらでもない（共通）カード：hover/active で文字色 #726D69 */
  :is(#globalMenuPc, .pcMenuViewport, .pcMenuTrack) .spMenuCard:not(.spMenuCard--outline):not(.spMenuCard--primary) .spMenuRow:not(.is-selected)> :is(.spMenuRow__btn, .spMenuRow__link):is(:hover, :active) {
    color: #726D69;
  }

  :is(#globalMenuPc, .pcMenuViewport, .pcMenuTrack) .spMenuCard:not(.spMenuCard--outline):not(.spMenuCard--primary) .spMenuList>li:not(.spMenuRow):not(.is-selected)> :is(a, button):is(:hover, :active) {
    color: #726D69;
  }

  /* 1階層（primary）カード：タブ色で hover/active の文字色を切替（目的/シーン、融資/サービス/経営支援） */
  :is(#globalMenuPc, .pcMenuViewport, .pcMenuTrack) [data-pc-menu-panel][data-active-tab="personal"] .spMenuCard--primary .spMenuRow:not(.is-selected)> :is(.spMenuRow__btn, .spMenuRow__link):is(:hover, :active) {
    color: var(--menu-primary);
  }

  :is(#globalMenuPc, .pcMenuViewport, .pcMenuTrack) [data-pc-menu-panel][data-active-tab="personal"] .spMenuCard--primary .spMenuList>li:not(.spMenuRow):not(.is-selected)> :is(a, button):is(:hover, :active) {
    color: var(--menu-primary);
  }

  :is(#globalMenuPc, .pcMenuViewport, .pcMenuTrack) [data-pc-menu-panel][data-active-tab="business"] .spMenuCard--primary .spMenuRow:not(.is-selected)> :is(.spMenuRow__btn, .spMenuRow__link):is(:hover, :active) {
    color: var(--menu-primary);
  }

  :is(#globalMenuPc, .pcMenuViewport, .pcMenuTrack) [data-pc-menu-panel][data-active-tab="business"] .spMenuCard--primary .spMenuList>li:not(.spMenuRow):not(.is-selected)> :is(a, button):is(:hover, :active) {
    color: var(--menu-primary);
  }

  /* Fallback: data-active-tab が panel ではなくコンテナ側に付くケース */
  :is(#globalMenuPc, .pcMenuViewport, .pcMenuTrack)[data-active-tab="personal"] .spMenuCard--primary .spMenuRow:not(.is-selected)> :is(.spMenuRow__btn, .spMenuRow__link):is(:hover, :active) {
    color: var(--menu-primary);
  }

  :is(#globalMenuPc, .pcMenuViewport, .pcMenuTrack)[data-active-tab="personal"] .spMenuCard--primary .spMenuList>li:not(.spMenuRow):not(.is-selected)> :is(a, button):is(:hover, :active) {
    color: var(--menu-primary);
  }

  :is(#globalMenuPc, .pcMenuViewport, .pcMenuTrack)[data-active-tab="business"] .spMenuCard--primary .spMenuRow:not(.is-selected)> :is(.spMenuRow__btn, .spMenuRow__link):is(:hover, :active) {
    color: var(--menu-primary);
  }

  :is(#globalMenuPc, .pcMenuViewport, .pcMenuTrack)[data-active-tab="business"] .spMenuCard--primary .spMenuList>li:not(.spMenuRow):not(.is-selected)> :is(a, button):is(:hover, :active) {
    color: var(--menu-primary);
  }

  /* 枠内（outline）カード：タブ状態に追従して hover/active の文字色を切替 */
  :is(#globalMenuPc, .pcMenuViewport, .pcMenuTrack) [data-pc-menu-panel][data-active-tab="personal"] .spMenuCard--outline .spMenuRow:not(.is-selected)> :is(.spMenuRow__btn, .spMenuRow__link):is(:hover, :active) {
    color: var(--menu-primary);
  }

  :is(#globalMenuPc, .pcMenuViewport, .pcMenuTrack) [data-pc-menu-panel][data-active-tab="personal"] .spMenuCard--outline .spMenuList>li:not(.spMenuRow):not(.is-selected)> :is(a, button):is(:hover, :active) {
    color: var(--menu-primary);
  }

  :is(#globalMenuPc, .pcMenuViewport, .pcMenuTrack) [data-pc-menu-panel][data-active-tab="business"] .spMenuCard--outline .spMenuRow:not(.is-selected)> :is(.spMenuRow__btn, .spMenuRow__link):is(:hover, :active) {
    color: var(--menu-primary);
  }

  :is(#globalMenuPc, .pcMenuViewport, .pcMenuTrack) [data-pc-menu-panel][data-active-tab="business"] .spMenuCard--outline .spMenuList>li:not(.spMenuRow):not(.is-selected)> :is(a, button):is(:hover, :active) {
    color: var(--menu-primary);
  }

  /* Fallback: 下層(2/3階層)が pcMenuViewport 側に移動していて、data-active-tab がコンテナ側に付くケース */
  :is(#globalMenuPc, .pcMenuViewport, .pcMenuTrack, .pcMenuViewportPanel, .pcMenuPanel)[data-active-tab="personal"] .spMenuCard--outline .spMenuRow:not(.is-selected)> :is(.spMenuRow__btn, .spMenuRow__link):is(:hover, :active) {
    color: var(--menu-primary);
  }

  :is(#globalMenuPc, .pcMenuViewport, .pcMenuTrack, .pcMenuViewportPanel, .pcMenuPanel)[data-active-tab="personal"] .spMenuCard--outline .spMenuList>li:not(.spMenuRow):not(.is-selected)> :is(a, button):is(:hover, :active) {
    color: var(--menu-primary);
  }

  :is(#globalMenuPc, .pcMenuViewport, .pcMenuTrack, .pcMenuViewportPanel, .pcMenuPanel)[data-active-tab="business"] .spMenuCard--outline .spMenuRow:not(.is-selected)> :is(.spMenuRow__btn, .spMenuRow__link):is(:hover, :active) {
    color: var(--menu-primary);
  }

  :is(#globalMenuPc, .pcMenuViewport, .pcMenuTrack, .pcMenuViewportPanel, .pcMenuPanel)[data-active-tab="business"] .spMenuCard--outline .spMenuList>li:not(.spMenuRow):not(.is-selected)> :is(a, button):is(:hover, :active) {
    color: var(--menu-primary);
  }

  /* 個人/法人タブ：未選択のタブを hover/active で「そのタブ自身のブランド色」に。
     - タブの識別子（data-menu-tab）で色を決めるので、総合（未選択・data-active-tab="general"）の
       状態でも 個人=緑 / 法人=青 になる（従来は表示中タブ基準だったため総合時に効かなかった）。
     - 個人選択時/法人選択時も、非選択側タブが自色で点灯する（従来挙動と同じ結果）。 */
  #globalMenuPc .spMenuTab[data-menu-tab="personal"]:not(.is-active):is(:hover, :active) {
    color: var(--c-brand-personal);
  }

  #globalMenuPc .spMenuTab[data-menu-tab="business"]:not(.is-active):is(:hover, :active) {
    color: var(--c-brand-business);
  }

  /* ---------------------------------------------------------
    PC: 選択された階層（親画面側の選択行）
    - 個人：#39A7AA
    - 法人：#3C7EC8
    - 右に ▷ を表示
    NOTE: 2/3階層のDOMが `.pcMenuViewport` 側に移動する実装があるため、
          `#globalMenuPc` 配下だけでなく `.pcMenuViewport` 配下にも同じ指定を当てる。
  --------------------------------------------------------- */
  :is(#globalMenuPc, .pcMenuViewport, .pcMenuTrack) .spMenuRow.is-selected>.spMenuRow__link,
  :is(#globalMenuPc, .pcMenuViewport, .pcMenuTrack) .spMenuRow.is-selected>.spMenuRow__btn,
  :is(#globalMenuPc, .pcMenuViewport, .pcMenuTrack) .spMenuRow__link.is-selected,
  :is(#globalMenuPc, .pcMenuViewport, .pcMenuTrack) .spMenuRow__btn.is-selected,
  :is(#globalMenuPc, .pcMenuViewport, .pcMenuTrack) .spMenuList>li.is-selected>a,
  :is(#globalMenuPc, .pcMenuViewport, .pcMenuTrack) .spMenuList>li.is-selected>button,
  :is(#globalMenuPc, .pcMenuViewport, .pcMenuTrack) .spMenuList>li>a.is-selected,
  :is(#globalMenuPc, .pcMenuViewport, .pcMenuTrack) .spMenuList>li>button.is-selected {
    background: var(--menu-primary);
    color: #fff;
  }

  /* Modern browsers: if JS puts is-selected on the link/button, reflect it on the row wrapper as well */
  :is(#globalMenuPc, .pcMenuViewport, .pcMenuTrack) .spMenuRow:has(> .spMenuRow__link.is-selected),
  :is(#globalMenuPc, .pcMenuViewport, .pcMenuTrack) .spMenuRow:has(> .spMenuRow__btn.is-selected) {
    position: relative;
  }

  /* 仕切り線が選択背景の上に乗らないように（次行の1px罫線も消す） */
  :is(#globalMenuPc, .pcMenuViewport, .pcMenuTrack) .spMenuRow.is-selected::before {
    background: transparent;
  }

  :is(#globalMenuPc, .pcMenuViewport, .pcMenuTrack) .spMenuRow.is-selected+.spMenuRow::before {
    display: none;
  }

  /* is-selected が link/button 側に付いた場合のケア（:has 対応ブラウザ） */
  :is(#globalMenuPc, .pcMenuViewport, .pcMenuTrack) .spMenuRow:has(> .spMenuRow__link.is-selected)::before,
  :is(#globalMenuPc, .pcMenuViewport, .pcMenuTrack) .spMenuRow:has(> .spMenuRow__btn.is-selected)::before {
    background: transparent;
  }

  :is(#globalMenuPc, .pcMenuViewport, .pcMenuTrack) .spMenuRow:has(> .spMenuRow__link.is-selected)+.spMenuRow::before,
  :is(#globalMenuPc, .pcMenuViewport, .pcMenuTrack) .spMenuRow:has(> .spMenuRow__btn.is-selected)+.spMenuRow::before {
    display: none;
  }

  /* fallback list(markupが spMenuRow じゃないケース) */
  :is(#globalMenuPc, .pcMenuViewport, .pcMenuTrack) .spMenuList>li.is-selected::before {
    background: transparent;
  }

  :is(#globalMenuPc, .pcMenuViewport, .pcMenuTrack) .spMenuList>li.is-selected+li::before {
    display: none;
  }

  /* ▷ インジケータ（右端） */
  :is(#globalMenuPc, .pcMenuViewport, .pcMenuTrack) .spMenuRow.is-selected,
  :is(#globalMenuPc, .pcMenuViewport, .pcMenuTrack) .spMenuRow:has(> .spMenuRow__link.is-selected),
  :is(#globalMenuPc, .pcMenuViewport, .pcMenuTrack) .spMenuRow:has(> .spMenuRow__btn.is-selected) {
    position: relative;
  }

  :is(#globalMenuPc, .pcMenuViewport, .pcMenuTrack) .spMenuRow.is-selected::after,
  :is(#globalMenuPc, .pcMenuViewport, .pcMenuTrack) .spMenuRow:has(> .spMenuRow__link.is-selected)::after,
  :is(#globalMenuPc, .pcMenuViewport, .pcMenuTrack) .spMenuRow:has(> .spMenuRow__btn.is-selected)::after {
    content: "";
    position: absolute;
    right: -8px;
    top: 50%;
    transform: translateY(-50%);

    width: 0;
    height: 0;
    border-top: 6px solid transparent;
    /* 高さ12px（6+6） */
    border-bottom: 6px solid transparent;
    /* 高さ12px（6+6） */
    border-left-width: 6px;
    /* ←幅6px */
    border-left-style: solid;
    border-left-color: var(--menu-primary, var(--c-primary));
    z-index: 999;

    pointer-events: none;
  }

  /* PC: is-selected の右矢印を枠外に出すため、カードのクリップ/paint containment を解除 */
  #globalMenuPc .spMenuCard,
  .pcMenuViewport .spMenuCard,
  .pcMenuTrack .spMenuCard {
    /* 枠外に描画できるように */
    overflow: visible;

    /* content-visibility が paint containment を作って ::after をクリップするのを止める */
    content-visibility: visible;
    contain-intrinsic-size: auto;

    /* 安定のため layout/style だけ閉じる（paintは閉じない） */
    contain: layout style;
  }

  /* PC: 選択行のインジケータを前面に */
  :is(#globalMenuPc, .pcMenuViewport, .pcMenuTrack) .spMenuRow.is-selected {
    z-index: 2;
  }

  /* 選択行の右側アイコン類（> / ● など）も白に寄せる */
  :is(#globalMenuPc, .pcMenuViewport, .pcMenuTrack) .spMenuRow.is-selected .spMenuRow__chev,
  :is(#globalMenuPc, .pcMenuViewport, .pcMenuTrack) .spMenuRow__link.is-selected .spMenuRow__chev,
  :is(#globalMenuPc, .pcMenuViewport, .pcMenuTrack) .spMenuRow__btn.is-selected .spMenuRow__chev {
    color: rgba(255, 255, 255, .95);
  }

  :is(#globalMenuPc, .pcMenuViewport, .pcMenuTrack) .spMenuRow.is-selected .spMenuRow__circle,
  :is(#globalMenuPc, .pcMenuViewport, .pcMenuTrack) .spMenuRow__link.is-selected .spMenuRow__circle,
  :is(#globalMenuPc, .pcMenuViewport, .pcMenuTrack) .spMenuRow__btn.is-selected .spMenuRow__circle {
    background: rgba(255, 255, 255, .28);
  }
}

/* =========================
   PC menu CTA
   ========================= */
#globalMenuPc .menuPanel {
  /* JSでもflex入ってるけど、CSS側でも保険で定義 */
  display: flex;
  flex-direction: column;
  height: 100%;
}

#globalMenuPc .pcMenuBody {
  flex: 1 1 auto;
  min-height: 0;
  /* これないと下に押し出せず崩れる事がある */
}

/* CTA本体：メニューリストの下に配置（Figma 15:145 準拠）
   区切り線 + 上余白でメニューとの間隔を確保。左右20pxはリスト行と天地を揃える。 */
#globalMenuPc .pcMenuCta {
  margin-top: auto;
  flex: 0 0 auto;
  padding: 17px 20px 22px;
  border-top: 1px solid #E7E5E0;
  background: var(--c-bg);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 22px;
  font-weight: 800;
}

/* PCメニュー内にクローンしたSP CTAが入ってきても、fixed前提のスタイルを無効化 */
#globalMenuPc .pcMenuCta .spFixedCtas {
  position: static;
  left: auto;
  right: auto;
  bottom: auto;
  z-index: auto;

  padding: 0;
  background: transparent;
  pointer-events: auto;

  font-size: inherit;
}

/* SP用の“バー”構造がそのまま来た場合は、PCでは縦積みにする */
#globalMenuPc .pcMenuCta .spFixedCtas__bar {
  max-width: none;
  margin: 0;
  height: auto;

  display: flex;
  flex-direction: column;
  gap: 12px;

  background: transparent;
  border: 0;
  box-shadow: none;
  overflow: visible;
  border-radius: 0;
}

/* PCでは区切り線は不要 */
#globalMenuPc .pcMenuCta .spFixedCtas__divider {
  display: none;
}

/* 店舗を探すボタン（PCメニュー内） */
#globalMenuPc .pcMenuCta .spFixedCtas__link:not([href^="tel:"]) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;

  padding: 0 14px;
  width: 100%;
  height: 60px;

  border-radius: 9999px;
  border: 1px solid rgba(0, 0, 0, .12);
  background: #fff;

  text-decoration: none;
  color: var(--c-text);
  line-height: 1;
  white-space: nowrap;
}

/* PC CTA: hover/active text + icon color */
#globalMenuPc .pcMenuCta .spFixedCtas__link:not([href^="tel:"]):is(:hover, :active) {
  color: #726D69;
}

/* 電話（PCメニュー内）：ボタン化しない + クリック不可 */
#globalMenuPc .pcMenuCta .spFixedCtas__link[href^="tel:"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;

  width: 100%;
  height: auto;
  min-height: 0;
  padding: 8px 0 0;

  border: 0;
  background: transparent;
  border-radius: 0;

  text-decoration: none;
  color: var(--c-text);
  line-height: 1;
  white-space: nowrap;

  pointer-events: none;
  cursor: default;
}

#globalMenuPc .pcMenuCta .spFixedCtas__link[href^="tel:"]:is(:hover, :active) {
  color: var(--c-text);
}

/* PCでは電話リンクは無効（表示はするがクリック不可） */
#globalMenuPc .pcMenuCta a[href^="tel:"] {
  pointer-events: none;
  cursor: default;
  text-decoration: none;
  color: inherit;
}

/* Icon / future SVG should follow currentColor */
#globalMenuPc .pcMenuCta .spFixedCtas__link .spFixedCtas__icon {
  color: inherit;
}

#globalMenuPc .pcMenuCta .spFixedCtas__link svg {
  fill: currentColor;
}

#globalMenuPc .pcMenuCta .spFixedCtas__link svg * {
  fill: currentColor;
  stroke: currentColor;
}

/* 電話番号（PCではリンクでもspanでも崩れないように） */
#globalMenuPc .pcMenuCta .spFixedCtas__tel,
#globalMenuPc .pcMenuCta span.spFixedCtas__tel,
#globalMenuPc .pcMenuCta .spFixedCtas__link[href^="tel:"],
#globalMenuPc .pcMenuCta a[href^="tel:"] {
  font-weight: 700;
  white-space: nowrap;
}

/* =========================================================
  SP fixed CTA（ページ共通：店舗/電話）
  - どんな状況でも画面下部に固定表示
  - デザイン：左右33px / 下40px
========================================================= */
.spFixedCtas {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2600;
  /* menuOverlay(2400)より上にして、メニュー開閉中も常時表示 */

  padding: 14px 33px calc(40px + env(safe-area-inset-bottom));
  background: linear-gradient(to top, rgba(0, 0, 0, .28), rgba(0, 0, 0, 0));

  pointer-events: none;

  font-size: clamp(12px, 4.1025641026vw, 16px);
}

.spFixedCtas__bar {
  pointer-events: auto;

  max-width: 560px;
  margin: 0 auto;

  height: var(--sp-fixed-cta-h);
  display: flex;
  align-items: center;

  border-radius: 999px;
  background: rgba(255, 255, 255, .96);
  backdrop-filter: blur(10px);

  border: 1px solid rgba(0, 0, 0, .10);
  box-shadow: 0 18px 34px rgba(0, 0, 0, .25);

  overflow: hidden;
  --cta-left-w: 46%;
  /* 左（店舗）と右（電話）の比率：デザインに合わせて微調整OK */
}

.spFixedCtas__divider {
  width: 1px;
  height: 60%;
  background: rgba(0, 0, 0, .14);
}

.spFixedCtas__link {
  flex: 0 0 auto;
  min-width: 0;

  height: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 2.56410vw;
  padding: 0 14px;
  /* 均等割りをやめるので、文字まわりの余白を確保 */
  color: var(--c-text);
  border-radius: 999px;

  text-decoration: none;
  font-weight: 800;

  background: transparent;
  border: 0;
  white-space: nowrap;
}

/* CTA: 左右を非均等幅に（デザインは均等ではない） */
.spFixedCtas__bar>.spFixedCtas__link:first-child {
  flex: 0 0 var(--cta-left-w);
}

.spFixedCtas__bar>.spFixedCtas__link:last-child {
  flex: 1 1 auto;
}

.spFixedCtas__icon {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  line-height: 1;
  color: inherit;
  flex: 0 0 auto;
  font-size: 13px;
}

.spFixedCtas__icon::before {
  content: "";
  display: inline-block;
  width: 20px;
  height: 20px;
  /* アイコン色は本文黒（--c-text）を参照して一括管理。
     data URI は CSS変数を持てないため mask で形を切り抜き、background-color で着色する。 */
  background-color: var(--c-text);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path d='M10 0A8.579 8.579 0 001.42 8.58C1.42 16.652 10 20 10 20s8.58-3.347 8.58-11.419A8.579 8.579 0 0010 0m0 11.408a3.291 3.291 0 113.291-3.29A3.291 3.291 0 0110 11.408'/></svg>") no-repeat center / contain;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path d='M10 0A8.579 8.579 0 001.42 8.58C1.42 16.652 10 20 10 20s8.58-3.347 8.58-11.419A8.579 8.579 0 0010 0m0 11.408a3.291 3.291 0 113.291-3.29A3.291 3.291 0 0110 11.408'/></svg>") no-repeat center / contain;
}

.spFixedCtas__link[href^="tel:"] .spFixedCtas__icon::before {
  /* 電話アイコンに形だけ差し替え（色は上のルールの background-color を継承） */
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path d='M19.668 15.909l-3.04-3.04a1.132 1.132 0 00-1.6 0l-1.379 1.38a1.132 1.132 0 01-1.493.094 25.476 25.476 0 01-3.475-3.026A25.5 25.5 0 015.656 7.842a1.134 1.134 0 01.095-1.493L7.13 4.971a1.131 1.131 0 000-1.6L4.091.331a1.131 1.131 0 00-1.6 0L.658 2.165c-1.944 1.943.627 7.9 4.953 12.224s10.281 6.9 12.224 4.953l1.833-1.834a1.13 1.13 0 000-1.6z'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path d='M19.668 15.909l-3.04-3.04a1.132 1.132 0 00-1.6 0l-1.379 1.38a1.132 1.132 0 01-1.493.094 25.476 25.476 0 01-3.475-3.026A25.5 25.5 0 015.656 7.842a1.134 1.134 0 01.095-1.493L7.13 4.971a1.131 1.131 0 000-1.6L4.091.331a1.131 1.131 0 00-1.6 0L.658 2.165c-1.944 1.943.627 7.9 4.953 12.224s10.281 6.9 12.224 4.953l1.833-1.834a1.13 1.13 0 000-1.6z'/></svg>");
}

@media (min-width: 968px){
  .spFixedCtas {
    display: none;
  }
}

/* =========================================================
  SP: レイアウト調整
  - ヘッダー固定分の上余白
  - 固定CTA分の下余白
========================================================= */
@media (max-width: 967px) {

  /* SP: 横方向にドラッグしたときにオフキャンバス要素が見えないようにする */
  html,
  body {
    overflow-x: hidden;
    overscroll-behavior-x: none;
  }

  /* 念のため：SPではPC固定メニューは常に非表示 */
  #globalMenuPc {
    display: none;
  }

  /* SPでは overlay メニューを使う */
  #globalMenu {
    display: block;
  }

  /* SPではヘッダーを表示（PCはデフォルトで非表示） */
  .siteHeader {
    display: block;
  }

  html {
    scroll-padding-top: calc(var(--sp-header-h) + env(safe-area-inset-top));
  }

  .pageBody [id] {
    scroll-margin-top: calc(var(--sp-header-h) + env(safe-area-inset-top));
  }

  body {
    padding-top: calc(var(--sp-header-h) + env(safe-area-inset-top));
    /* padding-bottom: calc(var(--sp-fixed-cta-h) + 40px + env(safe-area-inset-bottom));*/
  }

  .siteHeader {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    z-index: 3000;
    /* menuOverlay(2400)より上：SPでもヘッダーを常時最前面 */

    background: rgba(255, 255, 255, .96);
    backdrop-filter: blur(10px);
    padding-top: env(safe-area-inset-top);

    /* Figma準拠：SPヘッダーは下線・影なしのフラットな白バー（baseの値を打ち消す） */
    border-bottom: none;
    box-shadow: none;
  }

  /* SP：ヘッダーは内容領域60px（上下paddingなし）に固定 */
  .siteHeader__inner {
    min-height: 0;
    /* baseのmin-heightを上書き */
    height: var(--sp-header-h);

    /* SP: ロゴ左余白は17px */
    padding: 0;
    padding-left: 17px;
  }
}

/* =========================================================
  SP: ultra small width fallback
  - <=343px でヘッダー内が詰まって崩れる問題の対策
  - ロゴを可変（縮小）にしつつ、メニューは右寄せを維持
  - 中央の「・個人/法人」は極小幅では非表示（表示すると必ず衝突するため）
========================================================= */
@media (max-width: 343px) {

  /* 3カラム（logo / audience / menu）を 2カラム（logo / menu）に */
  .siteHeader__inner {
    grid-template-columns: 1fr auto;
    gap: 8px;
    padding-right: 8px;
    /* 右端が詰まりすぎないように */
  }

  /* 極小幅では中央表示を消して衝突回避 */
  .siteHeader__audience {
    display: none;
  }

  /* ロゴは縮められるようにする */
  .siteHeader__logo {
    min-width: 0;
  }

  /* ロゴ画像：140pxを上限に、残り幅に合わせて縮小 */
  .siteHeader__logo img {
    width: auto;
    max-width: calc(100vw - 17px - 8px - var(--menu-btn-size) - 8px);
    height: 20px;
    object-fit: contain;
  }
}



/* =========================================================
  Breadcrumb
========================================================= */
.breadcrumb {
  /* ページ上部（H1の上）に置く想定 */
  padding: 12px 17px 12px;

  /* 個人: #39A7AA / 法人: #3C7EC8（body.is-business で --c-primary が切替） */
  background: var(--c-primary);

  width: 100%;
  color: #fff;
}

.breadcrumb__list {
  margin: 0;
  padding: 0;
  list-style: none;

  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.breadcrumb__item {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  /* 長い時に潰れるのを許可 */
  font-size: 12px;
  line-height: 1.4;
  color: rgba(255, 255, 255, .92);
}

/* 区切り（2階層目以降） */
.breadcrumb__item+.breadcrumb__item::before {
  content: "＞";
  display: inline-block;
  margin: 0 6px 0 0;
  color: rgba(255, 255, 255, .65);
}

/* リンク */
.breadcrumb__link {
  color: inherit;
  text-decoration: none;
  border-radius: 6px;
  padding: 2px 4px;
}

.breadcrumb__link:hover {
  text-decoration: underline;
}

.breadcrumb__link:focus-visible {
  outline: 3px solid rgba(255, 255, 255, .55);
  outline-offset: 2px;
}

/* 現在地（リンクじゃないli） */
.breadcrumb__item[aria-current="page"] {
  color: #fff;
  font-weight: 700;
}

/* PC */
@media (min-width: 1024px) {

  /* 背景色は全幅のまま、内容だけ 968px 上限 + 中央寄せ（左右最小100px） */
  .breadcrumb {
    padding: 12px 0;
  }

  .breadcrumb__list {
    width: calc(100% - 200px);
    max-width: 968px;
    margin: 0 auto;
  }

  .breadcrumb__item {
    font-size: 13px;
  }
}

/* =========================================================
  Page title (H1)
  - HTML: <header class="pageHero"><div class="pageHero__inner"><h1 class="pageHero__title">...
  - Optional icon:
    - add `.pageHero__title--withIcon` to the H1
    - choose one icon type class below (you can add more later)
========================================================= */
.pageHero {
  /* Breadcrumb の次に来る見出し帯 */
  background-color: #fff;
  color: var(--c-text);

  /* NOTE: 背景は SP/PC で出し分け（webp優先 + 1x/2x + pngフォールバック） */
  background-image: url("/assets/img/h1_bg_sp.png");
  background-image: image-set(url("/assets/img/h1_bg_sp.webp") type("image/webp") 1x,
      url("/assets/img/h1_bg_sp@2x.webp") type("image/webp") 2x,
      url("/assets/img/h1_bg_sp.png") type("image/png") 1x,
      url("/assets/img/h1_bg_sp@2x.png") type("image/png") 2x);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

.pageHero__inner {
  /* NOTE:
     画面幅がどんなに広くても“中央寄せ”にしない。
     右側は伸びてOK、左は一定の余白で左寄せに固定する。
     （PC左固定メニュー分の余白は body の padding-left で担保済み）
  */
  max-width: none;
  margin: 0 0 40px;

  /* XD: SP=120px / PC=240px（高さは内側の最低高で担保） */
  min-height: 120px;

  /* タイトルを縦中央に */
  display: flex;
  align-items: center;

  /* 左右余白（SP） */
  padding: 0 16px;
}

.pageHero__title {
  margin: 0;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: .02em;

  /* SP */
  font-size: 22px;
}

/* --- Icon variant (same typography; only adds icon spacing/rendering) --- */
.pageHero__title--withIcon {
  position: relative;
  padding-left: 30px;
  /* アイコンぶん */
}

.pageHero__title--withIcon::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);

  width: 20px;
  height: 20px;

  /* default icon appearance (will be overridden by icon type classes) */
  border-radius: 999px;
  background: rgba(114, 109, 105, .22);
  border: 2px solid #726D69;
}

/* Icon type examples (CSSだけで差し替え可能な設計) */
.pageHero__title--icon-dot::before {
  background: #726D69;
  border: 0;
  width: 10px;
  height: 10px;
  left: 5px;
}

.pageHero__title--icon-ring::before {
  background: transparent;
  border: 2px solid #726D69;
}

@media (min-width: 968px) {
  .pageHero {
    background-image: url("/assets/img/h1_bg_pc.png");
    background-image: image-set(url("/assets/img/h1_bg_pc.webp") type("image/webp") 1x,
        url("/assets/img/h1_bg_pc@2x.webp") type("image/webp") 2x,
        url("/assets/img/h1_bg_pc.png") type("image/png") 1x,
        url("/assets/img/h1_bg_pc@2x.png") type("image/png") 2x);
  }

  .pageHero__inner {
    min-height: 240px;

    /* PC: 内容は max 968px / 左右最小100px / それ以上は auto（中央寄せ） */
    width: calc(100% - 200px);
    max-width: 968px;
    margin: 0 auto 80px;

    /* SP用の左右padding(16px)をPCでは不要にする */
    padding: 0;
  }

  .pageHero__title {
    font-size: 40px;
  }

  .pageHero__title--withIcon {
    padding-left: 40px;
  }

  .pageHero__title--withIcon::before {
    width: 28px;
    height: 28px;
  }

  .pageHero__title--icon-dot::before {
    width: 12px;
    height: 12px;
    left: 8px;
  }
}

/* =========================================================
  Subpage FV
  - PC: width 960px fixed (left aligned), height is flexible
  - SP: width 356px fixed (= 17px * 2 を引いた想定)
========================================================= */
.subpageFv {
  margin: 0 17px 40px;
}

.subpageFv__figure {
  margin: 0;
  width: 100%;
}

.subpageFv__img {
  display: block;
  max-width: 100%;
  width: 100%;
  height: auto;
  text-align: center;
  /* 高さ固定しない（運用で可変の可能性があるため） */
}

/* XD上ではキャプション表示なし（構造は残す） */
.subpageFv__caption {
  display: none;
}

@media (min-width: 1024px) {
  .subpageFv {
    width: calc(100% - 200px);
    max-width: 968px;
    margin: 0 auto 80px;
  }
}

/* =========================================================
  Section wrapper (common horizontal gutter)
  - Use <section class="section"> to align all inner elements
  - SP: 17px
  - PC: 100px
========================================================= */
.section {
  margin: 0 17px 40px;
}

@media (min-width: 1024px) {
  .section {
    width: calc(100% - 200px);
    max-width: 968px;
    margin: 0 auto 100px;
  }
}

/* =========================================================
  Buttons (sample)
  - HTML: .btnRow > a.btn.btn--*
  - Size: max-width 260px / height 60px (PC/SP)
  - When aligned horizontally, keep 24px gap
  - Icon circle and text gap: 8px
========================================================= */

.btnRow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  /* ボタン群は常に中央寄せ */
  gap: 24px;
}

/* Base button */
.btn {
 box-sizing: border-box;
    height: 60px;
    /* width: 240px; */
    /* max-width: 240px; */
    display: inline-flex;
    align-items: center;
    padding: 0 20px;
    border-radius: 9999px;
    text-decoration: none;
    font-weight: 800;
    line-height: 1;
    flex: 0 1 240px;
    /* min-width: 0; */
    transition: background 160ms ease, color 160ms ease, border-color 160ms ease;
    position: relative;
    --btn-icon-bg: transparent;
    --btn-icon-fg: currentColor;
}


.btn__text {
  font-size: 16px;
  white-space: nowrap;
  min-width: 180px;
  text-align: center;
}

/* Circle icon (default)
   - Use SVG arrow path as a mask so we can invert colors on hover
   - Default behavior: outline circle + arrow in currentColor (backward-compatible)
*/

.btn__icon {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  border: 2px solid currentColor;
  background: var(--btn-icon-bg);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Arrow (SVG icon-3 path) */
.btn__icon::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--btn-icon-fg);
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A//www.w3.org/2000/svg'%20viewBox%3D'0%200%2020%2020'%3E%3Cpath%20d%3D'M15.03%209.47l-4-4A.75.75%200%200%200%209.969%206.531l2.72%202.719H5.5a.75.75%200%200%200%200%201.5h7.189l-2.72%202.72a.75.75%200%200%200%201.061%201.061l4-4a.75.75%200%200%200%200-1.061'%20fill%3D'%23000'/%3E%3C/svg%3E");
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: 20px 20px;
}

/* If .btn_back is present, rotate the arrow (mask) 180deg */
.btn_back.btn__icon::before {
  transform: rotate(180deg);
  transform-origin: 50% 50%;
}



/* 0116 外部ファイル */

/* Keyboard focus */
.btn:focus {
  outline: none;
}

.btn:focus-visible {
  outline: 3px solid rgba(var(--c-primary-rgb), .28);
  outline-offset: 3px;
}

/* SP 2-up sample row: keep two buttons in a row, allow shrinking to avoid overflow */
.btnRow.btnRow--twoUp {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 260px));
  gap: 24px;
  align-items: center;
  justify-content: center;
  /* 2-up全体を中央寄せ */
  justify-items: center;
  /* 各ボタンを列の中央に */
}

.btnRow.btnRow--twoUp .btn {
  width: 100%;
  max-width: 240px;
}

/* -------------------------
   Variant: Normal button
   - Border: 2px solid #160D06
   - Hover: full black bg, white text
-------------------------- */
.btn.btn--normal {
  border: 2px solid #160D06;
  background: #fff;
  color: #160D06;
  --btn-icon-bg: #160D06;
  --btn-icon-fg: #fff;
}

.btn--external,
.btn--pdf {
  border: 2px solid #160D06;
  /* background: transparent; */
  background: #fff;
  color: #160D06;

  /* default icon matches provided SVG:
     circle = #160D06, arrow = #fff
  */
  --btn-icon-bg: #160D06;
  --btn-icon-fg: #fff;
}

.btn.btn--normal:is(:hover, :active),
.btn--external:is(:hover, :active),
.btn--pdf:is(:hover, :active) {
  background: #160D06;
  color: #fff;

  /* invert icon on hover/active:
     circle = #fff, arrow = #160D06
  */
  --btn-icon-bg: #fff;
  --btn-icon-fg: #160D06;
}

/* SVG style: no ring border */
.btn.btn--normal .btn__icon {
  border: 0;
}

/* =========================================================
  Section title (H2) divider
  - これまで <hr class="hr"> で表現していた区切り線を、h2側のスタイルに集約
  - 上線は 4px / 左→右グラデ（#39A7AA → #3C7EC8）
  NOTE: HTML側で h2 に `.sectionTitle` を付与して運用する
========================================================= */
.sectionTitle {
  margin: 0;
  padding-top: 18px;

  /* XD: H2 is 24px on both SP/PC */
  font-size: 24px;
  font-weight: 700;
  /* Noto Sans JP Bold */
  line-height: 1.3;
  letter-spacing: .02em;
  color: var(--c-text);

  position: relative;
}

/* 4px gradient divider line */
.sectionTitle::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 4px;
  background: linear-gradient(90deg, #39A7AA 0%, #3C7EC8 100%);
}

/* Center title variant */
.sectionTitle--center {
  text-align: center;
}

/* 直下にテキストが続く想定の余白（必要ならページ側で上書きOK） */
.sectionTitle+* {
  margin-top: 14px;
}

@media (min-width: 968px) {
  .sectionTitle {
    padding-top: 22px;
    margin-bottom: 60px;
  }

  .sectionTitle+* {
    margin-top: 16px;
  }
}

/* =========================================================
  Sub section title (H3)
  - HTML: <h3 class="typography__h3">...
  - XD: SP/PCともに font-size 20px
  - 背景 #E7E6E5 / 角丸 8px
  - 幅：section内100% / 高さ：61px
  - padding: 16px 24px
  - Optional modifiers (将来用):
    - .typography__h3--center
    - .typography__h3--withIcon + icon type classes
========================================================= */
.typography__h3 {
  margin: 60px 0 20px;
  /* 上60px / 下20px */

  width: 100%;
  min-height: 61px;
  box-sizing: border-box;

  padding: 16px 24px;
  background: #E7E6E5;
  border-radius: 8px;

  display: flex;
  align-items: center;

  font-size: 20px;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: .02em;
  color: var(--c-text);

  position: relative;
}

/* Center title variant (optional) */
.typography__h3--center {
  justify-content: center;
  text-align: center;
}

/* 直下にテキストが続く想定の余白（必要ならページ側で上書きOK） */


/* --- Icon variant (optional) --- */
.typography__h3--withIcon {
  padding-left: 52px;
  /* 24px(元padding) + アイコン領域 */
}

.typography__h3--withIcon::before {
  content: "";
  position: absolute;
  left: 24px;
  top: 50%;
  transform: translateY(-50%);

  width: 18px;
  height: 18px;

  /* default icon appearance (will be overridden by icon type classes) */
  border-radius: 999px;
  background: rgba(114, 109, 105, .22);
  border: 2px solid #726D69;
}

/* Icon type examples (CSSだけで差し替え可能な設計) */
.typography__h3--icon-dot::before {
  background: #726D69;
  border: 0;
  width: 10px;
  height: 10px;
  left: 28px;
  /* 24px + 4px */
}

.typography__h3--icon-ring::before {
  background: transparent;
  border: 2px solid #726D69;
}

@media (min-width: 968px) {
  .typography__h3--withIcon {
    padding-left: 60px;
  }

  .typography__h3--withIcon::before {
    width: 22px;
    height: 22px;
  }

  .typography__h3--icon-dot::before {
    width: 12px;
    height: 12px;
    left: 29px;
  }
}



/* =========================================================
  Typography body spacing (H2–H6 / p / lists)
  - HTML: <div class="typography"> ... </div>
  - 本文ブロック内の余白は親(.typography)では持たず、要素ごとの margin でリズムを作る
========================================================= */
.typography {
  /* 本文（p/h4-h6など）の左右ガター：SP=16px / PC=24px */
  --typo-gutter: 16px;
  padding: 0 var(--typo-gutter);
}

@media (min-width: 968px){
  .typography {
    --typo-gutter: 24px;
  }
}

/* Base text (p / li / dd etc.) */
.typography :where(p, li, dd, dt) {
  font-size: 16px;
  line-height: 1.8;
  color: #2B1F13;
}

/* Paragraph spacing: always 20px under p */
.typography p {
  margin: 0 0 20px;
}

/* =========================================================
  Lists (disc / ordered)
  - HTML example:
    <ul class="list list--disc"> ... </ul>
    <ol class="list list--order"> ... </ol>
  - UL 1st level: #39A7AA, 8px circle
  - UL 2nd+ level: #726D69, 4px circle
  - OL 1st level: 1. 2. 3.
  - OL 2nd+ level: ⅰ ⅱ ⅲ …
  - Indent: +1em per nested level
  - Spacing: 8px between li (bottom)
  - Gap between marker and text: 8px
========================================================= */

/* --- Custom counter for unicode small roman numerals (ⅰ ⅱ ⅲ …) --- */
@counter-style lower-roman-unicode {
  system: fixed;
  symbols:
    "ⅰ" "ⅱ" "ⅲ" "ⅳ" "ⅴ" "ⅵ" "ⅶ" "ⅷ" "ⅸ" "ⅹ" "ⅺ" "ⅻ";
  suffix: " ";
}

/* --- Decorative ordered list (decimal in 32px circle) ---
   HTML: <ol class="list list--decimal-alpha"> ... </ol>
   - Marker: 32px circle with current theme color (personal/business)
   - Number: 16px, Montserrat, bold
   - Text: 16px, bold (Noto Sans JP remains)
   - Gap between marker and text: 8px
   - Spacing between items: 8px
*/
.typography ol.list.list--decimal-alpha {
  list-style: none;
  margin: 0 0 20px;
  padding: 0;
  counter-reset: decimalAlpha;
}

.typography ol.list.list--decimal-alpha>li {
  counter-increment: decimalAlpha;
  /* display: flex; */
  align-items: flex-start;
  gap: 8px;

  margin: 0 0 12px;
  font-weight: 700;
}

.typography ol.list.list--decimal-alpha>li:last-child {
  margin-bottom: 0;
}

.typography ol.list.list--decimal-alpha>li::before {
  content: counter(decimalAlpha);

  width: 32px;
  height: 32px;
  flex: 0 0 32px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  border-radius: 999px;
  background: var(--c-primary);
  color: #fff;

  font-family: "Montserrat", "Noto Sans JP", system-ui, -apple-system, "Segoe UI", Roboto, "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
}

/* =====================
   OL: circled numbers (①〜㊿)
   Android端末では①等の囲み英数字グリフがフォント次第で欠落するため、
   文字コードに頼らずCSSで丸を描画する（counter()方式）
   ===================== */
.typography ol.list.list--circled-numbers {
  list-style: none;
  margin: 0 0 20px;
  padding: 0;
  counter-reset: circledNumber;
}

.typography ol.list.list--circled-numbers > li {
  counter-increment: circledNumber;
  margin: 0 0 12px;
  padding-left: 1.5em;
  position: relative;
}

.typography ol.list.list--circled-numbers > li:last-child {
  margin-bottom: 0;
}

.typography ol.list.list--circled-numbers > li::before {
  content: counter(circledNumber);

  position: absolute;
  left: 0;
  top: 0.65em;

  width: 1.5em;
  height: 1.5em;
  box-sizing: border-box;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  border: 1px solid currentColor;
  border-radius: 50%;

  font-size: 0.7em;
  line-height: 1;
}

/* =====================
   UL: disc
   ===================== */
.typography ul.list--disc {
  list-style: none;
  margin: 0 0 20px;
  padding-left: 0;
}

/* Nested levels: +1em indent per level */
.typography ul.list--disc ul {
  list-style: none;
  margin: 8px 0 0;
  padding-left: 1em;
}

/* Base li spacing */
.typography ul.list--disc li {
  position: relative;
  margin: 0 0 8px;
}

/* 1st level marker: 8px circle + 8px gap */
.typography ul.list--disc>li {
  padding-left: 16px;
  /* 8px marker + 8px gap */
}

.typography ul.list--disc>li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.9em;
  transform: translateY(-50%);
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #39A7AA;
}

/* 2nd+ level marker: 4px circle + 8px gap */
.typography ul.list--disc ul>li {
  padding-left: 12px;
  /* 4px marker + 8px gap */
}

.typography ul.list--disc ul:not(.c-itemsNotes)>li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.9em;
  transform: translateY(-50%);
  width: 4px;
  height: 4px;
  border-radius: 999px;
  background: #726D69;
}

/* remove trailing margin on last item of each list */
.typography ul.list--disc>li:last-child,
.typography ul.list--disc ul>li:last-child {
  margin-bottom: 0;
}

/* =====================
   OL: ordered
   ===================== */
.typography ol {
  list-style: none;
  margin: 0 0 20px;
  padding-left: 0;
  counter-reset: ol-item;
}

/* Nested levels: +1em indent per level */
.typography ol ol {
  margin: 8px 0 0;
  counter-reset: ol-item;
}

/* Base li spacing */
.typography ol li {
  position: relative;
  margin: 0 0 8px;
}

/* Marker area width (enough for 1. / ⅷ etc.) + 8px gap */
.typography ol>li,
.typography ol ol>li {
  padding-left: calc(1.8em + 8px);
}

/* 1st level: 1. 2. 3. */
.typography ol>li {
  counter-increment: ol-item;
}

.typography ol>li::before {
  content: counter(ol-item) ".";
  position: absolute;
  left: 0;
  top: 0;
  width: 1.8em;
  text-align: right;
}

/* 2nd+ level: ⅰ ⅱ ⅲ … */
.typography ol ol>li {
  counter-increment: ol-item;
}

.typography ol ol>li::before {
  content: counter(ol-item, lower-roman-unicode);
  position: absolute;
  left: 0;
  top: 0;
  width: 1.8em;
  text-align: right;
}

/* remove trailing margin on last item of each list */
.typography ol>li:last-child,
.typography ol ol>li:last-child {
  margin-bottom: 0;
}

/* 入れ子OLを既定の ⅰ ⅱ ⅲ ではなく 1. 2. 3. 表示に戻す修飾クラス
   HTML: 入れ子側の<ol>に list--decimal-nested を追加するだけで流用可
   <ol class="list list--decimal">
     <li>text
       <ol class="list list--decimal-nested">
         <li>...</li>
       </ol>
     </li>
   </ol>
*/
.typography ol.list--decimal-nested>li::before {
  content: counter(ol-item) ".";
}

/* ①〜㊿ 専用の連番 */
@counter-style circle-num-jp {
  system: fixed;
  symbols:
    ① ② ③ ④ ⑤ ⑥ ⑦ ⑧ ⑨ ⑩
    ⑪ ⑫ ⑬ ⑭ ⑮ ⑯ ⑰ ⑱ ⑲ ⑳
    ㉑ ㉒ ㉓ ㉔ ㉕ ㉖ ㉗ ㉘ ㉙ ㉚
    ㉛ ㉜ ㉝ ㉞ ㉟ ㊱ ㊲ ㊳ ㊴ ㊵
    ㊶ ㊷ ㊸ ㊹ ㊺ ㊻ ㊼ ㊽ ㊾ ㊿;
  suffix: " ";
}

/* circle_num クラスのときだけ適用 */
.typography ol.circle_num {
  list-style: circle-num-jp;
  padding-left: 1.8em; /* 必要なら調整 */
}

.typography ol.circle_num > li{
  padding-left: 0.5em;
}

/* もし既存CSSで li::before で番号を作ってるなら潰す */
.typography ol.circle_num > li::before {
  content: none;
}

/* External / PDF link icon (target=_blank)
   - site.js adds data-link-type="pdf" for PDF URLs so we can swap the icon without changing the link behavior.
   - Existing exclusions such as image links are kept as-is.
*/
.typography a[target="_blank"]:not(:has(.btn__iconExternal)):not(.btn--subPrimary):not(:has(img))::after {
  content: "";
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-left: 4px;
  vertical-align: -2px;
  background-color: currentColor;
  opacity: .95;
}

.typography a[target="_blank"][data-link-type="pdf"]:not(:has(.btn__iconExternal)):not(.btn--subPrimary):not(:has(img))::after {
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M12.5 20H2.5A2.5 2.5 0 0 1 0 17.5V7.5a.5.5 0 0 1 1 0v10A1.5 1.5 0 0 0 2.5 19h10a.5.5 0 1 1 0 1' fill='%23000'/%3E%3Cpath d='M17.5 17H5.5A2.5 2.5 0 0 1 3 14.5V2.5A2.5 2.5 0 0 1 5.5 0h12A2.5 2.5 0 0 1 20 2.5v12A2.5 2.5 0 0 1 17.5 17M5.5 1A1.5 1.5 0 0 0 4 2.5v12A1.5 1.5 0 0 0 5.5 16h12A1.5 1.5 0 0 0 19 14.5V2.5A1.5 1.5 0 0 0 17.5 1Z' fill='%23000'/%3E%3Cpath d='M8.374 6.681A1.522 1.522 0 0 1 9 7.325a2.091 2.091 0 0 1 .218.98A2.1 2.1 0 0 1 9 9.286a1.52 1.52 0 0 1-.622.643 1.91 1.91 0 0 1-.946.224H6.862v1.2H5.541v-4.9H7.428a1.92 1.92 0 0 1 .946.223M7.747 8.729a.733.733 0 0 0 0-.848.518.518 0 0 0-.4-.15H6.862V8.879h.482a.514.514 0 0 0 .4-.15' fill='%23000'/%3E%3Cpath d='M9.7 6.457h1.932a2.229 2.229 0 0 1 1.157.3 2.011 2.011 0 0 1 .778.85 2.872 2.872 0 0 1 .278 1.3 2.876 2.876 0 0 1-.278 1.3 2.011 2.011 0 0 1-.778.85 2.229 2.229 0 0 1-1.157.3H9.7Zm1.876 3.611a.846.846 0 0 0 .681-.3 1.3 1.3 0 0 0 .255-.858 1.3 1.3 0 0 0-.255-.857.84.84 0 0 0-.681-.3h-.555v2.323Z' fill='%23000'/%3E%3Cpath d='M15.648 7.7v.84h1.635V9.789H15.648v1.567H14.327v-4.9h3.185V7.7Z' fill='%23000'/%3E%3C/svg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M12.5 20H2.5A2.5 2.5 0 0 1 0 17.5V7.5a.5.5 0 0 1 1 0v10A1.5 1.5 0 0 0 2.5 19h10a.5.5 0 1 1 0 1' fill='%23000'/%3E%3Cpath d='M17.5 17H5.5A2.5 2.5 0 0 1 3 14.5V2.5A2.5 2.5 0 0 1 5.5 0h12A2.5 2.5 0 0 1 20 2.5v12A2.5 2.5 0 0 1 17.5 17M5.5 1A1.5 1.5 0 0 0 4 2.5v12A1.5 1.5 0 0 0 5.5 16h12A1.5 1.5 0 0 0 19 14.5V2.5A1.5 1.5 0 0 0 17.5 1Z' fill='%23000'/%3E%3Cpath d='M8.374 6.681A1.522 1.522 0 0 1 9 7.325a2.091 2.091 0 0 1 .218.98A2.1 2.1 0 0 1 9 9.286a1.52 1.52 0 0 1-.622.643 1.91 1.91 0 0 1-.946.224H6.862v1.2H5.541v-4.9H7.428a1.92 1.92 0 0 1 .946.223M7.747 8.729a.733.733 0 0 0 0-.848.518.518 0 0 0-.4-.15H6.862V8.879h.482a.514.514 0 0 0 .4-.15' fill='%23000'/%3E%3Cpath d='M9.7 6.457h1.932a2.229 2.229 0 0 1 1.157.3 2.011 2.011 0 0 1 .778.85 2.872 2.872 0 0 1 .278 1.3 2.876 2.876 0 0 1-.278 1.3 2.011 2.011 0 0 1-.778.85 2.229 2.229 0 0 1-1.157.3H9.7Zm1.876 3.611a.846.846 0 0 0 .681-.3 1.3 1.3 0 0 0 .255-.858 1.3 1.3 0 0 0-.255-.857.84.84 0 0 0-.681-.3h-.555v2.323Z' fill='%23000'/%3E%3Cpath d='M15.648 7.7v.84h1.635V9.789H15.648v1.567H14.327v-4.9h3.185V7.7Z' fill='%23000'/%3E%3C/svg%3E") no-repeat center / contain;
}

.typography a[target="_blank"]:not([data-link-type="pdf"]):not(:has(.btn__iconExternal)):not(.btn--subPrimary):not(:has(img))::after {
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2016%2016%27%3E%3Cpath%20d%3D%27M15.4%200H10.9a.6.6%200%201%200%200%201.2H14L7.7%207.5a.6.6%200%200%200%20.8.8L14.8%202v3.1a.6.6%200%200%200%201.2%200V.6A.6.6%200%200%200%2015.4%200z%27/%3E%3Cpath%20d%3D%27M11.6%2016H2a2%202%200%200%201-2-2V4.4a2%202%200%200%201%202-2h5.6a.4.4%200%201%201%200%20.8H2A1.2%201.2%200%200%200%20.8%204.4V14A1.2%201.2%200%200%200%202%2015.2h9.6A1.2%201.2%200%200%200%2012.8%2014V8.4a.4.4%200%201%201%20.8%200V14a2%202%200%200%201-2%202z%27/%3E%3C/svg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2016%2016%27%3E%3Cpath%20d%3D%27M15.4%200H10.9a.6.6%200%201%200%200%201.2H14L7.7%207.5a.6.6%200%200%200%20.8.8L14.8%202v3.1a.6.6%200%200%200%201.2%200V.6A.6.6%200%200%200%2015.4%200z%27/%3E%3Cpath%20d%3D%27M11.6%2016H2a2%202%200%200%201-2-2V4.4a2%202%200%200%201%202-2h5.6a.4.4%200%201%201%200%20.8H2A1.2%201.2%200%200%200%20.8%204.4V14A1.2%201.2%200%200%200%202%2015.2h9.6A1.2%201.2%200%200%200%2012.8%2014V8.4a.4.4%200%201%201%20.8%200V14a2%202%200%200%201-2%202z%27/%3E%3C/svg%3E") no-repeat center / contain;
}

/* Keep the bottom clean (no “tail” margin) */
.typography> :last-child {
  margin-bottom: 0;
}

/* Headings: default spacing (top 60 / bottom 20) */
.typography :where(h2, h4, h5, h6, .typography__h2, .typography__h4, .typography__h5, .typography__h6) {
  margin: 60px 0 20px;
}

/* H3 is special: bottom gap differs by viewport */
.typography :where(h3, .typography__h3) {
  margin: 60px 0 40px;
  /* SP: bottom 40 */
}

@media (min-width: 968px){
  .typography :where(h3, .typography__h3) {
    margin-bottom: 80px;
    /* PC: bottom 80 */
  }
}

/* H3 should NOT have left/right gutter (full width) */
.typography :where(h3, .typography__h3) {
  margin-left: calc(var(--typo-gutter) * -1);
  margin-right: calc(var(--typo-gutter) * -1);
  width: calc(100% + (var(--typo-gutter) * 2));
}

/* First heading in typography: no extra top gap */
.typography> :is(h2, h3, h4, h5, h6, .typography__h2, .typography__h3, .typography__h4, .typography__h5, .typography__h6):first-child {
  margin-top: 0;
}

/* H4 */
.typography :where(h4, .typography__h4) {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: .02em;
  color: #160D06;
}

/* Center variant for H4 */
.typography :where(h4.typography__h4--center, .typography__h4--center) {
  text-align: center;
}

/* H5 */
.typography :where(h5, .typography__h5) {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: .02em;
  color: #160D06;
}

/* Center variant for H5 */
.typography :where(h5.typography__h5--center, .typography__h5--center) {
  text-align: center;
}

/* H6 */
.typography :where(h6, .typography__h6) {
  font-size: 16px;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: .02em;
  color: #726D69;
}

/* Center variant for H6 */
.typography :where(h6.typography__h6--center, .typography__h6--center) {
  text-align: center;
}

/* Links inside body */
.typography a {
  font-weight: 700;
  text-decoration: underline;
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* 本文中テキストリンク。
   .typography で包まれていないページでも本文リンクとして成立させるためのクラス。
   a { color: inherit } のため、これが無いと本文と見分けが付かなくなる。 */
.textLink {
  font-weight: 700;
  text-decoration: underline;
}

.typography a.btn {
  text-decoration: none;
}

/* .typography で包まれていないページ(本番157ページ中29ページ)でも本文リンクの
   ホバーが成立するよう、.textLink を同じ宣言の対象に含める。
   a:is(:hover, :active) まで広げる案は、詳細度 0,1,1 でヘッダー/フッター/メニュー/
   カード内リンクのうち自前のホバーで color を指定していないものを巻き込み、
   .siteFooter a などとは同点で記述順依存になるため採らない。 */
.typography a:is(:hover, :active),
.textLink:is(:hover, :active) {
  color: var(--c-primary);
  text-decoration: none;
}

/* ======================================================
  DL
====================================================== */

.dl {
  margin: 0;
}

/* ------------------------------
  Simple dl (dt/dd 横並び)
  - dt が背景 #E7E6E5 / 角丸4px / 太字
  - dd は本文（p）と同等
  - dt と dd の間 12px
------------------------------ */
.dl--simple {
  display: grid;
  grid-template-columns: max-content 1fr;
  column-gap: 12px;
  row-gap: 12px;
  align-items: start;
  /* ★ここを start にする（dtが常に上） */
}

.dl--simple .dl__term {
  grid-column: 1;
  background: #E7E6E5;
  border-radius: 4px;
  padding: 8px 12px;
  font-weight: 700;
  color: #2B1F13;
  line-height: 1.4;
  white-space: nowrap;
  align-self: start;
  /* 念のため（dtは上） */
}

.dl--simple .dl__desc {
  grid-column: 2;
  /* dtが無い連続ddでも右列固定 */
  margin: 0;
  color: #2B1F13;
  line-height: 1.75;
  align-self: center;
  /* ★ddだけ中央寄せにする */
}

/* ------------------------------
  Design dl（テーブル風）
  - PC: 横並び（dt左 / dd右）
  - SP: 縦並び（dt → dd）
------------------------------ */
.dl--design {
  margin-top: 24px;
  /* 必要なら調整 */
  border-radius: 8px;
  overflow: hidden;
}

/* 罫線色は “個人/法人” で切り替わる想定（既存の仕組みに寄せて変数化） */
:root {
  --dl-accent: #39A7AA;
}

body.is-business {
  --dl-accent: #3C7EC8;
}

.dl--design .dl__term,
.dl--design .dl__desc {
  margin: 0;
  padding: 18px 20px;
}

/* dtの薄い色（accentを薄める） */
.dl--design .dl__term {
  font-weight: 700;
  color: #2B1F13;
  background: #DFF3F2;
  /* フォールバック */
  border-top: 1px solid var(--dl-accent);
}

/* 対応ブラウザでは accent から自動で薄色を作る */
@supports (background: color-mix(in srgb, #000, #fff)) {
  .dl--design .dl__term {
    background: color-mix(in srgb, var(--dl-accent) 14%, #ffffff);
  }
}

.dl--design .dl__desc {
  color: #2B1F13;
  background: #ffffff;
  border-top: 1px solid var(--dl-accent);
  line-height: 1.75;
}

/* 最初の行の上罫線を揃える */
.dl--design>.dl__term:first-child,
.dl--design>.dl__desc:first-child {
  border-top: 1px solid var(--dl-accent);
}

.dl--design table {
  min-width: auto;
}

.dl--design .dl__desc h3 {
    margin: auto;
    padding: unset;
}

/* PC: 横並び（左: dt / 右: dd） */
@media (min-width: 1024px) {
  .dl--design {
    display: grid;
    grid-template-columns: 280px 1fr;
    /* 左列幅はXDに合わせて必要なら調整 */
  }
}

/* SP: 縦並び（dt→dd） */
@media (max-width: 1024px) {
  .dl--design {
    display: block;
  }
}

/* 0116 add */
/* グラデーションボタン */
.btn--subPrimary {
  background: linear-gradient(90deg, #39A7AA 0%, #3C7EC8 100%);
  color: #FFFFFF;
  /* hover で外形が変わらないよう、非hover時は透明な枠分を確保。
     .btn--normal 等は border で実現しているが、border-radius:9999px + 透明border +
     グラデーション背景の組み合わせは一部ブラウザで角のアンチエイリアスがずれ、
     両端の角にページ背景が透けて見える描画バグがあるため、
     ここでは border は使わず box-shadow(inset) だけで枠分を確保する
     （border 自体を無くすことでその描画バグを回避する）。 */
  border: none;
  box-shadow: inset 0 0 0 2px transparent;
  --btn-icon-bg: #FFFFFF;
  --btn-icon-fg: #39A7AA;
  gap: 0.5rem; /* アイコンとの間隔を開ける */
}

.btn--subPrimary:is(:hover, :active) {
  background: #FFFFFF;
  color: #39A7AA;
  box-shadow: inset 0 0 0 2px #39A7AA;
  --btn-icon-bg: #39A7AA;
  --btn-icon-fg: #FFFFFF;
}

/* グラデーションボタン ここまで */
.btn__iconExternal::before {
  content: "";
  display: block;
  width: 20px;
  height: 20px;
  background-repeat: no-repeat;
  background-size: contain;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Crect width='20' height='20' fill='%23160d06' opacity='0'/%3E%3Cpath d='M19.25,0H13.593a.75.75,0,0,0,0,1.5h3.846L9.579,9.36a.75.75,0,0,0,1.061,1.061l7.86-7.86V6.407a.75.75,0,0,0,1.5,0V.75A.75.75,0,0,0,19.25,0' fill='%23fff'/%3E%3Cpath d='M14.5,20H2.5A2.5,2.5,0,0,1,0,17.5V5.5A2.5,2.5,0,0,1,2.5,3H9.477a.5.5,0,0,1,0,1H2.5A1.5,1.5,0,0,0,1,5.5v12A1.5,1.5,0,0,0,2.5,19h12A1.5,1.5,0,0,0,16,17.5V10.523a.5.5,0,0,1,1,0V17.5A2.5,2.5,0,0,1,14.5,20' fill='%23fff'/%3E%3C/svg%3E");
}

ul.articleList .btn__iconExternal::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Crect width='20' height='20' fill='%23fff' opacity='0'/%3E%3Cpath d='M19.25,0H13.593a.75.75,0,0,0,0,1.5h3.846L9.579,9.36a.75.75,0,0,0,1.061,1.061l7.86-7.86V6.407a.75.75,0,0,0,1.5,0V.75A.75.75,0,0,0,19.25,0' fill='%23160d06'/%3E%3Cpath d='M14.5,20H2.5A2.5,2.5,0,0,1,0,17.5V5.5A2.5,2.5,0,0,1,2.5,3H9.477a.5.5,0,0,1,0,1H2.5A1.5,1.5,0,0,0,1,5.5v12A1.5,1.5,0,0,0,2.5,19h12A1.5,1.5,0,0,0,16,17.5V10.523a.5.5,0,0,1,1,0V17.5A2.5,2.5,0,0,1,14.5,20' fill='%23160d06'/%3E%3C/svg%3E");
}

a.btn:hover .btn__iconExternal::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Crect width='20' height='20' fill='none'/%3E%3Cpath d='M19.25,0H13.593a.75.75,0,0,0,0,1.5h3.846L9.579,9.36a.75.75,0,0,0,1.061,1.061l7.86-7.86V6.407a.75.75,0,0,0,1.5,0V.75A.75.75,0,0,0,19.25,0' fill='%2339A7AA'/%3E%3Cpath d='M14.5,20H2.5A2.5,2.5,0,0,1,0,17.5V5.5A2.5,2.5,0,0,1,2.5,3H9.477a.5.5,0,0,1,0,1H2.5A1.5,1.5,0,0,0,1,5.5v12A1.5,1.5,0,0,0,2.5,19h12A1.5,1.5,0,0,0,16,17.5V10.523a.5.5,0,0,1,1,0V17.5A2.5,2.5,0,0,1,14.5,20' fill='%2339A7AA'/%3E%3C/svg%3E");
}

.btn__iconPdf::before {
  content: "";
  display: block;
  width: 20px;
  height: 20px;
  background-repeat: no-repeat;
  background-size: contain;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Crect width='20' height='20' fill='%23fff' opacity='0'/%3E%3Cpath d='M12.5,20H2.5A2.5,2.5,0,0,1,0,17.5V7.5a.5.5,0,0,1,1,0v10A1.5,1.5,0,0,0,2.5,19h10a.5.5,0,1,1,0,1' fill='%23160d06'/%3E%3Cpath d='M17.5,17H5.5A2.5,2.5,0,0,1,3,14.5V2.5A2.5,2.5,0,0,1,5.5,0h12A2.5,2.5,0,0,1,20,2.5v12A2.5,2.5,0,0,1,17.5,17M5.5,1A1.5,1.5,0,0,0,4,2.5v12A1.5,1.5,0,0,0,5.5,16h12A1.5,1.5,0,0,0,19,14.5V2.5A1.5,1.5,0,0,0,17.5,1Z' fill='%23160d06'/%3E%3Cpath d='M8.374,6.681A1.522,1.522,0,0,1,9,7.325a2.091,2.091,0,0,1,.218.98A2.1,2.1,0,0,1,9,9.286a1.52,1.52,0,0,1-.622.643,1.91,1.91,0,0,1-.946.224H6.862v1.2H5.541v-4.9H7.428a1.92,1.92,0,0,1,.946.223M7.747,8.729a.733.733,0,0,0,0-.848.518.518,0,0,0-.4-.15H6.862V8.879h.482a.514.514,0,0,0,.4-.15' fill='%23160d06'/%3E%3Cpath d='M9.7,6.457h1.932a2.229,2.229,0,0,1,1.157.3,2.011,2.011,0,0,1,.778.85,2.872,2.872,0,0,1,.278,1.3,2.876,2.876,0,0,1-.278,1.3,2.011,2.011,0,0,1-.778.85,2.229,2.229,0,0,1-1.157.3H9.7Zm1.876,3.611a.846.846,0,0,0,.681-.3,1.3,1.3,0,0,0,.255-.858,1.3,1.3,0,0,0-.255-.857.84.84,0,0,0-.681-.3h-.555v2.323Z' fill='%23160d06'/%3E%3Cpath d='M15.648,7.7v.84h1.635V9.789H15.648v1.567H14.327v-4.9h3.185V7.7Z' fill='%23160d06'/%3E%3C/svg%3E");

}

a.btn:hover .btn__iconPdf::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Crect width='20' height='20' fill='none'/%3E%3Cpath d='M12.5,20H2.5A2.5,2.5,0,0,1,0,17.5V7.5a.5.5,0,0,1,1,0v10A1.5,1.5,0,0,0,2.5,19h10a.5.5,0,1,1,0,1' fill='%23fff'/%3E%3Cpath d='M17.5,17H5.5A2.5,2.5,0,0,1,3,14.5V2.5A2.5,2.5,0,0,1,5.5,0h12A2.5,2.5,0,0,1,20,2.5v12A2.5,2.5,0,0,1,17.5,17M5.5,1A1.5,1.5,0,0,0,4,2.5v12A1.5,1.5,0,0,0,5.5,16h12A1.5,1.5,0,0,0,19,14.5V2.5A1.5,1.5,0,0,0,17.5,1Z' fill='%23fff'/%3E%3Cpath d='M8.374,6.681A1.522,1.522,0,0,1,9,7.325a2.091,2.091,0,0,1,.218.98A2.1,2.1,0,0,1,9,9.286a1.52,1.52,0,0,1-.622.643,1.91,1.91,0,0,1-.946.224H6.862v1.2H5.541v-4.9H7.428a1.92,1.92,0,0,1,.946.223M7.747,8.729a.733.733,0,0,0,0-.848.518.518,0,0,0-.4-.15H6.862V8.879h.482a.514.514,0,0,0,.4-.15' fill='%23fff'/%3E%3Cpath d='M9.7,6.457h1.932a2.229,2.229,0,0,1,1.157.3,2.011,2.011,0,0,1,.778.85,2.872,2.872,0,0,1,.278,1.3,2.876,2.876,0,0,1-.278,1.3,2.011,2.011,0,0,1-.778.85,2.229,2.229,0,0,1-1.157.3H9.7Zm1.876,3.611a.846.846,0,0,0,.681-.3,1.3,1.3,0,0,0,.255-.858,1.3,1.3,0,0,0-.255-.857.84.84,0,0,0-.681-.3h-.555v2.323Z' fill='%23fff'/%3E%3Cpath d='M15.648,7.7v.84h1.635V9.789H15.648v1.567H14.327v-4.9h3.185V7.7Z' fill='%23fff'/%3E%3C/svg%3E");
}


/* ボタンここまで */
/* テーブル */
/* SP用スクロールラッパー */
.table-wrapper {
  overflow-x: auto;
}

.table-container {
  margin-bottom: 40px;
}

/* 共通テーブルスタイル */
table {
  border-collapse: collapse;
  width: 100%;
  min-width: 600px;
  /* SPでスクロール可能にするための最小幅 */
}

table th,
table td {
  padding: 13px;
  border: 1px solid #D1D0CE;
  font-weight: normal;
}

/* thead内のtd（ヘッダー） */
thead td,
thead th {
  background-color: var(--c-table-bg);
  text-align: center;
}


/* tbody内のth */
tbody th {
  text-align: left;
  width: 16.67%;
}

/* tbody内のtd */
tbody td {
  background-color: white;
  width: 16.67%;
}

/* テーブル1: theadあり（thは白背景） */
.table1 tbody th {
  background-color: #fff;
}

/* テーブル2: theadなし（thは薄い水色） */
.table2 th {
  background-color: var(--c-table-bg);
}

.table2 td {
  text-align: center;
}

/* テーブル3: theadあり（thは薄めの水色） */
.table3 tbody th {
  background-color: var(--c-table-bg);
}

table.table3.fee td {
    text-align: right;
}

table.table3.fee .align_center{
  text-align: center;
}

/* .table3 tbody td {
  text-align: center;
} */

/* .table3--center: .table3 は他ページ共有のため既定は変更せず、
   個別テーブルだけ中央揃えしたい場合にこの修飾クラスを併記する
   （business/service/banking/guide の「残高照会・入出金明細照会」表など） */
.table3--center tbody td,
.table3--center tbody th {
  text-align: center;
}

/* .table2--right: .table2 は他ページ共有のため既定は変更せず、
   金額セルだけ右揃えにしたい場合にこの修飾クラスを併記する
   （fee ページの証書貸付「一部繰上償還／全額繰上償還／条件変更」表など） */
.table2--right tbody td {
  text-align: right;
}

/* .table3--iconFit: .table3 は他ページ共有のため既定は変更せず、
   アイコン列を内容（画像サイズ）に合わせて縮小したい場合にこの修飾クラスを併記する
   （デフォルトの tbody th/td { width: 16.67% } のままだと、
   小さいアイコンの列だけ不自然に広がってしまうため）
   （business/service/banking/phishWall のシグナル表示アイコン表など） */
.table3--iconFit tbody th {
  width: auto;
  text-align: center;
  white-space: nowrap;
}
.table3--iconFit tbody td {
  width: auto;
}

.font-red {
  color: #f00;
}

/* 注釈マーク用ユーティリティ（本番サイトのサイズに合わせる）
   色は共通の .card__text--highlight と併記して使う想定
   例: business/service/banking/guide の「9:00~16:00(※1)」 */
.u-fz11 {
  font-size: 11px;
}

/* =========================================================
  店舗一覧テーブル（.shopTable）: SPのみカード表示
  ------------------------------------------------------------
  - .table3 は他ページ共有のため変更せず、shops のテーブルに
    .shopTable を併記して SP だけ上書きする（PCは .table3 のまま）。
  - SP: thead非表示 → tr を1店舗=1カードに縦積み。
        border は消し、tr ごとの margin-bottom で区切る。
  - 列構成は「支店名(th) / 住所(td) / 営業時間(td)」固定。
========================================================= */
@media (max-width: 967px) {

  /* テーブル各要素をブロック化して縦積みに */
  .shopTable,
  .shopTable thead,
  .shopTable tbody,
  .shopTable tr,
  .shopTable th,
  .shopTable td {
    display: block;
    width: auto;
    min-width: 0;
  }

  /* 汎用 table{min-width:600px} を打ち消して横スクロールを止める */
  .shopTable {
    min-width: 0;
  }

  /* 見出し行（支店名/住所/営業時間）は非表示 */
  .shopTable thead {
    display: none;
  }

  /* 1店舗 = 1カード：border を消し margin-bottom で区切る */
  .shopTable tr {
    margin-bottom: 24px;
    border: 0;
  }

  .shopTable tr:last-child {
    margin-bottom: 0;
  }

  .shopTable th,
  .shopTable td {
    border: 0;
  }

  /* 支店名 = カード見出しバー（薄ミント地・リンク全体・右端に > ） */
  .shopTable tbody th {
    padding: 0;
    background: var(--c-table-bg);
  }

  .shopTable tbody th a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 14px 16px;
    color: var(--c-text);
    font-weight: 700;
    text-decoration: none;
  }

  /* 右端の「>」（枠線 chevron） */
  .shopTable tbody th a::after {
    content: "";
    flex: 0 0 auto;
    width: 8px;
    height: 8px;
    border-top: 2px solid currentColor;
    border-right: 2px solid currentColor;
    transform: rotate(45deg);
  }

  /* カード全体をタップで店舗ページへ（stretched link）
     ※ <tr> を <a> で囲むのは不正HTMLのため、支店名リンクの擬似要素を
        カード全面に広げてタップ領域にする。SPのみ（PCは支店名リンクのまま）。 */
  .shopTable tbody tr {
    position: relative;
  }

  .shopTable tbody th a::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
  }

  /* 本文セル（住所・営業時間）：白地 */
  .shopTable tbody td {
    background: #fff;
    padding: 8px 16px;
  }

  .shopTable tbody td:first-of-type {
    /* 住所（本文の先頭） */
    padding-top: 14px;
  }

  /* 営業時間セル（本文の末尾）に [営業時間] ラベルを付与 */
  .shopTable tbody td:last-child {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding-bottom: 16px;
  }

  .shopTable tbody td:last-child::before {
    content: "[営業時間]";
    flex: 0 0 auto;
    font-weight: 700;
  }

  /* .shopTable--dataTable: shopTable で リンクなしのデータテーブル向け modifier
     - th/td に a タグなし（見出しバーを単純化）
     - 最後の列は「[営業時間]」ラベルを非表示
     - th/td の text-align を center に統一
  */
  .shopTable--dataTable tbody th {
    padding: 14px 16px;
    font-weight: 700;
    text-align: center;
  }

  .shopTable--dataTable tbody th a::after,
  .shopTable--dataTable tbody th a::before {
    display: none;
  }

  .shopTable--dataTable tbody td::before {
    display: none;
  }

  .shopTable--dataTable tbody td:last-child {
    justify-content: center;
    align-items: center;
  }

  .shopTable--dataTable th,
  .shopTable--dataTable td {
    text-align: center;
  }
}

/* カードデザイン */
/* ===== Grid ===== */
.cardGrid,
.gallery {
  display: grid;
  gap: 24px;

}

.cardGrid--3col,
.gallery--3col {
  grid-template-columns: 1fr;
}

@media (min-width: 968px){

  .cardGrid--3col,
  .gallery--3col {
    grid-template-columns: repeat(3, 1fr);
  }
}

.cardGrid--2col,
.gallery--2col {
  grid-template-columns: 1fr;
}

@media (min-width: 968px){

  .cardGrid--2col,
  .gallery--2col {
    grid-template-columns: repeat(2, 1fr);
  }
}

.gallery--serviceLinks {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.gallery--serviceLinks .gallery__item {
  min-width: 0;
}

.gallery--serviceLinks .gallery__item > a {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1 / 1;
  padding: 0;
  background: #fff;
  border: 0;
  border-radius: 22%;
  overflow: hidden;
  text-decoration: none;
  transition: opacity 0.3s ease;
}

.gallery--serviceLinks .gallery__item > a:is(:hover, :active) {
  opacity: 0.8;
}

@media (prefers-reduced-motion: reduce) {
  .gallery--serviceLinks .gallery__item > a {
    transition: none;
  }
}

.gallery--serviceLinks .gallery__item img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 22%;
}

@media (min-width: 968px) {
  .gallery--serviceLinks {
    grid-template-columns: repeat(10, minmax(0, 1fr));
    gap: 16px;
  }
}

/* ===== Card Base ===== */
.card {
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  position: relative;
}

/* hover時に青枠が出るカード */
.card--bordered {
  outline: 2px solid transparent;
}

.card--bordered:hover {
  outline-color: var(--c-primary);
}

/* テキストのみカード */
.card--note {
  padding-top: 8px;
}

/* ===== Link ===== */
.card__link {
  display: block;
  height: 100%;
  color: inherit;
  text-decoration: none;
}

/* ===== Media ===== */
.card__media img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* ===== Body ===== */
.card__body {
  padding: 4px 24px 20px;
}

.card__eyebrow {
  font-size: 12px;
  color: #888;
  margin-bottom: 4px;
}

.card__title,
.card__title--nolink {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 8px;
  line-height: 1.4;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.card__title::after {
  content: "";
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  margin-left: 8px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='%2339A7AA' d='M20,10A10,10,0,1,1,10,0,10,10,0,0,1,20,10'/%3E%3Cpath fill='%23fff' d='M15.03,9.47l-4-4A.75.75,0,0,0,9.969,6.531l2.72,2.719H5.5a.75.75,0,0,0,0,1.5h7.189l-2.72,2.72a.75.75,0,0,0,1.061,1.061l4-4a.75.75,0,0,0,0-1.061'/%3E%3C/svg%3E") no-repeat center / contain;
}


.card__text {
  font-size: 14px;
  line-height: 1.6;
  color: #333;
}

.card__text--highlight {
  color: #C1304F;
  font-weight: 700;
  margin: 0 4px;
}


/* カードデザイン ここまで */
.imageRow__left,
.imageRow__center,
.imageRow__right {
  float: none;
  margin: 0 auto 24px;
  text-align: center;
  /* キャプションも中央にしたい場合 */
}

.imageRow::after {
  content: "";
  display: block;
  clear: both;
}

.figure {
  width: 100%;
  margin: 0;
}

@media (min-width: 968px){

  .imageRow__left,
  .imageRow__center,
  .imageRow__right {
    width: auto;
  }

  .imageRow__left {
    float: left;
  }

  .imageRow__center figure {
    margin-left: auto;
    margin-right: auto;
  }

  .imageRow__right {
    float: right;
  }

  .figure {
    max-width: 356px;
  }
}

.img-flude {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}



.figure__caption {
  text-align: center;
  font-size: 14px;
  font-weight: bold;
  color: #726D69;
  margin-top: 12px;
}

/* よくあるご質問（サンプル） */
.accordion {
  margin: 0 auto;
}

.accordion__item {
  border: 2px solid #D1D0CE;
  border-radius: 8px;
  margin: 12px 0;
  overflow: hidden;
  background-color: #fff;
}

/* summary */
.accordion__summary {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 48px 16px 16px;
  cursor: pointer;
  list-style: none;
  background: #fff;

  &:hover {
    color: var(--c-primary);
  }
}

/* デフォルト三角を消す */
.accordion__summary::-webkit-details-marker {
  display: none;
}

/* Qマーク */
.accordion__q {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--c-primary);
  color: #fff;
  font-weight: bold;
  line-height: 1;
  padding-bottom: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* Qなし */
.no-mark .accordion__q {
  display: none;
}

/* タイトル */
.accordion__title {
  font-size: 16px;
  font-weight: bold;
}

/* 右側矢印（疑似要素） */
.accordion__summary::after {
  content: "";
  position: absolute;
  right: 16px;
  width: 20px;
  height: 20px;
  background-repeat: no-repeat;
  background-size: contain;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cg transform='translate(20 0) rotate(90)'%3E%3Crect width='20' height='20' fill='%23fff' opacity='0'/%3E%3Cpath d='M20,10A10,10,0,1,1,10,0,10,10,0,0,1,20,10' fill='%23726d69'/%3E%3Cpath d='M8,14.75a.75.75,0,0,1-.53-1.28L10.939,10,7.47,6.53A.75.75,0,0,1,8.53,5.47l4,4a.749.749,0,0,1,0,1.06l-4,4a.744.744,0,0,1-.53.22' fill='%23fff'/%3E%3C/g%3E%3C/svg%3E");
}


/* open時 */
.accordion__item[open] .accordion__summary::after {
  transform: rotate(180deg);
  color: var(--c-primary);
}


/* コンテンツ */
.accordion__content {
  padding: 16px 0;
  margin: 0 16px;
  border-top: 1px solid #D1D0CE;
}

.accordion__content p {
  margin: 0;
  line-height: 1.7;
  font-weight: normal;
}

/* よくあるご質問（サンプル） ここまで */
/* ブログ記事 */
.sectionTitle--blog {
  margin-bottom: 10px;
}

.blogBody {
  margin: 40px 16px 0;

  &+padding {
    margin: 0;
  }
}

@media (min-width: 968px){
  .blogBody {
    margin: 40px 24px 0;
  }
}

/* 見出し直下のサブ見出し */
.topics-head {
  display: flex;
  align-items: center;
  gap: .5em;
  color: #726D69;
  font-weight: bold;
}

/* 日付 */
.topics-head__date {
  font-size: 14px;
}

/* 区切り線 */
.topics-head__divider {
  width: 1px;
  height: 1em;
  background-color: #726D69;
}

/* ラベル */
.topics-head__label {
  font-size: 14px;
  margin: 0;
}

/* 見出し直下のサブ見出し ここまで*/
.blogBody__mediaBlock {
  display: flow-root;
  /* floatの高さ問題を解決 */
}

.blogBody__floatImg {
  width: 100%;
  margin: 0 0 1em 0;

  @media (min-width: 968px){
    float: left;
    width: 39.7%;
    margin: 0 2.6% 1.5em 0;
  }



  &+p {
    margin: 0;
  }
}

.blogBody__floatImg img{
    width:100%;
    height:auto;
}

.blogBody__floatImg__right {

  @media (min-width: 968px){
    float: right;
    margin: 0 0 1.5em 2.6%;
  }
}

/* ギャラリー */

.gallery__item {
  margin: 0;
}

/* ブログ記事 ここまで */
/* CTA */
/* ===== CTA base ===== */
.cta {
  background: #d9f6f2;
  padding: 32px 16px;
}

.cta__inner {
  max-width: 960px;
  margin: 0 auto;
  text-align: center;
}

/* ===== buttons ===== */
.cta__buttons {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* ===== contact ===== */
.cta__title {
  margin: 0 0 12px;
  font-weight: bold;
}

.btn--cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 24px;
  border-radius: 9999px;
  background: #fff;
  color: #000;
  font-weight: bold;
  text-decoration: none;
  font-size: 20px;
}

/* 内包する .cta__telIcon::before が黒塗りSVGのため、背景を反転(#160D06)すると
   アイコンが消える。白地リンク共通の --c-primary-weak 系ホバーに合わせる。 */
.btn--cta:is(:hover, :active) {
  background: var(--c-primary-weak);
}

.cta__telIcon::before {
  content: "";
  display: inline-block;
  width: 24px;
  height: 16px;
  background-repeat: no-repeat;
  background-size: contain;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='15.747' viewBox='0 0 24 15.747'%3E%3Cg%3E%3Cpath d='M0,0V2.455a14.157,14.157,0,0,1,5.162.965q.426.168.826.361a13.1,13.1,0,0,1,1.954-.749A14.369,14.369,0,0,1,12,2.455a14.157,14.157,0,0,1,5.185.965q.426.168.826.361a13.1,13.1,0,0,1,1.954-.749A14.371,14.371,0,0,1,24,2.455V0Z' fill='%23160d06'/%3E%3Cpath d='M80.147,33.265a2.983,2.983,0,1,0,5.967,0,2.551,2.551,0,0,0-.191-.938,4.141,4.141,0,0,0-.594-1.012,7.546,7.546,0,0,0-2.2-1.832,8.115,8.115,0,0,0-1.805,1.38A4.485,4.485,0,0,0,80.3,32.436a2.5,2.5,0,0,0-.151.829' transform='translate(-65.119 -23.955)' fill='%23160d06'/%3E%3Cpath d='M20.931,23.178A6.019,6.019,0,0,1,22.3,25.308a4.042,4.042,0,0,1,.239,1.344,4.53,4.53,0,1,1-9.061,0A4.3,4.3,0,0,1,14,24.666,6.754,6.754,0,0,1,15.369,22.9a9.408,9.408,0,0,1,.981-.8c-.237-.087-.48-.168-.73-.242A12.837,12.837,0,0,0,12,21.344a12.656,12.656,0,0,0-4.35.756,9.088,9.088,0,0,1,1.259,1.078,6.024,6.024,0,0,1,1.371,2.131,4.038,4.038,0,0,1,.239,1.344,4.53,4.53,0,1,1-9.061,0,4.3,4.3,0,0,1,.519-1.986A6.759,6.759,0,0,1,3.347,22.9a9.408,9.408,0,0,1,.981-.8c-.237-.087-.48-.168-.73-.242A12.837,12.837,0,0,0,0,21.344V33.089H24V21.344a12.659,12.659,0,0,0-4.328.756,9.076,9.076,0,0,1,1.259,1.078' transform='translate(0 -17.342)' fill='%23160d06'/%3E%3Cpath d='M16.029,33.265a2.983,2.983,0,1,0,5.967,0,2.555,2.555,0,0,0-.192-.938,4.153,4.153,0,0,0-.594-1.012,7.551,7.551,0,0,0-2.2-1.832,8.1,8.1,0,0,0-1.8,1.38,4.482,4.482,0,0,0-1.027,1.573,2.488,2.488,0,0,0-.151.829' transform='translate(-13.024 -23.955)' fill='%23160d06'/%3E%3C/g%3E%3C/svg%3E");
}


.cta__time {
  margin-top: 12px;
  font-size: 14px;
}

@media (min-width: 968px){
  .cta {
    padding: 40px 24px;
  }

  .cta__buttons {
    flex-direction: row;
    justify-content: center;
  }

  .cta__btn {
    width: 240px;
  }

  .cta__contact {
    margin-top: 8px;
  }

  #cta_03 .btn--cta {
    zoom: 200%;
  }
}

/* CTA ここまで */
/* タブエリア */
.tabs {
  margin: 24px 16px 12px;
  height: 40px;
  padding: 4px;

  display: grid;
  position: relative;

  background: #fff;
  border: 1px solid #eee;
  border-radius: 999px;
}

/* column */
.tabs--2col {
  grid-template-columns: repeat(2, 1fr);
}

.tabs--3col {
  grid-template-columns: repeat(3, 1fr);
}

/* slider */
.tabs::before {
  content: "";
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: 4px;

  border-radius: 999px;
  background: var(--c-primary);

  transform: translateX(calc(var(--active-index, 0) * 100%));
  transition: transform var(--menu-motion-dur-fast) var(--menu-motion-ease);
}

/* slider width */
.tabs--2col::before {
  width: calc((100% - 8px) / 2);
}

.tabs--3col::before {
  width: calc((100% - 8px) / 3);
}

/* tab */
.tab {
  position: relative;
  z-index: 1;

  background: transparent;
  border: 0;
  cursor: pointer;

  font-size: 12px;
  font-weight: 800;
  color: #666;

  transition: color var(--menu-motion-dur-fast) var(--menu-motion-ease);
}

.tab.is-active {
  color: #fff;
}

.articleItem {
  list-style-type: none;
  padding: 20px;
  border-bottom: 1px solid #D1D0CE;

  a {
    text-decoration: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

}

/* ニュース一覧のホバー。custom_top.css にしか定義が無く TOP 以外で効いていなかったため
   base.css に置いて全ページ共通にする（.articleLink 側にはクラス定義が無い）。 */
.articleItem:is(:hover, :active) {
  color: var(--c-primary);
}

.articleBody {
  time {
    color: #726D69;
    font-weight: bold;
    font-size: 14px;
  }

  p {
    margin: 0;
  }
}

.articleMore {
  text-align: right;

  a {
    text-decoration: none;
    font-size: 14px;
    font-weight: bold;
    color: #726D69;
  }
}

/* タブエリア ここまで */




/* footer.html フッター */
/* footer.html フッター */
/* ===============================
   base
=============================== */
.siteFooter {
  background: #fff;
  font-size: 14px;
  color: #222;
}

.siteFooter__inner {
  padding: 20px 16px 140px;
}

/* ===============================
   head
=============================== */
.siteFooter__head {
  padding: 20px 16px 0;
}

.siteFooter__logo {
  display: inline-block;
  width: 168px;
  height: auto;
  margin-bottom: 12px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}

.siteFooter__code {
  font-size: 12px;
  margin: 0;
}

.siteFooter__info {
  line-height: 1.6;
}

.siteFooter__headRight p {
  margin: 0;
}

/* ===============================
   nav (SP)
=============================== */
.siteFooter__nav {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  border-top: 1px solid #ddd;
  margin-top: 20px;
  padding: 20px 16px 0;
}

.siteFooter__navGroup {
  margin-bottom: 20px;
}

.siteFooter__navGroup:nth-child(3),
.siteFooter__navGroup:nth-child(4) {
  margin-bottom: 0;
}

.siteFooter__title {
  font-weight: bold;
  margin: 0 0 12px;
}

.siteFooter__list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.siteFooter__list li {
  margin-bottom: 6px;
}

.siteFooter__list a {
  text-decoration: none;
  color: #222;
}

.siteFooter__list a:hover,
.siteFooter__list a:active {
  color: #726D69;
  text-decoration: underline;
}

/* ===============================
   copyright
=============================== */
.siteFooter__copy {
  margin: 40px 0 0;
  font-size: 12px;
  text-align: center;
  color: #777;
}

/* ===============================
   PC (768px〜)
=============================== */
@media (min-width: 968px){
  .siteFooter__inner {
    max-width: 920px;
    margin: 0 auto;
    padding: 80px 40px 40px;
  }

  .siteFooter__head {
    display: flex;
    padding: 0;
  }

  .siteFooter__logo {
    width: 280px;
  }

  .siteFooter__logo img {
    width: 100%;
    height: auto;
    display: block;
  }

  .siteFooter__code {
    font-size: 16px;
    margin-top: 12px;
  }

  .siteFooter__headRight {
    text-align: left;
    line-height: 1.6;
  }

  .siteFooter__headRight p {
    margin-left: 47px;
  }

  .siteFooter__info {
    margin-left: auto;
    text-align: right;
  }

  .siteFooter__nav {
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    margin-top: 40px;
    padding: 40px 0 0;
  }

  .siteFooter__navGroup {
    margin-bottom: 24px;
  }

  .siteFooter__title {
    margin-bottom: 20px;
    font-size: 16px;
  }

  .siteFooter__copy {
    margin-top: 48px;
  }
}

/* footer.html フッター ここまで */

/* footer.html フッター ここまで */
/* 0116 add ここまで*/


/* =========================================================
   Process Flow (申込みの流れ)
   - <ol class="processFlow"> の番号表示はデザイン上不要なため無効化
   ========================================================= */

.typography.secFlow {
  background: #d9f6f2;
  padding: 40px;
  border-radius: 8px;
}

.processFlowm {
  /* remove default <ol> numbering/indent */
  list-style: none;
  margin: 0;
  padding: 0;
}



/* processFlow の中にある typography ol の番号だけ消す */
.typography ol.processFlow>li::before {
  content: none;
  /* これで疑似要素自体を出さない */
}

.processFlow__step {
  position: relative;
}


.processFlow li.processFlow__step {
  padding-left: 0;
}

.btn--subPrimary span {
  display: flex;
  flex-direction: column;
  gap: 0.5em;
}

/* step間の余白 */
.processFlow__step+.processFlow__step {
  margin-top: 1em;
}

/* step間の下向き三角（画像の▼） */
.processFlow__step:not(:last-child)::after {
  content: "";
  display: block;
  width: 0;
  height: 0;
  margin: 1em auto 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 12px solid rgba(0, 0, 0, .22);
}

/* Step1: 選択ボタン 2列（約50%ずつ、gap=20px） */
.processFlow__choiceGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  align-items: stretch;
}

/* ボタンが1つだけの場合はエリア幅いっぱいに */
.processFlow__choiceGrid:has(> .btn:only-child) {
  grid-template-columns: 1fr;
}

.processFlow__choiceGrid .btn {
  max-width: none;
  border-radius: 8px;
  gap: 10px;
  text-decoration: none;
}

.processFlow__choiceGrid .btn__text {
  width: auto;
  min-width: 0;
  white-space: normal;
}

.typography .processFlow__choiceGrid a[target="_blank"]::after {
  display: none;
}

/* 小さい画面は縦積み */
@media (max-width: 599px) {
  .processFlow__choiceGrid {
    grid-template-columns: 1fr;
  }
}

/* 既存 .btn を崩さず、processFlow内だけ最低限整える */
.processFlow__choiceBtn {
  width: 100%;
  min-height: 78px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 1em;
}

/* Step2/3: 枠付きカード */
.processFlow__card {
  border: 2px solid #D1D0CE;
  background: #fff;
  border-radius: 8px;
  padding: 26px 18px 0;
  text-align: center;
}



.processFlow__title {
  margin: 0;
  font-weight: 700;
}

.processFlow__note {
  margin: 10px 0 0;
}

/* ============================================================
 * ユーティリティ：表示制御（SP / PC）
 * ------------------------------------------------------------
 * 目的：ユーティリティが確実に効くよう、base.css の末尾に置きます。
 *       これにより強制指定を使わずに上書きできます（運用ルール的にも安全）。
 * ============================================================ */

/* SP（～767px）では非表示 */
@media(max-width: 967px) {
  .u-hide-sp {
    display: none;
  }
}

/* PC（768px～）では非表示 */
@media (min-width: 968px){
  .u-hide-pc {
    display: none;
  }
}

/* =========================
   Utilities / Overrides
   ========================= */

/* 中央寄せ */
.text-center {
  text-align: center !important;
}

/* 右寄せ */
.text-right {
  text-align: right !important;
}

/* ::after アイコンを強制キャンセル */
.no-icon::after {
  content: none !important;
  display: none !important;
  background: none !important;
}

/* さらに強く（詳細度アップ） */
.no-icon.no-icon::after {
  content: none !important;
  display: none !important;
}

/* PhishWall シグナル表示アイコン（本番相当のサイズに合わせる：50x50） */
.phishwall-signal {
  max-width: 50px;
  height: auto;
}

/* =========================================================
  Menu UI Renewal（2026-07 / Figma「ほくしんメニューUI」準拠）
  ------------------------------------------------------------
  - 挙動（開閉・タブ切替・階層遷移・CTA固定）は既存のまま。
    class / data-* のフックは変更せず、見た目のみ上書きする。
  - 数値・色は Figma 実測値（figma_menu_values 参照）
  - SP向けの上書きは @media (max-width: 967px) に限定
    （PCメニューの Figma 対応は別途）
========================================================= */

/* --- メニュー内アクセント色（本コンテンツと統一：個人 #39A7AA / 法人 #3C7EC8） --- */
[data-menu-overlay][data-active-tab="personal"] {
  --menu-primary: var(--c-brand-personal);
  --menu-primary-rgb: var(--c-brand-personal-rgb);
}

[data-menu-overlay][data-active-tab="business"] {
  --menu-primary: var(--c-brand-business);
  --menu-primary-rgb: var(--c-brand-business-rgb);
}

@media (min-width: 968px) {
  #globalMenuPc {
    --menu-primary: var(--c-brand-personal);
    --menu-primary-rgb: var(--c-brand-personal-rgb);
  }

  /* --- ロゴ（Figma: 280x64ヘッダー、ロゴは左寄せ150px幅、白背景・枠線なし） --- */
  #globalMenuPc .pcMenuBrand {
    background: #fff;
    backdrop-filter: none;
    border-bottom: none;
    padding: 20px 20px;
    justify-content: flex-start;
  }

  #globalMenuPc .pcMenuBrand .siteHeader__logo {
    justify-content: flex-start;
  }

  #globalMenuPc .pcMenuBrand .siteHeader__logo img {
    width: 150px;
    height: auto;
  }

  /* PC: site.js が .pcMenuHead の先頭にロゴ→総合TOP→表示切り替え→タブの順で
     子要素を並べる（順序の詳細は site.js の setupPcMenu 参照）。
     NOTE: .pcMenuHead 自体にはpaddingを付けない（ロゴ=.pcMenuBrandは列いっぱいの
     白背景で全幅表示。左右にグレーの隙間ができてしまうため、余白は各要素個別に持たせる）。 */

  /* --- 総合TOP（Figma: 高さ56/角丸8/左右20px/logoから20pxの余白） --- */
  #globalMenuPc .spMenuGrandTop {
    margin: 20px 20px 0;
    height: 56px;
    border: 1px solid transparent;
    border-radius: 8px;
  }

  /* --- hover（PCメニューのみ・色反転）: 総合TOP ---
     通常＝濃色背景(#36373B)+白文字 → hover＝白背景+濃色文字+黒枠線。丸アイコンも反転。 */
  #globalMenuPc .spMenuGrandTop,
  #globalMenuPc .spMenuGrandTop__circle {
    transition: background-color .16s ease, color .16s ease, border-color .16s ease;
  }
  #globalMenuPc .spMenuGrandTop:hover {
    background: #fff;
    color: #36373B;
    border-color: #36373B;
  }
  #globalMenuPc .spMenuGrandTop:hover .spMenuGrandTop__circle {
    background: #36373B;
    color: #fff;
  }

  /* --- 表示を切り替えヒント（Figma: 総合TOP/セグメント切替との間が上下7px、色#6E6A62） --- */
  #globalMenuPc .spMenuSwitchHint {
    margin: 7px 20px 7px;
    color: #6E6A62;
  }

  /* --- 個人・法人 セグメント切替（Figma法人フレーム15:339: 幅240/高さ54/枠内padding4/角丸10、
       ボタンは左右2等分＝各116px。両ラベルとも2行表示） ---
     切替時に「選択中の塗り」が緑↔青へ色変化しながら左右半分ぶんスライドする。
     → ::before を「トラックの左半分/右半分」を覆う可動スライダーとして使う。 */
  #globalMenuPc .spMenuTabs {
    box-sizing: border-box;
    position: relative;
    /* 幅は margin(左右20px) と width:auto で列内240pxに収める（旧ルールの width:calc(100%-24px) は削除済み） */
    width: auto;
    min-width: 0;
    max-width: none;
    margin: 0 20px;
    height: 54px;
    min-height: 0;
    max-height: none;
    padding: 4px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    background: #E6E4DF;
    border: 0;
    border-radius: 10px;
  }

  /* 可動スライダー（塗り）。幅=トラックの半分、既定は左（個人） */
  #globalMenuPc .spMenuTabs::before {
    content: "";
    display: block;
    position: absolute;
    top: 4px;
    bottom: 4px;
    left: 4px;
    width: calc((100% - 8px) / 2);
    border-radius: 7px;
    background: var(--menu-primary, var(--c-brand-personal));
    box-shadow: 0 1px 1.5px rgba(0, 0, 0, 0.22);
    transform: translateX(0);
    transition:
      transform var(--menu-motion-dur-fast) var(--menu-motion-ease),
      background-color var(--menu-motion-dur-fast) var(--menu-motion-ease);
    z-index: 0;
  }

  /* 個人選択：左半分（--menu-primary = ティール） */
  #globalMenuPc [data-pc-menu-panel][data-active-tab="personal"] .spMenuTabs::before,
  #globalMenuPc[data-active-tab="personal"] .spMenuTabs::before {
    transform: translateX(0);
  }

  /* 法人選択：右半分へスライド（--menu-primary = ブルーへ変化） */
  #globalMenuPc [data-pc-menu-panel][data-active-tab="business"] .spMenuTabs::before,
  #globalMenuPc[data-active-tab="business"] .spMenuTabs::before {
    transform: translateX(100%);
  }

  #globalMenuPc .spMenuTab {
    position: relative;
    z-index: 1; /* スライダー(::before)より前面 */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 46px;
    padding: 0 6px;
    border-radius: 7px;
    background: transparent;
    color: #54504A;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.3;
    text-align: center;
    white-space: normal;
    transition: color var(--menu-motion-dur-fast) var(--menu-motion-ease);
  }

  /* 法人ラベルは字数が多いので一回り小さく（116px内に2行で収める） */
  #globalMenuPc .spMenuTab:nth-child(2) {
    font-size: 10px;
  }

  /* 選択中は文字を白に。塗りは ::before スライダーが担うので背景は付けない */
  #globalMenuPc .spMenuTab.is-active {
    background: transparent;
    color: #fff;
    box-shadow: none;
  }

  /* --- 個人トップ / 法人・個人事業主トップ（Figma: 高さ56/角丸8/左右20px/左寄せテキスト・1行） ---
     NOTE: 左右のインセット(20px)は親 .pcMenuScreen の padding が担うため、
     ここで h-margin を付けると二重インセットになり幅が200pxに縮む → h-margin は0にする。 */
  #globalMenuPc .spMenuTopLink {
    min-height: 56px;
    margin: 14px 0 0;
    padding: 2px 46px 2px 17px;
    border-radius: 8px;
    justify-content: flex-start;
    text-align: left;
    /* 「法人・個人事業主トップ」を1行に収める（2行折返しを防止） */
    white-space: nowrap;
  }

  #globalMenuPc .spMenuTopLink__label {
    white-space: nowrap;
  }

  /* 法人ビュー（法人トップ／ビジネスバンキング）は文言が長いので一回り小さく（240px内に1行で収める） */
  #globalMenuPc [data-menu-screen="business-home"] .spMenuTopLink {
    font-size: 14px;
  }

  #globalMenuPc .spMenuTopLink__circle {
    right: 14px;
  }

  /* --- hover（PCメニューのみ・色反転）: 個人トップ / 法人トップ / ビジネスバンキング ---
     通常＝白地+アクセント色 → hover＝アクセント色塗り+白文字。丸アイコンも反転。
     個人=緑 / 法人=青 は --menu-primary（タブ状態で切替）に追従。 */
  #globalMenuPc .spMenuTopLink,
  #globalMenuPc .spMenuTopLink__circle {
    transition: background-color .16s ease, color .16s ease;
  }
  #globalMenuPc .spMenuTopLink:hover {
    background: var(--menu-primary, var(--c-brand-personal));
    color: #fff;
  }
  #globalMenuPc .spMenuTopLink:hover .spMenuTopLink__circle {
    background: #fff;
    color: var(--menu-primary, var(--c-brand-personal));
  }
  /* ビジネスバンキングはゴールド(#8F6F49)固定で反転（--menu-primary ではない） */
  #globalMenuPc .spMenuTopLink--banking:hover {
    background: #8F6F49;
    color: #fff;
  }
  #globalMenuPc .spMenuTopLink--banking:hover .spMenuTopLink__circle {
    background: #fff;
    color: #8F6F49;
  }

  /* --- 左列(col0)のインセットを20pxに統一（リストの左右幅を総合TOP/個人トップに揃える） --- */
  #globalMenuPc .pcMenuCol0 .spMenuScreen {
    padding: 0 20px;
  }

  /* --- col0リスト項目（Figma: カード枠なし・薄い区切り線・アイコン24px・文字15px Medium） --- */
  #globalMenuPc .pcMenuCol0 .spMenuCard {
    margin: 8px 0 0;
    border: 0;
    border-radius: 0;
    background: transparent;
  }

  #globalMenuPc .pcMenuCol0 .spMenuRow::before {
    left: 0;
    right: 0;
    background: #E4E3DF;
  }

  #globalMenuPc .pcMenuCol0 .spMenuRow__btn,
  #globalMenuPc .pcMenuCol0 .spMenuRow__link {
    padding: 13px 2px;
    font-size: 15px;
    font-weight: 500;
    line-height: 21px;
    color: var(--c-text);
  }

  #globalMenuPc .pcMenuCol0 .spMenuRow__chev {
    width: 24px;
    font-size: 15px;
    color: #7A726A;
  }

  #globalMenuPc .pcMenuCol0 .spMenuRow__circle {
    width: 24px;
    height: 24px;
    background: #7A726A;
    font-size: 11px;
  }

  /* -----------------------------------------------------------
    PC: 第2階層以降（列見出し + カスケード列）
    - 列見出し(.spMenuSubHeader)はSPの「戻る」ダークバーではなく、
      タブ色（個人=ティール/法人=ブルー）で塗った角丸バーとして表示する。
      クリック挙動(data-menu-back → back())はJS側で既に列全体に委譲済みのため変更なし。
    - リストは白カード+shadowで1つにまとめ、行間は薄い罫線のみ。
  ----------------------------------------------------------- */
  :is(.pcMenuTrack, .pcMenuViewport) .spMenuScreen {
    padding: 84px 20px 24px 21px;
    border-left: 1px solid #E4E3DF;
  }

  :is(.pcMenuTrack, .pcMenuViewport) .spMenuSubHeader {
    display: flex;
    align-items: center;
    gap: 15px;
    grid-template-columns: none;
    height: 56px;
    min-height: 56px;
    margin: 0 0 12px;
    padding: 0 16px;
    border-radius: 8px;
    background: var(--menu-primary, var(--c-brand-personal));
    cursor: pointer;
  }

  :is(.pcMenuTrack, .pcMenuViewport) .spMenuSubTitle {
    order: 1;
    flex: 1 1 auto;
    padding-right: 0;
    text-align: left;
    font-size: 15px;
    font-weight: 700;
    color: #fff;
  }

  :is(.pcMenuTrack, .pcMenuViewport) .spMenuSubHeader__circle {
    order: 2;
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.22);
    color: #fff;
    font-size: 14px;
  }

  /* PCでは「戻る」バーは出さない（✕/余白クリックで戻る） */
  :is(#globalMenuPc, .pcMenuTrack, .pcMenuViewport) .spMenuBackBar {
    display: none;
  }

  /* リストは白カード1枚にまとめ、shadowをつける（Figma準拠）。
     列のpadding(左右20/21px)内いっぱいに広げるため左右marginは0 */
  :is(.pcMenuTrack, .pcMenuViewport) .spMenuCard {
    margin: 0;
    border: 0;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
  }

  :is(.pcMenuTrack, .pcMenuViewport) .spMenuRow::before {
    left: 0;
    right: 0;
    background: #EFEEEA;
  }

  :is(.pcMenuTrack, .pcMenuViewport) .spMenuRow__btn,
  :is(.pcMenuTrack, .pcMenuViewport) .spMenuRow__link {
    padding: 16px 16px 17px;
    font-size: 15px;
    font-weight: 700;
    line-height: 21px;
    color: var(--c-text);
  }

  /* ドリル行（下層を開く）：グレー丸なしの素のシェブロン */
  :is(.pcMenuTrack, .pcMenuViewport) .spMenuRow__chev {
    width: 24px;
    font-size: 15px;
    color: #7A726A;
  }

  /* 直リンク行：グレー丸+矢印（col0と同仕様） */
  :is(.pcMenuTrack, .pcMenuViewport) .spMenuRow__circle {
    width: 24px;
    height: 24px;
    background: #7A726A;
    font-size: 11px;
  }

  /* -----------------------------------------------------------
    PC: 選択中カテゴリ行（is-selected）の色をFigma準拠に上書き
    - 旧デザイン（塗り+白文字+▷）→ 新デザイン（薄い色ぬり+濃色文字、▷なし）
    - 個人=#E4F5F5地+#0A8E90文字、法人はperfectな実測値が未取得のため
      個人の配色比率（背景=primaryの約11%混色/文字=primaryの約85%黒混色）を
      var(--menu-primary) に適用した近似値を使用（要Figma確認）
  ----------------------------------------------------------- */
  :is(#globalMenuPc, .pcMenuViewport, .pcMenuTrack) .spMenuRow.is-selected>.spMenuRow__link,
  :is(#globalMenuPc, .pcMenuViewport, .pcMenuTrack) .spMenuRow.is-selected>.spMenuRow__btn,
  :is(#globalMenuPc, .pcMenuViewport, .pcMenuTrack) .spMenuRow__link.is-selected,
  :is(#globalMenuPc, .pcMenuViewport, .pcMenuTrack) .spMenuRow__btn.is-selected,
  :is(#globalMenuPc, .pcMenuViewport, .pcMenuTrack) .spMenuList>li.is-selected>a,
  :is(#globalMenuPc, .pcMenuViewport, .pcMenuTrack) .spMenuList>li.is-selected>button,
  :is(#globalMenuPc, .pcMenuViewport, .pcMenuTrack) .spMenuList>li>a.is-selected,
  :is(#globalMenuPc, .pcMenuViewport, .pcMenuTrack) .spMenuList>li>button.is-selected {
    background: color-mix(in srgb, var(--menu-primary, var(--c-brand-personal)) 12%, white);
    color: color-mix(in srgb, var(--menu-primary, var(--c-brand-personal)) 85%, black);
  }

  :is(#globalMenuPc, .pcMenuViewport, .pcMenuTrack) .spMenuRow.is-selected {
    border-radius: 6px;
  }

  /* ▷ インジケータはFigmaに存在しないため非表示 */
  :is(#globalMenuPc, .pcMenuViewport, .pcMenuTrack) .spMenuRow.is-selected::after,
  :is(#globalMenuPc, .pcMenuViewport, .pcMenuTrack) .spMenuRow:has(> .spMenuRow__link.is-selected)::after,
  :is(#globalMenuPc, .pcMenuViewport, .pcMenuTrack) .spMenuRow:has(> .spMenuRow__btn.is-selected)::after {
    content: none;
  }

  /* 選択行のアイコンは白ではなくタブ色に戻す */
  :is(#globalMenuPc, .pcMenuViewport, .pcMenuTrack) .spMenuRow.is-selected .spMenuRow__chev,
  :is(#globalMenuPc, .pcMenuViewport, .pcMenuTrack) .spMenuRow__link.is-selected .spMenuRow__chev,
  :is(#globalMenuPc, .pcMenuViewport, .pcMenuTrack) .spMenuRow__btn.is-selected .spMenuRow__chev {
    color: var(--menu-primary, var(--c-brand-personal));
  }
}

/* --- 新規コンポーネント（chrome.html 追加分） --- */

/* 総合TOP（濃色の塗りボタン型リンク） */
.spMenuGrandTop {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;

  height: 54px;
  margin: 18px 16px 0;
  padding: 1px 6px;
  border-radius: 12px;
  background: #36373B;

  color: #fff;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.32px;
  text-decoration: none;
}

.spMenuGrandTop__circle {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);

  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.18);

  font-size: 13px;
  line-height: 1;
}

/* 「⇄ 表示を切り替え」ヒントラベル */
.spMenuSwitchHint {
  display: flex;
  align-items: center;
  gap: 6px;

  margin: 16px 16px 7px;

  color: #9A958C;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.33px;
  line-height: 1;
}

.spMenuSwitchHint__icon {
  font-size: 13px;
  line-height: 1;
}

/* 個人トップ / 法人トップ（アクセント色の枠線ボタン型リンク） */
.spMenuTopLink {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;

  min-height: 56px;
  margin: 0 0 7px;
  padding: 2px 46px;
  border: 1px solid var(--menu-primary, var(--c-brand-personal));
  border-radius: 12px;
  background: #fff;

  color: var(--menu-primary, var(--c-brand-personal));
  font-size: 15px;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
}

.spMenuTopLink__circle {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);

  display: inline-grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 13px;
  background: var(--menu-primary, var(--c-brand-personal));

  color: #fff;
  font-size: 12px;
  line-height: 1;
}

/* ビジネスバンキング（ゴールド枠線ボタン・Figma #8F6F49）: SP/PC共通の配色上書き */
.spMenuTopLink--banking {
  border-color: #8F6F49;
  color: #8F6F49;
}

.spMenuTopLink--banking .spMenuTopLink__circle {
  background: #8F6F49;
}

/* --- 総合（中立）状態：切替スイッチは未選択（PC/SP共通） ---
   data-active-tab="general" は overlay(SP) / pcPanel・pcViewport(PC) に付与される。
   塗りスライダー(::before)を隠し、中央に区切り線(::after)を出す。両タブとも非選択色。 */
[data-active-tab="general"] .spMenuTabs::before {
  opacity: 0;
}

[data-active-tab="general"] .spMenuTabs::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 1px;
  height: 22px;
  background: #CFCCC5;
  z-index: 0;
}

[data-active-tab="general"] .spMenuTab.is-active {
  color: #54504A;
}

/* --- SP：既存メニュースタイルの Figma 準拠上書き --- */
@media (max-width: 967px) {

  /* パネル背景 */
  .menuPanel--sp {
    background: #F4F3F1;
  }

  /* ビジネスバンキングボタンは SP メニューでは非表示（PC左固定メニューのみ表示） */
  .spMenuTopLink--banking {
    display: none;
  }

  /* SP: 横スライドのカルーセル（site.js buildSpCarousel が構築）
     slide0 = 総合TOP/表示切替/切替スイッチ + ホームリスト、slide1〜 = サブ画面。
     track を translateX で移動し、階層移動時にヘッダー/CTA以外の全体が横スライドする。 */
  .spNavViewport {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden; /* 横スクロールバー抑止（縦は各スライド内） */
  }

  .spNavTrack {
    display: flex;
    height: 100%;
    will-change: transform;
  }

  .spNavSlide {
    flex: 0 0 100%;
    width: 100%;
    min-width: 100%;
    height: 100%;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* サブ画面スライドは常に表示（.spMenuScreen の既定 display:none を無効化）。
     ホームリストの出し分けは JS が inline display で行う。 */
  .spNavSlide.spMenuScreen {
    display: block;
  }

  /* タブ → ■形セグメント切替（Figma: 外枠#E6E4DF/h56/p4/r10、選択中=角丸7の塗り+影） */
  .spMenuTabs {
    margin: 0 16px 7px;
    height: 56px;
    padding: 4px;
    background: #E6E4DF;
    border: 0;
    border-radius: 10px;
  }

  .spMenuTabs::before {
    top: 4px;
    bottom: 4px;
    left: 4px;
    width: calc((100% - 8px) / 2);
    border-radius: 7px;
    box-shadow: 0 1px 1.5px rgba(0, 0, 0, 0.22);
  }

  .spMenuTab {
    height: 48px;
    border-radius: 7px;
    color: #54504A;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.2;
  }

  /* 法人タブは2行のため一回り小さく（Figma: 12px/lh14.4） */
  .spMenuTab:nth-child(2) {
    font-size: 12px;
  }

  /* SP: 個人タブは1行（Figma SP準拠）。改行<br>はPCで2行化するため入れてあるので、SPでは無効化 */
  .spMenuTab[data-menu-tab="personal"] br {
    display: none;
  }

  .spMenuTab.is-active {
    color: #fff;
  }

  /* カード：白 / 1px #E7E5E0 / 角丸14（旧: 2px枠・角丸8 を上書き） */
  .spMenuCard {
    border: 1px solid #E7E5E0;
    border-radius: 14px;
    margin: 0 0 7px;
  }

  .spMenuCard--outline {
    border-color: #E7E5E0;
  }

  /* 旧仕様「先頭カードをアクセント色枠に」を無効化 */
  .spMenuScreen.is-active .spMenuCard:first-of-type {
    border-color: #E7E5E0;
  }

  /* 行の区切り線：全幅 1px #EEEDE9 */
  .spMenuRow::before,
  .spMenuList > li:not(.spMenuRow)::before,
  .spMenuCard--outline .spMenuRow::before,
  .spMenuCard--outline .spMenuList > li:not(.spMenuRow)::before,
  .spMenuScreen.is-active .spMenuCard:first-of-type .spMenuRow::before,
  .spMenuScreen.is-active .spMenuCard:first-of-type .spMenuList > li:not(.spMenuRow)::before {
    left: 0;
    right: 0;
    background: #EEEDE9;
  }

  /* 行：padding 17/18、ラベル 15px 本文黒(--c-text) lh21px */
  .spMenuRow__btn,
  .spMenuRow__link,
  .spMenuList > li:not(.spMenuRow) > a,
  .spMenuList > li:not(.spMenuRow) > button {
    padding: 17px 18px 18px;
    font-size: 15px;
    line-height: 21px;
    font-weight: 700;
    color: var(--c-text);
  }

  /* 下層オープナーのシェブロン */
  .spMenuRow__chev {
    width: 24px;
    font-size: 16px;
    color: #7A726A;
  }

  /* 遷移リンクの丸矢印（28px / #7A726A） */
  .spMenuRow__circle {
    width: 28px;
    height: 28px;
    background: #7A726A;
    font-size: 12px;
  }

  /* 2階層目：戻るバー（白・全幅）→ カテゴリ見出し（トップへのリンク）の順で表示 */
  .spMenuBackBar {
    margin: 0 -16px;
  }

  .spMenuSubHeader {
    margin: 14px 0;
    min-height: 56px;
    border-radius: 12px;
  }

  .spMenuSubTitle {
    font-size: 16px;
    font-weight: 700;
    text-align: left;
  }
}

/* ======================================================
  .c-spTel（共通ユーティリティ）
  - SPでは電話番号をtelリンク、PCでは通常テキストとして表示する。
  - 全ページ共通のため base.css に置く（custom.css だけに置くと、
    custom.css を読み込まないページ＝TOPで無効化が効かなくなる）。
  - ファイル末尾に置いているのは意図的：.typography a などページごとの
    本文リンク装飾（太字/下線/色）と詳細度が同じ(0,1,1)になるため、
    後勝ちの記述順で確実に上書きさせる（!important は使わない）。
====================================================== */
.c-spTel__text {
  display: none;
}

@media (min-width: 968px) {
  a[href^="tel:"] {
    pointer-events: none;
    cursor: default;
    color: inherit;
    text-decoration: none;
    font-weight: inherit;
  }

  .c-spTel__link {
    display: none;
  }

  .c-spTel__text {
    display: inline;
  }
}

/* =========================================================
  Print（印刷）
  ---------------------------------------------------------
  症状：縦に長いページを印刷すると、用紙1枚目に入る分までしか出力されない
  原因：このファイル上部の `html, body { height: 100% }` により、印刷時の
        ページボックスが用紙1枚分の高さに固定され、以降が切り捨てられる
        （Chrome の PDF 出力で実測：修正前 1ページ → 修正後 全ページ）
  方針：印刷時だけ
        1) 高さ / スクロールの制限を解除（複数ページ出力の要）
        2) 画面専用の固定UI（ヘッダー・左固定メニュー・SP固定CTA）を非表示
        3) 高さ固定のスクロール枠を全文表示に展開
        4) 背景色を印刷（白抜き文字が消えないように）＋改ページ位置の調整

  実装メモ：
    - すべて @media print 内。画面表示には一切影響しません
    - !important は使わず、「このファイルの最後に置く＝後勝ち」で上書きしています。
      そのため **この @media print ブロックは常に base.css の末尾に置くこと**。
      セレクタも上書き対象と同じ詳細度に合わせてあります
      （例：`html.is-scroll-locked body` / `#globalMenuPc` は id のまま）
========================================================= */
@media print {

  /* 用紙余白（左右はコンテンツ幅を稼ぐため気持ち狭め） */
  @page {
    margin: 12mm 10mm;
  }

  /* ---------------------------------------------------------
     1) 高さ・スクロール制限の解除
        ※ height:100% を残すと「1枚目まで」で切れるので必ず auto に戻す
        ※ SP幅で効く overflow-x:hidden もスクロールコンテナ化するため解除
     --------------------------------------------------------- */
  html,
  body {
    height: auto;
    min-height: 0;
    max-height: none;
    overflow: visible;
  }

  body {
    /* SP固定ヘッダー / PC左固定メニュー分の逃げ余白は印刷では不要 */
    padding-top: 0;
    padding-right: 0;
    padding-bottom: 0;
    padding-left: 0;

    background: #fff;
  }

  /* メニューを開いたまま印刷された場合のスクロールロック解除 */
  html.is-scroll-locked,
  html.is-scroll-locked body {
    overflow: visible;
  }

  /* ---------------------------------------------------------
     2) 画面専用UIは印刷しない
        position:fixed の要素は用紙に重なって刷られてしまうため
     --------------------------------------------------------- */
  .siteHeader,
  #globalMenu,
  .menuOverlay,
  #globalMenuPc,
  .pcMenuViewport,
  .pcMenuShade,
  .spFixedCtas {
    display: none;
  }

  /* ---------------------------------------------------------
     3) 高さ固定のスクロール枠は全文を展開して印刷する
        （規約・注意書きの .contentFrame--scroll / 表の横スクロール枠）
     --------------------------------------------------------- */
  .contentFrame--scroll,
  [class*="--scroll"],
  .table-wrapper {
    max-height: none;
    overflow: visible;
  }

  /* ---------------------------------------------------------
     4) 印刷時の体裁
     --------------------------------------------------------- */

  /* 背景色を印刷する。表見出しなどの「色地＋白抜き文字」が消えるのを防ぐ */
  html {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  /* 画像・図・表の行はページ途中で切らない */
  img,
  figure,
  tr {
    break-inside: avoid;
    page-break-inside: avoid;
  }

  /* 見出しだけがページ末尾に取り残されないように */
  h1,
  h2,
  h3,
  h4 {
    break-after: avoid;
    page-break-after: avoid;
  }

  /* 複数ページにまたがる表は見出し行を各ページに繰り返す */
  thead {
    display: table-header-group;
  }

  p,
  li {
    orphans: 2;
    widows: 2;
  }
}