/* 公開ブログ（読み物）用の明るいテーマ。
   サイト全体はダークだが、記事は「白背景・清潔感・読みやすさ」を優先。
   .blogwrap 配下だけに適用し、共通ナビ／フッターには影響させない。 */

.blogwrap { max-width: 760px; margin: 0 auto; }

/* ---- 一覧 ---- */
.blog-list { display: grid; gap: 18px; }
@media (min-width: 680px) { .blog-list { grid-template-columns: 1fr 1fr; } }

.blog-card {
  display: flex; flex-direction: column;
  background: #ffffff; color: #1d2a1a;
  border-radius: 16px; overflow: hidden;
  box-shadow: 0 4px 18px rgba(0,0,0,.28);
  transition: transform .12s ease, box-shadow .12s ease;
}
.blog-card:active { transform: scale(.99); }
.blog-card__thumb { width: 100%; aspect-ratio: 16/10; object-fit: cover; background: #eef1ea; }
.blog-card__thumb--ph { display:flex; align-items:center; justify-content:center; font-size:34px; color:#b9c7ad; }
.blog-card__body { padding: 15px 17px 18px; display:flex; flex-direction:column; gap:7px; flex:1; }
.blog-card__cat { align-self:flex-start; font-size:11.5px; font-weight:700; letter-spacing:.03em; color:#5c8a3f; background:#eef4e6; padding:3px 10px; border-radius:999px; }
.blog-card__title { font-family: var(--font-serif); font-weight:600; font-size:17px; line-height:1.5; color:#1d2a1a; }
.blog-card__sum { font-size:13px; line-height:1.7; color:#5b6656; flex:1; }
.blog-card__date { font-size:12px; color:#9aa595; }

/* ---- 記事本体 ---- */
.article {
  background:#ffffff; color:#25301f;
  border-radius:18px; overflow:hidden;
  box-shadow:0 6px 26px rgba(0,0,0,.30);
}
.article__hero { width:100%; aspect-ratio:16/9; object-fit:cover; background:#eef1ea; }
.article__inner { padding: 26px 22px 30px; }
@media (min-width: 640px) { .article__inner { padding: 34px 40px 40px; } }

.article__cat { display:inline-block; font-size:12px; font-weight:700; color:#5c8a3f; background:#eef4e6; padding:3px 11px; border-radius:999px; }
.article__title { font-family:var(--font-serif); font-weight:600; font-size:26px; line-height:1.45; color:#1d2a1a; margin:12px 0 6px; }
.article__date { font-size:13px; color:#9aa595; margin-bottom:10px; }

/* ブロック */
.article__body { font-size:15.5px; line-height:1.95; color:#33402c; }
.article__body h2.b-heading { font-family:var(--font-serif); font-weight:600; font-size:20px; line-height:1.5; color:#1d2a1a; margin:30px 0 12px; padding-left:12px; border-left:4px solid #7FB069; }
.article__body p.b-paragraph { margin:0 0 18px; }
.article__body figure.b-image { margin:22px 0; }
.article__body figure.b-image img { width:100%; border-radius:12px; }
.article__body figure.b-image figcaption { font-size:12.5px; color:#9aa595; text-align:center; margin-top:8px; }
.article__body ul.b-list { margin:0 0 20px; padding-left:4px; list-style:none; }
.article__body ul.b-list li { position:relative; padding-left:20px; margin:0 0 9px; line-height:1.9; }
.article__body ul.b-list li::before { content:""; position:absolute; left:2px; top:0.72em; width:7px; height:7px; border-radius:50%; background:#7FB069; }
.article__body blockquote.b-quote { margin:22px 0; padding:14px 18px; background:#f4f7ef; border-left:4px solid #b7d29e; border-radius:0 10px 10px 0; color:#4a5842; font-size:14.5px; }
.article__body a.b-link { display:inline-flex; align-items:center; gap:6px; margin:2px 0 18px; padding:10px 18px; background:#eef4e6; color:#5c8a3f; font-weight:700; font-size:14px; border-radius:999px; text-decoration:none; }
.article__body a.b-link:hover { background:#e3edd6; }
/* サイト内イベント/記事の参照カード（クリックできると一目でわかる見た目） */
.article__body a.ref-card {
  display:flex; align-items:center; gap:12px;
  border:1px solid #dbe4d2; border-left:4px solid #7FB069; border-radius:12px;
  padding:14px 16px; margin:18px 0; background:#fff; color:#25301f; text-decoration:none;
  box-shadow:0 2px 10px rgba(60,50,30,.06);
  transition:transform .1s ease, box-shadow .12s ease, border-color .12s ease;
}
.article__body a.ref-card:hover { transform:translateY(-1px); box-shadow:0 6px 18px rgba(60,50,30,.13); border-color:#7FB069; }
.article__body a.ref-card:active { transform:translateY(0); }
.ref-card__body { flex:1; min-width:0; display:flex; flex-direction:column; }
.ref-card__tag { align-self:flex-start; font-size:11px; font-weight:700; color:#5c8a3f; background:#eef4e6; padding:2px 9px; border-radius:999px; }
.ref-card__title { font-family:var(--font-serif); font-weight:600; font-size:16px; line-height:1.45; margin-top:6px; color:#1d2a1a; }
.ref-card__meta { font-size:12.5px; color:#6b7566; margin-top:3px; }
.ref-card__arrow { flex-shrink:0; width:32px; height:32px; border-radius:50%; background:#eef4e6; color:#5c8a3f; display:flex; align-items:center; justify-content:center; font-size:17px; font-weight:700; }
.article__body a.ref-card:hover .ref-card__arrow { background:#7FB069; color:#fff; }

/* 関連イベント */
.rel-events { margin-top:26px; }
.rel-events__t { font-family:var(--font-serif); font-weight:600; font-size:16px; color:#1d2a1a; margin:0 0 10px; }
.rel-ev {
  display:flex; gap:12px; align-items:center;
  border:1px solid #e6ebe0; border-radius:12px; padding:11px 13px; margin-bottom:9px;
  background:#fbfcf9; color:#25301f;
}
.rel-ev__date { font-family:var(--font-mono); font-size:12px; color:#5c8a3f; flex-shrink:0; min-width:52px; }
.rel-ev__title { font-size:14px; font-weight:600; }
.rel-ev__go { margin-left:auto; color:#7FB069; font-size:13px; flex-shrink:0; }

.blog-back { display:inline-block; margin-top:22px; color:var(--text-sub); font-size:14px; }