@charset "UTF-8";
/*  ═══════════════════════════════════════════════════════════════════
    ▎ FEE PAGE STYLESHEET
    ▎ 弁護士費用ページ用スタイルシート
    ═══════════════════════════════════════════════════════════════════ */
/*  ─────────────────────────────────────────────────────────────────
    ▸ 1. BASE & RESET STYLES | 基本スタイルと初期化
    ───────────────────────────────────────────────────────────────── */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/*  ─────────────────────────────────────────────────────────────────
    ▸ 2. CSS VARIABLES | デザインシステム定数（色・フォント・間隔）
    ───────────────────────────────────────────────────────────────── */
:root {
  /* ◆ Text Colors | テキスト色 */
  --color-text: #1a1a1a;
  --color-text-sub: #555; /* サブテキスト・補足文 */
  --color-note: #666; /* 注記・小さいテキスト */
  /* ◆ Brand Colors | ブランド色 */
  --color-accent: #666666; /* メインアクセントカラー・グレー */
  --color-accent-pale: #f3f3f3; /* ペールグレー背景 */
  --color-red: #c0392b; /* 警告・強調色 */
  /* ◆ UI Colors | UIカラー */
  --color-border: #d0d5dd; /* 境界線色 */
  --color-bg: #f7f8fa; /* 薄いグレー背景 */
  --color-th-bg: #e8e8e8; /* テーブルヘッダー背景・グレー */
  --color-th2-bg: #f5f5f5; /* テーブルサブヘッダー背景・ライトグレー */
  /* ◆ Fonts | フォント */
  --font-base: 'Helvetica Neue', Arial, 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', 'Noto Sans JP', sans-serif;
  /* ◆ Spacing & Effects | 間隔・エフェクト */
  --radius: 6px; /* 角丸半径 */
  --shadow: 0 1px 4px rgba(0, 0, 0, 0.07); /* 微細なシャドウ */
}

/*  ─────────────────────────────────────────────────────────────────
    ▸ 3. GLOBAL STYLES | グローバルスタイル（HTML・リンク）
    ───────────────────────────────────────────────────────────────── */
/*  ─────────────────────────────────────────────────────────────────
    ▸ 4. LAYOUT STRUCTURE | レイアウト構造（メイン・サイドバー）
    ───────────────────────────────────────────────────────────────── */
/* ‣ メインラッパー：サイドバーレイアウトの親コンテナ */
body {
  font-family: var(--font-base);
}

.fee_title {
  font-size: 3rem;
  font-weight: bold;
  background: #ececec;
  /* border-top: 2px solid; */
  color: #2a2a2a;
  text-align: center;
  padding: 44px 0;
  margin-top: 20px;
}

.l-wrapper {
  max-width: 990px; /* 最大幅 */
  margin: 0 auto; /* 中央配置 */
  padding: 0px 20px 60px; /* 外側パディング（上・横・下） */
  align-items: flex-start; /* 上部揃え */
}

/* ‣ メインコンテンツエリア：主要コンテンツ領域 */
.l-main {
  flex: 1; /* 残り余白を占有 */
  min-width: 0; /* オーバーフロー対策 */
}

/* ‣ サイドバーエリア：右側補助情報領域 */
.l-sidebar {
  width: 260px; /* 固定幅 */
  flex-shrink: 0; /* サイズ固定 */
}

/* ‣ コンテンツセクション：上部ボーダー付き */
.l-section {
  margin-top: 56px; /* 上マージン */
  padding-top: 16px; /* 上パディング */
}

/* ‣ 読み込みボックス：アクセントカラー框線付きハイライト */
.l-read {
  font-size: 16px;
}

/*  ─────────────────────────────────────────────────────────────────
    ▸ 5. TYPOGRAPHY - HEADINGS | タイポグラフィー・見出し
    ───────────────────────────────────────────────────────────────── */
