/* =========================================================
  Zen Cosmic Mandala Numerology ランディングページ CSS
  =========================================================
  編集ポイント（最重要）:
    - 色を変える: :root の各変数を調整
    - フォントを変える: --font-sans / --font-serif を調整
    - 背景画像を変える: .hero-section / .philosophy-section の background-image
    - セクションの余白を変える: .section の padding を調整
========================================================= */

/* =========================
   ベース: CSS変数
   編集ポイント: ここを変えると全体の色味が変わる
========================= */
:root {
  /* 編集ポイント: メイン背景色（クリーム系） */
  --bg: #faf6ef;
  --bg-white: #ffffff;

  /* 編集ポイント: テキスト色 */
  /* --text: #2c2418;
  --text-muted: #6b5d4d; */
  --text-light: #9a8b78;

  /* 編集ポイント: ブランドカラー（ゴールド系） */
  --gold: #c5a55a;
  --gold-light: #e8d5a0;
  --gold-dark: #8b7034;
  --gold-bg: rgba(197, 165, 90, 0.08);
  --gold-bg-strong: rgba(197, 165, 90, 0.15);

  /* 編集ポイント: 装飾色 */
  --surface: rgba(0, 0, 0, 0.04);
  --surface2: rgba(0, 0, 0, 0.08);
  --line: rgba(0, 0, 0, 0.10);
  --line-gold: rgba(197, 165, 90, 0.3);

  /* 編集ポイント: 角丸・影 */
  --radius: 12px;
  --radius-sm: 8px;
  --shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  --shadow-gold: 0 4px 20px rgba(197, 165, 90, 0.15);

  /* 編集ポイント: フォント群 */
  --font-sans: "Noto Sans JP", system-ui, -apple-system, "Segoe UI", "Hiragino Sans", "Yu Gothic", sans-serif;
  --font-serif: "Noto Serif JP", ui-serif, "Hiragino Mincho ProN", "Yu Mincho", serif;
  --font-display: "Cormorant Garamond", "Noto Serif JP", Georgia, serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* =========================
   ユーティリティクラス
   - .visually-hidden: 視覚的に非表示だがスクリーンリーダーには読まれる
   - .img-button: 画像ボタン共通スタイル（ボタン画像を変更 → img の src を変更）
   - .section-bg-image: 背景画像付きセクション共通（背景画像を変更 → CSSの background-image を変更）
   - .button-row-images: 画像ボタン行のレイアウト
========================= */

/* 背景画像にテキストが含まれるセクション用: テキストを視覚的に非表示にする */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* 画像ボタン共通スタイル（ボタン画像を変更 → img の src を変更） */
/* 画像ボタン共通スタイル（ボタン画像を変更 → img の src を変更） */
.img-button {
  display: inline-block;
  border: none;
  background: none;
  padding: 0;
  cursor: pointer;
  transition: opacity 0.2s, transform 0.2s;
}

.img-button:hover {
  opacity: 0.85;
  transform: translateY(-2px);
}

.img-button img {
  display: block;
  max-width: 100%;
  height: auto;
}

/* 背景画像付きセクション共通（背景画像を変更 → CSSの background-image を変更） */
.section-bg-image {
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  background-color: #ffffff;
}

/* 画像ボタン行レイアウト */
/* 編集ポイント:
   - ボタン間の余白 → gap を変更
   - PC時の折り返し → flex-wrap: wrap / nowrap を変更 */
.button-row-images {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: center;
  align-items: center;
  margin-top: 32px;
}

.button-row-images .img-button img {
  height: clamp(36px, 5vw, 72px);
  width: auto;
}

/* スマホ: ボタンを横並び1行に固定
   編集ポイント:
     - ボタンの文字サイズ → .btn-gold-img の font-size を変更
     - ボタンの縦幅 → .btn-gold-img の padding-top/bottom を変更
     - ボタン間の隙間 → .button-row-images の gap を変更 */
@media (max-width: 600px) {
  .button-row-images {
    flex-wrap: nowrap;
    /* 折り返し禁止 → 横1列 */
    gap: 8px;
    padding: 0 4px;
  }

  .button-row-images .btn-gold-img {
    min-width: 0;
    /* min-width: 200px を上書きして縮小可能に */
    flex: 1;
    /* 3ボタンが均等幅に並ぶ */
    font-size: 0.78rem;
    padding: 16px 4px;
  }
}

/* ボタンバー背景（背景画像を変更 → background-image の url を変更） */
.buttons-bar-bg {
  background-image: url("./images/back_buttons-bar.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding: 24px 0;
}

/* =========================
   リセット / ベース
========================= */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  overflow-x: hidden; /* 横スクロール防止（PC表示には影響なし） */
}

body {
  margin: 0;
  overflow-x: hidden; /* 横スクロール防止（PC表示には影響なし） */
  font-family: var(--font-sans);
  background: var(--bg);
  color: var(--text);
  line-height: 1.8;
  font-size: 15px;
  -webkit-font-smoothing: antialiased;
}

a {
  color: inherit;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

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

.container {
  width: min(1100px, calc(100% - 32px));
  margin: 0 auto;
}

/* =========================================================
   レイアウト崩れ防止グローバル修正
   - 横スクロールを抑止する: html / body の overflow-x を hidden に設定
   - PCの表示基準を維持しつつ、狭い画面での横はみ出しを防ぐ
   ========================================================= */

/* 編集ポイント: アクセシビリティ用スキップリンク */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--text);
  color: var(--bg);
  padding: 10px 12px;
  border-radius: 8px;
  z-index: 100;
}

.skip-link:focus {
  left: 12px;
  top: 12px;
}

/* =========================
   ヘッダー / ナビゲーション
   編集ポイント:
     - 背景の透明度: background の rgba を調整
     - 固定しない場合: position: sticky を削除
========================= */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(250, 246, 239, 0.92);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line-gold);
}

.header-row {
  display: flex;
  align-items: center;
  /* ブランド左寄せ・ナビ中央寄せレイアウト */
  /* justify-content: space-between は削除（代わりに .nav の flex:1 で中央寄せ） */
  padding: 14px 0;
  gap: 16px;
  flex-wrap: wrap;
}

/* 編集ポイント: ブランドロゴのスタイル */
.brand {
  display: flex;
  gap: 8px;
  align-items: center;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.02em;
}

.brand-mark {
  color: var(--gold);
  font-size: 18px;
}

/* =============================================
   ヘッダータイトル画像
   【編集ガイド】
   - 高さ調整 → height の値を変更（幅は比率を自動維持）
   - スマホ時のサイズ → @media (max-width: 600px) の .header-title-img を変更
   ============================================= */
.header-title-img {
  height: 60px;    /* ヘッダータイトル画像の高さ（PC） */
  width: auto;
  display: block;
}

@media (max-width: 1024px) {
  .header-title-img {
    height: 40px;  /* ヘッダータイトル画像の高さ（タブレット） */
  }
}
@media (max-width: 600px) {
  .header-title-img {
    height: 30px;  /* ヘッダータイトル画像の高さ（スマホ） */
  }
}

/* 編集ポイント: メインナビリンクのスタイル */
/* - ナビの中央寄せ → justify-content: center を変更（flex-end で右寄せ、flex-start で左寄せ）*/
/* - ナビが占める幅 → flex: 1 を変更（削除するとナビがコンテンツ幅のみになる）*/
.nav {
  display: flex;
  flex: 1;               /* 残りの横幅をすべて占有してナビを中央に配置 */
  justify-content: center; /* ナビボタンを中央寄せ */
  gap: 0;
  flex-wrap: wrap;
}

/* ================================================================
   【共通】ナビリンク: .nav a と .hero-nav a を統一
   ヘッダーナビ（全ページ）・ヒーローナビ（index.html）共通スタイル

   編集ポイント:
   - 文字サイズ → font-size を変更
   - 文字色    → color を変更（#2c2418: 暗い茶色）
   - 下線      → text-decoration を変更（none で非表示）
   - ボタン間隔 → margin の 0 12px を変更
================================================================ */
.nav a,
.hero-nav a {
  font-size: 14px;
  color: #2c2418;
  font-weight: 400;
  text-decoration: underline;
  background: none;
  border-radius: 0;
  padding: 0;
  margin: 0 12px;
  /* ホバーアニメーション削除済み: transition は不要なため除去 */
}

/* ================================================================
   【共通】ナビリンク ホバー: ホバー時の動き・背景変化を無効化
   ホバーエフェクトは削除済み（カーソルを合わせても変化しない）
================================================================ */
/* .nav a:hover / .hero-nav a:hover のスタイルは意図的に定義しない */

/* ================================================================
   【共通】ナビリンク アクティブ（現在のページ）
   JS により .is-active クラスが付与されたリンクに半透明ダーク背景を表示

   編集ポイント:
   - 背景の濃さ → background の rgba 第4引数を変更（0.0〜1.0、大きいほど濃い）
   - 角丸      → border-radius を変更（大きいほど丸くなる）
   - 余白      → padding の値を変更（背景とテキストの距離）
   - 文字の太さ → font-weight を変更（700: 太字、400: 通常）
================================================================ */
.nav a.is-active,
.hero-nav a.is-active {
  background: rgba(44, 36, 24, 0.12); /* 半透明ダーク背景（控えめ・上品） */
  border-radius: 4px;
  padding: 2px 8px;
  margin: 0 4px;
  font-weight: 700;
  text-decoration: none;
  pointer-events: none; /* 現在のページは再クリック不可 */
  cursor: default;
}

/* 編集ポイント: サブナビゲーションバー */
.sub-nav-bar {
  border-top: 1px solid var(--line);
  background: rgba(197, 165, 90, 0.05);
}

.sub-nav-row {
  display: flex;
  gap: 4px;
  padding: 8px 0;
  flex-wrap: wrap;
  justify-content: center;
}

.sub-nav-row a {
  padding: 4px 12px;
  font-size: 12px;
  color: var(--text-light);
  border-radius: 999px;
  transition: background 0.2s, color 0.2s;
}

.sub-nav-row a:hover {
  background: var(--gold-bg-strong);
  color: var(--gold-dark);
  text-decoration: none;
}

/* =========================
   ハンバーガーボタン / モバイルメニュー
   【編集ガイド】
   - ボタンの色 → .hamburger-btn の color を変更
   - オーバーレイの背景色 → .mobile-menu-overlay の background を変更（現在: #FFD66B）
   - メニュー文字色 → .mobile-menu-list a の color を変更
   - 区切り線の色 → .mobile-menu-list li::after の border-bottom-color を変更
   - 文字サイズ → .mobile-menu-list a の font-size を変更
   - 項目間の余白 → .mobile-menu-list li の padding を変更
========================= */

/* ハンバーガーボタン: スマホのみ表示、PCは非表示 */
.hamburger-btn {
  display: none; /* PC: 非表示 */
  background: none;
  border: none;
  cursor: pointer;
  font-size: 24px;
  color: var(--text);
  padding: 8px;
  line-height: 1;
  margin-left: auto; /* 右端に寄せる */
}

/* 非ランディングページのハンバーガーボタン色 */
body:not(.is-landing) .hamburger-btn {
  color: #2c2418;
}

/* スマホ・タブレット: ハンバーガーボタンを表示・ヘッダーナビを非表示 */
@media (max-width: 1024px) {
  .hamburger-btn {
    display: block;
  }

    /* =============================================
     スマホ・タブレット: ランディングページのヘッダー・ナビを他ページと統一
     編集ポイント:
       - ヘッダー背景色 → background の #FFD66B を変更
       - 下線色        → border-bottom の色を変更
       - hero-navを再表示したい場合 → .is-landing .hero-nav { display: none; } を削除
     ============================================= */

  /* スマホ・タブレット: ランディングページでもヘッダーを表示（他ページと同じ黄色ヘッダー） */
  .is-landing .site-header {
    display: block;
    background: #FFD66B;
    backdrop-filter: none;
    border-bottom: 1px solid rgba(44, 36, 24, 0.15);
  }

  /* スマホ・タブレット: ランディングページのhero-navを非表示（ハンバーガーメニューに統一） */
  .is-landing .hero-nav {
    display: none;
  }
  .site-header .nav {
    display: none !important; /* スマホ・タブレットではヘッダーナビを非表示 */
  }
}

/* モバイルメニューオーバーレイ: デフォルト非表示 */
.mobile-menu-overlay {
  position: fixed;
  inset: 0; /* top:0 right:0 bottom:0 left:0 の省略 */
  z-index: 200;
  background: #FFD66B; /* 背景色: 黄色（ヘッダーカラーに合わせる） */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  /* 初期状態: 非表示 + 右からスライドイン準備 */
  opacity: 0;
  visibility: hidden;
  transform: translateX(100%);
  transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease;
}

/* メニューが開いた状態 */
.mobile-menu-overlay.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
}

/* ×閉じるボタン */
.mobile-menu-close {
  position: absolute;
  top: 20px;
  right: 20px;
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
  color: #2c2418; /* 閉じるボタンの色 */
  padding: 8px;
  line-height: 1;
}

.mobile-menu-close:hover {
  opacity: 0.6;
}

/* メニューリスト */
.mobile-menu-list {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 80%; /* リストの幅: 80%（両端に余白） */
  max-width: 320px;
  text-align: center;
}

.mobile-menu-list li {
  padding: 20px 0; /* 項目間の余白（上下） */
  border-bottom: 1px solid rgba(44, 36, 24, 0.2); /* 区切り線 */
}

.mobile-menu-list li:first-child {
  border-top: 1px solid rgba(44, 36, 24, 0.2); /* 最初の項目の上線 */
}

.mobile-menu-list a {
  font-size: 17px; /* メニュー文字サイズ */
  font-weight: 500;
  color: #2c2418; /* メニュー文字色 */
  text-decoration: none;
  letter-spacing: 0.05em;
  display: block;
  transition: opacity 0.2s;
}

/* hover はポインター（マウス）デバイスのみ適用（タッチデバイスで二回タップを防ぐ） */
@media (hover: hover) {
  .mobile-menu-list a:hover {
    opacity: 0.6;
    text-decoration: none;
  }
}

/* ================================================================
   【モバイルメニュー】アクティブ（現在のページ）
   JS により .is-active クラスが付与されたリンクに半透明ダーク背景を表示
   編集ポイント:
   - 背景の濃さ → background の rgba 第4引数を変更（0.0〜1.0、大きいほど濃い）
   - 角丸      → border-radius を変更
   - 余白      → padding を変更
   - 文字の太さ → font-weight を変更
================================================================ */
.mobile-menu-list a.is-active {
  background: rgba(44, 36, 24, 0.12); /* デスクトップナビと同じ半透明ダーク背景 */
  border-radius: 4px;
  padding: 2px 12px;
  font-weight: 700;
  opacity: 1; /* ホバー時の透過を無効化 */
  pointer-events: none; /* 現在のページは再クリック不可 */
  cursor: default;
}

/* =========================
   ランディングページ ナビ制御
========================= */
/* ヒーロー内メインナビ */
.hero-nav {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;

  display: flex;
  justify-content: center;
  align-items: center;
  gap: 28px;
  flex-wrap: wrap;

  padding: 28px 24px;
  margin: 0;

  background: #FFD66B;
  z-index: 3;
}

/* .hero-nav a / .hero-nav a:hover は上部の共通定義（.nav a, .hero-nav a）を参照 */

/* セクション間サブナビ（ランディングページ用） */
.section-sub-nav {
  background: rgba(197, 165, 90, 0.05);
  border-bottom: 1px solid var(--line);
}

/* =========================
   非ランディングページ: ヘッダーを黄色ナビバーに変更
   編集ポイント:
     - バー背景色 → background の #FFD66B を変更
     - テキスト色  → color の #2c2418 を変更
     - リンク間隔  → .nav a の margin を変更
     - フォントサイズ → .nav a の font-size を変更
========================= */
body:not(.is-landing) .site-header {
  background: #FFD66B;
  backdrop-filter: none;
  border-bottom: 1px solid rgba(44, 36, 24, 0.15);
}

body:not(.is-landing) .brand {
  color: #2c2418;
  font-weight: 700;
}

body:not(.is-landing) .brand-mark {
  color: #2c2418;
}

body:not(.is-landing) .brand a {
  color: #2c2418;
}

/* .nav a / .nav a:hover は上部の共通定義を参照（body:not(.is-landing)用の個別定義は不要） */


/* =============================================
   ランディングページ: PCでは白いヘッダーバーを非表示
   編集ポイント:
     - PC非表示を解除したい → display: none を削除
     - スマホ分岐点を変更   → @media の 600px を変更
   ============================================= */

/* PC: ランディングページのヘッダー表示制御
   編集ポイント:
     - PC非表示を解除したい    → .is-landing .site-header の display: none を削除
     - スクロール後背景色を変更 → .is-landing.scrolled .site-header の background を変更
     - スクロール後下線色を変更 → border-bottom の色を変更 */
@media (min-width: 1025px) {
  /* 初期状態: ヒーロー表示中はヘッダーを非表示（hero-navで代替） */
  .is-landing .site-header {
    display: none;
  }
  /* スクロール後: 他ページと同様に黄色ヘッダーバーを表示 */
  .is-landing.scrolled .site-header {
    display: block;
    background: #FFD66B;
    border-bottom: 1px solid rgba(44, 36, 24, 0.15);
  }
}

/* ランディングページ: 初期状態ではヘッダーのメインナビを非表示 */
.is-landing .site-header .nav {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s;
}

/* スクロール後: ヘッダーナビ表示、ヒーローナビ非表示 */
.is-landing.scrolled .site-header .nav {
  opacity: 1;
  pointer-events: auto;
  /* .nav a / .nav a:hover は上部の共通定義を参照（個別定義は不要） */
}

.is-landing.scrolled .hero-nav {
  display: none;
}

@media (max-width: 600px) {

  /* 編集ポイント: スマホでナビを横並び1行にする設定
     - ボタンの文字サイズ調整 → .hero-nav a の font-size を変更
     - ボタン間の余白調整 → gap / margin を変更
     - はみ出したときスクロール許可 → overflow-x: auto を変更 */
  .hero-nav {
    gap: 4px;
    flex-wrap: nowrap;
    /* 横並び固定（折り返し禁止） */
    padding: 14px 6px;
    overflow-x: auto;
    /* 収まらない場合は横スクロール */
  }

  .hero-nav a {
    font-size: 11px;
    padding: 6px 4px;
    margin: 0 2px;
    white-space: nowrap;
    /* テキストを1行に固定 */
    flex-shrink: 0;
    /* 縮小禁止で文字つぶれ防止 */
  }
}

/* =========================
   ボタン共通
   編集ポイント:
     - ボタンの丸み: border-radius を調整
     - ボタンのサイズ: padding を調整
========================= */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line-gold);
  border-radius: 999px;
  padding: 12px 28px;
  background: var(--bg-white);
  color: var(--text);
  cursor: pointer;
  font-weight: 600;
  font-size: 14px;
  white-space: nowrap;
  transition: all 0.2s ease;
  text-decoration: none;
}

.btn:hover {
  background: var(--gold-bg-strong);
  border-color: var(--gold);
  text-decoration: none;
  transform: translateY(-1px);
  box-shadow: var(--shadow-gold);
}

.btn:active {
  transform: translateY(0);
}

/* 編集ポイント: プライマリボタン（ゴールドアクセント） */
.btn-primary {
  background: linear-gradient(135deg, var(--gold-bg-strong), var(--gold-bg));
  border-color: var(--gold-light);
  color: var(--gold-dark);
}

.btn-primary:hover {
  background: linear-gradient(135deg, var(--gold-light), var(--gold-bg-strong));
  color: var(--text);
}

/* 編集ポイント: 鑑定ボタン（特別なスタイル） */
.btn-fortune {
  background: linear-gradient(135deg, var(--gold), var(--gold-dark));
  border-color: var(--gold);
  color: #fff;
  padding: 14px 40px;
  font-size: 16px;
  letter-spacing: 0.05em;
}

.btn-fortune:hover {
  background: linear-gradient(135deg, var(--gold-dark), #6b5020);
  color: #fff;
  box-shadow: 0 6px 24px rgba(197, 165, 90, 0.3);
}

/* 編集ポイント: ゴーストボタン（透明背景） */
.btn-ghost {
  background: transparent;
  border-color: var(--line);
  color: var(--text-muted);
}

.button-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 32px;
}

.button-row-center {
  justify-content: center;
}

/* =========================
   ヒーローセクション
   編集ポイント:
     - 背景画像を変える: background-image の url() を変更
     - オーバーレイの濃さ: .hero-overlay の background を調整
     - 高さ: min-height を調整
========================= */
.hero-section {
  position: relative;
  min-height: 85vh;
  display: flex;
  align-items: center;
  justify-content: center;
  /* 背景画像を変更 → url() 内のパスを変更 */
  background-image: url("./images/back_randing_top.png");
  background-size: cover;
  background-position: center 55%;
  overflow: hidden;
}

/* 編集ポイント: 背景の上に重ねる半透明レイヤー（濃さを調整） */
.hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.hero-inner {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 80px 0 0;
}

/* 編集ポイント: ヒーロータイトルのフォント・サイズ */
.hero-title {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0 0 40px;
}

