/* ----------------------*
 * コンテナー
 * ----------------------*/
.readguidance {
  width: 100%;
  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;
}

/* ----------------------*
 * カルーセル
 * ----------------------*/
.carousel {
  width: 100%;
height : 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(*) {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: none;
    background-color: #fff;
    padding: 0;
    color: orangered;
    border: 1px solid orangered;
    transition: background-color 0.2s, color 0.2s;
  }

  /* ホバー時スタイル */
  @media (any-hover: hover) {
    &::scroll-button(*):not(:disabled):hover {
      background-color: orangered;
      color: #fff;
      cursor: pointer;
    }
  }


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

  /* 前へボタン */
  &::scroll-button(left) {
    /* コンテンツ / 代替テキスト */
    content: "\025c0" / "前へ";
    grid-area: left;
    justify-self: end;
  }

  /* 次へボタン */
  &::scroll-button(right) {
    /* コンテンツ / 代替テキスト */
    content: "\025b6" / "次へ";
    grid-area: right;
  }

  /* インジケーター（コンテナー） */
  &::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: 100%;
  min-width: 700px;
  height: 500px;
  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;
  }

  /* インジケーターのカレントスタイル */
  &::scroll-marker:target-current {
    background-color: orangered;
  }

  img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

@media (width < 767px) {
  .readguidance {
    --item-width: calc(100vw - 32px);
    width: var(--item-width);
    grid-template-columns: 0fr 3fr 0fr;
  }

.item {
  width: 100%;
  min-width: calc(100vw - 32px);
  height: 260px;
  scroll-snap-align: center;
}