:root {
  --primary: #8BA782;
  --primary-dark: #6f8c68;
  --primary-deep: #56704f;
  --secondary: #F5EFE6;
  --secondary-2: #FBF8F2;
  --accent: #C8B273;
  --accent-dark: #a8925a;
  --text-dark: #3A3028;
  --text-mute: #7A7266;
  --divider: #E8DFD1;
  --white: #FFFFFF;
  --bg: #FDFBF6;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; overflow-x: hidden; }

body {
  font-family: 'Noto Sans JP', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
  color: var(--text-dark);
  overflow-x: hidden;
  max-width: 100vw;
  background: var(--bg);
  line-height: 1.8;
  font-size: 15px;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  letter-spacing: 0.02em;
  position: relative;
}

/* ==========================================================
   全体背景：淡い水玉グラデ + 葉っぱ + 和紙グレイン
   控えめだが豊かなレイヤー構成
   ========================================================== */

/* Layer 1: 薄いベージュの紙色ベース（控えめなウォーム） */
body {
  background:
    radial-gradient(ellipse 70% 50% at 50% 0%, rgba(253,251,246,1) 0%, rgba(251,248,242,1) 100%),
    var(--bg);
}

/* Layer 2: 水彩ブロブ — 濃淡のあるオーガニックな水玉（fixed） */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    /* 右上：セージ大 */
    radial-gradient(ellipse 620px 480px at 94% -4%, rgba(139,167,130,0.22) 0%, rgba(139,167,130,0.12) 40%, transparent 72%),
    /* 右上奥：ゴールドアクセント */
    radial-gradient(circle 280px at 86% 18%, rgba(200,178,115,0.14), transparent 68%),
    /* 左中：ゴールド中 */
    radial-gradient(ellipse 520px 420px at -4% 30%, rgba(200,178,115,0.20), transparent 70%),
    /* 左中奥：セージ */
    radial-gradient(circle 240px at 12% 46%, rgba(139,167,130,0.11), transparent 68%),
    /* 右下：セージ */
    radial-gradient(ellipse 460px 380px at 100% 66%, rgba(139,167,130,0.18), transparent 70%),
    /* 左下：ゴールド大 */
    radial-gradient(ellipse 580px 460px at -2% 96%, rgba(200,178,115,0.22) 0%, rgba(200,178,115,0.12) 40%, transparent 72%),
    /* 中央右：ミント */
    radial-gradient(circle 320px at 78% 44%, rgba(139,167,130,0.09), transparent 70%),
    /* 中央左：ゴールド */
    radial-gradient(circle 300px at 20% 64%, rgba(200,178,115,0.10), transparent 70%);
}

/* Layer 2b: 大きな水彩ウォッシュ（blur強め・さらに深みを出す） */
body {
  background-attachment: fixed;
}
main::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.6;
  background:
    radial-gradient(ellipse 800px 600px at 20% 15%, rgba(186,210,170,0.15), transparent 65%),
    radial-gradient(ellipse 700px 520px at 85% 80%, rgba(230,210,160,0.15), transparent 65%);
  filter: blur(40px);
}

/* Layer 3: 水彩の水玉（小さな円を散らす）＋ 和紙グレイン — 葉はなし */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.7;
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='900' height='900' viewBox='0 0 900 900'><g><circle cx='80' cy='120' r='6' fill='%238BA782' opacity='0.16'/><circle cx='220' cy='60' r='3.5' fill='%23C8B273' opacity='0.22'/><circle cx='420' cy='140' r='8' fill='%238BA782' opacity='0.12'/><circle cx='620' cy='80' r='4' fill='%23C8B273' opacity='0.2'/><circle cx='820' cy='160' r='5' fill='%238BA782' opacity='0.15'/><circle cx='140' cy='320' r='4' fill='%23C8B273' opacity='0.18'/><circle cx='360' cy='280' r='6.5' fill='%238BA782' opacity='0.1'/><circle cx='560' cy='360' r='3' fill='%23C8B273' opacity='0.25'/><circle cx='760' cy='300' r='7' fill='%238BA782' opacity='0.12'/><circle cx='60' cy='540' r='5' fill='%23C8B273' opacity='0.16'/><circle cx='280' cy='580' r='3.5' fill='%238BA782' opacity='0.2'/><circle cx='480' cy='520' r='8' fill='%23C8B273' opacity='0.1'/><circle cx='680' cy='600' r='4' fill='%238BA782' opacity='0.18'/><circle cx='860' cy='540' r='6' fill='%23C8B273' opacity='0.14'/><circle cx='180' cy='780' r='5' fill='%238BA782' opacity='0.15'/><circle cx='400' cy='820' r='3' fill='%23C8B273' opacity='0.22'/><circle cx='640' cy='760' r='6.5' fill='%238BA782' opacity='0.12'/><circle cx='820' cy='820' r='4' fill='%23C8B273' opacity='0.18'/></g></svg>"),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' seed='5'/><feColorMatrix values='0 0 0 0 0.35  0 0 0 0 0.30  0 0 0 0 0.22  0 0 0 0.035 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size: 900px 900px, 240px 240px;
  background-position: 0 0, 0 0;
  mix-blend-mode: multiply;
}