.hero-title-en {
  font-family: var(--font-display);
  font-size: clamp(26px, 4.5vw, 48px);
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--text);
  line-height: 1.2;
}

.hero-title-ja {
  font-family: var(--font-serif);
  font-size: clamp(18px, 2.5vw, 28px);
  font-weight: 400;
  letter-spacing: 0.15em;
  color: var(--gold-dark);
}

.tm {
  font-size: 0.5em;
  vertical-align: super;
  font-weight: 400;
}

/* 編集ポイント: ヒーローの引用文 */
.hero-quotes {
  display: flex;
  justify-content: space-between;
  gap: 40px;
  margin-top: 40px;
  flex-wrap: wrap;
}

.hero-quote-left,
.hero-quote-right {
  font-family: var(--font-serif);
  font-size: clamp(13px, 1.3vw, 16px);
  color: #ffffff;
  line-height: 1.9;
  flex: 1;
  min-width: 240px;
}

.hero-quote-left {
  text-align: left;
}

.hero-quote-right {
  text-align: right;
}

/* =========================
   セクション共通
   編集ポイント:
     - セクション間の余白: padding を調整
========================= */
.section {
  padding: 72px 0;
}

/* 編集ポイント: セクションタイトルのスタイル */
.section-title {
  text-align: center;
  font-family: var(--font-serif);
  font-size: clamp(22px, 3vw, 30px);
  font-weight: 600;
  color: var(--text);
  margin: 0 0 32px;
  letter-spacing: 0.05em;
}

/* 編集ポイント: 装飾付きタイトル（―で囲む） */
.section-title-deco {
  color: var(--gold-dark);
}

/* =========================
   無料鑑定セクション
   編集ポイント:
     - 背景色: background を変更
     - 入力欄のスタイル: .fortune-input を調整
========================= */
/* 注意点17対応: 背景の指定がないセクションは白の無地背景 */
.fortune-section {
  background: #ffffff;
  border-bottom: 1px solid var(--line);
}

/* 名前鑑定セクション背景（背景画像を変更 → url() 内のパスを変更） */
.fortune-section-alt {
  position: relative;
  background-size: cover;
  background-position: center;
  overflow: hidden;
}

.fortune-section-alt .fortune-overlay {
  position: absolute;
  inset: 0;
  background: rgba(250, 246, 239, 0.82);
  z-index: 0;
}

.fortune-section-alt>.container {
  position: relative;
  z-index: 1;
}

.fortune-desc {
  text-align: center;
  color: var(--text-muted);
  font-size: 14px;
  margin: 0 0 32px;
  line-height: 1.9;
  }

.fortune-form {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}

.fortune-inputs {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  justify-content: center;
}

.fortune-field {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.fortune-field label {
  font-size: 13px;
  color: var(--text-muted);
  font-weight: 600;
}

.fortune-field input {
  width: 100px;
  padding: 12px 16px;
  border: 2px solid var(--line-gold);
  border-radius: var(--radius-sm);
  font-size: 18px;
  text-align: center;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  transition: border-color 0.2s;
  outline: none;
}

.fortune-field input:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(197, 165, 90, 0.15);
}

/* 編集ポイント: セイ・メイなどテキスト入力（5文字収まるよう幅を確保）
   幅を変えたい場合は width の値を調整 */
.fortune-field input[type="text"] {
  width: 130px;
}

/* 編集ポイント: 名前入力（幅広）*/
.fortune-field-wide input {
  width: 280px;
}

/* 編集ポイント: フォーム上部「無料鑑定」ラベル。font-size でサイズ調整、margin-bottom で下の余白調整 */
.form-label-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-main);
  margin: 0 0 4px;
  text-align: center;
}

/* 編集ポイント: 「名前をカタカナで入力してください」案内文。font-size・margin-bottom で調整 */
.form-label-desc {
  font-size: 13px;
  color: var(--text-muted);
  margin: 0 0 12px;
  text-align: center;
}

/* 編集ポイント: 「アルファベットが分かる方」ラベル。margin-top でセイ・メイ欄との間隔を調整 */
.form-label-roman {
  font-size: 13px;
  color: var(--text-muted);
  margin: 12px 0 4px;
  text-align: center;
}

/* 編集ポイント: Lastname/Firstname 行の上の余白。セイ・メイ行との間隔を変えるには margin-top を調整 */
.fortune-inputs-roman {
  margin-top: 0;
}

/* 編集ポイント: 鑑定結果の表示エリア */
.fortune-result {
  margin-top: 24px;
  text-align: center;
  min-height: 40px;
}

.fortune-result .result-message {
  padding: 20px 28px;
  background: var(--gold-bg);
  border: 1px solid var(--line-gold);
  border-radius: var(--radius);
  color: var(--gold-dark);
  font-weight: 600;
  display: inline-block;
  animation: fadeIn 0.4s ease;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* =========================
   哲学セクション（金色背景）
   編集ポイント:
     - 背景グラデーション: .philosophy-section の background を調整
     - オーバーレイ: .philosophy-overlay を調整
========================= */
.philosophy-section {
  position: relative;
  padding: 80px 0;
  /* 編集ポイント: 背景のグラデーション（金色系） */
  background:
    radial-gradient(ellipse 800px 500px at 30% 30%, rgba(232, 213, 160, 0.4), transparent 70%),
    radial-gradient(ellipse 600px 400px at 70% 60%, rgba(197, 165, 90, 0.2), transparent 70%),
    linear-gradient(180deg, #f5eddf, #faf6ef);
  overflow: hidden;
}

.philosophy-overlay {
  position: absolute;
  inset: 0;
  /* 編集ポイント: 装飾パターン（斜め線） */
  background-image: repeating-linear-gradient(45deg,
      rgba(197, 165, 90, 0.04) 0px,
      rgba(197, 165, 90, 0.04) 1px,
      transparent 1px,
      transparent 30px);
  z-index: 0;
}

.philosophy-inner {
  position: relative;
  z-index: 1;
  text-align: center;
  /* max-width: 他セクションの .container に合わせて 1100px に統一 */
  max-width: 1100px;
  margin: 0 auto;
}

/* 編集ポイント: 哲学セクションのタイトル */
.philosophy-title {
  font-family: var(--font-serif);
  font-size: clamp(22px, 3vw, 32px);
  color: var(--gold-dark);
  margin: 0 0 12px;
  letter-spacing: 0.08em;
}

.section-text-content .philosophy-subtitle {
  font-family: var(--font-serif);
  font-size: clamp(15px, 1.8vw, 19px);
  color: var(--text);
  margin: 0 0 32px;
  letter-spacing: 0.1em;
  line-height: 1.8;
}

.philosophy-body p {
  font-size: 15px;
  color: var(--text-muted);
  line-height: 2.2;
  margin: 0 0 24px;
}

.philosophy-body p:last-child {
  margin-bottom: 0;
}

/* =========================
   曼荼羅数秘術とは（Aboutセクション）
   編集ポイント:
     - レイアウト: .about-content の grid を調整
     - 宇宙球体の見た目: .cosmic-sphere-placeholder を調整
========================= */
/* 注意点17対応: デフォルト白背景 */
.about-section {
  background: #ffffff;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.about-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: center;
  margin-bottom: 16px;
}

.about-text p {
  font-size: 14px;
  color: var(--text-muted);
  line-height: 2;
  margin: 0 0 20px;
}

/* 編集ポイント: 宇宙球体のプレースホルダー
   - 実際の画像に差し替える場合: <img> タグに変更 */
.cosmic-sphere-placeholder {
  width: 260px;
  height: 260px;
  margin: 0 auto;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%,
      rgba(150, 180, 255, 0.6),
      rgba(80, 50, 160, 0.7) 40%,
      rgba(30, 20, 80, 0.9) 70%,
      rgba(10, 5, 30, 1));
  position: relative;
  overflow: hidden;
  box-shadow:
    0 0 40px rgba(100, 120, 255, 0.3),
    0 0 80px rgba(150, 100, 255, 0.15),
    inset 0 0 30px rgba(255, 255, 255, 0.1);
}

.sphere-glow {
  position: absolute;
  top: 15%;
  left: 20%;
  width: 35%;
  height: 25%;
  background: radial-gradient(ellipse, rgba(255, 255, 255, 0.5), transparent 70%);
  border-radius: 50%;
  filter: blur(4px);
}

/* =========================
   曼荼羅數秘加鑑定師セクション
   編集ポイント:
     - レイアウト: .appraiser-content の grid を調整
     - マンダラ画像: .mandala-placeholder を差し替え
========================= */
/* 注意点17対応: デフォルト白背景 */
.appraiser-section {
  background: #ffffff;
}

.appraiser-content {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  gap: 32px;
  align-items: center;
  margin-bottom: 16px;
}

.appraiser-text h3 {
  font-family: var(--font-serif);
  font-size: 17px;
  color: var(--gold-dark);
  margin: 0 0 8px;
}

.appraiser-text p {
  font-size: 14px;
  color: var(--text-muted);
  line-height: 2;
  margin: 0 0 24px;
}

/* 編集ポイント: マンダラ画像プレースホルダー
   - 実際の画像に差し替える場合: <img> タグに変更 */
.mandala-placeholder {
  width: 180px;
  height: 180px;
  margin: 0 auto;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mandala-circle {
  width: 160px;
  height: 160px;
  border-radius: 50%;
  /* 編集ポイント: マンダラ風の装飾グラデーション */
  background:
    conic-gradient(from 0deg,
      var(--gold-light),
      var(--gold),
      var(--gold-dark),
      var(--gold),
      var(--gold-light),
      var(--gold),
      var(--gold-dark),
      var(--gold),
      var(--gold-light));
  box-shadow:
    0 0 20px rgba(197, 165, 90, 0.3),
    inset 0 0 30px rgba(255, 255, 255, 0.3);
  position: relative;
}

.mandala-circle::after {
  content: "";
  position: absolute;
  inset: 20px;
  border-radius: 50%;
  background: var(--bg);
  box-shadow: inset 0 0 15px rgba(197, 165, 90, 0.2);
}

.mandala-circle-alt {
  background:
    conic-gradient(from 45deg,
      #8bc34a,
      #4caf50,
      #009688,
      #00bcd4,
      #2196f3,
      #9c27b0,
      #e91e63,
      #ff5722,
      #ff9800,
      #ffc107,
      #8bc34a);
}

/* =========================
   比較表セクション
   編集ポイント:
     - 表の色: background, border-color を調整
     - 列幅: th, td の width を調整
========================= */
/* 注意点17対応: デフォルト白背景 */
.comparison-section {
  background: #ffffff;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.comparison-desc {
  text-align: center;
  font-size: 14px;
  color: var(--text-muted);
  line-height: 2;
  margin: 0 0 32px;
}

.table-wrap {
  overflow-x: auto;
}

/* 編集ポイント: テーブルスタイル */
.comparison-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.comparison-table th,
.comparison-table td {
  padding: 8px 14px;
  border: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}

.comparison-table thead th {
  background: linear-gradient(135deg, var(--gold-bg-strong), var(--gold-bg));
  color: var(--gold-dark);
  font-weight: 700;
  font-size: 15px;
  text-align: center;
}

.comparison-table tbody td:first-child {
  font-weight: 700;
  background: var(--surface);
  color: var(--text);
  white-space: nowrap;
}

.comparison-table tbody tr:nth-child(even) {
  background: rgba(197, 165, 90, 0.03);
}

/* =========================
   メソッドセクション
   編集ポイント:
     - カード数を変える: .methods-grid の grid-template-columns を調整
     - カードの見た目: .method-card を調整
========================= */
.methods-section {
  background: var(--bg);
}

.methods-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin-top: 16px;
}

/* 編集ポイント: メソッドカードのスタイル */
.method-card {
  text-align: center;
  padding: 32px 24px;
  background: var(--bg-white);
  border: 1px solid var(--line-gold);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  transition: transform 0.2s, box-shadow 0.2s;
}

.method-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-gold);
}

.method-icon {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  overflow: hidden;
  margin: 0 auto 16px;
  font-size: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.method-card h3 {
  font-family: var(--font-serif);
  font-size: 17px;
  color: var(--gold-dark);
  margin: 0 0 12px;
}

.method-card p {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.9;
  margin: 0;
}

/* =========================
   プロフィールセクション
   編集ポイント:
     - レイアウト: .profile-content の grid を調整
     - 画像サイズ: .profile-image の width を調整
========================= */
.profile-section {
  background: var(--bg-white);
  border-top: 1px solid var(--line);
}

.profile-content {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(280px, 360px);
  gap: 72px;
  align-items: start;
  max-width: 1080px;
  margin: 0 auto;
}

.profile-main {
  padding-top: 4px;
}

.profile-main p {
  font-size: 15px;
  color: #555555;
  line-height: 1.9;
  margin: 0 0 22px;
}

.profile-signature {
  margin-top: 44px;
  font-size: 15px;
  line-height: 1.8;
  color: #555555;
}

.profile-side {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.profile-image {
  width: 100%;
  max-width: 236px;
  aspect-ratio: 1 / 1;
  margin: 0 auto 18px;
  background: #f3f3f3;
}

.profile-image .img-slot {
  width: 100%;
  height: 100%;
}

.profile-image .img-slot img,
.profile-image .img-slot .img-fallback {
  width: 100%;
  height: 100%;
}

.profile-image .img-slot img {
  object-fit: cover;
}

.profile-name {
  display: none;
}

.profile-role {
  display: none;
}

.profile-name-en {
  width: 100%;
  margin: 0 0 10px;
  font-family: var(--font-sans);
  font-size: 22px;
  font-weight: 400;
  line-height: 1.4;
  color: #555555;
  text-align: center;
}

.profile-side-text {
  width: 122%;
}

.profile-side-text p,
.profile-text p {
  font-size: 15px;
  color: #555555;
  line-height: 1.9;
  margin: 0;
}

.fallback-profile {
  background: #f3f3f3;
  border-radius: 0;
}

@media (max-width: 860px) {
  .profile-content {
    grid-template-columns: 1fr;
    gap: 40px;
    max-width: 720px;
  }

  .profile-side {
    align-items: center; /* スマホ: 写真・名前を中央揃え */
  }

  .profile-image {
    max-width: 220px;
    margin: 0 auto 18px; /* スマホ: 画像を中央揃え */
  }

  .profile-name-en {
    text-align: center; /* スマホ: 名前テキストを中央揃え */
  }

  /* スマホでの幅はみ出し防止（PC では 122% を維持） */
  .profile-side-text {
    width: 100%;
  }
}

@media (max-width: 600px) {
  .profile-content {
    gap: 32px;
  }

  .profile-main p,
  .profile-side-text p,
  .profile-signature {
    font-size: 14px;
    line-height: 1.85;
  }

  .profile-name-en {
    font-size: 18px;
  }

  .profile-image {
    max-width: 200px;
  }
}

/* =========================
   フッター
   編集ポイント:
     - 背景色: background を変更
     - リンク間隔: gap を調整
========================= */
.site-footer {
  background: var(--bg);
  border-top: 1px solid var(--line);
  padding: 40px 0 32px;
}

.footer-inner {
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: center;
}

.footer-links {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  justify-content: center;
}

.footer-links a {
  font-size: 13px;
  color: var(--text-muted);
  transition: color 0.2s;
}

.footer-links a:hover {
  color: var(--gold-dark);
}

.footer-sns {
  display: flex;
  gap: 16px;
}

.footer-sns a {
  font-size: 13px;
  color: var(--text-light);
}

.footer-copy .small {
  margin: 0;
  font-size: 15px;
  color: #000000;
}

/* =========================
   トースト（通知）
   編集ポイント:
     - 表示位置: bottom / left を調整
     - 表示秒数: app.js の setTimeout を調整
========================= */
.toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  background: rgba(44, 36, 24, 0.92);
  color: #fff;
  border: 1px solid var(--gold);
  padding: 12px 24px;
  border-radius: 999px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
  font-size: 14px;
  z-index: 100;
  max-width: 90vw;
  text-align: center;
}

.toast.show {
  opacity: 1;
}

/* =========================
   レスポンシブ
   編集ポイント:
     - ブレイクポイント: 860px / 600px を変更
     - モバイル時のレイアウト: grid-template-columns を変更
========================= */
@media (max-width: 860px) {
  .about-content {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .appraiser-content {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .mandala-image {
    order: 0;
  }

  .appraiser-text {
    order: 1;
  }

  .mandala-image-right {
    order: 2;
  }

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

  .profile-content {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .profile-image-placeholder {
    margin: 0 auto;
  }

  .hero-quotes {
    flex-direction: column;
    gap: 20px;
    align-items: center;
  }

  .hero-quote-left,
  .hero-quote-right {
    text-align: center;
  }
}

@media (max-width: 600px) {
  .header-row {
    justify-content: center;
    text-align: center;
  }

  .nav {
    justify-content: center;
  }

  .sub-nav-row {
    gap: 2px;
  }

  .sub-nav-row a {
    font-size: 11px;
    padding: 4px 8px;
  }

  .fortune-field input {
    width: 80px;
    font-size: 16px;
  }

  /* 編集ポイント: スマホでのセイ・メイ幅。5文字収まるよう調整 */
  .fortune-field input[type="text"] {
    width: 120px;
  }

  .fortune-field-wide input {
    width: 220px;
  }

  .methods-grid {
    grid-template-columns: 1fr;
  }

  .hero-section {
    min-height: 60vh;
  }

  .hero-inner {
    padding: 60px 0 40px;
  }

  /* スマホ: 名言をタイトル直下で左右に横並び
     編集ポイント:
       - タイトルとの間隔 → margin-top を変更
       - 左右の余白 → padding を変更
       - 文字サイズ → font-size を変更 */
  .hero-quotes {
    flex-direction: row;
    /* 860px の column 上書きを解除 */
    justify-content: space-between;
    align-items: flex-start;
    gap: 8px;
    padding: 0 16px;
    margin-top: 16px;
  }

  .hero-quote-left,
  .hero-quote-right {
    flex: 1;
    min-width: 0;
    font-size: 11px;
    line-height: 1.6;
  }

  .hero-quote-left {
    text-align: left;
    /* 860px の center 上書きを解除 */
  }

  .hero-quote-right {
    text-align: right;
    /* 860px の center 上書きを解除 */
    /* 編集ポイント: 「3・6・9を知れば宇宙の鍵が手に入る」を1行に収める設定
       - 文字サイズを調整したい → font-size の値を変更（小さくするほど収まりやすい）
       - 折り返しを許可したい → white-space: nowrap を削除 */
    white-space: nowrap;
    font-size: 9px;
  }

  .btn {
    padding: 10px 20px;
    font-size: 13px;
  }

  .btn-fortune {
    padding: 12px 32px;
    font-size: 15px;
  }

  .button-row {
    justify-content: center;
  }
}

/* =========================
   サブページ共通
   パンくずリスト・ページヘッダー・本文エリア
========================= */

/* パンくずリスト */
.breadcrumb {
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  padding: 10px 0;
}

.breadcrumb-list {
  display: flex;
  align-items: center;
  gap: 6px;
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 12px;
}

.breadcrumb-list li+li::before {
  content: "›";
  margin-right: 6px;
  color: var(--text-light);
}

.breadcrumb-list a {
  color: var(--text-muted);
  transition: color 0.2s;
}

.breadcrumb-list a:hover {
  color: var(--gold-dark);
}

.breadcrumb-list [aria-current="page"] {
  color: var(--text);
  font-weight: 600;
}

/* ページヘッダー */
.page-header {
  text-align: center;
  padding: 48px 0 32px;
  background: linear-gradient(180deg,
      rgba(197, 165, 90, 0.06) 0%,
      transparent 100%);
}

/* ==========================================================
   各ページ専用の見出しクラス（ページタイトル）
   ページごとに独立管理しているため、変更は対象ページのクラスのみ編集
   - 文字サイズ → font-size の clamp() を編集
               （clamp(最小px, 基準vw, 最大px) の順）
   - 文字色     → color を編集
   - 上下余白   → .page-header の padding を編集（styles.css 内 .page-header）
   ページとクラスの対応:
     certified.html        → .certified-page-title
     appraiser-detail.html → .appraiser-detail-page-title
     appraisal.html        → .appraisal-page-title
     features.html         → .features-page-title
     privacy.html          → .privacy-page-title
     profile.html          → .profile-page-title
     request.html          → .request-page-title
     result-name.html      → .result-name-page-title / .result-name-page-title-sub
     secret.html           → .secret-page-title
     study.html            → .study-page-title
     terms.html            → .terms-page-title
     template.html         → .template-page-title
========================================================== */
/* 通常フロー（text-align: center を .page-header から継承して中央揃え）
   position: absolute を廃止し、画面幅に関係なく常に中央に表示 */
.certified-page-title,
.appraiser-detail-page-title,
.appraisal-page-title,
.features-page-title,
.privacy-page-title,
.profile-page-title,
.request-page-title,
.result-name-page-title,
.secret-page-title,
.study-page-title,
.terms-page-title,
.template-page-title {
  font-family: var(--font-serif);
  font-size: clamp(24px, 3.5vw, 34px); /* 文字サイズを変更 → ここを編集 */
  font-weight: 600;
  color: var(--gold-dark);             /* 文字色を変更 → ここを編集 */
  margin: 0;
  letter-spacing: 0.06em;
}

/* result-name.html サブタイトル
   - 上余白を調整 → margin-top を編集 */
.result-name-page-title-sub {
  font-family: var(--font-serif);
  font-size: clamp(14px, 2vw, 20px);   /* 文字サイズを変更 → ここを編集 */
  font-weight: 600;
  color: var(--gold-dark);
  margin: 4px 0 0;                     /* 上余白を変更 → margin-top を編集 */
  letter-spacing: 0.06em;
}

/* ページ本文エリア */
.page-body p {
  font-size: 15px;
  line-height: 2;
  margin: 0 0 20px;
}

.page-body h2 {
  font-family: var(--font-serif);
  font-size: clamp(20px, 2.5vw, 26px);
  font-weight: 600;
  color: var(--text);
  margin: 48px 0 16px;
  letter-spacing: 0.04em;
}

.page-body h3 {
  font-family: var(--font-serif);
  font-size: 17px;
  font-weight: 600;
  color: var(--gold-dark);
  margin: 32px 0 12px;
}

/* =========================
   フォーム部品（サブページ用）
========================= */
.form-group {
  margin-bottom: 20px;
}

/* フォームラベル
   編集ポイント: text-align を left に変えると左揃えに戻る */
.form-label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 6px;
  text-align: center;
}

.form-label .required {
  color: #c0392b;
  font-size: 11px;
  margin-left: 4px;
}

.form-input,
.form-select,
.form-textarea {
  width: 100%;
  padding: 12px 16px;
  border: 2px solid var(--line-gold);
  border-radius: var(--radius-sm);
  font-size: 15px;
  font-family: var(--font-sans);
  color: var(--text);
  background: var(--bg);
  transition: border-color 0.2s;
  outline: none;
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(197, 165, 90, 0.15);
}

.form-select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236b5d4d' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 36px;
}

.form-textarea {
  min-height: 120px;
  resize: vertical;
}

.form-hint {
  font-size: 12px;
  color: var(--text-light);
  margin-top: 4px;
}

.form-error {
  font-size: 12px;
  color: #c0392b;
  margin-top: 4px;
  display: none;
}

.form-group.has-error .form-input,
.form-group.has-error .form-select,
.form-group.has-error .form-textarea {
  border-color: #c0392b;
}

.form-group.has-error .form-error {
  display: block;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.form-actions {
  margin-top: -40px; /* 編集ポイント: ボタン位置 → マイナス値を大きくするほど上に移動（例: -20px〜-60px） */
  margin-bottom: 40px; /* 編集ポイント: ボタン下の余白 → 値を大きくすると線との間隔が広がる */
  text-align: center;
  position: relative;
  z-index: 1;
}

/* 送信ボタン */
.btn-submit {
  background: linear-gradient(135deg, var(--gold), var(--gold-dark));
  border-color: var(--gold);
  color: #fff;
  padding: 14px 48px;
  font-size: 16px;
  letter-spacing: 0.05em;
}

.btn-submit:hover {
  background: linear-gradient(135deg, var(--gold-dark), #6b5020);
  color: #fff;
  box-shadow: 0 6px 24px rgba(197, 165, 90, 0.3);
}

/* 編集ポイント: スマホ時のお申し込みボタンの縦位置調整
   margin-top の値を大きくするとボタンがさらに下に移動（例: 0px〜40px） */
@media (max-width: 600px) {
  .form-actions {
    margin-top: 20px; /* スマホ時: PCの -40px から変更してボタンを下に移動 */
  }
}

/* =========================
   カード・リストレイアウト（サブページ用）
========================= */

/* 汎用カードグリッド */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 24px;
  margin-top: 24px;
}

.card {
  padding: 28px 24px;
  background: var(--bg-white);
  border: 1px solid var(--line-gold);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  transition: transform 0.2s, box-shadow 0.2s;
}

.card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-gold);
}

.card-title {
  font-family: var(--font-serif);
  font-size: 17px;
  font-weight: 600;
  color: var(--gold-dark);
  margin: 0 0 12px;
}

.card-text {
  font-size: 14px;
  color: var(--text-muted);
  line-height: 1.9;
  margin: 0;
}

/* 人物カードグリッド（鑑定士一覧等） */
.person-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 20px;
  margin-top: 24px;
}

