/* 内定者インタビュー（04-frontend §3.10、docs/design/10-interview.md 6/22 PC `232:66977` / SP `232:68143`）。
   SP 基準（〜767）→ 768〜 PC 寸法。一覧はデザインが無いので TOP 記事カード（01 §15）を格子に並べる（10 §4）。 */

/* ========== 一覧 ========== */
.p-iv-archive { padding-block: 28px 60px; }
.p-iv-archive__title { margin: 0 0 24px; }
.p-iv-archive__list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.p-iv-archive__empty { margin: 0; color: var(--jn-color-text); font-size: 14px; line-height: 22.4px; }
.p-iv-archive__pager { display: flex; justify-content: center; margin-top: 40px; }

/* カード（TOP 記事ブロックと同じ値: 帯 primary 16/1.4 ls.05em 高さ 38、写真 4:3） */
.p-iv-card__link { display: flex; flex-direction: column; gap: 16px; color: inherit; text-decoration: none; }
.p-iv-card__band {
  word-break: normal; line-break: strict; /* keep-all の非常折りで「！」だけが行頭に来るのを防ぐ（14 幅点検） */
  display: block;
  min-height: 38px;
  margin: 0;
  padding: 7px 8px 7px 16px;
  background: var(--jn-color-primary);
  border: 1px solid var(--jn-color-band-line);
  color: var(--jn-color-white);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.05em;
}
.p-iv-card__media {
  display: block;
  overflow: hidden;
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: var(--jn-radius-md);
  background: var(--jn-color-placeholder);
}
.p-iv-card__img { width: 100%; height: 100%; object-fit: cover; }
.p-iv-card__meta { display: flex; flex-direction: column; gap: 4px; color: var(--jn-color-navy); font-size: 14px; font-weight: 500; line-height: 22.4px; letter-spacing: .05em; }
.p-iv-card__name { font-weight: 700; font-size: 16px; line-height: 25.6px; }
.p-iv-card__label { margin-right: 8px; padding: 0 8px; border-radius: 4px; background: var(--jn-color-secondary); color: var(--jn-color-white); font-size: 12px; font-weight: 700; }
.p-iv-card__link:hover .p-iv-card__band,
.p-iv-card__link:focus-visible .p-iv-card__band { filter: brightness(1.08); }
.p-iv-card__link:hover .p-iv-card__img { transform: scale(1.03); }
.p-iv-card__img { transition: transform var(--jn-duration-hover) ease; }

/* ページャ（page-job-archive.css §1-2 と同じ値。共有化は統合側で components.css へ） */
.p-pager__list { display: flex; align-items: center; gap: 12px; margin: 0; padding: 0; list-style: none; }
.p-pager__num {
  position: relative; display: grid; place-items: center; width: 40px; height: 40px;
  border-radius: var(--jn-radius-pill); color: var(--jn-color-contact);
  font-family: var(--jn-font-latin); font-size: 16px; font-weight: 500; letter-spacing: .05em; text-decoration: none;
}
.p-pager__num.is-current { background: rgba(3, 135, 168, .2); }
.p-pager__num::before { content: ""; position: absolute; inset: -2px; }
a.p-pager__num:hover, a.p-pager__num:focus-visible { background: rgba(3, 135, 168, .1); }
.p-pager__arrows { display: flex; gap: 4px; }
.p-pager__arrow { display: grid; place-items: center; width: 20px; height: 40px; color: var(--jn-color-contact); }
.p-pager__arrow.is-flip .p-pager__icon { transform: scaleX(-1); }
.p-pager__icon { width: 20px; height: 20px; }
@media (max-width: 767px) {
  .p-pager__arrows { gap: 0; margin: 0 -8px; }
  .p-pager__arrow { width: 44px; height: 44px; }
}

