@charset "UTF-8";
@font-face {
  font-family:'NotoSansJP-Regular';
  src: url("../fonts/NotoSansJP-Regular.ttf") format("truetype");
}
html{
  font-size: 100%;
}
body{
  font-family:'NotoSansJP-Regular','NotoSansJP-Bold',"ヒラギノ角ゴ ProN W3";
}
main{
  position: relative;
}
a{
  text-decoration: none;
}
.wrapper{
  position: relative;
  text-align: center;
  width: 100vw;
}
.allContainer{
  position: relative;
  width: 100vw;
  z-index: -30;
}
.backAll{
  width: 100vw;
}
.topContainer{
  position: absolute;
  width: 100vw;
  height: 100%;
  top: 0;
  left: 0;
}
.topInfo{
  position: absolute;
  top: 13vw;
  right: calc(100vw - 82vw);
  z-index: 5;
  width: 65vw;
}

.topcharaLeft{
  position: absolute;
  top: 6vw;
  right: calc(100vw - 38vw);
  width: 16vw;
  z-index: 4;
  animation: popup .5s linear infinite alternate;
}
.topcharaRight{
  position: absolute;
  top: 3vw;
  right: calc(100vw - 78vw);
  width: 10vw;
  z-index: 4;
  animation: character .5s linear infinite alternate;
}
.topcharaLeft_2{
  position: absolute;
  top: 35vw;
  right: calc(100vw - 22vw);
  width: 10vw;
  z-index: 10;
  animation: character .5s linear infinite alternate;
}
.topcharaRight_2{
  position: absolute;
  top: 41vw;
  right: calc(100vw - 84vw);
  width: 10vw;
  z-index: 10;
  animation: popup .5s linear infinite alternate;
}
.lineButton{
  position: absolute;
  top: 73vw;
  right: calc(100vw - 72vw);
  z-index: 5;
  width: 45vw;
}
.snsLogo{
  position: absolute;
  top: 76vw;
  right: calc(100vw - 83vw);
  z-index: 5 ;
}
.instaLogo{
  width: 6vw;
}
.backAllSp{
  display: none;
}
.lineButton{
  animation: sway 2s linear infinite;
}
.lineButton:hover {
  animation: none;
}


.zone4{
  position: absolute;
  top: 87vw;
  right: calc(100vw - 82vw);
  z-index: 5;
  width: 60vw;
}
.sdgspop{
  position: absolute;
  top: 94vw;
  right: calc(100vw - 33vw);
  z-index: 5;
  width: 18vw;
  animation: popup .5s linear infinite alternate;
}
.sdgschara{
  position: absolute;
  top: 97vw;
  right: calc(100vw - 48vw);
  z-index: 5;
  width: 18vw;
  animation: popup .5s linear infinite alternate;
}
.mcTalent{
  position: absolute;
  top: 121.8vw;
  right: calc(100vw - 31vw);
  z-index: 5;
  width: 14vw;
}
.mcName{
  position: absolute;
  top: 133vw;
  right: calc(100vw - 40vw);
  z-index: 5;
  width: 13vw;
}
.esports{
  position: absolute;
  top: 137vw;
  right: calc(100vw - 54vw);
  z-index: 5;
  width: 40vw;
}

.reservationButton{
  display: inline-block;
  width: 28%;
  height: auto;
  padding: 0.5% 2%;
  position: absolute;
  top: 156vw;
  right: 34%;
  z-index: 11;
  background-color: #EFA43B;
  border-radius: 10px;
  border: 2px solid #fff;
  color: #FFF;
  font-size: 2.3vw;
  font-weight: bolder;
  letter-spacing: -0.08em;
  box-shadow: 5px 5px 4px rgba(0,0,0,0.5);
  transition: .3s;
  animation: shake 3s ease infinite;
  text-align: center;
}
.reservationButton:hover {
  box-shadow: 0 0 2px rgba(0,0,0,0.2);
  animation: none;
}
/* ------アニメーション--------- */
@keyframes shake {
  0% { transform:translateX(0) }
  5% { transform:translateX(0) }
  10% { transform:translateX(0) }
  20% { transform:translateX(-10px) }
  25% { transform:translateX(0) }
  30% { transform:translateX(-10px) }
  50% { transform:translateX(0) }
  70% { transform:translateX(-10px) }
  75% { transform:translateX(0) }
  80% { transform:translateX(-10px) }
  100% { transform:translateX(0) }
}
@keyframes sway {
  0% { transform:translateX(0) }
  25% { transform:translateX(10px) }
  50% { transform:translateX(0) }
  75% { transform:translateX(-10px) }
  100% { transform:translateX(0px) }
}
@keyframes popup{
    0%   { transform: rotate(0deg); }
    100% { transform: rotate(-5deg); }
  }
  @keyframes character{
    0%   { transform: rotate(0deg); }
    100% { transform: rotate(5deg); }
  }

