/* 芸能ニュース速報 — B案（雑誌風） */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:#f7f5f0;color:#1a1a1a;font-family:"Noto Sans JP",system-ui,sans-serif;line-height:1.6}
a{color:#1a1a1a;text-decoration:none}a:hover{text-decoration:underline}
button{font:inherit;cursor:pointer}
img{max-width:100%;display:block}
.wrap{max-width:1200px;margin:0 auto;padding:0 32px}
.serif,.logo,.h-title,.no,.c-title,.num,.rule,.a-title,.p-title,.day{font-family:"Noto Serif JP",serif}

/* header */
.top{border-bottom:3px double #1a1a1a}
.top-in{display:flex;flex-direction:column;align-items:center;gap:6px;padding:26px 0 18px;text-align:center}
.logo{font-weight:900;font-size:38px;letter-spacing:.08em;line-height:1.2}
.logo:hover{text-decoration:none}
.upd{margin:0;font-size:12.5px;color:#4a4740;letter-spacing:.06em}
.sep{margin:0 10px;color:#a9a497}
.main{padding-top:40px;padding-bottom:48px}
.narrow{max-width:820px}

/* thumbnails */
.thumb{position:relative;display:block;aspect-ratio:16/9;overflow:hidden;background:#e4dfd3}
.thumb img{width:100%;height:100%;object-fit:cover}
.thumb .play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;opacity:.9;transition:opacity .15s}
.thumb:hover .play{opacity:1}
.thumb .yt{position:absolute;left:0;bottom:0;font-size:11px;color:#fff;background:rgba(0,0,0,.6);padding:2px 8px}
.thumb.noimg{display:flex;align-items:center;justify-content:center;font-family:"Noto Serif JP",serif;font-weight:900;color:#8c8676;font-size:18px;letter-spacing:.1em}
.thumb.noimg:hover{text-decoration:none}

/* hero (No.1) */
.hero{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr) 300px;gap:28px;align-items:start}
.no{margin:0 0 6px;font-size:18px;color:#8a5f12}
.no b{font-size:64px;line-height:1;margin-left:4px}
.h-title{margin:0 0 14px;font-size:29px;line-height:1.5;font-weight:900}
.h-cm{margin:0 0 14px;font-size:14.5px;line-height:1.8;color:#3d3a34}
.meta{margin:0 0 10px;font-size:12px;color:#5a564d;letter-spacing:.03em}
.meta a{color:#5a564d;text-decoration:underline}
.score{border:1px solid #1a1a1a;padding:1px 7px;font-weight:700;color:#1a1a1a;white-space:nowrap}
.ad{width:300px;min-height:250px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;background:#ece8de;border:1px solid #cfcabd;color:#5a564d;font-size:13px;letter-spacing:.06em}
.adl{font-size:11px;font-weight:700;letter-spacing:.18em}

/* actions */
.act{display:flex;border-top:1px solid #1a1a1a;border-bottom:1px solid #1a1a1a}
.btn{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:44px;padding:0 10px;background:transparent;border:0;border-right:1px solid #cfcabd;color:#1a1a1a;font-size:12.5px}
.btn:last-child{border-right:0}
.btn:hover{background:#ece8de}
.btn.on.good{background:#1a1a1a;color:#fff}
.btn.on.bad{background:#5a564d;color:#fff}
.btn:disabled{cursor:default}

/* grid */
.rule{display:flex;align-items:center;gap:16px;margin:56px 0 24px;font-weight:700;font-size:14px;letter-spacing:.2em}
.rule::before,.rule::after{content:"";flex:1;height:1px;background:#1a1a1a}
.grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:32px 22px}
.grid.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.c-row{display:flex;gap:10px;align-items:flex-start;margin:12px 0 8px}
.num{font-weight:900;font-size:30px;line-height:1;color:#8a5f12}
.c-title{font-size:15.5px;line-height:1.55;font-weight:700;margin:0}
.c-title.solo{margin:12px 0 6px}
.more{text-align:center;margin:48px 0 0;font-weight:700}
.stamp{text-align:center;font-size:12px;color:#5a564d;margin:10px 0 0}
.empty{text-align:center;padding:60px 0;color:#5a564d}

/* article */
.crumb{font-size:12.5px;color:#5a564d;margin-bottom:18px}
.crumb a{color:#5a564d;text-decoration:underline}
.article article{max-width:820px}
.a-title{font-size:30px;line-height:1.5;font-weight:900;margin:0 0 20px}
.video{position:relative;aspect-ratio:16/9;background:#000;margin:0 0 6px}
.video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.vcap{font-size:12px;color:#5a564d;margin:0 0 18px}
.a-cm{font-size:16px;line-height:1.9;margin:0 0 18px}
.src-btn{display:inline-flex;align-items:center;min-height:44px;padding:0 20px;border:1px solid #1a1a1a;font-weight:700;margin-bottom:18px;background:#fff}
.src-btn:hover{background:#1a1a1a;color:#fff;text-decoration:none}

/* list / static */
.p-title{font-size:28px;font-weight:900;margin:0 0 24px}
.day{font-size:18px;margin:32px 0 8px;padding-bottom:6px;border-bottom:1px solid #1a1a1a}
.alist{list-style:none;margin:0;padding:0}
.alist li{display:flex;gap:14px;align-items:baseline;padding:10px 0;border-bottom:1px solid #ddd8cc}
.alist .t{font-size:12px;color:#5a564d;flex:none;width:42px}
.alist a{flex:1;font-weight:700}
.alist .s{font-size:12px;color:#5a564d;flex:none}
.prose h2{font-family:"Noto Serif JP",serif;font-size:18px;margin:28px 0 8px}
.prose p{margin:0 0 12px}
.prose a{text-decoration:underline}

/* footer */
.foot{border-top:3px double #1a1a1a;padding:28px 0 40px;text-align:center;font-size:13px}
.foot-nav{display:flex;flex-wrap:wrap;gap:4px 28px;justify-content:center}
.foot-nav a{display:inline-flex;align-items:center;gap:6px;min-height:44px}
.note,.copy{margin:8px 0 0;color:#5a564d;font-size:12px}

/* share menu */
.share-menu{position:fixed;z-index:50;width:250px;background:#fff;border:1px solid #1a1a1a;box-shadow:4px 4px 0 #1a1a1a;padding:6px 0}
.share-menu[hidden]{display:none}
.share-menu .sm-head{display:flex;justify-content:space-between;align-items:center;padding:4px 8px 4px 14px;font-size:13px}
.share-menu .sm-close{border:0;background:none;font-size:22px;width:44px;height:44px}
.share-menu a,.share-menu button.item{display:flex;align-items:center;gap:10px;width:100%;min-height:44px;padding:0 14px;border:0;background:none;text-align:left;font-size:14px;color:#1a1a1a}
.share-menu a:hover,.share-menu button.item:hover{background:#ece8de;text-decoration:none}
.share-menu.sheet{left:0;right:0;bottom:0;top:auto;width:auto;box-shadow:0 -4px 0 #1a1a1a;padding-bottom:16px}

@media (max-width:1000px){
  .hero{grid-template-columns:1fr}
  .ad{margin:0 auto}
  .grid,.grid.g3{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:600px){
  .wrap{padding:0 16px}
  .logo{font-size:28px}
  .upd .sep{margin:0 4px}
  .main{padding-top:24px}
  .h-title,.a-title{font-size:23px}
  .no b{font-size:48px}
  .grid,.grid.g3{grid-template-columns:1fr;gap:28px}
  .alist li{flex-wrap:wrap;gap:4px 10px}
  .alist a{flex-basis:100%;order:3}
}