/* ============================================
   ひすい歯科 採用サイト — スタッフボイスページ専用スタイル
   staff-voice.css
   ※ .page-main / .breadcrumb / .page-title / h2.type-a / .btn / アニメーションは common.css で定義
   モバイルファースト（ブレイクポイント: 751px）／合唱型（設問ごとにまとめる）
   ============================================ */

/* ----------------------------------------
   イントロ（キャッチ＆リード）
   ---------------------------------------- */
.sv-lead {
  padding: 14vw 0 8vw;
  background-color: var(--color-white);
}

.sv-lead__catch {
  font-family: 'Klee One', serif;
  font-size: var(--fs-h2-big-sp);
  font-weight: var(--fw-bold);
  color: var(--color-text);
  line-height: 1.45;
  margin-bottom: 6vw;
  position: relative;
  /* 左端の縦アクセントライン（::before）から本文までの距離。
     カード左ボーダーと本文の関係（.sv-voice 等）と同じ値に揃える */
  padding-left: var(--pad-card-sp);
}

.sv-lead__catch::before {
  content: '';
  display: block;
  width: 4px;
  height: 100%;
  background: linear-gradient(to bottom, var(--main-color), var(--main-color-hover));
  position: absolute;
  left: 0;
  top: 0;
  border-radius: 2px;
}

/* イントロのキャッチは無装飾とするため .marker の指定は削除。
   写真上に載る .sv-turn__ja のマーカー帯も、鉤括弧との二重装飾に
   なっていたため廃止し、傍点（.em-dot）に置き換えた（仕様書 8-1）。 */

.sv-lead__text {
  font-size: var(--fs-body-sp);
  color: var(--color-dark-gray);
  line-height: 1.9;
}

/* ----------------------------------------
   設問セクション（合唱型）
   ---------------------------------------- */
.sv-qa {
  padding: 12vw 0 0;
  background-color: var(--color-bg);
}

.sv-qa__section {
  margin-bottom: 12vw;
}

.sv-qa__section:last-child {
  margin-bottom: 0;
}

/* 設問見出し */
.sv-qa__head {
  display: flex;
  align-items: baseline;
  gap: 3vw;
  padding-bottom: 3vw;
  margin-bottom: 6vw;
  border-bottom: 2px solid var(--main-color);
}

/* 設問番号（Q1〜Q6）。
   .sv-qa__head は数字と和文見出しがベースライン揃えで同一行に並ぶ唯一の箇所のため、
   書体を隣の .sv-qa__title に揃える（common.css の .em-num と同じ理屈 → 8-1章）。
   ウェイトは 700 ではなく 600。Klee One は 400/600 しか読み込んでおらず、
   700 指定は 600 に解決されるため、実際に描画される値を明示する。

   文字色は --color-text。かつて --main-color を使っていたが、白地で
   コントラスト 1.98:1 しかなく、この文字サイズに適用される WCAG AA の
   大文字基準（3:1）を満たさない（仕様書 8-1 C-4）。h3.type-a と同じ処理で、
   メインカラーは文字ではなく .sv-qa__head の border-bottom 側に残してある。
   .sv-qa__title との階層は色ではなくサイズ差が担う（SP 1.40倍 / PC 2.0倍）。 */
.sv-qa__num {
  font-family: 'Klee One', serif;
  font-weight: 600;
  font-size: var(--fs-h2-big-sp);
  color: var(--color-text);
  line-height: 0.9;
  flex-shrink: 0;
}

.sv-qa__title {
  font-family: 'Klee One', serif;
  font-size: var(--fs-h3a-sp);
  color: var(--color-text);
  line-height: 1.4;
}

/* 声のグリッド */
.sv-qa__grid {
  display: flex;
  flex-direction: column;
  gap: 4vw;
}

