@font-face {
  font-family: "07NikumaruFont";
  src: url("../fonts/07NikumaruFont.ttf") format("truetype");
}

html,body {
  font-size: 10px;
}

header .puffy_30th_logo {
  position: fixed;
  top: 1.6rem;
  left: 1.6rem;
  z-index: 10000;
}
header .puffy_30th_logo a {
  display: inline-block;
  width: 8rem;
  height: auto;
  transform: scale(1);
  transition: all .3s;
}
header .puffy_30th_logo a:hover {
  transform: scale(1.05);
  transition: all .3s;
}
header .puffy_30th_logo a img {
  width: 100%;
  height: auto;

}
main {
  padding: 10rem 0 8rem;
  font-family: "07NikumaruFont", sans-serif;
  font-weight: 100;
  color: #36BFAF;
  line-height: 1.6;
  position: relative;
    overflow: hidden;
}
.moya_shape {
  position: absolute;
  z-index: -2;
}
.moya_shape.r_top {
  top: 0;
  right: 0;
  width: 20vw;
  height: auto;
  max-width: 300px;
  animation: moyaShapeFuwachan 24s infinite linear;
}
@keyframes moyaShapeFuwachan {
  0% {transform: translateY(0px) scale(1.1);}
  25% {transform: translateY(-5%) scale(1);}
  50% {transform: translateY(0px) scale(1.1);}
  75% {transform: translateY(-5%) scale(1);}
  100% {transform: translateY(0px) scale(1.1);}
}

.moya_shape.r_top_ball_1 {
  top: 30vw;
  right: -5%;
  width: 8%;
  height: auto;
  animation: moyaBallRotate 16s infinite linear;
}
@keyframes moyaBallRotate {
  0% {transform: rotate(0deg) translateX(0);}
  25% {transform: rotate(90deg) translateX(30%);}
  50% {transform: rotate(180deg) translateX(0);}
  75% {transform: rotate(270deg) translateX(30%);}
  100% {transform: rotate(360deg) translateX(0);}
}
.moya_shape.r_top_ball_2 {
    top: 42vw;
    right: 0%;
    width: 4%;
  height: auto;
  animation: moyaBallRotate_rv 16s infinite linear;
}
@keyframes moyaBallRotate_rv {
  0% {transform: rotate(0deg) translateX(0);}
  25% {transform: rotate(-90deg) translateX(-30%);}
  50% {transform: rotate(-180deg) translateX(0);}
  75% {transform: rotate(-270deg) translateX(-30%);}
  100% {transform: rotate(-360deg) translateX(0);}
}
.puffy_alphabet {
      position: relative;
    z-index: -1;
}
.puffy_alphabet .alphabet {
  width: 1.2rem;
  height: auto;
  position: fixed;
  top: 20%;
  left: 10%;
  transform-origin: center center;
  opacity: .7;
  z-index: -1;
}
.puffy_alphabet .alphabet img {
  animation: rotateAlpha 8s infinite linear;
}
.puffy_alphabet .alphabet.p-1_1 img {
  animation-delay: 0s;
}
.puffy_alphabet .alphabet.u-1_1 img {
  animation-delay: -0.7s;
}
.puffy_alphabet .alphabet.f-1_1 img {
  animation-delay: -1.1s;
}
.puffy_alphabet .alphabet.f-1_2 img {
  animation-delay: -2.5s;
}
.puffy_alphabet .alphabet.y-1_1 img {
  animation-delay: -3.1s;
}
.puffy_alphabet .alphabet.p-2_1 img {
  animation-delay: -4.3s;
}
.puffy_alphabet .alphabet.u-2_1 img {
  animation-delay: -5.1s;
}
.puffy_alphabet .alphabet.f-2_1 img {
  animation-delay: -6.2s;
}
.puffy_alphabet .alphabet.f-2_2 img {
  animation-delay: -7.0s;
}
.puffy_alphabet .alphabet.y-2_1 img {
  animation-delay: -7.7s;
}
@keyframes rotateAlpha {
  0% {transform: rotate(0deg);}
  100% {transform: rotate(360deg);}
}

.puffy_alphabet .alphabet.p-1_1 {
    top: 124%;
    left: 72%;
}

.puffy_alphabet .alphabet.u-1_1 {
    top: 100%;
    left: 2%;
}

.puffy_alphabet .alphabet.f-1_1 {
    top: 46%;
    left: 8%;
}

