@import url("/common/js/splide/splide.min.css");
.podcast #podcast_wrapper {
    position: relative;
    background-image: url(/include/podcast/images/bg.jpg);
    background-repeat: repeat;
    width: 100%;
    height: 100%;
    padding: 5rem 0;
    overflow:hidden;
}

.podcast #podcast_wrapper_inner {
    position: relative;
    width: 73.2%;
    height: 100%;
    margin: 0 auto;
    display: grid;
    grid-template: auto auto/ minmax(auto, 31.7%) 1fr;
}

.podcast #podcast_wrapper_inner .podast_title {
    position: relative;
    display: grid;
    grid-template: auto auto auto auto / auto;
    grid-column: 1 / 2;
    grid-row: 1 / 2;
}

.podcast #podcast_wrapper_inner .podast_title h2 {
    font-family: "Poppins", sans-serif;
    font-weight: 800;
    font-style: normal;
    font-size: clamp(3.6rem, -5.6857rem + 9.9048vw, 6.2rem);
    color: #00A0DA;
    letter-spacing: .075em;
    line-height: .8;
}

.podcast #podcast_wrapper_inner .podast_title p {
    font-size: clamp(1.6rem, 1.432rem + 0.64vw, 2.2rem);
    letter-spacing: .05em;
    line-height: 1.75;
    color: #fff;

}

.podcast #podcast_wrapper_inner .podast_title p:first-of-type {
    align-self: start;
}

.podcast #podcast_wrapper_inner .podast_title p:last-of-type {
    font-size: clamp(1.6rem, 1.376rem + 0.8533vw, 2.4rem);
    letter-spacing: 0;
    line-height: 1.5;
}

.podcast #podcast_wrapper_inner .list_banner {
    align-self: center;
    grid-column: 1 / 2;
    grid-row: 2 / 3;
}



/* ///////////////ボタン */
/* ボタン全体のコンテナ */
.podcast #podcast_wrapper_inner .list_banner .list_btn {
    position: relative;
    width: 73.5%;
    overflow: visible;
    margin-left: 5%;

}

/* 【固定】土台の画像：これは動きません */
.podcast #podcast_wrapper_inner .list_banner .list_btn img:first-of-type {
    width: 100%;
    display: block;
    transition: none;
    /* 動きを完全に無効化 */
}

/* 【移動対象】矢印を包むコンテナだけを動かす */
.podcast #podcast_wrapper_inner .list_banner .list_btn .arrow_wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
    /* 右への移動アニメーション */
    transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1);
}

/* 矢印画像（通常・ホバー）の重なり設定 */
.podcast #podcast_wrapper_inner .list_banner .list_btn .arrow_wrapper img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    /* ふわっと切り替わるフェードアニメーション */
    transition: opacity 0.5s ease;
}

/* 初期状態 */
.arrow_normal {
    opacity: 1;
}

.arrow_hover {
    opacity: 0;
}

/* -----------------------------------------
   ホバー時のアクション
------------------------------------------ */

/* 矢印の「箱」だけを右に20px移動させる */
.podcast #podcast_wrapper_inner .list_banner a:hover .arrow_wrapper {
    transform: translateX(20px);
}

/* 通常の矢印を消し、ホバー用を出す（ふわっと切り替え） */
.podcast #podcast_wrapper_inner .list_banner a:hover .arrow_normal {
    opacity: 0;
}

.podcast #podcast_wrapper_inner .list_banner a:hover .arrow_hover {
    opacity: 1;
}

/* ボタン全体を少し暗くする（任意） */
.podcast #podcast_wrapper_inner .list_banner a:hover {
    opacity: .9;
}

/* スライド部分 */
/* スライド部分 */
#podcast_wrapper .splide {
    position: relative;
    grid-column: 2 / 3;
    grid-row: 1 / 3;
}

/* スライド内の画像を親（スライド枠）にフィットさせる */
#podcast_wrapper .splide__slide img {
    width: 100%;
    height: auto;
    /* 縦横比を維持 */
    display: block;
    /* 下の隙間を消す */
    object-fit: cover;
    /* 枠いっぱいに収める場合 */

}

#podcast_wrapper .splide__list a img:hover {
    opacity: 0.8;
    filter: alpha(opacity=80);
    -ms-filter: "alpha( opacity=80 )";
}


/* 矢印prev表示しない */
#podcast_wrapper .splide__arrow--prev {
    display: none;
}

/* 矢印next */
/* 既存の矢印（SVG）を消す */
.splide__arrow--next svg {
    display: none;
}

