/* -----------------------------------
   レイアウト全体（デュアルペイン）
   背景・高さ・overflowをbodyからここへ移動
   ----------------------------------- */
.pc-layout-wrapper {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: 100svh;
  /* PC では左右のペインに完全に覆われるが、450〜750px 幅では
     .app-container（max-width 450px）の左右にこの地色が帯として露出する。
     旧値 #1a1a1a はそこだけ暗い帯になっていたため、ページ背景と同色にした */
  background-color: var(--color-bg);
}

/* 左側ペイン（SPではブランド情報のみ表示・カテゴリーリストはオーバーレイで代替） */
.pc-left-pane {
  display: flex;
  flex-direction: column;
  width: 100%;
  background: #ffffff;
  padding: 50px 24px 40px;
  box-sizing: border-box;
}
.pc-left-pane .category-list {
  display: none;
}

/* 右側ペイン */
.pc-right-pane {
  width: 100%;
  height: 100svh;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  overflow: hidden;
}

/* PC・タブレット向けのレイアウト切り替え (751px以上) */
@media (min-width: 751px) {
  .pc-layout-wrapper {
    flex-direction: row;
    height: 100svh;
    min-height: 0;
    overflow: hidden;
  }
  .pc-left-pane {
    justify-content: center;
    width: 40%;
    min-width: 350px;
    padding: 80px 60px;
    box-shadow: 5px 0 15px rgba(0,0,0,0.05);
    z-index: 100;
  }
  .pc-left-pane .category-list {
    display: block;
  }
  .pc-right-pane {
    width: 60%;
    height: 100%;
    background: url('../images/doctor_question_bg_pc.webp') center/cover;
  }
  /* かつてここに rgba(0,0,0,0.4) の全面ベールがあった。写真を暗くしない方針
     （→ 仕様書1章「写真上の文字の可読性」）に合流させ、前景を濃色インクへ
     反転したうえで廃止した。上端の処理は .app-container::before に一本化する */
}

/* 左ペイン内のコンテンツスタイル */
/* 直下の .brand-title（Klee One）へ視線を渡すキッカー英字。
   構造は h2.type-a .en-label / .promise__tag と同じ（英字ラベル → 和文見出し → 本文）
   ため、--font-en の規定にそのまま従う（→ 仕様書§2 装飾英字のセリフ体）。
   文言 "99 Questions" は直下 .brand-title「99の質問で知る、〜」の言い換えで、
   行の中身が全てラテン＋数字のため行内に和欧の継ぎ目が生じない
   （.promise__tag の "60min Appointment" と同型） */
.brand-logo {
  font-family: var(--font-en);
  /* イタリック必須。アップライトにするとロゴ（ローマン体・オールキャップス）の模倣になる */
  font-style: italic;
  /* 読み込むのは EB Garamond italic 500/600。ラベルは 500 */
  font-weight: 500;
  /* 見出しに添えるラベル英字の統一サイズ。
     直下 .brand-title との比は SP 4/6.15 = 0.65（許容 0.73 以内） */
  font-size: 4vw;
  /* キッカーは「読ませない」。視認性を上げると直下の見出しから視線が逸れる（→ .promise__tag の経緯） */
  color: var(--color-light-brown);
  /* EB Garamond は字が独立しているため詰めない。ロゴの「ゆったり組む」語彙を弱く反映した値 */
  letter-spacing: 0.06em;
  /* ロゴがオールキャップスのため、ラベルまで全大文字にすると競合する。HTML 側の文言も title case */
  text-transform: none;
  margin-bottom: 20px;
}
.brand-title {
  font-family: 'Klee One', serif;
  font-size: var(--fs-h2-small-sp);
  font-weight: 600;
  line-height: 1.4;
  margin-bottom: 20px;
  color: var(--color-text);
}
.brand-desc {
  font-size: var(--fs-body-sp);
  line-height: var(--line-height);
  color: var(--color-text);
  margin-bottom: 30px;
}
.brand-desc__direction-pc {
  display: none;
}
.brand-desc__direction-sp {
  display: inline;
}
@media (min-width: 751px) {
  .brand-desc__direction-pc {
    display: inline;
  }
  .brand-desc__direction-sp {
    display: none;
  }
}
.category-list {
  list-style: none;
  border-top: 1px solid var(--color-gray);
  padding-top: 20px;
}
.category-list li {
  padding: 10px 0;
  border-bottom: 1px solid var(--color-gray);
  font-size: var(--fs-sub-sp);
  color: var(--color-light-gray);
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  transition: var(--transition-nav);
}
.category-list li::before {
  content: '●';
  color: var(--color-gray);
  font-size: 10px;
  transition: color var(--transition-btn);
}
.current-category {
  font-weight: var(--fw-bold);
  color: var(--color-text) !important;
  transform: translateX(5px);
}
.current-category::before {
  color: var(--main-color) !important;
}

