/* =============================================================
 * FALKES 屋号サイト（falkes.dev） style.css
 *  - 設計：S0_屋号サイト_設計.md §4（2026-09-16 改訂：FALKES 独自配色）
 *  - デザイン正本：プロジェクト直下 S0_屋号サイト_デザインプレビュー.html
 *  - 方針（2026-09-16 決定）：FALKES サイトはアプリとは別の事業者ブランドの
 *    見た目（白地・濃紺・青。参考 clecom.jp）。製品ページ（/arigatou-note/・
 *    /privacy/）だけアプリの色（桜 #B90C55・ロゴ）を「製品の印」として使う。
 *  - 読みやすさのルールは全ページ共通（本文18px・行間1.8・コントラスト4.5:1以上）
 *    ＝ DESIGN-GUIDE §3・§12。
 *  - 製品の色は src/design-tokens.css の値を直書き（サイトは静的HTMLで
 *    トークンファイルを取り込めないため＝意図的非連動。値を変えるときは
 *    design-tokens.css 側と一致させる）。
 * ============================================================= */
:root {
  /* ── FALKES サイトの色 ── */
  --f-navy:        #003953;  /* 濃紺：ワードマーク・見出し・フッター背景（対白 12.3:1） */
  --f-blue:        #176A9A;  /* 青：リンク・小見出しの左線（対白 5.9:1） */
  --f-blue-pale:   #D4E8F0;  /* 薄い青：現在ページのナビ背景 */
  --f-pink:        #EC7A9B;  /* ピンク：英文タグラインの頭文字 F・A・L・K・E・S だけに使う（対濃紺 4.6:1） */
  --f-bg:          #FFFFFF;  /* ページ背景：白 */
  --f-section:     #F4F7F9;  /* セクション背景：ごく薄いグレー */
  --f-line:        #D3DDE3;  /* 区切り線・カード枠 */
  --f-text:        #333333;  /* 本文（対白 12.6:1） */
  --f-text-sub:    #5B6E77;  /* 補足（対白 5.3:1） */
  --f-on-navy:     #FFFFFF;
  --f-on-navy-sub: #C9D6DE;  /* 濃紺の上の補足（8.3:1） */

  /* ── 製品（ありがとうノート）の印＝ src/design-tokens.css より ── */
  --p-primary:     #B90C55;  /* --color-primary（対白 6.5:1） */
  --p-primary-pale:#FDE8ED;  /* --color-primary-pale */

  /* ── 文字・余白（DESIGN-GUIDE §3・§5 の読みやすさルールを踏襲） ── */
  --font-en:   'Poppins', sans-serif;                        /* 英字ワードマーク・英文タグライン */
  --font-body: 'Noto Sans JP', 'Hiragino Sans', sans-serif;  /* 本文・見出し（ゴシック） */
  --font-product: 'Noto Serif JP', 'Hiragino Mincho ProN', serif; /* 製品名だけ明朝＝アプリの血統 */
  --fs-h1: 28px; --fs-h2: 22px; --fs-body: 18px; --fs-small: 15px; --fs-brand: 36px;
  --lh-heading: 1.4; --lh-body: 1.8;
  --sp-xs: 4px; --sp-sm: 8px; --sp-md: 16px; --sp-lg: 24px; --sp-xl: 32px; --sp-2xl: 48px; --sp-3xl: 64px;
  --pad-page: 20px; --pad-card: 24px;
  --radius: 12px;
  --tap: 48px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { background: var(--f-bg); }
body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--f-text);
  background: var(--f-bg);
  max-width: 720px;
  margin: 0 auto;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.site-main { flex: 1; }

/* ヘッダー：白地・ワードマーク＋ナビ */
.site-header { padding: var(--sp-md) var(--pad-page); background: var(--f-bg); border-bottom: 1px solid var(--f-line); }
.site-brand { display: inline-flex; align-items: baseline; gap: var(--sp-sm); text-decoration: none; }
.site-brand-en { font-family: var(--font-en); font-weight: 700; font-size: 26px; letter-spacing: 0.06em; color: var(--f-navy); }
.site-brand-ja { font-size: var(--fs-small); color: var(--f-text-sub); }
.site-nav { display: flex; flex-wrap: wrap; gap: var(--sp-xs) var(--sp-sm); margin-top: var(--sp-sm); }
.site-nav a {
  display: inline-flex; align-items: center; min-height: var(--tap);
  padding: 0 var(--sp-md); border-radius: 999px;
  color: var(--f-navy); text-decoration: none; font-weight: 500;
}
.site-nav a[aria-current="page"] { background: var(--f-blue-pale); }

