@import url("/include/now_onair/css/font.css");
@import url("/include/now_onair/css/slide.css");



#nowonair_wrapper {
    background-color: #2da0cc;
    background-image: url('/include/now_onair/images/bg.jpg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    font-optical-sizing: auto;
    position: relative;

    font-size: 1.6rem;
    padding: 20px 0 78px 0;
    width: 100%;
    /* いらない */
    height: 100%;

}

#nowonair_wrapper .slider-container {
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
    /* padding-top: 20px; */
    /* padding: 30px 0 70px 0; */
}

/* 💡 追加: slider-container に高さを設定し、paddingを相殺 */
/* #nowonair_wrapper .slider-container {
    height: calc(100% - 98px - 78px);
} */

.slider-wrapper {
    /* slide.css にも display: flex; transition: ...; があることを確認してください */
    height: 100%;
    padding-top: 6.6rem;
}

#nowonair_wrapper .slide-item {
    position: relative;
    height: 100%;
    min-height: clamp(0rem, -6.895rem + 26.27vw, 24.625rem);
    background-color: rgba(229, 248, 255, 0.9);
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    padding: clamp(26px, calc(16.909px + 1.515vw), 46px) clamp(20px, calc(-7.273px + 4.545vw), 80px);
    color: #343f43;
    box-shadow: 0px 5px 5px 0px rgba(68, 68, 68, 0.14), 0px 0px 15px 15px rgba(255, 255, 255, 0.1);
    border: #fff 3px solid;
    /* line-height: 1.4; */
    position: relative;
    width: 60.78%;
    font-weight: 500;
    /* margin: 0 auto; */
    height: 100%;
    position: relative;
}

/* now on air矢印 */
#nowonair_arrow {
    position: absolute;
    right: 0;
    left: 0;
    /* top: 30px; */
    margin: 0 auto;
    /* width: 10.78%; */
    max-width: 239px;
}



#nowonair_arrow img {
    width: 100%;
    /* max-width: 202px; */
}

#nowonair_arrow {
    position: absolute;
    /* topを0にした上で、自身の高さの61.2%分、上にずらす */
    top: 0;
    transform: translateY(-61.2%);

    /* 親要素 (.is-centered) からのはみ出しを許容する場合 */
    z-index: 10;
}


.nowonair_inner {
    display: grid;
    position: relative;
    /* grid-template-columns: 1fr 1fr; */
    grid-template-columns: 50% 50%;
    grid-template-rows: 2rem minmax(auto, 16rem) auto 6.8rem 2rem;
    gap: 0px 2rem;
    grid-auto-flow: row;
    grid-template-areas:
        "nowonair_thumb time"
        "nowonair_thumb title"
        "nowonair_thumb icons"
        "nowonair_thumb radiko"
        "nowonair_thumb agree";
    line-height: 1.2;
    align-items: start;

}

.nowonair_inner .time_date {
    grid-area: time;
    position: relative;
    display: grid;
    grid: minmax(auto, 2rem) / 2rem 1fr;
    column-gap: 1rem;
    color: #00A0DA;
    font-size: 2rem;
    font-weight: bold;
    height: 100%;
    line-height: 1;
    align-items: normal;
}

.nowonair_inner .time_date img,
.nowonair_inner .ppl img {
    width: 100%;
}

.nowonair_inner .time_date p:nth-of-type(2) {
    font-size: clamp(1.4rem, 1.2268rem + 0.6443vw, 2rem);
    font-weight: 500;
}

.nowonair_inner .titlePpl {
    grid-area: title;
    position: relative;
    /* height: 16rem; */
    margin-top: .9rem;
}

.nowonair_inner .title {
    font-size: clamp(1.20rem, calc(0.62vw + 1.05rem), 1.80rem);
    font-weight: 600;
    line-height: 2.6rem;
    margin-bottom: clamp(0.813rem, 0.795rem + 0.07vw, 0.875rem);
}

.nowonair_inner .title p {
    border-bottom: #0270a7 clamp(0.188rem, 0.152rem + 0.13vw, 0.313rem) dotted;
    padding-bottom: clamp(0.375rem, 0.34rem + 0.13vw, 0.5rem);
    padding: 0;
    padding-bottom: .2rem;
    margin: 0;
    /* margin-top: 1rem; */

}

.nowonair_inner .ppl {

    position: relative;
    display: grid;
    grid: minmax(auto, 24px) / 2rem 1fr;
    font-weight: 400;
    font-size: clamp(1.2rem, 1.1423rem + 0.2148vw, 1.4rem);
    align-items: center;
    line-height: 0;
}

/* ///////////////marquee////////////////// */
/* .marquee-content {
    display: flex;  
    padding-left: 0;
    will-change: transform;
}

.marquee-content span {
    display: block;
    padding-right: 5rem;   
    flex-shrink: 0;      
}

@keyframes marquee-left {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%); 
    }
}

.marquee-container:hover .marquee-content {
    animation-play-state: paused;
} */


.marquee-container {
    width: 100%;
    /* コンテナの幅 */
    overflow: hidden;
    /* はみ出た部分を隠す */
    padding: 10px 0;
    box-sizing: border-box;
}

