/* ============================================================
   就活に、個性を。 メインスタイルシート
   ------------------------------------------------------------
   ・PDF(AIデータ)から実測した座標・フォントサイズ・カラーを基準に、
     clamp() / vw / % を使い、960pt基準アートボードの見た目の比率を
     画面幅にかかわらず維持するよう実装しています。
   ・ブレークポイント: 768px未満=スマートフォン専用レイアウト
     768px〜1023px=PCレイアウトを比率のまま流体的に縮小
     1024px以上=PCレイアウト（1440px前後を基準に、それ以上は余白が広がる）
   ・第1回修正（2026-08-15）：クリック可能UIの明確化、ホバー/フォーカス
     表現の統一、ヘッダーのスクロール追従化、SPECIAL CONTENTSの
     テンポ改善、ステートメントの緩急演出、賛同企業ロゴの見た目統一、
     NEWS画像位置の統一、最下部の賛同企業募集CTAを追加。
   ============================================================ */

/* ---------- 変数定義 ---------- */
:root {
  /* カラー（AIデータから実測したRGB値） */
  --color-blue: #009FE8;
  --color-magenta: #E3007F;
  --color-yellow: #FFF000;
  --color-blue-tint: #B2E2F8;
  --color-pink-tint: #F7B2D8;
  --color-yellow-tint: #FFFAB2;
  /* FVの「就活」ブロックの背景専用の黄色（ご指定によりコントラスト改善のため
     --color-yellow より濃い色に変更）。TikTokパネルなど、他のセクションで
     使っている --color-yellow はこの変更の影響を受けない。 */
  --color-yellow-fv: #F0D800;
  --color-ink: #231815;      /* 見出し・本文の基本色（ウォームブラック） */
  --color-black: #000000;    /* フッター・TikTokセクション等の純黒 */
  --color-gray: #717071;     /* サブコピー・曲線の色 */
  --color-navy: #1C395D;     /* 賛同企業CTA見出し・リンク */
  --color-cta-blue: #008FBC; /* SPECIAL CONTENTSの公開済みボタン */
  --color-white: #FFFFFF;

  /* フォールバック順：Webフォント（Senobi Gothic / M PLUS 1）が
     何らかの理由で読み込めなかった場合、Macでは "Hiragino Sans"、
     Windowsでは "Yu Gothic" "Meiryo" の順で、その環境に最も近い
     標準搭載の日本語フォントに自然に切り替わるようにしている。
     Webフォントが正常に読み込まれた場合、この並びは表示に一切
     影響しない（あくまで読み込めなかった場合の保険）。 */
  --font-display: "Senobi Gothic", "Hiragino Sans", "Yu Gothic", "Meiryo", sans-serif;
  --font-body: "M PLUS 1", "Hiragino Sans", "Yu Gothic", "Meiryo", sans-serif;

  --container-max: 1440px;   /* PCコンテンツの基準最大幅 */
  --container-pad: clamp(24px, 4vw, 96px);

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  /* 固定ヘッダーの高さの目安（コンパクト時）。アンカースクロール時の
     見出し隠れ防止（scroll-margin-top）にも同じ値を使用する。 */
  --header-compact-h: clamp(56px, 7vw, 84px);
}

