/* LP 専用スタイル。デザイントークンは frontend/src/index.css の :root と同じ値を保つこと。
   LP は静的 HTML、React アプリは Vite バンドルなので CSS ファイルは別だが、色・フォントは統一する。 */

:root {
  --bg-top: #0e1a18;
  --bg-bottom: #070d0c;
  --ink: #eaf4f1;
  --muted: #9bb2ac;
  --brand: #2cb1a3;
  --on-brand: #04211e;
  --accent: #45d3c2;
  --accent-hover: #55dccb;
  --accent-ring: rgba(69, 211, 194, 0.45);
  --accent-tint: rgba(69, 211, 194, 0.14);
  --surface: rgba(255, 255, 255, 0.05);
  --line: rgba(234, 244, 241, 0.12);
  --radius: 18px;
  --font-display: "Syne", sans-serif;
  --font-body: "Figtree", sans-serif;
  color-scheme: dark;
  color: var(--ink);
  font-family: var(--font-body);
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
}

html {
  background: var(--bg-bottom);
}

/*
 * 横スクロールの保険。**原因を消すのが本筋**（はみ出す要素を作らない）
 * やけど、何か足したときに画面幅を超えても LP 全体が横に動かへんように
 * しておく。iPhone で1度やらかしている（`.landing-header-end` の
 * `flex-shrink: 0` でヘッダーが 30px ほどはみ出した）。
 *
 * **`hidden` ではなく `clip` を使う。** `hidden` は body にスクロール
 * コンテナを作るので、iOS で `position: sticky` や `100vh` の挙動に
 * 影響しうる。`clip` はスクロールコンテナを作らない。
 *
 * 作品ストリップ（`.landing-strip-scroll`）の横スクロールには干渉しない
 * （あちらは自前の `overflow-x: auto` を持つ独立したスクロールコンテナ）。
 */
html,
body {
  overflow-x: clip;
}

body {
  min-width: 320px;
  background:
    radial-gradient(
      ellipse 80% 50% at 10% -10%,
      rgba(44, 177, 163, 0.3) 0%,
      transparent 55%
    ),
    radial-gradient(
      ellipse 70% 45% at 100% 0%,
      rgba(41, 120, 156, 0.18) 0%,
      transparent 50%
    ),
    linear-gradient(180deg, var(--bg-top), var(--bg-bottom));
}

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

.landing-shell {
  width: min(880px, calc(100% - 2rem));
  margin: 0 auto;
  padding: 1.5rem 0 4rem;
}

/*
 * 並びは「ブランド → 言語切替 →（余白）→ ギャラリー → Googleではじめる」。
 * `space-between` にしないのは、子が3つあると言語切替が真ん中へ飛ぶため。
 * 左寄せにして `.landing-header-end` の `margin-left: auto` で右へ押す。
 */
.landing-header {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 1rem;
  margin-bottom: 2.5rem;
}

.landing-brand {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 6vw, 2.75rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
  white-space: nowrap;
}

/*
 * ヘッダー右側のまとまり（公開ギャラリー・ログイン）。
 *
 * **flex-shrink を 0 にしない。** 0 にすると親から与えられる幅が中身の
 * max-content（2つのボタンを1行に並べた合計）に固定されるので、`flex-wrap`
 * が効かずヘッダーが画面幅を超える。**そうなると LP 全体が横スクロール
 * できてしまう**（iPhone 16 の 393px で実際に起きた）。`min-width: 0` は、
 * flex アイテムの自動最小サイズ（min-content）で下限が張られないようにするため。
 *
 * `margin-left: auto` で右端へ押す（親を `flex-start` にしてあるので、
 * これが無いと言語切替のすぐ隣に寄る）。
 *
 * 中のボタン（`.landing-header-cta` / `.landing-ghost-button`）は
 * `flex-shrink: 0` のままにする。あちらは潰すのではなく折り返させたいので。
 */
.landing-header-end {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.6rem;
  margin-left: auto;
  min-width: 0;
}

.landing-header-cta {
  flex-shrink: 0;
}

/*
 * ヘッダーのボタンのラベルは、狭い画面だけ短い表記へ差し替える
 * （「公開ギャラリー」→「ギャラリー」）。3つのボタンの合計幅が画面幅を
 * 超えるとヘッダーが何行にも折り返して、ファーストビューのヒーローが
 * 下がってしまうため。日英の出し分け（`data-lp`）の内側に置くので、
 * 親が消えていれば中も出ない。
 */
.landing-header-label-short {
  display: none;
}

/*
 * 言語切替。**ブランドのすぐ右（ヘッダーの左側）に置く。**
 * 押す回数が極端に少ない（1回押せば `localStorage` に保存され、未選択でも
 * `navigator.languages` で自動判定するので日本語の人は一度も押さない）ので、
 * 視線の終点である右端は主導線「Googleではじめる」に譲る。
 * ログイン後アプリ（`.app-lang`）もブランドの隣なので、位置が揃う。
 */
.landing-lang {
  display: inline-flex;
  flex: none;
  border: 1px solid var(--line);
  border-radius: 999px;
  overflow: hidden;
  background: var(--surface);
}

/*
 * ラベルは「JA」「EN」の2文字で、ボタンは 32×28px。
 *
 * **WCAG 2.2 の 2.5.8（Target Size Minimum, AA）の下限 24px は超えている。**
 * 主導線（`min-height: 44px`）より意図的に小さくして、めったに押さない
 * ものがヘッダーで幅と目を取らないようにする。**24px を下回らせない。**
 */
.landing-lang a,
.landing-lang button {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  margin: 0;
  border: 0;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 0.2rem 0.45rem;
  min-height: 28px;
  cursor: pointer;
  text-decoration: none;
}

html[lang="ja"] .landing-lang [data-set-lang="ja"],
html[lang="en"] .landing-lang [data-set-lang="en"] {
  background: var(--accent-tint);
  color: var(--accent);
}

.landing-lang a:focus-visible,
.landing-lang button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

html[lang="ja"] [data-lp="en"],
html[lang="en"] [data-lp="ja"] {
  display: none;
}

.landing-main {
  display: grid;
  gap: 2.75rem;
  min-height: 0;
}

/* ヒーローとヒーロー直下のストリップ（「ギャラリーへ →」）だけ隙間を狭める */
.landing-hero-group {
  display: grid;
  gap: 1.1rem;
}

