@charset "utf-8";
/* CSS Document */
/*
===========================================
  スライドショー用CSS (Peek Carousel)
===========================================
*/

/* メインコンテナ */
.kc-peek {
  --slideW: 58%;     /* 小さくすると左右の"のぞき"が増える（例: 52% 50%） */
  --gap: 16px;
  --thumb: 64px;
  width: 100%;
  margin: 0 auto;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* ビューポート（表示領域） */
.kc-peek__viewport {
  position: relative;
  overflow: hidden;
}

/* スライドトラック */
.kc-peek__track {
  display: flex;
  gap: var(--gap);
  will-change: transform;
  transition: transform .5s ease;
}

/* 各スライドアイテム */
.kc-peek__item {
  flex: 0 0 var(--slideW);
  overflow: hidden;
  box-shadow: 0 4px 24px rgba(0, 0, 0, .15);
  display: block;
}

.kc-peek__item img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

/* ナビゲーション矢印 */
.kc-peek__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 9999px;
  background: rgba(0, 0, 0, .35);
  color: #fff;
  font-size: 18px;
  display: grid;
  place-items: center;
  z-index: 2;
  cursor: pointer;
}

.kc-prev {
  left: 8px;
}

.kc-next {
  right: 8px;
}

/* サムネイル */
:root {
  --thumb: 64px;  /* ベース */
}

@media (min-width: 769px) {
  #hero-peek {
    --thumb: 96px !important;   /* PC表示時 */
  }
}

.kc-peek__thumbs {
  margin-top: 10px;
  display: flex;
  gap: 8px;
  justify-content: center;
  padding: 8px 4px 15px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.kc-thumb {
  width: var(--thumb);
  height: auto;
  flex: 0 0 auto;
  overflow: hidden;
  border: 2px solid transparent;
  background: #eee;
  cursor: pointer;
  aspect-ratio: auto;
}

.kc-thumb img {
  width: 100%;
  height: auto;
  object-fit: cover;
  display: block;
}

/* アクティブなサムネイル */
.kc-thumb[aria-selected="true"] {
  border-color: #111;
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px rgba(0, 0, 0, .25);
}

/* スマホ表示 */
@media (max-width: 768px) {
  .kc-peek {
    --gap: 8px;
    --slideW: 100%;
  }
  
  .kc-peek__item {
    border-radius: 0;
    box-shadow: none;
  }
  
  .kc-peek__item img {
    width: 100%;
    height: auto;
    object-fit: cover;
  }
}

/* アニメーション削減設定 */
@media (prefers-reduced-motion: reduce) {
  .kc-peek__track {
    transition: none;
  }
}