/* ============================================================
   そらのおしごと LP — 共有スタイル
   雛形: tenstella/strategy templates/lp/style.template.css

   色はアプリの見た目から取る:
     --accent      空の青(ゲームの空と海の色を、白地で文字に使える濃さにしたもの)
     --night       アイコンの夜空(export/ios/icon_1024.png の上端 #0D152C)
   ダークモードは @media (prefers-color-scheme: dark) が自動で効く。
   使わない部品(料金カード・ウェイトリスト・自作の App Store バッジ)は外した。
   ============================================================ */

:root {
  --accent: #1F6FC5;          /* 空の青。白地で 5.1:1(リンク・塗り) */
  --accent-dark: #17427A;     /* ホバー・淡い面の上の文字(アイコンの夜空寄り) */
  --accent-subtle: #E8F3FD;   /* 淡い空色の面(ヒーロー背景・カード) */
  --accent-border: #C6DDF4;
  --night: #0D152C;           /* アイコンの夜空 */
  --night-2: #1B2D60;
  --text: #18181b;
  --sub: #52525b;
  --muted: #71717a;
  --line: #eef0f3;
  --card-border: #e2e5ea;
  --bg: #ffffff;
  --bg-alt: #f7f9fc;
  --panel: #ffffff;
  --on-accent: #ffffff;        /* --accent の塗りの上の文字 */
}

@media (prefers-color-scheme: dark) {
  :root {
    --accent: #6CB4F5;              /* ダークの地では明るい空色(地 #0A0F1E で 8.9:1) */
    --accent-dark: #A9D3FA;
    --accent-subtle: rgba(31, 111, 197, 0.16);
    --accent-border: rgba(108, 180, 245, 0.36);
    --text: #f4f6fb;
    --sub: #aab3c5;
    --muted: #8590a6;
    --line: #1c2540;
    --card-border: #2a3556;
    --bg: #0A0F1E;                  /* アイコンの夜空をさらに暗くした地 */
    --bg-alt: #0F1629;
    --panel: #131b31;
    --on-accent: #0A0F1E;          /* 明るい空色の塗りの上は濃い文字(白だと 2:1 台になる) */
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans",
    "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic", Meiryo, sans-serif;
  -webkit-font-smoothing: antialiased;
  line-height: 1.7;
  overflow-wrap: anywhere;
}
html { scroll-behavior: smooth; }

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-dark); text-decoration: underline; }
img { max-width: 100%; height: auto; }

.wrap { max-width: 1040px; margin: 0 auto; padding-left: 24px; padding-right: 24px; }
.narrow { max-width: 720px; }

/* ── ヘッダー ─────────────────────────────── */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.site-header .wrap { display: flex; align-items: center; gap: 20px; padding-top: 14px; padding-bottom: 14px; }
.logo { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 17px; color: var(--text); letter-spacing: 0.02em; white-space: nowrap; }
.logo:hover { text-decoration: none; color: var(--text); }
.logo img { width: 28px; height: 28px; border-radius: 7px; }
.site-nav { display: flex; gap: 20px; margin-left: auto; align-items: center; font-size: 14px; }
.site-nav .nav-link { color: var(--sub); }
.site-nav .nav-link:hover { color: var(--text); text-decoration: none; }
/* 言語の切り替え(日本語 ⇄ English) */
.lang-switch { color: var(--sub); font-size: 13px; border: 1px solid var(--card-border); border-radius: 999px; padding: 4px 12px; white-space: nowrap; }
.lang-switch:hover { color: var(--text); text-decoration: none; border-color: var(--accent-border); }
.site-header .wrap > .lang-switch { margin-left: auto; }