.landing-hero {
  position: relative;
  overflow: hidden;
  padding: 2.25rem 1.75rem 2rem;
  border: 1px solid var(--line);
  border-radius: 28px;
  background:
    radial-gradient(
      120% 130% at 0% 0%,
      rgba(44, 177, 163, 0.32) 0%,
      transparent 58%
    ),
    radial-gradient(
      90% 120% at 100% 10%,
      rgba(69, 211, 194, 0.14) 0%,
      transparent 55%
    ),
    var(--surface);
  backdrop-filter: blur(10px);
}

.landing-hero::after {
  content: "";
  position: absolute;
  right: -3.5rem;
  bottom: -5rem;
  width: 14rem;
  height: 14rem;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(44, 177, 163, 0.28) 0%,
    transparent 68%
  );
  pointer-events: none;
}

.landing-hero > * {
  position: relative;
}

.landing-hero-tagline {
  margin: 0 0 0.6rem;
  font-family: var(--font-display);
  font-size: clamp(1.85rem, 6vw, 2.75rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1.15;
}

.landing-hero-subline {
  display: block;
  margin-top: 0.35rem;
  font-size: clamp(1rem, 3.5vw, 1.25rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.35;
}

.landing-hero-mark {
  background-image: linear-gradient(
    transparent 70%,
    rgba(44, 177, 163, 0.5) 70%,
    rgba(44, 177, 163, 0.5) 94%,
    transparent 94%
  );
}

/*
 * 訴求文と主 CTA をまとめる器。**720px 以下では縦積みで、`width: max-content` の
 * grid にすることで列の幅が訴求文の max-content になり、`width: 100%` の
 * ボタンがそこへ伸びる**（＝ボタンの幅が訴求文に自動で揃う）。
 *
 * **固定値で揃えない**のは、訴求文の幅が文言で変わるから（日本語 411px /
 * 英語 437px。実測）。`max-width: 100%` があるので、狭い画面では両方とも幅
 * いっぱいになる。訴求文とボタンの隙間は `gap` が持つ（だから
 * `.landing-hero-offer` の margin-bottom は 0 で、上の余白だけ器の
 * margin-top へ移してある）。
 *
 * **721px 以上ではこの器を横並びの flex にして、訴求文とボタンで幅いっぱいを
 * 埋める**（下のメディアクエリ）。`gap` と `margin-top` はそのまま効く
 */
.landing-hero-cta {
  display: grid;
  width: max-content;
  max-width: 100%;
  gap: 0.9rem;
  margin-top: 0.25rem;
}

/*
 * 訴求文…かつては丸ピルやったもの。**いまは「左にアクセント線を引いた注記」で、
 * 枠も塗りも角丸も持たない。**
 *
 * **2026-09-19 に丸ピル（`border-radius: 999px` ＋ 1px の枠 ＋ `--accent-tint` の
 * 塗り）からこの形へ変えた。** 同日に下段を横1行にして**主 CTA の真横に並べた**ので、
 * 「枠 ＋ 塗り ＋ 角丸 ＋ 太字」という**ボタンそのものの見た目**が隣の本物のボタンと
 * 対になり、**「押せないボタン」に見えていた**（高さも 38.4px 対 44px でほぼ同じ）。
 * 縦に積んでいた頃は離れていたので気づきにくかった。
 *
 * **押せるものと押せないものの区別を、色ではなく形で付ける。** 見た目の語彙は
 * LP に既にあるものを借りている（`.landing-example` の `border-left` ＋
 * `.landing-feature-note` のアクセント色の文字）。**左だけ線・右は角なしの非対称**
 * なので、ボタンと読み違えようがない（ボタンは必ず四辺が対称）。
 *
 * **線と文字はどちらも `--accent`（明るいティール）。`--brand` を使わない。**
 * あれは主 CTA の塗りと同じ色なので、線に使うと隣のボタンと同じ仲間に見えて
 * 元の問題へ戻る。ルールどおり「文字・アイコン・リンクは `--accent`」に従う。
 *
 * **縦の padding は残す**（線の高さを 38px ほど確保する）。文字の高さぴったりだと
 * 線が 22px しかなく、隣の 44px のボタンに対して貧相に見える
 */
.landing-hero-offer {
  display: inline-block;
  max-width: 100%;
  margin: 0;
  /* 左は線 3px ＋ 余白。右は詰めない（枠が無いので余白を取る意味がない） */
  padding: 0.45rem 0 0.45rem 0.9rem;
  border-left: 3px solid var(--accent);
  color: var(--accent);
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.45;
}

/*
 * ファーストビューの主 CTA。デザインは `.auth-login-button` を継承し**幅だけ**
 * 上書きする（色や形を上書きすると、ヘッダー・ここ・末尾 CTA の3つで見た目が散る）。
 * `width: 100%` は上の `.landing-hero-cta` が与える幅（720px 以下は訴求文の幅、
 * 721px 以上は行の残り幅）へ伸ばすためで、**ここに固定値を置くと揃わなくなる**。
 * ヒーローの中身は左揃えなので `.landing-midcta` のようなセンタリングはしない。
 *
 * **セレクタは `.auth-login-button` と重ねて詳細度を2クラスにしてある。**
 * `.auth-login-button` の定義がこの下（このファイルの後方）にあるので、クラス1つでは
 * **同じ詳細度の後勝ちで負ける**（メディアクエリは詳細度を上げない）。2026-09-19 に
 * 721px 以上の正方形でこれを踏み、`border-radius` / `padding` / `font-size` /
 * `line-height` の4つが効いていなかった（正方形そのものは同日やめたが、**また
 * 形を上書きしたくなったときに同じ穴を踏まないよう2クラスのまま残してある**）
 */
.landing-hero-action {
  margin: 0;
}

.auth-login-button.landing-hero-button {
  width: 100%;
}

/*
 * 721px 以上では**下段（訴求文＋主 CTA）を横1行にして、ボタンを行の残り幅へ
 * 伸ばして幅いっぱいを埋める**。h1 と subline が中身の幅いっぱい（PC で 822px）まで
 * 伸びるのに対して下段が 428px しかないと、右下に 395 × 97px の空きが残って
 * 据わりが悪いため。
 *
 * **2026-09-19 に「2カラム＋正方形のボタン（170px）」から差し替えた。** あれは
 * 空きを右の列で埋める案やったが、2つ問題があった。
 *
 * - **「カタチに。」の右に 145px の穴ができる。** テキスト列 624px（822 − 28 − 170）に
 *   対して見出しは約 507px（44px × 12文字 − letter-spacing）しかない
 * - **ヒーローが 43px 無駄に縦へ伸びる。** 左の列（h1 + subline + 訴求文）は約 127px
 *   しかないのに `height: 170px` のボタンが高さを決めてしまう。ファーストビューなので
 *   そのぶん損をする
 *
 * **穴を右のボタンで埋めきるのは無理。** 「。」の直後まで寄せるにはボタン幅が
 * 約 280px 必要で、テキスト列が 514px になって日本語（507px）が残り 7px のギリギリ、
 * 英語（`Give shape to your dreams.` で約 570px）は確実に2行へ折り返す。**穴の正体は
 * 「隣に物があること」なので、埋めるより同じ行から物をどかす**ほうが筋が通る。
 * 横長に戻るとヘッダー・末尾 CTA と形が揃うという利点もある。
 *
 * **`min-width` を置かない。** `white-space: nowrap` のボタンは自分の文字幅より
 * 細くならないので下限は要らず、それでも入らないときは `flex-wrap` が次の行へ落とす
 * （＝720px 以下と同じ縦積み）。**`min-width` を置くと、伸縮で決まった幅より大きく
 * clamp されてはみ出す**（折り返しの判定は clamp より前に済んでいるので wrap では
 * 救えない）。721px のとき中身は約 631px で、英語の訴求文 437px ＋ gap 14px ＋
 * ボタンの content 約 150px = 601px。余りをボタンが吸って 180px になるので、
 * `min-width: 14rem`（224px）を置くと 44px はみ出す（丸ピルやった頃は訴求文が
 * 453px あり、ボタンが 164px しか取れなかった。**枠を外して 16px 稼いだ**）
 *
 * **`align-items` は `center`。** flex の既定（`stretch`）だと訴求文がボタンの高さ
 * （44px）まで伸びて、左の線だけ間延びして見える
 *
 * 境目の 721px は `.landing-points` / `.landing-price-grid` の1カラム化
 * （720px 以下）と同じ。LP の中で折り返す幅を揃えてある
 */
@media (min-width: 721px) {
  .landing-hero-cta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    /* max-content を解除して行の幅いっぱいを使う */
    width: auto;
  }

  .landing-hero-action {
    flex: 1 1 auto;
  }
}

.auth-login-button {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  border: 1px solid var(--brand);
  background: var(--brand);
  color: var(--on-brand);
  font: inherit;
  font-size: 0.95rem;
  font-weight: 700;
  padding: 0.55rem 1.1rem;
  border-radius: var(--radius);
  white-space: nowrap;
  cursor: pointer;
  text-decoration: none;
  box-shadow: 0 8px 24px rgba(44, 177, 163, 0.25);
}

.auth-login-button:hover {
  border-color: var(--accent-hover);
  background: var(--accent-hover);
}

.auth-login-button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/*
 * 「むずかしいことは、いりません」と「できること」のあいだに置く、
 * ヘッダーと同じ見た目のログインボタン。横幅だけ広げてセンタリングする
 * （デザイン自体は `.auth-login-button` を継承し、上書きしない）
 */
.landing-midcta {
  margin: 0;
  text-align: center;
}

.landing-midcta-button {
  width: min(420px, 100%);
}

/* ログインの隣に置くギャラリーへの導線。塗りは主導線に譲るが、
   枠と字はアクセント色にして、見落としにくい二次ボタンにする */
.landing-ghost-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  flex-shrink: 0;
  border: 2px solid var(--accent);
  border-radius: var(--radius);
  background: var(--accent-tint);
  color: var(--accent);
  font-size: 0.95rem;
  font-weight: 700;
  padding: 0.55rem 1.1rem;
  white-space: nowrap;
  text-decoration: none;
  box-shadow: 0 8px 24px rgba(69, 211, 194, 0.16);
}

