body{
  width: 100%;
  max-width: 750px;
  margin: 0 auto;
  font-family: "Noto Sans JP", sans-serif;
  color: #fff;
  text-align: center;
  font-size: 18px;
}

img{
  width: 100%;
  max-width: 700px;
}

video{
  width: 100%;
}

/* fixed */
.fixed__video{
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  position: fixed;
  width: 100%;
  height: 100vh;
  z-index: -2;
}

.fixed__layer{
  width: 100vw;
  height: 100vh;
  background-image: url(https://media.ad-lps.net/contents/template/tp_eromax/img/layer.webp);
  background-size: contain;
  opacity: 0.65;
  position: fixed;
  top: 0;
  left: 0;
  z-index: -1;
}

header{
  background: #0C120C;
  box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
}

.header__logo{
  width: 50%;
  margin: 0 auto;
  padding: 3% 0;
}

.intro__wrapper{
  padding: 6% 0;
}

.intro__text{
  font-weight: 900;
}

.intro__text span{
  border-bottom: 8px solid #FFBD00;
}

.intro__top{
  font-size: 40px;
}

.intro__middle{
  display: inline-block;
  margin: 8% 0;
  font-size: 32px;
}

/* board */
.photoboard__img{
  margin-top: 5%;
}

.photoboard__img img{
  width: 90%;
  margin: 0 auto;
  border-radius: 15px;
}

.photoboard__txt{
  font-size: 20px;
  line-height: 2;
  padding-top: 3%;
}

.photoboard__subtxt{
  line-height: 1.8;
  margin-bottom: 5%;
}

.photoboard__txt span{
  font-weight: 900;
  background:linear-gradient(transparent 0%, #6E2594 0%);
  box-shadow: 3px 3px #fff;
  border-radius: 5px;
  font-size: 40px;
  border-radius: 5px;
  padding: 1% 0;
}


/* recommend */
.recommend__txt{
  line-height: 2;
}

.recommend__txt span{
  font-weight: 900;
  font-size: 30px;
  border-bottom: 8px solid #FFBD00;
}


.recommend__img img{
  width: 80%;
  border-radius: 15px;
}


/* point */

.point__txt{
  font-size: 26px;
  font-weight: 900;
  line-height: 2.5;
  margin: 8% auto 2%;
  color: #fffb1c;

}

.point__txt span{
    background:linear-gradient(transparent 0%, #0C120C 0%);
    padding: 2%;
    border-radius: 5px;
    box-shadow: 3px 3px #fff;
}

.point__img img{
  width: 94%;
  border-radius: 5px; 
}

.uodw__arrow{
  display: inline-block;
  animation: sway 1s linear infinite;
  font-size:28px;
  margin-bottom: 5%;
}

@keyframes sway {
  /* 最初と最後の位置 */
  0%,
  100% {
      transform: translateY(0px);
  }

  /* 途中の位置 */
  50% {
      transform: translateY(5px);
  }

}


/* closing */
#closing{
  margin-bottom: 25%;
}
.closing__txt{
  display:inline-block;
  margin: 10% 0 5%;
  padding: 4%;
  border-radius: 5px;
  font-size: 30px;
  font-weight: 900;
  background: #6E2594;
  box-shadow: 3px 3px #fff;
  transform: rotate(-2deg);
}

.closing__wrapper{
  font-size: 20px;
  line-height: 2.5;
  font-weight: 900;
}

/* btn */
.btn{
  width: 100%;
  position: fixed;
  bottom: 12%;
  left: 0;
  overflow: hidden;
  animation: patsun 3s infinite;
}

@keyframes patsun {
  0% {
      transform: rotateZ(0deg);
  }
  22% {
      transform: rotateZ(0deg);
  }
  24% {
      transform: translate(-2px, -10px) rotateZ(-18deg) scale(0.8, 1.3);
  }
  26% {
      transform: rotateZ(0deg) scale(1, 1.1);
  }
  28% {
      transform: translate(0px, -2px) rotateZ(-2deg;
      )
  }
  30% {
      transform: rotateZ(0deg);
  }
  32% {
      transform: translate(0px, -2px) rotateZ(-2deg);
  }
  33% {
      transform: rotateZ(0deg);
  }
  34% {
      transform: translate(0px, -2px) rotateZ(-2deg);
  }
  35% {
      transform: rotateZ(0deg);
  }
  36% {
      transform: translate(0px, -2px) rotateZ(-2deg);
  }
  37% {
      transform: rotateZ(0deg);
  }
  38% {
      transform: translate(0px, -2px) rotateZ(-2deg);
  }
  39% {
      transform: rotateZ(0deg);
  }
  100% {
      transform: rotateZ(0deg);
  }
}


.btn img{
  width: 96%;
  margin: 0 auto;
}

footer{
  background: #0C120C;
  font-size: 12px;
  margin-top: 5%;
  padding: 3% 0;
}