/* What's NEW 更新履歴（/news/）だけで使う部品。.wn-stamp・.wn-tg・.wn-live は style.css */
.nw-hero{position:relative;overflow:hidden;padding:38px 0 34px;border-bottom:1px solid var(--line);background:radial-gradient(circle at 88% 20%,rgba(255,111,154,.22),transparent 40%),radial-gradient(circle at 8% 90%,rgba(255,224,138,.55),transparent 45%),repeating-linear-gradient(-45deg,rgba(232,23,79,.035) 0 12px,transparent 12px 24px),var(--bg)}
.nw-hero-in{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:20px 40px}
.nw-hero h1{margin:6px 0 10px;font-size:clamp(30px,5vw,50px);font-weight:900;line-height:1.15}
.nw-hero h1 small{display:block;margin-top:6px;font-size:clamp(14px,1.8vw,18px);color:var(--tx2);font-weight:700}
.nw-lead{max-width:640px;color:var(--tx2);font-size:15px;line-height:1.85}
.nw-stats{display:flex;flex-wrap:wrap;gap:10px;margin:18px 0 0}
.nw-stats div{min-width:110px;padding:10px 14px 9px;border-radius:14px;background:#fff;border:1px solid var(--line);box-shadow:0 4px 14px rgba(60,45,20,.07)}
.nw-stats dt{font:400 34px/1 var(--disp);letter-spacing:.04em;color:var(--tx)}
.nw-stats div:first-child dt{color:var(--hot)}
.nw-stats dd{margin:3px 0 0;font-size:11.5px;font-weight:700;color:var(--mut)}
.wn-stamp.nw-bigstamp{width:200px;height:200px;margin:0 10px}
.nw-bigstamp::after{inset:30px;border-width:2px}
.nw-bigstamp span{font-size:28px}
.nw-bigstamp b{font-size:64px}
.nw-bigstamp small{font-size:13px;padding:3px 10px 2px}
.nw-sh{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin:0 0 12px;font-size:clamp(17px,2.2vw,21px);font-weight:900}
.nw-live{margin-top:30px}
.nw-lvs{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:10px}
.nw-lv{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:16px;background:#fff;border:1px solid var(--line);color:var(--tx);text-decoration:none;box-shadow:0 4px 14px rgba(60,45,20,.06);transition:transform .15s,box-shadow .15s}
.nw-lv:hover{transform:translateY(-2px);box-shadow:0 10px 22px rgba(60,45,20,.12)}
.nw-lv-i{flex:none;display:grid;place-items:center;width:44px;height:44px;border-radius:12px;background:linear-gradient(135deg,#eaf8ff,#d5f5e3);font-size:22px}
.nw-lv>span:nth-child(2){flex:1;min-width:0}
.nw-lv b{display:block;font-size:15px;font-weight:900}
.nw-lv small{font-size:12px;color:var(--mut)}
.nw-lv time{flex:none;display:flex;flex-direction:column;align-items:center;padding:6px 10px;border-radius:10px;background:#f0fbf5;color:#0d7a43;font:400 22px/1 var(--disp);letter-spacing:.04em}
.nw-lv time small{font:700 10px/1.3 var(--jp);color:#0d7a43}
.nw-log{margin-top:30px;padding-bottom:40px}
.nw-filter{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:22px}
.nw-chip{display:inline-flex;align-items:center;gap:7px;padding:8px 14px;border-radius:99px;border:1.5px solid var(--line);background:#fff;color:var(--tx);font:700 14px/1.2 var(--jp);cursor:pointer;transition:background .15s,border-color .15s}
.nw-chip small{padding:1px 7px;border-radius:99px;background:var(--bg2);font:400 13px/1.3 var(--disp);letter-spacing:.05em}
.nw-chip:hover{border-color:var(--tx)}
.nw-chip[aria-pressed="true"]{background:#1c1a21;border-color:#1c1a21;color:#fff}
.nw-chip[aria-pressed="true"] small{background:var(--sun);color:#1c1a21}
.nw-chip.t-new[aria-pressed="true"]{background:var(--hot);border-color:var(--hot)}
.nw-chip.t-special[aria-pressed="true"]{background:#b46d00;border-color:#b46d00}
.nw-chip.t-tool[aria-pressed="true"]{background:#3b6fe0;border-color:#3b6fe0}
.nw-chip.t-up[aria-pressed="true"]{background:#13a35c;border-color:#13a35c}
.nw-day{position:relative;margin:0 0 26px}
.nw-day[hidden],.nw-card[hidden]{display:none}
.nw-date{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin:0 0 12px}
.nw-date time{display:inline-flex;align-items:baseline;gap:7px;padding:6px 14px 4px;border-radius:12px;background:#1c1a21;color:#fff;transform:rotate(-2deg);box-shadow:3px 3px 0 var(--sun)}
.nw-date time b{font:400 32px/1 var(--disp);letter-spacing:.05em}
.nw-date time small{font:400 15px/1 var(--disp);letter-spacing:.16em;color:var(--sun)}
.nw-dj{font-size:14px;font-weight:700;color:var(--tx2)}
.nw-rel{padding:3px 10px 2px;border-radius:99px;background:var(--hot);color:#fff;font:400 14px/1.2 var(--disp);font-style:normal;letter-spacing:.12em;animation:nw-blink 1.4s ease-in-out infinite}
@keyframes nw-blink{50%{opacity:.55}}
.nw-n{margin-left:auto;font-size:12.5px;font-weight:700;color:var(--mut)}
.nw-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.nw-card{display:flex;align-items:flex-start;gap:12px;padding:14px 14px 12px;border-radius:16px;background:#fff;border:1px solid var(--line);color:var(--tx);text-decoration:none;box-shadow:0 4px 14px rgba(60,45,20,.06);transition:transform .15s,box-shadow .15s}
a.nw-card:hover{transform:translateY(-2px);box-shadow:0 12px 24px rgba(60,45,20,.12)}
.nw-ic{flex:none;display:grid;place-items:center;width:50px;height:50px;border-radius:14px;font-size:26px;line-height:1;background:linear-gradient(135deg,#fff3c4,#ffd9e4)}
.nw-card[data-tag="special"] .nw-ic{background:linear-gradient(135deg,#fff0c2,#ffd27a)}
.nw-card[data-tag="tool"] .nw-ic{background:linear-gradient(135deg,#dff3ff,#e5dcff)}
.nw-card[data-tag="up"] .nw-ic{background:linear-gradient(135deg,#ddf7e9,#f0ffd9)}
.nw-tx{flex:1;min-width:0}
.nw-tx b{display:block;margin:5px 0 3px;font-size:16px;font-weight:900;line-height:1.4}
.nw-tx>span{display:block;font-size:13px;line-height:1.7;color:var(--tx2)}
.nw-go{flex:none;align-self:flex-end;display:inline-flex;align-items:center;gap:3px;font-size:12px;font-weight:700;font-style:normal;color:var(--gold);white-space:nowrap}
.nw-go svg{width:14px;height:14px}
.nw-empty{padding:30px;text-align:center;color:var(--mut)}
@media(max-width:760px){
.nw-hero{padding:24px 0 22px}
.nw-hero-in{grid-template-columns:minmax(0,1fr)}
.wn-stamp.nw-bigstamp{position:absolute;top:-8px;right:0;width:92px;height:92px;margin:0}
.nw-bigstamp::after{inset:15px}
.nw-bigstamp span{font-size:13px}.nw-bigstamp b{font-size:29px}.nw-bigstamp small{display:none}
.nw-hero h1{padding-right:92px}
.nw-hero .sec-en{padding-right:92px}
.nw-lead{font-size:14px}
.nw-stats{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.nw-stats div{min-width:0;padding:8px 12px}
.nw-stats dt{font-size:28px}
.nw-cards{grid-template-columns:minmax(0,1fr)}
.nw-card{padding:12px 12px 10px;gap:10px}
.nw-ic{width:42px;height:42px;font-size:22px}
.nw-go{display:none}
.nw-date time b{font-size:26px}
}
@media(prefers-reduced-motion:reduce){.nw-rel{animation:none}.nw-card,.nw-lv{transition:none}}
.nw-ic:has(img){background:none}
.nw-ic img{display:block;width:56px;height:56px;object-fit:contain;filter:drop-shadow(0 3px 5px rgba(60,45,20,.18))}
@media(max-width:760px){.nw-ic img{width:44px;height:44px}}
/* 原田英語のおすすめ（2026-11-15 トップの特集ボタン列から引っ越し。data/news.json の picks） */
.nw-pick{margin-top:30px}
.nw-sh small{font:400 14px/1 var(--disp);letter-spacing:.16em;color:var(--gold)}
.nw-pick-star{color:var(--sun);font-size:22px}
.nw-picks{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:10px}
.nw-pk{position:relative;display:flex;align-items:center;gap:12px;padding:10px 14px 10px 10px;border-radius:16px;background:#fff;border:1px solid var(--line);color:var(--tx);font-size:15px;font-weight:900;line-height:1.35;text-decoration:none;box-shadow:0 4px 14px rgba(60,45,20,.06);transition:transform .15s,box-shadow .15s}
.nw-pk:hover{transform:translateY(-2px);box-shadow:0 12px 24px rgba(60,45,20,.12);color:var(--tx)}
.nw-pk-i{flex:none;display:grid;place-items:center;width:52px;height:52px;border-radius:14px;font-size:26px;background:var(--pk,linear-gradient(135deg,var(--sun2),var(--sun)))}
.nw-pk-i:has(img){background:none}
.nw-pk-i img{display:block;width:56px;height:56px;object-fit:contain;filter:drop-shadow(0 3px 5px rgba(60,45,20,.18))}
.nw-pk b{flex:1;min-width:0}
.nw-pk>svg{flex:none;width:16px;height:16px;color:var(--gold)}
@media(max-width:760px){.nw-picks{grid-template-columns:1fr 1fr;gap:8px}.nw-pk{gap:8px;padding:8px;font-size:12.5px;border-radius:13px}.nw-pk-i{width:40px;height:40px;font-size:20px;border-radius:11px}.nw-pk-i img{width:42px;height:42px}.nw-pk>svg{display:none}}
@media(prefers-reduced-motion:reduce){.nw-pk{transition:none}}
