:root{
      --bg:#fff;--fg:#111;--muted:#666;--border:#d9d9d9;--card:#f6f6f6;
      --radius:14px;--radius-sm:10px;--radius-lg:20px;
    }

    img{display:block;}
    .monthlycontainer{max-width:1160px;margin:48px auto;}
    .title.monthly{font-weight:700;letter-spacing:0.02em;margin:0;font-size:22px;background: linear-gradient(transparent 50%, #ffcc00 50%);display: inline;}
    .title.monthly::before{content: '';display: block;}
    .title.monthly::after{margin-bottom: 7px;}

    /* ---------------- PickUp ---------------- */
    .pickup-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
    .pickup-head .head-controls{display:flex;gap:8px}

    .pickup{display:grid;grid-template-columns:1.05fr 1.6fr;gap:16px;align-items:start}
    .panel{border:1px solid var(--border);border-radius:var(--radius);background:#fff;}
    .stack{display:grid;gap:18px}

    .placeholder{display:grid;place-items:center;background:#000;color:#fff;border-radius:var(--radius-sm);border:1px solid #222}
    .placeholder.aspect-16x9{aspect-ratio:16/9}
    .placeholder.aspect-1x1{aspect-ratio:1/1}
    .placeholder p{margin:0;font-size:clamp(16px,3vw,28px);font-weight:700;letter-spacing:0.05em}

    .yt-embed {position: relative;width: 100%;border-radius: var(--radius-sm);overflow: hidden;aspect-ratio: 16 / 9; /* ← ここでボックス比を固定 */}
    .yt-embed iframe {position: absolute;inset: 0;width: 100%;height: 100%;border: 0;}

    /* Articles (right side) */
    .articles{position:relative}
    .articles-viewport{overflow:hidden;border-radius:var(--radius)}
    .articles-list{display:grid;gap:12px;scroll-behavior:smooth;max-height:530px;overflow-y:auto;scrollbar-width:none}
    .articles-list::-webkit-scrollbar{display:none}
    .article{display:grid;grid-template-columns:1fr 140px;gap:16px;padding:16px;border-top:1px solid var(--border);}
    .article:first-child{border-top:none;}
    .article .thumb{;border-radius:4px;aspect-ratio:16/9;display:grid;place-items:center}
    .article .thumb span{color:#fff;font-weight:700}
.article .thumb img, .card img{margin:0}
    .article h3{font-size:18px;margin:0 0 6px;line-height:1.45;background: none;text-decoration: none;color:#333}
.article a, .card a{text-decoration: none;color:#333}
    .article time{display:block;color:var(--muted);font-size:12px;margin:0 0 8px}
    .article p{color:#333;font-size:14px;line-height:1.7;margin:0}

    .btn-circle{width:34px;height:34px;border-radius:50%;border:1px solid var(--border);background:#fff;display:grid;place-items:center;cursor:pointer}
    .btn-circle:disabled{opacity:.4;cursor:not-allowed}
    .btn-circle svg{width:18px;height:18px}

    .pickup-arrows{display:none}

    /* ---------------- Top Team News (horizontal) ---------------- */
    .news-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
    .news-head .head-controls{display:flex;gap:8px}

    .monthlynews{margin-top:56px}
    .news-rail{position:relative}
    .news-viewport{overflow:hidden;transition: height .25s ease;}
    .news-track{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;padding:6px 2px 8px;scrollbar-width:none;align-items: flex-start;}
    .news-track::-webkit-scrollbar{display:none}
/* ツイートを card と同じ幅・スナップに */
.news-track > .twitter-tweet {
  flex: 0 0 260px;      /* 幅固定（.card と同等） */
  min-width: 260px;
  scroll-snap-align: start;
}

/* ツイート iframe を親幅にフィット */
.news-track > .twitter-tweet iframe {
  width: 100% !important;
  height: auto;
}
    .card{min-width:260px;max-width:260px;background:#fff;border-radius:16px;padding:16px;scroll-snap-align:start;border:1px solid #bdbdbd}
    .card .img{border-radius:6px;aspect-ratio:16/10;display:grid;place-items:center;margin-bottom:12px}
    .card .img span{font-weight:700}
    .card h4{font-size:15px;margin:0 0 6px;border:none;padding-left: 0;text-decoration: none;color:#333}
    .card time{display:block;font-size:12px;margin-bottom:8px}
    .card p{font-size:13px;margin:0}
    .card img{border-radius:6px;}

    /* ---------------- Responsive ---------------- */
    @media (max-width:1024px){
      .pickup-head .head-controls{display:none}
      .pickup{grid-template-columns:1fr;grid-template-areas:"left""buttons""right"}
      .pickup .panel:nth-child(1){grid-area:left}
      .pickup .panel:nth-child(2){grid-area:buttons}
      .pickup .panel:nth-child(3){grid-area:right}
      .pickup-arrows{display:flex;justify-content:end;gap:12px;margin:16px 0}
    }
    @media (max-width:640px){
      .monthlycontainer{padding:0 16px}
      .article{grid-template-columns:1fr}
    }