@charset "shift_jis";
/* CSS Document */



.MB1em {
margin-bottom: 1em!important;
}
.MB00 {
margin-bottom: 0px!important;
}
.MB10 {
margin-bottom: 10px!important;
}
.MB15 {
margin-bottom: 15px!important;
}
.MB20 {
margin-bottom: 20px!important;
}
.MB25 {
margin-bottom: 25px!important;
}
.MB30 {
margin-bottom: 30px!important;
}
.MB35 {
margin-bottom: 35px!important;
}
.MB40 {
margin-bottom: 40px!important;
}
.MB45 {
margin-bottom: 45px!important;
}
.MB50 {
margin-bottom: 50px!important;
}
.MB55 {
margin-bottom: 55px!important;
}
.MB60 {
margin-bottom: 60px!important;
}
.MB65 {
margin-bottom: 55px!important;
}
.MB60 {
margin-bottom: 60px!important;
}
.MB65 {
margin-bottom: 65px!important;
}
.MB70 {
margin-bottom: 70px!important;
}
.MB75 {
margin-bottom: 75px!important;
}
.MB80 {
margin-bottom: 80px!important;
}
.MB85 {
margin-bottom: 85px!important;
}
.MB90 {
margin-bottom: 90px!important;
}
.MB95 {
margin-bottom: 95px!important;
}
.MB100 {
margin-bottom: 100px!important;
}
.MB110 {
margin-bottom: 110px!important;
}
.MB120 {
margin-bottom: 120px!important;
}
.MB130 {
margin-bottom: 130px!important;
}
.MB140 {
margin-bottom: 140px!important;
}
.MB150 {
margin-bottom: 150px!important;
}
.MB160 {
margin-bottom: 160px!important;
}
.MB200 {
margin-bottom: 200px!important;
}

.w100{
  display: block;
  width: 100%;
  height: auto;
}

.price_box {
background: #2a59a7;
padding: 20px;
}

.price_box .price_inbox {
display: -webkit-flex;
display: flex;
-webkit-justify-content: center;
justify-content: center;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
align-items: center;
max-width: 980px;
width: 77.5%;
margin: 0 auto;
}
.price_box .price_txt {
max-width: 361px;
width: 100%;
}

.btn_buy {
width: 180px;
}

.btn_mall .btn {
display: inline-block;
font-weight: bold;
line-height: 1.5;
color: #212529;
text-align: center;
text-decoration: none;
vertical-align: middle;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
background-color: transparent;
border: 2px solid transparent;
padding: .375rem 2rem;
font-size: 18px;
width: 180px;
border-radius: 6px;
}
.btn_mall .btn.btn-light {
display: block;
color: #000;
background-color: #8ef1dd;
border-color: #8ef1dd;
}

.btn_mall.btn_mall02 .btn.btn-light {
  display: block;
  color: #fff;
  background-color: #2a59a7;
  border-color: #2a59a7;
  }

  .btn_mall02{
    margin-left: 3%;
  }

.btn_mall_box {
width: 180px;
margin: 0 auto;
}
.btn_mall_box .btn_mall .btn.btn-light {
display: block;
color: #000;
background-color: #8ef1dd;
border-color: #8ef1dd;
}



.movie_area {
display: -webkit-flex;
display: flex;
-webkit-justify-content: space-between;
justify-content: space-between;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
}




#contents .youtube {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
}
#contents .youtube iframe {
  position: absolute;
  top: 0;
  right: 0;
  width: 100% !important;
  height: 100% !important;
}


.movie_area {
display: -webkit-flex;
display: flex;
-webkit-justify-content: space-between;
justify-content: space-between;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
}

.promo_movie_box {
width: 90%;
max-width: 480px;
margin: 0 auto;
}


#contents .youtube {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
}
#contents .youtube iframe {
  position: absolute;
  top: 0;
  right: 0;
  width: 100% !important;
  height: 100% !important;
}
.ct_box .copyright {
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-justify-content: center;
justify-content: center;

align-items: center;

padding: 20px 10px;
}

.ct_box .copyright_img {
width: 40%;
max-width: 320px;
}

.ct_box .copyright_txt {
width: 55%;
text-align: left;
font-size: 12px;
color:#000;
}


.ct_box .bnr_box {
padding: 20px 8% 10px;
}
.ct_box .bnr_box a {
display: block;
}

/*------------------------*/


.ct_box {
width: 100%;
margin: 0 auto;
}

.ct_box>.w480 {
width: 100%;
max-width: 480px;
box-sizing: border-box;
margin: 0 auto;
padding-bottom: 1px;
overflow: hidden;
}

@media (min-width: 481px){
.ct_box>.w480 {
border-right: 4px #2a59a7 solid;
border-left: 4px #2a59a7 solid;
}
/* min-width: 481px */}


.bg_box{
  background: url(../images/bg.webp) no-repeat fixed;
  background-size: cover;
  background-position: center;
}
/*------------------------*/


/* mainここから */
.main{
  position: relative;
}

.main_stars{
  position: absolute;
  z-index: 3;
}

.main_star01{
  width: 6%;
  top: 33%;
  left: 31%;
  animation: star_anime01 5s ease infinite;
  animation-delay: 0.1s;
}
.main_star02{
  width: 8%;
  top: 30%;
  left: 35%;
  animation: star_anime02 5s ease infinite;
  animation-delay: 0.1s;
}
.main_star03{
  width: 7%;
  top: 27%;
  left: 38%;
  animation: main_star_anime03 5s ease infinite;
  animation-delay: 0.1s;
}
.main_star04{
  width: 7%;
  top: 32%;
  left: 41%;
  animation: star_anime04 5s ease infinite;
  animation-delay: 0.1s;
}
.main_star05{
  width: 6%;
  top: 28%;
  left: 45%;
  animation: star_anime05 5s ease infinite;
  animation-delay: 0.1s;
}
.main_star06{
  width: 9%;
  top: 31%;
  left: 48%;
  animation: star_anime06 5s ease infinite;
  animation-delay: 0.1s;
}
.main_star06_2{
  width: 9%;
  top: 24%;
  left: 50%;
  animation: star_anime06_2 5s ease infinite;
  animation-delay: 0.1s;
}
.main_star07{
  width: 6%;
  top: 29%;
  left: 55%;
  animation: star_anime07 5s ease infinite;
  animation-delay: 0.1s;
}
.main_star08{
  width: 8%;
  top: 34%;
  left: 58%;
  animation: star_anime08 5s ease infinite;
  animation-delay: 0.1s;
}
.main_star09{
  width: 10%;
  top: 28%;
  left: 62%;
  animation: star_anime09 5s ease infinite;
  animation-delay: 0.1s;
}
.main_star10{
  width: 8%;
  top: 33%;
  left: 67%;
  animation: star_anime10 5s ease infinite;
  animation-delay: 0.1s;
}

