/* =========================================================
   おかえりのいえ ― トップページ デザインルール（top.css / v2）
   ---------------------------------------------------------
   ・base.css（既存）と yomimono.css の後に読み込み、トップページの
     セクション構成・見た目だけを整えます。ヒーロー・ナビ・フッター・
     モーダル・アニメーションは base.css のままです。
   ・ルール
       背景 … アイボリーを基調。淡いグリーンは「ご支援・寄付」と
              「お問い合わせ」の2か所だけ。
       幅   … wide 1200px（写真を広く）／ base 1040px ／ narrow 720px（文章を読ませる）
       余白 … セクション上下 SP 56px ／ PC 112px、見出し下 SP 32px ／ PC 48px
       見出し … 英字ラベル → 日本語見出し（Kaisei Opti）→ リード文 の順
       カード … 角丸 10px、影なし、線は 1px の細線のみ
   ========================================================= */

:root {
  --t-ivory: #fbf7f0;
  --t-green-pale: #edf3ea;
  --t-line: rgba(90,74,58,0.16);
  --t-accent-ink: #b0613f;      /* 英字の小見出し（アイボリー地で 4.5:1 以上） */
  --t-wide: 1200px;
  --t-base: 1040px;
  --t-narrow: 720px;
  --t-gutter: 20px;
  --t-sec-y: 56px;
  --t-head-gap: 32px;
  --t-radius: 10px;
}
@media (min-width: 900px) {
  :root { --t-gutter: 40px; --t-sec-y: 112px; --t-head-gap: 48px; }
}

body.top-page { background: var(--t-ivory); }

/* ── セクション共通（base.css / yomimono.css の背景・余白・装飾を統一） ── */
#about, #information, #reports, #letter, #support, #volunteer, #access {
  background: var(--t-ivory);
  padding: var(--t-sec-y) 0;
  overflow: visible;
}
#about::before, #information::before, #information::after { content: none; }
.t-sec + .t-sec { box-shadow: inset 0 1px 0 var(--t-line); }
#support { background: var(--t-green-pale); box-shadow: none; }
#support + .t-sec { box-shadow: none; }

.t-wrap {
  width: 100%;
  max-width: calc(var(--t-w, var(--t-base)) + var(--t-gutter) * 2);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--t-gutter);
  padding-right: var(--t-gutter);
}
.t-wrap--wide   { --t-w: var(--t-wide); }
.t-wrap--base   { --t-w: var(--t-base); }
.t-wrap--narrow { --t-w: var(--t-narrow); }

/* ── 見出し ─────────────────────────── */
.t-head { margin-bottom: var(--t-head-gap); }
.t-head .section-label { margin-bottom: 0.6rem; }
.t-title {
  font-family: 'Kaisei Opti', serif;
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.45;
  letter-spacing: 0.04em;
  color: var(--text-dark);
}
@media (min-width: 900px) { .t-title { font-size: 2.1rem; } }
.t-lead {
  margin-top: 0.9rem;
  max-width: 36em;
  font-size: 0.92rem;
  line-height: 1.95;
  color: var(--text-mid);
}
.t-head--row { display: flex; flex-direction: column; gap: 1rem; }
@media (min-width: 760px) {
  .t-head--row { flex-direction: row; align-items: flex-end; justify-content: space-between; gap: 2rem; }
  .t-head--row .t-head-link { flex-shrink: 0; margin-bottom: 0.4rem; }
}
.t-head--row .t-head-link { align-self: flex-start; }
@media (min-width: 760px) { .t-head--row .t-head-link { align-self: auto; } }

.t-subtitle {
  font-family: 'Kaisei Opti', serif;
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1.5;
  color: var(--text-dark);
  letter-spacing: 0.04em;
}
.t-body {
  font-size: 0.93rem;
  line-height: 2;
  color: var(--text-mid);
  max-width: 34em;
}
.t-note { font-size: 0.82rem; line-height: 1.85; color: var(--text-mid); }

