@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 {
  padding: 0;
  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.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.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: 45px 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.jpg);
  background-position: center top, center bottom;
  background-size: 100%, 100%;
  background-color: #ed9820;
  padding-bottom: 60%;
}

#page-wonderful_starlines .content_window {
  width: 76.6%;
  max-width: 980px;
  padding: 30px;
  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: 20px;
  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: 3% 0 0 0;
  margin: 3% 0 0 0;
  background-position: left center;
  background-repeat: no-repeat;
  background-size: contain;
  filter: drop-shadow(3px 3px 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% 0 3% 0;
}

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

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

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

#page-wonderful_starlines .grid_gallery ul li:nth-child(3n) {
  margin-right: 10px;
}

#page-wonderful_starlines .grid_gallery ul li:nth-child(5n) {
  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: 20px;
}

#page-wonderful_starlines #bottom_area .logo-bottom {
  display: block;
  width: 140px;
  height: 100px;
  margin: 0 auto 20px auto;
  background-image: url(../wonderful_starlines2025/logo-main_mono.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.8rem;
}

#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 5px 5px 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(3px 3px 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: 400px;
  animation: wonderful_starlines_logoani 5s ease 1s 1 forwards;
  opacity: 0;
}

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

/*==================================
Tablet portrait
==================================*/
/* @media only screen and (min-device-width: 768px) and (max-device-width: 1160px) { */
@media screen and (min-width: 768px) and (max-width: 1160px) {
  #page-wonderful_starlines .content_window {
    width: 90vw;
    max-width: auto;
    padding: 20px;
  }
  #page-wonderful_starlines .grid_gallery ul li {
    margin: 0 5px 5px 0;
  }
  #page-wonderful_starlines .grid_gallery ul li {
    width: calc((100% - 20px) / 5);
  }
  #page-wonderful_starlines .grid_gallery ul li:nth-child(3n) {
    margin-right: 5px;
  }
  #page-wonderful_starlines .grid_gallery ul li:nth-child(5n) {
    margin-right: 0;
  }
}