/* ===== Kviz バナーカルーセル（TCDスライダー置き換え）===== */
/* 既存TCDヘッダースライダーを非表示 */
body.home #index_header_content{ display:none !important; }

.kviz-carousel{
  --ratio: 1400 / 734;
  --slide-w: 66%;
  --gap: 24px;
  --accent: #1a6bd6;
  --dur: 550ms;
  position: relative;
  width: 100%;
  max-width: 1600px;
  margin: 0 auto;
  overflow: hidden;
  padding: 8px 0 40px;
}
.kviz-carousel__viewport{ overflow: hidden; }
.kviz-carousel__track{
  display: flex;
  gap: var(--gap);
  will-change: transform;
  transition: transform var(--dur) cubic-bezier(.22,.61,.36,1);
}
.kviz-carousel__slide{
  flex: 0 0 var(--slide-w);
  aspect-ratio: var(--ratio);
  opacity: .45;
  transform: scale(.9);
  transition: opacity var(--dur) ease, transform var(--dur) ease;
  border-radius: 6px;
  overflow: hidden;
  background: #12263a;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(0,0,0,.18);
}
.kviz-carousel__slide.is-active{ opacity: 1; transform: scale(1); }
.kviz-carousel__slide a,
.kviz-carousel__slide .kviz-carousel__imgwrap{ display:block; width:100%; height:100%; }
.kviz-carousel__slide img{ width:100%; height:100%; object-fit:cover; display:block; pointer-events:none; }

.kviz-carousel__arrow{
  position:absolute; top:calc((100% - 40px)/2); transform:translateY(-50%); z-index:5;
  width:clamp(38px,4vw,54px); height:clamp(38px,4vw,54px);
  border:0; border-radius:50%; cursor:pointer;
  background:rgba(0,0,0,.5); color:#fff; font-size:clamp(18px,2.2vw,24px);
  display:flex; align-items:center; justify-content:center; transition:background .2s;
}
.kviz-carousel__arrow:hover{ background:var(--accent); }
.kviz-carousel__arrow--prev{ left:clamp(6px,2vw,24px); }
.kviz-carousel__arrow--next{ right:clamp(6px,2vw,24px); }

.kviz-carousel__dots{
  position:absolute; left:0; right:0; bottom:12px; z-index:5;
  display:flex; justify-content:center; gap:9px;
}
.kviz-carousel__dot{
  width:10px; height:10px; border-radius:50%; border:0; cursor:pointer; padding:0;
  background:#c2ccd6; transition:background .2s, transform .2s;
}
.kviz-carousel__dot.is-active{ background:var(--accent); transform:scale(1.3); }

@media (max-width: 600px){
  .kviz-carousel{ --slide-w: 84%; --gap: 14px; }
}
@media (prefers-reduced-motion: reduce){
  .kviz-carousel__track, .kviz-carousel__slide{ transition:none; }
}