@charset "UTF-8";

/* ========================================
   cross-talk.css
   学生対談ページ専用スタイル
   設計幅: PC 1920px（Figma node 54-19622 / Page / President-Student Dialogue）

   レスポンシブ方針（hearing と同方式）:
   ① 箱は min(1382px, 100% - 左右5%) — 画面を狭めるとまず左右余白が詰まる
   ② 余白が5%に達したら箱が縮み、中身は cqw（箱幅基準の単位）で箱と一緒に等倍縮小
   ③ 667px以下で SP レイアウト（写真縦積み・方眼14px・円形写真は道路下 等）
   ※ SP境界を変えたいときは、このファイル内の「667px」を一括置換する
   ※ cqw の換算: 設計px(1920) × 0.8605(=1382/1606) ÷ 13.82 … 対談パネル内
                  設計px(1920) × 0.8605 ÷ 11.05 … MESSAGE内
======================================== */

.cross-talk {
  --ct-ink: #212121;        /* 枠線・文字フチ */
  --ct-text: #2c2c2c;       /* 本文 */
  --ct-band: #f7be35;       /* ヒーロー黄帯（中央） */
  --ct-band-light: #fbcc5a; /* 黄帯の左右コーナー装飾 */
  --ct-panel: #ffde8e;      /* 対談パネルの黄枠 */
  --ct-avatar: #ffcd53;     /* アバター円の地色 */
  --ct-red: #f75959;        /* MESSAGE ラベル */
  --ct-road: #666;          /* 道路 */
  --ct-placeholder: #e3e3e3;/* 画像待ちの灰色 */
  /* 方眼grid線（interview 1〜8 と同方式: テーマ色RGB + 透明度0.09625）。
     テーマ色=黄帯の #f7be35。黄は白地で沈みやすいため見えなければ透明度を上げる */
  --ct-grid: rgba(247, 190, 53, 0.09625);
  /* コンテンツ幅: hearing と同じ 1920px時1382px。狭めると余白(最小5%)から詰める */
  --ct-gutter: 5%;
  --ct-w-main: 1382px;
  --ct-w-message: 1105px;   /* MESSAGE帯 1284px(Figma) × 0.8605 */
  /* ヒーローの中身の縮小率（コンテンツ幅 1382/1606 に合わせる） */
  --ct-zoom: 0.8605;

  color: var(--ct-text);
  padding-bottom: clamp(80px, 9.13vw, 140px);
}

/* ============================================================
   Hero（黄帯＋バッジ＋タイトル帯＋道路＋リード）
   Figma: 黄帯 h379 / 道路 h40。タイトル群は帯の中に縦積み。
   帯・道路は全幅なので中身は vw + zoom でスケール（SPで zoom 解除）
============================================================ */
.ct-hero {
  position: relative;
}
.ct-hero-band {
  position: relative;
  height: clamp(228px, 24.68vw, 379px);    /* Figma 379px。vw係数は×1.25（1536pxまで上限維持） */
  background-color: var(--ct-band);
}

/* 帯の左右コーナーの明るい黄色装飾（Figma上も平面シェイプなのでCSSで描画）
   Figma: w486×h379。内側の辺が 上350→下486 に斜めに広がる */
.ct-hero-band::before,
.ct-hero-band::after {
  content: "";
  position: absolute;
  top: 0;
  height: 100%;
  width: clamp(292px, 31.64vw, 486px);
  background-color: var(--ct-band-light);
  z-index: 1;
}
.ct-hero-band::before {
  left: 0;
  clip-path: polygon(0 0, 72% 0, 100% 100%, 0 100%);
}
.ct-hero-band::after {
  right: 0;
  clip-path: polygon(28% 0, 100% 0, 100% 100%, 0 100%);
}

/* タイトル群（バッジ→白帯タイトル→サブタイトル の縦積み・中央寄せ） */
.ct-hero-head {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: clamp(26px, 2.75vw, 42px);  /* Figma: 帯上端→バッジ 約42px（フチ分含む） */
  zoom: var(--ct-zoom);                    /* コンテンツ幅の縮小に合わせて中身も等倍縮小 */
}

/* 「学生対談」バッジ（支給画像 598×300 = 299×150 の @2x）。表示は1.1倍
   ★2026-07-28 案B（中間・下限806px）採用:
   旧 clamp(197px,…) はバッジだけ約920pxで固定され、h1(下限なし)と縮み方が
   食い違ってバランスが崩れていた。下限を「806px時の値」に揃え直し、
   下のh1帯・文字・引用符・サブタイトルも同じ806pxで一斉に下限化することで、
   バッジ:h1 の比を全幅で一定(Figma基準4.11)に保つ。
   ※各下限値 = 元の係数 × 8.06（=806px÷100）。旧値: clamp(197px,21.41vw,329px) */
.ct-hero-badge {
  margin: 0;
  line-height: 0;
}
.ct-hero-badge-img {
  width: clamp(173px, 21.41vw, 329px);     /* 元サイズ×1.1。下限=21.41×8.06 */
  height: auto;
}

