/*
Theme Name: 産前産後体づくり協会
Theme URI: https://sanzensango.jp
Author: 産前産後体づくり協会（開発：Claude Code）
Description: 産前産後体づくり協会の公式サイト用オリジナルテーマ。Manus試作版のセージグリーン基調デザインを再現。
Version: 1.0.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
Text Domain: sanzensango
*/

/* ==========================================================
   デザイントークン（Manus版から抽出）
   ========================================================== */
:root {
  --sage: #41765d;          /* メイングリーン */
  --sage-dark: #2c6149;     /* 濃いグリーン（hover・見出し） */
  --sage-light: #6e9b84;    /* 淡いグリーン */
  --sage-muted: #dce8e1;    /* ごく淡いグリーン（背景） */
  --sage-tint: #41765d14;   /* グリーン8%（カード背景） */
  --bg: #faf8f5;            /* 温かみのあるオフホワイト */
  --bg-alt: #f8f8f7;
  --text: #1a1a19;          /* 本文 */
  --text-sub: #34322d;
  --muted-fg: #858481;      /* 補足テキスト */
  --border: #dad7d0;
  --accent-blue: #548197;   /* アクセント（リンク等） */
  --line-green: #06c755;    /* LINEボタン */
  --white: #ffffff;
  --shadow: 0 2px 12px #0000001a;
  --radius: 14px;
  --font-sans: "Noto Sans JP", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-serif: "Noto Serif JP", "Hiragino Mincho ProN", serif;
  --font-display: "DM Serif Display", "Noto Serif JP", serif;
  --w-content: 1080px;
  --w-narrow: 780px;
}

/* ==========================================================
   ベース
   ========================================================== */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 90px; }
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.9;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--sage); text-decoration: none; }
a:hover { color: var(--sage-dark); }

h1, h2, h3, h4 {
  font-family: var(--font-serif);
  font-weight: 600;
  line-height: 1.5;
  color: var(--text);
  margin: 0 0 .6em;
}
h1 { font-size: clamp(1.7rem, 4vw, 2.6rem); }
h2 { font-size: clamp(1.4rem, 3vw, 2rem); }
h3 { font-size: clamp(1.15rem, 2.2vw, 1.4rem); }

.container { max-width: var(--w-content); margin: 0 auto; padding: 0 20px; }
.container--narrow { max-width: var(--w-narrow); }

/* ==========================================================
   ヘッダー
   ========================================================== */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: #faf8f5e6; backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
}
.site-header__inner {
  max-width: var(--w-content); margin: 0 auto; padding: 14px 20px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.site-header__brand {
  font-family: var(--font-serif); font-weight: 700;
  font-size: 1.05rem; color: var(--sage-dark);
}
.site-nav ul { display: flex; gap: 22px; list-style: none; margin: 0; padding: 0; }
.site-nav a { color: var(--text-sub); font-size: .92rem; font-weight: 500; }
.site-nav a:hover { color: var(--sage); }

/* モバイルナビ */
.nav-toggle { display: none; background: none; border: none; font-size: 1.6rem; color: var(--sage-dark); cursor: pointer; }
@media (max-width: 860px) {
  .nav-toggle { display: block; }
  .site-nav { display: none; position: absolute; top: 100%; left: 0; right: 0;
    background: var(--bg); border-bottom: 1px solid var(--border); padding: 12px 20px 20px; }
  .site-nav.is-open { display: block; }
  .site-nav ul { flex-direction: column; gap: 12px; }
}

/* ==========================================================
   ボタン
   ========================================================== */
.btn {
  display: inline-block; padding: 14px 32px; border-radius: 999px;
  font-weight: 700; font-size: .95rem; line-height: 1.4;
  transition: transform .15s ease, box-shadow .15s ease;
}
.btn:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.btn--primary { background: var(--sage); color: var(--white) !important; }
.btn--primary:hover { background: var(--sage-dark); }
.btn--line { background: var(--line-green); color: var(--white) !important; }
.btn--ghost { border: 2px solid var(--sage); color: var(--sage) !important; }

/* ==========================================================
   セクション共通
   ========================================================== */
.section { padding: clamp(56px, 9vw, 110px) 0; }
.section--alt { background: var(--sage-tint); }
.section--dark { background: var(--sage-dark); color: var(--white); }
.section--dark h2, .section--dark h3 { color: var(--white); }
.section__label {
  display: block; font-family: var(--font-display); font-style: italic;
  color: var(--sage-light); font-size: 1rem; letter-spacing: .08em; margin-bottom: 8px;
}
.section__lead { max-width: var(--w-narrow); color: var(--text-sub); }

/* ==========================================================
   ヒーロー
   ========================================================== */
.hero { padding: clamp(70px, 12vw, 150px) 0; background: linear-gradient(160deg, var(--sage-muted), var(--bg) 60%); }
.hero h1 { font-size: clamp(1.6rem, 4.5vw, 2.8rem); }
.hero__catch { font-family: var(--font-serif); font-size: clamp(1.1rem, 2.4vw, 1.5rem); color: var(--sage-dark); font-weight: 700; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 28px; }
.hero__note { font-size: .85rem; color: var(--muted-fg); margin-top: 20px; }

/* ==========================================================
   数字カード（根拠セクション）
   ========================================================== */
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; margin-top: 40px; }
.stat-card {
  background: var(--white); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 28px; box-shadow: var(--shadow);
}
.stat-card__number {
  font-family: var(--font-display); font-size: clamp(2.4rem, 5vw, 3.4rem);
  color: var(--sage); line-height: 1.1;
}
.stat-card__title { font-weight: 700; font-size: 1.05rem; margin: 4px 0 12px; color: var(--sage-dark); }
.stat-card__meaning { font-size: .93rem; }
.stat-card__source { font-size: .8rem; color: var(--muted-fg); margin: 10px 0; padding-left: 10px; border-left: 3px solid var(--sage-muted); }
.stat-card__solution {
  background: var(--sage-tint); border-radius: 10px; padding: 14px 16px;
  font-size: .92rem; margin-top: 12px;
}
.stat-card__solution::before { content: "🌱 体づくりによる解決"; display: block; font-weight: 700; color: var(--sage-dark); font-size: .85rem; margin-bottom: 4px; }