.puffy_alphabet .alphabet.f-1_2 {
    top: 24%;
    left: 94%;
}

.puffy_alphabet .alphabet.y-1_1 {
    top: 28%;
    left: -8%;
}

.puffy_alphabet .alphabet.p-2_1 {
    top: 78%;
    left: 86%;
}

.puffy_alphabet .alphabet.u-2_1 {
    top: 86%;
    left: 24%;
}

.puffy_alphabet .alphabet.f-2_1 {
    top: 118%;
    left: -1%;
}

.puffy_alphabet .alphabet.f-2_2 {
    top: 108%;
    left: 94%;
}

.puffy_alphabet .alphabet.y-2_1 {
    top: 54%;
    left: 92%;
}

.common_contents {
  padding: 0 2rem;
}
.content_inner {
      max-width: 500px;
    margin: 0 auto;
}
.lead_area .lead_tit {
  font-size: 2.4rem;
  font-weight: 100;
  line-height: 1.5;
  letter-spacing: .05em;
}
.lead_area .lead_txt {
  color: #555;
  font-size: 1.6rem;
  margin-top: 1.6rem;
}
.lead_area .lead_txt span {
  margin-left: .8rem;
}
.release_info_wrapper .content_inner {
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: 6rem;
  margin-top: 6rem;
}
.release_info_wrapper .content_inner .release_jk_area {
  width: 90%;
  height: auto;
  max-width: 480px;
  margin: 0 auto;
  position: relative;
}
.moya_shape.jk_bg {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 130%;
  height: auto;
  transform: translate(-50%,-50%);
  z-index: -10;
}
.moya_shape.jk_bg img {
  animation: moyaScaleUp 6s infinite linear;
}
@keyframes moyaScaleUp {
  0% {transform: scale(1);}
  25% {transform: scale(1.1);}
  50% {transform: scale(1);}
  75% {transform: scale(1.1);}
  100% {transform: scale(1);}
}
.moya_shape.jk_bg_ball_1 {
bottom: -24%;
    left: -6%;
    width: 12%;
  height: auto;
    animation: moyaBallRotate 16s infinite linear;
}
.moya_shape.jk_bg_ball_2 {
  bottom: -35%;
  left: -2%;
  width: 7%;
  height: auto;
    animation: moyaBallRotate_rv 16s infinite linear;
}
.moya_shape.jk_bg_ball_3 {
    bottom: -42%;
    left: 4%;
    width: 4%;
  height: auto;
    animation: moyaBallRotate 16s infinite linear;
    animation-delay: 4s;
}
.release_info_wrapper .release_jk_area img {
  width: 100%;
  height: auto;
}
.release_info_wrapper .release_txt_area {
  text-align: center;
}
.release_info_wrapper .release_txt_area .main_txt small {
  font-size: 1.4rem;
  display: block;
  margin-top: 1rem;
}
.release_info_wrapper .release_txt_area .main_txt span.release_day {
    font-size: 2rem;
}
.release_info_wrapper .release_txt_area .main_txt h2.release_tit_moyers {
  font-size: 40px;
      line-height: 1.4;
}
.release_info_wrapper .release_txt_area .main_txt .credit_list {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.6rem;
  padding: 0;
  margin-top: 1.2rem;
}
.release_info_wrapper .release_txt_area .main_txt .credit_list li {
  list-style: none;
  line-height: 1;
  color: #555;
  font-size: 1.6rem;
}
.release_info_wrapper .release_txt_area .main_txt .reserve_btn {
  margin-top: 3.2rem;
}
.release_info_wrapper .release_txt_area .main_txt .reserve_btn a {
  font-size: 1.8rem;
  font-weight: 100;
  padding: 1.2rem 2rem;
  background-color: #fff;
  border-radius: 10px;
  border: solid 3px #36BFAF;
  color: #36BFAF;
  display: inline-block;
    margin: 0 auto;
    width: 100%;
    max-width: 400px;
    transform: scale(1);
    transition: all .2s;
}
.release_info_wrapper .release_txt_area .main_txt .reserve_btn a:hover {
  transform: scale(1.05);
  transition: all .2s;
  background-color: #36BFAF;
  color: #fff;
}
.movie_wrapper {
  margin: 8rem auto 0;
  position: relative;
}
.moya_shape.r_middle {
    top: -14vw;
right: -14%;
width: 32%;
height: auto;
  animation: moyaShapeFuwachan 16s infinite linear;
}
.moya_shape.r_middle_ball_1 {
  top: 18%;
  right: 1%;
  width: 7%;
  height: auto;
    animation: moyaBallRotate 16s infinite linear;
}
.moya_shape.r_middle_ball_2 {
    top: 31%;
    right: -2%;
    width: 4%;
  height: auto;
    animation: moyaBallRotate_rv 16s infinite linear;
}
.moya_shape.l_bottom {
  bottom: -5vw;
  left: -12%;
  width: 46%;
  height: auto;
    animation: moyaShapeFuwachan_rv 24s infinite linear;
}
@keyframes moyaShapeFuwachan_rv {
  0% {transform: translateY(0);}
  25% {transform: translateY(5%);}
  50% {transform: translateY(0);}
  75% {transform: translateY(5%);}
  100% {transform: translateY(0);}
}
.movie_wrapper .movie_tit {
  text-align: center;
}
.movie_wrapper .movie_tit small {
  font-size: 1.4rem;
}
.movie_wrapper .movie_tit h2 {
  font-size: 2.8rem;
      line-height: 1.4;
}
.movie_wrapper .movie_area {
      margin-top: 1.6rem;
}
.movie_wrapper .movie_area iframe {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    border: 0;
        aspect-ratio: 16 / 9;
}
footer {
  background-color: #fff;
}



