/* =====================================================
   INTERESTING INNOVATION - INTERVIEW（社員インタビュー一覧）
   style.css → sub.css の後に読み込む
   基準幅: PC 1920 / TB 768 / SP 393（1rem = 基準幅で 10px）
   ===================================================== */

/* 共通の見出し帯・パンくずは css/sub.css。ヘッダー・フッターはホームと同じ（style.css） */

/* CTA が最後のセクションなので、ベージュ背景の下余白は無し（波が CTA の下端に重なる） */
.page-interview .page-bg { padding-bottom: 0; }

/* ---------- 見出し帯（Recruit / Interview / 社員インタビュー の 3 行） ---------- */
.page-head__img { position: absolute; left: 64.8rem; top: 18.1rem; width: 64.1rem; z-index: 2; }

/* ---------- イントロ ---------- */
.iv-intro { margin-top: 46.7rem; text-align: center; }
.iv-intro__ttl { font-size: 12.8rem; font-weight: 900; line-height: 1.2; }
.iv-intro__en { margin-top: 2.4rem; font-size: 2.4rem; font-weight: 500; line-height: 1; }

/* ---------- インタビューカード ----------
   カード内は em（.iv-card の font-size = 1rem = Figma 10px）。TB/SP は font-size を変えて丸ごと拡縮 */
.iv-list__grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 9.6rem 4.8rem; width: 151.8rem; margin: 16rem auto 0; padding: 0; list-style: none; }
/* グループが見えた時点でまとめて発火し、順番に下からふわっと */
.iv-list__grid.reveal { opacity: 1; transform: none; filter: none; }
.iv-list__grid.reveal .iv-card { opacity: 0; transform: translateY(4rem); filter: blur(.4rem); transition: opacity .8s ease, transform .8s cubic-bezier(.2,.8,.2,1), filter .8s ease; transition-delay: var(--d, 0s); }
.iv-list__grid.reveal.is-visible .iv-card { opacity: 1; transform: none; filter: none; }

