/* ============================================
   ひすい歯科 採用サイト — トップページ専用スタイル
   モバイルファースト（ブレイクポイント: 751px）
   ============================================ */

/* ----------------------------------------
   MV（メインビジュアル）
   ---------------------------------------- */

#mv {
  position: relative;
  width: 100%;
  /* svh = URLバー表示時の高さ。100vh だとバー分だけ MV 下部（ボタン・SCROLL誘導）が
     隠れる。dvh はスクロール中に高さが変わり Ken Burns がガタつくため svh を採用。 */
  height: 100vh;
  height: 100svh;
  min-height: 480px;
  overflow: hidden;
  margin-top: 0;
}

/* Vegas コンテナ（スライド画像ロード前のフォールバック背景） */
.mv__vegas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  /* Vegas 初期化前／CDN不達時のフォールバック（js/main.js の slidesSP[0] と同一カット）
     背景色は画像自体が取得できない場合の二段目のフォールバック */
  background: var(--color-bg) url('../images/mv_01_consultation_sp.webp') center/cover no-repeat;
}

/* Vegas オーバーレイ（下部のみ白フェード）
   ストップは % ではなく「下端からの長さ」で指定する。
   #mv の高さはビューポート高（svh）基準なのに対し、.mv__content のテキストは
   vw 基準のフォントサイズ＋vw パディングで積み上がるため、% 指定だと縦長の
   端末ほどコピーがフェードの薄い領域にはみ出す。vw で指定すればテキスト量と
   同じ基準になり、画面の高さに関係なく文字の後ろが白く抜ける。
   内訳（下端から）: padding-bottom 20vw → ボタン 13.95vw（SPは1つ）→ PRポイント帯 12.7vw
                     → メインコピー 上端 約96.5vw（最上ストップ 118vw の内側）

   ストップは「キャッチ上端 + 約22vw」で決める。secondary ボタンの非表示（-16.45vw）と
   リード文 → PRポイント帯の置き換え（-14.66vw）でキャッチ上端が 128vw → 96.5vw に
   下がったため、旧 150vw のままだとフェードが 0 に着地する前に MV の上端に達し、
   キャッチ全4行が 0.85〜0.91 の上に載る ──「写真の上にコピーが載る」ではなく
   白い箱になる（実測: iPhone SE2/3 375×667 で素の写真が残る面積 0%）。
   118vw に下げると素の写真が上部に 21〜30% 残り、1行目のコントラストも
   最悪 6.39:1 で AA を満たす（→ 仕様書 5章 MV に実測表）。
   下限側の限界はキャッチ上端 + 約12vw で、そこまで下げると 1行目が 3.9:1 で AA を割る。 */
.mv__overlay {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(
    to top,
    rgba(255, 255, 255, 0.96) 0,
    rgba(255, 255, 255, 0.90) 53vw,
    rgba(255, 255, 255, 0.82) 82vw,
    rgba(255, 255, 255, 0)    118vw
  );
  z-index: 1;
}

/* MV コンテンツ */
.mv__content {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 0 8% 20vw;
}

/* キャッチコピー */
.mv__catch {
  margin-bottom: 3vw;
}

.mv__catch-main {
  display: block;
  font-family: 'Klee One', serif;

  /* 8.2vw では3行目「18:40退勤でなれる、」が使える幅を 0.6〜1.9px 超え、
     360〜390px の端末で「る、」だけが5行目に落ちていた。.em-num の 1.18 倍で
     「18:40」が 96〜106px を占めるのが効いている。7.8vw にすると 320〜430px の
     全幅で 4〜5% の余裕を持って4行に収まる。--em-num-scale は全ページ共通の
     変数なので触らない（仕様書 8-1）。 */
  font-size: 7.8vw;
  font-weight: var(--fw-bold);
  color: var(--color-text);

  /* サイト内で最も詰まったキャッチだが、SP 2行目の「向き合う」に傍点が付く。
     1.3 のままだと点の上（＝1行目との間）に 0.09em ほどしか残らず、
     点が上下どちらの行のものか読めない。1.4 で下側（0.06em）の約3倍が空き、
     点が自分の語に属して見える。他の傍点セレクタ（1.45〜1.55）は据え置きで足りる。 */
  line-height: 1.4;
  margin-bottom: 0.4em;
}

/* PRポイント帯（旧 .mv__catch-sub のリード文の後継）
   リード文は h1 の対比（こなす→向き合う）を言い換えているだけで新しい情報が無く、
   SP で 4行 27.36vw を占めていた。アイコン＋事実の2点に置き換えて 12.7vw に収める。

   語彙は .numbers__panel / .benefit-card--index に揃える ── ミントの線画アイコン
   （円背景なし）＋ --fw-bold / --color-text の素テキスト。塗りピルは使わない
   （→ 仕様書 5章「ピルの語彙」）。この帯は白フェード 0.91 の上に載るので実効的には
   白い面であり、ミントアイコンのコントラスト（実測 1.69:1）は白地の
   .numbers__icon（1.98:1）と同じ扱いでよい。文字は最悪 11.16:1 で AA を満たす。
   写真依存にはならない（→ 仕様書 5章 MV）。 */
