/*
 * gear-manager.com の LP。
 * 色はここの変数だけを見ればよい。ブランドの原本は
 * shot-review/docs/design/brand/README.md。
 */
:root {
  --bg-dark: #101A18;
  --bg-dark-2: #0B1211;
  --ink: #1A2728;
  --ink-soft: #43544F;
  --paper: #FBFCFB;
  --tint: #EDF3EF;
  --on-dark: #F4F7F5;
  --on-dark-soft: #C7D6CE;
  --line: #E3E9E5;
  --frame: #1A2728;
  --frame-dark: #2A3A34;
  --measure: 1080px;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans",
               "Noto Sans JP", "Yu Gothic", sans-serif;
  font-size: 16px;
  line-height: 1.8;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; }

a { color: inherit; }

.wrap {
  max-width: var(--measure);
  margin: 0 auto;
  padding: 0 20px;
}

/* ---------- ヘッダ ---------- */
/* スマホは2段（ロゴ / アンカー）。ロゴは幅 160px を下回れないため。 */
.site-header {
  background: var(--bg-dark);
  padding: 14px 20px 10px;
}
.site-header .inner {
  max-width: var(--measure);
  margin: 0 auto;
}
.site-logo { display: block; line-height: 0; }
.site-logo img { width: 168px; height: auto; }
.site-nav {
  display: flex;
  gap: 18px;
  margin-top: 8px;
  font-size: 12px;
}
.site-nav a {
  color: var(--on-dark-soft);
  text-decoration: none;
}
.site-nav a:hover { color: var(--on-dark); }

/* ---------- ストアバッジ ---------- */
/* App Store バッジ（108.85x40）と Google Play バッジ（646x250）は
   余白の取り方が違う。Play 側を少し大きくして負のマージンで相殺すると、
   ボタンの見えている高さが揃う。 */
.badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}
.badges a { display: block; line-height: 0; }
.badge-apple  { height: 44px; width: auto; }
.badge-google { height: 52px; width: auto; margin: -4px -3px; }

/* ---------- 端末フレーム ---------- */
.shot {
  margin: 0;
  border: 6px solid var(--frame);
  border-radius: 22px;
  overflow: hidden;
  background: #000;
  line-height: 0;
  flex: none;
}
.shot img { display: block; width: 100%; height: auto; }
.hero .shot { border-color: var(--frame-dark); box-shadow: 0 14px 34px rgba(0, 0, 0, .38); }

/* ---------- ヒーロー ---------- */
.hero {
  background: var(--bg-dark);
  color: var(--on-dark);
  padding: 22px 0 44px;
}
/* 見出しは <br> で「あなたのラウンドを」と「「スコア」から「データ」へ。」に
   割ってある。後半は全角14文字あり、1行に収めるには font-size が
   (画面幅 - 40) / 14 以下でなければならない。26px 固定だと 420px 未満で
   「へ。」だけが3行目に落ち、320px では「デー／タ」と「データ」の途中で割れる。
   vw で追従させ、上限を 26px に留める。 */
.hero h1 {
  /* clamp() 非対応（Safari 13.1 未満）だと宣言ごと無効になり、UA 既定の
     2em = 32px まで上がってしまう。先に 26px を書いて落とし所を作る。 */
  font-size: 26px;
  font-size: clamp(19px, 5.8vw, 26px);
  line-height: 1.5;
  font-weight: 800;
  margin: 0 0 14px;
}
.hero .lead {
  color: var(--on-dark-soft);
  font-size: 15px;
  margin: 0 0 24px;
}
.hero .badges { margin-bottom: 30px; }
.hero-shots {
  display: flex;
  gap: 14px;
  justify-content: center;
}
.hero-shots .shot { width: 150px; }

/* ---------- セクション共通 ---------- */
.section { padding: 48px 0; }
/* かつては SHOT REVIEW という文字だったが、ロゴに差し替えた（issue #11）。
   文字向けの指定は残さない。ブランドの最小幅は 160px なので 180px で置く。 */
.section .kicker {
  margin: 0 0 14px;
  line-height: 0;
}
.section .kicker img { width: 180px; height: auto; }
.section h2 {
  font-size: 21px;
  line-height: 1.55;
  font-weight: 800;
  margin: 0 0 16px;
}
.section-lead {
  font-size: 14px;
  color: var(--ink-soft);
  margin: 0 0 32px;
  max-width: 34em;
}

/* ---------- 機能3つ ---------- */
.feature {
  display: flex;
  gap: 18px;
  align-items: center;
  margin-bottom: 36px;
}
.feature .shot { width: 130px; }
.feature h3 {
  font-size: 17px;
  font-weight: 700;
  margin: 0 0 8px;
}
.feature p {
  font-size: 14px;
  color: var(--ink-soft);
  margin: 0;
}