.main_star10_2{
  width: 6%;
  top: 38%;
  left: 65%;
  animation: star_anime10_2 5s ease infinite;
  animation-delay: 0.1s;
}

@keyframes star_anime01 {
  0%{
    transform: translateY(25px) translateX(15px) rotate(0);
    animation-timing-function: ease-out;
  }
  10%{
    transform: translateY(0) translateX(0) rotate(-180deg);
    opacity: 1;
    animation-timing-function: ease-out;
  }
  80%{
    opacity: 1;
  }
  100%{
    transform: translateY(-22px) translateX(-10px) rotate(-300deg);
    opacity: 0;
    animation-timing-function: ease-in;
  }
}
@keyframes star_anime02 {
  0%{
    transform: translateY(40px) translateX(5px) rotate(0);
    animation-timing-function: ease-out;
  }
  10%{
    transform: translateY(0) translateX(0) rotate(180deg);
    opacity: 1;
    animation-timing-function: ease-out;
  }
  80%{
    opacity: 1;
  }
  100%{
    transform: translateY(-12px) translateX(-2px) rotate(300deg);
    opacity: 0;
  }
}
@keyframes main_star_anime03 {
  0%{
    transform: translateY(35px) translateX(0px) rotate(0);
    animation-timing-function: ease-out;
  }
  10%{
    transform: translateY(0) translateX(0) rotate(-180deg);
    animation-timing-function: ease-out;
    opacity: 1;
  }
  80%{
    opacity: 1;
  }
  100%{
    transform: translateY(-20px) translateX(0px) rotate(-300deg);
    opacity: 0;
  }
}
@keyframes star_anime04 {
  0%{
    transform: translateY(25px) translateX(5px) rotate(0);
    animation-timing-function: ease-out;
  }
  10%{
    transform: translateY(0) translateX(0) rotate(-180deg);
    animation-timing-function: ease-out;
    opacity: 1;
  }
  70%{
    opacity: 1;
  }
  100%{
    transform: translateY(-12px) translateX(-2px) rotate(-300deg);
    opacity: 0;
  }
}
@keyframes star_anime05 {
  0%{
    transform: translateY(40px) translateX(-5px) rotate(0);
    animation-timing-function: ease-out;
  }
  10%{
    transform: translateY(0) translateX(0) rotate(180deg);
    opacity: 1;
    animation-timing-function: ease-out;
  }
  85%{
    transform: translateY(-10px) translateX(0) rotate(200deg);
    opacity: 1;
    animation-timing-function: ease-out;
  }
  100%{
    transform: translateY(-12px) translateX(2px) rotate(180deg);
    opacity: 0;
  }
}
@keyframes star_anime06 {
  0%{
    transform: translateY(40px) translateX(-20px) rotate(0);
    animation-timing-function: ease-out;
  }
  10%{
    transform: translateY(0) translateX(0) rotate(180deg);
    opacity: 1;
    animation-timing-function: ease-out;
  }
  80%{
    opacity: 1;
  }
  100%{
    transform: translateY(-12px) translateX(2px) rotate(180deg);
    opacity: 0;
  }
}

@keyframes star_anime06_2 {
  0%{
    transform: translateY(50px) translateX(-20px) rotate(0);
    animation-timing-function: ease-out;
  }
  10%{
    transform: translateY(0) translateX(0) rotate(180deg);
    opacity: 1;
    animation-timing-function: ease-out;
  }
  80%{
    opacity: 1;
  }
  100%{
    transform: translateY(-12px) translateX(2px) rotate(180deg);
    opacity: 0;
  }
}

@keyframes star_anime07 {
  0%{
    transform: translateY(40px) translateX(-20px) rotate(0);
    animation-timing-function: ease-out;
  }
  10%{
    transform: translateY(0) translateX(0) rotate(180deg);
    opacity: 1;
    animation-timing-function: ease-out;
  }
  80%{
    opacity: 1;
  }
  100%{
    transform: translateY(-12px) translateX(2px) rotate(180deg);
    opacity: 0;
  }
}
@keyframes star_anime08 {
  0%{
    transform: translateY(40px) translateX(-20px) rotate(0);
    animation-timing-function: ease-out;
  }
  10%{
    transform: translateY(0) translateX(0) rotate(180deg);
    opacity: 1;
    animation-timing-function: ease-out;
  }
  85%{
    opacity: 1;
  }
  100%{
    transform: translateY(-12px) translateX(2px) rotate(300deg);
    opacity: 0;
  }
}
@keyframes star_anime09 {
  0%{
    transform: translateY(40px) translateX(-30px) rotate(0);
    animation-timing-function: ease-out;
  }
  10%{
    transform: translateY(0) translateX(0) rotate(180deg);
    opacity: 1;
    animation-timing-function: ease-out;
  }
  85%{
    opacity: 1;
  }
  100%{
    transform: translateY(-12px) translateX(10px) rotate(300deg);
    opacity: 0;
  }
}
@keyframes star_anime10 {
  0%{
    transform: translateY(40px) translateX(-40px) rotate(0);
    animation-timing-function: ease-out;
  }
  10%{
    transform: translateY(0) translateX(0) rotate(180deg);
    opacity: 1;
    animation-timing-function: ease-out;
  }
  70%{
    opacity: 1;
  }
  100%{
    transform: translateY(-12px) translateX(20px) rotate(300deg);
    opacity: 0;
  }
}