.person-card {
  text-align: center;
}

.person-avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  margin: 0 auto 8px;
  background: linear-gradient(135deg, var(--surface), var(--surface2));
  border: 2px solid var(--line-gold);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-light);
  font-size: 12px;
  overflow: hidden;
}

.person-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.person-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}

/* =========================
   特徴セクション（features.html）
========================= */
.feature-section {
  padding: 56px 0;
  border-bottom: 1px solid var(--line);
}

.feature-section:last-child {
  border-bottom: none;
}

.feature-section:nth-child(even) {
  background: var(--bg-white);
}

.feature-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: center;
}

.feature-layout.reverse {
  direction: rtl;
}

.feature-layout.reverse>* {
  direction: ltr;
}

.feature-number {
  font-family: var(--font-display);
  font-size: 13px;
  color: var(--gold);
  font-weight: 600;
  letter-spacing: 0.1em;
  margin: 0 0 8px;
}

.feature-heading {
  font-family: var(--font-serif);
  font-size: clamp(18px, 2.5vw, 24px);
  font-weight: 600;
  color: var(--text);
  margin: 0 0 16px;
  letter-spacing: 0.04em;
}

.feature-text {
  font-size: 14px;
  color: var(--text-muted);
  line-height: 2;
  margin: 0 0 16px;
}

.feature-text:last-child {
  margin-bottom: 0;
}

.feature-example {
  margin: 16px 0;
  padding: 16px 20px;
  background: var(--gold-bg);
  border-left: 3px solid var(--gold-light);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: 14px;
  color: var(--text-muted);
  line-height: 1.9;
}

.feature-visual {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 200px;
}

.feature-image-placeholder {
  width: 100%;
  max-width: 320px;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius);
  background: linear-gradient(135deg, var(--surface), var(--surface2));
  border: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-light);
  font-size: 13px;
  overflow: hidden;
}

.feature-image-placeholder img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* -------------------------------------------------------
   特徴ページ 二列フラッシュレイアウト（features.html）
   【編集ポイント】
   - 左右比率    : .feature-two-col の grid-template-columns を調整
   - テキスト余白: .feature-text-col の padding を調整
   - タイトルサイズ: .feature-main-title の font-size (clamp) を調整
   - 行間        : .feature-list の line-height を調整
------------------------------------------------------- */

/* 画像左・テキスト右の二列（隙間なし） */
.feature-two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  /* ← 左右比率の調整ポイント */
  min-height: 400px;
}

/* 左カラム: 画像をセル全体に表示 */
/* position: relative + img の absolute で高さが確実に埋まる方式 */
/* ← 画像の最小高さを変えるには min-height を調整 */
.feature-image-col {
  overflow: hidden;
  position: relative;
  min-height: 400px;
  /* ← 最小高さ調整ポイント */
}

.feature-image-col img {
  position: absolute;
  /* 親要素を基準に四隅まで広げる */
  inset: 0;
  /* top:0; right:0; bottom:0; left:0 の省略形 */
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* 画像全体を見切れずに表示したい場合のバリアント（例: ベン図など余白が重要な画像） */
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   【微調整ガイド】
   ・画像が小さく見える → padding の値を下げる（0にすると余白なし）
   ・画像が切れる       → padding の値を上げる（例: 8px 16px）
   ・上下の余白を変える → padding の上下値を変更（例: padding: 上 右 下 左）
   ・左右の位置を変える → object-position を変更
       center      : 中央
       right center: 右寄せ
       left center : 左寄せ
   ・背景色を変える     → background-color を変更
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.feature-image-col--contain {
  background-color: #ffffff;
}
.feature-image-col--contain img {
  object-fit: contain;
  object-position: center;
  /* ← 画像の位置: center / right center / left center */
  padding: 4px;
  /* ← 余白調整ポイント: 値を上げると画像が小さく、下げると大きく表示される */
  box-sizing: border-box;
}

/* 右カラム: テキストを上下中央に配置 */
.feature-text-col {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 40px 48px;
  /* ← テキスト周囲の余白調整ポイント */
  background-color: #ffffff;
}

/* メインタイトル: "曼荼羅数秘の特徴　その〇" */
.feature-main-title {
  font-family: var(--font-serif);
  font-size: clamp(20px, 2.5vw, 30px);
  /* ← タイトルサイズ調整ポイント */
  font-weight: 700;
  color: var(--text);
  text-align: center;
  margin: 0 0 20px;
  letter-spacing: 0.08em;
}

/* サブタイトル: 【特徴名】 */
.feature-subtitle {
  font-family: var(--font-sans);
  font-size: clamp(13px, 1.4vw, 16px);
  /* ← サブタイトルサイズ調整ポイント */
  font-weight: 700;
  color: var(--text);
  text-align: center;
  margin: 0 0 16px;
}

/* 番号付きリスト（①②③） */
/* 【編集ポイント】
   - 全体の中央配置 : margin の left/right を auto から変更
   - テキスト揃え   : text-align を left / center / right で調整
   - 行間           : line-height を調整
   display: table + margin: 0 auto で「リスト全体を中央配置しつつ各行は左揃え」を実現
   text-align: center にすると行ごとに開始位置がズレるため text-align: left を使用 */
.feature-list {
  list-style: none;
  padding: 0;
  margin: 0 auto 20px;
  /* ← 左右 auto で中央配置 */
  display: table;
  /* ← コンテンツ幅に縮小しつつ margin: auto で中央寄せ */
  text-align: left;
  /* ← 各行の開始位置を揃えるため左揃え（center にすると行ごとにズレる） */
  line-height: 2.2;
  /* ← 行間調整ポイント */
  font-size: clamp(13px, 1.3vw, 15px);
  color: var(--text);
}

/* 説明文 */
.feature-desc {
  text-align: center;
  font-size: clamp(12px, 1.2vw, 14px);
  /* ← 説明文サイズ調整ポイント */
  color: var(--text);
  line-height: 2;
  margin: 0;
}

/* 左テキスト修飾クラス（偶数特徴など、テキストが左カラムの場合に使用） */
/* ← text-align を変えると揃え方を変更できる（center / left / right） */
.feature-text-col.text-left,
.feature-text-col.text-left .feature-main-title,
.feature-text-col.text-left .feature-subtitle,
.feature-text-col.text-left .feature-desc {
  text-align: center;
}
/* .feature-list は display: table + margin: auto で中央配置済みのため除外 */
/* ← text-align: left を維持することで各行の開始位置が揃う */

/* =========================
   メソッドセクション（secret.html）
========================= */
.method-section {
  padding: 64px 0;
  border-bottom: 1px solid var(--line);
}

.method-section:nth-child(even) {
  background: var(--bg-white);
}

.method-section:last-child {
  border-bottom: none;
}

.method-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: center;
}

.method-layout.reverse {
  direction: rtl;
}

.method-layout.reverse>* {
  direction: ltr;
}

.method-heading {
  font-family: var(--font-serif);
  font-size: clamp(20px, 2.5vw, 26px);
  font-weight: 600;
  color: var(--text);
  margin: 0 0 16px;
  letter-spacing: 0.04em;
}

.method-text {
  font-size: 14px;
  color: var(--text-muted);
  line-height: 2;
  margin: 0 0 16px;
}

.method-visual {
  display: flex;
  align-items: center;
  justify-content: center;
}

.method-image-placeholder {
  width: 100%;
  max-width: 360px;
  aspect-ratio: 1;
  border-radius: var(--radius);
  background: linear-gradient(135deg, var(--surface), var(--surface2));
  border: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-light);
  font-size: 13px;
  overflow: hidden;
}

.method-image-placeholder img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.method-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 24px;
}

/* =========================
   鑑定メニュー（appraisal.html）
========================= */
.menu-jump-nav {
  text-align: center;
  margin: 0 auto 40px;
  max-width: 700px;
}

.menu-jump-nav ul {
  list-style: none;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px 24px;
}

.menu-jump-nav a {
  display: inline-block;
  padding: 8px 20px;
  border: 1px solid var(--accent);
  border-radius: 999px;
  color: var(--accent);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.3s, color 0.3s;
}

.menu-jump-nav a:hover {
  background: var(--accent);
  color: #fff;
}

.founder-credentials {
  max-width: 600px;
  margin: 0 auto 32px;
  padding: 0;
  list-style: none;
}

.founder-credentials li {
  position: relative;
  padding-left: 1.2em;
  font-size: 14px;
  line-height: 2;
  color: var(--text-muted);
}

.founder-credentials li::before {
  content: "・";
  position: absolute;
  left: 0;
}

.menu-intro {
  text-align: center;
  max-width: 700px;
  margin: 0 auto 48px;
}

.menu-intro p {
  font-size: 15px;
  color: var(--text-muted);
  line-height: 2;
  margin: 0;
}

.menu-card {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 32px;
  align-items: start;
  padding: 40px 0;
  border-bottom: 1px solid var(--line);
}

.menu-card:last-child {
  border-bottom: none;
}

.menu-chart {
  width: 200px;
  height: 200px;
  border-radius: var(--radius);
  background: linear-gradient(135deg, var(--surface), var(--surface2));
  border: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-light);
  font-size: 13px;
  flex-shrink: 0;
  overflow: hidden;
}

.menu-chart img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.menu-name {
  font-family: var(--font-serif);
  font-size: clamp(18px, 2.5vw, 22px);
  font-weight: 600;
  color: var(--text);
  margin: 0 0 8px;
}

.menu-price {
  font-size: 15px;
  font-weight: 700;
  /* color: var(--gold-dark); */
  margin: 0 0 16px;
}

.menu-desc {
  font-size: 14px;
  color: var(--text-muted);
  line-height: 2;
  margin: 0 0 20px;
}

.menu-detail-list {
  list-style: none;
  padding: 0;
  margin: 0 0 20px;
}

.menu-detail-list li {
  font-size: 14px;
  color: var(--text-muted);
  line-height: 1.9;
  padding: 4px 0;
  padding-left: 1.2em;
  position: relative;
}

.menu-detail-list li::before {
  content: "✦";
  position: absolute;
  left: 0;
  color: var(--gold);
  font-size: 10px;
  top: 6px;
}

/* =========================
   ベーシック鑑定カード専用スタイル（#basic-menu）
   ※ 他のカードには影響しない

   【微調整ガイド】
   - 画像幅を変える    → .menu-card--basic の grid-template-columns を調整
   - 画像と文字の余白  → .menu-card--basic の gap を調整
   - タイトルのサブテキストサイズ → .menu-name-sub の font-size を調整
   - 申し込みリンクの文字サイズ → .menu-apply-link の font-size を調整
   - テキストの中央寄せを解除  → .menu-card--basic .menu-detail の text-align を left に変更
========================= */
.menu-card--basic {
  /* 左: 画像エリア(45%) / 右: テキストエリア(55%) */
  grid-template-columns: 45fr 55fr;
  gap: 48px;
  align-items: center;
}

/* ============================================================
   画像と文章を左右入れ替えるクラス（PC表示時）
   - 左: テキスト(55%) / 右: 画像(45%)
   - 列幅を変えるには grid-template-columns を調整
   - 画像サイズを変えるには 45fr の値を調整
   ============================================================ */
.menu-card--basic.menu-card--reverse {
  /* 左: テキストエリア(55%) / 右: 画像エリア(45%) */
  grid-template-columns: 55fr 45fr;
}

/* 画像を右へ移動 */
.menu-card--basic.menu-card--reverse .menu-chart {
  order: 2;
}

/* テキストを左へ移動 */
.menu-card--basic.menu-card--reverse .menu-detail {
  order: 1;
}

/* テキストエリアを中央寄せ */
.menu-card--basic .menu-detail {
  text-align: center;
}

/* 大きな画像スロット（ベーシックカード用） */
.menu-chart--large {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  background: transparent;
  border: none;
  border-radius: 0;
}

.menu-chart--large img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* タイトルのサブテキスト（ー魂の設計図…ー）
   ・ヒーローと同比率（1:1）なので font-size はタイトルと同じ値に
   ・色を変えるには color を調整 */
.menu-name-sub {
  display: block;
  font-size: 1.5rem;
  font-weight: 400;
  margin-top: 4px;
  color: #000000;
}

/* ベーシックカードのタイトル：全幅中央揃え・下線・サイズ・色
   ・文字サイズを変えるには font-size を調整（1.5rem = ヒーローより少し大）
   ・色を変えるには color を調整
   ・grid-column: 1 / -1 → 2カラムをまたいで全幅表示（プレミアムセッションと同様）
   ・text-align: center → タイトルと改行を中央に揃える
   ・中央揃えをやめるには text-align を left に変更 */
.menu-card--basic .menu-name {
  grid-column: 1 / -1;
  text-align: center;
  border-bottom: 1px solid var(--line-gold);
  padding-bottom: 12px;
  margin-bottom: 16px;
  font-size: 1.5rem;
  color: #000000;
  /* 背景画像（chart_kantei-txt_back.png）
     ・サイズを変えるには background-size の数値を調整
     ・上下の余白を変えるには padding-top / padding-bottom を調整 */
  background-image: url('./images/chart_kantei-txt_back.png');
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  padding-top: 16px;
}

/* 箇条書き「・」スタイル */
.menu-detail-list--dot li::before {
  content: "・";
  color: var(--text-muted);
  font-size: 14px;
  top: 0;
}

/* ベーシックカードの箇条書き：ブロックごと中央配置・中身は左揃え
   ・横幅を変えるには max-content → 固定px（例: 240px）に変更 */
.menu-card--basic .menu-detail-list {
  display: inline-block;
  text-align: left;
}

/* 申し込みテキストリンク（→ [申し込む]） */
.menu-apply-link {
  display: inline-block;
  font-size: 15px;
  color: var(--text);
  text-decoration: underline;
  text-underline-offset: 4px;
  letter-spacing: 0.05em;
  transition: color 0.2s;
}
.menu-apply-link:hover {
  color: var(--gold-dark);
}

/* スマホ：縦積みに戻す */
@media (max-width: 768px) {
  .menu-card--basic {
    grid-template-columns: 1fr;
    /* 画像とh3見出しの間隔（スマホ）
       ← 広げたい場合は数値を増やす（例: 24px, 32px）
       ← 狭めたい場合は数値を減らす（例: 8px, 12px） */
    gap: 1px;
  }

  /* .menu-card--basic.menu-card--reverse は2クラスで詳細度が高いため、
     スマホ時は明示的に1列に上書き（上の .menu-card--basic だけでは負ける）
     - 列幅を変えるには 1fr を調整 */
  .menu-card--basic.menu-card--reverse {
    grid-template-columns: 1fr;
  }

  /* スマホ時は order をリセット → 画像(order:1) → テキスト(order:2) の順に表示
     - 順序を変えるには order の値を入れ替える
     - 画像を下に戻す場合: .menu-chart を order:2、.menu-detail を order:1 に変更 */
  .menu-card--basic.menu-card--reverse .menu-chart {
    order: 1;
  }
  .menu-card--basic.menu-card--reverse .menu-detail {
    order: 2;
  }

  /* ============================================================
     スマホ表示時の鑑定カード画像サイズ（appraisal.html 専用）
     【微調整ガイド】
     - 画像をさらに大きくする → max-width の数値を増やす（例: 400px, 420px）
     - 画像を小さくする       → max-width の数値を減らす（例: 300px, 320px）
     - 横幅いっぱいに広げる   → max-width: 100% に変更（margin: 0 auto は不要になる）
     ============================================================ */
  .menu-chart--large {
    max-width: 420px; /* ← ここの数値を変えて画像サイズを微調整 */
    margin: 0 auto;
  }

  /* スマホ用サブタイトル文字サイズ ← ここを変更して微調整 */
  /* 「ー魂の設計図・生まれ持った本質ー」が1行に収まるよう縮小（1.5rem → 1.05rem） */
  .menu-name-sub {
    font-size: 1.05rem;
  }

  /* スマホ時：<br>タグを使った説明文を左揃えに変更 */
  /* ← 中央揃えに戻す場合は text-align: center に変更 */
  .menu-card--basic .menu-desc {
    text-align: left;
  }

}

/* =========================
   プレミアムセッションカード専用スタイル（#session-menu）
   ※ 他のカードには影響しない

   【微調整ガイド】
   - 背景画像の透明度     → .session-bg img の opacity を調整（0〜1）
   - カードの上下余白     → .session-card の padding-top / padding-bottom を調整
   - コンテンツの最大幅   → .session-content の max-width を調整
   - タイトルの背景サイズ → #session-menu .menu-name の background-size を調整
========================= */

/* カード全体：grid を解除して1列中央表示 */
.session-card {
  position: relative;
  display: block;
  text-align: center;
  padding: 80px 0;
  overflow: hidden;
}

/* 背景画像レイヤー（絶対配置でカード全面に広げる） */
.session-bg {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.session-bg img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  /* 透明度を変えたい場合はここを調整（0=完全透明 / 1=そのまま） */
  opacity: 1;
}

/* テキストコンテンツ（背景の上に重ねる） */
.session-content {
  position: relative;
  z-index: 1;
  max-width: 700px;
  margin: 0 auto;
  padding: 0 24px;
}