.landing-ghost-button:hover {
  border-color: var(--accent-hover);
  background: rgba(69, 211, 194, 0.24);
  color: var(--accent-hover);
}

.landing-ghost-button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.landing-section {
  scroll-margin-top: 1rem;
}

.landing-section-title {
  margin: 0 0 1rem;
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 4vw, 1.65rem);
  font-weight: 700;
  letter-spacing: -0.02em;
}

.landing-section-lead {
  margin: -0.35rem 0 1.25rem;
  color: var(--muted);
  line-height: 1.6;
}

.landing-section-more {
  margin: 1.25rem 0 0;
  text-align: center;
}

.landing-section-more a {
  color: var(--accent);
  font-size: 0.95rem;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.landing-section-more a:hover {
  color: var(--accent-hover);
}

/* ------------------------------------------------------------------ */
/* ヒーロー直下の作品ストリップ                                          */
/* ------------------------------------------------------------------ */
/*
 * ファーストビューで実物を見せるための横1列。見出しは持たない。導線は
 * 右上の「公開ギャラリーへ →」と、横スクロール一番右の .landing-strip-more。
 * 作品カードの中身（.landing-gallery-card 以下）はフッター下のギャラリーと
 * 共通で、大きさだけここで決める。
 * スクロールは .landing-strip-scroll が持つ（番兵を ul の外に置くため）。
 */

.landing-strip {
  display: grid;
  gap: 0.5rem;
}

.landing-strip-link {
  margin: 0;
  text-align: right;
}

.landing-strip-link a {
  color: var(--accent);
  font-size: 0.95rem;
  font-weight: 600;
}

.landing-strip-link a:hover {
  color: var(--accent-hover);
}

.landing-strip-link a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.landing-strip-scroll {
  display: flex;
  /* 末尾の番兵を横に置く。ul と番兵が横並びのままスクロールする */
  align-items: stretch;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  /* iOS で慣性スクロールを効かせる */
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

.landing-strip-list {
  display: flex;
  /* flex の子なので、縮ませずに中身の幅を保たせる（縮むとスクロールしない） */
  flex: 0 0 auto;
  gap: 1px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.landing-strip-list li {
  flex: 0 0 auto;
  scroll-snap-align: start;
  /*
   * 画面幅に応じて伸ばすが、右端のカードが少し切れて見える大きさに収める
   * （横に続きがあると気づいてもらうため）。カードの中の
   * .landing-gallery-media が aspect-ratio: 3 / 4 で高さを先に確保するので、
   * 画像が遅れて届いてもレイアウトがガタつかない。
   *
   * 720px 以下はこの値のまま。スマホで上限を上げるとストリップが縦に伸びて、
   * ヒーローの「Googleではじめる」がファーストビューから落ちる。
   * PC（721px 以上）の上限は下のメディアクエリ。
   */
  width: clamp(168px, 46vw, 232px);
}

/*
 * PC だけカードを大きくする。境目の 721px はヒーロー下段・料金の
 * 1カラム化（720px 以下）と揃えてある。
 *
 * シェルは最大 880px。320px だと 2枚＋3枚目の約74%が見えて、右端は
 * 切れたまま残る。721px（シェル約 689px）では下限 280px で、2枚＋
 * 3枚目の約45%。34vw はそのあいだを埋める。1枚を画面いっぱいにしない。
 */
@media (min-width: 721px) {
  .landing-strip-list li {
    width: clamp(280px, 34vw, 320px);
  }
}

/*
 * 横スクロールの一番右。作品カードと同じ 3:4 にして並びを崩さない
 * （比を変えるときは .landing-gallery-media と一緒に直す）。作品が
 * 1枚でも並んだときだけ JS が足す。
 *
 * 写真が並んだ列の終端に見えるように、黒地にティールの放射グラデーションを
 * 敷き、丸い矢印＋ラベルを中央に置く。矢印は三角にしない（隣の動画カードの
 * 再生ボタンが「丸の中に三角」なので、同じ形にすると動画と見分けが付かない）。
 */
.landing-strip-more {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  width: 100%;
  height: 100%;
  aspect-ratio: 3 / 4;
  padding: 0.75rem;
  overflow: hidden;
  border: 1px solid var(--line);
  background:
    radial-gradient(
      circle at 50% 42%,
      rgba(69, 211, 194, 0.22),
      transparent 68%
    ),
    #000;
  color: var(--ink);
  text-align: center;
  transition:
    border-color 200ms ease,
    background 200ms ease;
}

.landing-strip-more::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 2px;
  background: linear-gradient(
    to bottom,
    transparent,
    var(--accent),
    transparent
  );
  opacity: 0.5;
  transition: opacity 200ms ease;
}

.landing-strip-more-arrow {
  position: relative;
  display: block;
  width: 40px;
  height: 40px;
  border: 1px solid var(--accent-ring);
  border-radius: 999px;
  transition:
    transform 200ms ease,
    background 200ms ease,
    border-color 200ms ease;
}

.landing-strip-more-arrow::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 9px;
  height: 9px;
  /* 右上の2辺だけ描いて 45 度回すと山かっこになる */
  border-top: 2px solid var(--accent);
  border-right: 2px solid var(--accent);
  transform: translate(-62%, -50%) rotate(45deg);
}

.landing-strip-more-label {
  color: var(--accent);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.35;
}

.landing-strip-more:hover {
  border-color: var(--accent);
}

.landing-strip-more:hover::before {
  opacity: 1;
}

.landing-strip-more:hover .landing-strip-more-arrow {
  transform: translateX(4px);
  background: rgba(69, 211, 194, 0.24);
  border-color: var(--accent);
}

.landing-strip-more:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

@media (prefers-reduced-motion: reduce) {
  .landing-strip-more,
  .landing-strip-more::before,
  .landing-strip-more-arrow {
    transition: none;
  }
}

/* 追い読みの合図。横スクロールの末尾に置く（高さは行に合わせる） */
.landing-strip-sentinel {
  flex: 0 0 1px;
  align-self: stretch;
}

.landing-points {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.85rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.landing-point {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  padding: 1.15rem 1.1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  backdrop-filter: blur(8px);
}

.landing-point-icon {
  display: grid;
  flex: none;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 14px;
  background: var(--accent-tint);
  color: var(--accent);
}

.landing-point-body {
  display: grid;
  gap: 0.25rem;
  min-width: 0;
}

.landing-point-title {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.landing-point-desc {
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1.5;
}

.landing-features {
  display: grid;
  gap: 1.5rem;
}

.landing-feature {
  padding: 1.5rem 1.35rem;
  border: 1px solid var(--line);
  border-radius: calc(var(--radius) + 4px);
  background: var(--surface);
  backdrop-filter: blur(8px);
}

.landing-feature-title {
  margin: 0 0 0.5rem;
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.landing-feature-desc {
  margin: 0 0 1rem;
  color: var(--muted);
  line-height: 1.6;
}

.landing-feature-note {
  margin: 0 0 1rem;
  color: var(--accent);
  font-size: 0.95rem;
  font-weight: 600;
}

.landing-example {
  margin: 0 0 1rem;
  padding: 0.9rem 1rem;
  border-left: 3px solid var(--brand);
  border-radius: 0 12px 12px 0;
  background: rgba(69, 211, 194, 0.1);
}

.landing-example-label {
  display: block;
  margin-bottom: 0.35rem;
  color: var(--accent);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.landing-example p {
  margin: 0;
  font-size: 0.98rem;
  line-height: 1.55;
}

.landing-samples {
  display: grid;
  gap: 0.75rem;
}

.landing-sample {
  margin: 0;
}

.landing-sample-caption {
  margin-bottom: 0.4rem;
  color: var(--muted);
  font-size: 0.85rem;
  font-weight: 600;
}

/* 素材は 3:4 のたて長。幅いっぱいに広げると1枚で画面を占領するので高さで頭打ちにする */
.landing-sample-media {
  display: block;
  width: auto;
  max-width: 100%;
  max-height: 55vh;
  max-height: max(320px, 55svh);
  margin-inline: auto;
  border-radius: calc(var(--radius) - 2px);
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.04);
  object-fit: contain;
}

/*
 * 顔の差し替えは「元になる写真・差し替える顔・できあがり」を並べて見せるので、
 * 1枚ずつの縦積みではなく横並びにする。3枚を縦に積むと LP が伸びすぎるうえ、
 * 何が何に変わったのかが読み取りづらい。狭い画面でも3列を保つ（1枚が小さく
 * なるだけ）。
 */
.landing-samples-row {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: start;
  gap: 0.5rem;
}

.landing-samples-row .landing-sample-media {
  width: 100%;
  /*
   * height: auto が要る。max-height を外すと、img の height 属性（1776）が
   * そのまま高さになって縦に伸びる（aspect-ratio が効かない）
   */
  height: auto;
  max-height: none;
}

/* 横並びの1枚は狭いので、キャプションは折り返さず小さめに出す */
.landing-samples-row .landing-sample-caption {
  font-size: 0.78rem;
  line-height: 1.35;
  text-align: center;
}

.landing-steps {
  display: grid;
  gap: 0.85rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.landing-step {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.15rem 1.25rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}

.landing-step-num {
  display: grid;
  flex: none;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background: var(--brand);
  color: var(--on-brand);
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 800;
}

.landing-step-body {
  display: grid;
  gap: 0.2rem;
  min-width: 0;
}

.landing-step-title {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 700;
}

.landing-step-desc {
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1.5;
}

.landing-price-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.85rem;
}

.landing-price-card {
  display: grid;
  gap: 0.25rem;
  padding: 1.15rem 1.2rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}

.landing-price-card-sale {
  border-color: var(--accent-ring);
  background: linear-gradient(180deg, var(--accent-tint), var(--surface));
}

/*
 * 動画の料金カードだけ、ログイン後のホームの動画カード
 * （`frontend/src/App.css` の `.home-choice-out-video`）と同じ見た目に寄せる。
 * 「つくるものが画像か動画か」をログイン前後で同じ手がかりで読めるようにするため。
 *
 * **値は `.home-choice-out-video` の写し。** 変えるときは両方を一緒に直す
 * （LP とアプリで動画の地色が食い違うと、この対比の意味が消える）。
 *
 * **`.landing-price-card-sale` より後ろに置く。** あちらも地色と枠を上書きするので、
 * 同じ詳細度では後ろが勝つ。いま値下げ中の枠は無いので当たらないが、また値下げを
 * 始めたときに「動画である」ことの手がかりが消えないようにする。
 */
.landing-price-card-video {
  border-color: rgba(44, 177, 163, 0.3);
  background:
    linear-gradient(
      160deg,
      rgba(44, 177, 163, 0.14) 0%,
      rgba(44, 177, 163, 0.05) 60%,
      transparent 100%
    ),
    var(--surface);
}

/*
 * 動画のアイコンだけ丸にする。**色だけに頼らないための形の手がかり。**
 * ブランド色もアクセント色もティールなので、地色の差は色覚によっては読めない。
 * ログイン後のホームと同じで「動画は丸／画像は角丸の四角」で分ける
 * （あちらの `.home-choice-out-video .home-choice-icon`）。
 *
 * **`.landing-price-icon` の基本形（角丸の四角）より後ろに置く。**
 * 同じ詳細度なら後ろが勝つが、こちらはクラス2つで詳細度も上なので順序に依らない
 */
.landing-price-card-video .landing-price-icon {
  border-radius: 50%;
  background: rgba(44, 177, 163, 0.24);
  box-shadow: inset 0 0 0 1px rgba(44, 177, 163, 0.32);
}

/*
 * アイコンとラベルの横一列。ログイン後のホームのカードと同じ
 * 「アイコン左・見出し右」の並びにする（`.home-choice` の既定レイアウト）。
 * カード本体は縦積みの grid なので、この行だけ flex で横に並べる
 */
.landing-price-head {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin-bottom: 0.35rem;
  /* 「動画をつくる（お手軽）」が2行になっても、アイコンが縦に伸びないように */
  min-width: 0;
}

/*
 * アイコンの枠。大きさ・地色・内枠・色はログイン後の `.home-choice-icon` の写しで、
 * 基本形は**画像側の角丸の四角**。変えるときは両方を一緒に直す
 *
 * `flex: 0 0 auto` はラベルが長いときに潰されないようにするためのもの
 */
.landing-price-icon {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 14px;
  background: var(--accent-tint);
  /* 淡い内枠を足して、地の薄い塗りだけでも角が立って見えるようにする */
  box-shadow: inset 0 0 0 1px rgba(69, 211, 194, 0.18);
  color: var(--accent);
}

.landing-price-badge {
  justify-self: start;
  margin-bottom: 0.1rem;
  padding: 0.15rem 0.6rem;
  border-radius: 999px;
  background: var(--brand);
  color: var(--on-brand);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.landing-price-label {
  color: var(--muted);
  font-size: 0.9rem;
  font-weight: 600;
}

.landing-price-was {
  color: var(--muted);
  font-size: 0.88rem;
  font-weight: 600;
}

/*
 * 金額と単位（/1枚・/5秒）の横一列。単位は「10円」の直後に添えるほうが
 * 一続きの表示として読めるので、下の行へ落とさない
 *
 * `align-items: baseline` で「10」の文字の下端に単位を揃える
 * （`center` だと 1.85rem の数字に対して単位が中央へ浮いて据わりが悪い）
 */
.landing-price-amount {
  display: flex;
  align-items: baseline;
  gap: 0.3rem;
  /* 数字が大きいので、行の上下に少し余白を取る */
  margin: 0.1rem 0;
}

.landing-price-value {
  color: var(--accent);
  font-family: var(--font-display);
  font-size: 1.85rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
}

.landing-price-currency {
  margin-left: 0.15rem;
  font-size: 1rem;
  font-weight: 700;
}

.landing-price-approx {
  color: var(--muted);
  font-size: 0.88rem;
  font-weight: 600;
}

.landing-price-unit {
  color: var(--muted);
  font-size: 0.9rem;
}

.landing-price-note {
  margin: 1rem 0 0;
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1.55;
}

.landing-faq {
  display: grid;
  gap: 0.85rem;
  margin: 0;
}

.landing-faq-item {
  padding: 1.1rem 1.2rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}

.landing-faq-q {
  margin: 0 0 0.45rem;
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.landing-faq-a {
  margin: 0;
  color: var(--muted);
  line-height: 1.6;
}

.landing-notes {
  margin: 0;
  padding-left: 1.25rem;
  color: var(--muted);
  line-height: 1.65;
}

.landing-notes li + li {
  margin-top: 0.65rem;
}

.landing-cta {
  padding: 2rem 1.5rem;
  border: 1px solid var(--line);
  border-radius: 28px;
  background:
    radial-gradient(
      100% 120% at 100% 0%,
      rgba(44, 177, 163, 0.26) 0%,
      transparent 60%
    ),
    var(--surface);
  text-align: center;
}

.landing-cta-title {
  margin: 0 0 0.65rem;
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 4vw, 1.75rem);
  font-weight: 800;
  letter-spacing: -0.03em;
}

.landing-cta-lead {
  margin: 0 0 1.25rem;
  color: var(--muted);
  line-height: 1.55;
}

.landing-cta-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
}

.landing-cta-button {
  font-size: 1rem;
  padding: 0.65rem 1.35rem;
  min-height: 44px;
}

.landing-footer {
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
  text-align: center;
}

.landing-footer-brand {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 800;
}

.landing-footer-tagline {
  margin: 0.25rem 0 0.75rem;
  color: var(--muted);
  font-size: 0.9rem;
}

.landing-footer-links {
  margin: 0 0 0.75rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.35rem 0.5rem;
}

.landing-footer-links a {
  color: var(--accent);
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.landing-footer-links a[aria-current="page"] {
  color: var(--ink);
  text-decoration: none;
}

.landing-footer-sep {
  color: var(--muted);
  font-size: 0.85rem;
}

.landing-footer-copy {
  margin: 0;
  color: var(--muted);
  font-size: 0.85rem;
}

/* 法務ページ（/terms /privacy /tokushoho） */

.legal-page {
  padding-bottom: 3rem;
}

/*
 * 法務3ページのヘッダー。並びは LP と同じ「ブランド → 言語切替」で、
 * 言語切替はブランドのすぐ右に置く（`space-between` にすると子が2つなので
 * 右端へ飛んで、LP・ログイン後アプリと位置が食い違う）。
 */
.legal-header {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.75rem;
}

.legal-header .landing-brand {
  display: inline-block;
  font-size: clamp(1.25rem, 4vw, 1.75rem);
}

.legal-main {
  max-width: 42rem;
  margin: 0 auto;
  padding: 1.75rem 1.5rem 2rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.legal-main h1 {
  margin: 0 0 0.5rem;
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 5vw, 2rem);
  font-weight: 800;
  line-height: 1.25;
}

.legal-official {
  margin: 0 0 1rem;
  padding: 0.85rem 1rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--accent-tint);
  color: var(--muted);
  font-size: 0.88rem;
  line-height: 1.6;
}

.legal-updated {
  margin: 0 0 1.5rem;
  color: var(--muted);
  font-size: 0.88rem;
}

.legal-main h2 {
  margin: 2rem 0 0.75rem;
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1.4;
}

.legal-main h3 {
  margin: 1.25rem 0 0.5rem;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.4;
}

.legal-main p,
.legal-main li {
  line-height: 1.75;
  font-size: 0.95rem;
}

.legal-main p {
  margin: 0 0 1rem;
}

.legal-main ul,
.legal-main ol {
  margin: 0 0 1rem;
  padding-left: 1.35rem;
}

.legal-main li {
  margin-bottom: 0.35rem;
}

.legal-main a {
  color: var(--accent);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.legal-main code {
  font-size: 0.88em;
  padding: 0.1em 0.35em;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.08);
}

.legal-todo {
  color: #ffb454;
  font-weight: 600;
}

.legal-dl {
  margin: 0 0 1.5rem;
}

.legal-dl dt {
  margin: 1.25rem 0 0.35rem;
  font-weight: 700;
  font-size: 0.95rem;
}

.legal-dl dt:first-child {
  margin-top: 0;
}

.legal-dl dd {
  margin: 0;
  line-height: 1.75;
  font-size: 0.95rem;
}

.legal-dl dd ul {
  margin: 0.35rem 0 0;
  padding-left: 1.25rem;
}

.legal-note {
  margin: 0.5rem 0 0 !important;
  color: var(--muted);
  font-size: 0.88rem !important;
}

.legal-dl-tokushoho dt {
  padding-bottom: 0.25rem;
  border-bottom: 1px solid var(--line);
}

/* ------------------------------------------------------------------ */
/* ギャラリー（フッターより下）                                          */
/* ------------------------------------------------------------------ */

.landing-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.landing-gallery {
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid var(--line);
  scroll-margin-top: 1rem;
}

/* 文字・リンク用のブランド色（--accent）。塗りは --brand */
.landing-gallery .landing-section-title {
  color: var(--accent);
  margin: 0;
}

.landing-gallery-head {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin-bottom: 1.25rem;
  /*
   * 狭い画面でツールチップ（`.landing-gallery-lead`）の基準にする。
   * 「!」を基準にすると画面外へはみ出すため（下の 560px のブロック）
   */
  position: relative;
}

.landing-gallery-hint {
  position: relative;
  display: inline-flex;
  flex: none;
}

.landing-gallery-hint-btn {
  display: grid;
  place-items: center;
  width: 1.5rem;
  height: 1.5rem;
  margin: 0;
  padding: 0;
  border: 1px solid var(--accent-ring);
  border-radius: 999px;
  background: var(--accent-tint);
  color: var(--accent);
  font: inherit;
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1;
  cursor: help;
}

.landing-gallery-hint-btn:hover,
.landing-gallery-hint-btn:focus-visible {
  border-color: var(--accent);
  background: rgba(69, 211, 194, 0.24);
}

.landing-gallery-hint-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.landing-gallery-lead {
  position: absolute;
  top: calc(100% + 0.45rem);
  left: 50%;
  z-index: 5;
  width: max-content;
  max-width: min(20rem, calc(100vw - 2.5rem));
  margin: 0;
  padding: 0.7rem 0.85rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--bg-top);
  color: var(--muted);
  font-size: 0.88rem;
  line-height: 1.55;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35);
  transform: translateX(-50%);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity 120ms ease,
    visibility 120ms ease;
}

.landing-gallery-lead::before {
  content: "";
  position: absolute;
  top: -5px;
  left: 50%;
  width: 8px;
  height: 8px;
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
  background: var(--bg-top);
  transform: translateX(-50%) rotate(45deg);
}

.landing-gallery-hint:hover .landing-gallery-lead,
.landing-gallery-hint:focus-within .landing-gallery-lead {
  opacity: 1;
  visibility: visible;
}

/*
 * 狭い画面では「!」が左寄りなので、そこを基準にすると右へはみ出す
 * （`visibility: hidden` でもレイアウトは占めるので、ホバーしていなくても
 * 横スクロールの原因になる。実測で 393px のとき 92px はみ出していた）。
 * 基準を `.landing-gallery-head` に移して、行の幅いっぱいに収める。
 */
/*
 * 狭い画面では「!」を基準にすると吹き出しが画面外へはみ出す
 * （`visibility: hidden` でもレイアウトは占めるので、ホバーしていなくても
 * 横スクロールの原因になる。実測で 393px のとき 92px はみ出していた）。
 * 基準を見出しの行（`.landing-gallery-head`）に移して幅いっぱいに収める。
 *
 * 以前は `left: 0` で「!」の左端を基準にしていたが、そこから右へ 320px
 * 伸びるので同じくはみ出していた（中央寄せのままだと今度は左へはみ出す。
 * どちらに寄せても「!」基準では収まらない）。
 */
@media (max-width: 560px) {
  /*
   * `.landing-gallery-hint` 自身が `position: relative` なので、そのままだと
   * 幅 24px の「!」ボタンが基準になって吹き出しが縦に潰れる。
   * 狭い画面だけ `static` に倒して、基準を `.landing-gallery-head` に譲る
   */
  .landing-gallery-hint {
    position: static;
  }

  .landing-gallery-lead {
    position: absolute;
    top: calc(100% + 0.45rem);
    left: 0;
    right: 0;
    width: auto;
    max-width: none;
    transform: none;
  }

  /*
   * 吹き出しの角は出さない。「!」の位置は見出しの文字幅で決まるので
   * 日英で変わり（日本語「公開ギャラリー」と英語「Public Gallery」）、
   * 固定値ではどちらかで必ずずれる。行の真下に幅いっぱいで出るので、
   * 角が無くてもどの行の説明かは読み取れる
   */
  .landing-gallery-lead::before {
    display: none;
  }
}

/* インスタのプロフィールと同じく、3列・隙間ほぼなし・角丸なし */
.landing-gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  margin: 0;
  padding: 0;
  list-style: none;
  background: #000;
}

.landing-gallery-card {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: #000;
  color: inherit;
  cursor: pointer;
}

.landing-gallery-media-wrap {
  position: relative;
  display: block;
}

/*
 * カードの枠は 3:4（たて長）。**正方形ではない。** 理由は React 側の
 * `.gallery-media`（`frontend/src/index.css`）のコメントを参照。
 * **両方を同じ比に保つ**（LP とログイン後で作品の切れ方が変わらないように）。
 */
.landing-gallery-media {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border: 0;
  border-radius: 0;
  background: #000;
}

/*
 * ホバーで作った video を静止画の上に重ねる。読み込むのは乗ったときだけで、
 * **実際に再生が始まってから**（`is-playing`）不透明にする。
 *
 * **`background` を透かす。** 敷いてある静止画を隠さないため。
 * `.landing-gallery-media` の `background: #000` をそのまま継ぐと、読み込み中や
 * 切り替えの隙間に黒が見えて「一度黒くなってから再生される」状態に戻る。
 * **React 側（`.gallery-media-video`）と揃えてある。**
 */
.landing-gallery-media-video {
  position: absolute;
  inset: 0;
  height: 100%;
  background: transparent;
  opacity: 0;
}

.landing-gallery-media-wrap.is-playing .landing-gallery-media-video {
  opacity: 1;
}

.landing-gallery-card:hover .landing-gallery-media {
  filter: brightness(0.88);
}

.landing-gallery-card:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

.landing-gallery-play {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 52px;
  height: 52px;
  transform: translate(-50%, -50%);
  border-radius: 999px;
  background: rgba(7, 13, 12, 0.6);
  transition: opacity 160ms ease;
}

.landing-gallery-play::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 54%;
  transform: translate(-50%, -50%);
  border-style: solid;
  border-width: 9px 0 9px 15px;
  border-color: transparent transparent transparent var(--ink);
}