/* -----------------------------------
   スマホUIコンテナ
   ----------------------------------- */
.app-container {
  position: relative;
  width: 100%;
  height: 100%;
  max-width: 450px;
  background: #f4f6f9;
  overflow: hidden;
  z-index: 10;
}

/* 上部フェード（SP・PC 共通）
   .story-header と .swiper-pagination-bullet が乗る上端だけを局所的に白くかすませ、
   前景を写真から面として切り離す。かつてはここが rgba(0,0,0,0.5) の黒いスクリムで、
   白文字を載せるために写真を暗くしていた。サイトの方針（無彩色の暗幕を掛けない
   → 仕様書1章「写真上の文字の可読性」）に合流させ、白フェード＋濃色インクへ反転した。
   反転できる根拠は写真そのものが明るいこと。ヘッダー帯（container y 20-56px）の実測は
     SP（blur15 + brightness .85 後・375/390/430/600px 幅）最暗 159 / 平均 184
     PC（1280/1440/1920px）              最暗 153 / 平均 209
   で、--color-text は暗幕なしの素の写真でも最悪 5.1:1 と AA を満たす。
   逆に白文字は PC のヘッダー帯に 255 の白飛びを含むため暗幕なしでは成立しない。
   不透明度 0.5 は AA のために必要な値ではなく（素で足りている）、旧値の黒と対称な値。
   合成後は最悪でも 8.1:1 まで余裕が出る。写真を差し替える場合は最暗画素を再計測し、
   合成後の実効背景が 152 以上あることを確認する（--color-text の 4.5:1 の下限）。
   停止位置 60px は .story-header（top 20px + .story-icon 36px）の下端 56px を
   不透明度を落とさずに越えるための値。裾（60→80px）は短縮できるが、0→60px を詰めると
   上記が直接壊れる。中間 68px は裾内比率 41.7% で、前半で速く落ちる減衰カーブを保つため
   （等分の 70px だと直線的になり裾が硬く見える）。 */
.app-container::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 80px;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.5) 0,
    rgba(255, 255, 255, 0.5) 60px,
    rgba(255, 255, 255, 0.28) 68px,
    rgba(255, 255, 255, 0) 80px
  );
  /* .bg-image（1）より上、.swiper（10）・.swiper-pagination（30）・
     .story-header（50）・.sp-cat-overlay（40）より下 */
  z-index: 2;
  pointer-events: none;
}

@media (min-width: 751px) {
  .app-container {
    max-width: 85%;
    height: 90%;
    border-radius: 20px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.15);
    background: transparent;
  }
  .app-container .bg-image {
    display: none;
  }
  /* 上部フェードは PC でも有効。全面ベールを廃止したことで SP と条件が揃い、
     上端の処理がこの1本に統一された。.app-container は overflow: hidden なので
     フェードは上の border-radius: 20px に沿ってクリップされる */
}

/* ぼかした背景（スマホ用） */
.bg-image {
  position: absolute;
  top: -10%; left: -10%;
  width: 120%; height: 120%;
  background: url('../images/doctor_question_bg_sp.webp') center/cover;
  /* 旧値 0.6。写真そのものが明るく、暗くしても質感が出ないまま沈むだけなので 0.85 まで上げた。
     これ以上は上げない。0.85 でコンテナ全域の平均が 154 に収まり、白い .qa-card が
     浮いて見える（→ 下の PC ブロックのカードの影のコメント）。
     ヘッダー周りの可読性は .app-container::before の上部フェードが別途担保する */
  filter: blur(15px) brightness(0.85);
  z-index: 1;
}

/* Swiper */
.swiper {
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 10;
  counter-reset: qa-counter;
}