/* ◇ セクションタイトル：最大見出し（20px） */
.c-ttl--section {
  margin-bottom: 24px;
  padding: 10px 30px;
  font-size: 2.4rem;
  font-weight: 700;
  color: #3b3b3b;
  background: #efdcdd;
  border-bottom: 2px solid #a55555;
}

/* ◇ エリアタイトル：中見出し（18px） */
.c-ttl--area {
  margin: 28px 0 12px;
  font-size: 2rem;
  font-weight: bold;
  color: #a55555;
}

/* ◇ ブロックタイトル：小見出し・左ボーダー付き（14px） */
.c-ttl--block {
  margin: 20px 0 12px;
  padding-left: 10px;
  /* font-size: 1.4rem; */
  font-weight: 700;
  /* color: var(--color-text-sub); */
  border-left: 5px solid #a55555;
}

/*  ─────────────────────────────────────────────────────────────────
    ▸ 6. ANCHOR LINKS | アンカーリンク（目次・ナビゲーション）
    ───────────────────────────────────────────────────────────────── */
/* ‣ アンカーリンク親コンテナ：2列グリッドレイアウト */
.c-anchor {
  background: #e7e7e7;
  border-radius: 4px;
  padding: 30px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
}

/* ‣ アンカーリンク個別アイテム：50%幅 */
.c-anchor li {
  flex: 1 1 calc(50% - 4px); /* 50%幅・成長・縮小可 */
}

/* ‣ アンカーリンク：ボタン風スタイル */
.c-anchor a {
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  padding: 10px 14px;
  font-size: 1.4rem;
  line-height: 1.5;
  background: #ffffff;
  border: 1px solid #d4d4d4;
  border-radius: var(--radius);
  transition: background 0.15s;
  min-height: 65px;
}

/* ▸ アンカーリンク矢印：右下に配置 */
.c-anchor a::after {
  content: "▼";
  position: absolute;
  right: 12px;
  bottom: 19px;
  font-size: 1.6rem;
  color: var(--color-accent);
}

/* ▸ ホバー状態 */
.c-anchor a:hover {
  background: #f1f1f1; /* グレー背景 */
  text-decoration: none;
}

/* ▸ アンカー内の小さい注記テキスト */
.c-anchor .u-font--notice {
  display: block;
  margin-top: 2px; /* 上マージン */
  font-size: 1.2rem; /* 12px */
  color: var(--color-text-sub); /* サブテキスト色 */
}

/*  ─────────────────────────────────────────────────────────────────
    ▸ 7. TABLES - FEE INFORMATION | テーブル・費用情報
    ───────────────────────────────────────────────────────────────── */
/* ‣ メインテーブル：基本スタイル（本文16px基準） */
.p-fee__tbl {
  width: 100%; /* 全幅 */
  margin-bottom: 8px; /* 下マージン */
  font-size: 1.6rem; /* 16px（本文サイズ基準） */
  border: 1px solid var(--color-border); /* 枠線 */
  border-collapse: collapse; /* セル間隔なし */
}

/* ▸ テーブルセル共通スタイル */
.p-fee__tbl th,
.p-fee__tbl td {
  padding: 10px 14px; /* 内側スペース */
  border: 1px solid var(--color-border); /* 枠線 */
  vertical-align: middle; /* 中央揃え（上下） */
  text-align: left; /* 左揃え */
}

/* ◇ プライマリヘッダー：見出しセル（メイン） */
.p-fee__tbl__th {
  font-weight: 700; /* bold */
  color: var(--color-text);
  background: var(--color-th-bg); /* ヘッダー背景色 */
  white-space: normal; /* テキスト折り返し */
}

/* ◇ セカンダリヘッダー：見出しセル（サブ・14px） */
.p-fee__tbl__th2 {
  font-size: 1.6rem; /* 14px */
  font-weight: 600; /* semibold */
  color: var(--color-text-bg); /* サブテキスト色 */
  background: var(--color-th-bg); /* サブヘッダー背景 */
}

/* ◇ データセル：通常の行 */
.p-fee__tbl__td {
  color: var(--color-text);
}

