@charset "UTF-8";

/* ========================================
   interview.css
   社員インタビュー（member1〜member8 共通）スタイル
======================================== */

/* ----------------------------------------
   カラー variant 切り替え
   .interview をベースに 3 色のテーマを CSS 変数で切り替える。
   - デフォルト（緑）: .interview            （member3, member6）
   - 青              : .interview.interview--blue  （member2, member5）
   - 赤              : .interview.interview--red   （member1, member4）
---------------------------------------- */
.interview {
  --interview-c-main: #47D684;                       /* メイン色（Hero 背景 / quote / Q番号 等）*/
  --interview-c-dark: #2ED36E;                       /* 濃いめ（Profile / Q&A items のフレームボーダー）*/
  --interview-c-light: #A5E8C4;                      /* 薄め（Hero "INTERVIEW XX" 等）*/
  --interview-c-grid: rgba(71, 214, 132, 0.09625);   /* 方眼 grid 線 */
  --interview-c-hover: #D0F5E0;                      /* Question list hover 背景 */
  --interview-c-active: #E5F9EE;                     /* Question list active 背景 */
}

.interview.interview--blue {
  --interview-c-main: #55BAF5;
  --interview-c-dark: #3DA2E5;
  --interview-c-light: #B4DDF7;
  --interview-c-grid: rgba(85, 186, 245, 0.09625);
  --interview-c-hover: #D0E8F7;
  --interview-c-active: #E5F2FB;
}

.interview.interview--red {
  --interview-c-main: #F75959;
  --interview-c-dark: #E03737;
  --interview-c-light: #FAB0B0;
  --interview-c-grid: rgba(247, 89, 89, 0.09625);
  --interview-c-hover: #F7D0D0;
  --interview-c-active: #FBE5E5;
}

/* ----------------------------------------
   Profile セクション
   ロゴ写真 + 名前 + 役職バッジ + 年 + 吹き出し
---------------------------------------- */

/* XD 1枚目: 写真（大・左）｜役職バッジ + 入社年（横並び）｜吹き出し（右・全幅）
   を 1 行に並べる。写真は絶対配置で枠上にはみ出す。 */
.interview-profile {
  position: relative;
  display: flex;
  align-items: center;
  gap: 28px;
  box-sizing: border-box;
  /* 下のメイン（.interview-content）の中身（Q&A items）と左右端を揃える:
     content は max-width 1400px + 左右 padding 24px なので、その内側端は
     中央から ±(1400/2 − 24)=±676px。Profile も同じ左右 24px の余白を取り、
     max-width を 1400−48=1352px にすることで外枠を content 内側端に一致させる。 */
  width: calc(100% - 48px);             /* 左右 24px の外側余白（content の padding と一致）*/
  max-width: 1352px;                    /* 1400 − 左右 24px×2 */
  margin: 130px auto 80px;
  padding: 24px 40px 24px 300px;        /* 左 padding で写真ぶんを空ける */
  min-height: 200px;
  background-color: #fff;
  background-image:
    linear-gradient(to right, var(--interview-c-grid) 1px, transparent 1px),
    linear-gradient(to bottom, var(--interview-c-grid) 1px, transparent 1px);
  background-size: 20px 20px;           /* 方眼の1マス = 20px */
  border: 10px solid var(--interview-c-main);           /* ヒーロー背景と同色（main）に統一 */
  border-radius: 30px;
  box-shadow:
    0 0 0 2px #1a1a1a,
    inset 0 0 0 2px #1a1a1a;
}

/* ---- 写真ブロック（左、絶対配置で枠の上にはみ出す） ---- */
.interview-profile-photo {
  position: absolute;
  left: 56px;
  bottom: 12px;
  width: 220px;
  margin: 0;
  z-index: 1;
}

.interview-profile-photo-main {
  display: block;
  width: 100%;
  height: auto;
}

.interview-profile-photo-name {
  position: absolute;
  left: 50%;
  bottom: 0;                               /* 写真の下端を基準に */
  width: 78%;
  transform: translate(-50%, 0%);
  z-index: 2;
}

/* ---- 役職バッジ + 入社年（Figma: 縦並び＝営業職が上、0000年入社が下） ---- */
.interview-profile-info {
  display: flex;
  flex-direction: column;          /* Figma: 縦並び */
  align-items: center;             /* PC: 営業職バッジに対し 0000年入社 を中央寄せ */
  gap: 10px;
  flex-shrink: 0;
}

/* 情報行に入れる名前画像は PC では非表示（PC は写真上に重ねる名前を使う）。
   SP（Figma）でのみ情報行の左端に表示する。 */
.interview-profile-info-name {
  display: none;
}

.interview-profile-role {
  display: inline-block;
  padding: 5px 26px;
  background-color: #1a1a1a;
  color: #fff;
  border-radius: 999px;
  font-size: 3.2rem;
  letter-spacing: 0.05em;
  line-height: 1.2;
  white-space: nowrap;
}

.interview-profile-year {
  font-size: 2rem;
  color: #1a1a1a;
  white-space: nowrap;
}

/* キャッチコピー内の引用符（“ ”）を緑に */
.interview-profile-catch-quote {
  color: var(--interview-c-main);
}

/* 行末が全角「。」「！」で終わる行は、その記号の右側のアキ（字送り内の空白）が
   閉じ引用符との間に残り、右だけ本文と引用符が離れて見える。該当行の閉じ引用符に
   --tight を付けて本文側へ寄せ、右の内側アキを詰める（かな止めの行は不要なので非適用）。*/
.interview-profile-catch-quote--tight {
  margin-left: -0.25em;
}

/* ---- キャッチコピー吹き出し（右・残り幅いっぱい） ---- */
.interview-profile-catch {
  position: relative;
  flex: 1;
  min-width: 0;
  padding: 20px 40px;
  background-color: #fff;
  border: 3px solid #1a1a1a;
  border-radius: 22px;
  font-size: 2.6rem;
  color: #1a1a1a;
  letter-spacing: 0.02em;
  text-align: center;
  /* キャッチは「指定位置（<wbr> / <br>）」のみで改行する。CJKの文字間自動改行を
     禁止（keep-all）し、非指定位置での折返し・見切れを防ぐ。収まらない幅では
     ②レイアウト（全幅キャッチ）へ切替える設計。*/
  word-break: keep-all;
}

/* 吹き出しの「しっぽ」：外側のボーダー三角（1.6倍）*/
.interview-profile-catch::before {
  content: "";
  position: absolute;
  top: 50%;
  left: -21px;                       /* -13 × 1.6 */
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 16px 21px 16px 0;    /* 10/13 → 16/21 */
  border-color: transparent #1a1a1a transparent transparent;
  transform: translateY(-50%);
}

/* 吹き出しの「しっぽ」：内側の白い三角（縁取り太さ＝本体3pxに統一）*/
.interview-profile-catch::after {
  content: "";
  position: absolute;
  top: 50%;
  left: -17px;                       /* outer apex(-21) + 4px → 視覚的に3pxの縁取りに */
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 15px 20px 15px 0;    /* 外側(16/21)と相似形でサイズ調整 */
  border-color: transparent #fff transparent transparent;
  transform: translateY(-50%);
}

