/* How to Play page styles */

main.howtoplay {
  padding: 10% 0 40px;
  background-image: url('/sumikkogurashi-movie/image/howtoplay/bg_bouken_2.png');
  background-repeat: repeat;
  background-size: contain;
}

@supports (background-image: url('/sumikkogurashi-movie/image/howtoplay/bg_bouken_2.webp')) {
  main.howtoplay {
    background-image: url('/sumikkogurashi-movie/image/howtoplay/bg_bouken_2.webp');
  }
}



.howtoplay__title {
  text-align: center;
  margin-top: auto;
  margin-bottom: auto;
}

.howtoplay__title-img {
  width: 50%;
  height: auto;
  display: block;
  margin: 0 auto;
}

@media (max-width: 768px) {
  .howtoplay__title-img {
    width: 80%;
  }
}


/* ========================================
   slick section
   ======================================== */

.howtoplay__slick-section {
  position: relative;
  margin: 10% auto 0;
  width: 100%;
  padding: 0;
}

@media (max-width: 768px) {
  .howtoplay__slick-section {
    margin: 18% auto 0;
    padding: 0;
  }
}

.howtoplay__slick-section+.howtoplay__slick-section {
  margin: 20% auto 0;
}

@media (max-width: 768px) {
    .howtoplay__slick-section+.howtoplay__slick-section {
      margin: 20% auto 0;
      padding: 0;
    }
  
}



/* Background image (absolutely positioned as decoration) */
.howtoplay__slick-bg {
  width: 100%;
}

.howtoplay__slick-bg-img {
  width: 100%;
  display: block;
}

/* Section title */
.howtoplay__slick-title {
  position: absolute;
  top: -2%;
  left: 50%;
  text-align: center;
  transform: translate(-50%, -50%);
  width: 50%;
}

.howtoplay__slick-title-img {
  width: 100%;
  display: block;
  margin: 0 auto;
}

@media screen and (max-width: 768px) {
  .howtoplay__slick-title {
    width: 88%;
  }

  .howtoplay__slick-title-img {
    width: 100%;
  }  
}


/* Slick container (main element to ensure height) */
.howtoplay__slick-container {
  position: absolute;
  top: 18%;
  left: 0;
  width: 100%;
}

.howtoplay__slick-section[data-slick-section="2"] .howtoplay__slick-container,
.howtoplay__slick-section[data-slick-section="3"] .howtoplay__slick-container,
.howtoplay__slick-section[data-slick-section="4"] .howtoplay__slick-container {
  top: 16%;
}

@media (max-width: 768px) {
  .howtoplay__slick-section[data-slick-section="1"] .howtoplay__slick-container,
  .howtoplay__slick-section[data-slick-section="2"] .howtoplay__slick-container,
  .howtoplay__slick-section[data-slick-section="3"] .howtoplay__slick-container,
  .howtoplay__slick-section[data-slick-section="4"] .howtoplay__slick-container {
    top: 12%;
  }
}


/* Custom arrow images */
.howtoplay__slick-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  cursor: pointer;
  transition: transform 0.3s ease, opacity 0.3s ease;
  width: 4.5%;
}

@media screen and (max-width: 768px) {
  /* Custom arrows: Mobile */
  .howtoplay__slick-arrow {
    display: none;
  }
  
}

.howtoplay__slick-arrow:hover {
  transform: translateY(-50%) scale(1.05);
  opacity: 0.9;
}

.howtoplay__slick-arrow:active {
  transform: translateY(-50%) scale(0.98);
}

.howtoplay__slick-section[data-slick-section="2"] .howtoplay__slick-arrow,
.howtoplay__slick-section[data-slick-section="3"] .howtoplay__slick-arrow,
.howtoplay__slick-section[data-slick-section="4"] .howtoplay__slick-arrow {
  top: 32%;
  /* 動画背景の縦方向中央に調整 */
}

.howtoplay__slick-arrow--left {
  left: 21%;
}

.howtoplay__slick-arrow--right {
  right: 21%;
}

@media (min-width: 1280px) {
  .howtoplay__slick-arrow--left {
    left: 21.5%;
  }

  .howtoplay__slick-arrow--right {
    right: 21.5%;
  }
}


.howtoplay__slick-section[data-slick-section="2"] .howtoplay__slick-arrow--left,
.howtoplay__slick-section[data-slick-section="3"] .howtoplay__slick-arrow--left,
.howtoplay__slick-section[data-slick-section="4"] .howtoplay__slick-arrow--left {
  left: 22%;
}

.howtoplay__slick-section[data-slick-section="2"] .howtoplay__slick-arrow--right,
.howtoplay__slick-section[data-slick-section="3"] .howtoplay__slick-arrow--right,
.howtoplay__slick-section[data-slick-section="4"] .howtoplay__slick-arrow--right {
  right: 22%;
}