/* ── ボタン（影なし・統一） ───────────── */
.t-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.t-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 26px;
  border-radius: var(--radius-btn);
  font-family: 'Zen Maru Gothic', sans-serif;
  font-size: 0.88rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-decoration: none;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.t-btn--line { background: var(--green); color: #fff; }
.t-btn--line:hover { background: #4a7a4a; }
.t-btn--ghost { color: var(--text-dark); box-shadow: inset 0 0 0 1px rgba(45,35,24,0.35); }
.t-btn--ghost:hover { background: rgba(255,255,255,0.7); }
.t-btn:focus-visible, .t-flyer:focus-visible { outline: 3px solid var(--green-light); outline-offset: 2px; }
@media (max-width: 559px) {
  .t-actions { flex-direction: column; }
  .t-btn { width: 100%; }
}

/* チラシを開くボタン（小さなサムネイル付き） */
.t-flyer {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 6px 16px 6px 6px;
  background: transparent;
  border: 1px solid var(--t-line);
  border-radius: 8px;
  font-family: 'Zen Maru Gothic', sans-serif;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--green);
  letter-spacing: 0.04em;
  cursor: zoom-in;
  transition: background 0.2s, border-color 0.2s;
}
.t-flyer:hover { background: #fff; border-color: var(--green-light); }
.t-flyer img {
  width: 34px; height: 46px;
  object-fit: cover; object-position: top;
  border-radius: 3px;
  box-shadow: 0 0 0 1px var(--t-line);
}

/* 箇条の小さなタグ（色付きの丸ボタンにしない） */
.about-tags, .feature-tags, .roles {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
}
.about-tags li, .feature-tags li, .roles li {
  position: relative;
  padding-left: 12px;
  font-size: 0.84rem;
  line-height: 1.8;
  color: var(--text-dark);
}
.about-tags li::before, .feature-tags li::before, .roles li::before {
  content: '';
  position: absolute;
  left: 0; top: 0.75em;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--green-light);
}

/* 「くわしく読む」：スマホでは折りたたみ、PCでは常に表示 */
.t-more { margin-top: 0.4rem; }
.t-more > summary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  list-style: none;
  cursor: pointer;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--green);
  letter-spacing: 0.04em;
  padding: 4px 0;
}
.t-more > summary::-webkit-details-marker { display: none; }
.t-more > summary::after { content: '＋'; font-size: 0.9em; }
.t-more[open] > summary::after { content: '－'; }
.t-more > summary:focus-visible { outline: 3px solid var(--green-light); outline-offset: 2px; border-radius: 4px; }
.t-more > p { margin-top: 0.6rem; }
@media (min-width: 900px) {
  .t-more { margin-top: 0; }
  .t-more > summary { display: none; }
  .t-more > p { margin-top: 1em; }
}

/* 情報の並び（dt/dd） */
.facts-tag { font-size: 0.74rem; font-weight: 700; color: var(--green); letter-spacing: 0.06em; line-height: 1.7; }
.facts { display: grid; }
.facts > div {
  display: flex;
  gap: 1rem;
  padding: 0.6rem 0;
  border-top: 1px solid var(--t-line);
  font-size: 0.88rem;
  line-height: 1.75;
}
.facts > div:last-child { border-bottom: 1px solid var(--t-line); }
.facts dt { flex-shrink: 0; min-width: 7.5em; font-size: 0.78rem; color: var(--text-mid); padding-top: 1px; }
.facts dd { font-weight: 700; color: var(--text-dark); }
.facts--stack dt { min-width: 4.5em; }
.facts--stack dd { font-weight: 500; }

/* =========================================================
   2. About
   ========================================================= */
.about-grid { display: grid; gap: 32px; }
.about-tags { margin-top: 1.4rem; }
.about-visual img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: var(--t-radius);
  display: block;
}
@media (min-width: 900px) {
  .about-grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: 72px; align-items: center; }
  .about-visual img { aspect-ratio: 1 / 1; }
}

