/* スライダーコンテナ */
#product {
    width: 100%;
    max-width: 800px; /* 最大幅 */
    margin: 0 auto; /* 中央揃え */
    position: relative;
}

/* スライダー */
.slider {
    list-style: none;
    margin: 0;
    padding: 0;
    position: relative;
    width: 100%;
    height: 850px; /* スライダーの高さ */
}

/* 各スライド */
.slider li {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 620px;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    opacity: 0; /* 初期状態で非表示 */
    transition: opacity 600ms ease-in-out;
}

/* activeクラスで表示されるスライド */
.slider li.active {
    opacity: 1;
}