/* ==================================================
   富士梱包 INTERVIEW（採用インタビュー詳細）
   page-interview.php 専用。接頭辞 itv-

   【組み方】製造業の採用サイトでよく使われる「読ませる1記事」の構成。
     ・ヒーロー：ネイビーの面＋写真。見出しは白帯にして写真側へ食い込ませる。
       番号は輪郭だけの大きな数字、その脇に縦組みの Interview ラベル。
     ・本文：文章と写真の左右交互ブロック。写真はブロックの外へ少しはみ出させる。
     ・引用：ネイビーの帯で一度流れを止める。
     ・スケジュール：横一直線の時間軸＋縦組みラベル（SPでは縦の一覧に切り替え）。
   【このサイト固有にしている点】
     ・色はネイビー＋赤。青のグラデーションは使わない（サイトの他ページと同じ配色）。
     ・語りの見出し（ヒーロー・引用・締め）だけ明朝。本文はゴシックで読みやすさを取る。
       明朝は company.css で既に使っている書体なので、新しい語彙は足していない。
     ・質問は Q. ではなく「──」で受ける。プロフィールは現場の指示書に見立てた罫線一覧。
     ・巨大な英字のゴースト文字は recruit.css の .recruit-wm と同じ考え方の自前の語彙。
   ================================================== */

.itv-page {
  --itv-navy:  #0a285b;             /* recruit.css の --rc-navy と同値 */
  --itv-ink:   #1c2026;             /* 本文。ネイビー寄りの黒 */
  --itv-mute:  #5a6472;             /* キャプション・補足 */
  --itv-line:  rgba(10, 40, 91, .16);
  --itv-line-w: rgba(255, 255, 255, .22);
  --itv-ease:  cubic-bezier(.22, 1, .36, 1);
  background: #fff;
  font-family: var(--font-ja);
  color: var(--itv-ink);
  font-size: 16px;
  line-height: 2.05;
  letter-spacing: .04em;
  -webkit-font-smoothing: antialiased;
  /* ゴースト文字や写真のはみ出しで横スクロールが出ないようにする */
  overflow-x: hidden;
}

/* ブラウザ既定のマージンを落とすリセット。:where() で詳細度を 0 にしているのは、
   ふつうに .itv-page h2 と書くと詳細度(0,1,1)がコンポーネント側の .itv-qa__q(0,1,0)より
   高くなり、margin-top の指定が丸ごと効かなくなるため。 */
.itv-page :where(h1, h2, p, figure, figcaption, blockquote, ol, dl, dt, dd) {
  margin: 0;
  padding: 0;
}
.itv-page :where(ol) { list-style: none; }

/* ヘッダーは内部ページ共通の Navy Black 背景（既定は透過なので、白い紙面だと文字が消える） */
.itv-page .top-header { background: rgba(0, 12, 33, .9); }