.story-header {
  position: absolute;
  top: 20px;
  left: 15px;
  right: 15px;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 10px;
}
.story-icon {
  width: 36px;
  height: 36px;
  /* カテゴリー一覧の選択中バッジ（.is-current .sp-cat-icon）と同じ塗り。
     「ヘッダーのバッジ＝一覧で選択中の項目」という対応をそのまま見せる。
     白フェードの上ではメインカラー系が使えない（#10D0AB 1.98:1 / #16EDC3 1.6:1）。
     枠線は外さず地と同色にする。外すと外形が上下左右 2px ずつ縮む
     （→ 仕様書1章 二次ボタン「枠線は白のまま残す」と同じ理由） */
  background: var(--color-deep-green);
  border: 2px solid var(--color-deep-green);
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--color-white);
  font-size: 16px;
  font-weight: var(--fw-bold);
}
.story-category {
  color: var(--color-text);
  font-size: var(--fs-sm-sp);
  font-weight: var(--fw-bold);
}

.swiper-pagination-bullets {
  top: 8px !important;
  left: 10px !important;
  right: 10px !important;
  width: auto !important;
  display: flex;
  gap: 4px;
  z-index: 30;
}
/* 上端 8px＝上部フェードの不透明部にあるため、白のバーはフェードに溶けて消える。
   アクティブは .story-icon と同じ深緑（フェード上 3.93:1 で非テキストの 3:1 を満たす）、
   非アクティブはその薄い版で、色を増やさずに進捗の差を作る */
.swiper-pagination-bullet {
  flex: 1;
  height: 3px;
  background: rgba(54, 107, 96, 0.25);
  border-radius: 2px;
  margin: 0 !important;
  opacity: 1;
}
.swiper-pagination-bullet-active {
  background: var(--color-deep-green);
}

/* 質問カード */
.swiper-slide {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
}
.qa-card {
  background: rgba(255, 255, 255, 0.98);
  border-radius: 20px;
  padding: 40px 25px;
  width: 100%;
  max-width: 400px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.15);
  text-align: center;
  animation: fadeIn 0.4s ease-out;
}
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (min-width: 751px) {
  .qa-card {
    padding: 60px 50px;
    max-width: 600px;
    /* PC は全面ベールを廃止したぶん、カード背後の写真が素で出る。実測は
       最暗 4 / 平均 180 / 最大 255 で、白飛び領域では基底の影（0.15）だと縁が消える。
       写真を暗くせずに面を切り離すため、PC だけ影を強める。
       SP は .bg-image の brightness(0.85) でコンテナ全域 平均 154 と暗く、
       基底のままで足りる（＝ SP の brightness をこれ以上上げられない理由でもある） */
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.22);
  }
}

.q-mark {
  counter-increment: qa-counter;
  color: var(--main-color);
  font-size: 20px;
  font-weight: 900;
  margin-bottom: 10px;
}
.q-mark::before {
  content: "No." counter(qa-counter);
}
.question {
  font-size: var(--fs-h4-sp);
  font-weight: var(--fw-bold);
  line-height: 1.5;
  margin-bottom: 25px;
  color: var(--color-text);
}
.answer {
  font-size: var(--fs-h4-sp);
  line-height: var(--line-height);
  color: var(--color-text);
  background: var(--main-color-pale);
  padding: 15px;
  border-radius: 12px;
  text-align: left;
}

/* ナビゲーション矢印 */
.nav-arrow-icon {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 25;
  width: 40px;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: rgba(16, 208, 171, 0.4);
  font-size: 24px;
  font-weight: var(--fw-bold);
  pointer-events: none;
  transition: var(--transition-nav);
}
.arrow-prev { left: 5px; }
.arrow-next { right: 5px; }

/* PC（751px以上） */
@media (min-width: 751px) {
  /* ラベル英字の統一サイズ。直下 .brand-title（32px）との比 0.63（許容 0.73 以内） */
  .brand-logo   { font-size: 1.25rem; }
  .brand-title  { font-size: var(--fs-h2-small); }
  .brand-desc   { font-size: var(--fs-body); }
  .category-list li { font-size: var(--fs-sub); }
  .story-category   { font-size: var(--fs-sm); }
  .question     { font-size: var(--fs-h3b); }
  .answer       { font-size: var(--fs-h4); }

  /* 全面ベールの廃止で、白の矢印が写真（実測 平均 198-217）に埋もれる。
     pointer-events: none の装飾ヒントなので AA の対象外だが、コンテナの外＝
     素の写真の上にあるため、SP の rgba(16,208,171,0.4) より濃度を上げる */
  .nav-arrow-icon {
    color: rgba(54, 107, 96, 0.65);
    font-size: 36px;
  }
  .arrow-prev { left: -60px; }
  .arrow-next { right: -60px; }
}