/* ▸ テーブルセル幅モディファイア */
.p-fee__tbl__cell--210 {
  width: 210px; /* 固定幅210px */
}

/* ▸ テーブルセル幅226px指定 */
.p-tblcell__226 {
  width: 226px; /* 固定幅226px */
}

/* ▸ 金額セル：折り返し禁止 */
.p-fee__nowrap {
  white-space: nowrap; /* テキスト折り返し禁止 */
}

/*  ─────────────────────────────────────────────────────────────────
    ▸ 8. NOTE LIST | 注記リスト（※マーク付き）
    ───────────────────────────────────────────────────────────────── */
/* ‣ 注記リスト親コンテナ */
.c-note {
  margin: 6px 0 20px; /* マージン */
  padding: 0;
  list-style: none;
}

/* ▸ 注記の個別アイテム・※マーク付き */
.c-note li {
  position: relative; /* 相対位置 */
  margin-top: 3px; /* 上マージン */
  padding-left: 1.1em; /* 左パディング（※の分） */
  font-size: 1.2rem; /* 12px */
  line-height: 1.6; /* 行高 */
  color: var(--color-note); /* 注記色 */
}

/* ▸ ※マーク疑似要素 */
.c-note li::before {
  position: absolute; /* 絶対位置 */
  left: 0; /* 左0 */
  content: "※"; /* ※マーク表示 */
}

/*  ─────────────────────────────────────────────────────────────────
    ▸ 9. UTILITY CLASSES | ユーティリティクラス
    ───────────────────────────────────────────────────────────────── */
/* ▸ 小さい注記テキスト（12px） */
.u-font--notice {
  font-size: 1.2rem; /* 12px */
  color: var(--color-note); /* 注記色 */
}

/* ▸ 強調テキスト：赤色 */
.u-txt--red {
  color: var(--color-red); /* 警告色・赤 */
  font-weight: 700; /* bold */
}

/* ▸ モバイル専用：デスクトップで非表示 */
.u-only--sp {
  display: none; /* デスクトップ非表示 */
}

/* ▸ グレー背景ボックス */
.c-box--gray {
  margin: 12px 0; /* 上下マージン */
  padding: 16px 20px; /* 内側スペース */
  background: var(--color-bg); /* グレー背景 */
  border: 1px solid var(--color-border); /* 枠線 */
  border-radius: var(--radius); /* 角丸 */
}
.c-box--gray p {
  font-size: 1.6rem;
}
.c-box--gray .c-note {
  margin-bottom: 0;
}

/* ▸ 番号付きリスト */
.c-ol {
  font-size: 1.6rem; /* 16px（本文） */
  line-height: 1.8; /* 行高 */
}

/*  ─────────────────────────────────────────────────────────────────
    ▸ 10. CTA BANNER SECTION | CTA バナー領域
    ───────────────────────────────────────────────────────────────── */
/* ‣ メイン CTA バナー：親コンテナ */
.c-cv {
  margin: 40px 0; /* 上下マージン */
  padding: 24px; /* 内側スペース */
  text-align: center; /* 中央揃え */
  background: var(--color-accent-pale); /* ペール背景 */
  border: 1px solid #d4d4d4; /* グレー枠線 */
  border-radius: var(--radius); /* 角丸 */
}

/* ◇ CTA 見出し：帯状テキスト */
.c-cv__head {
  margin-bottom: 16px; /* 下マージン */
  font-size: 1.6rem; /* 16px */
  font-weight: 700; /* bold */
  line-height: 1.6; /* 行高 */
}

/* ▸ 見出し内の強調テキスト */
.c-cv__head__bold {
  color: var(--color-accent); /* アクセントカラー */
}

/* ▸ 電話セクション：レイアウト */
.c-cv__tel {
  display: flex; /* フレックス */
  align-items: center; /* 中央揃え（上下） */
  justify-content: center; /* 中央揃え（左右） */
  gap: 20px; /* アイテム間隔 */
  margin-bottom: 12px; /* 下マージン */
  flex-wrap: wrap; /* 折り返し有効 */
}

