/* =========================================================
   aoki-recruit — p-interview.css（働く人を知る：一覧・詳細）
   担当：子CC-B。共通部品は site.css、憲法は _rough/references/sources.md
   アンカー実測：_rough/references/anchor_subpages.md §3-6（一覧）・§3-7（詳細）
   禁則：vw・100vh単独・filter・blend・3D transform 不使用
   ========================================================= */

/* ---------- 一覧（interview/index.html） ---------- */
.iv-list { padding: 120px 0 280px; }
.iv-list__lead { max-width: 720px; margin: 0 auto 96px; text-align: center; line-height: 2.13; }
.iv-list .c-nameplate__meta { font-size: 15px; }
.iv-list .c-nameplate__copy { font-size: 20px; }
@media (max-width: 767px) {
  .iv-list { padding: 60px 0 100px; }
  .iv-list__lead { margin-bottom: 56px; text-align: left; line-height: 1.9; }
  .iv-list .c-nameplate { margin-left: -45px; margin-right: -45px; }
  .iv-list .c-nameplate__copy { font-size: 16px; }
}

/* ---------- 詳細：固定青地と本文面 ---------- */
.iv-bg {
  position: fixed;
  top: 0; left: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  min-height: 100vh;
  min-height: 100svh;
}
.iv-main { position: relative; z-index: 1; overflow-x: clip; }
.iv-main .c-crumb { top: 88px; }

