@charset "UTF-8";

/* * {
    outline: 1px solid magenta;
} */

.manabiTop {
    display: flex;

    position: relative;
    height: 75vh;
    background: url(../images/manabi-bg.jpg) no-repeat center /cover;
}

.headerText {
    width: 60%;
    padding: 5% 10% 10% 10%;

}

.randomAnime {
    visibility: hidden;
}

.headerTextP {
    font-size: 24px;
    padding: 5% 5% 5% 10%;
    line-height: 1.7;
}

.manabiTopImg {
    position: absolute;
    top: 15%;
    right: 10%;
    width: 38vw;
    animation: fluidrotate 30s ease 0s infinite;
}

@keyframes fluidrotate {

    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%;
    }

}



.reportBox h2 {
    font-size: 64px;
    font-weight: bold;
    border-bottom: 6px solid rgb(225, 111, 24);
    width: 38%;
    padding-bottom: 20px;
    margin-top: 20%;
}

.reportBoxTextBox {
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin-top: 5%;
}

.reportBoxTextBox img {
    border-radius: 20px;
}

.reportBoxText {
    flex-basis: 42%;

}

.reportBoxText h3 {
    font-size: 40px;
    font-weight: bold;
    margin-bottom: 20px;
}

.reportBoxText p {
    color: #828282;
    line-height: 1.7;

}

/*========= 流れるテキスト ===============*/



.slide-in {
    overflow: hidden;
    display: inline-block;
}

.slide-in_inner {
    display: inline-block;

}

/*左右のアニメーション*/
.leftAnime {
    opacity: 0;
    /*事前に透過0にして消しておく*/
}

.slideAnimeLeftRight {
    animation-name: slideTextX100;
    animation-duration: 0.8s;
    animation-fill-mode: forwards;
    opacity: 0;
}

@keyframes slideTextX100 {
    from {
        transform: translateX(-100%);
        /*要素を左の枠外に移動*/
        opacity: 0;
    }

    to {
        transform: translateX(0);
        /*要素を元の位置に移動*/
        opacity: 1;
    }
}

.slideAnimeRightLeft {
    animation-name: slideTextX-100;
    animation-duration: 0.8s;
    animation-fill-mode: forwards;
    opacity: 0;
}


@keyframes slideTextX-100 {
    from {
        transform: translateX(100%);
        /*要素を右の枠外に移動*/
        opacity: 0;
    }

    to {
        transform: translateX(0);
        /*要素を元の位置に移動*/
        opacity: 1;
    }
}


.fadeLeft {
    animation-name: fadeLeftAnime;
    animation-duration: 2s;
    animation-fill-mode: forwards;
    opacity: 0;
}

@keyframes fadeLeftAnime {
    from {
        opacity: 0;
        transform: translateX(-100px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* 4-1 ふわっ（右から） */

.fadeRight {
    animation-name: fadeRightAnime;
    animation-duration: 2s;
    animation-fill-mode: forwards;
    opacity: 0;
}

@keyframes fadeRightAnime {
    from {
        opacity: 0;
        transform: translateX(100px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
.fadeUpTrigger,
.fadeLeftTrigger,
.fadeRightTrigger {
    opacity: 0;
}