/* ── ボタン ───────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--accent); color: var(--on-accent);
  padding: 13px 24px; border-radius: 999px;
  font-weight: 700; font-size: 16px; white-space: nowrap;
}
.btn:hover { background: var(--accent-dark); color: var(--on-accent); text-decoration: none; }
.btn.small { padding: 8px 16px; font-size: 13px; }
.btn.ghost { background: transparent; color: var(--text); border: 1px solid var(--card-border); font-weight: 600; }
.btn.ghost:hover { background: var(--accent-subtle); color: var(--text); }
.btn.on-accent { background: #ffffff; color: #17427A; }  /* 夜空のパネルの上。ダークでも同じ色 */
.btn.on-accent:hover { background: #E8F3FD; color: #17427A; }
/* 公開前は「App Store で近日公開」のボタン(data-todo)。App Store の公式バッジは公開後に
   Apple の素材をそのまま置く(自作・改変したバッジや Apple ロゴだけの利用は Apple の決まりでできない) */

/* ── セクション共通 ───────────────────────── */
.band { background: var(--bg-alt); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.section { padding-top: 96px; padding-bottom: 96px; }
.band .section, .section.in-band { padding-top: 80px; padding-bottom: 80px; }
.eyebrow { margin: 0 0 12px; font-size: 13px; font-weight: 700; color: var(--accent); letter-spacing: 0.08em; }
h1, h2, h3 { letter-spacing: 0.01em; text-wrap: pretty; line-height: 1.4; }
h2.section-title { margin: 0 0 12px; font-size: 30px; font-weight: 700; }
.lead { color: var(--sub); }
.section-lead { margin: 0 0 48px; font-size: 15px; max-width: 640px; }
.note-small { margin: 24px 0 0; font-size: 13px; color: var(--muted); }

.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }

/* ── ヒーロー ─────────────────────────────── */
.hero { background: linear-gradient(180deg, var(--accent-subtle), var(--bg)); border-bottom: 1px solid var(--line); }
.hero-grid {
  display: grid; grid-template-columns: 1fr 300px; gap: 56px; align-items: center;
  padding-top: 72px; padding-bottom: 72px;
}
.hero .label { margin: 0 0 10px; font-size: 13px; font-weight: 700; letter-spacing: 0.08em; color: var(--accent); }
.hero h1 { margin: 0 0 4px; font-size: 44px; font-weight: 800; }
.hero .meaning { margin: 0 0 20px; color: var(--muted); font-size: 15px; }
.hero .lead { margin: 0 0 28px; font-size: 17px; line-height: 1.9; max-width: 520px; }
.hero-cta { display: flex; align-items: center; gap: 12px 16px; flex-wrap: wrap; }
.cta-meta { flex-basis: 100%; font-size: 13px; color: var(--muted); }
/* ヒーローの絵 = アプリのアイコン(夜空の飛行機) */
.hero-visual { display: grid; place-items: center; }
.hero-visual img {
  width: 260px; height: 260px; border-radius: 22.5%;
  box-shadow: 0 20px 50px rgba(13, 21, 44, 0.28);
}

/* ── あそびかた(画面と説明のカード)───────── */
.play-card {
  margin: 0; display: flex; flex-direction: column;
  background: var(--panel); border: 1px solid var(--card-border);
  border-radius: 16px; overflow: hidden;
}
.play-card img { display: block; width: 100%; aspect-ratio: 1434 / 660; object-fit: cover; background: var(--accent-subtle); }
.play-card figcaption { padding: 22px 24px 26px; }
.play-card .eyebrow { margin-bottom: 6px; }
.play-card h3 { margin: 0 0 8px; font-size: 19px; font-weight: 700; }
.play-card p { margin: 0; font-size: 14px; line-height: 1.9; color: var(--sub); }

/* ── 保護者の方へ(安心ポイント)──────────── */
.trust-card { border: 1px solid var(--accent-border); background: var(--accent-subtle); border-radius: 14px; padding: 26px; }
.trust-card h3 { margin: 0 0 10px; font-size: 17px; font-weight: 700; color: var(--accent-dark); }
.trust-card p { margin: 0; font-size: 14px; line-height: 1.9; color: var(--sub); }

/* ── FAQ(details 式)─────────────────────── */
.faq { border-top: 1px solid var(--card-border); }
.faq details { border-bottom: 1px solid var(--card-border); }
.faq summary {
  cursor: pointer; padding: 18px 4px; font-size: 16px; font-weight: 600; color: var(--text);
  list-style: none; display: flex; justify-content: space-between; gap: 16px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--muted); font-weight: 400; }
.faq details[open] summary::after { content: "\2212"; }
.faq details p { margin: 0; padding: 0 4px 20px; font-size: 14px; line-height: 2; color: var(--sub); }

