/*
 * 全ページ共通の見た目
 *
 * 色はアプリ(lib/theme.dart)の themeColor / primaryColor に合わせている。
 *
 * 本文は端末の日本語書体を使う(Android は Noto Sans CJK、iPhone はヒラギノ)。
 * 以前はアプリと同じ Noto Sans JP を Google Fonts から読んでいたが、CSS だけで 340KB あり、
 * スマホで表示が 6 秒以上遅れていたのでやめた(2026-09-19、PageSpeed Insights のモバイルで 63 点)。
 * ロゴと数字の Ultra だけは、各ページの <head> で使う文字(Tatekan と数字)に絞って読む。
 * ロゴや番号に新しい文字を使うときは、その <link> の text= に足す
 */

:root {
  --yellow: #FFD300;
  --yellow-pale: #FFF6CC;
  --navy: #0B374A;
  --navy-light: #0F4760;
  --ink: #0B374A;
  --ink-sub: #3D5F6E;
  --paper: #FFFFFF;
  --line: rgba(11, 55, 74, 0.14);

  --font: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Noto Sans CJK JP", "BIZ UDPGothic", Meiryo, sans-serif;
  --font-logo: "Ultra", Georgia, serif;
}

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

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.8;
  /* 句読点のあきを詰める */
  font-feature-settings: "palt";
  overflow-wrap: anywhere;
}

img {
  max-width: 100%;
}

a {
  color: inherit;
}

/* 日本語を文節の切れ目で折り返す(対応していないブラウザではふつうに折り返す) */
html[lang="ja"] body {
  word-break: auto-phrase;
}

h1,
h2,
h3 {
  line-height: 1.35;
  font-weight: 900;
  text-wrap: balance;
}

/* 横の余白は画面が狭くても16px以上空ける */
.wrap {
  width: 100%;
  max-width: 960px;
  margin-inline: auto;
  padding-inline: max(16px, 4vw);
}

.wrap-narrow {
  max-width: 720px;
}

/* ---- ヘッダーとフッター ---- */

.site-header {
  background: var(--yellow);
}

.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 60px;
}

.logo {
  font-family: var(--font-logo);
  font-size: 26px;
  line-height: 1;
  color: var(--navy);
  text-decoration: none;
}

.lang-switch {
  border: 1px solid var(--navy);
  border-radius: 999px;
  padding: 4px 14px;
  background: transparent;
  color: var(--navy);
  font: inherit;
  font-size: 14px;
  cursor: pointer;
}

.site-footer {
  background: var(--navy);
  color: #fff;
  padding-block: 40px;
  font-size: 14px;
}

.site-footer ul {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  margin: 0 0 20px;
  padding: 0;
  list-style: none;
}

.site-footer a {
  color: #fff;
}

.site-footer small {
  color: rgba(255, 255, 255, 0.7);
}

/* ---- ボタンとストアへのリンク ---- */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 10px 28px;
  border: 0;
  border-radius: 999px;
  background: var(--navy);
  color: #fff;
  font: inherit;
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}

.button:hover {
  background: var(--navy-light);
}

.button-outline {
  background: transparent;
  color: var(--navy);
  box-shadow: inset 0 0 0 2px var(--navy);
}

.button-outline:hover {
  background: rgba(11, 55, 74, 0.08);
}

/* ストアのバッジを並べる(紹介ページと割り勘計算ツール) */
.store-links {
  /* バッジの高さ。Google Play のガイドラインが最低28pxを
     求めるので、狭い画面でも下回らない値にしている */
  --badge-h: clamp(44px, 11vw, 56px);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  /* 狭い画面ではバッジを縮めるのではなく縦に積む。縮めると最低28pxを割りかねないため */
  gap: 0;
  margin-inline: calc(var(--badge-h) / -4);
}

/* Google Play バッジのガイドラインに合わせている。
   https://partnermarketinghub.withgoogle.com/brands/google-play/google-play/lockups-icons-badges/
   - 高さは最低28px
   - 周囲にバッジ高さの1/4のclear spaceを空ける
   - 他ストアのバッジと同じか、それより大きく
   配布物に余白は含まれないのでCSSで空ける。
   App Store 側にも同じ余白を入れて左右の見た目を揃える */
.store-link {
  display: inline-block;
  padding: calc(var(--badge-h) / 4);
}

.store-link img {
  display: block;
  height: var(--badge-h);
  width: auto;
}

/* ---- 文章のページ(プライバシーポリシーなど) ---- */

.doc {
  padding-block: 40px 64px;
}

.doc h1 {
  margin: 0 0 8px;
  font-size: clamp(26px, 6vw, 34px);
}

.doc .updated {
  margin: 0 0 32px;
  color: var(--ink-sub);
  font-size: 14px;
}

.doc h2 {
  margin: 44px 0 12px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  font-size: 21px;
}

.doc h3 {
  margin: 28px 0 8px;
  font-size: 17px;
}

.doc p,
.doc ul,
.doc ol {
  margin: 0 0 14px;
}

.doc ul,
.doc ol {
  padding-left: 1.4em;
}

.doc li + li {
  margin-top: 4px;
}

.table-scroll {
  overflow-x: auto;
  margin: 0 0 16px;
}

.doc table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
  line-height: 1.6;
}

/* 見出しの列は折り返さず、狭い画面では内容の列を折り返す */
.doc td:first-child {
  white-space: nowrap;
  font-weight: 700;
}

.doc th,
.doc td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}

.doc th {
  background: var(--yellow-pale);
  font-weight: 700;
  white-space: nowrap;
}

/* ---- 日本語と英語の出し分け ----
   要素に data-lang="ja" / "en" を付けておき、<html lang> で見せる方を切り替える(lang.js)。
   JS が動かない環境では日本語だけが出る。
   見せるときはブラウザ既定の display に戻すので、data-lang は div・p・span・li など
   クラスで display を変えていない要素に付ける(ボタンなら中の span に付ける) */

[data-lang="en"] {
  display: none !important;
}

html[lang="en"] [data-lang="ja"] {
  display: none !important;
}

html[lang="en"] [data-lang="en"] {
  display: revert !important;
}