/* =========================================================
   どんぐりのバトン ─ 大船渡みんなの森守（モリモリ）プロジェクト
   意匠：チラシ／事業概要（260818）と統一
   ライト固定・ビルドなし・Webフォントなし
   ========================================================= */

:root {
  color-scheme: light;

  --white:     #FFFFFF;
  --bg:        #FBF9F4;   /* アイボリー（10/8・新沼さん）。カードは白のまま */
  --ink:       #2C2A26;
  --soft:      #6E6A63;
  --faint:     #A5A199;
  --green:     #4E9B2A;
  --green-d:   #3A7420;
  --green-l:   #EAF5DE;
  --acorn:     #A9703C;
  --acorn-d:   #6E4520;
  --acorn-l:   #F7EDE1;
  --neutral:   #F7F6F3;
  --line:      #E4E1D9;

  --font: "Yu Gothic", YuGothic, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;

  --r-lg: 18px;
  --r-md: 12px;
  --r-sm: 8px;
  --measure: 36em;
  --shadow: 0 1px 2px rgba(44,42,38,.04), 0 10px 28px -20px rgba(44,42,38,.35);
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.85;
  letter-spacing: .01em;
  -webkit-font-smoothing: antialiased;
}
@media (max-width: 719px) {
  /* 追従CTA（実測78px）より広くとる。足りないと末尾がバーに隠れます */
  body { padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)); }
}

p { margin: 0 0 1.1em; max-inline-size: var(--measure); }
p:last-child { margin-bottom: 0; }
h1, h2, h3 { margin: 0; font-weight: 700; letter-spacing: -.015em; }
a { color: inherit; }
img { max-width: 100%; height: auto; display: block; }
b, strong { font-weight: 700; }

a:focus-visible, summary:focus-visible, button:focus-visible, .btn:focus-visible {
  outline: 3px solid var(--green);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}

.skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--green-d); color: #fff; padding: 10px 18px; z-index: 50;
}
.skip:focus { left: 8px; top: 8px; }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

/* ── レイアウト ─────────────────────────────────── */
.page {
  display: grid;
  padding: 0;
  grid-template-columns:
    [full-start] 1fr
    [content-start] min(920px, 100% - 36px) [content-end]
    1fr [full-end];
  overflow-x: hidden;
}
.page > :where(header, section, footer, div) { grid-column: content; min-inline-size: 0; }
.page > .full { grid-column: full; }

/* ── マストヘッド ───────────────────────────────── */
.masthead {
  display: flex; align-items: center; gap: 10px;
  padding: 22px 0 0; color: var(--green-d);
}
.masthead svg { flex: none; }
.masthead b { font-size: .8125rem; letter-spacing: .02em; }

/* ── ヒーロー ───────────────────────────────────── */
/* 申込ブロックを1画面目に収めたいので、上の余白は詰めています。
   DOM順は「見出し→申込→注記→説明」＝スマホの並び。
   広い画面だけ、説明文を申込の前に戻します（動くのは <p> だけで、
   操作できる要素の順番は変えていません）。                     */
.hero { padding: 22px 0 0; display: flex; flex-direction: column; }
.hero-grid   { order: 1; }
.hero .reason{ order: 2; }
.gate        { order: 3; }
.badge-note  { order: 4; }
.hero .lede  { order: 5; }

