/* STRBUFF の LP。色はアプリのダークとティール（src/ui/theme/tokens.ts の darkTeal）。
   規約類のページは /style.css を使うので、ここは分ける。 */
:root {
  color-scheme: dark;
  /* 色（darkTeal） */
  --bg: #121212;
  --raised: #1b1b1b;
  --card: #262626;
  --line: #3a3a3a;
  --text: #fafafa;
  --muted: #a1a1a1;
  --faint: #737373;
  --accent: #2dd4bf;
  --on-accent: #121212;
  --accent-soft: #12332f;
  /* 文字の大きさ（この段階だけを使う） */
  --fs-1: 13px;
  --fs-2: 15px;
  --fs-3: 17px;
  --fs-4: 22px;
  --fs-5: 30px;
  --fs-6: clamp(30px, 4.6vw, 52px);
  --fs-7: clamp(34px, 6.2vw, 80px);
  /* S・B・D の色（アプリの既定。DEFAULT_LIFTS） */
  --squat: #60a5fa;
  --bench: #34d399;
  --dead: #f59e0b;
  /* 余白（この段階だけを使う） */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 96px;
  /* 角丸 */
  --r-1: 6px;
  --r-2: 10px;
  --r-phone: 44px;
  /* 動き（減速して止まる） */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --page: 1200px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Noto Sans JP", sans-serif;
  font-size: var(--fs-2);
  line-height: 1.8;
  overflow-wrap: anywhere;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--accent); }
/* 日本語の見出しを語の途中で折らない（auto-phrase は Chrome。ほかは .ph で句ごとに折る） */
h1, h2, h3 { line-height: 1.35; margin: 0; text-wrap: balance; font-weight: 700; word-break: auto-phrase; }
.ph { display: inline-block; }
p { margin: 0; text-wrap: pretty; }
.lead, .fix, .pain, .steps p, .points li { word-break: auto-phrase; }
[hidden] { display: none !important; }
.num { font-variant-numeric: tabular-nums; }