.values { margin-top: 56px; }
@media (min-width: 900px) { .values { margin-top: 88px; } }
.values-title {
  font-family: 'Kaisei Opti', serif;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--text-dark);
  margin-bottom: 1.2rem;
  display: flex;
  align-items: baseline;
  gap: 14px;
}
.values-en {
  order: 2;
  font-family: 'Zen Maru Gothic', sans-serif;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--t-accent-ink);
}
.values-list {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px 20px;
}
@media (min-width: 900px) { .values-list { grid-template-columns: repeat(4, 1fr); gap: 32px; } }
.values-list li { border-top: 1px solid var(--t-line); padding-top: 14px; }
.values-no { display: block; font-family: 'Kaisei Opti', serif; font-size: 0.78rem; color: var(--green); letter-spacing: 0.1em; margin-bottom: 0.3rem; }
.values-name { font-size: 0.92rem; font-weight: 700; color: var(--text-dark); line-height: 1.6; margin-bottom: 0.25rem; }
.values-desc { font-size: 0.8rem; color: var(--text-mid); line-height: 1.8; }

/* =========================================================
   3. 活動のご案内
   ========================================================= */
.programs { display: grid; gap: 44px; }
@media (min-width: 760px) { .programs { grid-template-columns: 1fr 1fr; gap: 48px 40px; } }
.program-img {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  object-position: center 40%;
  border-radius: var(--t-radius);
  display: block;
}
.program-body { padding-top: 20px; }
.program-en {
  display: block;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--t-accent-ink);
  margin-bottom: 0.25rem;
}
.program-title {
  font-family: 'Kaisei Opti', serif;
  font-size: 1.3rem;
  font-weight: 700;
  line-height: 1.45;
  color: var(--text-dark);
  margin-bottom: 0.7rem;
}
@media (min-width: 900px) { .program-title { font-size: 1.45rem; } }
.program-sub { display: block; font-family: 'Zen Maru Gothic', sans-serif; font-size: 0.8rem; font-weight: 500; color: var(--text-mid); margin-top: 0.2rem; letter-spacing: 0.04em; }
.program-text { font-size: 0.92rem; line-height: 1.95; color: var(--text-mid); }

/* 2つの活動の開催情報 */
.program-facts { display: grid; gap: 18px; }
.facts-name { font-family: 'Kaisei Opti', serif; font-size: 1.05rem; font-weight: 700; color: var(--text-dark); line-height: 1.5; }
.facts-name span { font-family: 'Zen Maru Gothic', sans-serif; font-size: 0.8rem; font-weight: 500; color: var(--text-mid); }
.program-facts .t-flyer { justify-self: start; }
@media (min-width: 760px) {
  .program-facts {
    grid-column: 1 / -1;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 40px;
    padding: 22px 0;
    border-top: 1px solid var(--t-line);
    border-bottom: 1px solid var(--t-line);
  }
  .program-facts .facts { grid-auto-flow: column; justify-content: start; gap: 36px; }
  .program-facts .facts > div { flex-direction: column; gap: 0; padding: 0; border: none; }
  .program-facts .facts dt { min-width: 0; }
}

/* だべりば */
.feature { margin-top: 64px; display: grid; gap: 22px; }
.feature-media img {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  object-position: center 45%;
  display: block;
  border-radius: var(--t-radius);
}
.feature-body .program-title { margin-bottom: 0.4rem; }
.feature-body .facts-tag { margin-bottom: 0.9rem; }
.feature-tags { margin: 1.1rem 0 1.2rem; }
.feature-body .facts { margin-bottom: 1.2rem; }
@media (max-width: 759px) {
  /* スマホ：写真は画面幅いっぱいに */
  .feature-media { margin: 0 calc(var(--t-gutter) * -1); }
  .feature-media img { border-radius: 0; aspect-ratio: 4 / 3; }
}
@media (min-width: 760px) {
  .feature { margin-top: 96px; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 56px; align-items: center; }
  .feature-media img { aspect-ratio: 4 / 3.4; }
}

