@charset "utf-8";

/* =========================================================
   SPECIAL TALK LP
   PC: 1440px基準 / SP: 375px基準 / ブレイクポイント: 768px
========================================================= */

/* ---------- 変数 ---------- */
:root {
  --primary-black: #3b3b3b;
  --primary-red: #7d0007;
  --primary-red-dark: #5c0005;
  --beige: #f3f0ec;
  --cream: #f7ebd9;
  --marker: #f8f47a;
  --white: #fff;

  --font-heading: "Zen Kaku Gothic New", "Noto Sans JP", sans-serif;
  --font-oswald: "Oswald", sans-serif;
  --font-serif: "EB Garamond", serif;
  --font-archivo: "Archivo", sans-serif;

  --header-h: 87px;
  --ease: cubic-bezier(.22, .61, .36, 1);

  /*
    コンテンツの最大幅は 1920px。
    --vw：画面幅の1%（vw）に上限を付けたもの。1920px を超える画面では 19.2px で止まる。
          大きさや位置は vw ではなく calc(数値 * var(--vw)) で指定する。
    --page-gutter：1920px を超える画面で、コンテンツの左右にできる余白の幅。
  */
  /*
    紙のようなざらつき：明るい粒と暗い粒が半々のグレーのノイズ。
    background-blend-mode: soft-light で重ねると、中間のグレーは色を変えないので
    平均の色はベージュのまま、粒だけが見える。
    粒の強さは feFuncR/G/B の slope（大きいほど強い）と intercept（= .5 − slope × .5）で調整。
  */
  --noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.32' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='.33 .33 .33 0 0 .33 .33 .33 0 0 .33 .33 .33 0 0 0 0 0 0 1'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='linear' slope='2.6' intercept='-.8'/%3E%3CfeFuncG type='linear' slope='2.6' intercept='-.8'/%3E%3CfeFuncB type='linear' slope='2.6' intercept='-.8'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");

  /*
    白い背景用のざらつき：白の上ではソフトライトが効かないので、
    白はそのままに、うっすらした暗い粒（暖かいグレー）だけを重ねる。
    粒の濃さは feColorMatrix の最後の行（-.2 -.2 -.2 0 .27）で調整（.33 を大きくすると濃く）。
  */
  --noise-white: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.32' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .4 0 0 0 0 .35 -.2 -.2 -.2 0 .27'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");

  --content-max: 1920px;
  /* --sbw：スクロールバーの幅（JSで設定）。vw にはスクロールバーが含まれるので差し引く */
  --sbw: 0px;
  --vw: min(calc((100vw - var(--sbw)) / 100), calc(var(--content-max) / 100));
  --page-gutter: max(0px, calc((100vw - var(--sbw) - var(--content-max)) / 2));

  /*
    ×：白い長方形にエンジの縁。2本を交差させ、交差部分の縁も両方見せる
    （先に2本とも白で塗り、その上に2本の縁を描く）
  */
  --cross-img: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 50 50'%3E%3Cg fill='%23fff'%3E%3Crect x='-5' y='22' width='60' height='6' transform='rotate(45 25 25)'/%3E%3Crect x='-5' y='22' width='60' height='6' transform='rotate(-45 25 25)'/%3E%3C/g%3E%3Cg fill='none' stroke='%237d0007' stroke-width='2.6'%3E%3Crect x='-5' y='22' width='60' height='6' transform='rotate(45 25 25)'/%3E%3Crect x='-5' y='22' width='60' height='6' transform='rotate(-45 25 25)'/%3E%3C/g%3E%3C/svg%3E");
}

