/*
 * あいだノート 公式サイト — 共通スタイル
 * デザインコンセプト: 「気持ちと行動のあいだに、小さな道が生まれる」
 * 活字・余白・細線 (hairline) を基調としたエディトリアルなデザインシステム。
 */

/* ---------- Design tokens ---------- */
:root {
  color-scheme: light dark;

  --color-bg: #FDFBF7;
  --color-surface: #F5F2EC;
  --color-heading: #1A237E;
  --color-text: #24243D;
  --color-text-muted: color-mix(in oklab, var(--color-text) 68%, transparent);
  --color-accent: #5C6BC0;
  --color-accent-soft: #E8EAF6;
  --color-warm: #B8560B;
  --color-border: color-mix(in oklab, var(--color-heading) 14%, transparent);

  --font-heading: "Noto Serif JP", serif;
  --font-body: "Noto Sans JP", sans-serif;

  --content-width: 42rem;
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 1.75rem;
  --space-lg: 3rem;
  --space-xl: 5rem;

  /* LP 専用トークン (エディトリアル用の型スケール・余白) */
  --fs-h1: clamp(2rem, 1.4rem + 2.8vw, 3.75rem);
  --fs-h2: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
  --space-section: clamp(4.5rem, 3.5rem + 4vw, 7rem);
  --radius-hairline: 3px;

  /* 入場モーション用の強い ease-out (組み込み ease-out は減速が浅い) */
  --ease-out-strong: cubic-bezier(0.16, 1, 0.3, 1);

  accent-color: var(--color-accent);
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-bg: #10142B;
    --color-surface: #1B2046;
    --color-heading: #C5CAE9;
    --color-text: #EDE7DA;
    --color-accent: #8C9EFF;
    --color-accent-soft: color-mix(in oklab, #8C9EFF 16%, transparent);
    --color-warm: #FFB74D;
    --color-border: color-mix(in oklab, #C5CAE9 18%, transparent);
  }

  /* ロゴはインクブルーの図案なので、ダーク背景では生成りのタイルに載せる
     (アプリのアダプティブアイコン背景 #FDFBF7 と同じ扱い) */
  .brand-mark {
    background: #FDFBF7;
    border-radius: 25%;
    padding: 0.2rem;
  }
}

/* ---------- Base ---------- */
:where(*, *::before, *::after) {
  box-sizing: border-box;
}

:where(body, h1, h2, h3, p, dl, dd, figure, ol, ul) {
  margin: 0;
}

html {
  font-size: 100%;
}

body {
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.9;
  min-block-size: 100dvb;
  display: flex;
  flex-direction: column;
}

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

h1, h2, h3 {
  font-family: var(--font-heading);
  color: var(--color-heading);
  line-height: 1.4;
  text-wrap: balance;
}

p {
  text-wrap: pretty;
}

a {
  color: var(--color-accent);
  text-underline-offset: 0.2em;
}

a:not([class]):hover {
  text-decoration-thickness: 2px;
}

:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.visually-hidden {
  position: absolute !important;
  clip-path: inset(50%) !important;
  overflow: hidden !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  border: 0 !important;
  white-space: nowrap !important;
}

/* ---------- Layout ---------- */
.container {
  max-width: var(--content-width);
  margin-inline: auto;
  padding-inline: var(--space-sm);
}

/* トップページの一部セクション向けの広い版。
   .container の中央寄せ・左右余白はそのまま、max-width だけ上書きする。 */
.container-wide {
  max-width: 72rem;
}

/* ---------- Header ---------- */
.site-header {
  border-block-end: 1px solid var(--color-border);
}

.site-header .container {
  padding-block: var(--space-sm);
}

.site-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-xs) var(--space-sm);
}

.site-nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem var(--space-sm);
}

.site-nav a {
  position: relative;
  display: inline-block;
  padding-block: 0.25em;
  color: var(--color-text-muted);
  font-size: 0.8125rem;
  text-decoration: none;
  transition: color 200ms ease-out;
}

/* 下線は paint を発生させる background-size ではなく transform (scale) で伸ばす */
.site-nav a::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  block-size: 1px;
  background: currentColor;
  scale: 0 1;
  transform-origin: left;
  transition: scale 200ms ease-out;
}

.site-nav a:focus-visible {
  color: var(--color-accent);
}

.site-nav a:focus-visible::after {
  scale: 1 1;
}

@media (hover: hover) and (pointer: fine) {
  .site-nav a:hover {
    color: var(--color-accent);
  }

  .site-nav a:hover::after {
    scale: 1 1;
  }
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  color: var(--color-heading);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.125rem;
  text-decoration: none;
}

.brand:hover {
  text-decoration: underline;
  text-underline-offset: 0.3em;
}

