/* ①シンプルなカルーセルの個別CSS */

/* ----------------------*
 * コンテナー
 * ----------------------*/
.cont{
  padding: 50px;
  display: flex;
  margin-left:auto
}


.container {
  --item-width: 600px;
  /* --item-height: 300px; */
  width: var(--item-width);
  position: relative;
  margin-bottom: 40px;
  /* 各パーツ配置をグリッドでレイアウト */
  display: grid;
  grid-template-areas: "item item item" "left markers right";
  grid-template-columns: 1fr 2fr 1fr;
  row-gap: 16px;
  align-items: center
  }


/* ----------------------*
 * カルーセル
 * ----------------------*/
.carousel {
  width: 100%;
  display: grid;
  /* アイテムを横並びにする */
  grid-auto-flow: column;
  grid-area: item;
  /* 次のスライドとの間隔 */
  gap: 120px;
  overflow-x: auto;
  /* X方向にスナップ */
  scroll-snap-type: x mandatory;
  /* 1度に1枚ずつ移動 */
  scroll-snap-stop: always;
  /* スムーズにスクロールさせる */
  scroll-behavior: smooth;
  /* インジケーターの表示 */
  scroll-marker-group: after;
  /* スクロールバー非表示 */
  scrollbar-width: none;



  /* 非活性時スタイル */
  &::scroll-button(*):disabled {
    color: darkgray;
    border: 1px solid lightgray;
  }




  /* インジケーター（コンテナー） */
  &::scroll-marker-group {
    display: flex;
    justify-content: center;
    gap: 16px;
    grid-area: markers;
    align-items: center;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
  }
}

/* ----------------------*
 * カルーセルの画像アイテム
 * ----------------------*/
.item {
  width: var(--item-width);
  min-width: var(--item-width);
  height: var(--item-height);
  scroll-snap-align: center;


  /* インジケーター */
  &::scroll-marker {
    content: "";
    display: block;
    width: 16px;
    height: 16px;
    background-color: lightgray;
    border-radius: 50%;
    transition: background-color 0.2s;
    flex-shrink: 0;
    height: 8px;
    width: 8px;
  }

  /* インジケーターのカレントスタイル */
  &::scroll-marker:target-current {
    background-color: rgb(85, 84, 84);
  }




/* PC用画像を最初は非表示にする */
.pc-only {
  display: none;
}

/* スマホ用画像は最初は表示する */
.sp-only {
  display: block;
  width: 100%;
}
}



/* 画面の幅が768ピクセル以上（タブレットやPC）の場合 */
@media (width < 768px) {
  .container {
    --item-width: calc(100vw - 32px);
    width: var(--item-width);
    grid-template-columns: 1fr 3fr 1fr;
  }
  img {
  display: block;
  max-width: 100%;
  height: auto;
  object-fit: cover;
  }


  /* PC用画像を表示する */
  .pc-only {
    display: block;
    width: 100%;
  }
  
  /* スマホ用画像を非表示にする */
  .sp-only {
    display: none;
  }
}