@media (max-width: 768px) {
  :root {
    --header-h: 60px;

    /*
      SP は背景のざらつきの粒を、PC（baseFrequency .32）より細かくする（.48）。
      強さ（slope / intercept / 最後の行の値）は上の PC 用と同じ。PC 用を変えたら、ここも合わせる。
    */
    --noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.48' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='.33 .33 .33 0 0 .33 .33 .33 0 0 .33 .33 .33 0 0 0 0 0 0 1'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='linear' slope='2.6' intercept='-.8'/%3E%3CfeFuncG type='linear' slope='2.6' intercept='-.8'/%3E%3CfeFuncB type='linear' slope='2.6' intercept='-.8'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    --noise-white: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.48' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .4 0 0 0 0 .35 -.2 -.2 -.2 0 .27'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  }
}

/* ---------- ベース ---------- */
html {
  font-size: 62.5%;
  /* ページの地の白に、うっすら紙のざらつき（MV・ベージュ・フッターは自分の背景で覆う） */
  background: var(--noise-white) left top / 240px 240px, var(--white);
  /* ページ内リンクのスクロールは jQuery（main.js）で行うので、scroll-behavior: smooth は指定しない */
  scroll-padding-top: var(--header-h);
  /* 横にはみ出した分は画面の端で切る（背景を画面の端まで伸ばすため、body ではなく html で切る） */
  overflow-x: clip;
}

body {
  font-family:
    "Noto Sans JP",
    "Roboto",
    "Oswald", "EB Garamond", "Archivo",
    sans-serif;
  font-style: normal;
  font-size: 1.6rem;
  line-height: 1;
  color: var(--primary-black);
  /* 背景は html のざらつきを見せるため、body には付けない */
  -webkit-font-smoothing: antialiased;
  /* コンテンツは最大 1920px で中央寄せ（背景色は各セクションで画面の端まで伸ばす） */
  max-width: var(--content-max);
  margin-inline: auto;
}

body.is-menu-open {
  overflow: hidden;
}

img {
  max-width: 100%;
  height: auto;
}

.btn {
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* 日本語のタイトル・見出し */
.mv__title,
.mv__category,
.mv__pair,
.mv__catch,
.intro__theme,
.profile__name,
.quote__main,
.quote__sub,
.talk__title,
.talk__caption-line {
  font-family: var(--font-heading);
}

:where(a, button):focus-visible {
  outline: 2px solid var(--primary-red);
  outline-offset: 3px;
}

/* =========================================================
   ヘッダー
========================================================= */

/* ---------- 表示切替 ---------- */
.header__pc {
  display: flex;
}

.header__sp {
  display: none;
}

@media (max-width: 768px) {
  .header__pc {
    display: none;
  }

  .header__sp {
    display: flex;
  }
}

/* ---------- 共通 ---------- */
/*
  ヘッダー自体は重なりの階層（スタッキングコンテキスト）を作らない。
  作ると、中のSNSアイコンに掛けた反転が写真まで届かなくなるため。
  画面への固定は、PCはロゴとSNSに、SPは .header__sp に個別に指定する。
*/
.header {
  position: absolute;
  inset: 0 0 auto;
}

.header__logo {
  position: relative;
  z-index: 2;
  display: block;
  width: 18rem;
  transition: opacity .3s ease;
}

.header__logo:hover {
  opacity: .7;
}

.header__logo img {
  display: block;
  width: 100%;
}

/* ---------- PC ---------- */
@media (min-width: 769px) {
  .header__logo {
    position: fixed;
    top: calc((var(--header-h) - 4.4rem) / 2);
    left: calc(var(--page-gutter) + 4.5rem); /* 1920px を超える画面ではコンテンツの左端に合わせる */
    z-index: 100;
  }
}

/* ---------- SP ---------- */
.header__sp {
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  align-items: center;
  justify-content: space-between;
  height: var(--header-h);
  padding: 0 1.6rem;
}

@media (max-width: 768px) {
  .header__logo {
    width: 13rem;
  }

  /* ロゴは、ページを開いたときにふわっと出て、下にスクロールすると上へ消え、
     上にスクロールしたときだけ出る（JS が .header__sp に .is-hidden を付け外しする）。
     本文や写真に重ならないようにするための動き。translate は個別プロパティ */
  .header__logo {
    transition: opacity .3s ease, translate .4s var(--ease);
    animation: logoIn .8s var(--ease) backwards; /* 表示時のみ。終わったあとは通常の指定に戻る */
  }

  /* visibility: hidden でキーボードのフォーカスも外す。消える動きが終わってから切り替える（表示するときは即座に戻す） */
  .header__sp.is-hidden .header__logo {
    opacity: 0;
    translate: 0 -150%;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .3s ease, translate .4s var(--ease), visibility 0s .4s;
  }
}

@keyframes logoIn {
  from {
    opacity: 0;
    translate: 0 -1.2rem;
  }
}

/* .header__toggle {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 4.4rem;
  height: 4.4rem;
  border-radius: 50%;
  background-color: var(--primary-red);
  transition: background-color .3s ease;
}

.header__toggle:hover {
  background-color: var(--primary-red-dark);
}

.header__toggle-bar,
.header__toggle-bar::before,
.header__toggle-bar::after {
  display: block;
  width: 1.8rem;
  height: 1.5px;
  background-color: var(--white);
  transition: transform .4s var(--ease), background-color .2s ease;
}

.header__toggle-bar {
  position: relative;
}

.header__toggle-bar::before,
.header__toggle-bar::after {
  content: "";
  position: absolute;
  left: 0;
}

.header__toggle-bar::before {
  transform: translateY(-6px);
}

.header__toggle-bar::after {
  transform: translateY(6px);
}

.header.is-open .header__toggle-bar {
  background-color: transparent;
}

.header.is-open .header__toggle-bar::before {
  transform: rotate(45deg);
}

.header.is-open .header__toggle-bar::after {
  transform: rotate(-45deg);
} */

/* =========================================================
   メニュー（SP）
========================================================= */
.menu {
  position: fixed;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 3.2rem;
  padding: calc(var(--header-h) + 2.4rem) 2.4rem 4rem;
  background-color: var(--beige);
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  transition: opacity .4s ease, visibility .4s ease;
}

.header.is-open .menu {
  opacity: 1;
  visibility: visible;
}

.menu__list {
  border-top: 1px solid rgb(0 0 0 / .12);
}

.menu__link {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: 1.2rem;
  padding: 1.8rem 3.2rem 1.8rem .4rem;
  border-bottom: 1px solid rgb(0 0 0 / .12);
  font-size: 1.5rem;
  line-height: 1.5;
  letter-spacing: .05em;
  transition: color .3s ease;
}

.menu__link::after {
  content: "";
  position: absolute;
  top: 50%;
  right: .8rem;
  width: .7rem;
  height: .7rem;
  border-top: 1px solid currentColor;
  border-right: 1px solid currentColor;
  transform: translateY(-50%) rotate(45deg);
  transition: right .3s ease;
}

.menu__link:hover {
  color: var(--primary-red);
}

.menu__link:hover::after {
  right: .4rem;
}

.menu__num {
  flex-shrink: 0;
  font-family: var(--font-oswald);
  font-size: 1.4rem;
  color: var(--primary-red);
  letter-spacing: .04em;
}

.menu__cta {
  display: block;
  padding: 1.8rem;
  border: 1px solid var(--primary-red);
  background-color: var(--primary-red);
  color: var(--white);
  font-size: 1.5rem;
  font-weight: 500;
  text-align: center;
  letter-spacing: .05em;
  transition: background-color .3s ease, color .3s ease;
}

.menu__cta:hover {
  background-color: transparent;
  color: var(--primary-red);
}

/* =========================================================
   卒業生向けリンク（PC・画面に固定してスクロールに追随）
   Figma 143:1589 の構成（白い箱＋右端のエンジの矢印タブ）をもとに、ユーザー指示でブラッシュアップ：
   ・半透明の白＋背景ぼかし（写真が下を通っても読める・軽く見える）
   ・英字ラベル「FOR GRADUATES」（INTERVIEW SERIES / GRADUATE と同じ Oswald の語り口）
   ・文字は左ぞろえで、英字 → 見出し → 説明 の3段の強弱
   ・ホバーで矢印が右上へ抜けて戻る／見出しが赤に
   PC は右端の余白 0（画面の端にぴったり）。
========================================================= */
.alumni-link {
  position: fixed;
  top: calc((var(--header-h) - 8.4rem) / 2);
  right: 0; /* PC は画面の右端にぴったり付ける（ユーザー指示・余白0） */
  z-index: 100;
  display: flex;
  align-items: stretch;
  height: 8.4rem;
  overflow: hidden;
  border: 1px solid rgb(125 0 7 / .12);
  border-right: 0;
  border-radius: 4px 0 0 4px;
  background-color: rgb(255 255 255 / .86);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: 0 1rem 2.4rem -1.2rem rgb(80 0 5 / .35);
  color: #333;
  transition: background-color .35s ease, border-color .35s ease, box-shadow .4s var(--ease), translate .4s var(--ease);
}

/* ホバー：箱ぜんたいがエンジになり、文字は白に */
.alumni-link:hover {
  translate: 0 -2px;
  border-color: var(--primary-red);
  background-color: var(--primary-red);
  box-shadow: 0 1.4rem 2.8rem -1.2rem rgb(80 0 5 / .55);
}

.alumni-link:focus-visible {
  outline: 2px solid var(--primary-red);
  outline-offset: 3px;
}

.alumni-link__body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: .7rem;
  padding: 0 2.6rem 0 2.4rem;
}

/* 英字ラベル：左に短い線（INTERVIEW SERIES と同じ細い線の扱い） */
.alumni-link__en {
  display: flex;
  align-items: center;
  gap: .6rem;
  color: var(--primary-red);
  font-family: var(--font-oswald);
  font-size: 1.05rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: .12em;
  transition: color .35s ease;
}

.alumni-link:hover .alumni-link__en {
  color: rgb(255 255 255 / .8);
}

.alumni-link__en::before {
  content: "";
  width: 1.4rem;
  border-top: 1px solid currentColor;
}

.alumni-link__title {
  font-family: var(--font-heading);
  font-size: 2.5rem; /* ボタンの主役。英字・説明との差をはっきりつける */
  font-weight: 700;
  line-height: 1;
  letter-spacing: .06em;
  transition: color .35s ease;
}

.alumni-link:hover .alumni-link__title {
  color: var(--white);
}

.alumni-link__text {
  color: #666;
  font-family: var(--font-heading);
  font-size: 1.2rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: .06em;
  white-space: nowrap;
  transition: color .35s ease;
}

.alumni-link:hover .alumni-link__text {
  color: rgb(255 255 255 / .9);
}

/* 右端のエンジのタブ。矢印は Figma（f7:arrow-up-right）の形をマスクで白く抜く */
.alumni-link__icon {
  position: relative;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 5.8rem;
  overflow: hidden;
  background-color: var(--primary-red);
  transition: background-color .3s ease;
}

.alumni-link__icon::before {
  content: "";
  width: 1.5rem;
  height: 1.5rem;
  background-color: var(--white);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='19.2 26.95 11.07 11.08'%3E%3Cpath d='M29.5016 36.4051C29.8948 36.4051 30.2466 36.0787 30.2466 35.6351V27.7751C30.2466 27.298 29.9452 26.9798 29.4513 26.9798L21.5913 26.9965C21.1309 26.9965 20.8213 27.3398 20.8213 27.7333C20.8213 28.1265 21.1727 28.4615 21.5577 28.4615H24.0523L28.0366 28.3108L26.513 29.6501L19.21 36.9695L20.2608 38.0203L27.5763 30.7048L28.9155 29.1898L28.7648 32.9983V35.6687C28.7648 36.0537 29.0998 36.4051 29.5016 36.4051Z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='19.2 26.95 11.07 11.08'%3E%3Cpath d='M29.5016 36.4051C29.8948 36.4051 30.2466 36.0787 30.2466 35.6351V27.7751C30.2466 27.298 29.9452 26.9798 29.4513 26.9798L21.5913 26.9965C21.1309 26.9965 20.8213 27.3398 20.8213 27.7333C20.8213 28.1265 21.1727 28.4615 21.5577 28.4615H24.0523L28.0366 28.3108L26.513 29.6501L19.21 36.9695L20.2608 38.0203L27.5763 30.7048L28.9155 29.1898L28.7648 32.9983V35.6687C28.7648 36.0537 29.0998 36.4051 29.5016 36.4051Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* 箱がエンジになるので、タブは少し濃くして区切りを残す */
.alumni-link:hover .alumni-link__icon {
  background-color: #5c0004;
}

/* ホバー：矢印が右上へ抜けて、左下から戻ってくる */
.alumni-link:hover .alumni-link__icon::before {
  animation: alumniArrow .6s var(--ease);
}

@keyframes alumniArrow {
  0%   { translate: 0 0; opacity: 1; }
  45%  { translate: 1.6rem -1.6rem; opacity: 0; }
  46%  { translate: -1.6rem 1.6rem; opacity: 0; }
  100% { translate: 0 0; opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .alumni-link,
  .alumni-link:hover {
    translate: none;
  }

  .alumni-link:hover .alumni-link__icon::before {
    animation: none;
  }
}

/*
  SP：右下の角に付く小さなボタン（試作・ユーザー指示。Figma に SP は無く、こちらで組んだもの）。
  帯だと存在感が大きすぎたので、画面の右端・下端にぴったり付く（余白0）小さなボタンにした。
  親指が届く下に置き、上のロゴの出入りとぶつからないようにする。
  英字ラベル（FOR GRADUATES）と説明文は出す（ユーザー指示）。文字を小さめにして大きさを抑える。
  iPhone の下端（ホームバー）の余白は、ボタンの中の下パディング（env(safe-area-inset-bottom)）で避ける。
*/
@media (max-width: 768px) {
  :root {
    --alumni-bar-h: 6.4rem; /* ボタンの高さ。フッターの下余白に足す（ホームバー分は別に足す） */
  }

  .alumni-link {
    top: auto;
    right: 0;
    bottom: 0;
    left: auto;
    height: calc(var(--alumni-bar-h) + env(safe-area-inset-bottom, 0px));
    border-width: 1px 0 0 1px;
    border-radius: 4px 0 0 0;
    box-shadow: 0 .8rem 2rem -1rem rgb(80 0 5 / .45);
  }

  .alumni-link:hover {
    translate: none;
  }

  .alumni-link__body {
    gap: .5rem;
    padding: 0 1.4rem env(safe-area-inset-bottom, 0px) 1.6rem;
  }

  .alumni-link__en {
    font-size: .95rem;
  }

  .alumni-link__title {
    font-size: 1.6rem;
  }

  .alumni-link__text {
    font-size: 1.1rem;
  }

  .alumni-link__icon {
    width: 4.2rem;
  }

  .alumni-link__icon::before {
    width: 1.3rem;
    height: 1.3rem;
  }

  /* メニューを開いている間は隠す */
  .header.is-open .alumni-link {
    display: none;
  }
}

/* =========================================================
   建物の装飾（横に流れ続けるスカイライン）
========================================================= */
.skyline {
  --skyline-h: calc(17.5 * var(--vw));
  --skyline-ratio: 5.7;
  --tile-w: calc(var(--skyline-h) * var(--skyline-ratio));
  position: relative;
  height: var(--skyline-h);
  overflow: hidden;
  pointer-events: none;
  /* 建物の根元から下を建物と同じ色で塗り、次の背景へつなげる（根元の位置は画像ごとに違う） */
  background: linear-gradient(transparent var(--skyline-base), var(--skyline-ground) var(--skyline-base));
}

/*
  建物の画像は真っ白ではなく、わずかにグレーがかった白で描かれている。
  そのため地面の下端と背景の境目に細い線が出るので、根元に背景と同じ色を上から重ねて
  透明→背景色へなめらかに変え、地面を背景になじませる。
*/
.skyline::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    transparent calc(var(--skyline-base) - 3%),
    var(--skyline-ground) calc(var(--skyline-base) + 1.5%)
  );
}

.skyline::before {
  content: "";
  display: block;
  width: calc(100% + var(--tile-w));
  height: 100%;
  background-repeat: repeat-x;
  background-position: left bottom;
  background-size: var(--tile-w) 100%;
  animation: skylineLoop 120s linear infinite;
}

.skyline--white {
  --skyline-base: 66%;
  --skyline-ground: var(--white);
}

.skyline--white::before {
  background-image: url("../images/soushoku_white.webp");
}

.skyline--beige {
  --skyline-ratio: 5.56;
  --skyline-base: 85%;
  --skyline-ground: var(--beige);
}

.skyline--beige::before {
  background-image: url("../images/soushoku_beige.webp");
}

/*
  ベージュの建物はくっきり見せ、建物の根元から下の地面だけに紙の質感を重ねる。
  根元（--skyline-base）から下に向かってざらつきが強くなり、下の帯の質感につながる。
  ::after の根元のなじませ（背景色のグラデーション）の上にノイズを重ねている。
*/
.skyline--beige::after {
  background:
    var(--noise) left top / 240px 240px,
    linear-gradient(
      transparent calc(var(--skyline-base) - 3%),
      var(--skyline-ground) calc(var(--skyline-base) + 1.5%)
    );
  background-blend-mode: soft-light, normal;
  /* ノイズはベージュの地面が塗られた位置から出す（その上はくっきり） */
  /* 根元で 0% → 下端で 40%。続きは帯（.ticker）で 40% → 100% にする */
  -webkit-mask-image: linear-gradient(transparent calc(var(--skyline-base) + 1.5%), rgb(0 0 0 / .4) 100%);
          mask-image: linear-gradient(transparent calc(var(--skyline-base) + 1.5%), rgb(0 0 0 / .4) 100%);
}

@keyframes skylineLoop {
  to {
    transform: translateX(calc(var(--tile-w) * -1));
  }
}

@media (max-width: 768px) {
  .skyline {
    --skyline-h: calc(60 * var(--vw));
  }
}

/* =========================================================
   × 記号
========================================================= */
/* ×。文字の「×」は読み上げ用に残し、見た目は画像で表示する */
.cross {
  display: inline-block;
  width: .8em;
  height: .8em;
  margin: 0 .45em;
  overflow: hidden;
  vertical-align: -.06em;
  background: var(--cross-img) center / contain no-repeat;
  color: transparent;
}

.cross--large {
  display: block;
  width: 1.1em;
  height: 1.1em;
  margin: .4em auto;
}

/* =========================================================
   メインビジュアル
========================================================= */
/*
  --mv-fade：0 = 上の空がベージュ、1 = 白。
  2つ目の校舎装飾（下端のベージュの建物）が見えてきたら、JSで 0→1 に変えて空を白にする。
*/
.mv {
  --mv-fade: 0;
  --mv-sky: color-mix(in srgb, var(--white) calc(var(--mv-fade) * 100%), var(--beige));
  position: relative;
  height: calc(104 * var(--vw));
  padding-top: calc(22.5 * var(--vw));
  /*
    最初は建物をベージュの上でくっきり見せる。
    ベージュと白の切り替えは上の建物の根元（画面上から約30vw）にそろえる。
  */
  background: linear-gradient(var(--mv-sky) 0 calc(30 * var(--vw)), var(--white) calc(30.5 * var(--vw)) 100%);
  z-index: 0; /* 背景の延長（::before）をセクションの背面に置くため */
}

/*
  背景を画面の端まで伸ばす（コンテンツは最大1920px、背景色だけ左右へ延長）。
  同じ背景（色の変化・固定表示も含む）を inherit で受け継ぎ、左右に広げて背面に置く。
  intro も同じ方法。
*/
.mv::before,
.intro::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  /* 画面の端までぴったり伸ばす（それ以上広げると横にはみ出し、横スクロールできてしまう） */
  left: calc(var(--page-gutter) * -1);
  right: calc(var(--page-gutter) * -1);
  z-index: -1;
  background: inherit;
  background-blend-mode: inherit; /* ざらつきの重ね方も受け継ぐ */
}