@keyframes star_anime10_2 {
  0%{
    transform: translateY(30px) translateX(-40px) rotate(0);
    animation-timing-function: ease-out;
  }
  10%{
    transform: translateY(0) translateX(0) rotate(180deg);
    opacity: 1;
    animation-timing-function: ease-out;
  }
  70%{
    opacity: 1;
  }
  100%{
    transform: translateY(-12px) translateX(20px) rotate(300deg);
    opacity: 0;
  }
}

.pokemon_anime_logo{
  width: 31.25%;
  margin-left: auto;
  padding: 2% 1% 2% 0;
}

.logo{
  width: 87.5%;
  margin: 0 auto;
  position: relative;
  z-index: 5;
}

.main_terapagosu_box{
  position: relative;
  width: 91.66666667%;
  margin: 0 auto;
}

.main_terapagosu_img{
  width: 100%;
  margin: 0 auto;
  position: relative;
  z-index: 3;
}

.main_terapagosu_black{
  position: absolute;
  top: -14%;
  z-index: 1;
  width: 100%;
}

.main_shine{
  position: absolute;
  width: 70%;
  z-index: 2;
  top: -8%;
  left: 5%;
  animation: main_shine2 5s ease infinite;
}

@keyframes main_shine2{
  0%{
    opacity: 0;
    transform: translateY(100px);
  }
  15%{
    opacity: 1;
    transform: translateY(0);
  }
  70%{
    opacity: 1;
    transform: translateY(0);
  }
  95%{
    opacity: 0;
    transform: translateY(10px);
  }
  100%{
    opacity: 0;
    transform: translateY(10px);
  }
}

.main_terapagosu_img_on{
  width: 100%;
  margin: 0 auto;
  position: absolute;
  z-index: 4;
  top: 0;
  left: 0;
  animation: main_shine 5s ease infinite;
}

@keyframes main_shine{
  0%{
    opacity: 0;
  }
  10%{
    opacity: 1;
  }
  90%{
    opacity: 1;
  }
  100%{
    opacity: 0;
  }
}

.main_terapagosu_img_on2{
  width: 100%;
  margin: 0 auto;
  position: absolute;
  z-index: 4;
  top: 0;
  left: 0;
  animation: main_shine2 5s ease infinite;
}

@keyframes main_shine2{
  0%{
    opacity: 0;
  }
  15%{
    opacity: 1;
  }
  85%{
    opacity: 1;
  }
  100%{
    opacity: 0;
  }
}

.main_bottom_area{
  position: relative;
  z-index: 3;
  margin-top: -23%;
}

.main_bottom_flex{
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}

.main_img_left_bottom{
  width: 48.95833333%;
}

.main_riko{
  width: 30.95833333%;
}

.main_catchcopy{
  width: 80.20833333%;
  position: absolute;
  bottom: 5%;
  left: 20%;
}

.main_information{
  width: 75.625%;
  position: absolute;
  bottom: 2%;
  left: 15%;
}
/*------------------------*/

/* area_01ここから */
.area_01{
  position: relative;
}
.area_01_top_flex{
  display: flex;
  justify-content: space-between;
  margin: 5% 1% 0;
}

.terapagosu_mini{
  width: 25.91666667%;
}

.call_text{
  width: 68.5%;
  opacity: 0;
}

.animate_call_text{
  animation: slidein_left 0.3s ease forwards;
  transform-origin: left bottom;
}
@keyframes slidein_left {
  0%{
    transform: translateY(-5px) translateX(-10px) rotate(-10deg);
    opacity: 0;
  }
  100%{
    transform: translateX(0);
    opacity: 1;
  }
}

.terapagosu_call_img{
  width: 77.08333333%;
  margin: -30% auto 0;
}

.call_text_01{
  width: 22.60416667%;
  position: absolute;
  top: 27%;
  left: 1%;
}

.area_01_middle_flex{
  display: flex;
  margin-left: 12%;
  width: 84.0625%;
  position: relative;
  z-index: 2;
}

.stroke_text{
  width: 52.41635688%;
  opacity: 0;
}

.animate_stroke_text{
  animation: slidein_right 0.3s ease forwards;
  transform-origin: left bottom;
}

@keyframes slidein_right {
  0%{
    transform: translateY(10px) translateX(-20px) rotate(-5deg);
    opacity: 0;
  }
  100%{
    transform: translateX(0);
    opacity: 1;
  }
}
.stroke_arrow{
  width: 18.6133829%;
  margin: 0 1%;
  opacity: 0;
}

.animate_stroke_arrow{
  animation: stroke_arrow_anime 0.3s ease forwards;
  transform-origin: top center;
}

@keyframes stroke_arrow_anime {
  0%{
    transform: rotate(-40deg);
    opacity: 0;
  }
  60%{
    transform: rotate(10deg);
  }
  100%{
    transform: translateX(0);
    opacity: 1;
  }
}

.stroke_terapagosu_img{
  width: 22.80049566%;
}

.circle_img_box{
  position: relative;
}

.stroke_circle_img{
  width: 91.66666667%;
  margin: -10% auto 0;
  position: relative;
  z-index: 1;
}

.stroke_circle_img_terapagosu{
  width: 91.66666667%;
  position: absolute;
  top: 0;
  left: 4%;
  z-index: 4;
}


.circle_stars{
  position: absolute;
  z-index: 3;
}

.circle_star01{
  width: 10%;
  top: 28%;
  left: 30%;
  opacity: 0;
}
.animate_circle_star01{
  animation: star_anime01 5s ease infinite;
  animation-delay: 1s;
}

.circle_star02{
  width: 10%;
  top: 28%;
  left: 38%;
  opacity: 0;
}
.animate_circle_star02{
  animation: star_anime02 5s ease infinite;
  animation-delay: 1s;
}