/* ----------------------------------------
   Q&A 一覧（質問インデックス）
---------------------------------------- */

.interview-qlist-section {
  flex-shrink: 0;
  width: 410px;
  margin: 0;
  padding: 0;
  position: sticky;
  /* 本文は base.css の .l-scroll（ヘッダー下のスクロール領域）内でスクロールするため、
     その上端（＝ヘッダー直下）に貼り付ければよい。 */
  top: 0;
  align-self: flex-start;
  /* ドロワー展開時のオーバーレイ（実効 z-index 1500）に覆われるよう、
     ヘッダーのスタッキングコンテキスト（1500）より低くしておく。 */
  z-index: 1;
  /* ビューポート内に収まらない場合は内部スクロールで全件アクセス可能に */
  max-height: calc(100vh - var(--header-h-now) - 20px); /* ヘッダー高さ + 下余白を差し引く */
  overflow-y: auto;
  overflow-x: hidden;              /* 横スクロール抑止 */
  /* スクロールバー非表示（機能は維持）*/
  scrollbar-width: none;           /* Firefox */
  -ms-overflow-style: none;        /* 旧Edge / IE */
}

/* WebKit（Chrome / Safari）のスクロールバー非表示 */
.interview-qlist-section::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}

/* ---- 見出し（Q&A タイトル + クリックしてジャンプ）---- */
.interview-qlist-heading {
  width: 410px;                     /* ボタン幅と同じ → 内側の画像中心がボタン中心と縦軸で揃う */
  text-align: center;
  margin: 0;
  padding-bottom: 32px;             /* margin → padding に変換（sticky 時にボタンが見出しに被って隠れるように） */
  /* Question list 内部スクロール時も常に上部に固定 */
  position: sticky;
  top: 0;
  z-index: 1;
  background-color: var(--color-bg); /* スクロールしたボタンを背景で隠す */
}

.interview-qlist-title {
  margin: 0;
  line-height: 0;
}

.interview-qlist-title img {
  display: inline-block;
  width: auto;
  height: 90px;
}

.interview-qlist-subtitle {
  margin: 14px 0 0;
  line-height: 0;
}

.interview-qlist-subtitle img {
  display: inline-block;
  width: auto;
  height: 22px;
}