/* 人物ごとの色（01 青／02 桃／03 黄） */
.iv--blue { --card: var(--blue); --card-text: #fff; --bar: var(--blue); }
.iv--pink { --card: var(--pink); --card-text: #fff; --bar: var(--pink); }
.iv--yellow { --card: var(--yellow); --card-text: var(--ink); --bar: var(--yellow); }

/* ---------- 写真FV ---------- */
/* 上余白は margin でなく padding（margin だと main を突き抜けて相殺され、パンくずが写真に隠れる）：156+98 */
.iv-fv { position: relative; z-index: 2; padding-top: 254px; }
.iv-fv__photo { width: 87.5%; margin-left: auto; border-radius: 42px 0 0 42px; overflow: hidden; }
.iv-fv__photo.js-reveal { transform: translateX(10%); }
.iv-fv__photo.js-reveal.is-in { transform: none; }
.iv-fv__photo img { width: 100%; }
.iv-fv__num {
  position: absolute;
  top: 320px; right: 6.25%;
  z-index: 2;
  color: #fff;
  font-family: var(--font-en);
  text-align: center;
  line-height: 1;
}
.iv-fv__num-n { display: block; font-size: 196px; font-weight: 500; letter-spacing: -.02em; }
.iv-fv__num-t { display: block; margin-top: 10px; font-size: 24px; font-weight: 600; letter-spacing: .1em; }
.iv-fv__card {
  position: absolute;
  top: 341px; right: 60.125%;
  z-index: 3;
  width: max-content;
  max-width: 520px;
  padding: 46px 30px 46px 59px;
  border-radius: 121px;
  background: var(--card);
  color: var(--card-text);
}
.iv-fv__label { font-family: var(--font-en); font-size: 15px; font-weight: 600; letter-spacing: .1em; line-height: 1.4; }
.iv-fv__copy { margin-top: 12px; font-size: 26px; font-weight: 600; line-height: 1.8; letter-spacing: .05em; }
.iv-fv__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 18px; font-size: 15px; font-weight: 600; letter-spacing: .05em; }
.iv-fv__pill { display: inline-block; padding: 7px 14px; border-radius: 50px; background: #fff; color: var(--ink); font-size: 13px; font-weight: 500; line-height: 1; }
.iv-fv__tail { position: absolute; right: 44px; bottom: -48px; z-index: -1; width: 115px; height: 80px; fill: var(--card); }
.iv-fv .c-deco { z-index: 4; }

/* ---------- 深青面（インタビュー＋Q&A吹き出し＋白カードの上半分） ---------- */
.iv-deep { position: relative; z-index: 1; margin-top: -154px; }
.iv-deep::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  bottom: var(--deep-tail, 760px);
  z-index: 0;
  background: rgba(11, 90, 160, .8);
  border-radius: 0 0 50% 50% / 0 0 240px 240px;
}
.iv-deep > * { position: relative; z-index: 1; }

/* Member Interview：2カラムQ&A ×2 */
.iv-interview { padding: 314px 0 256px; color: #fff; }
.iv-qa { display: grid; grid-template-columns: 1fr 1fr; column-gap: 6.67%; row-gap: 24px; align-items: start; }
.iv-qa + .iv-qa { margin-top: 180px; }
.iv-qa__head {
  grid-column: 1; grid-row: 1;
  justify-self: start;
  padding-bottom: 8px;
  border-bottom: 1px solid #fff;
  font-family: var(--font-en);
  font-size: 28px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: .1em;
}
.iv-qa__copy {
  grid-column: 2; grid-row: 1;
  position: relative;
  padding: 0 50px;
  font-size: 28px;
  font-weight: 500;
  line-height: 1.76;
  letter-spacing: .1em;
}
.iv-qa__copy span { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .4em; }
.iv-qa__copy::before, .iv-qa__copy::after {
  content: "";
  position: absolute;
  width: 42px; height: 34px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 42 34'%3E%3Cpath fill='%23fff' d='M0 20C0 9 7 2 17 0l1.2 3.2C12.6 5.4 9.4 9.2 9 13.6c.9-.5 2-.8 3.2-.8 4.6 0 7.8 3.4 7.8 8 0 4.8-3.6 8.4-8.6 8.4C5 29.2 0 25.6 0 20zm22 0C22 9 29 2 39 0l1.2 3.2C34.6 5.4 31.4 9.2 31 13.6c.9-.5 2-.8 3.2-.8 4.6 0 7.8 3.4 7.8 8 0 4.8-3.6 8.4-8.6 8.4C27 29.2 22 25.6 22 20z'/%3E%3C/svg%3E") no-repeat center / contain;
}
.iv-qa__copy::before { left: 0; top: 4px; }
.iv-qa__copy::after { right: 0; bottom: 4px; transform: rotate(180deg); }
.iv-qa__photo { grid-column: 1; grid-row: 2; border-radius: 20px; overflow: hidden; }
.iv-qa__photo img { width: 100%; }
.iv-qa__body { grid-column: 2; grid-row: 2; line-height: 2.13; letter-spacing: .05em; }
.iv-qa__body p + p { margin-top: 32px; }
.iv-qa--rev .iv-qa__head { display: none; }
.iv-qa--rev .iv-qa__copy { grid-column: 1; grid-row: 1; }
.iv-qa--rev .iv-qa__photo { grid-column: 2; grid-row: 1 / 3; }
.iv-qa--rev .iv-qa__body { grid-column: 1; grid-row: 2; }

/* 見出し（白帯）＋ 白の楕円吹き出しQ&A */
.iv-intro { padding: 128px 0 0; color: #fff; }
.iv-intro__head { text-align: center; }
.iv-intro__head span {
  display: inline-block;
  padding: 8px 36px;
  border-radius: 5px;
  background: #fff;
  color: var(--blue);
  font-size: 36px;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: .1em;
}
.iv-intro__cols { display: grid; grid-template-columns: 45% 52.08%; justify-content: space-between; align-items: end; margin-top: 112px; }
.iv-intro__person { width: 100%; max-width: 540px; margin: 0 auto; }
.iv-intro__qa { margin-bottom: 80px; }
.iv-intro__item + .iv-intro__item { margin-top: 64px; }
.iv-q { position: relative; padding-left: 30px; font-size: 20px; font-weight: 500; letter-spacing: .05em; line-height: 1.7; }
.iv-q::before { content: "Q."; position: absolute; left: 0; top: 0; font-family: var(--font-en); font-weight: 700; }
.iv-oval {
  position: relative;
  margin-top: 16px;
  padding: 40px 60px;
  border-radius: 167px;
  background: #fff;
  color: var(--ink);
}
.iv-oval__title { margin-bottom: 12px; font-size: 22px; font-weight: 600; line-height: 1.73; letter-spacing: .05em; text-align: center; }
.iv-oval__body { font-size: 15px; line-height: 1.9; }
.iv-oval__tail { position: absolute; left: -11px; bottom: -26px; z-index: -1; width: 159px; height: 107px; fill: #fff; }
@media (min-width: 1401px) {
  .iv-intro__item + .iv-intro__item { transform: translateX(80px); }
}

/* ---------- 白カード：プロフィール＋1日のスケジュール ---------- */
.iv-card { margin-top: 0; padding: 120px 0; border-radius: 20px; background: #fff; color: var(--ink); }
.iv-card__inner { max-width: 1000px; width: calc(100% - 48px); margin: 0 auto; }
.iv-card__head { margin-bottom: 48px; color: var(--blue); font-size: 32px; font-weight: 600; letter-spacing: .08em; line-height: 1.5; }
.iv-profile { display: grid; grid-template-columns: 50% 46%; justify-content: space-between; align-items: start; }
.iv-profile__list { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: repeat(4, auto); grid-auto-flow: column; row-gap: 20px; column-gap: 16px; }
.iv-profile__list li { position: relative; padding-left: 24px; }
.iv-profile__list li::before { content: ""; position: absolute; left: 0; top: 11px; width: 17px; height: 6px; background: var(--bar, var(--blue)); }
.iv-profile__label { display: block; font-size: 17px; font-weight: 700; line-height: 1.6; }
.iv-profile__val { display: block; margin-top: 2px; font-size: 15px; line-height: 1.8; }
.iv-profile__box { margin-top: 32px; padding: 24px 32px; border-radius: 20px; background: var(--yellow); }
.iv-profile__box-title { margin-bottom: 8px; font-weight: 700; }
.iv-profile__box li { padding-left: 1em; text-indent: -1em; line-height: 1.9; }
.iv-profile__box li::before { content: "・"; }
.iv-profile__photo { border-radius: 20px; overflow: hidden; }
.iv-profile__photo img { width: 100%; aspect-ratio: 920 / 938; object-fit: cover; object-position: center; }
.iv-schedule { margin-top: 64px; padding-top: 48px; border-top: 1px dashed #707070; }

/* ---------- 関連（カルーセル） ---------- */
.iv-related { position: relative; padding: 160px 0; }
.iv-related .c-head { max-width: var(--wrap); width: calc(100% - 40px); margin: 0 auto; }
.iv-related .c-carousel { position: relative; margin-top: 56px; overflow-x: clip; }
.c-carousel__track { position: relative; height: 580px; }
.c-carousel__slide { position: absolute; left: 0; top: 0; display: block; width: 26%; max-width: 338px; transform-origin: center center; }
.c-carousel__shade { position: absolute; inset: 0; background: #000; clip-path: url(#bubble-tall); opacity: 0; transition: opacity .6s var(--ease2); pointer-events: none; }
.c-carousel__meta { display: none; }
.c-carousel__btn { position: absolute; top: 0; bottom: 0; z-index: 20; width: 18%; }
.c-carousel__btn[data-prev] { left: 0; }
.c-carousel__btn[data-next] { right: 0; }
.c-carousel__btn span {
  position: absolute;
  top: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px; height: 48px;
  border-radius: 50%;
  background: #fff;
  color: var(--ink);
  transform: translateY(-50%);
  transition: background .3s var(--ease2), color .3s var(--ease2);
}
.c-carousel__btn[data-prev] span { left: 24px; }
.c-carousel__btn[data-next] span { right: 24px; }
.c-carousel__btn svg { width: 21px; height: 10px; }
.c-carousel__btn[data-prev] svg { transform: scaleX(-1); }
@media (hover: hover) {
  .c-carousel__btn:hover span { background: var(--ink); color: #fff; }
}
.c-carousel__caption { margin-top: 24px; min-height: 150px; opacity: 0; transform: translateY(12px); transition: opacity .6s .15s var(--ease2), transform .6s .15s var(--ease2); }
.c-carousel__caption.is-in { opacity: 1; transform: none; }
.iv-related .c-nameplate__meta { color: #fff; }
.iv-related__more { margin-top: 8px; text-align: center; color: #fff; }

/* ページ末（青地の上なので白文字） */
.iv-main .c-next { color: #fff; }
.iv-main .c-next__loop svg { color: rgba(255, 255, 255, .35); }

/* ---------- ブレークポイント ---------- */
@media (max-width: 1300px) {
  .c-carousel__track { height: 0; padding-bottom: calc(44% + 8px); }
}
@media (max-width: 1200px) {
  .iv-fv__card { right: auto; left: 20px; max-width: min(520px, 46%); }
}
@media (max-width: 1024px) {
  .iv-fv { padding-top: 246px; }
  .iv-fv__num { top: 296px; }
  .iv-fv__num-n { font-size: 120px; }
  .iv-fv__num-t { font-size: 18px; }
  .iv-fv__card { top: 306px; padding: 32px 24px 32px 40px; border-radius: 90px; }
  .iv-fv__copy { font-size: 22px; }
  .iv-fv__tail { right: 30px; bottom: -36px; width: 86px; height: 60px; }
  .iv-deep { margin-top: -110px; }
  .iv-interview { padding: 270px 0 200px; }
  .iv-qa + .iv-qa { margin-top: 120px; }
  .iv-qa__copy { font-size: 24px; padding: 0 44px; }
  .iv-intro__head span { font-size: 30px; }
  .iv-intro__cols { grid-template-columns: 42% 55%; margin-top: 80px; }
  .iv-oval { padding: 36px 44px; border-radius: 120px; }
  .iv-card { padding: 80px 0; }
  .iv-profile { grid-template-columns: 1fr; row-gap: 40px; }
  .iv-profile__photo { max-width: 520px; }
}
@media (max-width: 767px) {
  .iv-main .c-crumb { top: 64px; }
  .iv-fv { padding-top: 230px; }
  .iv-fv__photo { width: 89.5%; border-radius: 21px 0 0 21px; }
  .iv-fv__num { top: 110px; left: 20px; right: auto; text-align: left; }
  .iv-fv__num-n { font-size: 116px; letter-spacing: -.03em; }
  .iv-fv__num-t { margin-top: 0; font-size: 14px; }
  .iv-fv__card {
    position: static;
    width: 100%;
    max-width: none;
    margin-top: 0;
    padding: 28px 20px 32px;
    border-radius: 0;
  }
  .iv-fv__label { font-size: 14px; }
  .iv-fv__copy { margin-top: 8px; font-size: 22px; }
  .iv-fv__meta { margin-top: 12px; font-size: 14px; }
  .iv-fv__pill { display: none; }
  .iv-fv__tail { display: none; }
  .iv-fv .c-deco { display: none; }

  .iv-deep { margin-top: -43px; }
  .iv-deep::before { bottom: var(--deep-tail-sp, 420px); border-radius: 0 0 50% 50% / 0 0 80px 80px; }
  .iv-interview { padding: 64px 0; }
  .iv-qa { display: flex; flex-direction: column; gap: 24px; }
  .iv-qa + .iv-qa { margin-top: 64px; }
  .iv-qa__head { order: 1; display: block; font-size: 22px; }
  .iv-qa__copy { order: 2; padding: 0 25px; font-size: 20px; line-height: 1.8; }
  .iv-qa__copy::before, .iv-qa__copy::after { width: 24px; height: 20px; }
  .iv-qa__copy::before { top: 6px; }
  .iv-qa__copy::after { bottom: 6px; }
  .iv-qa__photo { order: 3; }
  .iv-qa__body { order: 4; line-height: 2; }
  .iv-qa__body p + p { margin-top: 20px; }
  .iv-qa--rev .iv-qa__head { display: none; }

  .iv-intro { padding: 64px 0 0; }
  .iv-intro__head span { padding: 6px 20px; font-size: 22px; letter-spacing: .06em; }
  .iv-intro__cols { display: block; margin-top: 48px; }
  .iv-intro__person { width: 60%; max-width: 230px; margin: 0 auto 32px; }
  .iv-intro__qa { margin-bottom: 48px; }
  .iv-intro__item + .iv-intro__item { margin-top: 40px; }
  .iv-q { padding-left: 26px; font-size: 17px; }
  .iv-oval { padding: 44px 24px; border-radius: 70px; }
  .iv-oval__title { font-size: 18px; }
  .iv-oval__body { font-size: 14px; line-height: 1.85; }
  .iv-oval__tail { left: -6px; bottom: -14px; width: 90px; height: 60px; }

  .iv-card { padding: 40px 0 60px; border-radius: 10px; }
  .iv-card__inner { width: calc(100% - 40px); }
  .iv-card__head { margin-bottom: 32px; font-size: 20px; text-align: center; }
  .iv-profile { display: block; }
  .iv-profile__list { grid-template-columns: 1fr; grid-template-rows: none; grid-auto-flow: row; row-gap: 16px; }
  .iv-profile__list li::before { top: 10px; }
  .iv-profile__label { font-size: 15px; }
  .iv-profile__val { font-size: 14px; }
  .iv-profile__box { margin-top: 24px; padding: 20px; border-radius: 12px; }
  .iv-profile__photo { display: none; }
  .iv-schedule { margin-top: 48px; padding-top: 32px; }

  .iv-related { padding: 60px 0 120px; }
  .iv-related .c-carousel { margin-top: 32px; }
  .c-carousel__track { padding-bottom: calc(101.5% + 4px); }
  .c-carousel__slide { width: 60%; max-width: none; }
  .c-carousel__btn { width: 15%; }
  .c-carousel__btn span { width: 36px; height: 36px; }
  .c-carousel__btn[data-prev] span { left: 8px; }
  .c-carousel__btn[data-next] span { right: 8px; }
  .c-carousel__btn svg { width: 16px; height: 7px; }
  .c-carousel__caption { min-height: 0; }
}