/* main_slider.css
   index static_slider.html のインラインスタイルを移動
   2:1 アスペクト比、スライドの重ね配置、サムネイルのレスポンシブレイアウト
*/

/* Slider wrapper: responsive, centered, caps at 1200px */
#main_slider {
    position: relative;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    overflow: hidden;
    /* Maintain a 2:1 aspect ratio responsively. */
    aspect-ratio: 2 / 1;
}

#main_slider::before {
    content: "";
    display: block;
    width: 100%;
    padding-top: 50%; /* 1 / 2 = 50% (フォールバック) */
}

@supports (aspect-ratio: 1 / 1) {
    #main_slider::before { display: none; }
}

/* トラックは static にしておく（絶対配置した li が wrapper を基準にするため） */
#main_slider ul {
    position: static;
    padding: 0;
    margin: 0;
    list-style: none;
    height: auto; /* wrapper のアスペクト比に従う */
}

/* 各スライドは重ねて配置し、transformで移動する */
#main_slider li {
    position: absolute;
    inset: 0;
    box-sizing: border-box;
    overflow: hidden;
    transform: translateX(100%); /* 最初は右側に配置 */
    transition: transform 0.5s ease-in-out;
    will-change: transform;
}

/* 画像はスライド領域を覆うように配置（縦横比を保ちつつcover） */
#main_slider img {
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    display: block;
}

/* 一時的にトランジションを無効にするためのユーティリティクラス */
#main_slider.no-transition,
#main_slider.no-transition * {
    transition: none !important;
}

/* Thumbnails */
.thumbs-wrap {
    width: 100%;
    max-width: 1200px;
    margin: 36px auto 0;
    padding: 0 12px 36px;
}
.thumbs {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
}
.thumb {
    border: none;
    background: none;
    padding: 0;
    cursor: pointer;
    box-sizing: border-box;
    overflow: hidden;
    display: inline-block;
    /* default: 6 columns; gap is 12px */
    width: calc((100% - 5 * 12px) / 6);
    aspect-ratio: 2 / 1;
}
.thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.thumb.active {
    box-shadow: 0 4px 10px rgba(0,0,0,0.25);
    outline: 3px solid rgba(255,255,255,0.9);
    transform: translateY(-4px);
}

/* Smartphone: show 3 per row (gap 12px) */
@media (max-width: 600px) {
    .thumb { width: calc((100% - 2 * 12px) / 3); }
}

/* Very small screens: slightly smaller thumbs */
@media (max-width: 420px) {
    .thumb { width: calc((100% - 2 * 12px) / 3); }
}