/*
 * 霧島レイ 生誕15周年 — スタイルシート
 *
 * このファイルを直接編集・公開します。結合・コンパイル・minifyは不要です。
 * 各セクションは基本指定 → 画面幅別指定の順に配置しています。
 * 声優メッセージ・NEWS・History・Messageは761px以上で2カラム、760px以下で1カラム。
 * 900px・700px・620pxの指定は、メニューや文字・余白・並び順の調整です。
 *
 * 目次（番号または区画名で検索）
 *   01. 共通変数
 *   02. 基本スタイル・共通部品
 *   03. ローディング
 *   04. 星空・流れ星
 *   05. ヘッダー・ナビゲーション
 *   06. Hero
 *   06.1 声優メッセージ
 *   07. NEWS
 *   08. History
 *   09. Message
 *   10. フッター
 *   11. 動きを抑える設定
 */
/* ==========================================================================
   01. 共通変数
   色・フォント・サイズ・余白・角丸・動きの共通設定。
   ========================================================================== */
:root {
  color-scheme: dark;

  /* Color */
  --color-night-950: #030914;
  --color-night-900: #061326;
  --color-night-800: #0a2039;
  --color-night-700: #123451;
  --color-sky-center: #052f68;
  --color-sky-mid: #031631;
  --color-sky-edge: #020a1a;
  --color-cyan-500: #53d8f3;
  --color-coral-300: #f79f8d;
  --color-cyan-300: #9beafa;
  --color-ice: #e9faff;
  --color-white: #fff;
  --color-copy: #d4e4f1;
  --color-muted: #90a8bd;
  --color-line: rgb(155 234 250 / 24%);
  --color-glass: rgb(4 17 34 / 80%);

  /* Type */
  /* Google Fonts：英数字はBarlow、日本語はNoto Sans JPで表示。 */
  --font-sans: "Barlow", "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  --font-display: var(--font-sans);
  --text-xs: 0.72rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: clamp(1.125rem, 1.7vw, 1.35rem);
  --text-title: clamp(2.3rem, 5.5vw, 5rem);

  /* Layout */
  --content-width: 72rem;
  --page-gutter: clamp(1.25rem, 5vw, 5rem);
  --header-height: 5.5rem;
  --section-space: clamp(6rem, 12vw, 11rem);
  --radius-sm: 0.5rem;
  --radius-md: 1rem;
  --radius-lg: 1.5rem;
  --radius-pill: 999px;
  --shadow-panel: 0 1.5rem 5rem rgb(0 0 0 / 35%);

  /* Motion */
  --ease-out: cubic-bezier(0.2, 0.75, 0.25, 1);
  --duration-fast: 180ms;
  --duration-normal: 420ms;
  --duration-sky: 180s;
}

@media (max-width: 900px) {
  :root {
    --header-height: 4.5rem;
  }
}

@media (max-width: 620px) {
  :root {
    --page-gutter: 1.1rem;
    --section-space: 5.5rem;
    --header-height: 4.2rem;
  }
}

/* ==========================================================================
   02. 基本スタイル・共通部品
   ページの初期設定、アクセシビリティ、共通見出し・リンク・ボタン。
   ========================================================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-height) + 1rem);
}

body {
  margin: 0;
  min-width: 320px;
  background: var(--color-night-950);
  color: var(--color-white);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: 1.9;
  overflow-x: hidden;
}

img {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  color: inherit;
  font: inherit;
}

::selection {
  color: var(--color-night-950);
  background: var(--color-cyan-300);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: fixed;
  z-index: 20;
  top: 1rem;
  left: 1rem;
  padding: 0.6rem 1rem;
  transform: translateY(-180%);
  border-radius: var(--radius-sm);
  background: var(--color-white);
  color: var(--color-night-950);
}

.skip-link:focus {
  transform: translateY(0);
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  min-width: 13rem;
  padding: 0.75rem 1.25rem;
  border-radius: var(--radius-pill);
  font-size: var(--text-sm);
  transition: transform var(--duration-fast), background var(--duration-fast);
}

.button:hover {
  transform: translateY(2px);
}

.button--light {
  background: var(--color-ice);
  color: var(--color-night-900);
}

.button--light:hover {
  background: var(--color-cyan-300);
}

.section-shell {
  width: min(100% - 2 * var(--page-gutter), var(--content-width));
  margin-inline: auto;
}

.section-kicker {
  margin: 0 0 0.9rem;
  color: var(--color-cyan-300);
  font: 500 0.65rem var(--font-display);
  letter-spacing: 0.26em;
}

.section-title {
  margin: 0;
  font-size: calc(var(--text-title) * 1.5);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: 1.35;
}

.text-link {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  padding-block: 0.35rem;
  border-bottom: 1px solid var(--color-cyan-500);
  color: var(--color-ice);
  font-size: var(--text-sm);
  transition: color var(--duration-fast), gap var(--duration-fast);
}

.text-link:hover {
  gap: 1.4rem;
  color: var(--color-cyan-300);
}

.text-link .fa-solid {
  color: var(--color-cyan-300);
}

.section-heading {
  position: relative;
  isolation: isolate;
  margin-bottom: 1.3rem;
}

.section-heading > div {
  position: relative;
  z-index: 1;
}

/* 星は背景レイヤーとして右寄せ。タイトルの幅・文字サイズに影響させない。 */
.section-heading::after {
  position: absolute;
  z-index: 0;
  top: 50%;
  right: 0;
  width: min(100%, 34rem);
  height: clamp(1.5rem, 5vw, 4rem);
  transform: translateY(-50%);
  pointer-events: none;
  /* 同じ星のSVGを左右に1つずつ並べる。 */
  background-image: url("../images/star_2.svg"), url("../images/star_2.svg");
  background-position: left center, right center;
  background-size: 50% auto;
  background-repeat: no-repeat;
  opacity: 0.8;
  content: "";
}

.coming-soon {
  display: inline-block;
  margin-top: 1rem;
  padding: 0.45rem 0.8rem;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-pill);
  color: var(--color-cyan-300);
  font: 500 0.62rem var(--font-display);
  letter-spacing: 0.17em;
}

.mobile-only {
  display: none;
}

@media (max-width: 900px) {
  .section-title {
    font-size: calc(var(--text-title) * 1.296);
  }
}

@media (max-width: 760px) {
  .desktop-only {
    display: none;
  }

  .mobile-only {
    display: initial;
  }
}

@media (max-width: 620px) {
  .section-title {
    font-size: calc(clamp(2.6rem, 14vw, 4rem) * 0.9);
  }
}

/* ==========================================================================
   03. ローディング
   主要画像・フォントの読み込み待ち表示。制御は loading.js。
   ========================================================================== */
html.is-loading {
  overflow: hidden;
}

.page-loader {
  position: fixed;
  z-index: 1000;
  inset: 0;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 1rem;
  background: var(--color-night-950);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 220ms ease-out, visibility 0s 220ms;
}

html.is-loading .page-loader {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: none;
}

.page-loader__spinner {
  width: 2.5rem;
  height: 2.5rem;
  border: 2px solid var(--color-line);
  border-top-color: var(--color-cyan-300);
  border-radius: 50%;
}