/* 年間スケジュール ＋ 申込導線 */
.schedule {
  margin-top: 56px;
  display: grid;
  gap: 18px;
  padding: 24px 0 0;
  border-top: 1px solid var(--t-line);
}
.schedule-title { font-family: 'Kaisei Opti', serif; font-size: 1.15rem; font-weight: 700; color: var(--text-dark); margin: 0.1rem 0 0.5rem; }
.schedule-notes { list-style: none; display: flex; flex-wrap: wrap; gap: 2px 18px; font-size: 0.88rem; color: var(--text-dark); line-height: 1.8; }
.schedule-hint { margin-top: 0.5rem; font-size: 0.74rem; color: var(--text-mid); }
.schedule-actions { margin-top: 6px; }
@media (min-width: 760px) {
  .schedule { margin-top: 80px; grid-template-columns: 1fr auto; align-items: center; column-gap: 40px; padding-top: 32px; }
  .schedule-side { text-align: right; }
  .schedule-actions { grid-column: 1 / -1; margin-top: 18px; }
}

/* =========================================================
   4. 活動の記録（yomimono.css のダーク背景を解除）
   ========================================================= */
#reports .section-label { color: var(--green); }
#reports .section-label::before { background: var(--green); }
#reports .y-textlink { color: var(--green); }

/* =========================================================
   5. おかえりレター
   ========================================================= */
#letter .letter-more { margin-top: 1.4rem; text-align: left; }

/* =========================================================
   6. ご支援・寄付
   ========================================================= */
#supporters { background: none; padding: 0; margin-top: 4px; overflow: hidden; }
#supporters .s-head { margin: 0 auto 18px; display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; }
#supporters .s-head .t-subtitle { margin-bottom: 0.2rem; }
#supporters .s-track {
  padding: 0.2rem var(--t-gutter) 1.2rem;
  scroll-padding-left: var(--t-gutter);
}
@media (min-width: 1120px) {
  #supporters .s-track {
    padding-left: calc((100vw - var(--t-base)) / 2);
    padding-right: calc((100vw - var(--t-base)) / 2);
    scroll-padding-left: calc((100vw - var(--t-base)) / 2);
  }
}
#supporters .s-foot { margin: 0 auto; }

/* カードの高さ：スマホは内容なり、PCは写真つきカードを横長にして高さを揃える */
#supporters .s-track { align-items: stretch; }
#supporters .s-card-media { aspect-ratio: 2.2 / 1; }
@media (min-width: 760px) {
  #supporters .s-track { align-items: stretch; }
  #supporters .s-card { flex-basis: 248px; min-height: 236px; }
  #supporters .s-card:not(.s-card--text) {
    flex-basis: 470px;
    max-width: 470px;
    flex-direction: row;
  }
  #supporters .s-card:not(.s-card--text) .s-card-media { flex: 0 0 44%; aspect-ratio: auto; }
  #supporters .s-card:not(.s-card--text) .s-card-body { padding: 1.4rem 1.3rem 1.2rem; }
  #supporters .s-card:not(.s-card--text) .s-name { font-size: 1.3rem; margin: 0.6rem 0; }
}

.ways-wrap { margin-top: 48px; }
@media (min-width: 900px) { .ways-wrap { margin-top: 80px; } }
.ways { display: grid; margin-top: 1rem; }
.way { padding: 18px 0; border-top: 1px solid var(--t-line); }
.way:last-child { border-bottom: 1px solid var(--t-line); }
.way-title { font-size: 0.95rem; font-weight: 700; color: var(--text-dark); margin-bottom: 0.4rem; }
.way p { font-size: 0.86rem; line-height: 1.9; color: var(--text-mid); }
#support .bank-info {
  background: #fff;
  border: 1px solid var(--t-line);
  border-radius: 8px;
  font-family: 'Zen Maru Gothic', sans-serif;
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  margin-top: 0.7rem;
}
@media (min-width: 900px) {
  .ways { grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--t-line); border-bottom: 1px solid var(--t-line); }
  .way, .way:last-child { padding: 24px 28px; border: none; }
  .way:first-child { padding-left: 0; }
  .way + .way { border-left: 1px solid var(--t-line); }
}

