@charset "utf-8";


*{
margin: 0;
padding: 0;
}


html {
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

main {
  overflow: hidden;
  background-color: #FFF;
  margin-top:50px;
}

@media (max-width: 768px) {
main {
  margin-top:40px;
}
}

.kidsstaff-cont * {
  font-family: "M PLUS 1p","游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", sans-serif;
  text-align: center;
}

.kids-wrapper {
  min-width: 320px;
  position: relative;
  z-index: 1;
  font-feature-settings: "palt";
  background-color:#26a7f0;
}


/* ============================================================


============================================================ */


.sp640{ display: none; }

.fuwatt {
    opacity : 0;
    transform: translateY(30px);
    transition: all .8s;
  }

.fuwafuwa {
    animation: fuwafuwa 2s infinite ease-in-out;
}

.opacity-link{
  transition: opacity .3s ease;
}

.opacity-link:hover{
  opacity: .7;
}


@keyframes fuwafuwa {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(20px);
    }
}

.fuwafuwa2 {
    animation: fuwafuwa2 3s infinite ease-in-out;
}


@keyframes fuwafuwa2 {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(25px);
    }
}



.kidsstaff-cont .mv__wrap{
width: 100vw;
position:relative;
line-height: 0;
}

.mv__bg{
position: relative;
}

.mv__bg img{
  width: 100%;
}


.mv__wrap img{
  margin: 0 auto;
}


.mv__ill__l,.mv__ill__r{position: absolute;}
.mv__ill__l{width: 16.5%;left: 19%;top:15%;z-index: 10}
.mv__ill__r{width: 16.4%;right: 18%;top:16%;z-index: 10}

.mv__ttl img{position: absolute; width: 43%;top: 12%;left: 0;right: 0;z-index: 5}
.mv__sub {position: absolute;width: 50%;top: 102%;left: 0;right: 0;z-index: 5}


.content__sky {
  background: url(../images/sky_bg_pc.png) no-repeat center/cover;
  background-position: top;
  position: relative;
  z-index: 3;
}

.bg__cloud{
position: absolute;
width: 100%;
bottom: 0;
left: 0;
right: 0;
margin: 0 auto;
z-index: 1;
}

.inner__box{
max-width: 1000px;
margin: 0 auto;
}

.sky__txt{
width: 90%;
margin: 0 auto;
padding-bottom: 30%;
position: relative;
}

.sky__txt h2{
font-size: 20px;
color: #FFF;
padding: 11% 0 6%;
font-weight: 400;
line-height: 1.8em;
}


.bal__01pc{
position: absolute;
width: 14%;top: -500%;left: -15%;
}

.bal__02pc{
position: absolute;
width: 14.4%;top: -420%;right: -15%;
}

.sky__txt p {
  font-size: 17px;
  letter-spacing: .05em;
  font-weight: 400;
  line-height: 2em;
  position: relative;
  padding:20px 0 20px; 
  text-align: center;
  color: #eb3e3b;
  border: 4px solid #005bac;
  border-radius: 0 0 20px 20px;
  background: #fff;
  z-index: 2;
}

.sky__txt h3{
  font-size: 24px;
  letter-spacing: .05em;
  font-weight: 400;
  position: relative;
  padding:15px 0 12px; 
  text-align: center;
  color: #fff;
  border: 4px solid #005bac;
  border-radius: 20px 20px 0 0;
  background: #005bac;
  z-index: 2;
}

.sky__txt span{
  font-size: 22px;
  font-weight: 500;
  position: relative;
}