.brand-mark {
  inline-size: 2rem;
  block-size: 2rem;
  /* symbol.png は横長 (554x362) なので、正方形の枠に収めても歪ませない */
  object-fit: contain;
}

/* ---------- Main ---------- */
main {
  flex: 1;
}

/* ---------- Sections (共通の縦リズム。company / legal もこの基本値を使う) ---------- */
section {
  padding-block: var(--space-lg);
}

section + section {
  border-block-start: 1px solid var(--color-border);
}

/* ---------- Scroll reveal (IntersectionObserver + class トグル。全ブラウザ対応)
   .js が無ければ (JS 無効時) 初期非表示は効かず、全要素が最初から見える。 ---------- */
.js [data-reveal] {
  opacity: 0;
  translate: 0 1rem;
  transition: opacity 0.6s var(--ease-out-strong), translate 0.6s var(--ease-out-strong);
}

.js [data-reveal].is-visible {
  opacity: 1;
  translate: 0 0;
}

@media (prefers-reduced-motion: reduce) {
  .js [data-reveal] {
    transition: none;
  }
}

/* ---------- View Transitions (ページ間の静かなクロスフェード) ---------- */
@media (prefers-reduced-motion: no-preference) {
  @view-transition {
    navigation: auto;
  }

  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation-duration: 0.25s;
  }
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation: none;
  }
}

/* ---------- Company info table ---------- */
.info-table {
  margin-block-start: var(--space-md);
  display: grid;
  gap: var(--space-sm) var(--space-md);
  grid-template-columns: max-content 1fr;
}

.info-table dt {
  font-weight: 500;
  color: var(--color-heading);
  white-space: nowrap;
}

.info-table dd {
  margin-inline-start: 0;
  overflow-wrap: anywhere;
}

@media (max-width: 30rem) {
  .info-table {
    grid-template-columns: 1fr;
  }

  .info-table dt {
    padding-block-start: var(--space-sm);
  }
}

/* ---------- Legal documents ---------- */
.legal-doc {
  padding-block: var(--space-lg);
}

.legal-doc .container > :first-child {
  margin-block-start: 0;
}

.legal-doc h1 {
  font-size: 1.75rem;
  margin-block-end: var(--space-md);
}

.legal-doc h2 {
  font-size: 1.25rem;
  margin-block: var(--space-lg) var(--space-sm);
}

.legal-doc h3 {
  font-size: 1.0625rem;
  margin-block: var(--space-md) var(--space-xs);
}

.legal-doc p,
.legal-doc li {
  margin-block-start: var(--space-sm);
}

.legal-doc ul,
.legal-doc ol {
  padding-inline-start: 1.5em;
}

.legal-doc hr {
  border: none;
  border-block-start: 1px solid var(--color-border);
  margin-block: var(--space-lg);
}

/* ---------- Footer ---------- */
.site-footer {
  border-block-start: 1px solid var(--color-border);
  padding-block: var(--space-md);
}

.footer-tagline {
  font-family: var(--font-heading);
  color: var(--color-text-muted);
  font-size: 0.9375rem;
  margin-block-end: var(--space-sm);
}

.site-footer nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs) var(--space-md);
}

.site-footer a {
  position: relative;
  display: inline-block;
  padding-block: 0.25em;
  color: var(--color-text-muted);
  font-size: 0.875rem;
  text-decoration: none;
  transition: color 200ms ease-out;
}

.site-footer a::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  block-size: 1px;
  background: currentColor;
  scale: 0 1;
  transform-origin: left;
  transition: scale 200ms ease-out;
}

.site-footer a:focus-visible {
  color: var(--color-accent);
}

.site-footer a:focus-visible::after {
  scale: 1 1;
}

@media (hover: hover) and (pointer: fine) {
  .site-footer a:hover {
    color: var(--color-accent);
  }

  .site-footer a:hover::after {
    scale: 1 1;
  }
}

.copyright {
  margin-block-start: var(--space-sm);
  color: var(--color-text-muted);
  font-size: 0.8125rem;
}

/* =====================================================================
   LP (トップページ) — エディトリアル・デザインシステム
   カードに頼らず、活字・余白・1px の hairline でリズムを作る。
   ===================================================================== */

.lp section {
  padding-block: var(--space-section);
}

.lp section + section {
  border-block-start: none;
}

/* 「小さな道」モチーフ: セクションを縫うように流れる細い縦線 */
.lp-joint {
  display: block;
  inline-size: 1px;
  block-size: 4rem;
  margin-inline: auto;
  background: linear-gradient(to bottom, transparent, var(--color-border) 25%, var(--color-border) 75%, transparent);
}

/* 「小さな道」が伸びる: viewport 進入で上から下へ描画 (フェードはさせず、伸びのみ) */
.js .lp-joint[data-reveal] {
  opacity: 1;
  translate: none;
  transform-origin: top;
  scale: 1 0;
  transition: scale 0.6s var(--ease-out-strong);
}

