@charset "UTF-8";
/* =============================================================
   EIGHT SPACE — お知らせ（一覧・記事）
   css/es.css を読んだうえで重ねる。
   一覧ページと、render.py が生成する記事ページの両方がこれを使う。
   ============================================================= */

/* --- 見出しの帯（一覧・記事に共通） --- */
.nw-head{background:var(--ink);color:var(--paper);padding:calc(88px + clamp(40px,5vw,72px)) 0 clamp(40px,5vw,64px)}
.nw-head h1{margin:0;font-size:clamp(30px,4.4vw,60px);line-height:1.14;font-weight:900;color:var(--paper);text-wrap:balance}
/* 記事の見出しは長い。一覧の「お知らせ。」と同じ大きさだと1行10文字ほどで折り返し、
   単語の途中で切れて読みにくくなるので、記事側だけ小さく・幅広にする */
.nw-head.art h1{font-size:clamp(24px,2.9vw,40px);line-height:1.4;font-weight:700;max-width:24em}
.nw-head p{margin:20px 0 0;font-size:clamp(14px,1.2vw,16.5px);line-height:1.95;color:var(--on-dark);max-width:40em}
.nw-crumb{display:flex;align-items:center;gap:9px;flex-wrap:wrap;font-family:var(--en);font-size:11px;letter-spacing:.18em;color:var(--on-dark-weak);margin-bottom:18px}
.nw-crumb a{color:var(--on-dark-weak)}
.nw-crumb a:hover{color:var(--accent)}
.nw-crumb .now{color:var(--accent)}

/* =============================================================
   一覧
   ============================================================= */
.nw-lead{position:relative;display:block;border-radius:var(--r);overflow:hidden;background:var(--ink);color:var(--paper);
         margin-bottom:clamp(18px,2.4vw,30px)}
.nw-lead img{width:100%;aspect-ratio:21/9;object-fit:cover;opacity:.62;transition:transform .5s ease,opacity .3s ease}
.nw-lead:hover img{transform:scale(1.03);opacity:.72}
.nw-lead .in{position:absolute;left:0;right:0;bottom:0;padding:clamp(20px,3vw,40px);
             background:linear-gradient(180deg,rgba(11,11,12,0),rgba(11,11,12,.9))}
.nw-lead .m{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:10px}
.nw-lead .cat{font-family:var(--en);font-size:10px;letter-spacing:.2em;color:var(--ink);background:var(--accent);padding:5px 11px;border-radius:var(--r)}
.nw-lead .date{font-family:var(--en);font-size:12.5px;color:var(--on-dark)}
.nw-lead h2{margin:0;font-size:clamp(18px,2.2vw,30px);line-height:1.45;font-weight:700;color:var(--paper);text-wrap:balance}
.nw-lead p{margin:10px 0 0;font-size:14px;line-height:1.85;color:var(--on-dark);max-width:52em;
           display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
@media(max-width:640px){.nw-lead img{aspect-ratio:4/3}}

.nw-list{border-top:1px solid var(--line)}
.nw-list a{display:grid;grid-template-columns:112px 132px minmax(0,1fr) 24px;gap:20px;align-items:start;
           padding:24px 4px;border-bottom:1px solid var(--line);color:var(--ink)}
.nw-list a:hover{background:#fff}
.nw-list .date{font-family:var(--en);font-size:13px;color:var(--muted-2);padding-top:2px}
.nw-list .cat{font-family:var(--en);font-size:10px;letter-spacing:.18em;color:var(--accent);
              border:1px solid var(--line);border-radius:var(--r);padding:5px 0;text-align:center}
.nw-list h2{margin:0;font-size:16px;font-weight:700;line-height:1.6}
.nw-list p{margin:7px 0 0;font-size:13.5px;line-height:1.85;color:var(--muted);
           display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.nw-list .go{color:var(--line-strong);text-align:right;padding-top:2px}
.nw-list a:hover .go,.nw-list a:hover h2{color:var(--accent)}
@media(max-width:760px){
  .nw-list a{grid-template-columns:auto 1fr;grid-template-areas:"date cat" "ttl ttl";gap:9px 12px;padding:20px 2px}
  .nw-list .date{grid-area:date}
  .nw-list .cat{grid-area:cat;justify-self:start;padding:4px 11px}
  .nw-list .tx{grid-area:ttl}
  .nw-list .go{display:none}
}

/* =============================================================
   記事
   ============================================================= */
.nw-art{padding-block:clamp(40px,5vw,72px) clamp(48px,6vw,88px)}
.nw-eyecatch{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:var(--r);margin-bottom:clamp(28px,3.4vw,44px)}

/* 本文。行長を詰めて読みやすくする */
.nw-body{font-size:16px;line-height:2.05;color:#23232a}
.nw-body > *:first-child{margin-top:0}
.nw-body p{margin:0 0 1.6em}
.nw-body h2{font-size:clamp(20px,2vw,26px);line-height:1.5;font-weight:700;color:var(--ink);
            margin:2.4em 0 .9em;padding-top:.9em;border-top:1px solid var(--line)}
.nw-body h3{font-size:clamp(17px,1.5vw,20px);line-height:1.55;font-weight:700;margin:2em 0 .7em}
.nw-body h4{font-size:16.5px;font-weight:700;margin:1.8em 0 .6em}
.nw-body ul,.nw-body ol{margin:0 0 1.6em;padding-left:1.4em}
.nw-body li{margin-bottom:.6em}
.nw-body a{color:var(--ink);border-bottom:1px solid var(--accent)}
.nw-body a:hover{color:var(--accent)}
.nw-body strong{font-weight:700}
.nw-body blockquote{margin:0 0 1.6em;padding:16px 20px;background:var(--paper-2);border-left:3px solid var(--accent);
                    border-radius:0 var(--r) var(--r) 0;font-size:15px}
.nw-body table{width:100%;border-collapse:collapse;font-size:14.5px;margin:0 0 1.6em;display:block;overflow-x:auto}
.nw-body th,.nw-body td{border:1px solid var(--line);padding:11px 14px;text-align:left;vertical-align:top}
.nw-body th{background:var(--paper-2);font-weight:700;white-space:nowrap}

/* 記事下の行き先 */
.nw-back{display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:space-between;
         margin-top:clamp(36px,4vw,56px);padding-top:clamp(24px,3vw,36px);border-top:1px solid var(--line)}

/* その他のお知らせ */
.nw-other{background:var(--paper-2);padding-block:clamp(44px,5vw,72px)}
.nw-other h2{font-family:var(--en);font-size:11px;letter-spacing:.22em;color:var(--muted-2);margin:0 0 20px;font-weight:600}