.circle_star03{
  width: 14%;
  top: 24%;
  left: 50%;
  opacity: 0;
}
.animate_circle_star03{
  animation: star_anime03 5s ease infinite;
  animation-delay: 1s;
}

.circle_star04{
  width: 12%;
  top: 18%;
  left: 43%;
  opacity: 0;
}
.animate_circle_star04{
  animation: star_anime04 5s ease infinite;
  animation-delay: 1.3s;
}

.circle_star05{
  width: 11%;
  top: 16%;
  left: 57%;
  opacity: 0;
}
.animate_circle_star05{
  animation: star_anime05 5s ease infinite;
  animation-delay: 1.3s;
}

.circle_star06{
  width: 10%;
  top: 28%;
  left: 60%;
  opacity: 0;
}
.animate_circle_star06{
  animation: star_anime06 5s ease infinite;
  animation-delay: 1s;
}

.circle_star07{
  width: 15%;
  top: 31%;
  left: 66%;
  opacity: 0;
}
.animate_circle_star07{
  animation: star_anime07 5s ease infinite;
  animation-delay: 1s;
}

@keyframes star_anime01 {
  0%{
    transform: translateY(25px) translateX(15px) rotate(0);
    animation-timing-function: ease-out;
  }
  10%{
    transform: translateY(0) translateX(0) rotate(-180deg);
    opacity: 1;
    animation-timing-function: ease-out;
  }
  80%{
    opacity: 1;
  }
  100%{
    transform: translateY(-22px) translateX(-10px) rotate(-300deg);
    opacity: 0;
    animation-timing-function: ease-in;
  }
}
@keyframes star_anime02 {
  0%{
    transform: translateY(40px) translateX(5px) rotate(0);
    animation-timing-function: ease-out;
  }
  10%{
    transform: translateY(0) translateX(0) rotate(180deg);
    opacity: 1;
    animation-timing-function: ease-out;
  }
  80%{
    opacity: 1;
  }
  100%{
    transform: translateY(-12px) translateX(-2px) rotate(300deg);
    opacity: 0;
  }
}
@keyframes star_anime03 {
  0%{
    transform: translateY(25px) translateX(5px) rotate(0);
    animation-timing-function: ease-out;
  }
  10%{
    transform: translateY(0) translateX(0) rotate(-180deg);
    animation-timing-function: ease-out;
    opacity: 1;
  }
  80%{
    opacity: 1;
  }
  100%{
    transform: translateY(-20px) translateX(-2px) rotate(-300deg);
    opacity: 0;
  }
}
@keyframes star_anime04 {
  0%{
    transform: translateY(25px) translateX(5px) rotate(0);
    animation-timing-function: ease-out;
  }
  10%{
    transform: translateY(0) translateX(0) rotate(-180deg);
    animation-timing-function: ease-out;
    opacity: 1;
  }
  70%{
    opacity: 1;
  }
  100%{
    transform: translateY(-12px) translateX(-2px) rotate(-300deg);
    opacity: 0;
  }
}
@keyframes star_anime05 {
  0%{
    transform: translateY(40px) translateX(-5px) rotate(0);
    animation-timing-function: ease-out;
  }
  10%{
    transform: translateY(0) translateX(0) rotate(180deg);
    opacity: 1;
    animation-timing-function: ease-out;
  }
  85%{
    transform: translateY(-10px) translateX(0) rotate(200deg);
    opacity: 1;
    animation-timing-function: ease-out;
  }
  100%{
    transform: translateY(-12px) translateX(2px) rotate(180deg);
    opacity: 0;
  }
}
@keyframes star_anime06 {
  0%{
    transform: translateY(40px) translateX(-20px) rotate(0);
    animation-timing-function: ease-out;
  }
  10%{
    transform: translateY(0) translateX(0) rotate(180deg);
    opacity: 1;
    animation-timing-function: ease-out;
  }
  80%{
    opacity: 1;
  }
  100%{
    transform: translateY(-12px) translateX(2px) rotate(180deg);
    opacity: 0;
  }
}
@keyframes star_anime07 {
  0%{
    transform: translateY(40px) translateX(-25px) rotate(0);
    animation-timing-function: ease-out;
  }
  10%{
    transform: translateY(0) translateX(0) rotate(180deg);
    opacity: 1;
    animation-timing-function: ease-out;
  }
  80%{
    opacity: 1;
  }
  100%{
    transform: translateY(-12px) translateX(2px) rotate(180deg);
    opacity: 0;
  }
}


.stroke_text_02{
  position: absolute;
  width: 23.75%;
  bottom: 30%;
  left: 1%;
  z-index: 2;
}
.stroke_text_03{
  position: absolute;
  width: 35.72916667%;
  bottom: 1%;
  right: 1%;
  z-index: 2;
}
.stroke_information{
  position: absolute;
  width: 22.91666667%;
  bottom: 0;
  right: 3%;
  z-index: 2;
}
/*------------------------*/
/* area_02ここから */
.area_02{
  position: relative;
  width: 100%;
}
.call_shine_text{
  position: absolute;
  width: 34.6875%;
  top: 15%;
  left: 14%;
}
.call_shine_text_02{
  position: absolute;
  width: 25.10416667%;
  top: 15%;
  right: 10%;
}

.call_shine_terapagosu{
  position: absolute;
  width: 55.52083333%;
  top: 18%;
  right: 8%;
  z-index: 4;
}

.area2_stars{
  position: absolute;
  z-index: 3;
}

.area2_star01{
  width: 5%;
  top: 27%;
  left: 56%;
  opacity: 0;
}
.animate_area2_star01{
  animation: star_anime01 5s ease infinite;
  animation-delay: 1.3s;
}

.area2_star02{
  width: 5%;
  top: 24%;
  left: 62%;
  opacity: 0;
}
.animate_area2_star02{
  animation: star_anime02 5s ease infinite;
  animation-delay: 1.5s;
}

