/* ===================================
   マユミのお金教室 - メインCSS
   カラー：紺ベース × 白 × 清潔感
   =================================== */

/* ---------- Reset & Base ---------- */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { font-size:16px; scroll-behavior:smooth; }
body {
  font-family:'Noto Sans JP','Hiragino Sans','Meiryo',sans-serif;
  color:#1e293b; background:#fff; line-height:1.85;
  -webkit-font-smoothing:antialiased;
}
a { color:#1e40af; text-decoration:none; transition:color .2s; }
a:hover { color:#1e3a8a; }
img { max-width:100%; height:auto; display:block; }
ul,ol { list-style:none; }
.container { max-width:1100px; margin:0 auto; padding:0 24px; }
.text-center { text-align:center; }

/* ---------- Colors ---------- */
:root {
  --navy:       #1e3a8a;
  --navy-light: #1e40af;
  --navy-bg:    #f0f4ff;
  --blue:       #0ea5e9;
  --blue-bg:    #f0f9ff;
  --purple:     #a855f7;
  --purple-bg:  #faf5ff;
  --gray-50:    #f8fafc;
  --gray-100:   #f1f5f9;
  --gray-200:   #e2e8f0;
  --gray-400:   #94a3b8;
  --gray-600:   #475569;
  --gray-800:   #1e293b;
  --white:      #ffffff;
  --accent:     #2563eb;
  --accent-light:#dbeafe;
  --success:    #059669;
  --warning:    #d97706;
  --radius:     12px;
  --radius-sm:  8px;
  --shadow:     0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
  --shadow-md:  0 4px 6px rgba(0,0,0,.06), 0 2px 4px rgba(0,0,0,.04);
  --shadow-lg:  0 10px 25px rgba(0,0,0,.08);
}

/* ---------- Typography ---------- */
h1 { font-size:2.2rem; font-weight:800; line-height:1.35; letter-spacing:-.02em; }
h2 { font-size:1.65rem; font-weight:700; line-height:1.4; }
h3 { font-size:1.2rem; font-weight:700; line-height:1.5; }
h4 { font-size:1rem; font-weight:700; }

/* ---------- Buttons ---------- */
.btn {
  display:inline-flex; align-items:center; gap:6px;
  padding:13px 28px; border-radius:var(--radius-sm);
  font-size:.95rem; font-weight:600; cursor:pointer;
  transition:all .2s; border:none; text-decoration:none;
}
.btn-primary {
  background:var(--navy); color:#fff;
}
.btn-primary:hover { background:var(--navy-light); color:#fff; transform:translateY(-1px); box-shadow:var(--shadow-md); }
.btn-secondary {
  background:var(--white); color:var(--navy); border:2px solid var(--gray-200);
}
.btn-secondary:hover { border-color:var(--navy); background:var(--navy-bg); }
.btn-outline {
  background:transparent; color:var(--navy); border:1.5px solid var(--navy);
}
.btn-outline:hover { background:var(--navy); color:#fff; }
.btn-lg { padding:16px 36px; font-size:1.05rem; }

/* ---------- Header ---------- */
.header {
  position:sticky; top:0; z-index:100;
  background:rgba(255,255,255,.95); backdrop-filter:blur(12px);
  border-bottom:1px solid var(--gray-200);
}
.header-inner {
  max-width:1100px; margin:0 auto; padding:0 24px;
  display:flex; align-items:center; justify-content:space-between;
  height:68px;
}
.logo { display:flex; align-items:center; gap:10px; text-decoration:none; }
.logo-icon {
  width:38px; height:38px; border-radius:10px;
  background:linear-gradient(135deg,var(--navy),var(--accent));
  color:#fff; display:flex; align-items:center; justify-content:center;
  font-size:.7rem; font-weight:800; letter-spacing:.05em;
}
.logo-text { font-size:1.05rem; font-weight:700; color:var(--gray-800); }
.logo-text span { color:var(--navy); }

.nav { display:flex; align-items:center; gap:24px; }
.nav a { font-size:.88rem; font-weight:500; color:var(--gray-600); }
.nav a:hover { color:var(--navy); }
.nav-cta {
  background:var(--navy); color:#fff !important;
  padding:9px 20px; border-radius:var(--radius-sm); font-weight:600;
}
.nav-cta:hover { background:var(--navy-light); }

.hamburger { display:none; background:none; border:none; cursor:pointer; padding:6px; }
.hamburger span { display:block; width:22px; height:2px; background:var(--gray-800); margin:5px 0; transition:all .3s; }
.mobile-menu { display:none; padding:16px 24px; background:#fff; border-bottom:1px solid var(--gray-200); }
.mobile-menu a { display:block; padding:10px 0; font-size:.95rem; color:var(--gray-600); border-bottom:1px solid var(--gray-100); }

@media(max-width:768px){
  .nav { display:none; }
  .hamburger { display:block; }
  .mobile-menu.active { display:block; }
}

/* ---------- Hero ---------- */
.hero {
  background:linear-gradient(170deg, var(--navy-bg) 0%, var(--white) 60%);
  padding:72px 24px 60px;
}
.hero-content {
  max-width:1100px; margin:0 auto;
  display:flex; align-items:center; gap:56px;
}
.hero-text { flex:1; }
.hero-label {
  display:inline-flex; align-items:center; gap:8px;
  font-size:.82rem; font-weight:600; color:var(--navy);
  background:var(--accent-light); padding:6px 14px; border-radius:20px; margin-bottom:20px;
}
.hero-label .dot { width:8px; height:8px; background:var(--navy); border-radius:50%; }
.hero h1 { margin-bottom:20px; color:var(--gray-800); }
.hero h1 .accent { color:var(--navy); }
.hero-desc { color:var(--gray-600); font-size:1rem; line-height:1.9; margin-bottom:28px; }
.hero-buttons { display:flex; gap:12px; flex-wrap:wrap; }

.hero-card {
  flex:0 0 320px; background:#fff; border-radius:var(--radius);
  padding:32px 28px; text-align:center; box-shadow:var(--shadow-lg);
  border:1px solid var(--gray-200);
}
.hero-avatar {
  width:90px; height:90px; border-radius:50%; margin:0 auto 16px;
  background:var(--navy-bg); display:flex; align-items:center; justify-content:center;
  font-size:2.5rem; border:3px solid var(--accent-light);
}
.hero-card h3 { color:var(--navy); margin-bottom:4px; }
.hero-card p { font-size:.88rem; color:var(--gray-600); line-height:1.7; }
.hero-card-stats { display:flex; gap:24px; justify-content:center; margin-top:16px; padding-top:16px; border-top:1px solid var(--gray-100); }
.hero-card-stat .val { font-size:.95rem; font-weight:700; color:var(--navy); }
.hero-card-stat .lbl { font-size:.75rem; color:var(--gray-400); }
.hero-card-link { display:block; margin-top:14px; font-size:.85rem; font-weight:600; color:var(--accent); }

@media(max-width:768px){
  .hero { padding:48px 20px 40px; }
  .hero-content { flex-direction:column; gap:32px; }
  .hero-card { flex:auto; width:100%; }
  h1 { font-size:1.7rem; }
}

/* ---------- Trust Bar ---------- */
.trust-bar {
  background:var(--navy); padding:18px 0; overflow:hidden;
}
.trust-items {
  max-width:1100px; margin:0 auto; padding:0 24px;
  display:flex; justify-content:center; gap:40px; flex-wrap:wrap;
}
.trust-item {
  display:flex; align-items:center; gap:8px;
  font-size:.85rem; color:rgba(255,255,255,.9); font-weight:500; white-space:nowrap;
}
.trust-item .icon { font-size:1.1rem; }

/* ---------- Sections ---------- */
.section { padding:72px 0; }
.section-label {
  display:inline-block; font-size:.78rem; font-weight:600;
  color:var(--navy); background:var(--accent-light);
  padding:5px 14px; border-radius:16px; margin-bottom:12px;
  letter-spacing:.05em; text-transform:uppercase;
}
.section-title { margin-bottom:8px; color:var(--gray-800); }
.section-subtitle { color:var(--gray-600); font-size:.95rem; margin-bottom:40px; }

/* ---------- Category Grid ---------- */
.category-grid {
  display:grid; grid-template-columns:repeat(3, 1fr); gap:20px;
}
.category-card {
  display:block; padding:28px 24px; background:#fff;
  border:1px solid var(--gray-200); border-radius:var(--radius);
  text-decoration:none; color:inherit; transition:all .2s;
}
.category-card:hover { border-color:var(--navy); box-shadow:var(--shadow-md); transform:translateY(-2px); color:inherit; }
.category-icon { font-size:2rem; margin-bottom:12px; }
.category-card h3 { margin-bottom:6px; color:var(--gray-800); }
.category-card p { font-size:.88rem; color:var(--gray-600); line-height:1.7; }
.category-count { display:inline-block; margin-top:10px; font-size:.78rem; font-weight:600; color:var(--navy); background:var(--navy-bg); padding:3px 10px; border-radius:10px; }

@media(max-width:768px){
  .category-grid { grid-template-columns:1fr; }
}

/* ---------- Article Cards ---------- */
.article-grid {
  display:grid; grid-template-columns:repeat(2, 1fr); gap:20px;
}
.article-card {
  display:flex; gap:16px; padding:20px; background:#fff;
  border:1px solid var(--gray-200); border-radius:var(--radius);
  text-decoration:none; color:inherit; transition:all .2s;
}
.article-card:hover { border-color:var(--navy); box-shadow:var(--shadow); color:inherit; }
.article-thumb {
  flex:0 0 80px; height:80px; border-radius:var(--radius-sm);
  display:flex; align-items:center; justify-content:center; font-size:2rem;
}
.article-thumb.c1 { background:var(--navy-bg); }
.article-thumb.c2 { background:var(--blue-bg); }
.article-thumb.c3 { background:var(--purple-bg); }
.article-thumb.c4 { background:#f0fdf4; }
.article-body { flex:1; }
.article-meta { display:flex; align-items:center; gap:8px; margin-bottom:6px; }
.badge {
  font-size:.7rem; font-weight:600; padding:3px 8px; border-radius:4px;
}
.badge-new { background:var(--accent-light); color:var(--accent); }
.badge-popular { background:#fef3c7; color:#b45309; }
.badge-beginner { background:#d1fae5; color:#047857; }
.badge-important { background:#fee2e2; color:#b91c1c; }
.article-date { font-size:.78rem; color:var(--gray-400); }
.article-card h3 { font-size:1rem; margin-bottom:4px; line-height:1.5; }
.article-card p { font-size:.85rem; color:var(--gray-600); line-height:1.6; }
.article-link { font-size:.82rem; font-weight:600; color:var(--accent); display:inline-block; margin-top:6px; }

@media(max-width:768px){
  .article-grid { grid-template-columns:1fr; }
}

/* ---------- Q&A Dialogue Blocks ---------- */
.qa-block {
  margin:32px 0; border-radius:var(--radius);
  overflow:hidden; border:1px solid var(--gray-200);
}
.qa-question {
  display:flex; gap:14px; padding:20px 24px;
  align-items:flex-start;
}
.qa-question.kenichi { background:var(--blue-bg); }
.qa-question.yoshiko { background:var(--purple-bg); }
.qa-avatar {
  flex:0 0 44px; width:44px; height:44px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:1.3rem; background:#fff;
}
.qa-name {
  font-size:.82rem; font-weight:700; margin-bottom:4px;
}
.qa-name.kenichi { color:#0369a1; }
.qa-name.yoshiko { color:#7e22ce; }
.qa-text { font-size:.95rem; line-height:1.8; }

.qa-answer {
  display:flex; gap:14px; padding:24px;
  background:var(--navy-bg); align-items:flex-start;
}
.qa-answer .qa-avatar { border:2px solid var(--navy); background:#fff; }
.qa-answer .qa-name { color:var(--navy); }
.qa-answer .qa-text { font-size:.95rem; line-height:1.9; }

/* ---------- Profile Card ---------- */
.profile-card {
  max-width:640px; margin:0 auto; background:#fff;
  border:1px solid var(--gray-200); border-radius:var(--radius);
  padding:36px; text-align:left;
}
.profile-top { display:flex; align-items:center; gap:20px; margin-bottom:20px; }
.profile-avatar {
  flex:0 0 80px; width:80px; height:80px; border-radius:50%;
  background:var(--navy-bg); display:flex; align-items:center; justify-content:center;
  font-size:2.2rem; border:3px solid var(--accent-light);
}
.profile-info h3 { color:var(--navy); margin-bottom:2px; }
.profile-info p { font-size:.88rem; color:var(--gray-600); }
.profile-bio p { font-size:.93rem; color:var(--gray-600); line-height:1.85; }
.profile-links { margin-top:20px; display:flex; gap:10px; }

/* ---------- Footer ---------- */
.footer {
  background:var(--gray-800); color:rgba(255,255,255,.7); padding:56px 0 0;
}
.footer-grid {
  display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:40px;
  padding-bottom:40px; border-bottom:1px solid rgba(255,255,255,.1);
}
.footer-brand p { font-size:.85rem; line-height:1.7; margin-top:12px; }
.footer h4 { color:#fff; font-size:.88rem; margin-bottom:14px; }
.footer ul li { margin-bottom:8px; }
.footer ul a { color:rgba(255,255,255,.6); font-size:.85rem; }
.footer ul a:hover { color:#fff; }
.footer-disclaimer {
  padding:24px 0; font-size:.78rem; line-height:1.8; color:rgba(255,255,255,.4);
}
.footer-bottom {
  padding:20px 0; text-align:center; font-size:.78rem; color:rgba(255,255,255,.35);
  border-top:1px solid rgba(255,255,255,.05);
}

@media(max-width:768px){
  .footer-grid { grid-template-columns:1fr; gap:24px; }
}

/* ---------- Legal Pages ---------- */
.legal-page { padding:48px 0 72px; }
.legal-page h1 { font-size:1.6rem; margin-bottom:32px; text-align:center; color:var(--gray-800); }
.legal-page h2 { font-size:1.15rem; margin:28px 0 12px; color:var(--navy); border-left:4px solid var(--navy); padding-left:12px; }
.legal-page p, .legal-page li { font-size:.93rem; line-height:1.9; color:var(--gray-600); }
.legal-page ul { padding-left:20px; }
.legal-page ul li { list-style:disc; margin-bottom:6px; }

/* ---------- Breadcrumb ---------- */
.breadcrumb {
  padding:12px 0; font-size:.82rem; color:var(--gray-400);
}
.breadcrumb a { color:var(--gray-400); }
.breadcrumb a:hover { color:var(--navy); }

/* ---------- PR / Risk Notices ---------- */
.pr-notice {
  display:inline-flex; align-items:center; gap:6px;
  background:#fef3c7; color:#92400e; font-size:.78rem; font-weight:600;
  padding:5px 12px; border-radius:4px; margin-bottom:16px;
}
.risk-notice {
  margin-top:40px; padding:20px 24px; background:var(--gray-50);
  border:1px solid var(--gray-200); border-radius:var(--radius-sm);
  font-size:.85rem; color:var(--gray-600); line-height:1.8;
}
.risk-notice strong { color:var(--gray-800); }

/* ---------- Supervisor Badge ---------- */
.supervisor {
  display:inline-flex; align-items:center; gap:8px;
  font-size:.82rem; color:var(--navy); font-weight:600;
  padding:6px 14px; background:var(--navy-bg); border-radius:6px;
  margin-bottom:16px;
}
.supervisor-icon { font-size:1rem; }

/* ---------- References ---------- */
.references {
  margin-top:32px; padding:20px 24px; background:var(--gray-50);
  border-radius:var(--radius-sm);
}
.references h4 { font-size:.88rem; color:var(--gray-800); margin-bottom:10px; }
.references li { font-size:.82rem; color:var(--gray-600); line-height:1.7; list-style:decimal; margin-left:18px; margin-bottom:4px; }

/* ---------- Utilities ---------- */
.mt-0 { margin-top:0; }
.mb-0 { margin-bottom:0; }
.bg-light { background:var(--gray-50); }