/* ---------- 無料の範囲 ---------- */
.free {
  background: var(--tint);
  border-radius: 12px;
  padding: 20px 22px;
  font-size: 14px;
  color: var(--ink-soft);
}
.free b {
  display: block;
  font-size: 15px;
  color: var(--ink);
  margin-bottom: 4px;
}
/* 機能3つを読み終えた位置の導線。これが無いと、ダウンロードするのに
   ヒーローまで戻る必要がある（issue #8）。 */
.free .badges { margin-top: 18px; }

/* ---------- ギアマネ ---------- */
.gear {
  background: #fff;
  border-top: 1px solid var(--line);
}
.gear .gear-logo { width: 190px; height: auto; margin-bottom: 18px; }
.gear .gear-body {
  display: flex;
  gap: 18px;
  align-items: center;
}
.gear .shot { width: 120px; }
.gear h2 { font-size: 18px; margin: 0 0 10px; }
.gear p { font-size: 14px; color: var(--ink-soft); margin: 0 0 18px; }

/* ---------- フッタ ---------- */
.site-footer {
  background: var(--bg-dark-2);
  color: #8FA79C;
  padding: 30px 0;
  font-size: 12px;
}
.site-footer ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin: 0 0 16px;
  padding: 0;
}
.site-footer a { color: var(--on-dark-soft); text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }
.site-footer .analytics-note {
  margin: 0 0 12px;
  font-size: 11px;
  line-height: 1.7;
  max-width: 48em;
}
/* 文中のリンクは周りの文字と色の差が小さいので、下線で見分けられるようにする */
.site-footer .analytics-note a { text-decoration: underline; }
.site-footer .copy { margin: 0; font-size: 11px; }

/* ---------- PC ---------- */
@media (min-width: 768px) {
  body { font-size: 17px; }

  .site-header {
    padding: 16px 20px;
  }
  .site-header .inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .site-nav { margin-top: 0; font-size: 13px; gap: 24px; }

  .hero { padding: 40px 0 64px; }
  .hero .lead { font-size: 16px; max-width: 34em; }
  /* 900px 未満はヒーローが縦積みで横に余るので、スクショを大きく見せる */
  .hero-shots .shot { width: 200px; }

  .section { padding: 72px 0; }
  .section h2 { font-size: 26px; margin-bottom: 20px; }
  .section-lead { font-size: 15px; margin-bottom: 48px; }

  /* 行を 1080px いっぱいに広げると、縦長のスクショの隣に2行の文章という
     形になり、右（偶数行は左）に大きな空白が残って間延びする。行の幅を
     絞ったうえで左右交互に寄せると、文章が必ずスクショの隣に来る。 */
  .feature {
    gap: 36px;
    margin-bottom: 56px;
    max-width: 720px;
  }
  .feature:nth-of-type(even) {
    flex-direction: row-reverse;
    margin-left: auto;
  }
  .feature .shot { width: 196px; }
  .feature h3 { font-size: 20px; }
  .feature p { font-size: 15px; }

  /* 機能の行と同じ幅に揃える。ここだけ 1040px のままだと、上の3行より
     4割広い帯が続くことになり、揃え忘れに見える。 */
  .free { max-width: 720px; }

  /* ギアマネも同じ。フル幅だと 186px のスクショの隣に1段落が 1040px まで
     伸びて、1行が 95 文字前後になる（読みやすいのは 45〜75 文字）。 */
  .gear .gear-body { gap: 40px; max-width: 720px; }
  .gear .shot { width: 186px; }
  /* margin-bottom も書く。`.section h2` とは詳細度が同じで、この
     メディアクエリ内の `.section h2 { margin-bottom: 48px }` の方が後に
     来るため、指定しないと見出しと本文が 48px 離れる。 */
  .gear h2 { font-size: 22px; margin-bottom: 14px; }
}

/* ---------- ヒーローを2カラムにする ---------- */
/* 768px で2カラムにすると、テキスト列が 350px 前後しか取れず、見出しの
   「「スコア」から「データ」へ。」が入りきらずに「へ。」だけが落ちる。
   横に並べるのは 900px から。それ未満は縦積みのまま全幅を使わせる。 */
@media (min-width: 900px) {
  .hero .inner {
    display: flex;
    align-items: center;
    gap: 48px;
  }
  .hero .hero-text { flex: 1; }
  .hero h1 { font-size: 28px; }
  .hero-shots .shot { width: 156px; }
}

/* ---------- 広い PC ---------- */
@media (min-width: 1024px) {
  .hero h1 { font-size: 34px; }
  .hero-shots .shot { width: 186px; }
}