@charset "UTF-8";
/* CSS Document */

.slick-dotted.slick-slider {
    margin-bottom: 0px !important;
}

/* ===== Slider (image-only) ===== */
.hero-slider{
  --accent: #2aaad0;
  --nav-size: 54px;

  /* “内側寄り”の特徴的な配置 */
  --nav-inset: clamp(90px, 18vw, 320px);

  position: relative;
  overflow: hidden;
  background: #fff;
}

/* 高さは任意：スクショっぽく固定寄り */
/*.hero-slider__viewport{
  height: clamp(360px, 36vw, 520px);
}*/

.hero-slider__track{
  height: 100%;
  display: flex;
  transition: transform 520ms ease;
  will-change: transform;
}

.hero-slide{
  min-width: 100%;
  height: 100%;
  display: block;
  position: relative;
  text-decoration: none;
}

.hero-slide img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;          /* 画像を全面に */
  object-position: center;
}

/* ===== 特徴的な位置の nav ===== */
.hero-slider__nav{
  position: absolute;
  top: 45%;
  transform: translateY(-50%);
  width: var(--nav-size);
  height: var(--nav-size);
  border-radius: 50%;
  border: 3px solid var(--accent);
  background: rgba(255,255,255,.22);
  display: grid;
  place-items: center;
  cursor: pointer;
  z-index: 5;
  transition: transform .15s ease, background .15s ease;
}
.hero-slider__nav:hover{
  background: rgba(255,255,255,.34);
  transform: translateY(-50%) scale(1.04);
}
.hero-slider__nav:active{
  transform: translateY(-50%) scale(.98);
}
.hero-slider__prev{ left: var(--nav-inset); }
.hero-slider__next{ right: var(--nav-inset); }

.hero-slider__chev{
  color: var(--accent);
  font-size: 30px;
  font-weight: 900;
  line-height: 1;
}

/* dots（下の白帯含む） */
.hero-slider__dots{
  height: 70px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
  background: #fff;
}
.hero-slider__dot{
  width: 12px;
  height: 12px;
  border-radius: 999px;
  border: 0;
  background: rgba(42,170,208,.35);
  cursor: pointer;
}
.hero-slider__dot[aria-selected="true"]{
  background: rgba(42,170,208,.95);
}

/* SP：内側寄りを弱める */
@media (max-width: 768px){
  .hero-slider{
    --nav-inset: clamp(18px, 6vw, 44px);
    --nav-size: 48px;
  }
  .hero-slider__nav{ top: 43%; }
    
    .hero-slider__viewport{
    height: auto;   /* 固定高さを解除 */
  }

  .hero-slide{
    height: auto;
  }

  .hero-slide img{
    width: 100%;
    height: auto;   /* ← これが横幅基準 */
    object-fit: unset;
  }
}


/* ===== slick を既存デザインに馴染ませる追記 ===== */

/* slick が作るラッパーで横スクロール出ないように */
.hero-slider .slick-list{
  overflow: hidden;
}

/* slickは自分でtransformを持つので、元のtransitionは邪魔なら切る */
.hero-slider__track{
  transition: none !important;
}

/* dotsを既存デザインに寄せる（.hero-slider__dots内にul/liが生成される） */
.hero-slider__dots .slick-dots{
  position: static;
  margin: 0;
  padding: 0;
  list-style: none;
  height: 70px;                 /* 既存と合わせる */
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 22px;
  background: transparent;      /* 親の白帯に任せる */
}

/* liの余白リセット */
.hero-slider__dots .slick-dots li{
  margin: 0;
  width: auto;
  height: auto;
}

/* slick標準の button を、あなたの .hero-slider__dot 見た目にする */
.hero-slider__dots .slick-dots li button{
  width: 12px;
  height: 12px;
  border-radius: 999px;
  border: 0;
  padding: 0;
  background: rgba(42,170,208,.35);
  cursor: pointer;
  font-size: 0;                 /* 数字を消す */
  line-height: 0;
}

/* slick-theme が入れる ::before を消す */
.hero-slider__dots .slick-dots li button:before{
  content: "" !important;
}

/* active状態を既存と同じ濃さに */
.hero-slider__dots .slick-dots li.slick-active button{
  background: rgba(42,170,208,.95);
}