/* =========================================================
   らくらく家系図メーカー  サイト共通スタイル
   ホーム（/）とニュースルーム（/news/）で共有する。
   見出し = Zen Maru Gothic（丸ゴシック）/ 本文 = Noto Sans JP
   ページ固有のスタイルは各ページの <style> に置く。
   ========================================================= */
/* 配色はアプリ本体 constants/theme.ts の値をそのまま使う */
:root{
  --paper:    #FFFFFF;   /* Colors.background */
  --paper-2:  #F7F7F8;   /* Colors.surface */
  --white:    #FFFFFF;
  --surface:  #F7F7F8;

  --ink:      #1A1A1A;   /* Colors.primary */
  --ink-soft: #5C5C5C;   /* Colors.textSecondary */
  --ink-faint:#9E9E9E;   /* Colors.textTertiary */

  --moss:     #2D9D5C;   /* Colors.accent */
  --moss-deep:#1E7A42;   /* Colors.accentDark */
  --moss-soft:#E8F5ED;   /* Colors.accentLight */

  --clay:     #C4786E;   /* Colors.female */
  --clay-soft:#FFF3E0;   /* Colors.accentYellow */

  --line:     #EFEFEF;   /* Colors.border */
  --line-soft:#F5F5F5;   /* Colors.borderLight */

  --male:     #4A90B8;   /* Colors.male */
  --other:    #5FA87A;   /* Colors.other */

  /* ヒーローのベタ塗りのみ、おやびんのブランドカラーを使う */
  --oyabin:     #F2635F;
  --oyabin-deep:#D94E4A;

  --radius:   20px;      /* BorderRadius.lg */
  --shadow-sm:0 1px 6px rgba(0,0,0,.04);
  --shadow:   0 3px 12px rgba(0,0,0,.06);
  --shadow-lg:0 6px 20px rgba(0,0,0,.08);
}
*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{
  font-family:"Noto Sans JP", sans-serif;
  background:var(--paper);
  color:var(--ink);
  line-height:1.85;
  -webkit-font-smoothing:antialiased;
}
.maru{ font-family:"Zen Maru Gothic", sans-serif; }
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
.wrap{ max-width:980px; margin:0 auto; padding:0 24px; }

/* ====== ボタン ====== */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-family:"Zen Maru Gothic", sans-serif; font-weight:700; font-size:16px;
  padding:16px 30px; border-radius:999px; cursor:pointer; border:none; transition:.25s ease;
  white-space:nowrap;
}
.btn-primary{ background:var(--moss); color:#fff; box-shadow:0 14px 30px -12px rgba(45,157,92,.5); }
.btn-primary:hover{ background:var(--moss-deep); transform:translateY(-2px); }

/* =========================================================
   ヘッダー
   ========================================================= */
/* ヒーローのベタ塗りの上では透明+白文字、スクロールで通常配色へ切り替える。
   ヒーローの無いページは最初から header.scrolled を付けておく。 */
header{
  position:sticky; top:0; z-index:50; background:transparent;
  transition:background .3s ease, backdrop-filter .3s ease;
}
header.scrolled{ background:rgba(255,255,255,.88); backdrop-filter:blur(12px); }
.nav{ display:flex; align-items:center; justify-content:space-between; height:70px; }
.brand{ display:flex; align-items:center; gap:11px; }
.brand .logo{ width:38px; height:38px; border-radius:11px; background:#fff; border:1px solid var(--line-soft); display:grid; place-items:center; overflow:hidden; }
.brand .logo img{ width:100%; height:100%; object-fit:contain; }
.brand .name{ font-family:"Zen Maru Gothic", sans-serif; font-weight:700; font-size:18px; letter-spacing:.03em; color:#fff; transition:color .3s ease; }
header.scrolled .brand .name{ color:var(--ink); }
.nav .btn{ padding:10px 22px; font-size:14px; }

/* ヘッダー右のタブ（ホーム / ニュースルーム） */
/* ヒーロー上ではモザイク（白いアプリ画面）に重なるので、コーラルの下地を敷いて白文字を読めるようにする */
.tabs{
  display:flex; align-items:center; gap:4px; flex:none; padding:4px; border-radius:999px;
  background:rgba(217,78,74,.92); box-shadow:0 8px 22px -12px rgba(0,0,0,.35);
  transition:background .3s ease, box-shadow .3s ease;
}
header.scrolled .tabs{ background:transparent; box-shadow:none; }
.tabs a{
  font-family:"Zen Maru Gothic", sans-serif; font-weight:700; font-size:14px; letter-spacing:.02em;
  line-height:1; padding:9px 14px; border-radius:999px; white-space:nowrap;
  color:rgba(255,255,255,.85); transition:color .3s ease, background .3s ease;
}
.tabs a:hover{ color:#fff; background:rgba(255,255,255,.12); }
.tabs a[aria-current="page"]{ color:#fff; background:rgba(255,255,255,.22); }
header.scrolled .tabs a{ color:var(--ink-soft); }
header.scrolled .tabs a:hover{ color:var(--ink); background:var(--surface); }
header.scrolled .tabs a[aria-current="page"]{ color:var(--moss); background:var(--moss-soft); }
.tabs a:focus-visible{ outline:2px solid #fff; outline-offset:2px; }
header.scrolled .tabs a:focus-visible{ outline-color:var(--moss); }
.brand:focus-visible{ outline:2px solid currentColor; outline-offset:4px; border-radius:12px; }

/* =========================================================
   フッター
   ========================================================= */
footer{ border-top:1px solid var(--line); padding:46px 0 40px; }
.foot{ display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; }
/* ヘッダー用の白文字（.brand .name）がフッターにも効いて見えなくなっていたので、フッターでは本文色に戻す */
footer .brand .name{ font-family:"Zen Maru Gothic", sans-serif; font-weight:700; font-size:17px; letter-spacing:.03em; color:var(--ink); }
.foot-links{ display:flex; gap:24px; flex-wrap:wrap; }
.foot-links a{ font-size:13px; color:var(--ink-soft); }
.foot-links a:hover{ color:var(--moss-deep); }
.foot-copy{ text-align:center; font-size:12.5px; color:var(--ink-faint); margin-top:28px; }

/* 演出 */
.reveal{ opacity:0; transform:translateY(20px); transition:opacity .7s ease, transform .7s ease; }
.reveal.in{ opacity:1; transform:none; }

@media(max-width:720px){
  .nav .btn{ display:none; }
  .foot{ justify-content:center; text-align:center; }
}
/* 狭い幅ではブランド名を詰め、タブを小さくして1行に収める */
@media(max-width:480px){
  .nav{ gap:8px; }
  .nav .brand{ gap:8px; min-width:0; }
  .nav .brand .logo{ flex:none; width:32px; height:32px; border-radius:9px; }
  /* 残り幅 = 100vw - 余白48 - ロゴ32 - 隙間16 - タブ約158 - 予備10。これを11文字で割る */
  .nav .brand .name{ font-size:min(15px, calc((100vw - 264px) / 11)); letter-spacing:0; white-space:nowrap; }
  .tabs{ gap:2px; padding:3px; }
  .tabs a{ font-size:12px; padding:8px 7px; }
}
@media(max-width:379px){
  .nav .brand .name{ display:none; }
}