/* ---- ナビ ---- */
.interview-qlist-list {
  display: flex;
  flex-direction: column;
  align-items: flex-start;          /* 左端揃え（Profileフレーム左端と同位置）*/
  gap: 18px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.interview-qlist-item {
  list-style: none;
}

/* ---- 各リンク（角丸ピル・ホバーで緑に） ---- */
.interview-qlist-link {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 410px;                     /* 450 → 380 */
  padding: 10px 28px;
  background-color: #fff;
  border: 1px solid #1a1a1a;
  border-radius: 999px;
  color: #1a1a1a;
  text-decoration: none;
  transition: background-color 0.2s ease;
  box-sizing: border-box;
}

/* ホバー：薄い緑（プレビュー） */
.interview-qlist-link:hover {
  background-color: var(--interview-c-hover);        /* #C8F3DA より15%薄め */
}

/* クリック後：常時ハイライト（JSで is-active を付与） */
.interview-qlist-link.is-active,
.interview-qlist-link.is-active:hover {
  background-color: var(--interview-c-active);        /* #C8F3DA より薄めの淡いミントグリーン */
}

.interview-qlist-link:focus-visible {
  outline: none;
}

/* ---- Q アイコン + 数字 ---- */
.interview-qlist-q {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}

.interview-qlist-q-icon {
  display: inline-block;
  color: var(--interview-c-main);                       /* 数字と同じ緑 */
  font-size: 2.4rem;                    /* 数字と同じサイズ */
  line-height: 1;
  -webkit-text-stroke: 0.5px #1a1a1a;   /* 数字と同じ太さ・形の縁取り */
}

.interview-qlist-num {
  margin-left: 2px;                     /* Q と一体で「Q1」と読めるよう詰める */
  line-height: 1;
  font-size: 2.4rem;
  color: var(--interview-c-main);
  -webkit-text-stroke: 0.5px #1a1a1a;
}

/* ---- 質問テキスト ---- */
.interview-qlist-text {
  flex-grow: 1;
  font-size: 1.7rem;
  line-height: 1.4;
  white-space: nowrap;             /* Question list の文字は必ず 1 行に保つ */
}

/* ----------------------------------------
   Q&A 詳細セクション（Q行 + A行 + 任意の写真）
---------------------------------------- */

.interview-qa {
  display: flex;
  flex-direction: column;
  gap: 18px;
  scroll-margin-top: 24px;           /* .l-scroll 上端からの余白（ヘッダーはスクロール領域の外）*/
}

/* ---- Q行 / A行 共通 ---- */
.interview-qa-row {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

.interview-qa-row--q {
  align-items: center;               /* Q行はアイコンと吹き出しを縦中央揃え */
}

.interview-qa-row-icon {
  flex-shrink: 0;
  display: block;
  width: 50px;
  height: 50px;
}

/* ---- Q行：質問テキストを吹き出し風のピル形に（Profileの吹き出しと同形式） ---- */
.interview-qa-row--q .interview-qa-question {
  position: relative;
  flex-grow: 1;
  margin: 0;
  padding: 14px 20px;               /* 横 30→20 に詰めて文字幅を確保 */
  background-color: #fff;
  border: 2px solid #1a1a1a;
  border-radius: 22px;              /* Profile catch と同じ角丸長方形 */
  font-size: 2rem;                  /* 見出しと共通サイズ。1.9→2.0: 本文18px化に伴い階層を回復（260723）*/
  line-height: 1.4;
  color: #1a1a1a;
  white-space: nowrap;             /* 質問は必ず 1 行に保つ */
}

/* 吹き出しのしっぽ：外側ボーダー三角（左向き） */
.interview-qa-row--q .interview-qa-question::before {
  content: "";
  position: absolute;
  top: 50%;
  left: -12px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 8px 12px 8px 0;
  border-color: transparent #1a1a1a transparent transparent;
  transform: translateY(-50%);
}

/* 吹き出しのしっぽ：内側白三角 */
.interview-qa-row--q .interview-qa-question::after {
  content: "";
  position: absolute;
  top: 50%;
  left: -8px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 6px 10px 6px 0;
  border-color: transparent #fff transparent transparent;
  transform: translateY(-50%);
}

/* ---- A行：回答吹き出し（Profile catch と同じデザイン形式） ---- */
.interview-qa-frame {
  position: relative;
  flex-grow: 1;
  min-width: 0;
  padding: 14px 20px 20px;          /* 上:14 / 左右:20（Q行ピルと揃える）/ 下:20 */
  background-color: #fff;
  border: 2px solid #1a1a1a;
  border-radius: 22px;
}

/* 吹き出しのしっぽ：外側ボーダー三角（Q行ピルと同じサイズで揃える）*/
.interview-qa-frame::before {
  content: "";
  position: absolute;
  top: 25px;                        /* A icon (50px) の中心位置 */
  left: -12px;                      /* -21 → -12（Q行ピルと同じ間隔に）*/
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 8px 12px 8px 0;     /* Q行ピルと同じサイズ */
  border-color: transparent #1a1a1a transparent transparent;
  transform: translateY(-50%);
}

/* 吹き出しのしっぽ：内側白三角（2px の縁取り） */
.interview-qa-frame::after {
  content: "";
  position: absolute;
  top: 25px;
  left: -8px;                       /* -14 → -8（Q行ピルと同じ）*/
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 6px 10px 6px 0;     /* Q行ピルと同じサイズ */
  border-color: transparent #fff transparent transparent;
  transform: translateY(-50%);
}

/* ---- 見出し ---- */
.interview-qa-headline {
  margin: 0 0 14px;                 /* 下の本文との余白：h2の上下padding(14)に統一 */
  font-size: 2rem;                  /* h2質問と共通サイズ。1.9→2.0: 階層回復（260723）。
                                       最長38文字×20px=760 ＜ 本文幅796 で全見出し1行維持 */
  line-height: 1.7;
  color: #1a1a1a;
  /* 1行固定はしない。＠ 位置で 2 つの .qa-nb（各 nowrap）に分割してあるので、
     1 行に収まればそのまま 1 行、収まらなければ ＠ 境界でのみ改行する。
     右側の余白は .interview-qa-frame の左右 padding(20px) が対称に効くため、
     見出し側で個別指定は不要（左右の余白は同じ）。 */
}

/* 黄色マーカーハイライト（文字全体を黄色で覆う）
   正は #FFEAB8（配色資料の指定値。know.css の同用途と同値）。
   一時期 #FFEA8B としていたのは下2桁を取り違えたタイポ */
.interview-qa-marker {
  background-color: #FFEAB8;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  padding: 0 2px;
}

/* ---- 本文 ---- */
.interview-qa-body {
  font-size: 1.8rem;               /* 1.6→1.8：他ページの本文（20〜24px）との差を縮小（260723）*/
  line-height: 1.9;
  color: #1a1a1a;
}

.interview-qa-body p {
  /* 段落間の余白を 0 にし、段落をまたいでも行間（line-height）と
     同じ間隔にする（要らない行間を詰める）*/
  margin: 0;
}

/* ---- 挿入写真（Q2/Q4/Q6 のみ） ----
   画像（839x366）には黒枠 3px が焼き込まれており、縮小表示されると
   リサンプリングで枠の太さが辺ごとに 1.5〜2.5px 等へ不均一に潰れる。
   対策: 焼き込み枠を 12px ぶん外へクロップして隠し、枠線は CSS
   （固定値）で figure 側に描く（company の写真と同じ手法）。
   太さは吹き出し .interview-qa-frame の border と同じ（PC 2px / SP 1.5px）。*/
.interview-qa-photo {
  margin: 4px 0 0 66px;              /* アイコン(50) + gap(16) 分インデントしてフレーム左端と揃える */
  overflow: hidden;
  border: 2px solid #212121;         /* 焼き込み枠と同色 */
  border-radius: 16px;
}

.interview-qa-photo img {
  display: block;
  width: 100%;
  /* 旧: width calc(100%+24px)+margin -12px で「焼き込み黒枠」をクリップ外へ逃していたが、
     260724 再取込の新画像(NN-N.png)は枠なしのため拡大クリップを廃止。
     枠線は上の .interview-qa-photo の border(#212121) が担う。 */
}

/* ----------------------------------------
   Q&A 全体レイアウト（Question list 左 + Q&A items 右の横並び）
---------------------------------------- */

.interview-content {
  display: flex;
  align-items: flex-start;          /* 上揃え（Question list が短くても上端で固定）*/
  gap: 40px;                        /* 左右の塊どうしの間隔（60→40 に詰めて本文幅を確保）*/
  width: 100%;
  /* Q&A 本文が ＠（手動改行 .qa-br）位置で 1 行に収まるよう、
     2 カラム全体（Question list + Q&A items）の最大幅を拡大。
     拡大しても margin:auto で中央寄せを維持する。
     1400→1460: 本文 16→18px 拡大（260723）に伴い、＠最大42文字
     （42×18=756px）が本文幅（約796px）に収まるよう +60。 */
  max-width: 1460px;
  margin: 80px auto;
  padding: 0 24px;                  /* 画面端ギリギリにならないよう左右に最小余白 */
}

/* ＠ による手動改行は既定で無効（自然折り返し）。
   本文が ＠ 位置（最大 42 文字）で 1 行に収まる十分な幅でのみ有効化する。
   これにより、それ未満の幅で ＠ 以外の位置に自然折り返しが入るのを防ぐ。
   1400→1508: 本文 18px 化（260723）で必要幅が増えたぶん引き上げ
   （コンテンツ最大幅 1460 ＋ 左右 padding 48）。 */
.qa-br {
  display: none;
}

@media screen and (min-width: 1508px) {
  .qa-br {
    display: inline;
  }
}

/* 見出しを「指定位置で・1 行に収まらない時だけ」改行する区切り。
   見出しを 2 つの .qa-nb（各々 nowrap）に分割すると、1 行に収まれば
   そのまま 1 行、収まらなければ .qa-nb の境界で改行する。
   ※ 既定は nowrap（Profile キャッチ用。キャッチはフォントが幅連動で縮むため
     セグメントが常に収まり、はみ出さない）。*/
.qa-nb {
  white-space: nowrap;
}

/* Q&A 見出しの qa-nb（260723）。方針: ＠優先／折り返しは自然。
   ■ 既定＝＠モード
     word-break: keep-all で CJK を語のように束ね、セグメント内では改行しない。
     ＝ ＠（＝span 間の <wbr>）位置だけが改行点になる（全セグメントが1行に
       収まる見出しは、この＠位置できれいに改行される）。
   ■ セグメント単体が吹き出しに収まらない見出し
     interview.js が幅を実測して .qa-nb-wrap を付与し、下のルールで
     通常の日本語折り返し（禁則処理あり）へ切り替える。＝＠を完全に捨て、
     「、」「。」が孤立しない自然折り返しのみになる（＠と折り返しの混在を防ぐ）。
   display は変えないので黄マーカー（box-decoration-break）は崩れない。*/
.interview-qa-headline .qa-nb {
  white-space: normal;
  word-break: keep-all;
}
.interview-qa-headline.qa-nb-wrap .qa-nb {
  word-break: normal;
}


.interview-qa-items {
  flex-grow: 1;                     /* 右側、残り幅を占有 */
  display: flex;
  flex-direction: column;
  gap: 40px;                        /* 60 × 2/3 = 40px に縮小 */
  min-width: 0;                     /* flex 子要素のはみ出し防止 */
  padding: 40px 28px;               /* 緑フレーム内側の余白（左右 40→28 に詰めて本文幅を確保）*/
  /* 緑フレーム（Profile と同形式） */
  background-color: #fff;
  background-image:
    linear-gradient(to right, var(--interview-c-grid) 1px, transparent 1px),
    linear-gradient(to bottom, var(--interview-c-grid) 1px, transparent 1px);
  background-size: 20px 20px;
  border: 10px solid var(--interview-c-main);           /* ヒーロー背景と同色（main）に統一 */
  border-radius: 30px;
  box-shadow:
    0 0 0 2px #1a1a1a,
    inset 0 0 0 2px #1a1a1a;
}

/* ----------------------------------------
   Hero セクション（INTERVIEW タイトル + 役職バッジ + 車 + 道路）
---------------------------------------- */

.interview-hero {
  position: relative;             /* 車を main の外側で配置するため */
  width: 100%;
}

/* メインビジュアル領域（緑背景 + 各要素）
   Figma 準拠で全幅 clamp 連続スケーリング（PC 1920px ⇔ SP 640px を補間）。
   台形・「INTERVIEW」テキストは廃止。 */
.interview-hero-main {
  position: relative;
  width: 100%;
  /* 背景高さ: interview index のヒーローと同じカーブに統一（サイズの増減を全ページで一致）。
     380(1920の値)を「コンテンツhold終端(画面1260px)」まで維持 → 以下で縮小。
     タブレット帯・スマホ帯の続きはこのセクション末尾の @media (1024/648) で定義。*/
  height: clamp(222px, 59px + 25.484vw, 380px);   /* 380@1260 / 222@640 */
  background-color: var(--interview-c-main);                /* 指定の緑 */
  overflow: hidden;
}

/* タイトル「社員インタビュー」+「INTERVIEW 06」のラッパー（中央寄せ・Figma）
   Figma: PC top 背景内 約24% / 中央寄せ。幅で font-size 相当を表現。
   INTERVIEW 06 はこのラッパー内に置くことで、タイトルと一緒に中央配置され、
   左端も自動で揃う（画面端で切れない）。 */
.interview-hero-title-wrap {
  position: absolute;
  /* タイトル上端を背景内 約24% に（Hero 高さに対する比率で配置）*/
  top: clamp(16%, 12% + 5vw, 24%);
  left: 50%;
  transform: translateX(-50%);
  /* タイトル画像幅: index と同じカーブ（689@1260までhold → 縮小。以下は@mediaで続く）*/
  width: clamp(min(280px, 63vw), 65.97vw - 142.2px, 689px);
  max-width: 90%;
  z-index: 2;
}

.interview-hero-title-img {
  display: block;
  width: 100%;
  height: auto;
}

/* 「INTERVIEW 06」（白・Dela Gothic One・Figma）
   Figma: PC 40px / SP 22px、タイトルの左端の下・白。
   タイトル直下に小さい余白（Figma PC 15.6px / SP 7px 相当）で配置。 */
.interview-hero-no {
  margin: clamp(4px, 0.97vw - 2.2px, 10px) 0 0;          /* index と同一（10@1260 hold）*/
  /* タイトル画像の左端から少しだけ右にずらして光学的に揃える */
  padding-left: 0.1em;
  font-size: clamp(2.2rem, 3.4px + 2.903vw, 4rem);       /* index と同一（40@1260 hold）*/
  color: #fff;                      /* Figma: 白 */
  letter-spacing: 0.05em;
  line-height: 1;
  white-space: nowrap;
}

/* 車画像（Figma: 中央やや右・道路の上）
   - 車の下端が道路の白破線（道路中央＝下から約20px）より下に出ないよう、
     bottom を 22px 以上に保つ（全画面幅共通）。
   - SP では一回り小さく（150px〜）。Figma PC 270px。 */
.interview-hero-car {
  position: absolute;
  bottom: clamp(22px, 18px + 0.6vw, 28px);
  /* Figma: 中央やや右。中心基準で配置し、画面幅が変わっても中心%が一定になるようにする
     （旧 right:10% 固定だと広い画面ほど右端に寄っていた）。*/
  left: 70%;
  transform: translateX(-50%);
  width: clamp(150px, 67.4px + 12.903vw, 230px);  /* index と同一（230@1260 hold）。位置は member のまま */
  height: auto;
  z-index: 3;
}
/* member 1・4・7（赤テーマ）は index と同じ「タイヤが道路の白線に接する」位置。
   赤SUVのPNG（01/04/07-car）は下側に画像高9.3%の透明余白があるため translateY で相殺し、
   bottom:18px でタイヤ下端が白線上端に接する（index と同じ実測補正値）。
   スマホ帯(≤648px)は index 同様に member 標準の浮き位置へ戻す（下の @media で上書き）。*/
.interview--red .interview-hero-car {
  bottom: 18px;
  transform: translate(-50%, 9.3%);
}

/* 下部の道路（グレー + 白の点線）Figma: PC/SP とも 40px */
.interview-hero-road {
  position: relative;
  width: 100%;
  height: 40px;
  background-color: #595959;
}

/* 道路の中央に白い破線（縦中央に水平方向）。破線の長さ/周期も index と同一カーブ */
.interview-hero-road::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: clamp(3px, 2px + 0.08vw, 4px);
  background-image: repeating-linear-gradient(
    to right,
    #fff 0,
    #fff clamp(14px, 0.7px + 1.84vw, 24px),
    transparent clamp(14px, 0.7px + 1.84vw, 24px),
    transparent clamp(28px, 1.4px + 3.7vw, 48px)
  );
  transform: translateY(-50%);
}

/* ---- ヒーローのタブレット帯・スマホ帯（index と同一カーブ）----
   タブレット帯(1024→689px)は切替直前(1025px)の値でhold → 689px以下で縮小。
   スマホ帯(≤648px)は index と同じ（タイトル503基準＋90%ガード・INTERVIEW連動比率・
   車150px・帯はスマホ430px以下で222px=従来どおり）。*/
@media (max-width: 1024px) {
  .interview-hero-main {
    height: clamp(222px, 46.47vw, 320px);            /* 320@1025 hold */
  }
  .interview-hero-title-wrap {
    width: clamp(min(280px, 63vw), 77.5vw, 534px);   /* 534@1025 hold */
  }
  .interview-hero-no {
    font-size: clamp(2.2rem, 4.81vw, 33.2px);
    margin: clamp(4px, 1.12vw, 7.7px) 0 0;
  }
  .interview-hero-car {
    width: clamp(150px, 28.98vw, 200px);
  }
  .interview-hero-road::before {
    background-image: repeating-linear-gradient(
      to right,
      #fff 0,
      #fff clamp(14px, 2.84vw, 19.6px),
      transparent clamp(14px, 2.84vw, 19.6px),
      transparent clamp(28px, 5.7vw, 39.3px)
    );
  }
}
@media (max-width: 648px) {
  .interview-hero-main {
    height: clamp(222px, 36.8px + 43.08vw, 278px);   /* 222@≤430 / 278@560〜648 */
  }
  .interview-hero-title-wrap {
    width: clamp(min(280px, 63vw), 152.9vw, 503px);  /* 503 hold（max-width:90%ガードで縮む）*/
  }
  .interview-hero-no {
    font-size: min(31.2px, 5.58vw);                  /* タイトルの縮み(90vw)と同比率で連動 */
    margin: min(7.3px, 1.31vw) 0 0;
  }
  .interview-hero-car {
    width: clamp(150px, 110px + 6.25vw, 270px);      /* SPで150px（従来のmember値）*/
  }
  /* 赤テーマ(1・4・7)の接地位置も、スマホ帯では index 同様に標準の浮き位置へ戻す */
  .interview--red .interview-hero-car {
    bottom: clamp(22px, 18px + 0.6vw, 28px);
    transform: translateX(-50%);
  }
  .interview-hero-road::before {
    background-image: repeating-linear-gradient(
      to right,
      #fff 0,
      #fff clamp(14px, 8px + 0.83vw, 30px),
      transparent clamp(14px, 8px + 0.83vw, 30px),
      transparent clamp(28px, 16px + 1.67vw, 60px)
    );
  }
}

/* ========================================
   SP / タブレット（1023px 以下）
   方針: PC のデザインをそのまま縮小して見せる
   - 768〜1023px のタブレット帯（PC で幅を狭めた場合も含む）も
     SP と同じ 1 カラムレイアウトを適用する
   - Question list（左カラム）は非表示
   - Hero / Profile / Q&A items は同じ構造で寸法・フォントを縮小
======================================== */
@media screen and (max-width: 1160px) {

  /* ヘッダーがハンバーガーに切り替わる幅（--bp-drawer = 1160px）と同期。
     Hero / Profile は後段ブロックで定義。ここでは Question list 非表示 /
     Q&A レイアウトなど共通 SP スタイルのみ。 */

  /* ---- Question list は SP では非表示 ---- */
  .interview-qlist-section {
    display: none;
  }

  /* ---- Q&A 全体レイアウト ---- */
  .interview-content {
    display: block;                    /* flex を解除（左カラムが無いため）*/
    width: 90vw;                       /* Profile (90vw) と同じ＝両端に左右各 5vw の余白 */
    max-width: none;
    margin: 40px auto;                 /* 左右 auto で中央寄せ（Profile と両端余白を統一）*/
    padding: 0;
    gap: 0;
  }

  /* SP では Profile と同じく四方を緑フレーム + 黒サンドイッチで囲んだ
     閉じた箱にする（両端余白 5vw を活かし、Profile と見た目を統一）*/
  .interview-qa-items {
    gap: 24px;
    padding: 18px 14px;               /* 上下は線との間隔 / 左右は中身の呼吸間 */
    /* 枠の太さは Profile と統一し、画面幅で連続変化:
       スマホ(375px)で細く(緑2px/黒1px)、1023px で太く(緑5px/黒2px)。*/
    border-width: clamp(2px, 0.264px + 0.463vw, 5px);
    border-radius: 14px;             /* Profile の角丸に合わせて閉じた箱に */
    background-size: 14px 14px;       /* 方眼は PC 20 → SP 14 に縮小 */
    box-shadow:
      0 0 0 clamp(1px, 0.421px + 0.154vw, 2px) #1a1a1a,
      inset 0 0 0 clamp(1px, 0.421px + 0.154vw, 2px) #1a1a1a;
    /* border-color / background-color(#fff) / background-image(方眼) は PC を継承 */
  }

  /* ---- Q&A 詳細 ---- */
  .interview-qa {
    gap: 12px;
    scroll-margin-top: 16px;
  }

  .interview-qa-row {
    gap: 10px;
  }

  /* アイコン（Q / A）をフレーム廃止で空いた余白に合わせて一回り大きく */
  .interview-qa-row-icon {
    width: 44px;
    height: 44px;
  }

  /* Q 行（質問ピル）*/
  .interview-qa-row--q .interview-qa-question {
    padding: 9px 16px;
    border-width: 1.5px;
    border-radius: 14px;
    /* 1160px では PC(2rem)と段差なし → スマホ幅でも下限 1.7rem(17px) を確保し
       本文(15px〜)より常に大きく保つ（260723: 階層の逆転解消）。
       そのぶん「1行保持」はやめ、長い質問はピル内で2行に折り返す。 */
    font-size: clamp(1.7rem, 1.549rem + 0.403vw, 2rem);
    white-space: normal;
    line-height: 1.45;
  }

  .interview-qa-row--q .interview-qa-question::before {
    left: -10px;
    border-width: 6px 10px 6px 0;
  }

  .interview-qa-row--q .interview-qa-question::after {
    left: -7px;
    border-width: 5px 8px 5px 0;
  }

  /* A 行（回答フレーム）*/
  .interview-qa-frame {
    padding: 12px 16px 18px;
    border-width: 1.5px;
    border-radius: 14px;
  }

  .interview-qa-frame::before {
    top: 22px;                         /* A アイコン(44px) の中心位置 */
    left: -10px;
    border-width: 6px 10px 6px 0;
  }

  .interview-qa-frame::after {
    top: 22px;
    left: -7px;
    border-width: 5px 8px 5px 0;
  }

  .interview-qa-headline {
    margin: 0 0 10px;
    /* 1160px で PC(2rem)と接続。下限 1.7rem(17px) で本文(15px〜)より常に大きく
       （260723: 階層の逆転解消）。折り返しは従来どおり自然折り返し。 */
    font-size: clamp(1.7rem, 1.549rem + 0.403vw, 2rem);
    line-height: 1.6;
  }

  .interview-qa-body {
    /* 1160px 直下で PC(1.8rem)と段差なく、スマホ幅でも最低 1.5rem(15px) を確保
       （PC 16→18px 拡大に合わせて下限も 14→15px へ連動）*/
    font-size: clamp(1.5rem, 1.349rem + 0.403vw, 1.8rem);
    line-height: 1.85;
  }

  /* 挿入写真（Q&A 内）*/
  .interview-qa-photo {
    margin: 4px 0 0 54px;             /* アイコン(44) + gap(10) ぶんインデント */
    border-width: 1.5px;              /* 吹き出し .interview-qa-frame(1.5px) と同じ太さ */
    border-radius: 10px;
  }
}

/* ========================================
   スマホ / タブレット（1023px 以下）— XD デザイン（2 枚目カンプ）
   方針: Question list が非表示になる 1023px 以下では、XD のスマホ
         カンプに合わせた Hero / Profile を適用する。
   - Hero: 「営業職 藤村さん」バッジは非表示。タイトルを左寄せ、
           「INTERVIEW 06」をその下・左寄せ、車を中央寄りに。
   - Profile: 写真（大・左）＋ 右に 役職/入社年、
              下段に幅広の吹き出しキャッチ（2 段構成）。
   ※ ヘッダーのハンバーガー切替（--bp-drawer = 1160px）と同期。
======================================== */
@media screen and (max-width: 1160px) {

  /* 絶対配置要素（車・タイトル等）由来の横スクロールを抑止
     ※ Question list (sticky) を非表示にしているため副作用なし */
  .interview {
    overflow-x: hidden;
  }

  /* Hero は Figma 準拠で全幅 clamp 連続スケーリングのため、
     SP 専用の上書きは不要（デフォルト定義がそのまま縮小する）。*/

  /* ---------- Profile（Figma スマホ準拠）----------
     構成（Figma 640px 基準）:
       - 枠: 角丸 10px、緑 1px + 黒 1px の細い縁取り
       - 写真: 左・大きめ、枠の上端からはみ出す
       - 上段右: 「藤村さん（名前画像）｜営業職｜0000年入社」を横 1 行
       - 下段: 吹き出しキャッチを全幅
     grid: [写真 | 情報] を上段、[吹き出し]を全幅下段に。*/
  /* Figma 準拠の構造:
     - 枠は「高さ固定（幅の約 34%）」で背を低くする（中身で膨らませない）。
     - 写真は絶対配置で枠の左に置き、枠の上端をまたいで上にはみ出す（PC と同方式）。
     - 情報行（名前/営業職/入社年）と吹き出しは、写真ぶんを padding-left で
       空けた右側に通常フローで縦積み。
     枠の縦横比 Figma: 高さ 176 / 幅 573 = 30.7% だが、内側 padding と
     コンテンツを収めるため実効 34% 程度にする。*/
  /* 新レイアウト（スマホ）:
     - 枠は中身（写真＋情報＋吹き出し）に合わせて高さ可変（min-height/固定高なし）。
     - 上段 = [写真] + [名前ロゴ / 職種・入社年]（横並び・写真の右に2行）
     - 下段 = [吹き出しキャッチ]（全幅・写真の下）
     写真は絶対配置をやめ、通常フローにして枠が確実に全部を囲む。*/
  .interview-profile {
    display: grid;
    grid-template-columns: clamp(110px, 30vw, 220px) minmax(0, 1fr); /* 写真列 / 情報列。minmax(0,1fr)で情報がトラックを押し広げて箱があふれるのを防ぐ */
    grid-template-areas:
      "photo info"
      "catch catch";
    align-items: center;
    column-gap: clamp(10px, 2.4vw, 18px);
    row-gap: clamp(10px, 2.4vw, 16px);
    position: relative;
    box-sizing: border-box;
    width: 90vw;
    max-width: none;
    min-width: 0;                 /* 親(flex/grid)アイテムとして内容で広がり90vwを超えるのを防ぐ */
    /* 道路↔緑枠上辺のアキを×2/3にするため margin-top を 32px→-7px（全体を39px上へ）。
       上端側(枠上辺より上=写真のはみ出し領域)を道路へ寄せる。下マージンは据え置き。*/
    margin: -7px auto 48px;
    /* 写真+情報の塊を「箱ごと」下へ動かす量（写真・情報の両 translateY で共有）。
       吹き出しの尻尾のすぐ上に来るよう、両者を同じだけ下げる。*/
    --box-down: 10vw;
    /* 枠線（赤）と黒縁の太さを変数化（下の ::before で再利用）*/
    --pf-bw: clamp(2px, 0.264px + 0.463vw, 5px);   /* 赤い枠線の太さ */
    --pf-sw: clamp(1px, 0.421px + 0.154vw, 2px);   /* 黒い縁取りの太さ */
    /* 枠は ::before に移して「下端固定で 2/3 高さ」に縮める。中身を1pxも
       動かさないため、元の border ぶんを padding に足してジオメトリを維持する。*/
    border: 0;
    padding:
      calc(clamp(12px, 3vw, 22px) + var(--pf-bw))
      calc(clamp(12px, 3vw, 20px) + var(--pf-bw));
    background: none;          /* 白＋方眼は ::before へ */
    box-shadow: none;          /* 黒縁は ::before へ */
    isolation: isolate;        /* ::before(z-index:-1) を枠内に閉じ込める */
  }

  /* プロフィール枠（赤線＋黒縁＋白＋方眼）＝ 下端基準で高さ 2/3 に縮める。
     下線の位置は据え置き、上線だけ下がる。中身（写真・情報・吹き出し）は不動で、
     上 1/3 は枠の外（地色）になる。横位置は元のまま。*/
  .interview-profile::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    /* 緑枠を縦1.2倍にする＝上方向に伸ばす（上辺を上げる）。旧 top:40%(高さ60%)を
       ×1.2＝高さ72% → top:28%。下端は固定で、中身が増えれば下に伸びる。*/
    top: 28%;
    bottom: 0;                    /* 下端は元の枠下端に固定（中身が増えたら下方向に可変）*/
    box-sizing: border-box;
    z-index: -1;                  /* 中身より背面 */
    border: var(--pf-bw) solid var(--interview-c-main);
    border-radius: 14px;
    background-color: #fff;
    background-image:
      linear-gradient(to right, var(--interview-c-grid) 1px, transparent 1px),
      linear-gradient(to bottom, var(--interview-c-grid) 1px, transparent 1px);
    background-size: 14px 14px;
    box-shadow:
      0 0 0 var(--pf-sw) #1a1a1a,
      inset 0 0 0 var(--pf-sw) #1a1a1a;
  }

  /* 写真（左・通常フロー）。枠の中に収まり、はみ出さない。*/
  .interview-profile-photo {
    grid-area: photo;
    position: static;
    /* 枠上辺を上げた(40%→28%)ぶんの上移動 ＋ 箱ごと下移動(--box-down) */
    transform: translateY(calc(clamp(-56px, -11vw, -36px) + var(--box-down)));
    align-self: center;
    width: 100%;
    min-width: 0;
    margin: 0;
    z-index: 1;
  }

  /* 写真に重ねる名前は SP（Figma）では非表示。情報行の名前を使う */
  .interview-profile-photo-name {
    display: none;
  }

  /* 写真の右の情報。[名前ロゴ]（上段）/ [営業職 + 0000年入社]（下段）を
     縦中央に寄せて近づける（離さない）。row-gap は小さく取り、2行を
     ひとかたまりとして写真の縦中央に置く。サイズを大きくしても 2 行を
     近づけることで写真の高さに収める。*/
  .interview-profile-info {
    grid-area: info;
    align-self: center;                   /* 写真の縦中央に置く（伸ばさない）*/
    transform: translateY(var(--box-down));  /* 写真と同じだけ下へ（箱ごと移動）*/
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: center;                /* 2行を中央にまとめる */
    align-items: center;
    row-gap: clamp(2px, 0.6vw, 5px);      /* 名前と職種行を近づける（離さない）*/
    column-gap: clamp(8px, 2.4vw, 16px);  /* 営業職と入社年の間隔 */
    min-width: 0;
    margin: 0;
  }

  /* 上段: 名前ロゴ（100%幅で1段目を占有）。大きく（従来比 約3倍感）。*/
  .interview-profile-info-name {
    display: block;
    flex: 0 0 100%;
    width: auto;
    min-width: 0;                         /* 画像の実寸でカラムを押し広げない（横あふれ防止）*/
    max-width: 100%;
    height: clamp(5rem, 14vw, 9rem);      /* 大きく。2行を詰めたので写真高に収まる */
    object-fit: contain;
    object-position: left center;
  }

  /* 営業職バッジ（下段）。大きめ（従来比 約2倍感）。*/
  .interview-profile-role {
    flex-shrink: 0;
    padding: clamp(4px, 1.3vw, 8px) clamp(12px, 3.6vw, 22px);
    font-size: clamp(1.7rem, 4.6vw, 3rem);
    line-height: 1;
  }

  /* 入社年（下段）。営業職と縦中央で揃える。大きめ（従来比 約2倍感）。*/
  .interview-profile-year {
    flex-shrink: 0;
    font-size: clamp(1.5rem, 4vw, 2.6rem);
    line-height: 1;
    text-align: left;
    white-space: nowrap;
  }

  /* 下段: 吹き出しキャッチを「写真・情報の下に全幅」で配置（grid catch 行）。
     写真とは重ならず、row-gap ぶんの余白を空けて下に来る。
     しっぽは左上から上向き（左上の写真へ向ける）。*/
  .interview-profile-catch {
    grid-area: catch;
    position: relative;
    z-index: 1;
    display: block;
    margin: clamp(8px, 2.2vw, 16px) 0 0;  /* 写真・情報との間の最低余白 */
    width: 100%;
    min-width: 0;
    padding: clamp(11px, 2.8vw, 18px) clamp(12px, 3.2vw, 22px);
    border-width: clamp(1.5px, 0.2px + 0.4vw, 3px);
    border-radius: 12px;
    font-size: clamp(1.4rem, 3.4vw, 2.4rem);
    line-height: 1.45;
    text-align: center;
    /* 折返しは「指定位置（qa-nb 境界 / <br>）」のみ。非指定のガタつき折返しを禁止するため
       overflow-wrap:anywhere は使わない。素の本文は各 member 側で qa-nb（nowrap 単位）に
       分割してあるので、単位内では折り返らず、単位境界でのみ改行される。*/
  }

  /* 吹き出しのしっぽ（上向き三角・写真へ向ける）。
     x位置 = メイン画像（左列）のx軸中央に合わせる。
       catch の左端＝枠の左padding。写真列の中央 ≒ 写真幅/2。
       → left = 写真幅/2 ≒ clamp(55px,15vw,110px)。translateX(-50%) で三角中心をそこへ。
     合体: 外側黒三角の底辺を吹き出し上辺(border)に重ね、内側白三角で枠内を繋ぐ。*/
  .interview-profile-catch::before {
    content: "";
    display: block;
    position: absolute;
    /* 黒三角：底辺を吹き出しの上辺にピッタリ重ねる。三角の高さぶん上へ出す。
       top:0 が catch の上端（ボーダー外側）。三角の高さぶん負の top で上に出す。*/
    top: calc(-1 * clamp(11px, 2.8vw, 18px));
    left: clamp(55px, 15vw, 110px);
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 clamp(8px, 2.2vw, 14px) clamp(11px, 2.8vw, 18px) clamp(8px, 2.2vw, 14px);
    border-color: transparent transparent #1a1a1a transparent;
  }
  .interview-profile-catch::after {
    content: "";
    display: block;
    position: absolute;
    /* 白三角：黒三角の内側に重ね、吹き出しの枠線(border)ぶん下げて内部の白と繋ぐ。*/
    top: calc(-1 * clamp(9px, 2.3vw, 15px) + clamp(1.5px, 0.2px + 0.4vw, 3px));
    left: clamp(55px, 15vw, 110px);
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 clamp(6px, 1.7vw, 11px) clamp(9px, 2.3vw, 15px) clamp(6px, 1.7vw, 11px);
    border-color: transparent transparent #fff transparent;
  }
}