.skip { position: absolute; left: var(--s-4); top: 0; transform: translateY(-150%); background: var(--accent); color: var(--on-accent); padding: var(--s-2) var(--s-3); border-radius: var(--r-1); z-index: 10; }
.skip:focus { transform: translateY(var(--s-2)); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* 上の帯。画面の上に浮かせたガラスの帯（2026-11-13 オーナー「元のやつのヘッダーを B パターンみたいにクリアガラスに」。
   上の帯に限って、スキルの「使わない型」から外した。docs/rebuild/lp.md の 2d） */
.top {
  position: fixed; top: var(--s-3); left: 50%; z-index: 5;
  width: min(var(--page), calc(100% - 2 * var(--s-4))); transform: translateX(-50%);
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
  padding: var(--s-2) var(--s-2) var(--s-2) var(--s-5);
  border-radius: var(--r-2); border: 1px solid rgb(255 255 255 / 0.08);
  background: rgb(18 18 18 / 0.55);
  -webkit-backdrop-filter: blur(20px) saturate(160%); backdrop-filter: blur(20px) saturate(160%);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.06), 0 8px 24px rgb(0 0 0 / 0.35);
}
.top .switch { background: rgb(255 255 255 / 0.04); border-color: rgb(255 255 255 / 0.08); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .top { background: var(--raised); }
}
@media (max-width: 560px) {
  .top { top: var(--s-2); width: calc(100% - 2 * var(--s-2)); padding-left: var(--s-4); }
}
/* ページの中のリンク・ダウンロード・メニューのボタン */
.top-links { display: flex; gap: var(--s-1); }
.top-links a { color: var(--muted); text-decoration: none; font-size: var(--fs-2); font-weight: 600; padding: var(--s-1) var(--s-3); border-radius: var(--r-1); white-space: nowrap; transition: color 200ms var(--ease), background-color 200ms var(--ease); }
.top-links a:hover { color: var(--text); background: rgb(255 255 255 / 0.06); }
.top-links .top-login-sm { display: none; }
.top-cta {
  background: var(--text); color: var(--bg); text-decoration: none; font-weight: 700; font-size: var(--fs-2);
  padding: var(--s-1) var(--s-4); border-radius: var(--r-1); white-space: nowrap;
  box-shadow: inset 0 -1px 0 rgb(0 0 0 / 0.12), 0 1px 0 rgb(255 255 255 / 0.2);
  transition: opacity 200ms var(--ease);
}
.top-cta:hover { opacity: 0.88; }
.top-menu { display: none; appearance: none; background: none; border: 1px solid rgb(255 255 255 / 0.12); border-radius: var(--r-1); width: 36px; height: 36px; flex: none; padding: 0; cursor: pointer; position: relative; }
.top-menu span { position: absolute; left: 10px; right: 10px; height: 2px; background: var(--text); transition: transform 300ms var(--ease); }
.top-menu span:first-child { top: 13px; }
.top-menu span:last-child { top: 19px; }
.top-menu[aria-expanded="true"] span:first-child { transform: translateY(3px) rotate(45deg); }
.top-menu[aria-expanded="true"] span:last-child { transform: translateY(-3px) rotate(-45deg); }
@media (max-width: 1080px) {
  .top-menu { display: block; }
  .top-links {
    display: none; position: absolute; left: 0; right: 0; top: calc(100% + var(--s-2)); flex-direction: column; gap: 0;
    padding: var(--s-2) var(--s-4); border-radius: var(--r-2); border: 1px solid rgb(255 255 255 / 0.08);
    background: var(--bg); box-shadow: 0 12px 32px rgb(0 0 0 / 0.5);
  }
  .top-links.is-open { display: flex; }
  .top-links a { padding: var(--s-3) 0; border-bottom: 1px solid var(--line); border-radius: 0; font-size: var(--fs-3); color: var(--text); }
  .top-links a:last-child { border-bottom: 0; }
  .top-links a:hover { background: none; }
}
@media (max-width: 720px) {
  .top .login, .top-cta { display: none; }
  .top-links .top-login-sm { display: block; }
}
/* 帯が浮いて重なるので、ページの中のリンクの行き先を帯の下にずらす */
[id] { scroll-margin-top: 88px; }
.logo { color: var(--text); display: inline-flex; align-items: center; }
.logo svg { fill: currentColor; display: block; }
.logo-full { height: 20px; width: auto; aspect-ratio: 1169.54 / 145; }
.logo-mark { display: none !important; width: 28px; height: 28px; }
.top-right { display: flex; align-items: center; gap: var(--s-3); }
.login { color: var(--text); text-decoration: none; font-weight: 600; font-size: var(--fs-2); padding: var(--s-1) var(--s-3); border: 1px solid var(--line); border-radius: 999px; white-space: nowrap; }
.login:hover { border-color: var(--muted); }
@media (max-width: 560px) {
  .logo-full { display: none !important; }
  .logo-mark { display: block !important; }
  .switch button { padding: var(--s-1) var(--s-3); }
}
.switch { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; padding: 3px; background: var(--raised); }
.switch button {
  appearance: none; border: 0; background: transparent; color: var(--muted);
  font: inherit; font-size: var(--fs-2); font-weight: 600;
  padding: var(--s-1) var(--s-4); border-radius: 999px; cursor: pointer;
  transition: background-color 300ms var(--ease), color 300ms var(--ease);
}
.switch button[aria-pressed="true"] { background: var(--accent); color: var(--on-accent); }

/* 最初の画面。映像を背景いっぱいに拡大して流し、暗い幕の上に見出しを重ねる。
   幕は読みやすさのため（背景の飾りのグラデーションではない）。下の端は背景の色に溶かす */