html.is-loading .page-loader__spinner {
  animation: loader-spin 900ms linear infinite;
}

.page-loader__label {
  color: var(--color-cyan-300);
  font: 600 0.75rem/1.5 var(--font-display);
  letter-spacing: 0.2em;
}

@keyframes loader-spin {
  to { transform: rotate(360deg); }
}

/* ==========================================================================
   04. 星空・流れ星
   背景・星粒・明滅・回転・流れ星。生成とタイマー制御は sky-particles.js。
   ========================================================================== */
/* 静止・アニメーション両モードで同じ星粒を使い、アニメーション時だけ動きを加える。 */
.sky {
  position: fixed;
  z-index: -1;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  background: radial-gradient(ellipse at 52% 35%, var(--color-sky-center) 0%, var(--color-sky-mid) 49%, var(--color-sky-edge) 100%);
}

.sky__stars {
  position: absolute;
  z-index: 0;
  inset: -35%;
  transform-origin: center;
}

.sky__stars::before {
  position: absolute;
  inset: 0;
  opacity: 0.22;
  background-image:
    radial-gradient(1px 1px at 14% 23%, #fff 98%, transparent),
    radial-gradient(2px 2px at 56% 74%, var(--color-cyan-300) 98%, transparent),
    radial-gradient(1px 1px at 83% 38%, #fff 98%, transparent),
    radial-gradient(1.5px 1.5px at 34% 87%, #b9eefa 98%, transparent),
    radial-gradient(1px 1px at 73% 9%, #fff 98%, transparent);
  background-size: 260px 230px, 370px 320px, 190px 270px, 330px 280px, 290px 350px;
  content: "";
}

.sky__star {
  position: absolute;
  top: var(--star-y);
  left: var(--star-x);
  width: var(--star-size);
  height: var(--star-size);
  border-radius: 50%;
  background: #f4fdff;
  box-shadow: 0 0 2px 0.5px rgb(155 234 250 / 58%);
  opacity: var(--star-opacity);
}

.sky__star--bright {
  background: #fff;
  box-shadow: 0 0 0.45rem 0.08rem rgb(83 216 243 / 82%), 0 0 1rem rgb(83 216 243 / 46%);
}

.sky__meteors {
  position: absolute;
  z-index: 1;
  inset: 0;
  overflow: hidden;
}

.sky__shooting-star {
  position: absolute;
  top: var(--meteor-y);
  left: var(--meteor-x);
  width: var(--meteor-size);
  height: 1.5px;
  opacity: 0;
  background: linear-gradient(90deg, transparent, var(--color-cyan-300) 72%, #fff);
  filter: drop-shadow(0 0 4px var(--color-cyan-500));
  transform: rotate(-32deg);
}

.sky__veil {
  position: absolute;
  z-index: 2;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  background: linear-gradient(180deg, rgb(3 9 20 / 45%), rgb(3 9 20 / 68%) 42%, rgb(3 9 20 / 88%));
}

html[data-sky-mode="animated"] .sky__stars {
  animation: sky-rotation var(--duration-sky) linear infinite;
}

html[data-sky-mode="animated"] .sky__star--twinkle {
  animation: star-twinkle var(--twinkle-duration) ease-in-out var(--twinkle-delay) infinite alternate;
}

html[data-sky-mode="animated"] .sky__shooting-star {
  animation: shooting-star var(--meteor-duration) ease-out forwards;
}

@keyframes sky-rotation {
  to {
    transform: rotate(360deg);
  }
}

@keyframes star-twinkle {
  from {
    opacity: var(--twinkle-min-opacity);
    transform: scale(0.82);
  }
  to {
    opacity: var(--star-opacity);
    transform: scale(1.15);
  }
}

@keyframes shooting-star {
  0% {
    opacity: 0;
    transform: translate3d(0, 0, 0) rotate(-32deg);
  }
  12% {
    opacity: 0.95;
  }
  100% {
    opacity: 0;
    transform: translate3d(-14rem, 8rem, 0) rotate(-32deg);
  }
}

/* ==========================================================================
   05. ヘッダー・ナビゲーション
   ロゴ・周年表記・メニュー。900px以下で開閉式メニューに切り替え。
   ========================================================================== */
.site-header {
  /* ロゴの縦横比を基準に、周年表記とメニューの高さを揃える。 */
  --header-logo-width: clamp(6rem, 10vw, 8.5rem);
  --header-logo-height: calc(var(--header-logo-width) * 45.62 / 149.97);
  --header-nav-font-size: 1.14rem; /* メニューの英字サイズ */
  position: absolute;
  z-index: 10;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  width: 100%;
  min-height: var(--header-height);
  padding: 0 var(--page-gutter);
  border-bottom: 1px solid rgb(255 255 255 / 12%);
  background: rgb(3 9 20 / 96%);
}

.brand {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  gap: 0.7rem;
}

.brand img {
  width: var(--header-logo-width);
  height: auto;
}

.brand__anniversary {
  display: inline-flex;
  align-items: center;
  gap: 0.2em;
  min-height: var(--header-logo-height);
  padding-left: 0.75rem;
  border-left: 1px solid var(--color-line);
  color: var(--color-cyan-300);
  font: 700 calc(var(--header-logo-height) * 0.9)/1 var(--font-display);
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.brand__anniversary span {
  color: var(--color-copy);
  font-size: 1em;
  font-weight: 400;
  text-transform: uppercase;
}

.primary-nav {
  display: flex;
  align-items: center;
  gap: clamp(1.5rem, 3vw, 3rem);
  margin-left: auto;
}

.primary-nav a {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.35rem;
  min-height: var(--header-logo-height);
  font: 600 var(--header-nav-font-size)/1 var(--font-display);
  letter-spacing: 0.08em;
  white-space: nowrap;
  text-transform: uppercase;
  transition: color var(--duration-fast);
}

.primary-nav a:hover {
  color: var(--color-cyan-300);
}

.primary-nav a span {
  color: var(--color-muted);
  font: 400 0.63rem/1.2 var(--font-sans);
  letter-spacing: 0.04em;
}

.menu-toggle {
  display: none;
}

@media (max-width: 900px) {
  .site-header {
    position: absolute;
    gap: 0.75rem;
  }

  .primary-nav {
    position: absolute;
    top: 100%;
    left: 0;
    display: none;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    width: 100%;
    margin: 0;
    padding: 0.9rem var(--page-gutter);
    border-bottom: 1px solid var(--color-line);
    background: rgb(3 9 20 / 96%);
    box-shadow: var(--shadow-panel);
  }

  .primary-nav.is-open {
    display: grid;
  }

  .primary-nav a {
    align-items: center;
    min-height: 3.25rem;
    padding: 0.5rem 0.25rem;
    letter-spacing: 0.04em;
    text-align: center;
  }

  .menu-toggle {
    display: grid;
    flex-shrink: 0;
    place-items: center;
    width: 2.7rem;
    height: 2.7rem;
    margin-left: auto;
    border: 1px solid var(--color-line);
    border-radius: 50%;
    background: rgb(3 9 20 / 40%);
    cursor: pointer;
  }

  .menu-toggle__icon {
    grid-area: 1 / 1;
    color: var(--color-cyan-300);
    font-size: 1rem;
  }

  .menu-toggle__icon--close,
  .menu-toggle[aria-expanded="true"] .menu-toggle__icon--open {
    display: none;
  }

  .menu-toggle[aria-expanded="true"] .menu-toggle__icon--close {
    display: inline-block;
  }
}

@media (max-width: 620px) {
  .site-header {
    /* 小画面でも周年表記を1行に保てるロゴ幅。高さの比率はPCと共通。 */
    --header-logo-width: clamp(4.3rem, 19vw, 5.6rem);
    gap: 0.5rem;
    padding-inline: var(--page-gutter);
  }

  .brand {
    gap: 0.5rem;
  }

  .brand__anniversary {
    padding-left: 0.55rem;
    /* 大文字表記でも狭い画面でロゴ・開閉ボタンと1行に収める。 */
    font-size: calc(var(--header-logo-height) * 0.8);
    letter-spacing: 0;
  }
}

/* ==========================================================================
   06. Hero
   惑星・人物・周年コピー・導入文。配置の調整変数は .hero__scene に集約。
   1cqwは内側の .hero__frame の幅の1%。基準枠の最大幅は1600px。
   ========================================================================== */
.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.hero__scene {
  /* ── 調整項目：画像・コピーの拡大上限 ── */
  --hero-reference-width: 1600px;

  /* ── 調整項目：人物 ── */
  /* スーツ幅：375px時104%、1200px以上78.125%。ドレスとの幅比は自動維持。 */
  --hero-suit-width: clamp(78.125cqw, calc(66.3636cqw + 8.8182rem), 104cqw);
  --hero-dress-width: calc(var(--hero-suit-width) * 1357 / 1759);
  --hero-dress-layout-top: clamp(7.8cqw, calc(10.291rem - 5.909cqw), 38cqw);
  /* 狭い画面ではヘッダー下の余白を抑え、人物とコピーを同じ量だけ引き上げる。 */
  --hero-dress-top: min(var(--hero-dress-layout-top), max(7.8cqw, calc(var(--header-height) + 0.75rem)));
  --hero-top-trim: calc(var(--hero-dress-layout-top) - var(--hero-dress-top));
  --hero-suit-top: calc(var(--hero-dress-top) + 2.3cqw);
  --hero-dress-center-gap: 3.6cqw;
  --hero-suit-center-gap: clamp(-3cqw, calc(2.8182cqw - 1.3636rem), 1cqw);

  /* ── 調整項目：惑星（下端の高さで切り出し位置を指定） ── */
  --hero-planet-width: clamp(108cqw, calc(84.3636cqw + 17.7273rem), 160cqw);
  --hero-planet-bottom: clamp(37cqw, calc(32.9091cqw + 3.0682rem), 46cqw);

  /* ── 調整項目：コピーと余白 ── */
  --hero-copy-top: calc(clamp(39cqw, calc(16.7273cqw + 16.7045rem), 88cqw) - var(--hero-top-trim));
  --hero-number-size: clamp(15.5cqw, calc(10.7273cqw + 3.5795rem), 26cqw);
  --hero-suffix-size: clamp(9.5cqw, calc(7.9091cqw + 1.1932rem), 13cqw);
  --hero-english-size: clamp(1.35cqw, calc(0.6455cqw + 0.5284rem), 2.9cqw);
  --hero-english-gap: clamp(1.4cqw, calc(0.2182cqw + 0.8864rem), 4cqw);
  --hero-divider-gap: clamp(1.25cqw, calc(0.5cqw + 0.5625rem), 2.9cqw);
  --hero-symbol-size: clamp(2.1cqw, calc(0.3273cqw + 1.3295rem), 6cqw);
  --hero-symbol-gap: clamp(2.7cqw, calc(2.6591rem - 0.8455cqw), 10.5cqw);
  --hero-lead-gap: clamp(2.1cqw, calc(2.0795rem - 0.6727cqw), 8.2cqw);
  --hero-bottom-space: clamp(5cqw, calc(5.1136rem - 1.8182cqw), 20cqw);
  --hero-stars-width: clamp(32cqw, calc(46.5455cqw - 3.4091rem), 42cqw);

  position: relative;
  width: 100%;
  /* 画像は1600pxの基準枠では切らず、全幅のシーン端で切り出す。 */
  overflow: hidden;
}

/* サイズ・配置の計算基準。はみ出した画像は全幅のシーン内に表示する。 */
.hero__frame {
  position: relative;
  container-type: inline-size;
  width: 100%;
  max-width: var(--hero-reference-width);
  /* 高さは通常フローのコピーと上下paddingで決める。画面高の下限は設けない。 */
  height: auto;
  margin-inline: auto;
  overflow: visible;
}

/* 重なり順：惑星 → 飾り星 → 人物 → コピー。星空は既存の共通背景。 */
.hero__planet-layer,
.hero__decor,
.hero__figures {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.hero__planet-layer {
  z-index: 0;
}

.hero__planet {
  position: absolute;
  top: var(--hero-planet-bottom);
  left: 50%;
  width: var(--hero-planet-width);
  max-width: none;
  height: auto;
  /* 支給画像の下端にある透明余白を除き、惑星の輪郭を指定位置へ揃える。 */
  transform: translate(-50%, -94.5%);
}

.hero__figures {
  z-index: 2;
}

.hero__lei {
  position: absolute;
  display: block;
  max-width: none;
  height: auto;
  filter:
    drop-shadow(0 0 0.65rem rgb(222 249 255 / 20%))
    drop-shadow(0 0 1.3rem rgb(82 202 255 / 15%));
}

.hero__lei--dress {
  top: var(--hero-dress-top);
  right: calc(50% + var(--hero-dress-center-gap));
  width: var(--hero-dress-width);
}

.hero__lei--suit {
  top: var(--hero-suit-top);
  left: calc(50% + var(--hero-suit-center-gap));
  width: var(--hero-suit-width);
}

/* コピーは通常フローで高さを確保し、次のセクションと重ならないようにする。 */
.hero__copy {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--hero-copy-top) 0 var(--hero-bottom-space);
  color: var(--color-white);
  text-align: center;
}

.hero__copy h1 {
  order: 1;
  margin: 0;
  font-size: inherit;
  line-height: 1;
}

.hero__age {
  display: flex;
  align-items: baseline;
  gap: 1.4cqw;
  font-family: var(--font-display);
  white-space: nowrap;
}

.hero__age-number {
  color: var(--color-white);
  font-size: var(--hero-number-size);
  font-weight: 600;
  line-height: 0.85;
  letter-spacing: -0.055em;
  text-shadow: 0 0 1.2cqw rgb(83 216 243 / 65%);
}

.hero__age-suffix {
  color: transparent;
  font-size: var(--hero-suffix-size);
  font-weight: 700;
  line-height: 0.85;
  letter-spacing: -0.045em;
  -webkit-text-stroke: clamp(1px, 0.1cqw, 2px) var(--color-ice);
  text-shadow: 0 0 2cqw rgb(155 234 250 / 14%);
}

.hero__english {
  order: 2;
  margin: var(--hero-english-gap) 0 0;
  font-family: var(--font-display);
  font-size: max(0.625rem, var(--hero-english-size));
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.hero__divider {
  order: 3;
  width: clamp(41.4cqw, calc(30cqw + 9rem), 69cqw);
  height: 1px;
  margin-top: var(--hero-divider-gap);
  background: rgb(233 250 255 / 72%);
}

.hero__scroll {
  position: relative;
  order: 4;
  display: block;
  width: max(2.75rem, var(--hero-symbol-size));
  height: max(2.75rem, calc(var(--hero-symbol-size) * 1.57));
  margin-top: var(--hero-symbol-gap);
  border-radius: 0.25rem;
}

.hero__scroll img {
  position: absolute;
  top: 50%;
  left: 50%;
  /* SVG内の余白を除き、印刷部分がsymbol-sizeの幅になるよう拡大する。 */
  width: calc(var(--hero-symbol-size) * 3.76);
  max-width: none;
  height: auto;
  transform: translate(-50%, -50%);
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(89%) sepia(33%) saturate(588%) hue-rotate(155deg) brightness(101%) contrast(97%);
}

.hero__scroll:focus-visible {
  outline: 2px solid var(--color-cyan-300);
  outline-offset: 0.5rem;
}

.hero__lead {
  order: 5;
  /* 一文ずつブロックにし、すべての画面幅で中央揃え。 */
  display: block;
  width: calc(100% - 2rem);
  margin: var(--hero-lead-gap) 0 0;
  /* 導入文の文字スタイル。配置の余白はHeroの変数で管理。 */
  color: var(--color-copy);
  font-size: var(--text-lg);
  font-weight: 400;
  line-height: 2.1;
  letter-spacing: normal;
  text-align: center;
}

.hero__lead > span {
  display: block;
}

/* 文中は意味のまとまりごとに折り返す。極端に狭い幅では句の内部も折り返せる。 */
.hero__lead-phrase {
  display: inline-block;
  max-width: 100%;
  vertical-align: top;
}

.hero__decor {
  z-index: 1;
}

.hero__starline,
.hero__spark {
  position: absolute;
  top: calc(var(--hero-copy-top) + var(--hero-number-size) * 0.49);
  max-width: none;
  height: auto;
}

.hero__starline {
  width: var(--hero-stars-width);
}

.hero__starline--left {
  left: -1cqw;
}

.hero__starline--right {
  right: -1cqw;
}

.hero__spark {
  filter: brightness(0) invert(1);
}

.hero__spark--left {
  left: 27cqw;
  width: 2.5cqw;
}

.hero__spark--right {
  right: 25cqw;
  width: 3.6cqw;
}

@media (max-width: 700px) {
  /* モバイル：人物位置は上記の連続補間を使用。コピーの並びだけ変更する。 */
  .hero__divider {
    order: 2;
  }

  .hero__english {
    order: 3;
  }
}

@media (max-width: 620px) {
  /* 小画面の導入文。 */
  .hero__lead {
    font-size: 0.95rem;
  }
}

/* ==========================================================================
   06.1 声優メッセージ
   HeroとNEWSの間に掲載。写真はトリミングせず、元の縦横比で表示する。
   ========================================================================== */
.cast-message {
  padding-bottom: var(--section-space);
}

.cast-message__panel {
  display: grid;
  grid-template-columns: minmax(0, 0.38fr) minmax(0, 1fr);
  align-items: start;
  gap: clamp(1.75rem, 4vw, 3rem);
  padding: clamp(1.5rem, 4vw, 3rem);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, rgb(10 32 57 / 85%), var(--color-glass));
  box-shadow: var(--shadow-panel);
}

.cast-message__copy {
  grid-column: 2;
  grid-row: 1;
  min-width: 0;
}

.cast-message__header {
  margin-bottom: clamp(1.5rem, 3vw, 2rem);
  padding-bottom: clamp(1.25rem, 3vw, 2rem);
  border-bottom: 1px solid var(--color-line);
}

.cast-message__header h2 {
  margin: 0;
  font-size: clamp(1.4rem, 2.4vw, 2rem);
  font-weight: 700;
  line-height: 1.65;
}

.cast-message__header h2 > span {
  display: inline-block;
  max-width: 100%;
}

.cast-message__portrait {
  grid-column: 1;
  grid-row: 1;
  width: min(100%, 18rem);
  margin: 0;
  justify-self: center;
}

.cast-message__portrait img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-sm);
}

.cast-message__portrait figcaption {
  display: grid;
  gap: 0.2rem;
  margin-top: 1rem;
  text-align: center;
}

.cast-message__portrait figcaption > span {
  color: var(--color-muted);
  font-size: var(--text-xs);
}

.cast-message__portrait figcaption > strong {
  font-size: 1.3rem;
  font-weight: 500;
  letter-spacing: 0.08em;
}

.cast-message__body {
  min-width: 0;
  color: var(--color-copy);
  font-size: var(--text-base);
  line-height: 2;
}

.cast-message__body p {
  margin: 0;
  /* 通常の文章として行幅を使い、対応ブラウザでは短すぎる最終行を抑える。 */
  text-wrap: pretty;
  line-break: strict;
  word-break: normal;
}

.cast-message__body p + p {
  margin-top: 1.25rem;
}

.cast-message__body .cast-message__greeting {
  color: var(--color-cyan-300);
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.85;
}

@media (min-width: 761px) {
  .cast-message {
    margin-top: clamp(2rem, 4vw, 4rem);
  }
}

@media (max-width: 760px) {
  .cast-message__panel {
    grid-template-columns: minmax(0, 1fr);
  }

  /* 見出し→写真・役名・名前→本文の順に配置する。 */
  .cast-message__copy {
    display: contents;
  }

  .cast-message__header {
    grid-row: 1;
    margin-bottom: 0;
    text-align: center;
  }

  .cast-message__portrait {
    grid-row: 2;
    width: min(100%, 13rem);
  }

  .cast-message__body {
    grid-row: 3;
  }
}

/* ==========================================================================
   07. NEWS
   NEWS 01のカードとスライダー、NEWS 02のXキャンペーン、NEWS 03の解禁カード。
   ========================================================================== */
.news {
  padding-bottom: var(--section-space);
}

/* 07.1 NEWS 01：基本カード・見出し・説明文 */
.feature-card {
  /* 画像・本文の左右は共通。本文の上下は、さらに広めに確保する。 */
  --feature-card-padding: clamp(1.75rem, 4vw, 4rem);
  --feature-card-padding-block: clamp(2.5rem, 5vw, 5rem);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  overflow: hidden;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  background: var(--color-glass);
  box-shadow: var(--shadow-panel);
}

.feature-card + .feature-card {
  margin-top: 1.5rem;
}

.feature-card__visual {
  position: relative;
  display: grid;
  min-height: 28rem;
  place-items: center;
  padding-inline: var(--feature-card-padding);
  overflow: hidden;
  background: linear-gradient(145deg, rgb(6 19 38 / 65%), rgb(5 21 41 / 93%));
}

.feature-card__number {
  position: absolute;
  top: -3.8rem;
  left: 1rem;
  color: rgb(155 234 250 / 7%);
  font: 700 17rem/1 var(--font-display);
  letter-spacing: -0.12em;
  pointer-events: none;
}

.feature-card__placeholder {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: 3 / 2;
  border: 1px dashed var(--color-line);
  border-radius: var(--radius-md);
  color: var(--color-muted);
  font: 500 clamp(1rem, 2vw, 1.8rem)/1.4 var(--font-display);
  letter-spacing: 0.15em;
  text-align: center;
}

.feature-card__content {
  min-width: 0;
  align-self: center;
  padding: var(--feature-card-padding-block) var(--feature-card-padding);
}

.label {
  margin: 0 0 0.7rem;
  color: var(--color-cyan-300);
  font: 600 0.68rem var(--font-display);
  letter-spacing: 0.16em;
}

.label span {
  margin-left: 0.5rem;
  color: var(--color-muted);
  font-size: 0.55rem;
  font-weight: 400;
}

.feature-card h3 {
  margin: 0 0 1.2rem;
  font-size: clamp(1.6rem, 3vw, 2.25rem);
  font-weight: 500;
  line-height: 1.5;
}

.feature-card__content > p:not(.label) {
  color: var(--color-copy);
}

.feature-card__notice {
  margin-block: 1.25rem 1.8rem;
  padding: 0.9rem 1rem;
  border-left: 2px solid var(--color-cyan-500);
  background: rgb(83 216 243 / 7%);
  font-size: var(--text-sm);
}

.feature-card__body > p {
  color: var(--color-copy);
}

/* 07.2 NEWS 01：スライダー・コントローラー */
.car-slider {
  position: relative;
  z-index: 1;
  min-width: 0;
  width: 100%;
}

.car-slider__viewport {
  position: relative;
  aspect-ratio: 2 / 1;
}

.car-slider__slide {
  position: absolute;
  inset: 0;
}

.car-slider__slide[hidden],
.car-slider__controls[hidden] {
  display: none;
}

.car-slider__slide.is-active {
  animation: car-slide-appear 350ms ease-out;
}

.car-slider__slide img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.car-slider__controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(0.2rem, 1vw, 0.5rem);
  margin-top: 1rem;
}

.car-slider__arrow,
.car-slider__toggle,
.car-slider__dot {
  display: inline-grid;
  flex: 0 0 auto;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  border: 1px solid var(--color-line);
  border-radius: 50%;
  background: rgb(3 9 20 / 35%);
  color: var(--color-cyan-300);
  font-size: 0.75rem;
  cursor: pointer;
}

.car-slider__pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
}

.car-slider__dot {
  width: 1.5rem;
  height: 1.5rem;
  border: 0;
  background: transparent;
}

.car-slider__dot::before {
  width: 0.4rem;
  height: 0.4rem;
  border: 1px solid var(--color-cyan-300);
  border-radius: 50%;
  content: "";
}

.car-slider__dot[aria-current="true"]::before {
  background: var(--color-cyan-300);
}

.car-slider button:hover,
.car-slider button:focus-visible {
  background: rgb(83 216 243 / 15%);
}

.car-slider button:focus-visible {
  outline: 2px solid var(--color-cyan-300);
  outline-offset: 2px;
}

@keyframes car-slide-appear {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* 07.3 NEWS 02・03：キャンペーン共通枠とXキャンペーン */
.campaign-news {
  --campaign-padding: clamp(1.65rem, 4vw, 4rem);
  margin-top: 1.5rem;
  overflow: hidden;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  background: var(--color-glass);
  box-shadow: var(--shadow-panel);
}

.campaign-news__header {
  position: relative;
  isolation: isolate;
  padding: var(--campaign-padding);
  overflow: hidden;
  background: linear-gradient(120deg, rgb(16 57 83 / 35%), transparent);
}

/* タイトルと解禁リストの背景を共通にし、境界で色が切り替わらないようにする。 */
.campaign-news--digital .campaign-news__header {
  background: transparent;
}

.campaign-news__number {
  position: absolute;
  z-index: -1;
  top: -1.5rem;
  right: 1rem;
  color: rgb(155 234 250 / 7%);
  font: 700 clamp(7rem, 12vw, 11rem)/1 var(--font-display);
  letter-spacing: -0.1em;
  pointer-events: none;
}

.campaign-news h3 {
  margin: 0;
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  font-weight: 700;
  line-height: 1.65;
}

.campaign-news h3 > span,
.campaign-title-phrase {
  display: inline-block;
  max-width: 100%;
  vertical-align: top;
}

.campaign-news__concurrent {
  width: fit-content;
  margin: 0 0 0.75rem;
  padding: 0.1rem 0.75rem;
  border: 1px solid var(--color-cyan-300);
  border-radius: var(--radius-pill);
  color: var(--color-cyan-300);
  font-size: var(--text-sm);
  font-weight: 700;
}

.campaign-news__lead {
  margin: 1.25rem 0 0;
  color: var(--color-copy);
}

.campaign-list,
.unlock-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.campaign-list > li {
  border-top: 1px solid var(--color-line);
}

.campaign-entry {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  align-items: center;
  gap: clamp(1.5rem, 4vw, 3rem);
  padding: var(--campaign-padding);
}

.campaign-entry__copy {
  min-width: 0;
}

.campaign-entry__round {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem 1rem;
  margin: 0 0 0.75rem;
  color: var(--color-cyan-300);
  font-size: 1.15rem;
  font-weight: 700;
}

.campaign-entry__round > span {
  color: var(--color-muted);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.12em;
}

.campaign-entry h4 {
  margin: 0;
  font-size: clamp(1.2rem, 2.1vw, 1.65rem);
  line-height: 1.65;
  overflow-wrap: anywhere;
}

/* タイトル画像を主役にし、読み上げ用も兼ねた小さな見出しテキストを添える。 */
.campaign-entry h4.campaign-entry__title {
  display: grid;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}

.campaign-entry__title img {
  width: 100%;
  height: auto;
}

.campaign-entry__title-text {
  color: var(--color-muted);
  font-size: var(--text-xs);
  font-weight: 400;
  line-height: 1.65;
  text-align: center;
}

/* タイトルは意味のまとまりごとに折り返す。 */
.campaign-entry__title-text > span {
  display: inline-block;
  white-space: nowrap;
}

.campaign-entry__copy > p:not(.campaign-entry__round),
.campaign-entry__details > p:not(.campaign-entry__round) {
  margin: 1rem 0 0;
  color: var(--color-copy);
}

.campaign-period {
  margin: 1.25rem 0;
  padding-block: 0.75rem;
  border-block: 1px solid var(--color-line);
  font-size: var(--text-sm);
}

.campaign-period dt {
  margin-bottom: 0.25rem;
  color: var(--color-muted);
  font-size: var(--text-xs);
}

.campaign-period dd {
  display: flex;
  flex-wrap: wrap;
  gap: 0 0.35rem;
  margin: 0;
  font-weight: 700;
}

.campaign-period time,
.campaign-hashtag {
  white-space: nowrap;
}

.campaign-hashtag {
  display: inline-block;
  margin-inline: 0.25em;
  padding: 0 0.25em;
  background: var(--color-white);
  color: #000;
  font-size: 1.25em;
  font-weight: 700;
  line-height: 1.25;
}

.campaign-entry__afterword {
  font-size: var(--text-sm);
}

.campaign-entry__action {
  display: flex;
  justify-content: center;
  margin-top: 1.5rem;
}

.campaign-entry__action > .campaign-button {
  width: min(100%, 24rem);
}

.campaign-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  min-height: 3rem;
  max-width: 100%;
  padding: 0.7rem 1.25rem;
  border: 1px solid var(--color-cyan-300);
  border-radius: var(--radius-pill);
  background: rgb(83 216 243 / 10%);
  color: var(--color-ice);
  font: 600 0.95rem/1.5 var(--font-sans);
  text-decoration: none;
  transition: background var(--duration-fast), box-shadow var(--duration-fast);
}

.campaign-button:disabled:not(.campaign-button--primary) {
  border-color: var(--color-line);
  background: rgb(155 234 250 / 4%);
  color: var(--color-muted);
  opacity: 1;
}

.campaign-button[href]:hover,
.campaign-button[href]:focus-visible {
  background: rgb(83 216 243 / 20%);
}

/* 参加CTAと解禁済みダウンロードに共通の強調表現。 */
.campaign-button--primary {
  min-height: 3.25rem;
  padding: 0.85rem 1.75rem;
  border-color: var(--color-cyan-500);
  background: var(--color-cyan-500);
  color: var(--color-night-950);
  font-size: 1rem;
  font-weight: 700;
  box-shadow: 0 0.35rem 1.5rem rgb(83 216 243 / 22%);
}

.campaign-button--primary:disabled {
  opacity: 1;
}

.campaign-button--primary[href]:hover,
.campaign-button--primary[href]:focus-visible,
.campaign-button--primary:not(:disabled):hover,
.campaign-button--primary:not(:disabled):focus-visible {
  border-color: var(--color-cyan-300);
  background: var(--color-cyan-300);
  box-shadow: 0 0.4rem 1.75rem rgb(83 216 243 / 35%);
}

.campaign-note,
.campaign-entry__visual figcaption {
  margin: 0.75rem 0 0;
  color: var(--color-muted);
  font-size: var(--text-xs);
  line-height: 1.8;
}

.campaign-entry__visual {
  min-width: 0;
  margin: 0;
}

.campaign-entry__visual img {
  width: 100%;
  height: auto;
}

.campaign-prize {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.5rem 1rem;
  margin: 0 0 1.25rem;
  font-size: var(--text-sm);
  font-weight: 700;
  line-height: 1.7;
}

.campaign-prize > strong {
  color: var(--color-cyan-300);
  font: 700 3.25rem/1 var(--font-display);
  white-space: nowrap;
}

.campaign-prize > strong > span {
  margin-left: 0.25rem;
  font-size: 1rem;
}

.campaign-prize__tag {
  display: inline-block;
  margin-left: 0.5rem;
  padding: 0 0.35rem;
  border: 1px solid var(--color-line);
  border-radius: 0.25rem;
  font-size: var(--text-xs);
  white-space: nowrap;
}

.campaign-entry--upcoming {
  background: rgb(155 234 250 / 2%);
}

.campaign-entry .campaign-entry__soon {
  color: var(--color-muted);
  font-family: var(--font-display);
  letter-spacing: 0.12em;
}

.campaign-upcoming {
  display: grid;
  justify-items: center;
  gap: 0.5rem;
  padding: 2em 1rem;
  border: 1px dashed var(--color-line);
  border-radius: var(--radius-md);
  color: var(--color-muted);
  font: 500 0.85rem/1.4 var(--font-display);
  letter-spacing: 0.15em;
}

.campaign-upcoming > span:first-child {
  color: var(--color-cyan-300);
  font-size: 3rem;
  line-height: 1;
}

/* 07.4 NEWS 03：解禁コンテンツの一覧・状態表示 */
.unlock-list {
  /* ロック・解禁状態に共通の画像枠比率。支給画像に合わせ、この値を変更する。 */
  --unlock-preview-aspect-ratio: 16 / 9;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem;
  padding: 0 var(--campaign-padding) var(--campaign-padding);
}

.unlock-card {
  min-width: 0;
  padding: clamp(1.25rem, 2.5vw, 2rem);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  background: linear-gradient(150deg, rgb(12 40 65 / 65%), rgb(3 12 26 / 70%));
  text-align: center;
}

.unlock-card__step {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 1.5rem;
  margin: 0 0 0.5rem;
  color: var(--color-muted);
  font: 500 var(--text-xs)/1.5 var(--font-display);
  letter-spacing: 0.16em;
}

.unlock-card--unlocked {
  border-color: var(--color-cyan-500);
  box-shadow: inset 0 1px 0 rgb(155 234 250 / 25%);
}

.unlock-card__state {
  padding: 0.15rem 0.6rem;
  border-radius: var(--radius-pill);
  background: rgb(83 216 243 / 15%);
  color: var(--color-cyan-300);
  font-weight: 700;
  letter-spacing: 0.03em;
}

.unlock-card h4 {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: 0.25rem 0.5rem;
  margin: 0;
  color: var(--color-cyan-300);
  font-size: 0.95rem;
}

.unlock-card h4 > strong {
  font: 700 clamp(3rem, 6vw, 4.5rem)/1 var(--font-display);
}

.unlock-card h4 > span {
  white-space: nowrap;
}

.unlock-card__preview {
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 1rem;
  width: 100%;
  aspect-ratio: var(--unlock-preview-aspect-ratio);
  margin-top: 1.5rem;
  border: 1px dashed var(--color-line);
  border-radius: var(--radius-sm);
  color: var(--color-muted);
  font: 500 var(--text-xs)/1.5 var(--font-display);
  letter-spacing: 0.15em;
}

.unlock-card__preview i {
  color: var(--color-cyan-300);
  font-size: 1.5rem;
}

.unlock-card--unlocked .unlock-card__preview {
  border-style: solid;
  background: radial-gradient(ellipse at center, rgb(83 216 243 / 12%), transparent 75%);
  color: var(--color-cyan-300);
}

.unlock-card__name {
  margin: 1.25rem 0 0;
  font-weight: 700;
}

.unlock-card .campaign-button {
  width: 100%;
  margin-top: 1.25rem;
}

/* NEWS：画面幅別の指定 */
@media (min-width: 761px) {
  .feature-card--reverse .feature-card__visual {
    grid-column: 2;
    grid-row: 1;
  }

  .feature-card--reverse .feature-card__content {
    grid-column: 1;
    grid-row: 1;
  }
}

@media (max-width: 900px) {
  .feature-card__visual {
    min-height: 25rem;
  }
}

@media (max-width: 760px) {
  .feature-card {
    --feature-card-padding: 1.65rem;
    --feature-card-padding-block: 2.5rem;
    grid-template-columns: 1fr;
  }

  .feature-card__visual {
    /* 1カラムでは画像・プレースホルダーの高さに合わせ、四辺の余白を揃える。 */
    min-height: 0;
    padding: var(--feature-card-padding);
  }

  .feature-card__number {
    top: -1rem;
    font-size: 9rem;
  }

  .feature-card__placeholder {
    aspect-ratio: auto;
    padding-block: 2em;
  }

  #new-lei-car {
    /* NEWS 02・03のヘッダーと同じ余白を使う。 */
    --feature-card-padding: clamp(1.65rem, 4vw, 4rem);
    position: relative;
    isolation: isolate;
  }

  /* 本文を複製せず、見出し→画像→説明文へ並べ替える。 */
  #new-lei-car .feature-card__content {
    display: contents;
  }

  #new-lei-car .feature-card__heading {
    grid-row: 1;
    min-width: 0;
    padding: var(--feature-card-padding) var(--feature-card-padding) 0;
  }

  #new-lei-car .feature-card__heading h3 {
    margin-bottom: 0;
  }

  #new-lei-car .feature-card__visual {
    grid-row: 2;
    /* 番号の配置基準をカード全体にし、画像部分の背景の境界もなくす。 */
    position: static;
    overflow: visible;
    background: transparent;
  }

  #new-lei-car .feature-card__number {
    z-index: -1;
    top: -1.5rem;
    right: 1rem;
    left: auto;
    font: 700 clamp(7rem, 12vw, 11rem)/1 var(--font-display);
    letter-spacing: -0.1em;
  }

  #new-lei-car .feature-card__body {
    grid-row: 3;
    min-width: 0;
    padding: 0 var(--feature-card-padding) var(--feature-card-padding-block);
  }

  #new-lei-car .feature-card__body > p:first-child {
    margin-top: 0;
  }

  #new-lei-car .feature-card__heading .label > span,
  .campaign-news .label > span {
    display: block;
    margin: 0.25rem 0 0;
  }

  .campaign-entry,
  .unlock-list {
    grid-template-columns: minmax(0, 1fr);
  }

  /* グッズ画像を本文と参加CTAの間に配置する。2カラム時は従来のcopy内にCTAを残す。 */
  .campaign-entry--with-prize .campaign-entry__copy {
    display: contents;
  }

  .campaign-entry--with-prize .campaign-entry__details {
    grid-row: 1;
    min-width: 0;
  }

  .campaign-entry--with-prize .campaign-entry__visual {
    grid-row: 2;
  }

  .campaign-entry--with-prize .campaign-entry__action {
    grid-row: 3;
    margin-top: 0;
  }

  .campaign-entry__visual {
    width: min(100%, 28rem);
    justify-self: center;
  }
}