/* 輪郭だけの数字。text-stroke 非対応なら塗りに戻して必ず読めるようにする */
.itv-outline-num {
  font-family: var(--font-en);
  font-weight: 600;
  line-height: .82;
  letter-spacing: .01em;
  font-variant-numeric: tabular-nums;
  color: transparent;
  -webkit-text-stroke: 1.2px currentColor;
}
@supports not ((-webkit-text-stroke: 1px #000) or (text-stroke: 1px #000)) {
  .itv-outline-num { color: inherit; opacity: .28; }
}

/* ==================================================
   HERO
   ================================================== */
.itv-hero {
  display: grid;
  grid-template-columns: minmax(0, 45fr) minmax(0, 55fr);
  align-items: stretch;
  background: var(--itv-navy);
  color: #fff;
}
.itv-hero__panel {
  position: relative;
  display: flex;
  align-items: flex-end;
  /* 固定ヘッダー（100px）の下に余白を取る */
  padding: 148px 0 78px;
}
/* 背面のゴースト文字。担当工程の英字を敷いている */
.itv-hero__ghost {
  position: absolute;
  left: -.06em;
  bottom: 8px;
  z-index: 0;
  font-family: var(--font-en);
  font-weight: 600;
  font-size: clamp(62px, 8.4vw, 128px);
  line-height: .9;
  letter-spacing: .01em;
  color: rgba(255, 255, 255, .055);
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
}
.itv-hero__panel-inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 560px;
  margin-left: auto;
  padding: 0 26px 0 5vw;
}
.itv-hero__index {
  display: flex;
  align-items: flex-start;
  gap: 18px;
}
.itv-hero__vlabel {
  writing-mode: vertical-rl;
  margin-top: 6px;
  font-family: var(--font-en);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .78);
}
.itv-hero__num {
  /* .itv-outline-num の中身をここで引き受ける（HTML側のクラスを増やさない） */
  font-family: var(--font-en);
  font-weight: 600;
  font-size: clamp(72px, 7.6vw, 116px);
  line-height: .82;
  letter-spacing: .01em;
  font-variant-numeric: tabular-nums;
  color: transparent;
  -webkit-text-stroke: 1.4px rgba(255, 255, 255, .72);
}
@supports not ((-webkit-text-stroke: 1px #000) or (text-stroke: 1px #000)) {
  .itv-hero__num { color: rgba(255, 255, 255, .3); }
}

/* 見出しの白帯。写真側へ食い込ませる（幅の狭い画面でははみ出しを 0 に戻す） */
.itv-hero__band {
  position: relative;
  margin: 24px -130px 0 0;
  padding: 22px 30px 24px;
  background: #fff;
  border-left: 5px solid var(--color-red);
  font-family: var(--font-mincho, 'Noto Serif JP', serif);
  font-weight: 600;
  font-size: clamp(23px, 2.3vw, 31px);
  line-height: 1.62;
  letter-spacing: .04em;
  color: var(--itv-navy);
}
.itv-hero__band-line { display: block; }
/* 明朝の「 は左のアキが大きいので、開き括弧のぶんだけ外へ逃がして左端を揃える */
.itv-hero__band-line:first-child { text-indent: -.42em; }

.itv-hero__meta {
  margin-top: 22px;
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: .1em;
  color: rgba(255, 255, 255, .84);
}
.itv-hero__meta span { margin: 0 .3em; opacity: .5; }

/* 写真は固定ヘッダー（100px）の下から始める。
   全面に敷くと、モニターの高さによっては被写体の顔がヘッダーに隠れてしまうため
   （ユーザー指摘 2026-09-08）。上に残るネイビーの帯はヘッダーの地としてそのまま生きる。 */
.itv-hero__photo {
  position: relative;
  min-height: 500px;
}
.itv-hero__photo img {
  position: absolute;
  inset: 100px 0 0 0;
  width: 100%;
  height: calc(100% - 100px);
  object-fit: cover;
  /* 人物は写真の上寄りにいることが多いので、切り取りも上寄りにする */
  object-position: center 32%;
}

/* ==================================================
   本文ブロック（文章＋写真の左右交互）
   ================================================== */
.itv-block { padding: 100px 0; }
.itv-block--field { background: var(--color-bg-gray); }

.itv-block__grid {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 5%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 380px);
  gap: clamp(40px, 5vw, 76px);
  align-items: start;
}
.itv-block--rev .itv-block__grid {
  grid-template-columns: minmax(0, 380px) minmax(0, 1fr);
}

.itv-lead {
  font-size: 17px;
  font-weight: 500;
  line-height: 2.15;
  padding-bottom: 40px;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--itv-line);
}

/* ---------- 一問一答 ---------- */
.itv-qa { margin-top: 44px; }
.itv-qa__q {
  font-size: 19px;
  font-weight: 700;
  line-height: 1.75;
  letter-spacing: .04em;
  color: var(--itv-navy);
}
/* 「──」は聞き手の質問であることを示す記号 */
.itv-qa__dash {
  margin-right: .35em;
  color: var(--color-blue);
}
.itv-qa__a { margin-top: 16px; }
.itv-qa__a p + p { margin-top: 1.1em; }

