/* ============================================
   MW Brand Release 2026 — /launch/ 専用スタイル
   --------------------------------------------
   トークン・タイポグラフィ・レスポンシブ・モーションは
   mw-brand-site（src/styles/global.css）と
   mw_recruit_site（src/styles/recruit.css）からの移植。
   このファイルは /launch/ からのみ読み込む。
   共有の base.css は他ページに影響するため一切変更しない。
   ============================================ */

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  /* ===== Surface / Base（Figma: Original-Surface） ===== */
  --color-surface: #f2eee2;
  --color-white: #ffffff;
  --color-black: #000000;

  /* ===== Material color palette（Figma マテリアル変数と 1:1） ===== */
  /* JapaneseCedar */
  --color-cedar-100: #7b8281;
  --color-cedar-300: #5c6160;
  --color-cedar-700: #3f4241;

  /* WoodFlooring */
  --color-wood-100: #ad967f;
  --color-wood-300: #877664;
  --color-wood-700: #63574a;

  /* StainlessSteel */
  --color-stainless-100: #bababa;
  --color-stainless-300: #9e9e9e;
  --color-stainless-700: #787878;

  /* Paper */
  --color-paper-300: #d1cdc2;
  --color-paper-700: #a8a59d;

  /* Surface 上の小さい補助テキスト用。
     素材色の色相を保ちつつ、可読性を比較できる派生色として分離する。 */
  --color-text-muted-neutral: #716b62;
  --color-text-muted-warm: #706251;
  --color-text-muted-plaster: #6f6854;

  /* Tree */
  --color-tree-100: #647d64;
  --color-tree-300: #4f614f;

  /* PlasterFinish */
  --color-plaster-100: #d4c9a5;
  --color-plaster-300: #aba285;
  --color-plaster-700: #8c846d;

  /* CortenSteel */
  --color-corten-100: #8f5128;
  --color-corten-300: #734221;
  --color-corten-700: #543119;

  /* Stone */
  --color-stone-100: #939476;
  --color-stone-300: #7f8066;
  --color-stone-700: #656651;

  /* ColoredConcrete */
  --color-concrete-100: #ba7763;
  --color-concrete-300: #945f50;
  --color-concrete-700: #734b40;

  /* ===== ローンチページ専用の追加色 =====
     Figma の素材パレット（--color-*）由来ではない、このページ固有の色。
     交互バンドの背景。参考デザインのスクリーンショットから採色 */
  --lp-band-bg: #cfc3af;

  /* ===== Typography ===== */
  --font-optima: 'Optima', 'Palatino Linotype', 'Book Antiqua', serif;

  /* ===== Breakpoints（参照用。値は各 @media に直書き） ===== */
  --bp-tablet: 768px;
  --bp-pc: 1024px;
}

/* ===== Fluid unit（PC のみ） =====
   1u = 1920px ビューポートでの 1px。下方向は比例縮小、上方向は 1px でキャップ。
   モバイルは固定 px（--u は使わない）。ブランドサイトと同一定義。 */
@media (min-width: 1024px) {
  :root {
    --u: min(calc(100vw / 1920), 1px);
  }
}

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  overflow-x: hidden;
  background-color: var(--color-surface);
  color: var(--color-cedar-700);
  font-family: var(--font-optima);
  font-weight: 400;
  font-style: normal;
  line-height: 1.5;
  letter-spacing: 1.5px;
  font-feature-settings: "palt";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

ul,
ol {
  list-style: none;
}

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

/* キーボードフォーカスは常に可視。マウス操作では出さない */
:focus-visible {
  outline: 2px solid var(--color-cedar-700);
  outline-offset: 3px;
}

/* PC の hover（ブランドサイト global.css と同一） */
@media (min-width: 1024px) {
  a,
  button {
    transition: opacity 0.3s ease;
  }

  a:hover,
  button:hover {
    opacity: 0.85;
  }
}

/* タッチ端末のタップフィードバック（ブランドサイト global.css と同一）。
   opacity ではなく brightness で沈める（クリーム背景が透けて白っぽくならないよう） */
@media (hover: none) {
  a,
  button {
    transition: filter 1s ease;
  }

  a:active,
  button:active {
    filter: brightness(0.7);
    transition: filter 0.08s ease;
  }
}

/* スクリーンリーダー専用テキスト */
.lp-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* 本文へスキップ（フォーカス時のみ出現） */
.lp-skip {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 200;
  padding: 12px 20px;
  background-color: var(--color-surface);
  color: var(--color-cedar-700);
  font-size: 14px;
  letter-spacing: 2px;
  transform: translateY(-120%);
}

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

/* ============================================
   Reveal（ブランドサイト reveal.ts + global.css の移植）
   JS が無い場合は .js が付かないため、常に表示されたままになる
   ============================================ */
