@charset "utf-8";


/* kv */
/* ===========================
  SP（基本スタイル）
=========================== */
.slider-root {
  width: 100%;
  background: url(/content/shared_02/images/kv_bg_sp.jpg) no-repeat center / cover;
  overflow: hidden;
}

.slider-inner {
  width: 100%;
  max-width: 1920px;
  margin: 0 auto;
  position: relative;
}

.slider-viewport {
  width: 100%;
  overflow: visible;
}

.slider-track {
  display: flex;
  align-items: flex-start;
  will-change: transform;
}

.slide-item {
  flex-shrink: 0;
}

.slide-card {
  width: 100%;
  aspect-ratio: 310 / 340;
  overflow: hidden;
  border-radius: 12px;
}

.slide-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

.ctrl-btn {
  display: none;
}

.slider-counter-wrap {
  position: absolute;
}

.slider-counter {
  font-family: 'Roboto', sans-serif;
  font-weight: 500;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 6px;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

/* ===========================
  PC：1096px以上
=========================== */
@media screen and (min-width: 1096px) {
  .slider-root {
    background-image: url(/content/shared_02/images/kv_bg_pc.jpg);
  }

  .slide-card {
    aspect-ratio: 280 / 307;
  }

  .ctrl-btn {
    display: flex;
    position: absolute;
    transform: translateY(-50%);
    border-radius: 50%;
    border: none;
    background: #EC921D;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    z-index: 10;
    transition: all .3s;
  }

  .ctrl-btn:hover {
    background: color-mix(in srgb, #EC921D 80%, #fff 20%);
  }

  .slider-counter {
    gap: 10px;
  }
}