/* 建物の装飾は背景の一部なので、1920px を超える画面でも画面の端まで伸ばす */
.mv__skyline {
  position: absolute;
  left: calc(var(--page-gutter) * -1);
  right: calc(var(--page-gutter) * -1);
}

/*
  空が白に変わるのに合わせて、ぼかしながら消す
  （最初はくっきり。建物についているベージュのロゴも残らないように）
*/
.mv__skyline--top {
  top: calc(19.3 * var(--vw));
  opacity: calc(1 - var(--mv-fade));
  filter: blur(calc(var(--mv-fade) * 8px));
}

.mv__skyline--bottom {
  bottom: 0;
  --skyline-h: calc(17.8 * var(--vw));
}

@media (min-width: 769px) {
  .mv {
    background-attachment: fixed;
  }

  .mv__skyline--top {
    position: sticky;
    top: calc(19.3 * var(--vw));
    margin-top: calc(-3.2 * var(--vw)); /* 上余白 22.5 − 3.2 = 19.3 */
    margin-bottom: calc(var(--skyline-h) * -1 + calc(3.2 * var(--vw)));
    margin-inline: calc(var(--page-gutter) * -1); /* 画面の端まで伸ばす */
  }
}

.mv__heading {
  --primary-red: #82fff8;
  position: sticky;
  top: calc(22.5 * var(--vw));
  z-index: 3;
  width: fit-content;
  margin-left: calc(6.9 * var(--vw));
  color: #c4c4c4;
  mix-blend-mode: difference;
  will-change: opacity, filter;
}