.howtoplay__slick-arrow-img {
  width: 100%;
  height: auto;
  display: block;
}

/* Slick card */
.howtoplay__slick-card {
  padding: 0 0.2%;
  outline: none;
  position: relative;
  /* z-index: 50; */
}

@media screen and (max-width: 768px) {
  .howtoplay__slick-card {
    padding: 0 5px;
  }
}

.howtoplay__slick-card-inner {
  transition: transform 0.3s ease;
  padding: 0 10px;
}


.howtoplay__slick-card-img {
  width: 100%;
  height: auto;
  display: block;
}



/* Card: Video type */
.howtoplay__slick-card-inner--video {
  position: relative;
}

/* Background image */
.howtoplay__slick-video-bg {
  width: 100%;
}

.howtoplay__slick-video-bg img {
  width: 100%;
}

/* Video container */
.howtoplay__slick-video-container {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
}

@media screen and (max-width: 768px) {
  .howtoplay__slick-video-container {
    padding: 10px;
  }
  
}

.howtoplay__slick-section[data-slick-section="2"] .howtoplay__slick-video-container,
.howtoplay__slick-section[data-slick-section="3"] .howtoplay__slick-video-container,
.howtoplay__slick-section[data-slick-section="4"] .howtoplay__slick-video-container {
  position: initial;
  padding: 0;
}


/* Video section */
.howtoplay__slick-video {
  position: relative;
  width: 50%;
  margin: 0 auto;
}

@media screen and (max-width: 768px) {
  .howtoplay__slick-video {
    width: 90%;
  }
  
}

.howtoplay__slick-section[data-slick-section="2"] .howtoplay__slick-video,
.howtoplay__slick-section[data-slick-section="3"] .howtoplay__slick-video,
.howtoplay__slick-section[data-slick-section="4"] .howtoplay__slick-video {
  width: 89%;
}

@media (max-width: 768px) {
  .howtoplay__slick-section[data-slick-section="2"] .howtoplay__slick-video,
  .howtoplay__slick-section[data-slick-section="3"] .howtoplay__slick-video,
  .howtoplay__slick-section[data-slick-section="4"] .howtoplay__slick-video {
      width: 100%;
  }
}

/* Video thumbnail */
.howtoplay__slick-video-thumb {
  position: relative;
  width: 100%;
  display: block;
}

.howtoplay__slick-section[data-slick-section="1"] .howtoplay__slick-video-thumb {
  border-radius: 10px;
  border: solid 8px #b3e1e5;
}

@media (max-width: 768px) {
  .howtoplay__slick-section[data-slick-section="1"] .howtoplay__slick-video-thumb {
    position: relative;
    left: -1%;
  }
}

.howtoplay__slick-section[data-slick-section="2"] .howtoplay__slick-video-thumb {
  border-radius: 20px;
  border: solid 10px #fff;
  box-shadow: 6px 6px 10px rgba(229, 116, 76, 0.5); /*#e5744c;*/
}
.howtoplay__slick-section[data-slick-section="3"] .howtoplay__slick-video-thumb {
  border-radius: 20px;
  border: solid 10px #fff;
  box-shadow: 6px 6px 10px rgba(53, 171, 70, 0.5); /* #35ab46; */
}
.howtoplay__slick-section[data-slick-section="4"] .howtoplay__slick-video-thumb {
  border-radius: 20px;
  border: solid 10px #fff;
  box-shadow: 6px 6px 10px rgba(242, 85, 85, 0.5); /* #f25555; */
}

@media (max-width: 768px) {
  .howtoplay__slick-section[data-slick-section="2"] .howtoplay__slick-video-thumb,
  .howtoplay__slick-section[data-slick-section="3"] .howtoplay__slick-video-thumb,
  .howtoplay__slick-section[data-slick-section="4"] .howtoplay__slick-video-thumb {
    background-color: #fff;
    border-radius: 10px;
  }
}



.howtoplay__slick-video-thumb > img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 10px;
}

@media (max-width: 768px) {
  .howtoplay__slick-section[data-slick-section="1"] .howtoplay__slick-video-thumb > img {
    border-radius: 3px;
  }
  .howtoplay__slick-section[data-slick-section="2"] .howtoplay__slick-video-thumb > img,
  .howtoplay__slick-section[data-slick-section="3"] .howtoplay__slick-video-thumb > img,
  .howtoplay__slick-section[data-slick-section="4"] .howtoplay__slick-video-thumb > img {
    border-radius: 8px;
  }
}

/* Play button */
.howtoplay__slick-video-link {
  position: absolute;
  width: 20%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  min-width: 50px;
  max-width: 80px;
  transition: transform 0.3s ease;
}

.howtoplay__slick-video-thumb:hover .howtoplay__slick-video-link {
  transform: translate(-50%, -50%) scale(1.08);
}


.howtoplay__slick-video-btn {
  transition: transform 0.3s ease;
}