/* タイトル：金色キラキラ背景＋黒文字 */
#session-menu .menu-name {
  background-image: url('./images/chart_kantei-txt_back.png');
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  padding: 20px 60px;
  color: #1a1a1a;
  font-size: 1.5rem;
  border-bottom: none;
  margin-bottom: 24px;
}

/* 箇条書き：ブロックごと中央配置・中身は左揃え
   display: block + margin: auto で縦積みを維持しつつ中央寄せ */
.session-card .menu-detail-list {
  display: block;
  width: fit-content;
  margin: 0 auto 24px;
  text-align: left;
}

/* リンク：テキストリンクスタイル */
.session-link {
  display: inline-block;
  font-size: 20px;
  color: var(--text);
  text-decoration: underline;
  text-underline-offset: 4px;
  transition: color 0.2s;
}

.session-link:hover {
  color: var(--gold-dark);
}

/* プレミアムセッション：キャッチコピー（引用行）
   フォントサイズを変更 → font-size を調整
   下余白を変更 → margin-bottom を調整 */
.session-catch {
  font-size: 1rem;
  font-weight: 600;
  line-height: 2;
  margin-bottom: 20px;
}

/* =========================
   プレミアムセッション：プロフィール写真 + 氏名
   ※ appraisal.html #session-menu 専用

   【微調整ガイド】
   - 写真サイズ     → .session-profile-photo の width / height を変更
   - 写真と名前の隙間 → .session-profile の gap を変更
   - 日本語名のサイズ → .session-profile-name-jp の font-size を変更
   - 英語名のサイズ  → .session-profile-name-en の font-size を変更
   - プロフィール全体の下余白 → .session-profile の margin-bottom を変更
========================= */
.session-profile {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin-bottom: 24px;
}

/* 写真：丸型クリップ */
.session-profile-photo {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

/* 氏名ブロック：左揃え（写真の右に並ぶため） */
.session-profile-info {
  text-align: left;
}

/* 日本語名 */
.session-profile-name-jp {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--text);
  margin: 0 0 4px;
}

/* 英語名 */
.session-profile-name-en {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin: 0;
}

/* スマホ対応 */
@media (max-width: 768px) {
  .session-card {
    padding: 60px 0;
  }

  /* スマホ用プレミアムセッション見出し文字サイズ ← ここを変更して微調整 */
  /* 「プレミアムセッション」が1行に収まるよう縮小（1.5rem → 1.1rem） */
  /* ※ このブロックは #session-menu .menu-name の基本スタイル（line 2352）より */
  /*   後に配置しているため、正しくモバイルで上書きされます                     */
  #session-menu .menu-name {
    font-size: 1.1rem;
  }

  /* スマホ時：説明文を左揃えに変更、かつ左端をベーシックカードに揃える         */
  /* .container の余白 (16px) がすでにあるため padding: 0 でOK             */
  /* ← 元に戻す場合は padding: 0 24px に変更                               */
  /* ← IDセレクターで詳細度を高め、.menu-card の text-align: center に負けないようにしている */
  .session-content {
    padding: 0;
  }

  #session-menu .menu-desc {
    text-align: left;
  }

  /* スマホ時：写真と名前を縦積みに変更 */
  .session-profile {
    flex-direction: column;
    gap: 12px;
  }

  /* スマホ時：氏名ブロックを中央揃えに */
  .session-profile-info {
    text-align: center;
  }
}

/* =========================
   プレミアムセッション：PC表示での説明文1行表示
   ※ スマホは上の @media (max-width: 768px) ブロックで別制御

   【微調整ガイド】
   - 1行表示を解除 → white-space: nowrap を削除
   - コンテンツ幅を固定したい → max-width: fit-content を任意のpx値に変更
========================= */
@media (min-width: 769px) {
  /* PC表示：.session-catch（キャッチコピー）以外の説明文を折り返しなし1行表示 */
  #session-menu .menu-desc:not(.session-catch) {
    white-space: nowrap;
  }

  /* 1行テキストが収まるようコンテンツ幅を文章の最大幅に自動調整 */
  .session-content {
    max-width: fit-content;
  }
}

/* =========================
   注意事項ボックス（request.html）
========================= */
/* =========================
   鑑定依頼ページ：確認ボックス（notice-box）
   - 背景色を変更 → background を編集
   - ボーダーを追加したい場合 → border コメントを外す
   - 余白を変更 → padding / margin-bottom を編集
========================= */
.notice-box {
  margin-top: -10px;
  background: transparent;
  border-radius: var(--radius);
  padding: 8px 24px 24px;
  margin-bottom: 16px;
  text-align: center;
}


/* =========================
   鑑定依頼ページ：1つ目の確認ボックス（鑑定メニュー）
   - 上余白を変更 → padding-top を編集
   - 見出し画像（AppraisalMenu.png）がタイトルを担うため
     旧・背景テキスト用の大きなオフセットは不要
========================= */
.request-intro-content .notice-box:first-child {
  padding-top: 16px; /* 編集ポイント: 鑑定メニューボックスの上余白 */
}

/* =========================
   鑑定依頼ページ：2つ目の確認ボックス（お申し込み前にご確認ください）
   - 上余白を変更 → padding-top を編集
   - 見出し画像（AppraisalConfirm.png）がタイトルを担うため
     旧・背景テキスト用のオフセットは不要
========================= */
.request-intro-content .notice-box:last-child {
  padding-top: 8px;  /* 編集ポイント: 確認ボックスの上余白 */
  margin-top: 0;
}


/* =========================
   鑑定依頼ページ：確認ボックスタイトル（ピル/バッジ形状）
   - バッジの色を変更 → background を編集
   - 角丸の大きさを変更 → border-radius を編集
   - 横幅の余白を変更 → padding の左右値を編集
   - フォントサイズを変更 → font-size を編集
   - display: block + width: fit-content + margin: 0 auto でバッジを中央配置
     inline-block にすると<p>タグの通常表示と二重になるため使用しないこと
========================= */
.notice-box-title {
  display: block;
  width: fit-content;
  margin: 0 auto 14px;
  font-family: var(--font-serif);
  font-size: 15px;
  font-weight: 600;
  color: var(--gold-dark);
  background: var(--gold-bg-strong);
  border: 1px solid var(--line-gold);
  border-radius: 20px;
  padding: 6px 28px;
  letter-spacing: 0.05em;
}

/* =========================
   確認ボックス：リスト
   - 両リストを同じ幅（75%）にして中央寄せ → 左端X軸が揃う
   - 左端位置を変更 → width を編集（小さくすると中央に寄る）
   - margin: 0 auto で中央配置（旧: margin 0 auto 0 20% は小さい画面ではみ出す恐れがあったため変更）
========================= */
.notice-box ul {
  list-style: none;
  padding: 0 8px;             /* 左右に最低限の余白を確保 */
  margin: 0 auto;             /* 左固定マージンを廃止し中央配置に変更（崩れ防止） */
  display: block;
  width: min(75%, 100%);      /* 最大75%、ただし画面幅を超えない */
  text-align: left;
}

.notice-box li {
  font-size: 14px;
  color: #000000; /* 編集ポイント: テキスト色を変える → color を変更 */
  line-height: 1.9;
  padding: 2px 0 2px 1.2em;
  position: relative;
}

.notice-box li::before {
  content: "・";
  position: absolute;
  left: 0;
  color: var(--gold);
}

/* =========================
   鑑定メニュー: .menu-item / .btn-link
   - .menu-item: テキストと「→申し込む」を縦並びにする
   - .btn-link: 3つのリンクの横位置を揃える
   編集ポイント:
     リンクの色 → .btn-link の color を変更
     リンクとテキストの間隔 → .btn-link の margin-top を変更
     文字サイズ → .btn-link の font-size を変更
========================= */
.menu-item {
  display: flex;
  flex-direction: column; /* テキストとリンクを縦並びに */
}

.btn-link {
  display: inline-block;
  color: #000000;               /* 編集ポイント: リンク色（黒） */
  text-decoration: none;
  font-size: 13px;              /* 編集ポイント: 文字サイズ */
  font-weight: 800;             /* 編集ポイント: 太字 */
  margin-top: 2px;              /* 編集ポイント: テキストとリンクの間隔 */
  margin-left: 10em;             /* 編集ポイント: 右へのずらし量 */
  line-height: 1.6;
}

.btn-link:hover {
  color: #333333;
  text-decoration: underline;
}

/* 鑑定メニューリスト（簡易） */
.menu-list-simple {
  list-style: none;
  padding: 0;
  margin: 0 0 32px;
}

.menu-list-simple li {
  font-size: 14px;
  color: var(--text-muted);
  line-height: 1.9;
  padding: 4px 0 4px 1.4em;
  position: relative;
}

.menu-list-simple li::before {
  content: "•";
  position: absolute;
  left: 0;
  color: var(--gold);
  font-weight: 700;
}

/* フォームセクション区切り */
.form-section {
  margin-bottom: 32px;
}

/* セクションタイトル
   編集ポイント:
   - justify-content: center … ひし形＋テキストをまとめて中央揃え
   - gap … ひし形ボックスとテキストの隙間（PNG内の透明余白がある場合は 0 〜 負値に）
   - ボーダーラインはコンテナ幅いっぱいに引かれる */
.form-section-title {
  font-family: var(--font-serif);
  font-size: 17px;
  font-weight: 600;
  color: #000000 !important; /* 編集ポイント: テキスト色を変える → color を変更（.page-body h3 より優先） */
  margin: 0 0 16px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--gold-light);
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0;
}

/* ひし形アイコン（画像）
   flex アイテムとしてテキストと隣接させることで、
   justify-content: center によりセットで中央揃えされる。
   負のマージンでコンテナ高さへの影響を打ち消し、
   ボーダーラインの位置がテキスト高さに追従する仕組み。
   編集ポイント:
   - width … 横の空白を詰める場合は小さく、広げる場合は大きく
       PNG内に透明余白が多い場合は width を下げるのが効果的
   - height … アイコンの視覚的な縦サイズ（現在 80px）
   - margin-right … 正値でテキストとの間隔を広げ、負値で詰める
   - margin-top / margin-bottom … -(height - テキスト行高) / 2 が目安
   画像を変更する場合は background-image の URL を変更 */
.form-section-title::before {
  content: "";
  display: inline-block;
  width: 70px;
  height: 100px;
  background-image: url('./images/chart_certified-page_point.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  flex-shrink: 0;
  margin-right: -20px;
  margin-top: -38px;
  margin-bottom: -38px;
}

/* 1カラム半幅フィールド（メールアドレス・電話番号など）
   編集ポイント:
   - max-width … フィールドの幅（2カラムの1列分に合わせて calc(50% - 8px)）
   - margin: 0 auto → フォーム内で水平中央に配置
   スマホでは自動的に全幅になる */
.form-group-half {
  max-width: calc(50% - 8px);
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 600px) {
  .form-group-half {
    max-width: 100%;
  }
}

/* セッション専用項目（非表示→表示切替） */
.session-only {
  display: none;
}

.session-only.is-visible {
  display: block;
}

/* =========================
   お支払方法 + キャンセル注意事項 共通背景ラッパー
   編集ポイント:
     - 背景画像を変える → background-image の URL を変更（現在: AppraisalMark.png）
     - 上下余白を変える → padding-top / padding-bottom を調整
     - 幅を変える → max-width を調整（現在は正円が収まるよう正方形に近い設定）
     - 各セクション見出し画像: AppraisalPay.png / AppraisalCancel.png（HTML の <img> で管理）
========================= */
.payment-cancel-bg {
  /* 背景画像（円形マンダラ）を両セクション全体に表示 */
  /* 編集ポイント: 背景画像を変える → URL を差し替え */
  background-image: url("./images/chart_kanteimenu_back.png");
  /* 編集ポイント: 背景サイズ → contain=円全体表示 / cover=全面塗り / 数値%=任意サイズ */
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;

  /* 編集ポイント: コンテナ幅を変える → max-width を調整（鑑定メニューと同じ600pxに統一） */
  max-width: 600px;
  width: 100%;
  margin: 40px auto 0;

  /* 正方形にすることで background-size: contain が幅いっぱいに画像を表示できる */
  /* 編集ポイント: 縦横比を変える → aspect-ratio の値を変更（1 = 正方形） */
  aspect-ratio: 1;

  /* 中央寄せ */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* 各セクション見出し画像（AppraisalPay.png / AppraisalCancel.png）
   編集ポイント:
     - 幅を変える → max-width を調整
     - 上下余白を変える → margin-bottom を調整 */
.appraisal-section-heading {
  display: block;
  max-width: 240px;   /* 編集ポイント: 見出し画像の幅（共通） */
  width: 100%;
  margin: 0 auto 12px; /* 編集ポイント: 見出し画像の下余白 */
}

/* =========================
   鑑定依頼ページ：ヘッダー内見出し画像（AppraisalMenu / AppraisalConfirm）
   ※ .appraisal-section-heading の後に記述することでサイズを上書き
   - 幅を変える → max-width を調整
   - 下余白を変える → margin-bottom を調整
========================= */
.appraisal-intro-heading {
  max-width: 300px;   /* 編集ポイント: 見出し画像の横幅（大きくしたい場合は増やす） */
  margin-bottom: 16px; /* 編集ポイント: 見出し画像とリストの間隔 */
}

/* =========================
   鑑定依頼ページ：AppraisalMenu.png 専用サイズ
   ※ .appraisal-intro-heading の後に記述することでさらに上書き
   - サイズを変える → max-width を調整
========================= */
.appraisal-menu-img {
  max-width: 200px;   /* 編集ポイント: AppraisalMenu.png の横幅 */
}

/* お支払方法見出し画像専用スタイル（AppraisalPay.png のみ）
   編集ポイント: max-width を小さくすると画像が小さくなる */
.appraisal-pay-heading {
  max-width: 180px;   /* 編集ポイント: お支払方法見出し画像の幅（鑑定メニュー見出しに合わせて拡大） */
  margin-bottom: 8px; /* 編集ポイント: 見出し画像とラジオボタンの間隔 */
}

/* 支払い方法 */
.payment-section {
  /* 背景は親ラッパーの画像に委ねるため透明に */
  margin-top: 0;
  /* 編集ポイント: padding-top を小さくするとラジオボタン等が上に移動 */
  /* 編集ポイント: padding-bottom を小さくすると ※注釈とキャンセル見出し画像の間隔が縮まる */
  padding: 1px 28px 4px;
  background: transparent;
  border: none;
  border-radius: 0;
  width: 100%;
  max-width: 480px;
  text-align: center;
}

.payment-title {
  font-family: var(--font-serif);
  font-size: 16px;
  font-weight: 600;
  color: var(--gold-dark);
  margin: 0 0 12px;
}

.payment-list {
  list-style: none;
  padding: 0;
  margin: 0 0 12px;
}

.payment-list li {
  font-size: 14px;
  color: var(--text-muted);
  line-height: 1.9;
  padding: 2px 0 2px 1.2em;
  position: relative;
}

.payment-list li::before {
  content: "・";
  position: absolute;
  left: 0;
  color: var(--gold);
}

.payment-note {
  font-size: 14px; /* 編集ポイント: ※注釈のフォントサイズ */
  color: #000000; /* 編集ポイント: ※注釈テキスト色 */
  margin: 8px 0 0;
}

/* 支払い方法テキスト表示 */
/* 編集ポイント: フォントサイズ → font-size / 色 → color / 余白 → margin */
.payment-method-text {
  font-size: 16px;
  color: #000000;
  margin: 8px 0 0;
  font-weight: 500;
}

/* 支払い選択肢ラッパー（未使用・後方互換のため残置） */
.payment-options {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  margin: 0 auto;
  display: inline-flex;
}

/* 支払い選択肢1行（未使用・後方互換のため残置） */
.payment-radio {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 16px;
  color: #000000;
  cursor: pointer;
}

/* キャンセル・注意事項 */
/* 編集ポイント: 上余白を変える → margin-top を調整 */
.cancel-notice {
  /* 背景は親ラッパーの画像に委ねるため透明に */
  margin-top: 0px; /* 編集ポイント: キャンセル注意事項の上余白 → 大きくすると下に、小さく/マイナスにすると上に移動 */
  /* 編集ポイント: padding-top を小さくすると ※注釈とキャンセル見出し画像の間隔が縮まる（0pxで最も詰める） */
  padding: 0px 24px 10px;
  border: none;
  border-radius: 0;
  background: transparent;
  width: 100%;
  max-width: 480px;
  text-align: center;
}

.cancel-notice-title {
  font-family: var(--font-serif);
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  margin: 0 0 8px;
}

.cancel-notice ul {
  list-style: none;
  padding: 0;
  margin: 0;
  /* リストを左揃えのブロックとして中央配置 */
  display: inline-block;
  text-align: left;
}

.cancel-notice li {
  font-size: 14px; /* 編集ポイント: キャンセル注意事項リストのフォントサイズ（鑑定メニューリストに合わせて拡大） */
  color: #000000; /* 編集ポイント: キャンセル注意事項リストテキスト色 */
  /* 編集ポイント: line-height を小さくすると行間が縮まる */
  line-height: 1.8; /* 編集ポイント: 行間（1.5→1.8に拡大して読みやすく） */
  /* 編集ポイント: padding の上下を小さくすると項目間の縦幅が縮まる */
  padding: 1px 0 1px 1.2em;
  position: relative;
}

.cancel-notice li::before {
  content: "・";
  position: absolute;
  left: 0;
  color: var(--text-light);
}

/* =========================
   ログインセクション（certified.html）
========================= */
.login-section {
  background: linear-gradient(135deg, var(--gold-light), var(--gold));
  padding: 64px 0;
  text-align: center;
}

.login-box {
  max-width: 420px;
  margin: 0 auto;
  background: rgba(255, 255, 255, 0.92);
  border-radius: var(--radius);
  padding: 40px 36px;
  box-shadow: var(--shadow);
}

.login-title {
  font-family: var(--font-serif);
  font-size: clamp(20px, 3vw, 26px);
  font-weight: 600;
  color: var(--text);
  margin: 0 0 8px;
}

.login-subtitle {
  font-size: 14px;
  color: var(--text-muted);
  margin: 0 0 28px;
}

.login-box .form-group {
  text-align: left;
}

.btn-login {
  width: 100%;
  margin-top: 12px;
}

/* ログイン前後の表示切替 */
.workspace-form {
  display: none;
}

.workspace-form.is-visible {
  display: block;
}

.login-section.is-hidden {
  display: none;
}

/* =========================
   鑑定士ダッシュボード（certified.html）
========================= */

/* タブナビゲーション */
.ws-tabs {
  display: flex;
  gap: 0;
  border-bottom: 2px solid var(--line-gold);
  margin-bottom: 24px;
}

.ws-tab {
  background: none;
  border: none;
  padding: 10px 20px;
  font-size: 0.95rem;
  color: var(--text-muted);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  transition: color 0.2s, border-color 0.2s;
}

.ws-tab:hover {
  color: var(--text);
}

.ws-tab.is-active {
  color: var(--gold-dark);
  border-bottom-color: var(--gold-dark);
  font-weight: 600;
}

/* タブパネル */
.ws-panel {
  display: none;
}

.ws-panel.is-active {
  display: block;
}

/* バッジ（通知数） */
.ws-badge {
  display: inline-block;
  background: #c0392b;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  min-width: 18px;
  height: 18px;
  line-height: 18px;
  text-align: center;
  border-radius: 9px;
  padding: 0 5px;
  margin-left: 4px;
  vertical-align: middle;
}

/* テーブル */
.ws-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}

.ws-table th,
.ws-table td {
  padding: 10px 12px;
  text-align: left;
  border-bottom: 1px solid var(--line-gold);
}

.ws-table th {
  font-weight: 600;
  color: var(--text-muted);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.ws-table tr:hover {
  background: rgba(197, 165, 90, 0.04);
}

/* ステータスラベル */
.ws-status {
  display: inline-block;
  font-size: 0.8rem;
  padding: 2px 10px;
  border-radius: 12px;
  font-weight: 600;
}

.ws-status-assigned {
  background: #fef3cd;
  color: #856404;
}

.ws-status-fulfillment_prepared {
  background: #d1ecf1;
  color: #0c5460;
}

.ws-status-delivered {
  background: #d4edda;
  color: #155724;
}

.ws-status-session_done {
  background: #e2e3e5;
  color: #383d41;
}

/* 詳細カード */
.ws-detail-card {
  background: #fff;
  border: 1px solid var(--line-gold);
  border-radius: var(--radius);
  padding: 24px;
}

/* 定義リスト */
.ws-dl {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 8px 16px;
  font-size: 0.9rem;
}

.ws-dl dt {
  font-weight: 600;
  color: var(--text-muted);
}

.ws-dl dd {
  margin: 0;
}

/* 通知リスト */
.ws-notif-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.ws-notif-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line-gold);
  font-size: 0.9rem;
}

.ws-notif-item:last-child {
  border-bottom: none;
}

.ws-notif-unread {
  background: rgba(197, 165, 90, 0.08);
  font-weight: 600;
}

.ws-notif-msg {
  flex: 1;
}

.ws-notif-date {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-left: 16px;
  white-space: nowrap;
}