/* タイトル白帯（角丸＋黒枠、左右に黄色の引用符） */
.ct-hero-title {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  /* 帯（枠線の箱）と中身（文字・引用符）はすべて同じ vw 比率で連動。
     ★2026-07-28 案B: 全部の下限を「806px時の値(=係数×8.06)」に統一。
     こうすると帯・文字・引用符が“同じ幅で一斉に”下限化するので、
     一部だけ縮小が止まってバランスが崩れることがない（旧: min()で下限なし） */
  width: clamp(641px, 79.56vw, 1222px);     /* Figma 1222px。下限=79.56×8.06 */
  height: clamp(53px, 6.64vw, 102px);       /* Figma 102px（帯幅の8.35%）。下限=6.64×8.06 */
  margin: clamp(7px, 0.91vw, 14px) 0 0;
  background-color: #fff;
  border: 2px solid var(--ct-ink);
  border-radius: clamp(10.5px, 1.3vw, 20px);
}
.ct-hero-title-text {
  font-size: clamp(42px, 5.21vw, 80px);     /* Figma 80px（帯幅の6.55%）。下限=5.21×8.06 */
  letter-spacing: 0.05em;
  line-height: 1;
  color: #ffde8e;
  -webkit-text-stroke: 0.05em var(--ct-ink);  /* 黒フチ（元0.09em→細く） */
  paint-order: stroke fill;                 /* フチを文字の外側に描く */
}
.ct-hero-quote {
  position: absolute;
  top: clamp(5.24px, 0.65vw, 10px);
  font-size: clamp(42px, 5.21vw, 80px);     /* h1本文と同じ */
  line-height: 1;
  color: var(--ct-avatar);
  -webkit-text-stroke: 0.06em var(--ct-ink);
  paint-order: stroke fill;
}
.ct-hero-quote--open  { left: clamp(5.56px, 0.69vw, 10.5px); }
.ct-hero-quote--close { right: clamp(5.56px, 0.69vw, 10.5px); }

/* サブタイトル（クリーム文字＋黒フチ） */
.ct-hero-subtitle {
  margin: clamp(5.24px, 0.65vw, 10px) 0 0;
  font-size: clamp(26px, 3.25vw, 50px);     /* Figma 50px。下限=3.25×8.06 */
  letter-spacing: 0.05em;
  line-height: 1.2;
  color: #fff8e8;
  -webkit-text-stroke: 0.08em var(--ct-ink);
  paint-order: stroke fill;
}

/* 道路（グレー帯＋白破線。about / know ヒーローと同手法） */
.ct-hero-road {
  position: relative;
  width: 100%;
  height: clamp(24px, 2.605vw, 40px);       /* Figma 40px */
  background-color: var(--ct-road);
}
.ct-hero-road::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: clamp(2px, 0.26vw, 4px);
  background-image: repeating-linear-gradient(
    to right,
    #fff 0,
    #fff 30px,
    transparent 30px,
    transparent 60px
  );
  transform: translateY(-50%);
}

/* ============================================================
   ★2026-07-23 レスポンシブ再構成（2層構成: PCデザイン⇔スマホデザイン）
   円形写真2つは .ct-hero-road 内の絶対配置をやめ、道路直後の
   .ct-hero-photos に移動した（cross-talk.php 参照）。

   レイアウトは2種類だけ。中間の妥協形は使わない:
   ・1441px以上 = PCデザイン（Figma準拠）
     写真は絶対配置で帯の両端。リード文は写真の間〜下に流れる
   ・1440px以下 = スマホデザインの拡大版
     写真2個を中央に並べたフローの1行 + その下にリード文。
     667px以下はリード文が9行になるだけで構成は同じ
   ・切替点1440pxを選んだ理由:
     - 写真幅が PC式 clamp(182px,19.75vw,304px)=284.4px と
       スマホ系式 calc(252px+2.2vw)=283.7px でほぼ一致（差0.7px）
       → 切替の瞬間に写真サイズが飛ばない
     - PCデザイン（2行目674pxが写真の間701pxに収まる）が成立する下限に近い

   【案3(旧構成=全幅絶対配置)へ戻す場合】
     1) cross-talk.php: .ct-hero-photos の中身2つの span を
        .ct-hero-road の中へ戻し、.ct-hero-photos の div を削除
     2) 下の .ct-hero-photos / .ct-hero-circle 関連を消し、旧規則を復元:
          .ct-hero-circle { position:absolute;
            top: clamp(-26px,-1.68vw,-15px);
            width: clamp(182px,19.75vw,304px);
            aspect-ratio: 353/286; z-index: 3; }
          .ct-hero-circle--left  { left:  calc(max((100% - 1382px)/2, 5%) + 0.95vw); }
          .ct-hero-circle--right { right: calc(max((100% - 1382px)/2, 5%) + 0.95vw); }
     3) リード文を zoom: var(--ct-zoom) + 旧余白式に戻す（リード文の注記参照）
============================================================ */