.marquee-content {
    display: inline-block;
    white-space: nowrap;
    padding-left: 0;
    /* animation はここから削除し、.is-moving へ移動 */
}

/* JavaScriptで付与されるクラス */
.marquee-content.is-moving {
    animation: marquee-loop 25s linear infinite;
}

/* 動かないときは2つ目のリピート用spanを隠す */
.marquee-content:not(.is-moving) span:last-child {
    display: none;
}

.marquee-content span {
    display: inline-block;
    padding-right: 3rem;
    /* テキスト同士の隙間 */
}

/* アニメーションの定義 */
@keyframes marquee-loop {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
        /* 左に全幅分移動 */
    }
}

/* ホバーで一時停止させる（オプション） */
.marquee-container:hover .marquee-content {
    animation-play-state: paused;
}

/* /////////////////////////// */

/* //////////アイコン///////// */
.nowonair_inner .icons {
    position: relative;
    grid-area: icons;
    height: 2.5rem;
    margin-bottom: 1.5rem;
    align-self: end;
}

.nowonair_inner .icons ul {
    display: grid;
    grid: minmax(auto, 25px) / minmax(auto, 50px) minmax(auto, 50px) minmax(auto, 50px);
    position: relative;
    width: 31.25%;
    margin-left: 0;
    padding-left: 0;
    list-style-type: none;
    margin-top: 0;
}

.nowonair_inner .icons ul li img {
    position: relative;
    width: 50%;
}

/* ///////////radiko player//////////// */
.nowonair_inner .radiko_player#radiko_nowplay {
    background-color: #1FA4E9;
    position: relative;
    width: 100%;
}

.nowonair_inner .radiko_player .radiko_inner iframe {
    position: relative;
}

.nowonair_inner .radiko_player#radiko_nowplay .radiko_inner iframe.radiko_l {
    display: block;
}

.nowonair_inner .radiko_player#radiko_nowplay .radiko_inner iframe.radiko_s {
    display: none;
}

.nowonair_inner .radiko_player {
    grid-area: radiko;
    border-radius: 1rem;
    height: 100%;
    padding: 1.4rem 7.5%;
    position: relative;
}



.nowonair_inner .radiko_player#radiko_nowplay .radiko_inner {
    display: grid;
    grid: 1fr / minmax(2.42rem, 5%) minmax(11.4rem, auto) auto;
    gap: 0 2.5%;
    height: 4rem;
    align-content: center;
    align-items: center;
}


.radiko_s_container {
    display: none;
}

/* タイムフリー */
.nowonair_inner .radiko_player.radiko_timefree {
    background-color: #E73C64;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* 視聴予約 */
.nowonair_inner .radiko_player.radiko_reserve {
    background-color: #2fa1e9;
    display: flex;
    justify-content: center;
    align-items: center;
}

.nowonair_inner .radiko_player.radiko_timefree p.center,
.nowonair_inner .radiko_player.radiko_reserve p.center {
    font-size: clamp(1.80rem, calc(0.83vw + 1.61rem), 2.60rem);
    color: #fff;
    font-weight: bold;
}

.nowonair_inner .radiko_player.radiko_timefree p.center a,
.nowonair_inner .radiko_player.radiko_reserve p.center a {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    line-height: 2.5;
    font-size: 2.6rem;
    font-weight: 500;
}

.nowonair_inner .radiko_player.radiko_timefree:hover,
.nowonair_inner .radiko_player.radiko_reserve:hover {
    opacity: 0.8;
    filter: alpha(opacity=80);
    -ms-filter: "alpha( opacity=80 )";
    /* background-color:rgba(231, 60, 100, 0.8); */
}

.nowonair_inner .radiko_player.radiko_timefree a,
.nowonair_inner .radiko_player.radiko_timefree a:visited,
.nowonair_inner .radiko_player.radiko_reserve a,
.nowonair_inner .radiko_player.radiko_reserve a:visited {
    color: #fff;
    text-decoration: none;
}

.nowonair_inner .radiko_player .radiko_inner iframe {
    height: 50px;
    padding: 0;
    margin: 0;


    vertical-align: middle;
    /* margin-left: -3%;
    width: 120%; */
    vertical-align: middle;
    /* margin-left: -10%; */
}

.nowonair_inner .radiko_player .radiko_inner .ft14 {
    font-weight: bold;
    color: #fff;
}

.nowonair_inner .radiko_player .radiko_inner .ft10 a,
.nowonair_inner .radiko_player .radiko_inner .ft10 a:visited {
    color: #fff;
    text-underline-offset: .2rem;
}

.nowonair_inner .radiko_player .radiko_inner img {
    max-width: 24.2px;
}

/* //////////radiko下注意書き//////////// */
.nowonair_inner .radikoAgree {
    grid-area: agree;
    font-size: .9rem;
    align-self: self-end;

}

/* ////////////////nowonair画像//////////////// */
.nowonair_inner .nowonair_thumb {
    grid-area: nowonair_thumb;
    text-align: center;
}

.nowonair_inner .nowonair_thumb img {
    display: block;
    width: 100%;
    max-width: 480px;
    margin-left: auto;
    margin-right: auto;
    position: relative;
}

/* --- ナビゲーションボタン設定 -- */
#nowonair_wrapper .nav-button {
    position: absolute;
    top: 60%;
    transform: translateY(-60%);
    /* Y軸のみの調整 */
    z-index: 5;
    /* スライドの下に表示 */
    /* width は JS で設定 */
    background-color: transparent;
    border: none;
}