.iv-card { width: 47.4em; font-size: 1rem; }
.iv-card__link { display: block; color: var(--black); }
.iv-card__vis { position: relative; width: 100%; aspect-ratio: 1 / 1; overflow: hidden; }
.iv-card__vis > * { position: absolute; }
.iv-card__brush { left: 0; top: 0; width: 34.6em; } /* 見た目は sub.css の .iv-glow（採用トップ・インタビュー詳細のスライダーと共通の円） */
.iv-card__img { max-width: none; height: auto; transition: transform .6s cubic-bezier(.2,.8,.2,1); }
.iv-card__link:hover .iv-card__img { transform: scale(1.04); }
/* 人物の位置（Figma の座標 / 474） */
.iv-card--1 .iv-card__img { left: -8.2em; top: -3.4em; width: 83em; }
.iv-card--2 .iv-card__img { left: -.1em; top: 2.8em; width: 47.5em; }
.iv-card--3 .iv-card__img { left: -3.2em; top: 2.7em; width: 41.1em; }
.iv-card--4 .iv-card__img { left: 0; top: 2.1em; width: 47.4em; }
.iv-card--5 .iv-card__img { left: 6.8em; top: 2.8em; width: 33.5em; }
/* 縦書きのコピー（右の 1 行目 → 左の 2 行目） */
.iv-card__copy { right: 0; top: 0; display: flex; flex-direction: column; align-items: flex-start; gap: .8em; margin: 0; writing-mode: vertical-rl; z-index: 2; } /* 縦書きでは column = 右→左に並ぶ */
.iv-card__copy span { display: block; padding: .333em; background: #fff; font-size: 2.2em; font-weight: 600; line-height: 1.1; white-space: nowrap; }
.iv-card__meta { display: flex; align-items: center; justify-content: center; height: 6.4em; margin-top: .8em; padding: 1.2em 1.6em; border-radius: .3em; white-space: nowrap; }
.iv-card__name { display: flex; align-items: center; gap: .4em; }
.iv-card__name .ja { font-size: 2.4em; font-weight: 600; line-height: 1; transition: color .3s; }
.iv-card__name small { font-size: 1.6em; font-weight: 600; line-height: 1; }
.iv-card__link:hover .iv-card__name .ja { color: var(--orange); }
.iv-card__info { display: flex; align-items: center; font-size: 1.6em; font-weight: 500; line-height: 1; white-space: pre; }
.iv-card__info::before { content: ""; width: 1px; height: 1.5em; margin: 0 1.2em; background: var(--black); }

/* ---------- 採用ナビ（採用トップ / 働き方 / 文化 / インタビュー） ---------- */
.rnav { margin-top: 20rem; }
.rnav__list { display: flex; justify-content: center; margin: 0; padding: 0; list-style: none; }
.rnav__list li { padding: 0 1.6rem; border-left: 1px solid rgba(0,0,0,.5); }
.rnav__list li:last-child { border-right: 1px solid rgba(0,0,0,.5); }
.rnav__list a { display: block; width: 24rem; padding: 1.6rem 2.4rem; font-size: 2rem; font-weight: 600; line-height: 1.3; text-align: center; white-space: nowrap; transition: color .3s; }
.rnav__list a:hover, .rnav__list a[aria-current="page"] { color: var(--orange); }

/* ---------- ENTRY / 応募する（採用系ページ共通 CTA） ---------- */
.entry-cta { position: relative; height: 96rem; margin-top: 24rem; background: #ffdd78; overflow: hidden; } /* Figma: IIColor/sub */
.entry-cta__bg { position: absolute; left: -23.5rem; top: -37.9rem; width: 238.9rem; max-width: none; height: auto; } /* 写真は Figma の座標通り（茶色のカラー合成 + 黒 50% は画像に焼き込み済み） */
.entry-cta__inner { position: relative; z-index: 1; padding-top: 26.7rem; text-align: center; }
.entry-cta__ttl { display: flex; flex-direction: column; align-items: center; gap: 1.6rem; }
.entry-cta__en { font-size: 9.6rem; font-weight: 700; line-height: 1; letter-spacing: -.03em; color: var(--orange); }
.entry-cta__ja { font-size: 2.4rem; font-weight: 600; line-height: 1; color: #fff; }
.entry-cta__btns { display: flex; justify-content: center; gap: 4rem; margin: 12.2rem 0 0; padding: 0; list-style: none; }
.entry-cta__btn { display: flex; align-items: center; justify-content: center; height: 10rem; padding: 0 5rem; background: #fff; border-radius: .5rem; font-size: 2.4rem; font-weight: 700; line-height: 1.5; color: var(--black); white-space: nowrap; transition: background-color .3s, color .3s; }
.entry-cta__btn:hover { background: var(--orange); color: #fff; }

/* =====================================================
   TB / SP 共通（〜1199px）
   ===================================================== */
@media (max-width: 1199px) {
  .page-head__img { position: relative; left: auto; top: auto; width: 56%; margin: 0 auto 0; } /* SP: パンくず無し。見出しのすぐ下から */

  .iv-intro { margin-top: 4.8rem; padding: 0 var(--pad-x); }
  .iv-intro__ttl { font-size: 3.5rem; line-height: 1.2; } /* 「リアルな働き方と魅力」10 文字が 1 行に収まる大きさ */
  .iv-intro__en { margin-top: 1.2rem; font-size: 1.3rem; }

  .iv-list__grid { width: auto; gap: 3.2rem; margin: 3.2rem var(--pad-x) 0; }
  .iv-card { width: 100%; font-size: calc((100vw - var(--pad-x) * 2) / 47.4); } /* 1 列: カード幅 = コンテンツ幅 */

  .rnav { margin-top: 6.4rem; padding: 0 var(--pad-x); }
  .rnav__list { flex-wrap: wrap; }
  .rnav__list li { width: 50%; padding: 0; border-left: 0; border-bottom: 1px solid rgba(0,0,0,.5); }
  .rnav__list li:first-child, .rnav__list li:nth-child(2) { border-top: 1px solid rgba(0,0,0,.5); }
  .rnav__list li:nth-child(odd) { border-right: 1px solid rgba(0,0,0,.5); }
  .rnav__list li:last-child { border-right: 0; }
  .rnav__list a { width: auto; padding: 1.4rem .8rem; font-size: 1.4rem; }

  .entry-cta { height: auto; margin-top: 6.4rem; padding: 6.4rem var(--pad-x) 9.6rem; }
  .entry-cta__bg { left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; }
  .entry-cta__inner { padding-top: 0; }
  .entry-cta__ttl { gap: 1.2rem; }
  .entry-cta__en { font-size: 6.4rem; }
  .entry-cta__ja { font-size: 1.6rem; }
  .entry-cta__btns { flex-direction: column; gap: 1.2rem; margin-top: 4rem; }
  .entry-cta__btn { height: 6.4rem; padding: 0 2rem; font-size: 1.6rem; }
}

/* =====================================================
   TB のみ（768〜1199px）
   ===================================================== */
@media (min-width: 768px) and (max-width: 1199px) {
  .page-head__img { width: 40%; margin-top: 1.6rem; } /* TB: パンくず無し */

  .iv-intro { margin-top: 8rem; }
  .iv-intro__ttl { font-size: 6.4rem; }
  .iv-intro__en { margin-top: 1.6rem; font-size: 2.1rem; }

  .iv-list__grid { gap: 4.8rem 2.4rem; margin-top: 5.6rem; }
  .iv-card { width: calc((100% - 2.4rem) / 2); font-size: calc((100vw - var(--pad-x) * 2 - 2.4rem) / 2 / 47.4); } /* 2 列 */

  .rnav { margin-top: 10rem; }
  .rnav__list { flex-wrap: nowrap; }
  .rnav__list li { width: auto; padding: 0 1rem; border: 0; border-left: 1px solid rgba(0,0,0,.5); }
  .rnav__list li:first-child, .rnav__list li:nth-child(2) { border-top: 0; }
  .rnav__list li:nth-child(odd) { border-right: 0; }
  .rnav__list li:last-child { border-right: 1px solid rgba(0,0,0,.5); }
  .rnav__list a { width: 15rem; padding: 1.2rem 1rem; font-size: 1.5rem; }

  .entry-cta { margin-top: 10rem; padding: 9.6rem var(--pad-x) 12rem; }
  .entry-cta__en { font-size: 8rem; }
  .entry-cta__ja { font-size: 1.9rem; }
  .entry-cta__btns { flex-direction: row; gap: 2rem; margin-top: 6.4rem; }
  .entry-cta__btn { height: 8rem; padding: 0 3.2rem; font-size: 1.9rem; }
}
@media (max-width: 767px) { .entry-cta__en { font-size: 4.8rem; } } /* SP: ENTRY の文字を小さく（採用ページ共通でそろえる） */
@media (max-width: 767px) { .iv-list__grid { gap: 5.6rem; } .iv-card { width: 86%; font-size: calc((100vw - var(--pad-x) * 2) * .86 / 47.4); } } /* SP: インタビューのカードを少し小さく、あいだを広く */
/* 採用ページ内ナビ（TB/SP）: 仕事紹介・大切にしていること・募集要項と同じ枠のデザインにそろえる */
@media (max-width: 1199px) {
  .rnav__list { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: rgba(0,0,0,.3); border: 1px solid rgba(0,0,0,.3); }
  .rnav__list li, .rnav__list li:first-child, .rnav__list li:nth-child(2), .rnav__list li:nth-child(odd), .rnav__list li:last-child { width: auto; padding: 0; border: 0; background: var(--beige); }
  .rnav__list a { width: 100%; padding: 1.4rem .8rem; font-size: 1.4rem; }
}
@media (min-width: 768px) and (max-width: 1199px) {
  .rnav__list { grid-template-columns: repeat(4, 1fr); }
  .rnav__list a { width: 100%; padding: 1.6rem .4rem; font-size: 1.5rem; }
}
@media (max-width: 767px) { .iv-card__copy span { font-size: 2.6em; } .iv-card__name .ja { font-size: 1.9em; } .iv-card__name small, .iv-card__info { font-size: 1.9em; } } /* SP: カードの文字を少し大きく */
@media (min-width: 768px) and (max-width: 1199px) { .entry-cta__btn, .entry-cta__btns li:nth-child(n) .entry-cta__btn { height: 5.6rem; } } /* TB: ENTRY のボタンを低く（採用ページ共通でそろえる） */
@media (min-width: 768px) and (max-width: 1199px) { .entry-cta__en { font-size: 6.4rem; } } /* TB: ENTRY の文字を少し小さく（採用ページ共通） */
/* TB: ENTRY は他の採用ページと同じ見え方に（見えている高さ 543px 相当・中身を縦中央・ボタンの大きさ） */
@media (min-width: 768px) and (max-width: 1199px) {
  .entry-cta { padding-top: 16.9rem; padding-bottom: 29.1rem; }
  .entry-cta__btns { margin-top: 4.8rem; }
  .entry-cta__btn { padding: 0 3.2rem; font-size: 1.8rem; }
}
/* SP: ENTRY は採用ページ共通の形に（短いボタンを中央に縦 3 つ・矢印なし） */
@media (max-width: 767px) {
  .entry-cta__btns { display: flex; flex-direction: column; align-items: center; gap: 1.2rem; margin-top: 3.2rem; }
  .entry-cta__btns li { width: 24rem; max-width: none; }
  .entry-cta__btn, .entry-cta__btns li:nth-child(n) .entry-cta__btn { width: 100%; height: 5.2rem; padding: 0 1.6rem; justify-content: center; font-size: 1.5rem; }
  .entry-cta__btn .btn__arrow { display: none; }
  .entry-cta__ja { font-size: 1.6rem; }
}
@media (max-width: 767px) { .entry-cta { padding-top: 8rem; padding-bottom: 14.3rem; } } /* SP: ENTRY の上下の空きをそろえる（文字の上・ボタンの下とも 80px） */
/* 仮: 優菜さん（原稿・写真が届くまでの仮カード。正方形の写真をそのまま表示） */
.iv-card--tmp .iv-card__img { left: .7em; top: 1.4em; width: 46em; } /* Y.T. さん: 正方形のイラスト */