:root {
    --ani-duration: 7s
}

.fade-up {
    animation-duration: var(--ani-duration);
    animation-fill-mode: forwards;
    opacity: 0;
    position: absolute;
}

/* ハテナマーク start */
.ani01 {
    animation-name: fadeUp01;
    bottom: 110px;
    left: calc(25% - 66px);
}


.ani02 {
    animation-name: fadeUp02;
    bottom: 120px;
    left: calc(25% - 28px);
}

.ani03 {
    animation-name: fadeUp03;
    bottom: 100px;
    left: calc(25% + 10px);
}

.ani04 {
    animation-name: fadeUp04;
    bottom: 190px;
    left: calc(25% - 70px);
}

.ani05 {
    animation-name: fadeUp05;
    bottom: 200px;
    left: calc(25% - 30px);
}

.ani06 {
    animation-name: fadeUp06;
    bottom: 180px;
    left: calc(25% + 10px);
}

.question {
    width: 35px;
}

@media only screen and (min-width: 768px) {

    .ani01 {
        bottom: 180px;
        left: calc(25% - 100px);
    }


    .ani02 {
        bottom: 220px;
        left: calc(25% - 50px);
    }

    .ani03 {
        bottom: 170px;
        left: calc(25%);
    }

    .ani04 {
        bottom: 300px;
        left: calc(25% - 115px);
    }

    .ani05 {
        bottom: 320px;
        left: calc(25% - 40px);
    }

    .ani06 {
        bottom: 300px;
        left: calc(25% + 15px);
    }

    .question {
        width: 50px;
    }
}

@keyframes fadeUp01 {
    0% {
        opacity: 0;
        transform: translateY(30px) rotate(-10deg) translateX(-50%);
    }
    10% {
        opacity: 1;
        transform: translateY(0) rotate(-10deg) translateX(-50%);
    }
    45% {
        opacity: 1;
        transform: translateY(0) rotate(-10deg) translateX(-50%);
    }
    55% {
        opacity: 0;
        transform: translateY(0) rotate(-10deg) translateX(-50%);
    }
}

@keyframes fadeUp02 {
    0% {
        opacity: 0;
        transform: translateY(30px) translateX(-50%);
    }
    5% {
        opacity: 0;
        transform: translateY(30px) translateX(-50%);
    }
    15% {
        opacity: 1;
        transform: translateY(0) translateX(-50%);
    }
    45% {
        opacity: 1;
        transform: translateY(0) translateX(-50%);
    }
    55% {
        opacity: 0;
        transform: translateY(0) translateX(-50%);
    }
}

@keyframes fadeUp03 {
    0% {
        opacity: 0;
        transform: rotate(10deg) translateX(-50%);
    }
    10% {
        opacity: 0;
        transform: translateY(30px) rotate(10deg) translateX(-50%);
    }
    20% {
        opacity: 1;
        transform: translateY(0) rotate(10deg) translateX(-50%);
    }
    45% {
        opacity: 1;
        transform: translateY(0) rotate(10deg) translateX(-50%);
    }
    55% {
        opacity: 0;
        transform: translateY(0) rotate(10deg) translateX(-50%);
    }
}

@keyframes fadeUp04 {
    0% {
        opacity: 0;
        transform: rotate(10deg) translateX(-50%);
    }
    12% {
        opacity: 0;
        transform: translateY(30px) rotate(-12deg) translateX(-50%);
    }
    22% {
        opacity: 1;
        transform: translateY(0) rotate(-12deg) translateX(-50%);
    }
    45% {
        opacity: 1;
        transform: translateY(0) rotate(-12deg) translateX(-50%);
    }
    55% {
        opacity: 0;
        transform: translateY(0) rotate(-12deg) translateX(-50%);
    }
}

@keyframes fadeUp05 {
    0% {
        opacity: 0;
        transform: rotate(10deg) translateX(-50%);
    }
    14% {
        opacity: 0;
        transform: translateY(30px) rotate(5deg) translateX(-50%);
    }
    24% {
        opacity: 1;
        transform: translateY(0) rotate(5deg) translateX(-50%);
    }
    45% {
        opacity: 1;
        transform: translateY(0) rotate(5deg) translateX(-50%);
    }
    55% {
        opacity: 0;
        transform: translateY(0) rotate(5deg) translateX(-50%);
    }
}

@keyframes fadeUp06 {
    0% {
        opacity: 0;
        transform: rotate(10deg) translateX(-50%);
    }
    16% {
        opacity: 0;
        transform: translateY(30px) rotate(10deg) translateX(-50%);
    }
    26% {
        opacity: 1;
        transform: translateY(0) rotate(10deg) translateX(-50%);
    }
    45% {
        opacity: 1;
        transform: translateY(0) rotate(10deg) translateX(-50%);
    }
    55% {
        opacity: 0;
        transform: translateY(0) rotate(10deg) translateX(-50%);
    }
}

/* ハテナマーク end */

/* びっくりマーク start */
.ani-exclamation {
    animation-name: fadeUpExclamation;
    animation-duration: var(--ani-duration);
    animation-fill-mode: forwards;
    opacity: 0;
    width: 80px;
    bottom: 120px;
    left: calc(25% - 28px);
    max-height: 180px;
}

@media only screen and (min-width: 768px) {
    .ani-exclamation {
        width: 120px;
        bottom: 180px;
        left: calc(25% - 50px);
        max-height: none;
    }
}

