:root {
    /* base */
    --bg: #F6F1E7;
    --bg-soft: #FBF6EC;
    --ink: #2A2823;
    --ink-2: #3D3A35;
    --ink-3: #5C5852;
    --ink-4: #8A857B;
    --line: #E0D9CB;

    /* pop accent palette */
    --leaf: #6CAB6F;          /* 葉の緑 */
    --leaf-deep: #4F8F58;
    --teal: #2D5D5A;          /* 深緑（既存） */
    --teal-deep: #1F4E45;
    --sky: #7FB6D4;           /* 空・水の青 */
    --sun: #E8B547;           /* 陽光の金 */
    --coral: #E26A45;         /* 暖の珊瑚（既存warmの代替） */
    --tan: #C9A878;           /* 砂・大地 */
    --tan-deep: #B89968;

    --card: #EFE7D5;
    --card-2: #FBF6EC;
    --card-3: #E8E0D2;
    --card-leaf: #E4EFDF;
    --card-sky: #DCEAF1;
    --card-sun: #F6E7BE;
    --card-coral: #F6DACC;
  }
  * { box-sizing: border-box; }
  button { font: inherit; color: inherit; cursor: pointer; background: none; border: none; padding: 0; }
  input, textarea, select { font: inherit; color: inherit; }
  a { color: inherit; text-decoration: none; }
  .small-text-link { text-decoration: underline; }
  .checkbox-field.flex { display: flex; align-items: center; gap: 8px; flex-wrap: nowrap; }
  .help-wrapper { position: relative; display: flex; align-items: center; }
  .help-popup-wrapper { z-index: 1200 !important; }
  .rc-content-wrapper { width: min(900px, 90vw) !important; max-height: 90vh; overflow-y: auto; overflow-x: hidden; }

  .serif { font-family: 'Noto Serif JP', 'Hiragino Mincho ProN', serif; }
  .num { font-family: 'Fraunces', serif; font-feature-settings: 'tnum'; }
  .hand { font-family: 'Caveat', cursive; font-weight: 500; }
  .container-md { max-width: 760px; margin: 0 auto; padding: 0 22px; }
  .container-sm { max-width: 640px; margin: 0 auto; padding: 0 22px; }

  /* Nav */
  nav.top { border-bottom: 1px solid var(--line); background: var(--bg); position: sticky; top: 0; z-index: 50; }
  nav.top .row { display: flex; align-items: center; justify-content: space-between; padding: 14px 0; }
  nav.top .logo { display: flex; align-items: baseline; gap: 8px; transition: opacity .2s; }
  nav.top .logo:hover { opacity: .7; }
  nav.top .logo .mark { font-family: 'Fraunces', serif; font-size: 26px; font-weight: 500; letter-spacing: -.02em; color: var(--teal-deep); }
  nav.top .logo .sub { font-family: 'Noto Serif JP', serif; font-size: 13px; color: var(--ink-3); letter-spacing: .04em; }
  nav.top .links { display: flex; align-items: center; gap: 4px; font-size: 14px; }
  nav.top .links button.link { padding: 8px 12px; color: var(--ink-3); transition: opacity .2s; border-radius: 999px; }
  nav.top .links button.link:hover { background: var(--card-2); color: var(--ink); }
  nav.top .links button.link.active { color: var(--ink); font-weight: 500; background: var(--card-leaf); }
  nav.top .cta { margin-left: 8px; padding: 8px 18px; border-radius: 999px; background: var(--leaf); color: #fff; transition: transform .15s, box-shadow .2s; box-shadow: 0 2px 0 var(--leaf-deep); font-weight: 500; }
  nav.top .cta:hover { transform: translateY(-1px); box-shadow: 0 4px 0 var(--leaf-deep); }
  nav.top .cta:active { transform: translateY(1px); box-shadow: 0 1px 0 var(--leaf-deep); }

  /* Buttons */
  .btn { display: inline-flex; align-items: center; gap: 8px; padding: 13px 26px; border-radius: 999px; transition: transform .15s, box-shadow .2s; font-family: 'Noto Serif JP', serif; letter-spacing: .03em; }
  .btn-primary { background: var(--leaf); color: #fff; box-shadow: 0 3px 0 var(--leaf-deep); }
  .btn-primary:hover { transform: translateY(-1px); box-shadow: 0 5px 0 var(--leaf-deep); }
  .btn-primary:active { transform: translateY(1px); box-shadow: 0 1px 0 var(--leaf-deep); }
  .btn-primary.sm { padding: 10px 18px; font-size: 14px; }
  .btn-ghost { color: var(--ink); padding: 13px 22px; }
  .btn-ghost:hover { background: var(--card-2); }
  .btn-dark { background: var(--ink); color: var(--bg); box-shadow: 0 3px 0 #000; }
  .btn-dark:hover { transform: translateY(-1px); }

  /* Pills / Badges */
  .pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 999px; font-size: 12px; font-family: 'Fraunces', serif; letter-spacing: .03em; }
  .pill-leaf { background: var(--card-leaf); color: var(--leaf-deep); }
  .pill-sky { background: var(--card-sky); color: #3B7596; }
  .pill-sun { background: var(--card-sun); color: #8A6F1B; }
  .pill-coral { background: var(--card-coral); color: #A04222; }
  .pill-teal { background: var(--card-3); color: var(--teal-deep); }
  .pill-dark { background: var(--ink); color: var(--bg); }

  /* Tier markers */
  .tier-dot { display: inline-block; width: 10px; height: 10px; border-radius: 999px; vertical-align: middle; margin-right: 6px; }
  .tier-0 { background: var(--sun); }
  .tier-1 { background: var(--leaf); }
  .tier-2 { background: var(--teal-deep); }

  /* External link */
  .ext-link { display: inline-flex; align-items: center; gap: 6px; font-family: 'Noto Serif JP', serif; font-size: 14px; color: var(--teal); padding: 4px 0; border-bottom: 1px solid transparent; transition: border-color .2s; }
  .ext-link:hover { border-bottom-color: var(--teal); }

  /* Welcome strip */
  .welcome { padding: 16px 0; background: linear-gradient(90deg, var(--card-sun) 0%, var(--card-leaf) 100%); }
  .welcome-msg { margin: 0; text-align: center; font-family: 'Noto Serif JP', serif; }
  .welcome-line { display: block; font-size: 14px; color: var(--ink-2); }
  .welcome-line2 { display: block; font-size: 12px; color: var(--ink-3); margin-top: 4px; }
  @media (min-width: 768px) {
    .welcome-line { font-size: 15px; }
    .welcome-line2 { font-size: 13px; }
  }

  /* Story */
  .story { padding: 60px 0; background: var(--bg-soft); }
  .story-lead { font-family: 'Noto Serif JP', serif; font-size: 20px; line-height: 1.9; color: var(--ink); margin: 0 0 40px; }
  .story-lead .muted { color: var(--ink-3); }
  .story-notes { display: grid; grid-template-columns: 1fr; gap: 14px; }
  .story-note { padding: 18px 22px; border-radius: 14px; background: var(--bg); border-left: 4px solid var(--line); }
  .story-note.primary { background: var(--card-leaf); border-left-color: var(--leaf); }
  .story-note.warm { background: var(--card-sun); border-left-color: var(--sun); }
  .story-note.sky { background: var(--card-sky); border-left-color: var(--sky); }
  .story-note-label { display: inline-block; font-family: 'Fraunces', serif; font-size: 10px; letter-spacing: .15em; color: var(--ink-4); margin-bottom: 8px; text-transform: uppercase; }
  .story-note.primary .story-note-label { color: var(--leaf-deep); }
  .story-note.warm .story-note-label { color: #8A6F1B; }
  .story-note.sky .story-note-label { color: #3B7596; }
  .story-note-text { font-family: 'Noto Sans JP', sans-serif; font-size: 14px; line-height: 1.85; color: var(--ink-2); }

  /* Definition block */
  .def-block { padding: 64px 0; background: var(--ink); color: var(--bg); border-radius: 24px 24px 0 0; margin-top: 40px; }
  .def-label { font-family: 'Fraunces', serif; font-size: 12px; letter-spacing: .15em; color: var(--sun); margin-bottom: 12px; }
  .def-h2 { font-family: 'Noto Serif JP', serif; font-size: 32px; font-weight: 500; line-height: 1.4; margin: 0 0 32px; color: var(--bg); }
  .def-grid { display: grid; grid-template-columns: 1fr; gap: 14px; margin-bottom: 24px; }
  .def-card { padding: 22px; border-radius: 14px; background: rgba(246,241,231,0.06); border: 1px solid rgba(246,241,231,0.12); }
  .def-card.highlight { background: rgba(232,181,71,0.10); border-color: var(--sun); }
  .def-card-label { display: inline-block; font-family: 'Fraunces', serif; font-size: 11px; letter-spacing: .12em; color: var(--sun); margin-bottom: 12px; padding: 3px 10px; background: rgba(232,181,71,0.12); border-radius: 999px; }
  .def-card p { font-family: 'Noto Serif JP', serif; font-size: 15px; line-height: 1.9; color: var(--bg); margin: 0; }
  .def-card strong { color: var(--sun); font-weight: 500; }
  .def-note { font-family: 'Noto Serif JP', serif; font-size: 13px; line-height: 1.8; color: rgba(246,241,231,0.7); margin: 0; }
  @media (min-width: 768px) {
    .def-h2 { font-size: 40px; }
    .def-grid { grid-template-columns: 1fr 1.3fr; gap: 20px; }
  }

  /* Five-axis chip row */
  .axis-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
  .axis-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: 999px; font-family: 'Noto Serif JP', serif; font-size: 13px; background: rgba(255,255,255,0.08); color: var(--bg); border: 1px solid rgba(255,255,255,0.15); }

  /* Forest & water section */
  .forest-water { padding: 64px 0; background: var(--card-leaf); }
  .fw-label { display: inline-block; padding: 5px 14px; border-radius: 999px; background: #fff; font-family: 'Fraunces', serif; font-size: 12px; letter-spacing: .15em; color: var(--leaf-deep); margin-bottom: 16px; }
  .forest-water h2 { font-family: 'Noto Serif JP', serif; font-size: 30px; font-weight: 500; line-height: 1.4; margin: 0 0 40px; color: var(--ink); }
  .fw-stages { display: grid; grid-template-columns: 1fr; gap: 24px; }
  .fw-stage { display: grid; grid-template-columns: 56px 1fr; gap: 18px; padding: 22px; border-radius: 14px; background: #fff; }
  .fw-stage .n { font-family: 'Fraunces', serif; font-size: 36px; color: var(--leaf-deep); line-height: 1; font-weight: 500; }
  .fw-stage h3 { font-family: 'Noto Serif JP', serif; font-size: 19px; font-weight: 500; margin: 0 0 10px; color: var(--ink); }
  .fw-stage p { font-family: 'Noto Serif JP', serif; font-size: 14px; line-height: 1.9; color: var(--ink-2); margin: 0; }

  /* Steps */
  .steps { padding: 48px 0; }
  .steps-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .step { padding: 18px; border-radius: 14px; background: var(--card-2); border: 1px solid var(--line); }
  .step .n { font-family: 'Fraunces', serif; font-size: 12px; letter-spacing: .15em; color: var(--ink-4); display: block; margin-bottom: 6px; }
  .step h3 { font-family: 'Noto Serif JP', serif; font-size: 17px; font-weight: 500; margin: 0 0 6px; color: var(--ink); display: flex; align-items: center; gap: 8px; }
  .step p { font-size: 13px; color: var(--ink-3); margin: 0; line-height: 1.6; }
  @media (min-width: 768px) {
    .steps-grid { grid-template-columns: repeat(4, 1fr); gap: 18px; }
  }

  /* Care frame (2 time axes) */
  .care-frame { padding: 22px; border-radius: 14px; background: var(--bg-soft); border: 1px solid var(--line); margin: 20px 0 32px; }
  .care-lead { font-family: 'Noto Serif JP', serif; font-size: 15px; color: var(--ink); margin: 0 0 16px; font-weight: 500; text-align: center; }
  .care-axes { display: grid; grid-template-columns: 1fr; gap: 12px; margin-bottom: 16px; }
  .care-axis { padding: 14px 16px; border-radius: 10px; background: #fff; border-left: 3px solid var(--line); }
  .care-axis.now { border-left-color: var(--coral); }
  .care-axis.future { border-left-color: var(--teal); }
  .care-axis-label { display: inline-block; font-family: 'Fraunces', serif; font-size: 10px; letter-spacing: .15em; text-transform: uppercase; font-weight: 500; margin-bottom: 6px; padding: 2px 10px; border-radius: 999px; }
  .care-axis.now .care-axis-label { color: var(--coral); background: var(--card-coral); }
  .care-axis.future .care-axis-label { color: var(--teal-deep); background: var(--card-3); }
  .care-axis-desc { font-size: 13px; line-height: 1.7; color: var(--ink-2); }
  .care-note { font-family: 'Noto Serif JP', serif; font-size: 13px; line-height: 1.8; color: var(--ink-3); text-align: center; margin: 0; }
  @media (min-width: 768px) { .care-axes { grid-template-columns: 1fr 1fr; } }

  /* Actions */
  .actions { padding: 64px 0; }
  .actions .label { font-family: 'Fraunces', serif; font-size: 12px; letter-spacing: .15em; color: var(--ink-4); margin-bottom: 12px; }
  .actions h2 { font-family: 'Noto Serif JP', serif; font-size: 30px; font-weight: 500; line-height: 1.4; margin: 0 0 14px; color: var(--ink); }
  .actions .lead { font-family: 'Noto Serif JP', serif; font-size: 15px; line-height: 1.9; color: var(--ink-2); margin: 0 0 24px; }
  .tier-tabs { display: grid; grid-template-columns: 1fr; gap: 8px; margin-bottom: 24px; }
  .tier-tab { text-align: left; padding: 14px 18px; border-radius: 14px; background: #fff; color: var(--ink-3); transition: all .15s; display: flex; flex-direction: column; gap: 4px; font-family: 'Noto Serif JP', serif; border: 1.5px solid var(--line); }
  .tier-tab span { font-family: 'Noto Sans JP', sans-serif; font-size: 12px; color: var(--ink-4); font-weight: 300; }
  .tier-tab:hover { border-color: var(--leaf); }
  .tier-tab.active { background: var(--leaf); color: #fff; border-color: var(--leaf-deep); box-shadow: 0 3px 0 var(--leaf-deep); }
  .tier-tab.active span { color: rgba(255,255,255,0.85); }
  @media (min-width: 768px) { .tier-tabs { grid-template-columns: repeat(3, 1fr); gap: 12px; } }

  .actions-grid { display: grid; grid-template-columns: 1fr; gap: 14px; margin-bottom: 28px; }
  @media (min-width: 768px) { .actions-grid { grid-template-columns: repeat(2, 1fr); gap: 18px; } }
  .action-card { padding: 20px; border-radius: 14px; background: #fff; border: 1px solid var(--line); transition: transform .2s; position: relative; }
  .action-card:hover { transform: translateY(-3px); box-shadow: 0 4px 12px rgba(0,0,0,0.04); }
  .action-card .action-num { font-family: 'Fraunces', serif; font-size: 13px; letter-spacing: .15em; color: var(--leaf-deep); margin-bottom: 8px; display: inline-block; padding: 2px 10px; border-radius: 999px; background: var(--card-leaf); }
  .action-card h3 { font-family: 'Noto Serif JP', serif; font-size: 18px; font-weight: 500; margin: 0 0 10px; color: var(--ink); }
  .action-card .action-desc { font-size: 13px; line-height: 1.7; color: var(--ink-2); margin: 0 0 14px; }
  .action-card .action-row { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; background: var(--bg-soft); border-radius: 10px; margin-bottom: 12px; }
  .action-card .action-line { display: flex; gap: 8px; align-items: baseline; font-size: 12px; line-height: 1.6; }
  .action-card .action-label { flex-shrink: 0; padding: 2px 8px; border-radius: 999px; font-family: 'Fraunces', serif; font-size: 10px; letter-spacing: .12em; }
  .action-card .action-label.now { background: var(--card-coral); color: var(--coral); }
  .action-card .action-label.future { background: var(--card-3); color: var(--teal-deep); }
  .action-card .action-label.measure { background: var(--card-sun); color: #8A6F1B; }
  .action-card .action-value { color: var(--ink-2); }
  .action-card .action-cta { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 999px; background: var(--card-leaf); color: var(--leaf-deep); font-family: 'Noto Serif JP', serif; font-size: 13px; transition: all .15s; cursor: pointer; }
  .action-card .action-cta:hover { background: var(--leaf); color: #fff; }
  .actions-tip { padding: 18px 20px; background: var(--card-sky); border-radius: 14px; margin-bottom: 24px; }
  .actions-tip p { font-size: 13px; line-height: 1.8; color: var(--ink-2); margin: 0; }
  .actions-tip strong { color: var(--ink); }

  /* Service tiered callouts */
  .service-tier-grid { display: grid; grid-template-columns: 1fr; gap: 14px; margin-top: 32px; }
  .service-tier { padding: 22px 22px; border-radius: 16px; }
  .service-tier.s-seed { background: var(--card-sun); }
  .service-tier.s-sprout { background: var(--card-leaf); }
  .service-tier.s-mother { background: var(--ink); color: var(--bg); }
  .service-tier-label { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 999px; font-family: 'Fraunces', serif; font-size: 11px; letter-spacing: .12em; margin-bottom: 12px; }
  .service-tier.s-seed .service-tier-label { background: rgba(255,255,255,0.7); color: #8A6F1B; }
  .service-tier.s-sprout .service-tier-label { background: rgba(255,255,255,0.7); color: var(--leaf-deep); }
  .service-tier.s-mother .service-tier-label { background: rgba(232,181,71,0.2); color: var(--sun); }
  .service-tier h3 { font-family: 'Noto Serif JP', serif; font-size: 17px; font-weight: 500; margin: 0 0 8px; }
  .service-tier p { font-size: 13px; line-height: 1.8; margin: 0 0 12px; }
  .service-tier.s-mother p { color: var(--card-2); }
  .service-tier a { font-family: 'Noto Serif JP', serif; font-size: 13px; border-bottom: 1px solid currentColor; padding-bottom: 1px; }
  .service-tier.s-mother a { color: var(--sun); border-bottom-color: var(--sun); }

  /* Power section */
  .power { padding: 64px 0; background: linear-gradient(180deg, var(--ink) 0%, #1A1815 100%); color: var(--bg); }
  .power .label { font-family: 'Fraunces', serif; font-size: 12px; letter-spacing: .15em; color: var(--sun); margin-bottom: 20px; }
  .power p { font-family: 'Noto Serif JP', serif; font-size: 17px; line-height: 2; color: var(--bg); margin: 0 0 20px; }
  .power p.lead { font-size: 20px; }
  .power p.strong { font-size: 22px; color: var(--sun); font-weight: 500; }
  .power-mark { font-family: 'Caveat', cursive; font-size: 24px; color: var(--sun); margin-top: 28px; }

  /* CTA */
  .cta-section { padding: 64px 0; text-align: center; background: var(--bg-soft); }
  .cta-section .lead-bold { font-family: 'Noto Serif JP', serif; font-size: 20px; color: var(--ink); margin-bottom: 16px; line-height: 1.6; font-weight: 500; }
  .cta-section .lead { font-family: 'Noto Serif JP', serif; font-size: 14px; color: var(--ink-3); margin-bottom: 28px; line-height: 1.8; }
  .cta-row { display: flex; flex-direction: column; gap: 12px; align-items: center; justify-content: center; }
  @media (min-width: 768px) { .cta-row { flex-direction: row; } }

  /* Timeline */
  .timeline { padding: 64px 0; }
  .timeline .label { font-family: 'Fraunces', serif; font-size: 12px; letter-spacing: .15em; color: var(--ink-4); margin-bottom: 12px; }
  .timeline h2 { font-family: 'Noto Serif JP', serif; font-size: 28px; font-weight: 500; line-height: 1.4; margin: 0 0 8px; color: var(--ink); }
  .timeline .lead { font-family: 'Noto Serif JP', serif; font-size: 14px; line-height: 1.8; color: var(--ink-3); margin: 0 0 32px; }
  .timeline-track { display: grid; grid-template-columns: 1fr; gap: 14px; }
  .t-year { display: grid; grid-template-columns: 100px 1fr; gap: 18px; padding: 18px; border-radius: 14px; background: var(--card-2); border: 1px solid var(--line); }
  .t-year.current { background: var(--card-leaf); border-color: var(--leaf); }
  .t-year-label { font-family: 'Fraunces', serif; font-size: 13px; letter-spacing: .12em; color: var(--ink-4); align-self: center; }
  .t-year.current .t-year-label { color: var(--leaf-deep); }
  .t-year h3 { font-family: 'Noto Serif JP', serif; font-size: 17px; font-weight: 500; margin: 0 0 4px; color: var(--ink); display: flex; align-items: center; gap: 8px; }
  .t-year p { font-family: 'Noto Serif JP', serif; font-size: 13px; line-height: 1.8; color: var(--ink-2); margin: 0; }
  .timeline-note { font-family: 'Caveat', cursive; font-size: 18px; color: var(--leaf-deep); text-align: center; margin: 28px 0 0; }

  /* Checkin */
  .checkin { padding: 56px 0; max-width: 640px; margin: 0 auto; }
  .progress-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
  .progress-label { font-family: 'Fraunces', serif; font-size: 12px; letter-spacing: .12em; color: var(--ink-4); }
  .progress-skip { font-size: 12px; color: var(--ink-4); padding: 4px 8px; border-radius: 999px; }
  .progress-skip:hover { background: var(--card-2); }
  .progress-bar { height: 4px; width: 100%; background: var(--line); margin-bottom: 32px; border-radius: 4px; overflow: hidden; }
  .progress-fill { height: 100%; background: var(--leaf); transition: width .4s; border-radius: 4px; }
  .checkin h2 { font-family: 'Noto Serif JP', serif; font-size: 26px; font-weight: 500; margin: 0 0 8px; color: var(--ink); line-height: 1.4; }
  .checkin .qsub { font-size: 13px; color: var(--ink-4); margin-bottom: 28px; }
  .options { display: grid; grid-template-columns: 1fr; gap: 8px; margin-bottom: 32px; }
  .option { width: 100%; text-align: left; padding: 14px 18px; border-radius: 12px; border: 1.5px solid var(--line); background: #fff; color: var(--ink); display: flex; align-items: center; justify-content: space-between; transition: all .15s; }
  .option:hover { border-color: var(--leaf); }
  .option.selected { border-color: var(--leaf); background: var(--card-leaf); font-weight: 500; }
  .option svg { color: var(--leaf-deep); }
  .nav-row { display: flex; align-items: center; justify-content: space-between; }
  .nav-back { font-size: 13px; color: var(--ink-3); padding: 8px 14px; border-radius: 999px; }
  .nav-back:hover:not(:disabled) { background: var(--card-2); }
  .nav-back:disabled { opacity: .3; cursor: default; }

  /* Dashboard */
  .dash { padding: 56px 0; }
  .dash .eye { display: inline-block; padding: 4px 12px; border-radius: 999px; background: var(--card-leaf); font-family: 'Fraunces', serif; font-size: 11px; letter-spacing: .12em; color: var(--leaf-deep); margin-bottom: 16px; }
  .dash h2 { font-family: 'Noto Serif JP', serif; font-size: 32px; font-weight: 500; line-height: 1.3; margin: 0 0 14px; white-space: pre-line; }
  .dash .lead { max-width: 640px; line-height: 1.9; color: var(--ink-2); margin-bottom: 18px; font-size: 14px; }
  .dash .layer-note { display: inline-block; padding: 8px 14px; border-radius: 999px; background: var(--card-sun); font-family: 'Noto Serif JP', serif; font-size: 13px; color: #8A6F1B; margin-bottom: 40px; }

  .dash-section { margin-bottom: 48px; }
  .dash-section-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 16px; }
  .dash-section-head h3 { font-family: 'Noto Serif JP', serif; font-size: 18px; font-weight: 500; margin: 0; color: var(--ink); }
  .dash-section-head .hint { font-size: 12px; color: var(--ink-4); }

  .mode-grid { display: grid; grid-template-columns: 1fr; gap: 12px; }
  @media (min-width: 640px) { .mode-grid { grid-template-columns: 1fr 1fr; } }
  .mode { text-align: left; padding: 18px; border-radius: 14px; border: 1.5px solid var(--line); background: #fff; transition: transform .15s, box-shadow .2s; width: 100%; }
  .mode:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.04); }
  .mode.highlight { border-color: var(--leaf); background: var(--card-leaf); }
  .mode .head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 8px; }
  .mode .head .sub { font-family: 'Fraunces', serif; font-size: 11px; letter-spacing: .12em; color: var(--ink-4); }
  .mode h4 { font-family: 'Noto Serif JP', serif; font-size: 18px; font-weight: 500; margin: 0 0 6px; color: var(--ink); }
  .mode p.desc { font-size: 13px; color: var(--ink-2); margin: 0 0 8px; line-height: 1.7; }
  .mode p.spec { font-size: 11px; color: var(--ink-4); margin: 0; font-family: 'Fraunces', serif; letter-spacing: .05em; }
  .modes-faded { margin-top: 12px; opacity: .65; }

  /* Quick cards */
  .quick-grid { display: grid; grid-template-columns: 1fr; gap: 12px; }
  @media (min-width: 640px) { .quick-grid { grid-template-columns: 1fr 1fr 1fr; } }
  .quick { text-align: left; padding: 16px; border-radius: 12px; border: 1.5px solid var(--line); background: #fff; display: flex; align-items: flex-start; gap: 12px; transition: transform .15s; width: 100%; }
  .quick:hover { transform: translateY(-2px); border-color: var(--leaf); }
  .quick svg { color: var(--leaf-deep); margin-top: 2px; flex-shrink: 0; }
  .quick .label { font-family: 'Noto Serif JP', serif; font-size: 14px; margin-bottom: 2px; color: var(--ink); }
  .quick .sub { font-size: 11px; color: var(--ink-4); }

  /* Map view */
  .map-view { padding: 56px 0; }
  .map-view .eye { display: inline-block; padding: 4px 12px; border-radius: 999px; background: var(--card-sky); font-family: 'Fraunces', serif; font-size: 11px; letter-spacing: .12em; color: #3B7596; margin-bottom: 14px; }
  .map-view h2 { font-family: 'Noto Serif JP', serif; font-size: 30px; font-weight: 500; line-height: 1.3; margin: 0 0 12px; color: var(--ink); }
  .map-view .lead { font-family: 'Noto Serif JP', serif; font-size: 14px; line-height: 1.8; color: var(--ink-2); margin: 0 0 28px; max-width: 640px; }
  .map-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-bottom: 24px; }
  @media (min-width: 640px) { .map-stats { grid-template-columns: repeat(4, 1fr); } }
  .stat { padding: 14px 16px; border-radius: 12px; background: var(--card-2); border: 1px solid var(--line); display: flex; flex-direction: column; gap: 4px; }
  .stat-num { font-family: 'Fraunces', serif; font-size: 28px; line-height: 1; color: var(--ink); font-weight: 500; }
  .stat-label { font-size: 11px; color: var(--ink-3); display: flex; align-items: center; gap: 6px; }
  .stat-label small { color: var(--ink-4); font-size: 10px; }
  .stat.mother { background: var(--card-3); }
  .stat.mother .stat-num { color: var(--teal-deep); }
  .stat.sprout { background: var(--card-leaf); }
  .stat.sprout .stat-num { color: var(--leaf-deep); }
  .stat.seed { background: var(--card-sun); }
  .stat.seed .stat-num { color: #8A6F1B; }
  .stat.goal .stat-num { color: var(--coral); }

  #leaflet-map { height: 480px; width: 100%; border-radius: 14px; overflow: hidden; border: 1px solid var(--line); margin-bottom: 24px; }
  .leaflet-popup-content { font-family: 'Noto Sans JP', sans-serif; font-size: 13px; line-height: 1.7; }
  .leaflet-popup-content h4 { font-family: 'Noto Serif JP', serif; font-size: 15px; margin: 0 0 6px; color: var(--ink); }
  .leaflet-popup-content .basin { font-size: 11px; color: var(--teal-deep); margin: 0 0 8px; font-family: 'Fraunces', serif; letter-spacing: .05em; }
  .leaflet-popup-content .story { font-size: 12px; line-height: 1.7; color: var(--ink-2); margin: 0 0 8px; padding: 0; background: none; }
  .leaflet-popup-content .activity { font-size: 11px; color: var(--ink-3); margin: 0 0 8px; }
  .leaflet-popup-content a { color: var(--leaf-deep); font-size: 11px; border-bottom: 1px solid var(--leaf); padding-bottom: 1px; }

  .map-legend { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 14px; padding: 14px 18px; background: var(--bg-soft); border-radius: 12px; }
  .legend-item { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; color: var(--ink-2); }
  .legend-dot { width: 12px; height: 12px; border-radius: 999px; }
  .legend-dot.mother { background: var(--teal-deep); border: 2px solid #fff; box-shadow: 0 0 0 2px var(--teal-deep); }
  .legend-dot.sprout { background: var(--leaf); }
  .legend-dot.seed { background: var(--sun); }

  /* Cert criteria */
  .cert-block { padding: 28px; border-radius: 16px; background: var(--card-3); border-left: 4px solid var(--teal); margin: 32px 0; }
  .cert-label { display: inline-block; font-family: 'Fraunces', serif; font-size: 11px; letter-spacing: .12em; color: var(--teal-deep); margin: 0 0 8px; padding: 3px 10px; background: rgba(255,255,255,0.6); border-radius: 999px; }
  .cert-title { font-family: 'Noto Serif JP', serif; font-size: 20px; font-weight: 500; margin: 0 0 12px; color: var(--ink); }
  .cert-lead { font-family: 'Noto Serif JP', serif; font-size: 13px; line-height: 1.8; color: var(--ink-2); margin: 0 0 20px; }
  .cert-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }
  .cert-item { display: flex; gap: 14px; align-items: flex-start; padding: 14px 16px; background: #fff; border-radius: 12px; }
  .cert-num { font-family: 'Fraunces', serif; font-size: 13px; letter-spacing: .12em; color: var(--teal-deep); padding-top: 2px; flex-shrink: 0; min-width: 24px; }
  .cert-item strong { font-family: 'Noto Serif JP', serif; font-size: 14px; color: var(--ink); display: block; margin-bottom: 4px; font-weight: 500; }
  .cert-item p { font-size: 12px; line-height: 1.7; color: var(--ink-2); margin: 0; }
  .cert-pathway { font-family: 'Caveat', cursive; font-size: 17px; color: var(--leaf-deep); margin: 0; }

  /* Nav adjustments for 6 items */
  nav.top .links { gap: 2px; }
  nav.top .links button.link { padding: 7px 10px; font-size: 13px; }
  @media (max-width: 1024px) {
    nav.top .links { font-size: 12px; gap: 0; flex-wrap: wrap; justify-content: flex-end; }
    nav.top .links button.link { padding: 6px 8px; font-size: 12px; }
  }

  /* HOME hero with summer-voice bubbles */
  .home-hero { position: relative; padding: 72px 0 84px; overflow: hidden; }
  .bubbles-bg { position: absolute; inset: 0; pointer-events: none; opacity: .85; }
  .bubble {
    position: absolute;
    padding: 8px 16px;
    background: rgba(255,255,255,0.92);
    border: 1px solid rgba(196,77,42,0.25);
    border-radius: 20px;
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 12px;
    color: var(--coral);
    box-shadow: 0 4px 12px rgba(196,77,42,0.08);
    white-space: nowrap;
    animation: bubbleFloat 6s ease-in-out infinite;
  }
  .bubble.b1 { top: 4%; left: 6%; animation-delay: 0s; }
  .bubble.b2 { top: 12%; right: 8%; animation-delay: 0.5s; transform: rotate(2deg); }
  .bubble.b3 { top: 28%; left: 3%; animation-delay: 1s; transform: rotate(-2deg); }
  .bubble.b4 { top: 22%; right: 4%; animation-delay: 1.5s; }
  .bubble.b5 { top: 45%; left: 8%; animation-delay: 2s; transform: rotate(1deg); }
  .bubble.b6 { top: 52%; right: 10%; animation-delay: 2.5s; transform: rotate(-1deg); }
  .bubble.b7 { bottom: 18%; left: 5%; animation-delay: 3s; }
  .bubble.b8 { bottom: 12%; right: 6%; animation-delay: 3.5s; transform: rotate(2deg); }
  @media (max-width: 768px) {
    .bubble { font-size: 10px; padding: 6px 12px; }
    .bubble.b1, .bubble.b3, .bubble.b5, .bubble.b7 { display: none; }
  }
  @keyframes bubbleFloat {
    0%, 100% { transform: translateY(0) rotate(var(--r,0deg)); opacity: .7; }
    50% { transform: translateY(-8px) rotate(var(--r,0deg)); opacity: 1; }
  }
  .home-hero-inner { position: relative; z-index: 2; text-align: center; max-width: 720px; margin: 0 auto; padding: 32px 22px; }
  .home-prelude { font-family: 'Caveat', cursive; font-size: 22px; color: var(--ink-3); margin: 0 0 12px; }
  .home-question { font-family: 'Noto Serif JP', serif; font-size: 32px; line-height: 1.4; color: var(--ink); margin: 0 0 16px; font-weight: 500; }
  .home-question .num { color: var(--coral); }
  .home-question .accent { color: var(--leaf-deep); }
  @media (min-width: 768px) { .home-question { font-size: 44px; } }
  .home-answer { font-family: 'Noto Serif JP', serif; font-size: 16px; line-height: 1.9; color: var(--ink-2); margin: 0 0 24px; }
  .home-answer strong { color: var(--leaf-deep); font-weight: 500; }
  .home-cta { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 28px; }

  /* HOME experience block */
  .home-experience { padding: 48px 0; background: var(--bg-soft); }
  .home-experience-inner { max-width: 720px; margin: 0 auto; padding: 0 22px; }
  .home-exp-label { display: inline-block; font-family: 'Fraunces', serif; font-size: 11px; letter-spacing: .15em; color: var(--leaf-deep); padding: 4px 12px; background: var(--card-leaf); border-radius: 999px; margin-bottom: 16px; }
  .home-exp-story { font-family: 'Noto Serif JP', serif; font-size: 17px; line-height: 1.95; color: var(--ink); margin: 0 0 18px; }
  .home-exp-story .hand { font-family: 'Caveat', cursive; font-size: 22px; color: var(--coral); }
  .home-exp-bridge { font-family: 'Noto Serif JP', serif; font-size: 14px; line-height: 1.95; color: var(--ink-2); margin: 0 0 12px; }
  .home-exp-bridge strong { color: var(--leaf-deep); font-weight: 500; }

  /* Bioneer-like manifesto small */
  .bioneer-card { padding: 22px; border-radius: 14px; background: linear-gradient(135deg, var(--card-leaf) 0%, var(--card-sky) 100%); margin: 24px 0; }
  .bioneer-label { display: inline-block; font-family: 'Fraunces', serif; font-size: 11px; letter-spacing: .15em; color: var(--ink-3); padding: 3px 12px; background: rgba(255,255,255,0.7); border-radius: 999px; margin-bottom: 12px; }
  .bioneer-text { font-family: 'Noto Serif JP', serif; font-size: 14px; line-height: 1.95; color: var(--ink-2); margin: 0; }
  .bioneer-text strong { color: var(--ink); font-weight: 500; }

  /* HOME menu cards (6 entry points) */
  .home-menus { padding: 56px 0; }
  .home-menus-title { font-family: 'Noto Serif JP', serif; font-size: 22px; font-weight: 500; color: var(--ink); margin: 0 0 8px; text-align: center; }
  .home-menus-sub { font-family: 'Noto Serif JP', serif; font-size: 14px; color: var(--ink-3); margin: 0 0 32px; text-align: center; }
  .home-menus-grid { display: grid; grid-template-columns: 1fr; gap: 14px; }
  @media (min-width: 640px) { .home-menus-grid { grid-template-columns: 1fr 1fr; } }
  @media (min-width: 900px) { .home-menus-grid { grid-template-columns: repeat(3, 1fr); } }
  .menu-card {
    text-align: left;
    padding: 22px;
    border-radius: 16px;
    background: #fff;
    border: 1.5px solid var(--line);
    cursor: pointer;
    transition: all .2s;
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .menu-card:hover { border-color: var(--leaf); transform: translateY(-3px); box-shadow: 0 8px 20px rgba(0,0,0,0.06); }
  .menu-card .menu-num { font-family: 'Fraunces', serif; font-size: 11px; letter-spacing: .15em; color: var(--ink-4); }
  .menu-card .menu-icon { font-size: 26px; }
  .menu-card h3 { font-family: 'Noto Serif JP', serif; font-size: 18px; font-weight: 500; margin: 0; color: var(--ink); }
  .menu-card p { font-size: 13px; color: var(--ink-2); line-height: 1.7; margin: 0; }
  .menu-card .menu-arrow { font-size: 13px; color: var(--leaf-deep); font-family: 'Noto Serif JP', serif; margin-top: 4px; }

  /* About / Forest&Water shared section styles */
  .page-section { padding: 48px 0; }
  .page-section-alt { padding: 48px 0; background: var(--bg-soft); }
  .page-section h2 { font-family: 'Noto Serif JP', serif; font-size: 26px; font-weight: 500; margin: 0 0 14px; color: var(--ink); line-height: 1.4; }
  .page-section .lead { font-family: 'Noto Serif JP', serif; font-size: 15px; line-height: 1.95; color: var(--ink-2); margin: 0 0 24px; }
  .page-eyebrow { display: inline-block; font-family: 'Fraunces', serif; font-size: 11px; letter-spacing: .15em; color: var(--leaf-deep); padding: 4px 12px; background: var(--card-leaf); border-radius: 999px; margin-bottom: 14px; }
  .page-q-card { padding: 22px; border-radius: 14px; background: #fff; border-left: 4px solid var(--line); margin-bottom: 14px; }
  .page-q-card.leaf { border-left-color: var(--leaf); }
  .page-q-card.sky { border-left-color: var(--sky); }
  .page-q-card.coral { border-left-color: var(--coral); }
  .page-q-card.sun { border-left-color: var(--sun); }
  .page-q-card h3 { font-family: 'Noto Serif JP', serif; font-size: 18px; font-weight: 500; margin: 0 0 8px; color: var(--ink); display: flex; align-items: center; gap: 8px; }
  .page-q-card p { font-family: 'Noto Serif JP', serif; font-size: 14px; line-height: 1.95; color: var(--ink-2); margin: 0; }
  .page-q-card .small-cta { display: inline-block; margin-top: 10px; font-size: 13px; color: var(--leaf-deep); border-bottom: 1px solid var(--leaf); padding-bottom: 1px; }

  /* News page */
  .news-list { display: grid; grid-template-columns: 1fr; gap: 14px; }
  .news-item { padding: 20px; border-radius: 14px; background: #fff; border: 1px solid var(--line); display: grid; grid-template-columns: 80px 1fr; gap: 16px; }
  @media (min-width: 640px) { .news-item { grid-template-columns: 110px 1fr; gap: 20px; } }
  .news-date { font-family: 'Fraunces', serif; font-size: 13px; color: var(--ink-4); padding-top: 2px; }
  .news-tag { display: inline-block; padding: 3px 10px; border-radius: 999px; font-family: 'Fraunces', serif; font-size: 10px; letter-spacing: .1em; margin-bottom: 8px; }
  .news-tag.event { background: var(--card-leaf); color: var(--leaf-deep); }
  .news-tag.cert { background: var(--card-sun); color: #8A6F1B; }
  .news-tag.media { background: var(--card-sky); color: #3B7596; }
  .news-tag.tour { background: var(--card-coral); color: var(--coral); }
  .news-item h3 { font-family: 'Noto Serif JP', serif; font-size: 16px; font-weight: 500; margin: 0 0 6px; color: var(--ink); }
  .news-item p { font-size: 13px; line-height: 1.8; color: var(--ink-2); margin: 0; }
  .news-item a { font-size: 12px; color: var(--leaf-deep); border-bottom: 1px solid var(--leaf); display: inline-block; margin-top: 6px; padding-bottom: 1px; }

  /* Contact page */
  .contact-card { padding: 32px; border-radius: 16px; background: #fff; border: 1px solid var(--line); margin-bottom: 20px; }
  .contact-card h3 { font-family: 'Noto Serif JP', serif; font-size: 18px; font-weight: 500; margin: 0 0 12px; color: var(--ink); display: flex; align-items: center; gap: 8px; }
  .contact-card p { font-family: 'Noto Serif JP', serif; font-size: 13px; line-height: 1.85; color: var(--ink-2); margin: 0 0 14px; }
  .contact-info { display: grid; grid-template-columns: 1fr; gap: 10px; margin-top: 14px; }
  .contact-info-row { display: flex; gap: 10px; align-items: baseline; font-size: 13px; }
  .contact-info-row .label { font-family: 'Fraunces', serif; font-size: 11px; letter-spacing: .1em; color: var(--ink-4); min-width: 80px; }
  .contact-info-row .value { color: var(--ink-2); }
  .contact-form { display: grid; grid-template-columns: 1fr; gap: 14px; }
  .contact-form input, .contact-form textarea, .contact-form select {
    padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; background: #fff; font-size: 14px; font-family: 'Noto Sans JP', sans-serif;
  }
  .contact-form input:focus, .contact-form textarea:focus, .contact-form select:focus { outline: none; border-color: var(--leaf); }
  .contact-form label { font-size: 12px; color: var(--ink-3); font-family: 'Fraunces', serif; letter-spacing: .05em; display: block; margin-bottom: 4px; }
  .contact-form textarea { min-height: 120px; resize: vertical; font-family: 'Noto Serif JP', serif; line-height: 1.7; }

  /* Guide page (観察のコツ) */
  .guide { padding: 48px 0 64px; }
  .guide-hero { padding: 32px; border-radius: 18px; background: linear-gradient(135deg, var(--card-sun) 0%, var(--card-leaf) 50%, var(--card-sky) 100%); margin-bottom: 32px; text-align: center; }
  .guide-eyebrow { display: inline-block; font-family: 'Fraunces', serif; font-size: 11px; letter-spacing: .2em; color: var(--ink-3); padding: 4px 14px; background: rgba(255,255,255,0.6); border-radius: 999px; margin-bottom: 16px; }
  .guide-hero h2 { font-family: 'Noto Serif JP', serif; font-size: 28px; font-weight: 500; margin: 0 0 14px; color: var(--ink); line-height: 1.4; }
  .guide-hero p { font-family: 'Noto Serif JP', serif; font-size: 15px; line-height: 1.9; color: var(--ink-2); margin: 0 auto; max-width: 540px; }
  .guide-hero .hand { display: block; margin-top: 14px; font-family: 'Caveat', cursive; font-size: 20px; color: var(--coral); }

  .guide-intro { padding: 24px; border-radius: 16px; background: var(--bg-soft); margin-bottom: 32px; }
  .guide-intro h3 { font-family: 'Noto Serif JP', serif; font-size: 17px; font-weight: 500; margin: 0 0 10px; color: var(--ink); display: flex; align-items: center; gap: 8px; }
  .guide-intro p { font-size: 14px; line-height: 1.9; color: var(--ink-2); margin: 0 0 10px; }
  .guide-intro p:last-child { margin: 0; }
  .guide-intro strong { color: var(--leaf-deep); }

  .guide-axis { padding: 28px; border-radius: 16px; margin-bottom: 20px; border-left: 6px solid; }
  .guide-axis.eco { background: linear-gradient(135deg, #fff 0%, var(--card-leaf) 100%); border-left-color: var(--leaf); }
  .guide-axis.water { background: linear-gradient(135deg, #fff 0%, var(--card-sky) 100%); border-left-color: var(--sky); }
  .guide-axis.flood { background: linear-gradient(135deg, #fff 0%, #DCEAF1 100%); border-left-color: var(--teal); }
  .guide-axis.heat { background: linear-gradient(135deg, #fff 0%, var(--card-coral) 100%); border-left-color: var(--coral); }
  .guide-axis-head { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
  .guide-axis-head .icon { font-size: 32px; }
  .guide-axis-head h3 { font-family: 'Noto Serif JP', serif; font-size: 22px; font-weight: 500; margin: 0; color: var(--ink); }
  .guide-axis-head .axis-tag { font-family: 'Fraunces', serif; font-size: 10px; letter-spacing: .15em; color: var(--ink-4); display: block; margin-top: 2px; }
  .guide-q { margin-bottom: 18px; }
  .guide-q-label { display: inline-block; font-family: 'Fraunces', serif; font-size: 11px; letter-spacing: .12em; color: var(--ink-3); padding: 3px 10px; background: rgba(255,255,255,0.7); border-radius: 999px; margin-bottom: 8px; }
  .guide-q p { font-family: 'Noto Serif JP', serif; font-size: 14px; line-height: 1.9; color: var(--ink-2); margin: 0; }
  .guide-q ul { font-family: 'Noto Sans JP', sans-serif; font-size: 13px; line-height: 1.9; color: var(--ink-2); margin: 8px 0 0; padding-left: 22px; }
  .guide-q li { margin-bottom: 4px; }

  .guide-compare { display: grid; grid-template-columns: 1fr; gap: 12px; margin-top: 14px; }
  @media (min-width: 640px) { .guide-compare { grid-template-columns: 1fr 1fr; } }
  .guide-bad, .guide-good { padding: 14px 16px; border-radius: 12px; font-size: 13px; line-height: 1.7; }
  .guide-bad { background: rgba(226,106,69,0.10); border: 1px solid rgba(226,106,69,0.3); color: var(--ink-2); }
  .guide-good { background: rgba(108,171,111,0.12); border: 1px solid rgba(108,171,111,0.35); color: var(--ink-2); }
  .guide-bad-label, .guide-good-label { display: inline-block; font-family: 'Fraunces', serif; font-size: 10px; letter-spacing: .12em; padding: 2px 8px; border-radius: 999px; margin-bottom: 6px; }
  .guide-bad-label { background: var(--coral); color: #fff; }
  .guide-good-label { background: var(--leaf); color: #fff; }

  .guide-tier { padding: 24px; border-radius: 16px; background: var(--ink); color: var(--bg); margin: 32px 0 20px; }
  .guide-tier-label { font-family: 'Fraunces', serif; font-size: 11px; letter-spacing: .15em; color: var(--sun); margin-bottom: 14px; }
  .guide-tier h3 { font-family: 'Noto Serif JP', serif; font-size: 22px; font-weight: 500; margin: 0 0 14px; color: var(--bg); }
  .guide-tier-steps { display: grid; grid-template-columns: 1fr; gap: 12px; }
  @media (min-width: 640px) { .guide-tier-steps { grid-template-columns: repeat(3, 1fr); } }
  .guide-tier-step { padding: 16px 18px; background: rgba(244,239,230,0.06); border: 1px solid rgba(244,239,230,0.15); border-radius: 12px; }
  .guide-tier-step .badge { display: inline-block; padding: 3px 10px; border-radius: 999px; font-family: 'Fraunces', serif; font-size: 10px; margin-bottom: 8px; }
  .guide-tier-step.t0 .badge { background: var(--card-sun); color: #8A6F1B; }
  .guide-tier-step.t1 .badge { background: var(--card-leaf); color: var(--leaf-deep); }
  .guide-tier-step.t2 .badge { background: var(--card-3); color: var(--teal-deep); }
  .guide-tier-step h4 { font-family: 'Noto Serif JP', serif; font-size: 15px; font-weight: 500; margin: 0 0 6px; color: var(--bg); }
  .guide-tier-step p { font-size: 12px; line-height: 1.7; color: rgba(244,239,230,0.85); margin: 0; }

  .guide-finale { padding: 28px; border-radius: 16px; background: linear-gradient(135deg, var(--leaf) 0%, var(--leaf-deep) 100%); color: #fff; text-align: center; margin: 32px 0; }
  .guide-finale h3 { font-family: 'Noto Serif JP', serif; font-size: 24px; font-weight: 500; margin: 0 0 12px; color: #fff; }
  .guide-finale p { font-family: 'Noto Serif JP', serif; font-size: 15px; line-height: 1.9; color: rgba(255,255,255,0.95); margin: 0 0 18px; }
  .guide-finale .btn { background: #fff; color: var(--leaf-deep); }
  .guide-finale .btn:hover { background: var(--card-sun); }

  /* Integrated 4-axis stats card */
  .axes4 { padding: 14px 16px; border-radius: 12px; background: linear-gradient(135deg, #FBF6EC 0%, #F4EFE6 100%); border: 1px solid var(--line); margin: 12px 0; }
  .axes4-title { font-family: 'Fraunces', serif; font-size: 10px; letter-spacing: .12em; color: var(--ink-4); margin: 0 0 10px; text-transform: uppercase; }
  .axes4-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  @media (min-width: 640px) { .axes4-grid { grid-template-columns: repeat(4, 1fr); } }
  .axis-stat { padding: 10px 12px; border-radius: 10px; background: #fff; border: 1px solid var(--line); display: flex; flex-direction: column; gap: 4px; }
  .axis-stat.eco { border-top: 3px solid var(--leaf); }
  .axis-stat.water { border-top: 3px solid var(--sky); }
  .axis-stat.flood { border-top: 3px solid var(--teal); }
  .axis-stat.heat { border-top: 3px solid var(--coral); }
  .axis-stat .axis-head { display: flex; align-items: center; gap: 6px; }
  .axis-stat .axis-icon { font-size: 14px; }
  .axis-stat .axis-name { font-family: 'Noto Sans JP', sans-serif; font-size: 10px; color: var(--ink-3); letter-spacing: .03em; }
  .axis-stat .axis-num { font-family: 'Fraunces', serif; font-size: 18px; font-weight: 500; color: var(--ink); line-height: 1.1; }
  .axis-stat .axis-unit { font-size: 10px; color: var(--ink-3); font-family: 'Noto Sans JP', sans-serif; margin-left: 2px; }
  .axis-stat .axis-bar { height: 3px; background: var(--line); border-radius: 2px; overflow: hidden; margin-top: 2px; }
  .axis-stat .axis-bar-fill { height: 100%; border-radius: 2px; transition: width .4s; }
  .axis-stat.eco .axis-bar-fill { background: var(--leaf); }
  .axis-stat.water .axis-bar-fill { background: var(--sky); }
  .axis-stat.flood .axis-bar-fill { background: var(--teal); }
  .axis-stat.heat .axis-bar-fill { background: var(--coral); }
  .axis-stat .axis-sub { font-size: 10px; color: var(--ink-4); margin-top: 2px; line-height: 1.4; }
  .axis-stat.empty { opacity: .35; }
  .axis-stat.empty .axis-num { color: var(--ink-4); font-size: 13px; }

  /* Community 4-axis aggregate (replaces water-agg) */
  .agg4 { padding: 28px; border-radius: 18px; background: linear-gradient(135deg, var(--teal) 0%, var(--teal-deep) 100%); color: var(--bg); margin: 32px 0; }
  .agg4-label { font-family: 'Fraunces', serif; font-size: 11px; letter-spacing: .15em; color: var(--sun); margin-bottom: 10px; }
  .agg4 h3 { font-family: 'Noto Serif JP', serif; font-size: 22px; font-weight: 500; margin: 0 0 8px; color: var(--bg); }
  .agg4 .lead { font-size: 13px; line-height: 1.8; color: rgba(244,239,230,0.85); margin: 0 0 20px; }
  .agg4-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
  @media (min-width: 640px) { .agg4-grid { grid-template-columns: repeat(4, 1fr); } }
  .agg4-cell { padding: 16px 14px; background: rgba(244,239,230,0.06); border: 1px solid rgba(244,239,230,0.12); border-radius: 12px; }
  .agg4-cell .icon { font-size: 20px; margin-bottom: 4px; }
  .agg4-cell .name { font-family: 'Fraunces', serif; font-size: 11px; letter-spacing: .08em; color: rgba(244,239,230,0.65); margin-bottom: 6px; }
  .agg4-cell .num { font-family: 'Fraunces', serif; font-size: 26px; color: var(--sun); font-weight: 500; line-height: 1; display: block; margin-bottom: 4px; }
  .agg4-cell .unit { font-size: 11px; color: rgba(244,239,230,0.7); }
  .agg4-cell .sub { font-size: 10px; color: rgba(244,239,230,0.55); margin-top: 4px; line-height: 1.5; }
  .agg4-goal { margin-top: 18px; padding: 12px 16px; background: rgba(232,181,71,0.10); border: 1px solid rgba(232,181,71,0.3); border-radius: 10px; font-size: 12px; color: var(--bg); line-height: 1.7; }
  .agg4-goal strong { color: var(--sun); }

  /* Triadic blocks (生態系 × 水 × 気候) */
  .triadic-block { padding: 16px 18px; border-radius: 14px; margin: 14px 0; border: 1.5px solid var(--line); background: #fff; }
  .triadic-block.eco { border-left: 5px solid var(--leaf); background: linear-gradient(135deg, #fff 0%, var(--card-leaf) 100%); }
  .triadic-block.water { border-left: 5px solid var(--sky); background: linear-gradient(135deg, #fff 0%, var(--card-sky) 100%); }
  .triadic-block.climate { border-left: 5px solid var(--coral); background: linear-gradient(135deg, #fff 0%, var(--card-coral) 100%); }
  .triadic-head { display: flex; gap: 12px; align-items: center; margin-bottom: 14px; }
  .triadic-icon { font-size: 26px; }
  .triadic-label { display: block; font-family: 'Noto Serif JP', serif; font-size: 16px; font-weight: 500; color: var(--ink); }
  .triadic-sub { font-size: 12px; color: var(--ink-3); margin: 2px 0 0; }

  /* Chips */
  .chip-row { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
  .chip-row.chip-col { flex-direction: column; }
  .chip-row.chip-col .chip { text-align: left; padding: 9px 14px; }
  .chip { padding: 6px 12px; border-radius: 999px; border: 1.5px solid var(--line); background: #fff; color: var(--ink-2); font-size: 12px; font-family: 'Noto Sans JP', sans-serif; cursor: pointer; transition: all .15s; }
  .chip:hover { border-color: var(--leaf); }
  .chip.active { background: var(--ink); color: #fff; border-color: var(--ink); font-weight: 500; }

  /* Triadic prediction card */
  .prediction-card { padding: 22px; border-radius: 16px; background: linear-gradient(135deg, var(--ink) 0%, #1A1815 100%); color: var(--bg); margin-top: 18px; }
  .prediction-label { font-family: 'Fraunces', serif; font-size: 11px; letter-spacing: .15em; color: var(--sun); margin-bottom: 14px; }
  .prediction-scores { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; margin-bottom: 16px; }
  .pred-score { padding: 12px 14px; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.15); border-radius: 10px; }
  .pred-score .icon { font-size: 18px; margin-bottom: 4px; }
  .pred-score .num { font-family: 'Fraunces', serif; font-size: 24px; color: var(--sun); font-weight: 500; line-height: 1; display: block; margin-bottom: 2px; }
  .pred-score .lbl { font-size: 10px; color: rgba(244,239,230,0.7); line-height: 1.4; }
  .prediction-verdict { padding: 14px 16px; background: rgba(232,181,71,0.10); border: 1px solid var(--sun); border-radius: 10px; margin-top: 12px; }
  .prediction-verdict .v-headline { font-family: 'Noto Serif JP', serif; font-size: 15px; color: var(--sun); font-weight: 500; margin: 0 0 6px; }
  .prediction-verdict .v-body { font-size: 12px; line-height: 1.7; color: rgba(244,239,230,0.85); margin: 0; }
  .prediction-disclaimer { font-size: 10px; color: rgba(244,239,230,0.5); margin: 12px 0 0; font-style: italic; line-height: 1.6; }

  /* Water capture calculator */
  .water-calc { padding: 18px 20px; border-radius: 14px; background: linear-gradient(135deg, #DCEAF1 0%, #E4EFDF 100%); border: 1px solid var(--sky); margin: 12px 0; }
  .water-calc-label { display: inline-block; font-family: 'Fraunces', serif; font-size: 11px; letter-spacing: .12em; color: #3B7596; margin-bottom: 10px; padding: 3px 12px; background: rgba(255,255,255,0.7); border-radius: 999px; }
  .water-calc h4 { font-family: 'Noto Serif JP', serif; font-size: 15px; margin: 0 0 12px; font-weight: 500; color: var(--ink); }
  .water-calc-stat { display: flex; align-items: baseline; gap: 8px; margin: 6px 0; }
  .water-calc-num { font-family: 'Fraunces', serif; font-size: 28px; color: #2D5D5A; font-weight: 500; line-height: 1; }
  .water-calc-unit { font-size: 14px; color: var(--ink-3); }
  .water-calc-desc { font-size: 12px; color: var(--ink-2); line-height: 1.7; margin: 4px 0 0; }
  .water-calc-eq { display: flex; gap: 12px; margin-top: 12px; flex-wrap: wrap; }
  .water-calc-eq-item { padding: 6px 12px; border-radius: 999px; background: rgba(255,255,255,0.7); font-size: 12px; color: var(--ink-2); }
  .water-calc-disclaimer { font-size: 11px; color: var(--ink-4); font-style: italic; margin-top: 10px; line-height: 1.6; }

  /* Water aggregate (map page) */
  .water-agg { padding: 28px; border-radius: 16px; background: linear-gradient(135deg, var(--teal) 0%, var(--teal-deep) 100%); color: var(--bg); margin: 32px 0; }
  .water-agg-label { font-family: 'Fraunces', serif; font-size: 11px; letter-spacing: .15em; color: var(--sun); margin-bottom: 12px; }
  .water-agg h3 { font-family: 'Noto Serif JP', serif; font-size: 22px; font-weight: 500; margin: 0 0 8px; color: var(--bg); }
  .water-agg .lead { font-size: 14px; line-height: 1.8; color: rgba(244,239,230,0.85); margin: 0 0 20px; }
  .water-agg-grid { display: grid; grid-template-columns: 1fr; gap: 14px; }
  @media (min-width: 640px) { .water-agg-grid { grid-template-columns: repeat(3, 1fr); } }
  .water-agg-stat { padding: 16px 18px; background: rgba(244,239,230,0.06); border: 1px solid rgba(244,239,230,0.15); border-radius: 12px; }
  .water-agg-stat .num { font-family: 'Fraunces', serif; font-size: 32px; color: var(--sun); font-weight: 500; line-height: 1; display: block; margin-bottom: 6px; }
  .water-agg-stat .label { font-size: 12px; color: rgba(244,239,230,0.75); line-height: 1.6; }

  /* Form (3-tier progressive) */
  .form-view { padding: 56px 0; }
  .form-head { display: flex; align-items: center; gap: 10px; margin-bottom: 20px; }
  .form-head h2 { font-family: 'Noto Serif JP', serif; font-size: 24px; font-weight: 500; margin: 0; color: var(--ink); }
  .form-tier-banner { padding: 12px 16px; border-radius: 12px; background: var(--card-sun); margin-bottom: 20px; display: flex; align-items: center; gap: 10px; font-family: 'Noto Serif JP', serif; font-size: 13px; color: #8A6F1B; }
  .form-tier-banner.tier-1 { background: var(--card-leaf); color: var(--leaf-deep); }
  .form-tier-banner.tier-2 { background: var(--card-3); color: var(--teal-deep); }
  .form-step { padding: 20px; border-radius: 16px; background: var(--bg-soft); border: 1px solid var(--line); margin-bottom: 14px; }
  .form-step-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 16px; }
  .form-step-head h3 { font-family: 'Noto Serif JP', serif; font-size: 16px; font-weight: 500; margin: 0; color: var(--ink); display: flex; align-items: center; gap: 8px; }
  .form-step-toggle { font-size: 12px; color: var(--ink-3); display: flex; align-items: center; gap: 4px; padding: 4px 12px; border-radius: 999px; background: rgba(255,255,255,0.7); }
  .form-step-toggle:hover { background: #fff; }
  .form-step .step-body { display: grid; grid-template-columns: 1fr; gap: 12px; }
  .form-step.collapsed .step-body { display: none; }
  .form-step.collapsed { padding: 16px 20px; background: var(--bg); }
  .form-field { display: flex; flex-direction: column; gap: 6px; }
  .form-field label { font-size: 12px; color: var(--ink-3); font-family: 'Fraunces', serif; letter-spacing: .05em; }
  .form-field input, .form-field select, .form-field textarea { padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: #fff; font-size: 14px; }
  .form-field input:focus, .form-field select:focus, .form-field textarea:focus { outline: none; border-color: var(--leaf); }
  .form-field textarea { min-height: 90px; resize: vertical; font-family: 'Noto Serif JP', serif; line-height: 1.7; }
  .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
  .form-tip { padding: 12px 14px; background: var(--card-sky); border-radius: 10px; font-size: 12px; color: var(--ink-2); line-height: 1.7; }

  /* Posts list */
  .posts { padding: 56px 0; }
  .posts-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 24px; flex-wrap: wrap; }
  .posts-head h2 { font-family: 'Noto Serif JP', serif; font-size: 30px; font-weight: 500; margin: 0; color: var(--ink); }
  .posts-head .eye { display: inline-block; padding: 4px 12px; border-radius: 999px; background: var(--card-sun); font-family: 'Fraunces', serif; font-size: 11px; letter-spacing: .12em; color: #8A6F1B; margin-bottom: 6px; }
  .posts-grid { display: grid; grid-template-columns: 1fr; gap: 14px; }
  @media (min-width: 768px) { .posts-grid { grid-template-columns: repeat(2, 1fr); gap: 18px; } }
  .post-card { padding: 20px; border-radius: 14px; background: #fff; border: 1px solid var(--line); transition: transform .15s; position: relative; }
  .post-link-overlay { position: absolute; inset: 0; border-radius: 14px; }
  .post-card:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.04); }
  .post-card .post-meta { display: flex; gap: 8px; align-items: center; margin-bottom: 10px; flex-wrap: wrap; }
  .post-card h3 { font-family: 'Noto Serif JP', serif; font-size: 17px; font-weight: 500; margin: 0 0 8px; color: var(--ink); }
  .post-card .post-deltas { display: flex; gap: 8px; margin: 8px 0; flex-wrap: wrap; }
  .delta-chip { padding: 4px 10px; border-radius: 999px; font-family: 'Fraunces', serif; font-size: 12px; }
  .delta-chip.good { background: var(--card-leaf); color: var(--leaf-deep); }
  .delta-chip.partial { background: var(--card-sun); color: #8A6F1B; }
  .delta-chip.note { background: var(--card-sky); color: #3B7596; }
  .post-card .post-story { font-family: 'Noto Serif JP', serif; font-size: 13px; line-height: 1.8; color: var(--ink-2); margin: 8px 0 0; }
  .post-card .post-footer { display: flex; justify-content: space-between; align-items: center; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); font-size: 12px; color: var(--ink-3); }

  /* Footer */
  footer.bottom { padding: 48px 0 32px; background: var(--ink); color: var(--bg); border-radius: 24px 24px 0 0; margin-top: 40px; }
  footer .row { display: grid; grid-template-columns: 1fr; gap: 24px; margin-bottom: 28px; }
  @media (min-width: 640px) { footer .row { grid-template-columns: 1fr 1fr; } }
  footer .mark { font-family: 'Fraunces', serif; font-size: 22px; color: var(--sun); }
  footer .submark { font-family: 'Noto Serif JP', serif; font-size: 13px; color: var(--tan); margin-bottom: 8px; }
  footer p { font-size: 13px; line-height: 1.8; color: var(--card-2); }
  .respect-block { padding-top: 24px; border-top: 1px solid rgba(255,255,255,0.1); }
  .respect-label { font-family: 'Fraunces', serif; font-size: 11px; letter-spacing: .12em; color: var(--sun); margin: 0 0 14px; }
  .respect-grid { display: grid; grid-template-columns: 1fr; gap: 16px; }
  @media (min-width: 768px) { .respect-grid { grid-template-columns: 1fr 1fr; } }
  .respect-grid strong { display: block; font-family: 'Noto Serif JP', serif; font-size: 13px; color: var(--sun); margin-bottom: 6px; font-weight: 500; }
  .respect-grid p { font-size: 12px; line-height: 1.7; color: rgba(246,241,231,0.85); margin: 0; }
  .respect-deep { font-family: 'Caveat', cursive; font-size: 17px; color: var(--tan); margin: 20px 0 0; text-align: center; }

  /* Doodles - subtle hand-drawn accents */
  .doodle { position: absolute; opacity: 0.25; pointer-events: none; }
  .leaf-doodle { color: var(--leaf); }
  .drop-doodle { color: var(--sky); }

  /* Auth pages - 2-column layout with Lottie */
  .auth-layout { display: grid; grid-template-columns: 1fr; min-height: calc(100vh - 140px); }
  .auth-lottie { display: none; background: var(--card-leaf); align-items: center; justify-content: center; padding: 48px; }
  .auth-lottie #lottie-login, .auth-lottie #lottie-register { width: 100%; max-width: 320px; }
  .auth-form-block { padding: 48px 24px; max-width: 480px; margin: 0 auto; width: 100%; }
  @media (min-width: 768px) {
    .auth-layout { grid-template-columns: 1fr 1fr; }
    .auth-lottie { display: flex; }
    .auth-form-block { padding: 64px 48px; max-width: none; }
  }

  /* Mypage tabs */
  .mypage-tabs { display: flex; gap: 4px; margin: 20px 0 28px; border-bottom: 2px solid var(--line); }
  .mypage-tab { background: none; border: none; padding: 10px 20px; font-family: 'Noto Serif JP', serif; font-size: 14px; color: var(--ink-3); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -2px; transition: color .15s, border-color .15s; }
  .mypage-tab.active { color: var(--leaf-deep); border-bottom-color: var(--leaf-deep); font-weight: 500; }
  .mypage-tab:hover:not(.active) { color: var(--ink); }

  /* Mypage kansatsu list — fix inconsistent item widths */
  .my-kansatsu-list { align-items: stretch; }
  .my-kansatsu-item-wrapper { width: 100%; }
  .my-kansatsu-item { width: 100%; }

  /* Care popup — 「どんな気候ケア？」を全幅に（2列グリッドの1列目を全span） */
  .rc-popup-detail > .rc-card-detail-item:first-child { grid-column: 1 / -1; }