/* 
 * カスタム画像ギャラリー用スタイル 
 */

/* ギャラリーコンテナ */
.js-gallery-container {
    position: relative;
}

/* メイン画像ラッパー */
.js-gallery-main-wrapper {
    position: relative;
    overflow: hidden;
    border-radius: 4px;
    background-color: #000;
}

/* メイン画像 */
.js-gallery-main {
    transition: opacity 0.4s ease-in-out;
}

/* メイン画像切り替え時の中間状態（JSで制御） */
.js-gallery-main.is-animating {
    opacity: 0.6;
}

/* サムネイル画像 */
.js-gallery-thumb {
    cursor: pointer;
    transition: all 0.3s ease;
    opacity: 0.6;
}

/* ホバー時および選択中（アクティブ）のサムネイル */
.js-gallery-thumb:hover,
.js-gallery-thumb.is-active {
    opacity: 1;
}

/* アクティブなサムネイルの装飾（枠線を付ける場合など） */
.js-gallery-thumb.is-active {
    outline: 2px solid var(--color-main);
    outline-offset: -2px;
}