.sky__txt span::before{
  position: absolute;
  left:-10px;
  bottom: 0px;
  width: 100%;
  height: 10px;
  transform: skew(-45deg);
  background-image: repeating-linear-gradient(90deg,transparent 0 4px, #fff67f 4px 8px);
  content: '';
  z-index: -1;
  display: inline-block;
}






.content__green {
  background-color: #b4dc28;
  position: relative;
  margin-top: -0.6954612006vw;
  padding: 0 0 3%;
  z-index: 3;
}


.content__green::before{
  content: "";
  width: 100%;
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
  height: 6vw;
  background: url(../images/circle_bg_green.png) no-repeat center/cover;
}

.content__green::before {
    top: -6vw;
  }


.repo__ttl{
width: 100%;
margin: 0 auto;
position: relative;
}

.txtill_l{position: absolute;width: 22%;top: -80%;left:0;}
.txtill_r{position: absolute;width: 23%;top: -108%;right:0;}


.repo__box{
width: 100%;
margin: 0 auto;
padding: 7% 0 0;
}

.repo__kohoku,.repo__gbp,.repo__mm,.repo__garden,.repo__tamapla,.repo__gotanda{
position: relative;
}
.repo__gbp,.repo__garden,.repo__gotanda{
margin-bottom: 10%;
}
.repo__kohoku,.repo__mm,.repo__tamapla{
margin-bottom: 15%;
}



.kohoku__ttl{position: absolute;width: 41%; top: -5.5%;left: 1%;}
.chuo__ttl{position: absolute;width: 50.8%; top: -5.5%;right: -3%;}
.gbp__ttl{position: absolute;width: 38.7%; top: -5.5%;left: 4%;}
.azamino__ttl{position: absolute;width: 41%; top: -5.5%;left: 52%;}
.mm__ttl{position: absolute;width: 41%; top: -5.5%;right: 58%;}
.kosugi__ttl{position: absolute;width: 39.4%; top: -5.5%;right: 2%;}
.garden__ttl{position: absolute;width: 45.2%; top: -5.5%;right: 53.5%;}
.aobadai__ttl{position: absolute;width: 41%; top: -5.5%;right: 6%;}
.tamapla__ttl{position: absolute;width: 38.4%; top: -5.5%;right:57%;}
.rise__ttl{position: absolute;width: 39.4%; top: -5.5%;right: 3%;}
.gotanda__ttl{position: absolute;width: 40.8%; top: -5.5%;right: 58%;}

.chuo__ill{position: absolute;width: 11.4%; bottom: 30%;right: 3%;}
.gbp__ill{position: absolute;width: 19.2%; bottom:-5%;left: 25%;}
.kosugi__ill{position: absolute;width: 10.8%; bottom: 12%;right: 5%;}
.aobadai__ill{position: absolute;width: 12.8%; bottom: -1%;right: 2%;}
.garden__ill{position: absolute;width: 8.5%; bottom: 23%;right: 56%;}
.rise__ill{position: absolute;width: 10.6%; bottom: 36%;right: 3%;}
.gotanda__ill{position: absolute;width: 9.2%; bottom: 38%;right: 20%;}

.chuo__inta,.rise__inta{position: absolute;width: 48.4%; bottom: -15%;right: 0;}
.mm__inta{position: absolute;width: 48.4%; bottom: -15%;left: 0;}




.content__last{
padding: 5% 0 3%;
}


.content__last .inner__box p{
font-size: 14px;
margin: 0 auto;
text-align: center;
line-height: 1.8em;
color: #464646;
font-weight: 400;
}

.content__last .last_txt{
width: 87%;
padding:0 0 3%;
}

.content__last .kosodateplus{
width: 66.4%;
padding:0 0 8%;
}

.content__last .kosodatepro{
width: 78.6%;
padding:0 0 5%;
}

#kids__top__btn {
  display: none; /* 最初は非表示 */
  position: fixed;
  bottom: 30px;
  right: 30px;
  max-width:60px;
  z-index: 999;
  cursor: pointer;
  opacity: 1;
  transition: opacity 0.3s ease;
}
#kids__top__btn:hover {
  opacity: 0.8;
}




@media screen and (min-width:1601px){
    /*　画面サイズ1601pxから　*/
.mv__sub {position: absolute;width: 40%;top:103%;}
.sky__txt h2{padding: 13% 0 6%;}
}