.mv__points {
  display: flex;
  gap: 2vw;
}

.mv__point {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.2vw;
  text-align: center;
}

/* .numbers__icon の SP 値（5.8vw）と一致させる。同じ「線画で識別する」役割なので
   サイズも揃える */
.mv__point-icon {
  font-size: 5.8vw;
  color: var(--main-color);
}

/* 1行に収める。2列なので1列 41vw（(84 − gap 2) ÷ 2）取れ、最長の
   「一流講師の院内研修」9字は 3.8vw × 9 + 字間 0.04em × 9 = 35.6vw で 87%。
   320px 端末でも 114px 対 列幅 131px で折り返さない。
   3列にすると1列 26.7vw まで痩せて文字を 3.2vw の2行に落とす必要があり、
   ラベルが読みにくくなるうえ中央揃えが左揃えの本文と混ざる。
   字間は .numbers__label と同じ 0.04em で、和文を塊として読ませる */
.mv__point-text {
  font-size: 3.8vw;
  font-weight: var(--fw-bold);
  color: var(--color-text);
  line-height: 1.5;
  letter-spacing: 0.04em;
}

/* MVボタングループ */
.mv__btns {
  display: flex;
  flex-direction: column;
  gap: 2.5vw;
}

.mv__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  padding: 3.5vw 5vw;
  border-radius: var(--radius-btn);
  font-size: var(--fs-table-sp);
  font-weight: var(--fw-bold);
  transition: var(--transition-btn);
  text-align: center;
}

.mv__btn--primary {
  background-color: var(--main-color);
  color: var(--color-white);
  white-space: nowrap;
}

.mv__btn--primary:hover {
  background-color: var(--main-color-hover);
}

/* SP では非表示にする（PC の media query で display: flex に戻す）。
   理由は3点。
   1. 行き先の #numbers は MV の直下のセクションであり、.mv__scroll の SCROLL 誘導が
      すでに同じ場所を指している。タップしても1フリックと結果が同じ
   2. SP は縦積みなので、応募ボタンの真下に同じ幅の箱が並ぶ。白フェードの上に
      白背景＋枠線で載るため応募ボタンと同格の兄弟に見え、視線が割れる
      （PC は flex: 1 の横並びで「1行のペア」として読めるので成立する）
   3. ボタン1つ＋gap で 16.45vw を占め、これが .mv__content の積み上げ（127.6vw）を
      押し上げて h1 の1行目を固定ヘッダー（18.975vw）の下に潜らせていた。
      非表示にすると積み上げが 111.1vw に下がり、必要高さ 146.5vw → 130.1vw となって
      iPhone SE2/3（375×667）で +9px → +71px、iPad mini 縦（744×1133）で
      -27px → +95px の余白が出る（→ 仕様書 5章 MV）
   SP のファーストビューに残る応募導線は primary の1つだけになる。SPヘッダーは
   .header__cta を持たず（.header__nav.hidden-xs の内側）、フッター固定バナーは
   #mv を通過するまで出ないため、ここを消すと応募導線が0になる（→ 仕様書 7章）。 */
.mv__btn--secondary {
  display: none;
  background-color: var(--color-white);
  border: 2px solid var(--main-color);
  color: var(--color-text);
}

.mv__btn--secondary:hover {
  background-color: var(--main-color-light);
}

.mv__btn .material-icons-round {
  font-size: 1.2em;
}

.mv__btn--primary .material-icons-round {
  flex-shrink: 0;
}

/* MVスクロール誘導 */
.mv__scroll {
  position: absolute;
  bottom: 5vw;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5em;
  color: var(--color-dark-gray);
  font-size: var(--fs-xs-sp);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  animation: scroll-bounce 2s ease-in-out infinite;
}

.mv__scroll .material-icons-round {
  font-size: 5vw;
}

@keyframes scroll-bounce {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%       { transform: translateX(-50%) translateY(6px); }
}

/* ----------------------------------------
   数字で見るひすい歯科
   ---------------------------------------- */

#numbers {
  padding-top: 16vw;
  padding-bottom: var(--cnt-b-sp);
}

.numbers__head {
  text-align: center;
  margin-bottom: 8vw;
}

.numbers__head-copy {
  font-size: var(--fs-h2-small-sp);
  color: var(--color-text);
  line-height: 1.6;
  margin-bottom: 1.5em;
}

.numbers__head-lead {
  font-size: var(--fs-body-sp);
  color: var(--color-dark-gray);
  line-height: 1.9;
  text-align: left;
}

/* パネルグリッド */
.numbers__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3vw;
}