/* レスポンシブ */
@media (max-width: 600px) {
  .ws-tabs {
    flex-wrap: wrap;
  }

  .ws-tab {
    padding: 8px 14px;
    font-size: 0.85rem;
  }

  .ws-dl {
    grid-template-columns: 1fr;
    gap: 4px 0;
  }

  .ws-dl dt {
    margin-top: 8px;
  }

  .ws-table th,
  .ws-table td {
    padding: 8px;
    font-size: 0.82rem;
  }

  .ws-notif-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }

  .ws-notif-date {
    margin-left: 0;
  }
}

/* =========================
   画像スロット + フォールバック
========================= */
.img-slot {
  position: relative;
  width: 100%;
  height: 100%;
}

.img-slot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.img-fallback {
  display: none;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

/* --- fallback-mandala: 金色フラワーオブライフ --- */
.fallback-mandala {
  background: radial-gradient(circle, rgba(197, 165, 90, 0.15) 0%, rgba(250, 246, 239, 1) 70%);
}

.fallback-mandala svg {
  width: 80%;
  height: 80%;
}

/* --- fallback-mandala-alt: 虹色マンダラ --- */
.fallback-mandala-alt {
  background: radial-gradient(circle,
      rgba(200, 100, 100, 0.12) 0%,
      rgba(200, 180, 100, 0.10) 25%,
      rgba(100, 180, 200, 0.10) 50%,
      rgba(150, 100, 200, 0.10) 75%,
      rgba(250, 246, 239, 1) 100%);
}

.fallback-mandala-alt svg {
  width: 80%;
  height: 80%;
}

/* --- fallback-profile: 人物シルエット --- */
.fallback-profile {
  background: var(--surface);
  border-radius: var(--radius);
}

.fallback-profile svg {
  width: 60%;
  height: 60%;
  opacity: 0.4;
}

/* --- fallback-method-1x24: 中心＋24配置 --- */
.fallback-method-1x24 {
  background: radial-gradient(circle, var(--gold-bg-strong) 30%, var(--bg) 70%);
  border-radius: 50%;
}

.fallback-method-1x24 svg {
  width: 70%;
  height: 70%;
}

/* --- fallback-method-inyou: 陰陽サークル --- */
.fallback-method-inyou {
  background: var(--bg);
  border-radius: 50%;
}

.fallback-method-inyou svg {
  width: 70%;
  height: 70%;
}

/* --- fallback-method-pinnacle: 4段ステージ --- */
.fallback-method-pinnacle {
  background: linear-gradient(180deg, var(--gold-bg-strong) 0%, var(--bg) 100%);
  border-radius: 50%;
}

.fallback-method-pinnacle svg {
  width: 70%;
  height: 70%;
}

/* --- fallback-method-9year: 円形数字配置 --- */
.fallback-method-9year {
  background: var(--bg);
  border-radius: 50%;
}

.fallback-method-9year svg {
  width: 70%;
  height: 70%;
}

/* --- fallback-meditation: 座禅シルエット+光 --- */
.fallback-meditation {
  background: radial-gradient(ellipse at 50% 60%, rgba(197, 165, 90, 0.2) 0%, var(--bg) 70%);
  border-radius: var(--radius);
}

.fallback-meditation svg {
  width: 60%;
  height: 60%;
}

/* --- fallback-crystal: 光る球体 --- */
.fallback-crystal {
  background: radial-gradient(circle, rgba(180, 220, 255, 0.3) 0%, var(--bg) 60%);
  border-radius: var(--radius);
}

.fallback-crystal svg {
  width: 50%;
  height: 50%;
}

/* --- fallback-crowd: 人影群 --- */
.fallback-crowd {
  background: linear-gradient(180deg, var(--bg) 40%, var(--surface) 100%);
  border-radius: var(--radius);
}

.fallback-crowd svg {
  width: 80%;
  height: 60%;
  opacity: 0.4;
}

/* --- fallback-venn: 3円ベン図 --- */
.fallback-venn {
  background: var(--bg);
  border-radius: var(--radius);
}

.fallback-venn svg {
  width: 80%;
  height: 80%;
}

/* --- fallback-success: SUCCESSテキスト+朝日 --- */
.fallback-success {
  background: linear-gradient(180deg, rgba(255, 200, 50, 0.15) 0%, var(--bg) 60%);
  border-radius: var(--radius);
}

.fallback-success svg {
  width: 70%;
  height: 70%;
}

/* --- fallback-menu-chart: 小型マンダラ (200x200) --- */
.fallback-menu-chart {
  width: 200px;
  height: 200px;
  background: radial-gradient(circle, var(--gold-bg-strong) 20%, var(--bg) 80%);
  border-radius: var(--radius);
}

.fallback-menu-chart svg {
  width: 80%;
  height: 80%;
}

/* --- fallback-logo: フッターロゴ --- */
.fallback-logo {
  flex-direction: column;
  gap: 4px;
}

.fallback-logo .logo-text {
  font-family: var(--font-display);
  font-size: 18px;
  color: var(--gold);
  letter-spacing: 0.05em;
}

.fallback-logo .logo-sub {
  font-family: var(--font-serif);
  font-size: 12px;
  color: var(--text-muted);
  letter-spacing: 0.1em;
}

/* --- fallback-logo-small: 小型ロゴ --- */
.fallback-logo-small {
  width: 80px;
  height: 80px;
}

.fallback-logo-small svg {
  width: 100%;
  height: 100%;
}

/* フッターロゴ */
.footer-logo {
  text-align: center;
  margin-bottom: 0;
}

/* フッターロゴ: 画像サイズを調整したい場合は max-width の値を変更
   大きくする → 数値を増やす / 小さくする → 数値を減らす */
.footer-logo .img-slot {
  width: 130px;
  height: auto;
  margin: 0 auto;
}

.footer-logo .img-slot img {
  width: 100%;
  height: auto;
  object-fit: contain;
}

/* 鑑定結果ロゴ */
.result-logo {
  text-align: center;
  margin: 0 auto 12px;
}

.result-logo .img-slot {
  width: 80px;
  height: 80px;
  margin: 0 auto;
}

/* =========================
   セパレーター
========================= */
.section-divider {
  border: none;
  border-top: 1px solid var(--line-gold);
  margin: 48px 0;
}

/* =========================
   CTA（共通）
========================= */
.cta-section {
  text-align: center;
  padding: 56px 0;
  background: linear-gradient(180deg,
      transparent 0%,
      rgba(197, 165, 90, 0.06) 50%,
      transparent 100%);
}

.cta-text {
  font-family: var(--font-serif);
  font-size: clamp(16px, 2vw, 20px);
  color: var(--text-muted);
  margin: 0 0 24px;
  letter-spacing: 0.04em;
}

/* =========================
   レスポンシブ（サブページ用追加）
========================= */
@media (max-width: 860px) {

  /* 二列フラッシュレイアウトをスマホで縦積みに変換 */
  /* ← 分岐点を変えるには @media (max-width: 860px) の値を調整 */
  .feature-two-col {
    grid-template-columns: 1fr;
  }

  .feature-image-col {
    aspect-ratio: 4 / 3;
    /* ← スマホ時の画像縦横比調整ポイント */
    min-height: unset;
    /* ← デスクトップの min-height: 400px をリセット（aspect-ratioを正常に機能させるため） */
    width: 100%;
    /* ← コンテナを確実に全幅に固定 */
    order: -1;
    /* ← スマホ時: 画像を常に最上部に表示（その2・その4のようにHTMLでテキストが先の場合も上に来る） */
    /* ← テキストを先に表示したい場合は order: 0 または order: 1 に変更 */
  }

  /* スマホ時: 画像を中央揃えに修正 */
  /* ← object-position を変えると画像の表示位置を調整できる（center / left center / right center） */
  .feature-image-col img {
    object-position: center center;
    /* ← 画像の中央を表示（デスクトップのクロップ位置を明示的にリセット） */
  }

  .feature-text-col {
    padding: 32px 24px;
    /* ← スマホ時のテキスト余白調整ポイント */
  }

  /* スマホ時: その2・その4のテキスト（text-left クラス）を中央揃えに上書き */
  /* ← 左揃えに戻したい場合は text-align: left に変更 */
  .feature-text-col.text-left,
  .feature-text-col.text-left .feature-main-title,
  .feature-text-col.text-left .feature-subtitle {
    text-align: center;
  }
  /* .feature-list は display: table + margin: auto で中央配置済みのため除外 */
  /* ← text-align: left を維持することで行の開始位置が揃う */

  /* スマホ時: <br>を含む説明文は左端揃えで表示（行ごとの左端がずれて見えるのを防ぐ） */
  /* ← 中央揃えに戻したい場合は text-align: center に変更 */
  .feature-desc,
  .feature-text-col.text-left .feature-desc {
    text-align: left;
  }

  .feature-layout,
  .feature-layout.reverse,
  .method-layout,
  .method-layout.reverse {
    grid-template-columns: 1fr;
    direction: ltr;
    text-align: center;
  }

  /* ===== secret.html スマホ表示: <br>を含む文章を左端揃えにする =====
     微調整: text-align を center に変えると中央揃えに戻せる
     対象: .method-text（メソッド説明文の各段落）
  ===== */
  .method-text {
    text-align: left;
  }

  .feature-visual,
  .method-visual {
    order: -1;
  }

  .menu-card {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .menu-chart {
    margin: 0 auto;
  }

  .method-buttons {
    justify-content: center;
  }

  .feature-example {
    text-align: left;
  }
}

@media (max-width: 600px) {
  .form-row {
    grid-template-columns: 1fr;
  }

  .page-header {
    padding: 32px 0 24px;
  }

  /* =========================================================
     モバイル時：page-title 系クラス
     グローバルで通常フロー（position: static）に統一済みのため
     スマホ専用の上書きは不要。
     - 文字サイズ調整 → font-size の clamp() はグローバル側を編集
  ========================================================= */

  .page-body {
    padding: 32px 0 48px;
  }

  .feature-section {
    padding: 40px 0;
  }

  /* features.html: 4ボタンを2×2グリッドで表示 */
  /* ← 1行に戻したい場合は flex-wrap: nowrap に変更し flex: 1 に */
  /* 黄色い帯対策: padding-bottom を除去・背景画像を上揃えにして下部の装飾が見えないようにする */
  /* ← 下の余白を追加したい場合は padding-bottom を変更。背景位置は background-position で調整 */
  .features-button-bar {
    padding-bottom: 0;
    background-position: top center;
  }
  .features-button-bar .button-row-images {
    flex-wrap: wrap;
    gap: 8px;
    padding: 0 8px;
    margin-top: 0; /* デフォルトの margin-top: 32px を除去 */
  }

  .features-button-bar .button-row-images .btn-gold-img {
    min-width: 0;
    flex: 0 0 calc(50% - 4px);
    /* ← 2列並び。1列にするなら 100% */
    font-size: 0.78rem;
    padding: 16px 4px;
  }

  /* secret.html: 4ボタンを2×2グリッドで表示
     編集ポイント:
       - 1行に戻す → flex-wrap: nowrap に変更し flex: 1 に
       - 列数を変える → flex: 0 0 calc(XX% - gap) の XX を調整
       - 文字折り返しを許可 → white-space: normal に変更
       - ボタン間の隙間 → gap の値を変更 */
  /* 黄色い帯対策: padding-bottom を除去・背景画像を上揃えにして下部の装飾が見えないようにする */
  /* ← 下の余白を追加したい場合は padding-bottom を変更。背景位置は background-position で調整 */
  .method-section .buttons-bar-bg {
    padding-bottom: 0;
    background-position: top center;
  }
  .method-section .buttons-bar-bg .button-row-images {
    flex-wrap: wrap;
    gap: 8px;
    padding: 0 8px;
    margin-top: 0; /* デフォルトの margin-top: 32px を除去 */
  }

  .method-section .buttons-bar-bg .button-row-images .btn-gold-img {
    min-width: 0;
    flex: 0 0 calc(50% - 4px);
    /* ← 2列並び。1列にするなら 100% */
    font-size: 0.78rem;
    padding: 16px 4px;
    white-space: nowrap;
    /* ← テキスト1行表示。折り返し許可 → normal */
  }

  .method-section {
    padding: 40px 0;
  }

  .menu-chart {
    width: 160px;
    height: 160px;
  }

  /* ============================================================
     appraisal.html 鑑定カード画像（.menu-chart--large）の600px以下スマホ対応
     .menu-chart の固定 width: 160px を上書きして画像を大きく表示する

     【微調整ガイド】
     - 画像をさらに大きくする → max-width の数値を増やす（例: 400px, 100%）
     - 画像を小さくする       → max-width の数値を減らす（例: 300px, 280px）
     - 高さの比率がおかしい   → aspect-ratio の値を変更（1/1 = 正方形）
     ============================================================ */
  .menu-chart.menu-chart--large {
    width: 100%;        /* .menu-chart の固定 160px を解除 */
    height: auto;       /* 高さを自動（アスペクト比に従う）に戻す */
    max-width: 360px;   /* ← ここの数値を変えて画像サイズを微調整 */
    aspect-ratio: 1 / 1;
  }

  .login-box {
    padding: 28px 20px;
  }

  .notice-box {
    padding: 4px 8px 16px;
  }

  /* 編集ポイント: スマホでの箇条書き位置調整
     左マージンを 0 に戻して中央揃え。幅を広げて見切れを防ぐ。
     位置をさらに右に寄せたい → margin-left に値を指定
     幅を変えたい → width を編集 */
  .notice-box ul {
    margin: 0 auto;
    width: 85%;
  }

  /* 編集ポイント: スマホでの箇条書き文字サイズ
     文字を大きくしたい → font-size を大きく（例: 13px）
     小さくしたい → さらに小さく（例: 11px） */
  .notice-box li {
    font-size: 12px;
  }

  /* 編集ポイント: スマホでの各ボックスのリスト開始位置（上余白）調整
     背景画像内のタイトル位置に合わせて padding-top を調整する
     数値を大きくすると下に移動する */
  .request-intro-content .notice-box:first-child {
    padding-top: 80px; /* 変更前: 80px → 見出し画像との余白を広げる */
  }

  .request-intro-content .notice-box:last-child {
    padding-top: 0px; /* 編集ポイント: AppraisalConfirmラベルと箇条書きの上余白（数値を大きくすると下に移動） */
  }

  /* 編集ポイント: スマホでの支払い・注意事項エリアの余白調整 */
  .payment-cancel-bg {
    /* aspect-ratio: 1 により自動的に正方形になるため min-height は不要 */
    /* 編集ポイント: 余白を変える → padding を調整（vw 単位でサイズに比例） */
    padding: 6vw 16px;
    /* 編集ポイント: 背景サイズを変える → contain で円全体を正方形内に収める */
    background-size: contain;
    /* 編集ポイント: 横位置を中央に固定 */
    background-position: center center;
  }

  /* 編集ポイント: スマホでの見出し画像サイズ → max-width を調整 */
  .appraisal-section-heading {
    /* 編集ポイント: 幅を変える → vw 単位で画面幅に比例したサイズ */
    max-width: 55vw;
    margin-bottom: 8px;
  }

  /* 編集ポイント: スマホでの AppraisalMenu.png サイズ → max-width を調整 */
  .appraisal-menu-img {
    /* 編集ポイント: 幅を変える → vw 単位で調整（例: 32vw でさらに小さく） */
    max-width: 40vw;
  }

  /* スマホでのお支払方法見出し専用サイズ
     編集ポイント: max-width を調整して大きさを変える */
  .appraisal-pay-heading {
    max-width: 40vw; /* 編集ポイント: スマホでのお支払方法見出し幅（鑑定メニューに合わせて拡大） */
    margin-bottom: 6px;
  }

  .payment-section {
    /* 編集ポイント: padding-top を小さくするとラジオボタン等が上に移動 */
    /* 編集ポイント: padding-bottom を小さくすると ※注釈とキャンセル見出し画像の間隔が縮まる */
    padding: 4px 16px 2px;
    max-width: 100%;
  }

  .cancel-notice {
    max-width: 100%;
    /* 編集ポイント: padding-top を小さくすると ※注釈とキャンセル見出し画像の間隔が縮まる */
    padding: 0px 16px 8px;
  }

  /* 鑑定依頼ページ：スマホでのマンダラ背景高さ調整 */
  /* 高さを変更 → min-height を編集 */
  .request-header-bg {
    min-height: 360px;
    padding: 32px 16px 40px;
  }
}

/* =========================
   鑑定結果ページ（result-birthday.html / result-name.html）
========================= */

/* 生年月日 / 名前表示 */
.result-birthday-display {
  font-family: var(--font-serif);
  font-size: 16px;
  color: var(--text-muted);
  margin: 12px 0 0;
  text-align: center;
}

.result-selector-panel {
  background: linear-gradient(135deg, var(--gold-bg-strong), var(--gold-bg));
  border-bottom: 1px solid var(--line-gold);
  padding: 24px 0;
}

.result-selector-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.result-select {
  width: 80px;
  padding: 8px 12px;
  font-size: 14px;
  text-align: center;
}

/* 結果セクション共通 */
.result-section {
  padding: 8px 0;
}

.result-section h2 {
  font-family: var(--font-serif);
  font-size: clamp(20px, 2.5vw, 26px);
  font-weight: 600;
  color: var(--text);
  margin: 0 0 20px;
  text-align: center;
  letter-spacing: 0.04em;
}

/* ナンバーバッジ */
.result-number-badge {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--gold-light), var(--gold));
  color: #fff;
  font-family: var(--font-display);
  font-size: 36px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 24px;
  box-shadow: 0 4px 16px rgba(197, 165, 90, 0.3);
}

/* 結果詳細 */
.result-detail {
  max-width: 1000px;
  margin: 0 auto;
}

.result-detail-title {
  font-family: var(--font-serif);
  font-size: 18px;
  font-weight: 600;
  color: var(--gold-dark);
  margin: 0 0 12px;
  text-align: center;
}

.result-detail-theme {
  font-size: 15px;
  color: var(--text-muted);
  line-height: 2;
  margin: 0 0 24px;
  text-align: center; /* 。ごとに改行・中央寄せ */
}

.result-detail-meta {
  background: var(--gold-bg);
  border: 1px solid var(--line-gold);
  border-radius: var(--radius);
  padding: 20px 24px;
  margin: 0 0 20px;
}

.result-detail-meta dt {
  font-size: 13px;
  font-weight: 700;
  color: var(--gold-dark);
  margin: 0 0 4px;
}

.result-detail-meta dt:not(:first-child) {
  margin-top: 12px;
}

.result-detail-meta dd {
  font-size: 14px;
  color: var(--text-muted);
  margin: 0;
  line-height: 1.8;
}

.result-detail-cta {
  text-align: center;
  margin-top: 20px;
}

/* カテゴリカード（5つのナンバーの意味） */
.result-category-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 16px;
  margin-top: 16px;
}

.result-cat-card {
  padding: 20px 16px;
  background: var(--bg-white);
  border: 1px solid var(--line-gold);
  border-radius: var(--radius);
  text-align: center;
}

.result-cat-card h3 {
  font-family: var(--font-serif);
  font-size: 15px;
  font-weight: 600;
  color: var(--gold-dark);
  margin: 0 0 8px;
}

.result-cat-card p {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.7;
  margin: 0;
}

/* 画像そのものを中央配置（セル画像 .inyou-cell は除外して .inyou-chart-img を直接指定） */
.mandala-chart-container img,
.inyou-chart-img {
  display: block;
  margin: 0 auto;
}

.mandala-num {
  position: absolute;
  font-family: var(--font-serif);
  font-size: clamp(18px, 3.5vw, 28px);
  font-weight: 700;
  color: var(--gold-dark);
  transform: translate(-50%, -50%);
  pointer-events: none;
}

/* =====================================================
   各数字の位置調整ガイド:
   - top/left は画像コンテナに対する % 指定
   - transform: translate(-50%, -50%) で中心合わせ済み
   - 数字が右にズレ → left の値を小さく
   - 数字が下にズレ → top の値を小さく
   ===================================================== */

/* 中央: 本質 */
.mandala-num-hon {
  top: 50%;
  left: 50%;
}

/* 上: 現実 */
.mandala-num-gen {
  top: 22%;
  left: 50%;
}

/* 下: スピリット */
.mandala-num-spi {
  top: 78%;
  left: 50%;
}

/* 左: 土台 */
.page-result-birthday .mandala-num-dod {
  top: 50%;
  left: 22%;
}

.page-result-name .mandala-num-dod {
  top: 50%;
  left: 22%;
}

/* 右: 才能 */
.mandala-num-sai {
  top: 50%;
  left: 78%;
}

/* 右: 才能 */

/* 9年サイクル・陰陽バランスサークル: クリックリンク
   - カーソルを変更 → cursor を編集
   - ホバー時の透明度を変更 → opacity の値を編集 */
.inyou-chart-block-link {
  display: block;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition: opacity 0.2s;
}
.inyou-chart-block-link:hover {
  opacity: 0.8;
}
/* 陰陽バランスサークル見出しに下線を表示 */
.inyou-chart-block-link .inyou-heading {
  text-decoration: underline;
}
.personal-year-link {
  text-decoration: underline;
  color: inherit;
  cursor: pointer;
  transition: opacity 0.2s;
}
.personal-year-link:hover {
  opacity: 0.8;
}