.mv__title {
  font-size: clamp(4.6rem, calc(6.1 * var(--vw)), 8.8rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: .06em;
}

.mv__accent {
  color: var(--primary-red);
}

.mv__lead {
  margin-top: 1.6rem;
  font-size: max(1.4rem, calc(1.11 * var(--vw))); /* 1440px で 16px（1.6rem）、画面幅に比例 */
  line-height: 1.86;
  letter-spacing: .05em;
}

.mv__label {
  display: grid;
  gap: 1.2rem;
  width: fit-content;
  margin-top: 6rem;
}

.mv__category {
  padding: .8rem 0;
  background-color: var(--primary-red);
  color: #000; /* 反転して背景色（白・ベージュ）の文字になる */
  font-size: 2.5rem;
  font-weight: 700;
  text-align: center;
  letter-spacing: .1em;
}

.mv__pair {
  display: flex;
  align-items: center;
  font-size: 3.7rem;
  font-weight: 700;
  letter-spacing: .08em;
}

.mv__quote {
  align-self: flex-start;
  width: 1.1rem;
  margin: 0 .4rem;
  filter: invert(1); /* 赤の引用符を反転色にしておく */
}

/*
  タブレット幅（769〜1100px）：見出しが画面幅に比例して小さくなるのに、
  弁護士の写真・「特別対談」の帯・右のキャッチが重なるので、帯（とキャッチ）を下げる。
  キャッチは見出しの下端にそろえているので、帯の上余白を足せば一緒に下がる。
*/
@media (min-width: 769px) and (max-width: 1100px) {
  .mv__label {
    margin-top: calc(6rem + 5.5 * var(--vw));
  }
}

/*
  広い画面（1441px 以上）：1920px 付近で、画面の高さが足りないと
  見出しの下の「卒業生 × さなる教師」と右のキャッチが画面の下に切れる。
  見出しの高さ（約 53.5rem・幅が変わってもほぼ一定）＋キャッチのはみ出しが画面に入るよう、
  足りないぶんだけ見出しを上げる。画面が高ければ従来どおり（22.5vw）。
  上げ方は translate（レイアウトに影響しない）。margin-top は、上の建物の負の margin と
  相殺されて効かないため使わない。sticky の位置（top）は変えず、表示だけ常に同じ量上げる。
*/
@media (min-width: 1441px) {
  .mv__heading {
    translate: 0 min(0px, calc(max(calc(100vh - 55rem), calc(12 * var(--vw))) - 22.5 * var(--vw)));
  }
}

/* PC：引用符を大きくして、しっかり目立たせる */
@media (min-width: 769px) {
  .mv__quote {
    width: 2.2rem;
    margin: 0 .7rem;
  }
}

/*
  見出し内の×は反転させずに見せたいので、見出しの中は場所取りだけにして透明にし、
  同じ位置に反転の掛からない×（.mv__cross）をJSで重ねる。
*/
.mv__cross-slot {
  opacity: 0;
  transform: translateY(.08em); /* 文字の中心に合わせて少し下げる */
}

.mv__cross {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 4;
  margin: 0;
  pointer-events: none;
}

/*
  見出しと一緒に固定。
  見出しの一番下にある「特別対談」の帯と同じ段に並ぶよう、見出しの下端にそろえる。
*/
.mv__catch {
  position: absolute;
  /*
    右の余白を「卒業生 × さなる教師」の左の余白（画面左から 6.9vw）とそろえる。
    見出しは画面左から 6.9vw の位置にあるので、見出し基準で 100 − 6.9 × 2 = 86.2vw が右端。
    下端は「卒業生 × さなる教師」の文字の下とそろえるため、少し下げる。
  */
  bottom: calc(-.4 * var(--vw));
  left: calc(86.2 * var(--vw));
  translate: -100% 0;
  width: max-content;
  font-size: max(2rem, calc(2.2 * var(--vw))); /* 1440px で約32px、画面幅に比例 */
  font-weight: 700;
  line-height: 1.4;
}

/*
  スクロールを始めたら（JSで .is-shown）、1文字ずつ流れるように出す。
  文字はJSで1文字ずつ .mv__char に分け、--i（何文字目か）で表示を少しずつ遅らせる。
*/
.mv__char {
  display: inline-block;
}

.js .mv__char {
  opacity: 0;
  transform: translateY(.5em);
  filter: blur(4px);
  transition:
    opacity .6s var(--ease),
    transform .6s var(--ease),
    filter .6s var(--ease);
  transition-delay: calc(var(--i) * 70ms);
}

.js .mv__catch.is-shown .mv__char {
  opacity: 1;
  transform: none;
  filter: none;
}

/* 読み上げ用の文章（画面には表示しない） */
.mv__catch-label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.mv__photos {
  position: absolute;
  inset: 0;
  z-index: 2;
  overflow: clip; /* 左右に流れる写真が画面の外へはみ出して、横スクロールできないようにする */
  pointer-events: none;
}

.mv__photo {
  position: absolute;
  will-change: transform;
}

.mv__photo img {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 4px;
  box-shadow: 0 1.6rem 4rem rgb(0 0 0 / .08);
  animation: photoIn 1.2s var(--ease) both;
}

.mv__photo:nth-child(1) { top: calc(11.3 * var(--vw)); left: 0; width: calc(10.4 * var(--vw)); }
.mv__photo:nth-child(2) { top: calc(5.4 * var(--vw));  left: calc(43.1 * var(--vw)); width: calc(13.9 * var(--vw)); }
.mv__photo:nth-child(3) { top: calc(22.5 * var(--vw)); left: calc(79 * var(--vw));   width: calc(20.8 * var(--vw)); }
.mv__photo:nth-child(4) { top: calc(31 * var(--vw));   left: calc(43.3 * var(--vw)); width: calc(27.8 * var(--vw)); }
.mv__photo:nth-child(5) { top: calc(65.6 * var(--vw)); left: calc(12.8 * var(--vw)); width: calc(25.3 * var(--vw)); }
.mv__photo:nth-child(6) { top: calc(78.9 * var(--vw)); left: calc(74.9 * var(--vw)); width: calc(15.6 * var(--vw)); }
.mv__photo:nth-child(7) { top: calc(94 * var(--vw));   left: calc(64 * var(--vw));   width: calc(19 * var(--vw)); } 

/* 広い画面（1800px 以上）：見出しを上げたぶん、左上の校舎の写真もほんの少し上げてコピーとの重なりを減らす */
@media (min-width: 1800px) {
  .mv__photo:nth-child(1) { top: calc(9.3 * var(--vw)); }
}

.mv__photo:nth-child(2) img { animation-delay: .1s; }
.mv__photo:nth-child(3) img { animation-delay: .2s; }
.mv__photo:nth-child(4) img { animation-delay: .3s; }
.mv__photo:nth-child(5) img { animation-delay: .4s; }
.mv__photo:nth-child(6) img { animation-delay: .5s; }

@keyframes photoIn {
  from {
    opacity: 0;
    transform: translateY(4rem);
  }
}

@media (max-width: 768px) {
  .mv {
    height: calc(352 * var(--vw));
    padding-top: calc(25 * var(--vw));
    background: linear-gradient(var(--mv-sky) 0 calc(49 * var(--vw)), var(--white) calc(49.5 * var(--vw)) 100%);
  }

  .mv__skyline--top {
    top: calc(7.7 * var(--vw));
  }

  .mv__skyline--bottom {
    --skyline-h: calc(60 * var(--vw));
  }

  .mv__heading {
    position: relative;
    top: auto;
    display: flex;
    flex-direction: column;
    width: auto;
    margin: 0 calc(5.3 * var(--vw));
    /*
      iPhone の Safari では、反転（mix-blend-mode: difference）を掛けた文字が細く見えるため、
      SP では反転をやめ、反転後に見えていた色を直接指定する（PC は従来どおり反転）。
      反転後の色：文字＝#c4c4c4 → 濃いグレー（白の上で #3b3b3b、ベージュの上で #2f2c28）／赤＝#82fff8 → #7d0007
    */
    --primary-red: #7d0007;
    color: #333;
    mix-blend-mode: normal;
  }

  .mv__category {
    color: var(--white); /* PC は #000 を反転して背景色（白）の文字にしている */
  }

  .mv__quote {
    filter: none; /* PC は赤の引用符を反転色にして、反転で赤に戻している */
  }

  /* ラベル：先頭に出して右寄せ */
  .mv__label {
    order: -1;
    align-self: flex-end;
    gap: calc(1.6 * var(--vw));
    margin-top: 0;
  }

  .mv__category {
    padding: calc(1.6 * var(--vw)) 0;
    font-size: calc(4.8 * var(--vw));
  }

  .mv__pair {
    font-size: calc(4.3 * var(--vw));
  }

  /* タイトル：上の写真（ラベル〜約124vw）をよけて、その下から始める */
  .mv__title {
    margin-top: calc(87 * var(--vw));
    font-size: min(calc(9.6 * var(--vw)), 5.6rem); /* 上限 5.6rem（768px 付近で大きすぎたため。約583px 幅から上限）。「先生との出会いが」が1行に収まる大きさ（上限は約10.5vw：幅89.4vw ÷ 8文字 ÷ 字間込みの1.06） */  }

  .mv__lead {
    margin-top: 1.6rem;
    font-size: clamp(1.35rem, calc(3.2 * var(--vw)), 1.6rem); /* 上限 1.6rem（768px 付近で大きすぎたため。約500px 幅から上限）。375px では 13.5px のまま。幅が広がると、タイトルや写真の位置（vw 基準）に合わせて大きくして、下に余白ができないようにする（3.2vw は、最長の行が折り返さない上限に近い） */
    letter-spacing: 0; /* 13.5px で最後の行（25文字）を1行に収めるため、字間をなくす（実測：375px で 334px / 幅 335px） */
    margin-right: calc(-1 * var(--vw)); /* 右だけ約3.7px 広げて、フォントの差で「。」が落ちないよう余裕をとる（左は他の行とそろえたまま） */
    line-height: 1.85;
  }

  /* キャッチ：写真の間に置く。1行目の前に短い線を添え、2行目は文字の頭にそろえる */
  .mv__catch {
    top: calc(233 * var(--vw)); /* 見出し基準 */
    bottom: auto;
    left: calc(15.7 * var(--vw));
    translate: none;
    padding-left: calc(9 * var(--vw));
    font-size: calc(4.9 * var(--vw));
  }

  .mv__catch::before {
    content: "";
    position: absolute;
    top: .72em;
    left: 0;
    width: calc(6 * var(--vw));
    border-top: 1px solid currentColor;
  }

  /* 写真（1:教師 2:ビジネスマン 3:客室乗務員 4:弁護士 5:医師 6:建築士 7:女性） */
  .mv__photo:nth-child(4) { top: calc(47 * var(--vw));  left: calc(5 * var(--vw));   width: calc(62 * var(--vw)); }
  .mv__photo:nth-child(5) { top: calc(98 * var(--vw));  left: calc(76 * var(--vw));  width: calc(27 * var(--vw)); }
  .mv__photo:nth-child(1) { top: calc(188 * var(--vw)); left: calc(5 * var(--vw));   width: calc(27 * var(--vw)); }
  .mv__photo:nth-child(3) { top: calc(192 * var(--vw)); left: calc(49 * var(--vw));  width: calc(52 * var(--vw)); }
  .mv__photo:nth-child(2) { top: calc(276 * var(--vw)); left: calc(-2 * var(--vw));  width: calc(28 * var(--vw)); }
  .mv__photo:nth-child(6) { top: calc(298 * var(--vw)); left: calc(70 * var(--vw));  width: calc(28 * var(--vw)); }
  .mv__photo:nth-child(7) { top: calc(322 * var(--vw)); left: calc(22 * var(--vw));  width: calc(18 * var(--vw)); }

  /* 写真はスクロールで画面に入ったものから順に、下からぼかしが取れながら出る（JSが .is-visible を付ける）。
     同時に入った写真は --reveal-delay で少しずつ遅らせる。translate は個別プロパティ（PC の transform と競合しない） */
  .js .mv__photo img {
    animation: none;
    opacity: 0;
    translate: 0 2.4rem;
    filter: blur(6px);
    transition: opacity 1s var(--ease), translate 1s var(--ease), filter 1s var(--ease);
    transition-delay: var(--reveal-delay, 0s);
  }

  .js .mv__photo.is-visible img {
    opacity: 1;
    translate: none;
    filter: none;
  }
}


/* =========================================================
   帯テキスト（横に流れ続けるテキスト）
========================================================= */
.ticker {
  position: relative;
  overflow: hidden;
  /* 1920px を超える画面でも、帯は画面の端まで広げる */
  margin-inline: calc(var(--page-gutter) * -1);
  /*
    上のベージュの建物から下の SPECIAL TALK へ、ざらつきを上からのグラデーションでつなげる。
    ざらつきの上に「上は60%・下は0%」のベージュを重ね、ざらつきを 40% → 100% に強めていく。
  */
  background:
    linear-gradient(rgb(243 240 236 / .6), rgb(243 240 236 / 0)),
    var(--noise) left top / 240px 240px,
    var(--beige);
  background-blend-mode: normal, soft-light, normal;
}

.ticker::before,
.ticker::after {
  content: "";
  position: absolute;
  left: 2rem;
  right: 2rem;
}

.ticker::before {
  top: 0;
  border-top: 2px solid var(--primary-black);
}

.ticker::after {
  bottom: 0;
  border-bottom: 1px solid var(--primary-black);
}

.ticker__track {
  display: flex;
  width: max-content;
  animation: tickerLoop 60s linear infinite;
}

.ticker__item {
  display: flex;
  align-items: center;
  padding: 1rem 3.2rem;
  font-family: var(--font-serif);
  font-size: 2rem;
  letter-spacing: .02em;
  white-space: nowrap;
}

.ticker__icon {
  width: 3.3rem;
  margin-right: 6.4rem;
}

/*
  文字は1つのまとまり（.ticker__text）にして、1行の中で並べる。
  「CHANGED」だけ別のフォント（Archivo）でも、文字の下の線（ベースライン）が自然にそろう。
  前後の半角スペースが入るので、余白は小さめにしている（以前は flex の部品として並べ、スペースがなかった）
*/
.ticker__accent {
  margin: 0 .05em;
  color: var(--primary-red);
  font-family: var(--font-archivo);
  font-weight: 700;
}

@keyframes tickerLoop {
  to {
    transform: translateX(-50%);
  }
}

@media (max-width: 768px) {
  .ticker::before,
  .ticker::after {
    left: 0;
    right: 0;
  }

  .ticker__item {
    padding: .8rem 1.6rem;
    font-size: 1.5rem;
  }

  .ticker__icon {
    width: 2.4rem;
    margin-right: 3.2rem;
  }
}

/* =========================================================
   横長の写真（背景として画面の端まで広げる）
   参考：https://mangabox.ink/interview_yasue_matsuzaki
   写真は画面に固定し、枠（figure）の形で切り抜く。
   スクロールすると、窓から写真をのぞくように見える（background-attachment: fixed と同じ見え方）。
   代替テキストを残すため、背景画像ではなく img のまま固定している。
========================================================= */
.wide-photo {
  clip-path: inset(0); /* 枠の外にはみ出た写真を隠す */
}

.wide-photo > img {
    position: fixed;
    top: 0;
    left: 0;
    display: block;
    width: calc(100vw - var(--sbw));
    height: auto;
    object-fit: contain;
}

/* SP：参考サイトと同じく固定せず、普通の写真として表示する */
@media (max-width: 768px) {
  .wide-photo {
    clip-path: none;
  }

  .wide-photo > img {
    position: static;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

/* =========================================================
   SPECIAL TALK（導入）
========================================================= */
.intro {
  position: relative;
  z-index: 0; /* 背景の延長（::before）をセクションの背面に置くため */
  display: grid;
  grid-template-columns: 1fr auto;
  padding: 8rem calc(7.4 * var(--vw)) 0;
  background-color: var(--beige);
  /* ベージュに細かい粒を重ねて、紙のようなざらっとした質感を出す */
  background-image: var(--noise);
  background-size: 240px 240px;
  background-blend-mode: soft-light;
}

.intro > * {
  grid-column: 1 / -1;
}

/* タイトルと同じく画面幅に比例して大きくする（1440px で 16px） */
.intro__series {
  grid-column: 1;
  display: flex;
  align-items: center;
  gap: calc(.3 * var(--vw));
  margin-left: calc(.55 * var(--vw));
  position: relative;
  top: calc(-.5 * var(--vw)); /* 気持ち上に */
  color: var(--primary-red);
  font-family: var(--font-oswald);
  font-size: max(1.2rem, calc(1.11 * var(--vw)));
  font-weight: 400;
  letter-spacing: .04em;
}

/* 「ー」の線（文字の前後）：細く見せるため、通常の画面では少し薄くする */
.intro__series::before,
.intro__series::after {
  content: "";
  width: max(1rem, calc(1 * var(--vw)));
  border-top: 1px solid currentColor;
  opacity: .55;
}

/* 高解像度の画面では 0.5px の線にする */
@media (min-resolution: 2dppx) {
  .intro__series::before,
  .intro__series::after {
    border-top-width: .5px;
    opacity: 1;
  }
}

.intro__title {
  grid-column: 1;
  margin-top: calc(-.9 * var(--vw)); /* INTERVIEW SERIES に近づける */
  color: #444;
  font-family: var(--font-oswald);
  /* 画面幅に比例して大きくする（上限は --vw の 1920px）。右のテーマと同じ比率で変わるので隙間が開かない */
  font-size: max(6.4rem, calc(10.3 * var(--vw)));
  font-weight: 500;
  line-height: 1;
  letter-spacing: .02em;
  white-space: nowrap;
}

.intro__initial {
  color: var(--primary-red);
}

/* 英字の小見出しはタイトルの上に添えるだけにし、右のテーマはタイトルの行にそろえる */
.intro__theme {
  grid-column: 2;
  grid-row: 2;
  align-self: start; /* 英字タイトルの文字の上端にそろえる（下端は × の余白で調整） */
  margin-left: calc(2.8 * var(--vw));
  font-size: max(2rem, calc(2.2 * var(--vw))); /* 英字タイトルと同じく画面幅に比例 */
  font-weight: 700;
  line-height: 1.3;
  text-align: center;
  letter-spacing: .04em;
}

/* PC：テーマの文字の下端が、英字タイトルの文字の下端とそろうように × の上下の余白を詰める */
@media (min-width: 769px) {
  .intro__theme .cross--large {
    margin-block: .275em;
  }
}

.intro__lead {
  margin-top: 4.8rem;
  font-size: 1.6rem;
  line-height: 1.625;
  letter-spacing: .05em;
}

/*
  一番上の横長写真は、スクロールに左右されない普通の写真にする（画面に固定しない）。
  画像本来の縦横比のまま、画面の端まで広げて表示する。
*/
.intro__photo {
  margin: 10rem calc(50% - calc(50 * var(--vw)) - var(--page-gutter)) 0; /* 画面の端まで広げる */
}

.intro__photo > img {
  display: block;
  width: 100%;
  height: auto;
}

/*
  写真の下のタイトル（「— SANARU GRADUATES TODAY —」・「卒業生の今」・下線・白い帯の2行）。
  Figma（1440px）の位置を、写真の下端を基準に calc(N * var(--vw)) で置く。
  高さは次のプロフィールの上端（Figma で写真の下端から 528px）に合わせる。
*/
.intro__heading {
  position: relative;
  z-index: 1;
  height: calc(36.67 * var(--vw) - 5.5rem); /* 5.5rem は .profile の padding-top */
  margin: calc(2.8 * var(--vw)) calc(50% - calc(50 * var(--vw)) - var(--page-gutter)) 0; /* 上：写真との間（中身ごと下がり、プロフィールもその分下がる）。左右：.intro__photo と同じ基準にそろえる */
  font-family: var(--font-heading);
}

/*
  「卒業生の今」のかたまり。中の大きさ・位置はすべて em（このかたまりの font-size ＝ 「卒業生の」の大きさ）で置く。
  font-size だけ変えれば、PC と SP で同じ構成のまま大きさを変えられる。
*/
.intro__today {
  position: absolute;
  top: calc(2.57 * var(--vw));
  left: calc(var(--page-gutter) + calc(7.36 * var(--vw)));
  width: 7.075em;
  height: 3.15em;
  font-size: calc(2.78 * var(--vw)); /* Figma 40px */
}

.intro__today-label {
  position: absolute;
  top: -1.6em; /* 文字が長いので、「今」（と左右の飾り）にかからないよう、かたまりの上にはみ出して置く（em は自身の大きさ基準） */
  left: 0;
  color: #000;
  font-family: var(--font-oswald);
  font-size: max(.35em, .8rem); /* 小さい画面でも 8px を下回らない */
  font-weight: 400;
  letter-spacing: .07em;
  white-space: nowrap;
}

/* 横棒：文字の「—」だと長さを変えられないので、文字は消して、線を引く（長さは width で調整） */
.intro__today-dash {
  display: inline-block;
  width: .8em;
  height: 0;
  border-top: 1px solid currentColor;
  vertical-align: middle;
  overflow: hidden; /* 文字（「—」）は、読み上げ用に残して見えなくする */
  white-space: nowrap;
  text-indent: 200%;
}

.intro__today-main {
  display: contents;
}

.intro__today-prefix {
  position: absolute;
  top: .772em;
  left: 0;
  color: #333;
  font-size: 1em;
  font-weight: 700;
  line-height: 1.45;
  letter-spacing: .04em; /* 字間を気持ち広げる */
  white-space: nowrap;
}

.intro__today-now {
  position: absolute;
  top: .022em; /* em は「今」自身の大きさ基準。Figma の 70px から 90px に大きくした（下線に触れないよう、上にはみ出す形で位置を調整） */
  left: 2.089em;
  color: var(--primary-red);
  font-size: 2.25em;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}

/* 「今」の左右の飾り（今の文字サイズ基準の em）。右は左を180度回したもの */
.intro__today-mark {
  position: absolute;
  width: .24em;
  height: .15em;
}

.intro__today-mark--left {
  top: .12em;
  left: -.3em;
}

.intro__today-mark--right {
  top: .12em; /* 左の飾りと同じ高さ */
  left: 1.133em;
  rotate: 180deg; /* transform は data-reveal が使うので、個別プロパティで回す */
}

.intro__today-line {
  position: absolute;
  top: 2.533em;
  left: 0;
  width: 7.79em; /* 右の飾りの右端まで（Figma の 283px から延長。斜めの切れ込みは変えないよう、画像側の右の線を伸ばしている） */
  max-width: none; /* リセットCSSの max-width: 100% だと、かたまりの幅で止まってしまう */
  height: auto;
}

/* 白い帯の2行（帯どうしは中央ぞろえ。長い2行目の左端が Figma の位置） */
.intro__copy {
  position: absolute;
  top: calc(13.89 * var(--vw));
  left: calc(var(--page-gutter) + calc(6.32 * var(--vw)));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(1.6 * var(--vw));
}

.intro__copy-line {
  padding: calc(.14 * var(--vw)) calc(1.39 * var(--vw));
  border-radius: 3px;
  background-color: var(--white);
  color: #333;
  font-size: calc(4.17 * var(--vw));
  font-weight: 900;
  line-height: 1.6;
  text-align: center;
  white-space: nowrap;
}

.intro__copy-line--accent {
  color: var(--primary-red);
}

/* 「希少疾患」を囲む飾り（“ ” の代わり）。「今」の左右の飾りと同じ画像。文字サイズ（em）基準 */
.intro__copy-mark {
  display: inline-block;
  width: .42em;
  height: .27em;
  vertical-align: .62em; /* 文字の上寄りに置く */
}

.intro__copy-mark--left {
  margin-right: .12em;
  margin-left: .3em; /* 左のテキスト（「で」）との間 */
}

.intro__copy-mark--right {
  margin-right: .3em; /* 右のテキスト（「に」）との間 */
  margin-left: .12em;
  rotate: 180deg;
}

/* スクロールで下から順に表示（卒業生の → 今 → 白い帯）。共通の data-reveal の動きに、遅れだけ足す */
.js .intro__today-now[data-reveal] {
  transition-delay: .15s;
}

.js .intro__copy[data-reveal] {
  transition-delay: .3s;
}

.intro__summary {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 103rem;
  margin: 8rem auto 0;
  padding: 4rem 7.5rem;
  border-radius: 4px;
  background-color: rgb(247 235 217 / .85);
  font-size: 1.6rem;
  font-weight: 500;
  line-height: 1.625;
  letter-spacing: .04em;
}

.intro__summary p + p {
  margin-top: 2.6rem;
}

/* 1920px を超える画面でも、建物と地面は画面の端まで伸ばす */
.intro__skyline {
  margin: calc(-14 * var(--vw)) calc(50% - calc(50 * var(--vw)) - var(--page-gutter)) 0;
}

/*
  白い建物の地面にも、下の白い背景と同じざらつきを重ねてつなげる。
  地面のなじませ（白のグラデーション）と同じ形のマスクで、建物の根元から下だけに出す。
*/
.intro__skyline::after {
  background:
    var(--noise-white) left top / 240px 240px,
    linear-gradient(
      transparent calc(var(--skyline-base) - 3%),
      var(--skyline-ground) calc(var(--skyline-base) + 1.5%)
    );
  -webkit-mask-image: linear-gradient(transparent calc(var(--skyline-base) - 3%), #000 calc(var(--skyline-base) + 1.5%));
          mask-image: linear-gradient(transparent calc(var(--skyline-base) - 3%), #000 calc(var(--skyline-base) + 1.5%));
}

@media (max-width: 768px) {
  .intro {
    grid-template-columns: 1fr;
    padding: 6rem calc(5.3 * var(--vw)) 0;
  }

  /* タイトルを広げた分、INTERVIEW SERIES も左端をそろえる */
  .intro__series {
    margin-left: calc(-2.75 * var(--vw));
    position: relative;
    top: calc(-1.2 * var(--vw)); /* 気持ち上に */
  }

  /* 画面幅いっぱいに近い大きさにする（左右の余白 約2vw） */
  .intro__title {
    margin-inline: calc(-3.3 * var(--vw));
    font-size: calc(17 * var(--vw));
  }

  .intro__theme {
    grid-column: 1;
    grid-row: auto;
    margin-top: 3.2rem;
    margin-left: 0;
    font-size: max(2.2rem, calc(5.5 * var(--vw))); /* 小さい画面は 22px のまま、幅が広がると比例して大きくする（768px で約42px） */
  }

  .intro__lead {
    margin-top: 3.2rem;
    font-size: 1.4rem;
    line-height: 1.85;
    letter-spacing: 0;
    text-wrap: balance; /* 「。」で改行した各文が折り返すとき、末尾の1〜2文字だけが孤立しないよう行を均等にする */
  }

  .intro__photo {
    margin-top: 6rem;
  }

  /* 高さは最低 180px。375px では本来の高さ（約129px）より高くなるので、左右が少し切れる。幅が広がって本来の高さが 180px を超えたら、切れずに全体を表示する */
  .intro__photo > img {
    min-height: 18rem;
    object-fit: cover;
    object-position: 50% 50%;
  }

  /* SP：PC と同じ構成（小見出し → 卒業生の今 → 下線 → 白い帯2行）を縦に並べる。絶対配置はかたまりの中だけ */
  .intro__heading {
    height: auto;
    margin: calc(10 * var(--vw)) 0 0;
    padding-bottom: 4rem;
  }

  .intro__today {
    position: relative;
    top: auto; /* PC の位置指定を打ち消す */
    left: auto;
    font-size: min(calc(5.6 * var(--vw)), 3.4rem); /* 幅が広がっても 34px で止める（768px で小さめに）。PC の 40px に当たる大きさ。ここだけ変えれば全体が拡縮する */
  }

  /* 「— SANARU GRADUATES TODAY —」：SP は少し大きくする（375px で 8px → 8.5px。PC は .35em のまま） */
  .intro__today-label {
    font-size: max(.4em, .85rem);
  }

  .intro__copy {
    position: static;
    max-width: calc(89.4 * var(--vw)); /* 画面幅から左右の余白（5.3vw ずつ）を引いた幅。タイトルの横幅に引きずられて広がらないようにする */
    margin-top: calc(5 * var(--vw));
    gap: calc(2.4 * var(--vw));
  }

  .intro__copy-line {
    padding: calc(.9 * var(--vw)) max(.9rem, calc(1.8 * var(--vw))); /* 左右の余白を詰めて、文字を大きくしても1行に収める */
    font-size: min(calc(5.9 * var(--vw)), 3.2rem); /* 幅が広がっても 32px で止める（768px で2本とも1行に収まる大きさ） */
    line-height: 1.5;
    white-space: normal;
    font-weight: 700; /* PC は Figma の 900。SP は細めにする */
    text-align: left; /* 折り返した行は左ぞろえ */
    text-wrap: wrap; /* 行いっぱいまで文字を詰めてから折り返す（balance だと早めに折り返す） */
  }

  .intro__summary {
    margin-top: 6rem;
    padding: 2.8rem 2rem;
    font-size: 1.4rem;
    line-height: 1.8;
  }

  .intro__skyline {
    margin-top: calc(-10 * var(--vw)); /* 画像の上の余白ぶんだけ紹介文の枠に重ねる（建物の上端が隠れて見切れない範囲） */
  }
}

/* =========================================================
   プロフィール
========================================================= */
.profile {
  display: grid;
  grid-template-columns: minmax(0, 35rem) auto minmax(0, 35rem);
  justify-content: center;
  column-gap: 6.5rem;
  padding-top: 5.5rem;
}

.profile::before {
  content: "";
  order: 1;
  align-self: start;
  width: 5rem;
  height: 5rem;
  margin-top: 17rem;
  background: var(--cross-img) center / contain no-repeat;
}

.profile__item:first-child {
  order: 0;
}

.profile__item:last-child {
  order: 2;
}

.profile__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.profile__role {
  width: 15rem;
  padding: .9rem 0;
  background-color: var(--primary-red);
  color: var(--white);
  font-family: var(--font-oswald);
  font-size: 2.2rem;
  font-weight: 500;
  letter-spacing: .04em;
}

.profile__photo {
  width: 15rem;
  margin-top: 2rem;
  aspect-ratio: 1;
  border-radius: 50%;
  object-fit: cover;
}

.profile__name {
  position: relative;
  width: fit-content;
  margin-top: 1rem;
  font-size: 2.4rem;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: .08em;
}

/*
  「さん」は付け足しなので、名前の中央寄せから外して右に添える。
  これで読みがなは漢字の真下の中央に来る。
  文字の下（ベースライン）が漢字とそろう高さに置く。
*/
.profile__honorific {
  position: absolute;
  top: .5rem;
  left: 100%;
  font-size: 1.4rem;
  line-height: 2.4em; /* 名前の1行目（2.4rem × 1.4）と同じ高さにして、文字の下（ベースライン）をそろえる */
  white-space: nowrap;
}

.profile__kana {
  display: block;
  font-size: 1.3rem;
  line-height: 1.2;
  letter-spacing: .1em;
}

/* 卒業生のみ：名前の上に、さなる卒業の年を添える */
.profile__since {
  margin-top: 1.4rem;
  font-size: 1.4rem;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: .08em;
  color: #444; /* SPECIAL TALK の英字タイトルと同じグレー */
}

/* 年の数字だけ英字フォント（ラベルの TEACHER / GRADUATE と同じ Oswald） */
.profile__since-num {
  font-family: var(--font-oswald);
  font-size: 1.15em;
  letter-spacing: .06em;
}

.profile__position {
  margin-top: 1.6rem;
  color: var(--primary-red);
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: .05em;
}

/* 肩書は「1塊」ごとに span で分け、塊ごとに改行する（以前の <br> と同じ見え方） */
.profile__position-line {
  display: block;
}

/* SP だけ使う改行（PC では1行のまま） */
.profile__position-br {
  display: none;
}

.profile__text {
  margin-top: 3rem;
  font-size: 1.4rem;
  line-height: 1.57;
  text-align: left;
  letter-spacing: .04em;
}

/*
  PC：2人の各項目（ラベル／写真／名前／肩書／紹介文）を同じ行にそろえる。
  肩書の行数が違っても、紹介文は同じ高さから始まる。
*/
@media (min-width: 769px) {
  .profile {
    grid-template-rows: repeat(6, auto);
  }

  .profile::before {
    grid-column: 2;
    grid-row: 1 / span 6;
  }

  .profile__item {
    display: grid;
    grid-row: 1 / span 6;
    grid-template-rows: subgrid;
    align-items: start;
    justify-items: center;
  }

  /* 先生には「卒業年」の行がないので、名前・肩書・紹介文は行を指定して卒業生とそろえる */
  .profile__since {
    grid-row: 3;
  }

  .profile__name {
    grid-row: 4;
    margin-top: .6rem; /* 先生と卒業生で名前の上端をそろえる */
  }

  .profile__position {
    grid-row: 5;
  }

  .profile__text {
    grid-row: 6;
  }

  .profile__item:first-child {
    grid-column: 1;
  }

  .profile__item:last-child {
    grid-column: 3;
  }

  .profile__text {
    justify-self: stretch;
  }
}

/* SP：先生＝写真が左／卒業生＝写真が右 */
@media (max-width: 768px) {
  .profile {
    grid-template-columns: 1fr;
    row-gap: calc(12 * var(--vw));
    padding-top: 6rem;
  }

  .profile::before {
    justify-self: center;
    width: max(3.6rem, calc(7.5 * var(--vw))); /* 480px 以下では 36px のまま。幅が広がると比例して大きくする（768px で約56px） */
    height: max(3.6rem, calc(7.5 * var(--vw)));
    margin-top: 0;
  }

  /* 縦並びでは、卒業生 → × → 先生の順にする（HTML の順は変えず order で入れ替える） */
  .profile__item:first-child {
    order: 2;
  }

  .profile__item:last-child {
    order: 0;
  }

  .profile__item {
    display: grid;
    grid-template-columns: calc(40 * var(--vw)) minmax(0, 1fr);
    grid-template-rows: auto auto auto 1fr auto;
    grid-template-areas:
      "photo role"
      "photo since"
      "photo name"
      "photo position"
      "text  text";
    column-gap: calc(5 * var(--vw));
    align-items: start;
    justify-items: end;
    text-align: right;
  }

  .profile__item--graduate {
    grid-template-columns: minmax(0, 1fr) calc(40 * var(--vw));
    grid-template-areas:
      "role     photo"
      "since    photo"
      "name     photo"
      "position photo"
      "text     text";
    justify-items: start;
    text-align: left;
  }

  /* TEACHER / GRADUATE：赤い帯をやめ、文字＋細い線にする */
  .profile__role {
    grid-area: role;
    display: flex;
    align-items: center;
    gap: 1rem;
    width: 100%;
    padding: 0;
    background: none;
    color: var(--primary-black);
    font-size: 2.2rem;
    line-height: 1;
  }

  .profile__role::before,
  .profile__role::after {
    content: "";
    flex: 1;
    border-top: 1px solid currentColor;
    opacity: .6;
  }

  .profile__item--teacher .profile__role::after,
  .profile__item--graduate .profile__role::before {
    display: none;
  }

  /* 先生には「卒業年」の行がないので、TEACHER と名前の間をあける */
  .profile__item--teacher .profile__role {
    margin-bottom: .8rem;
  }

  .profile__photo {
    grid-area: photo;
    justify-self: stretch;
    width: 100%;
    margin-top: 0;
  }

  .profile__name {
    grid-area: name;
    margin-top: 1.4rem;
    font-size: 2.2rem;
    text-align: left; /* .profile__item の寄せ（先生は右・卒業生は左）を引き継ぐと、読みがなが名前の真下からずれる。名前と読みがなは左でそろえる */
  }

  .profile__item--graduate .profile__name {
    margin-top: -.2rem; /* 上に卒業年が入るぶん詰める */
  }

  .profile__honorific {
    top: .5rem;
    font-size: 1.4rem;
    line-height: 2.2em; /* 名前の1行目（2.2rem × 1.4）と同じ高さ */
  }

  .profile__kana {
    font-size: 1.2rem;
  }

  .profile__since {
    grid-area: since;
    margin-top: 2.4rem; /* GRADUATE との間（先生の TEACHER と名前の間とそろえる） */
    font-size: 1.3rem;
    color: #666; /* PC は #444。SP は名前より控えめに */
  }

  .profile__position {
    grid-area: position;
    margin-top: 1.4rem; /* 読みがなとの間をほんの少しあける */
    font-size: 1.3rem;
    line-height: 1.35; /* 塊の中の行間は少し狭く（以前は 1.5） */
  }

  /* 塊と塊の間だけ少しあける（塊の中の行間は上の line-height のまま） */
  .profile__position-line + .profile__position-line {
    margin-top: .6rem;
  }

  /* 「熊本大学大学院／先端科学研究部准教授」「StapleBio共同創業者・／取締役CSO」で改行する */
  .profile__position-br {
    display: inline;
  }

  .profile__text {
    grid-area: text;
    justify-self: stretch;
    margin-top: 2.4rem;
    font-size: 1.3rem;
    line-height: 1.8;
  }
}


/* =========================================================
   引用ビジュアル
========================================================= */
.quote {
  /* 写真は画面の端まで広げるが、文字の位置は 1920px の中にそろえる（左の余白ぶんずらす） */
  --quote-x: calc(var(--page-gutter) + calc(3 * var(--vw)));
  --quote-sub-w: calc(86 * var(--vw));
  position: relative;
  height: calc(41.7 * var(--vw));
  margin-top: 4.9rem;
  margin-inline: calc(var(--page-gutter) * -1); /* 画面の端まで広げる */
}

.quote__body {
  position: absolute;
  left: var(--quote-x);
  bottom: calc(2.2 * var(--vw));
  z-index: 1;
}

.quote__main,
.quote__sub {
  width: fit-content;
  padding: calc(.6 * var(--vw)) calc(3.3 * var(--vw));
  background-color: var(--white);
  /* ページで一番目立つ見出し：1440px で約45px・太字、画面幅に比例 */
  font-size: max(1.8rem, calc(3.1 * var(--vw)));
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: .02em;
}

.quote__sub {
  width: var(--quote-sub-w);
  margin-top: calc(.7 * var(--vw));
  padding-right: calc(12 * var(--vw)); /* 右側に話し手（—— 勝田さん）を置く余白 */
}

.quote__speaker {
  position: absolute;
  left: calc(var(--quote-x) + var(--quote-sub-w) - calc(12.4 * var(--vw))); /* 白い帯の右端との余白を広めに */
  bottom: calc(calc(2.2 * var(--vw)) + calc(1.6 * var(--vw)));
  z-index: 1;
  display: flex;
  align-items: flex-end;
  gap: .4rem;
  font-size: max(1.2rem, calc(1.1 * var(--vw)));
}

.quote__speaker::before {
  content: "";
  width: calc(5.5 * var(--vw));
  border-top: 1px solid currentColor;
}

@media (max-width: 768px) {
  .quote {
    height: auto;
    margin-top: -6.2rem; /* 上の白い背景の空きを詰める（建物の下の余白に食い込ませる） */
  }

  /* 高さは最低 180px。本来の高さが 180px 未満の幅（約 430px 以下）では、左右が少し切れる */
  .quote > .quote__photo {
    height: auto;
    min-height: 18rem;
  }

  .quote__body {
    position: relative;
    left: auto;
    right: auto;
    bottom: auto;
    padding: 3.2rem calc(8 * var(--vw)) 0;
  }

  .quote__body::before,
  .quote__body::after {
    content: "";
    position: absolute;
    top: 2.8rem;
    width: 1.8rem;
    height: 1.8rem;
    background: center / contain no-repeat;
  }

  .quote__body::before {
    left: calc(3 * var(--vw));
    background-image: url("../images/quote_left.svg");
  }

  .quote__body::after {
    right: calc(3 * var(--vw));
    background-image: url("../images/quote_right.svg");
  }

  .quote__main,
  .quote__sub {
    width: auto;
    padding: 0;
    background: none;
    font-size: calc(5.8 * var(--vw));
    line-height: 1.5;
    color: var(--primary-red);
  }

  .quote__sub {
    margin-top: 1rem;
    padding-right: 0;
  }

  /* 「—さなるの教えが…」の最後の行の右端に、話し手を同じ行として重ねる（その行の高さ＝1.5 × 5.8vw ぶん引き上げる） */
  .quote__speaker {
    position: static;
    justify-content: flex-end;
    height: calc(8.7 * var(--vw));
    margin-top: calc(-8.7 * var(--vw));
    padding: 0 calc(8 * var(--vw)) calc(1.8 * var(--vw)); /* 下の余白で、隣の文字の下端（ベースライン）にそろえる */
    background: none;
    font-size: 1.4rem;
    color: var(--primary-red);
  }

  .quote__speaker::before {
    width: 3.2rem;
  }

  /* 最後の行が長くて話し手とぶつかるとき（JS が付ける）：重ねずに次の行へ送る */
  .quote__speaker.is-wrapped {
    height: auto;
    margin-top: 0;
    padding-top: 1rem;
    padding-bottom: 0;
  }
}

/* =========================================================
   対談
========================================================= */
.talk {
  /* PC：対談の写真の幅（縦長は少し狭くして高さを抑える）。大きくすると、その分だけ文章の幅が狭くなる */
  --talk-photo-w: calc(35 * var(--vw));
  --talk-photo-w-portrait: calc(31.4 * var(--vw));
  position: relative;
  display: flow-root;
  padding: 12rem max(2rem, calc((100% - 100rem) / 2)) 0;
}

main > .talk:last-child {
  padding-bottom: 12rem;
}

/* 最後の発言のあとに添える注記（取材日）。右ぞろえ */
.talk__note {
  margin-top: 4rem;
  color: #666;
  font-size: 1.4rem;
  letter-spacing: .05em;
  text-align: right;
}

.talk__title {
  --title-indent: 2rem;
  position: relative;
  width: fit-content;
  margin-bottom: 6rem;
  padding: .6rem 0 1.2rem var(--title-indent);
  /* 本文（16px）とのジャンプ率を大きく：1440px で約29px、画面幅に比例（引用の見出しよりは小さく） */
  font-size: max(2.4rem, calc(2 * var(--vw)));
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: .05em;
}

/*
  下線：細かすぎない点線にする。
  CSSの dotted は点の間隔を変えられないため、丸い点（直径約2.5px）を 7px 間隔で並べて描く。
*/
.talk__title::after {
  content: "";
  position: absolute;
  left: var(--title-indent);
  right: 0;
  bottom: 0;
  height: 3px;
  background: radial-gradient(circle, var(--primary-red) 1.2px, transparent 1.5px) left center / 7px 3px repeat-x;
}

.talk__title::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: .5rem;
  background-color: var(--primary-red);
}

/* 対談の写真は切らずに、画像本来の縦横比のまま表示する（人物の頭が切れないように） */
.talk__photo {
  position: relative;
  overflow: hidden;
  border-radius: 4px;
}

.talk__photo > img {
  display: block;
  width: 100%;
  height: auto;
}

.talk__photo--portrait {
  border-radius: 0 4px 4px 0;
}

.talk__caption {
  position: absolute;
  top: 1rem;
  right: 1rem;
  z-index: 1;
  display: flex;
  flex-direction: row-reverse;
  align-items: flex-start;
  gap: .6rem;
}

.talk__caption-line {
  padding: 1rem .8rem;
  border-radius: 2px;
  background-color: var(--primary-red);
  color: var(--white);
  font-size: clamp(1.6rem, calc(1.7 * var(--vw)), 2.4rem);
  font-weight: 500;
  line-height: 1;
  letter-spacing: .2em;
  writing-mode: vertical-rl;
}

/* スクロールでふわっと表示（共通の data-reveal の動き）。右の1行目 → 左の2行目の順に、少し遅らせて出す */
.js .talk__caption-line[data-reveal] {
  transition-duration: 1.2s;
  transition-delay: .3s;
}

.js .talk__caption-line[data-reveal] + .talk__caption-line {
  transition-delay: .6s;
}

/*
  写真を左に置く（PC）：「左：写真／右：見出しと発言」の2列に組む。
  写真は見出しと同じ行から始まる（上端は見出しの上端にそろう）。
  写真は画面（コンテンツ）の左端までつける。文字の位置は 写真の列 + 隙間 7vw から。
*/
@media (min-width: 769px) {
  .talk--aside-left {
    display: grid;
    grid-template-columns: var(--talk-photo-w) minmax(0, 1fr);
    column-gap: calc(7 * var(--vw));
    align-items: start;
    align-content: start;
    padding-left: 0;
    padding-right: calc(7.4 * var(--vw));
  }

  .talk--aside-left > * {
    grid-column: 2;
  }

  .talk--aside-left .talk__photo {
    grid-column: 1;
    grid-row: 1 / span 22; /* 見出しと同じ行から、発言と注記（.talk__note）の行すべての横に置く */
    width: var(--talk-photo-w);
    border-radius: 0 4px 4px 0;
  }

  /*
    注記（取材日）は最後の行（22行目）に置き、下ぞろえにする。
    写真が文章より下まで伸びる幅では写真の下端に、文章のほうが長い幅では文章の直下に来る
  */
  .talk--aside-left .talk__note {
    grid-row: 22;
    align-self: end;
  }

  .talk--aside-left .talk__photo--portrait {
    width: var(--talk-photo-w-portrait);
  }
}

/*
  写真を右に置く：見出しの下を「左：発言／右：写真」の2列に組む。
  写真は最初の発言と同じ行から始まるので、写真の上端と発言の文字の上端がそろう。
  写真は画面（コンテンツ）の右端までつける。
*/
.talk--aside-right {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--talk-photo-w);
  column-gap: calc(7 * var(--vw));
  align-items: start;
  padding-left: calc(7.4 * var(--vw));
  padding-right: 0;
}

.talk--aside-right > * {
  grid-column: 1;
}

.talk--aside-right .talk__photo {
  grid-column: 2;
  grid-row: 2 / span 20; /* 見出しの次の行から、発言の行すべての横に置く */
  margin-top: .2rem; /* 発言の文字の上端（行の上の余白ぶん下）にそろえる */
  border-radius: 4px 0 0 4px;
}

/*
  写真を発言の高さの中央にそろえる（PC・シリーズ用）。
  section に talk--photo-center を足すと、写真が見出しの下の発言全体の縦の中央に来る。
  足さなければ、写真は右＝最初の発言の上端、左＝見出しの上端にそろう。
  talk--aside-left / talk--aside-right のどちらにも併用できる。
*/
@media (min-width: 769px) {
  .talk--photo-center .talk__photo {
    grid-row: 2 / span 20; /* 見出しの次の行から、発言の行すべての横 */
    align-self: center;
    margin-top: 0;
  }
}

@media (max-width: 768px) {
  .talk,
  .talk--aside-left,
  .talk--aside-right {
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding: 8rem calc(5.3 * var(--vw)) 0;
  }

  main > .talk:last-child {
    padding-bottom: 3.2rem; /* 最後は注記（.talk__note）。フッターとの間 */
  }

  /* 注記（取材日）：SP は写真が文章の下に来るので、写真のさらに下に置く（写真は order: 1） */
  .talk__note {
    order: 2;
    margin-top: 1.6rem;
  }

  .talk__title {
    --title-indent: 1.4rem;
    margin-bottom: 4rem;
    font-size: 2rem;
  }

  .talk__title::before {
    width: .4rem;
  }

  /* 写真：テキスト（見出し・発言）の下に出し、左右の余白を打ち消して端まで広げる */
  .talk--aside-left .talk__photo,
  .talk--aside-right .talk__photo,
  .talk--aside-left .talk__photo--portrait {
    order: 1;
    position: relative;
    top: auto;
    left: auto;
    float: none;
    width: auto;
    margin: 5.6rem calc(-5.3 * var(--vw)) 0;
    border-radius: 0;
  }

  .talk__photo.talk__photo--portrait {
    margin-right: 3em;
  }

  /* 縦長の写真は、SPでは正方形に切り抜く（頭が切れないよう上寄せ） */
  .talk__photo--portrait > img {
    aspect-ratio: 1;
    object-fit: cover;
    object-position: center 20%;
  }

  /*
    横長の対談写真（st_3・st_5）：SP では高さをそろえて短くする（375px で約180px）。
    左右は画面の端まで、上下を切り抜く。顔が入るように、写真ごとに上下の位置（object-position）を変えている。
  */
  .talk__photo:not(.talk__photo--portrait) {
    align-self: stretch; /* 画像の高さを決めたので、枠が画像の幅に縮まないよう、左右いっぱいに広げる */
  }

  .talk__photo:not(.talk__photo--portrait) > img {
    height: calc(48 * var(--vw));
    object-fit: cover;
  }

  #talk01 .talk__photo > img { /* st_3：2人の顔は上寄り */
    object-position: 50% 24%;
  }

  #talk04 .talk__photo > img { /* st_5：勝田さんの頭が上寄り */
    object-position: 50% 18%;
  }

  #talk05 .talk__photo > img { /* st_6：高さをそろえず、本来の縦横比のまま表示する */
    height: auto;
    object-fit: fill;
  }

  /* 写真の幅に合わせて大きくする（375px では従来の 17px のまま、768px で約35px） */
  .talk__caption {
    top: max(1.2rem, calc(3.2 * var(--vw)));
    right: max(1.2rem, calc(3.2 * var(--vw)));
    gap: .4em;
    font-size: max(1.7rem, calc(4.6 * var(--vw)));
  }

  .talk__caption-line {
    padding: .6em .5em; /* 文字の大きさに合わせて余白も拡縮 */
    font-size: 1em;
  }
}

