:root{
  /* 中性的で軽いグレーブルー */
  --bg:#e9edf5;
  --panel:#ffffff;
  --ink:#1b1e26;
  --muted:#555b66;
  --brand:#4f7cff;   /* ブルーはそのまま採用 */
  --accent:#00bfa3;  /* 補色系のアクセントを少し落ち着かせる */
  --card:#ffffff;
  --stroke:#d4d8e0;
  --radius:18px;
  --shadow:0 6px 18px rgba(0,0,0,.10);
}

*{box-sizing:border-box}
html,body{
  margin:0;padding:0;
  background:var(--bg);color:var(--ink);
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,"Noto Sans JP","Hiragino Kaku Gothic ProN","Meiryo",sans-serif;
  line-height:1.65;
}
a{color:var(--ink);text-decoration:none}
img{max-width:100%;display:block}

.container{width:min(1120px,90%);margin-inline:auto}

/* ヘッダー：明るい背景に合わせて透明白グラデ */
.site-header{
  position:sticky;top:0;z-index:10;
  background:linear-gradient(180deg,rgba(255,255,255,.8),rgba(255,255,255,0));
  backdrop-filter:saturate(1.05) blur(6px);
}
.header-inner{display:flex;align-items:center;gap:16px;padding:16px 0}
.brand{font-weight:800;font-size:22px;letter-spacing:.2px}
.brand span{color:var(--brand)}
.nav{display:flex;gap:18px;margin-left:auto}
.nav a{opacity:.85}
.nav a.active,.nav a:hover{opacity:1}
.lang{display:flex;align-items:center;gap:8px}
.lang select{
  background:var(--panel);color:var(--ink);
  border:1px solid var(--stroke);padding:6px 10px;border-radius:10px
}

/* ヒーロー/テキスト */
.hero{padding:56px 0 24px}
.hero h1{font-size:clamp(28px,4vw,44px);line-height:1.2;margin:0 0 8px}
.lead{font-size:clamp(14px,2.2vw,18px);color:var(--muted);margin:0 0 18px}

/* バッジ */
.badges{
  list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:14px;margin:24px 0 0;padding:0
}
.badges li{
  background:var(--panel);border:1px solid var(--stroke);
  border-radius:var(--radius);padding:14px 16px;box-shadow:var(--shadow)
}
.badges strong{display:block;margin-bottom:4px}

/* ブランドカード */
.brands{padding:24px 0 8px}
.brands h2,.info h2{font-size:clamp(22px,3vw,28px);margin:0 0 14px}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:18px}
.card{
  background:var(--card);border:1px solid var(--stroke);
  border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow)
}
.card-body{padding:16px}
.card h3{margin:0 0 6px;font-size:20px}
.card p{color:var(--muted);margin:0 0 12px}
.meta{border-top:1px solid var(--stroke);padding:10px 16px;color:var(--muted);font-size:14px}

/* ボタン：明るい背景で映える */
.btn{
  display:inline-block;background:var(--brand);color:#fff;
  padding:10px 14px;border-radius:12px;font-weight:700;transition:.2s ease all
}
.btn:hover{filter:brightness(1.05);transform:translateY(-1px)}
.btn.ghost{
  background:transparent;border:1px solid var(--stroke);color:var(--ink)
}

/* 情報セクション */
.info{padding:12px 0 40px}
.notes{margin:0;padding-left:18px;color:var(--muted)}
.cta-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}

/* フッター：薄い上向きグラデで締める */
.site-footer{
  border-top:1px solid var(--stroke);margin-top:24px;
  background:linear-gradient(0deg,rgba(255,255,255,.7),rgba(255,255,255,0))
}
.footer-inner{display:flex;gap:12px;align-items:center;justify-content:space-between;padding:18px 0}
.foot-nav a{color:var(--muted);margin-left:12px}
.foot-nav a:hover{color:var(--ink)}

/* Facebook 埋め込み */
.facebook {padding: 40px 0; text-align: center;}
.facebook h2 {font-size: 24px; margin-bottom: 20px;}
.fb-page {
  margin: 0 auto; border-radius: 12px; overflow: hidden;
  box-shadow: 0 4px 20px rgba(0,0,0,.12); /* 明るい背景用にやや弱め */
  border:1px solid var(--stroke);
}