/* ── World Flag Master — 共通スタイル ── */
:root{
  --primary:#6C3CE1;--primary-light:#8B5CF6;--secondary:#F59E0B;
  --accent:#EF4444;--success:#10B981;
  --bg:#0F0A2E;--bg2:#1A1040;--card:#2D1F6E;--card2:#3A2880;
  --text:#F0EAFF;--text2:#B8A9E8;--text3:#7B6AAA;
  --border:rgba(139,92,246,0.3);--glow:0 0 20px rgba(108,60,225,0.4);
}
*{box-sizing:border-box;margin:0;padding:0;}
body{font-family:'Nunito',sans-serif;background:var(--bg);color:var(--text);
  min-height:100vh;line-height:1.7;
  background-image:
    radial-gradient(ellipse at 20% 20%,rgba(108,60,225,.15) 0%,transparent 50%),
    radial-gradient(ellipse at 80% 80%,rgba(245,158,11,.08) 0%,transparent 50%);}

/* ── Navigation ── */
.site-nav{
  background:rgba(15,10,46,.92);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--border);
  position:sticky;top:0;z-index:100;
  padding:0 20px;}
.nav-inner{max-width:1000px;margin:0 auto;display:flex;
  align-items:center;justify-content:space-between;height:56px;}
.nav-logo{font-family:'Fredoka One',cursive;font-size:20px;
  background:linear-gradient(135deg,#F0EAFF,#C4B5FD,#F59E0B);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  background-clip:text;text-decoration:none;}
.nav-links{display:flex;gap:6px;align-items:center;flex-wrap:wrap;}
.nav-link{padding:6px 12px;border-radius:8px;font-size:13px;font-weight:700;
  color:var(--text2);text-decoration:none;transition:all .2s;border:1px solid transparent;}
.nav-link:hover{color:var(--text);border-color:var(--border);}
.nav-link.active{color:#fff;background:var(--primary);border-color:var(--primary);}
.nav-cta{padding:7px 16px;border-radius:10px;background:var(--primary);
  color:#fff;font-size:13px;font-weight:800;text-decoration:none;
  transition:all .2s;box-shadow:0 2px 12px rgba(108,60,225,.4);}
.nav-cta:hover{background:var(--primary-light);transform:translateY(-1px);}

/* ── Ad slots ── */
.ad-slot{width:100%;text-align:center;overflow:hidden;
  background:rgba(255,255,255,.03);border:1px dashed rgba(139,92,246,.2);
  border-radius:8px;color:var(--text3);font-size:11px;font-weight:700;
  letter-spacing:1px;display:flex;align-items:center;justify-content:center;}
.ad-slot-top{height:60px;margin-bottom:0;}
.ad-slot-bottom{min-height:100px;margin-top:0;position:sticky;bottom:0;
  background:var(--bg);border-top:1px solid var(--border);border-radius:0;z-index:10;}
.ad-label{opacity:.35;pointer-events:none;}

/* ── Page wrapper ── */
.page-wrap{max-width:1000px;margin:0 auto;padding:40px 20px 80px;}
.page-hero{text-align:center;padding:48px 0 36px;}
.page-hero h1{font-family:'Fredoka One',cursive;
  font-size:clamp(28px,5vw,48px);
  background:linear-gradient(135deg,#F0EAFF 0%,#C4B5FD 40%,#F59E0B 100%);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
  margin-bottom:12px;}
.page-hero p{font-size:16px;color:var(--text2);max-width:600px;margin:0 auto;}

/* ── Cards ── */
.card{background:var(--card);border:1.5px solid var(--border);
  border-radius:16px;padding:24px;margin-bottom:16px;}
.card h2{font-family:'Fredoka One',cursive;font-size:22px;
  color:var(--text);margin-bottom:10px;}
.card h3{font-size:16px;font-weight:800;color:var(--text);margin-bottom:8px;}
.card p{color:var(--text2);font-size:15px;margin-bottom:10px;}
.card p:last-child{margin-bottom:0;}
.card ul,.card ol{color:var(--text2);font-size:15px;padding-left:20px;}
.card li{margin-bottom:6px;}
.section-label{font-size:11px;color:var(--text3);font-weight:800;
  letter-spacing:2px;text-transform:uppercase;margin:32px 0 12px;}

/* ── Grid layouts ── */
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;}
@media(max-width:700px){
  .grid-2,.grid-3,.grid-4{grid-template-columns:1fr 1fr;}
}
@media(max-width:420px){
  .grid-2,.grid-3,.grid-4{grid-template-columns:1fr;}
  .nav-links{gap:3px;}
  .nav-link{padding:5px 8px;font-size:12px;}
}

/* ── Buttons ── */
.btn-primary{display:inline-block;padding:12px 28px;border-radius:12px;
  background:var(--primary);color:#fff;font-family:'Nunito',sans-serif;
  font-size:15px;font-weight:800;text-decoration:none;cursor:pointer;border:none;
  transition:all .2s;box-shadow:0 4px 16px rgba(108,60,225,.4);}
.btn-primary:hover{background:var(--primary-light);transform:translateY(-1px);}

/* ── Flag card (learn page) ── */
.flag-card{background:var(--bg2);border:1.5px solid var(--border);
  border-radius:12px;padding:12px 10px;text-align:center;
  transition:all .25s;cursor:pointer;}
.flag-card:hover{border-color:var(--primary-light);transform:translateY(-2px);
  box-shadow:0 6px 20px rgba(108,60,225,.25);}
.flag-card img{width:100%;height:56px;object-fit:cover;border-radius:6px;
  margin-bottom:8px;background:#1a1040;}
.flag-card .flag-emoji{font-size:40px;line-height:1;margin-bottom:8px;display:block;}
.flag-card .flag-name{font-size:12px;font-weight:700;color:var(--text);}
.flag-card .flag-cap{font-size:10px;color:var(--text3);margin-top:2px;}

/* ── Stat chips ── */
.stat-chip{display:inline-flex;align-items:center;gap:6px;
  padding:6px 12px;border-radius:20px;font-size:13px;font-weight:700;
  background:rgba(139,92,246,.15);border:1px solid var(--border);color:var(--text2);}

/* ── Footer ── */
.site-footer{background:var(--bg2);border-top:1px solid var(--border);
  padding:28px 20px;text-align:center;font-size:12px;color:var(--text3);}
.site-footer a{color:var(--text3);text-decoration:none;}
.site-footer a:hover{color:var(--text2);}
.footer-links{display:flex;gap:16px;justify-content:center;margin-bottom:10px;flex-wrap:wrap;}

/* ── 言語切替UI（サブページ共通） ── */
.lang-switcher-wrap{display:flex;flex-wrap:wrap;gap:5px;justify-content:center;padding:10px 16px;
  background:var(--bg2);border-bottom:1px solid var(--border);}
.lang-sw-btn{padding:4px 10px;border-radius:16px;border:1px solid var(--border);
  background:transparent;color:var(--text2);font-family:'Nunito',sans-serif;
  font-size:11px;font-weight:700;cursor:pointer;transition:all .2s;}
.lang-sw-btn:hover{border-color:var(--primary-light);color:var(--text);}
.lang-sw-btn.active{background:var(--primary);border-color:var(--primary);color:#fff;}