/* 道路をまたぐ左右の吹き出し型円形写真
   Figma: 左 x174 y494 w352.6×h285.7（帯下端の30px上〜道路の下215px）
   黄色い吹き出し(back)を写真(surface)から少しずらして背面に重ねる */

/* --- 1537px以上 = PCデザイン（写真は絶対配置で帯の両端） ---
   ★2026-07-28 跡田さん案A採用: レイアウトの切替点を 1440px→1536px に引き上げ
   （1441pxでリード文が写真に接触する問題を回避。PCデザインは広い幅でのみ表示）。
   ※写真サイズの計算式の切替は 1440px のまま残す（下記 line 592付近）。
     これで新境界(1536px)でも写真サイズは連続（差0.1px）＝サイズ飛びなし */
.ct-hero-photos {
  position: relative;                       /* 絶対配置の基準（高さ0の基準箱） */
  height: 0;
}
.ct-hero-circle {
  position: absolute;
  /* 基準が「道路の直後」なので、旧 top(-26〜-15px) から
     道路の高さ(24〜40px)ぶん上へ平行移動した値 */
  top: calc(clamp(-26px, -1.68vw, -15px) - clamp(24px, 2.605vw, 40px));
  width: clamp(182px, 19.75vw, 304px);
  aspect-ratio: 353 / 286;
  z-index: 3;
}
/* コンテンツ帯の左右端の少し内側。帯の端 = max((100% - 1382px)/2, 5%) */
.ct-hero-circle--left  { left: calc(max((100% - 1382px) / 2, 5%) + 0.95vw); }
.ct-hero-circle--right { right: calc(max((100% - 1382px) / 2, 5%) + 0.95vw); }

/* --- 1536px以下 = スマホデザインの拡大版（写真2個を中央に・下にリード文） ---
   ★2026-07-28 跡田さん案A: 切替点 1440px→1536px */
@media (max-width: 1536px) {
  .ct-hero-photos {
    height: auto;
    display: flex;
    justify-content: center;
    gap: 4vw;                               /* SPと同じ間隔（667px境界も連続） */
    /* 「道路の高さ+写真の浮き上がり」ぶん引き上げて道路に重ねる。
       行自体は写真の高さを持つので、リード文は自然に写真の下に来る */
    margin-top: calc(-1 * (clamp(24px, 2.605vw, 40px) + clamp(15px, 1.68vw, 26px)));
  }
  .ct-hero-circle {
    position: relative;                     /* 中の back/surface の基準は維持 */
    top: auto;
  }
  .ct-hero-circle--left,
  .ct-hero-circle--right { left: auto; right: auto; }
}
.ct-hero-circle-back,
.ct-hero-circle-surface {
  position: absolute;
  width: 98.9%;                             /* 画像 349px / 枠 352.6px */
  height: auto;
}
/* 左（社長）: 写真は右上寄せ・黄吹き出しは左下寄せ */
.ct-hero-circle--left .ct-hero-circle-back     { left: 0; bottom: 0; }
.ct-hero-circle--left .ct-hero-circle-surface  { right: 0; top: 0; }
/* 右（学生）: 写真は左上寄せ・黄吹き出しは右下寄せ */
.ct-hero-circle--right .ct-hero-circle-back    { right: 0; bottom: 0; }
.ct-hero-circle--right .ct-hero-circle-surface { left: 0; top: 0; }

/* リード文（中央寄せ）
   ★2026-07-23 変更（案C: 回り込みフロート方式）:
   zoom をやめ、換算後（×0.8605）の実寸を直接指定する方式に変更した。
   フロート（写真）の回避計算と zoom の組み合わせは挙動が保証できないため。
   各行は text-align:center なので、写真の間に入る行は残り幅の中央に揃う。
   【案3(旧構成)へ戻す場合】下記に戻す:
     margin-top: clamp(38px, 4.16vw, 64px);
     font-size: clamp(20.4px, calc(16.76px + 0.536vw), 25px);
     zoom: var(--ct-zoom); */
.ct-hero-lead {
  /* PCデザイン(1441px〜): 道路下端からの余白。短い行は写真の間に入る
     （旧 clamp(38px, 4.16vw, 64px) × 0.8605 の実寸） */
  margin-top: clamp(33px, 3.58vw, 55px);
  text-align: center;
  /* 1536px(21.5px)→668px(17.6px)を一次式で滑らかに縮小
     （旧 clamp(20.4px, 16.76px + 0.536vw, 25px) × 0.8605 の実寸） */
  font-size: clamp(17.6px, calc(14.42px + 0.4612vw), 21.5px);
  line-height: 2;
}
/* スマホデザイン帯(1536px以下): 写真の行の下からの余白
   ★2026-07-28 跡田さん案A: 切替点 1440px→1536px（レイアウト切替と一致させる） */
