/* ==========================================================================
   先輩インタビュー（interview-01〜06.html）
   ・PC は元サイトの 1280px 表示の実測値です（基準は interview-02〜04 の値）
   ・ページによって位置が違うところは、HTML の style="--xx:…" で上書きしています
     --prof-pb   プロフィール箱の下の余白        --qa1-pb / --qa2-pb  Q&A 1・2 の下の余白
     --bot-gap   Q&A 3 の白箱から下の帯までの間   --prof-mh            プロフィール文の最小の高さ
     --sq-g      左下の水色の四角の位置           （文章ごとの --w 幅 / --mh 最小の高さ / --mt 上のすき間）
   ・文章は流れるレイアウト（文章が長くなれば箱が伸び、その下も一緒に下がります）
   ========================================================================== */

.iv { --dark: #323232; }

/* 飾りの四角（画面の端からすべり込む） */
.iv-sq { position: absolute; display: block; --d: 1900ms; --dl: 600ms; }
.iv-sq--a, .iv-sq--b, .iv-sq--d, .iv-sq--i, .iv-sq--h, .iv-sq--d-sp { background: var(--dark); }
.iv-sq--c, .iv-sq--e, .iv-sq--f, .iv-sq--g, .iv-sq--e-sp, .iv-sq--f-sp { background: var(--c-teal-d); }
.iv-sq--h, .iv-sq--d-sp, .iv-sq--e-sp, .iv-sq--f-sp { display: none; } /* スマホだけ */

/* 縦の細線（上から下へ伸びる） */
.iv-vline { width: 1px; }

/* ---------- 見出し・写真・プロフィール ---------- */
.iv-hero { position: relative; padding: 312px 0 var(--prof-pb, 56px); }
.iv-head { position: absolute; top: 0; left: max(0px, calc(38.012% - 486.55px)); width: 973.1px; height: 209px; }
.iv-head__title { position: absolute; left: 24px; top: 65px; width: 354px; text-align: center; --fy: 60px; }
.iv-head__line { position: absolute; left: 370px; top: 87px; width: 326px; height: 7px; border-top: 1px solid var(--c-line); }
.iv-sq--a { top: 65px; left: calc(88.012% - 117.55px); width: 278px; height: 244px; }

.iv-band { position: absolute; top: 209px; left: 6.734%; right: 0; height: 567px; background: var(--c-teal-d); }
.iv-photo {
  position: absolute; top: 122px; left: calc(53.367% - 140px); width: 810px; height: 607px;
  border: 7px solid #fff; background: #fff; object-fit: cover; --fx: -60px;
}

.iv-prof {
  position: relative; width: 653px; margin-left: calc(26.02% - 428.95px);
  padding: 35px 0 23px 200px; background: var(--dark); color: #fff; --d: 1500ms; --dl: 300ms;
}
.iv-prof__line { position: absolute; left: 18px; top: 48px; width: 155px; height: 7px; border-top: 1px solid var(--c-teal); }
.iv-prof__dept { width: 435px; min-height: 28px; font-size: 20px; line-height: 28px; font-weight: 500; }
.iv-prof__name { width: 435px; min-height: 77px; margin-top: 17px; font-size: 50px; line-height: 70px; font-weight: 500; }
.iv-prof__text { width: 426px; min-height: var(--prof-mh, 177px); margin: 19px 0 0 -1px; font-size: 17px; line-height: 23.8px; }

/* ---------- Q&A（共通） ---------- */
.iv-qa { position: relative; --cw: min(1200px, calc(100% - 80px)); --cl: calc((100% - var(--cw)) / 2); } /* 写真と白箱の配置の基準（中央 1200px、狭い画面では左右 40px あけて縮む） */
.iv-bg { position: absolute; overflow: hidden; }
.iv-bg img { width: 100%; height: 100%; object-fit: cover; }
.iv-box { position: relative; background: #fff; }
.iv-box > :not(.iv-sq) { width: var(--w); min-height: var(--mh); margin-top: var(--mt); }
.iv-box__t { font-size: 26px; line-height: 36.4px; font-weight: 500; }
.iv-box__q { font-size: 18px; line-height: 25.2px; font-weight: 500; }
.iv-box__a { font-size: 16px; line-height: 22.4px; }
.iv-box > .anim { --d: 1500ms; --dl: 300ms; }

/* Q&A 1：右の白箱・左に写真 */
.iv-qa--1 { padding: 230px 0 var(--qa1-pb, 24px); }
.iv-sq--c { top: 120px; left: calc(50% + 504px); width: 220px; height: 204px; }
.iv-vline--1 { top: -28px; left: calc(50% - 319px); height: 190px; }
.iv-bg--1 { top: 183px; left: var(--cl); width: calc(var(--cw) * .5); height: 553px; }
.iv-box--1 {
  min-height: 457.4px; padding: 54px 48px 45px 57px;
  width: calc(var(--cw) * .56); max-width: 754px; margin-left: calc(var(--cl) + var(--cw) - min(var(--cw) * .56, 754px)); /* 写真に少しだけ重ねて、顔は隠さない */
  --fx: 60px; --d: 1400ms;
}
.iv-box--1 > .anim { --fx: 60px; }
.iv-box--1 .iv-box__t  { --w: auto; --mh: 36.4px; --mt: 0px; }
.iv-box--1 .iv-box__q1 { --w: auto; --mh: 25.2px; --mt: 30px; }
.iv-box--1 .iv-box__a1 { --w: auto; --mh: 112px;  --mt: 10px; }
.iv-box--1 .iv-box__q2 { --w: auto; --mh: 25.2px; --mt: 20px; }
.iv-box--1 .iv-box__a2 { --w: auto; --mh: 89.6px; --mt: 10px; }

/* Q&A 2：左の白箱・右に写真 */
.iv-qa--2 { padding: 140px 0 var(--qa2-pb, 32px); }
.iv-sq--b { bottom: -75px; left: calc(50% - 743px); width: 193px; height: 182px; }
.iv-vline--2 { top: -4px; left: calc(50% + 313px); height: 230px; }
.iv-bg--2 { top: 294px; right: var(--cl); width: calc(var(--cw) * .5); height: 399px; }
.iv-box--2 {
  min-height: 457.4px; padding: 49px 48px 50px 60px;
  width: calc(var(--cw) * .56); max-width: 754px; margin-left: var(--cl);
  --fx: -60px; --d: 1400ms;
}
.iv-box--2 > .anim { --fx: -60px; }
.iv-box--2 .iv-box__t  { --w: auto; --mh: 36.4px; --mt: 0px; }
.iv-box--2 .iv-box__q1 { --w: auto; --mh: 25.2px; --mt: 30px; }
.iv-box--2 .iv-box__a1 { --w: auto; --mh: 89.6px; --mt: 10px; }
.iv-box--2 .iv-box__q2 { --w: auto; --mh: 25.2px; --mt: 20px; }
.iv-box--2 .iv-box__a2 { --w: auto; --mh: 112px;  --mt: 10px; }
.iv-vline--3 { bottom: -150px; left: calc(50% - 208px); height: 200px; }
.iv-sq--d { top: 53px; left: calc(50% + 598px); width: 107px; height: 107px; }
.iv-sq--e { top: 17px; left: calc(50% + 561px); width: 69px; height: 68px; }

/* Q&A 3：中央の白箱（薄いグレー＋写真の上） */
.iv-qa--3 { padding-top: 470px; }
.iv-sq--f { top: 60px; left: calc(50% + 504px); width: 69px; height: 68px; }
.iv-sq--g { top: calc(var(--sq-g, 930.8px) - 117px); left: calc(50% - 707px); width: 159px; height: 156px; }
.iv-sq--i { top: 493px; left: calc(50% + 592px); width: 159px; height: 156px; }
.iv-bg--3 { top: 152px; left: calc(50% - 490px); width: 980px; height: 400px; background: #fafafa; }
.iv-box--3 { width: 980px; margin: 0 auto; padding: 65px 58px 21px 57px; text-align: center; --fy: 60px; --d: 1100ms; }
.iv-box--3 > .anim { --fy: 60px; --dl: 0ms; }
.iv-box--3 .iv-box__t  { --w: 865px; --mh: 36.4px; --mt: 0px; }
.iv-box--3 .iv-box__q1 { --w: 865px; --mh: 25.2px; --mt: 42px; }
.iv-box--3 .iv-box__a1 { --w: 865px; --mh: 191px;  --mt: 10px; }
.iv-box--3 .iv-box__q2 { --w: 865px; --mh: 25.2px; --mt: 14px; }

/* ---------- 他の先輩社員のインタビューを見る ---------- */
.iv-others { position: relative; display: flow-root; padding: var(--bot-gap, 136px) 0 123px; }
.iv-vline--4 { top: calc(var(--bot-gap, 136px) - 120px); left: calc(50% - 1px); height: 151px; }
.iv-others__title { width: 791px; margin: 96px auto 0; text-align: center; font-size: 35px; line-height: 49px; font-weight: 500; color: var(--c-red); }
.iv-cards {
  display: grid; grid-template-columns: 279fr 278fr 279fr; column-gap: 46px;
  width: 980px; margin: 61px auto 0; padding: 0 26px;
}
/* 写真（乗せると少し拡大）＋その下に他と同じ丸いボタン */
.iv-card { display: flex; flex-direction: column; gap: 16px; }
.iv-card__photo { display: block; overflow: hidden; height: 300px; border-radius: 14px; }
.iv-card__photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.2,.8,.2,1); }
.iv-card:hover .iv-card__photo img { transform: scale(1.05); }
.iv-card__btn.btn { min-width: 0; width: 100%; padding: 0 60px 0 16px; font-size: 13px; letter-spacing: .06em; }

/* ==========================================================================
   スマホ
   ========================================================================== */
@media (max-width: 699px) {
  /* 見出し・写真・プロフィール */
  .iv-hero { padding: 292.1px 0 44px; }
  .iv-head { left: 0; width: 320px; height: auto; }
  .iv-head__title { left: 20px; top: 25px; width: 165px; text-align: left; white-space: nowrap; --fx: 60px; --fy: 0px; }
  .iv-head__line { left: 170px; top: 36px; width: 171px; height: 3px; --dl: 300ms; }
  .iv-band { top: 89.1px; left: 0; height: 365px; }
  .iv-photo { top: 109.1px; left: 0; width: 319px; height: 239px; --fx: 0px; }

  .iv-prof { z-index: 1; width: 280px; margin-left: 20px; padding: 22px 20px 20px 19px; }
  .js .iv-prof.anim.a-reveal-l:not(.is-in) { clip-path: none; opacity: 0; }
  .iv-prof.anim.is-in.a-reveal-l { animation: k-float 1200ms cubic-bezier(.445,.05,.55,.95) both; --fx: 0px; --fy: 60px; }
  .iv-prof__line { left: 10px; top: 10px; width: 260px; height: 12px; --dl: 300ms; }
  .iv-prof__dept { width: auto; min-height: 0; font-size: 10px; line-height: 14px; }
  .iv-prof__name { width: auto; min-height: 0; margin-top: 10px; font-size: 26px; line-height: 36.4px; }
  .iv-prof__text { width: auto; min-height: 0; margin: 10px 0 0; font-size: 12px; line-height: 16.8px; }
  .iv-prof__dept.anim.is-in, .iv-prof__name.anim.is-in, .iv-prof__text.anim.is-in {
    animation: k-float 1200ms cubic-bezier(.445,.05,.55,.95) 300ms both; --fx: 60px;
  }

  /* Q&A：写真の帯 → その下に白箱（20px 重なる） */
  .iv-qa--1, .iv-qa--2, .iv-qa--3 { padding: 0; }
  .iv-qa--1 { padding-bottom: 54px; }
  .iv-bg { position: relative; inset: auto; width: auto; height: 213px; margin: 0; }
  .iv-bg--1.anim.is-in { animation: k-float 1200ms cubic-bezier(.445,.05,.55,.95) both; --fy: 60px; }
  .iv-bg--2.anim.is-in { animation: k-fade 1200ms cubic-bezier(.445,.05,.55,.95) both; }

  .iv-box { z-index: 1; width: 299px; min-height: 0; margin: -20px 0 0 10px; padding: 27px 15px 0; --fx: 0px; --fy: 60px; --d: 1200ms; text-align: left; }
  .iv-box > .anim { --fx: 0px; --fy: 60px; --d: 1200ms; --dl: 0ms; }
  .iv-box--1 > .anim { --dl: 300ms; }
  .iv-box > :not(.iv-sq) { width: auto; min-height: 0; margin-top: 20px; }
  .iv-box > :first-child { margin-top: 0; }
  .iv-box__t { font-size: 19px; line-height: 26.6px; text-align: left; }
  .iv-box__q { font-size: 15px; line-height: 21px; }
  .iv-box__a { font-size: 12px; line-height: 16.8px; }
  .iv-box--1 { padding-bottom: 9.1px; }
  .iv-box--1 .iv-box__t { margin-left: 1px; margin-right: 8px; }
  .iv-box--2 { padding-bottom: 42.1px; }
  .iv-box--2 .iv-box__t { margin-left: -4px; margin-right: 10px; }
  .iv-box--3 { padding-bottom: 22.9px; }
  .iv-box--3 .iv-box__t { margin-left: -5px; margin-right: 5px; }
  .iv-box--3 .iv-box__q, .iv-box--3 .iv-box__a { text-align: center; }
  .iv-box--3 .iv-box__q2 { margin-top: 18.1px; }

  /* 縦線・四角（スマホの配置。PC 用のものは隠す） */
  .iv-vline--1, .iv-vline--2, .iv-vline--3, .iv-sq--a, .iv-sq--b, .iv-sq--d, .iv-sq--e, .iv-sq--f { display: none; }
  .iv-sq--h, .iv-sq--d-sp, .iv-sq--e-sp, .iv-sq--f-sp { display: block; }
  .iv-sq { z-index: 2; --dl: 0ms; }
  .iv .iv-sq.anim.is-in.a-glide { animation: k-iv-glide 1200ms cubic-bezier(.645,.045,.355,1) var(--dl) both; }
  .iv-sq--c    { top: -60px; left: 227px; width: 94px; height: 86px; --sx: -321px; --dl: 300ms; }  /* 左から */
  .iv-sq--d-sp { top: -7px; left: 266px; width: 53px; height: 52px; --sy: 100vh; --dl: 500ms; } /* 下から */
  .iv-sq--e-sp { top: calc(100% - 9.1px); left: 240px; width: 43px; height: 43px; --sx: -293px; } /* 左から */
  .iv-sq--f-sp { top: -44px; left: 25px; width: 79px; height: 75px; --sy: 100vh; }               /* 下から */
  .iv-sq--h    { top: 0; left: 0; width: 49px; height: 50px; --sx: 320px; }                      /* 右から */
  .iv-sq--g    { top: 150px; left: 25px; width: 62px; height: 63px; --sx: 295px; }               /* 右から */
  .iv-sq--i    { top: -27px; left: 247px; width: 62px; height: 63px; }                           /* その場で拡大 */
  .iv .iv-sq--i.anim.is-in.a-glide { animation: k-fade 800ms linear both, k-expand 800ms cubic-bezier(.645,.045,.355,1) both; --s: .8; }

  /* 他の先輩社員のインタビューを見る */
  .iv-others { padding: 0; }
  .iv-vline--4 { top: -8px; left: 160px; height: 99px; --d: 1500ms; }
  .iv-others__title { width: 280px; margin-top: 111px; font-size: 16px; line-height: 22.4px; }
  .iv-others__title.anim.is-in { animation: k-float 1200ms cubic-bezier(.445,.05,.55,.95) both; --fy: 60px; }
  .iv-cards { display: block; width: 320px; margin: 24px 0 0; padding: 0 0 36px; }
  .iv-cards { margin: 24px 20px 0; width: auto; }
  .iv-card { gap: 10px; }
  .iv-card + .iv-card { margin-top: 26px; }
  .iv-card__photo { height: 190px; border-radius: 12px; }
  .iv-card__btn.btn { font-size: 12px; }
}

/* スマホ：すべり込む四角（横・下から） */
@keyframes k-iv-glide { from { transform: translate(var(--sx, 0px), var(--sy, 0px)); } to { transform: none; } }

/* ---------- スマホの文字サイズ（全ページ共通の基準）----------
   本文 11.5px ／ 補足 10〜11px ／ 小見出し・質問 13px ／ 見出し 16.5〜17px ／ ページの題 18px */
@media (max-width: 699px) {
  .iv-prof__name { font-size: 22px; line-height: 1.5; }
  .iv-prof__text { font-size: 11.5px; line-height: 1.8; }
  .iv-box__t { font-size: 16.5px; line-height: 1.5; }
  .iv-box__q { font-size: 13px; line-height: 1.6; }
  .iv-box__a { font-size: 11.5px; line-height: 1.8; }
  .iv-others__title { font-size: 15px; }
}

/* 左右の白箱の文章は箱の幅いっぱいで折り返す（文節で改行するため） */
.iv-box--1 > :not(.iv-sq), .iv-box--2 > :not(.iv-sq) { width: auto; }