/* ========== 詳細 ========== */
/* --- 導入 §3 SP: 地 primary pad 60/16、白カード 343 r20 pad 40/20/60/20 --- */
.p-iv-intro {
  position: relative;
  overflow: hidden;
  padding: 60px 16px;
  /* 霞（SP `232:68153`・`232:68154`・`232:68200` は guide SP `232:65764`・`232:65765`・`232:65812` と形・色・不透明度が同一（全体 JSON で寸法差 0.002px 以内）→ guide の SVG を流用。
     位置: 右上 2 つは guide と同じ、左下は interview 固有（Figma 467 高の導入で x -54・下端から 14.7）） */
  background:
    url("../img/deco-kasumi-pink-sp-1.svg") right -35px top 18px / 161px 67px no-repeat,
    url("../img/deco-kasumi-pink-sp-dot.svg") right 131px top 18px / 12px 12px no-repeat,
    url("../img/deco-kasumi-pink-sp-2.svg") left -54px bottom 15px / 173px 72px no-repeat,
    var(--jn-color-primary);
}
.p-iv-intro__card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
  max-width: 1120px;
  margin-inline: auto;
  padding: 40px 20px 60px;
  border-radius: 20px;
  background: var(--jn-color-white);
  text-align: center;
}
/* 丸帯→点線 SP 10 / PC 16、点線→キャッチ 16（guide `232:64461` と同型。Figma 書き出し実測で位置一致）。線 2px は上下 -1 で吸収 */
.p-iv-intro__badge-wrap { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-bottom: -12px; }
.p-iv-intro__badge-wrap::after { content: ""; display: block; width: 100%; height: 2px; margin: -1px 0; background: linear-gradient(90deg, var(--jn-color-secondary) 50%, transparent 50%) left center / 8px 2px repeat-x; }
.p-iv-intro__badge {
  display: flex;
  align-items: center;
  gap: 20px;
  height: 40px;
  margin: 0;
  padding: 0 10px;
  border-radius: var(--jn-radius-pill);
  background: var(--jn-color-white);
  color: var(--jn-color-navy);
  font-size: 20px;
  font-weight: 700;
  line-height: 32px;
  letter-spacing: .1em;
  white-space: nowrap;
}
/* 招き猫（`232:67017` 44×60 / SP `232:68159`）。guide `232:64464` / SP `232:65770` と 35 ノードの構成・塗り・線が同一（寸法差 0.0015px 以内）→ guide-maneki.svg を流用 */
.p-iv-intro__illust { display: block; flex: none; width: 31px; height: 40px; }
.p-iv-intro__catch {
  margin: 0;
  color: var(--jn-color-contact);
  font-size: 18px; /* Figma SP どおり（ユーザー決定 9/30。以前は AA のため 19px） */
  font-weight: 700;
  line-height: 28.8px;
  letter-spacing: .05em;
}
.p-iv-intro__lead {
  text-wrap: pretty;
  margin: 0;
  color: var(--jn-color-navy);
  font-size: 14px;
  font-weight: 500;
  line-height: 22.4px;
  letter-spacing: .05em;
}

/* --- 内定者紹介 §3 SP: 地 #FAFAFA pad 40/20、写真 335×290 r20 → gap 28 → 項目 gap 20 --- */
.p-iv-profile { padding: 40px 20px; background: #FAFAFA; }
.p-iv-profile__inner { display: flex; flex-direction: column; gap: 28px; max-width: 1120px; margin-inline: auto; }
.p-iv-profile__photo { overflow: hidden; height: 290px; border-radius: 20px; background: var(--jn-color-placeholder); }
.p-iv-profile__img { width: 100%; height: 100%; object-fit: cover; }
.p-iv-profile__list { display: flex; flex-direction: column; gap: 20px; margin: 0; }
.p-iv-profile__row { display: flex; flex-direction: column; gap: 8px; }
.p-iv-profile__band {
  padding: 8px 16px;
  border-radius: 4px;
  background: var(--jn-color-secondary);
  color: var(--jn-color-white);
  font-size: 16px;
  font-weight: 700;
  line-height: 22.4px;
  letter-spacing: .05em;
}
.p-iv-profile__value {
  margin: 0;
  padding: 0 8px;
  color: var(--jn-color-navy);
  font-size: 14px;
  font-weight: 500;
  line-height: 22.4px;
  letter-spacing: .05em;
  overflow-wrap: anywhere;
}

/* --- Q&A §3 SP: pad 40/20/80/20 gap 40、顔 52、本文 14/22.4、行は上揃え --- */
.p-iv-qa { position: relative; padding: 40px 20px 80px; background: var(--jn-color-white); }
.p-iv-qa__inner { display: flex; flex-direction: column; gap: 40px; max-width: 700px; margin-inline: auto; }
.p-iv-qa__inner > * { margin: 0; }
.p-iv-qa__band {
  padding: 8px 16px;
  border-radius: 4px;
  background: var(--jn-color-secondary);
  color: var(--jn-color-white);
  font-size: 16px;
  font-weight: 700;
  line-height: 22.4px;
  letter-spacing: .05em;
}
.p-iv-qa__q,
.p-iv-qa__text,
.p-iv-qa__inner > p {
  color: var(--jn-color-text);
  font-size: 14px;
  font-weight: 500;
  line-height: 22.4px;
  letter-spacing: .05em;
  overflow-wrap: anywhere;
}
.p-iv-qa__a { display: flex; align-items: flex-start; gap: 10px; }
.p-iv-qa__face {
  flex: none;
  overflow: hidden;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--jn-color-placeholder);
}
.p-iv-qa__face-img { width: 100%; height: 100%; object-fit: cover; }
.p-iv-qa__text { flex: 1 1 0; min-width: 0; margin: 0 -0.05em 0 0; } /* 末字の後ろの字間ぶん右へ出して Figma と同じ字数で折る（丸帯の 1px 詰めと同じ考え方。pp2 iv） */
.p-iv-qa__speaker { color: var(--jn-color-contact); font-weight: 700; }
.p-iv-qa__inner > .p-iv-qa__note { color: var(--jn-color-text); font-size: 12px; font-weight: 400; line-height: 19.2px; letter-spacing: .05em; }
.p-iv-qa__inner figure { margin: 0; }
.p-iv-qa__inner img:not(.p-iv-qa__face-img) { display: block; width: 100%; height: 290px; object-fit: cover; }
.p-iv-qa__inner figcaption { margin-top: 8px; color: var(--jn-color-text); font-size: 12px; line-height: 19.2px; }