.js .lp-joint[data-reveal].is-visible {
  scale: 1 1;
}

@media (prefers-reduced-motion: reduce) {
  .js .lp-joint[data-reveal] {
    transition: none;
  }
}

/* 見出し (eyebrow + h2) */
.lp-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  color: var(--color-warm);
  margin-block-end: 0.75rem;
}

/* 横棒は左右対称に。片側だけだと中央寄せ時に文字がずれて見える */
.lp-eyebrow::before,
.lp-eyebrow::after {
  content: "";
  inline-size: 1.5rem;
  block-size: 1px;
  background: color-mix(in oklab, var(--color-warm) 70%, transparent);
}

.lp-head {
  text-align: center;
  max-width: 36rem;
  margin-inline: auto;
  margin-block-end: var(--space-lg);
}

.lp-head h2 {
  font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.25rem);
  font-weight: 500;
}

/* 文節単位でしか折り返さない (span を wbr でつなぎ、途中改行を防ぐ) */
.lp-head h2 span,
.lp-litany p span,
.lp-turn p span,
.lp-mode p span,
.lp-ledger-item p span,
.lp-trust-list li span,
.lp-trust-note span,
.lp-cta h2 span {
  display: inline-block;
}

/* ---------- 1. ファーストビュー ---------- */
.lp-hero .container-wide {
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  gap: var(--space-xl);
}

@media (min-width: 60rem) {
  .lp-hero .container-wide {
    grid-template-columns: 1.05fr 0.95fr;
    gap: var(--space-lg);
  }
}

.lp-hero h1 {
  font-size: var(--fs-h1);
  font-weight: 700;
  margin-block-end: var(--space-md);
}

/* 文節単位でしか折り返さない */
.lp-hero h1 span {
  display: inline-block;
}

.lp-lede {
  font-size: 1.0625rem;
  line-height: 2;
  color: var(--color-text-muted);
  max-width: 32rem;
}

/* ---------- Store chips (App Store / Google Play。黒い箱にせず、hairline 枠) ---------- */
.store-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-block-start: var(--space-lg);
}

.store-chip {
  display: inline-flex;
  flex-direction: column;
  gap: 0.05em;
  border: 1px solid var(--color-heading);
  border-radius: var(--radius-hairline);
  padding: 0.5em 1.1em 0.55em;
  line-height: 1.15;
  color: var(--color-heading);
  transition: border-color 200ms ease-out, translate 200ms ease-out;
}

@media (hover: hover) and (pointer: fine) {
  .store-chip:hover {
    border-color: color-mix(in oklab, var(--color-heading) 80%, black 20%);
    translate: 0 -1px;
  }
}

.store-chip-eyebrow {
  font-size: 0.625rem;
  letter-spacing: 0.08em;
  color: var(--color-text-muted);
}

.store-chip-name {
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 500;
}

/* ---------- 「一枚のノート」フロー図 (hero) ---------- */
.lp-flow {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-hairline);
  padding: var(--space-md);
  max-width: 26rem;
  margin-inline: auto;
}

@media (min-width: 60rem) {
  .lp-flow {
    margin-inline: 0;
  }
}

.lp-flow-caption {
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  color: var(--color-text-muted);
  text-align: center;
  margin-block-end: var(--space-sm);
}

.flow-bubbles {
  display: grid;
  gap: 0.5rem;
}

.flow-bubble {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-hairline);
  padding: 0.6rem 0.85rem;
  font-size: 0.875rem;
  line-height: 1.6;
}

.flow-bubble-role {
  display: block;
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
  margin-block-end: 0.2em;
}

.flow-bubble--user {
  margin-inline-end: 1.5rem;
}

.flow-bubble--ai {
  margin-inline-start: 1.5rem;
}

.flow-connector {
  inline-size: 0;
  block-size: 1.5rem;
  margin-inline: auto;
  border-inline-start: 1px dashed var(--color-border);
}

.flow-node {
  text-align: center;
}

.flow-node-mark {
  font-family: var(--font-heading);
  color: var(--color-warm);
  font-size: 0.8125rem;
  margin-inline-end: 0.3em;
}

.flow-node-label {
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  color: var(--color-text-muted);
}

.flow-node p {
  font-family: var(--font-heading);
  font-size: 1rem;
  line-height: 1.6;
  margin-block-start: 0.4em;
}

.flow-node--action p {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.9375rem;
}

.flow-checkbox {
  display: inline-block;
  inline-size: 0.7em;
  block-size: 0.7em;
  border: 1px solid var(--color-heading);
  border-radius: 2px;
  margin-inline-end: 0.5em;
  vertical-align: -0.05em;
}