/* ブロックのフェードイン（ブランドサイト /philosophy の本文リビールと同一値：
   blur(3px) から 1.4s ease・0.25s 遅れで立ち上がる） */
.js .reveal {
  opacity: 0;
  filter: blur(3px);
  transition:
    opacity 1.4s ease var(--reveal-text-delay, 0.25s),
    filter 1.4s ease var(--reveal-text-delay, 0.25s);
}

/* ヒーローのコピーは上から順に 0.13s ずつ遅れて出る（行リビールと同じリズム） */
.js .lp-cover-title.reveal {
  --reveal-text-delay: 0.38s;
}

.js .lp-cover-eyebrow.reveal {
  --reveal-text-delay: 0.51s;
}

.js .reveal.visible {
  opacity: 1;
  filter: blur(0);
}

/* 行単位リビール（launch.js が生成する .lp-line）に切り替わった段落は、
   ブロック自体の透明化をやめて行スパン側の inline transition に任せる */
.js .reveal.reveal-lines,
.js .reveal.reveal-lines.visible {
  opacity: 1;
  filter: none;
  transition: none;
}

/* 画像のブラーイン。テキストのリビールと同じテンポ（1.4s ease 0.25s）に揃える */
.js [data-reveal-media] img {
  opacity: 0;
  filter: blur(12px);
  transition:
    opacity 1.4s ease calc(var(--reveal-delay, 0s) + 0.25s),
    filter 1.4s ease calc(var(--reveal-delay, 0s) + 0.25s);
}

.js [data-reveal-media].visible img {
  opacity: 1;
  filter: blur(0);
}

/* 画像に添えるキャプション・テキストは少し遅れて出る（recruit の creator-text と同じ流儀） */
.js [data-reveal-media] figcaption,
.js [data-reveal-media] .lp-media-text {
  opacity: 0;
  filter: blur(3px);
  transition:
    opacity 1.4s ease calc(var(--reveal-delay, 0s) + 0.4s),
    filter 1.4s ease calc(var(--reveal-delay, 0s) + 0.4s);
}

.js [data-reveal-media].visible figcaption,
.js [data-reveal-media].visible .lp-media-text {
  opacity: 1;
  filter: blur(0);
}

/* ============================================
   Header（ブランドサイト Header.astro の構造・寸法を踏襲）
   ============================================ */
.lp-header {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 768px;
  z-index: 100;
  padding: 18px 16px 18px 20px;
}

.lp-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.lp-header-logo img {
  /* logo.svg は preserveAspectRatio="none"。比率を保つため高さを明示する */
  width: 140px;
  height: 18px;
  transition: filter 0.4s ease;
}

.lp-header-cta {
  flex: none;
  padding: 9px 16px 8px;
  border: 1px solid var(--color-cedar-700);
  font-size: 12px;
  line-height: 20px;
  letter-spacing: 2px;
  color: var(--color-cedar-700);
  white-space: nowrap;
  transition:
    color 0.4s ease,
    border-color 0.4s ease;
}

/* ヒーロー画像に重なっている間は白抜き。
   JS 無しでも初期表示から正しい色になるよう :has() で判定する
   （ブランドサイトの body:has(.cover-bg):not(.cover-scrolled) と同じ手法）。
   .cover-scrolled は launch.js が付与する */
body:has(.lp-cover):not(.cover-scrolled) .lp-header-logo img {
  filter: brightness(0) invert(1);
}

body:has(.lp-cover):not(.cover-scrolled) .lp-header-cta {
  color: var(--color-white);
  border-color: rgba(255, 255, 255, 0.85);
}

@media (min-width: 1024px) {
  .lp-header {
    max-width: 1920px;
    padding: 40px 60px;
  }

  .lp-header-logo img {
    width: 210px;
    height: 27px;
  }

  .lp-header-cta {
    padding: 12px 28px 11px;
    font-size: 14px;
    line-height: 22px;
  }
}

/* ============================================
   Cover / Hero（ブランドサイト Cover.astro の寸法・
   recruit HomeHero のコピー配置を踏襲）
   ============================================ */
.lp-cover {
  position: relative;
  width: 100%;
  height: 650px;
  overflow: hidden;
}

.lp-cover-bg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
}

/* 白文字の可読性を確保するための控えめなスクリム。
   上端＝ヘッダー（ロゴ・申し込み導線）、下端＝ヒーローのコピーの背後だけを沈め、
   写真の中央部はできるだけ素のまま残す。
   ※上端の濃度は空が明るいカットでも白抜き文字が 4.5:1 を満たす値にしている */
.lp-cover::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom, rgba(23, 22, 20, 0.62) 0, rgba(23, 22, 20, 0.55) 90px, rgba(23, 22, 20, 0) 260px),
    linear-gradient(to top, rgba(23, 22, 20, 0.58) 0%, rgba(23, 22, 20, 0.12) 42%, rgba(23, 22, 20, 0) 62%);
  pointer-events: none;
}