@media screen and (min-width:641px) and ( max-width:1400px) {
    /*　画面サイズ641pxから1400pxまで　*/

.mv__ill__l{width: 15.3%;left: 21%;top:15.5%;z-index: 10}
.mv__ill__r{width: 15.5%;right: 20%;top:16%;z-index: 10}

.mv__ttl img{position: absolute; width: 40%;top: 12%;left: 0;right: 0;z-index: 5}
.mv__sub {position: absolute;width: 45%;top: 96%;left: 0;right: 0;z-index: 5}

.inner__box{
width:71.42857%;
margin: 0 auto;
}

.sky__txt h2{
padding: 6% 0 6%;
font-size: 1.4vw;
}


.sky__txt p{
  font-size: 1.214vw;
  padding:1.429vw 0 1.429vw; 
  border-radius:0 0 1.429vw 1.429vw;
  border: 3px solid #005bac;
}

.sky__txt h3{
  font-size: 1.714vw;
  padding:1.071vw 0 0.8vw;
  border-radius: 1.429vw 1.429vw 0 0;
  border: 3px solid #005bac;
}

.sky__txt span{
  font-size: 1.571vw;
  font-weight: 500;
  position: relative;
}

.sky__txt span::before{
  position: absolute;
  left:-0.714vw;
  bottom: 0px;
  width: 100%;
  height: 0.714vw;
  transform: skew(-45deg);
  background-image: repeating-linear-gradient(90deg,transparent 0 4px, #fff67f 4px 8px);
  content: '';
  z-index: -1;
  display: inline-block;
}



}


@media (max-width: 640px) {
.pc640{display:none;}
.sp640{display: inherit;}


.mv__ill__l{width: 26%;left: 1%;top: 14.5%;}
.mv__ill__r{width: 25.5%;right: -0.5%;top: 14%;}

.mv__ttl img{width: 70.6%;top: 15%}
.mv__sub {width: 55.6%;top: 82.5%;}

.content__sky {
  background: url(../images/sky_bg_sp.png) no-repeat center/cover;
  background-position: top;
  position: relative;
}

.inner__box{
max-width: 750px;
margin: 0 auto;
}

.sky__txt{
width: 86.66667%;
margin: 0 auto;
padding-bottom: 25%;
}

.sky__txt h2{
font-weight:500;
font-size: 3.4vw;
padding: 2% 0 10%;
line-height: 1.8em;
}

_::-webkit-full-page-media, _:future, :root .sky__txt h2 {
font-size: 3.25vw;
}

.sky__txt p{
  font-size: 3.2vw;
  line-height:1.8em;
  padding:4vw 0 4vw;
  border:3px solid #005bac;
  border-radius:0 0 2.667vw 2.667vw;
}

.sky__txt h3{
  font-size: 4vw;
  padding:2.667vw 0 2vw;
  border:3px solid #005bac;
  border-radius: 2.667vw 2.667vw 0 0;
}

.sky__txt span{
  font-size: 4vw;
  font-weight: 500;
  position: relative;
}

.sky__txt span::before{
  position: absolute;
  left:-1vw;
  bottom: 0px;
  width: 100%;
  height: 2.667vw;
  transform: skew(-45deg);
  background-image: repeating-linear-gradient(90deg,transparent 0 4px, #fff67f 4px 8px);
  content: '';
  z-index: -1;
  display: inline-block;
}



.last__bln{
position: absolute;
width: 70%;
right: -105%;
top: 30%;
}

.content__green {
    margin-top: 3%;
    padding: 0 0 3%;
  }


.content__green::before, .content__green::after {
    height: 38px;
    background: url(../images/circle_bg_green_sp.png) no-repeat center/cover;
  }


.content__green::before {
    top: -38px;
  }

.repo__ttl{
width: 86.66667%;
}

.txtill_l{position: absolute;width: 25%;top: -43%;left: -3%;}
.txtill_r{position: absolute;width: 26%;top: -64%;right: -3%;}
.bal__last{position: absolute;width: 36%;top: -190%;right: 0;}

.repo__box{
width: 86.66667%;
padding: 12% 0 0;
}

.repo__kohoku,.repo__gbp,.repo__azamino,.repo__kosugi,.repo__garden,.repo__aobadai,.repo__tamapla,.repo__gotanda{
margin-bottom: 18%;
}

.repo__chuo,.repo__mm,.repo__rise{
margin-bottom: 58%;
}

.kohoku__ttl{position: absolute;width: 79.38%; top: -5.3%;left: -3%;}
.chuo__ttl{position: absolute;width: 100.3%; top: -5.3%;right: 2%;}
.gbp__ttl{position: absolute;width: 76%; top: -5.3%;left: 15%;}
.azamino__ttl{position: absolute;width: 75.69%; top: -5.3%;left: 4%;}
.mm__ttl{position: absolute;width: 88.46%; top: -5.3%;right: 8%;}
.kosugi__ttl{position: absolute;width: 82.15%; top: -5.3%;right: 12%;}
.garden__ttl{position: absolute;width: 93.07%; top: -5.3%;right: 2%;}
.aobadai__ttl{position: absolute;width: 75.38%; top: -5.3%;right: 22%;}
.tamapla__ttl{position: absolute;width: 80.76%; top: -5.3%;right: 7%;}
.rise__ttl{position: absolute;width: 82.15%; top: -5.3%;right: 13%;}
.gotanda__ttl{position: absolute;width: 82%; top: -5.3%;right: 10%;}

.chuo__ill{position: absolute;width: 23.38%; bottom: 30%;right: 5%;}
.gbp__ill{position: absolute;width: 34.3%; bottom:17.5%;left: 65%;}
.kosugi__ill{position: absolute;width: 22.3%; bottom: 12%;right: 10%;}
.aobadai__ill{position: absolute;width: 26%; bottom: 11%;right: 4%;}
.garden__ill{position: absolute;width: 20%; bottom: 17%;right: 7%;}
.rise__ill{position: absolute;width: 21.85%; bottom: 35%;right: 6%;}

.chuo__inta,.rise__inta{
position: absolute;
width: 92.3076923%; 
right: auto;
left: 50%;
transform: translateX(-50%);}
.mm__inta{
position: absolute;
width: 92.3076923%; 
bottom: -35%;
left: 50%;
transform: translateX(-50%);}
.chuo__inta{
bottom: -33%;
}
.rise__inta{
bottom: -31%;
}

.content__last{
padding: 15% 0 8%;
}


.content__last .last_txt{
width: 86.66667%;
padding:0 0 3%;
margin: 0 auto;
}

.content__last .kosodateplus{
width: 69.3%;
padding:8% 0 13%;
}

.content__last .kosodatepro1{
width: 86.66667%;
padding-bottom:8%;
margin: 0 auto;
}

.content__last .kosodatepro2{
width: 82.133%;
padding-bottom:12%;
}

.content__last .inner__box p{
width: 86.66667%;
font-size: 3.4vw;
line-height: 1.5em;
font-weight: 400;
}

_::-webkit-full-page-media, _:future, :root .content__last .inner__box p {
font-size: 3.25vw;
}

.content__last .inner__box span{
line-height: 2.2em;
}

}

#kids__top__btn {
  bottom: 5%;
  right: 2%;
}



/* ========================== MVアニメーション ========================== */

@-webkit-keyframes preloader {
  0% {
    -webkit-transform: scale(0);
            transform: scale(0);
    opacity: 0;
  }
  70% {
    -webkit-transform: scale(1.05);
            transform: scale(1.05);
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 1;
  }
}

@keyframes preloader {
  0% {
    -webkit-transform: scale(0);
            transform: scale(0);
    opacity: 0;
  }
  70% {
    -webkit-transform: scale(1.05);
            transform: scale(1.05);
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 1;
  }
}
@-webkit-keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@-webkit-keyframes l_In {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-30px);
            transform: translateX(-30px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
}
@keyframes l_In {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-30px);
            transform: translateX(-30px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
}
@-webkit-keyframes r_In {
  0% {
    opacity: 0;
    -webkit-transform: translateX(30px);
            transform: translateX(30px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
}
@keyframes r_In {
  0% {
    opacity: 0;
    -webkit-transform: translateX(30px);
            transform: translateX(30px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
}
@-webkit-keyframes run_In {
  0% {
    opacity: 0;
    -webkit-transform: rotate(3deg) translateX(20px);
            transform: rotate(3deg) translateX(20px);
  }
  100% {
    opacity: 1;
    -webkit-transform: rotate(0) translateX(0);
            transform: rotate(0) translateX(0);
  }
}
@keyframes run_In {
  0% {
    opacity: 0;
    -webkit-transform: rotate(3deg) translateX(20px);
            transform: rotate(3deg) translateX(20px);
  }
  100% {
    opacity: 1;
    -webkit-transform: rotate(0) translateX(0);
            transform: rotate(0) translateX(0);
  }
}
@-webkit-keyframes run2_In {
  0% {
    opacity: 0;
    -webkit-transform: rotate(-3deg) translateX(20px);
            transform: rotate(-3deg) translateX(20px);
  }
  100% {
    opacity: 1;
    -webkit-transform: rotate(0) translateX(0);
            transform: rotate(0) translateX(0);
  }
}
@keyframes run2_In {
  0% {
    opacity: 0;
    -webkit-transform: rotate(-3deg) translateX(20px);
            transform: rotate(-3deg) translateX(20px);
  }
  100% {
    opacity: 1;
    -webkit-transform: rotate(0) translateX(0);
            transform: rotate(0) translateX(0);
  }
}

.mv__wrap .mv__ttl img {
  -webkit-animation: 0.8s forwards ease-in normal preloader;
          animation: 0.8s forwards ease-in normal preloader;
}
.mv__wrap .mv__sub {
  opacity: 0;
  -webkit-animation: 1s forwards ease-out 0.5s normal fadeIn;
          animation: 1s forwards ease-out 0.5s normal fadeIn;
}
.mv__wrap .mv__ill__l {
  opacity: 0;
  -webkit-animation: 0.6s forwards ease 1s normal l_In;
          animation: 0.6s forwards ease 1s normal l_In;
}
.mv__wrap .mv__ill__r {
  opacity: 0;
  -webkit-animation: 0.6s forwards ease 1s normal r_In;
          animation: 0.6s forwards ease 1s normal r_In;
}

/* ========================== MVアニメーション ========================== */