/* フロー図の段階描画 (読み込み時、静かに一段ずつ現れる) */
@media (prefers-reduced-motion: no-preference) {
  @keyframes flow-in {
    from {
      opacity: 0;
      translate: 0 0.5rem;
    }
  }

  .flow-bubbles,
  .flow-connector,
  .flow-node--insight,
  .flow-node--action {
    animation: flow-in 0.4s var(--ease-out-strong) backwards;
  }

  .flow-bubbles + .flow-connector {
    animation-delay: 0.12s;
  }

  .flow-node--insight {
    animation-delay: 0.24s;
  }

  .flow-node--insight + .flow-connector {
    animation-delay: 0.36s;
  }

  .flow-node--action {
    animation-delay: 0.48s;
  }
}

/* reduced-motion では「ゼロ」ではなく、動きを除いた一括フェードだけ残す */
@media (prefers-reduced-motion: reduce) {
  @keyframes flow-fade {
    from {
      opacity: 0;
    }
  }

  .lp-flow {
    animation: flow-fade 0.3s ease-out backwards;
  }
}

/* ---------- 2. 共感 (カード禁止・詩のような組み) ---------- */
.lp-litany {
  display: grid;
  gap: 1.25rem;
  text-align: center;
  max-width: 32rem;
  margin-inline: auto;
}

.lp-litany p {
  font-family: var(--font-heading);
  font-size: 1.0625rem;
  line-height: 1.9;
  color: var(--color-text);
}

.lp-turn {
  margin-block-start: var(--space-lg);
  text-align: center;
  max-width: 30rem;
  margin-inline: auto;
}

.lp-turn p {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  line-height: 1.9;
  color: var(--color-heading);
}

.lp-turn p + p {
  margin-block-start: 0.4em;
}

/* ---------- 3. あいだノートの違い (split-screen: muted な文脈 / highlight される道) ---------- */
.lp-compare {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
}

@media (min-width: 50rem) {
  .lp-compare {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-lg);
  }

  /* 中央の薄い hairline: 2 カラムが等しい block-size に stretch されるため、
     コンテナの高さいっぱいに「2 つの道」を分ける縦線として機能する */
  .lp-compare::before {
    content: "";
    position: absolute;
    inset-block: 0;
    inset-inline-start: 50%;
    inline-size: 1px;
    background: var(--color-border);
    translate: -50% 0;
  }
}

.lp-track-head {
  text-align: center;
  margin-block-end: var(--space-md);
}

.lp-track-head-title {
  font-family: var(--font-heading);
  font-size: 1.125rem;
  margin-block-end: 0.3em;
}

.lp-track-head-sub {
  font-size: 0.8125rem;
  color: var(--color-text-muted);
  letter-spacing: 0.02em;
}

/* 左: よくある AI チャット = muted (文脈として後退) */
.lp-compare-col--muted .lp-track-head-title {
  color: var(--color-text-muted);
  font-weight: 500;
}

/* 右: あいだノート = highlight (ブランドのインク色で前に出す) */
.lp-compare-col--highlight .lp-track-head-title {
  color: var(--color-heading);
  font-weight: 700;
}

.lp-track {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  justify-items: center;
}

.lp-track-node {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 0.4rem;
  padding-block-end: 1.75rem;
}

.lp-track-node::before {
  content: "";
  inline-size: 0.5rem;
  block-size: 0.5rem;
  border-radius: 50%;
  border: 1px solid var(--color-heading);
  background: var(--color-bg);
}

/* 左トラックのノードは灰系に落として後退させる */
.lp-compare-col--muted .lp-track-node::before {
  border-color: var(--color-text-muted);
}

.lp-compare-col--muted .lp-track-node span {
  color: var(--color-text-muted);
}

/* 右トラックのノードはブランドのアクセントで塗って前に出す (warm-end は独自の暖色を維持) */
.lp-compare-col--highlight .lp-track-node:not(.lp-track-node--warm-end)::before {
  background: var(--color-accent-soft);
}

.lp-track-node::after {
  content: "";
  position: absolute;
  inset-block-start: 0.5rem;
  inline-size: 1px;
  block-size: 1.75rem;
  background: var(--color-border);
}

.lp-track-node:last-child::after {
  display: none;
}

.lp-track-node span {
  font-size: 0.9375rem;
  color: var(--color-text);
}

.lp-track-node--dashed::after {
  background: repeating-linear-gradient(to bottom, var(--color-border) 0 4px, transparent 4px 9px);
  mask-image: linear-gradient(to bottom, black, transparent);
}

.lp-track-node--faded {
  opacity: 0.5;
}

.lp-track-node--faded::before {
  border-style: dashed;
}

.lp-track-node--warm-end::before {
  border-color: var(--color-warm);
  background: var(--color-warm);
}

.lp-track-node--warm-end span {
  color: var(--color-heading);
}