.lp-cover-copy {
  position: absolute;
  z-index: 2;
  left: 40px;
  right: 40px;
  bottom: 64px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  color: var(--color-white);
}

/* ブランドリリースを主役にし、タグラインと招待種別は補助情報にする */
/* 項目見出し（.lp-item-title）と同じサイズスケールを使う */
.lp-cover-kicker {
  font-size: 16px;
  line-height: 28px;
  letter-spacing: 4px;
  color: var(--color-plaster-100);
}

.lp-nowrap {
  white-space: nowrap;
}

/* イベント名の “ ” だけ丸い字形（66/99型）にする。
   Optima のクオートはくさび形のため、この文字だけセリフ体に切り替える */
.lp-quote {
  font-family: Georgia, 'Times New Roman', serif;
}

/* モバイルのみ有効な改行。デスクトップでは非表示にして1行に戻す */
@media (min-width: 1024px) {
  .lp-br-mobile {
    display: none;
  }
}

.lp-cover-title {
  max-width: 320px;
  font-size: 34px;
  font-weight: 400;
  line-height: 1.06;
  letter-spacing: 0;
  text-wrap: balance;
}

/* 項目見出し（.lp-item-title）と同じサイズスケールを使う */
.lp-cover-eyebrow {
  font-size: 20px;
  line-height: 28px;
  letter-spacing: normal;
  text-transform: uppercase;
  color: #fff;
}

@media (min-width: 1024px) {
  .lp-cover {
    height: 56.25vw;
    max-height: 1080px;
  }

  .lp-cover-copy {
    left: calc(var(--u) * 120);
    right: auto;
    max-width: calc(var(--u) * 1400);
    bottom: calc(var(--u) * 120);
    gap: calc(var(--u) * 24);
  }

  .lp-cover-kicker {
    font-size: clamp(16px, calc(var(--u) * 26), 26px);
    line-height: 1.6;
    letter-spacing: clamp(4px, calc(var(--u) * 7), 7px);
  }

  .lp-cover-title {
    max-width: calc(var(--u) * 1400);
    font-size: clamp(52px, calc(var(--u) * 96), 96px);
    line-height: 1.04;
  }

  .lp-cover-eyebrow {
    font-size: clamp(20px, calc(var(--u) * 32), 32px);
    line-height: 1.5;
    letter-spacing: normal;
  }
}

/* ============================================
   Section の骨格（recruit.css .r-section 系の移植）
   ============================================ */
.lp-section {
  width: 100%;
  padding: 120px 40px 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  /* 固定ヘッダーの下に隠れないようアンカー着地位置を下げる */
  scroll-margin-top: 64px;
}

/* ヒーロー直下の導入ブロックは、画像との間を詰める */
.lp-section--intro {
  padding-top: 80px;
}

@media (min-width: 1024px) {
  .lp-section {
    padding: calc(var(--u) * 180) calc(var(--u) * 120) 0;
    scroll-margin-top: calc(var(--u) * 100);
  }

  .lp-section--intro {
    padding-top: calc(var(--u) * 120);
  }
}

/* 交互の背景バンド（ブランドサイト /philosophy CraftmanshipSection の移植）。
   paper-300 のベタ面に対し、上は 280px かけてサーフェス色からフェードイン、
   下は 300px かけてサーフェス色へフェードアウトする。
   本文はフェード領域を避けて solid 部分から始まる（上 280+100 / 下 300 の余白） */
.lp-section--band {
  /* バンドの色。既定は paper-300、最新情報より下は --band-color の上書きで切り替える */
  --band-color: var(--color-paper-300);
  /* 余白の基準: コンテンツと色の境界の距離は上 120px / 下 150px。
     上 = 境界120px + 内側120px、下 = 内側150px + 境界の外側90px（次セクションの上余白30pxと合わせて120px） */
  padding: 240px 40px 240px;
  /* 面はグラデーションで繋がず、境界（旧グラデの中央値）でパッキリ切り替える */
  background: linear-gradient(
    to bottom,
    var(--color-surface) 120px,
    var(--band-color) 120px,
    var(--band-color) calc(100% - 90px),
    var(--color-surface) calc(100% - 90px)
  );
}

/* 最新情報（SNS）より下のバンドは、ページ固有の濃色（--lp-band-bg）を使う */
.lp-section--band-deep {
  --band-color: var(--lp-band-bg);
}

/* リード文（複数段落）と開催情報リストの間は、セクション標準の gap より少し広げる */
.lp-section--intro .lp-list {
  margin-top: 16px;
}

@media (min-width: 1024px) {
  .lp-section--intro .lp-list {
    margin-top: calc(var(--u) * 32);
  }
}

/* 冒頭リードのバンドは、ヒーロー画像の直下から色が始まる。
   リード文の上はやや詰める */
