/* トドログ 紹介サイト。Cloudflare Pages に置く静的ファイル。
   アプリ本体(static/)とは別物。ここのCSSをアプリと共有しないこと（片方の都合でもう片方が壊れる） */
:root{
  --brand:#2F6BFF; --ink:#12161F; --sub:#59616F; --line:#E4E8F0; --bg:#FFFFFF; --soft:#F6F8FC;
}
@media (prefers-color-scheme: dark){
  :root{ --ink:#EDF1F8; --sub:#98A2B4; --line:#252B36; --bg:#0E1117; --soft:#161A22; }
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Hiragino Sans","Noto Sans JP","Yu Gothic",sans-serif;
  font-size:16px; line-height:1.9; letter-spacing:.01em;
}
a{color:var(--brand)}
.wrap{max-width:720px; margin:0 auto; padding:0 20px}

/* ---- 共通ヘッダー / フッター ---- */
.site-head{border-bottom:1px solid var(--line)}
/* ★中身の箱は規約ページが .wrap（720px・読みやすさ優先）、紹介ページが .lp（1120px）と
   違うので、**クラス名ではなく「フッター直下のdiv」で指定する**。
   .wrap 決め打ちにしていたせいで、紹介ページだけリンクの間隔が消えていた（2026-08-29） */
.site-head > div{display:flex; align-items:center; gap:10px; height:60px}
.site-head > div a{display:flex; align-items:center; gap:10px; text-decoration:none; color:inherit}
.site-head > div img{width:28px; height:28px; border-radius:7px}
.site-head > div b{font-size:17px; letter-spacing:.02em}
.site-foot{border-top:1px solid var(--line); margin-top:64px; padding:28px 0 48px; color:var(--sub); font-size:14px}
.site-foot > div{display:flex; flex-wrap:wrap; gap:8px 20px}

/* ---- 規約・ポリシー本文 ---- */
.doc{padding:40px 0 8px}
.doc h1{font-size:26px; line-height:1.5; margin:0 0 6px}
.doc .meta{color:var(--sub); font-size:14px; margin:0 0 36px}
.doc h2{
  font-size:18px; margin:44px 0 12px; padding-top:20px; border-top:1px solid var(--line);
}
.doc h3{font-size:16px; margin:26px 0 8px}
.doc p, .doc li{color:var(--ink)}
.doc ul, .doc ol{padding-left:1.4em; margin:12px 0}
.doc li{margin:6px 0}
.doc table{border-collapse:collapse; width:100%; margin:16px 0; font-size:15px}
.doc th, .doc td{border:1px solid var(--line); padding:9px 11px; text-align:left; vertical-align:top}
.doc th{background:var(--soft); font-weight:600; white-space:nowrap}
.note{background:var(--soft); border:1px solid var(--line); border-radius:12px; padding:14px 18px; margin:18px 0}
.note p:first-child{margin-top:0} .note p:last-child{margin-bottom:0}
/* 公開前に埋める箇所。**赤いうちは公開しない** */
.todo{background:#FFF3F3; border:1px dashed #E06060; color:#9B2222; border-radius:10px; padding:12px 16px; margin:18px 0}
@media (prefers-color-scheme: dark){ .todo{background:#2A1618; color:#FFB4B4} }

/* =========================================================================
   紹介ページ（index.html）。2026-08-29 に作り直し
   ★**スマホの枠は1種類だけ。** 幅が変わっても「縁の太さ／角の丸み／画面の丸み」の比は
     変えない（--pw と --bez を 23:1 で組にする）。**枠がバラバラだと別の端末に見える。**
   ★**スクショはすべて 440×900。** 比率を1つに固定する。
   ★大きく見せる時は **`.is-bleed` で下を意図的に切る**（節が overflow:hidden で切る）。
     枠の途中で四角く切れると「崩れている」ように見えるので、**必ず節の縁で切ること。**
   ========================================================================= */
html, body{ overflow-x:hidden }
.lp{max-width:1120px; margin:0 auto; padding:0 28px}

/* ---- スマホの枠（これ1種類）---- */
.phone{
  --pw:230px; --bez:10px;
  position:relative; flex:0 0 auto;
  width:var(--pw); padding:var(--bez);
  border-radius:calc(var(--bez) * 3.2);
  background:#0E1013;
  box-shadow:0 24px 64px rgba(9,16,38,.30);
}
.phone img{display:block; width:100%; border-radius:calc(var(--bez) * 2.2)}
.phone.is-lg{--pw:290px; --bez:13px}
/* ★切る量は**節の余白(96px)より必ず大きく**すること。同じか小さいと「ぎりぎり収まっている」
   だけになり、わざと切ったように見えない（2026-08-29にmasatoさん指摘）。
   節の下辺から 70px ほど下へはみ出させる */
.phone.is-bleed{margin-bottom:-166px}

/* ---- 節の共通 ---- */
.band{padding:96px 0; overflow:hidden; position:relative}
.band.is-soft{background:var(--soft)}
.band.is-brand{background:var(--brand); color:#fff}
.band.is-brand .lead{color:#CFDEFF}
.band + .band{border-top:1px solid var(--line)}
.band.is-brand, .band.is-brand + .band{border-top:none}
.split{display:flex; align-items:center; gap:64px}
.split > .col{flex:1 1 0; min-width:0}
.split.is-flip{flex-direction:row-reverse}
.split.is-bottom{align-items:flex-end}

h2.big{font-size:32px; line-height:1.5; letter-spacing:.01em; margin:0 0 18px; font-weight:800}
.lead{font-size:16.5px; line-height:2; color:var(--sub); margin:0}

/* ---- ヒーロー ---- */
.hero{background:var(--brand); color:#fff; overflow:hidden; padding:72px 0 0}
.hero h1{font-size:46px; line-height:1.34; font-weight:800; margin:0 0 20px; letter-spacing:.01em}
.hero .lead{color:#D5E2FF; font-size:17px}
.hero-copy{padding-bottom:96px}
.hero-shots{display:flex; gap:18px; align-items:flex-end; justify-content:flex-end}
.hero-shots .phone{--pw:250px; --bez:11px; margin-bottom:-70px}
.hero-shots .phone:first-child{transform:rotate(-3.5deg) translateY(30px)}
.hero-shots .phone:last-child{transform:rotate(3deg)}

/* ---- 手順（①②③）。箇条書きの羅列にしない ---- */
.steps{margin:26px 0 0; padding:0; list-style:none; counter-reset:step}
.steps li{
  counter-increment:step; position:relative;
  padding:0 0 22px 54px; margin:0;
}
.steps li::before{
  content:counter(step); position:absolute; left:0; top:-2px;
  width:34px; height:34px; border-radius:50%;
  background:var(--brand); color:#fff;
  font-size:15px; font-weight:700; display:grid; place-items:center;
}
.steps li::after{                       /* 手順をつなぐ縦線。最後だけ消す */
  content:''; position:absolute; left:17px; top:36px; bottom:2px; width:1px; background:var(--line);
}
.steps li:last-child{padding-bottom:0}
.steps li:last-child::after{display:none}
.steps b{display:block; font-size:17px; margin-bottom:5px}
.steps span{color:var(--sub); font-size:15px; line-height:1.9}

/* ---- 数字を立てる（入金予定）---- */
.stat{
  display:inline-flex; align-items:baseline; gap:10px; margin-top:24px;
  background:var(--bg); border:1px solid var(--line); border-radius:14px; padding:14px 20px;
}
.stat b{font-size:26px; letter-spacing:.02em}
.stat span{font-size:14px; color:var(--sub)}

/* ---- 小さいカード ---- */
.cards{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(400px,100%),1fr)); gap:18px; margin-top:34px}
.card{background:var(--bg); border:1px solid var(--line); border-radius:16px; padding:22px 24px}
.card h3{margin:0 0 8px; font-size:17px}
.card p{margin:0; color:var(--sub); font-size:15px; line-height:1.9}

/* ---- 末尾 ---- */
.end{padding:60px 0 88px; text-align:center}
.end h2{font-size:26px; margin:0 0 10px}
.end p{color:var(--sub); margin:0 0 26px}
.end a{
  display:inline-block; background:var(--brand); color:#fff; text-decoration:none;
  font-weight:700; padding:15px 34px; border-radius:999px;
}

@media (max-width:860px){
  .lp{padding:0 20px}
  .hero{padding-top:44px}
  .hero h1{font-size:31px}
  .hero-copy{padding-bottom:52px}
  .split, .split.is-flip{flex-direction:column; align-items:flex-start; gap:38px}
  .split .col{width:100%}
  .band{padding:64px 0}
  h2.big{font-size:24px}
  /* ★2枚を横に並べたまま縮める。**画面に収まる幅にしないと、行ごと広がって本文がはみ出す** */
  .hero-shots{justify-content:center; gap:12px}
  .hero-shots .phone{--pw:158px; --bez:7px; margin-bottom:-40px}
  .phone.is-lg{--pw:250px; --bez:11px}
  .phone.is-bleed{margin-bottom:-118px}
}

/* 商標と非提携の表示。**フッターの一番下・小さく・でも読める大きさで。**
   ★狙いは商標の帰属そのものより「公式アプリだと誤解されないこと」（不正競争防止法・ストアの審査）。
   ★運営会社の正式名称は書かない。**取り違えるほうが害が大きい**ので「各社の商標」に留める。 */
.site-foot .tm{
  flex-basis:100%; margin:14px 0 0; font-size:12.5px; line-height:1.85; color:var(--sub);
}

/* =========================================================================
   動き。2026-08-29
   ★**`prefers-reduced-motion: reduce` で全部止める。**（HIG。アプリ本体と同じ方針）
     止めた時に「見えなくなる」ことがないよう、**消す側ではなく出す側を既定**にしてある
     （.reveal は JS が付ける。JSが動かない環境では最初から見えている）。
   ★動きの質はアプリ本体に合わせる。イージングはシートと同じ cubic-bezier(.16,1,.3,1)。
   ========================================================================= */
:root{ --ease-out-soft:cubic-bezier(.16,1,.3,1) }

/* ★ヒーローは**JSを一切使わず、CSSだけで出す。**
   最初の画面をJSに依存させない（IntersectionObserverが動かない環境で真っ白になる。
   2026-08-29にヘッドレスの撮影で実際に真っ白になった）。
   `backwards` なので終わった後は素の状態＝**必ず見える**。 */
@keyframes riseIn{from{opacity:0; transform:translate3d(0,44px,0)} to{opacity:1; transform:none}}
.hero-copy{animation:riseIn .9s var(--ease-out-soft) backwards}
.hero-shots{animation:riseIn 1.05s var(--ease-out-soft) .22s backwards}

/* ここから下は JS が出す。**隠すのも JS**（.js-motion を付けてから）なので、
   JSが動かなければ最初から全部見えている */
.js-motion .reveal{opacity:0; transform:translate3d(0,44px,0)}
.js-motion .reveal.is-in{
  opacity:1; transform:none;
  transition:opacity .55s ease-out, transform .85s var(--ease-out-soft);
  transition-delay:var(--d, 0s);
}

/* スマホがゆっくり呼吸する。**振れ幅は小さく**（大きいと安っぽくなる） */
@keyframes floatA{0%,100%{transform:rotate(-3.5deg) translateY(32px)} 50%{transform:rotate(-4.6deg) translateY(10px)}}
@keyframes floatB{0%,100%{transform:rotate(3deg) translateY(0)}       50%{transform:rotate(4.1deg) translateY(-18px)}}
.js-motion .hero-shots .phone:first-child{animation:floatA 5s ease-in-out infinite; animation-delay:1.2s}
.js-motion .hero-shots .phone:last-child {animation:floatB 6s ease-in-out infinite; animation-delay:1.5s}

/* 触れると持ち上がる。「押せる」と分かる最小限だけ */
.card{transition:transform .3s var(--ease-out-soft), box-shadow .3s var(--ease-out-soft)}
.card:hover{transform:translateY(-4px); box-shadow:0 12px 30px rgba(12,20,44,.08)}
.end a{transition:transform .25s var(--ease-out-soft), box-shadow .25s var(--ease-out-soft)}
.end a:hover{transform:translateY(-2px); box-shadow:0 12px 28px rgba(47,107,255,.35)}
.band .phone{transition:transform .5s var(--ease-out-soft)}
.band .phone:hover{transform:translateY(-8px)}

/* 手順の丸が、順番に色づく */
.js-motion .steps li::before{transform:scale(.6); opacity:0}
.js-motion .steps li.is-in::before{
  transform:none; opacity:1;
  transition:transform .5s var(--ease-out-soft), opacity .4s ease;
  transition-delay:var(--d, 0s);
}

@media (prefers-reduced-motion: reduce){
  .js-motion .reveal, .js-motion .reveal.is-in,
  .js-motion .steps li::before, .js-motion .steps li.is-in::before{
    opacity:1 !important; transform:none !important; transition:none !important;
  }
  .js-motion .hero-shots .phone{animation:none !important}
  .hero-copy, .hero-shots{animation:none !important}
  .card:hover, .end a:hover, .band .phone:hover{transform:none}
}

/* 節のスマホは、**文字と違う入り方**にする（同じ動きが並ぶと単調に見える）。
   少し傾いて、下から起き上がってくる */
.js-motion .band .phone.reveal{transform:translate3d(0,64px,0) rotate(3deg) scale(.96)}
.js-motion .band .phone.reveal.is-in{
  transform:none;
  transition:opacity .5s ease-out, transform 1s var(--ease-out-soft);
  transition-delay:var(--d, 0s);
}

/* ヒーローのスマホの中身が切り替わる。**JSを使わない**（CSSのkeyframesだけ）。
   ★3枚を重ねて、順ぐりに不透明度を入れ替える。1枚目だけが高さを決める（あとは absolute）。
   ★動きを減らす設定の人には**1枚目で止める**。 */
.screens{position:relative; border-radius:calc(var(--bez) * 2.2); overflow:hidden}
.screens img{display:block; width:100%; border-radius:0}
.screens img + img{position:absolute; inset:0; opacity:0}
@keyframes screenCycle{
  0%, 27% { opacity:1 }
  34%, 94%{ opacity:0 }
  100%    { opacity:1 }
}
.js-motion .screens img{animation:screenCycle 10.5s linear infinite}
.js-motion .screens img:nth-child(2){animation-delay:3.5s}
.js-motion .screens img:nth-child(3){animation-delay:7s}
@media (prefers-reduced-motion: reduce){
  .js-motion .screens img{animation:none !important}
  .js-motion .screens img + img{opacity:0 !important}
}