/* かつて上端に 4px のメインカラーグラデーションライン（::before）を敷いていたが廃止した。
   あれは「文字だけの白い面」に視覚的なアンカーを与える装置であり、その役割はアイコンが
   引き継いだ ── 装飾ではなく意味を持つ識別記号に一本化する。
   併せて、サイトの 4px アクセントラインは .benefit-card / .sv-voice / .access-info と同じ
   「左端の縦ライン」に語彙が揃った（上端・全幅の用例はサイトから消えた）。

   シャドウは y オフセット付き・暖色。ラインを廃した分、面の輪郭は影だけが担う。
   白 × --color-bg(#F3F0EC) は 1.13:1 でほぼ差がないため、無方向のグロー（旧 0 0 16px）
   ではカードが背景に沈む。ベージュ背景に白カードを置くときは、影に向きを与えて
   持ち上げること。色味は sample.html「実績カード 2a」の処方に合わせた暖色。 */
.numbers__panel {
  background-color: var(--color-white);
  border-radius: 8px;
  padding: 5vw var(--pad-card-sm-sp);
  text-align: center;
  box-shadow: 0 3px 14px rgba(60, 55, 45, 0.07);
  /* 角丸のクリップ。数値が溢れたときの安全網も兼ねる */
  overflow: hidden;
  transition: transform var(--transition-btn), box-shadow var(--transition-btn);
}

.numbers__panel:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(16, 208, 171, 0.2);
}

/* 指標アイコン（Material Icons Round）。
   円背景は持たせず線画のまま置く。.benefit-card__icon（hygienist.css）と同じ扱い。
   ミント系の「面」はラベルの塗りピルに一本化する ── 円背景を足すと 1枚のカードに
   ミントの丸い塊が2つ並び、視線がアイコンとラベルに割れる。
   輪郭が4種すべて異なるアイコンを選び（時計・カレンダー・紙幣・ハート）、
   小サイズでも指標の識別記号として働かせている。 */
.numbers__icon {
  display: block;
  /* .numbers__num（9vw）の 0.64。数値がこのセクションの主張なので、
     アイコンはそれに従属するスケールに留める。
     かつて 6.5vw（0.72）だったが、当時の指標名（2.56vw）の 2.5倍あり、
     装飾が意味を上回っていた。ラベルの拡大と合わせて一段落とし、比は 1.62 になっている */
  font-size: 5.8vw;
  color: var(--main-color);
  line-height: 1;
  margin-bottom: 2.5vw;
}

/* 数値と単位をベースラインで揃える行。
   単位を .numbers__num の中に入れ子にできない事情は index.html 側のコメント参照。
   下マージンを詰めているのは、数値と指標名を「ひと塊」として読ませるため。
   ここが空くと視線が数値で止まり、指標名まで降りてこない */
.numbers__value {
  display: flex;
  align-items: baseline;
  justify-content: center;
  margin-bottom: 1.5vw;
}

.numbers__num {
  font-size: 9vw;
  font-weight: var(--fw-bold);
  color: var(--main-color);
  line-height: 1;
  letter-spacing: -0.02em;
}

/* 単位（日・分単位・%）。かつては   だけの空プレースホルダだったが、
   数値から単位を分離したことで実体を持つ要素になった。
   数値と同じミントで、サイズ差だけで従属関係をつける。
   かつて --fs-xs-sp（数値の 0.28）だったが、それでは「125」に対して「日」が小さすぎ、
   `125日` が一語として読めなかった。0.42 まで上げて数値と単位を結びつけている */
.numbers__unit {
  font-size: var(--fs-body-sp);
  font-weight: var(--fw-bold);
  color: var(--main-color);
}

/* 指標名。カードの主題であり、数値と対で初めて意味が成立する。
   かつて --fs-xs-sp（サイト最小・説明文と同値）の塗りピルだったため
   ・ラベル ÷ 説明文 = 1.0 で主題と補足の区別が無い
   ・アイコン ÷ ラベル = 2.67 で装飾が意味を上回る
   ・茶 on 淡ミントで 4.92:1（--color-text on 白なら 13.06:1）
   ・letter-spacing 0.1em が 6文字の和文を散らす
   という4つの理由で読み落とされていた。説明文より一段上に引き上げ、
   ピルを外して素テキストにしている（→ 仕様書 5章「ピルの語彙」）。 */
.numbers__label {
  font-size: var(--fs-table-sp);
  font-weight: var(--fw-bold);
  color: var(--color-text);
  letter-spacing: 0.04em;
}

/* 区切り線。--color-gray ではなくミントの淡色を使い、カード内のミント系
   （アイコン・数値・単位）と同じ色系統で面を締める。
   指標名と説明文の間隔もこの margin が担う（.numbers__label は margin を持たない） */
.numbers__rule {
  height: 1px;
  border: 0;
  background-color: var(--main-color-pale);
  margin: 3vw 0;
}

.numbers__note {
  font-size: 2.56vw;
  color: var(--color-dark-gray);
  line-height: 1.6;
  text-align: left;
}

/* ----------------------------------------
   3つの約束
   ---------------------------------------- */

#promises {
  padding-top: 16vw;
  padding-bottom: var(--cnt-c-sp);
}

