/* base.css — ビルダー出力サイトの共通ベース（全ページ・全セクションで共有）。
   SAFE_SUBSET 準拠の書法をここに集約する:
   - レイアウトは flex 統一（Studio は block を持たない）・margin:auto 不使用（中央寄せは親の align-items）
   - 中央コンテナは width:100% + max-width 併記（契約 1.1）
   - フォントは Web フォントを先頭に（契約 3.2）
   色・タイポ・余白は全て CSS 変数＝ビルダーの「サイト設定」が :root を上書きする（themeCSS）。
   ★ 既定値はサイト設定パネルの THEME_GROUPS と一致させること。 */

:root{
  --font:"Noto Sans JP";       /* 本文フォント（設定で差し替え。必ずWebフォント=契約3.2） */

  /* ── カラー ── */
  --accent:#E8794A;        /* メインカラー（ボタン・強調） */
  --accent-soft:#FFEEE4;   /* メインカラーの淡色（アイコン地） */
  --bg:#FDF8F3;            /* ページ地色 */
  --surface:#FFFFFF;       /* カード・ヘッダー地 */
  --line:#EFE6DC;          /* 罫線 */
  --ink:#3A322E;           /* 本文（濃） */
  --ink-2:#7A6F68;         /* 本文（淡） */
  --ink-3:#A99E95;         /* 補足（最淡） */
  --footer-bg:#3A322E;     /* フッター地 */
  --footer-ink:#D8CEC5;    /* フッター文字 */
  --footer-line:#574C45;   /* フッター罫線 */

  /* ── タイポグラフィ（既定サイズ。設定で上書き可） ── */
  --body-size:17px;        /* 本文サイズ */
  --body-line:1.9;         /* 本文の行間 */
  --h1-size:44px;          /* 見出し H1 */
  --h2-size:30px;          /* 見出し H2 */
  --h3-size:20px;          /* 見出し H3 */
  --eyebrow-size:15px;     /* アイブロウ（かんむりラベル） */
  --lead-size:17px;        /* リード文 */

  /* ── レイアウト ── */
  --inner-max:1120px;      /* コンテナ最大幅 */
  --section-pad-y:96px;    /* セクション上下余白 */
  --section-pad-x:24px;    /* セクション左右余白 */
}

/* ===== リセット ===== */
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0}
img{max-width:100%;display:block}
.material-symbols-outlined{font-family:"Material Symbols Outlined";font-weight:400;font-style:normal;font-size:32px;line-height:1;color:var(--accent)}

/* ===== ベース ===== */
body{
  font-family:var(--font),sans-serif;
  font-size:var(--body-size);line-height:var(--body-line);color:var(--ink);background:var(--bg);
  display:flex;flex-direction:column;
}
main{display:flex;flex-direction:column}

/* セクション共通：column＋flexで中央寄せ（余白autoは使わない） */
section{
  display:flex;flex-direction:column;align-items:center;
  padding:var(--section-pad-y) var(--section-pad-x);scroll-margin-top:88px;
}
.inner{width:100%;max-width:var(--inner-max);display:flex;flex-direction:column}

/* 見出し */
.eyebrow{font-family:var(--font),sans-serif;font-size:var(--eyebrow-size);font-weight:700;color:var(--accent);letter-spacing:.12em;margin:0 0 12px 0}
h1{font-family:var(--font),sans-serif;font-size:var(--h1-size);font-weight:700;line-height:1.5;color:var(--ink);letter-spacing:.02em;margin:0}
h2{font-family:var(--font),sans-serif;font-size:var(--h2-size);font-weight:700;line-height:1.6;color:var(--ink);letter-spacing:.02em;margin:0 0 16px 0}
h3{font-family:var(--font),sans-serif;font-size:var(--h3-size);font-weight:700;line-height:1.6;color:var(--ink);margin:0 0 8px 0}
p{font-family:var(--font),sans-serif;color:var(--ink);margin:0}
.lead{font-size:var(--lead-size);color:var(--ink-2);line-height:1.9;margin:0 0 8px 0}
.section-head{display:flex;flex-direction:column;align-items:center;text-align:center;margin:0 0 48px 0}

/* ボタン */
.btn-primary{
  display:flex;flex-direction:row;align-items:center;justify-content:center;
  font-family:var(--font),sans-serif;font-size:17px;font-weight:700;color:#FFFFFF;
  background:var(--accent);border:0;border-radius:16px;padding:16px 32px;min-height:56px;
  text-decoration:none;box-shadow:0 8px 24px color-mix(in srgb, var(--accent) 28%, transparent);
}
.btn-outline{
  display:flex;flex-direction:row;align-items:center;justify-content:center;
  font-family:var(--font),sans-serif;font-size:17px;font-weight:700;color:var(--accent);
  background:var(--surface);border:2px solid var(--accent);border-radius:16px;padding:14px 30px;min-height:56px;
  text-decoration:none;
}

/* ===== レスポンシブ：全セクション共通ぶん（設定値に比例して縮小） ===== */
@media (max-width:840px){
  section{padding:calc(var(--section-pad-y) * .67) calc(var(--section-pad-x) * .83)}
  h1{font-size:calc(var(--h1-size) * .77)}
  h2{font-size:calc(var(--h2-size) * .87)}
}
@media (max-width:540px){
  section{padding:calc(var(--section-pad-y) * .58) calc(var(--section-pad-x) * .67)}
  h1{font-size:calc(var(--h1-size) * .64)}
  h2{font-size:calc(var(--h2-size) * .73)}
  body{font-size:calc(var(--body-size) * .94)}
}