@charset "utf-8";

/* トップページ　カルーセル */
.carousel{
    margin: 0 auto;
    --carousel-width: 375px;
    --carousel-height: 214px;
    width: var(--carousel-width);
    height: var(--carousel-height);
    position: relative;
}

/* items----------------------------------- */
.carousel #items-wrapper{
    margin: 0 auto;
    width: calc(var(--carousel-width) - 60px);
    height: var(--carousel-height);
    position: relative;
    overflow: hidden;
}
.carousel #items-wrapper img{
    width: 100%;
    position: absolute;
    /* top: 10%; */
    left: 0;
    opacity: 0;
}
.carousel #items-wrapper img.active{
    opacity: 1;
}
.carousel #items-wrapper img.fadeRightIn{
    animation-name: fadeRightIn;
    animation-duration: 1s;
    opacity: 1;
}
.carousel #items-wrapper img.fadeLeftOut{
    animation-name: fadeLeftOut;
    animation-duration: 1s;
}
.carousel #items-wrapper img.fadeLeftIn{
    animation-name: fadeLeftIn;
    animation-duration: 1s;
    opacity: 1;
}
.carousel #items-wrapper img.fadeRightOut{
    animation-name: fadeRightOut;
    animation-duration: 1s;
}

@keyframes fadeRightIn {
    0% {
      opacity: 0;
      transform: translateX(100%); 
    }      
    100% { 
      opacity: 1;
      transform: translateX(0%); 
    }
}
@keyframes fadeLeftOut{
    0% {
      opacity: 1;
      transform: translateX(0%);
    }
    100% {
      opacity: 0;
      transform: translateX(-100%);
    }
}
@keyframes fadeLeftIn {
    0% { 
      opacity: 0;
      transform: translateX(-100%); 
    }      
    100% { 
      opacity: 1;
      transform: translateX(0%); 
    }
}
@keyframes fadeRightOut{
    0% {
      opacity: 1;
      transform: translateX(0%);
    }
    100% {
      opacity: 0;
      transform: translateX(100%);
    }
}

/* select-tabs----------------------------- */
#select-tabs{
    width: var(--carousel-width);
    text-align: center;
    position: absolute;
    top: 86%;
    left: 0;
}
#select-tabs button{
    margin: 0 6px;
    width: 12px;
    height: 12px;
    background-color: #bdf0bb;
    border-radius: 50%;
    border: none;
    cursor: pointer;
}
#select-tabs button.active{
    background-color: #205c28;
}

/* change-buttons-------------------------- */
#change-buttons{
    width: var(--carousel-width);
    display: flex;
    justify-content: space-between;
    position: absolute;
    top: 45%;
    left: 0;
}
#change-buttons button{
    width: 20px;
    height: 20px;
    padding: 0;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    position: relative;
    --arrow-size: 4px;
    --arrow-design: 1px solid black;
    --arrow-rotate: -45deg;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* 前へボタン */
#change-buttons button:nth-child(1)::after{
    content: "";
    width: var(--arrow-size);
    height: var(--arrow-size);
    display: block;
    border-top: var(--arrow-design);
    border-left: var(--arrow-design);
    transform: rotate(var(--arrow-rotate));
}
/* 次へボタン */
#change-buttons button:nth-child(2)::after{
    content: "";
    width: var(--arrow-size);
    height: var(--arrow-size);
    display: block;
    border-bottom: var(--arrow-design);
    border-right: var(--arrow-design);
    transform: rotate(var(--arrow-rotate));
}

   
/* 表示画面設定 PC */
@media(min-width:600px) {
    .carousel{
        margin: 0 auto;
        --carousel-width: 840px;
        --carousel-height: 480px;
        width: var(--carousel-width);
        height: var(--carousel-height);
        position: relative;
    }
    .carousel #items-wrapper{
        width: calc(var(--carousel-width) - 100px);
    }    
    #select-tabs{
        width: var(--carousel-width);
        top: 90%;
    }
    #select-tabs button{
        width: 16px;
        height: 16px;
    }
    #change-buttons button{
        width: 36px;
        height: 36px;
        --arrow-size: 10px;
        --arrow-design: 3px solid black;
    }
}