.landing-gallery-media-wrap.is-playing .landing-gallery-play {
  opacity: 0;
}

.landing-gallery-sentinel {
  height: 1px;
}

.landing-gallery-status {
  margin: 1rem 0 0;
  color: var(--muted);
  font-size: 0.9rem;
}

.landing-gallery-more {
  margin-top: 0.75rem;
  min-height: 44px;
  padding: 0.55rem 1.3rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--accent);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.landing-gallery-more:hover {
  border-color: var(--accent-ring);
  background: var(--accent-tint);
}

.landing-gallery-modal {
  position: fixed;
  inset: 0;
  z-index: 30;
  display: grid;
  place-items: start center;
  overflow: auto;
  overscroll-behavior: contain;
  padding: 1.25rem;
  background: rgba(7, 13, 12, 0.88);
}

.landing-gallery-modal[hidden] {
  display: none;
}

.landing-gallery-modal-panel {
  display: grid;
  gap: 1rem;
  width: 100%;
  max-width: 720px;
  margin: 0;
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg-top);
}

/*
 * 前後送り。一覧に戻らずに次の作品へ行けるようにするための行で、隣が無い
 * ときは消さずに無効で出す（押せる場所が動くとテンポが崩れる）。
 * React 側（index.css の .gallery-detail-nav-button）と見た目を揃える。
 */
