@charset "utf-8";

.main-head {
    background: #fadecc;
}

.main-head h1 {
    color: #F08300;
    top: calc(50% - 50px);
    text-shadow: 1px 1px 10px #fff,-1px 1px 10px #fff,1px -1px 10px #fff,-1px -1px 10px #fff;
}

.box-nobinobi {
    height: 540px;
    text-align: center;
    padding: 45px 0 0;
    width: 100%;
    overflow: hidden;
}

.box-nobinobi h2.tit {
    width: 540px;
    margin: 0 auto 25px;
    position: relative;
    z-index: 2;
}

.box-nobinobi .txt {
    text-align: center;
    font-size: 20px;
    line-height: 160%;
}

.box-nobinobi .img01,
.box-nobinobi .img02,
.box-nobinobi .img03,
.box-nobinobi .img04 {
    position: absolute;
    z-index: 1;
}

.box-nobinobi .img01 {
    left: calc(50% - 610px);
    top:0;
}

.box-nobinobi .img02 {
    left: calc(50% - 610px);
    bottom:0;
}

.box-nobinobi .img03 {
    right: calc(50% - 580px);
    top:0;
}

.box-nobinobi .img04 {
    right: calc(50% - 600px);
    bottom:0;
}

.box-class,
.box-facility,
.box-staff {
    text-align: center;
    padding: 90px 0;
}

.box-class {
    background: #fbdfcc;
}

.box-facility {
    background: #daefd7;
}

.box-staff {
    background: #f8e49d;
}

.box-class .tit,
.box-facility .tit,
.box-staff .tit {
    font-size: 28px;
    line-height: 100px;
    text-align: center;
    margin: 0 auto 60px;
    width: 360px;
    background: #FFF;
    border-radius: 50px;
    letter-spacing: 4px;
}

.box-class .tit {
    color: #F08300;
}

.box-facility .tit {
    color: #45b035;
}

.box-staff .tit {
    color: #FCC80E;
}

.box-class .list-class,
.box-facility .list-facility,
.box-staff .list-staff {
    max-width: 850px;
    width: 100%;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
}

.box-facility .list-facility02,
.box-staff .list-staff,
.box-class .list-class {
    gap:50px;
    position: relative;
}

.box-facility .list-facility01 {
    margin-bottom: 50px;
}

.box-facility .list-facility01 {
    gap:50px 24px;
}

.box-class .list-class li,
.box-facility .list-facility li,
.box-staff .list-staff li {
    position: relative;
}

.box-facility .list-facility02 li,
.box-staff .list-staff li,
.box-class .list-class li {
    width: calc(50% - 25px);
}

.box-facility .list-facility02 li:nth-of-type(1),
.box-facility .list-facility01 li:nth-of-type(1),
.box-facility .list-facility01 li:nth-of-type(2) {
    max-width: 980px;
    width: 100%;
}

.box-facility .list-facility01 li:nth-of-type(3) {
    width: calc(65.8% - 12px);
}

.box-facility .list-facility01 li:nth-of-type(4) {
    width: calc(34.2% - 12px);
}

.box-facility .list-facility01 li:nth-of-type(4) .img01 {
    position: absolute;
    top: 0;
}

.box-facility .list-facility01 li:nth-of-type(4) .img02 {
    position: absolute;
    bottom: 0;
}

.box-class .list-class p,
.box-facility .list-facility p,
.box-staff .list-staff p {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 2;
}

.box-class .list-class p {
    height: auto;
    max-width: 110px;
    width: 24%;
    aspect-ratio: 4 / 3;
}

.box-facility .list-facility p {
    height: auto;
    max-width: 218px;
    width: 24%;
    aspect-ratio: 75 / 34;
}

.box-staff .list-staff p {
    height: auto;
    max-width: 110px;
    width: 24%;
    aspect-ratio: 55 / 42;
}

.box-class .list-class .img,
.box-facility .list-facility .img,
.box-staff .list-staff .img {
    width: 100%;
    object-fit: cover;
    border-radius: 40px;
    overflow: hidden;
}

.box-class .list-class .img,
.box-facility .list-facility .img,
.box-staff .list-staff .img {
    position: relative;
    z-index: 1;
}

/******************************************************/

.box-nobinobi .img01.obj.active { animation: fadeImg1 1.6s 0.3s ease-in-out forwards; }

@keyframes fadeImg1 {
    from { 
        opacity: 0;
        transform: rotateX(-90deg);
        translate: 0 -50%;
    }
    to { 
        opacity: 1;
        transform: rotateX(0deg);
        translate: 0 0;
    }
}

.box-nobinobi .img02.obj.active { animation: fadeImg2 1.6s 0.8s ease-in-out forwards; }

@keyframes fadeImg2 {
    from { 
        opacity: 0;
        transform: rotateX(90deg);
        translate: 0 50%;
    }
    to { 
        opacity: 1;
        transform: rotateX(0deg);
        translate: 0 0;
    }
}

.box-nobinobi .img03.obj.active { animation: fadeImg3 1.6s 0.8s ease-in-out forwards; }

@keyframes fadeImg3 {
    from { 
        opacity: 0;
        transform: rotateX(-90deg);
        translate: 0 -50%;
    }
    to { 
        opacity: 1;
        transform: rotateX(0deg);
        translate: 0 0;
    }
}

.box-nobinobi .img04.obj.active { animation: fadeImg4 1.6s 1.3s ease-in-out forwards; }

@keyframes fadeImg4 {
    from { 
        opacity: 0;
        transform: rotateX(90deg);
        translate: 0 50%;
    }
    to { 
        opacity: 1;
        transform: rotateX(0deg);
        translate: 0 0;
    }
}




/******************************************************/

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

    .main-head h1 {
        top:calc(50% - 6vw);
        font-size: 3.6vw;
    }
    
    .box {
        padding: 8% 5%;
    }
    
    .box-nobinobi h2.tit {
        width: 80%;
        margin-bottom: 8%;
    }
    
    .box-nobinobi .txt {
        font-size: 4.4vw;
    }
    
    .box-nobinobi {
        height: auto;
        aspect-ratio: 16 / 23;
        padding-top: 28%;
    }
    
    .box-nobinobi .img01 {
        left: 0;
        width: 50%;
    }
    
    .box-nobinobi .img02 {
        left: 0;
        width: 50%;
    }
    
    .box-nobinobi .img03 {
        right: 0;
        width: 50%;
    }
    
    .box-nobinobi .img04 {
        right: 0;
        width: 50%;
    }
    
    .box-class .tit,
    .box-facility .tit,
    .box-staff .tit {
        width: 100%;
        font-size: 6.4vw;
        line-height: 18vw;
        margin-bottom: 8%;
        letter-spacing: 2vw;
        border-radius: 9vw;
    }
    
    .box-class .list-class .img,
    .box-facility .list-facility .img,
    .box-staff .list-staff .img {
        border-radius: 10px;
    }
    
    .box-facility .list-facility02,
    .box-staff .list-staff,
    .box-class .list-class {
        gap: 6vw 6%;
    }
    
    .box-facility .list-facility01 {
        gap: 6vw 4%;
    }
    
    .box-facility .list-facility01 {
        margin-bottom: 6vw;
    }
    
    .box-facility .list-facility02 li,
    .box-staff .list-staff li,
    .box-class .list-class li {
        width: calc(50% - 3%);
    }
    
    .box-facility .list-facility01 li:nth-of-type(3) {
        width: calc(65% - 2%);
    }

    .box-facility .list-facility01 li:nth-of-type(4) {
        width: calc(35% - 2%);
    }
}