/* おーやまダービーの公開紹介ページ。
   決済まわりの審査でも見られるページなので、何を売っていて・いくらで・換金できないことが
   一読して分かる作りにしてある。管理画面(/control/)とは完全に別物。

   レイアウトの方針：スマホは上から1列。PCは横幅を使って2列にする。
   720px幅の帯に文章を縦へ延々と積むと、PCでは「細長くて読む気がしない」画面になるため。 */
:root{
  --navy:#14304a; --green:#1f9d55; --gold:#e0b23c;
  --bg:#f5f8fa; --card:#fff; --line:#dde5ea; --muted:#63737f;
  --wrap:1160px;          /* PCでの最大幅。中身が2列に収まる幅 */
}
*{box-sizing:border-box}
body{
  margin:0; background:var(--bg); color:var(--navy);
  font:16px/1.85 "Segoe UI","Hiragino Kaku Gothic ProN","Yu Gothic UI",sans-serif;
}
a{color:var(--green)}

/* --- ヒーロー --- */
.hero{
  background:linear-gradient(160deg,#16344f,#0d2437);
  color:#fff; padding:56px 20px 52px; text-align:center;
  border-bottom:5px solid var(--gold);
}
.hero .inner{max-width:720px; margin:0 auto}
.hero .logo{font-size:52px; line-height:1; margin-bottom:8px}
.hero h1{margin:0 0 10px; font-size:38px; letter-spacing:.04em}
/* line-break:strict＝「ゲ／ーム」のように長音符の前で折れるのを防ぐ（日本語の禁則処理）。 */
.tagline{margin:0 0 28px; color:#c6d7e4; font-size:17px; line-break:strict}
.cta{
  display:inline-block; background:var(--green); color:#fff; text-decoration:none;
  font-weight:800; padding:14px 30px; border-radius:999px;
}
.cta:hover{filter:brightness(1.08)}
.cta-note{margin:12px 0 0; color:#9fb6c7; font-size:14px}

/* 配信で使っている画面をそのまま埋め込む枠。ウィジェットは1280×960固定なので、
   中身は触らずJSで縮小して収める（index.html末尾のscript参照）。 */
.hero-preview{display:none}
.widget-frame{
  position:relative; width:100%; aspect-ratio:4 / 3; overflow:hidden;
  border-radius:14px; background:#0d1b2a; box-shadow:0 10px 30px rgba(0,0,0,.35);
}
.widget-frame iframe{
  position:absolute; top:0; left:0; width:1280px; height:960px; border:0;
  transform-origin:0 0; display:block;
}
.preview-note{margin:10px 0 0; color:#9fb6c7; font-size:13px; text-align:center}

/* --- 参加の3ステップ（ヒーロー直下の帯） ---
   「何をすればいいか」は文章で読ませるより、番号付きで横に並べた方が速い。 */
.steps{background:#fff; border-bottom:1px solid var(--line); padding:30px 20px 34px}
.steps .inner{max-width:var(--wrap); margin:0 auto}
.steps h2{margin:0 0 18px; text-align:center; border:0; padding:0; font-size:19px}
.step-list{list-style:none; margin:0; padding:0; display:grid; gap:14px}
.step-list li{
  display:grid; grid-template-columns:auto 1fr; grid-template-rows:auto auto;
  gap:2px 14px; align-items:center;
  background:var(--bg); border:1px solid var(--line); border-radius:12px; padding:16px 18px;
}
.step-list .n{
  grid-row:1 / 3; width:38px; height:38px; border-radius:50%;
  background:var(--green); color:#fff; font-weight:800; font-size:19px;
  display:grid; place-items:center;
}
.step-list b{font-size:16px; line-height:1.5}
.step-list .d{color:var(--muted); font-size:13.5px; line-height:1.6}

/* --- 本文 --- */
h3{margin:22px 0 8px; font-size:17px; color:var(--green)}
h3:first-of-type{margin-top:8px}

main{max-width:720px; margin:0 auto; padding:8px 20px 60px}
section{
  background:var(--card); border:1px solid var(--line); border-radius:12px;
  padding:26px 26px 30px; margin:26px 0; box-shadow:0 2px 10px rgba(0,0,0,.04);
}
section.highlight{border-color:var(--green); border-width:2px}
h2{margin:0 0 14px; font-size:21px; border-left:5px solid var(--gold); padding-left:12px}
p{margin:0 0 14px}
code{background:#eef3f6; padding:2px 7px; border-radius:5px; font-size:15px}

dl{margin:0}
dt{font-weight:800; color:var(--green); margin-top:16px}
dt:first-child{margin-top:0}
dd{margin:2px 0 0; padding-left:0}

.notice{
  margin-top:22px; background:#fff8e6; border:1px solid var(--gold);
  border-radius:8px; padding:14px 16px; font-size:15px;
}

ol{margin:0 0 14px; padding-left:1.3em}
ol li{margin-bottom:6px}

table{width:100%; border-collapse:collapse; font-size:15px}
th,td{border:1px solid var(--line); padding:11px 13px; text-align:left; vertical-align:top}
th{background:#eef3f6; width:34%; font-weight:800; white-space:nowrap}
/* チャットで打つ言葉の一覧。左は短い呪文なので幅を詰める。 */
table.cmd th{width:34%; text-align:center; background:#f3f7fa}
table.cmd code{background:none; padding:0; font-size:15px; font-weight:800}

.two{display:grid; gap:22px}

/* 公開前に必ず埋める箇所を目立たせる（埋め忘れたまま出さないため） */
.todo{background:#ffecec; color:#a3271f; font-weight:700}

footer{
  text-align:center; color:var(--muted); font-size:14px;
  padding:28px 20px 40px; border-top:1px solid var(--line);
}

/* ===== PC（1000px〜） =====
   ヒーローは「文章＋実際のレース画面」の2列、本文も2列にして、
   横に空いている分を使う＝1画面あたりの情報量を増やし、縦を短くする。 */
@media (min-width:1000px){
  .hero{padding:52px 24px 48px}
  .hero .inner{
    max-width:var(--wrap); display:grid; grid-template-columns:minmax(0,420px) minmax(0,1fr);
    gap:44px; align-items:center; text-align:left;
  }
  .hero h1{font-size:42px}
  .tagline{font-size:18px}
  .hero-preview{display:block}

  .step-list{grid-template-columns:repeat(3,1fr); gap:16px}

  main{
    max-width:var(--wrap); display:grid; grid-template-columns:1fr 1fr;
    gap:0 26px; align-items:start;
  }
  /* 表や2列の中身が入るものは、細い列に押し込めず横いっぱいに使う。 */
  section.wide{grid-column:1 / -1}
  .two{grid-template-columns:1fr 1fr; gap:26px}
}

/* 横幅がもっとあるとき、全体をひと回り広げる。
   説明文が1行に収まりやすくなり、レース画面も大きく見せられる。 */
@media (min-width:1400px){
  :root{--wrap:1240px}
  .hero .inner{grid-template-columns:minmax(0,500px) minmax(0,1fr); gap:56px}
}

@media(max-width:600px){
  .hero{padding:44px 18px 40px}
  .hero h1{font-size:29px}
  section{padding:20px}
  th{width:38%; white-space:normal}
  table.cmd th{width:42%}
}