.lp-section--intro.lp-section--band {
  padding-top: 80px;
  background: linear-gradient(
    to bottom,
    var(--band-color) 0,
    var(--band-color) calc(100% - 90px),
    var(--color-surface) calc(100% - 90px)
  );
}

/* バンド直後の明るいセクションは、色の境界から見出しまでの距離を
   バンド側（120px / 120u）に揃える。前のバンド末尾に素地が90px/90uあるため、
   自身の上余白はその差分だけにする */
.lp-section--band + .lp-section:not(.lp-section--band) {
  padding-top: 30px;
}

/* 最後のバンド（アクセス）は下端で素地に戻さず、フッターまで色を繋げる。
   下は境界がないぶん、コンテンツ〜フッターを下側の基準 150px にする */
#access.lp-section--band {
  padding-bottom: 150px;
  background: linear-gradient(
    to bottom,
    var(--color-surface) 120px,
    var(--band-color) 120px
  );
}

@media (min-width: 1024px) {
  /* デスクトップは境界とコンテンツの距離を上 160u / 下 200u に広げる
     （上 = 境界160u + 内側160u、下 = 内側200u + 境界の外側90u + 次の上余白70u） */
  .lp-section--band {
    padding: calc(var(--u) * 320) calc(var(--u) * 120) calc(var(--u) * 290);
    background: linear-gradient(
      to bottom,
      var(--color-surface) calc(var(--u) * 160),
      var(--band-color) calc(var(--u) * 160),
      var(--band-color) calc(100% - var(--u) * 90),
      var(--color-surface) calc(100% - var(--u) * 90)
    );
  }

  .lp-section--intro.lp-section--band {
    padding-top: calc(var(--u) * 160);
    background: linear-gradient(
      to bottom,
      var(--band-color) 0,
      var(--band-color) calc(100% - var(--u) * 90),
      var(--color-surface) calc(100% - var(--u) * 90)
    );
  }

  .lp-section--band + .lp-section:not(.lp-section--band) {
    padding-top: calc(var(--u) * 70);
  }

  #access.lp-section--band {
    padding-bottom: calc(var(--u) * 200);
    background: linear-gradient(
      to bottom,
      var(--color-surface) calc(var(--u) * 160),
      var(--band-color) calc(var(--u) * 160)
    );
  }
}

/* 英字の小見出しラベル（.r-label） */
.lp-label {
  font-size: 12px;
  line-height: 22px;
  letter-spacing: 2px;
  color: var(--color-text-muted-warm);
  text-transform: uppercase;
}

/* 和文の大見出し（.r-heading）。h2 の UA bold を殺すため weight 400 を明示 */
.lp-heading {
  font-size: 24px;
  font-weight: 400;
  line-height: 40px;
  letter-spacing: 2px;
  color: var(--color-cedar-700);
}

@media (min-width: 1024px) {
  .lp-heading {
    font-size: calc(var(--u) * 52);
    line-height: 1.6;
  }
}

/* リード文（.r-lead） */
.lp-lead {
  font-size: 14px;
  line-height: 28px;
  color: var(--color-cedar-700);
  text-align: justify;
}

@media (min-width: 1024px) {
  .lp-lead {
    font-size: calc(var(--u) * 20);
    line-height: calc(var(--u) * 42);
    max-width: calc(var(--u) * 1290);
  }
}

/* 番号・時刻ラベル（.r-num） */
.lp-num {
  font-size: 20px;
  line-height: 28px;
  letter-spacing: 2px;
  color: var(--color-text-muted-plaster);
  font-style: italic;
  flex: none;
}

@media (min-width: 1024px) {
  .lp-num {
    font-size: calc(var(--u) * 32);
    line-height: 1.5;
  }
}

/* 番号 + 項目見出しの行（.r-item-head） */
.lp-item-head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
}

@media (min-width: 1024px) {
  .lp-item-head {
    gap: calc(var(--u) * 20);
  }
}

/* 項目見出し（.r-item-title） */
.lp-item-title {
  font-size: 16px;
  font-weight: 400;
  line-height: 28px;
  letter-spacing: 2px;
  color: var(--color-cedar-700);
}

@media (min-width: 1024px) {
  .lp-item-title {
    font-size: calc(var(--u) * 26);
    line-height: 1.5;
  }
}

/* 項目本文（.r-item-body）。読ませるテキストはすべて本文スケールに揃える */
.lp-item-body {
  font-size: 14px;
  line-height: 28px;
  color: var(--color-cedar-700);
  text-align: justify;
}