/* ---------- 発言 ---------- */
.speech {
  position: relative;
  min-height: 7.7rem;
  padding-left: 7.5rem;
  font-size: 1.6rem;
  line-height: 1.625;
  letter-spacing: .05em;
}

.speech + .speech {
  margin-top: 5rem;
}

.speech__speaker {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .4rem;
  width: 6rem;
  font-size: 1.1rem;
  line-height: 1.2;
  letter-spacing: 0;
}

.speech__icon {
  width: 6rem;
  aspect-ratio: 1;
  border-radius: 50%;
  object-fit: cover;
}

.speech__marker {
  background: linear-gradient(var(--marker), var(--marker)) left center / 0 100% no-repeat;
  color: inherit;
  transition: background-size 1.4s var(--ease) .4s;
}

.speech.is-visible .speech__marker {
  background-size: 100% 100%;
}

@media (max-width: 768px) {
  .speech {
    min-height: 6.4rem;
    padding-left: 6.2rem;
    font-size: 1.4rem;
    line-height: 1.8;
  }

  .speech + .speech {
    margin-top: 3.2rem;
  }

  .speech__speaker {
    width: 4.8rem;
    font-size: 1rem;
  }

  .speech__icon {
    width: 4.8rem;
  }
}

/* =========================================================
   区切り画像
========================================================= */
.interlude {
  height: calc(28.8 * var(--vw));
  margin-top: 12rem;
  margin-inline: calc(var(--page-gutter) * -1); /* 画面の端まで広げる */
}