/* ヒーロー帯（トップのみ）：濃紺 */
.site-hero { background: var(--f-navy); color: var(--f-on-navy); padding: var(--sp-2xl) var(--pad-page); }
.site-hero-name { font-family: var(--font-en); font-weight: 700; font-size: var(--fs-brand); letter-spacing: 0.08em; line-height: 1.2; }
.site-hero-name small { font-family: var(--font-body); font-weight: 400; font-size: var(--fs-h2); letter-spacing: 0.1em; margin-left: var(--sp-md); color: var(--f-on-navy-sub); }
.site-hero-tagline { font-family: var(--font-en); font-weight: 400; font-size: var(--fs-small); letter-spacing: 0.04em; color: var(--f-on-navy-sub); margin-top: var(--sp-sm); }
.site-hero-tagline .k { color: var(--f-pink); font-weight: 600; }
.site-hero-mission { margin-top: var(--sp-lg); padding-top: var(--sp-md); border-top: 1px solid rgba(255,255,255,0.25); font-size: var(--fs-body); }

/* 本文 */
.site-main { padding: var(--sp-xl) var(--pad-page) var(--sp-2xl); }
.site-main h1 { font-size: var(--fs-h1); font-weight: 700; line-height: var(--lh-heading); color: var(--f-navy); margin-bottom: var(--sp-lg); }
.site-main h2 {
  font-size: var(--fs-h2); font-weight: 700; line-height: var(--lh-heading); color: var(--f-navy);
  margin: var(--sp-xl) 0 var(--sp-md); padding-left: var(--sp-md); border-left: 4px solid var(--f-blue);
}
.site-main h2:first-of-type { margin-top: 0; }
.site-main p { margin-bottom: var(--sp-md); }
.site-main a { color: var(--f-blue); text-decoration: underline; text-underline-offset: 4px; }
.site-main ul { padding-left: 1.4em; margin-bottom: var(--sp-md); }
.site-main li { margin-bottom: var(--sp-xs); }
.site-note { font-size: var(--fs-small); color: var(--f-text-sub); }

.site-card { background: var(--f-section); border-radius: var(--radius); padding: var(--pad-card); margin-bottom: var(--sp-lg); }
.site-card h2 { margin-top: 0; }
.site-card p:last-child, .site-card ul:last-child { margin-bottom: 0; }

/* 定義リスト（事業者情報・特商法） */
.site-dl { display: grid; grid-template-columns: 9em 1fr; gap: var(--sp-sm) var(--sp-md); }
.site-dl dt { color: var(--f-text-sub); font-size: var(--fs-small); padding-top: 0.3em; }
.site-dl dd { margin: 0; }
@media (max-width: 480px) {
  .site-dl { grid-template-columns: 1fr; gap: 0; }
  .site-dl dt { padding-top: var(--sp-sm); }
  .site-dl dd { padding-bottom: var(--sp-sm); border-bottom: 1px solid var(--f-line); }
  .site-dl dd:last-child { border-bottom: none; }
}

/* ── 製品の印（/arigatou-note/・/privacy/ だけで使う） ── */
.product-badge {
  display: inline-block; font-size: 14px; font-weight: 500; letter-spacing: 0.04em;
  color: var(--p-primary); background: var(--p-primary-pale);
  padding: 2px var(--sp-md); border-radius: 999px; margin-bottom: var(--sp-md);
}
.product-hero { display: flex; align-items: center; gap: var(--sp-md); margin-bottom: var(--sp-lg); }
.product-hero img { width: 96px; height: 96px; flex: 0 0 96px; }
.product-name { font-family: var(--font-product); font-size: var(--fs-h2); font-weight: 600; color: var(--p-primary); }
.product-tagline { color: var(--f-text-sub); font-size: var(--fs-small); }
.product-card { background: var(--f-bg); border: 1px solid var(--f-line); border-left: 4px solid var(--p-primary); border-radius: var(--radius); padding: var(--pad-card); margin-bottom: var(--sp-lg); }
.product-card p:last-child, .product-card ul:last-child { margin-bottom: 0; }
.site-main h2.product-h2 { border-left-color: var(--p-primary); }

/* ポリシー本文 */
.site-policy-item { margin-bottom: var(--sp-lg); }
.site-policy-item:last-child { margin-bottom: 0; }
.site-policy-head { font-weight: 700; margin-bottom: var(--sp-sm); }
.site-operator { margin-top: var(--sp-xl); padding-top: var(--sp-md); border-top: 1px solid var(--f-line); color: var(--f-text-sub); }

/* フッター：濃紺 */
.site-footer { padding: var(--sp-lg) var(--pad-page) var(--sp-xl); background: var(--f-navy); color: var(--f-on-navy-sub); font-size: var(--fs-small); }
.site-footer .site-footer-brand { font-family: var(--font-en); font-weight: 700; font-size: 20px; letter-spacing: 0.06em; color: var(--f-on-navy); margin-bottom: var(--sp-sm); }
.site-footer a { color: var(--f-on-navy); }
.site-footer p { margin-bottom: var(--sp-xs); }