.area2_star03{
  width: 5%;
  top: 28%;
  left: 60%;
  opacity: 0;
}
.animate_area2_star03{
  animation: star_anime03 5s ease infinite;
  animation-delay: 1.3s;
}

.area2_star04{
  width: 5%;
  top: 27%;
  left: 65%;
  opacity: 0;
}
.animate_area2_star04{
  animation: star_anime04 5s ease infinite;
  animation-delay: 1.3s;
}

.area2_star05{
  width: 6%;
  top: 26%;
  left: 75%;
  opacity: 0;
}
.animate_area2_star05{
  animation: star_anime05 5s ease infinite;
  animation-delay: 1.3s;
}

.area2_star06{
  width: 6%;
  top: 27%;
  left: 69%;
  opacity: 0;
}
.animate_area2_star06{
  animation: star_anime06 5s ease infinite;
  animation-delay: 1.3s;
}

.area2_star07{
  width: 6%;
  top: 30%;
  left: 78%;
  opacity: 0;
}
.animate_area2_star07{
  animation: star_anime07 5s ease infinite;
  animation-delay: 1.3s;
}

/* .area2_star08{
  width: 5%;
  top: 34%;
  left: 58%;
  animation: star_anime08 5s ease infinite;
  animation-delay: 0.1s;
}
.area2_star09{
  width: 5%;
  top: 30%;
  left: 61%;
  animation: star_anime09 5s ease infinite;
  animation-delay: 0.1s;
}
.area2_star10{
  width: 5%;
  top: 36%;
  left: 65%;
  animation: star_anime10 5s ease infinite;
  animation-delay: 0.1s;
} */

@keyframes star_anime01 {
  0%{
    transform: translateY(25px) translateX(15px) rotate(0);
    animation-timing-function: ease-out;
  }
  10%{
    transform: translateY(0) translateX(0) rotate(-180deg);
    opacity: 1;
    animation-timing-function: ease-out;
  }
  80%{
    opacity: 1;
  }
  100%{
    transform: translateY(-22px) translateX(-10px) rotate(-300deg);
    opacity: 0;
    animation-timing-function: ease-in;
  }
}
@keyframes star_anime02 {
  0%{
    transform: translateY(40px) translateX(5px) rotate(0);
    animation-timing-function: ease-out;
  }
  10%{
    transform: translateY(0) translateX(0) rotate(180deg);
    opacity: 1;
    animation-timing-function: ease-out;
  }
  80%{
    opacity: 1;
  }
  100%{
    transform: translateY(-12px) translateX(-2px) rotate(300deg);
    opacity: 0;
  }
}
@keyframes star_anime03 {
  0%{
    transform: translateY(25px) translateX(5px) rotate(0);
    animation-timing-function: ease-out;
  }
  10%{
    transform: translateY(0) translateX(0) rotate(-180deg);
    animation-timing-function: ease-out;
    opacity: 1;
  }
  80%{
    opacity: 1;
  }
  100%{
    transform: translateY(-20px) translateX(-2px) rotate(-300deg);
    opacity: 0;
  }
}
@keyframes star_anime04 {
  0%{
    transform: translateY(25px) translateX(5px) rotate(0);
    animation-timing-function: ease-out;
  }
  10%{
    transform: translateY(0) translateX(0) rotate(-180deg);
    animation-timing-function: ease-out;
    opacity: 1;
  }
  70%{
    opacity: 1;
  }
  100%{
    transform: translateY(-12px) translateX(-2px) rotate(-300deg);
    opacity: 0;
  }
}
@keyframes star_anime05 {
  0%{
    transform: translateY(40px) translateX(-5px) rotate(0);
    animation-timing-function: ease-out;
  }
  10%{
    transform: translateY(0) translateX(0) rotate(180deg);
    opacity: 1;
    animation-timing-function: ease-out;
  }
  85%{
    transform: translateY(-10px) translateX(0) rotate(200deg);
    opacity: 1;
    animation-timing-function: ease-out;
  }
  100%{
    transform: translateY(-12px) translateX(2px) rotate(180deg);
    opacity: 0;
  }
}
@keyframes star_anime06 {
  0%{
    transform: translateY(40px) translateX(-20px) rotate(0);
    animation-timing-function: ease-out;
  }
  10%{
    transform: translateY(0) translateX(0) rotate(180deg);
    opacity: 1;
    animation-timing-function: ease-out;
  }
  80%{
    opacity: 1;
  }
  100%{
    transform: translateY(-12px) translateX(2px) rotate(180deg);
    opacity: 0;
  }
}
@keyframes star_anime07 {
  0%{
    transform: translateY(40px) translateX(-20px) rotate(0);
    animation-timing-function: ease-out;
  }
  10%{
    transform: translateY(0) translateX(0) rotate(180deg);
    opacity: 1;
    animation-timing-function: ease-out;
  }
  80%{
    opacity: 1;
  }
  100%{
    transform: translateY(-12px) translateX(2px) rotate(180deg);
    opacity: 0;
  }
}
/* @keyframes star_anime08 {
  0%{
    transform: translateY(40px) translateX(-20px) rotate(0);
    animation-timing-function: ease-out;
  }
  10%{
    transform: translateY(0) translateX(0) rotate(180deg);
    opacity: 1;
    animation-timing-function: ease-out;
  }
  85%{
    opacity: 1;
  }
  100%{
    transform: translateY(-12px) translateX(2px) rotate(300deg);
    opacity: 0;
  }
}
@keyframes star_anime09 {
  0%{
    transform: translateY(40px) translateX(-30px) rotate(0);
    animation-timing-function: ease-out;
  }
  10%{
    transform: translateY(0) translateX(0) rotate(180deg);
    opacity: 1;
    animation-timing-function: ease-out;
  }
  85%{
    opacity: 1;
  }
  100%{
    transform: translateY(-12px) translateX(10px) rotate(300deg);
    opacity: 0;
  }
}
@keyframes star_anime10 {
  0%{
    transform: translateY(40px) translateX(-40px) rotate(0);
    animation-timing-function: ease-out;
  }
  10%{
    transform: translateY(0) translateX(0) rotate(180deg);
    opacity: 1;
    animation-timing-function: ease-out;
  }
  70%{
    opacity: 1;
  }
  100%{
    transform: translateY(-12px) translateX(20px) rotate(300deg);
    opacity: 0;
  }
} */
/*------------------------*/
/* area_03ここから */
.area_03{
  position: relative;
  width: 100%;
}