/* ◇ 無料電話：テキスト */
.c-cv__tel__free {
  font-size: 1.4rem; /* 14px */
  font-weight: 700; /* bold */
  color: var(--color-accent); /* アクセントカラー */
}

/* ▸ 電話セクション下の注記 */
.c-cv__tel__note {
  font-size: 1.2rem; /* 12px */
  color: var(--color-note); /* 注記色 */
}

/* ◇ 電話ボタン */
.c-cv__tel__btn {
  display: inline-flex; /* フレックス表示 */
  flex-direction: column; /* 縦方向 */
  align-items: center; /* 中央揃え */
  padding: 10px 20px; /* 内側スペース */
  font-weight: 700; /* bold */
  text-decoration: none;
  color: #fff; /* 白字 */
  background: var(--color-accent); /* アクセント背景 */
  border-radius: var(--radius); /* 角丸 */
  transition: opacity 0.15s; /* ホバー時の滑らかさ */
}

/* ▸ 電話ボタンホバー */
.c-cv__tel__btn:hover {
  opacity: 0.85; /* 薄暗く */
  text-decoration: none;
}

/* ▸ 電話ボタン内テキスト */
.c-cv__tel__btn__txt {
  font-size: 1.2rem; /* 12px */
}

/* ▸ 電話番号表示（PC版・18px） */
.c-cv__tel__btn__num-pc {
  font-size: 1.8rem; /* 18px */
  letter-spacing: 0.03em; /* 字間を広げる */
}

/* ▸ 営業時間表示（12px） */
.c-cv__tel__btn__time {
  margin-top: 2px; /* 上マージン */
  font-size: 1.2rem; /* 12px */
  font-weight: 400; /* normal */
}

/* ▸ オペレーター画像：装飾用・非表示 */
.c-cv__tel__img-pc {
  display: none; /* 非表示 */
}

/* ▸ CTA 説明テキスト */
.c-cv__txt {
  margin-bottom: 10px; /* 下マージン */
  font-size: 1.1rem; /* 11px */
  color: var(--color-note); /* 注記色 */
}

/* ▸ CTA ボタン親コンテナ */
.c-cv__btns {
  display: flex; /* フレックス */
  gap: 10px; /* ボタン間隔 */
  justify-content: center; /* 中央揃え */
  flex-wrap: wrap; /* 折り返し有効 */
}

/* ◇ メール問い合わせボタン */
.c-cv__btns__mail {
  display: inline-block;
  padding: 9px 22px; /* 内側スペース */
  font-size: 1.2rem; /* 12px */
  font-weight: 700; /* bold */
  color: #fff; /* 白字 */
  background: var(--color-accent); /* グレー背景 */
  border: 2px solid var(--color-accent); /* グレー枠線 */
  border-radius: var(--radius); /* 角丸 */
  transition: background 0.15s, color 0.15s; /* 色のホバー */
}

/* ▸ メールボタンホバー */
.c-cv__btns__mail:hover {
  color: #fff; /* 白字 */
  background: #555555; /* ダークグレー背景 */
  text-decoration: none;
}

/* ◇ 流れ確認ボタン */
.c-cv__btns__flow {
  display: inline-block;
  padding: 9px 18px; /* 内側スペース */
  font-size: 1.1rem; /* 11px */
  color: var(--color-text-sub); /* サブテキスト色 */
  background: #fff; /* 白背景 */
  border: 1px solid var(--color-border); /* グレー枠線 */
  border-radius: var(--radius); /* 角丸 */
  transition: background 0.15s; /* ホバー時の滑らかさ */
}

/* ▸ 流れボタンホバー */
.c-cv__btns__flow:hover {
  background: var(--color-bg); /* グレー背景 */
  text-decoration: none;
}

/*  ─────────────────────────────────────────────────────────────────
    ▸ 11. PAYMENT SECTION | 決済方法表示
    ───────────────────────────────────────────────────────────────── */
