/* ホーム・アプリ・運営者情報で共通。一覧（list.html）は自前の style を持つが、色は同じ値にそろえる */
:root {
  --bg: #0A0F12;
  --panel: #11181C;
  --ink: #E8ECED;
  --muted: #7E8D8F;
  --line: #1C2529;
  --teal: #3CC3A0;
  --teal-line: #24483F;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 16px/1.7 "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", system-ui, sans-serif;
}
main {
  max-width: 480px;
  margin: 0 auto;
  padding-inline: 20px;
  padding-block: calc(40px + env(safe-area-inset-top, 0px)) calc(48px + env(safe-area-inset-bottom, 0px));
}
a { color: var(--teal); }
/* 語の途中で折らない（「プラ／イバシー」「ア／プリ」「探せま／す」になった）。折ってよい所で span を切る */
.nb { display: inline-block; }

/* ---- ホーム */
.profile { text-align: center; }
.profile img { width: 96px; height: 96px; border-radius: 50%; display: block; margin: 0 auto 12px; }
.profile h1 { font-size: 24px; line-height: 1.3; margin: 0; letter-spacing: .01em; }
.profile .handle { display: inline-block; font-size: 14px; color: var(--muted); text-decoration: none; margin-top: 2px; }
.profile .handle:hover, .profile .handle:focus-visible { color: var(--teal); }
.profile p { margin: 12px 0 0; color: var(--muted); font-size: 15px; text-wrap: balance; }

.links { display: grid; gap: 12px; margin-top: 28px; }
.btn {
  display: block;
  position: relative;
  padding: 15px 44px 15px 18px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 14px;
  color: var(--ink);
  text-decoration: none;
}
.btn::after {
  content: "→";
  position: absolute; right: 18px; top: 50%; transform: translateY(-50%);
  color: var(--teal);
}
.btn[target="_blank"]::after { content: "↗"; }
.btn b { display: block; font-size: 17px; line-height: 1.4; }
.btn .sub { display: block; color: var(--muted); font-size: 14px; margin-top: 2px; }
.btn:hover, .btn:focus-visible { border-color: var(--teal); outline: none; }
.btn:hover b, .btn:focus-visible b { color: var(--teal); }
/* 先頭の「駅・路線を探す」。bio の「↓ あなたの駅・路線を探す」から来た人の行き先なので、いちばん目立たせる */
.btn.primary { background: var(--teal); border-color: var(--teal); color: #06231B; }
.btn.primary::after { color: #06231B; }
.btn.primary .sub { color: #0E4A3A; }
.btn.primary:hover b, .btn.primary:focus-visible b { color: #06231B; }
.btn.primary:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.pixel { position: absolute; width: 1px; height: 1px; }

/* アプリ。名前と値段の下に、OS ごとのボタンを2つ並べる */
.app-card { padding: 15px 16px 16px 18px; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; }
.app-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.app-head b { font-size: 17px; line-height: 1.4; }
.price { font-size: 15px; font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
/* 2つ並べる。幅の狭い端末（320px 級）で入りきらないときは縦に積む（「版」だけ次の行に落ちた） */
.stores { display: grid; grid-template-columns: repeat(auto-fit, minmax(136px, 1fr)); gap: 10px; margin-top: 12px; }
.store {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  padding: 11px 8px;
  white-space: nowrap;
  background: var(--bg);
  border: 1px solid var(--teal-line);
  border-radius: 10px;
  color: var(--ink); font-size: 15px; font-weight: 700; text-decoration: none;
}
.store svg { width: 18px; height: 18px; color: var(--teal); flex: none; }
/* 横長のアイコン（Android ロボットの頭）。正方形に入れると小さく見える */
.store svg.wide { width: 24px; height: 15px; }
.store:hover, .store:focus-visible { border-color: var(--teal); color: var(--teal); outline: none; }

/*
  広告の枠。**PR の表記は小さくしない・薄くしない・枠の末尾に回さない。** 消費者庁の運用基準
  （第3の1(1)オ〜キ）が「末尾」「周りより小さい」「薄い色」を不明瞭な例に挙げている。
  だから枠の先頭に、本文の色で、リンクの2行目より大きく出す（list.html の .promo と同じ決まり）
*/
.promos { display: grid; gap: 10px; padding: 14px; border: 1px solid var(--teal-line); border-radius: 16px; }
.promos .pr { margin: 0 0 2px; font-size: 15px; color: var(--ink); }
.promos .pr span {
  font-weight: 700; letter-spacing: .06em; margin-right: 8px;
  border: 1px solid var(--muted); border-radius: 4px; padding: 0 6px;
}

.foot { margin-top: 36px; text-align: center; color: var(--muted); font-size: 13px; line-height: 1.9; }
.foot a { color: var(--muted); }
.foot a:hover, .foot a:focus-visible { color: var(--teal); }

/* ---- アプリ・運営者情報（読み物のページ） */
.back { display: inline-block; font-size: 14px; color: var(--muted); text-decoration: none; margin-bottom: 20px; }
.back:hover, .back:focus-visible { color: var(--teal); }
.doc h1 { font-size: 26px; line-height: 1.35; margin: 0 0 12px; }
.doc h2 { font-size: 17px; margin: 32px 0 6px; padding-top: 20px; border-top: 1px solid var(--line); }
.doc p, .doc li { color: #C3CBCC; font-size: 15px; }
.doc p { margin: 0 0 10px; }
.doc ul { margin: 0 0 10px; padding-left: 1.2em; }
.doc .dated { color: var(--muted); font-size: 13px; margin-top: 28px; }
.doc .btn { margin-top: 20px; }

/* ---- OS を選ぶページ（app.html）。Instagram のアプリのリンクから着く */
.doc .app-price { margin: 0 0 18px; font-size: 20px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.doc .stores { margin-top: 14px; }