.stroke_shine_terapagosu{
  position: absolute;
  width: 80.52083333%;
  top: 14%;
  left: 8.2%;
  z-index: 4;
}

.stroke_shine_text{
  position: absolute;
  width: 26.875%;
  top: 45%;
  right: 8%;
}

.area3_stars{
  position: absolute;
  z-index: 3;
}

.area3_star01{
  width: 10%;
  top: 23%;
  left: 41%;
  opacity: 0;
}
.animate_area3_star01{
  animation: star_anime01 5s ease infinite;
  animation-delay: 1s;
}

.area3_star02{
  width: 5%;
  top: 22%;
  left: 49%;
  opacity: 0;
}
.animate_area3_star02{
  animation: star_anime02 5s ease infinite;
  animation-delay: 1s;
}

.area3_star03{
  width: 5%;
  top: 27%;
  left: 48%;
  opacity: 0;
}
.animate_area3_star03{
  animation: star_anime03 5s ease infinite;
  animation-delay: 1s;
}

.area3_star04{
  width: 5%;
  top: 24%;
  left: 52%;
  opacity: 0;
}
.animate_area3_star04{
  animation: star_anime04 5s ease infinite;
  animation-delay: 1s;
}

.area3_star05{
  width: 13%;
  top: 25%;
  left: 49%;
  opacity: 0;
}
.animate_area3_star05{
  animation: star_anime05 5s ease infinite;
  animation-delay: 1s;
}

.area3_star06{
  width: 6%;
  top: 20%;
  left: 54%;
  opacity: 0;
}
.animate_area3_star06{
  animation: star_anime06 5s ease infinite;
  animation-delay: 1.1s;
}

.area3_star07{
  width: 6%;
  top: 28%;
  left: 59%;
  opacity: 0;
}
.animate_area3_star07{
  animation: star_anime07 5s ease infinite;
  animation-delay: 1s;
}

.area3_star08{
  width: 10%;
  top: 24%;
  left: 56%;
  opacity: 0;
}
.animate_area3_star08{
  animation: star_anime08 5s ease infinite;
  animation-delay: 1s;
}

.area3_star09{
  width: 6%;
  top: 21%;
  left: 59%;
  opacity: 0;
}
.animate_area3_star09{
  animation: star_anime09 5s ease infinite;
  animation-delay: 1s;
}

.area3_star10{
  width: 6%;
  top: 29%;
  left: 62%;
  opacity: 0;
}
.animate_area3_star10{
  animation: star_anime10 5s ease infinite;
  animation-delay: 1s;
}

.area3_star11{
  width: 6%;
  top: 25%;
  left: 65%;
  opacity: 0;
}
.animate_area3_star11{
  animation: star_anime11 5s ease infinite;
  animation-delay: 1s;
}

@keyframes star_anime01 {
  0%{
    transform: translateY(25px) translateX(15px) rotate(0);
    animation-timing-function: ease-out;
  }
  10%{
    transform: translateY(0) translateX(0) rotate(-180deg);
    opacity: 1;
    animation-timing-function: ease-out;
  }
  80%{
    opacity: 1;
  }
  100%{
    transform: translateY(-22px) translateX(-10px) rotate(-300deg);
    opacity: 0;
    animation-timing-function: ease-in;
  }
}
@keyframes star_anime02 {
  0%{
    transform: translateY(40px) translateX(5px) rotate(0);
    animation-timing-function: ease-out;
  }
  10%{
    transform: translateY(0) translateX(0) rotate(180deg);
    opacity: 1;
    animation-timing-function: ease-out;
  }
  80%{
    opacity: 1;
  }
  100%{
    transform: translateY(-12px) translateX(-2px) rotate(300deg);
    opacity: 0;
  }
}
@keyframes star_anime03 {
  0%{
    transform: translateY(25px) translateX(5px) rotate(0);
    animation-timing-function: ease-out;
  }
  10%{
    transform: translateY(0) translateX(0) rotate(-180deg);
    animation-timing-function: ease-out;
    opacity: 1;
  }
  80%{
    opacity: 1;
  }
  100%{
    transform: translateY(-20px) translateX(-2px) rotate(-300deg);
    opacity: 0;
  }
}
@keyframes star_anime04 {
  0%{
    transform: translateY(25px) translateX(5px) rotate(0);
    animation-timing-function: ease-out;
  }
  10%{
    transform: translateY(0) translateX(0) rotate(-180deg);
    animation-timing-function: ease-out;
    opacity: 1;
  }
  70%{
    opacity: 1;
  }
  100%{
    transform: translateY(-12px) translateX(-2px) rotate(-300deg);
    opacity: 0;
  }
}
@keyframes star_anime05 {
  0%{
    transform: translateY(40px) translateX(-5px) rotate(0);
    animation-timing-function: ease-out;
  }
  10%{
    transform: translateY(0) translateX(0) rotate(180deg);
    opacity: 1;
    animation-timing-function: ease-out;
  }
  85%{
    transform: translateY(-10px) translateX(0) rotate(200deg);
    opacity: 1;
    animation-timing-function: ease-out;
  }
  100%{
    transform: translateY(-12px) translateX(2px) rotate(180deg);
    opacity: 0;
  }
}
@keyframes star_anime06 {
  0%{
    transform: translateY(40px) translateX(-20px) rotate(0);
    animation-timing-function: ease-out;
  }
  10%{
    transform: translateY(0) translateX(0) rotate(180deg);
    opacity: 1;
    animation-timing-function: ease-out;
  }
  80%{
    opacity: 1;
  }
  100%{
    transform: translateY(-12px) translateX(2px) rotate(180deg);
    opacity: 0;
  }
}
@keyframes star_anime07 {
  0%{
    transform: translateY(40px) translateX(-20px) rotate(0);
    animation-timing-function: ease-out;
  }
  10%{
    transform: translateY(0) translateX(0) rotate(180deg);
    opacity: 1;
    animation-timing-function: ease-out;
  }
  80%{
    opacity: 1;
  }
  100%{
    transform: translateY(-12px) translateX(2px) rotate(180deg);
    opacity: 0;
  }
}

