/* もぐポチ公式サイト 共通スタイル（index.html と food-data-sources.html の両方が読む）
   配色はアプリの現行3色構成（2026-08-07刷新）に合わせてある：
   地色 #FCF5F0 / ベース塗り #FDE4BC / 黄 #FBBC57 / 緑 #74B03F（塗り専用・上の文字は白）/ 文字 #33372C
   緑を「文字色」として使わない（旧 #558B2F の緑文字はアプリ側で廃止済み）。 */
:root{
  --bg:#FCF5F0;
  --card:#FFFFFF;
  --ink:#33372C;
  --sub:#6B7060;
  --line:#EADDCB;
  --surface:#FAF1E2;
  --green:#74B03F;
  --yellow:#FBBC57;
  --base:#FDE4BC;
  --warnInk:#BF5700;
  --radius:20px;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Hiragino Sans","Noto Sans JP","Yu Gothic",sans-serif;
  font-size:16px;line-height:1.8}
.wrap{max-width:920px;margin:0 auto;padding:8px 20px 64px}

/* ---- 共通ヘッダー（原本は index.html の SITE-NAV ブロック） ---- */
.site-head{background:var(--bg);border-bottom:1px solid var(--line)}
.site-head-in{max-width:920px;margin:0 auto;padding:14px 20px;
  display:flex;align-items:center;justify-content:space-between;gap:10px 16px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none}
.brand-dog{height:44px;width:auto}
/* ヘッダーは「もぐポチ」だけのロゴ（logo-sumi-b）。ローマ字入りは横に伸びて収まらない */
.brand-logo{height:25px;width:auto}
.site-nav{display:flex;gap:4px;flex-wrap:wrap}
.site-nav a{color:var(--ink);text-decoration:none;font-size:14px;font-weight:700;
  padding:7px 14px;border-radius:999px}
.site-nav a:hover{background:var(--base)}
.site-nav a[aria-current="page"]{background:var(--green);color:#FFFFFF}

/* ---- ヒーロー（ページ冒頭） ---- */
.hero{position:relative;padding:46px 0 10px;
  display:flex;align-items:center;justify-content:space-between;gap:28px}
.hero-icon{width:150px;height:auto;flex:none}
/* トップのヒーロー。スプラッシュ画面と同じ縦積み（犬→ロゴ→タグライン）の中央揃え。
   犬の高さ ≒ ロゴ（ローマ字込み）の1.5倍という比率もスプラッシュに合わせてある */
.hero-center{flex-direction:column;align-items:center;text-align:center;gap:0;padding:38px 0 16px}
.hero-center .status{margin:0 0 22px}
.hero-center .hero-icon{margin:0 0 18px}
.hero-center h1{margin:0}
.hero-center .tagline{margin:20px 0 10px}
/* サブページのヒーロー右上に置く小さい犬（装飾） */
.hero-dog{position:absolute;right:0;top:30px;width:112px;height:auto}
h1{font-size:40px;line-height:1.35;font-weight:900;margin:0 0 10px;letter-spacing:.01em}
/* トップの見出しはロゴ画像（ローマ字入り）。h1 のままにして見出しの意味を保つ */
h1 .hero-logo{display:block;height:80px;width:auto;margin:0}
.tagline{font-size:17px;font-weight:800;margin:0 0 8px}
.lead{color:var(--sub);font-size:15.5px;margin:0;max-width:36em}
.status{display:inline-block;background:var(--green);color:#FFFFFF;border-radius:999px;
  padding:4px 16px;font-size:13px;font-weight:700;margin:0 0 20px}

/* ---- 見出し（番号付き）----
   h2 の f-g / f-y / f-c クラスは、自作アイコンを飾りとして足すときのフック用に残してある */
h2{display:flex;align-items:center;gap:12px;font-size:22px;font-weight:800;margin:56px 0 16px}
h2 .num{font-size:14px;font-weight:800;letter-spacing:.1em;color:var(--sub)}
h3{font-size:16px;margin:24px 0 8px}
p{margin:0 0 12px}

/* ---- 本文の要素 ---- */
a{color:var(--ink);font-weight:700;text-decoration:underline;
  text-decoration-color:var(--green);text-decoration-thickness:2px;text-underline-offset:3px}
a:hover{opacity:.7}
.cta{display:inline-block;background:var(--green);color:#FFFFFF;font-weight:800;
  text-decoration:none;border-radius:999px;padding:13px 28px;font-size:15px}
.cta:hover{opacity:.9}
ul{margin:0 0 12px;padding-left:22px}
li{margin:0 0 6px}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:22px 24px;margin:14px 0}
/* ベース色のベタ塗りブロック。1ページに1つまで（増やすと地色との境目が消える） */
.note{background:var(--base);border-radius:var(--radius);padding:18px 22px;
  font-size:14.5px;margin:18px 0}
