@charset "utf-8";
/* CSS Document */
.carousel_wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  height: 100dvh;
}
.carousel_container {
  position: relative;
  width: fit-content;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: auto;
  & ul {
    display: flex;
    flex-direction: row;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    scroll-snap-stop: always;
    gap: 1vw;
    margin-block: auto;
    max-width: 400px;
    margin-inline: auto;
    position: relative;
    scroll-marker-group: after;
    &::scroll-button(*) {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      background: rgba(0, 0, 0, 0.5);
      color: #fff;
      border: none;
      font-size: 1.25rem;
      padding: 1.0rem;
      line-height: 1.0;
      border-radius: 50%;
      cursor: pointer;
    }
    &::scroll-button(*):hover {
      background: rgba(0, 0, 0, 0.7);
    }
    &::scroll-button(right) {
      right: -5dvw;
      content: "▶"/ "次へ";
      grid-area: right;
    }
    &::scroll-button(left) {
      left: -5dvw;
      content: "◀"/ "前へ";
      grid-area: left;
      justify-self: end;
    }
    &::scroll-marker-group {
      position: absolute;
      bottom: -2.0em;
      display: flex;
      gap: 1.5em;
      justify-content: center;
    }
    & li {
      width: auto;
      height: auto;
      scroll-snap-align: center;
      flex: 0 0 100%;
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      &::scroll-marker {
        content: "";
        width: 15px;
        height: 15px;
        border-radius: 50%;
        background-color: #adadad;
      }
      /* アクティブなマーカーのスタイル */
      &::scroll-marker:target-current {
        background-color: #666;
      }
    }
  }
}