@keyframes star_anime11 {
  0%{
    transform: translateY(40px) translateX(-20px) rotate(0);
    animation-timing-function: ease-out;
  }
  10%{
    transform: translateY(0) translateX(0) rotate(180deg);
    opacity: 1;
    animation-timing-function: ease-out;
  }
  80%{
    opacity: 1;
  }
  100%{
    transform: translateY(-12px) translateX(2px) rotate(180deg);
    opacity: 0;
  }
}
/*------------------------*/
/* area_04ここから */
.area_04{
  position: relative;
  width: 100%;
}
.talk_text{
  position: absolute;
  width: 33.95833333%;
  top: 17%;
  left: 6%;
}

.talk_terapagosu{
  position: absolute;
  width: 54.27083333%;
  top: 19%;
  right: 8%;
  z-index: 4;
}
.talk_text_02{
  position: absolute;
  width: 26.45833333%;
  top: 49%;
  left: 15%;
}

.area4_stars{
  position: absolute;
  z-index: 3;
}

.area4_star01{
  width: 5%;
  top: 23%;
  left: 54%;
  opacity: 0;
}
.animate_area4_star01{
  animation: star_anime01 5s ease infinite;
  animation-delay: 1.3s;
}

.area4_star02{
  width: 5%;
  top: 22%;
  left: 58%;
  opacity: 0;
}
.animate_area4_star02{
  animation: star_anime02 5s ease infinite;
  animation-delay: 1.3s;
}

.area4_star03{
  width: 5%;
  top: 27%;
  left: 56%;
  opacity: 0;
}
.animate_area4_star03{
  animation: star_anime03 5s ease infinite;
  animation-delay: 1.3s;
}

.area4_star04{
  width: 5%;
  top: 24%;
  left: 62%;
  opacity: 0;
}
.animate_area4_star04{
  animation: star_anime04 5s ease infinite;
  animation-delay: 1.3s;
}

.area4_star05{
  width: 6%;
  top: 26%;
  left: 73%;
  opacity: 0;
}
.animate_area4_star05{
  animation: star_anime05 5s ease infinite;
  animation-delay: 1.3s;
}

.area4_star06{
  width: 10%;
  top: 24%;
  left: 65%;
  opacity: 0;
}
.animate_area4_star06{
  animation: star_anime06 5s ease infinite;
  animation-delay: 1.3s;
}

.area4_star07{
  width: 10%;
  top: 21%;
  left: 76%;
  opacity: 0;
}
.animate_area4_star07{
  animation: star_anime07 5s ease infinite;
  animation-delay: 1.3s;
}

@keyframes star_anime01 {
  0%{
    transform: translateY(25px) translateX(15px) rotate(0);
    animation-timing-function: ease-out;
  }
  10%{
    transform: translateY(0) translateX(0) rotate(-180deg);
    opacity: 1;
    animation-timing-function: ease-out;
  }
  80%{
    opacity: 1;
  }
  100%{
    transform: translateY(-22px) translateX(-10px) rotate(-300deg);
    opacity: 0;
    animation-timing-function: ease-in;
  }
}
@keyframes star_anime02 {
  0%{
    transform: translateY(40px) translateX(5px) rotate(0);
    animation-timing-function: ease-out;
  }
  10%{
    transform: translateY(0) translateX(0) rotate(180deg);
    opacity: 1;
    animation-timing-function: ease-out;
  }
  80%{
    opacity: 1;
  }
  100%{
    transform: translateY(-12px) translateX(-2px) rotate(300deg);
    opacity: 0;
  }
}
@keyframes star_anime03 {
  0%{
    transform: translateY(10px) translateX(5px) rotate(0);
    animation-timing-function: ease-out;
  }
  10%{
    transform: translateY(0) translateX(0) rotate(-180deg);
    animation-timing-function: ease-out;
    opacity: 1;
  }
  80%{
    opacity: 1;
  }
  100%{
    transform: translateY(-20px) translateX(-2px) rotate(-300deg);
    opacity: 0;
  }
}
@keyframes star_anime04 {
  0%{
    transform: translateY(25px) translateX(5px) rotate(0);
    animation-timing-function: ease-out;
  }
  10%{
    transform: translateY(0) translateX(0) rotate(-180deg);
    animation-timing-function: ease-out;
    opacity: 1;
  }
  70%{
    opacity: 1;
  }
  100%{
    transform: translateY(-12px) translateX(-2px) rotate(-300deg);
    opacity: 0;
  }
}
@keyframes star_anime05 {
  0%{
    transform: translateY(40px) translateX(-5px) rotate(0);
    animation-timing-function: ease-out;
  }
  10%{
    transform: translateY(0) translateX(0) rotate(180deg);
    opacity: 1;
    animation-timing-function: ease-out;
  }
  85%{
    transform: translateY(-10px) translateX(0) rotate(200deg);
    opacity: 1;
    animation-timing-function: ease-out;
  }
  100%{
    transform: translateY(-12px) translateX(2px) rotate(180deg);
    opacity: 0;
  }
}
@keyframes star_anime06 {
  0%{
    transform: translateY(40px) translateX(-20px) rotate(0);
    animation-timing-function: ease-out;
  }
  10%{
    transform: translateY(0) translateX(0) rotate(180deg);
    opacity: 1;
    animation-timing-function: ease-out;
  }
  80%{
    opacity: 1;
  }
  100%{
    transform: translateY(-12px) translateX(2px) rotate(180deg);
    opacity: 0;
  }
}
@keyframes star_anime07 {
  0%{
    transform: translateY(40px) translateX(-20px) rotate(0);
    animation-timing-function: ease-out;
  }
  10%{
    transform: translateY(0) translateX(0) rotate(180deg);
    opacity: 1;
    animation-timing-function: ease-out;
  }
  80%{
    opacity: 1;
  }
  100%{
    transform: translateY(-12px) translateX(2px) rotate(180deg);
    opacity: 0;
  }
}
/*------------------------*/
.information_text{
  width: 62.5%;
  margin: 0 auto;
}