/* ---------- リセット ---------- */
* { margin: 0; padding: 0; box-sizing: border-box; }
html {
  scroll-behavior: smooth;
  /* iOS Safariには、画面回転時などに文字サイズを自動的に拡大する
     独自機能があり、clamp()/vwで細かく調整している文字サイズ
     （特にSPの大見出し）が意図せず拡大されてしまう可能性がある。
     text-size-adjust:100% はこの自動拡大を無効化し、指定した
     フォントサイズがそのまま使われるようにするための、表示への
     影響が無い安全な指定（他のブラウザでは元々何も変化しない）。 */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
body {
  font-family: var(--font-body);
  color: var(--color-ink);
  background: #ffffff;
  line-height: 1.8;
  overflow-x: hidden; /* 横スクロール防止 */
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button { font: inherit; border: none; background: none; cursor: pointer; }
.container {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding-left: var(--container-pad);
  padding-right: var(--container-pad);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* ============================================================
   クリック可能UIの共通ルール（ホバー・フォーカス）
   ------------------------------------------------------------
   ・「触れる／クリックできる」ことが感覚的に分かるよう、サイト全体で
     同じ強度・同じ速度感のインタラクションに統一している。
   ・拡大やバウンドなど過度な演出は使わず、下線の伸び／矢印の移動／
     色の変化／わずかな浮き上がりなど、控えめな反応にとどめている。
   ・ホバーは `hover:hover` のデバイスのみに限定し、タッチ端末では
     常時見えるデザイン（下線・矢印・ボタン形状）で分かるようにする。
   ============================================================ */

/* キーボード操作時のフォーカスリング（サイト全体で共通のルール） */
a:focus-visible,
button:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
  border-radius: 2px;
}

/* 「＞」矢印：ホバー時に右へ移動する（対象は各所のCTAリンク共通） */
.arrow {
  display: inline-block;
  transition: transform 0.28s var(--ease-out);
}
@media (hover: hover) {
  a:not([data-disabled="true"]):hover .arrow {
    transform: translateX(7px);
  }
}

/* 「下線が左から右へスッと伸びる」テキストリンク共通の仕組み。
   常時は既存の細い下線（各要素側のborder-bottom）で「触れる場所」を
   示しつつ、ホバー時にはそれとは別の太めのバーが左から右へ伸びる
   ことで、反応をはっきり視認できるようにしている
   （this-会社をもっと知る／賛同について詳しく聞く／TikTokリンク等）。 */
.link-sweep {
  position: relative;
}
.link-sweep::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -3px;
  width: 100%;
  height: 2px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.38s var(--ease-out);
  pointer-events: none;
}
@media (hover: hover) {
  a.link-sweep:not([data-disabled="true"]):hover::after {
    transform: scaleX(1);
  }
}
a.link-sweep[data-disabled="true"]::after { display: none; }

/* URL未設定時（無効リンク）は触れないことが分かるよう、カーソルも通常に戻す */
[data-disabled="true"] {
  opacity: 0.45;
  pointer-events: none;
  cursor: default;
}

/* ============================================================
   FV + ヘッダー
   ============================================================ */
.fv-wrapper {
  position: relative;
  width: 100%;
  min-height: 100vh;
  min-height: 100svh;
  background: #ffffff;
  overflow: hidden;
}

.fv {
  position: absolute;
  inset: 0;
}
.fv__stage {
  position: relative;
  width: 100%;
  height: 100%;
  aspect-ratio: 960 / 777;
  max-height: 100vh;
  max-height: 100svh;
  margin: 0 auto;
}

.fv__curve {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
/* PC用／SP用のどちらか一方だけを表示する（768pxを境に切り替え）。
   SP用は390x620専用のviewBox・座標を持つ別要素のため、PC側の見た目・
   構造には影響しない。 */
.fv__curve--sp { display: none; }
@media (max-width: 767px) {
  .fv__curve--pc { display: none; }
  .fv__curve--sp { display: block; }
}
.fv__curve-path {
  fill: none;
  stroke: var(--color-gray);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.fv__block {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  writing-mode: vertical-rl;
  text-orientation: upright;
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--color-white);
  letter-spacing: 0.05em;
  border-radius: clamp(6px, 1vw, 16px);
  will-change: transform, opacity;
}
.fv__block--personality {
  left: 7.48%;
  top: 52.05%;
  width: 5.87%;
  min-width: 44px;
  height: 30.11%;
  background: var(--color-blue);
  font-size: clamp(22px, 3.6vw, 52px);
  overflow: hidden; /* 上→下の色面の伸び（clip-path）が角丸の外にはみ出さないように */
}
.fv__block--ni {
  left: 44.17%;
  top: 39.64%;
  width: 5.87%;
  min-width: 44px;
  height: 14.87%;
  background: var(--color-magenta);
  font-size: clamp(22px, 3.6vw, 52px);
}
.fv__block--shukatsu {
  left: 60.12%;
  top: 19.17%;
  width: 5.87%;
  min-width: 44px;
  height: 14.87%;
  background: var(--color-yellow-fv);
  font-size: clamp(22px, 3.6vw, 52px);
}

/* ヘッダー：常時画面上部に固定表示（スクロール追従）。
   FV表示中はPDFデザインどおりの大きさで、FVと同じ位置に重なって見える。
   スクロールが始まると自動的にコンパクトな固定ナビゲーションへ移行する
   （.is-compact はjs/header-nav.jsがスクロール量に応じて付け外しする）。 */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 50;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: clamp(16px, 3vw, 48px);
  padding: clamp(20px, 3.2vw, 40px) var(--container-pad) clamp(14px, 2vw, 24px);
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: padding 0.4s var(--ease-out), background-color 0.4s var(--ease-out),
    border-color 0.4s var(--ease-out), box-shadow 0.4s var(--ease-out);
}
.site-header.is-compact {
  align-items: center;
  padding-top: clamp(10px, 1.4vw, 16px);
  padding-bottom: clamp(10px, 1.4vw, 16px);
  background: rgba(255, 255, 255, 0.78);
  border-bottom-color: rgba(35, 24, 21, 0.07);
  box-shadow: 0 6px 24px rgba(35, 24, 21, 0.04);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.site-nav {
  display: flex;
  gap: clamp(16px, 2.6vw, 40px);
  padding-top: clamp(4px, 0.8vw, 10px);
}
.site-header.is-compact .site-nav { padding-top: 0; }
.site-nav__item {
  position: relative;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(12px, 1.15vw, 18px);
  letter-spacing: 0.12em;
  color: var(--color-ink);
  white-space: nowrap;
  padding-bottom: 3px;
}
/* 「賛同企業」「NEWS」「SPECIAL CONTENTS」：塗りボタンにはせず、
   ホバー時に下線がスッと伸びるシンプルな反応にする */
.site-nav__item::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.32s var(--ease-out);
}
@media (hover: hover) {
  .site-nav__item:hover::after { transform: scaleX(1); }
}
.site-header__logo {
  text-align: right;
  flex-shrink: 0;
}
.site-header__catch {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(9px, 0.78vw, 12px);
  color: var(--color-gray);
  line-height: 1.5;
  max-height: 40px;
  opacity: 1;
  overflow: hidden;
  transition: max-height 0.36s var(--ease-out), opacity 0.24s var(--ease-out),
    margin 0.36s var(--ease-out);
}
.site-header.is-compact .site-header__catch {
  max-height: 0;
  opacity: 0;
  margin: 0;
}
/* 右上「就活に、個性を。」：クリック／タップでTOP（FV最上部）へ戻るリンク */
.site-header__title {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(16px, 2.2vw, 34px);
  color: var(--color-ink);
  margin-top: 0.2em;
  transition: opacity 0.25s var(--ease-out), font-size 0.4s var(--ease-out);
}
.site-header.is-compact .site-header__title {
  font-size: clamp(14px, 1.5vw, 22px);
  margin-top: 0;
}
@media (hover: hover) {
  .site-header__title:hover { opacity: 0.62; }
}

/* ============================================================
   ボディコピー（読み物セクション）
   ------------------------------------------------------------
   文章そのものは変えず、意味の「山」に応じて余白・濃淡・出現速度・
   文字サイズ・タイミングに強弱をつけている（js/scroll-motion.js
   の initStory が data-role / .story__line--emphasis を参照する）。
   ============================================================ */
.story {
  padding: clamp(72px, 11vw, 160px) var(--container-pad);
  background: #ffffff;
}
.story__inner {
  max-width: 880px;
  margin: 0 auto;
}
.story__p {
  font-size: clamp(14px, 1.15vw, 18px);
  line-height: 2;
  color: var(--color-ink);
  margin-bottom: 2em;
}
.story__p:last-child { margin-bottom: 0; }
.story__line { display: block; }

/* スマートフォン専用の改行制御。
   文章そのものは一切変更せず、768px未満のときだけ、意味のまとまり・
   言葉のリズムを優先した位置で改行する（ブラウザの自動折り返しに
   任せると、不自然な位置で切れてしまうことがあるため）。
   PC表示（768px以上）ではこの<br>は表示されず、これまで通り
   ブラウザの自動折り返しのみが効く。 */
br.sp-only { display: none; }
@media (max-width: 767px) {
  br.sp-only { display: inline; }
}

/* 冒頭：最初のメッセージとして、少し大きめ・しっかり読ませる */
.story__p--intro .story__line {
  font-size: clamp(15px, 1.32vw, 21px);
}

/* 1つ目の転換点：前後に少し余白を取り、空気が変わる質感を出す */
.story__p--pivot {
  margin-top: 0.5em;
  margin-bottom: 2.6em;
}
.story__p--pivot .story__line--emphasis {
  display: block;
  margin-top: 0.35em;
  font-size: clamp(16px, 1.5vw, 22px);
  font-weight: 500;
}

/* 2つ目の山：世界が求めているもの＝重要なメッセージとして強調 */
.story__p--peak {
  margin-top: 0.5em;
  margin-bottom: 2.6em;
}
.story__p--peak .story__line--emphasis {
  font-weight: 700;
  font-size: clamp(15.5px, 1.32vw, 20px);
}

/* 3つの具体例：1つずつ積み重なるように出現させるため行間を少し詰める */
.story__p--examples .story__line {
  margin-bottom: 0.2em;
}
.story__p--examples .story__line:last-child { margin-bottom: 0; }

/* 最後の余韻：しっかり見せてから大見出しへつなげる */
.story__p--finale {
  font-size: clamp(16px, 1.6vw, 23px);
  font-weight: 500;
  margin-top: 0.6em;
  margin-bottom: 0.2em;
}

/* ============================================================
   大見出しセクション
   ============================================================ */
.statement {
  padding: clamp(40px, 6vw, 90px) var(--container-pad) clamp(80px, 10vw, 160px);
  overflow: hidden;
}
.statement__sub {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(20px, 3.4vw, 47.6px);
  color: var(--color-gray);
  line-height: 1.4;
  text-align: right;
}
.statement__main {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--color-ink);
  line-height: 1;
  margin-top: 0.15em;
  white-space: nowrap;
}
.statement__main span {
  display: block;
  /* PDFでは960pt幅のキャンバスに対して約70pt(=7.3%)右にはみ出す配置。
     意図的な見切れとして、右方向に少しはみ出させた状態を維持する。 */
  font-size: clamp(40px, 11.5vw, 168px);
  margin-left: clamp(-8vw, -2vw, 0px);
  transform: translateX(2%);
}