/* 9年サイクル: セクション */
.personal-year-section {
  text-align: center;
  margin: 24px 0;
  padding: 8px 0;
}

.personal-year-title {
  font-family: var(--font-serif);
  font-size: clamp(14px, 2vw, 17px);
  font-weight: 600;
  color: var(--gold-dark);
  margin: 0 0 8px;
}

/* 9年サイクル: 5年タイムライン */
.cycle-years-row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0;
  margin-top: 4px;
}

.cycle-year-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 6px 10px;
  position: relative;
}

.cycle-year-item.cycle-year-current::before {
  content: "";
  position: absolute;
  inset: -20px -16px;

  background-image: url("./images/chart_9year_back.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 300%;

  z-index: 0;
}

.cycle-year-item.cycle-year-current>* {
  position: relative;
  z-index: 1;
}

.cycle-year-num {
  font-size: 22px;
  font-weight: 700;
  line-height: 1.2;
}

.cycle-year-label {
  font-size: 13px;
  color: var(--text-muted);
  margin-top: 2px;
}

.cycle-year-arrow {
  font-size: 14px;
  color: var(--gold);
  padding: 0 2px;
  align-self: center;
}

.inyou-cell {
  position: absolute;
  /* セルサイズ: 変更するにはこの値を調整 (% = コンテナ幅に対する比率) */
  width: 15%;
  height: auto;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

/* 3x3グリッド位置（テキストラベル分のオフセットを考慮） */
/* --- 微調整ガイド ---
   全体的に上下にずれる場合: 各 top 値を ±% で調整（+で下へ、-で上へ）
   全体的に左右にずれる場合: 各 left 値を ±% で調整（+で右へ、-で左へ）
   個別調整: 対象セル（r行-c列）のみ変更
   ------------------- */

/* =====================================================
   陰陽バランスサークル セル位置ガイド:
   - top/left は画像コンテナに対する % 指定
   - transform: translate(-50%, -50%) で中心合わせ済み
   - 縦線: vline-1=37%, vline-2=62%
   - 横線: hline-1=38%, hline-2=62%
   - 左列セルがずれる場合 → c0 の left を調整
   - 上段セルがずれる場合 → r0 の top を調整
   ===================================================== */

/* 3: 左上 */
.page-result-birthday .inyou-r0-c0 {
  top: 32%;
  left: 38%;
}

.page-result-name .inyou-r0-c0 {
  top: 32%;
  left: 38%;
}

/* 1: 中上 */
.page-result-birthday .inyou-r0-c1 {
  top: 25%;
  left: 55%;
}

.page-result-name .inyou-r0-c1 {
  top: 25%;
  left: 55%;
}

/* 2,11: 右上 */
.page-result-birthday .inyou-r0-c2 {
  top: 32%;
  left: 72%;
}

.page-result-name .inyou-r0-c2 {
  top: 32%;
  left: 72%;
}

/* 5: 左中 */
.page-result-birthday .inyou-r1-c0 {
  top: 50%;
  left: 30%;
}

.page-result-name .inyou-r1-c0 {
  top: 50%;
  left: 30%;
}

/* 6,33: 中央 */
.page-result-birthday .inyou-r1-c1 {
  top: 50%;
  left: 55%;
}

.page-result-name .inyou-r1-c1 {
  top: 50%;
  left: 55%;
}

/* 4,22: 右中 */
.page-result-birthday .inyou-r1-c2 {
  top: 50%;
  left: 80%;
}

.page-result-name .inyou-r1-c2 {
  top: 50%;
  left: 80%;
}

/* 8: 左下 */
.page-result-birthday .inyou-r2-c0 {
  top: 68%;
  left: 38%;
}

.page-result-name .inyou-r2-c0 {
  top: 68%;
  left: 38%;
}

/* 9: 中下 */
.page-result-birthday .inyou-r2-c1 {
  top: 75%;
  left: 55%;
}

.page-result-name .inyou-r2-c1 {
  top: 75%;
  left: 55%;
}

/* 7: 右下 */
.page-result-birthday .inyou-r2-c2 {
  top: 68%;
  left: 72%;
}

.page-result-name .inyou-r2-c2 {
  top: 68%;
  left: 72%;
}


/* チャートプレースホルダー（陰陽バランス等で使用） */
.chart-placeholder {
  width: 100%;
  max-width: 500px;
  aspect-ratio: 1;
  margin: 0 auto;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--surface), var(--surface2));
  border: 2px dashed var(--line-gold);
  display: flex;
  align-items: center;
  justify-content: center;
}

.chart-placeholder-small {
  max-width: 360px;
}

.chart-placeholder-inner {
  text-align: center;
  padding: 20px;
}

.chart-placeholder-text {
  font-family: var(--font-serif);
  font-size: 18px;
  color: var(--text-light);
  margin: 0 0 8px;
}

.chart-placeholder-note {
  font-size: 12px;
  color: var(--text-light);
  margin: 0 0 16px;
}

/* 9年サイクル */
.result-cycle-intro {
  max-width: 700px;
  margin: 0 auto 24px;
  text-align: center;
}

.result-cycle-intro p {
  font-size: 14px;
  color: var(--text-muted);
  line-height: 2;
}

.result-cycle-calc {
  background: var(--gold-bg);
  border: 1px solid var(--line-gold);
  border-radius: var(--radius);
  padding: 20px 24px;
  margin-top: 16px;
  text-align: left;
}

.result-cycle-calc h3 {
  font-family: var(--font-serif);
  font-size: 15px;
  font-weight: 600;
  color: var(--gold-dark);
  margin: 0 0 8px;
}

.result-cycle-calc p {
  font-size: 13px;
  white-space: pre-line;
}

/* 9年サイクル 運気アップのポイント */
.result-tips {
  margin-top: 16px;
}

.result-tips-title {
  font-family: var(--font-serif);
  font-size: 15px;
  font-weight: 600;
  color: var(--gold-dark);
  margin: 0 0 8px;
}

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

.result-tips-list li {
  font-size: 14px;
  color: var(--text-muted);
  line-height: 1.9;
  padding: 2px 0 2px 1.4em;
  position: relative;
}

.result-tips-list li::before {
  content: "✦";
  position: absolute;
  left: 0;
  color: var(--gold);
  font-size: 10px;
  top: 5px;
}

/* 陰陽バランス */
.inyou-detail {
  max-width: 700px;
  margin: 24px auto 0;
}

/* レスポンシブ（鑑定結果ページ） */
@media (max-width: 860px) {
  .result-chart-row {
    flex-direction: column;
    align-items: center;
  }

  .result-category-cards {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  }

  .cycle-year-item {
    padding: 4px 6px;
  }

  .cycle-year-num {
    font-size: 18px;
  }

  .cycle-year-label {
    font-size: 11px;
  }

  .cycle-year-arrow {
    font-size: 12px;
  }
}

@media (max-width: 600px) {
  .result-number-badge {
    width: 64px;
    height: 64px;
    font-size: 28px;
  }

  .chart-placeholder {
    aspect-ratio: auto;
    border-radius: var(--radius);
    padding: 32px 16px;
  }

  .chart-placeholder-small {
    max-width: 100%;
  }

  .result-category-cards {
    grid-template-columns: 1fr 1fr;
  }
}

/* =========================
   index.html 専用: ランディングフッター
   背景画像を変更 → url() 内のパスを変更
========================= */
.footer-landing {
  background-color: rgb(255, 205, 113);
  border-top: none;
}

.footer-landing .footer-inner {
  padding-top: 20px;
  padding-bottom: 20px;
  gap: 8px;
}

/* ランディングフッター: 個人鑑定プロモーション */
.footer-promo {
  text-align: center;
  margin-bottom: 8px;
}

.footer-promo-title {
  font-family: var(--font-serif);
  font-size: clamp(16px, 2vw, 20px);
  font-weight: 600;
  color: var(--text);
  margin: 0 0 12px;
}

.footer-promo-desc {
  font-size: clamp(13px, 1.6vw, 16px);
  color: var(--text);
  line-height: 2;
  margin: 0 0 20px;
}

.footer-promo-links {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.footer-promo-links a {
  font-size: clamp(14px, 1.6vw, 17px);
  color: var(--text);
  text-decoration: underline;
  transition: color 0.2s;
}

.footer-promo-links a:hover {
  color: var(--gold-dark);
}

/* ランディングフッター: ロゴ大きめ表示（現在はコメント化中） */
.footer-logo-landing .img-slot {
  width: auto;
  height: auto;
}

.footer-logo-landing .img-slot img {
  width: 150px;
  height: auto;
}

/* ランディングフッター: お問い合わせ */
.footer-contact {
  text-align: center;
  margin-bottom: 0;
}

.footer-contact-label {
  font-family: var(--font-serif);
  font-size: 20px;
  color: var(--text);
  margin: 0 0 0px;
}

.footer-contact-email {
  font-size: clamp(15px, 2vw, 25px);
  color: var(--text);
  margin: -5px;
}

/* ランディングフッター: 会社名 */
.footer-company {
  font-size: clamp(16px, 2vw, 30px);
  color: var(--text);
  text-decoration: underline;
  margin: 0 0 4px;
}

/* SNS画像ボタン（index.htmlフッター用） */
.footer-sns-images {
  display: flex;
  gap: 24px;
  justify-content: center;
  align-items: center;
  margin-top: 20px;
}

.footer-sns-images .img-button img {
  height: 48px;
  width: auto;
}

/* =========================
   ヒーロータイトル画像用
   タイトル画像を変更 → img の src を変更
   タイトル裏模様を変更 → .hero-title-bg の background-image を変更
========================= */
.hero-title-wrapper {
  position: relative;
  display: inline-block;
  margin: 0 auto;
}

.hero-title-bg {
  position: absolute;
  inset: -370px;
  background-image: url("./images/chart_mandala_back.png");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 0;
  pointer-events: none;
}

.hero-title-img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: auto;
}

@media (max-width: 600px) {
  .hero-title-img {
    max-width: 90vw;
  }

  .hero-title-bg {
    inset: -130px; /* マンダラ背景サイズ調整: 数値を大きくすると画像が大きくなる */
  }
}

/* =========================
   about.html: 背景画像セクション
   各背景画像を変更 → CSSの background-image を変更
========================= */

/* about.html: 全セクション共通（背景画像・面積統一） */
.philosophy-section.section-bg-image,
.about-section.section-bg-image,
.appraiser-section.section-bg-image,
.comparison-section.section-bg-image,
.methods-section.section-bg-image {
  background-image: url("./images/back_welcome-to-mandala.png");
  background-size: 100% auto;
  padding: 48px 0;
  min-height: 520px;
  display: flex;
  align-items: center;
}

/* about.html背景画像セクション共通レスポンシブ */
@media (max-width: 860px) {

  .philosophy-section.section-bg-image,
  .about-section.section-bg-image,
  .appraiser-section.section-bg-image,
  .comparison-section.section-bg-image,
  .methods-section.section-bg-image {
    min-height: 0;
    background-size: 100% auto;
    padding: 32px 0;
  }
}

/* =========================
   鑑定依頼ページ：タイトル色（他ページの見出しは金色のまま）
   - 色を変更 → color を編集
========================= */
.request-header-bg .request-page-title {
  color: #000000;
}

/* =========================
   鑑定依頼ページ：マンダラ背景エリア
   - 背景画像を変更 → background-image の url() を編集
   - 背景サイズを変更 → background-size を編集
     （contain=円全体表示 / cover=全面塗り / 数値%=任意サイズ）
   - 最小高さを変更 → min-height を編集
   - 上下余白を変更 → padding を編集
========================= */
.request-header-bg {
  background-image: url("./images/chart_kanteimenu_back.png"); /* 編集ポイント: 背景マンダラ画像 */
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-color: var(--bg); /* 編集ポイント: ヘッダー背景色 → #ffffff=白 / var(--bg)=クリーム */
  min-height: 520px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 48px 0 48px;
}

/* =========================
   鑑定依頼ページ：ヘッダー内のメニュー・注意書きエリア
   - 左揃えにするため text-align: left を指定（page-header の center を上書き）
   - 幅を絞って中央寄せするため max-width / margin: auto を使用
   - 上余白を変更 → margin-top を編集
   - 幅を変更 → max-width を編集
========================= */
.request-intro-content {
  text-align: left;
  max-width: 600px;
  margin: 24px auto 0;
  width: 100%;
}