/* ‣ 決済情報ボックス */
.c-payment {
  margin-top: 16px; /* 上マージン */
  padding: 20px 24px; /* 内側スペース */
  background: #fff; /* 白背景 */
  border: 1px solid var(--color-border); /* 枠線 */
  border-radius: var(--radius); /* 角丸 */
}

/* ◇ 決済セクション見出し */
.c-payment__ttl {
  margin-bottom: 4px; /* 下マージン */
  font-size: 1.6rem; /* 16px */
  font-weight: 700; /* bold */
}

/* ▸ 決済注記テキスト */
.c-payment__note {
  margin-bottom: 14px; /* 下マージン */
  font-size: 1.2rem; /* 12px */
  color: var(--color-note); /* 注記色 */
}

/* ▸ 決済方法ロゴ一覧 */
.c-payment__logos {
  display: flex; /* フレックス */
  flex-wrap: wrap; /* 折り返し有効 */
  gap: 10px; /* ロゴ間隔 */
  align-items: center; /* 中央揃え */
  margin-bottom: 16px; /* 下マージン */
  padding: 0;
  list-style: none;
}

/* ▸ ロゴ画像 */
.c-payment__logos img {
  height: 28px; /* 高さ統一 */
  width: auto; /* 幅自動 */
  -o-object-fit: contain;
     object-fit: contain; /* 内容に合わせる */
}

/* ▸ 決済サブセクション見出し */
.c-payment__subttl {
  margin-top: 12px; /* 上マージン */
  margin-bottom: 4px; /* 下マージン */
  font-size: 1.2rem; /* 12px */
  font-weight: 700; /* bold */
}

/* ▸ 決済説明テキスト */
.c-payment__txt {
  font-size: 1.1rem; /* 11px */
  line-height: 1.7; /* 行高 */
  color: var(--color-text-sub); /* サブテキスト色 */
}

/*  ─────────────────────────────────────────────────────────────────
    ▸ 12. SIDEBAR COMPONENTS | サイドバーコンポーネント
    ───────────────────────────────────────────────────────────────── */
/* ▸ サイドバー全セクション：共通間隔 */
.l-sidebar__tools,
.l-sidebar__bnrs,
.l-sidebar__menu,
.l-sidebar__language,
.l-sidebar__columns,
.l-sidebar__btns,
.l-sidebar__beginner {
  margin-bottom: 28px; /* 下マージン */
}

/*  ┌⁠─ Sidebar Tools Section | サイドバーツール
    └────────────────────────────────────╮ */
.l-sidebar__tools__ttl {
  margin-bottom: 8px; /* 下マージン */
  font-size: 1.2rem; /* 12px */
  font-weight: 700; /* bold */
  color: var(--color-text);
}

/* ▸ ツールボタンリスト */
.l-sidebar__tools__btn {
  display: flex; /* フレックス */
  flex-direction: column; /* 縦方向 */
  gap: 6px; /* ボタン間隔 */
  padding: 0;
  list-style: none;
}

/* ▸ ツールボタン */
.l-sidebar__tools__btn a {
  padding: 8px 12px; /* 内側スペース */
  font-size: 1.1rem; /* 11px */
  text-align: center; /* 中央揃え */
  color: var(--color-accent); /* テキスト色 */
  background: transparent; /* 透明背景 */
  border: 1px solid var(--color-accent); /* グレー枠線 */
  border-radius: var(--radius); /* 角丸 */
  transition: background 0.15s; /* ホバー時の滑らかさ */
}

/* ▸ ツールボタンホバー */
.l-sidebar__tools__btn a:hover {
  background: var(--color-accent-pale); /* ペール背景 */
  text-decoration: none;
}

/*  ┌⁠─ Sidebar Banner Images | サイドバーバナー画像
    └────────────────────────────────────╮ */
.l-sidebar__bnrs {
  display: flex; /* フレックス */
  flex-direction: column; /* 縦方向 */
  gap: 8px; /* バナー間隔 */
  padding: 0;
  list-style: none;
}