.howtoplay__slick-video-btn:hover {
  transform: scale(1.1);
}

/* 動画タイトル */
.howtoplay__slick-video-title {
  margin-top: 20px;
  text-align: center;
  width: 100%;
}

.howtoplay__slick-video-title img {
  max-width: 100%;
  height: auto;
}

.howtoplay__slick-section[data-slick-section="2"] .howtoplay__slick-video-title,
.howtoplay__slick-section[data-slick-section="3"] .howtoplay__slick-video-title,
.howtoplay__slick-section[data-slick-section="4"] .howtoplay__slick-video-title {
  text-align: center;
  width: 100%;
  margin-top: 8%;
}

@media (max-width: 768px) {
  .howtoplay__slick-section[data-slick-section="2"] .howtoplay__slick-video-title,
  .howtoplay__slick-section[data-slick-section="3"] .howtoplay__slick-video-title,
  .howtoplay__slick-section[data-slick-section="4"] .howtoplay__slick-video-title {
    margin-top: 25%;
  }
}


.howtoplay__slick-section[data-slick-section="2"] .howtoplay__slick-video-title img,
.howtoplay__slick-section[data-slick-section="3"] .howtoplay__slick-video-title img,
.howtoplay__slick-section[data-slick-section="4"] .howtoplay__slick-video-title img {
  width: 100%;
}

/* Customize slick arrow buttons (hide default arrows) */
.howtoplay__slick-slider .slick-arrow {
  display: none !important;
}

/* スライダー本体のz-index設定 */
.howtoplay__slick-slider {
  position: relative;
  z-index: 2;
}

/* Customize slick dots navigation */
.howtoplay__slick-slider .slick-dots {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  list-style: none;
  margin: 0;
  padding: 0;
}

@media screen and (max-width: 768px) {
  .howtoplay__slick-slider .slick-dots {
    top: 110%;
    gap: 30px;
  }
  
}

.howtoplay__slick-section[data-slick-section="2"] .slick-dots,
.howtoplay__slick-section[data-slick-section="3"] .slick-dots,
.howtoplay__slick-section[data-slick-section="4"] .slick-dots {
  top: 63%;
}

@media screen and (max-width: 768px) {
  .howtoplay__slick-section[data-slick-section="2"] .slick-dots,
  .howtoplay__slick-section[data-slick-section="4"] .slick-dots {
    top: 47%;
  }

  .howtoplay__slick-section[data-slick-section="3"] .slick-dots {
    top: 45%;
  }
}


.howtoplay__slick-slider .slick-dots li {
  margin: 0;
  padding: 0;
  width: 12px;
  height: 12px;
}

@media screen and (max-width: 768px) {
  .howtoplay__slick-slider .slick-dots li {
    /* width: 14px; */
    /* height: 14px; */
  }
  
}

.howtoplay__slick-slider .slick-dots li button {
  width: 12px;
  height: 12px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.7);
  cursor: pointer;
  font-size: 0;
  line-height: 0;
  transition: all 0.3s ease;
}

@media screen and (max-width: 768px) {
  .howtoplay__slick-slider .slick-dots li button {
    /* width: 14px; */
    /* height: 14px; */
  }
  
}

.howtoplay__slick-slider .slick-dots li button::before {
  display: none;
}



/* Dot colors for each section */
.howtoplay__slick-section[data-slick-section="1"] .slick-dots li button {
  background-color: #48b2d2;
}

.howtoplay__slick-section[data-slick-section="2"] .slick-dots li button {
  background-color: #e5744c;
}
.howtoplay__slick-section[data-slick-section="3"] .slick-dots li button {
  background-color: #35ab46;
}
.howtoplay__slick-section[data-slick-section="4"] .slick-dots li button {
  background-color: #f25555;
}

.howtoplay__slick-section[data-slick-section="1"] .slick-dots li.slick-active button,
.howtoplay__slick-section[data-slick-section="2"] .slick-dots li.slick-active button,
.howtoplay__slick-section[data-slick-section="3"] .slick-dots li.slick-active button,
.howtoplay__slick-section[data-slick-section="4"] .slick-dots li.slick-active button
{
  background-color: #ffffff;
}

/* back to top styles */
.howtoplay__goto-top {
  position: relative;
  margin: 30px auto;
  width: 30%;
  cursor: pointer;
}

@media (max-width: 768px) {
  .howtoplay__goto-top {
    width: 50%;
  }
}

.howtoplay__goto-top .button-hover {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
}

.howtoplay__goto-top:hover .button-hover {
  opacity: 1;
}

.howtoplay__goto-top:hover .button-default {
  opacity: 0;
}

.scroll-to-top {
  position: fixed;
  bottom: 10px;
  right: 10px;
  width: 15%;
  cursor: pointer;
  z-index: 2;
}

.scroll-to-top img {
  width: 100%;
  height: auto;
  display: block;
}