/* ==================================== */
/* 共通設定 & PC/タブレット (769px以上) の設定 */
/* ==================================== */

.voice-item {
    padding: 3.2rem 1.5rem 3.7rem;
    background-color: #ffffff;
    height: auto;
    box-sizing: border-box;
    box-shadow: 0 0.3rem 0.6rem rgb(0 0 0 / 16%);
}

/* PC時：4カラムグリッドとして動作させる */
.swiper-pc-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 4カラム */
    gap: 4rem; /* アイテム間の隙間 */
    overflow: visible !important; /* Swiperのoverflowをリセット */
    
    /* Swiperナビゲーションは非表示 */
    position: static;
}

/* Swiper Wrapperをリセット */
.swiper-pc-grid .swiper-wrapper {
    display: contents; /* グリッドアイテムを直接子要素として扱う */
    padding-bottom: 0.5rem;
}

/* Swiperのナビゲーション要素はPCでは非表示のまま */
.voice-pagination,
.voice-prev,
.voice-next {
    display: none;
}

.voice-text {
    font-size: 1.6rem;
    line-height: 1.875em;
    margin-bottom: 3rem;
    flex-grow: 1;
    padding: 0 1.1rem;
    font-weight: 500;
}

.voice-meta {
    font-size: 1.8rem;
    display: flex;
    align-items: center;
    border-top: 1px solid #333;
    padding-top: 1.58rem;
    font-weight: bold;
    padding-left: 1.6rem;
}
.voice-meta-list {
    flex: 1;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.5rem;
}

.voice-meta-list>span {
    display: inline-block;
}

.voice-meta::before {
    content: "";
    margin-right: 1.5rem;
    background: url(../../../../uploads/top_voice_icon.svg) no-repeat;
    width: 2rem;
    height: 2.8rem;
    background-size: contain;
}

/* ==================================== */
/* スマホ/タブレット (1024px以下) のスタイル */
/* ==================================== */
@media screen and (max-width: 1024px) {

.swiper-pc-grid {
    grid-template-columns: repeat(2, 1fr); /* 2カラム */
    gap: 2rem; /* アイテム間の隙間 */
}

}

/* ==================================== */
/* スマホ/タブレット (768px以下) のスタイル */
/* ==================================== */
@media screen and (max-width: 768px) {
    
    .swiper-pc-grid {
        display: block;
        overflow: hidden !important; /* ★ これで左右のスクロールバーが消えるはずです ★ */
        padding: 0;
    }

    /* ▼▼▼ 変更点 ▼▼▼ */
    /* Swiperの左右の余白は、スライダー本体 (.voice-box-itemBox) に持たせる */
    .voice-list-wrapper {
        padding: 0; /* ★ 外側のラッパーからパディングを削除 ★ */
    }
    .voice-box-itemBox {
        padding-left: 13px; /* ★ Swiper本体に左右13pxの余白を追加 ★ */
        padding-right: 13px; /* ★ Swiper本体に左右13pxの余白を追加 ★ */
        box-sizing: border-box; /* パディングを含めて幅を計算 */
    }
    /* ▲▲▲ 変更点 ▲▲▲ */


    .swiper-pc-grid .swiper-wrapper {
        display: flex;
        width: 100%;
        align-items: stretch;
    }
    
    /* 1枚のスライドアイテム全体のスタイル */
    .voice-item.swiper-slide {
        /* ▼▼▼ 変更点 ▼▼▼ */
        /* Swiperのスペースと本体のパディングを考慮した幅を計算 */
        /* 100% から (左右のパディング合計 + スライド間のspaceBetween) を引く */
        /* スライド間のspaceBetweenが15pxなので、左右のパディング13px * 2 = 26px は不要 */
        /* Swiperの内部でwidthが計算されるため、原則として直接widthは指定しない方が良いですが */
        /* 今回は1枚表示なので、以下のように調整 */
         /* ★ 100%からspaceBetweenだけを引いた値 ★ */
         /* ★ spaceBetweenと同じ値を設定 ★ */
        /* ▲▲▲ 変更点 ▲▲▲ */
        padding: 2.5rem 1rem 3rem;
        box-shadow: 0 0.3rem 0.6rem rgb(0 0 0 / 16%);
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

    /* ページネーション（ドット）のスタイル */
    .voice-pagination {
        display: flex;
        justify-content: center;
        margin-bottom: 2rem;
        bottom: auto !important;
        left: auto !important;
        transform: none;
        position: relative !important;
        padding: 0 1.5rem;
    }
    .voice-pagination .swiper-pagination-bullet {
        background: #ccc;
        opacity: 1;
        width: 10px;
        height: 10px;
        margin: 0 5px;
    }
    .voice-pagination .swiper-pagination-bullet-active {
        background: #ff9900;
        width: 10px;
        height: 10px;
    }

   .voice-pagination  .swiper-pagination-bullet:hover {
        background: #ff9900;
    }
    
    .voice-text {
        font-size: 1.4rem;
        line-height: 1.429em;
        margin-bottom: 1.5rem;
        flex-grow: 1;
        padding: 0 0.9rem;
        font-weight: 500;
    }
    
    .voice-meta {
        font-size: 1.6rem;
        display: flex;
        align-items: center;
        border-top: 1px solid #333;
        padding-top: 1.58rem;
        font-weight: bold;
        padding-left: 3rem;
    }

    .voice-text {
        font-size: 1.4rem;
        line-height: 1.429em;
        margin-bottom: 1.5rem;
        flex-grow: 1;
        padding: 0 0.9rem;
        font-weight: 500;
    }
}

/* ==================================== */
/* スマホ/タブレット (576px以下) のスタイル */
/* ==================================== */
@media screen and (max-width: 576px) {
    
    .voice-box-itemBox {
        padding-left: 13px; /* ★ Swiper本体に左右13pxの余白を追加 ★ */
        padding-right: 13px; /* ★ Swiper本体に左右13pxの余白を追加 ★ */
        box-sizing: border-box; /* パディングを含めて幅を計算 */
    }
    
    .voice-text {
        font-size: 1.4rem;
        margin-bottom: 1.5rem;
        padding: 0 0.9rem;
    }
    
    .voice-meta {
        font-size: 1.6rem;
        padding-top: 1.58rem;
        padding-left: 2rem;
    }
    .voice-meta::before {
        margin-right: 1.5rem;
        width: 1.5rem;
        height: 2.2rem;
    }
}