/* ▸ バナー画像 */
.l-sidebar__bnrs img {
  width: 100%; /* 全幅 */
  height: auto; /* 高さ自動 */
  border-radius: var(--radius); /* 角丸 */
  display: block;
}

/*  ┌⁠─ Sidebar Menu | サイドバーメニュー
    └────────────────────────────────────╮ */
.l-sidebar__menu {
  padding: 0;
  list-style: none;
}

/* ▸ メニュー項目同士の区切り線 */
.l-sidebar__menu li + li {
  border-top: 1px solid var(--color-border); /* グレー線 */
}

/* ▸ メニューリンク */
.l-sidebar__menu a {
  display: block;
  padding: 8px 4px; /* 内側スペース */
  font-size: 1.1rem; /* 11px */
  color: var(--color-text); /* テキスト色 */
  transition: color 0.15s; /* ホバー時の滑らかさ */
}

/* ▸ メニューリンクホバー */
.l-sidebar__menu a:hover {
  color: var(--color-accent); /* アクセント色 */
  text-decoration: none;
}

/*  ┌⁠─ Sidebar Language Selection | 言語選択
    └────────────────────────────────────╮ */
.l-sidebar__language__ttl {
  margin-bottom: 6px; /* 下マージン */
  font-size: 1.1rem; /* 11px */
  font-weight: 700; /* bold */
}

/* ▸ 言語リスト */
.l-sidebar__language__list {
  display: flex; /* フレックス */
  flex-direction: column; /* 縦方向 */
  gap: 4px; /* 言語間隔 */
  padding: 0;
  list-style: none;
}

/* ▸ 言語リンク */
.l-sidebar__language__list a {
  font-size: 1.1rem;
}

/*  ┌⁠─ Sidebar Columns | 関連記事コラム
    └────────────────────────────────────╮ */
.l-sidebar__columns__ttl {
  margin-bottom: 10px; /* 下マージン */
  font-size: 1.4rem; /* 14px */
  font-weight: 700; /* bold */
}

/* ▸ コラムリスト */
.l-sidebar__columns__list {
  display: flex; /* フレックス */
  flex-direction: column; /* 縦方向 */
  gap: 12px; /* 記事間隔 */
  padding: 0;
  list-style: none;
}

/* ▸ コラムリンク（画像・タイトル） */
.l-sidebar__columns__list a {
  display: flex; /* フレックス */
  gap: 8px; /* 画像・テキスト間隔 */
  color: var(--color-text);
  transition: color 0.15s; /* ホバー時の滑らかさ */
}

/* ▸ コラムサムネイル画像 */
.l-sidebar__columns__list img {
  width: 64px; /* 画像幅 */
  height: 42px; /* 画像高さ */
  flex-shrink: 0; /* 縮小禁止 */
  -o-object-fit: cover;
     object-fit: cover; /* クロップ表示 */
  border-radius: 3px; /* 角丸 */
}

/* ▸ コラムタイトル */
.l-sidebar__columns__list__ttl {
  font-size: 1.2rem; /* 12px */
  line-height: 1.5; /* 行高 */
}

/* ▸ いっぱい読むリンク */
.l-sidebar__columns__link {
  padding: 6px; /* 内側スペース */
  font-size: 1.1rem; /* 11px */
  text-align: center; /* 中央揃え */
  color: var(--color-accent); /* テキスト色 */
  background: transparent; /* 透明背景 */
  border: 1px solid var(--color-accent); /* グレー枠線 */
  border-radius: var(--radius); /* 角丸 */
  transition: background 0.15s; /* ホバー時の滑らかさ */
}

/* ▸ いっぱい読みリンクホバー */
.l-sidebar__columns__link:hover {
  background: var(--color-accent-pale); /* ペール背景 */
  text-decoration: none;
}

/*  ┌⁠─ Sidebar Additional Buttons | 追加ボタン
    └────────────────────────────────────╮ */
