:root{
  --primary:#1F3A5F; --accent:#2F80ED; --success:#10B981; --alert:#EF4444;
  --text:#2F3437; --muted:#6B7280; --panel:#FAFAFA; --border:#E5E7EB; --bg:#FFFFFF;
  --radius:12px; --shadow:0 1px 2px rgba(0,0,0,.04), 0 8px 24px rgba(0,0,0,.06);
  --container:max(280px, min(1120px, 100% - 16px));
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:var(--bg);color:var(--text);font-family:Inter,"Noto Sans JP",system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,"Hiragino Kaku Gothic ProN",Meiryo,sans-serif;line-height:1.7}
.container{width:var(--container);margin-inline:auto;padding:14px}
a{color:var(--accent)} a:hover{opacity:.9}
.card{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden}
.card-pad{padding:12px}
.cards{display:grid;grid-template-columns:1fr;gap:12px}
@media(min-width:640px){.cards{grid-template-columns:repeat(2,1fr)}}
@media(min-width:980px){.cards{grid-template-columns:repeat(3,1fr)}}
.post-card{background:#fff;border:1px solid var(--border);border-radius:12px;overflow:hidden}
.post-card h3{margin:.3rem 0 .2rem}
.meta{font-size:.9rem;color:var(--muted)}
/* Header */
.site-header{border-bottom:1px solid var(--border);background:#fff}
.site-brand{display:flex;align-items:center;gap:10px;font-weight:900;color:var(--primary);text-decoration:none}
.navbar{display:flex;align-items:center;justify-content:space-between;gap:8px}
.nav-menu{display:flex;gap:10px;flex-wrap:wrap}
.nav-menu a{padding:8px 10px;border-radius:10px;text-decoration:none;color:#333}
.nav-menu a[aria-current="page"]{background:#EEF5FF;border:1px solid #D6E6FF;color:#0B4EC3}
.burger{display:none;background:#fff;border:1px solid var(--border);border-radius:10px;padding:8px 10px}
@media(max-width:760px){
  .nav-menu{display:none;flex-direction:column;padding:8px 0}
  .burger{display:inline-block}
  .nav-open .nav-menu{display:flex}
}
/* Hero */
.hero{display:grid;gap:12px;grid-template-columns:1fr}
@media(min-width:880px){.hero{grid-template-columns:1.2fr .8fr}}
.hero .panel{background:#fff;border:1px solid var(--border);border-radius:12px;padding:16px}
.hero h1{margin:.2rem 0 .4rem;color:var(--primary)}
/* セクション間余白（最初のHeroは上詰め） */
.hero, .panel { margin-block: 24px; }
.hero:first-of-type { margin-top: 0; }
.kicker{display:inline-block;margin-bottom:6px;color:#0B4EC3;background:#EEF5FF;border:1px solid #D6E6FF;border-radius:999px;padding:4px 8px;font-size:.85rem}
.cta-row{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.btn{padding:10px 14px;border:1px solid var(--border);border-radius:10px;background:#fff;cursor:pointer}
.btn-primary{background:var(--accent);color:#fff;border-color:transparent}
.badge{display:inline-flex;align-items:center;gap:6px;font-size:.8rem;color:#0B4EC3;background:#EEF5FF;border:1px solid #D6E6FF;border-radius:999px;padding:4px 8px}
/* Footer */
.site-footer{border-top:1px solid var(--border);margin-top:24px;background:#fff;color:var(--muted)}


/* ====== お金シュミレーター TOP 用（モック準拠） ====== */
:root{
  --primary:#1F3A5F; --accent:#2F80ED; --success:#10B981; --alert:#EF4444;
  --text:#2F3437; --muted:#6B7280; --panel:#FAFAFA; --border:#E5E7EB; --bg:#FFFFFF;
  --radius:12px; --shadow:0 1px 2px rgba(0,0,0,.04),0 8px 24px rgba(0,0,0,.06);
  --container:max(280px, min(1120px, 100% - 16px));
}

*{box-sizing:border-box}
html,body{background:var(--bg);color:var(--text);line-height:1.7}
body{margin:0;font-family:Inter,"Noto Sans JP",system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,"Hiragino Kaku Gothic ProN",Meiryo,sans-serif}
a{color:var(--accent);text-decoration:none}

.container{width:var(--container);margin-inline:auto;padding:14px}

/* Header（テーマの既存スタイルより弱ければ !important 調整） */
.site-header{border-bottom:1px solid var(--border);background:#fff}
.navbar{display:flex;align-items:center;justify-content:space-between;gap:12px}
.brand{font-weight:900;color:var(--primary);text-decoration:none}
.nav-menu{display:flex;gap:10px;flex-wrap:wrap}
.nav-menu a{padding:8px 10px;border-radius:10px;color:#333}
.burger{display:none;border:1px solid var(--border);background:#fff;border-radius:10px;padding:8px 10px}
@media(max-width:760px){
  .nav-menu{display:none}
  .burger{display:inline-block}
  .nav-open .nav-menu{display:flex;flex-direction:column}
}

/* セクション間余白（最初のHeroは上詰め） */
.hero, .panel { margin-block: 24px; }
.hero:first-of-type { margin-top: 0; }

/* Hero */
.hero{display:grid;gap:14px;grid-template-columns:1fr}
@media(min-width:960px){.hero{grid-template-columns:1.2fr .8fr}}
.kicker{display:inline-flex;align-items:center;gap:6px;color:#0B4EC3;background:#EEF5FF;border:1px solid #D6E6FF;border-radius:999px;padding:4px 8px;font-size:.85rem}
.hero h1{margin:.4rem 0;color:var(--primary);line-height:1.3}
.hero p{color:var(--muted);margin:.2rem 0}

/* Panel（カード風の箱） */
.panel{background:#fff;border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:16px}

/* Buttons */
.cta-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px}
.btn{padding:10px 14px;border:1px solid var(--border);border-radius:10px;background:#fff;color:#0B4EC3;cursor:pointer;display:inline-flex;align-items:center;justify-content:center}
.btn-primary{background:var(--accent);color:#fff;border-color:transparent}

/* 小バッジ */
.badge{display:inline-flex;align-items:center;gap:6px;font-size:.8rem;color:#0B4EC3;background:#EEF5FF;border:1px solid #D6E6FF;border-radius:999px;padding:4px 8px}

/* セクション見出し */
.section-head{display:flex;align-items:end;justify-content:space-between;margin:10px 0 6px}
.meta{color:var(--muted);font-size:.9rem}

/* Chips（カテゴリ） */
.chips{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0}
.chip{padding:8px 12px;border:1px solid var(--border);border-radius:999px;background:#fff;color:#333;cursor:pointer}
.chip[aria-selected="true"]{border-color:var(--accent);background:#EEF5FF;color:#0B4EC3}

/* Cards grid */
.cards{display:grid;grid-template-columns:1fr;gap:12px}
@media(min-width:640px){.cards{grid-template-columns:repeat(2,1fr)}}
@media(min-width:980px){.cards{grid-template-columns:repeat(3,1fr)}}

.card{background:#fff;border:1px solid var(--border);border-radius:12px;box-shadow:var(--shadow);overflow:hidden;display:flex;flex-direction:column}
.thumb{aspect-ratio:16/9;background:#F3F4F6;position:relative}
.thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.body{padding:12px}
.body h3{margin:.2rem 0 .3rem;font-size:1.06rem}

/* ステータスバッジ */
.status{display:inline-flex;align-items:center;gap:6px;font-size:.75rem;border-radius:999px;padding:3px 8px;border:1px solid var(--border);margin-bottom:6px}
.status.live{color:#0B4EC3;background:#EEF5FF;border-color:#D6E6FF}
.status.beta{color:#B45309;background:#FFFBEB;border-color:#FDE68A}

/* How-to steps */
.steps{display:grid;gap:12px;grid-template-columns:1fr}
@media(min-width:820px){.steps{grid-template-columns:repeat(3,1fr)}}
.step{background:#fff;border:1px solid var(--border);border-radius:12px;box-shadow:var(--shadow);padding:14px}
.step h4{margin:.2rem 0}

/* FAQ */
details{border:1px dashed var(--border);border-radius:10px;background:#fff;margin:8px 0}
summary{list-style:none;padding:10px 12px;cursor:pointer;font-weight:700}
summary::-webkit-details-marker{display:none}
.faq-body{padding:0 12px 12px;color:#444}

/* Footer */
.site-footer{border-top:1px solid var(--border);background:#fff;color:var(--muted);margin-top:18px}

/* ===== モダンヘッダー（ガラス・スクロール変化・ドロワー） ===== */
:root{
  --header-h: 64px;
  --hdr-bg: rgba(255,255,255,.7);
  --hdr-bg-solid: #ffffff;
  --hdr-border: rgba(0,0,0,.06);
  --hdr-shadow: 0 8px 24px rgba(0,0,0,.06);
  --accent:#2F80ED; --primary:#1F3A5F; --muted:#6B7280;
}

.site-header.glass{
  position: sticky; top:0; z-index: 50;
  backdrop-filter: saturate(180%) blur(10px);
  background: var(--hdr-bg);
  border-bottom: 1px solid var(--hdr-border);
  transition: background .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.site-header.glass.is-scrolled{
  background: var(--hdr-bg-solid);
  box-shadow: var(--hdr-shadow);
}

.nav-wrapper{
  height: var(--header-h);
  display:flex; align-items:center; justify-content:space-between; gap:12px;
}

.brand{display:flex; align-items:center; gap:10px; text-decoration:none}
.brand .custom-logo{height:32px; width:auto}
.brand-text{font-weight:800; color:var(--primary); font-size:1.06rem}

.nav-area{display:flex; align-items:center; gap:14px}
.nav-menu{display:flex; align-items:center; gap:8px; margin:0; padding:0; list-style:none}
.nav-menu a{
  display:inline-flex; align-items:center; gap:6px;
  padding:10px 12px; border-radius:12px; color:#222; text-decoration:none; position:relative;
}
.nav-menu a:hover{background: rgba(0,0,0,.04)}
/* 下線アニメ */
.nav-menu a::after{
  content:""; position:absolute; left:12px; right:12px; bottom:6px; height:2px;
  background: linear-gradient(90deg, var(--accent), #7BA7FF);
  transform: scaleX(0); transform-origin:left;
  transition: transform .18s ease;
}
.nav-menu a:hover::after{transform: scaleX(1)}

.btn-cta{
  padding:10px 14px; border-radius:12px; border:1px solid #e5e7eb;
  background: var(--accent); color:#fff; text-decoration:none;
  box-shadow: 0 4px 12px rgba(47,128,237,.2);
}
.btn-cta:hover{filter: brightness(1.03)}

.burger{
  display:none; width:40px; height:40px; border-radius:10px; border:1px solid #e5e7eb; background:#fff;
  align-items:center; justify-content:center; gap:4px; flex-direction:column;
}
.burger span{display:block; width:20px; height:2px; background:#111; transition: transform .2s, opacity .2s}
.burger.is-open span:nth-child(1){transform: translateY(6px) rotate(45deg)}
.burger.is-open span:nth-child(2){opacity:0}
.burger.is-open span:nth-child(3){transform: translateY(-6px) rotate(-45deg)}

@media (max-width: 900px){
  .nav-area{display:none}
  .burger{display:flex}
}

/* ドロワー */
.nav-drawer{
  position: fixed; inset: var(--header-h) 0 auto 0; /* ヘッダー下から */
  background:#fff; border-bottom:1px solid var(--hdr-border);
  box-shadow: var(--hdr-shadow);
  transform: translateY(-8px); opacity:0; pointer-events:none;
  transition: transform .18s ease, opacity .18s ease;
  padding: 12px 14px;
}
.nav-drawer.open{
  transform: translateY(0); opacity:1; pointer-events:auto;
}
.drawer-menu{display:grid; gap:6px; margin:0; padding:0; list-style:none}
.drawer-menu a{
  display:block; padding:12px 10px; border-radius:10px; color:#222; text-decoration:none;
}
.drawer-menu a:hover{background:#f5f7fb}
.drawer-cta{display:block; margin-top:8px; text-align:center}

/* コンテナ（テーマの既存と揃える） */
.container{width:max(280px, min(1120px, 100% - 16px)); margin-inline:auto; padding:14px}

/* ボディが開閉状態のときスクロール抑制（任意） */
body.nav-open{overflow:hidden}

/* ===== Footer ===== */
.site-footer{border-top:1px solid var(--border); background:#fff; color:var(--muted); margin-top:24px}
.site-footer .container{width:max(280px, min(1120px, 100% - 16px)); margin-inline:auto; padding:14px}

.footer-grid{
  display:grid; gap:16px; grid-template-columns:1fr;
}
@media(min-width:900px){
  .footer-grid{ grid-template-columns: 1.2fr 1fr 1fr; }
}

.footer-col .brand{display:inline-flex; align-items:center; gap:10px; text-decoration:none; margin-bottom:6px}
.footer-col .brand-text{font-weight:800; color:var(--primary)}
.footer-title{font-size:1rem; font-weight:800; color:#111; margin:0 0 8px}
.footer-links{list-style:none; padding:0; margin:0; display:grid; gap:6px}
.footer-links a{color:#333; text-decoration:none; padding:4px 0}
.footer-links a:hover{color:var(--accent); text-decoration:underline}
.fine{font-size:.92rem; color:#555; margin:.4rem 0 0}

.footer-bottom{
  display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; border-top:1px solid var(--border); margin-top:8px; padding-top:8px;
}
.copyright{white-space:nowrap; margin:0}
.footer-mini-nav ul{display:flex; gap:10px; list-style:none; padding:0; margin:0}
.footer-mini-nav a{color:#555; text-decoration:none; font-size:.92rem}
.footer-mini-nav a:hover{text-decoration:underline}

.to-top{
  margin-left:auto; border:1px solid var(--border); background:#fff; border-radius:10px; padding:6px 10px; cursor:pointer; opacity:0; transform: translateY(4px); transition: .18s ease;
}
.to-top.show{opacity:1; transform: translateY(0)}

/* 準備中カードの見た目/無効化 */
.card.is-disabled {
  opacity: .6;
  pointer-events: none; /* aタグのクリックを無効化 */
  position: relative;
}
.card.is-disabled::after{
  content: "準備中";
  position: absolute; top:8px; right:8px;
  font-size: .78rem; padding: 4px 8px;
  background: #FFFBEB; color:#B45309; border:1px solid #FDE68A; border-radius:999px;
}