/* ============================================================
   SPECIAL EVENT 告知（大見出しの直後・賛同企業の手前／2026-10-05追加）
   ------------------------------------------------------------
   ・中身は js/render.js が data/content.js の topEvent から生成する。
   ・広告バナー的な装飾は避け、既存の「白いカード＋大きな角丸＋控えめな影」
     （賛同企業CTA・SPECIAL CONTENTSカードと同じ作法）に、FVの色面と同じ
     イエローの日時ブロック、ピンクの小さな点、シアンのボタン
     （SPECIAL CONTENTSの公開済みボタンと同じ色・形）を組み合わせている。
   ・.statement（大見出し）の余白・サイズ・位置には一切手を加えていない。
     このセクション自身の余白だけで、大見出しとの間合いを取っている。
   ============================================================ */
.top-event {
  /* 下側の余白は、カードの影が次の「賛同企業」セクションの白背景で
     切れないようにするためのもの */
  padding: 0 var(--container-pad) 28px;
  background: #ffffff;
}
.top-event[hidden] { display: none; }
.top-event__card {
  max-width: calc(var(--container-max) - 2 * var(--container-pad));
  margin: 0 auto;
  background: #ffffff;
  border-radius: clamp(14px, 1.6vw, 28px);
  box-shadow: 0 2px 24px rgba(35, 24, 21, 0.07);
  padding: clamp(14px, 1.4vw, 22px);
  padding-right: clamp(24px, 3vw, 52px);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(20px, 3vw, 52px);
}
/* 日時ブロック（FVの「就活」と同系統のイエローの色面） */
.top-event__when {
  background: var(--color-yellow);
  border-radius: clamp(10px, 1.2vw, 20px);
  padding: clamp(18px, 2vw, 32px) clamp(22px, 2.6vw, 44px);
  color: var(--color-ink);
}
.top-event__label {
  display: flex;
  align-items: center;
  gap: 0.55em;
  font-weight: 700;
  font-size: clamp(11px, 0.85vw, 13px);
  letter-spacing: 0.14em;
  line-height: 1.4;
  margin-bottom: 0.7em;
}
.top-event__label::before {
  content: "";
  width: 0.62em;
  height: 0.62em;
  border-radius: 50%;
  background: var(--color-magenta);
  flex-shrink: 0;
}
.top-event__datetime {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.15;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.top-event__date {
  font-size: clamp(26px, 2.75vw, 40px);
  letter-spacing: 0.02em;
}
.top-event__day {
  font-size: clamp(13px, 1.15vw, 17px);
  letter-spacing: 0.08em;
  margin-left: 0.5em;
}
.top-event__time {
  display: block;
  font-size: clamp(17px, 1.6vw, 24px);
  letter-spacing: 0.04em;
  margin-top: 0.25em;
}
.top-event__what { min-width: 0; }
.top-event__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(19px, 1.95vw, 28px);
  line-height: 1.5;
  color: var(--color-ink);
}
.top-event__lead {
  font-size: clamp(12.5px, 1vw, 15px);
  line-height: 1.8;
  color: var(--color-ink);
  margin-top: 0.5em;
}
/* ボタン：SPECIAL CONTENTSの公開済みボタン（.special-card__btn）と同じ色・形 */
.top-event__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4em;
  padding: 0.85em 1.7em;
  border-radius: 999px;
  font-weight: 700;
  font-size: clamp(13px, 1vw, 15px);
  line-height: 1.4;
  white-space: nowrap;
  background: var(--color-cta-blue);
  color: #ffffff;
  transition: transform 0.25s var(--ease-out), box-shadow 0.25s var(--ease-out),
    background-color 0.25s var(--ease-out);
}
@media (hover: hover) {
  .top-event__btn:not([data-disabled="true"]):hover {
    transform: translateY(-3px);
    background-color: #00ade0;
    box-shadow: 0 10px 24px rgba(0, 143, 188, 0.45);
  }
}
/* 出現演出：画面に入ったら一度だけ、ふわっと現れる（JSが .is-motion／
   .is-inview を付与。JSが無い・視差効果を減らす設定の場合は最初から表示） */
