/* コンテナ:画像スライド用CSS */
.sliderL, .sliderR {
    width: 100%;
    overflow: hidden;
}

.sliderL img {
    position: relative;
}

.sliderL img.start {
    width: 100%;
    animation: slideL 1.5s linear;
}

.sliderR img {
    position: relative;
}

.sliderR img.start {
    width: 100%;
    animation: slideR 1.5s linear;
}

@keyframes slideL {
    0% {
        opacity: 0;
        right: 100%;
    }
    20% {
        opacity: 0.2;
        right: 60%;
    }
    40% {
        opacity: 0.5;
        right: 20%;
    }
    60% {
        opacity: 0.90;
        right: 8%;
    }
    80% {
        opacity: 0.95;
        right: 3%;
    }
    100% {
        opacity: 1;
        right: 0;
    }
}

@keyframes slideR {
    0% {
        opacity: 0;
        left: 100%;
    }
    20% {
        opacity: 0.2;
        left: 60%;
    }
    40% {
        opacity: 0.5;
        left: 20%;
    }
    60% {
        opacity: 0.90;
        left: 8%;
    }
    80% {
        opacity: 0.95;
        left: 3%;
    }
    100% {
        opacity: 1;
        left: 0;
    }
}

/* フェードイン用 */
.fadeIn img {
    opacity: 0;
    width: 100%;
}

.fadeIn img.start {
    animation: fadeIn 2.5s forwards;
}

@keyframes fadeIn {
      0% { opacity: 0.00; }
      5% { opacity: 0.05; }
     10% { opacity: 0.10; }
     15% { opacity: 0.15; }
     20% { opacity: 0.20; }
     25% { opacity: 0.30; }
     30% { opacity: 0.40; }
     35% { opacity: 0.50; }
     40% { opacity: 0.60; }
     45% { opacity: 0.65; }
     50% { opacity: 0.70; }
     55% { opacity: 0.75; }
     60% { opacity: 0.80; }
     65% { opacity: 0.85; }
     70% { opacity: 0.90; }
     75% { opacity: 0.92; }
     80% { opacity: 0.94; }
     85% { opacity: 0.96; }
     90% { opacity: 0.98; }
     95% { opacity: 0.99; }
    100% { opacity: 1.00; }
}

/* コンテナ */
.cube {
    perspective: 300rem;
    width: 100%;
    max-width: 980px;
    min-height: 65rem;
    max-height: 65rem;
    margin: 4.5rem auto 2rem;
}

/* 立方体 */
.cube3d {
    width: 100%;
    position: absolute;
    transform-style: preserve-3d;
    animation: rotateCube 16s infinite;
}

/* 各面 */
.cube3d .pannel {
    width: 100%;
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cube3d .pannel img {
    object-fit: cover;
    animation: rotateImg 16s infinite;
}

/* 各面の配置 */
.cube3d .front  { transform: rotateY(  0deg) translateZ(23.5rem); }
.cube3d .right  { transform: rotateY( 90deg) translateZ(23.5rem); }
.cube3d .back   { transform: rotateY(180deg) translateZ(23.5rem); }
.cube3d .left   { transform: rotateY(-90deg) translateZ(23.5rem); }

/* 回転アニメーション */
@keyframes rotateCube {
    0%   { transform: rotateY(   0deg); }
    10%  { transform: rotateY( -90deg); }
    25%  { transform: rotateY( -90deg); }
    35%  { transform: rotateY(-180deg); }
    50%  { transform: rotateY(-180deg); }
    60%  { transform: rotateY(-270deg); }
    75%  { transform: rotateY(-270deg); }
    85%  { transform: rotateY(-360deg); }
    100% { transform: rotateY(-360deg); }
}
@keyframes rotateImg {
    0%   { opacity: 1;   }
    5%   { opacity: 0.9; }
    10%  { opacity: 1;   }
    25%  { opacity: 1;   }
    30%  { opacity: 0.9; }
    35%  { opacity: 1;   }
    50%  { opacity: 1;   }
    55%  { opacity: 0.9; }
    60%  { opacity: 1;   }
    75%  { opacity: 1;   }
    80%  { opacity: 0.9; }
    85%  { opacity: 1;   }
    100% { opacity: 1;   }
}

/* レスポンシブ対応 */
@media (max-width: 580px) {
    .cube {
        max-width: 390px;
        max-height: 30rem;
        min-height: 30rem;
        margin: 2rem auto 4.5rem;
    }

    .cube3d .pannel img {
        width: 100%;
    }

    .cube3d .front  { transform: rotateY(  0deg) translateZ(12.175rem); }
    .cube3d .right  { transform: rotateY( 90deg) translateZ(12.175rem); }
    .cube3d .back   { transform: rotateY(180deg) translateZ(12.175rem); }
    .cube3d .left   { transform: rotateY(-90deg) translateZ(12.175rem); }
}


p.marQuee {
    display: inline-block;
    padding-left: 100%;
    white-space: nowrap;
    animation: marQuee 47.5s linear infinite;
}

@keyframes marQuee {
    from {
      transform: translateX(0);
    }
    to {
      transform: translateX(-100%);
    }
  }