/* =========================================================
   7. ボランティア募集
   ========================================================= */
.volunteer-grid { display: grid; gap: 28px; }
.volunteer-visual img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: var(--t-radius);
  display: block;
}
.volunteer-text .t-head { margin-bottom: 1.2rem; }
.roles { margin: 1.3rem 0 1rem; }
.volunteer-text .t-actions { margin-top: 1.3rem; }
@media (min-width: 900px) {
  .volunteer-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; align-items: center; }
  .volunteer-visual img { aspect-ratio: 4 / 3.6; }
}

/* =========================================================
   8. アクセス・お問い合わせ
   ========================================================= */
.access-grid { display: grid; gap: 28px; }
.access-img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--t-radius);
  display: block;
  margin-bottom: 1.2rem;
}
.t-map.map-wrap { margin: 0; border-radius: var(--t-radius); box-shadow: none; border: 1px solid var(--t-line); background: #efe9df; }
.t-map iframe { height: 260px; }
@media (min-width: 900px) {
  .access-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: stretch; }
  .t-map iframe { height: 100%; min-height: 420px; }
}

.contact {
  margin-top: 56px;
  background: var(--t-green-pale);
  border-radius: 14px;
  padding: 32px 24px;
  display: grid;
  justify-items: center;
  text-align: center;
  gap: 14px;
}
.contact-mascot { width: 64px; height: 64px; object-fit: contain; }
.contact-title { font-family: 'Kaisei Opti', serif; font-size: 1.3rem; font-weight: 700; color: var(--text-dark); line-height: 1.5; margin-bottom: 0.3rem; }
.contact-text p { font-size: 0.9rem; line-height: 1.85; color: var(--text-mid); }
.contact-actions { justify-content: center; width: 100%; }
@media (min-width: 900px) {
  .contact {
    margin-top: 72px;
    grid-template-columns: auto 1fr auto;
    justify-items: start;
    text-align: left;
    align-items: center;
    gap: 28px;
    padding: 36px 44px;
  }
  .contact-mascot { width: 76px; height: 76px; }
  .contact-actions { width: auto; flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  .t-btn, .t-flyer { transition: none; }
}

/* =========================================================
   v3：写真の使い方の整理
   ・同じ写真を複数セクションで繰り返さない
   ・写真のない場所は、余白・文字組み・見出しのメリハリで見せる
   ========================================================= */

/* ── 3. 活動のご案内：だべりば（文章主体） ── */
.feature--text {
  margin-top: 64px;
  padding-top: 40px;
  border-top: 1px solid var(--t-line);
  display: grid;
  gap: 20px;
}
.feature--text .feature-head .program-title { margin-bottom: 0.5rem; }
.feature--text .facts-tag { margin-bottom: 0; }
.feature-lead {
  margin-top: 1.4rem;
  font-family: 'Kaisei Opti', serif;
  font-size: 1.3rem;
  font-weight: 700;
  line-height: 1.7;
  color: var(--text-dark);
  letter-spacing: 0.04em;
}
@media (min-width: 760px) {
  .feature--text {
    margin-top: 96px;
    padding-top: 56px;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 64px;
    align-items: start;
  }
  .feature-lead { font-size: 1.6rem; margin-top: 2rem; }
}

/* ── 4. 活動の記録：最新1件（大きな写真）＋文字の一覧 ── */
.r-feature {
  display: grid;
  gap: 20px;
  text-decoration: none;
  color: inherit;
}
.r-feature-media {
  position: relative;
  overflow: hidden;
  border-radius: var(--t-radius);
  aspect-ratio: 3 / 2;
  background: var(--cream);
}
.r-feature-media > img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.6s ease; }
.r-feature:hover .r-feature-media > img { transform: scale(1.02); }
.r-feature-meta { display: flex; align-items: center; gap: 10px; margin-bottom: 0.7rem; }
.r-feature-title {
  font-family: 'Kaisei Opti', serif;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.55;
  color: var(--text-dark);
  margin-bottom: 0.7rem;
  transition: color 0.2s;
}
.r-feature:hover .r-feature-title { color: var(--green); }
.r-feature-summary { font-size: 0.9rem; line-height: 1.95; color: var(--text-mid); }
.r-feature-date { margin: 0.9rem 0 1.1rem; font-size: 0.78rem; color: var(--text-mid); letter-spacing: 0.06em; }
.r-feature:focus-visible { outline: 3px solid var(--green-light); outline-offset: 4px; border-radius: 12px; }
@media (min-width: 900px) {
  .r-feature { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 56px; align-items: center; }
  .r-feature-media { aspect-ratio: 16 / 10; }
  .r-feature-title { font-size: 1.55rem; }
}