.top-event.is-motion .top-event__card {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.8s var(--ease-out) 0.15s, transform 0.8s var(--ease-out) 0.15s;
}
.top-event.is-motion.is-inview .top-event__card {
  opacity: 1;
  transform: none;
}

/* タブレット（768px〜1023px）：ボタンをタイトルの下へ回し、
   タイトルが細く折り返されすぎないようにする */
@media (min-width: 768px) and (max-width: 1023px) {
  .top-event__card {
    grid-template-columns: auto minmax(0, 1fr);
    row-gap: 16px;
    padding-right: clamp(24px, 3vw, 40px);
  }
  .top-event__when { grid-row: 1 / span 2; align-self: stretch; }
  .top-event__what { align-self: end; padding-top: 12px; }
  .top-event__action {
    grid-column: 2;
    align-self: start;
    padding-bottom: 12px;
  }
}

/* スマートフォン（767px以下）：日時 → タイトル → ボタン の順に縦積み */
@media (max-width: 767px) {
  .top-event { padding-top: 28px; padding-bottom: 24px; }
  .top-event__card {
    grid-template-columns: 1fr;
    gap: 18px;
    padding: 12px 12px 22px;
  }
  .top-event__when { padding: 16px 18px 18px; }
  .top-event__label { margin-bottom: 0.55em; }
  .top-event__date { font-size: clamp(26px, 8.2vw, 34px); }
  .top-event__day { font-size: clamp(14px, 4vw, 17px); }
  .top-event__time { font-size: clamp(18px, 5.4vw, 22px); }
  .top-event__what { padding: 0 6px; }
  .top-event__title { font-size: clamp(16px, 5.2vw, 22px); }
  .top-event__lead { font-size: 13px; }
  .top-event__action { padding: 0 6px; }
  .top-event__btn {
    display: flex;
    width: 100%;
    white-space: nowrap;
    text-align: center;
    padding: 0.95em 0.8em;
    font-size: clamp(12.5px, 3.9vw, 15px);
  }
}

/* ============================================================
   賛同企業
   ============================================================ */
.sponsor {
  padding-top: clamp(60px, 8vw, 120px);
  background: #ffffff;
}
.sponsor__intro {
  padding: 0 var(--container-pad);
  max-width: var(--container-max);
  margin: 0 auto;
  text-align: right;
  margin-bottom: clamp(24px, 3vw, 40px);
}
.sponsor__lead {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(15px, 1.55vw, 21px);
  color: var(--color-ink);
}
.sponsor__heading {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(22px, 2.9vw, 39.2px);
  color: var(--color-ink);
  margin-top: 0.3em;
}
.sponsor__note {
  font-size: clamp(11px, 0.85vw, 13px);
  color: var(--color-gray);
  margin-top: 0.6em;
  font-weight: 400;
}

.sponsor__field {
  position: relative;
  padding: clamp(28px, 4vw, 56px) var(--container-pad) clamp(56px, 6vw, 96px);
}

/* 背景の色帯：水色・ピンク・黄色が縦方向に繰り返す帯として実装。
   企業カードの行数(=件数)が増えても、この背景パターンが自動的に
   伸びるため、追加のCSS調整をしなくてもデザインが破綻しない。 */
.sponsor__bandbg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image:
    linear-gradient(to right,
      var(--color-blue-tint) 0%, var(--color-blue-tint) 39%,
      var(--color-pink-tint) 39%, var(--color-pink-tint) 66%,
      var(--color-yellow-tint) 66%, var(--color-yellow-tint) 100%);
  background-size: 100% 200%;
  background-position: 0 0;
  background-repeat: repeat-y;
  mask-image: linear-gradient(#000 0%, #000 100%);
}
/* 行の切れ目にピンクの横帯が交差する「十字」パターン */
.sponsor__bandbg::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    to bottom,
    transparent 0,
    transparent calc(50% - 6%),
    var(--color-pink-tint) calc(50% - 6%),
    var(--color-pink-tint) calc(50% + 6%),
    transparent calc(50% + 6%),
    transparent 100%
  );
  background-size: 100% 50%;
}

.sponsor__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(20px, 2.6vw, 40px) clamp(16px, 2.2vw, 36px);
}

