@charset "utf-8";

/*
Site Name: 
Description: layout
*/

/* base layout
----------------------------------------- */
/*header*/
header {
    position: relative;
}

nav {
    margin-right: auto;
    margin-left: auto;
    
    margin-bottom: -100px;
    z-index: 10;
    position: relative;
}
.heaer-main {
    height: 700px;
    position: relative;
}

@media screen and (max-width: 767px) {
    .heaer-main {
        height: 500px;
    }
}

/*section余白*/
.sec_entyohoiku,
.sec_entei,
.sec_lunch,
.sec_dekigoto,
.sec_news,
.sec_about,
.sec_policy,
.sec_history,
.sec_newsbn,
.sec_event_schedule,
.sec_day_schedule,
.sec_contact,
.sec_facilities,
.sec_teachers {
    margin-bottom: 100px;
}

.sec_entyohoiku {
    margin-top: -50px;
    position: relative;
    z-index: 10;
}
@media screen and (max-width: 780px) {
    .sec_entyohoiku,
    .sec_entei,
    .sec_lunch,
    .sec_dekigoto,
    .sec_news,
    .sec_about,
    .sec_policy,
    .sec_history,
    .sec_newsbn,
    .sec_event_schedule,
    .sec_day_schedule,
    .sec_contact,
    .sec_facilities,
    .sec_teachers {
        margin-bottom: 60px;
    }
}

/**footer
.footer_contact 
.footer_contact__addhoka 
.footer_exterior-map 
.copy*/

/*ページ幅*/

.wdfull {
    max-width: 100%;
    margin-right: auto;
    margin-left: auto;
    background: aliceblue;
}
.wd550 {
    max-width: 50%;
    margin-right: auto;
    margin-left: auto;
}
.wd600 {
    max-width: 46.8%;
    margin-right: auto;
    margin-left: auto;
    /*background: aqua;*/
}
.wd700 {
    max-width: 55.4%;
    margin-right: auto;
    margin-left: auto;
}
.wd950 {
    max-width: 74.2%;/*86.3*/
    margin-right: auto;
    margin-left: auto;
    /*background: burlywoo*/
}
.footer_contact .wd950 {
    max-width: 86.3%;
}
.wd980 {
    max-width: 76.6%;
    margin-right: auto;
    margin-left: auto;
    /*background: lightcoral;*/
}
.wd1100 {
    max-width: 85.9%;
    margin-right: auto;
    margin-left: auto;
    /*background: tan;*/
}
@media screen and (max-width: 1023px) {
    .wd700 {
        max-width: 90%;
    }
    .wd550 {
        max-width: 58%;
    }
}
@media screen and (max-width: 767px) {
    .wd600 {
        max-width: 300px;
    }
    .wd550 {
        max-width: 86.3%;
    }
}
@media screen and (max-width: 580px) {
    .wd950 {
        max-width: 90%;
    }
}
/*font-size*/
.h2-1 {
    font-size: 150%;
    font-weight: 700;
}
.h3-1 {
    font-size: 125%;
    font-weight: 700;
}
.h4-1 {
    font-size: 140%;
    font-weight: 700;
}

.p-125 {
    font-size: 125%;
}
.p-100 {
    font-size: 100%;
}
.p-90 {
    font-size: 100%;
}
.p-80 {
    font-size: 80%;
}
@media screen and (max-width: 1280px) {
    .p-90 {
        font-size: 90%;
    }
}