/* 声カード */
.sv-voice {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  background-color: var(--color-white);
  border-radius: 10px;
  padding: 5vw var(--pad-card-sp) 5.5vw;
  border-left: 4px solid var(--main-color);
  box-shadow: 0 2px 12px rgba(28, 54, 48, 0.05);
  transition: box-shadow var(--transition-base) ease;
}

/* 画面中央に来た1枚だけメインカラーのグローを持たせる（SP専用）。
   36枚のカードが続く構成で「いま読んでいる1枚」を示す手掛かりが無いため。
   js/main.js の initVoiceFocus() が rootMargin '-50% 0px -50% 0px' の
   IntersectionObserver で .is-focus を出し入れする。

   box-shadow はグラデーションを取れず、.sv-voice は overflow: hidden（装飾ナンバーが
   top: -1.6vw ではみ出すため必須）なので擬似要素を外側にぼかす手も使えない。
   近距離を --main-color-hover 寄り、遠距離を --main-color 寄りにした2段重ねで、
   減衰そのものに色の推移を持たせる。

   どちらの段にも y オフセットを与えている。ベージュ地の白カードは面のコントラストが
   1.13:1 しかなく、無方向のグロー（0 0 ...）にすると輪郭を失って背景に沈むため
   （仕様書5章「ベージュ背景に置く白カードの影」）。値の語彙は同章が前例として挙げる
   .numbers__panel ホバー（0 8px 24px rgba(16,208,171,0.2)）に揃える。

   在籍年数（--y3 / --y1 / --y0）では色分けしない。3段階は左ボーダーとタグが担っており、
   グローまで色分けすると地紋側の抑制（仕様書1章）と衝突する。 */
.sv-voice.is-focus {
  box-shadow:
    0 4px 14px rgba(22, 237, 195, 0.3),
    0 12px 32px rgba(16, 208, 171, 0.2);
}

/* モーション低減時は状態の切り替え自体は残し、遷移だけ落とす
   （.em-line と同じ扱い → common.css） */
@media (prefers-reduced-motion: reduce) {
  .sv-voice {
    transition: none;
  }
}

/* 装飾ナンバー：カード左上の淡いセリフ数字（EB Garamond italic / ベタ塗り）。
   輪郭（-webkit-text-stroke）は鋭いエッジが硬質に見えるため使わない。
   EB Garamond の数字はライニング（0〜9 が等高）なので天地は揃う。キャップハイトは
   ゴシック比 92% のため、font-size はゴシック相当値の約 1.09 倍に留める
   （Caveat 時代の 1.3 倍は x-height の低さを補うための値で、この書体には過大）。 */
.sv-voice__no {
  position: absolute;
  top: -1.6vw;
  left: 2.4vw;
  font-family: var(--font-en);
  /* --font-en はイタリックで使う。指定を落とすとロゴのローマン体と競合する */
  font-style: italic;
  font-weight: 600;
  font-size: 12.5vw;
  line-height: 1;
  /* 地紋の 2 桁数字。ラベル英字の 0.06em より詰めて塊として見せる */
  letter-spacing: 0.02em;
  color: rgba(16, 208, 171, 0.18);
  pointer-events: none;
  user-select: none;
  z-index: 0;
}

/* 在籍年数タグ：カテゴリごとに色分けした小さめのタグ（右上） */
.sv-voice__tag {
  position: relative;
  z-index: 1;
  align-self: flex-end;
  display: inline-flex;
  align-items: center;
  padding: 1vw 3.2vw;
  border-radius: 100px;
  font-size: var(--fs-xs-sp);
  font-weight: var(--fw-bold);
  letter-spacing: 0.04em;
  margin-bottom: 3.5vw;
}

