/*=====================================================
  1. COMMON
=====================================================*/
html {
    scroll-behavior: smooth;
}

img {
    max-width: 100%;
    height: auto;
}

a {
    text-decoration: none;
}

ul,
ol {
    margin: 0;
    padding: 0;
    list-style: none;
}


/*=====================================================
  2. MOBILE SHARED（〜1024px：タブレット＋スマホ）
=====================================================*/
@media only screen and (max-width: 1024px) {

    /* ---------- HEADER（メインビジュアル） ---------- */
    #header {
        position: relative;
        width: 100%;
        margin: 0;
    }

    /* 高さは画像の縦横比（padding-top の %）で確保 */
    #header .header_inner {
        position: relative;
        box-sizing: border-box;
        width: 100%;
        height: 0;
        background-image: url(../img/mainBG.jpg);
        background-repeat: no-repeat;
        background-size: 100%;
    }

    /* SNSシェアアイコン（メインビジュアル上部・中央） */
    .share_box_top {
        position: absolute;
        top: 0;
        left: 20%;
        z-index: 10;
        width: max-content;
        max-width: 100%;
        transform: translateX(-50%);
    }

    .share_box_top ul {
        display: flex;
        justify-content: center;
        gap: 1rem;
        margin: 1em 0;
    }

    .share_box_top img {
        display: block;
    }

    /* ---------- SCHEDULE（放送日時の帯） ---------- */
    #schedule {
        width: 100%;
        text-align: center;
    }

    #schedule p {
        display: flex;
        justify-content: center;
        margin: 0;
    }

    .head_schedule { background: #e61d84; }
    .head_start    { background: #fdf23c; }

    #schedule img {
        box-sizing: border-box;
        width: 90%;
        max-width: 720px;
        padding: 0.5rem;
    }

    /* ---------- NAV（右からスライドイン） ---------- */
    .menu_inner {
        position: relative;
        z-index: auto;
    }

    .nav {
        position: fixed;
        /* top / right は SP・TABLET ブロックで指定 */
        z-index: 50;
        box-sizing: border-box;
        overflow-x: hidden;
        overflow-y: auto;
        border-radius: 20px;
        background-image: url(../img/nav_back.jpg);
        visibility: hidden; /* 閉じている間はタブ移動の対象外に */
        transition: right 0.6s ease, visibility 0s linear 0.6s;
    }

    .nav_item {
        width: 80%;
        margin: auto;
        text-align: center;
    }

    .nav_item a {
        display: block; /* タップ範囲を広げる */
        color: #4d4ebe;
        font-family: "sicprintempspetit", sans-serif;
        font-weight: 800;
        font-style: normal;
    }

    /* ---------- HAMBURGER ---------- */
    .hamburger {
        position: fixed;
        z-index: 50;
        border-radius: 50%;
        background-color: #e61d84;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }

    .hamburger_border {
        position: absolute;
        top: 50%;
        left: 50%;
        background-color: #fff;
        transform: translate(-50%, -50%);
        transition: transform 0.6s ease, opacity 0.6s ease;
    }

    /* ---------- 背景オーバーレイ（タップでメニューを閉じる） ---------- */
    .black_bg {
        position: fixed;
        inset: 0;
        z-index: 10;
        background-color: #333;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.6s ease, visibility 0s linear 0.6s;
        cursor: pointer;
    }

    /* ---------- NAV OPEN ---------- */
    .nav-open .nav {
        right: 0;
        visibility: visible;
        transition: right 0.6s ease, visibility 0s;
        background-size: cover;
        background-repeat: no-repeat;
        color: #4d4ebe;
        height: 100vh;
    }

    .nav-open .black_bg {
        opacity: 0.8;
        visibility: visible;
        transition: opacity 0.6s ease, visibility 0s;
    }

    .nav-open .hamburger_border_top    { transform: translate(-50%, -50%) rotate(45deg); }
    .nav-open .hamburger_border_center { opacity: 0; }
    .nav-open .hamburger_border_bottom { transform: translate(-50%, -50%) rotate(-45deg); }
}


/*=====================================================
  3. SMARTPHONE（767px以下）
=====================================================*/
@media only screen and (max-width: 767px) {

    /* ---------- HEADER ---------- */
    #header { padding-top: 85px; }
    #header .header_inner { padding-top: 143%; }
    .share_box_top img { width: 30px; }

    /* ---------- NAV ---------- */
    .nav {
        top: 80px;
        right: -290px; /* 画面の外に待機 */
        width: 250px;
        max-height: calc(100vh - 90px);
        max-height: calc(100dvh - 90px);
        padding: 2rem 0;
    }

    .nav_list{
        margin-top: 5rem;
    }

    .nav_item {
        padding: 2rem;
    }
    .nav_item a {
        font-size: 22px;
        color: #4d4ebe;
    }

    /* ---------- HAMBURGER ---------- */
    .hamburger {
        top: 95px;
        right: 10px;
        width: 35px;
        height: 35px;
    }

    .hamburger_border {
        width: 18px;
        height: 2px;
    }

    .hamburger_border_top    { transform: translate(-50%, calc(-50% - 6px)); }
    .hamburger_border_bottom { transform: translate(-50%, calc(-50% + 6px)); }
    /* 開いたとき（上の指定に負けないよう再指定） */
    .nav-open .hamburger_border_top    { transform: translate(-50%, -50%) rotate(45deg); }
    .nav-open .hamburger_border_bottom { transform: translate(-50%, -50%) rotate(-45deg); }

    /* 共通フッター */
    footer #foot_menu a {
        font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Hiragino Sans", Meiryo, Arial, sans-serif;
    }
}