.promises__head {
  margin-bottom: 10vw;
}

/* 約束セクション共通 */
.promise {
  margin-bottom: 14vw;
}

.promise:last-child {
  margin-bottom: 0;
}

/* 約束番号ラベル。[01][60min Appointment] を1行で組む。
   行全体がラテン＋数字なので、行ごと --font-en に揃える（行内に和欧混植を作らない）。
   ピルという箱がなくなり両者が素のテキストになったため、垂直は baseline 揃え。
   同じ「数字＋ラベルを1行で組む」形である .sv-qa__head（staff-voice.css）の前例に倣う。
   gap はピルの padding（0.3em 0.8em）が消えた分を補って一段広げている。 */
.promise__label {
  display: flex;
  align-items: baseline;
  gap: 2.5vw;
  margin-bottom: 4vw;
}

/* 順序を示す数字（01〜03）。
   書体は --font-en。「数字には適用しない」規定の2件目の例外にあたる（→ 2章）。
   aria-hidden="true" が付いており順序は文書順が担うため、支援技術には何も渡していない。
   隣の .promise__tag と同一行なので、行ごと揃えないと行内に書体の継ぎ目ができる。

   サイズについて。かつて --fs-num（装飾ナンバー用の 80px）+ --fw-bold を当てていたが、
   これは装飾ナンバーのスケールであって順序数字のものではない。結果として
   ・訴求値である .numbers__num（9vw）より大きい
   ・直下の h3 .promise__title（PC 28px）の 2.9 倍
   ・同じ行のタグ（当時 12px）と 6.7 倍差
   となり、ラベル行ではなくブロック内で最も強い要素になっていた。
   直下の見出しと並ぶ程度に落とし、ラベル行として一体に見せる（→ 2章「順序を示す数字のスケール」）。 */
.promise__num {
  font-family: var(--font-en);
  /* --font-en はイタリックで使う。指定を落とすとロゴのローマン体と競合する */
  font-style: italic;
  font-size: 7vw;
  font-weight: var(--fw-medium);
  color: var(--main-color);
  line-height: 1;
  /* 2桁を塊として見せる。ラベル英字の 0.06em より詰める（.sv-voice__no と同じ考え方） */
  letter-spacing: 0.02em;
}

/* 英字タグ。かつて 1px の線で囲んだピルだったが、サイト内のピルは
   線＝操作要素（.footer__site-link）／塗り＝ラベル（.numbers__label / .sv-voice__tag）
   で語彙が分かれており、ここだけが「ラベルなのに操作要素の見た目」だった。線は廃止する。
   箱がなくなるぶん字が小さいと沈むため、--font-en を使う既存要素の最小値
   （.guide-panel__en-label の PC 16px）に合わせる。直下 .promise__title との比は 0.57。 */
.promise__tag {
  font-family: var(--font-en);
  /* --font-en はイタリックで使う。指定を落とすとロゴのローマン体と競合する */
  font-style: italic;
  font-size: 3.2vw;
  font-weight: var(--fw-medium);
  /* h2.type-a .en-label と同色。見出しに添えるキッカーは「読ませない」のが役割で、
     視認性を上げると直下の .promise__title（本命のメッセージ）から視線が逸れる。
     60min Appointment は和文見出しの言い換えなので、そこで視線が止まる価値がない。
     白地 2.32:1 で AA 未達だが、これは意図的なトレードオフ（→ 2章「--font-en の色」）。
     隣の .promise__num は --main-color のまま残し、色でだけ階層をつける */
  color: var(--color-light-brown);
  letter-spacing: 0.06em;
  text-transform: none;
}

/* 約束タイトル */
.promise__title {
  font-family: 'Klee One', serif;
  font-size: var(--fs-h2-small-sp);
  color: var(--color-text);
  line-height: 1.5;
  margin-bottom: 4vw;
}

/* 画像 */
.promise__img {
  width: 100%;
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 5vw;
  position: relative;
}

.promise__img img {
  width: 100%;
  height: 52vw;
  object-fit: cover;
  transition: transform var(--transition-base);
}

.promise__img:hover img {
  transform: scale(1.03);
}

/* テキスト */
.promise__body {
  font-size: var(--fs-body-sp);
  color: var(--color-dark-gray);
  line-height: 1.9;
}

.promise__body p {
  margin-bottom: 1.2em;
}

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

/* 区切り線 */
.promise__divider {
  border: none;
  border-top: 1px dashed var(--color-gray);
  margin: 10vw 0;
}

/* ----------------------------------------
   CTA（コンバージョンセクション）
   ---------------------------------------- */

#cta {
  background: linear-gradient(135deg, var(--color-white) 0%, var(--main-color-pale) 100%);
  padding: 16vw 0;
  position: relative;
  overflow: hidden;
}

/* 背景装飾 */
#cta::before {
  content: '';
  position: absolute;
  top: -20%;
  right: -10%;
  width: 60vw;
  height: 60vw;
  border-radius: 50%;
  background-color: rgba(16, 208, 171, 0.06);
  pointer-events: none;
}