/* ---------- ブロック内の写真（外側へ少しはみ出す） ---------- */
.itv-shot img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
}
.itv-shot figcaption {
  margin-top: 12px;
  font-size: 12.5px;
  line-height: 1.9;
  letter-spacing: .03em;
  color: var(--itv-mute);
}
.itv-shot--out-r { margin-right: calc(-1 * clamp(0px, 4vw, 64px)); }
.itv-shot--out-l { margin-left:  calc(-1 * clamp(0px, 4vw, 64px)); }
.itv-shot--out-r figcaption { margin-right: clamp(0px, 4vw, 64px); }
.itv-shot--out-l figcaption { margin-left:  clamp(0px, 4vw, 64px); }

/* ---------- プロフィール（現場の指示書に見立てた罫線一覧） ---------- */
.itv-profile {
  margin-top: 34px;
  border-top: 2px solid var(--itv-navy);
}
.itv-profile__row {
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr);
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--itv-line);
}
.itv-profile dt {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .13em;
  line-height: 2.1;
  color: var(--color-blue);
}
.itv-profile dd {
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.95;
}

/* ==================================================
   PULL QUOTE（ネイビーの帯）
   ================================================== */
.itv-pull {
  background: var(--itv-navy);
  color: #fff;
  padding: 68px 0 72px;
}
.itv-pull__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 5%;
}
.itv-pull p {
  position: relative;
  max-width: 800px;
  padding-top: 26px;
  border-top: 2px solid var(--color-red);
  font-family: var(--font-mincho, 'Noto Serif JP', serif);
  font-weight: 600;
  font-size: clamp(20px, 2.5vw, 30px);
  line-height: 1.85;
  letter-spacing: .05em;
}

/* ==================================================
   SCHEDULE（横一直線の時間軸）
   ================================================== */
.itv-sched {
  position: relative;
  overflow: hidden;
  padding: 96px 0 104px;
  background: #fff;
}
.itv-sched__ghost {
  position: absolute;
  right: -.04em;
  top: 42px;
  font-family: var(--font-en);
  font-weight: 600;
  font-size: clamp(64px, 9vw, 140px);
  line-height: 1;
  letter-spacing: .01em;
  color: rgba(10, 40, 91, .05);
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
}
.itv-sched__inner {
  position: relative;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 5%;
}
.itv-sched__title {
  display: flex;
  align-items: baseline;
  gap: 16px;
}
.itv-sched__title-en {
  font-family: var(--font-en);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--color-blue);
}
.itv-sched__title-ja {
  font-size: 19px;
  font-weight: 700;
  letter-spacing: .1em;
  color: var(--itv-navy);
}

.itv-sched__track {
  position: relative;
  margin-top: 46px;
  display: flex;
  justify-content: space-between;
  gap: 8px;
}
/* 時刻の点をつなぐ横一直線。点の中心（上から 74px）に合わせている */
.itv-sched__track::before {
  content: "";
  position: absolute;
  left: 6%;
  right: 6%;
  top: 41px;
  height: 1px;
  background: var(--itv-line);
}
.itv-sched__item {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.itv-sched__time {
  font-family: var(--font-en);
  font-weight: 600;
  font-size: 17px;
  line-height: 1;
  letter-spacing: .02em;
  color: var(--itv-navy);
  font-variant-numeric: tabular-nums;
}
.itv-sched__dot {
  margin-top: 24px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--color-blue);
  box-shadow: 0 0 0 5px #fff;
}
/* ラベルは縦組み。横並びの時間軸に短い日本語を落とし込むのに一番収まりがいい */
.itv-sched__desc {
  writing-mode: vertical-rl;
  margin-top: 22px;
  height: 190px;
  font-size: 14px;
  line-height: 1.7;
  letter-spacing: .08em;
  color: var(--itv-ink);
}

/* ==================================================
   MESSAGE
   ================================================== */