@media (max-width: 1536px) {
  .ct-hero-lead {
    margin-top: 28px;
  }
}
/* リード文の「行のかたまり」（cross-talk.php 参照）。
   inline-block なので行の途中で折り返されない保険。
   SP用改行(ct-br-sp-only)は各かたまりの中にある */
.ct-lead-line {
  display: inline-block;
}
.ct-hero-lead p { margin: 0; }
/* ★2026-07-23 追加: SP(667px以下)でのみ有効になる改行。
   リード文の2段階切替（PC=5行固定 / SP=9行固定）のSP側追加改行に使用。
   有効化はSPメディアクエリ内の display: inline（cross-talk.php も参照） */
.ct-br-sp-only {
  display: none;
}

/* ★2026-07-23（案C: 回り込みフロート方式）:
   リード文の位置調整用メディアクエリは全廃。
   写真の横に収まらない行はフロートの回避で自動的に写真の下
   （margin-bottom: 28px ぶん空けた位置）へ落ちるため、幅ごとの
   余白計算が不要になった。
   【案3(旧構成)へ戻す場合】旧式2つを復元:
     @media (max-width: 1536px) {
       .ct-hero-lead { margin-top: calc((1536px - 100vw) * 1.706 + 64px); }
     }
     @media (max-width: 1440px) {
       .ct-hero-lead { margin-top: calc(((252px + 2.2vw) * 0.81
         - clamp(24px, 2.605vw, 40px) - clamp(15px, 1.68vw, 26px) + 28px) / 0.8605); }
     } */

/* ============================================================
   対談パネル（黄枠＋タイトル帯＋白ボディ）×4
   箱: hearing 方式。中身: cqw で箱と同率スケール
============================================================ */
.ct-dialogue {
  width: min(var(--ct-w-main), calc(100% - 2 * var(--ct-gutter)));
  container-type: inline-size;              /* 中身の cqw の基準をこの箱にする */
  margin: clamp(38px, 3.78vw, 58px) auto 0; /* リード→パネル 30px + 追加余白28px */
  display: flex;
  flex-direction: column;
  gap: clamp(24px, 2.8cqw, 38.7px);
}

.ct-part {
  background-color: var(--ct-panel);
  border: 2px solid var(--ct-ink);
  border-radius: clamp(21px, 2.49cqw, 34.4px);
}

/* パネル上部のタイトル帯（黄色部分に中央配置） */
.ct-part-title {
  display: flex;
  align-items: center;
  justify-content: center;
  /* ★2026-07-21 追加: 中の .ct-part-title-c（意味の切れ目のかたまり）が
     1行に収まらないとき、かたまり単位で次の行へ送るため。
     これが無いと横並びのまま各かたまりの内部で折り返されて崩れる */
  flex-wrap: wrap;
  height: clamp(62px, 7.47cqw, 103.3px);    /* Figma 120px × 0.8605 */
  margin: 0;
  /* 1536px(38.7px)→668px(23px=SP直前)を一次式で滑らかに縮小 */
  font-size: clamp(23px, calc(10.92px + 1.809vw), 38.7px);
  letter-spacing: 0.05em;
  color: var(--ct-text);
  text-align: center;
}
/* ★2026-07-21 追加: 見出しを「意味の切れ目」で折り返すための単位。
   cross-talk.php の title の改行(\n)ごとに span で包んでいる。
   inline-block なので、かたまりの途中では折り返されない。
   → 1行に収まる幅では1行のまま、収まらない幅でだけ切れ目で2行になる
     （固定 <br> と違い、広い幅で無駄に2行にならない）
   【元に戻す場合】この規則を消し、cross-talk.php の <h2 class="ct-part-title">
     を htmlspecialchars($ct_part['title']) の直接出力に戻す */
.ct-part-title-c {
  display: inline-block;
}

/* 白いボディ（吹き出しが縦に並ぶ）。地は方眼、吹き出しの中は白のまま */
.ct-part-body {
  background-color: #fff;
  background-image:
    linear-gradient(to right, var(--ct-grid) 1px, transparent 1px),
    linear-gradient(to bottom, var(--ct-grid) 1px, transparent 1px);
  background-size: 17px 17px;               /* 方眼1マス（20px×0.85。SPは14px） */
  border: 2px solid var(--ct-ink);
  border-radius: clamp(17px, 2cqw, 27.5px);
  margin: 0 clamp(8px, 0.87cqw, 12px) clamp(8px, 0.87cqw, 12px);
  padding: clamp(22px, 2.68cqw, 37px) clamp(38px, 4.6cqw, 63.7px) clamp(31px, 3.74cqw, 51.6px);
  display: flex;
  flex-direction: column;
  gap: clamp(12px, 1.49cqw, 20.7px);
}

/* ---- 吹き出し1行（アバター＋吹き出し） ---- */
.ct-talk {
  display: flex;
  align-items: flex-start;
  gap: clamp(19px, 2.25cqw, 31px);          /* アバター→吹き出し本体（しっぽ分含む） */
}
.ct-talk--right {
  flex-direction: row-reverse;              /* 学生は右側 */
}

