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


.top1{width: 100%;
    margin: 0 auto;
    margin-top: 1.5%;
  }
.top2{margin-top: -35%;}




.mainn{background-color: rgb(252,238,33);

padding-top: 1%;
padding-bottom: 3%;
margin-top: -2%;}


.mainnn{background-color:  rgb(255,0,255);

padding-top: 1%;
padding-bottom: 3%;
margin-top: -2%;}

.wf-kokoro { font-family: "Kokoro";
    color: white;
    font-weight: bold;
    text-align: center;
    font-size: 81%;
    width: 90%;
    margin: -1% auto;
 }


.animation {-webkit-animation: fadeIn 6s ease 0s 1 normal;

}
@keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}
@-webkit-keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}

@-webkit-keyframes fadeInDown {
 0% { opacity: 0; -webkit-transform: translateY(-20px); }
 100% { opacity: 1; -webkit-transform: translateY(0); 
 }
}
@keyframes fadeInDown {
 0% { opacity: 0; -webkit-transform: translateY(-20px); -ms-transform: translateY(-20px); transform: translateY(-20px); }
 100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); }
}






@keyframes fadeInRight {
  from {
    opacity: 0;
    transform: translate3d(100%, 0, 0);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

.fadeInRight {
  animation-name: fadeInRight;
  -webkit-animation-fill-mode:both;
 -ms-animation-fill-mode:both;
 animation-fill-mode:both;
 -webkit-animation-duration:1s;
 -ms-animation-duration:1s;
 animation-duration:1s;
 -webkit-animation-name: fadeInRight;
 visibility: visible !important;
}
.animation2{visibility: hidden;}




.fadeInLeft {
  animation-name: fadeInLeft;
  -webkit-animation-fill-mode:both;
 -ms-animation-fill-mode:both;
 animation-fill-mode:both;
 -webkit-animation-duration:1s;
 -ms-animation-duration:1s;
 animation-duration:1s;
 -webkit-animation-name: fadeInLeft;
 visibility: visible !important;
}
.animation3{visibility: hidden;}



@keyframes fadeInLeft {
  from {
    opacity: 0;
    transform: translate3d(-100%, 0, 0);
  }

  to {
    opacity: 1;
    transform: none;
  }
}




.hakodate {
    padding: 2.2%;
    margin-bottom: 3%;
    background-color: white;
    border: solid #20b2b0;
    border-radius: 1px;
}
.hakone { padding: 2.2%;
    margin-bottom: 3%;
    background-color: white;
    border: solid rgb(252,238,33);
    border-radius: 1px;
}
   

     .meron{display: flex;} 
.sentence {
   font-family: "Rounded plus 1c";
    font-size: 84%;
    margin-left: 4%;
    font-weight: bold;
    color: hsla(0, 0%, 0%, 0.68);
    margin-top: -2%;
}
.sentence2 {
   font-family: "Rounded plus 1c";
    font-size: 84%;
    margin-left: 4%;
    font-weight: bold;
    color: hsla(0, 0%, 0%, 0.68);
    margin-top: -2%;
}
.name0{
    font-family: "Rounded plus 1c";
    font-size: 151%;
    font-weight: bold;
    color: rgba(32,178,170,1);
    margin: -8% 0% -4% 33%;
}
.name15{
    font-family: "Rounded plus 1c";
    font-size: 151%;
    font-weight: bold;
    color: rgba(32,178,170,1);
    margin: -8% 0% -4% 16%;
}
.name15{
    font-family: "Rounded plus 1c";
    font-size: 151%;
    font-weight: bold;
    color: rgba(32,178,170,1);
    margin: -8% 0% -4% 16%;
}
.name16{
    font-family: "Rounded plus 1c";
    font-size: 151%;
    font-weight: bold;
    color: rgba(32,178,170,1);
    margin: -6% 0% -4% 34%;
}
.name17{
    font-family: "Rounded plus 1c";
    font-size: 151%;
    font-weight: bold;
    color: rgba(32,178,170,1);
    margin: -6% 0% -4% 26%;
}
.name18{
    font-family: "Rounded plus 1c";
    font-size: 151%;
    font-weight: bold;
    color: rgba(32,178,170,1);
    margin: -6% 0% -4% 43%;
}

.name{
    font-family: "Rounded plus 1c";
    font-size: 151%;
    font-weight: bold;
    color:#20b2b0;
    margin: -8% 0% -4% 27%;
}
.name2{
    font-family: "Rounded plus 1c";
    font-size: 145%;
    font-weight: bold;
    color: #20b2b0;
    margin: -8% 0% -5% 32%;
}
.name3{
    font-family: "Rounded plus 1c";
    font-size: 151%;
    font-weight: bold;
    color:rgb(252,238,33);
    margin: -8% 0% -4% 27%;
}
.name4{
    font-family: "Rounded plus 1c";
    font-size: 145%;
    font-weight: bold;
    color:rgb(252,238,33);
    margin: -8% 0% -5% 29%;
}
.name6{
    font-family: "Rounded plus 1c";
    font-size: 145%;
    font-weight: bold;
    color:rgb(252,238,33);
    margin: -8% 0% -5% 40%;
}
.name7{
    font-family: "Rounded plus 1c";
    font-size: 145%;
    font-weight: bold;
    color:rgb(252,238,33);
    margin: -8% 0% -5% 21%;
}
.hakodates{
margin-right: 4%;
margin-left: 4%;
margin-bottom: 3%;
}
.cs{font-family: 'Hammersmith One', sans-serif;
color: white;
transform: rotate(-10deg);
-moz-transform: rotate(-10deg);
-webkit-transform: rotate(-10deg);}

.hakodatec {
        display: none;
}
.hakodatec2 {
        display: none;
}
.cs{font-family: 'Hammersmith One', sans-serif;
color: white;
transform: rotate(-10deg);
-moz-transform: rotate(-10deg);
-webkit-transform: rotate(-10deg);
font-size: 320%;
}
.gazou{width: 130%;}
.wrapper-nav-global{
    position: static !important;
}
.rekishi{display: block;}
.bb{    margin-top: -11%;
    margin-bottom: -9%;
}
.bon{
    width: 70%;
    margin: 0 auto;
}
.name5{
    font-family: "Rounded plus 1c";
    font-size: 151%;
    font-weight: bold;
    color:rgb(252,238,33);
    margin: -8% 0% -4% 30%;
}
.hakodate2{display: none;}
.hakone2{display: none;}
}