/* ── サポート・クレジット ─────────────────── */
.support-panel { text-align: center; }
.support-panel .lead { max-width: 560px; margin: 0 auto 28px; font-size: 15px; line-height: 1.9; }
.actions { display: flex; gap: 12px; flex-wrap: wrap; }
.support-panel .actions { justify-content: center; }
.credits { margin: 0; padding-left: 20px; font-size: 13px; line-height: 1.9; color: var(--sub); }
.credits li { margin-bottom: 4px; }

/* ── CTA ──────────────────────────────────── */
.cta-panel {
  background: linear-gradient(135deg, var(--night), var(--night-2));
  border-radius: 20px; padding: 64px 32px; text-align: center;
}
.cta-panel h2 { margin: 0 0 12px; font-size: 30px; font-weight: 700; color: #ffffff; }
.cta-panel p { margin: 0 0 32px; font-size: 15px; color: rgba(255, 255, 255, 0.86); }

/* ── フッター ─────────────────────────────── */
.site-footer { border-top: 1px solid var(--line); }
.site-footer .wrap { display: flex; align-items: center; gap: 16px 24px; flex-wrap: wrap; padding-top: 40px; padding-bottom: 40px; font-size: 13px; color: var(--sub); }
.site-footer .brand-name { font-weight: 700; color: var(--text); }
.site-footer nav { display: flex; gap: 8px 20px; flex-wrap: wrap; }
.site-footer a { color: var(--sub); }
.copyright { margin-left: auto; color: var(--muted); }

/* ── 法務・ドキュメントページ ─────────────── */
.doc { padding-top: 56px; padding-bottom: 96px; font-size: 15px; line-height: 2; color: var(--sub); }
.doc h1 { margin: 0 0 8px; font-size: 30px; font-weight: 700; color: var(--text); }
.doc h2 { margin: 40px 0 12px; font-size: 20px; font-weight: 700; color: var(--text); }
.doc .date { margin: 0 0 40px; font-size: 13px; color: var(--muted); }
.doc p { margin: 0 0 16px; }
.doc ul { margin: 0 0 16px; padding-left: 22px; display: flex; flex-direction: column; gap: 6px; }
.doc strong { color: var(--text); }
.doc a { color: var(--accent); }
.doc .note { background: var(--bg-alt); border: 1px solid var(--card-border); border-radius: 14px; padding: 16px 20px; margin: 16px 0; font-size: 14px; }
.doc dl { margin: 0; display: grid; grid-template-columns: 160px 1fr; row-gap: 20px; border-top: 1px solid var(--card-border); padding-top: 24px; }
.doc dt { font-weight: 700; color: var(--text); }
.doc dd { margin: 0; }
.doc .faq { margin-top: 8px; }

/* ── レスポンシブ ─────────────────────────── */
@media (max-width: 860px) {
  .hero-grid { grid-template-columns: 1fr; gap: 28px; padding-top: 40px; padding-bottom: 48px; }
  .hero-visual { order: -1; justify-items: start; }
  .hero-visual img { width: 112px; height: 112px; }
  .hero h1 { font-size: 34px; }
  .grid-3, .grid-2 { grid-template-columns: 1fr; }
  .section { padding-top: 64px; padding-bottom: 64px; }
  .band .section, .section.in-band { padding-top: 56px; padding-bottom: 56px; }
  h2.section-title, .cta-panel h2 { font-size: 24px; }
  .cta-panel { padding: 48px 20px; }
  .site-nav .nav-link { display: none; }  /* モバイルは言語の切り替えと CTA だけ残す */
  .site-nav { gap: 10px; }
  .doc dl { grid-template-columns: 1fr; row-gap: 4px; }
  .doc dd { margin-bottom: 16px; }
  .copyright { margin-left: 0; }
}
@media (max-width: 400px) {
  .wrap { padding-left: 16px; padding-right: 16px; }
  .site-header .wrap { gap: 10px; }
  .logo { font-size: 15px; }
  /* 狭い端末ではヘッダーの「近日公開」を隠す(ヒーローに同じボタンがある)。英語のロゴ名と重ならないように */
  .site-nav .btn.small { display: none; }
}