@charset "utf-8";
/*==================================
SWITCH DOT LINE WCS-CSS
Ver.3s
Edit:2025 -
LastUpdate:20250716
==================================*/

/*==================================
WONDERFUL_STARLINES LAYOUT
==================================*/
body {
  background-color: #fffdf6;
}

article#page-wonderful_starlines {
  background-color: #e68489;
}

#page-wonderful_starlines #mainvisual_area {
  width: 100vw;
  height: 100vw;
  padding: 4% 0 0 0;
  margin: 0 0 -16% 0;
  background-image: url(../wonderful_starlines2025/visual_main-sp.jpg);
  background-position: center bottom;
  background-repeat: no-repeat;
  background-size: 100%;
  animation: starlines_mainvisual 1.6s ease 5.4s 1 normal forwards;
  transform: scale(1.08);
}

@keyframes starlines_mainvisual {
  0% {
    transform: scale(1.08);
  }
  100% {
    transform: scale(1);
  }
}

#page-wonderful_starlines #mainvisual_area .main_logo {
  display: block;
  width: 39%;
  height: 39%;
  margin: 0 auto;
  background-image: url(../wonderful_starlines2025/logo-main_outline_sp.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  filter: drop-shadow(0px 8px 20px rgba(0, 0, 0, 0.05));
  animation: starlines_logo 0.8s ease-out 6s 1 normal forwards;
  opacity: 0;
}

@keyframes starlines_logo {
  0% {
    transform: translateY(-10px);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

#page-wonderful_starlines section {
  background-color: rgba(0, 0, 0, 0);
  max-width: 100vw;
  padding: 20px 0;
  margin: 0;
  background-image: none;
  background-position: center 15%;
  background-repeat: no-repeat;
  background-size: 100%;
  border-radius: 0;
  box-shadow: none;
}

#page-wonderful_starlines section#movie01 {
  background-image: url(../wonderful_starlines2025/bg_curve01.png);
}

#page-wonderful_starlines section#movie02 {
  background-image: url(../wonderful_starlines2025/bg_curve02.png);
}

#page-wonderful_starlines section#photo {
  background-image: url(../wonderful_starlines2025/bg_curve03.png), url(../wonderful_starlines2025/visual_bottom-sp.jpg);
  background-position: center top, center bottom;
  background-size: 100%, 100%;
  background-color: #ed9820;
  padding-bottom: 90%;
}

#page-wonderful_starlines .content_window {
  width: 92vw;
  padding: 3%;
  margin: 0 auto;
  background-image: url(../wonderful_starlines2025/bg_window.png);
  background-position: center;
  background-repeat: repeat;
  background-size: 10px;
  border: 3px solid #fff;
  border-radius: 10px;
  box-shadow: 10px 10px 15px rgba(0, 0, 0, 0.15), 20px 20px 60px #fff inset;
  text-align: left;
  position: relative;
}

#page-wonderful_starlines .content_window:before {
  content: "";
  width: calc(100% + 6px);
  height: calc(100% + 6px);
  border-radius: 20px;
  position: absolute;
  left: -3px;
  top: -3px;
  background-image: url(../wonderful_starlines2025/bg_star.png);
  background-repeat: no-repeat;
  background-size: 30%;
  opacity: 0.7;
}

#page-wonderful_starlines #movie01 .content_window:before {
  background-position: right -14% bottom -21%;
}

#page-wonderful_starlines #movie02 .content_window:before {
  background-position: left -10% top -23%;
}

#page-wonderful_starlines #photo .content_window:before {
  background-position: center top 85%;
  background-size: 100%;
  opacity: 0.2;
}

#page-wonderful_starlines h2 {
  height: auto;
  padding: 5.4% 0 0 0;
  margin: 5% 0 1% 0;
  background-position: left center;
  background-repeat: no-repeat;
  background-size: contain;
  filter: drop-shadow(2px 2px 0 rgba(255, 255, 255, 0.8));
}

#page-wonderful_starlines #movie01 h2 {
  background-image: url(../wonderful_starlines2025/title-movie01.png);
}