.company-card {
  background: #ffffff;
  border-radius: clamp(14px, 1.6vw, 28px);
  padding: clamp(24px, 2.6vw, 44px) clamp(22px, 2.4vw, 40px);
  display: flex;
  flex-direction: column;
  box-shadow: 0 2px 24px rgba(35, 24, 21, 0.05);
}
/* 奇数行(1,3,5…行目)は少し上に、偶数行は少し下にずらし、
   PDFにある「意図的な重なり・ズレ」の質感を再現する */
.company-card:nth-child(4n+1),
.company-card:nth-child(4n+2) { transform: translateY(clamp(-10px, -1vw, -18px)); }
.company-card:nth-child(4n+3),
.company-card:nth-child(4n+4) { transform: translateY(clamp(10px, 1vw, 18px)); }

/* ロゴ表示領域（セーフゾーン）：高さを固定し、どの企業も中央揃えにすることで、
   ロゴの中心位置・コメントとの間隔を6社（今後7社以降も）で統一する。
   ロゴ自体の見た目のボリュームは js/render.js が自動計算して揃え、
   必要であれば data/content.js 側の logoScale で微調整できる。
   overflow: hidden はJS側の計算が万一崩れた場合でも、ロゴがこの枠の外に
   はみ出して見えることが絶対に無いようにするための安全策（セーフゾーン）。
   通常の計算では画像はこの枠内に収まるため、この overflow が実際に
   ロゴを切り取ることは無い。 */
.company-card__logo-box {
  width: 100%;
  height: clamp(56px, 6.2vw, 100px);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: clamp(18px, 2.2vw, 34px);
  overflow: hidden;
}
.company-card__logo {
  display: block;
  width: auto;
  height: auto;
  max-width: 84%;   /* 既定値。実際の幅上限はロゴごとにJSが安全域内で調整する */
  max-height: 60%;  /* 既定値。実際の高さ上限はロゴごとにJSが安全域内で調整する */
  object-fit: contain;
}
.company-card__comment {
  font-size: clamp(12.5px, 1vw, 14px);
  line-height: 1.9;
  color: var(--color-ink);
  flex-grow: 1;
}
.company-card__link {
  align-self: flex-end;
  margin-top: clamp(16px, 1.8vw, 28px);
  font-weight: 700;
  font-size: clamp(13px, 1.05vw, 16px);
  color: var(--color-ink);
  border-bottom: 1px solid currentColor;
  padding-bottom: 4px;
}
.company-card--hidden { display: none; }

.sponsor__cta {
  position: relative;
  z-index: 1;
  background: #ffffff;
  border-radius: clamp(14px, 1.6vw, 28px);
  margin: 0 var(--container-pad);
  padding: clamp(28px, 3vw, 48px) clamp(24px, 3vw, 56px);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: clamp(16px, 2vw, 32px);
  box-shadow: 0 2px 24px rgba(35, 24, 21, 0.06);
}
.sponsor__cta-heading {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: clamp(16px, 1.45vw, 20px);
  color: var(--color-navy);
  margin-bottom: 0.6em;
}
.sponsor__cta-text {
  font-size: clamp(12.5px, 1vw, 14px);
  line-height: 1.9;
  color: var(--color-navy);
}
.sponsor__cta-link {
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: clamp(13px, 1.05vw, 16px);
  color: var(--color-navy);
  text-align: right;
  line-height: 1.6;
  white-space: nowrap;
  border-bottom: 1px solid currentColor;
  padding-bottom: 4px;
}

/* ============================================================
   NEWS
   ------------------------------------------------------------
   タイトルの行数が変わっても画像の開始位置が揃うよう、
   本文ブロック（日付＋タイトル）の高さを固定し、
   タイトルは最大2行までクランプ（3行目以降は…で省略）する。
   ============================================================ */
.news {
  background: var(--color-yellow-tint);
  padding: clamp(64px, 8vw, 120px) var(--container-pad);
}
.news__heading,
.special__heading {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(26px, 2.9vw, 39.2px);
  color: var(--color-ink);
  max-width: calc(var(--container-max) - 2 * var(--container-pad));
  margin: 0 auto clamp(32px, 4vw, 56px);
}
.news__list {
  max-width: var(--container-max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(18px, 2vw, 32px);
}
.news-card {
  background: #ffffff;
  border-radius: clamp(10px, 1.2vw, 20px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.32s var(--ease-out), box-shadow 0.32s var(--ease-out);
}
/* リンク先が未設定のNEWSカードは、他の「無効リンク」（企業リンク等）とは
   異なり、薄く表示せず通常のカードと同じ見た目のままにする
   （関連ページが無いだけで、情報としては通常のお知らせのため）。
   クリック／タップ不可・pointerカーソル無し・ホバー反応無しは
   [data-disabled="true"] の共通ルール（pointer-events:none等）で維持される。
   「押せる」ことを示す矢印（.news-card__arrow）は、リンクが無い場合は
   render.js側でそもそもHTMLに出力していないため、ここで別途隠す必要はない。 */
.news-card[data-disabled="true"] {
  opacity: 1;
}
.news-card:not([data-disabled="true"]) {
  cursor: pointer;
}
@media (hover: hover) {
  .news-card:not([data-disabled="true"]):hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 30px rgba(35, 24, 21, 0.12);
  }
  /* リンクありNEWSのみ：ホバー時に画像へごくわずかな拡大を加え、
     「反応している」ことをもう一段はっきり伝える（誇張しすぎない範囲）。 */
  .news-card:not([data-disabled="true"]):hover .news-card__image img {
    transform: scale(1.045);
  }
}
.news-card__body {
  padding: clamp(18px, 1.8vw, 28px) clamp(18px, 1.8vw, 26px);
}
.news-card__date-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 1.2em;
}
.news-card__date {
  font-size: clamp(11px, 0.85vw, 14px);
  letter-spacing: 0.1em;
  color: var(--color-ink);
}
/* リンクありNEWSだけに表示される「›」。サイト内の他のリンク
   （「〇〇をもっと知る」等）と共通の .arrow の仕組みを使っており、
   PCではホバー時に右へ動き、タッチ端末では常時表示のままなので、
   hoverの無いスマートフォン／iPhoneでも「押せる」ことが伝わる。 */