.r-list { list-style: none; margin-top: 40px; border-top: 1px solid var(--t-line); }
.r-list li { border-bottom: 1px solid var(--t-line); }
.r-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-areas: "date cat arrow" "title title arrow";
  align-items: center;
  gap: 4px 14px;
  padding: 16px 2px;
  text-decoration: none;
  color: var(--text-dark);
  transition: background 0.2s;
}
.r-row:hover .r-row-title { color: var(--green); }
.r-row:focus-visible { outline: 3px solid var(--green-light); outline-offset: -3px; }
.r-row-date { grid-area: date; font-size: 0.78rem; color: var(--text-mid); letter-spacing: 0.06em; font-variant-numeric: tabular-nums; }
.r-row-cat { grid-area: cat; font-size: 0.72rem; font-weight: 700; color: var(--green); letter-spacing: 0.06em; }
.r-row-title { grid-area: title; font-size: 0.95rem; font-weight: 500; line-height: 1.6; transition: color 0.2s; }
.r-row-sample { display: none; }
.r-row-arrow { grid-area: arrow; color: var(--green); font-size: 0.9rem; }
@media (min-width: 760px) {
  .r-row {
    grid-template-columns: 7.5em 10em 1fr auto auto;
    grid-template-areas: "date cat title sample arrow";
    gap: 20px;
    padding: 20px 4px;
  }
  .r-row-sample {
    display: inline;
    grid-area: sample;
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    color: var(--text-mid);
    border: 1px solid var(--t-line);
    border-radius: 3px;
    padding: 1px 6px;
  }
}

/* ── 6. ご支援者紹介：文字中心のカルーセル ── */
#supporters .s-track { gap: 0; align-items: stretch; }
#supporters .s-card,
#supporters .s-card:not(.s-card--text) {
  flex: 0 0 68vw;
  max-width: 270px;
  min-height: 0;
  flex-direction: column;
  background: transparent;
  border: none;
  border-left: 1px solid rgba(90,74,58,0.22);
  border-radius: 0;
  padding: 6px 24px 10px;
}
#supporters .s-card:first-child { border-left: none; padding-left: 0; }
@media (min-width: 760px) {
  #supporters .s-card, #supporters .s-card:not(.s-card--text) { flex-basis: 260px; max-width: 260px; padding: 8px 28px 12px; }
  #supporters .s-card:first-child { padding-left: 0; }
}
#supporters .s-date { justify-content: flex-start; gap: 10px; margin-bottom: 0.9rem; font-size: 0.78rem; color: var(--text-mid); }
#supporters .s-type { background: none; padding: 0; border-radius: 0; color: var(--green); font-size: 0.72rem; }
#supporters .s-type::before { content: '／'; margin-right: 8px; color: rgba(90,74,58,0.4); font-weight: 400; }
.s-sample {
  margin-left: auto;
  font-size: 0.56rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--text-mid);
  border: 1px solid rgba(90,74,58,0.25);
  border-radius: 3px;
  padding: 0 5px;
}
#supporters .s-name { font-size: 1.25rem; line-height: 1.55; margin: 0 0 0.6rem; }
#supporters .s-content { font-size: 0.88rem; line-height: 1.85; }
#supporters .s-rows { border-top-style: solid; border-color: rgba(90,74,58,0.16); }
#supporters .s-note { padding-top: 0.8rem; }