/*=====================================================
  4. TABLET（768px〜1024px）
=====================================================*/
@media only screen and (min-width: 768px) and (max-width: 1024px) {

    /* ---------- HEADER ---------- */
    #header { padding-top: 130px; }
    #header .header_inner { padding-top: 143%; }
    .share_box_top img { width: 45px; }

    /* ---------- NAV ---------- */
    .nav {
        top: 94px;
        right: -420px; /* 画面の外に待機 */
        width: 380px;
        max-height: calc(100vh - 114px);
        max-height: calc(100dvh - 114px);
        padding: 105px 0 30px;
    }

    .nav_item { padding: 2rem; }
    .nav_item a { font-size: 27px; }

    /* ---------- HAMBURGER ---------- */
    .hamburger {
        top: 140px;
        right: 15px;
        width: 55px;
        height: 55px;
    }

    .hamburger_border {
        width: 30px;
        height: 4px;
    }

    .hamburger_border_top    { transform: translate(-50%, calc(-50% - 10px)); }
    .hamburger_border_bottom { transform: translate(-50%, calc(-50% + 10px)); }
    /* 開いたとき（上の指定に負けないよう再指定） */
    .nav-open .hamburger_border_top    { transform: translate(-50%, -50%) rotate(45deg); }
    .nav-open .hamburger_border_bottom { transform: translate(-50%, -50%) rotate(-45deg); }
}


/*=====================================================
  5. PC（1025px以上）
=====================================================*/
@media only screen and (min-width: 1025px) {

    html,
    body {
        background: #fff;
        color: #222;
        font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, sans-serif;
    }

    /* ---------- NAV（横並びバー） ---------- */
    .nav {
        background-image: url(../img/nav_back.jpg);
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
    }

    .nav_list {
        display: flex;
        justify-content: center;
        gap: 50px;
        width: 90%;
        height: auto;
        margin: auto;
        padding: 2rem;
    }

    .nav_list a {
        display: inline-block;
        color: #4d4ebe;
        font-family: "sicprintempspetit", sans-serif;
        font-weight: 800;
        font-style: normal;
        font-size: 30px;
        line-height: 1.3;
        text-align: center;
        filter: drop-shadow(0 5px 10px #fff);
    }

    /* ---------- HEADER（メインビジュアル） ---------- */
    #header {
        position: relative;
        display: block;
        width: 100%;
        margin: 70px auto 0;
        aspect-ratio: 2.93 / 1;
        background-image: url(../img/mainBG_pc.jpg);
        background-repeat: no-repeat;
        background-size: 100%;
    }

    .header_inner {
        position: relative;
        width: 100%;
        max-width: 1920px;
        height: 100%;
        margin: 0 auto;
    }

    /* SNSシェアアイコン（左上） */
    .share_box_top {
        position: absolute;
        top: 14vh;
        left: 5vh;
        z-index: 10;
        width: 100%;
        max-width: 200px;
    }

    .share_box_top ul {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }

    .share_box_top ul li {
        margin-right: 10px;
        margin-bottom: 10px;
    }

    .share_box_top img {
        width: 40px;
    }

    /* ---------- SCHEDULE（PCでは非表示） ---------- */
    #schedule {
        display: none;
    }
}


/*=====================================================
  6. REDUCED MOTION
=====================================================*/
@media (prefers-reduced-motion: reduce) {
    .nav,
    .black_bg,
    .hamburger_border {
        transition: none;
    }
}