.news-card__arrow {
  font-size: clamp(12px, 0.9vw, 15px);
  font-weight: 700;
  color: var(--color-gray);
  flex-shrink: 0;
}
.news-card__title {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: clamp(13px, 1vw, 14px);
  line-height: 1.8;
  color: var(--color-ink);
  /* タイトルが1行でも3行分の高さを確保し、4行目以降は省略することで、
     カードごとの画像開始位置・カード全体の高さを常に揃える。
     （2026-09-24：長めのNEWS見出しが2行では収まりきらず、数字の
       途中など不自然な位置で切れてしまうケースがあったため、
       2行→3行に変更。3行でも収まらないほど長い場合のみ、
       これまでどおり末尾が「…」で省略される） */
  min-height: 5.4em;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.news-card__image {
  width: 100%;
  aspect-ratio: 16 / 10;
  background: var(--color-blue-tint);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(11px, 0.85vw, 13px);
  font-weight: 700;
  color: var(--color-ink);
  overflow: hidden;
}
.news-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s var(--ease-out);
}

/* ------------------------------------------------------------
   4件目以降（「過去のお知らせを見る」で開閉するエリア）
   ------------------------------------------------------------
   ・.news__more は常に画面上に存在するが、max-height:0 + overflow:hidden
     で高さを0に潰しておくことで見た目上は隠れている状態にしている
     （display:noneではないため、中身の実際の高さをJavaScript側で
     いつでも測定でき、その高さぶんだけmax-heightを広げることで
     スムーズに開閉できる）。
   ・ドキュメントの通常のフロー（position:staticのまま）で高さが
     変化するだけなので、下のSPECIAL CONTENTSセクションと重なったり、
     ページが不自然に跳ねたりすることはない。
   ・カードのデザイン自体は .news-card 共通のスタイルをそのまま使うため、
     4件目以降も1〜3件目と全く同じ見た目になる。
   ------------------------------------------------------------ */
.news__more {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.45s var(--ease-in-out);
}
.news__more .news__more-list {
  margin-top: clamp(18px, 2vw, 32px);
}

/* 「過去のお知らせを見る」／「閉じる」ボタン。カードのような強い
   UIにはせず、他のセクションの控えめなテキストリンクと同じ
   トーン（下線・矢印の動き）で「押せる」ことだけを伝える。 */
.news__toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: fit-content;
  margin: clamp(28px, 3vw, 44px) auto 0;
  padding: 8px 4px;
  background: none;
  border: none;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: clamp(13px, 1vw, 14px);
  color: var(--color-navy);
  cursor: pointer;
}
.news__toggle-label {
  position: relative;
  padding-bottom: 2px;
  border-bottom: 1px solid currentColor;
}
@media (hover: hover) {
  .news__toggle:hover .news__toggle-label {
    opacity: 0.7;
  }
}
/* ⌄（下向き矢印）。開いている間は180度回転して上向きになり、
   「閉じる」ボタンであることを分かりやすくする。 */
.news__toggle-arrow {
  font-size: 1.1em;
  line-height: 1;
  transition: transform 0.32s var(--ease-out);
}
.news__toggle[aria-expanded="true"] .news__toggle-arrow {
  transform: rotate(180deg);
}

/* ============================================================
   SPECIAL CONTENTS
   ============================================================ */
.special {
  background: var(--color-pink-tint);
  padding: clamp(64px, 8vw, 120px) var(--container-pad);
  overflow: hidden;
}
.special__list {
  max-width: var(--container-max);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 2.4vw, 32px);
}
/* SPECIAL CONTENTS全体（すべてのカード）に対する注釈。特定のカードに
   属するものではないため #special-list の外側（＝SPECIAL CONTENTS
   セクションの最後の要素）に配置しており、カードの件数や表示順が
   変わっても常に一番下に表示される。.sponsor__note と同じ考え方で、
   小さめ・控えめな配色にしている（2026-09-24追加）。 */
.special__note {
  max-width: var(--container-max);
  margin: clamp(20px, 2.4vw, 32px) auto 0;
  font-size: clamp(11px, 0.85vw, 13px);
  color: var(--color-gray);
  font-weight: 400;
  line-height: 1.7;
}
.special-card {
  background: #ffffff;
  border-radius: clamp(14px, 1.6vw, 28px);
  padding: clamp(24px, 2.6vw, 44px) clamp(24px, 3vw, 52px);
  /* 右下に絶対配置している .special-card__action（ボタン／COMING SOON）と
     本文（.special-card__desc）が重ならないよう、あらかじめボタンの高さ分の
     余白を下に確保しておく（スマートフォン版は元から同様の余白を確保済み。
     2026-09-24：イベント紹介文の改行対応により本文が複数行になり得るため、
     PC版にも同じ考え方の余白を追加） */
  padding-bottom: clamp(76px, 7vw, 104px);
  display: grid;
  grid-template-columns: minmax(180px, 26%) 1fr;
  gap: clamp(20px, 3vw, 48px);
  position: relative;
}
.special-card__number {
  font-size: clamp(12px, 0.95vw, 14px);
  letter-spacing: 0.08em;
  color: var(--color-ink);
  margin-bottom: 1em;
}
.special-card__label {
  font-weight: 700;
  font-size: clamp(11px, 0.85vw, 13px);
  letter-spacing: 0.08em;
  color: var(--color-ink);
  margin-bottom: 0.6em;
}
.special-card__title {
  font-weight: 700;
  font-size: clamp(17px, 1.45vw, 20px);
  line-height: 1.6;
  color: var(--color-ink);
}
/* イベント日時（content.js の eventDate／2026-10-05追加）。説明文の上に、
   イエローの色面（上部SPECIAL EVENT告知の日時ブロックと同じ色）を
   引いた太字1行として表示し、日時をひと目で認識できるようにする。
   折り返した場合も各行に色面がつくよう box-decoration-break を指定。 */