.itv-message {
  padding: 0 0 104px;
  background: #fff;
}
.itv-message__inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 5%;
}
.itv-message__card {
  position: relative;
  max-width: 840px;
  margin: 0 auto;
  padding: 46px clamp(28px, 5vw, 64px) 48px;
  background: var(--color-bg-gray);
  border-top: 3px solid var(--itv-navy);
}
.itv-message__label {
  display: flex;
  align-items: baseline;
  gap: 16px;
}
.itv-message__label-en {
  font-family: var(--font-en);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--color-blue);
}
.itv-message__label-ja {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .1em;
  color: var(--itv-navy);
}
.itv-message__body {
  margin-top: 22px;
  font-family: var(--font-mincho, 'Noto Serif JP', serif);
  font-weight: 500;
  font-size: clamp(17px, 1.5vw, 19px);
  line-height: 2.1;
  letter-spacing: .05em;
  color: var(--itv-navy);
}
.itv-message__from {
  margin-top: 20px;
  font-size: 13px;
  letter-spacing: .08em;
  color: var(--itv-mute);
}

/* ==================================================
   OTHER INTERVIEW
   ================================================== */
.itv-other {
  padding: 0 0 110px;
  background: #fff;
}
.itv-other__inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 5%;
}
.itv-other__title {
  font-size: 19px;
  font-weight: 700;
  letter-spacing: .12em;
  color: var(--itv-navy);
  text-align: center;
}
.itv-other__card {
  position: relative;
  display: block;
  margin-top: 34px;
  overflow: hidden;
}
.itv-page a.itv-other__card,
.itv-page a.itv-other__card:link,
.itv-page a.itv-other__card:visited { color: #fff; }
.itv-other__photo {
  display: block;
  overflow: hidden;
}
.itv-other__photo img {
  display: block;
  width: 100%;
  aspect-ratio: 21 / 9;
  object-fit: cover;
  transition: transform .7s var(--itv-ease);
}
.itv-other__card:hover .itv-other__photo img { transform: scale(1.04); }
/* 写真の下辺を暗く落として、白い文字が写真の明るい部分でも読めるようにする */
.itv-other__card::after {
  content: "";
  position: absolute;
  inset: 40% 0 0;
  background: linear-gradient(180deg, rgba(10, 40, 91, 0), rgba(10, 40, 91, .82));
  pointer-events: none;
}
.itv-other__num {
  position: absolute;
  right: clamp(20px, 3vw, 44px);
  bottom: clamp(14px, 2vw, 26px);
  z-index: 2;
  font-family: var(--font-en);
  font-weight: 600;
  font-size: clamp(56px, 7vw, 104px);
  line-height: .82;
  letter-spacing: .01em;
  font-variant-numeric: tabular-nums;
  color: transparent;
  -webkit-text-stroke: 1.4px rgba(255, 255, 255, .8);
  pointer-events: none;
}
@supports not ((-webkit-text-stroke: 1px #000) or (text-stroke: 1px #000)) {
  .itv-other__num { color: rgba(255, 255, 255, .32); }
}
.itv-other__band {
  position: absolute;
  left: 0;
  bottom: clamp(22px, 3vw, 42px);
  z-index: 2;
  display: block;
  padding: 16px clamp(22px, 3vw, 40px) 18px;
  background: var(--itv-navy);
  border-left: 5px solid var(--color-red);
}
.itv-other__quote {
  display: block;
  font-family: var(--font-mincho, 'Noto Serif JP', serif);
  font-weight: 600;
  font-size: clamp(17px, 1.9vw, 23px);
  line-height: 1.65;
  letter-spacing: .04em;
}
.itv-other__meta {
  display: block;
  margin-top: 8px;
  font-size: 12.5px;
  letter-spacing: .08em;
  color: rgba(255, 255, 255, .78);
}

.itv-back {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: 36px;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: .14em;
}
.itv-page a.itv-back:link,
.itv-page a.itv-back:visited { color: var(--color-blue); }
.itv-back::before {
  content: "";
  width: 34px;
  height: 1px;
  background: var(--color-blue);
  transition: width .3s var(--itv-ease);
}
.itv-back:hover::before { width: 52px; }

/* ==================================================
   ENTRY
   ================================================== */
.itv-cta {
  position: relative;
  overflow: hidden;
  padding: 92px 0 100px;
  background: var(--itv-navy);
  color: #fff;
}
.itv-cta__ghost {
  position: absolute;
  right: -.04em;
  bottom: -.12em;
  font-family: var(--font-en);
  font-weight: 600;
  font-size: clamp(90px, 13vw, 210px);
  line-height: 1;
  color: rgba(255, 255, 255, .06);
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
}
.itv-cta__inner {
  position: relative;
  z-index: 1;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 5%;
}
.itv-cta__label {
  font-family: var(--font-en);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .66);
}
.itv-page .itv-cta__lead {
  margin-top: 16px;
  font-family: var(--font-mincho, 'Noto Serif JP', serif);
  font-weight: 600;
  font-size: clamp(23px, 2.4vw, 31px);
  line-height: 1.7;
  letter-spacing: .06em;
}
.itv-page .itv-cta__desc {
  margin-top: 18px;
  font-size: 15px;
  line-height: 2;
  color: rgba(255, 255, 255, .84);
}
.itv-cta__btns {
  margin-top: 36px;
  display: flex;
  align-items: center;
  gap: 28px;
  flex-wrap: wrap;
}
.itv-cta__sub {
  font-weight: 700;
  font-size: 14px;
  letter-spacing: .14em;
  padding-bottom: 5px;
  border-bottom: 1px solid rgba(255, 255, 255, .45);
  transition: border-color .3s;
}
.itv-page a.itv-cta__sub:link,
.itv-page a.itv-cta__sub:visited,
.itv-page a.itv-cta__sub:hover { color: #fff; }
.itv-cta__sub:hover { border-bottom-color: #fff; }

/* ==================================================
   スクロール演出
   assets/js/interview.js が .itv-anim を付けてから初めて隠れる。
   JSが動かない／prefers-reduced-motion のときは最初から全部見えている。
   ================================================== */
.itv-anim [data-itv-rv] {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .85s var(--itv-ease), transform .85s var(--itv-ease);
}
.itv-anim [data-itv-rv].is-in {
  opacity: 1;
  transform: none;
}

/* 写真は動かさず、下から上へ現像するように出す */
.itv-anim .itv-shot[data-itv-rv] {
  opacity: 1;
  transform: none;
}
.itv-anim .itv-shot[data-itv-rv] img {
  clip-path: inset(0 0 100% 0);
  transform: scale(1.07);
  transition: clip-path 1.05s var(--itv-ease), transform 1.5s var(--itv-ease);
}
.itv-anim .itv-shot[data-itv-rv].is-in img {
  clip-path: inset(0 0 0 0);
  transform: none;
}
.itv-anim .itv-shot[data-itv-rv] figcaption {
  opacity: 0;
  transition: opacity .6s .45s ease;
}
.itv-anim .itv-shot[data-itv-rv].is-in figcaption { opacity: 1; }

/* 他のインタビューのカードも同じ現像の出し方 */
.itv-anim .itv-other__card[data-itv-rv] {
  opacity: 1;
  transform: none;
}
.itv-anim .itv-other__card[data-itv-rv] > * {
  opacity: 0;
  transition: opacity .7s .35s ease;
}
.itv-anim .itv-other__card[data-itv-rv].is-in > * { opacity: 1; }
.itv-anim .itv-other__card[data-itv-rv] .itv-other__photo img {
  clip-path: inset(0 0 100% 0);
  transition: clip-path 1.05s var(--itv-ease), transform .7s var(--itv-ease);
}
.itv-anim .itv-other__card[data-itv-rv].is-in .itv-other__photo img {
  clip-path: inset(0 0 0 0);
}

/* スケジュール：時間軸の線を左から引いて、点と札を順に出す */
.itv-anim .itv-sched__track[data-itv-rv] {
  opacity: 1;
  transform: none;
}
.itv-anim .itv-sched__track::before {
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 1.2s var(--itv-ease);
}
.itv-anim .itv-sched__track.is-in::before { transform: scaleX(1); }
.itv-anim .itv-sched__item {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .55s var(--itv-ease), transform .55s var(--itv-ease);
  /* --i はテンプレート側でループの連番を入れている */
  transition-delay: calc(.3s + var(--i, 0) * .11s);
}
.itv-anim .itv-sched__track.is-in .itv-sched__item {
  opacity: 1;
  transform: none;
}

/* ==================================================
   読み込み時の演出（ヒーローだけ。静止状態から出るだけで、
   スクロール連動の遅延表示はしない＝1枚目の静止画で全部読める）
   ================================================== */
@keyframes itvUp {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}
@keyframes itvBand {
  from { opacity: 0; transform: translateX(-22px); }
  to   { opacity: 1; transform: none; }
}
@keyframes itvPhoto {
  from { transform: scale(1.06); }
  to   { transform: none; }
}
.itv-hero__photo img { animation: itvPhoto 2.4s var(--itv-ease) both; }
.itv-hero__index     { animation: itvUp .8s .05s var(--itv-ease) both; }
.itv-hero__band      { animation: itvBand .9s .22s var(--itv-ease) both; }
.itv-hero__meta      { animation: itvUp .8s .42s var(--itv-ease) both; }

@media (prefers-reduced-motion: reduce) {
  .itv-hero__photo img,
  .itv-hero__index,
  .itv-hero__band,
  .itv-hero__meta { animation: none; }
  .itv-other__photo img { transition: none; }
  .itv-anim [data-itv-rv],
  .itv-anim [data-itv-rv] img,
  .itv-anim [data-itv-rv] figcaption,
  .itv-anim .itv-sched__item {
    opacity: 1;
    transform: none;
    clip-path: none;
    transition: none;
  }
}

/* ==================================================
   タブレット（〜1023px）：分割と交互組みをやめて縦に積む
   ================================================== */
@media (max-width: 1023px) {
  .itv-hero {
    grid-template-columns: minmax(0, 1fr);
    padding-top: 100px;
  }
  .itv-hero__photo {
    order: -1;
    min-height: 0;
    aspect-ratio: 16 / 9;
  }
  /* 縦積みではヒーロー自体がヘッダーの下に来るので、上100pxのオフセットは戻す。
     絶対配置のまま inset だけ 0 にして、aspect-ratio の枠にぴったり収める */
  .itv-hero__photo img {
    inset: 0;
    height: 100%;
    object-position: center 30%;
  }
  .itv-hero__panel { padding: 52px 0 60px; }
  .itv-hero__panel-inner {
    max-width: 900px;
    margin: 0 auto;
    padding: 0 5%;
  }
  .itv-hero__band { margin-right: 0; }
  .itv-hero__ghost { bottom: 4px; }

  .itv-block { padding: 76px 0; }
  .itv-block__grid,
  .itv-block--rev .itv-block__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 44px;
  }
  /* 縦積みでは「文章 → 写真」の順に統一する */
  .itv-block--rev .itv-block__side { order: 2; }
  .itv-shot img { aspect-ratio: 16 / 9; }
  .itv-shot--out-r,
  .itv-shot--out-l { margin: 0; }
  .itv-shot--out-r figcaption,
  .itv-shot--out-l figcaption { margin-left: 0; margin-right: 0; }
  .itv-profile { max-width: 520px; }

  /* 時間軸は縦組みラベルが窮屈になるので、罫線だけの一覧に切り替える */
  .itv-sched__track {
    margin-top: 32px;
    flex-direction: column;
    gap: 0;
    border-top: 1px solid var(--itv-line);
  }
  .itv-sched__track::before { display: none; }
  .itv-sched__item {
    flex-direction: row;
    align-items: baseline;
    gap: 18px;
    padding: 14px 0;
    border-bottom: 1px solid var(--itv-line);
  }
  .itv-sched__time { width: 74px; flex: none; font-size: 15px; line-height: 1.9; }
  .itv-sched__dot { display: none; }
  .itv-sched__desc {
    writing-mode: horizontal-tb;
    margin-top: 0;
    height: auto;
    font-size: 15px;
    line-height: 1.9;
    letter-spacing: .04em;
  }
}

/* ==================================================
   SP（〜767px）
   ================================================== */
@media (max-width: 767px) {
  .itv-page { font-size: 15.5px; }

  .itv-hero__photo { aspect-ratio: 4 / 3; }
  .itv-hero__panel { padding: 40px 0 48px; }
  .itv-hero__band { padding: 18px 20px 20px; margin-top: 20px; }
  .itv-hero__meta { margin-top: 18px; font-size: 12.5px; }
  .itv-hero__ghost { bottom: -10px; color: rgba(255, 255, 255, .045); }

  .itv-block { padding: 56px 0; }
  .itv-lead { font-size: 16px; padding-bottom: 32px; }
  .itv-qa { margin-top: 38px; }
  .itv-qa__q { font-size: 17.5px; }
  .itv-qa__dash { margin-right: .25em; }

  .itv-pull { padding: 52px 0 56px; }
  .itv-pull p { padding-top: 22px; }

  .itv-sched { padding: 64px 0 68px; }
  .itv-sched__title-ja { font-size: 17.5px; }
  .itv-sched__time { width: 66px; }

  .itv-message { padding-bottom: 68px; }
  .itv-message__card { padding: 34px 22px 36px; }

  .itv-other { padding-bottom: 72px; }
  .itv-other__title { font-size: 17.5px; }
  .itv-other__photo img { aspect-ratio: 4 / 3; }
  /* 帯を写真の下に出す。数字は帯の上（ネイビー地）に置くと白い輪郭が確実に読める */
  .itv-other__band {
    position: static;
    padding: 16px 76px 18px 18px;
  }
  .itv-other__card::after { display: none; }
  .itv-other__num {
    right: 16px;
    bottom: 14px;
    font-size: 52px;
  }

  .itv-cta { padding: 64px 0 72px; }
  .itv-cta__btns {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
  }
}

/* ==================================================
   SP見直し 2026-10-07
   ・ヒーロー写真の拡大アニメーション（scale 1.06）が枠の外へはみ出し、読み込み直後にSPで横に揺れていた → 枠で切る
   ・押せる範囲が小さかったリンクを高さ44pxに
   ================================================== */
.itv-hero__photo { overflow: hidden; }
.itv-back { min-height: 44px; }
/* 下線は border ではなく text-decoration にして、押せる範囲（上下12px）を広げても線が文字に付いたままにする */
.itv-cta__sub {
  display: inline-block;
  padding: 12px 0;
  border-bottom: none;
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, .45);
  text-decoration-thickness: 1px;
  text-underline-offset: 6px;
}
.itv-cta__sub:hover { text-decoration-color: #fff; }
/* 導入文（3行程度）は行の長さを均等に。1100px前後で最終行に「ます。」だけが残っていた（2026-10-07） */
.itv-lead { text-wrap: balance; }
/* ヒーローの大英字（Assembly 等）が320px幅で画面の外にはみ出し、横スクロールが出ていた → ヒーロー内で切る */
.itv-hero { overflow-x: clip; }

/* ---- 見出し帯のキャッチ：「と」と「両」が重なる不具合の修正（2026-10-08・iPhoneで指摘、Chromeでも同じ） ----
   1行目の開き括弧をぶら下げる text-indent（-.42em）が、文節の箱（.nb・inline-block）にも継承され、
   2つ目以降の文節まで左にずれて前の文字に重なっていた。ずらすのは行頭だけにする。 */
.itv-hero__band-line .nb { text-indent: 0; }