.text {
    display: inline-block;
    position: relative;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
    font-size: 40px;
    color: black;
}

#scene {
    perspective: 1000px;
    width: 50px;
    height: 50px;
    transform: translateX(50%) translateY(50%);
    cursor: pointer;
    margin-right: auto !important;
    margin-left: auto !important;
}

#boxBase {
    transform-style: preserve-3d;
    width: 50px;
    height: 50px;
    animation: turnAround 24s linear 0s infinite normal none running;
}

#boxBase a {
    color: white;
    font-weight: bold;
}

@keyframes turnAround {
    0% {
        transform: rotateX(0deg) rotateY(0deg);
    }
    100% {
        transform: rotateX(360deg) rotateY(360deg);
    }
}

#boxBase>div {
    position: absolute;
    background-color: rgba(39, 65, 105, 0.7);
    color: white;
    border: 3px solid white;
    /* width heightが一面の大きさ */
    width: 200px;
    height: 200px;
    cursor: pointer;
    font-weight: bold;
    font-size: 22px;
}

#boxBase>div:hover {
    background-color: rgba(250, 250, 250, 0.9);
    color: black;
}

#boxBase>div:hover>.text {
    color: white;
    font-weight: bold;
}


/* translateが一面同士の幅*/

#boxBase>.top {
    transform: translateY(100px) rotateX(-90deg);
}

#boxBase>.bottom {
    transform: translateY(-100px) rotateX(90deg);
}

#boxBase>.front {
    transform: translateZ(100px);
}

#boxBase>.back {
    transform: translateZ(-100px) rotateX(360deg);
}

#boxBase>.left {
    transform: translateX(-100px) rotateY(-90deg);
}

#boxBase>.right {
    transform: translateX(100px) rotateY(90deg);
}

@media screen and (max-width:1024px) {
    #boxBase>.top {
        transform: translateY(90px) rotateX(-90deg);
    }
    #boxBase>.bottom {
        transform: translateY(-90px) rotateX(90deg);
    }
    #boxBase>.front {
        transform: translateZ(90px);
    }
    #boxBase>.back {
        transform: translateZ(-90px) rotateX(180deg);
    }
    #boxBase>.left {
        transform: translateX(-90px) rotateY(-90deg);
    }
    #boxBase>.right {
        transform: translateX(90px) rotateY(90deg);
    }
    #boxBase>div {
        /* width heightが一面の大きさ */
        width: 180px;
        height: 180px;
        font-size: 20px;
    }
    .rightBox {
        top: 50%;
        left: 50%;
    }
}

@media screen and (max-width:768px) {
    #scene {
        margin-left: 0 !important;
    }
    #boxBase>.top {
        transform: translateY(64px) rotateX(-90deg);
        font-size: 14px!important;
    }
    #boxBase>.bottom {
        transform: translateY(-64px) rotateX(90deg);
        font-size: 14px!important;
    }
    #boxBase>.front {
        transform: translateZ(64px) rotate(180deg);
    }
    #boxBase>.back {
        transform: translateZ(-64px) rotateX(180deg);
    }
    #boxBase>.left {
        transform: translateX(-64px) rotateY(-90deg);
    }
    #boxBase>.right {
        transform: translateX(64px) rotateY(90deg);
    }
    #boxBase>div {
        /* width heightが一面の大きさ */
        width: 132px;
        height: 132px;
        font-size: 18px;
    }
    .rightBox {
        top: 50%;
        left: 60%;
    }
}