:root {
    --swiper-width: 95%;
    --swiper-margin: 30px auto 0px;
    /* --swiper-max-height: 404px;*/
    --swiper-perspective: 1200px;
    --swiper-swiper-slide-width: 1000px;
    --swiper-wrapper_youtube-wrap-iframe-height: 400px;
    --swiper-pagination-top: 10px;
    --swiper-pagination-bottom: 10px:
    --swiper-pagination-color: #ffffff;
    --swiper-button-color: #ffffff;
    --swiper-button-pause-color: #333333;
    --swiper-button-pause-background-color: #ffffff;
    --swiper-wrapper_youtube-wrap-iframe-aspect-ratio: 16 / 9;
}

.swiperArea {
    width: 100%;
    height: 100%;
    padding: 0px;
    position: relative;
    overflow: hidden;
    margin: var(--swiper-margin);

    &:has(.swiper.coverflow) {
        overflow: initial !important;

        @media screen and (min-width:1100px) {
            max-height: var(--swiper-max-height, auto);
        }

        @media screen and (max-width:1099px) {
            max-height: auto;
        }

        @media screen and (max-width:767px) {
            max-height: auto;
            margin: 0px auto 0px;
        }

        & .swiper-pagination {
            position: relative;
            top: var(--swiper-pagination-top, 0);
            left: 0px;
            width: 100%;
        }
    }

    &:not(.swiper.coverflow) {
        & .swiper-pagination {
            position: relative;
            bottom: var(--swiper-pagination-bottom, 0);
            left: 0px;
            width: 100%;
        }
    }

    & .swiper {
        margin: 0 auto;
        position: relative;

        @media screen and (max-width: 430px) {
            /* スライダー本体を画面幅にフィットさせる */
            width: 100% !important; /* 親（画面幅）いっぱい */
            max-width: 430px; /* 基本デザインの幅を上限にする */
        }

        & .swiper-slide {
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 20px;
            visibility: visible !important;

            @media screen and (max-width: 430px) {
                width: 100% !important;
            }

            & img {
                display: block;
                width: 100%;
                height: 100%;
                object-fit: contain;

                @media screen and (max-width: 430px) {
                    display: block !important;
                    width: 100% !important; /* 親 = スライドの幅にピッタリ */
                    height: auto !important; /* 比率を維持 */
                    max-width: 100%; /* 念のため。元の2倍サイズよりは小さく表示 */
                    max-height: none !important; /* さっきの 640px 固定を解除 */
                }
            }

            & .wrapper_youtube-wrap {
                width: 100%;
                height: 100%;

                & .iframe-wrap {
                    width: 100%;
                    height: 100%;

                    & iframe {
                        display: block;
                        width: 100%;
                        height: 100%;
                        object-fit: cover;
                    }
                }
            }
        }
    }

        & .swiper.fade,
        & .swiper.cube,
        & .swiper.flip {
            width: 100%;
            margin: 0 auto;
            perspective: var(--swiper-perspective);
            position: relative;

            @media screen and (min-width:1000px) {
                max-height: auto;
            }

            @media screen and (max-width:999px) {
                max-height: auto;
            }
        }

        & .swiper.coverflow {
            overflow: initial !important;
            width: var(--swiper-width);
            margin: 0 auto;
            perspective: var(--swiper-perspective);
            position: relative;

            @media screen and (min-width:1100px) {
                max-height: var(--swiper-max-height, auto);
            }

            @media screen and (max-width:1099px) {
                max-height: auto;
            }

            & .swiper-wrapper {
                transform-style: preserve-3d;
            }

            & .swiper-slide {
                width: var(--swiper-swiper-slide-width, 95%);
                height: 100%;
                display: flex;
                justify-content: center;
                align-items: center;
                font-size: 20px;
                opacity: 1 !important;
                visibility: visible !important;

                @media screen and (min-width:1100px) { /* 画面横幅が、--swiper-swiper-slide-width以上の場合 */
                    max-width: var(--swiper-swiper-slide-width, 1000px);
                }

                @media screen and (max-width:1099px) {
                    max-width: 100%;
                }

                & img {
                    display: block;
                    max-width: 100%;
                    width: 100%;
                    height: 100%;
                    object-fit: contain;

                    @media screen and (min-width:1000px) {
                        max-height: var(--swiper-max-height);
                    }

                    @media screen and (max-width:999px) {
                        max-height: auto;
                    }
                }

                & .wrapper_youtube-wrap {
                    width: 100%;
                    height: 100%;

                    & .iframe-wrap {
                        width: 100%;
                        height: 100%;

                        & iframe {
                            display: block;
                            max-height: 100%;
                            width: 100%;
                            object-fit: cover;

                            @media screen and (min-width:1000px) { /* 画面横幅が、--swiper-swiper-slide-width以上の場合 */
                                max-width: var(--swiper-swiper-slide-width);
                                height: var(--swiper-wrapper_youtube-wrap-iframe-height);
                            }

                            @media screen and (max-width:999px) {
                                max-width: 100%;
                                height: calc(var(--swiper-wrapper_youtube-wrap-iframe-height) / 1.2);
                            }

                            @media screen and (max-width:767px) {
                                max-width: 100%;
                                height: calc(var(--swiper-wrapper_youtube-wrap-iframe-height) / 1.5);
                            }

                            @media screen and (max-width:410px) {
                                max-width: 100%;
                                height: var(--swiper-wrapper_youtube-wrap-iframe-height);
                            }
                        }
                    }
                }
            }
        }

    & .swiper-pagination {
        --swiper-theme-color: var(--swiper-pagination-color);
    }
    /* 前後ボタン領域 */
    & .navigation-container {
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 100%;
        max-width: 100%;
        height: 100%;
        z-index: 10;
        pointer-events: none; /* 下のスライドを触れるようにする */
    }
    /* 前後ボタン */
    & .swiper-button-prev,
    & .swiper-button-next {
        top: 50%;
        transform: translateY(-50%);
        position: absolute;
        pointer-events: auto; /* ボタンだけはクリック可能にする */
        margin: 0px;
        color: var(--swiper-button-color);
    }

    & .swiper-button-prev {
        left: 10px;
    }

    & .swiper-button-next {
        right: 10px;
    }
    /* 縦スライド時 */
    &:has(.slide-vertical) .swiper-button-prev {
        left: calc(50% - var(--swiper-swiper-slide-vertical-icon-width, 22px));
        margin: 0;
        top: 30px;

        & .swiper-navigation-icon {
            transform: rotate(270deg);
        }
    }

    &:has(.slide-vertical) .swiper-button-next {
        bottom: 0;
        left: calc(50% - var(--swiper-swiper-slide-vertical-icon-width, 22px));
        margin: 0;
        top: auto;

        & .swiper-navigation-icon {
            transform: rotate(90deg);
        }
    }
    /* 停止・再生ボタン */
    & .swiper-button-pause {
        position: absolute;
        bottom: 0px;
        left: 50%;
        transform: translateX(-50%);
        width: 100%;
        max-width: var(--swiper-swiper-slide-width);
        z-index: 10;
        cursor: pointer;
        /* 再生中（停止ボタン表示） */
        &::after {
            position: absolute;
            right: 10px;
            bottom: 0px;
            transform: translateY(-50%);
            content: '❚❚';
            font-size: 16px;
            padding: 0px 4px;
            color: var(--swiper-button-pause-color, #333333);
            background-color: var(--swiper-button-pause-background-color, #ffffff);
        }
        /* 停止中（再生ボタン表示） */
        &.paused::after {
            position: absolute;
            right: 10px;
            bottom: 0px;
            transform: translateY(-50%);
            content: '▶';
            font-size: 16px;
            padding: 0px 4px;
            color: var(--swiper-button-pause-color, #333333);
            background-color: var(--swiper-button-pause-background-color, #ffffff);
        }
    }
}    
    /* スライド画像が2枚未満の際に、再生・停止ボタンを非表示にする */
    .swiperArea:not(:has(.swiper-slide:nth-child(2))) .swiper-button-pause {
        display: none;
    }