/* -----------------------------------
   SP カテゴリーオーバーレイ
   ----------------------------------- */
.story-header {
  cursor: pointer;
}

.story-header__arrow {
  margin-left: auto;
  font-size: 20px;
  /* ドロワーの閉じるボタン .sp-nav__close と同じ --color-dark-gray
     （白地 8.07:1／上部フェードの上 5.18:1） */
  color: var(--color-dark-gray);
  transition: transform 0.3s ease;
}

.story-header.is-open .story-header__arrow {
  transform: rotate(180deg);
}

/* ヘッダーは開閉で配色が変わらない。
   .story-header は z-index 50 で .sp-cat-overlay（40）の上に残るが、
   閉じている時も上部フェード＋濃色インク（.story-icon / .story-category /
   .story-header__arrow の基底指定）で、白地のオーバーレイと同じ配色になっているため、
   .is-open 側で色を差し替える必要がない。開いた時に変わるのは矢印の回転だけ。 */

/* SPナビ（.sp-nav）と同じ白地へ反転した面。
   地色だった --color-deep-green はアイコンのインク側へ移し、新しい色は増やしていない
   （→ 仕様書1章「深緑面の3つの反転」）。 */
.sp-cat-overlay {
  position: absolute;
  inset: 0;
  background: var(--color-white);
  z-index: 40;
  display: flex;
  flex-direction: column;
  /* リストは上端から始める。中央寄せだと、上端に固定された .story-header
     （top 20px + .story-icon 36px = 下端 56px）との間に画面高さ依存の空白が空く */
  justify-content: flex-start;
  /* 上 76px = ヘッダー下端 56px + 余白 20px。
     .sp-cat-list li:first-child の border-top までの距離がこの 20px になる */
  padding: 76px 24px 30px;
  /* 8項目（1項目 58px）＋上下padding で約 570px。横向きなど極端に低い画面では
     .app-container が overflow: hidden のため末尾が触れなくなるので逃がす */
  overflow-y: auto;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}

.sp-cat-overlay.is-open {
  opacity: 1;
  pointer-events: auto;
}

.sp-cat-list {
  list-style: none;
}

.sp-cat-list li {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 13px 0;
  /* ドロワーの項目 .sp-nav__item と同じ罫線 */
  border-bottom: 1px solid var(--color-gray);
  /* 文字色・ウェイトは .sp-nav__link と同値（白地 13.1:1）。
     選択中との差は色を増やさず、--fw-bold とアイコンの塗りだけで作る */
  color: var(--color-text);
  font-size: var(--fs-sub-sp);
  font-weight: var(--fw-medium);
  cursor: pointer;
  transition: color 0.2s;
}

.sp-cat-list li:first-child {
  border-top: 1px solid var(--color-gray);
}

.sp-cat-list li.is-current {
  font-weight: var(--fw-bold);
}

.sp-cat-icon {
  width: 32px;
  height: 32px;
  /* 白地に対して円を薄く置く。文字は深緑で、この地の上でも 5.55:1 と AA を満たす。
     メインカラー系は白地で #10D0AB 1.98:1 / #16EDC3 1.6:1 と装飾の 3:1 すら割るため使えない */
  background: var(--color-gray-light);
  border-radius: 50%;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  color: var(--color-deep-green);
  font-size: 13px;
  font-weight: var(--fw-bold);
  flex-shrink: 0;
  transition: background 0.2s, color 0.2s;
}

.sp-cat-list li.is-current .sp-cat-icon {
  background: var(--color-deep-green);
  color: var(--color-white);
}

@media (min-width: 751px) {
  .story-header { cursor: default; }
  .story-header__arrow { display: none; }
  .sp-cat-overlay { display: none; }

  /* question.js の click ハンドラは幅を見ずに .is-open を付けるため、
     オーバーレイが出ない PC でもヘッダー側だけが発火する。かつてはここで
     .is-open の反転を打ち消していたが、開閉で配色が変わらなくなったため不要。 */
}

/* 操作領域 */
.tap-area {
  position: absolute;
  top: 0;
  height: 100%;
  z-index: 20;
  cursor: pointer;
}
.tap-prev { left: 0; width: 30%; }
.tap-next { right: 0; width: 70%; }