@media (min-width: 768px) {
  header .puffy_30th_logo a {
    width: 16rem;
}
  main {
  padding: 16rem 0
}
  .content_inner {
    max-width: 700px;
}
.lead_area .lead_tit {
    font-size: 3.8rem;
}
.lead_area .lead_txt {
    font-size: 2.2rem;
    margin-top: 3.2rem;
}
.release_info_wrapper .release_txt_area .main_txt small {
    font-size: 2.4rem;
        margin-top: 2rem;
}
    .release_info_wrapper .release_txt_area .main_txt span.release_day {
        font-size: 3.2rem;
    }
.release_info_wrapper .release_txt_area .main_txt h2.release_tit_moyers {
    font-size: 6.4rem;
}
.release_info_wrapper .release_txt_area .main_txt .credit_list li {
  font-size: 2rem;
}
.release_info_wrapper .release_txt_area .main_txt .reserve_btn a {
  font-size: 2.4rem;
}
.movie_wrapper {
    margin: 16rem auto 0;
}
.movie_wrapper .movie_tit small {
    font-size: 2.4rem;
}
.movie_wrapper .movie_tit h2 {
    font-size: 4.8rem;
}
}


@media (min-width: 1200px) {
  .content_inner {
    max-width: 1000px;
}
.moya_shape.r_top_ball_1 {
    top: 24vw;
    right: -1%;
    width: 64px;
}
.moya_shape.r_top_ball_2 {
        top: 30vw;
        right: 4%;
    width: 40px;
}
.moya_shape.r_middle_ball_1 {
        top: 5vw;
    right: 1%;
    width: 64px;
}
.moya_shape.r_middle_ball_2 {
    top: 12vw;
    right: 0%;
    width: 40px;
}
.release_info_wrapper .content_inner {
  flex-direction: row;
  gap: 0;
}
.moya_shape.jk_bg {
    transform: translate(-55%, -48%);
}
.release_info_wrapper .content_inner .release_jk_area {
  flex: 1;
}
.release_info_wrapper .content_inner .release_txt_area {
  flex: 1;
}
.release_info_wrapper .release_txt_area .main_txt .reserve_btn a {
    border-radius: 16px;
}
}



@media (min-width: 1500px) {
.moya_shape.r_top_ball_1 {
        top: 360px;
        right: -15px;
    }
    .moya_shape.r_top_ball_2 {
        top: 450px;
        right: 60px;
    }
    .moya_shape.r_middle {
    top: -210px;
    right: -210px;
    max-width: 480px;
}
.moya_shape.r_middle_ball_1 {
    top: 75px;
    right: 15px;
}
.moya_shape.r_middle_ball_2 {
    top: 180px;
    right: 0px;
}
.moya_shape.l_bottom {
    bottom: -75px;
    left: -180px;
    width: 690px;
}
}

@media (max-width: 374px) {
  .release_info_wrapper .release_txt_area .main_txt .reserve_btn a {
    font-size: 1.5rem;
}
}



.rotate-js {
  will-change: transform;
  transform: translate3d(0, 0, 0);
}