.elementor-widget-media-carousel .elementor-carousel-image-overlay{font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-2170 .elementor-element.elementor-element-24264e8.elementor-skin-slideshow .elementor-main-swiper:not(.elementor-thumbnails-swiper){margin-bottom:10px;}.elementor-2170 .elementor-element.elementor-element-24264e8 .elementor-main-swiper:not(.elementor-thumbnails-swiper){height:530px;}.elementor-2170 .elementor-element.elementor-element-24264e8 .elementor-thumbnails-swiper .elementor-carousel-image{aspect-ratio:4 / 3;}.elementor-2170 .elementor-element.elementor-element-24264e8 .elementor-swiper-button{font-size:20px;}@media(max-width:1024px){.elementor-2170 .elementor-element.elementor-element-24264e8.elementor-skin-slideshow .elementor-main-swiper:not(.elementor-thumbnails-swiper){margin-bottom:10px;}}@media(max-width:767px){.elementor-2170 .elementor-element.elementor-element-24264e8.elementor-skin-slideshow .elementor-main-swiper:not(.elementor-thumbnails-swiper){margin-bottom:10px;}.elementor-2170 .elementor-element.elementor-element-24264e8 .elementor-main-swiper:not(.elementor-thumbnails-swiper){height:190px;}}/* Start custom CSS for media-carousel, class: .elementor-element-24264e8 *//* ==========================================
   1. パソコン画面（横幅1025px以上）の設定
   ========================================== */
@media (min-width: 1025px) {
    /* ギャラリー全体の枠を50%幅にして、はみ出た分を隠す */
    .elementor-2170 .elementor-element.elementor-element-24264e8 .elementor-thumbnails-swiper {
        max-width: 50% !important;
        margin-left: 0 !important;
        margin-right: auto !important;
        overflow: hidden !important;
    }
    
    /* 横並びの自動移動を固定し、隙間を設定 */
    .elementor-2170 .elementor-element.elementor-element-24264e8 .elementor-thumbnails-swiper .swiper-wrapper {
        transform: translate3d(0px, 0px, 0px) !important;
        display: flex !important;
        gap: 10px !important; /* サムネイル同士の隙間 */
    }
    
    /* 50%の枠内で2枚ぴったり並ぶように幅を調整（1枚あたり約25%幅） */
    .elementor-2170 .elementor-element.elementor-element-24264e8 .elementor-thumbnails-swiper .swiper-slide {
        width: calc(50% - 5px) !important;
        margin-right: 0 !important;
        flex-shrink: 0 !important;
    }
}

/* ==========================================
   2. モバイル画面（横幅767px以下）の設定
   ========================================== */
@media (max-width: 767px) {
    /* スマホでは画面の横幅いっぱいにギャラリーを広げる */
    .elementor-2170 .elementor-element.elementor-element-24264e8 .elementor-thumbnails-swiper {
        max-width: 100% !important;
        overflow: hidden !important;
    }
    
    /* 横並びの自動移動を固定し、隙間を設定 */
    .elementor-2170 .elementor-element.elementor-element-24264e8 .elementor-thumbnails-swiper .swiper-wrapper {
        transform: translate3d(0px, 0px, 0px) !important;
        display: flex !important;
        gap: 10px !important; /* スマホ時のサムネイル同士の隙間 */
    }
    
    /* 画面幅いっぱいに2枚が綺麗に並ぶように幅を調整（1枚あたり約50%幅） */
    .elementor-2170 .elementor-element.elementor-element-24264e8 .elementor-thumbnails-swiper .swiper-slide {
        width: calc(50% - 5px) !important;
        margin-right: 0 !important;
        flex-shrink: 0 !important;
    }
}/* End custom CSS */