/* ============================================
   Responsive Styles
   レスポンシブ専用スタイル
   ============================================ */

/* スマホ用ティッカー（デフォルト非表示） */
.header-ticker-sp {
    display: none;
}

/* ============================================
   タブレット（1024px以下）
   ============================================ */
@media (max-width: 1024px) {
    :root {
        --sidebar-width: 280px;
        --menu-width: 350px;
    }
    
    .mv-logo {
        font-size: 50px;
    }
}

/* ============================================
   スマホ（768px以下）
   ============================================ */
@media (max-width: 768px) {
    :root {
        --sidebar-width: 0px;
        --menu-width: 100%;
        --header-height: 60px;
        --sub-header-height: 45px;
        --ticker-height: 35px;
    }
    
    /* ============================================
       レイアウト
       ============================================ */
    .main-area {
        flex-direction: column;
        padding-top: calc(var(--header-height) + var(--ticker-height));
    }
    
    .main-left {
        border-right: none;
        border-bottom: 1px solid var(--color-border);
    }
    
    /* ============================================
       MVスライダー
       ============================================ */
    .mv-slider {
        width: 100%;
        min-height: auto;
        aspect-ratio: 1 / 1.2;
    }
    
    .mv-slide-number {
        font-size: 80px;
        top: 20px;
        right: 20px;
    }
    
    .mv-slide-content {
        left: 20px;
        bottom: 80px;
    }
    
    .mv-slide-title {
        font-size: 24px;
    }
    
    .mv-logo {
        top: 20px;
        left: 20px;
        font-size: 28px;
    }
    
    .mv-pagination {
        gap: 12px;
    }
    
    .pagination-bar {
        width: 25px;
    }
    
    .mv-bottom {
        padding: 25px 20px;
    }
    
    .mv-season {
        font-size: 12px;
    }
    
    .mv-category {
        font-size: 14px;
    }
    
    /* ============================================
       サイドバー
       ============================================ */
    .sidebar {
        width: 100%;
        border-left: none;
        border-top: 1px solid var(--color-border);
        padding: 25px 20px;
    }
    
    .sidebar-search {
        margin: 0 0 0px;
    }
    
    .sidebar-contents {
        padding: 0;
        display: none;
    }
    
    /* ============================================
       ヘッダー
       ============================================ */
    .site-header {
        padding: 0;
    }
    
    .header-left {
        padding: 0 0px 0 15px;
        flex: 1;
    }
    
    .header-dots {
        gap: 4px;
    }
    
    .header-dots svg {
        width: 15px;
        height: 15px;
    }
    
    .header-title {
        font-size: 12px;
        letter-spacing: 1px;
        line-height: 1.3;
    }
    
    .sp-only {
        display: inline;
    }
    
    .header-ticker-pc {
        display: none;
    }
    
    .header-right {
        gap: 0;
        height: 100%;
    }
    
    .header-sns {
        height: 100%;
        gap: 0;
        border-left: 1px solid var(--color-border);
    }
    
    .header-sns-btn {
        width: 40px;
        height: 100%;
        border-right: 1px solid var(--color-border);
    }
    
    .header-sns-btn:last-child {
        border-right: none;
    }
    
    .header-sns-btn svg {
        width: 16px;
        height: 16px;
    }
    
    .hamburger-btn {
        width: 60px;
        height: 100%;
        border-left: 1px solid var(--color-border);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 6px;
    }
    
    .hamburger-line {
        width: 20px;
    }
    
    /* ============================================
       ティッカー（スマホ）
       ============================================ */
    .header-ticker-sp {
        display: block;
        position: fixed;
        top: var(--header-height);
        left: 0;
        right: 0;
        width: 100%;
        height: var(--ticker-height);
        background-color: #f5f5f5;
        background-image: radial-gradient(circle, #ccc 1px, transparent 1px);
        background-size: 3px 3px;
        border-bottom: 1px solid var(--color-border);
        padding: 0;
        z-index: 99;
        overflow: hidden;
        transition: transform var(--transition-speed) ease;
        margin: 0;
    }
    
    .header-ticker-sp .ticker-wrap {
        width: 100%;
    }
    
    body.menu-open .header-ticker-sp {
        transform: translateX(calc(-1 * var(--menu-width)));
    }
    
    .header-ticker-sp .ticker-content {
        line-height: var(--ticker-height);
    }
    
    /* ============================================
       サブヘッダー（スマホ）
       ============================================ */
    .sub-header {
        gap: 0;
        padding: 0;
        overflow-x: auto;
        white-space: nowrap;
    }
    
    .sub-header-label,
    .sub-header-news,
    .sub-header-date,
    .sub-header-text {
        padding: 0 12px;
        border-right: 1px solid var(--color-border);
    }
    
    .sub-header-divider {
        display: none;
    }
    
    .sub-header-label {
        border-left: none;
    }
    
    .sub-header-text {
        border-right: none;
    }
    
    /* ============================================
       スライドメニュー（スマホ）
       ============================================ */
    .slide-menu {
        padding: 70px 25px 25px;
    }
    
    .menu-close-btn {
        top: 20px;
        left: 20px;
        font-size: 22px;
    }
    
    .menu-sns-btn svg {
        width: 20px;
        height: 20px;
    }
}