@charset "utf-8";

.mainContent{
  min-height: 420px;
}

/*回転ボックスここから*/
.scene{
    perspective: 1000px;
    width:200px;
    height:200px;
    position:relative;
}

.scene1{
    top:180px;
    left:50vw;
    transform:translateX(-50%) translateY(-50%);
}

.boxBase{
    transform-style:preserve-3d;
    width:200px;
    height:200px;
    animation: turnAround 25s linear 0s infinite normal none running;
}

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

    100%{
      transform:rotateX(-360deg) rotateY(720deg);;
    }
}

.boxSurfase{
    position:absolute;
    background-color:rgba(255, 255, 255, 0.8);
    border:1.5px solid black;
    width:200px;
    height:200px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.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(180deg);
}

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

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

.worksTextBase{
    display: none;
}
/*回転ボックスここまで*/

@media screen and (min-width: 768px){
    /*PC回転ボックスここから*/
    .worksTextBase{
        position: absolute;
        z-index: 3;
        width: 200px;
        height: 200px;
        opacity: 0;
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .worksTextBase:hover{
        background-color: rgba(0, 0, 0, 0.8);
        opacity: 1;
        transition: 250ms;
    }

    .worksText{
        color: #fff;
        font-size: 0.75rem;
        font-variation-settings: "wght" 500;
    }
    /*PC回転ボックスここまで*/
}