.hero {
  position: relative; overflow: hidden; isolation: isolate;
  min-height: min(94vh, 940px); /* 浮いた帯の下にも映像を流すため、帯の高さの分を足した */
  display: grid; place-items: center; text-align: center;
  padding: calc(var(--s-9) + var(--s-7)) var(--s-4) var(--s-8);
}
.hero-bg { position: absolute; inset: 0; z-index: -2; }
.hero-bg video { width: 100%; height: 100%; object-fit: cover; object-position: 20% 25%; transform: scale(1.6); transform-origin: 20% 25%; opacity: 0.6; }
.hero-shade {
  position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(ellipse 70% 60% at 50% 55%, rgb(18 18 18 / 0.78) 0%, rgb(18 18 18 / 0.45) 70%, rgb(18 18 18 / 0.2) 100%),
    linear-gradient(to bottom, rgb(18 18 18 / 0.35) 0%, rgb(18 18 18 / 0) 30%, rgb(18 18 18 / 0) 70%, var(--bg) 100%);
}
.hero-copy { max-width: 980px; display: flex; flex-direction: column; align-items: center; }
.hero h1 { font-size: var(--fs-7); letter-spacing: -0.01em; line-height: 1.25; }
.hero .hl { color: var(--accent); }
/* 競技の札。S・B・D の色の点で区切る */
.sports { list-style: none; margin: 0 0 var(--s-5); padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-2); }
.sports li { --c: var(--squat); display: inline-flex; align-items: center; gap: var(--s-2); padding: var(--s-1) var(--s-3); border: 1px solid var(--line); border-radius: 999px; background: rgb(18 18 18 / 0.6); color: var(--text); font-size: var(--fs-1); font-weight: 600; }
.sports li:nth-child(2) { --c: var(--bench); }
.sports li:nth-child(3) { --c: var(--dead); }
.sports li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--c); }
.hero .lead { margin-top: var(--s-5); color: var(--text); font-size: var(--fs-4); font-weight: 600; }
.points { list-style: none; margin: var(--s-5) 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-2) var(--s-6); color: var(--muted); font-size: var(--fs-3); }
.points li { display: inline-flex; align-items: center; gap: var(--s-2); text-align: left; }
.points li::before { content: ""; width: 18px; height: 18px; flex: none; border-radius: 50%; border: 2px solid var(--accent);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.5 2.5L12 5.5' fill='none' stroke='%232dd4bf' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px 12px no-repeat; }
.hero .button { margin-top: var(--s-6); padding: var(--s-3) var(--s-6); font-size: var(--fs-3); }

.button {
  display: inline-block; text-decoration: none; font-weight: 700; font-size: var(--fs-2);
  background: var(--accent); color: var(--on-accent);
  padding: var(--s-3) var(--s-5); border-radius: var(--r-2);
  transition: transform 300ms var(--ease), opacity 300ms var(--ease);
}
.button:hover { transform: translateY(-1px); }
.button:active { transform: translateY(1px); }
.button.is-disabled { background: var(--card); color: var(--muted); cursor: default; transform: none; }

/* 端末の枠。PC は窓、スマホは角丸の本体。影は付けない */
.frame { margin: 0; position: relative; background: #000; overflow: hidden; }
.frame video, .frame img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }
/* 縦横比は映像の範囲（縁と窓の帯の内側）に当てる（content-box）。縁や帯を内側に取ると映像がはみ出し、上の帯で左上のロゴが切れた（2026-11-14 オーナー「見切れてしまってブランドのところが見えない」） */
.frame-pc { box-sizing: content-box; aspect-ratio: 16 / 10; border: 1px solid var(--line); border-radius: var(--r-2); padding-top: 22px; background: var(--raised); }
.frame-pc::before { content: ""; position: absolute; top: 8px; left: 12px; width: 36px; height: 6px; border-radius: 3px; background: var(--line); }
.frame-pc video, .frame-pc img { border-top: 1px solid var(--line); }
.frame-phone { box-sizing: content-box; aspect-ratio: 780 / 1688; border-radius: var(--r-phone); border: 10px solid #000; outline: 1px solid var(--line); }
.frame-phone::before { content: ""; position: absolute; top: 10px; left: 50%; width: 30%; height: 22px; transform: translateX(-50%); border-radius: 12px; background: #000; z-index: 2; }

/* PC 用とスマホ用の映像を出し分ける */
.v-mobile { display: none !important; }
@media (max-width: 720px) {
  .v-desktop { display: none !important; }
  .v-mobile { display: block !important; }
  .frame-pc { aspect-ratio: 4 / 5; padding-top: 0; }
  .frame-pc::before { display: none; }
}

/* 課題と答え。1 行目（今の困りごと）は控えめに、2 行目（答え）を大きく。見えたら 1 行ずつ出す */
.pains { max-width: var(--page); margin: 0 auto; padding: var(--s-8) var(--s-4) var(--s-8); }
.pains h2 { font-size: var(--fs-5); margin-bottom: var(--s-6); }
.pain-list { list-style: none; margin: 0; padding: 0; counter-reset: pain; }
.pain-list li {
  --c: var(--squat);
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s-2) var(--s-7); align-items: baseline;
  padding: var(--s-5) 0; border-top: 1px solid var(--line); counter-increment: pain;
}
.pain-list li:nth-child(3n + 2) { --c: var(--bench); }
.pain-list li:nth-child(3n) { --c: var(--dead); }
.pain-list li:last-child { border-bottom: 1px solid var(--line); }
.pain { color: var(--muted); font-size: var(--fs-3); display: flex; gap: var(--s-3); align-items: baseline; }
.pain::before { content: counter(pain, decimal-leading-zero); flex: none; white-space: nowrap; color: var(--c); font-weight: 800; font-variant-numeric: tabular-nums; font-size: var(--fs-2); }
.fix { color: var(--text); font-size: var(--fs-4); font-weight: 700; line-height: 1.5; }
.fix-note { display: block; margin-top: var(--s-2); color: var(--muted); font-size: var(--fs-1); font-weight: 400; line-height: 1.6; }
.js .pain-list li { opacity: 0; transform: translateY(24px); transition: opacity 700ms var(--ease), transform 700ms var(--ease); }
.js .pain-list li.is-in { opacity: 1; transform: none; }

/* ストアのバッジ（公式の画像。Google Play の画像は周りに余白を含むので、見た目の高さを App Store に合わせる） */
.stores { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); margin-top: var(--s-5); }
.hero .stores { justify-content: center; }
.store img { display: block; height: 44px; width: auto; }
.store-google img { height: 66px; margin: -11px -10px; }
.get { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4); margin-top: var(--s-6); }
.get .stores { margin-top: 0; }
/* もう片方の向けへの案内（2026-11-12 オーナー。ヘッダー以外にも置く） */
.go-for { margin-top: var(--s-5); font-size: var(--fs-2); }
.go-for button { font: inherit; color: var(--accent); background: none; border: 0; padding: var(--s-2) 0; cursor: pointer; font-weight: 600; text-decoration: underline; text-underline-offset: 4px; }
.go-for button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.pricing .go-for { margin: var(--s-2) 0 var(--s-4); }
.button-ghost { background: transparent; color: var(--text); border: 1px solid var(--line); }
/* ログインなしのデモの入口。最初の画面では申し込みのボタンのすぐ下に、枠だけの控えめな形で置く */
.hero .button-demo { margin-top: var(--s-3); }
/* デモは PC で試してもらう案内（最初の画面のボタンの下と、場面 01 のリンクの横） */
.demo-note { font-size: var(--fs-1); color: var(--muted); }
.hero .demo-note { margin-top: var(--s-2); }
.scene-link .demo-note { display: block; margin-top: var(--s-1); }
.steps .scene-link { margin-top: var(--s-3); }
.scene-link a { color: var(--accent); font-weight: 600; text-decoration: underline; text-underline-offset: 4px; }
.scene-link a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }

