/* スライド */

.container {
    margin: 0 auto;
    width: 300px;
    height: 350px;
    position: relative;
    top: 100px;
    perspective: 1000px;
  }
  
  .carousel {
    height: 100%;
    width: 100%;
    position: absolute;
    transform-style: preserve-3d;
    transition: transform 1s;
  }
  
  .item {
    display: block;
    position: absolute;
    background: #000;
    width: 260px;
    height: 300px;
    line-height: 200px;
    font-size: 5em;
    text-align: center;
    color: #FFF;
    opacity: 0.95;
    border-radius: 10px;
    /* border: 3px solid #000; */
  }
  
  .a {
    transform: rotateY(0deg) translateZ(300px);
    background: url(../images/product/car1.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
  }
  .b {
    transform: rotateY(60deg) translateZ(300px);
    background: url(../images/product/car2.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
  }
  .c {
    transform: rotateY(120deg) translateZ(300px);
    background: url(../images/product/car3.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;}
  .d {
    transform: rotateY(180deg) translateZ(300px);
    background: url(../images/product/car1.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;}
  .e {
    transform: rotateY(240deg) translateZ(300px);
    background: url(../images/product/car2.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;} 
  .f {
    transform: rotateY(300deg) translateZ(300px);
    background: url(../images/product/car3.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;}
  
  
  .next, .prev {
    color: #ffffff;
    position: absolute;
    top: 300px;
    padding: 1em 2em;
    cursor: pointer;
    background: #000000;
    border-radius: 5px;
    border-top: 1px solid #FFF;
    box-shadow: 0 5px 0 #999;
    transition: box-shadow 0.1s, top 0.1s;
  }
  .next:hover, .prev:hover { color: #ffffff; }
  .next:active, .prev:active {
    top: 304px;
    box-shadow: 0 1px 0 #999;
  }
  .next { right: 5em; }
  .prev { left: 5em; }
  
  
  .detailBox{
    line-height: 2;
    position: absolute;
    top: 0;
    left: 2%;
  }
  .priceBox{
    line-height: 2;
    position: absolute;
    left: 2%;
    bottom: 10px;
  }
  
  .detailBox h2,.detailBox h3{
    background: var(--color-000);
    color: var(--color-fff);
    font-weight: bold;
    font-size: var(--font-size-base);
    padding: 0 var(--space-10);
    margin:var(--space-5) 0;
  
  }
  
  .priceBox p{
    background: var(--color-000);
    color: var(--color-fff);
    font-weight: bold;
    font-size: 12px;
    padding: 0 var(--space-10);
  }
  .priceBox .price{
    font-size: var(--font-size-28);
    text-shadow: 2px 3px 3px rgba(0, 0, 0, 0.4);
  }
  .priceBox .set{
    font-size: 12px;
    padding: 0 var(--space-10);
  }

  .buyButtonLoop{
     right: 2%;
     bottom: -7%!important;
  
  }
  .buyButtonLoop a{
    font-size: 12px;
  }
  /* ========================================================== */
/* ==============  2023タプレット 1025px   ==================== */
/* ========================================================== */
@media screen and (max-width:1024px){
  .container {
    width: 250px;
    height: 300px;
  }
  .item {
    width: 250px;
    height: 300px;
  }

  .next, .prev {
    top:inherit;
    bottom: -222px;
    padding: 0.5em 1.5em;
  }
  .next:hover, .prev:hover { color: #ffffff; }
  .next:active, .prev:active {
    top:inherit;
    bottom: -218px!important;
  }
  .next { right: 3em; }
  .prev { left: 3em; }
  

  }

/* ========================================================== */
/* ==============  2023スマホ     600px   ==================== */
/* ========================================================== */
@media screen and (max-width:600px){
  .container {
    width: 236px;
    height: 300px;
  }
  .item {
    width: 230px;
    height: 300px;
  }
  .next, .prev {
    top:inherit;
    bottom: -222px;
    padding: 0.5em 1.5em;
  }
  .next:hover, .prev:hover { color: #ffffff; }
  .next:active, .prev:active {
    top:inherit;
    bottom: -218px!important;
  }
  .next { right: 1em; }
  .prev { left: 1em; }

  }