/* 右トラックの終端だけ、道を少し伸ばして下の lp-joint へつながる感覚を出す
   (= 続いていく)。左トラックの終端 (--faded) は :last-child::after の
   display: none をそのまま適用し、途切れて終わる印象を保つ。 */
.lp-track-node--warm-end:last-child::after {
  display: block;
  block-size: 3rem;
  background: linear-gradient(to bottom, var(--color-warm), var(--color-border) 55%, transparent);
}

/* あいだノート側 (右トラック) だけ、上から順に静かに現れる。
   よくある AI チャット側 (左トラック) は .lp-compare の data-reveal による
   一括フェードのみで、個別には演出しない (「話す→少し楽になる」の線を除く)。 */
.js .lp-compare > div:last-child[data-reveal] .lp-track-node {
  opacity: 0;
  translate: 0 1rem;
  transition: opacity 0.5s var(--ease-out-strong), translate 0.5s var(--ease-out-strong);
}

.js .lp-compare > div:last-child[data-reveal].is-visible .lp-track-node {
  opacity: 1;
  translate: 0 0;
}

.js .lp-compare > div:last-child[data-reveal] .lp-track-node::after {
  transform-origin: top;
  scale: 1 0;
  transition: scale 0.4s var(--ease-out-strong);
}

.js .lp-compare > div:last-child[data-reveal].is-visible .lp-track-node::after {
  scale: 1 1;
}

.js .lp-compare > div:last-child[data-reveal].is-visible .lp-track-node:nth-child(2),
.js .lp-compare > div:last-child[data-reveal].is-visible .lp-track-node:nth-child(2)::after {
  transition-delay: 0.08s;
}

.js .lp-compare > div:last-child[data-reveal].is-visible .lp-track-node:nth-child(3),
.js .lp-compare > div:last-child[data-reveal].is-visible .lp-track-node:nth-child(3)::after {
  transition-delay: 0.16s;
}

.js .lp-compare > div:last-child[data-reveal].is-visible .lp-track-node:nth-child(4),
.js .lp-compare > div:last-child[data-reveal].is-visible .lp-track-node:nth-child(4)::after {
  transition-delay: 0.24s;
}

.js .lp-compare > div:last-child[data-reveal].is-visible .lp-track-node:nth-child(5),
.js .lp-compare > div:last-child[data-reveal].is-visible .lp-track-node:nth-child(5)::after {
  transition-delay: 0.32s;
}

/* 左トラック (よくある AI チャット) は「話す→少し楽になる」の 1 本だけ、
   viewport 進入で上から伸ばす。以降 (→会話は終わる) の破線は伸ばさない。 */
.js .lp-compare > div:first-child[data-reveal] .lp-track-node:first-child::after {
  transform-origin: top;
  scale: 1 0;
  transition: scale 0.6s var(--ease-out-strong);
}

.js .lp-compare > div:first-child[data-reveal].is-visible .lp-track-node:first-child::after {
  scale: 1 1;
}

@media (prefers-reduced-motion: reduce) {
  .js .lp-compare > div[data-reveal] .lp-track-node,
  .js .lp-compare > div[data-reveal] .lp-track-node::after {
    transition: none;
  }
}

/* ---------- 4. 三つの対話モード (階段状レイアウト) ---------- */
.lp-modes {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-md);
}

.lp-mode {
  position: relative;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-hairline);
  padding: var(--space-md);
}

.lp-mode-label {
  font-family: var(--font-heading);
  font-size: 1.125rem;
  color: var(--color-heading);
  margin-block-end: 0.35em;
}

.lp-mode p {
  color: var(--color-text-muted);
  font-size: 0.9375rem;
}

@media (max-width: 54.9375rem) {
  .lp-modes {
    padding-inline-start: var(--space-md);
    border-inline-start: 1px solid var(--color-border);
  }

  .lp-mode:nth-child(2) {
    margin-inline-start: var(--space-md);
  }

  .lp-mode:nth-child(3) {
    margin-inline-start: calc(var(--space-md) * 2);
  }
}

@media (min-width: 55rem) {
  .lp-modes {
    grid-template-columns: repeat(3, minmax(14rem, 1fr));
  }

  .lp-mode:nth-child(2) {
    margin-block-start: 2.5rem;
  }

  .lp-mode:nth-child(3) {
    margin-block-start: 5rem;
  }

  .lp-mode:not(:first-child)::before {
    content: "";
    position: absolute;
    inset-block-start: -1.5rem;
    inset-inline-start: -1.5rem;
    inline-size: 2.25rem;
    block-size: 1px;
    background: var(--color-border);
    transform-origin: left center;
    rotate: 30deg;
  }
}

.lp-modes-note {
  text-align: center;
  margin-block-start: var(--space-lg);
  font-size: 0.875rem;
  color: var(--color-text-muted);
}