/* ==========================================================
   カリキュラム
   ========================================================== */
.curriculum-phase { margin-top: 40px; }
.curriculum-phase__title {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font-serif); font-size: 1.25rem; color: var(--sage-dark);
}
.curriculum-list { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 10px; }
.curriculum-list li {
  background: var(--white); border: 1px solid var(--border); border-radius: 10px;
  padding: 14px 18px; font-size: .95rem; display: flex; gap: 14px; align-items: baseline;
}
.curriculum-list .num {
  font-family: var(--font-display); color: var(--sage); font-size: 1.15rem; min-width: 1.6em; text-align: right;
}

/* ==========================================================
   カード（活動・資格・FAQ ほか汎用）
   ========================================================== */
.card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 24px; margin-top: 40px; }
.card {
  background: var(--white); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 30px; box-shadow: var(--shadow);
}
.card--link { transition: transform .15s ease; }
.card--link:hover { transform: translateY(-4px); }
.card__icon { font-size: 2rem; margin-bottom: 10px; }
.card h3 { color: var(--sage-dark); }
.card__more { display: inline-block; margin-top: 12px; font-weight: 700; font-size: .9rem; }
.card__more::after { content: " →"; }

/* FAQ */
.faq-item { border-bottom: 1px solid var(--border); padding: 6px 0; }
.faq-item summary { cursor: pointer; font-weight: 700; padding: 14px 0; list-style: none; position: relative; padding-right: 2em; }
.faq-item summary::after { content: "＋"; position: absolute; right: 0; color: var(--sage); }
.faq-item[open] summary::after { content: "−"; }
.faq-item summary::before { content: "Q. "; color: var(--sage); font-family: var(--font-display); }
.faq-item p { margin: 0 0 16px; font-size: .95rem; }

/* テーブル（原稿の比較表など） */
table { width: 100%; border-collapse: collapse; background: var(--white); border-radius: var(--radius); overflow: hidden; font-size: .93rem; }
th, td { padding: 12px 16px; border-bottom: 1px solid var(--border); text-align: left; }
th { background: var(--sage-tint); color: var(--sage-dark); font-weight: 700; }

/* ==========================================================
   CTA帯・フッター
   ========================================================== */
.cta-band { text-align: center; }
.cta-band .btn { margin-top: 20px; }

.site-footer { background: var(--text); color: #ffffffb3; padding: 48px 0 32px; font-size: .88rem; }
.site-footer a { color: #ffffffb3; }
.site-footer a:hover { color: var(--white); }
.site-footer__inner { max-width: var(--w-content); margin: 0 auto; padding: 0 20px; }
.site-footer__nav { display: flex; flex-wrap: wrap; gap: 18px; margin-bottom: 20px; }
.site-footer__copy { color: #ffffff80; font-size: .8rem; }

/* ==========================================================
   記事・固定ページ本文（エディタ編集領域）
   ========================================================== */
.entry-content > * { margin-block: 1.2em; }
.entry-content h2 { margin-top: 2.2em; padding-bottom: .3em; border-bottom: 2px solid var(--sage-muted); }
.entry-content h3 { margin-top: 1.8em; color: var(--sage-dark); }
.entry-content blockquote { border-left: 4px solid var(--sage); background: var(--sage-tint); margin: 1.5em 0; padding: 14px 20px; border-radius: 0 10px 10px 0; }

/* 出典表記 */
.source-note { font-size: .8rem; color: var(--muted-fg); }