/* ========================================
   ① 広いSP（仮 720px〜1160px）：写真(左・2段ぶん) ｜ 情報1行(上) ／ キャッチ(下)
   情報[名前・職種・入社年]が枠内で1行を保てる間はこの配置。1行を保てなくなる幅で
   ②（情報2行＋キャッチ全幅下）へ切替（ブレークポイントは実測で調整）。
======================================== */
@media screen and (min-width: 680px) and (max-width: 1160px) {
  /* 写真を絶対配置にして「枠の高さを決める要素」から外す。情報1行＋キャッチが
     枠の高さを決める（＝②と同じ考え方）。写真は左上に重ねて枠上へはみ出す。
     BP=680px：情報[名前・職種・入社年]の1行の下限。ただし素のサイズでは
     680〜710px で行が枠の右線を越えるため（member2〜7 で最大32px超過を実測）、
     680〜760px は名前ロゴ・職種・入社年・間隔を一段縮小して枠内に収める
     （下記の各 clamp。760px で従来サイズに合流し、それ以上の幅は見た目不変）。以下は②。*/
  .interview-profile {
    grid-template-columns: 1fr;
    grid-template-areas:
      "info"
      "catch";
    align-items: stretch;
    --box-down: 0;
    /* ①は枠(::before top:0)が要素上端＝道路まで上がるので、道路↔枠上端の
       クリーム余白を margin-top で作る（写真の上はみ出しはこの余白内に入る）。
       写真は固定px（下記）で上へ76pxはみ出すため、margin-top も固定して
       幅が変わっても道路↔枠のアキ・写真の被り位置が動かないようにする。*/
    margin: 96px auto 48px;
    /* 上下右＝枠内余白（vw可変）。左＝写真ぶんの固定余白。
       写真は絶対配置(固定px)で左上に重ねるので、左paddingも固定にして
       写真と枠の重なり位置・情報列の開始位置を一定に保つ。*/
    padding:
      calc(clamp(18px, 3.4vw, 32px) + var(--pf-bw))
      calc(clamp(14px, 3vw, 22px) + var(--pf-bw))
      calc(clamp(18px, 3.4vw, 32px) + var(--pf-bw))
      244px;
  }
  /* 枠(::before)は「情報＋キャッチ」を包む（写真ぶんの28%オフセットは不要）*/
  .interview-profile::before { top: 0; }
  /* 写真：絶対配置で左上に重ね、枠の上へはみ出す。①の全域で「写真↔枠の重なり」を
     一定にするため、位置・サイズを固定pxにする（vw連動をやめる）。
     枠上辺(=profile上端, ::before top:0)より上へ 76px はみ出し、左は 16px 内側。*/
  .interview-profile-photo {
    position: absolute;
    left: 16px;
    top: -76px;
    width: 210px;
    transform: none;
    align-self: unset;
    z-index: 1;
  }
  /* 情報を1行に（名前・職種・入社年を横並び）。枠内の上段。*/
  .interview-profile-info {
    grid-area: info;
    flex-wrap: nowrap;
    align-self: start;
    transform: none;
    margin: 0;
    /* 680px で 8px → 900px で従来の 18px に合流（枠内収め用の縮小勾配）*/
    column-gap: clamp(8px, 4.55vw - 22.9px, 18px);
  }
  /* 情報行は「名前 > 職種・入社年」の階層にする（名前が主役）。
     名前ロゴPNGは文字の周囲に大きな透明余白を含む
     （実測: 文字高=画像高の約52%、上余白26%・下余白21%、左右余白 各約6%。全8枚共通規格）。
     そのためボックス高≠見た目にならないよう、描画高(--name-h)を大きく取り、
     透明余白ぶんを負マージンで相殺する（レイアウト上の実効高 ≈ 0.55×描画高）。
     見た目の目標: 文字ベースで 名前1 : 職種0.65 : 入社年0.5（PC・スマホ②と同じ階層感）
     ＝ 文字高 680px で約34px → 800px 以上で約40px。
     member8 は 680〜800px が②(pf-late)のため対象外（800〜1160px は後述ブロックで同値）。*/
  body:not(.pf-late) .interview-profile-info-name {
    flex: 0 0 auto;
    width: auto;
    --name-h: clamp(4rem, 9.58vw + 0.3px, 7.7rem);
    height: var(--name-h);
    margin-top: calc(var(--name-h) * -0.24);
    margin-bottom: calc(var(--name-h) * -0.19);
    margin-left: calc(var(--name-h) * -0.1);
    margin-right: calc(var(--name-h) * -0.1);
  }
  /* 職種バッジ・入社年は名前より一段小さく抑える（①帯全域）。680〜約750px は
     さらに縮小勾配で枠内に収める。member8（pf-late）は 680〜800px が②レイアウト
     のため対象外（800〜1160px の同値合わせは後述の専用ブロックで行う）。 */
  body:not(.pf-late) .interview-profile-role {
    font-size: clamp(2.2rem, 4vw - 4px, 2.6rem);
    padding-top: clamp(4px, 1.3vw, 7px);
    padding-bottom: clamp(4px, 1.3vw, 7px);
    padding-left: clamp(10px, 7.5vw - 38px, 18px);
    padding-right: clamp(10px, 7.5vw - 38px, 18px);
  }
  body:not(.pf-late) .interview-profile-year {
    font-size: clamp(1.6rem, 2.08vw + 3.4px, 2rem);
  }
  /* キャッチは情報の下（枠内・写真の右）。全幅にしない。
     「写真の人が話している」ように見せるため、しっぽは②の上向き（→情報行を
     指してしまう）ではなく左向きにして写真へ向ける。しっぽは吹き出し上端からの
     固定距離に置く＝キャッチが1行→2行に増えても接続点（しっぽ）は動かず、
     吹き出しが下方向にだけ伸びる。写真右端(左16px+幅210px=226px)と
     キャッチ左端(左padding 244px)の間の約18pxをしっぽ(奥行17px)が橋渡しする。
     member8 は 680〜800px が②のため、pf-late ブロック側で②のしっぽを再指定する。*/
  .interview-profile-catch {
    grid-area: catch;
    align-self: start;
    margin-top: clamp(8px, 1.6vw, 14px);
  }
  .interview-profile-catch::before {
    top: clamp(14px, 2.2vw, 22px);
    left: -17px;
    transform: none;
    border-width: 13px 17px 13px 0;
    border-color: transparent #1a1a1a transparent transparent;
  }
  .interview-profile-catch::after {
    top: calc(clamp(14px, 2.2vw, 22px) + 1px);
    left: -13px;
    transform: none;
    border-width: 12px 16px 12px 0;
    border-color: transparent #fff transparent transparent;
  }
}