@media (max-width: 768px) {
  .interlude {
    height: calc(48 * var(--vw)); /* 375px で 180px（他の st 写真とそろえる） */
    margin-top: 8rem;
  }
}

/* =========================================================
   フッター
========================================================= */
.footer {
  display: grid;
  grid-template-columns: auto auto;
  grid-template-areas:
    "brand cta"
    "copyright copyright";
  justify-content: center;
  align-items: center;
  /* 1920px を超える画面でも、フッターの赤は画面の端まで広げる（中身は中央のまま） */
  margin-inline: calc(var(--page-gutter) * -1);
  padding: 8rem 2rem 5rem;
  background-color: var(--primary-red);
  color: var(--white);
}

/* 鳥・ロゴ・キャッチコピーをひとまとめにしたリンク */
.footer__brand {
  grid-area: brand;
  display: grid;
  grid-template-columns: auto auto;
  grid-template-areas:
    "emblem logo"
    "emblem philosophy";
  align-items: center;
  transition: opacity .3s ease;
}

.footer__brand:hover {
  opacity: .7;
}

.footer__emblem {
  grid-area: emblem;
  width: 8.3rem;
  margin-right: 1.7rem;
}

.footer__logo {
  grid-area: logo;
  align-self: end;
  width: 30rem;
}

