/*
 * Swiper カスタムスタイル（トップページ ピックアップカルーセル）
 *
 * swiper-bundle のデフォルトを上書きするため、必ず swiper-bundle.min.css の後に読み込むこと。
 * 仕組み: コンテナ(.main_v_wrap)幅を絞り .swiper を overflow:visible にして左右の
 *         スライドを peek 表示。watchSlidesProgress で付与される swiper-slide-visible を
 *         使い、中央(可視)以外を半透明+縮小してフォーカス演出する（slidesPerView:1 前提）。
 */

/* ===== コンテナ / レイアウト ===== */
.swiper_bg {
    background: #fff;
    padding: 0 0 40px;
}

.main_v_wrap {
    width: 50%;
    margin: auto;
}

/* 左右の隣スライドを見せるため bundle の overflow:hidden を解除 */
.swiper {
    overflow: visible;
}

/* ===== スライドのフォーカス演出 ===== */
.swiper-slide .swiper-article {
    transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out;
}

.swiper-slide:not(.swiper-slide-visible) .swiper-article {
    pointer-events: none;
    opacity: 0.3;
    transform: scale(0.8);
}

.swiper-slide:not(.swiper-slide-visible) .swipe_detail {
    opacity: 0;
}

/* ===== カード ===== */
.swiper-article {
    width: 100%;
    margin: 40px auto;
    justify-content: center;
}

.swipe_img {
    aspect-ratio: 16 / 9;
    background-color: rgb(188, 188, 188);
    border-radius: 30px;
}

.swipe_img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 30px;
}

.swipe_detail {
    width: 100%;
    padding: 20px;
}

.swipe_cat {
    display: inline-block;
    width: auto;
    margin: 0 0 10px;
    padding: 5px 10px;
    border: solid 2px;
    border-radius: 3px;
    color: #ed6b00;
    font-size: 14px;
    font-weight: 600;
}

.swipe_title {
    padding: 0 0 20px;
    font-size: 20px;
    font-weight: bold;
}

.swipe_date {
    float: right;
    margin: 0;
    color: #9f9f9f;
}

/* ===== ページネーション ===== */
.swiper-horizontal>.swiper-pagination-bullets,
.swiper-pagination-bullets.swiper-pagination-horizontal,
.swiper-pagination-custom,
.swiper-pagination-fraction {
    bottom: -10px;
    left: 0;
    width: 100%;
}

/* ===== ナビゲーション矢印 ===== */
.swiper-button-next,
.swiper-button-prev {
    position: absolute;
    top: 38%;
    z-index: 10;
    width: calc(var(--swiper-navigation-size) / 44 * 27);
    height: var(--swiper-navigation-size);
    margin-top: calc(0px - (var(--swiper-navigation-size) / 2));
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--swiper-navigation-color, var(--swiper-theme-color));
}

.swiper-button-prev,
.swiper-rtl .swiper-button-next {
    left: -10px;
    right: auto;
}

/* Swiper v12 が自動注入する SVG を隠し、テーマ独自の img 矢印のみ表示 */
.swiper-button-next svg,
.swiper-button-prev svg {
    display: none;
}

.swiper-button-prev img {
    width: 100%;
    transform: scale(1.8);
}

.swiper-button-next img {
    width: 100%;
    transform: scale(1.8) rotate(180deg);
}

.swiper-horizontal {

    .swiper-button-next,
    .swiper-button-prev {
        margin-left: 0;
        margin-top: calc(0px - var(--swiper-navigation-size) / 2);
        top: var(--swiper-navigation-top-offset, 37%);
    }

    .swiper-button-prev {
        left: -15px;
    }

    .swiper-button-next {
        left: 98%;
    }
}

/* ===== レスポンシブ ===== */
@media screen and (max-width: 1060px) {
    .main_v_wrap {
        width: 70%;
    }

    .swiper-button-next,
    .swiper-button-prev {
        top: 38%;
    }
}

@media screen and (max-width: 767px) {
    .PC {
        display: none;
    }

    .main_v_wrap {
        width: unset;
    }

    .swiper-article {
        display: block;
        width: 100%;
        margin: 20px auto 40px;
        padding: 0 20px;
    }

    .swipe_img {
        width: 100%;
        height: 250px;
    }

    .swipe_title {
        padding: 0 0 5px;
    }

    .swipe_cat {
        margin: 0 0 5px;
    }

    .swiper-button-next,
    .swiper-rtl .swiper-button-prev {
        left: auto;
        right: 75px;
    }

    .swiper-button-next img {
        width: 100%;
        transform: scale(1.4) rotate(180deg);
    }
}