.reservation_flex{
  display: flex;
  align-items: center;
  margin-left: 1%;
}

.reservation_img{
  width: 25%;
}


.scale_up{
  opacity: 0;
 }
 
 .animate_scale_up{
  animation: scale_up 0.3s forwards;
 }
 
 @keyframes scale_up {
     0% {
         transform: scale(0);
         opacity: 0;
     }
     100% {
         transform: scale(1);
         opacity: 1;
     }
 }

 .scale_up_delay{
  opacity: 0;
 }
 
 .animate_scale_up_delay{
  animation: scale_up_delay 0.3s forwards;
  animation-delay: 0.2s;
 }
 
 @keyframes scale_up_delay {
     0% {
         transform: scale(0);
         opacity: 0;
     }
     100% {
         transform: scale(1);
         opacity: 1;
     }
 }

 .scale_up_right{
  opacity: 0;
  transform-origin: right top;
 }
 
 .animate_scale_up_right{
  animation: scale_up_right 0.3s forwards;
 }
 
 @keyframes scale_up_right {
     0% {
         transform: scale(0);
         opacity: 0;
     }
     100% {
         transform: scale(1);
         opacity: 1;
     }
 }

 .scale_up_right_delay{
  opacity: 0;
  transform-origin: right top;
 }
 
 .animate_scale_up_right_delay{
  animation: scale_up_right_delay 0.3s forwards;
  animation-delay: 0.4s;
 }
 
 @keyframes scale_up_right_delay {
     0% {
         transform: scale(0);
         opacity: 0;
     }
     100% {
         transform: scale(1);
         opacity: 1;
     }
 }

 .scale_up_right_delay2{
  opacity: 0;
  transform-origin: right top;
 }
 
 .animate_scale_up_right_delay2{
  animation: scale_up_right_delay2 0.3s forwards;
  animation-delay: 1s;
 }
 
 @keyframes scale_up_right_delay2 {
     0% {
         transform: scale(0);
         opacity: 0;
     }
     100% {
         transform: scale(1);
         opacity: 1;
     }
 }

 .scale_up_top_delay{
  opacity: 0;
  transform-origin: top center;
 }
 
 .animate_scale_up_top_delay{
  animation: scale_up_top_delay 0.3s forwards;
  animation-delay: 0.4s;
 }
 
 @keyframes scale_up_top_delay {
     0% {
         transform: scale(0);
         opacity: 0;
     }
     100% {
         transform: scale(1);
         opacity: 1;
     }
 }

 .circle_in{
  opacity: 0;
}

.animate_circle_in{
   animation: circle_in 0.4s forwards ease-out;
}

@keyframes circle_in {
   0% {
     -webkit-clip-path: circle(0 at 50% 50%);
     clip-path: circle(0 at 50% 50%);
     opacity: 1;
   }

   100% {
     -webkit-clip-path: circle(100% at 50% 50%);
     clip-path: circle(100% at 50% 50%);
     opacity: 1;
   }
 }

 .fade_in{
  opacity: 0;
 }

 .animate_fade_in{
  animation: fade_in 0.5s forwards ease-out;
}

@keyframes fade_in {
  0% {
   opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

.text_slidein_left{
  opacity: 0;
}

.animate_text_slidein_left{
  animation: text_slidein_left 0.3s ease forwards;
  animation-delay: 0.8s;
}
@keyframes text_slidein_left {
  0%{
    transform: translateX(-30px);
    opacity: 0;
  }
  100%{
    transform: translateX(0);
    opacity: 1;
  }
}

.scale_up_bottom_delay{
  opacity: 0;
  transform-origin: bottom;
 }
 
 .animate_scale_up_bottom_delay{
  animation: scale_up_bottom_delay 0.3s forwards;
  animation-delay: 1.4s;
 }
 
 @keyframes scale_up_bottom_delay {
     0% {
         transform: scale(0);
         opacity: 0;
     }
     100% {
         transform: scale(1);
         opacity: 1;
     }
 }

.area_slidein_left{
  opacity: 0;
}

.animate_area_slidein_left{
  animation: area_slidein_left 0.2s ease forwards;
}
@keyframes area_slidein_left {
  0%{
    transform: translateX(-30px);
    opacity: 0;
  }
  100%{
    transform: translateX(0);
    opacity: 1;
  }
}

.area_slidein_right{
  opacity: 0;
}

.animate_area_slidein_right{
  animation: area_slidein_right 0.2s ease forwards;
}
@keyframes area_slidein_right {
  0%{
    transform: translateX(30px);
    opacity: 0;
  }
  100%{
    transform: translateX(0);
    opacity: 1;
  }
}

.text_slidein_left_delay{
  opacity: 0;
}

.animate_text_slidein_left_delay{
  animation: text_slidein_left_delay 0.2s ease forwards;
  animation-delay: 0.8s;
}
@keyframes text_slidein_left_delay {
  0%{
    transform: translateX(-30px);
    opacity: 0;
  }
  100%{
    transform: translateX(0);
    opacity: 1;
  }
}

.text_slidein_right_delay{
  opacity: 0;
}

.animate_text_slidein_right_delay{
  animation: text_slidein_right_delay 0.2s ease forwards;
}
@keyframes text_slidein_right_delay {
  0%{
    transform: translateX(30px);
    opacity: 0;
  }
  100%{
    transform: translateX(0);
    opacity: 1;
  }
}