.landing-gallery-modal-nav {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
}

.landing-gallery-modal-nav-button {
  min-height: 44px;
  padding: 0.55rem 1.1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--accent);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.landing-gallery-modal-nav-button:hover:not(:disabled) {
  border-color: var(--accent-ring);
  background: var(--accent-tint);
}

.landing-gallery-modal-nav-button:disabled {
  color: var(--muted);
  cursor: default;
  opacity: 0.5;
}

.landing-gallery-modal-media-el {
  display: block;
  width: 100%;
  max-height: 68vh;
  object-fit: contain;
  border-radius: calc(var(--radius) - 6px);
  background: #000;
}

.landing-gallery-modal-body {
  display: grid;
  gap: 1rem;
  margin: 0;
}

.landing-gallery-modal-label {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
}

/**
 * 動画がお手軽・標準・高品質のどの枠でつくられたかを示すバッジ。
 * React 側の `.gallery-detail-video-slot`（index.css）と同じ見た目。
 */
.landing-gallery-modal-video-slot:not([hidden]) {
  display: inline-flex;
  align-items: center;
  justify-self: start;
  padding: 0.15rem 0.6rem;
  border: 1px solid var(--accent-ring);
  border-radius: 999px;
  background: var(--accent-tint);
  color: var(--accent);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.landing-gallery-modal-prompt {
  margin: 0.35rem 0 0;
  white-space: pre-wrap;
  line-height: 1.7;
}

/* キャラクター作成の作品だけ。生成時に選んだ項目を並べる */
.landing-gallery-modal-settings {
  padding-top: 1rem;
  border-top: 1px solid var(--line);
}

.landing-gallery-modal-settings[hidden] {
  display: none;
}

.landing-gallery-modal-settings-list {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.35rem 0.9rem;
  margin: 0.4rem 0 0;
  line-height: 1.45;
}

.landing-gallery-modal-settings-list dt {
  font-size: 0.8rem;
  color: var(--muted);
  white-space: nowrap;
}

.landing-gallery-modal-settings-list dd {
  margin: 0;
  word-break: break-word;
}

.landing-gallery-modal-source {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
}

.landing-gallery-modal-source[hidden] {
  display: none;
}

/*
 * 顔差し替えは元画像が2枚並ぶ。**2枚目の区切り線は消す。**
 * 続けて出すと二重線になって2枚が別のものに見える。
 *
 * **`:not([hidden])` で絞る。** 1枚目が隠れて2枚目だけ出る（元画像を持たない
 * 顔差し替え）ときは、そちらに線が残っていないと紹介文と地続きに見える
 */
.landing-gallery-modal-source:not([hidden])
  + .landing-gallery-modal-source:not([hidden]) {
  padding-top: 0.75rem;
  border-top: 0;
}

.landing-gallery-modal-source-thumb {
  display: block;
  flex: 0 0 auto;
  width: 84px;
  height: 84px;
  object-fit: cover;
  border: 1px solid var(--line);
  border-radius: calc(var(--radius) - 8px);
  background: #000;
}

.landing-gallery-modal-source-note {
  margin: 0.35rem 0 0;
  color: var(--muted);
  font-size: 0.9rem;
}

/*
 * 詳細の生成ボタン。塗りは `.auth-login-button` のまま。
 * 画像（キャラクター作成を含む）は編集と動画の2本。動画は1本。
 * どれも figcaption の先頭で幅いっぱい。
 * `.auth-login-button` の `display: inline-flex` は UA の `[hidden]` より強いので、
 * 出さない作品ではここで潰す。
 */
.landing-gallery-modal-generate {
  justify-self: stretch;
  width: 100%;
  white-space: normal;
  text-align: center;
}

.landing-gallery-modal-generate[hidden] {
  display: none;
}

.landing-gallery-modal-close {
  justify-self: end;
  min-height: 44px;
  padding: 0.55rem 1.3rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--accent);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.landing-gallery-modal-close:hover {
  border-color: var(--accent-ring);
  background: var(--accent-tint);
}

@media (max-width: 720px) {
  .landing-points {
    grid-template-columns: 1fr;
  }

  .landing-price-grid {
    grid-template-columns: 1fr;
  }

  .landing-header {
    flex-wrap: wrap;
    row-gap: 0.65rem;
  }
}

@media (max-width: 560px) {
  .landing-shell {
    width: min(880px, calc(100% - 1.25rem));
    padding-bottom: 3rem;
  }

  .landing-header {
    margin-bottom: 1.75rem;
  }

  /*
   * 狭い画面ではヘッダーのボタンのラベルを短い表記へ差し替える
   * （「公開ギャラリー」→「ギャラリー」）。長いままだと3つのボタンが
   * 1行に収まらず、ヘッダーが折り返してヒーローが下がる。
   */
  .landing-header-label-long {
    display: none;
  }

  .landing-header-label-short {
    display: inline;
  }

  .landing-hero {
    padding: 1.75rem 1.25rem 1.5rem;
    border-radius: 22px;
  }

  .landing-header-cta,
  .landing-ghost-button {
    font-size: 0.85rem;
    padding: 0.45rem 0.75rem;
    min-height: 44px;
  }

  /*
   * 子が3つ（ブランド・言語切替・右のまとまり）になったので、`gap: 1rem`
   * だと 16px × 2 = 32px を食ってヘッダーが2行に折り返す（実測。日本語は
   * 0.85rem 以下で1行になるので、余裕を見て 0.7rem）。
   *
   * **`.landing-header-end` の `margin-left: auto` はそのまま残す。**
   * gap を詰めれば `auto` でも1行に収まり、右端（`.landing-shell` の内側）
   * にきっちり揃う。外すと 6px ほど内側で止まる
   */
  .landing-header {
    gap: 0.7rem;
  }

  /*
   * 言語切替は狭い画面でも 32×28px のまま（ここに上書きを置かない）。
   * 以前は `min-height: 36px` に戻していたが、めったに押さないものを
   * 狭い画面でだけ大きくする理由が無い。**24px（WCAG 2.2 の 2.5.8 AA の
   * 下限）を下回らせないこと。**
   */
}

/*
 * 公開ギャラリーの一時非表示。**LP（このファイルを読む frontend/index.html）
 * は復活済みで対象外。** ここで隠しているのは法務3ページ
 * （terms/privacy/tokushoho。同じ landing.css を読む）のフッターにある
 * `/gallery` へのページ遷移リンクだけ（事情があってログイン後アプリ
 * （frontend/src/lib/galleryVisibility.ts の PUBLIC_GALLERY_VISIBLE）と
 * 合わせて非表示にしている）。機能・API・データは残す。
 *
 * フッターの区切り「・」（.landing-footer-sep）はリンクの直後に来るので、
 * 隣接セレクタでリンクとセットで隠し、先頭に「・」だけ残るのを防ぐ。
 *
 * 再表示するときはこのブロックを削除する。
 */
a[href="/gallery"],
a[href="/gallery"] + .landing-footer-sep {
  display: none !important;
}