/* ========================================
   ①→②の切替幅（ブレークポイント）をページごとに最適化
   ------------------------------------------------------------
   既定は上の 680px（members1-7 は情報1行＋キャッチが 680px で枠内に収まる）。
   ただし member8 はキャッチの1行が最長（「整備士としての目標につながっている」＝16文字）で、
   ①の狭い列では 800px 未満で吹き出しから溢れるため、切替幅を 800px に引き上げる。
   実装：member8 の <body class="pf-late"> にだけ、680–800px の範囲で①の上書きを
   ②の値へ戻す（＝この帯は②レイアウトにする）。①側を将来調整しても、member8 は
   常に②へ戻るので安全。他ページ（.pf-late なし）は 680px のまま影響を受けない。
======================================== */
@media screen and (min-width: 680px) and (max-width: 799.98px) {
  body.pf-late .interview-profile {
    grid-template-columns: clamp(110px, 30vw, 220px) minmax(0, 1fr);
    grid-template-areas:
      "photo info"
      "catch catch";
    align-items: center;
    --box-down: 10vw;
    margin: -7px auto 48px;
    padding:
      calc(clamp(12px, 3vw, 22px) + var(--pf-bw))
      calc(clamp(12px, 3vw, 20px) + var(--pf-bw));
  }
  body.pf-late .interview-profile::before { top: 28%; }
  body.pf-late .interview-profile-photo {
    position: static;
    left: auto;
    top: auto;
    width: 100%;
    transform: translateY(calc(clamp(-56px, -11vw, -36px) + var(--box-down)));
    align-self: center;
  }
  body.pf-late .interview-profile-info {
    flex-wrap: wrap;
    align-self: center;
    transform: translateY(var(--box-down));
    column-gap: clamp(8px, 2.4vw, 16px);
  }
  body.pf-late .interview-profile-info-name {
    flex: 0 0 100%;
    height: clamp(5rem, 14vw, 9rem);
  }
  body.pf-late .interview-profile-catch {
    align-self: auto;
    margin-top: clamp(8px, 2.2vw, 16px);
  }
  /* しっぽも②の上向き（写真へ向ける）へ戻す（①が左向きに変更されたため再指定）*/
  body.pf-late .interview-profile-catch::before {
    top: calc(-1 * clamp(11px, 2.8vw, 18px));
    left: clamp(55px, 15vw, 110px);
    transform: translateX(-50%);
    border-width: 0 clamp(8px, 2.2vw, 14px) clamp(11px, 2.8vw, 18px) clamp(8px, 2.2vw, 14px);
    border-color: transparent transparent #1a1a1a transparent;
  }
  body.pf-late .interview-profile-catch::after {
    top: calc(-1 * clamp(9px, 2.3vw, 15px) + clamp(1.5px, 0.2px + 0.4vw, 3px));
    left: clamp(55px, 15vw, 110px);
    transform: translateX(-50%);
    border-width: 0 clamp(6px, 1.7vw, 11px) clamp(9px, 2.3vw, 15px) clamp(6px, 1.7vw, 11px);
    border-color: transparent transparent #fff transparent;
  }
}