#page-wonderful_starlines #movie02 h2 {
  background-image: url(../wonderful_starlines2025/title-movie02.png);
}

#page-wonderful_starlines #photo h2 {
  background-image: url(../wonderful_starlines2025/title-photo.png);
  margin: 1.5% 0 4% 0;
}

#page-wonderful_starlines .embed_video {
  margin: 0 auto;
  border-radius: 5px;
}

#page-wonderful_starlines .grid_gallery ul li {
  padding: 0;
  margin: 0 3px 3px 0;
  text-align: center;
  color: #aa80ea;
  position: relative;
}

#page-wonderful_starlines .grid_gallery ul li {
  width: calc((100% - 6px) / 2);
}

#page-wonderful_starlines .grid_gallery ul li:nth-child(2n) {
  margin-right: 0;
}

#page-wonderful_starlines .lity_slider-nav ul li span {
  border: 3px solid rgba(255, 255, 255, 0.4);
  border-radius: 10px;
  transition: 0.4s;
}

#page-wonderful_starlines #bottom_area {
  width: 100vw;
  text-align: center;
  position: absolute;
  left: 0;
  bottom: 30px;
}

#page-wonderful_starlines #bottom_area .logo-bottom {
  display: block;
  width: 100px;
  height: 70px;
  margin: 0 auto 15px auto;
  background-image: url(../wonderful_starlines2025/logo-main_mono_sp.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  filter: drop-shadow(2px 2px 8px rgba(0, 0, 0, 0.6));
}

#page-wonderful_starlines #bottom_area .copyright {
  color: rgba(255, 255, 255, 0.8);
  text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.6);
  font-size: 0.7rem;
}

#page-wonderful_starlines .comingsoon {
  width: 100%;
  margin: 0 auto;
  padding-top: 56.25%;
  background-color: rgba(255, 253, 246, 1);
  background-image: url(../common/bg_pattern-dots.svg);
  background-position: center;
  background-repeat: repeat;
  background-size: 16px;
  box-shadow: inset 2px 2px 0 rgba(0, 0, 0, 0.08);
  border-radius: 10px;
  position: relative;
}

#page-wonderful_starlines .comingsoon h3 {
  width: 100%;
  padding: 8% 0 0 0;
  margin: 0;
  background-image: url(../wonderful_starlines2025/title-coming.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  position: absolute;
  top: 44%;
  transform: rotate(-8deg);
  filter: drop-shadow(2px 2px 0 rgba(255, 255, 255, 0.8));
}

#wonderful_starlines-loading_ani {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 100vh;
  padding: 0;
  background-color: #fffdf6;
  position: fixed;
  top: 0;
  left: 0;
  overflow: hidden;
  z-index: 9999;

  animation: wonderful_starlines_fixed 7.4s ease 0s 1 forwards;
}

@keyframes wonderful_starlines_fixed {
  0%,
  75% {
    opacity: 1;
  }
  90% {
    z-index: 200;
  }
  100% {
    opacity: 0;
    z-index: -1;
  }
}

#wonderful_starlines-loading_ani .logo_ani {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 100vh;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 50vw;
  animation: wonderful_starlines_logoani 5s ease 1s 1 forwards;
  opacity: 0;
}

@keyframes wonderful_starlines_logoani {
  0% {
    background-image: url(../wonderful_starlines2025/logo-1st_sp.png);
    opacity: 0;
    transform: scale(0.95);
  }
  20%,
  30% {
    opacity: 1;
  }
  49% {
    background-image: url(../wonderful_starlines2025/logo-1st_sp.png);
    opacity: 0;
    transform: scale(1);
  }
  50% {
    background-image: url(../wonderful_starlines2025/logo-2nd_sp.png);
    opacity: 0;
    transform: scale(0.95);
  }
  70%,
  80% {
    opacity: 1;
  }
  100% {
    background-image: url(../wonderful_starlines2025/logo-2nd_sp.png);
    opacity: 0;
    transform: scale(1);
  }
}