/* =========================================================
   81/82 NEWS — TOP section / news.html
   Editorial index: 大きな余白・細罫線・日付を主役にした行組み
   ※ styles.css / site.css の後に読み込む
   ========================================================= */

/* ---------- TOP section ---------- */
.nw{background:var(--pale);padding:170px 0 160px}
.nw-head{display:grid;grid-template-columns:1fr auto;gap:60px;align-items:end;padding-bottom:72px}
.nw-lead{font-size:14.5px;line-height:2.1;color:#3B4866;letter-spacing:.04em;padding-bottom:10px}

.nw-body{display:grid;grid-template-columns:240px 1fr;gap:80px;align-items:start}

/* category index (sidebar) */
.nw-side{position:sticky;top:120px}
.nw-side-h{font-family:var(--latin);font-size:10px;letter-spacing:.32em;color:var(--bluegray-2);padding-bottom:14px;border-bottom:1px solid var(--navy)}
.nw-cats{list-style:none}
.nw-cats a{display:grid;grid-template-columns:1fr auto;grid-template-rows:auto auto;column-gap:12px;padding:14px 0 13px;border-bottom:1px solid var(--line);color:var(--bluegray);transition:color .35s,padding .45s var(--ease);position:relative}
.nw-cats .en{font-family:var(--latin);font-size:11px;letter-spacing:.24em;color:var(--navy);transition:color .35s}
.nw-cats .jp{grid-column:1;font-size:11.5px;letter-spacing:.06em;margin-top:2px}
.nw-cats .n{grid-row:1/3;grid-column:2;align-self:center;font-family:var(--serif);font-size:15px;color:var(--bluegray-2);transition:color .35s}
.nw-cats a::before{content:"";position:absolute;left:0;top:50%;width:0;height:1px;background:var(--navy);transition:width .45s var(--ease)}
.nw-cats a:hover{padding-left:18px}
.nw-cats a:hover::before{width:10px}
.nw-cats a:hover .n{color:var(--navy)}
.nw-cats a.on{padding-left:18px}
.nw-cats a.on::before{width:10px}
.nw-cats a.on .n{color:var(--navy)}

/* list */
.nw-list{list-style:none;border-top:1px solid var(--navy)}
.nw-item{border-bottom:1px solid var(--line);position:relative}
.nw-row{position:relative;display:grid;grid-template-columns:118px 150px 1fr 56px;gap:28px;align-items:center;padding:36px 0;color:var(--navy);isolation:isolate}
/* hover: hairline draws across + quiet tint */
.nw-row::before{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:var(--navy);transform:scaleX(0);transform-origin:left;transition:transform .7s var(--ease);z-index:1}
.nw-row::after{content:"";position:absolute;inset:0 -24px;background:#fff;opacity:0;transition:opacity .5s;z-index:-1}
.nw-row:hover::before{transform:scaleX(1)}
.nw-row:hover::after{opacity:.6}

.nw-date{display:flex;flex-direction:column;line-height:1}
.nw-date .y{font-family:var(--latin);font-size:10.5px;letter-spacing:.28em;color:var(--bluegray-2)}
.nw-date .md{font-family:var(--serif);font-size:30px;letter-spacing:.01em;margin-top:10px;color:var(--navy)}
.nw-cat{display:flex;flex-direction:column;gap:6px;line-height:1.2}
.nw-cat b{font-family:var(--latin);font-weight:400;font-size:10.5px;letter-spacing:.26em;color:var(--accent);display:flex;align-items:center;gap:8px}
.nw-cat b::before{content:"";width:5px;height:5px;border-radius:50%;background:currentColor;flex-shrink:0}
.nw-cat i{font-style:normal;font-size:11.5px;color:var(--bluegray);letter-spacing:.04em;padding-left:13px}
.nw-ttl{font-size:16.5px;line-height:1.85;letter-spacing:.04em;font-weight:500;transition:transform .6s var(--ease);text-wrap:pretty}
.nw-row:hover .nw-ttl{transform:translateX(8px)}
.nw-arr{justify-self:end;width:44px;height:44px;border-radius:50%;border:1px solid var(--line);position:relative;overflow:hidden;transition:background .45s,border-color .45s}
.nw-arr i{position:absolute;inset:0;display:grid;place-items:center;font-style:normal;font-size:14px;transition:transform .55s var(--ease),color .4s}
.nw-arr i:last-child{transform:translateX(-120%)}
.nw-row:hover .nw-arr{background:var(--navy);border-color:var(--navy)}
.nw-row:hover .nw-arr i{color:#fff}
.nw-row:hover .nw-arr i:first-child{transform:translateX(120%)}
.nw-row:hover .nw-arr i:last-child{transform:none}
.nw-row:focus-visible{outline:2px solid var(--accent);outline-offset:4px}

/* staggered entrance (only when JS animation is active) */
.js .nw-list[data-stagger] .nw-item{opacity:0;transform:translateY(18px);transition:opacity .9s var(--ease),transform .9s var(--ease);transition-delay:calc(var(--i) * .09s)}
.js .nw-list[data-stagger].show .nw-item{opacity:1;transform:none}

/* footer link */
.nw-foot{margin-top:56px;display:flex;justify-content:flex-end}
.nw-all{display:inline-flex;align-items:center;gap:18px;font-family:var(--latin);font-size:13px;letter-spacing:.26em;color:var(--navy);padding:12px 0}
.nw-all .ln{width:56px;height:1px;background:var(--navy);transition:width .6s var(--ease)}
.nw-all .ar{transition:transform .5s var(--ease)}
.nw-all:hover .ln{width:96px}
.nw-all:hover .ar{transform:translateX(6px)}

/* ---------- responsive (TOP + shared rows) ---------- */
@media (max-width:1100px){
  .nw-body{grid-template-columns:200px 1fr;gap:56px}
  .nw-row{grid-template-columns:100px 130px 1fr 48px;gap:22px}
}
@media (max-width:960px){
  .nw{padding:120px 0 110px}
  .nw-head{grid-template-columns:1fr;gap:28px;padding-bottom:48px}
  .nw-body{grid-template-columns:1fr;gap:40px}
  .nw-side{position:static;order:2}
  .nw-side-h{display:none}
  .nw-cats{display:flex;flex-wrap:wrap;gap:8px}
  .nw-cats a{display:flex;gap:8px;align-items:baseline;padding:9px 14px;border:1px solid var(--line);border-radius:999px;background:#fff}
  .nw-cats a::before{display:none}
  .nw-cats a:hover,.nw-cats a.on{padding-left:14px}
  .nw-cats a.on{background:var(--navy);border-color:var(--navy)}
  .nw-cats a.on .en,.nw-cats a.on .n{color:#fff}
  .nw-cats .jp{display:none}
  .nw-cats .n{font-size:12px}
  .nw-row{grid-template-columns:auto 1fr 36px;grid-template-areas:"date cat arr" "ttl ttl ttl";gap:14px 18px;padding:28px 0}
  .nw-row::after{display:none}
  .nw-date{grid-area:date;flex-direction:row;align-items:baseline;gap:10px}
  .nw-date .md{font-size:22px;margin-top:0;order:-1}
  .nw-cat{grid-area:cat;flex-direction:row;align-items:baseline;gap:8px}
  .nw-cat i{padding-left:0}
  .nw-ttl{grid-area:ttl;font-size:15px;line-height:1.8}
  .nw-row:hover .nw-ttl{transform:none}
  .nw-arr{grid-area:arr;width:36px;height:36px}
  .nw-foot{justify-content:flex-start;margin-top:40px}
}
@media (max-width:560px){
  .nw-cat i{display:none}
}

/* =========================================================
   NEWS LIST PAGE (news.html)
   ========================================================= */
.nl-hero{padding:200px 0 0;background:var(--pale)}
.nl-crumb,.nd-crumb{font-family:var(--latin);font-size:10.5px;letter-spacing:.26em;color:var(--bluegray);display:flex;gap:12px;flex-wrap:wrap}
.nl-crumb a,.nd-crumb a{color:var(--navy);transition:opacity .3s}
.nl-crumb a:hover,.nd-crumb a:hover{opacity:.6}
.nd-crumb em{font-style:normal}
.nl-title{display:grid;grid-template-columns:1fr auto;gap:60px;align-items:end;margin-top:72px;padding-bottom:80px}
.nl-title .en{font-family:var(--serif);font-size:clamp(72px,11vw,168px);line-height:.86;letter-spacing:-.01em;color:var(--navy)}
.nl-title .jp{font-size:clamp(20px,1.8vw,26px);font-weight:500;letter-spacing:.1em;color:var(--navy);margin-top:28px}
.nl-title p{font-size:14.5px;line-height:2.1;color:#3B4866;letter-spacing:.04em;padding-bottom:8px}

.nl{background:var(--pale);padding:0 0 170px}
.nl .nw-body{border-top:1px solid var(--line);padding-top:64px}
.nl-meta{display:flex;justify-content:space-between;gap:20px;font-family:var(--latin);font-size:10.5px;letter-spacing:.26em;color:var(--bluegray);padding-bottom:14px}
.nl-meta span:first-child{color:var(--navy)}
.js .nl .nw-list .nw-item{opacity:0;transform:translateY(12px);transition:opacity .7s var(--ease),transform .7s var(--ease);transition-delay:calc(var(--i) * .05s)}
.js .nl .nw-list.show .nw-item{opacity:1;transform:none}
.nl-empty{padding:72px 0;font-size:14.5px;color:var(--bluegray);border-bottom:1px solid var(--line);list-style:none}

.nl-pager{display:flex;align-items:center;gap:6px;margin-top:64px;font-family:var(--latin)}
.nl-pager a{min-width:44px;height:44px;display:grid;place-items:center;font-size:12px;letter-spacing:.14em;color:var(--bluegray);border-bottom:1px solid transparent;transition:color .3s,border-color .3s}
.nl-pager a:hover{color:var(--navy)}
.nl-pager a.on{color:var(--navy);border-color:var(--navy)}
.nl-pager .pg-ar{border:1px solid var(--line);border-radius:50%;color:var(--navy)}
.nl-pager .pg-ar:first-child{margin-right:14px}
.nl-pager .pg-ar:last-child{margin-left:14px}
.nl-pager .pg-ar:hover{background:var(--navy);color:#fff;border-color:var(--navy)}
.nl-pager .pg-ar.off{opacity:.3;pointer-events:none}

@media (max-width:960px){
  .nl-hero{padding:140px 0 0}
  .nl-title{grid-template-columns:1fr;gap:28px;margin-top:48px;padding-bottom:56px}
  .nl{padding-bottom:110px}
  .nl .nw-body{padding-top:32px}
  .nl .nw-side{order:-1}
}

/* =========================================================
   NEWS DETAIL (legacy template styles — 未使用)
   ========================================================= */
.nd{background:#fff;padding:190px 0 150px}
.nd .wrap{max-width:1080px}
.nd-head{padding-bottom:64px;border-bottom:1px solid var(--navy)}
.nd-meta{display:flex;align-items:center;gap:28px;margin-top:72px}
.nd-meta .d{font-family:var(--serif);font-size:26px;color:var(--navy);letter-spacing:.01em}
.nd-meta .c{display:flex;align-items:baseline;gap:10px;padding:8px 16px;border:1px solid var(--line);border-radius:999px;transition:border-color .3s}
.nd-meta .c:hover{border-color:var(--navy)}
.nd-meta .c b{font-family:var(--latin);font-weight:400;font-size:10.5px;letter-spacing:.26em;color:var(--accent)}
.nd-meta .c i{font-style:normal;font-size:11.5px;color:var(--bluegray)}
.nd-head h1{margin-top:36px;font-size:clamp(26px,2.9vw,40px);font-weight:500;line-height:1.6;letter-spacing:.05em;color:var(--navy);text-wrap:pretty;max-width:920px}
.nd-ex{margin-top:28px;font-size:15.5px;line-height:2.1;color:#3B4866;max-width:760px}

.nd-sample{margin-top:32px;display:flex;gap:16px;align-items:baseline;padding:16px 20px;background:var(--pale);font-size:12.5px;line-height:1.8;color:var(--bluegray);border-radius:2px}
.nd-sample b{font-family:var(--latin);font-weight:500;font-size:10px;letter-spacing:.24em;color:var(--navy);flex-shrink:0}

.nd-grid{display:grid;grid-template-columns:200px 1fr;gap:80px;padding:72px 0 96px}
.nd-aside{position:sticky;top:120px;align-self:start}
.nd-aside .h{font-family:var(--latin);font-size:10px;letter-spacing:.32em;color:var(--bluegray-2);padding-bottom:12px;border-bottom:1px solid var(--line);margin-bottom:16px}
.nd-copy{font-family:var(--latin);font-size:11px;letter-spacing:.22em;color:var(--navy);padding:10px 18px;border:1px solid var(--line);border-radius:999px;transition:all .3s}
.nd-copy:hover{background:var(--navy);color:#fff;border-color:var(--navy)}
.nd-body{max-width:720px}
.nd-body p{font-size:15.5px;line-height:2.2;color:var(--ink);letter-spacing:.03em}
.nd-body p+p{margin-top:1.4em}
.nd-body h2{margin:64px 0 22px;padding-top:28px;border-top:1px solid var(--line);font-size:20px;font-weight:500;line-height:1.6;letter-spacing:.06em;color:var(--navy)}
.nd-body ul{list-style:none;margin:24px 0;padding:24px 28px;background:var(--pale);border-radius:2px}
.nd-body li{position:relative;padding-left:20px;font-size:15px;line-height:2.1;color:#3B4866}
.nd-body li::before{content:"";position:absolute;left:0;top:1.05em;width:8px;height:1px;background:var(--navy)}
.nd-body .nd-note{margin-top:48px;font-size:13px;color:var(--bluegray)}
.nd-ext{margin-top:48px}
.nd-ext-ph{display:inline-block;margin-top:48px;font-family:ui-monospace,monospace;font-size:12px;color:var(--bluegray)}

.nd-pager{display:grid;grid-template-columns:1fr auto 1fr;gap:0;border-top:1px solid var(--navy);border-bottom:1px solid var(--line)}
.nd-pn{display:flex;flex-direction:column;gap:8px;padding:32px 32px 32px 0;color:var(--navy);transition:background .4s}
.nd-pn.next{text-align:right;padding:32px 0 32px 32px;align-items:flex-end}
.nd-pn .lb{font-family:var(--latin);font-size:11px;letter-spacing:.26em}
.nd-pn .d{font-family:var(--latin);font-size:10.5px;letter-spacing:.18em;color:var(--bluegray)}
.nd-pn .t{font-size:14px;line-height:1.8;color:#3B4866;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;transition:color .3s}
.nd-pn:hover .t{color:var(--navy)}
.nd-back{display:grid;place-items:center;padding:0 48px;border-left:1px solid var(--line);border-right:1px solid var(--line);font-family:var(--latin);font-size:11px;letter-spacing:.28em;color:var(--navy);transition:background .4s,color .4s}
.nd-back:hover{background:var(--navy);color:#fff}

.nd-missing{padding:40px 0 60px}
.nd-missing h1{font-size:clamp(24px,2.6vw,34px);font-weight:500;color:var(--navy);letter-spacing:.05em;margin:12px 0 48px}

.nd-rel{background:var(--pale);padding:130px 0 150px}
.nd-rel-head{display:flex;justify-content:space-between;align-items:end;gap:40px;margin-bottom:48px}
.nd-rel-head .h{font-size:clamp(24px,2.4vw,32px);font-weight:500;letter-spacing:.06em;color:var(--navy)}

@media (max-width:960px){
  .nd{padding:140px 0 100px}
  .nd-meta{margin-top:48px;gap:18px;flex-wrap:wrap}
  .nd-meta .d{font-size:22px}
  .nd-grid{grid-template-columns:1fr;gap:32px;padding:48px 0 72px}
  .nd-aside{position:static;order:2;display:flex;align-items:center;gap:16px}
  .nd-aside .h{border:0;margin:0;padding:0}
  .nd-pager{grid-template-columns:1fr 1fr}
  .nd-back{grid-column:1/-1;grid-row:2;padding:20px;border:0;border-top:1px solid var(--line)}
  .nd-pn,.nd-pn.next{padding:24px 12px 24px 0}
  .nd-pn.next{padding:24px 0 24px 12px}
  .nd-rel{padding:90px 0 110px}
  .nd-rel-head{flex-direction:column;align-items:flex-start;gap:20px}
}