/* アバター（円形写真＋下に名前） */
.ct-talk-avatar {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.ct-talk-avatar-img {
  width: clamp(45px, 4.99cqw, 68.8px);      /* Figma 80px × 0.8605 */
  height: clamp(45px, 4.99cqw, 68.8px);
  border-radius: 50%;
  border: 2px solid #252525;
  background-color: var(--ct-avatar);
  object-fit: cover;
}
.ct-talk-name {
  margin-top: 2px;
  /* 1536px(15.5px)→668px(11px=SPと同値)を一次式で滑らかに縮小 */
  /* ★2026-08-07 C-6: 下限 11px→12px（跡田さん判断）*/
  font-size: clamp(12px, calc(7.54px + 0.518vw), 15.5px);
  line-height: 1.85;
}

/* 吹き出し本体（白地＋黒枠。しっぽは ::before のSVG三角） */
.ct-talk-bubble {
  /* しっぽの寸法（底辺=元の0.6倍・突出19px相当を 0.8605 縮小した値が上限） */
  --ct-tail-w: clamp(13px, 1.31cqw, 18.1px);
  --ct-tail-h: clamp(12px, 1.25cqw, 17.2px);

  position: relative;
  margin: 0;
  background-color: #fff;
  border: 2px solid var(--ct-ink);
  border-radius: clamp(10px, 1.24cqw, 17.2px);
  /* 右paddingはFigma(32px)より狭め。游ゴシックはFigmaのフォントより
     句読点が広く、48文字の行が入りきらないため右側の余白を行域に回している */
  padding: clamp(9px, 1.12cqw, 15.5px) clamp(10px, 1.24cqw, 17.2px) clamp(9px, 1.12cqw, 15.5px) clamp(17px, 2cqw, 27.5px);
  /* 1536px(17.2px)→668px(14px=SPと同値)を一次式で滑らかに縮小。SPへ段差なし */
  font-size: clamp(14px, calc(11.54px + 0.369vw), 17.2px);
  line-height: 2;
  overflow-wrap: break-word;                /* 固定改行が効いていてもはみ出させない保険 */
}

/* Figma の固定改行（1920px基準）。フォントを一次式（箱より緩やかな縮小）に
   変えたため、1450px付近から48文字の行が吹き出しに収まらなくなる。
   その手前で解除して自然折返しへ。※解除幅を変えたいときはここを調整 */
@media (max-width: 1460px) {
  .ct-br { display: none; }
}
/* 幅は Figma 固定値（ボディ内コンテンツ幅1422を100%とした%）
   左は全パート1020px=71.7%。右はパネル1のみ815px=57.3%、パネル2〜4は左と同じ広さ */
.ct-talk .ct-talk-bubble { width: 71.7%; }
.ct-part:first-child .ct-talk--right .ct-talk-bubble { width: 57.3%; }

/* しっぽ: 線幅2px指定のSVG三角（白塗り・底辺は線なし）を背景画像で敷く方式。
   線の太さは吹き出しの枠線(2px)と同じ。底辺15.6px（元の26pxの0.6倍）×
   突出19px 相当で先端は約45°。白塗りが下の吹き出し枠線を覆って中がつながる

   ============================================================
   ★★ 2026-07-21 修正（差し戻し可）★★
   【症状】幅1100px以下で、しっぽの三角の中を吹き出し本体の枠線(2px)が
           縦線となって横切って見えていた。
   【原因】しっぽの三角は「白塗りで吹き出しの枠線を覆い隠す」方式なのに、
           要素が枠線の外側にピタリ接するだけで枠線に一切かぶっておらず
           （重なりゼロ）、覆えるかどうかがサブピクセルの丸め任せだった。
           --ct-tail-w が最小値13pxに張り付く1100px付近から枠線が露出した。
   【対処】三角(SVG)は位置・サイズとも一切動かさず、枠線を消すためだけの
           「白帯」を背景の1枚目として重ねた。
           ※最初は要素ごと2px内側へずらす案にしたが、それだと黒い2本の線も
             一緒に動いて枠線を突き抜け、吹き出しの内側に線の先端が飛び出す。
             塗りと線を一体で動かしてはいけない。
           ・要素の幅を +2px だけ吹き出し側へ延長（白帯の置き場所）
           ・三角は background-size を var(--ct-tail-w) 固定にして従来位置に維持
           ・白帯は三角より「奥」に置く。手前に置くと線を削ってしまうため。
             高さ78% = SVGの塗りの縦の範囲((17.8-2.2)/20)。この範囲だけ
             枠線を消すので、しっぽの上下では枠線がそのまま続く。

   ★★ 2026-07-21 修正その2（差し戻し可）★★
   【症状】500px付近の狭い幅で、しっぽの2本の線だけが吹き出しの枠線より
           細く見えていた。
   【原因】SVGの stroke-width='2' は viewBox(21×20)の単位なので、表示サイズに
           比例して縮む。--ct-tail-w が 18.1px→13px→11px と小さくなるほど
           線も細くなり、SP(11px)では 2×(11/21)=約1.05px と枠線2pxの約半分。
   【対処】SVGの線に vector-effect='non-scaling-stroke' を付け、拡大率に
           関わらず常に2pxで描くようにした（全幅で枠線と同じ太さに揃う）。
   【元に戻す場合】左右2つのSVGから vector-effect='non-scaling-stroke' を削る。
           （※非対応ブラウザでは修正前と同じ「細い線」に戻るだけで崩れない）

   ─── 未対応（既知の残課題）───────────────────────────
   スマホで拡大表示すると、しっぽと吹き出しの枠線の接合部がわずかに
   途切れて段差に見える。三角の底辺が「枠線の外側の端」までしか無く、
   枠線の太さ2px分に黒が無いのに、そこは白帯で枠線を消しているため
   2px幅の白い隙間ができる。
   （※ background-size の1枚目を calc(100% - 1px) にすると隙間は消えるが、
      黒が吹き出しの内側へ0.5pxはみ出すため、2026-07-21 に差し戻した）
   ────────────────────────────────────────────

   【まとめて修正前に戻す場合】この規則群を下記の形に戻す。
       .ct-talk-bubble::before {
         width: var(--ct-tail-w); height: var(--ct-tail-h);
         background: url("…左向き三角…") no-repeat center / 100% 100%;
       }
       .ct-talk--left  .ct-talk-bubble::before { left:  calc(-1 * var(--ct-tail-w)); top: …; }
       .ct-talk--right .ct-talk-bubble::before { right: calc(-1 * var(--ct-tail-w)); top: 50%;
                                                 transform: translateY(-50%);
                                                 background-image: url("…右向き三角…"); }
       ※SVGは stroke-width='2' のみ（vector-effect なし）
   ============================================================ */
.ct-talk-bubble::before {
  content: "";
  position: absolute;
  width: calc(var(--ct-tail-w) + 2px);   /* しっぽ本体 + 枠線を消す白帯2px。修正前: var(--ct-tail-w) */
  height: var(--ct-tail-h);
  background-repeat: no-repeat;
  /* 1枚目=しっぽ本体(手前) / 2枚目=枠線を消す白帯(奥)。
     白帯を奥に置くので、線が白帯に削られない。
     白帯は枠線(2px)より1px広い3px。1px分はしっぽの白い内側に重なるだけ
     （白＋白）で見た目に影響せず、サブピクセルのにじみで枠線が薄く
     残るのを防げる。
     しっぽ本体のサイズは var(--ct-tail-w) 固定＝従来位置のまま */
  background-size: var(--ct-tail-w) 100%, 3px 78%;
}
/* 社長側（左）: アバターの横あたり。三角は外側(左)、白帯は吹き出し寄り(右) */
.ct-talk--left .ct-talk-bubble::before {
  left: calc(-1 * var(--ct-tail-w));
  top: calc(clamp(21px, 2.62cqw, 36.1px) + 2.5px);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 21 20'%3E%3Cpath d='M21 2.2 2 10 21 17.8' fill='%23fff' stroke='%23212121' stroke-width='2' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E"), linear-gradient(#fff, #fff);
  background-position: left center, right center;
}
/* 学生側（右）: 常に上下中央（社長側の180度回転＝左右反転の三角）。
   三角は外側(右)、白帯は吹き出し寄り(左) */
.ct-talk--right .ct-talk-bubble::before {
  right: calc(-1 * var(--ct-tail-w));
  top: 50%;
  transform: translateY(-50%);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 21 20'%3E%3Cpath d='M0 2.2 19 10 0 17.8' fill='%23fff' stroke='%23212121' stroke-width='2' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E"), linear-gradient(#fff, #fff);
  background-position: right center, left center;
}

/* ============================================================
   対談風景の写真2枚（パネル2とパネル3の間）
   Figma: 793×520 角丸40 黒枠、間隔20px。SPでは縦積み
============================================================ */
.ct-photos {
  display: flex;
  gap: clamp(10px, 1.24cqw, 17.2px);
}
.ct-photo {
  width: calc((100% - clamp(10px, 1.24cqw, 17.2px)) / 2);
  aspect-ratio: 793 / 520;
  object-fit: cover;
  border: 2px solid var(--ct-ink);
  border-radius: clamp(21px, 2.49cqw, 34.4px);
  background-color: var(--ct-placeholder);
}

/* ============================================================
   MESSAGE（左: ラベル＋文章 / 右: 写真＋黒プレート）
   箱: hearing 方式（1105px 上限）。中身: cqw
============================================================ */
.ct-message {
  margin-top: clamp(48px, 5.38vw, 82.6px);
}
.ct-message-inner {
  position: relative;
  width: min(var(--ct-w-message), calc(100% - 2 * var(--ct-gutter)));
  container-type: inline-size;
  margin: 0 auto;
}
.ct-message-label {
  margin: 0 0 clamp(24px, 3.81cqw, 42.2px);
  font-size: clamp(26px, 3.89cqw, 43px);    /* Figma 50px × 0.8605 */
  line-height: 1;
  color: var(--ct-red);
}
.ct-message-text {
  margin: 0;
  font-size: clamp(13px, 1.94cqw, 21.5px);  /* Figma 25px × 0.8605 */
  line-height: 2;
}
/* 写真（右上に絶対配置。黒プレート画像を右下にずらして背面に敷く） */
.ct-message-photo {
  position: absolute;
  top: clamp(22px, 3.35cqw, 37px);
  right: 0;
  width: 53.35%;                            /* Figma 685/1284 */
}
.ct-message-photo-back {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
  transform: translate(clamp(7px, 0.94cqw, 10.3px), clamp(7px, 0.94cqw, 10.3px));
}
.ct-message-photo-img {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 685 / 404;
  object-fit: cover;
  border: 2px solid var(--ct-ink);
  border-radius: clamp(10px, 1.56cqw, 17.2px);
}

/* ============================================================
   1440px以下: 帯の高さと写真サイズの調整。
   ★2026-07-23 変更（案1: 通常フロー化）:
   旧設計の「写真が両端から中央へスライドする left/right 指定」は削除した。
   写真はフローの行(.ct-hero-photos)に入ったため、position:relative の
   写真に left/right が残っていると位置ズレとして効いてしまう（不具合の元）。
   幅の縮小式（1440px時284px→667px時267px、PC式・SPサイズと連続）は
   フロー化後も有効なので維持する。

   ★2026-07-28 跡田さん案A(切替点1536px)採用後の重要注記:
   レイアウトの切替は1536pxへ上げたが、この「写真サイズの計算式」の切替は
   意図的に 1440px のまま残す。理由:
   ・base の clamp(182px,19.75vw,304px) は 1537px→1441px でも有効なので、
     新レイアウト境界1536px の両側は base式で連続（1537px≈303.5 / 1536px≈303.4）
   ・1440px でこの calc(252px+2.2vw) に切り替わる（1441px≈284.6 / 1440px≈283.7 で連続）
   → どちらの境界でも写真サイズは飛ばない。この式を1536pxに動かすと逆にサイズが飛ぶ。
   【案3(旧構成)へ戻す場合】下記2規則を復元:
     .ct-hero-circle--left  { left:  calc(42.6px + 2.99vw); }
     .ct-hero-circle--right { right: calc(42.6px + 2.99vw); }
============================================================ */
@media (max-width: 1440px) {
  .ct-hero-band {
    height: auto;                           /* 中身に追従（fixed高だと写真と被る） */
    padding-bottom: clamp(24px, 3vw, 34px); /* 円形写真が帯下部に重なる分の逃げ */
  }
  .ct-hero-circle {
    width: calc(252px + 2.2vw);
  }
}

/* ============================================================
   SP（667px以下）。hearing / interview の SP と同じ考え方:
   方眼14px・余白と枠を細く・写真は縦積み・円形写真は道路の下に2個横並び
   ※境界を変えるときはファイル内の「667px」を一括置換
============================================================ */
@media (max-width: 667px) {

  /* ---- ヒーロー ---- */
  .ct-hero-head {
    zoom: 1;                                /* SPはzoomをやめて明示サイズで組む */
    padding-top: 5vw;
  }
  .ct-hero-band {
    height: auto;
    /* 円形写真が道路より上に約15px重なる分、サブタイトルと被らないよう下に余白を確保 */
    padding-bottom: calc(4.5vw + 15px);
  }
  /* ★2026-07-28 案C（PCと同率4.11）採用:
     旧 clamp(140px,40vw,220px) は 40vw が上限220に達し 550〜667px でバッジが固定、
     h1(6.03vw)だけ縮んで バッジ:h1 の比が 5.5→6.6 に崩れていた。
     係数を 24.78vw（= h1 6.03vw × Figma基準比4.11）に変更し、バッジをh1と同率で連動。
     → 全SP幅で比4.11一定。h1に下限が無いため、バッジ下限も iPhone SE(375px≒93px)を
       下回る 80px まで下げて、狭い端末でも比を保つ（旧下限140は 484px以下で再び崩れる）。
     ※ PC帯(案B)も比4.11なので 667/668px の切替段差も縮む */
  .ct-hero-badge-img { width: clamp(80px, 24.78vw, 190px); }
  /* タイトル帯は幅92%に広げ、中身（文字・引用符・角丸）はPCと同じ比率で連動
     （帯幅に対して 高さ8.35% / 文字6.55% / 角丸1.64% / 引用符位置0.86%） */
  .ct-hero-title {
    width: 92%;
    height: 7.7vw;
    border-radius: 1.5vw;
    margin-top: 6px;
  }
  .ct-hero-title-text {
    font-size: 6.03vw;
  }
  .ct-hero-quote {
    font-size: 6.03vw;
    top: 0.75vw;
  }
  .ct-hero-quote--open  { left: 0.79vw; }
  .ct-hero-quote--close { right: 0.79vw; }
  .ct-hero-subtitle {
    margin-top: 6px;
    font-size: clamp(14px, 4.3vw, 26px);
    letter-spacing: 0.03em;
  }

  /* 円形写真: 2個横並び（中央寄せ）のまま、PCと同じ比率で道路に重ねる
     ★2026-07-23 変更（案C: 回り込みフロート方式）: SPではフロートを解除し、
     flexの中央2個並びへ。引き上げ量 = 道路24px + 浮き上がり15px = 39px
     （見た目は従来SPと同じ）
     【案3(旧構成)へ戻す場合】下の規則を消し、旧規則を復元:
       .ct-hero-circle { top: -15px; width: 40vw; }
       .ct-hero-circle--left  { left: calc(50% - 40vw - 2vw); transform: none; }
       .ct-hero-circle--right { right: auto; left: calc(50% + 2vw); transform: none; } */
  .ct-hero-photos {
    display: flex;
    justify-content: center;
    gap: 4vw;                               /* 従来の左右間隔(2vw+2vw)と同じ */
    width: 100%;
    height: auto;
    margin-top: -39px;
  }
  .ct-hero-circle {
    float: none;
    width: 40vw;
    margin: 0;                              /* フロート用の余白をリセット */
  }

  /* リード: 写真がフローに参加しているので「写真の行の下 + 固定余白」だけで良い
     ★2026-07-23 変更。旧: margin-top: 32.5vw（写真下端を逆算した値） */
  .ct-hero-lead {
    zoom: 1;
    margin-top: 38px;
    padding: 0 4%;
    /* ★2026-07-21 変更: 小見出しと大小関係を入れ替え（17.5px → 15.5px）。
       SPだけ「小見出し < リード文」と逆転していたのを他の幅に合わせた。
       修正前: clamp(16px, 4.7vw, 17.5px)  ※本文14px×1.25 */
    font-size: clamp(14px, 4.2vw, 15.5px);
    line-height: 1.9;
  }
  /* リード/MESSAGE の固定改行は SP では解除（1行が収まらないため） */
  .ct-br-sp { display: none; }
  /* リード文の9行固定用の追加改行を有効化（2段階切替のSP側） */
  .ct-br-sp-only { display: inline; }

  /* ---- 対談パネル ---- */
  .ct-dialogue { gap: 18px; }
  .ct-part { border-radius: 16px; }
  .ct-part-title {
    height: auto;
    padding: 9px 8px;
    /* ★2026-07-21 変更: リード文と大小関係を入れ替え（15.5px → 17.5px）。
       修正前: 15.5px */
    font-size: 17.5px;
    letter-spacing: 0.03em;
    line-height: 1.5;                       /* 2行になったときの行間 */
  }
  .ct-part-body {
    background-size: 14px 14px;             /* 方眼 PC17 → SP14（interview / hearing と同じ） */
    border-radius: 12px;
    margin: 0 6px 6px;
    padding: 16px 10px 20px;
    gap: 12px;
  }
  .ct-talk { gap: 18px; }                 /* 1920px時(31px)の約6割。アイコンとの余白を確保 */
  .ct-talk-avatar-img {
    width: 44px;
    height: 44px;
    border-width: 1.5px;
  }
  .ct-talk-name { font-size: 12px; }   /* ★2026-08-07 C-6: 11→12px */
  .ct-talk-bubble {
    --ct-tail-w: 11px;
    --ct-tail-h: 10px;
    width: auto;                            /* 固定%をやめて残り幅いっぱいに */
    flex: 1 1 auto;
    min-width: 0;
    border-radius: 9px;
    padding: 6px 10px 6px 12px;
    font-size: 14px;                        /* hearing / interview のSP本文と同じ */
    line-height: 1.85;
  }
  .ct-talk .ct-talk-bubble,
  .ct-part:first-child .ct-talk--right .ct-talk-bubble { width: auto; }
  .ct-talk--left .ct-talk-bubble::before { top: 13px; }

  /* ---- 写真2枚: 縦積み（hearing と同じ） ---- */
  .ct-photos {
    flex-direction: column;
    gap: 12px;
  }
  .ct-photo {
    width: 100%;
    border-radius: 14px;
  }

  /* ---- MESSAGE: ラベル → 写真 → 文章 の縦積み ---- */
  .ct-message-inner {
    display: flex;
    flex-direction: column;
  }
  .ct-message-body { display: contents; }   /* label と text を個別に並べ替えるため */
  .ct-message-label { order: 1; margin-bottom: 14px; }
  .ct-message-photo {
    order: 2;
    position: relative;                     /* 黒プレート(絶対配置)の基準を写真自身に保つ */
    top: auto;
    width: 96%;                             /* プレートのずれ分だけ右に余白を残す */
    margin: 0 0 18px;
  }
  .ct-message-text { order: 3; }
}