.special-card__date {
  font-weight: 700;
  font-size: clamp(13.5px, 1.15vw, 16px);
  line-height: 1.9;
  color: var(--color-ink);
  margin-bottom: 0.7em;
}
.special-card__date-mark {
  background: var(--color-yellow);
  padding: 0.18em 0.6em;
  border-radius: 4px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
/* 「｜」の位置で優先的に折り返す（それでも入りきらない極端に狭い
   画面では、まとまりの中でも自然に折り返すため、はみ出さない） */
.special-card__date-seg {
  display: inline-block;
  max-width: 100%;
}
.special-card__desc {
  font-size: clamp(12.5px, 1vw, 14px);
  line-height: 1.9;
  color: var(--color-ink);
}
.special-card__action {
  position: absolute;
  right: clamp(24px, 3vw, 52px);
  bottom: clamp(20px, 2.2vw, 36px);
}
.special-card__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  padding: 0.75em 1.6em;
  border-radius: 999px;
  font-weight: 700;
  font-size: clamp(12.5px, 1vw, 14px);
  background: var(--color-cta-blue);
  color: #ffffff;
  transition: transform 0.25s var(--ease-out), box-shadow 0.25s var(--ease-out),
    background-color 0.25s var(--ease-out);
}
@media (hover: hover) {
  .special-card__btn:hover {
    transform: translateY(-3px);
    background-color: #00ade0;
    box-shadow: 0 10px 24px rgba(0, 143, 188, 0.45);
  }
}
/* COMING SOON：リンクではないため、ホバーしても何も反応しない。
   カーソルも通常のまま（pointerにしない）で、公開済みとの違いを示す。 */
.special-card__soon {
  display: inline-flex;
  align-items: center;
  padding: 0.75em 1.6em;
  border-radius: 999px;
  font-weight: 700;
  font-size: clamp(12.5px, 1vw, 14px);
  letter-spacing: 0.06em;
  background: var(--color-black);
  color: #ffffff;
  cursor: default;
}

/* ============================================================
   TikTok
   ============================================================ */