/* 友達 → 仲間 → 同志 の順に現れる。親 .lp-modes が viewport に入ったら、
   各カードを transition-delay で少しずつずらして「順々に」を表現する。 */
.js .lp-modes[data-reveal] .lp-mode {
  opacity: 0;
  translate: 0 1rem;
  transition: opacity 0.6s var(--ease-out-strong), translate 0.6s var(--ease-out-strong);
}

.js .lp-modes[data-reveal].is-visible .lp-mode {
  opacity: 1;
  translate: 0 0;
}

.js .lp-modes[data-reveal].is-visible .lp-mode:nth-child(2) {
  transition-delay: 0.12s;
}

.js .lp-modes[data-reveal].is-visible .lp-mode:nth-child(3) {
  transition-delay: 0.24s;
}

@media (prefers-reduced-motion: reduce) {
  .js .lp-modes[data-reveal] .lp-mode {
    transition: none;
  }
}

/* ---------- 5. 気づきを行動につなげる仕組み ---------- */
.lp-ledger {
  display: grid;
  gap: var(--space-lg) var(--space-xl);
}

@media (min-width: 42rem) {
  .lp-ledger {
    grid-template-columns: repeat(2, 1fr);
  }
}

.lp-ledger-item {
  display: flex;
  gap: 0.75rem;
}

.lp-ledger-bullet {
  flex: none;
  inline-size: 0.55rem;
  block-size: 0.55rem;
  margin-block-start: 0.55em;
  background: var(--color-warm);
}

.lp-ledger-word {
  display: block;
  font-family: var(--font-heading);
  color: var(--color-heading);
  font-size: 1.0625rem;
  margin-block-end: 0.2em;
}

.lp-ledger-item p {
  color: var(--color-text-muted);
  font-size: 0.9375rem;
}

/* ---------- 6. 利用の流れ (循環) ---------- */
.lp-cycle {
  position: relative;
}

.lp-cycle-ring {
  list-style: none;
  margin: 0 0 var(--space-lg);
  padding: 0;
  display: grid;
  gap: var(--space-md);
  border-inline-start: 1px solid var(--color-border);
  padding-inline-start: var(--space-md);
  position: relative;
}

.lp-cycle-node {
  position: relative;
  font-size: 0.9375rem;
}

.lp-cycle-node::before {
  content: "";
  position: absolute;
  inset-inline-start: calc(-1 * var(--space-md) - 0.3125rem);
  inset-block-start: 0.35em;
  inline-size: 0.5rem;
  block-size: 0.5rem;
  border-radius: 50%;
  background: var(--color-bg);
  border: 1px solid var(--color-heading);
}

.lp-cycle-dot,
.lp-cycle-arrow {
  display: none;
}

.lp-cycle-ring::after {
  content: "";
  position: absolute;
  inset-inline-start: -1px;
  inset-block-end: -1.75rem;
  inline-size: 0.75rem;
  block-size: 1.75rem;
  border: 1px solid var(--color-warm);
  border-inline-end: none;
  border-block-start: none;
  border-end-start-radius: 0.6rem;
}

.lp-cycle-center {
  text-align: center;
  font-family: var(--font-heading);
  font-size: 1.0625rem;
  color: var(--color-heading);
  line-height: 1.7;
}

