@charset "UTF-8";
/* product_thumb.css */
/* 商品紹介ページでメイン画像のしたにサムネイル表示 
   スマホ対応 */
:root { --aqu-red: #F92169; }

.product-gallery {
    max-width: 500px;
    width: 100%;
    /* margin: 20px auto; */
    margin: 20px auto 20px 20px; /* 上:20px, 右:自動, 下:20px, 左:20px */
    font-family: sans-serif;
}

.slider-wrapper {
    position: relative;
    overflow: hidden;
    border: 1px solid #ddd;
    background: #000; /* 動画が黒帯になっても違和感ないように */
    border-radius: 8px;
}

.main-image-slider {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
}
.main-image-slider::-webkit-scrollbar { display: none; }

.slide-item {
    flex: 0 0 100%;
    width: 100%;
    scroll-snap-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    /* 動画の高さを維持するためのアスペクト比設定 */
    aspect-ratio: 4 / 3; 
}

.slide-item img, .slide-item iframe {
    width: 100%;
    height: 100%;
    border: none;
    display: block;
}

/* 左右矢印 */
.nav-button {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.7);
    border: none;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    cursor: pointer;
    z-index: 5;
    font-size: 18px;
}
.btn-prev { left: 8px; }
.btn-next { right: 8px; }

/* スマホ用ドット */
.slider-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 10px;
}
.nav-dot { width: 10px; height: 10px; border-radius: 50%; background: #ccc; border: none; padding: 0; }
.nav-dot.active { background: var(--aqu-red); }

/* PC用サムネイル */
.thumbnail-list {
    display: flex;
    gap: 8px;
    margin-top: 10px;
    padding: 0;
    list-style: none;
}
.thumb-item {
    flex: 1;
    cursor: pointer;
    border: 2px solid transparent;
    position: relative;
}
.thumb-item.active { border-color: var(--aqu-red); }
.thumb-item img { width: 100%; display: block; opacity: 0.7; }
.thumb-item.active img, .thumb-item:hover img { opacity: 1; }

/* 動画サムネイルに「再生マーク」を重ねる */
.thumb-video::after {
    content: '▶';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    background: rgba(0,0,0,0.5);
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
}

/* --- レスポンシブ制御 --- */

/* 639px以下（スマホ）のとき */
@media (max-width: 639px) {
    .product-gallery {
        margin: 20px 0; /* 上下20px、左右は0pxにして画面端に合わせる */
        width: 100%;    /* 横幅いっぱい */
    }
    .slider-wrapper {
        border-left: none;  /* スマホで端に付く場合、枠線を消すとスッキリします（任意） */
        border-right: none;
        border-radius: 0;   /* 角丸をなくすとよりアプリ風になります（任意） */
    }
    .thumbnail-list { 
        display: none; 
    }
}

/* 640px以上（PC/タブレット）のとき */
@media (min-width: 640px) {
    .slider-dots { 
        display: none; 
    }
    .main-image-slider { 
        overflow-x: hidden; 
    }
}