@charset "UTF-8";

.box{

 perspective: 1000px;

}

.box-item {
 width: 250px;
 height: 200px;
 transform-style: preserve-3d;
 animation:anime 10s both  infinite linear;
}

.item{
 width:100%;
 height:100%;
 background-color:pink;
 padding:1rem;
}

.boxP{
 width:100%;
 height:100%;
 font-size:1.3rem;
 display:grid;
 place-items:center;

}

.box-item .item{
 position: absolute; /*一枚になる*/
 display:block;
 width:100%;
 height:100%;
}

.number1 {
  transform: translateZ(125px);
  background-image:url("../box_image/wood1.jpg");
  background-size:cover;
  color:black;
}

.number2 {
  transform-origin: center left;
  transform: translateZ(-125px) rotateY(270deg);
  background-image:url("../box_image/wood2.jpg");
  background-size:cover;
  color:white;
}

.number3 {
  transform-origin:center center;
  transform: translateZ(-125px) rotateY(180deg);
  background-image:url("../box_image/wood3.jpg");
  background-size:cover;
  color:black;
  
}

.number4 {
  transform-origin: right;
  transform: rotateY(-270deg)  translateX(125px);
  background-image:url("../box_image/wood4.jpg");
  color:white;
}

@keyframes anime{

 0%{
  transform:rotateY(0deg);
 }

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


@media(max-width:820px){

  .box{

   display:block;
   margin-left:-20%;
   margin:0 0 10% -15%;
   }

}



/* スマホ時、画像サイズを調整 */
@media(max-width:500px) {

  .box{

    display:block;
    margin-left:-27%;
    }

  .gallery {
    width: 200px;
    height: 150px;
  }
  .gallery-item {
    width: 200px;
    height: 150px;
  }
  .number1 {
    transform: translateZ(125px);
  }
  .number2 {
    transform: translateZ(-125px) rotateY(270deg);
  }
  .number3 {
    transform: translateZ(-125px) rotateY(180deg);
  }
  .number4 {
    transform: rotateY(-270deg) translateX(125px);
  }
  
}




/* スマホ時、画像サイズを調整 */
@media(max-width:400px) {

  .box{

    display:block;
    margin:0 0 20% -25%;
    }
  
    .box-item {
      width: 200px;
      height: 150px;
     }

  .number1 {
    transform: translateZ(75px);
  }
  .number2 {
    transform: translateZ(-125px) rotateY(270deg);
  }
  .number3 {
    transform: translateZ(-125px) rotateY(180deg);
  }
  .number4 {
    transform: rotateY(-270deg) translateX(125px);
  }
  
}