/* PickleK ニュース（トップのカルーセル・ニュース記事ページ）スタイル。
   トップのコラム（#column）も同じカルーセルの骨組みを共用し、カードの見た目だけ末尾のブロックで上書きする。
   .news-tag・.article-meta などバッジ・記事メタは announcements/style.css と共用するため、
   ニュース記事ページ・トップは両方を読み込む。 */

/* ========== トップのカルーセル（#news） ========== */
/* 背景色は前後のセクションとの並びで決まるため、index.css 側で #news / #column に指定する */
.news-carousel-section{padding:48px 0}
.nc-head{
  display:flex;justify-content:space-between;align-items:flex-end;gap:16px;margin-bottom:24px;
}
.nc-head .kicker-h2 .section-kicker{margin-bottom:10px}
.nc-head .kicker-h2 h2{margin-bottom:0}
.nc-arrows{display:flex;gap:8px;flex-shrink:0}
.nc-arrows.hidden{visibility:hidden}
.nc-arrows button{
  width:44px;height:44px;border-radius:50%;border:2px solid var(--c-navy);
  background:var(--c-white);color:var(--c-navy);font-size:18px;font-weight:800;line-height:1;
  cursor:pointer;box-shadow:2px 2px 0 var(--c-navy);
}
.nc-arrows button:active{transform:translate(2px,2px);box-shadow:none}

/* scroll-snap で左端にカードを吸着させ、矢印は1枚分（カード幅＋gap）ずつ送る。
   カード下端の影が overflow で切れないよう padding-bottom を取る */
.nc-track{
  display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;
  padding:4px 4px 12px;scrollbar-width:none;
}
.nc-track::-webkit-scrollbar{display:none}
.nc-card{
  flex:0 0 calc((100% - 32px)/3);scroll-snap-align:start;display:block;
  background:var(--c-white);border:3px solid var(--c-navy);border-radius:var(--radius);
  overflow:hidden;box-shadow:var(--shadow-sm);transition:transform .15s,box-shadow .15s;
}
.nc-card:hover{transform:translate(-2px,-2px);box-shadow:5px 5px 0 var(--c-navy)}
.nc-thumb{position:relative;aspect-ratio:16/9;overflow:hidden;background:var(--c-cream)}
.nc-thumb img{
  width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease;
}
/* .active は carousel.js が付ける「メインのカード」。hover でも同じ拡大にそろえる */
.nc-card.active .nc-thumb img,
.nc-card:hover .nc-thumb img{transform:scale(1.08)}
/* 動画記事の目印。サムネ右下の再生マーク */
.nc-play{
  position:absolute;right:8px;bottom:8px;width:28px;height:28px;border-radius:50%;
  background:rgba(20,38,104,.85);
}
.nc-play::after{
  content:"";position:absolute;left:11px;top:8px;
  border-left:9px solid var(--c-white);border-top:6px solid transparent;border-bottom:6px solid transparent;
}
.nc-body{padding:14px 16px 18px}
.nc-meta{display:flex;align-items:center;gap:10px}
.nc-meta time{font-family:var(--font-display);font-weight:600;color:var(--c-grey);font-size:13px}
.nc-title{
  margin-top:10px;font-weight:700;font-size:16px;line-height:1.5;color:var(--c-charcoal);
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}

/* ブレークポイントはサイト既存の992px/480pxに合わせる */
@media (max-width:992px){
  .news-carousel-section{padding:32px 0}
  .nc-card{flex-basis:calc((100% - 16px)/2)}
}
@media (max-width:480px){
  .news-carousel-section{padding:28px 0}
  /* 次のカードがのぞく幅にして、横に動かせることを伝える */
  .nc-card{flex-basis:62%}
  .nc-body{padding:10px 12px 14px}
  .nc-title{margin-top:8px;font-size:14px}
  .nc-meta .news-tag{padding:4px 10px;font-size:11px}
}

/* ========== トップのコラム（#column）：カードは枠・影なしで、写真とテキストを背景に直接置く ========== */
/* .nc-track の左右 padding 4px は carousel.js のスナップ位置計算が前提にしているため変えない */
/* 色付き背景の上で1記事のまとまりが分かるよう、枠線・影は付けず白い面だけ敷く（写真は面の上端に密着） */
#column .nc-card{border:0;border-radius:10px;box-shadow:none}
#column .nc-card:hover{transform:none;box-shadow:none}
#column .nc-card.active .nc-thumb img,
#column .nc-card:hover .nc-thumb img{transform:none}
#column .nc-body{padding:12px 14px 16px}
#column .nc-title{
  margin-top:8px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
#column .nc-card:hover .nc-title{color:var(--c-navy)}
#column .nc-foot{margin-top:20px;text-align:center}
@media (max-width:480px){
  #column .nc-body{padding:10px 12px 14px}
}

/* ========== 記事内の動画埋め込み（YouTube） ========== */
.article-video{
  position:relative;aspect-ratio:16/9;margin:24px 0;
  border-radius:var(--radius-sm);overflow:hidden;background:var(--c-cream);
}
.article-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}