/* ▸ ボタンリスト */
.l-sidebar__btns {
  display: flex; /* フレックス */
  flex-direction: column; /* 縦方向 */
  gap: 6px; /* ボタン間隔 */
  padding: 0;
  list-style: none;
}

/* ▸ サイドバーボタン */
.l-sidebar__btns a {
  padding: 8px 12px; /* 内側スペース */
  font-size: 1.1rem; /* 11px */
  text-align: center; /* 中央揃え */
  color: var(--color-text); /* テキスト色 */
  background: var(--color-bg); /* グレー背景 */
  border: 1px solid var(--color-border); /* グレー枠線 */
  border-radius: var(--radius); /* 角丸 */
  transition: background 0.15s; /* ホバー時の滑らかさ */
}

/* ▸ サイドバーボタンホバー */
.l-sidebar__btns a:hover {
  background: var(--color-accent-pale); /* ペール背景 */
  text-decoration: none;
}

@media screen and (max-width: 768px) {
  /*  ─────────────────────────────────────────────────────────────────
      ▸ 1. LAYOUT | レイアウト
      ───────────────────────────────────────────────────────────────── */
  .l-wrapper {
    padding: 0 12px;
  }
  .l-section {
    margin-top: 36px;
  }
  /*  ─────────────────────────────────────────────────────────────────
      ▸ 2. HEADINGS | 見出し
      ───────────────────────────────────────────────────────────────── */
  .c-ttl--section {
    font-size: 1.8rem;
    padding: 10px 16px;
  }
  .c-ttl--area {
    font-size: 2rem;
    margin: 20px 0 10px;
    line-height: 1.5;
  }
  /*  ─────────────────────────────────────────────────────────────────
      ▸ 3. ANCHOR LINKS | 目次アンカー
      ───────────────────────────────────────────────────────────────── */
  .c-anchor {
    padding: 16px;
    gap: 6px;
  }
  .c-anchor li {
    flex: 1 1 100%; /* SP では1列に変更 */
  }
  .c-anchor a {
    font-size: 1.5rem;
    padding: 9px 12px;
  }
  /*  ─────────────────────────────────────────────────────────────────
      ▸ 4. TABLE — CORE RESET | テーブル コアリセット
      ─────────────────────────────────────────────────────────────────
      rowspan / colspan を多用しているため、
      table 全体を block に変換して縦積みカードスタイルにします。
      ───────────────────────────────────────────────────────────────── */
  .p-fee__tbl,
  .p-fee__tbl tbody,
  .p-fee__tbl tr,
  .p-fee__tbl th,
  .p-fee__tbl td {
    display: block; /* ブロック化 */
    width: 100% !important; /* colspan 指定を上書き */
  }
  .p-fee__tbl th,
  .p-fee__tbl td {
    border: none;
  }
  /* rowspan による重複表示を防ぐ：全セルを通常フローに戻す */
  .p-fee__tbl th[rowspan],
  .p-fee__tbl td[rowspan] {
    /* rowspan 視覚的なリセット */
    border-bottom: none;
  }
  /* 行ごとにカード風のまとまりを作る */
  .p-fee__tbl tr {
    overflow: hidden;
  }
  /* 最後の tr はマージンなし */
  .p-fee__tbl tr:last-child {
    margin-bottom: 0;
  }
  /*  ─────────────────────────────────────────────────────────────────
      ▸ 5. TABLE — HEADER CELLS | テーブル ヘッダーセル
      ───────────────────────────────────────────────────────────────── */
  /* プライマリヘッダー：ラベル帯として上部に表示 */
  .p-fee__tbl__th {
    background: var(--color-th-bg);
    padding: 8px 12px;
    border-bottom: none;
    white-space: normal;
  }
  /* セカンダリヘッダー：サブラベルとして表示 */
  .p-fee__tbl__th2 {
    background: #fff;
    padding: 6px 12px;
    border-bottom: 1px solid var(--color-border);
    color: var(--color-text-sub);
  }
  /* ヘッダー行（thead のみ使用の場合）を非表示にしてもよい場合のクラス */
  .p-fee__tbl thead {
    /* PC では表示しているカラム見出し行はSPでは非表示にする */
    /* ただし本コードでは tbody 内に th が混在しているため、個別に制御 */
  }
  /*  ─────────────────────────────────────────────────────────────────
      ▸ 6. TABLE — DATA CELLS | テーブル データセル
      ───────────────────────────────────────────────────────────────── */
  .p-fee__tbl__td {
    padding: 8px 12px;
    line-height: 1.6;
    background: #fff;
    border-top: none;
  }
  /* 複数 td が連続するときの区切り線 */
  /* th + td の境界線 */
  .p-fee__tbl th + td,
  .p-fee__tbl th + th {
    border-top: none;
    padding: 6px 12px;
  }
  /* 注記テキスト（u-font--notice）を td 内で折り返す */
  .p-fee__tbl td.u-font--notice,
  .p-fee__tbl .u-font--notice {
    font-size: 1.4rem;
    color: var(--color-note);
    padding: 6px 12px;
    display: block;
  }
  .p-fee__tbl .u-font--notice {
    padding: 0;
  }
  /* 金額のnowrapを解除（スマホでは折り返しを許可） */
  .p-fee__nowrap {
    white-space: normal;
  }
  /* 固定幅指定を解除 */
  .p-fee__tbl__cell--210,
  .p-fee__tblcell,
  .p-tblcell__226 {
    width: 100% !important;
  }
  .p-fee__tblcell {
    display: none !important;
  }
  /*  ─────────────────────────────────────────────────────────────────
      ▸ 7. TABLE — SP LABEL DISPLAY | SP 用ラベル表示
      ─────────────────────────────────────────────────────────────────
      HTML 内の .u-only--sp（例：「【対象となる経済的利益の額】」）を表示
      ───────────────────────────────────────────────────────────────── */
  .u-only--sp {
    display: inline; /* SP で表示に切り替え */
    font-weight: 700;
    color: var(--color-text-sub);
    margin-right: 4px;
  }
  /*  ─────────────────────────────────────────────────────────────────
      ▸ 8. TABLE — BORDER UTILITY | テーブル内ボーダー調整
      ───────────────────────────────────────────────────────────────── */
  /* p-fee__tbl__border はSPでは左ボーダーで代替 */
  .p-fee__tbl__border {
    border-bottom: 1px dashed #ccc !important;
  }
  /*  ─────────────────────────────────────────────────────────────────
      ▸ 9. NOTE LIST | 注記リスト
      ───────────────────────────────────────────────────────────────── */
  .c-note li {
    font-size: 1.2rem;
    line-height: 1.6;
  }
  /*  ─────────────────────────────────────────────────────────────────
      ▸ 10. GRAY BOX & OL | グレーボックス・番号リスト
      ───────────────────────────────────────────────────────────────── */
  .c-box--gray {
    padding: 12px 16px;
  }
  /*  ─────────────────────────────────────────────────────────────────
      ▸ 11. CTA BANNER | CTA バナー
      ───────────────────────────────────────────────────────────────── */
  .c-cv {
    padding: 16px;
    margin: 24px 0;
  }
  .c-cv__tel {
    flex-direction: column;
    gap: 10px;
  }
  .c-cv__tel__btn {
    width: 100%;
    text-align: center;
    justify-content: center;
  }
  .c-cv__btns {
    flex-direction: column;
  }
  .c-cv__btns__mail,
  .c-cv__btns__flow {
    width: 100%;
    text-align: center;
  }
  .fee_title {
    padding: 20px 0;
  }
}
/* ═══════ END OF MOBILE STYLESHEET ═══════ */
/*  ═══════════════════════════════════════════════════════════════════
    ▎ END OF STYLESHEET | スタイルシート終了
    ═══════════════════════════════════════════════════════════════════ *//*# sourceMappingURL=fee.css.map */