/* 在籍年数：ブランドカラー（ティール）の濃淡で展開。在籍が長いほど濃く */
/* 入社3年目（最も濃い） */
.sv-voice--y3 { border-left-color: #00917A; }
.sv-voice--y3 .sv-voice__tag { background-color: #3CC3AB; color: #00372E; }
.sv-voice--y3 .sv-voice__no { color: rgba(0, 145, 122, 0.22); }
/* 入社1年目（中） */
.sv-voice--y1 { border-left-color: #00B89E; }
.sv-voice--y1 .sv-voice__tag { background-color: #9DE9D7; color: #005848; }
.sv-voice--y1 .sv-voice__no { color: rgba(0, 184, 158, 0.18); }
/* 入社1年未満（最も淡い） */
.sv-voice--y0 { border-left-color: #83DBC7; }
.sv-voice--y0 .sv-voice__tag { background-color: #D3F8EE; color: #007763; }
.sv-voice--y0 .sv-voice__no { color: rgba(131, 219, 199, 0.26); }

.sv-voice__text {
  position: relative;
  z-index: 1;
  font-size: var(--fs-body-sp);
  color: var(--color-dark-gray);
  line-height: 1.9;
}

.sv-voice__text strong {
  font-weight: var(--fw-bold);
  background: linear-gradient(transparent 60%, var(--main-color-pale) 60%);
}

/* ----------------------------------------
   転換バンド（前半3問 → 後半3問／不安→安心）
   ---------------------------------------- */
/* SP は .innr の内側から窓幅いっぱいへ逃がす（hygienist.css の .equip-main__image-wrap /
   .equip-banner と同じ理由・同じ手法）。-8% では親の内容幅に解決されて窓端に隙間が残るため、
   窓幅を直接指定して中央基準で振り出す。751px 未満はスクロールバーを持たないので 100vw が窓幅と一致する。

   全幅にするのはレイアウトの都合ではなく、和文が収まらなかったため。
   .innr の内容幅 84vw ではキャプションの左右パディングを引いた 70vw しか使えず、
   --fs-h2-small-sp（6.15vw）の全角12字 = 73.8vw が 3.8vw 足りない。12字目が
   「、」「。」で行頭禁則に掛かるため直前の1字も連れて落ち、明示の2行が各々
   「に、」「た。」の2字だけを抱えた4行になっていた。窓幅まで開くと内容幅は
   84vw（100vw − ガター 8vw × 2）になり、10.2vw（約1.7字）の余裕を持って2行に収まる。

   文字を詰める方向では解けない。左右パディングを 7vw → 5vw まで削っても余裕は 0.2vw
   （390px 端末で 0.8px）しか出ず、letter-spacing で詰める手は傍点が 1em ピッチ前提の
   ため禁じられている（仕様書 8-1「letter-spacing で詰めて逃がしてはいけない」）。

   角丸は全幅では窓端で切れて破綻するため、PC 側で付ける（.equip-banner と同じ扱い）。 */
.sv-turn {
  position: relative;
  overflow: hidden;
  width: 100vw;
  margin-inline: calc(50% - 50vw);
  margin-bottom: 12vw;
  min-height: 56vw;
  display: flex;
  align-items: flex-end;
}

.sv-turn__media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* 転換バンドのオーバーレイ（下端のみ白フェード）
   かつては深緑の暗幕（rgba(28, 54, 48, α) の α を 0.15 → 0.35 → 0.7）を全面に敷いて白文字を載せていたが、
   「画像を暗くしない」というサイト共通の方針（仕様書 1章「写真上の文字の可読性」）に対して
   ここだけが例外になっていた。有彩色なので文字どおりの「無彩色の暗幕」には当たらないが、
   方針の趣旨からは外れる。MV と同じ白フェードに反転し、文字を --color-text に変えている。

   ストップは % ではなく「下端からの長さ」で指定する。バンドの高さは SP が min-height: 56vw、
   PC が aspect-ratio 24/9 なのに対し、キャプションは SP が vw・PC が px で積み上がるため、
   % 指定だと必要な被覆率が SP 約68% / PC 約48% とずれる。片方に合わせると、もう片方で
   「文字の無い領域まで写真が白く濁る」（仕様書 1章）か、逆に文字がフェードの薄い領域に
   はみ出す。長さで指定すればテキスト量と同じ基準になる。

   内訳（下端から）: padding-bottom 8vw → 和文 2行 19.07vw（6.15vw × 1.55 × 2・上端 27.07vw）
                     → margin 2.5vw → キッカー 8.28vw（上端 37.85vw）
   バンド高は min-height の 56vw（キャプションは 44.85vw で収まる）なので、
   46vw で 0 に着地させると上部 10vw（約18%）は写真が素のまま残る。

   下端の 0.62 は AA の下限。--color-text (#3A2F20) は最悪ケース（真っ黒な画素の上）でも
   実効背景が #9E9E9E となり 4.88:1 を確保する。0.58 まで落とすと 4.30:1 で AA を割る。 */
.sv-turn__overlay {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(
    to top,
    rgba(255, 255, 255, 0.62) 0,
    rgba(255, 255, 255, 0.60) 28vw,
    rgba(255, 255, 255, 0.42) 39vw,
    rgba(255, 255, 255, 0)    46vw
  );
  pointer-events: none;
}

/* 親が窓幅いっぱいなので、左右は全幅ブリード用のガター（--innr-bleed-sp-padding / 8vw）で持つ
   （.equip-banner と同じ）。% だと親の内容幅に解決されてサイト共通ガターとずれる。
   これで和文の起点が上下の声カードの左端（＝.innr のガター）と同じ縦ラインに乗る。
   PC では親が .innr の内側に戻るため --pad-card-lg-pc に切り替える。 */
.sv-turn__caption {
  position: relative;
  z-index: 1;
  padding: 7vw var(--innr-bleed-sp-padding) 8vw;
}

.sv-turn__en {
  display: block;
  font-family: var(--font-en);
  /* --font-en はイタリックで使う。指定を落とすとロゴのローマン体と競合する */
  font-style: italic;
  /* 写真の上に載るため、ラベルの 500 より一段太い 600 を使う */
  font-weight: 600;
  font-size: 4.6vw;
  letter-spacing: 0.06em;
  text-transform: none;
  /* 背景が不定な「写真の上の英字」に割り当てられた色（→ 仕様書 2章 --font-en の色）。
     .page-title__en と同じ役目。かつては --main-color-hover だったが、あれが成立していたのは
     暗幕の上だったからで、白フェードの上では 1.1:1 で消える。キッカーの見え方は
     --color-light-brown（白地 2.32:1）と同じ「読ませない」帯に置く前提だが、このキッカーは
     写真の明るい上部（白壁・水色スクラブ）に載るため実測 3.2〜4.2:1 とやや濃く出る。 */
  color: var(--color-brown);
  margin-bottom: 2.5vw;
}

.sv-turn__ja {
  display: block;
  font-family: 'Klee One', serif;
  font-weight: var(--fw-bold);
  font-size: var(--fs-h2-small-sp);
  line-height: 1.55;
  color: var(--color-text);
}

/* 傍点の色はここでは指定しない。--em-dot-color が currentColor のため、
   白フェードの上に載るこの見出しには本文色の点が自動で付く（→ variables.css 8章）。 */

/* ----------------------------------------
   CTA（下層ページ版・doctor.css と同系）
   ---------------------------------------- */
.sv-cta {
  padding: 14vw 0;
  background: linear-gradient(160deg, var(--color-white) 0%, var(--main-color-pale) 100%);
  position: relative;
  overflow: hidden;
}

.sv-cta::before {
  content: '';
  position: absolute;
  bottom: -15%;
  left: -10%;
  width: 55vw;
  height: 55vw;
  border-radius: 50%;
  background-color: rgba(16, 208, 171, 0.05);
  pointer-events: none;
}

.sv-cta__inner {
  position: relative;
  z-index: 1;
}

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

/* ----------------------------------------
   PC（751px 以上）
   ---------------------------------------- */
@media (min-width: 751px) {

  .sv-lead {
    padding: 80px 0 50px;
  }

  .sv-lead .innr {
    display: flex;
    align-items: flex-start;
    gap: 60px;
  }

  .sv-lead__catch {
    flex: 0 0 42%;
    font-size: 2.25rem;
    margin-bottom: 0;
    padding-left: 28px;
  }

  .sv-lead__text {
    flex: 1;
    font-size: var(--fs-body);
    padding-top: 8px;
  }

  .sv-qa {
    padding: 90px 0 0;
  }

  .sv-qa__section {
    margin-bottom: 80px;
  }

  .sv-qa__head {
    gap: 20px;
    padding-bottom: 16px;
    margin-bottom: 36px;
  }

  .sv-qa__num {
    font-size: 3rem;
  }

  .sv-qa__title {
    font-size: var(--fs-h2-small);
  }

  /* 2カラム masonry */
  .sv-qa__grid {
    display: block;
    columns: 2;
    column-gap: 28px;
  }

  .sv-voice {
    break-inside: avoid;
    margin-bottom: 28px;
    padding: 30px var(--pad-card-pc) 30px;
  }

  /* 中央フォーカスのグローは SP 専用。PC は columns: 2 の masonry で
     画面中央のラインに左右2枚が同時に掛かるため適用しない。
     initVoiceFocus() が PC では .is-focus を外すが、JS 無効時やクラスが
     残った場合にも効かないよう、ここでも静止シャドウに戻す。 */
  .sv-voice.is-focus {
    box-shadow: 0 2px 12px rgba(28, 54, 48, 0.05);
  }

  .sv-voice__no {
    top: -10px;
    left: 16px;
    font-size: 55px;
  }

  .sv-voice__tag {
    padding: 5px 15px;
    font-size: var(--fs-xs);
    margin-bottom: 16px;
  }

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

  /* PC は全幅ブリードを解いて .innr の内側（1080px）に戻す。和文は 2rem × 全角12字 = 384px で
     max-width: 640px に収まるため、SP と違って幅を稼ぐ必要がない。
     角丸はここで付ける（SP は窓幅いっぱいで角が切れるため持たせていない）。 */
  .sv-turn {
    width: auto;
    margin-inline: 0;
    border-radius: 12px;
    min-height: 0;
    aspect-ratio: 24 / 9;
    margin-bottom: 80px;
  }

  /* PC はキャプションが rem / px 基準になるため、フェードのストップも px に切り替える
     （.mv__overlay と同じ扱い）。base の vw を残すと 1200px 幅ではフェードが
     バンドの上端を越え、文字の無い領域まで写真が白く濁る。
     バンド高は .innr 1200px − padding 120px = 1080px の 24/9 → 405px。
     内訳（下端から）: padding-bottom 48px → 和文 2行 99px（2rem × 1.55 ×2／max-width 640px に
                       全角12字 384px が収まるため折り返しなし・上端 147px）→ margin 12px
                       → キッカー 36px（上端 195px）
     280px で 0 に着地するので、バンド上部の 125px（約31%）は写真が素のまま残る。 */
  .sv-turn__overlay {
    background-image: linear-gradient(
      to top,
      rgba(255, 255, 255, 0.62) 0,
      rgba(255, 255, 255, 0.60) 150px,
      rgba(255, 255, 255, 0.42) 200px,
      rgba(255, 255, 255, 0)    280px
    );
  }

  .sv-turn__caption {
    padding: 44px var(--pad-card-lg-pc) 48px;
    max-width: 640px;
  }

  .sv-turn__en {
    font-size: 1.25rem;
    margin-bottom: 12px;
  }

  .sv-turn__ja {
    font-size: var(--fs-h2-small);
  }

  .sv-cta {
    padding: 100px 0;
  }

  .sv-cta::before {
    width: 400px;
    height: 400px;
    bottom: -100px;
    left: -80px;
  }

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