html { position: relative; }

main, header, footer { position: relative; z-index: 1; }

h1, h2, h3, h4, .serif {
  font-family: 'Noto Serif JP', 'Hiragino Mincho ProN', serif;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.4;
}

.num {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 700;
  color: var(--accent);
  font-feature-settings: "tnum";
}

a { color: inherit; text-decoration: none; }

button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }

.container {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 32px;
}

.container-narrow {
  max-width: 960px;
  margin: 0 auto;
  padding: 0 32px;
}

/* Section label */
.section-label {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-size: 11px;
  letter-spacing: 0.32em;
  color: var(--primary-deep);
  font-weight: 600;
  text-transform: uppercase;
  margin-bottom: 22px;
  white-space: nowrap;
  position: relative;
}
.section-label > * {
  white-space: nowrap;
}
.section-label::before,
.section-label::after {
  content: '';
  width: 48px;
  height: 8px;
  flex-shrink: 0;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='48' height='8' viewBox='0 0 48 8'><g><line x1='0' y1='4' x2='18' y2='4' stroke='%238BA782' stroke-width='1' opacity='0.6'/><line x1='30' y1='4' x2='48' y2='4' stroke='%238BA782' stroke-width='1' opacity='0.6'/><circle cx='24' cy='4' r='2' fill='%23C8B273' opacity='0.85'/></g></svg>") center/contain no-repeat;
}
.section-label.left::before { display: none; }
.section-label.left { padding-left: 0; }

.section-title {
  font-size: clamp(26px, 3.6vw, 42px);
  line-height: 1.55;
  margin-bottom: 20px;
  color: var(--text-dark);
  letter-spacing: 0.04em;
  word-break: keep-all;
  overflow-wrap: break-word;
}

.section-sub {
  font-size: 15px;
  color: var(--text-mute);
  max-width: 640px;
  margin: 0 auto;
  line-height: 2;
}

.section-head-center {
  text-align: center;
  margin-bottom: 72px;
}

/* Utility — 和風の装飾罫（葉っぱモチーフ） */
.sage-rule {
  width: 100px;
  height: 16px;
  margin: 0 auto 24px;
  background: transparent url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='16' viewBox='0 0 100 16'><g><line x1='0' y1='8' x2='32' y2='8' stroke='%238BA782' stroke-width='1.2' opacity='0.55'/><line x1='68' y1='8' x2='100' y2='8' stroke='%238BA782' stroke-width='1.2' opacity='0.55'/><ellipse cx='42' cy='8' rx='7' ry='2.5' fill='%238BA782' opacity='0.75' transform='rotate(-18 42 8)'/><ellipse cx='58' cy='8' rx='7' ry='2.5' fill='%238BA782' opacity='0.75' transform='rotate(18 58 8)'/><circle cx='50' cy='8' r='1.5' fill='%23C8B273'/></g></svg>") center no-repeat;
}

.accent-dot {
  color: var(--accent);
}

/* Responsive line breaks */
.br-md { display: none; }
.br-sm { display: inline; }
@media (min-width: 781px) {
  .br-md { display: inline; }
}
@media (max-width: 780px) {
  .br-sm-hide { display: none; }
}

/* ==========================================================
   セクション間の葉っぱ/水玉装飾クラス
   各セクション JSX で <section className="sec-deco sec-deco-a"> など使う
   ========================================================== */

/* 葉っぱが流れるバンド（セクション上端） */
.sec-deco { position: relative; }

/* Variant A: 右上に葉っぱの枝（少なめ） */
.sec-deco-a::before {
  content: '';
  position: absolute;
  top: -40px; right: -60px;
  width: 380px; height: 260px;
  pointer-events: none; z-index: 0;
  opacity: 0.6;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='380' height='260' viewBox='0 0 380 260'><g fill='%238BA782' opacity='0.22'><path d='M20 220 Q 140 170 350 50' stroke='%238BA782' stroke-width='1.2' fill='none'/><ellipse cx='130' cy='160' rx='22' ry='7.5' transform='rotate(-32 130 160)'/><ellipse cx='240' cy='110' rx='22' ry='7.5' transform='rotate(-42 240 110)'/><ellipse cx='330' cy='60' rx='18' ry='6' transform='rotate(-48 330 60)'/></g></svg>");
  background-repeat: no-repeat;
  background-size: contain;
}