.cta__inner {
  padding: 0 8%;
  position: relative;
  z-index: 1;
}

/* メインCTA */
.cta__main {
  background-color: var(--color-white);
  border-radius: 12px;
  padding: 8vw var(--pad-card-sp);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
  margin-bottom: 4vw;
  text-align: center;
}

.cta__icon {
  font-size: 10vw;
  color: var(--main-color);
  margin-bottom: 3vw;
}

.cta__copy {
  font-family: 'Klee One', serif;
  font-size: var(--fs-h2-small-sp);
  color: var(--color-text);
  line-height: 1.6;
  margin-bottom: 3vw;
}

.cta__note {
  font-size: var(--fs-sub-sp);
  color: var(--color-light-brown);
  margin-bottom: 5vw;
}

/* 横パディングが 6vw だと「見学を申し込む（履歴書不要）」が収まらず2行になっていた。
   .cta__main が --pad-card-sp（5vw）を持つぶん、このボタンだけ内容幅が
   他ページの CTA ボタンより 42px（414px 時）狭く、必要幅 316px に対し 306px しかない。
   全て vw 基準なので 320〜750px の全 SP 幅で溢れる。

   横パディングを詰めて解消する。width: 100% + justify-content: center の
   フレックスなので、横パディングはボタンの見た目の大きさにも中身の位置にも
   影響せず、内容の行ボックスを狭めるだけの値である（＝見た目は変わらない）。
   font-size は下げない。--fs-h4-sp は .hyg-cta__btn-main と共有する
   「ページ主CTA」のサイズで、ここだけ下げると2つの主CTAが不揃いになる。

   縦の 4vw と PC の `18px 30px` は据え置き。 */
.cta__btn-main {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  padding: 4vw 2vw;
  background: linear-gradient(135deg, var(--main-color) 0%, #0DBFA0 100%);
  color: var(--color-white);
  border-radius: var(--radius-btn);
  font-size: var(--fs-h4-sp);
  font-weight: var(--fw-bold);
  transition: var(--transition-btn);
  box-shadow: 0 4px 16px rgba(16, 208, 171, 0.4);
  width: 100%;
}

.cta__btn-main:hover {
  background: linear-gradient(135deg, var(--main-color-hover) 0%, var(--main-color) 100%);
  box-shadow: 0 6px 20px rgba(16, 208, 171, 0.5);
  transform: translateY(-2px);
}

.cta__btn-main .material-icons-round {
  font-size: 1.2em;
}

.cta__free-label {
  display: inline-block;
  font-size: var(--fs-xs-sp);
  color: var(--color-light-brown);
  margin-top: 2vw;
  letter-spacing: 0.05em;
}

/* サブCTA */
.cta__sub {
  background-color: var(--color-deep-green);
  border-radius: 12px;
  padding: 6vw var(--pad-card-sp);
  text-align: center;
}

.cta__sub-copy {
  font-size: var(--fs-sub-sp);
  color: rgba(255, 255, 255, 0.8);
  line-height: 1.8;
  margin-bottom: 4vw;
}

.cta__btn-sub {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  padding: 3.5vw 5vw;
  /* 白で塗り、インクを深緑に反転させる。地色だった --color-deep-green をそのまま文字側へ
     移す形で、SPナビ（.sp-nav__link のアイコン）が確立した反転と同じ語彙。白地 6.03:1。
     文字にメインカラーは使えない（#10D0AB は白地 1.98:1）。
     枠線パターン（透過地＋白枠線）から塗りへ変えたのは、エントリー導線が面を持たず
     軽く見えていたため。同じ「深緑地の二次ボタン」である .hyg-cta__btn-sub（hygienist.css）
     も同時に揃えてある。
     枠線は白で残す。塗りと同色なので見えないが、外すと内容幅が上下左右 2px ずつ広がり、
     下の「横パディングがぎりぎり」の前提が崩れるため外形寸法は動かさない。 */
  background-color: var(--color-white);
  border: 2px solid var(--color-white);
  border-radius: var(--radius-btn);
  color: var(--color-deep-green);
  font-size: var(--fs-table-sp);
  font-weight: var(--fw-bold);
  transition: var(--transition-btn);
  width: 100%;
}

/* ホバーは淡ミント地に沈める。文字は深緑のまま（#DBF8F3 上で 5.38:1）。
   ブランドカラーが差す方向なので「弱くなる」印象にならず、かつ一次ボタン専用の
   translateY(-2px) ＋ box-shadow の語彙を侵さないので主従が保たれる。
   なお「深緑面は淡色へ反転できない」の制約は面（パネル背景）についてのもので、
   面の上に載るボタンの塗りには及ばない（#DBF8F3 は深緑地に対して 5.1:1）。 */
.cta__btn-sub:hover {
  background-color: var(--main-color-pale);
  border-color: var(--main-color-pale);
}

.cta__btn-sub .material-icons-round {
  font-size: 1.2em;
}

/* ----------------------------------------
   詳細誘導パネル（3パネル）
   ---------------------------------------- */

/* 下パディングを持たない。3枚のパネルは全幅・隙間なしで積まれた「帯」であり、
   直後の #cta も自前の背景を持つ帯なので、帯どうしを直接接させる。
   間隔は #cta 自身の padding-top（16vw / PC 100px）が担う。
   ここに下パディングを置くと、地色（#F3F0EC）がグレーパネル #F4F4F4 と
   #cta グラデ始点 #FFFFFF の間に挟まるだけで、コントラスト比 1.0〜1.05 のため
   境界としては見えず、CTA を押し下げるだけになる。
   .faq-staff → .faq-cta / .flow-section → .recruit-cta と同じ型。 */
#guide-panels {
  padding: 16vw 0 0;
}