@media (min-width: 52rem) {
  .lp-cycle {
    margin-block-start: 4rem;
  }

  .lp-cycle-ring {
    inline-size: 22rem;
    aspect-ratio: 1;
    margin-inline: auto;
    border: 1px solid var(--color-border);
    border-radius: 50%;
    border-inline-start-width: 1px;
    padding-inline-start: 0;
  }

  .lp-cycle-ring::after {
    display: none;
  }

  /* リングの縁を、小さな灯 (暖色) が時計回りに回り続ける。
     「何度でも行き来する」循環そのものを表す。reduced-motion では出さない。 */
  @media (prefers-reduced-motion: no-preference) {
    @keyframes cycle-orbit {
      to {
        offset-distance: 100%;
      }
    }

    .lp-cycle-ring::before {
      content: "";
      position: absolute;
      inline-size: 0.5rem;
      block-size: 0.5rem;
      border-radius: 50%;
      background: var(--color-warm);
      offset-path: circle(11rem at center);
      animation: cycle-orbit 18s linear infinite;
    }
  }

  .lp-cycle-node {
    position: absolute;
    inline-size: 12.5rem;
    text-align: center;
    font-size: 0.875rem;
    line-height: 1.6;
  }

  .lp-cycle-node::before {
    display: none;
  }

  .lp-cycle-dot {
    display: block;
    inline-size: 0.4rem;
    block-size: 0.4rem;
    border-radius: 50%;
    background: var(--color-bg);
    border: 1px solid var(--color-heading);
    margin-inline: auto;
    margin-block-end: 0.5rem;
  }

  .lp-cycle-node--n {
    inset-block-start: -2.75rem;
    inset-inline-start: 50%;
    translate: -50% 0;
  }

  .lp-cycle-node--e {
    inset-inline-start: 100%;
    inset-block-start: 50%;
    translate: -28% -50%;
    text-align: start;
  }

  .lp-cycle-node--s {
    inset-block-start: 100%;
    inset-inline-start: 50%;
    translate: -50% -25%;
  }

  .lp-cycle-node--w {
    inset-inline-start: 0%;
    inset-block-start: 50%;
    translate: -72% -50%;
    text-align: end;
  }

  /* 矢印: 円弧の接線方向を向く小さな三角 (円環の流れが時計回りであることを示す) */
  .lp-cycle-arrow {
    display: block;
    position: absolute;
    inline-size: 0;
    block-size: 0;
    border-style: solid;
    border-width: 0.3rem 0 0.3rem 0.45rem;
    border-color: transparent transparent transparent var(--color-warm);
  }

  .lp-cycle-arrow--ne {
    inset-inline-start: 85.35%;
    inset-block-start: 14.65%;
    translate: -50% -50%;
    rotate: 45deg;
  }

  .lp-cycle-arrow--se {
    inset-inline-start: 85.35%;
    inset-block-start: 85.35%;
    translate: -50% -50%;
    rotate: 135deg;
  }

  .lp-cycle-arrow--sw {
    inset-inline-start: 14.65%;
    inset-block-start: 85.35%;
    translate: -50% -50%;
    rotate: 225deg;
  }

  .lp-cycle-arrow--nw {
    inset-inline-start: 14.65%;
    inset-block-start: 14.65%;
    translate: -50% -50%;
    rotate: 315deg;
  }

  .lp-cycle-center {
    position: absolute;
    inset-block-start: 50%;
    inset-inline-start: 50%;
    translate: -50% -50%;
    inline-size: 9rem;
    margin-block-start: 0;
  }
}

/* 4 つのノードが viewport 進入で時計回り (DOM 順 = 北→東→南→西) に現れる。
   .lp-cycle-node は translate で配置しているため、演出側は opacity のみを動かす。
   .lp-cycle-ring 自体も translate を使うとデスクトップの絶対配置の基準がずれるため、
   opacity のみの独立したフェードにする。 */
.js .lp-cycle-ring[data-reveal] {
  opacity: 0;
  translate: none;
  transition: opacity 0.6s var(--ease-out-strong);
}

.js .lp-cycle-ring[data-reveal].is-visible {
  opacity: 1;
}

.js .lp-cycle-ring[data-reveal] .lp-cycle-node {
  opacity: 0;
  transition: opacity 0.5s var(--ease-out-strong);
}

.js .lp-cycle-ring[data-reveal].is-visible .lp-cycle-node {
  opacity: 1;
}

.js .lp-cycle-ring[data-reveal].is-visible .lp-cycle-node:nth-child(2) {
  transition-delay: 0.12s;
}

.js .lp-cycle-ring[data-reveal].is-visible .lp-cycle-node:nth-child(3) {
  transition-delay: 0.24s;
}

.js .lp-cycle-ring[data-reveal].is-visible .lp-cycle-node:nth-child(4) {
  transition-delay: 0.36s;
}

@media (prefers-reduced-motion: reduce) {
  .js .lp-cycle-ring[data-reveal],
  .js .lp-cycle-ring[data-reveal] .lp-cycle-node {
    transition: none;
  }
}

/* ---------- 7. プライバシーと安心 ---------- */
.lp-trust {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-hairline);
  padding: var(--space-lg);
  max-width: 38rem;
  margin-inline: auto;
}

.lp-trust-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-sm);
}

.lp-trust-list li {
  position: relative;
  padding-inline-start: 1.25em;
  color: var(--color-text);
  font-size: 0.9375rem;
  line-height: 1.85;
}

.lp-trust-list li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0.65em;
  inline-size: 0.35rem;
  block-size: 0.35rem;
  background: var(--color-warm);
}

.lp-trust-list a {
  white-space: nowrap;
}

.lp-trust-note {
  margin-block-start: var(--space-md);
  padding-block-start: var(--space-md);
  border-block-start: 1px solid var(--color-border);
  font-size: 0.875rem;
  color: var(--color-text-muted);
}