.footer__logo img {
  display: block;
  width: 100%;
}

.footer__philosophy {
  grid-area: philosophy;
  align-self: start;
  margin-top: 1rem;
  /* ロゴ(30rem)と両端をそろえる：18文字×1.6rem=28.8remを均等割付で30remに */
  width: 30rem;
  font-size: 1.6rem;
  text-align: justify;
  text-align-last: justify;
}

.footer__cta {
  grid-area: cta;
  display: flex;
  align-items: center;
  gap: 1.6rem;
  margin-left: 10rem;
  padding: 2.6rem;
  border: 1px solid var(--white);
  background-color: var(--white);
  color: var(--primary-red);
  font-size: 1.6rem;
  font-weight: 500;
  letter-spacing: .04em;
  box-shadow: 0 .4rem 1.2rem rgb(0 0 0 / .2);
  transition: background-color .3s ease, color .3s ease;
}

.footer__cta::after {
  content: "";
  width: 2rem;
  height: 2rem;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23000' stroke-width='1.4'%3E%3Cpath d='M6 14 14 6M7 6h7v7'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23000' stroke-width='1.4'%3E%3Cpath d='M6 14 14 6M7 6h7v7'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform .3s ease;
}

.footer__cta:hover {
  background-color: transparent;
  color: var(--white);
}