@media (min-width: 1024px) {
  .lp-item-body {
    font-size: calc(var(--u) * 20);
    line-height: calc(var(--u) * 42);
    max-width: calc(var(--u) * 1290);
  }

  /* 開催概要・会社概要の項目見出しは本文と同サイズに揃える */
  #overview .lp-item-title,
  #company .lp-item-title,
  #access .lp-item-title {
    font-size: calc(var(--u) * 20);
  }

  /* 沿革の日付ラベルも本文と同サイズに揃える */
  #history .lp-num {
    font-size: calc(var(--u) * 20);
  }

  /* HERO 導入の開催情報（日時・場所・対象）の本文は項目見出しと同サイズに拡大 */
  .lp-section--intro .lp-item-body {
    font-size: calc(var(--u) * 26);
    line-height: 1.5;
  }
}

/* 注記（.r-note） */
.lp-note {
  font-size: 12px;
  line-height: 22px;
  color: var(--color-text-muted-neutral);
}

.lp-note p + p {
  margin-top: 6px;
}

/* 欧文の日付・時刻は和文よりグリフが小さく見えるため、ひと回り大きくする。
   モバイルは本文自体が小さいぶん、拡大率を強めにする */
.lp-numeric {
  font-size: 1.4em;
}

@media (min-width: 1024px) {
  .lp-numeric {
    font-size: 1.25em;
  }
}

/* 日時の（）内の補足は控えめに */
.lp-paren {
  font-size: 0.9em;
}

/* 開催情報の「日時」に添える訂正注記。dd の中でブロックとして折り返す */
.lp-date-note {
  display: block;
  margin-top: 8px;
  text-align: left;
}

@media (min-width: 1024px) {
  .lp-date-note {
    margin-top: calc(var(--u) * 12);
  }
}

@media (min-width: 1024px) {
  .lp-note {
    font-size: 14px;
    line-height: 26px;
    max-width: calc(var(--u) * 1290);
  }
}

/* テキストリンク（.r-link）。押せることは静かな下線で示す */
.lp-link {
  font-size: 14px;
  line-height: 28px;
  letter-spacing: 2px;
  color: var(--color-cedar-700);
  font-style: italic;
  text-decoration: underline;
  text-underline-offset: 6px;
}

@media (min-width: 1024px) {
  .lp-link {
    font-size: calc(var(--u) * 20);
    line-height: calc(var(--u) * 42);
  }
}

/* 本文中のインラインリンク */
.lp-inline-link {
  color: var(--color-wood-700);
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* ボタン（.r-button）。Optima のメトリクス上、下だけ 1px 詰めて光学中央に */
.lp-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 16px 32px 15px;
  border: 1px solid var(--color-cedar-700);
  font-size: 14px;
  line-height: 24px;
  letter-spacing: 2px;
  color: var(--color-cedar-700);
  text-align: center;
}

.lp-button--primary {
  background-color: var(--color-wood-700);
  border-color: var(--color-wood-700);
  color: var(--color-surface);
}

@media (min-width: 1024px) {
  .lp-button {
    min-width: calc(var(--u) * 320);
    padding: calc(var(--u) * 20) calc(var(--u) * 48) calc(var(--u) * 20 - 1px);
    font-size: 16px;
  }
}

/* 申し込み導線のブロック（ボタン + 締切表記） */
.lp-cta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  width: 100%;
  padding-top: 16px;
}

/* 申し込みフォームのQRコード（CTA の下に説明文つきで置く）。
   モバイルは中央揃え、デスクトップは左揃え */
.lp-qr {
  display: flex;
  flex-direction: column;
  align-items: center;
  align-self: center;
  gap: 8px;
  margin: 8px 0 0;
  text-align: center;
}

.lp-qr img {
  width: 132px;
  height: 132px;
}

@media (min-width: 1024px) {
  .lp-qr {
    align-items: flex-start;
    align-self: flex-start;
    gap: calc(var(--u) * 12);
    margin-top: calc(var(--u) * 12);
    text-align: left;
  }

  .lp-qr img {
    width: calc(var(--u) * 180);
    height: calc(var(--u) * 180);
  }
}

.lp-cta .lp-button {
  width: 100%;
  max-width: 420px;
}

@media (min-width: 1024px) {
  .lp-cta {
    padding-top: calc(var(--u) * 24);
    gap: calc(var(--u) * 20);
  }

  .lp-cta .lp-button {
    width: auto;
    max-width: none;
  }
}

/* ============================================
   汎用リスト（開催概要 / 会社概要 / 沿革 / 進行 / 初公開）
   罫線は使わず、余白とタイポグラフィで区切る（ブランド方針）
   ============================================ */
.lp-list {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 100%;
  padding-top: 8px;
}

.lp-list > * {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* 開催概要・会社概要・沿革の情報表。
   recruit の NewsSection と同じ paper-300 / 1px の罫線で項目を区切る。
   モバイルは縦積み、PC だけ「項目名 / 内容」の2カラムにする。 */
#overview .lp-list,
#company .lp-list,
#history .lp-list {
  gap: 0;
  padding-top: 0;
}