@keyframes fadeUpExclamation {
    0% {
        opacity: 0;
        transform: translateY(30px) translateX(-50%);
    }
    45% {
        opacity: 0;
        transform: translateY(30px) translateX(-50%);
    }
    55% {
        opacity: 1;
        transform: translateY(0px) translateX(-50%);
    }
    80% {
        opacity: 1;
        transform: translateY(0px) translateX(-50%);
    }
    100% {
        opacity: 1;
        transform: translateY(0px) translateX(-50%);
    }
}

/* びっくりマーク end */

/* 社名 think start */
.ani-think {
    animation-name: fadeUpThink;
    animation-duration: 10s;
    animation-fill-mode: forwards;
    opacity: 0;
    width: 50%;
    position: absolute;
    bottom: 30%;
    left: 75%;
    color: black;
    font-size: calc(1.375rem + 1.5vw);
}

@media only screen and (min-width: 768px) {
    .ani-think {
        width: 200px;
    }
}

@media only screen and (min-width: 1200px) {
    .ani-think {
        font-size: 2.5rem;
    }
}

@keyframes fadeUpThink {
    0% {
        opacity: 0;
        transform: translateY(30px) translateX(-50%);
    }
    30% {
        opacity: 0;
        transform: translateY(30px) translateX(-50%);
    }
    40% {
        opacity: 1;
        transform: translateY(0px) translateX(-50%);
    }
    100% {
        opacity: 1;
        transform: translateY(0px) translateX(-50%);
    }
}

/* 社名 think end */

/* 社名 full start */
.ani-full {
    animation-name: fadeUpFull;
    animation-duration: 10s;
    animation-fill-mode: forwards;
    opacity: 0;
}

@keyframes fadeUpFull {
    0% {
        opacity: 0;
    }
    35% {
        opacity: 0;
    }
    45% {
        opacity: 1;
    }
    100% {
        opacity: 1;
    }
}

/* 社名 full end */

/* らーくんアイコン */
.ani-rakun-main {
    position: absolute;
    bottom: 0%;
    left: calc(25% - 26px);
    transform: translateX(-50%);
    width: 95.3px;
}

@media only screen and (min-width: 768px) {
    .ani-rakun-main {
        left: calc(25% - 46px);
        width: 162px;
    }
}

.ani-rakun-1 {
    animation-name: raKunAnimation1;
    animation-duration: var(--ani-duration);
    position: absolute;
    bottom: 33px;
    left: calc(25% + 50px);
    transform: translateX(-50%);
    opacity: 0;
    width: 50.9px;
}

@media only screen and (min-width: 768px) {
    .ani-rakun-1 {
        left: calc(25% + 82px);
        bottom: 57px;
        width: 86.53px;
    }
}

@keyframes raKunAnimation1 {
    0% {
        opacity: 1;
    }
    45% {
        opacity: 1;
    }
    50% {
        opacity: 0;
    }
    100% {
        opacity: 0;
    }
}

.ani-rakun-2 {
    animation-name: raKunAnimation2;
    animation-duration: var(--ani-duration);
    position: absolute;
    bottom: 28px;
    left: calc(25% + 50px);
    transform: translateX(-50%);
    width: 50.9px;
}

@media only screen and (min-width: 768px) {
    .ani-rakun-2 {
        left: calc(25% + 84px);
        bottom: 44px;
        width: 86.53px;
    }
}

@keyframes raKunAnimation2 {
    0% {
        opacity: 0;
    }
    49% {
        opacity: 0;
    }
    54% {
        opacity: 1;
    }
    100% {
        opacity: 1;
    }
}


/* らーくんアイコン end */

/* アニメーション領域 start */
#animation_area {
    opacity: 1;
    width: 100%;
    height: 300px;
    max-width: 1200px;
}

@media only screen and (min-width: 768px) {
    #animation_area {
        height: 450px;
    }
}

/* アニメーション領域 end */


/* メッセージ あなた start */
.ani-anata {
    animation-name: fadeUpAnata;
    animation-duration: 10s;
    animation-fill-mode: forwards;
    opacity: 0;
    width: 45%;
    position: absolute;
    bottom: calc(50%);
    left: 75%;
    color: black;
    font-size: calc(1.3rem)
}

@media only screen and (min-width: 768px) and (max-width: 1199px) {
    .ani-anata {
        bottom: calc(50%);
        font-size: calc(1.375rem + 1.5vw);
        width: 50%;
    }
}

@media only screen and (min-width: 1200px) {
    .ani-anata {
        font-size: 2.5rem;
    }
}

@keyframes fadeUpAnata {
    0% {
        opacity: 0;
        transform: translateY(30px) translateX(-50%);
    }
    10% {
        opacity: 0;
        transform: translateY(30px) translateX(-50%);
    }
    20% {
        opacity: 1;
        transform: translateY(0px) translateX(-50%);
    }
    100% {
        opacity: 1;
        transform: translateY(0px) translateX(-50%);
    }
}

/* メッセージ あなた end */

/* メッセージ 考える start */
.ani-kangaeru {
    animation-name: fadeUpKangaeru;
    animation-duration: 10s;
    animation-fill-mode: forwards;
    opacity: 0;
}

@keyframes fadeUpKangaeru {
    0% {
        opacity: 0;
    }
    20% {
        opacity: 0;
    }
    30% {
        opacity: 1;
    }
    100% {
        opacity: 1;
    }
}

/* メッセージ 考える end */