/* グリッド：SP は縦並び */
.guide-panels__grid {
  display: flex;
  flex-direction: column;
}

/* 各パネル共通 */
.guide-panel {
  position: relative;
  overflow: hidden;
}

.guide-panel__img {
  width: 100%;
  overflow: hidden;
  position: relative;
}

.guide-panel__img img {
  width: 100%;
  height: 52vw;
  object-fit: cover;
  display: block;
  transition: transform 0.6s ease;
}

.guide-panel:hover .guide-panel__img img {
  transform: scale(1.04);
}

/* パネルは3枚とも全幅（グリッドの各列が窓端まで届く）なので、
   ここの 8% はそのままサイト共通ガターと一致する */
.guide-panel__body {
  padding: 7vw 8%;
  position: relative;
}

/* 英字ラベル */
.guide-panel__en-label {
  display: block;
  font-family: var(--font-en);
  /* --font-en はイタリックで使う。指定を落とすとロゴのローマン体と競合する */
  font-style: italic;
  font-size: 3.4vw;
  /* 読み込むのは EB Garamond italic 500/600。ラベルは 500 */
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: none;
  margin-bottom: 2.5vw;
}

/* キャッチコピー */
.guide-panel__catch {
  font-family: 'Klee One', serif;
  font-size: var(--fs-h2-small-sp);
  line-height: 1.55;
  margin-bottom: 3vw;
}

/* 説明テキスト */
.guide-panel__text {
  font-size: var(--fs-sub-sp);
  line-height: 1.9;
  margin-bottom: 4vw;
}

/* 付箋風メモ */
.guide-panel__memo {
  display: inline-block;
  position: absolute;
  bottom: 3vw;
  right: 3vw;
  font-family: 'Klee One', serif;
  font-size: 3.5vw;
  background-color: var(--color-deep-green);
  color: #FFFFFF;
  padding: 0.35em 0.75em;
  border-radius: 2px;
  transform: rotate(-1.5deg);
  transform-origin: center;
  box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.2);
}

/* ボタン */
.guide-panel__btn {
  display: inline-block;
  font-size: var(--fs-sub-sp);
  font-weight: 400;
  letter-spacing: 0.12em;
  padding-bottom: 0.35em;
  border-bottom: 1px solid currentColor;
  transition: opacity 0.3s ease, letter-spacing 0.3s ease;
}

.guide-panel__btn:hover {
  opacity: 0.65;
  letter-spacing: 0.2em;
}

/* ---- カラーバリエーション ---- */

/* 白パネル（院長紹介） */
.guide-panel--white {
  background-color: var(--color-white);
}

.guide-panel--white .guide-panel__en-label {
  color: var(--color-light-brown);
}

.guide-panel--white .guide-panel__catch {
  color: var(--color-text);
}

.guide-panel--white .guide-panel__text {
  color: var(--color-dark-gray);
}

.guide-panel--white .guide-panel__memo {
  background-color: var(--color-deep-green);
  color: #FFFFFF;
}

.guide-panel--white .guide-panel__btn {
  color: var(--color-text);
}

/* 深グリーンパネル（衛生士の仕事） */
.guide-panel--green {
  background-color: var(--color-deep-green);
}

.guide-panel--green .guide-panel__en-label {
  color: #C4A854;
  opacity: 0.9;
}

.guide-panel--green .guide-panel__catch {
  color: var(--color-white);
}

.guide-panel--green .guide-panel__text {
  color: rgba(255, 255, 255, 0.85);
}

.guide-panel--green .guide-panel__memo {
  background-color: #FFFFFF;
  color: var(--color-deep-green);
}

/* ボタンは操作要素なので白。ゴールド #C4A854 は深緑地で 2.65:1 まで落ちる
   （英字ラベルは読ませないキッカーなのでゴールドのまま据え置く → 仕様書 3章）。 */
.guide-panel--green .guide-panel__btn {
  color: var(--color-white);
}

/* 淡グレーパネル（FAQ） */
.guide-panel--gray {
  background-color: #F4F4F4;
}

.guide-panel--gray .guide-panel__en-label {
  color: var(--color-light-brown);
}