/* --- 関連求人（Figma に無い。求人カードを CONTACT の前に） --- */
.p-iv-related { max-width: 1120px; margin: 0 auto; padding: 0 20px 60px; }
.p-iv-related__title { margin: 0 0 20px; }
.p-iv-related__list { display: flex; flex-wrap: wrap; gap: 20px; margin: 0; padding: 0; list-style: none; }
.p-iv-related__list > li { width: min(240px, 100%); }

/* ========== 768〜: PC 寸法 ========== */
@media (min-width: 768px) {
  .p-iv-archive { padding-block: 40px 80px; }
  .p-iv-archive__title { margin-bottom: 40px; }
  .p-iv-archive__list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 20px; }
  .p-iv-archive__pager { margin-top: 60px; }
  .p-iv-card__link { gap: 20px; }
  /* 3 列の段をそろえる（UX 検収 r2b L1 / 前回 L3）: カードを 3 段（帯・写真・氏名）の subgrid にし、
     タイトルが 2 行になったカードがあっても同じ行の写真の上端をそろえる。帯は行の高さまで伸びる */
  .p-iv-archive__item,
  .p-iv-card,
  .p-iv-card__link {
    display: grid;
    grid-row: span 3;
    grid-template-rows: subgrid;
    row-gap: 20px;
  }

  /* 導入 §2.1: pad 上下 100、白カード 1120 r20 pad 40/100/60/100、丸帯 高さ 76 pad 8/40 gap 20、32/51.2 */
  .p-iv-intro { padding: 100px 20px; background: url("../img/deco-kasumi-pink-l.svg") left -177.5px top 0 / 422px 1034px no-repeat, url("../img/deco-kasumi-pink-c.svg") calc(50% - 27px) 0 / 949px 1034px no-repeat, url("../img/deco-kasumi-pink-r.svg") right -177.5px top 0 / 451px 1034px no-repeat, var(--jn-color-primary); /* 霞（PC `232:64434` 1445×1034）を左端・中央・右端の 3 群で置く。1440 では元と同じ位置、広い画面でも枠の切り口を見せない（先方指摘 TOP⑦ の横展開） */ }
  .p-iv-intro__badge-wrap { gap: 16px; }
  /* 768 付近で 100 固定だと語の途中で折れるので、1024 以上で 100 に届くよう伸ばす（UX r3 M1） */
  .p-iv-intro__card { padding: 40px clamp(24px, calc((100vw - 768px) * 0.45 + 24px), 100px) 60px; }
  .p-iv-intro__badge { height: 76px; padding: 8px 39px;   /* 字間 0.1em が末字の後ろにも付く分を 1px ずつ詰めて 458 */ font-size: 32px; line-height: 51.2px; }
  .p-iv-intro__illust { width: 44px; height: 60px; }
  .p-iv-intro__catch { max-width: 700px; font-size: 32px; line-height: 51.2px; }
  .p-iv-intro__lead { font-size: 18px; line-height: 28.8px; }

  /* 内定者紹介 §2.2: pad 上下 80、写真 480×600 r20 ＋ gap 60 ＋ 項目 580（gap 40、帯 41 pad 8/20 18/25.2、gap 12、値 pad 0/20 16/25.6） */
  .p-iv-profile { padding: 80px 20px; }
  .p-iv-profile__inner { flex-direction: row; align-items: flex-start; justify-content: center; gap: 60px; }
  .p-iv-profile__photo { flex: 0 1 480px; height: 600px; }
  .p-iv-profile__list { flex: 0 1 580px; gap: 40px; }
  .p-iv-profile__row { gap: 12px; }
  .p-iv-profile__band { padding: 8px 20px; font-size: 18px; line-height: 25.2px; }
  .p-iv-profile__value { padding: 0 20px; font-size: 16px; line-height: 25.6px; }

  /* Q&A §2.3: pad 上下 80、中身 700 gap 40、帯 41、顔 60（上下中央）、本文 630 16/25.6、画像 700×420、注記 14/22.4 */
  .p-iv-qa { padding: 80px 20px; }
  .p-iv-qa__band { padding: 8px 20px; font-size: 18px; line-height: 25.2px; }
  .p-iv-qa__q,
  .p-iv-qa__text,
  .p-iv-qa__inner > p { font-size: 16px; line-height: 25.6px; }
  .p-iv-qa__a { align-items: center; }
  .p-iv-qa__face { width: 60px; height: 60px; }
  .p-iv-qa__inner > .p-iv-qa__note { font-size: 14px; line-height: 22.4px; }
  .p-iv-qa__inner img:not(.p-iv-qa__face-img) { height: 420px; }

  .p-iv-related { padding: 0 20px 151px; }
  /* CONTACT の直前は Figma（注記の下端→CONTACT 151）に合わせる。関連求人が無いときは Q&A が直前になる（pixel-B2 B2-1） */
  .p-iv-qa:not(:has(+ .p-iv-related)) { padding-bottom: 150px; } /* 最後の文字→CONTACT 151（pp3 B2-1） */
}