/* #nowonair_wrapper .nav-button:hover {
    opacity: 0.8;
    filter: alpha(opacity=80);
    -ms-filter: "alpha( opacity=80 )";
    cursor: pointer;
} */

#nowonair_wrapper .nav-button:disabled,
#nowonair_wrapper .nav-button:disabled:hover {
    opacity: 0.3;
    cursor: default;
}

/* //////////// */
/* --- 画像切り替え用CSS --- */

/* ボタン自体の設定 */
.slider-nav-btn {
    position: relative;
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;

    /* ▼▼▼ 追加: 読み込み直後の巨大化防止用 ▼▼▼ */
    width: 50px;
    /* ▲▲▲▲▲▲ */
}

/* ボタン内の画像共通設定 */
.slider-nav-btn img {
    display: block;
    width: 100%;
    /* 親ボタンの幅に合わせる */
    height: auto;
    transition: opacity 0.3s ease;
    /* ふわっと切り替えるアニメーション */
}

/* 通常時の画像（背面） */
.btn-img-off {
    position: relative;
    /* 高さを確保するためにrelative */
    z-index: 1;
}

/* オン時の画像（前面・最初は透明） */
.btn-img-on {
    position: absolute;
    /* 親ボタンを基準に絶対配置して重ねる */
    top: 0;
    left: 0;
    z-index: 2;
    opacity: 0;
    /* 最初は隠しておく */
}

/* ▼ ホバー時の動作 ▼ */
/* ボタンにマウスが乗ったら、オン画像を不透明にする */
.slider-nav-btn:hover .btn-img-on {
    opacity: 1;
}




/*===============================================
//////////////////////●style.css 画面の横幅が1620pxまで
===============================================*/

@media screen and (max-width: 1620px) {

    /* radikoプレーヤー切り替え */
    .nowonair_inner .radiko_player#radiko_nowplay .radiko_inner iframe.radiko_l {
        display: none;
    }

    .nowonair_inner .radiko_player#radiko_nowplay .radiko_inner iframe.radiko_s {
        display: block;
    }



    .nowonair_inner .icons ul {
        grid: minmax(auto, 30px) / minmax(auto, 60px) minmax(auto, 60px) minmax(auto, 60px);
        width: 100%;
    }

    .nowonair_inner {
        grid-template-columns: 50% auto;
    }

    .nowonair_inner .nowonair_thumb {
        align-self: center;
    }
}

/*===============================================
//////////////////////●style.css 画面の横幅が1024pxまで
===============================================*/

@media screen and (max-width: 1024px) {
    .nowonair_inner .time_date {
        align-items: center;
        line-height: 0;
    }
}

/*===============================================
//////////////////////●style.css 画面の横幅が960pxまで
===============================================*/

@media screen and (max-width: 960px) {
    #nowonair_wrapper {
        padding: 7px 0 18px 0;
        background-image: url('/include/now_onair/images/bg_sp.jpg');
    }

    .nowonair_inner {
        display: grid;
        position: relative;
        grid-template-columns: 1fr;
        grid-template-rows: auto auto minmax(10rem, auto) 3rem 6.7rem 1.2rem;
        row-gap: 1rem;
        grid-auto-flow: row;
        grid-template-areas:
            "nowonair_thumb"
            "time"
            "title"
            "icons"
            "radiko"
            "agree";
        line-height: 1.2;

        align-items: end;

    }


    /* サムネイル */
    .nowonair_inner .nowonair_thumb img {
        display: block;
        width: 100%;
        max-width: 100%;

    }

    .nowonair_inner .time_date {
        font-size: clamp(1.5rem, 1.0943rem + 1.5094vw, 1.5rem);

    }

    .nowonair_inner .time_date p:nth-of-type(2) {
        font-size: clamp(1.4rem, 1.0755rem + 1.2075vw, 1.4rem);
    }

    /* タイトル */
    .nowonair_inner .titlePpl {
        align-self: start;
        margin-top: 0;

    }

    /* 時間 */
    .nowonair_inner .time_date {
        grid: minmax(auto, 1.5rem) / 1.5rem 1fr;
        column-gap: .6rem;
    }

    /* アイコン */
    .nowonair_inner .icons {
        position: relative;
        grid-area: icons;
        /* height: 2.5rem; */
        margin-bottom: .6rem;
        align-self: end;
    }

    .nowonair_inner .icons ul {
        grid: minmax(auto, 3rem) / minmax(auto, 6rem) minmax(auto, 6rem) minmax(auto, 6rem);
    }

}