.guide-panel--gray .guide-panel__catch {
  color: var(--color-text);
}

.guide-panel--gray .guide-panel__text {
  color: var(--color-dark-gray);
}

.guide-panel--gray .guide-panel__memo {
  background-color: var(--color-deep-green);
  color: #FFFFFF;
}

.guide-panel--gray .guide-panel__btn {
  color: var(--color-text);
}

/* ----------------------------------------
   スクロールアニメーション
   ---------------------------------------- */

/* フェードインアップ */
.fade-in-up {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.fade-in-up.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* フェードイン */
.fade-in {
  opacity: 0;
  transition: opacity 0.7s ease;
}

.fade-in.is-visible {
  opacity: 1;
}

/* 遅延 */
.delay-1 { transition-delay: 0.1s; }
.delay-2 { transition-delay: 0.2s; }
.delay-3 { transition-delay: 0.3s; }
.delay-4 { transition-delay: 0.4s; }

/* ----------------------------------------
   PC（751px以上）
   ---------------------------------------- */

@media (min-width: 751px) {

  /* MV */
  #mv {
    height: 100vh;
    height: 100svh;
    min-height: 600px;
  }

  /* フォールバック背景をPC用カットへ（js/main.js の slidesPC[0] と同一） */
  .mv__vegas {
    background-image: url('../images/mv_01_consultation_pc.webp');
  }

  /* PC はフォントが rem 基準になるため、フェードのストップも px に切り替える。
     内訳（下端から）: padding-bottom 120px → ボタン 54px → PRポイント帯 62px
                       → メインコピー 上端 約445px（最上ストップ 655px の内側）

     PC 側の関係は「キャッチ上端 + 210px」（旧 510 + 210 = 720）。リード文 95px を
     PRポイント帯 62px に置き換えて上端が 510px → 445px に下がったため、同じ関係を
     保つ値へ引き直した。キャッチ1行目に載る不透明度は旧実装と同じ 0.84 のままで、
     変わるのは文字の無い上部に残る素の写真の量だけ（100svh 900px で 20% → 27%）。 */
  .mv__overlay {
    background-image: linear-gradient(
      to top,
      rgba(255, 255, 255, 0.96) 0,
      rgba(255, 255, 255, 0.90) 280px,
      rgba(255, 255, 255, 0.82) 455px,
      rgba(255, 255, 255, 0)    655px
    );
  }

  .mv__content {
    padding: 0 60px 120px;
    max-width: 1340px;
    margin: 0 auto;
    left: 0;
    right: 0;
  }

  .mv__catch-main {
    font-size: 3.5rem;
    max-width: 1100px;
  }

  /* アイコンは .numbers__icon と同じ 1.75rem。2列 × max-width 460px で各 214px あり、
     最長の「一流講師の院内研修」9字（16px × 9 + 字間 ≒ 150px）に対し余裕がある。
     SP と同じ「アイコン上・文字下・中央揃え」の形を維持する（構造は変えない） */
  .mv__points {
    gap: 32px;
    max-width: 460px;
  }

  .mv__point {
    gap: 10px;
  }

  .mv__point-icon {
    font-size: 1.75rem;
  }

  .mv__point-text {
    font-size: 1rem;
  }

  .mv__catch {
    margin-bottom: 30px;
  }

  .mv__btns {
    flex-direction: row;
    gap: 16px;
    max-width: 560px;
  }

  .mv__btn {
    padding: 16px 30px;
    font-size: var(--fs-table);
    flex: 1;
  }

  /* SP で非表示にしたものを戻す。横並び（flex: 1）なので縦の積み上げを増やさず、
     2つが「1行のペア」として読める（→ base の .mv__btn--secondary のコメント） */
  .mv__btn--secondary {
    display: flex;
  }

  .mv__scroll {
    bottom: 32px;
    font-size: var(--fs-xs);
  }

  .mv__scroll .material-icons-round {
    font-size: 22px;
  }

  /* 数字セクション */
  #numbers {
    padding-top: 100px;
    padding-bottom: var(--cnt-b-pc);
  }

  .numbers__head {
    margin-bottom: 50px;
    text-align: center;
  }

  .numbers__head-copy {
    font-size: 1.75rem;
    margin-bottom: 1em;
  }

  .numbers__head-lead {
    font-size: var(--fs-body);
    max-width: 700px;
    margin: 0 auto;
    text-align: left;
  }

  .numbers__grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
  }

  .numbers__panel {
    padding: 32px var(--pad-card-sm-pc);
  }

  /* 3.5rem(56px) の数値に対し 0.50。指標名（20px）との比は 1.40。
     アイコンは線画でインク量が少ないため、この比なら知覚上の重みはラベル側が上回る */
  .numbers__icon {
    font-size: 1.75rem;
    margin-bottom: 12px;
  }

  /* 数値と指標名をひと塊に見せる（SP 1.5vw と同じ意図） */
  .numbers__value {
    margin-bottom: 8px;
  }

  /* かつて .numbers__num--long（clamp(2rem, 3.5vw, 3.5rem)）で 18:40 / 1分単位 / 100%
     の3枚だけ数値を縮めていたが、単位を .numbers__unit に分離したことで数値部は
     18:40 / 1 / 100 となり、パネル内寸（1200px カラム時 215px）に 3.5rem のまま収まる。
     4つの数値が横一列に同じ大きさで並ぶことがこのセクションの訴求の核なので、
     1枚だけ小さい状態を解消して modifier ごと廃止した。 */
  .numbers__num {
    font-size: 3.5rem;
  }

  /* 数値の 0.43。sample.html「実績カード 2a」の 26/46 = 0.57 に準じた比 */
  .numbers__unit {
    font-size: var(--fs-h3a);
  }

  /* 数値の 0.36 / 説明文の 1.67。カード内の階層を
     値(56) > 指標名(20) > 補足(12) の3段に分けるための中間段 */
  .numbers__label {
    font-size: var(--fs-h3b);
  }

  .numbers__rule {
    margin: 16px 0;
  }

  .numbers__note {
    font-size: var(--fs-xs);
  }

  /* 約束セクション */
  #promises {
    padding-top: 100px;
    padding-bottom: var(--cnt-c-pc);
  }

  .promises__head {
    margin-bottom: 60px;
  }

  .promise {
    display: flex;
    align-items: flex-start;
    gap: 50px;
    margin-bottom: 80px;
  }

  /* 偶数番目は逆配置 */
  .promise:nth-child(even) {
    flex-direction: row-reverse;
  }

  .promise__img {
    width: 45%;
    flex-shrink: 0;
    margin-bottom: 0;
  }

  .promise__img img {
    height: 320px;
  }

  .promise__text {
    flex: 1;
  }

  .promise__label {
    /* ピルの padding が消えた分を補って 12px から一段広げる */
    gap: 16px;
    margin-bottom: 16px;
  }

  .promise__num {
    /* 直下 .promise__title（1.75rem = 28px）との比 1.14 */
    font-size: 2rem;
  }

  .promise__tag {
    /* --font-en を使う既存要素の最小値（.guide-panel__en-label）に揃える。
       直下 .promise__title（28px）との比 0.57 */
    font-size: 1rem;
  }

  .promise__title {
    font-size: 1.75rem;
    margin-bottom: 20px;
  }

  .promise__body {
    font-size: var(--fs-body);
  }

  .promise__divider {
    margin: 60px 0;
  }

  /* CTA */
  #cta {
    padding: 100px 0;
  }

  #cta::before {
    width: 500px;
    height: 500px;
    top: -100px;
    right: -50px;
  }

  .cta__inner {
    padding: 0 60px;
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    gap: 24px;
    align-items: stretch;
  }

  .cta__main {
    flex: 3;
    padding: 50px var(--pad-card-lg-pc);
    margin-bottom: 0;
  }

  .cta__icon {
    font-size: 3rem;
    margin-bottom: 16px;
  }

  .cta__copy {
    font-size: 1.5rem;
    margin-bottom: 16px;
  }

  .cta__note {
    font-size: var(--fs-sub);
    margin-bottom: 28px;
  }

  .cta__btn-main {
    padding: 18px 30px;
    font-size: var(--fs-h4);
    max-width: 380px;
    margin: 0 auto;
  }

  .cta__free-label {
    font-size: var(--fs-xs);
    margin-top: 10px;
  }

  .cta__sub {
    flex: 2;
    padding: 40px var(--pad-card-pc);
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .cta__sub-copy {
    font-size: var(--fs-sub);
    margin-bottom: 24px;
  }

  .cta__btn-sub {
    padding: 14px 24px;
    font-size: var(--fs-table);
    max-width: 280px;
    margin: 0 auto;
  }

  /* 詳細誘導パネル PC */
  #guide-panels {
    padding: 100px 0 0;
  }

  .guide-panels__grid {
    flex-direction: row;
    align-items: stretch;
  }

  .guide-panel {
    flex: 1;
    display: flex;
    flex-direction: column;
  }

  .guide-panel__img img {
    height: 280px;
  }

  .guide-panel__body {
    padding: 36px var(--pad-card-pc) 40px;
    flex: 1;
    display: flex;
    flex-direction: column;
  }

  .guide-panel__en-label {
    font-size: 1rem;
    margin-bottom: 12px;
  }

  .guide-panel__catch {
    font-size: 1.375rem;
    margin-bottom: 14px;
  }

  .guide-panel__text {
    font-size: var(--fs-sub);
    margin-bottom: 16px;
    flex: 1;
  }

  .guide-panel__memo {
    font-size: 0.8rem;
    bottom: 16px;
    right: 16px;
  }

  .guide-panel__btn {
    font-size: var(--fs-sub);
  }
}

/* .font-klee 上書き（common.css より後に読み込まれるため詳細度で競合回避） */
.mv__catch-main.font-klee {
  font-family: 'Klee One', serif;
}