.eyebrow {
  font-size: .78125rem; font-weight: 700; letter-spacing: .06em;
  color: var(--acorn-d); margin: 0 0 8px;
}
.hero .reason { font-size: 1rem; margin: 18px 0 0; max-inline-size: 34em; }
.hero-grid {
  display: grid; grid-template-columns: 1fr 190px; gap: 26px; align-items: center;
}
h1 {
  font-size: clamp(1.75rem, 1.05rem + 3.3vw, 2.9rem);
  line-height: 1.34;
  margin: 0 0 18px;
}
h1 .hl {
  background: linear-gradient(transparent 58%, #CFEAB5 58%);
  padding: 0 .08em;
}
.hero .lede { font-size: 1.0625rem; margin: 22px 0 0; }
.hero-art { align-self: end; }
@media (max-width: 639px) {
  /* スマホでは見出しに全幅を使わせる。
     イラストを横に置くと見出しの幅が260pxまで潰れ、
     <br> で決めた行がさらに折り返して「を、」「山に」が行頭に落ちます。
     手動の改行も外して、自然に折り返させるほうが整います。          */
  .hero-grid { grid-template-columns: 1fr; }
  .hero-art { display: none; }
  h1 br { display: none; }
  /* 対応ブラウザ（Chrome / Android WebView）では文節単位で折り返す。
     未対応でも通常の折り返しになるだけで、崩れません。
     ※文字を小さくすると1行の字数が増えて「焼けた／山に」で
       切れるため、大きさはこのままにしています。                 */
  h1 { word-break: auto-phrase; }
  /* スマホでも、理由の1行だけは申込の前に出す。
     そのぶん上の余白を削って、300とボタンを上に保っています。 */
  .masthead     { padding-top: 16px; }
  .hero         { padding-top: 16px; }
  .eyebrow      { font-size: .75rem; margin-bottom: 5px; }
  h1            { margin-bottom: 12px; }
  .hero .reason { order: 2; font-size: .9375rem; line-height: 1.7; margin-top: 12px; }
  .gate         { order: 3; margin-top: 14px; }
  .badge-note   { order: 4; }
  .hero .lede   { order: 5; font-size: 1rem; margin-top: 18px; }
  /* 長いラベルのボタンは折り返す（「10月17日のどんぐり拾いに申し込む」対策） */
  .callout .cta-inline .btn { inline-size: 100%; white-space: normal; }
}
@media (max-width: 479px) {
  /* 320px でも申込ボタンが1画面目に入るように */
  .gate { padding: 14px 16px; gap: 10px; margin-top: 16px; }
  .gate-num { font-size: 1.9375rem; }
}
@media (max-width: 360px) {
  /* この幅だと「2年育てて、焼けた山に」が入りきらず、
     「山に」だけが行に取り残されます。一段小さくして防ぎます。 */
  h1 { font-size: 1.5rem; }
}

/* ── バッジ ─────────────────────────────────────── */
.badges { display: flex; gap: 8px; flex-wrap: wrap; margin: 8px 0 2px; }
.badge {
  border-radius: 999px; padding: 4px 14px;
  font-weight: 700; font-size: .8125rem;
  display: inline-flex; align-items: baseline; gap: 4px;
  background: #fff; color: var(--green-d);
}
.badge b { font-size: 1rem; }
.badge.limit { background: var(--acorn); color: #fff; }
.badge-note {
  font-size: .8rem; color: var(--soft); font-weight: 700;
  margin: 10px 0 0; padding-left: 2px;
}

/* ── ゲート（CTAブロック） ──────────────────────── */
.gate {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 16px 28px;
  background: var(--green-l);
  border-radius: var(--r-lg);
  padding: 20px 24px;
  margin-top: 22px;
}
.gate-txt { display: flex; flex-direction: column; gap: 1px; }
.gate-label { font-size: .78125rem; font-weight: 700; letter-spacing: .06em; color: var(--green-d); }
.gate-num {
  font-size: clamp(2.5rem, 1.8rem + 2.6vw, 3.25rem);
  font-weight: 700; line-height: 1.1; letter-spacing: -.03em;
  color: var(--green-d); font-variant-numeric: tabular-nums;
}
.gate-num small { font-size: .32em; font-weight: 700; margin-left: 7px; letter-spacing: 0; color: var(--ink); }
.gate-sub { font-size: .8rem; color: var(--soft); margin-top: 3px; }

/* ── ボタン ─────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 15px 32px;
  background: var(--green); color: #fff;
  text-decoration: none;
  font-size: 1rem; font-weight: 700; letter-spacing: .02em;
  border: 2px solid var(--green);
  border-radius: 999px;
  transition: background .16s ease, transform .16s ease;
  white-space: nowrap;
}
.btn:hover { background: var(--green-d); border-color: var(--green-d); transform: translateY(-1px); }
.btn.ghost { background: #fff; color: var(--green-d); border-color: var(--green); }
.btn.ghost:hover { background: var(--green-l); transform: translateY(-1px); }
.btn[aria-disabled="true"] {
  background: var(--neutral); color: var(--soft); border-color: var(--line);
  pointer-events: none;
}

/* スマホでは、申込ボタンまで1画面目に収める */
@media (max-width: 639px) {
  .gate { padding: 16px 18px; gap: 12px; margin-top: 18px; }
  .gate-num { font-size: 2.125rem; }
  .gate-sub { font-size: .75rem; line-height: 1.6; }
  .gate .btn { inline-size: 100%; padding: 14px 20px; }
  .badges { margin: 7px 0 1px; }
}

.cta-inline {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px;
  margin: 26px 0 0;
}
.cta-inline .note { font-size: .84rem; color: var(--soft); }

/* ── 写真 ───────────────────────────────────────── */
.shot {
  background: var(--neutral);
  border: 2px dashed var(--line);
  border-radius: var(--r-md);
  display: grid; place-items: center;
  color: var(--faint); font-weight: 700;
  font-size: .8rem; text-align: center; padding: 14px;
}
figure { margin: 0; }
figcaption { margin-top: 8px; font-size: .75rem; color: var(--faint); font-weight: 700; }

.strip { margin-top: 30px; }
.strip-shot { aspect-ratio: 5 / 1; }

.photo-full { margin: 6px 0 0; }
.photo-full .shot { aspect-ratio: 21 / 9; border-radius: 0; border-inline: 0; }
.photo-full figcaption { max-width: 920px; margin: 10px auto 0; padding: 0 18px; }
@media (max-width: 719px) { .photo-full .shot { aspect-ratio: 4 / 3; } }

/* ── セクション ─────────────────────────────────── */
.sec { padding: 60px 0 4px; }
.tag {
  display: inline-block;
  background: var(--green-l); color: var(--green-d);
  font-size: .75rem; font-weight: 700; letter-spacing: .08em;
  padding: 5px 14px; border-radius: 999px; margin-bottom: 14px;
}
h2 { font-size: clamp(1.375rem, 1.05rem + 1.6vw, 1.9rem); line-height: 1.45; margin: 0 0 18px; }
h3 { font-size: 1.125rem; line-height: 1.6; margin: 30px 0 12px; color: var(--green-d); }

.lede { font-size: 1.0625rem; }
.fine { font-size: .84rem; line-height: 1.8; color: var(--soft); max-inline-size: 40em; }
.big-line {
  font-size: clamp(1.125rem, 1rem + 1vw, 1.4375rem);
  font-weight: 700; line-height: 1.6; color: var(--green-d);
}
.why { font-size: 1.0625rem; font-weight: 700; color: var(--green-d); }
.why b { color: var(--ink); }
.src { font-size: .75rem; color: var(--faint); }
.src a { color: var(--soft); }

/* ── 被害の数字 ─────────────────────────────────── */
.fire {
  display: grid; grid-template-columns: auto 1fr; gap: 22px; align-items: center;
  border: 2px solid var(--line); border-radius: var(--r-lg);
  padding: 20px 24px; margin: 0 0 10px;
}
.fire-n {
  font-size: clamp(2.25rem, 1.4rem + 3.6vw, 3.25rem);
  font-weight: 700; color: var(--acorn-d); line-height: 1;
  letter-spacing: -.03em; white-space: nowrap;
}
.fire-n small { font-size: .34em; }
.fire p { font-size: .90625rem; color: var(--soft); margin: 0; }
.fire b { color: var(--ink); }
@media (max-width: 559px) { .fire { grid-template-columns: 1fr; gap: 10px; } }

/* ── ステップ ───────────────────────────────────── */
.steps {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px;
  margin: 26px 0 0;
}
.card { border-radius: var(--r-lg); padding: 18px 18px 20px; }
.card.g { background: var(--green-l); }
.card.a { background: var(--acorn-l); }
.card .num {
  inline-size: 28px; block-size: 28px; border-radius: 50%;
  background: var(--green-d); color: #fff;
  font-size: .84rem; font-weight: 700;
  display: grid; place-items: center; margin-bottom: 10px;
}
.card.a .num { background: var(--acorn-d); }
.card .when { display: block; font-size: .75rem; font-weight: 700; color: var(--soft); line-height: 1.5; }
.card .what { display: block; font-size: 1.3125rem; font-weight: 700; color: var(--green-d); margin: 4px 0 8px; }
.card.a .what { color: var(--acorn-d); }
.card p { font-size: .84rem; line-height: 1.7; margin: 0; max-inline-size: none; }
@media (max-width: 899px) { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 479px) { .steps { grid-template-columns: 1fr; } }

/* ── コールアウト ───────────────────────────────── */
.callout { border-radius: var(--r-lg); padding: 22px 26px; margin: 26px 0 0; }
.callout.g { background: var(--green-l); }
.callout.a { background: var(--acorn-l); }
.callout-h { font-size: 1.0625rem; font-weight: 700; margin: 0 0 8px; color: var(--green-d); }
.callout.a .callout-h { color: var(--acorn-d); }
.callout p { font-size: .90625rem; max-inline-size: 40em; }
.callout .cta-inline { margin-top: 18px; }
.callout.event { border: 2px solid var(--acorn); }

/* ── パスポート ─────────────────────────────────── */
/* 表紙の見本。--pu は実物の1mmにあたる長さ（幅100mm＝表紙の幅）。青い字＝手書きの番号 */
.ppcover {
  --pw: min(100%, 240px);
  --pu: calc(min(100vw - 36px, 240px) / 100);
  inline-size: var(--pw); aspect-ratio: 100 / 148; margin: 8px auto 22px;
  background: #CDAE82; color: #3A2A1A; border-radius: 3px;
  box-shadow: 0 8px 18px rgba(60,50,30,.25);
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; gap: calc(var(--pu) * 3.5);
}
.ppcover .logo {
  inline-size: calc(var(--pu) * 26); block-size: calc(var(--pu) * 26); border-radius: 50%;
  border: calc(var(--pu) * .7) solid #3A2A1A; display: flex; align-items: center; justify-content: center;
}
.ppcover .logo svg { inline-size: 60%; block-size: 60%; }
.ppcover .s { font-size: calc(var(--pu) * 3.6); letter-spacing: .2em; }
.ppcover .ttl { font-size: calc(var(--pu) * 9.4); font-weight: 700; letter-spacing: .08em; line-height: 1.3; }
.ppcover .no {
  margin-top: calc(var(--pu) * 3); font-size: calc(var(--pu) * 6); font-weight: 700;
  display: flex; align-items: baseline; gap: calc(var(--pu) * 1.5);
}
.ppcover .nol { display: inline-block; min-inline-size: calc(var(--pu) * 15); border-bottom: calc(var(--pu) * .35) solid #3A2A1A; line-height: 1.1; }
.ppcover .hw { display: inline-block; color: #23407A; font-weight: 500; font-size: calc(var(--pu) * 8); transform: rotate(-1.5deg) skewX(-6deg); }
.ppcover .org { position: absolute; left: 0; right: 0; bottom: calc(var(--pu) * 8); font-size: calc(var(--pu) * 3.5); line-height: 1.5; }

/* ── 沈黙の2年 ──────────────────────────────────── */
.silence {
  display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 32px;
  margin: 26px 0 0;
}
.silence .months { display: flex; flex-direction: column; gap: 9px; padding-top: 4px; }
.silence .m { display: flex; align-items: center; gap: 12px; min-block-size: 12px; }
.silence .m i {
  display: block; inline-size: 24px; block-size: 2px; border-radius: 2px;
  background: var(--line); transform: scaleX(0); transform-origin: left;
}
.silence[data-drawn] .m i {
  animation: draw .45s cubic-bezier(.2,.7,.3,1) forwards;
  animation-delay: calc(var(--i) * 45ms);
}
@keyframes draw { to { transform: scaleX(1); } }
.silence .m.mark i { background: var(--green); inline-size: 36px; }
.silence .m em {
  font-style: normal; font-size: .78125rem; font-weight: 700; color: var(--green-d);
}
.silence-note {
  display: flex; flex-direction: column; gap: 14px; justify-content: center;
  border-left: 2px solid var(--line); padding-left: 30px;
}
.silence-note p { font-size: .90625rem; margin: 0; }
.silence-note .big-line { font-size: clamp(1.125rem, 1rem + 1vw, 1.4375rem); }
@media (max-width: 639px) {
  .silence { grid-template-columns: 1fr; gap: 22px; }
  .silence-note { border-left: 0; padding-left: 0; border-top: 2px solid var(--line); padding-top: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .silence .m i { transform: scaleX(1); animation: none; }
  .btn:hover { transform: none; }
}

/* ── 参加要項 ───────────────────────────────────── */
.specwrap { overflow-x: auto; min-inline-size: 0; }
table.spec { border-collapse: collapse; inline-size: 100%; min-inline-size: 420px; font-size: .90625rem; }
table.spec th, table.spec td {
  text-align: left; vertical-align: top;
  padding: 15px 16px 15px 0; border-bottom: 1px solid var(--line);
}
table.spec th {
  inline-size: 10em; font-weight: 700; color: var(--green-d);
  font-size: .84rem; white-space: nowrap;
}

/* ── FAQ ────────────────────────────────────────── */
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  cursor: pointer; list-style: none; padding: 17px 34px 17px 26px;
  font-size: 1rem; font-weight: 700; position: relative; color: var(--green-d);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before {
  content: "Q"; position: absolute; left: 0; top: 17px;
  color: var(--green); font-weight: 700;
}
.faq summary::after {
  content: ""; position: absolute; right: 6px; top: 50%;
  inline-size: 9px; block-size: 9px; margin-top: -6px;
  border-right: 2px solid var(--faint); border-bottom: 2px solid var(--faint);
  transform: rotate(45deg); transition: transform .18s ease;
}
.faq details[open] summary::after { transform: rotate(-135deg); margin-top: -2px; }
.faq details p { padding: 0 0 20px 26px; font-size: .90625rem; max-inline-size: 42em; }

/* ── 実施体制 ───────────────────────────────────── */
.who { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin: 0 0 24px; }
.person {
  background: var(--neutral); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 20px; text-align: center;
}
.person .ph {
  inline-size: 68px; block-size: 68px; border-radius: 50%;
  background: var(--green-l); margin: 0 auto 12px;
  display: grid; place-items: center;
  font-size: .72rem; font-weight: 700; color: var(--faint);
}
.person .r { display: block; font-size: .75rem; font-weight: 700; color: var(--green-d); }
.person .n { display: block; font-size: 1.25rem; font-weight: 700; margin: 2px 0 6px; }
.person .d { display: block; font-size: .8125rem; line-height: 1.7; color: var(--soft); }
@media (max-width: 559px) { .who { grid-template-columns: 1fr; } }

.voice {
  border-left: 4px solid var(--green-l); padding: 4px 0 4px 20px;
  max-inline-size: var(--measure); margin: 0 0 24px;
}
.voice p { font-size: .9375rem; margin: 0 0 6px; }
.voice cite { font-style: normal; font-size: .8rem; color: var(--soft); font-weight: 700; }

.notes { margin: 0; padding: 0; list-style: none; }
.notes li {
  font-size: .8125rem; line-height: 1.8; color: var(--soft);
  padding-left: 1.1em; text-indent: -1.1em; margin-bottom: 4px;
  max-inline-size: 44em;
}
.notes li::before { content: "・"; }
.notes b { color: var(--ink); }

/* ── 共有 ───────────────────────────────────────── */
.share {
  background: var(--acorn-l); border-radius: var(--r-lg); padding: 20px 22px;
  display: flex; flex-direction: column; gap: 14px; max-inline-size: 38em;
}
.share-text { font-size: .875rem; line-height: 1.85; white-space: pre-line; }
.share button {
  align-self: flex-start; font: inherit;
  font-size: .84rem; font-weight: 700;
  padding: 10px 22px; cursor: pointer;
  background: #fff; color: var(--acorn-d);
  border: 2px solid var(--acorn); border-radius: 999px;
}
.share button:hover { background: var(--acorn); color: #fff; }

/* ── フッター ───────────────────────────────────── */
.foot {
  border-top: 2px solid var(--line);
  margin-top: 60px; padding: 40px 0 56px;
  display: flex; flex-direction: column; gap: 16px;
}
.foot .fname { font-size: 1.0625rem; font-weight: 700; color: var(--green-d); }
.foot .flist { display: flex; flex-wrap: wrap; gap: 4px 24px; font-size: .84rem; color: var(--soft); }
.foot .flist a { text-underline-offset: 3px; }
.foot .updated { font-size: .72rem; color: var(--faint); font-weight: 700; }

/* ── モバイル追従CTA ────────────────────────────── */
.sticky-cta {
  position: fixed; inset-inline: 0; bottom: 0; z-index: 20;
  display: none; align-items: center; justify-content: space-between; gap: 14px;
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
  background: #fff;            /* blur は使わない（廉価Androidのジャンク対策） */
  border-top: 2px solid var(--green-l);
}
.sticky-cta .s { display: flex; flex-direction: column; line-height: 1.4; }
.sticky-cta .s b { font-size: .875rem; color: var(--green-d); }
.sticky-cta .s span { font-size: .72rem; color: var(--soft); font-weight: 700; }
.sticky-cta .btn { padding: 12px 26px; font-size: .9375rem; }
@media (max-width: 719px) {
  .sticky-cta[data-show] { display: flex; }
}

/* ── 10/8 ヒーローの作り直し（案6-1＋6-2＋6-6：緑の帯・大きいロゴ・波線） ── */
.band { background: var(--green); block-size: 14px; }  /* 文字なしの帯（10/8） */

/* ── 10/8 図解・箇条書き ───────────────────────── */
.dots { margin: 8px 0 0; padding-left: 1.25em; font-size: .90625rem; max-inline-size: 40em; }
.dots li { margin: 0 0 6px; }
.dots li::marker { color: var(--green); }
.callout .dots { margin-top: 4px; }
.kit {
  list-style: none; margin: 14px 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px;
}
.kit li {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 14px 8px 12px; text-align: center;
  font-size: .84rem; font-weight: 700; color: var(--green-d); line-height: 1.4;
}
.kit svg { inline-size: 56px; block-size: 56px; display: block; margin: 0 auto 8px; }
.kit small { display: block; font-size: .78rem; font-weight: 400; color: var(--soft); }
@media (max-width: 639px) { .kit { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 379px) { .kit { grid-template-columns: repeat(2, 1fr); } }
.days { margin: 22px 0 24px; }

/* ── 成長の4コマ（10/8。旧 .silence の29本線の代わり） ── */
.grow {
  list-style: none; margin: 22px 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; align-items: end;
}
.grow li { text-align: center; font-size: .84rem; line-height: 1.4; min-inline-size: 0; }
.grow svg { inline-size: 100%; block-size: auto; max-inline-size: 140px; display: block; margin: 0 auto 6px; }
.grow b { display: block; color: var(--green-d); }
.grow small { display: block; font-size: .75rem; color: var(--soft); }
.grow-note { margin-top: 20px; font-size: .90625rem; }

/* ── 折り返し（10/8）。1文字だけ次の行に落ちるのを防ぐ ──
   word-break: auto-phrase … 文節の切れ目でだけ折り返す（Chrome／Android。非対応の端末は従来どおり）
   text-wrap: pretty       … 最後の行が極端に短くならないように調整                              */
p, li, td, th, dd, figcaption, summary, .fine { text-wrap: pretty; word-break: auto-phrase; }
h2, h3, .callout-h, .big-line { text-wrap: balance; word-break: auto-phrase; }
.nw { white-space: nowrap; }

/* ── 10/17 の囲み：Instagram の告知画像＋本文（10/8） ── */
.callout.event { display: grid; grid-template-columns: minmax(0, 300px) 1fr; gap: 24px; align-items: start; }
.event-body { min-inline-size: 0; }
.event-body .callout-h { margin-top: 2px; }
.igpost {
  position: relative; display: block; border-radius: var(--r-lg); overflow: hidden;
  border: 1px solid var(--line); background: #fff; text-decoration: none;
}
.igpost img { inline-size: 100%; block-size: auto; display: block; }
.igpost-tag {
  position: absolute; right: 10px; top: 10px;  /* 左下だと画像の文字にかぶるので右上に */
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(255,255,255,.94); color: var(--acorn-d);
  font-size: .78rem; font-weight: 700; padding: 6px 11px; border-radius: 999px;
}
.igpost-tag svg { inline-size: 16px; block-size: 16px; }
.igpost:hover .igpost-tag { background: var(--acorn-d); color: #fff; }
@media (max-width: 639px) {
  .callout.event { grid-template-columns: 1fr; gap: 16px; }
  .igpost { max-inline-size: 340px; }
}

/* ── CFページのリンクカード（10/8） ─────────────── */
.cfcard {
  display: grid; grid-template-columns: minmax(0, 220px) 1fr; gap: 0;
  border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden;
  background: #fff; text-decoration: none; color: inherit; margin: 18px 0 0;
  max-inline-size: 640px;
}
.cfcard:hover { border-color: var(--green); }
.cfcard img { inline-size: 100%; block-size: 100%; object-fit: cover; aspect-ratio: 3 / 2; }
.cfcard-body { display: flex; flex-direction: column; gap: 4px; padding: 14px 18px; min-inline-size: 0; }
.cfcard-site { font-size: .75rem; font-weight: 700; letter-spacing: .06em; color: var(--green-d); }
.cfcard-title { font-size: .95rem; font-weight: 700; line-height: 1.5; }
.cfcard-by { font-size: .78rem; color: var(--soft); }
.cfcard-go { font-size: .84rem; font-weight: 700; color: var(--green-d); margin-top: auto; padding-top: 6px; }
@media (max-width: 559px) {
  .cfcard { grid-template-columns: 1fr; }
  .cfcard img { aspect-ratio: 3 / 2; block-size: auto; }
}
.days svg { inline-size: 100%; block-size: auto; display: block; max-inline-size: 640px; }
.days figcaption { font-size: .84rem; color: var(--soft); margin-top: 8px; max-inline-size: 40em; }
.hero { padding-top: 26px; }
.hero-top { order: 1; text-align: center; display: flex; flex-direction: column; align-items: center; }
.hero-logo { width: 210px; height: 210px; border-radius: 50%; object-fit: cover; margin: 0 0 14px; mix-blend-mode: multiply; }  /* ラフJPGの白い余白を地に溶かす。清書（透過PNG/SVG）が来たら外してよい */
.hero-top .eyebrow { margin: 0 0 8px; }
.hero-top h1 { margin: 0 0 6px; font-size: clamp(1.7rem, 1.1rem + 2.6vw, 2.5rem); line-height: 1.38; }
.hero-top h1 span { white-space: nowrap; }
.wave { width: 68%; max-width: 300px; height: auto; display: block; margin: 0 auto 4px; overflow: visible; }
.hero .reason { margin-top: 16px; align-self: center; text-align: center; }
@media (min-width: 720px) { .hero-logo { width: 240px; height: 240px; } .hero .reason { max-inline-size: 38em; } }