/* .payment-section-bg は .payment-cancel-bg に統合済み（後方互換のため残存） */
/* 編集ポイント: 背景画像を変える → URL を差し替え（現在: AppraisalMark.png） */
.payment-section-bg {
  background-image: url("./images/AppraisalMark.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* =========================
   鑑定メニュー: 追加スタイル
   メニューホイール画像を変更 → img の src を変更
   プレミアムセッション背景を変更 → background-image を変更
========================= */
.menu-wheel-image {
  max-width: min(500px, 80vw);
  width: 100%;
  margin: 0 auto 40px;
  display: block;
}

.premium-session-bg {
  background-image: url("./images/chart_kanteimenu_back.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
}

.session-heading-bg {
  display: inline-block;
  background-image: url("./images/chart_kantei-txt_back.png");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  padding: 12px 40px;
}

/* =========================
   certified.html: ログインページ背景色
   背景色を変更 → background の値を変更
========================= */
.login-section-gold {
  background: linear-gradient(135deg, #f5d76e, #d4a017);
}

/* =========================
   ゴールドグラデーションボタン（index.html「鑑定する」ボタンと同スタイル）

   【編集ガイド】
   - グラデーション色  → background の var(--gold) / var(--gold-dark) を変更
   - 文字色           → color を変更（#fff = 白）
   - 角丸             → border-radius を変更（999px = 完全な丸角）
   - 余白             → padding を変更
   - 最小幅           → min-width を変更
   - 文字間隔         → letter-spacing を変更
   - ホバー時の影     → :hover の box-shadow を変更
   - ホバー時の浮き   → :hover の translateY() の値を変更（大きいほど上に浮く）
========================= */
.btn-gold-img {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--gold), var(--gold-dark));
  border: 1px solid var(--gold);
  border-radius: 999px;
  color: #fff;
  font-weight: 600;
  font-size: 16px;
  text-align: center;
  text-decoration: none;
  padding: 14px 40px;
  min-width: 200px;
  letter-spacing: 0.05em;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s ease;
}

.btn-gold-img:hover {
  background: linear-gradient(135deg, var(--gold-dark), #6b5020);
  color: #fff;
  box-shadow: 0 6px 24px rgba(197, 165, 90, 0.3);
  transform: translateY(-1px);
  text-decoration: none;
}

/* =========================
   鑑定メニューヒーロー（appraisal.html）
   曼荼羅画像を背景に、3つのリンク項目を中央縦並びで表示

   【編集ガイド】
   - 曼荼羅の最大幅       : .kanteimenu-hero の max-width を変更
   - 項目間の余白         : .kanteimenu-hero-items の gap を変更
   - タイトル文字サイズ   : .kanteimenu-hero-title の font-size を変更
   - 副タイトル文字サイズ : .kanteimenu-hero-sub の font-size を変更
   - ホバー時の透明度     : .kanteimenu-hero-item:hover の opacity を変更
========================= */
.kanteimenu-hero {
  position: relative;
  width: 100%;
  max-width: 600px;
  margin: 0 auto 48px;
}

.kanteimenu-hero-mandala {
  width: 100%;
  height: auto;
  display: block;
}

/* タイトル＋ナビ項目を曼荼羅全体に重ねるオーバーレイ
   - 縦方向の余白: padding-top / padding-bottom で調整
   - 全体の横幅 : width で調整 */
.kanteimenu-hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-evenly;
  padding: 12% 12%;
  box-sizing: border-box;
}

/* 曼荼羅内のページタイトル（h1）
   - 文字サイズ: font-size で調整 */
.kanteimenu-hero-heading {
  font-family: var(--font-serif);
  font-size: clamp(18px, 3vw, 30px);
  font-weight: 700;
  color: var(--text);
  text-align: center;
  letter-spacing: 0.05em;
  margin: 0;
}

/* ナビ項目コンテナ
   - 項目間の余白: gap で調整（PC用） */
.kanteimenu-hero-items {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px; /* 項目間の間隔 PC用 ← ここを変更して微調整 */
  text-align: center;
  width: 80%;
}

.kanteimenu-hero-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  text-decoration: none;
  color: var(--text);
  transition: opacity 0.2s;
}

.kanteimenu-hero-item:hover {
  opacity: 0.65;
}

/* メニュー項目タイトル（主テキスト）
   - 文字サイズ: font-size で調整（PC用）
   - 例: 1.1rem → 1.3rem で大きく、1.0rem で小さく */
.kanteimenu-hero-title {
  font-size: 1.3rem; /* タイトル文字サイズ PC用 ← ここを変更して微調整 */
  font-weight: 700;
  line-height: 1.5;
}

/* メニュー項目サブテキスト（副題）
   - 文字サイズ: font-size で調整（PC用）
   - 例: 0.9rem → 1.05rem で大きく、0.85rem で小さく */
.kanteimenu-hero-sub {
  font-size: 1.3rem; /* サブテキスト文字サイズ PC用 ← ここを変更して微調整 */
  font-weight: 700;
  line-height: 1.5;
}

@media (max-width: 480px) {
  .kanteimenu-hero-heading {
    font-size: clamp(14px, 4vw, 20px);
  }

  /* スマホ用タイトル文字サイズ ← ここを変更して微調整 */
  /* 0.6rem → 0.9rem に拡大（曼荼羅内に収まる範囲で視認性向上） */
  .kanteimenu-hero-title {
    font-size: 0.9rem; /* スマホ用タイトル文字サイズ（PC用の .kanteimenu-hero-title より小さめ推奨） */
  }

  /* スマホ用サブテキスト文字サイズ ← ここを変更して微調整 */
  /* 0.5rem → 0.75rem に拡大（曼荼羅内に収まる範囲で視認性向上） */
  .kanteimenu-hero-sub {
    font-size: 0.75rem; /* スマホ用サブテキスト文字サイズ */
  }

  /* スマホ用項目間の間隔 ← ここを変更して微調整 */
  .kanteimenu-hero-items {
    gap: 22px; /* 項目間の間隔 スマホ用 */
  }
}

/* =========================
   鑑定メニューホイール
   曼荼羅を中央に、5つの水彩ラベルを円形配置
========================= */
.kanteimenu-wheel {
  position: relative;
  width: 100%;
  max-width: 480px;
  margin: 32px auto;
  aspect-ratio: 1;
}

.kanteimenu-mandala {
  position: absolute;
  width: 55%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.kanteimenu-item {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28%;
  transform: translate(-50%, -50%);
  text-decoration: none;
  transition: transform 0.2s;
}

.kanteimenu-item:hover {
  transform: translate(-50%, -50%) scale(1.08);
}

.kanteimenu-blob {
  width: 100%;
  height: auto;
  display: block;
}

.kanteimenu-item span {
  position: absolute;
  z-index: 1;
  font-weight: 700;
  font-size: clamp(0.7rem, 2.2vw, 0.95rem);
  color: #333;
  white-space: nowrap;
}

/* 5点の円形配置 */
.kanteimenu-pos-1 {
  top: 5%;
  left: 50%;
}

.kanteimenu-pos-2 {
  top: 35%;
  left: 92%;
}

.kanteimenu-pos-3 {
  top: 85%;
  left: 76%;
}

.kanteimenu-pos-4 {
  top: 85%;
  left: 24%;
}

.kanteimenu-pos-5 {
  top: 35%;
  left: 8%;
}

@media (max-width: 480px) {
  .kanteimenu-item {
    width: 32%;
  }

  .kanteimenu-item span {
    font-size: 0.7rem;
  }
}

/* =========================
   result-birthday.html: 数の秘密セクション
========================= */
.result-intro-subtitle {
  font-family: var(--font-serif);
  font-size: clamp(16px, 2vw, 20px);
  color: var(--gold-dark);
  text-align: center;
  margin-bottom: 24px;
}

.result-number-descriptions {
  text-align: center;
  max-width: 700px;
  margin: 0 auto 32px;
}

.result-number-descriptions p {
  font-size: 14px;
  line-height: 2.0;
  margin: 0 0 12px;
  color: var(--text);
}

.result-number-descriptions strong {
  font-family: var(--font-serif);
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
}

/* 5つのナンバー説明: グリッドで左端を揃える
   - ラベル列の幅を変更 → grid-template-columns の 1列目(em)を編集
   - 行間を変更 → row-gap を編集
   - 列間を変更 → column-gap を編集 */
.result-number-list {
  display: grid;
  grid-template-columns: 5.5em 1fr;
  row-gap: 10px;
  column-gap: 8px;
  margin: 0 auto 12px;
  max-width: 600px;
  text-align: left;
  list-style: none;
  padding: 0;
}
.result-number-list dt {
  font-family: var(--font-serif);
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  align-self: start;
}
.result-number-list dd {
  font-size: 13px;
  line-height: 1.8;
  color: var(--text);
  margin: 0;
}

/* =========================
   about.html: テキストコンテンツ表示用
========================= */
.section-text-content {
  text-align: center;
  margin-bottom: 24px;
}

.section-text-content h2 {
  font-family: var(--font-serif);
  font-size: clamp(20px, 3vw, 28px);
  color: var(--text);
  margin-bottom: 16px;
}

.section-text-content p {
  font-size: 15px;
  line-height: 2.0;
  color: var(--text);
  margin-bottom: 8px;
  
}

/* 哲学セクション: ボタン4つを横並び */
.philosophy-section .button-row {
  flex-wrap: nowrap;
}

.philosophy-section .btn-gold-img {
  min-width: 0;
  flex: 1;
}

/* 哲学セクション: タイトル画像 */
.philosophy-title-img {
  max-width: min(500px, 80vw);
  margin: 0 auto 24px;
}

/* 曼荼羅数秘術とはセクション: テキスト左+画像右 2カラム */
.about-two-col {
  display: flex;
  gap: 32px;
  align-items: center;
  margin-top: 24px;
}

.about-two-col-text {
  flex: 1;
  text-align: center;
}

.about-two-col-text p {
  font-size: 15px;
  line-height: 2.0;
  color: var(--text);
  margin-bottom: 8px;
}

/* 画像サイズ: 大きくしたい場合は min() の第1引数(px)を増やす */
.about-two-col-image {
  flex-shrink: 0;
  width: min(480px, 50vw);
}

.about-two-col-image img {
  width: 100%;
  border-radius: 8px;
}

/* aboutセクション: ボタン4つを横並び（哲学セクションと同様）
   ボタン幅を均等にしたい場合は flex: 1 を調整 */
.about-section .button-row {
  flex-wrap: nowrap;
}

.about-section .btn-gold-img {
  min-width: 0;
  flex: 1;
}

/* 鑑定例・比較表・メソッドセクション: ボタン4つを横並び（哲学セクションと同様）
   ボタン幅を均等にしたい場合は flex: 1 を調整 */
.appraiser-section .button-row,
.comparison-section .button-row,
.methods-section .button-row {
  flex-wrap: nowrap;
}

.appraiser-section .btn-gold-img,
.comparison-section .btn-gold-img,
.methods-section .btn-gold-img {
  min-width: 0;
  flex: 1;
}

/* 鑑定例セクション: 画像+テキスト2カラム */
.example-layout {
  display: flex;
  gap: 24px;
  align-items: flex-start;
  text-align: left;
}

/* 画像ブロック: タイトルと画像を縦並びにするラッパー */
/* タイトルの文字揃えを変更 → text-align を調整 */
.example-image-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.example-image-block .section-title {
  margin: 0;
  white-space: nowrap;
}

.example-layout img {
  width: min(360px, 45vw);
  border-radius: 8px;
}

.example-layout .example-text {
  flex: 1;
}

.example-layout .example-text h3 {
  margin: 0 0 4px;
}

.example-layout .example-text p {
  font-size: 14px;
  line-height: 1.6;
  margin-bottom: 4px;
}

/* メソッド画像グリッド */
/* gap: 画像間の余白 / max-width: 画像の最大幅（大きくするとここを増やす） */
.methods-image-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 24px;
  text-align: center;
  /* align-items: start にすることで全figureを上揃えにし、キャプション位置を統一 */
  align-items: start;
}

.methods-image-grid figure {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.methods-image-grid img {
  width: 100%;
  max-width: 300px;
  /* height: 画像の縦サイズ統一（変更したい場合はここの数値を調整） */
  height: 260px;
  /* object-fit: cover でトリミング表示 / contain でトリミングなし */
  object-fit: contain;
  border-radius: 8px;
}

.methods-image-grid figcaption {
  font-size: 13px;
  color: var(--text);
  margin-top: 8px;
}

@media (max-width: 860px) {
  .about-two-col {
    flex-direction: column;
  }

  /* モバイル時の画像サイズ: 大きくしたい場合は min() の第1引数(px)を増やす */
  .about-two-col-image {
    width: min(380px, 80vw);
    margin: 0 auto;
  }

  /* モバイル時はボタンを2×2グリッドに並べる
     微調整: calc(50% - Xpx) の X を変更すると列間の余白が変わる（X = gap/2）
     列数を変えたい場合は % 値を変更（例: 100% で縦1列、33% で3列） */
  .philosophy-section .button-row,
  .about-section .button-row,
  .appraiser-section .button-row,
  .comparison-section .button-row,
  .methods-section .button-row {
    flex-wrap: wrap;
  }

  .philosophy-section .btn-gold-img,
  .about-section .btn-gold-img,
  .appraiser-section .btn-gold-img,
  .comparison-section .btn-gold-img,
  .methods-section .btn-gold-img {
    flex: 1 1 calc(50% - 6px);
    max-width: calc(50% - 6px);
  }

  .example-layout {
    flex-direction: column;
    align-items: center;
  }

  .methods-image-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* -------------------------------------------------------
     about.html: スマホ時テキスト左揃え
     - 中央に戻したい場合は text-align: center に変更
     - 特定セクションだけ中央に戻す場合は該当クラスだけ center に変更
  ------------------------------------------------------- */
  /* 哲学・メソッドセクションの本文テキストを左揃えに */
  .section-text-content {
    text-align: left;
  }

  /* 「曼荼羅数秘術とは」セクションのテキスト列を左揃えに
     - nowrap 解除: スマホでは <br> タグ＋自然折り返し併用。PC の white-space: nowrap を上書き
       → 折り返しを戻したい場合は white-space: nowrap に変更 */
  .about-two-col-text {
    text-align: left;
  }


  /* 比較表上部の説明文を左揃えに */
  .comparison-desc {
    text-align: left;
  }
}

/* =========================================================
   9年サイクルページ（nine-year-cycle.html）専用
   このブロック内のみ編集すること
========================================================= */

/* 2カラムレイアウト 共通
   - カラム間の余白を変更 → gap を編集
   - 縦の揃え方を変更 → align-items を編集（flex-start / center / stretch） */
.nine-year-two-col {
  display: flex;
  gap: 32px;
  align-items: flex-start;
}

/* テキストカラム
   - 左揃えを中央にしたい場合 → text-align: center に変更 */
.nine-year-two-col-text {
  flex: 1;
  text-align: left;
}

/* テキスト段落
   - 文字サイズを変更 → font-size を編集
   - 行間を変更 → line-height を編集
   - 段落間の余白を変更 → margin-bottom を編集 */
.nine-year-two-col-text p {
  font-size: 17px;
  line-height: 2.0;
  color: var(--text);
  margin-bottom: 8px;
}

/* セクションラッパー
   - 上下余白を変更 → padding を編集 */
.nine-year-overview-section {
  padding: 48px 0;
}

/* セクション見出し（2カラムの上に一括表示）
   - 文字サイズを変更 → font-size を編集（現在は section-title 基準を継承）
   - 下余白を変更 → margin-bottom を編集
   - 文字色を変更 → color の値を編集 */
.nine-year-overview-title,
.page-body .nine-year-overview-title {
  text-align: center;
  color: #CDA055;
}

/* テキストカラム: 全体解説セクション専用の上余白
   - 下げ量を変更 → padding-top の数値を編集（大きくするほど下に下がる） */
.nine-year-overview-section .nine-year-two-col-text {
  padding-top: 85px;
}

/* 画像カラム（地球の円形図）
   - PC表示の幅を変更 → min() の第1引数(px)を編集（大きくしたい場合は数値を増やす）
   - vw上限を変更 → min() の第2引数(vw)を編集（親幅に対する割合）
   - 画像の角丸を変更 → border-radius を編集（0 で角丸なし） */
.nine-year-overview-section .nine-year-two-col-image {
  flex-shrink: 0;
  width: min(400px, 45vw);
}

.nine-year-overview-section .nine-year-two-col-image img {
  width: 100%;
  border-radius: 0;
}

/* ボタン行: 3つを横並び均等幅
   - ボタン幅を変更 → flex の数値を調整
   - ボタン上余白を変更 → margin-top を編集 */
.nine-year-overview-section .button-row {
  margin-top: 32px;
  flex-wrap: nowrap;
}

.nine-year-overview-section .btn-gold-img {
  min-width: 0;
  flex: 1;
}

/* レスポンシブ: スマホ表示（860px以下）
   - ブレークポイントを変更 → max-width の数値を編集 */
@media (max-width: 860px) {
  .nine-year-overview-section {
    padding: 32px 0;
  }

  /* モバイル: 2カラムを縦積みに切り替え */
  .nine-year-two-col {
    flex-direction: column;
  }

  /* モバイル: 画像を中央寄せ
     左寄せにしたい場合 → margin: 0 に変更 */
  .nine-year-two-col-image {
    margin: 0 auto;
  }

  /* モバイル: 画像サイズ
     幅を変更 → min() の第1引数(px)を編集 */
  .nine-year-overview-section .nine-year-two-col-image {
    width: min(300px, 80vw);
  }

  /* モバイル: ボタンを横1列に固定
     2×2グリッドに戻したい場合 → flex-wrap: wrap; flex: 1 1 calc(50% - 6px); max-width: calc(50% - 6px); に変更
     ボタン文字サイズ調整 → font-size を変更
     ボタン縦幅調整 → padding-top/bottom を変更
     ボタン間の隙間 → gap を変更 */
  .nine-year-overview-section .button-row {
    flex-wrap: nowrap;
    gap: 6px;
  }

  .nine-year-overview-section .btn-gold-img {
    flex: 1 1 0;
    min-width: 0;
    max-width: none;
    font-size: 0.68rem;
    padding: 12px 3px;
    letter-spacing: -0.02em;
  }
}

/* =========================================================
   9年サイクルページ: パーソナルイヤー各解説セクション 共通
   このブロック内のみ編集すること
========================================================= */

/* セクションラッパー
   - 上下余白を変更 → padding を編集
   - 線の色を変更 → border-top の色コードを編集
   - 線の太さを変更 → border-top の第1引数(px)を編集 */
.nine-year-personal-year-section {
  padding: 48px 0;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
}

/* セクション見出し
   - 文字サイズを変更 → font-size を編集（section-title の clamp を継承）
   - 下余白を変更 → margin-bottom を編集
   - 文字色を変更 → color の値を編集 */
.nine-year-personal-year-title,
.page-body .nine-year-personal-year-title {
  text-align: center;
  color: #CDA055;
}

/* 縦並びレイアウト（画像上・テキスト下）
   - 2カラムに戻したい場合 → flex-direction を row に変更
   - 画像とタイトルの間隔を変更 → gap を編集（現在8px） */
.nine-year-personal-year-section .nine-year-two-col {
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

/* テキストカラム: 中央揃え・全幅
   - 左揃えに戻したい場合 → text-align を left に変更 */
.nine-year-personal-year-section .nine-year-two-col-text {
  text-align: center;
  width: 100%;
}

/* 本文段落: 中央揃えを継承
   - 行間を変更 → line-height を編集 */
.nine-year-personal-year-section .nine-year-two-col-text p {
  text-align: center;
}

/* 画像（パーソナルイヤー番号画像）: 上部中央配置
   - 画像サイズを変更 → min() の第1引数(px)を編集 */
.nine-year-personal-year-section .nine-year-two-col-image {
  width: min(50px, 30vw);
  margin-bottom: 0px;
}

.nine-year-personal-year-section .nine-year-two-col-image img {
  width: 100%;
  border-radius: 8px;
}

/* 運気アップのポイント: 左寄せ・背景画像あり
   - ブロック幅はコンテンツに合わせて自動（inline-block）
   - padding を増減するとブロックサイズ＝背景画像サイズが変わる
     上下を大きくしたい → padding の第1引数を増やす（現在 24px）
     左右を大きくしたい → padding の第2引数を増やす（現在 48px）
   - max-width: 100% でコンテナ幅を超えないように制限（崩れ防止） */
.nine-year-personal-year-section .nine-year-point-block {
  display: block;
  width: fit-content;
  max-width: 100%;        /* コンテナ幅を超えるはみ出しを防止 */
  box-sizing: border-box; /* paddingを幅に含めてoverflow防止 */
  text-align: left;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
  padding: 24px 48px;
}

/* ================================================================
   運気アップのポイント: セクションごとの背景画像
   - 画像を変更したいセクションの background-image の url() を書き換える
   ================================================================ */
#personal-year-1 .nine-year-point-block {
  background-image: url(./images/chart_luck-up_red.png);
}

#personal-year-2 .nine-year-point-block {
  background-image: url(./images/chart_luck-up_orange.png);
}

#personal-year-11 .nine-year-point-block {
  background-image: url(./images/chart_luck-up_gray.png);
}

#personal-year-3 .nine-year-point-block {
  background-image: url(./images/chart_luck-up_yellow.png);
}

#personal-year-4 .nine-year-point-block {
  background-image: url(./images/chart_luck-up_green.png);
}

#personal-year-22 .nine-year-point-block {
  background-image: url(./images/chart_luck-up_light-yellow.png);
}

#personal-year-5 .nine-year-point-block {
  background-image: url(./images/chart_luck-up_light-blue.png);
}

#personal-year-6 .nine-year-point-block {
  background-image: url(./images/chart_luck-up_pink.png);
}

#personal-year-33 .nine-year-point-block {
  background-image: url(./images/chart_luck-up_light-pink.png);
}

#personal-year-7 .nine-year-point-block {
  background-image: url(./images/chart_luck-up_blue.png);
}

#personal-year-8 .nine-year-point-block {
  background-image: url(./images/chart_luck-up_yellow_b.png);
}

#personal-year-9 .nine-year-point-block {
  background-image: url(./images/chart_luck-up_purple.png);
}

/* 見出し・リスト項目の左揃えを強制（.nine-year-two-col-text p の中央揃えを上書き） */
.nine-year-personal-year-section .nine-year-point-block p,
.nine-year-personal-year-section .nine-year-point-block li {
  text-align: left;
}

/* 運気アップのポイント ブロック全体
   - 上余白を変更 → margin-top を編集
   - 背景色を変えたい場合 → background と padding を追加 */
.nine-year-point-block {
  margin-top: 24px;
}

/* 「運気アップのポイント」見出し
   - 文字色を変更 → color を編集（現在: ゴールドダーク）
   - 文字サイズを変更 → font-size を編集
   - 下余白を変更 → margin-bottom を編集 */
.nine-year-point-heading {
  font-family: var(--font-serif);
  font-size: 15px;
  font-weight: 600;
  color: var(--gold-dark);
  margin: 0 0 10px;
}

/* 運気アップのポイント リスト
   - リスト全体の左インデントを変更 → padding-left を編集
   - 項目間の余白を変更 → gap を編集 */
.nine-year-point-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* リスト各項目
   - バレットのゴールド菱形（✦）を変更 → ::before の content を編集
   - バレット色を変更 → ::before の color を編集
   - 文字サイズを変更 → font-size を編集 */
.nine-year-point-list li {
  font-size: 15px;
  line-height: 1.8;
  color: var(--text);
  padding-left: 1.4em;
  position: relative;
}

.nine-year-point-list li::before {
  content: "✦";
  position: absolute;
  left: 0;
  color: var(--gold);
  font-size: 10px;
  top: 0.45em;
}

/* ボタン行: overviewと同じスタイル
   - ボタン上余白を変更 → margin-top を編集 */
.nine-year-personal-year-section .button-row {
  margin-top: 32px;
  flex-wrap: nowrap;
}

.nine-year-personal-year-section .btn-gold-img {
  min-width: 0;
  flex: 1;
}

/* レスポンシブ: スマホ表示（860px以下）
   - ブレークポイントを変更 → max-width の数値を編集 */
@media (max-width: 860px) {
  .nine-year-personal-year-section {
    padding: 32px 0;
  }

  /* モバイル: 画像サイズ
     幅を変更 → min() の第1引数(px)を編集 */
  .nine-year-personal-year-section .nine-year-two-col-image {
    width: min(100px, 30vw);
  }

  /* モバイル: ボタンを横1列に固定
     2×2グリッドに戻したい場合 → flex-wrap: wrap; flex: 1 1 calc(50% - 6px); max-width: calc(50% - 6px); に変更
     ボタン文字サイズ調整 → .nine-year-personal-year-section .btn-gold-img の font-size を変更
     ボタン縦幅調整 → padding-top/bottom を変更
     ボタン間の隙間 → .button-row の gap を変更 */
  .nine-year-personal-year-section .button-row {
    flex-wrap: nowrap;
    gap: 6px;
  }

  .nine-year-personal-year-section .btn-gold-img {
    flex: 1 1 0;
    min-width: 0;
    max-width: none;
    font-size: 0.68rem;
    padding: 12px 3px;
    letter-spacing: -0.02em;
  }

  /* モバイル: テキストカラム・本文段落を左揃えに変更
     中央揃えに戻したい場合 → text-align: center に変更 */
  .nine-year-personal-year-section .nine-year-two-col-text,
  .nine-year-personal-year-section .nine-year-two-col-text p {
    text-align: left;
  }

  /* モバイル: セクション見出しを全幅・中央揃えに固定
     左揃えに戻したい場合 → text-align: left に変更
     幅を変えたい場合 → width の値を編集 */
  .nine-year-personal-year-section .nine-year-personal-year-title {
    width: 100%;
    text-align: center;
  }
}

/* モバイルのみ表示する改行（PCでは非表示）
   スマホで「９年サイクル」と「（パーソナルイヤーナンバー）」を2行に分割するために使用
   PC表示に戻したい場合 → display: none を削除 */
.sp-only {
  display: none;
}

@media (max-width: 860px) {
  .sp-only {
    display: inline;
  }
}

/* =========================================================
   鑑定結果ページ 共通
========================================================= */
.result-chart-row {
  display: flex;
  gap: 32px;
  align-items: flex-start;
  justify-content: center;
  flex-wrap: nowrap;
}