/* ========================================
   member8 の①帯（800〜1160px）サイズ合わせ
   ------------------------------------------------------------
   職種・入社年の「名前より一段小さい」サイズ指定は body:not(.pf-late) で
   行っているため member8 に当たらない。member8 も①レイアウトになる
   800〜1160px では他ページと同じ値になるよう、ここで同値を明示する
   （680〜800px の②(pf-late)帯は従来サイズのままで対象外）。
======================================== */
@media screen and (min-width: 800px) and (max-width: 1160px) {
  body.pf-late .interview-profile-info-name {
    /* 名前PNGの透明余白補正も他ページと同値（①ブロックのコメント参照）。
       flex/width も①の1行用の値をここで明示（外側②ブロックの flex:0 0 100% を打ち消す）*/
    flex: 0 0 auto;
    width: auto;
    --name-h: 7.7rem;
    height: var(--name-h);
    margin-top: calc(var(--name-h) * -0.24);
    margin-bottom: calc(var(--name-h) * -0.19);
    margin-left: calc(var(--name-h) * -0.1);
    margin-right: calc(var(--name-h) * -0.1);
  }
  body.pf-late .interview-profile-role {
    font-size: 2.6rem;            /* 上の clamp が 800px 以上で到達する cap と同値 */
    padding: 7px 18px;
  }
  body.pf-late .interview-profile-year {
    font-size: 2rem;
  }
}

/* ========================================
   極小スマホ（360px 以下）の見切れ対策
   375px 以上の XD デザインは保ったまま、最小幅でタイトルと
   Profile 情報行が画面端で切れないよう微調整する。
======================================== */
@media screen and (max-width: 360px) {

  /* Profile は写真・情報・吹き出しを vw 比率（clamp）で指定済みのため、
     極小幅でも比率が保たれる。写真と情報の間隔だけ少し詰める。*/
  .interview-profile {
    column-gap: 10px;
  }
}