/* コンテナ：表示領域 */
.slider {
  position: relative;
  overflow: hidden;        /* ここで隠す（大事） */
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
  margin: 0 20px;
}

/* トラック：これを横にスライドさせる */
.slider__track {
  display: flex;
  transition: transform 0.6s ease;
  will-change: transform;
}

/* 各スライド：幅100%で横並び */
.slider__item {
  flex: 0 0 100%;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 12px; /* 任意の内側余白 */
}

/* iframe を16:9でレスポンシブに */
.slider__img {
  width: 100%;
  max-width: 900px;    /* 任意の最大幅 */
  aspect-ratio: 16 / 9;
  background: #000;
  border-radius: 10px;
  overflow: hidden;
}

.slider__img iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* ボタン（見やすく） */
.prev, .next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(212,52,110);
  color: #fff;
  border: none;
  font-size: 20px;
  padding: 5px 15px;
  cursor: pointer;
  border-radius: 50%;
  z-index: 10;
}
.prev { left: 0px; }
.next { right: 0px; }

/* ドット */
.dots {
  position: absolute;
  bottom: 14px;
  left: 50%;
  transform: translateX(-50%);
  display:flex;
  gap:8px;
  z-index: 10;
}
.dot {
  width:10px; height:10px; border-radius:50%; background:#bbb; cursor:pointer;
}
.dot.active { background:#D4346E; transform:scale(1.2); }


.movie{
    border:1px solid  rgb(212, 52, 110);
    border-radius: 24px;
    box-shadow: 0 10px 0 0 #D4346E;
    padding: 5%;
}

.movie-text{
    font-size: 2.4rem;
    font-weight: bold;
    color: #001944;
    text-align: center;
    margin-top: 20px;
}