@charset "utf-8";

/**
 * LOUNIE ランキングスライダー専用スタイル
 */

/* スライダー全体の囲いと余白調整（PC版） */
.ranking-swiper {
    padding: 20px 60px;
    position: relative;
    overflow-y: visible;
}

/* スライダーのタイトル見出し設定 */
.inner .plus-ttl {
    text-align: center;
    font-weight: 400;
    font-style: normal;
    font-size: 2rem !important;
    margin-bottom: 1rem;
}

/* 白丸のナビゲーション矢印ボタン（共通） */
.ranking-swiper .swiper-button-next,
.ranking-swiper .swiper-button-prev {
    color: #111;
    background: rgba(225, 225, 225, 0.8);
    width: 60px;
    height: 60px;
    border-radius: 50%;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.05);
    margin-top: -75px;
}

/* 矢印アイコンのサイズ調整 */
.ranking-swiper .swiper-button-next::after,
.ranking-swiper .swiper-button-prev::after {
    font-size: 2rem;
}


/* ==========================================
 * モバイル（スマホ）用レイアウト調整
 * ========================================== */
@media screen and (max-width: 769px) {

    /* スマホ画面時の横幅いっぱいにするための余白調整 */
    .ranking-swiper {
        padding: 20px 10px;
    }

    /* 矢印ボタンのサイズをスマホ向けにコンパクト化 */
    .ranking-swiper .swiper-button-next,
    .ranking-swiper .swiper-button-prev {
        width: 30px;
        height: 30px;
        margin-top: -50px;
    }

    /* スマホ版の矢印アイコンサイズ */
    .ranking-swiper .swiper-button-next::after,
    .ranking-swiper .swiper-button-prev::after {
        font-size: 1.3rem;
    }
}