@charset "utf-8";


.about {
    .w962 {
        max-width: 962rem;
        width: 90%;
        margin: 0 auto;
        padding: 80rem 0;

        .p-title {
            margin-bottom: 39rem;
        }

        .about {
            display: flex;
            flex-direction: column;
            gap: 39rem;

            .item {
                display: flex;
                gap: 64rem;
                align-items: center;
                padding-bottom: 20rem;
                border-bottom: 1px solid #1e4d3e;

                .label {
                    min-width: 128rem;
                    border-radius: 3px;
                    background: #1e4d3e;
                    font-family: "M PLUS 1";
                    font-weight: 600;
                    font-size: 16px;
                    color: #fff;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                }

                .desc {
                    font-family: "M PLUS 1";
                    font-weight: 600;
                    font-size: 16px;
                    text-align: left;
                    color: #1e4d3e;
                }
            }
        }
    }
}


.access {
    .w962 {
        max-width: 962rem;
        width: 90%;
        margin: 0 auto;
        padding-bottom: 80rem;

        .title {
            font-family: "M PLUS 1";
            font-weight: 500;
            font-size: 20px;
            text-align: left;
            color: #1e4d3e;
            margin-bottom: 20rem;
        }

        .map {
            height: 523rem;

            @media (max-width: 900px) {
                height: 170rem;
            }

            iframe {
                width: 100%;
                height: 100%;
                border: none;


            }
        }
    }
}

.overview {
    .w962 {
        max-width: 962rem;
        width: 90%;
        margin: 0 auto;
        padding-bottom: 80rem;

        @media(max-width:900px) {
            max-width: calc(312/390*100%);
        }

        .title {
            font-family: "M PLUS 1";
            font-weight: 500;
            font-size: 20px;
            text-align: left;
            color: #1e4d3e;
            margin-bottom: 20rem;
        }
    }
}

.thumb-slider-area {

    position: relative;

    .swiper-button-prev,
    .swiper-rtl .swiper-button-next {
        left: -94rem;
        top: 297rem;

        @media(max-width:900px) {
            left: -19rem;
            top: 33%
        }
    }

    .swiper-button-next,
    .swiper-rtl .swiper-button-prev {
        right: -94rem;
        left: auto;
        top: 297rem;

        @media(max-width:900px) {
            right: -19rem;
            top: 33%
        }
    }

    .swiper-button-prev:after,
    .swiper-rtl .swiper-button-next:after {
        content: '';
        background: url(/system_panel/uploads/images/20251204005630442967.png) no-repeat center/contain;
        width: 48rem;
        height: 48rem;

        @media(max-width:900px) {
            width: 31rem;
            height: 31rem;
        }
    }

    .swiper-button-next:after,
    .swiper-rtl .swiper-button-prev:after {
        content: '';
        width: 48rem;
        height: 48rem;
        background: url(/system_panel/uploads/images/20251204005630546346.png) no-repeat center/contain;

        @media(max-width:900px) {
            width: 31rem;
            height: 31rem;
        }
    }
}

/* メインスライダー */
.mainSwiper {
    width: 100%;
    margin-bottom: 20px;



}

.mainSwiper .swiper-slide img {
    width: 100%;
    height: auto;
    border-radius: 10px;
}

/* サムネイル */
.thumbSwiper {
    width: 100%;
    overflow: visible;
}

.thumbSwiper .swiper-wrapper {
    display: grid !important;
    grid-template-columns: repeat(5, 1fr);

    grid-template-rows: repeat(2, auto);

    gap: 10rem;
    transform: translate3d(0, 0, 0) !important;

    @media(max-width:900px) {
        gap: 5rem 4rem;
    }
}

.thumbSwiper .swiper-slide {
    width: 184rem;
    opacity: 0.5;
    cursor: pointer;
    transition: opacity 0.3s;

    @media(max-width:900px) {
        width: 100%
    }
}

.thumbSwiper .swiper-slide-thumb-active {
    opacity: 1;
}

.thumbSwiper .swiper-slide img {
    width: 100%;
    height: auto;
    border-radius: 6px;
}



/* 管理画面用 */
.gjs-dashed {

    .mainSwiper,
    .thumbSwiper {
        .swiper-wrapper {
            flex-direction: column !important;
            height: auto !important;
        }
    }
}