.subnote{font-size:14px;color:var(--sub)}

/* ---- 表 ---- */
table{border-collapse:collapse;width:100%;font-size:15px;background:var(--card)}
th,td{border:1px solid var(--line);padding:10px 12px;text-align:left;vertical-align:top}
th{background:var(--surface);font-weight:700}
.scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:14px}

/* ---- 法務ページ（利用規約・プライバシーポリシー） ----
   本文は原稿の1行をそのまま1要素の中身にしている（「1. 」「・」「(1)」も文字として残す）。
   字下げは text-indent のぶら下げで作る。ここを list-style に変えると
   行頭の記号が二重に出るので変えないこと。 */
.legal{max-width:38em;margin:0 auto}
.page-head{padding:30px 0 4px}
.page-head h1{font-size:27px;line-height:1.5;margin:0 0 10px}
.page-head .updated{font-size:13.5px;color:var(--sub);margin:0}
.legal .preamble{margin:18px 0 8px}
.legal h2{display:block;font-size:18px;margin:40px 0 14px;scroll-margin-top:14px}
.legal p{margin:0 0 14px}
.legal .item{padding-left:1.7em;text-indent:-1.7em}
.legal .subitem{padding-left:3.2em;text-indent:-1.5em}
.legal .bullet{padding-left:2.7em;text-indent:-1em;margin-bottom:8px}
.legal .note-line{font-size:14.5px;color:var(--sub);padding-left:1.4em;text-indent:-1.4em}
.legal .contact{margin-bottom:6px}
/* 目次（原稿には無い。読みやすさのために足した装飾） */
.toc{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:18px 22px;margin:26px 0 8px}
.toc-title{font-size:13px;font-weight:800;letter-spacing:.08em;color:var(--sub);margin:0 0 10px}
.toc ol{margin:0;padding-left:0;list-style:none}
.toc li{margin:0 0 7px;font-size:14.5px;line-height:1.6}
.toc a{text-decoration-thickness:1px}

/* ---- フッター ---- */
footer{margin-top:64px;padding-top:22px;border-top:1px solid var(--line);
  font-size:14px;color:var(--sub)}
.foot-nav{display:flex;gap:6px 18px;flex-wrap:wrap;margin:0 0 14px;padding:0}
.back-link{display:inline-block;margin:30px 0 0;font-weight:800}

@media (max-width:600px){
  .wrap{padding:4px 14px 52px}
  .site-head-in{padding:12px 14px}
  .hero{padding-top:30px;gap:14px}
  .hero-icon{width:124px}
  .hero-dog{display:none}
  h1{font-size:28px}
  h1 .hero-logo{height:64px}
  .hero-center{padding-top:26px}
  .hero-center .status{margin-bottom:18px}
  .hero-center .hero-icon{margin-bottom:14px}
  .hero-center .tagline{margin-top:16px}
  .brand-dog{height:38px}
  .brand-logo{height:22px}
  h2{font-size:19px;margin-top:44px}
  .card{padding:16px 16px}
  th,td{padding:8px 10px;font-size:14px}
}