.attention {
  font-size: 0.6rem;
  -webkit-transform: scale(0.7);
  transform: scale(0.7);
  position: absolute;
  top: 168.5vw;
  right: calc(100vw - 68vw);
  z-index: 5;
  width: 60vw;
}
.eventpop{
  width: 18vw;
  position: absolute;
  top: 167vw;
  right: calc(100vw - 80vw);
  z-index: 5;
  animation: popup .5s linear infinite alternate;
}
.kitchenCar{
  width: 18vw;
  position: absolute;
  top: 219vw;
  right: calc(100vw - 70vw);
  z-index: 5;
  animation: popup .5s linear infinite alternate;
}
.wakuwakuFamily{
  width: 18vw;
  position: absolute;
  top: 221vw;
  right: calc(100vw - 86vw);
  z-index: 5;
  animation: popup .5s linear infinite alternate;
}
.foodFoto{
  width: 70vw;
  position: absolute;
  top: 231vw;
  right: calc(100vw - 85vw);
  z-index: 5;
}



.dokidokiPop{
  width: 18vw;
  position: absolute;
  top: 253vw;
  right: calc(100vw - 35vw);
  z-index: 5;
  animation: popup .5s linear infinite alternate;
}
.dokidokiHeart{
  width: 8vw;
  position: absolute;
  top: 251vw;
  right: calc(100vw - 47vw);
  z-index: 5;
  animation: character .5s linear infinite alternate;
}
.dokidoKids{
  width: 20vw;
  position: absolute;
  top: 254vw;
  right: calc(100vw - 65vw);
  z-index: 5;
  animation: character .5s linear infinite alternate;
}
.dino{
  width: 25vw;
  position: absolute;
  top: 249vw;
  right: calc(100vw - 93vw);
  z-index: 5;
  animation: character .5s linear infinite alternate;
}
.vrEx{
  width: 25vw;
  position: absolute;
  top: 269vw;
  right: calc(100vw - 82vw);
  z-index: 5;
}
.dokidokiStar{
  width: 8vw;
  position: absolute;
  top: 265vw;
  right: calc(100vw - 55vw);
  z-index: 5;
}



.parkKids{
  width: 25vw;
  position: absolute;
  top: 312vw;
  right: calc(100vw - 42vw);
  z-index: 5;
  animation: character .5s linear infinite alternate;
}
.parkHeart{
  width: 8vw;
  position: absolute;
  top: 310vw;
  right: calc(100vw - 50vw);
  z-index: 5;
  animation: character .5s linear infinite alternate;
}
.parkPop{
  width: 18vw;
  position: absolute;
  top: 312vw;
  right: calc(100vw - 80vw);
  z-index: 5;
  animation: popup .5s linear infinite alternate;
}



.family{
  width: 12vw;
  position: absolute;
  top: 371vw;
  right: calc(100vw - 86vw);
  z-index: 5;
  animation: character .5s linear infinite alternate;
}
.prizeKids{
  width: 8vw;
  position: absolute;
  top: 398vw;
  right: calc(100vw - 87vw);
  z-index: 5;
  animation: character .5s linear infinite alternate;
}
.mapchara{
  width: 10vw;
  position: absolute;
  top: 435vw;
  right: calc(100vw - 82vw);
  z-index: 5;
  animation: character .5s linear infinite alternate;
}

footer{
  width: 80vw;
  position: absolute;
  top: 523vw;
  right: calc(100vw - 96vw);
  z-index: 5;
  color: #036eab;
}

hr{
border: none;
border-bottom: 1.5px solid #036eab;
width: 85%;
margin: 10px 5px 10px 0;
}
.organizer{
  font-weight: 900;
  font-size: 1.6vw;
  margin-left: 5px;
}
.contact{
  background-color: #036eab;
  color: #fff;
  border-radius: 2px;
  padding: 5px 8px;
  font-size:1.5vw;
  margin-right: 10px;
}
.infomation{
 margin-top: 1%;
 font-weight: 900;
 font-size: 1.55vw;
 margin-bottom: 1%;
}
.infomation a{
  color: #036eab;
}
.notoNet{
  font-weight: 900;
  font-size: 1.5vw;
  margin-left: 5px;
}
.notoNet span{
  margin-right: 10px;
  display: inline-block;
  transform: rotate(90deg);
}
.notoNet a{
  color: #036eab;
}
.notoNet a:hover{
  color: #fff;
}
.telNo{
  margin: 0 5px;
  font-size: 1.3vw;
}
.smaller img{
  width: 100%;
}
.indentionSp{
  display: none;
}
@media(min-width: 768px){
  a[href^="tel:"]{
    pointer-events: none;
  }
}


