@charset "utf-8";

body {
    font-family: 'Inter', sans-serif;
    background-color: #fffbeb; /* 明るいクリーム/バニラ色 */
    background-image: url("../images/bg.jpg");
    background-repeat: repeat;
    background-size: auto;
    background-position: top left;
    scroll-behavior: smooth;
}
/* セクションタイトル: 黄色、文字は濃いピンク、影は水色 */
.section-title {
    position: relative;
    display: inline-block;
    padding: 0.5rem 1.5rem;
    margin-bottom: 2rem;
    font-size: 2.25rem; /* PC */
    font-weight: 900;
    color: #ea628f; 
    background-color: #f0ea3e;
    border-radius: 9999px;
    box-shadow: 0 6px 0 0 #9b73b1;
    transition: transform 0.1s ease-out;
    letter-spacing: 0.05em;
}

/* ナビ全体（上下の枠線） */
.menu-nav {
    background: #ff6699;
    border-top: 8px solid #ff97ca;
    border-bottom: 8px solid #ff97ca;
}

/* UL相当の背景 */
.menu-list {
    background: #ff6699;
    border-radius: 0.75rem;
}

/* 各MENUタイル（li相当） */
.menu-tile {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 44px;
    font-weight: 800;
    color: #00064d;
    background: #ffffff;
    border: 3px solid #00064d;
    border-radius: 0.75rem;
    box-shadow: 0 4px 0 rgba(0,0,0,0.15);
    transition: transform .15s ease, background .15s ease;
}

.menu-tile:hover {
    background: #f0ea3e;
    transform: translateY(-2px);
}

/* スマホ向けのタイトル調整 */
    @media (max-width: 640px) {
            .section-title {
                font-size: 1.75rem;
                padding: 0.3rem 1rem;
                margin-bottom: 1.5rem;
                box-shadow: 0 4px 0 0 #22D3EE;
            }
        }
        .section-title:active {
            transform: translateY(3px);
            box-shadow: 0 3px 0 0 #22D3EE;
        }
        .card-pop {
            border-radius: 1.5rem;
            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.2), 0 4px 6px -2px rgba(0, 0, 0, 0.1);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }
        .card-pop:hover {
            transform: translateY(-5px);
            box-shadow: 0 15px 25px -5px rgba(0, 0, 0, 0.3), 0 6px 10px -3px rgba(0, 0, 0, 0.15);
        }
        /* スクロールバーの非表示（動画スライダー用） */
        .no-scrollbar::-webkit-scrollbar {
            display: none;
        }
        .no-scrollbar {
            -ms-overflow-style: none;
            scrollbar-width: none;
        }

        /* MOVIEスライダーのアイテム幅調整 (スマホ時のみ適用) */
        /* 画面幅の約85%にし、次のアイテムのプレビューが見えるようにする */
        @media (max-width: 767px) { /* md: breakpoint未満 */
            .slider-item-mobile-only {
                min-width: calc(85vw - 1rem); /* 画面幅の85% - スペース */
                /* ポップ感を出すため、影とボーダーを調整 */
                border: 4px solid #22D3EE; /* Cyan-500 */
                box-shadow: 0 4px 0 0 #E879F9, 0 8px 10px -3px rgba(0,0,0,0.3);
                transition: transform 0.3s ease;
            }
            .slider-item-mobile-only:active {
                transform: translateY(4px);
                box-shadow: 0 0px 0 0 #E879F9, 0 4px 8px -2px rgba(0,0,0,0.3);
            }
        }
        /* PC時は従来の幅に戻す */
        @media (min-width: 768px) {
             .slider-item-pc-fixed {
                width: 16rem; /* w-64 */
             }
        }


/* 番組概要の背景を水玉模様と明るい黄色に */
.outline-bg {
      background-color: #FEF9C3; /* ライトイエロー */
      background-image: radial-gradient(#F472B6 2px, transparent 2px), radial-gradient(#22D3EE 2px, transparent 2px);
      background-size: 20px 20px;
      background-position: 0 0, 10px 10px;
}
        
/* ハンバーガーメニューのアニメーションを修正 */
.mobile-menu-container {
     /* 初期状態: 画面外に非表示 */
     transform: translateX(100vw);
     transition: transform 0.3s ease-in-out;
}
.mobile-menu-container.is-open {
     /* 開いた状態: 画面内に表示 */
     transform: translateX(0);
}