/* ── 7. ボランティア募集：写真なし・メッセージとCTA中心 ── */
.volunteer-grid { display: grid; gap: 8px; }
.volunteer-head { margin-bottom: 1.6rem; }
.volunteer-catch {
  margin-top: 1.2rem;
  font-family: 'Kaisei Opti', serif;
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1.85;
  color: var(--green);
  letter-spacing: 0.04em;
}
.volunteer-text .t-body { max-width: 32em; }
@media (min-width: 900px) {
  .volunteer-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 72px; align-items: start; }
  .volunteer-head { margin-bottom: 0; }
  .volunteer-catch { font-size: 1.4rem; }
  .volunteer-text { padding-top: 2.2rem; }
}

/* ── 8. アクセス：地図を中心に、外観写真は小さく ── */
.access-grid { gap: 28px; }
.t-map iframe { height: 300px; }
.access-photo-sm { display: flex; align-items: flex-end; gap: 14px; margin-bottom: 1.2rem; }
.access-photo-sm .access-img { width: 128px; aspect-ratio: 4 / 3; margin: 0; border-radius: 8px; flex-shrink: 0; }
.access-photo-sm figcaption { font-size: 0.74rem; color: var(--text-mid); letter-spacing: 0.04em; }
@media (min-width: 900px) {
  .access-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 48px; align-items: start; }
  .t-map iframe { height: 100%; min-height: 460px; }
  .access-photo-sm .access-img { width: 150px; }
}
/* だべりば上の区切り線と、開催情報の下線が二重にならないように */
@media (min-width: 760px) { .program-facts { border-bottom: none; padding-bottom: 0; } }

/* =========================================================
   v4：参考サイト（むすびえ）の情報設計を取り入れた調整
   ・大きな一文と余白でメリハリ、囲みを減らした雑誌的なレイアウト
   ========================================================= */

/* 見出しを一回り大きく */
@media (min-width: 900px) { .t-title { font-size: 2.35rem; } }

/* 大きな一文（使命・呼びかけ） */
.statement {
  font-family: 'Kaisei Opti', serif;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.7;
  letter-spacing: 0.04em;
  color: var(--text-dark);
  margin-bottom: 1.4rem;
}
.statement--sm { font-size: 1.3rem; margin-top: 0.2rem; margin-bottom: 0.4rem; }
.br-pc { display: none; }
@media (min-width: 900px) {
  .statement { font-size: 2.1rem; margin-bottom: 2rem; }
  .statement--sm { font-size: 1.75rem; }
  .br-pc { display: inline; }
}
/* 大きな一文があるセクションは、日本語見出しを控えめに */
.t-head--quiet { margin-bottom: 1.4rem; }
.t-head--quiet .t-title { font-size: 1.1rem; letter-spacing: 0.08em; color: var(--text-mid); }