/* 1080〜: Q&A 左右余白のあしらい＝ティールの霞（検索結果 `238:72047` と同じ絵 335×851、#00CAC2 実効 15%、980 刻み）。
   1440 基準で左 x=-104・右 x=1184（Figma 画素で合わせて検索結果より 13 左。pp content M3）、Q&A 上端から 90。はみ出しは .p-iv-qa で clip（横スクロールを出さない） */
@media (min-width: 1080px) {
  .p-iv-qa { overflow: clip; }
  .p-iv-qa::before,
  .p-iv-qa::after {
    content: "";
    position: absolute;
    top: 90px;
    bottom: 0;
    width: 335px;
    background: url("../img/deco-kasumi-teal.svg") 0 0 / 335px 980px repeat-y;
    pointer-events: none;
  }
  .p-iv-qa::before { left: calc(50% - 824px); }
  .p-iv-qa::after { left: calc(50% + 464px); }
}

/* 〜767: SP も左右の端に霞がのぞく（Figma SP `232:68143` Q&A 上端 1424 から、左は右端 x≤83・右は x≥279 の欠片が約 900 刻み）。
   Figma SP の霞は PC と別形で同じ絵では一致しない（IoU 実測 0.13〜0.20）→ 同じ絵を 0.92 倍（308×902）にし、周期と端からの出を合わせた近似。本文の下に敷く */
@media (max-width: 767px) {
  .p-iv-qa { overflow: clip; }
  .p-iv-qa__inner { position: relative; z-index: 1; }
  .p-iv-qa::before,
  .p-iv-qa::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 308px;
    background: url("../img/deco-kasumi-teal.svg") 0 468px / 308px 902px repeat-y;
    pointer-events: none;
  }
  .p-iv-qa::before { left: -183px; }
  .p-iv-qa::after { right: -150px; background-position-y: 688px; }
  /* 丸帯の中身（Figma 232:68159 付近: 猫 x69・文字 x111・間 12・文字上端 y211）。文字だけ 5 下げ、猫は上端 0 のまま（pixel-D2-1） */
  .p-iv-intro__badge { gap: 8px; padding-top: 9px; align-items: flex-start; }
  .p-iv-intro__illust { margin-top: -9px; }
}

/* 長い和文（経歴・リード・Q&A）は base.css の word-break: keep-all だと句読点でしか折れず行が大きく増える
   （SP 経歴 7 行 → 10 行を実測）→ この画面の段落だけ通常の折り返しに戻す */
.p-iv-intro__lead,
.p-iv-profile__value,
.p-iv-qa__inner > p,
.p-iv-qa__text { word-break: normal; line-break: strict; }