/* Variant B: 左下に垂れ下がる葉っぱ（少なめ） */
.sec-deco-b::after {
  content: '';
  position: absolute;
  bottom: -30px; left: -50px;
  width: 330px; height: 240px;
  pointer-events: none; z-index: 0;
  opacity: 0.6;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='330' height='240' viewBox='0 0 330 240'><g fill='%23C8B273' opacity='0.22'><path d='M10 30 Q 100 90 310 220' stroke='%23C8B273' stroke-width='1.2' fill='none'/><ellipse cx='100' cy='90' rx='20' ry='7' transform='rotate(38 100 90)'/><ellipse cx='190' cy='160' rx='22' ry='7.5' transform='rotate(44 190 160)'/><ellipse cx='270' cy='200' rx='18' ry='6' transform='rotate(50 270 200)'/></g></svg>");
  background-repeat: no-repeat;
  background-size: contain;
}

/* Variant C: 右下に葉っぱ（少なめ） */
.sec-deco-c::before {
  content: '';
  position: absolute;
  bottom: 20px; right: -40px;
  width: 320px; height: 280px;
  pointer-events: none; z-index: 0;
  opacity: 0.6;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='320' height='280' viewBox='0 0 320 280'><g opacity='0.26'><path d='M290 10 Q 190 100 30 260' stroke='%238BA782' stroke-width='1.2' fill='none'/><ellipse cx='240' cy='60' rx='20' ry='7' fill='%238BA782' transform='rotate(-52 240 60)'/><ellipse cx='150' cy='150' rx='22' ry='7.5' fill='%238BA782' transform='rotate(-58 150 150)'/><ellipse cx='80' cy='220' rx='18' ry='6' fill='%238BA782' transform='rotate(-62 80 220)'/></g></svg>");
  background-repeat: no-repeat;
  background-size: contain;
}

/* Variant D: 左上にやさしく葉っぱ（少なめ） */
.sec-deco-d::after {
  content: '';
  position: absolute;
  top: 20px; left: -50px;
  width: 340px; height: 260px;
  pointer-events: none; z-index: 0;
  opacity: 0.6;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='340' height='260' viewBox='0 0 340 260'><g fill='%238BA782' opacity='0.24'><path d='M20 10 Q 100 110 320 240' stroke='%238BA782' stroke-width='1.2' fill='none'/><ellipse cx='110' cy='100' rx='20' ry='7' transform='rotate(38 110 100)'/><ellipse cx='200' cy='170' rx='22' ry='7.5' transform='rotate(44 200 170)'/><ellipse cx='280' cy='220' rx='18' ry='6' transform='rotate(50 280 220)'/></g></svg>");
  background-repeat: no-repeat;
  background-size: contain;
}

/* Variant E: 両端に水玉グラデーション */
.sec-deco-e::before {
  content: '';
  position: absolute;
  top: 50%; right: -80px;
  transform: translateY(-50%);
  width: 460px; height: 460px;
  pointer-events: none; z-index: 0;
  background: radial-gradient(circle, rgba(139,167,130,0.28), transparent 65%);
  border-radius: 50%;
}
.sec-deco-e::after {
  content: '';
  position: absolute;
  top: 10%; left: -100px;
  width: 400px; height: 400px;
  pointer-events: none; z-index: 0;
  background: radial-gradient(circle, rgba(200,178,115,0.26), transparent 65%);
  border-radius: 50%;
}

/* 子要素は z-index で上に */
.sec-deco > * { position: relative; z-index: 1; }

/* モバイルでは装飾をぐっと抑える */
@media (max-width: 780px) {
  .sec-deco-a::before, .sec-deco-b::after, .sec-deco-c::before, .sec-deco-d::after {
    width: 180px !important; height: 120px !important; opacity: 0.35 !important;
  }
  .sec-deco-e::before, .sec-deco-e::after {
    width: 220px !important; height: 220px !important;
  }
}

/* Scroll sections spacing */
section { padding: 120px 0; scroll-margin-top: 100px; }

@media (max-width: 1080px) {
  section { padding: 90px 0; }
}

@media (max-width: 780px) {
  section { padding: 64px 0; scroll-margin-top: 110px; }
  .section-title { font-size: 22px; line-height: 1.6; letter-spacing: 0.02em; }
  .section-sub { font-size: 13px; line-height: 1.95; }
  .section-head-center { margin-bottom: 44px; }
  .section-label { font-size: 10px; margin-bottom: 16px; gap: 8px; }
  .section-label::before, .section-label::after { width: 14px; }
  .container, .container-narrow { padding: 0 20px; }
  body { font-size: 14px; line-height: 1.85; }
}

/* Reveal base (will be triggered) */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity .9s ease, transform .9s ease; }
.reveal.in { opacity: 1; transform: none; }