#overview .lp-list > div,
#company .lp-list > div,
#history .lp-list > li {
  padding: 16px 0;
  border-bottom: 1px solid var(--color-paper-300);
}

/* 最上部の罫線はリスト自体ではなく1行目に付ける。
   リビールは行単位のため、リストに付けると最上部の線だけ最初から見えてしまう */
#overview .lp-list > div:first-child,
#company .lp-list > div:first-child,
#history .lp-list > li:first-child {
  border-top: 1px solid var(--color-paper-300);
}

/* バンド背景の上では罫線が沈むため、背景に合わせて1トーン濃くする。
   paper-300 のバンドは paper-700、濃色（--lp-band-bg）のバンドは色相の近い plaster-300 */
#overview.lp-section--band .lp-list > div:first-child,
#company.lp-section--band .lp-list > div:first-child,
#history.lp-section--band .lp-list > li:first-child {
  border-top-color: var(--color-paper-700);
}

#overview.lp-section--band .lp-list > div,
#company.lp-section--band .lp-list > div,
#history.lp-section--band .lp-list > li {
  border-bottom-color: var(--color-paper-700);
}

#overview.lp-section--band-deep .lp-list > div:first-child,
#company.lp-section--band-deep .lp-list > div:first-child,
#history.lp-section--band-deep .lp-list > li:first-child {
  border-top-color: var(--color-plaster-300);
}

#overview.lp-section--band-deep .lp-list > div,
#company.lp-section--band-deep .lp-list > div,
#history.lp-section--band-deep .lp-list > li {
  border-bottom-color: var(--color-plaster-300);
}

@media (min-width: 1024px) {
  .lp-list {
    max-width: calc(var(--u) * 1290);
    gap: calc(var(--u) * 40);
    padding-top: calc(var(--u) * 16);
  }

  .lp-list > * {
    gap: calc(var(--u) * 12);
  }

  #overview .lp-list > div,
  #company .lp-list > div,
  #history .lp-list > li {
    display: grid;
    grid-template-columns: calc(var(--u) * 220) minmax(0, 1fr);
    column-gap: calc(var(--u) * 48);
    /* 項目名と内容は行の高さが異なる（1.5 と 42u）ため、
       start だと項目名が上にずれて見える。1行目の文字のベースラインで揃える */
    align-items: baseline;
    padding: calc(var(--u) * 20) 0;
  }
}

/* 番号つきリスト（進行 / 初公開する情報）は項目間をさらに開ける */
.lp-list--stepped {
  gap: 40px;
}

/* 初公開情報はモバイルの項目間（上下）を他より広めにとる */
#highlights .lp-list--stepped {
  gap: 72px;
}

.lp-list--stepped > * {
  gap: 6px;
}

@media (min-width: 1024px) {
  .lp-list--stepped {
    gap: calc(var(--u) * 64);
  }

  .lp-list--stepped > * {
    gap: calc(var(--u) * 12);
  }
}

/* dl を使う箇所（開催概要・会社概要）の余白リセット */
.lp-list dd {
  margin: 0;
}

/* ============================================
   Background（開催の背景）: 長文の読み下しブロック
   ============================================ */
.lp-narrative {
  display: flex;
  flex-direction: column;
  gap: 28px;
  width: 100%;
  padding-top: 8px;
}

/* MW は原則ウェイト 400 のみ。強調は太らせず、色で差をつける */
.lp-narrative strong {
  font-weight: 400;
  color: var(--color-wood-700);
}

.lp-pull {
  font-size: 18px;
  font-weight: 400;
  line-height: 34px;
  letter-spacing: 2px;
  color: var(--color-wood-700);
}

@media (min-width: 1024px) {
  .lp-narrative {
    gap: calc(var(--u) * 48);
    padding-top: calc(var(--u) * 16);
  }

  .lp-pull {
    font-size: calc(var(--u) * 36);
    line-height: 1.7;
    max-width: calc(var(--u) * 1290);
  }
}

/* ============================================
   Media（3本柱 / トレーラーハウス）
   ============================================ */
.lp-pillars {
  display: flex;
  flex-direction: column;
  gap: 32px;
  width: 100%;
  padding-top: 16px;
}

.lp-figure {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  margin: 0;
}

.lp-figure-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
}