.result-chart-left,
.result-chart-right {
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

/* =========================================================
   名前鑑定結果ページ 専用
========================================================= */
.page-result-name .mandala-chart-block,
.page-result-name .inyou-chart-block {
  width: min(400px, 45vw);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}

.page-result-name .mandala-chart-container,
.page-result-name .inyou-chart-container {
  width: 100%;
  max-width: 400px;
  margin: 0 auto;
  position: relative;
}

.page-result-name .mandala-heading {
  width: 100%;
  font-family: var(--font-serif);
  font-size: clamp(16px, 2vw, 20px);
  font-weight: 600;
  color: var(--gold-dark);
  margin: 14px 0 0;
  text-align: center;
}

.page-result-name .inyou-heading {
  width: 100%;
  font-family: var(--font-serif);
  font-size: clamp(16px, 2vw, 20px);
  font-weight: 600;
  color: var(--gold-dark);
  margin: 40px 0 0;
  text-align: center;
}

/* =========================================================
   生年月日鑑定結果ページ 専用
========================================================= */
.page-result-birthday .result-chart-left,
.page-result-birthday .result-chart-right {
  width: min(400px, 45vw);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.page-result-birthday .mandala-chart-container,
.page-result-birthday .inyou-chart-container {
  width: 100%;
  max-width: 400px;
  height: auto;
  /* 編集: 画像の高さに自動追従。固定したい場合は px 指定に変更 */
  margin: 0 auto;
  position: relative;
}

.page-result-birthday .mandala-chart-img,
.page-result-birthday .inyou-chart-img {
  width: 100%;
  /* コンテナ幅いっぱいに拡大して数字の % 位置を正確に合わせる */
  height: auto;
  /* アスペクト比を保持 */
  display: block;
}


/* ========================================
   陰陽バランスサークル オーバーレイ
   (点線グリッド + テキストラベル)
   ----------------------------------------
   【編集ガイド】
   - 縦線の位置を変更 → .inyou-vline-1 / .inyou-vline-2 の left を編集
   - 横線の位置を変更 → .inyou-hline-1 / .inyou-hline-2 の top を編集
   - 縦線の縦範囲を変更 → .inyou-vline の top / bottom を編集
   - 横線の横範囲を変更 → .inyou-hline の left / right を編集
   - 点線の色・太さ → border-left / border-top の値を編集
   - 列ラベルの縦位置 → .inyou-col-label の top を編集
   - 列ラベルの横位置 → .inyou-col-0 / .inyou-col-1 / .inyou-col-2 の left を編集
   - 行ラベルの横位置 → .inyou-row-label の left を編集
   - 行ラベルの縦位置 → .inyou-row-0 / .inyou-row-1 / .inyou-row-2 の top を編集
   - フォントサイズ → .inyou-col-label / .inyou-row-label の font-size を編集
   ======================================== */
.inyou-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* 縦点線 (列の境界線) */
.inyou-vline {
  position: absolute;
  top: 1%;
  bottom: 1%;
  width: 0;
  border-left: 2.5px dashed #888;
}
.inyou-vline-1 { left: 37%; }
.inyou-vline-2 { left: 61%; }

/* 横点線 (行の境界線) */
.inyou-hline {
  position: absolute;
  left: 1%;
  right: 15%;
  height: 0;
  border-top: 2.5px dashed #888;
}
.inyou-hline-1 { top: 38%; }
.inyou-hline-2 { top: 60%; }

/* 列ラベル (上部: 各列の中央上) */
.inyou-col-label {
  position: absolute;
  top: 1%;
  font-size: clamp(8px, 2.5vw, 12px);
  font-weight: bold;
  color: #333;
  transform: translateX(-50%);
  white-space: nowrap;
  letter-spacing: 0.02em;
}
.inyou-col-0 { left: 27%; }
.inyou-col-1 { left: 50%; }
.inyou-col-2 { left: 71%; }

/* 行ラベル (左側: 各行の垂直中央) */
.inyou-row-label {
  position: absolute;
  left: 1%;
  font-size: clamp(8px, 2.5vw, 12px);
  font-weight: bold;
  color: #333;
  transform: translateY(-50%);
  white-space: nowrap;
  letter-spacing: 0.02em;
}
.inyou-row-0 { top: 33%; }
.inyou-row-1 { top: 50%; }
.inyou-row-2 { top: 68%; }

.page-result-birthday .mandala-heading {
  width: 100%;
  font-family: var(--font-serif);
  font-size: clamp(16px, 2vw, 20px);
  font-weight: 600;
  color: var(--gold-dark);
  margin: 14px 0 0;
  text-align: center;
}

.page-result-birthday .inyou-heading {
  width: 100%;
  font-family: var(--font-serif);
  font-size: clamp(16px, 2vw, 20px);
  font-weight: 600;
  color: var(--gold-dark);
  margin: 14px 0 12px;
  text-align: center;
}

/* 生年月日鑑定ページのロゴ（absolute左固定）
   編集: サイズを変えるには clamp(最小px, 基準vw, 最大px) を調整
   編集: 左端からの距離 → left を変更（現在は .container の左端に合わせた値）
   編集: 縦位置         → top / transform を変更 */
.page-result-birthday .header-mandala-logo {
  position: absolute;
  /* .container の左端 = max(16px, (画面幅 - 1100px) / 2) と一致させる */
  left: max(16px, calc(50% - 550px));
  top: 50%;
  transform: translateY(-50%);
  width: clamp(120px, 14vw, 180px);
  aspect-ratio: 1 / 1;
  pointer-events: none;
}

.page-result-birthday .header-mandala-logo .img-slot {
  width: 100%;
  height: 100%;
}

.page-result-birthday .header-mandala-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* =========================================================
   レスポンシブ
========================================================= */
@media (max-width: 860px) {

  .page-result-name .mandala-chart-block,
  .page-result-name .inyou-chart-block,
  .page-result-birthday .result-chart-left,
  .page-result-birthday .result-chart-right {
    width: min(400px, 80vw);
  }

}

.result-secret-summary {
  margin: 30px 0;
  text-align: center;
}

.result-secret-label {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 6px;
}

.result-secret-text {
  font-size: 16px;
  line-height: 1.9;
}

.result-number-title {
  text-align: center;
  font-size: 28px;
  margin-top: 10px;
  margin-bottom: 20px;
  font-family: var(--font-serif);
}

.page-result-name .result-number-badge {
  margin-top: 20px;
}

/* =========================================================
   生年月日・名前鑑定ページ ヘッダー曼荼羅アイコン

   【編集ガイド】
   - ロゴと文字の間隔を変える  → gap の値を調整（例: gap: 32px）
   - ロゴサイズを変える        → .header-mandala-logo の width の clamp() を調整
   - ロゴの表示/非表示         → display: none / flex で切り替え
   - スマホ非表示の閾値         → @media (max-width: 600px) の数値を変更
========================================================= */

/* =========================================================
   result-birthday.html 専用ページタイトル
   他ページの各専用クラスとは独立して管理
   編集: フォントサイズ → clamp(最小px, 基準vw, 最大px) を調整
   編集: 文字色        → color を変更
   編集: 文字間隔      → letter-spacing を調整
========================================================= */
.result-birthday-title {
  font-family: var(--font-serif);
  font-size: clamp(24px, 3.5vw, 34px);
  font-weight: 600;
  color: var(--gold-dark);
  margin: 0;
  letter-spacing: 0.06em;
}

/* ロゴをabsolute左固定し、テキストを画面中央に揃えるレイアウト
   → ロゴが左端に固定されるためテキストコンテナが画面中央に来る
   編集: ロゴ左端からの距離 → .header-mandala-logo の left を調整
   編集: ロゴ縦位置       → .header-mandala-logo の top / transform を調整 */
.page-result-birthday .page-header,
.page-result-name .page-header {
  position: relative;
  overflow: hidden;
}

/* page-header 内の .container は通常フローで中央揃え */
.page-result-birthday .page-header .container,
.page-result-name .page-header .container {
  margin: 0 auto;
  max-width: 700px;
  text-align: center;
  position: relative; /* absolute子要素（result-name-page-title等）の基準点にする */
}

/* =========================================================
   result-name の見出しを通常フロー表示に戻す
   - .result-name-page-title / .result-name-page-title-sub はグローバルで
     position: absolute が設定されているが、このページでは画面外に飛び出す
     ため上書きして解除
   編集: 文字サイズ → font-size を変更
   編集: 余白     → margin を変更
========================================================= */
.page-result-name .page-header .result-name-page-title,
.page-result-name .page-header .result-name-page-title-sub {
  position: static; /* absolute を解除してフロー内に戻す */
  left: auto;
  top: auto;
}

/* スマホではロゴを非表示 */
@media (max-width: 600px) {

  .page-result-birthday .header-mandala-logo,
  .page-result-name .header-mandala-logo {
    display: none;
  }

  /* ======================================================
     result-birthday.html: ページタイトルのサブ見出しを1行に収める
     編集: フォントサイズを変えるには clamp(最小px, 基準vw, 最大px) を調整
     編集: 文字間隔を変えるには letter-spacing を調整
  ====================================================== */
  .result-birthday-title span {
    font-size: clamp(18px, 5vw, 21px);
    letter-spacing: 0.02em;
    white-space: nowrap;
  }
}

/* 名前鑑定ページのロゴ（absolute左固定）
   編集: サイズを変えるには clamp(最小px, 基準vw, 最大px) を調整
   編集: 左端からの距離 → left を変更（現在は .container の左端に合わせた値）
   編集: 縦位置         → top / transform を変更 */
.page-result-name .header-mandala-logo {
  position: absolute;
  /* .container の左端 = max(16px, (画面幅 - 1100px) / 2) と一致させる */
  left: max(16px, calc(50% - 550px));
  top: 50%;
  transform: translateY(-50%);
  width: clamp(120px, 14vw, 180px);
  aspect-ratio: 1 / 1;
  pointer-events: none;
}

.page-result-name .header-mandala-logo .img-slot {
  width: 100%;
  height: 100%;
}

.page-result-name .header-mandala-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* =========================================================
   後半結果セクション 共通化
   名前鑑定結果 / 生年月日鑑定結果 の両方で
   左上アイコン・前後関係をそろえる
========================================================= */

/* 後半セクション全体をアイコン配置の基準にする */
.page-result-name .result-section,
.page-result-birthday .result-section {
  position: relative;
  overflow: hidden;
}

/* 左上の曼荼羅アイコン */
.page-result-name .name-result-logo,
.page-result-birthday .name-result-logo {
  position: absolute;
  /* 上下位置調整: マイナスを小さくすると下にずれる、プラスにするとさらに下へ */
  top: 5px;
  left: 0;
  /* サイズ調整: clampの値を変えてロゴの大きさを微調整（最小px, vw基準, 最大px） */
  width: clamp(120px, 18vw, 210px);
  aspect-ratio: 1 / 1;
  margin: 0;
  z-index: 0;
  pointer-events: none;
}

/* アイコン内部 */
.page-result-name .name-result-logo .img-slot,
.page-result-birthday .name-result-logo .img-slot {
  width: 100%;
  height: 100%;
  margin: 0;
}

.page-result-name .name-result-logo .img-slot img,
.page-result-birthday .name-result-logo .img-slot img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
}

/* テキストやボタンを前面に出す */
.page-result-name .result-number-badge,
.page-result-name .result-number-title,
.page-result-name .result-secret-summary,
.page-result-name .result-detail,
.page-result-name .button-row-images,
.page-result-birthday .result-number-badge,
.page-result-birthday .result-number-title,
.page-result-birthday .result-secret-summary,
.page-result-birthday .result-detail,
.page-result-birthday .button-row-images {
  position: relative;
  z-index: 1;
}

/* 生年月日版の後半セクションも名前版と近い余白にする */
.page-result-birthday .result-section {
  padding-top: 20px;
  padding-bottom: 20px;
}

/* スマホ時はアイコンを少し小さくする */
@media (max-width: 600px) {

  .page-result-name .name-result-logo,
  .page-result-birthday .name-result-logo {
    top: 5px;
    /* スマホ時のロゴサイズ: 値を変えて微調整 */
    width: clamp(90px, 26vw, 140px);
  }

  /* スマホ時: 各ナンバー テーマテキストを左揃えに
     編集ポイント:
       - 中央揃えに戻す → text-align: left を center に変更
       - 適用ページを限定する → .page-result-name や .page-result-birthday を先頭に追加 */
  .result-detail-theme {
    text-align: left;
  }

  /* スマホ時: 各ナンバーの説明テキスト（result-secret-text）を左揃えに
     編集ポイント:
       - 中央揃えに戻す → text-align: left を center に変更
       - ラベル(.result-secret-label)も含めて左揃えにする → セレクタを .result-secret-summary に変更 */
  .result-secret-text {
    text-align: left;
  }
}

.fortune-chart-image {
  display: flex;
  justify-content: center;
  margin: 40px 0 24px;
}

.fortune-chart-image img {
  width: min(360px, 50vw);
  max-width: 100%;
  height: auto;
  display: block;
}

/* =========================
   フッターSNS（画像ボタン）
   ボタンの大きさを変える → height の値を変更（PC用）
   スマホ時のボタン大きさを変える → @media内の height を変更
   ※ 正方形のブランドアイコン用に height 固定・width 自動
========================= */

.footer-sns-images .img-button img {
  height: 52px;
  /* ← PCでのアイコンの大きさ（高さ基準） */
  width: auto;
  display: block;
}

/* YouTubeアイコンの角丸・背景色（LINEやInstagramと同じ四角角丸に揃える）
   角丸の丸み → border-radius の値を変更（例: 8px=小さめ / 16px=大きめ）
   背景色を変更 → background-color の値を変更（例: #FF0000=YouTube赤）
   クリッピングは overflow: hidden で画像端を切り取り */
.footer-sns-images .img-button[aria-label="YouTube"] {
  border-radius: 14px;
  overflow: hidden;
  background-color: #FF0000; /* ← YouTubeブランドカラー（真っ赤）*/
}

/* YouTubeアイコンのみ拡大表示（PC）
   大きさを変更 → height の値を変更（例: 56px=小さめ / 72px=大きめ） */
.footer-sns-images .img-button[aria-label="YouTube"] img {
  height: 50px; /* ← PCでのYouTubeアイコンの大きさ */
  width: 50px;
}

/* スマホ時: SNSアイコンを小さくして横にはみ出ないようにする */
@media (max-width: 600px) {
  .footer-sns-images .img-button img {
    height: 40px;
    /* ← スマホでのアイコンの大きさ（3つ並んでも収まるサイズ） */
    width: auto;
  }

  /* YouTubeアイコンのみ拡大表示（スマホ）
     大きさを変更 → height の値を変更 */
  .footer-sns-images .img-button[aria-label="YouTube"] img {
    height: 40px; /* ← スマホでのYouTubeアイコンの大きさ */
    width: 40px;
  }

  /* フッター下部が見切れないよう余白を確保
     iOSのブラウザバー・ホームバーの分も含めて余白を大きめに取る
     まだ見切れる場合は padding-bottom の値を大きくして調整 */
  .footer-landing {
    padding-bottom: max(80px, env(safe-area-inset-bottom, 80px));
    /* ← スマホでの外側の下余白 */
  }

  .footer-landing .footer-inner {
    padding-bottom: 24px;
    /* ← フッター内コンテンツの下余白 */
  }
}

/* =========================
   index.html フッター余白調整
========================= */

.footer-copy {
  margin-top: 20px;
}

/* =========================================================
   鑑定士一覧ページ（appraiser-list.html）専用スタイル
   =========================================================
   編集ポイント:
     - 創始者写真サイズ: .founder-photo-wrap の width/height を調整
     - 実績リスト文字サイズ: .founder-creds-list li の font-size を調整
     - 鑑定士カード列数: .appraiser-grid の repeat(5, 1fr) の 5 を変更
     - 鑑定士カードの写真サイズ: .appraiser-card-photo-wrap の width/height を調整
========================================================= */

/* 創始者＋認定鑑定士 共通枠
   - 背景色: background を編集
   - 上下余白: padding を調整
   - 横余白（PC）: 40px / スマホ時は16pxに縮小（崩れ防止）
   - 角丸なしにする: border-radius を 0 に変更 */
.appraiser-unified-section {
  background-color: #ffffff;
  padding: 56px 40px; /* 横余白: PCは40px、スマホ時は下記@mediaで上書き */
  border-radius: var(--radius);
}

/* スマホ時: 横paddingを詰めてコンテンツを圧迫しないようにする
   - 横余白を変える → padding の左右値を編集（現在16px） */
@media (max-width: 600px) {
  .appraiser-unified-section {
    padding: 32px 16px;
  }
}

/* 認定鑑定士グリッド: 鑑定士が追加されたとき上に区切り線を表示
   ※ :not(:empty) は JS でカードが挿入された後に機能する
   - 線の色: border-top の色コードを編集
   - 線の太さ: border-top の px 値を編集
   - 線の上余白: padding-top / margin-top を調整 */
.appraiser-grid:not(:empty) {
  border-top: 1px solid var(--line-gold);
  margin-top: 48px;
  padding-top: 40px;
}

/* 創始者セクション: 2列レイアウト（写真列 + 実績列）
   - 中央配置: justify-content: center で中央寄せ（旧: padding-left: calc(50% - 100px) は幅依存で崩れるため変更）
   - 列間の余白: gap を調整
   - 縦揃え: align-items を変更（flex-start / center） */
.founder-layout {
  display: flex;
  gap: 48px;
  align-items: flex-start;
  justify-content: center; /* padding-left の計算式を廃止してflexboxで中央配置（崩れ防止） */
  box-sizing: border-box;
  margin-top: 32px;
}

/* 写真列（左）: 写真・名前・ボタンを縦に中央寄せで並べる
   - 列幅: width を調整（現在200px固定） */
.founder-photo-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
  width: 200px;
}

/* 写真の丸枠
   - サイズ変更: width / height を同じ値で調整
   - 枠色変更: border の色コードを編集 */
.founder-photo-wrap {
  width: 160px;
  height: 160px;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid var(--line-gold);
  margin-bottom: 12px;
}

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

/* 写真（マスクなし）: image_sousisya.png のように名前込みデザインの画像用
   - サイズ変更: max-width を調整（現在200px） */
.founder-photo-plain {
  max-width: 200px;
  width: 100%;
  height: auto;
  display: block;
}

/* 名前テキスト（写真下）
   - フォントサイズ: font-size を調整
   - 色変更: color を編集 */
.founder-name-text {
  font-family: var(--font-display);
  font-size: 15px;
  color: var(--text-muted);
  margin-bottom: 16px;
  letter-spacing: 0.05em;
}

/* ボタン行: 実績リスト下のボタン（横並び）
   - ボタン間隔: gap を調整
   - 上余白: margin-top を調整
   - 左位置: margin-left でリスト本文と揃える（箇条書きの • 分のオフセット） */
.founder-btns {
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-start;
  margin-top: 20px;
  margin-left: 2.4em;
}

/* 実績リスト列（右）: 実績リストとボタンを縦に並べる
   - 最大幅: max-width を調整（写真右にはみ出さないよう控えめに）
   - ボタン上余白: .founder-btns の margin-top を調整 */
.founder-creds-col {
  flex: 1;
  max-width: 340px;
  display: flex;
  flex-direction: column;
}

/* 実績リスト: 箇条書き
   - 行間: line-height を調整（現在2.0）
   - フォントサイズ: font-size を調整 */
.founder-creds-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.founder-creds-list li {
  font-size: 14px;
  color: var(--text-muted);
  line-height: 2.0;
  padding-left: 1.4em;
  position: relative;
}

.founder-creds-list li::before {
  content: "•";
  position: absolute;
  left: 0;
  color: var(--gold);
  font-size: 16px;
  line-height: 2.0;
}

/* 認定鑑定士グリッド
   - 1行に表示する枚数: repeat(5, 1fr) の 5 を変更
   - カード間隔: gap を調整 */
.appraiser-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
  margin-top: 24px;
}

/* 鑑定士カード
   - 背景色: background を編集
   - 角丸: border-radius を調整
   - 影: box-shadow を調整
   - 内側余白: padding を調整 */
.appraiser-card {
  background: #ffffff;
  border: 1px solid var(--line-gold);
  border-radius: var(--radius);
  padding: 20px 12px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
}

/* 写真の丸枠
   - サイズ変更: width / height を同じ値で調整 */
.appraiser-card-photo-wrap {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid var(--line-gold);
  flex-shrink: 0;
}

.appraiser-card-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* 写真フォールバック（画像なしのとき: イニシャル表示）
   - サイズ: .appraiser-card-photo-wrap と同じ値を保つこと */
.appraiser-card-photo-fallback {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  border: 2px solid var(--line-gold);
  background: var(--gold-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  color: var(--gold-dark);
  font-family: var(--font-display);
  flex-shrink: 0;
}

/* 鑑定士名
   - フォントサイズ: font-size を調整 */
.appraiser-card-name {
  font-family: var(--font-display);
  font-size: 14px;
  color: var(--text);
  font-weight: 600;
}

/* 実績リスト（カード内）
   - 行間: line-height を調整
   - フォントサイズ: font-size を調整（現在11px） */
.appraiser-card-bio {
  list-style: none;
  padding: 0;
  margin: 0;
  text-align: left;
  width: 100%;
}

.appraiser-card-bio li {
  font-size: 11px;
  color: var(--text-muted);
  line-height: 1.9;
  padding-left: 1em;
  position: relative;
}

.appraiser-card-bio li::before {
  content: "•";
  position: absolute;
  left: 0;
  color: var(--gold);
}

/* ボタン行: カード内ボタン（常に横並び）
   - ボタン間隔: gap を調整
   - ボタン画像は flex: 1 で均等幅に自動調整されるため max-width 不要 */
.appraiser-card-btns {
  display: flex;
  gap: 6px;
  flex-wrap: nowrap;
  margin-top: auto;
  padding-top: 8px;
  width: 100%;
}

.appraiser-card-btns .img-button {
  flex: 1;
  min-width: 0;
}

.appraiser-card-btns .img-button img {
  width: 100%;
  height: auto;
  display: block;
}

/* レスポンシブ: タブレット（860px以下）
   - 創始者: 縦積みに切り替え / padding-left リセット
   - 鑑定士グリッド: 3列に切り替え → repeat の 3 を変更 */
@media (max-width: 860px) {
  .founder-layout {
    flex-direction: column;
    align-items: center;
    gap: 32px;
    padding-left: 0;
  }

  .founder-creds-col {
    max-width: 100%;
    width: 100%;
  }

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

/* レスポンシブ: スマホ（600px以下）
   - 鑑定士グリッド: 2列に切り替え → repeat の 2 を変更
   - カードボタン画像: 最大幅を縮小 */
@media (max-width: 600px) {
  .founder-photo-wrap {
    width: 130px;
    height: 130px;
  }

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

  /* appraiser-card-btns は flex: 1 で自動調整のため個別指定不要 */
}

/* =========================================================
   鑑定士詳細ページ（appraiser-detail.html）プロフィールレイアウト
   =========================================================
   編集ポイント:
     - 写真サイズ: appraiser-detail.html の img の max-width を変更
     - 名前の横位置（PC）: .detail-name-block の left: calc(100% + XX px) の XX を変更
     - 名前と写真の縦間隔（スマホ）: .detail-name-block の margin-top を変更
     - スマホの文字中央揃え: .detail-name-block の text-align を変更
========================================================= */

/* ============================================================
   モバイル専用の改行非表示クラス
   - .br-pc-only: PCでは改行あり、スマホ（600px以下）では非表示にして改行なしでテキストが続く
   - 適用箇所の変更: index.html の該当 <span class="br-pc-only"> を編集
   - 閾値の変更: @media (max-width: 600px) の数値を調整
   ============================================================ */
.br-pc-only { display: inline; }

@media (max-width: 600px) {
  .br-pc-only { display: none; }
}

/* PC・タブレット: デフォルト（インラインスタイルで制御）
   .detail-name-block は position: absolute で写真右に配置 */

/* スマホ（599px以下）: 写真の下に名前を縦並びで表示 */
@media (max-width: 599px) {
  /* 外側コンテナを縦積みに変更 */
  .detail-profile-wrap {
    flex-direction: column;
    align-items: center;
  }

  /* 写真コンテナのposition: relativeを解除して通常フローに戻す */
  .detail-photo-wrap {
    position: static;
  }

  /* 名前ブロックをabsoluteから通常フローに戻し、写真の下に配置 */
  .detail-name-block {
    position: static !important;
    transform: none !important;
    white-space: normal !important;
    text-align: center !important;
    margin-top: 16px;
  }
}