.tiktok {
  padding: clamp(60px, 8vw, 120px) var(--container-pad);
  display: flex;
  justify-content: center;
}
.tiktok__panel {
  width: min(100%, 620px);
  aspect-ratio: 620 / 780;
  background: var(--color-yellow);
  border-radius: clamp(60px, 12vw, 220px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: clamp(24px, 4vw, 56px);
  gap: clamp(10px, 1.6vw, 18px);
}
.tiktok__icon { width: clamp(60px, 9vw, 118px); height: auto; margin-bottom: clamp(8px, 1.2vw, 16px); }
.tiktok__catch {
  font-weight: 700;
  font-size: clamp(19px, 2vw, 25px);
  color: var(--color-black);
}
.tiktok__text {
  font-weight: 500;
  font-size: clamp(13.5px, 1.3vw, 17.4px);
  line-height: 1.8;
  color: var(--color-black);
}
.tiktok__link {
  display: inline-block;
  margin-top: clamp(8px, 1.6vw, 20px);
  font-weight: 700;
  font-size: clamp(14px, 1.3vw, 17px);
  color: var(--color-black);
  border-bottom: 2px solid currentColor;
  padding-bottom: 4px;
}
.tiktok__link[aria-disabled="true"] {
  opacity: 0.45;
  pointer-events: none;
  border-bottom-style: dashed;
}

/* ============================================================
   賛同企業募集 再CTA（TikTok〜フッターの間）
   ------------------------------------------------------------
   途中の賛同企業セクション内CTAと同じURL（sponsorInfoUrl）を
   参照する、コンパクトな再掲用CTA。既存の配色・書体をそのまま使う。
   ============================================================ */
.sponsor-recta {
  padding: clamp(36px, 5vw, 72px) var(--container-pad);
  text-align: center;
}
.sponsor-recta__inner {
  max-width: 640px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(10px, 1.4vw, 18px);
  padding-top: clamp(28px, 3.2vw, 44px);
  border-top: 1px solid rgba(35, 24, 21, 0.1);
}
.sponsor-recta__text {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: clamp(13px, 1.05vw, 16px);
  line-height: 1.8;
  color: var(--color-navy);
}
.sponsor-recta__link {
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: clamp(13px, 1.05vw, 16px);
  color: var(--color-navy);
  border-bottom: 1px solid currentColor;
  padding-bottom: 4px;
}

/* ============================================================
   フッター
   ============================================================ */
.site-footer {
  padding: clamp(28px, 3vw, 44px) var(--container-pad);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px;
}
.site-footer__name {
  font-weight: 500;
  font-size: clamp(13px, 1vw, 16px);
  color: var(--color-black);
}
.site-footer__copyright {
  font-size: clamp(11px, 0.85vw, 13px);
  color: var(--color-black);
}

/* ============================================================
   FVアニメーション：初期状態（JS有効時のみ）
   JavaScriptが読み込めない環境では、これらのクラスが付与されず
   最初から完成状態(PDF5ページ目相当)が表示される。
   ============================================================ */
html.has-js .fv__block,
html.has-js .site-header,
html.has-js .fv__curve-path {
  opacity: 0;
}
html.has-js.fv-done .fv__block,
html.has-js.fv-done .site-header,
html.has-js.fv-done .fv__curve-path {
  opacity: 1;
}
html.has-js .fv__block--ni,
html.has-js .fv__block--shukatsu {
  transform: translateY(-18%);
}
html.has-js.fv-done .fv__block--ni,
html.has-js.fv-done .fv__block--shukatsu {
  transform: translateY(0);
}
html.has-js .site-header { transform: translateY(-14px); }
html.has-js.fv-done .site-header { transform: translateY(0); }

/* ============================================================
   タブレット〜PC：768px〜1023pxはPC構造を比率のまま流体縮小
   （clamp()の下限値側で自然に縮小されるため、大きな構造変更は無し）
   ============================================================ */
@media (min-width: 1600px) {
  .container, .sponsor__intro, .news__heading, .special__heading,
  .news__list, .special__list, .sponsor__cta { }
}

/* ============================================================
   スマートフォン（768px未満）
   PC版の思想（3色ブロックの斜め配置・曲線・大胆な余白・非対称性）
   を維持しつつ、専用の座標・積み方に再構成する
   ============================================================ */
@media (max-width: 767px) {
  .fv__stage { aspect-ratio: 390 / 620; max-height: 100vh; max-height: 100svh; }

  .fv__block { font-size: clamp(20px, 7vw, 30px); border-radius: 8px; }
  .fv__block--personality {
    left: 6%; top: 46%; width: 17%; min-width: 40px; height: 27%;
  }
  /* 「就活」「に、」を少しだけ下へ移動し、スクロール追従の固定ヘッダー
     （表示直後の大きいサイズ）と重ならないようにする。「個性を。」の
     位置（top:46%）は変更していない。2つのブロックの間隔（gap）は
     4%→1%へわずかに詰めており、これは「就活」を必要以上に下げすぎず
     「個性を。」の直前で自然に収まる範囲に収めるための最小限の調整。
     「就活」→「に、」の縦の並び・間隔の考え方自体は変えていない。 */
  .fv__block--ni {
    left: 47%; top: 33%; width: 17%; min-width: 40px; height: 12%;
  }
  .fv__block--shukatsu {
    left: 66%; top: 20%; width: 17%; min-width: 40px; height: 12%;
  }

  .site-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    padding-top: 22px;
  }
  .site-header.is-compact {
    flex-direction: row;
    align-items: center;
    gap: 12px;
  }
  .site-header__logo { align-self: flex-end; text-align: right; }
  .site-nav { gap: 14px; flex-wrap: wrap; }
  .site-nav__item { font-size: 11px; padding: 6px 0; }

  /* 「自分の人生は、自分で決めるんだ。」（.statement__sub）の位置・
     余白に影響しないよう、.statementのpadding-topは変更していない。
     padding-bottomのみ、下の.statement__main側の調整ぶん（大きくなった
     高さ・広げた余白）を打ち消すよう調整し、「賛同企業」セクション以下
     （あなたと未来をつくりたいんです。を含む）の開始位置が今までと
     完全に同じになるようにしている（詳しい計算根拠はこの下の
     .statement__mainのコメントを参照）。 */
  .statement { padding-top: 56px; padding-bottom: 30px; }
  .statement__sub { text-align: left; font-size: clamp(18px, 6vw, 24px); }
  /* 「就活に、個性を。」を、左揃えのタイポグラフィは保ったまま
     ブロックごと画面中央へ寄せる。text-align:centerで各行を個別に
     中央寄せするのではなく、.statement__mainをflexコンテナ化して
     子要素（就活に、個性を。の2行を含むブロック）自体を中央配置する
     ことで、行ごとの左端は揃ったまま、ブロック全体としては
     左右中央に見えるようにしている。 */
  .statement__main {
    margin-top: 26px;
    display: flex;
    justify-content: center;
  }
  .statement__main span {
    display: inline-block;
    /* 「自分の人生は、自分で決めるんだ。」比で約115%（110〜120%の
       目安の範囲内）に拡大。375px幅でも「を。」が画面内に収まる
       ことをPlaywrightで確認済み（本README該当セクション参照）。 */
    font-size: clamp(44px, 17.5vw, 74px);
    margin-left: 0;
    transform: none;
  }

  .sponsor__intro { text-align: left; }
  .sponsor__grid { grid-template-columns: 1fr; }
  .company-card:nth-child(4n+1),
  .company-card:nth-child(4n+2),
  .company-card:nth-child(4n+3),
  .company-card:nth-child(4n+4) { transform: none; }
  .sponsor__bandbg { background-size: 100% 400px; }
  .sponsor__bandbg::after { background-size: 100% 200px; }

  .sponsor__cta { flex-direction: column; align-items: flex-start; }
  .sponsor__cta-link { align-self: flex-start; text-align: left; }

  .news__list { grid-template-columns: 1fr; }

  .special-card {
    grid-template-columns: 1fr;
    padding-bottom: clamp(64px, 18vw, 92px);
    /* SPではpin方式を廃止し、通常のドキュメントフロー上のカードへ
       直接アンカースクロールするため、固定ヘッダーの高さぶんだけ
       オフセットしておく（scrollIntoViewが自動的に考慮する）。 */
    scroll-margin-top: var(--header-compact-h);
  }
  .special-card__action { left: clamp(24px, 6vw, 40px); right: auto; }

  .tiktok__panel { border-radius: 40px; aspect-ratio: auto; padding: 40px 28px; }

  .sponsor-recta__inner { align-items: flex-start; text-align: left; }

  .site-footer { flex-direction: column; }
}

/* ============================================================
   アンカースクロール：固定ヘッダーの高さぶんオフセットし、
   移動先の見出しがヘッダーに隠れないようにする
   ============================================================ */
#sponsor,
#news,
#special,
#special-contents,
#story {
  scroll-margin-top: var(--header-compact-h);
}