/* --------------------------------------------------------------レスポンシブ -------------------*/

@media screen and (max-width: 665px){

  .backAll{
    display: none;
  }
  .backAllSp{
    display: block;
    width: 100vw;
  }
  .topInfo{
    top: 18vw;
    right: calc(100vw - 93vw);
    width: 85vw;
  }
  .topContainer{
    top: 5vw;
  }
  .topcharaLeft{
    top: 6vw;
    right: calc(100vw - 30vw);
  }
  .topcharaRight{
    top: 3vw;
    right: calc(100vw - 83vw);
  }
  .topcharaLeft_2{
    top: 50vw;
    right: calc(100vw - 17vw);
  }
  .topcharaRight_2{
    top: 57vw;
    right: calc(100vw - 89vw);
  }
  .lineButton{
    top: 95vw;
    right: calc(100vw - 72vw);
  }
  .snsLogo{
    top: 98vw;
    right: calc(100vw - 85vw);
  }
  .instaLogo{
    width: 6vw;
  }
  .zone4{
    top: 115vw;
    right: calc(100vw - 86vw);
    width: 70vw;
  }
  .sdgspop{
    top: 123vw;
    right: calc(100vw - 25vw);
    width: 24vw;
  }
  .sdgschara{
    top: 128vw;
    right: calc(100vw - 47vw);
    width: 22vw;
  }
  .mcTalent{
    top: 162.8vw;
    right: calc(100vw - 24vw);
    width: 19vw;
  }
  .mcName{
    top: 177vw;
    right: calc(100vw - 38vw);
    width: 19vw;
  }
  .esports{
    top: 181.5vw;
    right: calc(100vw - 51vw);
    width: 49vw;
  }


  .reservationButton{
    display: inline-block;
    width: 35%;
    padding: 0.8% 2%;
    height: auto;
    position: absolute;
    top: 205vw;
    right: 30%;
    border-radius: 5px;
    border: 1px solid #fff;

  }
  .attention {
    font-size: 10px;
    top: 226vw;
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
    width: 103vw;
    right: calc(100vw - 80vw);
  }
  .eventpop{
    width: 24vw;
    top: 226vw;
    right: calc(100vw - 94vw);
  }
  .kitchenCar{
    width: 20vw;
    top: 296vw;
    right: calc(100vw - 73vw);
  }
  .wakuwakuFamily{
    width: 20vw;
    top: 299vw;
    right: calc(100vw - 93vw);
  }
  .foodFoto{
    width: 86vw;
    top: 312vw;
    right: calc(100vw - 92vw);
  }
  
  
  
  .dokidokiPop{
    width: 24vw;
    top: 340vw;
    right: calc(100vw - 35vw);
  }
  .dokidokiHeart{
    width: 8vw;
    top: 338vw;
    right: calc(100vw - 47vw);
  }
  .dokidoKids{
    width: 24vw;
    top: 346vw;
    right: calc(100vw - 65vw);
  }
  .dino{
    width: 28vw;
    top: 344vw;
    right: calc(100vw - 97vw);
  }
  .vrEx{
    width: 37vw;
    top: 364vw;
    right: calc(100vw - 91vw);
  }
  .dokidokiStar{
    top: 360vw;
    right: calc(100vw - 52vw);
  }
  
  
  
  .parkKids{
    width: 28vw;
    top: 422vw;
  }
  .parkHeart{
    top: 419vw;
  }
  .parkPop{
    width: 24vw;
    top: 418vw;
    right: calc(100vw - 86vw);
  }
  
  
  
  .family{
    top: 508vw;
    right: calc(100vw - 97vw);
  }
  .prizeKids{
    width: 7vw;
    top: 542vw;
    right: calc(100vw - 98vw);
  }
  .mapchara{
    width: 10vw;
    top: 592vw;
    right: calc(100vw - 88vw);
  }
  
  footer{
    width: 100vw;
    top: 705vw;
    right: 0;
    height: auto;
    background-color: #E3E1B4;
  }
  
  hr{
  width: 90%;
  margin: 10px auto;
  text-align: center;
  }
  .organizer{
    margin-top: 10px;
    font-size: 1rem;
    margin-left: 5vw;
  }
  .indentionSp{
    display: block;
  }
  .contact{
    display: block;
    padding: 4px 5px;
    font-size:0.8rem;
    margin-bottom: 5px;
    width: 90px;
  }
  .infomation{
   margin-left: 5vw;
   margin-top: 10px;
   font-size: 0.8rem;
  }
  .spNone{
    display: none;
  }
  .notoNet{
    margin-left: 5vw;
    font-size: 0.8rem;
    margin-bottom: 50px;
  }
  .notoNet span{
    margin-right: 5px;
  }

  }