/* 新しい画像を背景として設定する */
#podcast_wrapper .splide__arrow--next {
    background-image: url('/include/pickup/images/icon_next.svg');
    /* 画像のパスを指定 */
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    /* ボタンのサイズに画像を合わせる */
    background-color: transparent;
    /* 背景色（丸いグレーなど）が不要なら透明に */
    border: none;
    right: 0;
    /* 右端からの距離 */
    opacity: 1;


    /* ボタン自体のサイズ調整（画像の大きさに合わせて変更してください） */
    width: 4.5rem;
    height: 4.5rem;
}

/* ホバー時の不透明度などを調整 */
#podcast_wrapper .splide__arrow--next:hover {
    opacity: 0.8;
    filter: alpha(opacity=80);
    -ms-filter: "alpha( opacity=80 )";
}

    #podcast_wrapper .list_banner_sp {
    display: none;
}

    #podcast_wrapper .list_banner {
    display: block;
}
.splide__track,#podcast_wrapper .splide{
    width:100%;
    overflow: hidden;;
}

/*===============================================
●style.css 画面の横幅が1500pxまで
===============================================*/
@media screen and (max-width: 1500px) {
    .podcast #podcast_wrapper_inner .podast_title h2 {
        font-size: 5rem;
    }

    .podcast #podcast_wrapper_inner .podast_title p,
    .podcast #podcast_wrapper_inner .podast_title p:last-of-type {
        font-size: 1.6rem;
    }
}

/*===============================================
●style.css 画面の横幅が1024pxまで
===============================================*/
@media screen and (max-width: 1024px) {
    .podcast #podcast_wrapper {
        padding: 4rem 0;
    }

    .podcast #podcast_wrapper_inner {
        width: 93%;
        grid-template: auto auto auto / auto;
    }



    .podcast #podcast_wrapper_inner .podast_title h2 {
        font-size: 5rem;
        padding-bottom: .8rem;
    }



    .podcast #podcast_wrapper_inner .podast_title p,
    .podcast #podcast_wrapper_inner .podast_title p:last-of-type {
        font-size: 2.2rem;
        letter-spacing: .05em;
    }

    .podcast #podcast_wrapper_inner .podast_title p:last-of-type {
        padding-top: 2rem;
        padding-bottom: 2rem;
    }

    #podcast_wrapper .splide {
        position: relative;
        grid-column: 1 / 2;
        grid-row: 2 / 3;
    }

    #podcast_wrapper .splide__arrow--next {
        right: 2%;
    }

        #podcast_wrapper .list_banner_sp {
        display: block;
        width: 44%;
        margin: 0 auto;
        margin-top: 4rem;
    }

        #podcast_wrapper .list_banner {
        display: none;
    }

    /* ///////////////ボタン */
    /* ボタン全体のコンテナ */
    .podcast #podcast_wrapper_inner .list_banner_sp .list_btn {
        position: relative;
        width: 100%;
        overflow: visible;
        margin-left: 0;

    }

    /* 【固定】土台の画像：これは動きません */
    .podcast #podcast_wrapper_inner .list_banner_sp .list_btn img:first-of-type {
        width: 100%;
        display: block;
        transition: none;
        /* 動きを完全に無効化 */
    }

    /* 【移動対象】矢印を包むコンテナだけを動かす */
    .podcast #podcast_wrapper_inner .list_banner_sp .list_btn .arrow_wrapper {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 10;
        /* 右への移動アニメーション */
        transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1);
    }

    /* 矢印画像（通常・ホバー）の重なり設定 */
    .podcast #podcast_wrapper_inner .list_banner_sp .list_btn .arrow_wrapper img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        /* ふわっと切り替わるフェードアニメーション */
        transition: opacity 0.5s ease;
    }
}

/*===============================================
●style.css 画面の横幅が500pxまで
===============================================*/
@media screen and (max-width: 500px) {
    .podcast #podcast_wrapper_inner .list_banner {
        grid-row: 3 / 4;
        grid-column: 1 / 2;
        /* margin: 2rem auto; */
        position: relative;
        width: 100%;
        padding: 4rem 0;
        padding-bottom: 0;
    }
    .podcast #podcast_wrapper_inner .podast_title h2{
        font-size:3.6rem;
    }
    .podcast #podcast_wrapper_inner .podast_title p, .podcast #podcast_wrapper_inner .podast_title p:last-of-type{
        font-size:1.6rem;
    }
    .podcast #podcast_wrapper_inner{
        width:100%;
    }
    .podcast #podcast_wrapper_inner .podast_title {
    position: relative;
    display: grid;
    grid-template: auto auto auto auto / auto;
    grid-column: 1 / 2;
    grid-row: 1 / 2;
    width: 93%;
    margin-left: auto;
    margin-right: auto;
}

}