/* ==========================================================================
   08. History
   年表・画像・日付・マーカーとライン・外部リンク。
   ========================================================================== */
.history {
  --history-column-gap: clamp(3rem, 6vw, 6rem);
  --history-image-marker-gap: 0.75rem;
  --history-image-width: 18rem;
  --timeline-marker-width: 0.9rem;
  --timeline-gap: 1.25rem;
  --timeline-event-space: 2.6rem;
  --timeline-date-size: clamp(1.65rem, 2.6vw, 2rem);
  --timeline-title-size: clamp(1.05rem, 1.8vw, 1.35rem);
  --timeline-body-size: var(--text-sm);
  padding-block: 0 var(--section-space);
}

.history__intro {
  margin: 0 0 clamp(2.5rem, 5vw, 4rem);
  color: var(--color-copy);
  font-size: var(--text-lg);
  line-height: 1.9;
}

/* span単位で次の行へ送り、1まとまりがコンテナより長い場合のみ内部で折り返す。 */
.history__intro > span {
  display: inline-block;
  max-width: 100%;
  vertical-align: top;
}

/* スペースを含む製品名は、名前全体をまとめて次の行へ送る。 */
.history__product-name {
  white-space: nowrap;
}

.history__layout {
  max-width: 68rem;
  margin-inline: auto;
}