.lp-figure-frame img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.lp-figure figcaption {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.lp-figure-name {
  font-size: 16px;
  line-height: 28px;
  letter-spacing: 2px;
  color: var(--color-cedar-700);
}

.lp-figure-role {
  font-size: 12px;
  line-height: 22px;
  letter-spacing: 2px;
  color: var(--color-text-muted-warm);
}

.lp-figure--wide .lp-figure-frame {
  aspect-ratio: 16 / 9;
}

.lp-figure--wide figcaption {
  font-size: 12px;
  line-height: 22px;
  color: var(--color-text-muted-neutral);
}

.lp-trailer {
  width: 100%;
  padding-top: 24px;
}

/* 初公開情報の各項目に添える写真（文章とセットで見せる）。
   支給画像（3:2）をトリミングせずそのまま見せる */
.lp-highlight-photo {
  aspect-ratio: 3 / 2;
  margin-top: 16px;
}

@media (min-width: 1024px) {
  .lp-pillars {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: calc(var(--u) * 40);
    max-width: calc(var(--u) * 1290);
    padding-top: calc(var(--u) * 24);
  }

  .lp-figure {
    gap: calc(var(--u) * 20);
  }

  .lp-figure-name {
    font-size: calc(var(--u) * 26);
    line-height: 1.5;
  }

  .lp-figure-role {
    font-size: 14px;
    line-height: 24px;
  }

  .lp-trailer {
    max-width: calc(var(--u) * 1290);
    padding-top: calc(var(--u) * 40);
  }

  .lp-highlight-photo {
    margin-top: calc(var(--u) * 24);
    max-width: calc(var(--u) * 1290);
  }

  /* 初公開情報（01〜04）はデスクトップでは2カラムで見せる。
     左右の gap は他より広め */
  #highlights .lp-list--stepped {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: calc(var(--u) * 80) calc(var(--u) * 72);
    max-width: calc(var(--u) * 1290);
  }

  /* カラム内では写真を下端に揃え、テキスト量の差で高さが揃わなくても崩れないようにする */
  #highlights .lp-list--stepped > * {
    height: 100%;
  }

  #highlights .lp-list--stepped .lp-highlight-photo {
    margin-top: auto;
  }

  .lp-figure--wide figcaption {
    font-size: 14px;
    line-height: 26px;
  }
}

/* ============================================
   Speakers（recruit MembersSection の creator-* を踏襲）
   ============================================ */
.lp-speakers {
  display: flex;
  flex-direction: column;
  gap: 48px;
  width: 100%;
  padding-top: 16px;
}

.lp-speaker {
  display: flex;
  flex-direction: column;
  /* recruit MembersSection の .creator-thumb と同じ写真→テキスト間 */
  gap: 24px;
  align-items: flex-start;
  width: 100%;
}

.lp-speaker-image {
  position: relative;
  width: 100%;
  max-width: 320px;
  /* 縦長 3:4 */
  aspect-ratio: 160 / 212;
  overflow: hidden;
}

.lp-speaker-image img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 写真に添えるテキスト群（リビール時に写真より少し遅れて出るまとまり） */
.lp-media-text {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.lp-speaker-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
}

.lp-speaker-role {
  font-size: 12px;
  line-height: 22px;
  letter-spacing: 2px;
  color: var(--color-text-muted-warm);
}

.lp-speaker-name {
  font-size: 16px;
  font-weight: 400;
  line-height: 28px;
  letter-spacing: 2px;
  color: var(--color-cedar-700);
}

.lp-speaker-yomi {
  font-size: 12px;
  line-height: 22px;
  color: var(--color-text-muted-neutral);
}

.lp-speaker-bio {
  padding-top: 8px;
}

/* MC は登壇者の下に1名だけ置く。写真の扱いは登壇者と同一にする */
.lp-mc-label {
  padding-top: 32px;
}