/* PC とスマホ。PC の枠に重ねてスマホの枠を置く */
.devices { max-width: var(--page); margin: 0 auto; padding: var(--s-8) var(--s-4); display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--s-7); align-items: center; }
.devices h2 { font-size: var(--fs-5); }
.devices-copy p { margin-top: var(--s-4); color: var(--muted); font-size: var(--fs-3); word-break: auto-phrase; }
.devices-copy .note { font-size: var(--fs-1); color: var(--faint); }
.devices-media { position: relative; padding: 0 8% 10% 0; }
/* コーチへの一番の訴え（最初の画面のすぐ下）。見出しを 1 段大きくし、最後の句をティールにする */
.spotlight h2 { font-size: var(--fs-6); line-height: 1.25; }
.spotlight .hl { color: var(--accent); }
.device-pc { box-sizing: content-box; aspect-ratio: 16 / 10; border: 1px solid var(--line); border-radius: var(--r-2); padding-top: 22px; background: var(--raised); }
.device-pc::before { content: ""; position: absolute; top: 8px; left: 12px; width: 36px; height: 6px; border-radius: 3px; background: var(--line); }
.device-pc video { border-top: 1px solid var(--line); }
.device-phone { box-sizing: content-box; position: absolute; right: 0; bottom: 0; width: 24%; aspect-ratio: 780 / 1688; border-radius: 28px; border: 6px solid #000; outline: 1px solid var(--line); }
.device-phone::before { content: ""; position: absolute; top: 6px; left: 50%; width: 30%; height: 12px; transform: translateX(-50%); border-radius: 8px; background: #000; z-index: 2; }

/* 横に流れ続ける帯 */
.strip { overflow: hidden; border-block: 1px solid var(--line); background: var(--raised); padding: var(--s-4) 0; }
.strip-track { display: flex; gap: var(--s-4); width: max-content; animation: strip 80s linear infinite; }
.tile { margin: 0; flex: none; }
.tile-img { border: 1px solid var(--line); border-radius: var(--r-2); background-color: #000; background-repeat: no-repeat; }
.tile-pc .tile-img { width: 200px; height: 125px; background-size: 200% auto; }
.tile-phone .tile-img { width: 72px; height: 125px; background-size: 140% auto; background-position: 50% 15%; border-radius: 10px; }
.tile figcaption { margin-top: var(--s-2); font-size: var(--fs-1); font-weight: 600; color: var(--muted); display: flex; align-items: center; gap: var(--s-2); }
.tile figcaption::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
@keyframes strip { to { transform: translateX(-50%); } }

/* 場面。左に見出しの列、右に止まる枠 */
.scenes { max-width: var(--page); margin: 0 auto; padding: var(--s-8) var(--s-4); }
.scenes-inner { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s-7); align-items: start; }
.stage { grid-column: 2; grid-row: 1; position: sticky; top: calc(50vh - min(22vw, 270px)); }
.stage.frame-phone { width: min(300px, 70vw); justify-self: center; top: calc(50vh - 320px); }
.stage > video, .stage > .pending, .stage > .duo { position: absolute; inset: 0; opacity: 0; transition: opacity 500ms var(--ease); }
.stage > .is-active { opacity: 1; }
/* PC の窓にスマホの枠を重ねる（.devices-media と同じ重ね方）。高さは PC の窓（幅 92%・16:10）と下の余白 10% */
.stage-duo { aspect-ratio: 16 / 10.8; }
.duo { position: relative; padding: 0 8% 10% 0; }
.stage > .duo { padding: 0; }
.stage > .duo .device-pc { width: 92%; }
.duo .pending { position: absolute; inset: 0; }
.device-pc .pending { top: 22px; }
.step-frame { display: none; } /* スマホで見出しの下に出す映像（下の @media） */
.step-frame .pending { position: absolute; inset: 0; }
.pending { display: grid; place-items: center; color: var(--faint); font-size: var(--fs-1); background: var(--raised); }
.steps { grid-column: 1; grid-row: 1; list-style: none; margin: 0; padding: 0; counter-reset: step; }
/* 場面ごとに S・B・D の色を回し、今の場面に色の線を付ける */
.steps li { --c: var(--squat); min-height: 54vh; display: flex; flex-direction: column; justify-content: center; counter-increment: step;
  padding-left: var(--s-5); border-left: 3px solid var(--line); opacity: 0.35; transition: opacity 500ms var(--ease), border-color 500ms var(--ease); }
.steps li:nth-child(3n + 2) { --c: var(--bench); }
.steps li:nth-child(3n) { --c: var(--dead); }
.steps li.is-active { opacity: 1; border-left-color: var(--c); }
.steps li::before { content: counter(step, decimal-leading-zero); color: var(--c); font-weight: 800; font-size: var(--fs-4); font-variant-numeric: tabular-nums; margin-bottom: var(--s-2); line-height: 1; }
.steps h2 { font-size: var(--fs-5); }
.steps p { margin-top: var(--s-3); color: var(--muted); }

/* 料金・FAQ・説明 */
.pricing, .faq, .about { max-width: 760px; margin: 0 auto; padding: var(--s-8) var(--s-4); border-top: 1px solid var(--line); }
.pricing h2, .faq h2, .about h2 { font-size: var(--fs-4); margin-bottom: var(--s-4); }
.about h3 { font-size: var(--fs-3); margin: var(--s-5) 0 var(--s-2); }
.about p { color: var(--muted); margin-top: var(--s-2); }
.note, .sub { color: var(--muted); font-size: var(--fs-1); margin-top: var(--s-2); }
.price-table { width: 100%; border-collapse: collapse; margin: var(--s-4) 0; font-size: var(--fs-3); }
.price-table th { text-align: left; color: var(--muted); font-weight: 500; font-size: var(--fs-1); padding: var(--s-2) 0; border-bottom: 1px solid var(--line); }
.price-table td { padding: var(--s-3) 0; border-bottom: 1px solid var(--line); }
.price-table td.num { text-align: right; font-weight: 700; }
.price-table th:last-child { text-align: right; }
.button-row { margin-top: var(--s-5); }
/* プランの中身 */
.callout { border: 1px solid var(--accent); background: var(--accent-soft); border-radius: var(--r-2); padding: var(--s-5); margin: var(--s-4) 0 var(--s-5); }
.callout-title { font-size: var(--fs-5); font-weight: 800; line-height: 1.3; color: var(--text); margin-bottom: var(--s-2); word-break: auto-phrase; }
.callout p { word-break: auto-phrase; }
.callout .note { margin-top: var(--s-3); }
.plan-desc { display: block; color: var(--muted); font-size: var(--fs-1); margin-top: var(--s-1); word-break: auto-phrase; }
.pricing { max-width: 960px; }
.plan-title { font-size: var(--fs-3); margin: var(--s-6) 0 var(--s-3); }
.feature-groups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4); }
.feature-groups section { --c: var(--squat); border: 1px solid var(--line); border-top: 3px solid var(--c); border-radius: var(--r-2); padding: var(--s-4); background: var(--raised); }
.feature-groups section:nth-child(2) { --c: var(--bench); }
.feature-groups section:nth-child(3) { --c: var(--dead); }
.feature-groups section:nth-child(4) { --c: var(--accent); }
.feature-groups h4 { margin: 0 0 var(--s-2); font-size: var(--fs-2); color: var(--c); }
.feature-groups ul { list-style: none; margin: 0; padding: 0; }
.feature-groups li { position: relative; padding-left: var(--s-5); margin: var(--s-2) 0; font-size: var(--fs-2); line-height: 1.6; word-break: auto-phrase; }
.feature-groups li::before { content: ""; position: absolute; left: 0; top: 0.45em; width: 12px; height: 12px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3 3L13 4.5' fill='none' stroke='%232dd4bf' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; }
.compare { width: 100%; border-collapse: collapse; margin: var(--s-4) 0; font-size: var(--fs-2); }
.compare th, .compare td { padding: var(--s-3) var(--s-2); border-bottom: 1px solid var(--line); text-align: left; vertical-align: middle; line-height: 1.5; }
.compare thead th { color: var(--muted); font-weight: 500; font-size: var(--fs-1); }
.compare thead th:nth-child(n+2), .compare td { text-align: center; width: 24%; white-space: nowrap; }
.compare thead th:last-child, .compare td:last-child { color: var(--accent); font-weight: 700; }
.compare tbody th { font-weight: 500; word-break: auto-phrase; }
.compare td.yes::before { content: ""; display: inline-block; width: 16px; height: 16px; vertical-align: middle; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3 3L13 4.5' fill='none' stroke='%232dd4bf' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; }
.compare td.no::before { content: "—"; color: var(--faint); }
.scroll { overflow-x: auto; }
.faq details { border-bottom: 1px solid var(--line); padding: var(--s-3) 0; }
.faq summary { cursor: pointer; font-weight: 600; }
.faq details p { color: var(--muted); margin-top: var(--s-2); }

.foot {
  display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5);
  max-width: 760px; margin: 0 auto; padding: var(--s-5) var(--s-4) var(--s-8);
  border-top: 1px solid var(--line); color: var(--muted); font-size: var(--fs-1);
}

/* スマホ: 文の下に映像。場面は枠を上に止め、見出しが下を流れる */
@media (max-width: 960px) {
  .hero { min-height: 88vh; padding: calc(var(--s-8) + var(--s-6)) var(--s-4) var(--s-7); }
  .hero .lead { font-size: var(--fs-3); }
  .points { flex-direction: column; align-items: flex-start; font-size: var(--fs-2); }
  .hero-bg video { transform: scale(1.15); }
  .scenes-inner { grid-template-columns: 1fr; gap: 0; }
  /* 止まる枠を使わず、場面ごとに見出しの下へ映像を差し込む（2026-11-12 オーナー。01 の見出し → 映像 → 02 の見出し） */
  .stage { display: none; }
  .steps li { min-height: 0; opacity: 1; padding-bottom: var(--s-7); }
  .step-frame { display: block; margin-top: var(--s-5); width: 100%; }
  .step-frame.duo { padding: 0 6% 18% 0; } /* スマホの枠は PC の窓より下にはみ出すので、下を空ける */
  .step-frame.frame-phone { width: min(100%, 300px); align-self: center; }
  .pains h2 { font-size: var(--fs-4); }
  .pain-list li { grid-template-columns: 1fr; }
  .fix { font-size: var(--fs-3); }
  .feature-groups { grid-template-columns: 1fr; }
  .strip { padding: var(--s-3) 0; }
  .strip-track { gap: var(--s-3); }
  .tile-pc .tile-img { width: 144px; height: 90px; background-size: 230% auto; }
  .tile-phone .tile-img { width: 52px; height: 90px; border-radius: 8px; }
  .tile figcaption { margin-top: var(--s-1); }
  .devices { grid-template-columns: 1fr; gap: var(--s-6); }
  .devices h2 { font-size: var(--fs-4); }
  .devices-copy p { font-size: var(--fs-2); }
  .device-phone { width: 30%; border-width: 4px; border-radius: 20px; }
  .compare td { white-space: normal; width: 22%; font-size: var(--fs-1); }
  .steps li { min-height: 46vh; justify-content: flex-start; padding-top: var(--s-6); }
  .steps h2 { font-size: var(--fs-4); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .strip-track { animation: none; }
  .steps li { opacity: 1; }
  .js .pain-list li { opacity: 1; transform: none; }
  * { transition-duration: 1ms !important; }
}