/* ── ヒーロー直後：目的別の入口 ── */
.entry { background: var(--t-ivory); border-bottom: 1px solid var(--t-line); }
.entry-inner { display: grid; }
.entry-link {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas: "who arrow" "what arrow";
  align-items: center;
  gap: 2px 12px;
  padding: 14px 0;
  text-decoration: none;
  color: var(--text-dark);
}
.entry-link + .entry-link { border-top: 1px solid var(--t-line); }
.entry-who { grid-area: who; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; color: var(--green); }
.entry-what { grid-area: what; font-family: 'Kaisei Opti', serif; font-size: 1rem; font-weight: 700; transition: color 0.2s; }
.entry-arrow { grid-area: arrow; color: var(--green); transition: transform 0.2s; }
.entry-link:hover .entry-what { color: var(--green); }
.entry-link:hover .entry-arrow { transform: translateX(4px); }
.entry-link:focus-visible { outline: 3px solid var(--green-light); outline-offset: -3px; }
@media (min-width: 760px) {
  .entry-inner { grid-template-columns: repeat(3, 1fr); }
  .entry-link { padding: 26px 28px; }
  .entry-link:first-child { padding-left: 0; }
  .entry-link + .entry-link { border-top: none; border-left: 1px solid var(--t-line); }
  .entry-what { font-size: 1.12rem; }
}
#about { box-shadow: none; }

/* ── 3. 活動のご案内：各活動の日程・時間 ── */
.program-when { display: flex; flex-wrap: wrap; gap: 4px 22px; margin: -0.2rem 0 0.9rem; }
.program-when div { display: flex; gap: 8px; align-items: baseline; }
.program-when dt { font-size: 0.72rem; color: var(--text-mid); }
.program-when dd { font-size: 0.92rem; font-weight: 700; color: var(--text-dark); letter-spacing: 0.04em; }

.program-facts { gap: 6px; }
.program-fee div { display: flex; gap: 12px; align-items: baseline; }
.program-fee dt { font-size: 0.74rem; color: var(--text-mid); }
.program-fee dd { font-size: 0.92rem; font-weight: 700; color: var(--text-dark); }
.program-facts { padding-top: 18px; border-top: 1px solid var(--t-line); }
@media (min-width: 760px) {
  .program-facts { grid-template-columns: auto auto 1fr; gap: 28px; align-items: baseline; padding: 22px 0 0; }
  .program-fee { justify-self: end; }
}

/* 年間スケジュールとチラシ */
.flyers-label { font-size: 0.72rem; font-weight: 700; color: var(--text-mid); letter-spacing: 0.08em; margin-bottom: 0.6rem; }
.flyers { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.flyers .t-flyer { width: 100%; font-size: 0.8rem; text-align: left; }
@media (min-width: 760px) {
  .schedule { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); align-items: start; }
  .schedule-side { text-align: left; }
  .flyers { flex-direction: row; flex-wrap: wrap; }
  .flyers .t-flyer { width: auto; }
}

/* ── 5. おかえりレター：囲みをなくし、線と余白で読ませる ── */
#letter .letter-preview {
  background: transparent;
  border: none;
  border-top: 1px solid var(--t-line);
  border-bottom: 1px solid var(--t-line);
  border-radius: 0;
  padding: 28px 0;
}
#letter .letter-preview .y-sample { right: 0; top: 28px; }
#letter .letter-preview-title { font-size: 1.3rem; }
@media (min-width: 760px) {
  #letter .letter-preview { padding: 40px 0; grid-template-columns: 140px 1fr; gap: 2.4rem; }
  #letter .letter-preview .y-sample { top: 40px; }
  #letter .letter-preview-title { font-size: 1.55rem; }
}

/* ── 6. ご支援・寄付：方法に番号、最後に相談の導線 ── */
.ways--numbered { counter-reset: way; }
.ways--numbered .way-title::before {
  counter-increment: way;
  content: counter(way, decimal-leading-zero);
  display: block;
  font-family: 'Kaisei Opti', serif;
  font-size: 0.8rem;
  color: var(--green);
  letter-spacing: 0.1em;
  margin-bottom: 0.2rem;
}
.ways-actions { margin-top: 28px; }
.t-head .statement--sm { margin-top: 1rem; }
@media (min-width: 900px) { .t-head .statement--sm { margin-top: 1.4rem; } }