@media (min-width: 1024px) {
  .lp-speakers {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: calc(var(--u) * 40);
    max-width: calc(var(--u) * 1290);
    padding-top: calc(var(--u) * 24);
  }

  .lp-speaker {
    gap: calc(var(--u) * 32);
  }

  .lp-speaker-image {
    max-width: calc(var(--u) * 380);
    aspect-ratio: 300 / 400;
  }

  .lp-speaker-text {
    gap: calc(var(--u) * 7);
  }

  .lp-speaker-name {
    font-size: calc(var(--u) * 26);
    line-height: 1.5;
  }

  .lp-speaker-role,
  .lp-speaker-yomi {
    font-size: 14px;
    line-height: 24px;
  }

  .lp-speaker-bio {
    padding-top: calc(var(--u) * 12);
  }

  .lp-mc-label {
    padding-top: calc(var(--u) * 80);
  }

  /* MC は1名だが、登壇者と同じ3カラムの1列目に置いて写真サイズを揃える */
  .lp-speakers--single {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ============================================
   SNS（YouTube / Instagram）
   ============================================ */
.lp-sns {
  display: flex;
  flex-direction: column;
  gap: 64px;
  width: 100%;
  padding-top: 16px;
}

.lp-sns-col {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
}

.lp-sns-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.lp-sns-id {
  display: flex;
  align-items: center;
  gap: 12px;
}

.lp-sns-icon {
  width: 24px;
  height: 24px;
  flex: none;
  display: flex;
  align-items: center;
}

.lp-sns-icon img {
  width: 100%;
  height: auto;
}

.lp-sns-name {
  font-size: 16px;
  line-height: 24px;
  letter-spacing: 2px;
  color: var(--color-cedar-700);
}

.lp-sns-handle {
  font-size: 12px;
  line-height: 22px;
  color: var(--color-text-muted-neutral);
}

.lp-videos {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.lp-video {
  display: grid;
  grid-template-columns: 132px 1fr;
  gap: 16px;
  align-items: start;
}

.lp-video-thumb {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

.lp-video-thumb img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.lp-video-title {
  font-size: 14px;
  line-height: 24px;
  color: var(--color-cedar-700);
}

.lp-video-series {
  margin-top: 4px;
  font-size: 12px;
  line-height: 22px;
  color: var(--color-text-muted-neutral);
}

.lp-ig-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.lp-ig-tile {
  display: block;
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
}

.lp-ig-tile img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (min-width: 1024px) {
  .lp-sns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: calc(var(--u) * 80);
    max-width: calc(var(--u) * 1290);
    padding-top: calc(var(--u) * 24);
    align-items: start;
  }

  .lp-sns-col {
    gap: calc(var(--u) * 32);
  }

  .lp-sns-icon {
    width: calc(var(--u) * 32);
    height: calc(var(--u) * 32);
  }

  .lp-sns-name {
    font-size: calc(var(--u) * 26);
    line-height: 1.5;
  }

  .lp-sns-handle,
  .lp-video-series {
    font-size: 14px;
    line-height: 24px;
  }

  .lp-videos {
    gap: calc(var(--u) * 32);
  }

  .lp-video {
    grid-template-columns: calc(var(--u) * 240) 1fr;
    gap: calc(var(--u) * 24);
  }

  .lp-video-title {
    font-size: calc(var(--u) * 20);
    line-height: calc(var(--u) * 34);
  }

  .lp-ig-grid {
    gap: calc(var(--u) * 12);
  }
}

/* ============================================
   Contact / Final CTA
   ============================================ */
.lp-contact-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
  padding-top: 8px;
}

.lp-contact-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.lp-contact-label {
  font-size: 12px;
  line-height: 22px;
  letter-spacing: 2px;
  color: var(--color-text-muted-warm);
  text-transform: uppercase;
}

.lp-contact-value {
  font-size: 16px;
  line-height: 28px;
  letter-spacing: 2px;
  color: var(--color-cedar-700);
}

.lp-contact-value a {
  text-decoration: underline;
  text-underline-offset: 6px;
}

/* フォーム URL 確定前の案内。CTA のアンカー着地先 */
.lp-form-pending {
  scroll-margin-top: 80px;
}

@media (min-width: 1024px) {
  .lp-contact-list {
    max-width: calc(var(--u) * 1290);
    gap: calc(var(--u) * 32);
    padding-top: calc(var(--u) * 16);
  }

  .lp-contact-item {
    gap: calc(var(--u) * 8);
  }

  .lp-contact-label {
    font-size: 14px;
    line-height: 24px;
  }

  .lp-contact-value {
    font-size: calc(var(--u) * 24);
    line-height: 1.6;
  }

  .lp-form-pending {
    scroll-margin-top: calc(var(--u) * 120);
  }
}

/* 最終セクション → フッター間の余白（Philosophy のページ末尾 200px を踏襲） */
@media (min-width: 1024px) {
  }

/* ============================================
   Footer（ブランドサイト Footer.astro の配色・余白）
   ============================================ */
.lp-footer {
  width: 100%;
  background-color: var(--color-paper-700);
  padding: 44px 48px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 32px;
  color: var(--color-cedar-700);
}

.lp-footer-logo img {
  width: 140px;
  height: 18px;
}

.lp-footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  font-size: 14px;
  line-height: 22px;
  letter-spacing: 1.5px;
}

.lp-footer-body {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.lp-footer-note {
  font-size: 12px;
  line-height: 22px;
  color: var(--color-cedar-700);
}

@media (min-width: 1024px) {
  .lp-footer {
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    gap: 120px;
    padding: 80px 88px;
  }

  .lp-footer-logo img {
    width: 201px;
    height: 26px;
  }

  .lp-footer-body {
    display: flex;
    flex-direction: column;
    gap: 48px;
    flex: 1;
  }

  .lp-footer-links {
    gap: 52px;
  }
}

/* ============================================
   モーションを抑える設定（OS の指定を尊重）
   ============================================ */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .js .reveal,
  .js .reveal.visible {
    opacity: 1;
    filter: none;
    transition: none;
  }

  .js [data-reveal-media] img,
  .js [data-reveal-media].visible img,
  .js [data-reveal-media] figcaption,
  .js [data-reveal-media].visible figcaption,
  .js [data-reveal-media] .lp-media-text,
  .js [data-reveal-media].visible .lp-media-text {
    opacity: 1;
    filter: none;
    transition: none;
  }

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