/* ---------- 8. 最後の CTA (ページ唯一のダークバンド) ---------- */
.lp-cta {
  /* ライト/ダークテーマに関わらず常に夜。:root のトークンは使わず
     ローカル変数だけで完結させる (component-specific-light-dark-theme 相当)。 */
  --hb-bg-1: #0C1024;
  --hb-bg-2: #141A3E;
  --hb-heading: #FDFBF7;
  --hb-text: color-mix(in oklab, #FDFBF7 78%, transparent);
  color-scheme: dark;
  background:
    radial-gradient(1.5px 1.5px at 12% 22%, rgba(255, 255, 255, .55) 50%, transparent 52%),
    radial-gradient(1.5px 1.5px at 82% 16%, rgba(255, 255, 255, .4) 50%, transparent 52%),
    radial-gradient(1px 1px at 60% 12%, rgba(255, 255, 255, .5) 50%, transparent 52%),
    radial-gradient(1.5px 1.5px at 30% 62%, rgba(255, 255, 255, .35) 50%, transparent 52%),
    radial-gradient(1px 1px at 92% 68%, rgba(255, 255, 255, .45) 50%, transparent 52%),
    linear-gradient(170deg, var(--hb-bg-1), var(--hb-bg-2));
  color: var(--hb-text);
  text-align: center;
}

.lp-cta h2 {
  color: var(--hb-heading);
  font-size: var(--fs-h2);
  max-width: 30rem;
  margin-inline: auto;
}

.lp-cta .lp-lede {
  color: var(--hb-text);
  max-width: 28rem;
  margin-inline: auto;
  margin-block-start: var(--space-sm);
  font-size: 1rem;
}

.lp-cta .store-chips {
  justify-content: center;
  margin-inline: auto;
}

.lp-cta .store-chip {
  border-color: color-mix(in oklab, #FDFBF7 55%, transparent);
  color: #FDFBF7;
}

@media (hover: hover) and (pointer: fine) {
  .lp-cta .store-chip:hover {
    border-color: #FDFBF7;
  }
}

.lp-cta .store-chip-eyebrow {
  color: color-mix(in oklab, #FDFBF7 65%, transparent);
}

/* ---------- 2.5 転換の引用 (full-bleed の淡いラベンダー帯) ---------- */
.lp-quote {
  background: color-mix(in oklab, var(--color-accent-soft) 55%, var(--color-bg));
  text-align: center;
}

.lp-quote-text {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.35rem);
  line-height: 1.7;
  color: var(--color-heading);
  max-width: 34rem;
  margin-inline: auto;
}

.lp-quote-text span {
  display: inline-block;
}

/* ---------- 4.5 実際の画面 (スクリーンショット差し込み枠) ---------- */
.lp-shots {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
  max-width: 52rem;
}

/* 3 枠は「3 列」か「1 列」のみ。中途半端な 2 列だと 3 枚目が孤立して中央からずれる */
@media (min-width: 44rem) {
  .lp-shots {
    grid-template-columns: repeat(3, 1fr);
  }
}

.lp-shot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
}

/* 実機スクショ差し込みまでの枠。斜線ハッチで「準備中」を意図的に示す */
.lp-shot-frame {
  inline-size: 100%;
  max-inline-size: 15rem;
  aspect-ratio: 9 / 19;
  border: 1px solid var(--color-border);
  border-radius: 1.25rem;
  background:
    repeating-linear-gradient(
      -45deg,
      transparent 0 11px,
      color-mix(in oklab, var(--color-border) 45%, transparent) 11px 12px
    );
  display: grid;
  place-items: center;
  padding: var(--space-md);
}

.lp-shot-placeholder {
  font-family: var(--font-body);
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  line-height: 1.9;
  text-align: center;
  color: var(--color-text-muted);
}

.lp-shot-caption {
  font-family: var(--font-body);
  font-size: 0.9rem;
  color: var(--color-text-muted);
  text-align: center;
}

/* ---------- 6.5 よりどころ (支えにしている考え方) ---------- */
.lp-roots {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  display: grid;
  gap: var(--space-lg) var(--space-xl);
  max-width: 48rem;
}

@media (min-width: 44rem) {
  .lp-roots {
    grid-template-columns: 1fr 1fr;
  }
}

/* 「小さな道」の細線モチーフを各項目の起点に */
.lp-root {
  padding-inline-start: var(--space-md);
  border-inline-start: 1px solid var(--color-border);
}

.lp-root-lead {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 1.2rem;
  line-height: 1.7;
  color: var(--color-heading);
  margin-block-end: var(--space-xs);
}

.lp-root-lead span {
  display: inline-block;
}

.lp-root-body {
  font-size: 0.95rem;
  line-height: 1.9;
  color: var(--color-text-muted);
  margin-block-end: var(--space-xs);
}

.lp-root-source {
  font-size: 0.8rem;
  line-height: 1.7;
  color: color-mix(in oklab, var(--color-warm) 80%, var(--color-text));
}

.lp-roots-note {
  text-align: center;
  max-width: 34rem;
  margin: var(--space-lg) auto 0;
  font-size: 0.95rem;
  line-height: 1.9;
  color: var(--color-text-muted);
}

.lp-roots-note span {
  display: inline-block;
}