@charset "UTF-8";
/* ============================================
   共通スタイル
   全ページで読み込む
   ============================================ */

:root{
  /* 色 */
  --bg:#fdf7fb;
  --card:#ffffff;
  --line:#e8dbe6;
  --text:#3d3340;
  --muted:#8b7d8c;
  --accent:#e8659b;

  /* 寸法 */
  --header-h:48px;
  --ad-h:50px;      /* 画面下に固定する広告の高さ(320×50) */
  --max-w:480px;
  --pad-v:4px;
  --pad-h:12px;
}

*{ box-sizing:border-box; }

html,body{ height:100%; }

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"Hiragino Sans","Noto Sans JP",sans-serif;
  -webkit-text-size-adjust:100%;
}

/* ---- ヘッダー(画面最上部に固定) ---- */
.site-header{
  position:fixed;
  top:0; left:0; right:0;
  height:var(--header-h);
  display:flex;
  align-items:center;
  background:var(--card);
  border-bottom:1px solid var(--line);
  z-index:10;
}
.site-header .inner{
  width:100%;
  max-width:var(--max-w);
  margin:0 auto;
  padding:0 14px;
  font-size:clamp(14px, 4vw, 20px);
  font-weight:600;
  letter-spacing:.06em;
}

/* ---- 広告(画面下に固定) ---- */
.ad{
  position:fixed;
  bottom:0; left:0; right:0;
  height:var(--ad-h);
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--card);
  border-top:1px solid var(--line);
  z-index:10;
}