.sp {
  background:#000;
  color:#fff;
}

.sp-hero img {
  width:100%;
  display:block;
}

.sp-movie {
  padding:20px 0 0 0;
}

.movie-frame {
  position:relative;
  padding-top:56.25%;
}

.movie-frame iframe {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
}

.divider {
  height:1px;
  background:linear-gradient(to right, transparent, #444, transparent);
  margin:24px 0;
}

.sp-carousel {
  overflow:hidden;
}

.carousel-track {
  display:flex;
  scroll-snap-type:x mandatory;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}

.carousel-track::-webkit-scrollbar {
  display:none;
}

.screen {
  min-width:100%;
  scroll-snap-align:start;
}

.screen img {
  width:100%;
  display:block;
}

.dots {
  display:flex;
  justify-content:center;
  gap:8px;
  margin:12px 0;
}

.dots span {
  width:6px;
  height:6px;
  border-radius:50%;
  background:#444;
}

.dots span.active {
  background:#fff;
}

.sp-pr img {
  width:100%;
  display:block;
}

.sp-footer {
  padding:24px 0;
  text-align:center;
  font-size:11px;
  color:#777;
}

/* =============================
SP FOOTER
============================= */

.sp-footer{
  padding:40px 20px;
  background:#000;
}

/* 検索 */

.sp-search{
  margin-bottom:30px;
}

.search-title{
  font-size:1.6rem;
  margin-bottom:10px;
  font-weight:bold;
}

.sp-search form{
  display:flex;
  gap:10px;
}

.sp-search select{
  flex:1;
  padding:10px;
  font-size:1.4rem;
}

.sp-search button{
  padding:10px 16px;
  font-size:1.4rem;
  border:none;
  background:#c00;
  color:#fff;
}

/* 権利 */

.sp-copyright img{
  width:100%;
  max-width:1280px;
  display:block;
  margin:auto;
}

/* ===============================
SP カルーセル
=============================== */

.sp-carousel{
  width:100%;
  background:#000;
  overflow:hidden;
  border-top:1px solid #222;
  border-bottom:1px solid #222;
}

/* スライドエリア */

.carousel-track{
  display:flex;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch;
}

/* スクロールバー非表示 */

.carousel-track::-webkit-scrollbar{
  display:none;
}

/* 各スライド */

.screen{
  flex:0 0 100%;
  scroll-snap-align:center;
}

/* 画像 */

.screen img{
  width:100%;
  height:auto;
  display:block;
}

/* ===============================
進捗ドット
=============================== */

.dots{
  text-align:center;
  margin:14px 0 20px;
}

.dots span{
  display:inline-block;
  width:8px;
  height:8px;
  margin:0 5px;
  background:#555;
  border-radius:50%;
  transition:all .3s;
}

.dots span.active{
  background:#fff;
  transform:scale(1.2);
}