/* Cluster Hub — 公開サイト
   走査の起点を [日付][団体略称] の等幅タグ対に置く。色はブランドの緑と、
   イベントを区別する青の2色だけに絞り、それ以外は紙とインクで組む。 */

:root{
  --paper:#FBFCFB;
  --paper2:#F3F7F4;
  --ink:#14201A;
  --muted:#5C6B62;
  --rule:#DEE7E1;
  --green:#0D6B30;
  --green-d:#0A5526;
  --green-l:#E8F3EB;
  --blue:#1F5C96;
  --blue-l:#E9F0F7;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --sans: -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN", "Hiragino Sans",
          "Yu Gothic Medium", "Yu Gothic", "Noto Sans JP", "Segoe UI", Meiryo, sans-serif;
  --w: 66rem;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--sans); font-size:17px; line-height:1.8;
  font-feature-settings:"palt" 1;
}
a{color:var(--green-d); text-underline-offset:.18em}
a:hover{color:var(--green)}
h1,h2,h3{line-height:1.4; margin:0}
:focus-visible{outline:2.5px solid var(--green); outline-offset:2px; border-radius:3px}
.skip{position:absolute; left:-9999px}
.skip:focus{left:1rem; top:.6rem; z-index:20; background:#fff; padding:.5rem .9rem; border:2px solid var(--green); border-radius:8px}

.wrap{width:min(100% - 2.5rem, var(--w)); margin-inline:auto}
.wrap.wide{--w:74rem}

/* ---------- ヘッダ ---------- */
.hd{border-bottom:1px solid var(--rule); background:#fff; position:sticky; top:0; z-index:10}
.hd-in{display:flex; align-items:center; gap:1.4rem; min-height:56px; flex-wrap:wrap}
.brand{display:flex; align-items:center; gap:.5rem; text-decoration:none; color:var(--ink); font-weight:700}
.brand-mark{
  font-family:var(--mono); font-size:13px; letter-spacing:.06em;
  background:var(--green); color:#fff; padding:.28rem .42rem; border-radius:6px;
}
.brand-name{letter-spacing:.01em}
.nav{display:flex; gap:1.05rem; margin-left:auto; flex-wrap:wrap}
.nav a{color:var(--muted); text-decoration:none; font-size:15px; font-weight:600; padding:.2rem 0}
.nav a:hover{color:var(--green)}
.nav a[aria-current]{color:var(--green); box-shadow:inset 0 -2px 0 var(--green)}

/* ---------- ヒーロー ---------- */
.hero{padding:3.4rem 0 2.2rem; border-bottom:1px solid var(--rule)}
.hero-h{font-size:clamp(1.75rem, 4.6vw, 2.7rem); font-weight:700; letter-spacing:-.02em}
.hero-s{color:var(--muted); margin:.9rem 0 0; max-width:44rem; font-size:16.5px}
.stat{display:flex; gap:2.4rem; margin:1.9rem 0 0; padding:0; flex-wrap:wrap}
.stat div{margin:0}
.stat dt{font-size:12px; color:var(--muted); letter-spacing:.1em; font-weight:700}
.stat dd{margin:.1rem 0 0; font-family:var(--mono); font-size:1.65rem; font-weight:600; letter-spacing:-.02em}
.stat dd.sm{font-size:.95rem; font-weight:500; padding-top:.5rem; color:var(--muted)}

/* ---------- セクション ---------- */
.sec{padding:2.3rem 0; border-bottom:1px solid var(--rule)}
.sec:last-child{border-bottom:0}
.sec-h{display:flex; align-items:baseline; gap:.9rem; margin-bottom:1rem}
.sec-h h2{font-size:1.06rem; letter-spacing:.01em}
.more{margin-left:auto; font-size:14px; font-weight:600; text-decoration:none}
.more::after{content:" →"}
.cnt{margin-left:auto; font-family:var(--mono); font-size:13.5px; color:var(--muted)}
.ph{font-size:clamp(1.45rem,3.4vw,2rem); letter-spacing:-.015em; margin:.9rem 0 0}
.pl{color:var(--muted); margin:.7rem 0 1.6rem; max-width:46rem; font-size:16.5px}

/* ---------- 行（サイトの背骨） ---------- */
.rows{list-style:none; margin:0; padding:0; border-top:1px solid var(--rule)}
.row{border-bottom:1px solid var(--rule)}
.row-a{
  display:grid; align-items:center; gap:.85rem; text-decoration:none; color:var(--ink);
  grid-template-columns:5.4rem 10.8rem 1fr auto 1.1rem; padding:.82rem .6rem;
  border-radius:9px; transition:background .12s ease;
}
.row-a:hover{background:var(--green-l); color:var(--ink)}
.row-a:hover .row-t{text-decoration:underline; text-decoration-color:var(--green)}
.tag{font-family:var(--mono); font-size:13px; font-weight:600; white-space:nowrap}
.tag-d{color:var(--muted); letter-spacing:.02em}
.tag-d .yr{display:block; font-size:11px; opacity:.62; letter-spacing:.08em}
.tag-o{
  display:inline-block; background:var(--paper2); border:1px solid var(--rule);
  padding:.22rem .5rem; border-radius:10px; text-align:center;
  max-width:100%; white-space:normal; line-height:1.35; word-break:break-word;
}
.tag-o.t-e{background:var(--blue-l); border-color:#C9DCEE; color:var(--blue)}
.tag-lg{font-size:16px; padding:.34rem .9rem}
.row-t{font-size:16.5px; line-height:1.6; min-width:0}
.row-k{font-size:12.5px; color:var(--muted); white-space:nowrap}
.row-x{color:var(--muted); font-size:13px; text-align:right}
.empty{color:var(--muted); padding:1.6rem .5rem; background:var(--paper2); border-radius:10px}

/* ---------- 分野 ---------- */
.fgrid{list-style:none; margin:0; padding:0; display:grid; gap:.6rem;
  grid-template-columns:repeat(auto-fill, minmax(17rem,1fr))}
.fgrid a{
  display:block; text-decoration:none; color:var(--ink); background:#fff;
  border:1px solid var(--rule); border-radius:11px; padding:.85rem .95rem; height:100%;
  transition:border-color .12s ease, transform .12s ease;
}
.fgrid a:hover{border-color:var(--green); transform:translateY(-1px)}
.fg-n{display:block; font-weight:700; font-size:16px}
.fg-s{display:block; margin:.45rem 0 .6rem; font-size:13px; color:var(--muted); line-height:1.6}
.fg-s i{font-style:normal}
.fg-s i:not(:last-child)::after{content:" · "}
.fg-c{font-family:var(--mono); font-size:12.5px; color:var(--green); font-weight:600}

.fsec{padding:1.5rem 0; border-bottom:1px solid var(--rule)}
.fsec-h{display:flex; align-items:baseline; gap:.8rem; margin-bottom:.85rem}
.fsec-h h2{font-size:1rem}
.fsec-h a{text-decoration:none}
.fsec-c{margin-left:auto; font-family:var(--mono); font-size:12.5px; color:var(--muted)}
.segs{display:grid; gap:.9rem; grid-template-columns:repeat(auto-fill, minmax(16rem,1fr))}
.seg{background:#fff; border:1px solid var(--rule); border-radius:11px; padding:.8rem .9rem}
.seg-k{font-size:12.5px; font-weight:700; color:var(--green); letter-spacing:.05em; margin-bottom:.55rem}
.seg-l{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:.35rem}
.seg-l a{text-decoration:none}
.seg-l a:hover .tag-o{border-color:var(--green); background:var(--green-l); color:var(--green-d)}

/* ---------- 団体 ---------- */
.osec{padding:1.3rem 0; border-bottom:1px solid var(--rule)}
.osec-h{font-size:.82rem; letter-spacing:.08em; color:var(--muted); margin-bottom:.7rem; font-weight:700}
.ogrid{list-style:none; margin:0; padding:0; display:grid; gap:.5rem;
  grid-template-columns:repeat(auto-fill, minmax(19rem,1fr))}
.ogrid a{display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:.6rem;
  text-decoration:none; color:var(--ink); border:1px solid var(--rule); background:#fff;
  border-radius:10px; padding:.6rem .7rem}
.ogrid a:hover{border-color:var(--green); background:var(--green-l)}
.og-f{font-size:13.5px; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.og-c{font-family:var(--mono); font-size:12.5px; color:var(--muted)}
.ohead{padding:1rem 0 .4rem}
.ometa{display:flex; gap:.45rem; flex-wrap:wrap; margin:1rem 0 0}
.chip{display:inline-block; font-size:13.5px; font-weight:600; text-decoration:none;
  border:1px solid var(--rule); background:#fff; border-radius:999px; padding:.28rem .75rem; color:var(--muted)}
.chip:hover{border-color:var(--green); color:var(--green)}
.chip-out{background:var(--green); border-color:var(--green); color:#fff}
.chip-out:hover{background:var(--green-d); color:#fff}
.arch{font-size:13.5px; color:var(--muted); margin-top:1.1rem}

/* ---------- 絞り込み ---------- */
.filters{display:flex; gap:.85rem; flex-wrap:wrap; align-items:flex-end;
  background:var(--paper2); border:1px solid var(--rule); border-radius:12px; padding:.85rem .95rem; margin-bottom:1.3rem}
.fl{display:flex; flex-direction:column; gap:.3rem; font-size:12px; font-weight:700; color:var(--muted); letter-spacing:.05em}
.fl select,.fl input{font-family:inherit; font-size:15px; font-weight:400; color:var(--ink);
  border:1px solid var(--rule); background:#fff; border-radius:8px; padding:.42rem .6rem; min-width:11rem}
.fl-q input{min-width:15rem}
.fl-c{margin-left:auto; font-family:var(--mono); font-size:13.5px; color:var(--muted); padding-bottom:.5rem}
.months{display:flex; gap:.4rem; flex-wrap:wrap; align-items:center; margin-top:1.6rem;
  padding-top:1.1rem; border-top:1px solid var(--rule); font-size:13.5px}
.months span:first-child{font-weight:700; color:var(--muted); margin-right:.3rem; font-size:12px; letter-spacing:.08em}
.months a,.months .cur{font-family:var(--mono); text-decoration:none; border:1px solid var(--rule);
  background:#fff; border-radius:7px; padding:.22rem .55rem}
.months .cur{background:var(--green); border-color:var(--green); color:#fff}

/* ---------- 文章・フォーム ---------- */
.prose{max-width:42rem; padding-bottom:1.5rem}
.prose h2{font-size:1rem; margin:2rem 0 .5rem; padding-top:.3rem; border-top:1px solid var(--rule)}
.prose p{margin:.6rem 0; font-size:16.5px}
.prose .warn{background:var(--paper2); border-left:3px solid var(--green); padding:.85rem 1rem; border-radius:0 9px 9px 0; font-size:15px}
.form{max-width:34rem; padding-bottom:2rem}
.fld{display:block; margin-bottom:1rem}
.fld span{display:block; font-size:13.5px; font-weight:700; color:var(--muted); margin-bottom:.3rem}
.fld input,.fld select,.fld textarea{width:100%; font-family:inherit; font-size:16px; color:var(--ink);
  border:1px solid var(--rule); background:#fff; border-radius:9px; padding:.6rem .7rem}
.fld textarea{resize:vertical}
.hp{position:absolute; left:-9999px}
.btn{display:inline-block; font-family:inherit; font-size:15.5px; font-weight:700; cursor:pointer;
  background:var(--green); color:#fff; border:1px solid var(--green); border-radius:9px; padding:.62rem 1.5rem; text-decoration:none}
.btn:hover{background:var(--green-d); color:#fff}
.btn-q{background:#fff; color:var(--green-d); border-color:var(--rule)}
.btn-q:hover{background:var(--green-l); color:var(--green-d)}

/* ---------- パンくず・フッタ ---------- */
.crumb{display:flex; gap:.4rem; flex-wrap:wrap; font-size:13.5px; color:var(--muted); padding-top:1.3rem}
.crumb a{color:var(--muted); text-decoration:none}
.crumb a:hover{color:var(--green)}
.crumb i{font-style:normal; opacity:.45}
.ft{border-top:1px solid var(--rule); background:#fff; margin-top:2.5rem}
.ft-in{padding:1.9rem 0 2.4rem}
.ft-note{font-size:14px; color:var(--muted); max-width:44rem; margin:0}
.ft-links{display:flex; gap:1.1rem; margin:.9rem 0 0; font-size:14.5px}
.ft-links a{text-decoration:none; font-weight:600}
.ft-meta{font-family:var(--mono); font-size:12px; color:var(--muted); margin:.7rem 0 0}

@media (max-width:640px){
  .row-a{grid-template-columns:4rem 1fr auto; gap:.6rem; row-gap:.2rem}
  .tag-o{grid-row:1; max-width:9rem; justify-self:start}
  .row-t{grid-column:2 / -1; grid-row:2}
  .row-k{grid-column:3; grid-row:1}
  .row-x{display:none}
  .stat{gap:1.5rem}
  .hero{padding-top:2.2rem}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none !important; animation:none !important}
}


/* ---------- イベントの月ブロック ---------- */
.cal{margin:0 0 .4rem}
.cal-m{display:flex; align-items:baseline; gap:.7rem; margin:1.6rem 0 .6rem;
  padding-bottom:.4rem; border-bottom:2px solid var(--green)}
.cal-m b{font-size:1.15rem; letter-spacing:.01em}
.cal-m span{font-family:var(--mono); font-size:12px; color:var(--muted)}
.cal-l{list-style:none; margin:0; padding:0; display:grid; gap:.5rem}
.cal-l a{display:grid; grid-template-columns:4.6rem 1fr auto; align-items:center; gap:1rem;
  text-decoration:none; color:var(--ink); background:#fff; border:1px solid var(--rule);
  border-radius:12px; padding:.7rem .9rem; transition:border-color .12s ease, background .12s ease}
.cal-l a:hover{border-color:var(--green); background:var(--green-l)}
.cal-d{display:flex; flex-direction:column; align-items:center; justify-content:center;
  border-right:1px solid var(--rule); padding-right:.9rem; min-height:3.1rem}
.cal-d b{font-family:var(--mono); font-size:1.9rem; font-weight:600; line-height:1; letter-spacing:-.03em}
.cal-d i{font-style:normal; font-size:11.5px; color:var(--muted); margin-top:.22rem; letter-spacing:.06em}
.cal-d.tbd b{font-size:1rem; font-weight:700; color:var(--muted); line-height:1.3}
.cal-t{min-width:0}
.cal-t .cal-o{display:inline-block; margin-bottom:.2rem}
.cal-t .cal-n{display:block; font-size:16.5px; line-height:1.5}
.cal-x{color:var(--muted); font-size:13px}
@media (max-width:640px){
  .cal-l a{grid-template-columns:3.6rem 1fr; gap:.7rem}
  .cal-x{display:none}
  .cal-d b{font-size:1.5rem}
}

/* ---------- 言語切替 ---------- */
.lang{display:flex; gap:.15rem; margin-left:.9rem; border:1px solid var(--rule);
  border-radius:8px; overflow:hidden; background:var(--paper2)}
.lang a{font-size:12.5px; font-weight:700; text-decoration:none; color:var(--muted);
  padding:.3rem .6rem; line-height:1.5; letter-spacing:.02em}
.lang a:hover{background:#fff; color:var(--green)}
.lang a[aria-current]{background:var(--green); color:#fff}
@media (max-width:640px){ .lang{margin-left:0} }

/* ---------- 新着のスクロール箱 ---------- */
.scroller{max-height:30rem; overflow-y:auto; overscroll-behavior:contain;
  border:1px solid var(--rule); border-radius:12px; background:#fff; padding:0 .7rem;
  scrollbar-width:thin; scrollbar-color:var(--line2) transparent}
.scroller:focus-visible{outline:2.5px solid var(--green); outline-offset:2px}
.scroller .rows{border-top:0}
.scroller .row:last-child{border-bottom:0}
.scroller::-webkit-scrollbar{width:10px}
.scroller::-webkit-scrollbar-thumb{background:var(--line2); border-radius:99px;
  border:3px solid #fff}
.scroller::-webkit-scrollbar-thumb:hover{background:var(--muted)}
.scroll-hint{margin:.55rem 0 0; font-size:12px; color:var(--muted); text-align:right}
.scroll-hint::before{content:"↕ "}
/* 会期表示は桁が増えるので少し詰める */
.cal-d.span b{font-size:1.35rem; letter-spacing:-.04em}
.cal-d.span i{font-size:10.5px}
@media (max-width:640px){ .scroller{max-height:26rem} }

/* ---------- 共催の併記 ---------- */
.tag-o .co{font-style:normal; opacity:.6; margin-left:.15rem; font-size:.85em}
.co-list{display:inline-block; margin-left:.45rem; font-size:12px; color:var(--muted); vertical-align:middle}

/* ---------- お問い合わせ（探索メニューとは役割が違うので少し離す） ---------- */
.nav-contact{margin-left:.5rem; padding:.28rem .7rem !important;
  border:1px solid var(--rule); border-radius:8px; background:#fff}
.nav-contact:hover{border-color:var(--green); background:var(--green-l)}
.nav-contact[aria-current]{background:var(--green); border-color:var(--green);
  color:#fff !important; box-shadow:none}
@media (max-width:640px){ .nav-contact{margin-left:0} }
.chip-ok{background:var(--green-l); border-color:#BFE0C9; color:var(--green-d)}
.chip-old{background:var(--warn-soft, #FAEEDA); border-color:#E8CFA0; color:#854F0B}