@media screen and (max-width: 1024px) {
    .playground_wrap__landscape .p-125 {
        font-size: 115%;
    }
}
@media screen and (max-width: 767px) {
    .h2-1 {
        font-size: 125%;
    }
    .h4-1 {
        font-size: 125%;
    }
    .news_wrap__note_ul__list__R__h3.h3-1 {
        font-size: 105%;
    }
    .playground_wrap__landscape .p-125 {
        font-size: 100%;
    }
}
@media screen and (max-width: 580px) {
    .newsbn_wrap__L .p-100 {
        font-size: 90%;
    }
    .news_wrap__note_ul__list__R__h3.h3-1 {
        font-size: 100%;
    }
    .teachers_wrap__t1__item .p-125 {
        font-size: 100%;
    }
}
@media screen and (max-width: 480px) {
    .h3-1 {
        font-size: 90%;
    }
    .p-80 {
        font-size: 80%;
    }
    .h4-1 {
        font-size: 110%;
    }
    .p-125 {
        font-size: 100%;
    }
    .teachers_wrap__t1__item .p-125 {
        font-size: 125%;
    }
    .footer_contact__addhoka__R-tel__p.p-80 {
        font-size: 62.5%;
        line-height: 1.5;
    }
}


/*-----------------------------------------
アニメーション
-----------------------------------------*/

.js-show-top {
    opacity: 0;
    transform: translateX(50px);
    transition: all 1.5s;
}
.js-show-top.up {
    opacity: 1;
    transform: translateX(0);
}

.js-show {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.9s;
}
.js-show.up {
    opacity: 1;
    transform: translateY(0);
}

/*.js-show-t {
    opacity: 0;
    transform: translateY(40px) scale(0.7);
    transition: 0.6s;
}
.js-show-t.up {
    opacity: 1;
    transform: translateY(0) scale(1);
}*/
/****************/

.js-show-t {
    /*opacity: 0;*/
}
.js-show-t.up {
    /*opacity: 1;*/
    animation: bounceIn 0.95s;
}

@keyframes bounceIn {
    0%,20%,40%,60%,80%,to {
        animation-timing-function: cubic-bezier(.215,.61,.355,1)
    }

    0% {
        opacity: 1;
        transform: scale3d(.99,.99,.99)
    }

    10% {
        opacity: 1;
        transform: scale3d(.9,.9,.9)
    }

    40% {
        transform: scale3d(1.05,1.05,1.05)
    }

    60% {
        transform: scale3d(.98,.98,.98)
    }

    80% {
        transform: scale3d(1.02,1.02,1.02)
    }

    to {
        transform: scaleX(1)
    }
  }
  /****************/
  
  .lunch_wrap__R img {}
  
.js-show-skn {
    opacity: 0;
    transform: translateY(40px) scale(0.7);
    transition: 0.6s;
}
.js-show-skn.up {
    opacity: 1;
    transform: translateY(0) scale(1);
}


.year_event__landscape__item .year_event__landscape__item__pop {
    animation: eveImg 30s ease 0s infinite;
    background: #FEF9FB;
}

.year_event__landscape__item:first-child .year_event__landscape__item__pop {
    
}
.year_event__landscape__item:nth-of-type(2) .year_event__landscape__item__pop {
    animation-direction: reverse;
    animation-duration: 35s;
}
.year_event__landscape__item:nth-of-type(3) .year_event__landscape__item__pop {
    animation-direction: alternate;
}
.year_event__landscape__item:last-child .year_event__landscape__item__pop {
    animation-direction: alternate-reverse;
    animation-duration: 35s;
}
@keyframes eveImg {  
    0%, 100% {
        border-radius: 63% 37% 54% 46%/55% 48% 52% 45%;
    }
    14% {
        border-radius: 40% 60% 54% 46%/49% 60% 40% 51%;
    }
    28% {
        border-radius: 54% 46% 38% 62%/49% 70% 30% 51%;
    }
    42% {
        border-radius: 61% 39% 55% 45%/61% 38% 62% 39%;
    }
    56% {
        border-radius: 61% 39% 67% 33%/70% 50% 50% 30%;
    }
    70% {
        border-radius: 50% 50% 34% 66%/56% 68% 32% 44%;
    }
    84% {
        border-radius: 46% 54% 50% 50%/35% 61% 39% 65%;
    }
        
}