.timeline {
  min-width: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.timeline__item {
  --timeline-text-scale: 1;
  position: relative;
  display: grid;
  grid-template-columns: var(--timeline-marker-width) minmax(0, 1fr);
  column-gap: var(--timeline-gap);
  row-gap: 0.6rem;
  padding-bottom: var(--timeline-event-space);
}

/* 通常項目の日付・見出し・説明文は、各画面幅の基準サイズの75%。 */
.timeline__item:not(.timeline__item--featured) {
  --timeline-text-scale: 0.75;
}

/* 隣り合うマーカーの中心をつなぎ、最終項目は下へ余韻を残す。 */
.timeline__item::before {
  position: absolute;
  top: 0.9rem;
  bottom: -0.9rem;
  left: calc(var(--timeline-marker-width) / 2);
  width: 1px;
  background: rgb(155 234 250 / 45%);
  content: "";
}

.timeline__item:last-child::before {
  bottom: auto;
  height: clamp(3rem, 6vw, 4.5rem);
  background: linear-gradient(to bottom, rgb(155 234 250 / 45%) 15%, rgb(155 234 250 / 0%) 100%);
}

.timeline__item:last-child {
  padding-bottom: 0;
}

.timeline__date {
  grid-column: 2;
  grid-row: 1;
  color: var(--color-cyan-300);
  font: 700 calc(var(--timeline-date-size) * var(--timeline-text-scale))/1 var(--font-display);
  letter-spacing: 0.03em;
}

.timeline__marker {
  z-index: 1;
  grid-column: 1;
  grid-row: 1;
  justify-self: center;
  width: 0.7rem;
  height: 0.7rem;
  margin-top: 0.55rem;
  border: 1px solid var(--color-cyan-300);
  border-radius: 50%;
  background: var(--color-night-950);
  box-shadow: 0 0 0 0.28rem rgb(83 216 243 / 10%), 0 0 1rem rgb(83 216 243 / 38%);
}

.timeline__item--featured .timeline__marker {
  background: var(--color-cyan-300);
  box-shadow: 0 0 0 0.35rem rgb(83 216 243 / 15%), 0 0 1.2rem rgb(83 216 243 / 58%);
}

.timeline__content {
  grid-column: 2;
  min-width: 0;
}

.timeline__copy h3 {
  margin: 0;
  font-size: calc(var(--timeline-title-size) * var(--timeline-text-scale));
  font-weight: 700;
  line-height: 1.5;
}

.timeline__copy p {
  margin: 0.5rem 0 0;
  color: var(--color-copy);
  font-size: calc(var(--timeline-body-size) * var(--timeline-text-scale));
  line-height: 1.85;
}

.timeline__link {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  max-width: 100%;
  margin-top: 0.75rem;
  padding: 0.35em 0.75em;
  border: 1px solid var(--color-line);
  border-radius: 999px;
  background: transparent;
  color: var(--color-muted);
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.6;
  text-decoration: none;
  transition: border-color 180ms ease, background-color 180ms ease, color 180ms ease;
}

.timeline__link i {
  flex-shrink: 0;
  font-size: 0.85em;
}

.timeline__link:hover,
.timeline__link:focus-visible {
  border-color: var(--color-cyan-300);
  background: rgb(155 234 250 / 6%);
  color: var(--color-cyan-300);
}

.timeline__link:focus-visible {
  outline: 2px solid var(--color-cyan-300);
  outline-offset: 3px;
}

.timeline__media {
  margin: 1.25rem 0 0;
}

/* 画像は切り抜かず、元の縦横比のまま表示する。 */
.timeline__media img {
  width: min(100%, var(--history-image-width));
  height: auto;
  object-fit: contain;
}

@media (min-width: 761px) {
  /* 画像の高さも出来事ごとに確保し、次の出来事との対応がずれないようにする。 */
  .timeline__item {
    /* 画像列の幅を維持し、詰めた間隔の分はすべてテキスト列へ渡す。 */
    --history-image-column-width: calc(
      (100% - var(--history-column-gap) - var(--timeline-marker-width) - var(--timeline-gap)) * 0.65 / 1.65
    );
    /* 画像・余白・マーカー・余白・テキストを同じグリッドに配置する。 */
    grid-template-columns:
      minmax(0, var(--history-image-column-width)) var(--history-image-marker-gap)
      var(--timeline-marker-width) var(--timeline-gap) minmax(0, 1fr);
    /* 日付行の高さを固定し、画像の高さによって日付と本文の間が広がるのを防ぐ。 */
    grid-template-rows: calc(var(--timeline-date-size) * var(--timeline-text-scale)) auto;
    column-gap: 0;
    align-items: start;
  }

  .timeline__date {
    grid-column: 5;
  }

  .timeline__marker {
    grid-column: 3;
  }

  .timeline__item::before {
    /* ラインの横位置もマーカー列を基準にする。縦方向は項目全体をつなぐ。 */
    grid-column: 3;
  }

  .timeline__content {
    display: contents;
  }

  .timeline__copy {
    grid-column: 5;
    grid-row: 2;
    align-self: start;
    min-width: 0;
  }

  .timeline__media {
    grid-column: 1;
    grid-row: 1 / span 2;
    min-width: 0;
    margin: 0;
  }

  .timeline__media img {
    margin-inline: auto;
  }
}

@media (max-width: 620px) {
  .history {
    --timeline-gap: 0.9rem;
    --timeline-event-space: 2.25rem;
    --history-image-width: 16rem;
    --timeline-title-size: 1.05rem;
    --timeline-body-size: 0.875rem;
  }

  .history__intro {
    margin-bottom: 2rem;
    font-size: 0.95rem;
  }
}

/* ==========================================================================
   09. Message
   メッセージ・キャラクター画像の配置とトリミング。
   ========================================================================== */
.message {
  --message-padding: clamp(2rem, 4vw, 4rem);
  /* ドレスの左右を切らずに右余白を確保し、人物2枚のサイズ比を維持する。 */
  --message-dress-right-space: 4%;
  --message-dress-width: calc(100% - var(--message-dress-right-space));
  --message-suit-width: calc(var(--message-dress-width) * 1759 / 1357);
  position: relative;
  display: grid;
  /* コピー右側の余白分を画像カラムへ渡し、本文の有効幅は維持する。 */
  grid-template-columns: minmax(0, calc(100% / 1.9 - var(--message-padding))) minmax(0, 1fr);
  align-items: center;
  gap: 0;
  overflow: hidden;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  background: linear-gradient(110deg, rgb(3 9 20 / 91%), rgb(6 19 38 / 74%));
}

.message__copy {
  position: relative;
  z-index: 2;
  min-width: 0;
  padding: var(--message-padding) 0 var(--message-padding) var(--message-padding);
}

.message__copy .section-title {
  /* コンテンツ幅が上限に達しても、2行目の「レイと一緒に。」が収まるサイズに抑える。 */
  font-size: clamp(2.5rem, 5vw, 4rem);
}

.message__body > p {
  margin: 1.2rem 0 0;
  color: var(--color-copy);
}

.message__body > p > span {
  display: block;
}

.message__signature {
  display: inline-flex;
  align-items: baseline;
  gap: 0.6rem;
  margin-top: 1.2rem;
  color: var(--color-cyan-300);
  font: 500 0.9rem var(--font-display);
  letter-spacing: 0.15em;
}

.message__signature b {
  font-size: 1.2rem;
}

.message__figures {
  /* カードの上下端まで広げ、上にスーツ、下にドレスを配置する。 */
  position: relative;
  align-self: stretch;
  width: 100%;
  aspect-ratio: 4 / 5;
  overflow: hidden;
}

.message__figures img {
  position: absolute;
  display: block;
  max-width: none;
  height: auto;
  filter: drop-shadow(0 0 1rem rgb(155 234 250 / 18%));
}

.message__dress {
  z-index: 2;
  bottom: 0;
  right: var(--message-dress-right-space);
  /* 左右はトリミングせず、重なった部分ではドレスを手前にする。 */
  width: var(--message-dress-width);
}

.message__suit {
  z-index: 1;
  top: 0;
  /* 顔・手のある左端を残し、足側の右端だけ切り出す。 */
  left: 4%;
  width: var(--message-suit-width);
}

@media (min-width: 761px) {
  /* ドレス画像自身の高さの20%を下へ出して切り取る。 */
  .message__dress {
    transform: translateY(20%);
  }

  .message__suit {
    top: clamp(0.75rem, 1.5vw, 1.5rem);
  }
}

@media (max-width: 760px) {
  .message {
    --message-padding: clamp(1.75rem, 5vw, 2.5rem);
    grid-template-columns: minmax(0, 1fr);
    gap: 1.5rem;
  }

  /* HTMLを複製せず、見出し→画像→本文の順に配置する。 */
  .message__copy {
    display: contents;
  }

  .message__heading {
    grid-row: 1;
    padding: 2rem var(--message-padding) 0;
  }

  .message__figures {
    grid-row: 2;
  }

  .message__dress {
    /* 1カラム時は左端だけ少し見切れる位置に寄せる。 */
    right: auto;
    left: -3%;
  }

  .message__body {
    grid-row: 3;
    padding: 0 var(--message-padding) 2.5rem;
  }

  .message__body > p {
    margin-top: 0;
  }

  .message__copy .section-title {
    font-size: clamp(1.8rem, 7vw, 2.8rem);
  }
}

/* ==========================================================================
   10. フッター
   ページ上部リンク・ブランドロゴ・コピーライト。
   ========================================================================== */
.site-footer {
  display: grid;
  justify-items: center;
  gap: 1.5rem;
  padding: 3rem var(--page-gutter) 2rem;
  background: rgb(3 9 20 / 85%);
  text-align: center;
}

.footer-top {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  margin-block: 1.5rem;
  color: var(--color-cyan-300);
  font: 500 0.65rem var(--font-display);
  letter-spacing: 0.2em;
}

.site-footer__logos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 2rem;
}

.site-footer__logos img {
  /* ロゴの高さを揃え、幅は元の縦横比から決める。 */
  width: auto;
  height: 2rem;
  max-width: none;
  object-fit: contain;
}

.site-footer > p {
  margin: 0;
  color: var(--color-muted);
  font: 400 0.6rem var(--font-display);
  letter-spacing: 0.1em;
}

@media (max-width: 620px) {
  .site-footer {
    gap: 1.2rem;
    padding-block: 2rem 1.5rem;
  }
}

/* ==========================================================================
   11. 動きを抑える設定
   OSの prefers-reduced-motion 設定に対応。全セクションに適用。
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html.is-loading .page-loader__spinner {
    animation: none;
  }

  html {
    scroll-behavior: auto;
  }

  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .car-slider__slide.is-active {
    animation: none;
  }
}