:root {
  --green-dark: #0b7b51;
  --green-deep: #0f4d34;
  --mint: #3fb08f;
  --mint-soft: #eaf6f0;
  --gold: #d6b42f;
  --gold-deep: #8a6d12;
  --ink: #1f2423;
  --sub: #545b59;
  --muted: #8a908e;
  --line: #e3e7e5;
  --gray: #f3f5f4;
  --c-ex: #3b8f6a;
  --c-nu: #b08a1c;
  --c-st: #3b7f8c;
  --grad: linear-gradient(120deg, var(--mint) 0%, var(--green-dark) 100%);
  --en: "Montserrat", "Helvetica Neue", Arial, sans-serif;
  --serif-en: "Source Serif Pro", Georgia, serif;
  --sans: "Noto Sans JP", -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
}
* { box-sizing: border-box; }
body.rf-col { margin: 0; background: #fff; color: var(--ink); font-family: var(--sans); line-height: 1.8; -webkit-text-size-adjust: 100%; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; height: auto; }
button { font: inherit; color: inherit; }
.wrap { max-width: 1120px; margin: 0 auto; padding: 0 20px; }
.en { font-family: var(--en); font-weight: 600; letter-spacing: .16em; }

.site-head { position: sticky; top: 0; z-index: 30; background: rgba(255, 255, 255, .96); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
.site-head .wrap { display: flex; align-items: center; gap: 14px; height: 62px; }
.logo { display: flex; align-items: center; gap: 8px; }
.logo .mark { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; background: var(--grad); color: #fff; font-family: var(--serif-en); font-size: 18px; }
.logo b { font-family: var(--serif-en); font-size: 16px; letter-spacing: .12em; }
.logo small { display: block; margin-top: -4px; font-family: var(--en); font-size: 9px; letter-spacing: .24em; color: var(--gold-deep); }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 9px 18px; border-radius: 999px; background: var(--grad); color: #fff; font-size: 13px; font-weight: 700; box-shadow: 0 6px 16px rgba(11, 123, 81, .25); }
.site-head .btn { margin-left: auto; }
.chip { display: inline-block; padding: 0 10px; border-radius: 999px; background: var(--c); color: #fff; font-size: 11px; font-weight: 700; line-height: 21px; }
.ex { --c: var(--c-ex); } .nu { --c: var(--c-nu); } .st { --c: var(--c-st); }
.date { font-family: var(--en); font-size: 12px; color: var(--muted); }

/* 一覧 */
.list-hero { padding: 40px 0 26px; background: linear-gradient(160deg, #f1f8f4, #fff 70%); }
.list-hero .en { font-size: 12px; color: var(--mint); }
.list-hero h1 { margin: 4px 0 0; font-size: clamp(28px, 4vw, 40px); font-weight: 900; letter-spacing: .04em; }
.list-hero p { margin: 6px 0 0; font-size: 14px; color: var(--sub); }
.ctabs { display: flex; gap: 8px; margin-top: 20px; overflow-x: auto; scrollbar-width: none; }
.ctabs::-webkit-scrollbar { display: none; }
.ctabs button { flex: none; display: flex; align-items: center; gap: 6px; padding: 8px 16px; border: 1px solid var(--line); border-radius: 999px; background: #fff; font-size: 14px; font-weight: 700; cursor: pointer; }
.ctabs button i { width: 8px; height: 8px; border-radius: 50%; background: var(--c, var(--ink)); }
.ctabs button.on { background: var(--c, var(--ink)); border-color: var(--c, var(--ink)); color: #fff; }
.ctabs button.on i { background: #fff; }
.feature { display: grid; grid-template-columns: 1.3fr 1fr; gap: 26px; align-items: center; margin-top: 30px; padding: 18px; border-radius: 22px; background: var(--gray); }
.feature .th { aspect-ratio: 16 / 9; border-radius: 16px; overflow: hidden; }
.feature .th img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s; }
.feature:hover .th img { transform: scale(1.04); }
.feature .new { margin-right: 8px; padding: 0 8px; border-radius: 4px; background: var(--gold); color: #fff; font-family: var(--en); font-size: 10px; font-weight: 700; letter-spacing: .1em; line-height: 20px; display: inline-block; }
.feature h2 { margin: 10px 0 6px; font-size: clamp(20px, 2.6vw, 28px); font-weight: 900; line-height: 1.5; }
.feature p { margin: 0 0 10px; font-size: 14px; color: var(--sub); }
.posts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px 20px; margin-top: 34px; }
.post .th { aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden; background: #eee; }
.post .th img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.post:hover .th img { transform: scale(1.05); }
.post .meta { display: flex; align-items: center; gap: 10px; margin-top: 12px; }
.post h3 { margin: 6px 0 0; font-size: 16px; font-weight: 700; line-height: 1.6; }
.post .min { font-size: 12px; color: var(--muted); }

.foot { margin-top: 80px; padding: 40px 0; background: var(--ink); color: rgba(255, 255, 255, .7); font-size: 12px; }

@media (max-width: 760px) {
  .feature { grid-template-columns: 1fr; gap: 14px; padding: 12px; }
  .posts { grid-template-columns: 1fr; gap: 16px; }
  .post { display: grid; grid-template-columns: 130px 1fr; gap: 14px; align-items: start; }
  .post .meta { margin-top: 0; }
  .post h3 { font-size: 14px; }
}

.head-link { margin-left: auto; font-size: 13px; font-weight: 700; color: var(--green-dark); }
.post .exc { margin: 4px 0 0; font-size: 13px; color: var(--sub); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.more { display: block; margin: 34px auto 0; padding: 12px 34px; border: 1.5px solid var(--green-dark); border-radius: 999px; background: #fff; color: var(--green-dark); font-size: 14px; font-weight: 700; cursor: pointer; }
.feature .th.noimg, .post .th.noimg { background: linear-gradient(140deg, #e8f3ed, #f6f3e6); }
a:focus-visible, button:focus-visible { outline: 3px solid var(--mint); outline-offset: 2px; }
@media (max-width: 760px) { .post .exc { display: none; } }
.feature[hidden], .more[hidden] { display: none; }
.post .src, .feature .src { font-size: 12px; font-weight: 700; color: var(--green-dark); }

/* ロゴのRマーク */
.logo .mark { display: inline-flex; align-items: center; justify-content: center; width: auto; height: 34px; padding: 0 2px; border-radius: 0; background: none; color: var(--ink); }
.logo .mark svg { display: block; width: auto; height: 32px; fill: none; stroke: currentColor; stroke-width: 19; }
.site-foot .logo .mark { color: #fff; }