.footer__cta:hover::after {
  transform: translate(2px, -2px);
}

.footer__copyright {
  grid-area: copyright;
  margin-top: 5.6rem;
  font-size: 1.6rem;
  text-align: center;
}

@media (max-width: 768px) {
  .footer {
    grid-template-columns: 1fr;
    grid-template-areas:
      "brand"
      "cta"
      "copyright";
    justify-items: center;
    padding: 6rem 2rem calc(3.2rem + var(--alumni-bar-h) + env(safe-area-inset-bottom, 0px)); /* 下端の固定帯（.alumni-link）に隠れないよう、帯の高さぶん足す */
  }

  .footer__brand {
    grid-template-columns: auto;
    grid-template-areas:
      "emblem"
      "logo"
      "philosophy";
    justify-items: center;
  }

  .footer__emblem {
    width: 6rem;
    margin: 0 0 1.6rem;
  }

  .footer__logo {
    width: 22rem;
  }

  .footer__philosophy {
    /* ロゴ(22rem)に合わせる：18文字×1.2rem=21.6rem */
    width: 22rem;
    font-size: 1.2rem;
  }

  .footer__cta {
    justify-content: center;
    width: 100%;
    max-width: 27rem;
    gap: 1rem;
    margin: 3.2rem 0 0;
    padding: 1.3rem;
    font-size: 1.4rem;
  }

  .footer__cta::after {
    width: 1.6rem;
    height: 1.6rem;
  }

  .footer__copyright {
    margin-top: 4rem;
    font-size: 1.4rem;
  }
}

/* =========================================================
   スクロールで表示
========================================================= */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(2.4rem);
  transition: opacity .9s var(--ease), transform .9s var(--ease);
}

.js [data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

/*
  引用の文字：写真が見えてきたら（JSで .quote に .is-visible）、
  タイトルらしく、下からふわっと浮かび上がり、ぼかしが取れてくっきり見える。
  1行目 → 2行目 → 話し手 の順に少しずつずらして出す。
*/
.js .quote__main,
.js .quote__sub,
.js .quote__speaker {
  opacity: 0;
  transform: translateY(3rem);
  filter: blur(6px);
  transition:
    opacity 1.2s var(--ease),
    transform 1.2s var(--ease),
    filter 1.2s var(--ease);
}

.js .quote__sub {
  transition-delay: .3s;
}

.js .quote__speaker {
  transition-delay: .6s;
}

.js .quote.is-visible .quote__main,
.js .quote.is-visible .quote__sub,
.js .quote.is-visible .quote__speaker {
  opacity: 1;
  transform: none;
  filter: none;
}

/* =========================================================
   動きを減らす設定
========================================================= */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .skyline::before,
  .ticker__track,
  .header__logo,
  .mv__photo img {
    animation: none;
  }

  .js .mv__photo img {
    opacity: 1;
    translate: none;
    filter: none;
    transition: none;
  }

  .js .mv__char {
    transform: none;
    filter: none;
    transition: opacity .3s;
    transition-delay: 0s;
  }

  .js [data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .js .quote__main,
  .js .quote__sub,
  .js .quote__speaker {
    opacity: 1;
    transform: none;
    filter: none;
    transition: none;
  }

  .speech__marker {
    background-size: 100% 100%;
    transition: none;
  }
}