/*
 * mobile.css — スマートフォンフルレスポンシブ対応
 * 蒲田めい 公式ウェブサイト
 * 全ページ共通 + ページ別モバイル最適化
 */

/* ============================================================
   基本設定 — 横スクロール防止・共通リセット
   ============================================================ */
@media (max-width: 768px) {
    html, body {
        overflow-x: hidden !important;
        max-width: 100vw;
    }

    /* カスタムカーソル非表示 */
    .cursor-dot,
    .cursor-outline,
    .cursor-ring,
    .custom-cursor,
    .custom-cursor-follower {
        display: none !important;
    }

    body {
        cursor: auto !important;
    }

    /* スクロールアニメーション — モバイルは全要素を即時表示（opacity:0のまま隠れる問題を防ぐ） */
    [data-scroll],
    [data-scroll="fade-up"],
    [data-scroll="fade-left"],
    [data-scroll="fade-right"],
    [data-scroll="fade-in"] {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }

    /* コンテナ余白 */
    .container,
    .container-wide {
        padding: 0 1.25rem !important;
        max-width: 100%;
    }

    /* セクション余白削減 */
    .premium-glass-section,
    .banner-cta-section {
        padding: 4rem 0 !important;
    }

    .section {
        padding: 3rem 1.25rem !important;
    }

    .section-header {
        margin-bottom: 2.5rem !important;
    }

    /* セクションタイトル */
    h2.section-title-main {
        font-size: clamp(2rem, 10vw, 3.5rem) !important;
    }

    h2.section-title-left {
        font-size: clamp(1.6rem, 7vw, 2.5rem) !important;
        margin-bottom: 1.5rem !important;
    }
}

/* ============================================================
   ヘッダー / ナビゲーション
   ============================================================ */
@media (max-width: 768px) {
    /* デスクトップナビ非表示 */
    .header .nav {
        display: none !important;
    }

    /* ハンバーガーボタン表示 */
    .menu-toggle {
        display: flex !important;
    }

    /* ヘッダーパディング調整 */
    .header {
        padding: 0 1.25rem !important;
    }

    /* ロゴサイズ調整 */
    .logo {
        font-size: 1.1rem !important;
    }

    /* モバイルメニューオーバーレイ */
    .menu-overlay {
        display: flex !important;
        position: fixed !important;
        inset: 0 !important;
        background: rgba(12, 8, 5, 0.97) !important;
        z-index: 999 !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        opacity: 0 !important;
        pointer-events: none !important;
        transition: opacity 0.45s cubic-bezier(0.4, 0, 0.2, 1) !important;
    }

    .menu-overlay.active {
        opacity: 1 !important;
        pointer-events: auto !important;
    }

    .menu-overlay .nav-list {
        flex-direction: column !important;
        gap: 2rem !important;
        text-align: center !important;
        list-style: none !important;
        padding: 0 !important;
    }

    .menu-overlay .nav-link {
        font-size: 1.05rem !important;
        letter-spacing: 0.3em !important;
        padding: 0.5rem 2rem !important;
        display: block !important;
        color: rgba(240, 230, 211, 0.8) !important;
        transition: color 0.25s ease, letter-spacing 0.3s ease !important;
    }

    .menu-overlay .nav-link:hover {
        color: #c9a24e !important;
        letter-spacing: 0.4em !important;
    }
}

/* ============================================================
   Hero Section — トップページ
   ============================================================ */
@media (max-width: 768px) {
    .hero-main {
        min-height: 100svh;
        height: 100svh;
    }

    /* white-space: nowrap の解除（文字溢れ防止） */
    .hero-title {
        white-space: normal !important;
        font-size: clamp(2.8rem, 13vw, 4.5rem) !important;
        letter-spacing: 0.1em !important;
        line-height: 1.15 !important;
    }

    .hero-content {
        padding: 0 5vw 10vh !important;
        max-width: 100% !important;
    }

    .hero-eyebrow {
        font-size: 0.6rem !important;
        letter-spacing: 0.4em !important;
    }

    .hero-subtitle {
        font-size: 0.7rem !important;
        letter-spacing: 0.35em !important;
    }

    /* スクロールインジケーター非表示 */
    .hero-scroll-indicator {
        display: none !important;
    }
}

/* ============================================================
   Information + SNS セクション
   ============================================================ */
@media (max-width: 768px) {
    /* 1カラムに変更 */
    .info-sns-grid {
        grid-template-columns: 1fr !important;
        gap: 1.5rem !important;
    }

    /* ガラスカード余白調整 */
    .glass-card {
        padding: 1.8rem 1.4rem !important;
    }

    /* ニュースリスト各アイテム — 縦積み */
    .information-item {
        grid-template-columns: 1fr !important;
        gap: 0.35rem !important;
        padding: 1.1rem 0 !important;
    }

    .information-date {
        font-size: 0.68rem !important;
    }

    .information-category {
        display: inline-block !important;
        margin-bottom: 0.15rem !important;
    }

    .information-title {
        font-size: 0.88rem !important;
        line-height: 1.6 !important;
    }

    /* SNSボタン — 縦並び（Twitterタイムライン本体は対象外） */
    #snsEmbedContainer > div:not(#twitterLoadingMessage),
    .sns-embed-box > div:not(#twitterLoadingMessage) {
        flex-direction: column !important;
        gap: 0.8rem !important;
    }

    /* Twitterタイムライン iframe — モバイルで確実に表示 */
    #snsEmbedContainer iframe[id^="twitter-widget"] {
        width: 100% !important;
        min-height: 380px !important;
        max-height: none !important;
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    /* sns-embed-box 自体の overflow を visible に */
    .sns-embed-box {
        overflow: visible !important;
    }
}

/* ============================================================
   マーキーリボン
   ============================================================ */
@media (max-width: 480px) {
    .marquee-content {
        font-size: clamp(1.8rem, 7vw, 2.8rem) !important;
    }

    .marquee-container {
        padding: 1.2rem 0 !important;
    }
}

/* ============================================================
   ヒーローセクション — モバイル最適化
   ============================================================ */
@media (max-width: 768px) {
    /* ヒーローコンテンツを中央寄せに変更 */
    .hero-content {
        text-align: center !important;
        padding: 0 5vw 12vh !important;
        max-width: 100% !important;
    }

    /* アニメーション遅延をモバイルで短縮 */
    .hero-eyebrow {
        animation-delay: 0.1s !important;
    }

    .hero-title {
        animation-delay: 0.2s !important;
        animation-duration: 0.8s !important;
    }

    .hero-divider {
        animation-delay: 0.5s !important;
    }

    .hero-subtitle {
        animation-delay: 0.6s !important;
    }

    /* ヒーロー装飾ライン */
    .hero-divider {
        margin: 0 auto var(--space-md) !important;
    }
}

/* ============================================================
   ライブスケジュール カード — トップ・ライブページ共通
   ============================================================ */
@media (max-width: 768px) {
    /* スケジュールカードを縦積みに（top-premium.css の 3カラムグリッドを上書き） */
    .schedule-card-main {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        gap: 0.9rem !important;
        padding: 1.2rem 0 !important;
        align-items: center !important;
    }

    /* サムネイル小サイズで左に */
    .schedule-flyer-main {
        width: 52px !important;
        height: 52px !important;
        flex-shrink: 0 !important;
        border-radius: 6px !important;
        overflow: hidden !important;
    }

    /* 情報欄は残りスペースを使用 */
    .schedule-info-main {
        flex: 1 !important;
        min-width: 0 !important;
    }

    .schedule-date-main {
        text-align: left !important;
        min-width: unset !important;
    }

    .schedule-info-main h3 {
        font-size: 0.95rem !important;
        white-space: normal !important;
        overflow-wrap: break-word !important;
        word-break: break-word !important;
    }

    .schedule-info-main p {
        font-size: 0.78rem !important;
    }

    /* チケットボタン — 全幅 */
    .schedule-info-main .btn {
        width: 100% !important;
        margin-top: 0.5rem !important;
        display: block !important;
        text-align: center !important;
    }

    /* ライブページセクションタイトル */
    .live-section-title {
        font-size: clamp(1.2rem, 5vw, 1.6rem) !important;
    }
}

/* ============================================================
   ヒーロー動画 — YouTubeオーバーフロー・タイトル表示防止
   ============================================================ */
@media (max-width: 768px) {
    /* containment で iframe の横はみ出しを完全封じ込め */
    .hero-main {
        contain: paint !important;
        overflow: hidden !important;
    }

    /* 動画ラッパーにも clip-path で二重クリップ */
    .hero-video-container,
    .cinematic-video-wrapper {
        clip-path: inset(0) !important;
        overflow: hidden !important;
    }

    /* モバイルでの iframe サイズを縦画面に最適化 */
    .hero-video-container iframe,
    .cinematic-video-wrapper iframe {
        width: max(100vw, 177.78vh) !important;
        height: max(100vh, 56.25vw) !important;
        min-width: unset !important;
        min-height: unset !important;
    }

    /* オーバーレイを濃くして YouTube タイトル・UI を隠す */
    .hero-overlay {
        background: linear-gradient(
            to bottom,
            rgba(10, 5, 2, 0.72) 0%,
            rgba(10, 5, 2, 0.35) 45%,
            rgba(10, 5, 2, 0.78) 100%
        ) !important;
    }
}

/* ============================================================
   バナーCTAセクション
   ============================================================ */
@media (max-width: 768px) {
    /* top-premium.css の 1fr グリッドをそのまま継承 */
    .banner-cta-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 0.8rem !important;
        margin-top: 2rem !important;
    }

    /* 1カラム時のアスペクト比を抑制 */
    .banner-cta-card {
        aspect-ratio: 3/4 !important;
        border-radius: 6px !important;
    }

    .banner-cta-title {
        font-size: 1.25rem !important;
        letter-spacing: 0.1em !important;
    }

    .banner-cta-text {
        font-size: 0.65rem !important;
    }

    .banner-cta-content {
        padding: 1.2rem 1rem !important;
    }
}

@media (max-width: 480px) {
    .banner-cta-grid {
        grid-template-columns: 1fr !important;
    }

    .banner-cta-card {
        aspect-ratio: 16/9 !important;
    }
}

/* ============================================================
   コンセプトセクション — 画像を切り取らず全体表示
   ============================================================ */
@media (max-width: 768px) {
    /* セクション・グリッド・コンテナ全てのクリッピングを解除 */
    .concept-section-main,
    .concept-section-main .concept-grid,
    .concept-section-main .concept-image,
    .concept-section-main .reveal-overlay {
        overflow: visible !important;
        clip-path: none !important;
    }

    /* reveal-overlay の ::before / ::after 擬似要素を非表示 */
    .concept-section-main .concept-image::before,
    .concept-section-main .concept-image::after,
    .concept-section-main .reveal-overlay::before,
    .concept-section-main .reveal-overlay::after {
        display: none !important;
        content: none !important;
    }

    .concept-grid {
        grid-template-columns: 1fr !important;
        gap: 2rem !important;
    }

    .concept-image {
        order: -1 !important;
        position: static !important;
        border-radius: 8px !important;
        border: none !important;
        background: transparent !important;
    }

    /* 画像を自然な縦横比でそのまま表示（縮小） */
    .concept-image {
        text-align: center !important;
    }

    .concept-image img {
        width: 65% !important;
        max-width: 260px !important;
        height: auto !important;
        max-height: none !important;
        min-height: unset !important;
        aspect-ratio: auto !important;
        object-fit: fill !important;
        border-radius: 8px !important;
        filter: brightness(0.95) saturate(0.9) !important;
        transform: none !important;
        margin: 0 auto !important;
    }

    .concept-text {
        padding: 0 !important;
    }

    .concept-text h3 {
        font-size: clamp(1.4rem, 6vw, 2rem) !important;
    }
}

/* ============================================================
   ギャラリーセクション — トップ
   ============================================================ */
@media (max-width: 768px) {
    .gallery-grid-main {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 6px !important;
    }

    /* 最初のアイテムの特殊spanを解除 */
    .gallery-grid-main > *:nth-child(1) {
        grid-column: 1 / 2 !important;
        grid-row: 1 / 2 !important;
    }

    .gallery-section-main {
        padding-bottom: 3rem !important;
    }
}

/* ============================================================
   フッター
   ============================================================ */
@media (max-width: 768px) {
    .footer {
        padding: 3rem 0 1.5rem !important;
    }

    .footer-inner {
        padding: 0 1.25rem !important;
    }

    .footer-top {
        grid-template-columns: 1fr 1fr !important;
        gap: 2rem !important;
        margin-bottom: 2.5rem !important;
        padding-bottom: 2.5rem !important;
    }

    .footer-brand {
        grid-column: 1 / -1 !important;
    }

    .footer-brand p {
        font-size: 0.85rem !important;
    }

    .footer-bottom {
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        gap: 1rem !important;
    }
}

@media (max-width: 480px) {
    .footer-top {
        grid-template-columns: 1fr !important;
    }
}

/* ============================================================
   ページヒーロー — サブページ共通
   ============================================================ */
@media (max-width: 768px) {
    .page-hero {
        padding: calc(72px + 2.5rem) 1.25rem 2.5rem !important;
        text-align: center;
    }

    .page-hero-title {
        font-size: clamp(2.5rem, 12vw, 4rem) !important;
    }

    .page-hero-subtitle {
        font-size: 0.85rem !important;
        letter-spacing: 0.15em !important;
    }

    .page-hero-eyebrow {
        font-size: 0.65rem !important;
    }
}

/* ============================================================
   プロフィールページ
   ============================================================ */
@media (max-width: 768px) {
    .profile-layout {
        grid-template-columns: 1fr !important;
        gap: 2.5rem !important;
    }

    .profile-image-wrap,
    .profile-image-container {
        max-width: 260px;
        margin: 0 auto;
    }

    .profile-image {
        position: static !important;
    }

    .profile-name {
        font-size: clamp(1.8rem, 8vw, 2.5rem) !important;
    }

    .profile-role {
        font-size: 0.75rem !important;
    }

    /* プロフィールテーブル — 縦並び */
    .profile-bio-table {
        width: 100%;
    }

    .profile-bio-table td,
    .profile-bio-table th {
        display: block;
        width: 100%;
        padding: 0.3rem 0 !important;
    }
}

/* ============================================================
   ニュースページ
   ============================================================ */
@media (max-width: 768px) {
    .news-filter-wrap {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem !important;
        justify-content: center;
        margin-bottom: 2rem !important;
    }

    /* ニュースリストアイテム */
    .news-item-large {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 0.5rem !important;
        padding: 1.2rem 0 !important;
    }

    .news-date {
        font-size: 0.75rem !important;
    }

    .news-link {
        font-size: 0.95rem !important;
        line-height: 1.6 !important;
    }
}

/* ============================================================
   音楽・動画ページ
   ============================================================ */
@media (max-width: 768px) {
    .music-grid,
    .video-grid {
        grid-template-columns: 1fr !important;
        gap: 2rem !important;
    }

    /* 動画埋め込みアスペクト比維持 */
    .video-embed,
    .video-wrapper,
    .embed-responsive {
        position: relative !important;
        padding-bottom: 56.25% !important;
        height: 0 !important;
        overflow: hidden !important;
    }

    .video-embed iframe,
    .video-wrapper iframe,
    .embed-responsive iframe {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
    }
}

/* ============================================================
   ギャラリーページ
   ============================================================ */
@media (max-width: 768px) {
    .gallery-page-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 6px !important;
    }

    /* モーダル */
    .gallery-modal-content {
        width: 95vw !important;
        max-height: 90vh !important;
    }
}

/* ============================================================
   お問い合わせページ
   ============================================================ */
@media (max-width: 768px) {
    .contact-layout {
        grid-template-columns: 1fr !important;
        gap: 2rem !important;
    }

    /* iOSズーム防止 — フォーム入力は16px以上 */
    .contact-form input,
    .contact-form textarea,
    .contact-form select,
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    textarea,
    select {
        font-size: 16px !important;
    }
}

/* ============================================================
   ショップページ
   ============================================================ */
@media (max-width: 768px) {
    .shops-grid {
        grid-template-columns: 1fr !important;
        gap: 1.5rem !important;
    }
}

/* ============================================================
   ボタン — タッチターゲット最適化
   ============================================================ */
@media (max-width: 768px) {
    .btn {
        min-height: 44px !important;
        padding: 12px 26px !important;
    }

    .btn-sm {
        min-height: 40px !important;
        padding: 10px 20px !important;
    }

    .btn-lg {
        min-height: 48px !important;
        padding: 14px 32px !important;
    }
}

/* ============================================================
   グリッド共通 — 全サブページ
   ============================================================ */
@media (max-width: 768px) {
    .grid-2,
    .grid-3,
    .grid-4 {
        grid-template-columns: 1fr !important;
    }

    .profile-grid,
    .contact-grid {
        grid-template-columns: 1fr !important;
    }
}

/* ============================================================
   ライブ詳細ページ
   ============================================================ */
@media (max-width: 768px) {
    .live-detail-layout {
        grid-template-columns: 1fr !important;
        gap: 2rem !important;
    }

    .live-detail-flyer {
        max-width: 280px;
        margin: 0 auto;
    }
}

/* ============================================================
   スクロールアニメーション — モバイルでは簡略化
   ============================================================ */
@media (max-width: 768px) {
    [data-scroll="fade-right"],
    [data-scroll="fade-left"] {
        transform: translateY(30px) !important;
    }

    [data-scroll="fade-right"].is-visible,
    [data-scroll="fade-left"].is-visible {
        transform: translateY(0) !important;
    }
}

/* ============================================================
   セクション別背景・区切り
   ============================================================ */
@media (max-width: 768px) {
    /* スケジュールセクション */
    .schedule-section-main {
        padding-bottom: 3rem !important;
    }

    /* バナーCTAセクションのマージン */
    .banner-cta-grid {
        margin-top: 2rem !important;
    }
}

/* ============================================================
   ライブページ — プレミアムカード (lp-*)
   ============================================================ */

/* === Upcoming Lives カード === */
@media (max-width: 768px) {
    .lp-upcoming-list {
        gap: 1rem !important;
        padding: 0 !important;
    }

    .lp-event-card {
        grid-template-columns: 72px 1fr !important;
        grid-template-rows: auto auto !important;
    }

    /* フライヤー画像は768px以下で非表示 */
    .lp-event-flyer {
        display: none !important;
    }

    .lp-event-date-col {
        min-height: 0 !important;
        padding: 1.2rem 0.7rem !important;
        gap: 0.1rem !important;
    }

    .lp-event-year {
        font-size: 0.58rem !important;
    }

    .lp-event-md {
        font-size: 1.05rem !important;
    }

    .lp-event-weekday {
        font-size: 0.68rem !important;
    }

    .lp-event-info {
        padding: 1rem 1rem 0.8rem !important;
        gap: 0.4rem !important;
    }

    .lp-event-badge {
        font-size: 0.55rem !important;
        padding: 0.15rem 0.45rem !important;
    }

    .lp-event-title {
        font-size: 0.95rem !important;
        line-height: 1.45 !important;
    }

    .lp-event-venue,
    .lp-event-time,
    .lp-event-price {
        font-size: 0.75rem !important;
    }

    /* アクションボタン — 2カラムを超えて下段に配置 */
    .lp-event-actions {
        grid-column: 1 / -1 !important;
        flex-direction: row !important;
        border-left: none !important;
        border-top: 1px solid rgba(201, 162, 39, 0.1) !important;
        padding: 0.75rem 1rem !important;
        gap: 0.6rem !important;
        min-width: 0 !important;
    }

    .lp-btn-ticket,
    .lp-btn-detail {
        flex: 1 !important;
        min-height: 40px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 0.75rem !important;
        padding: 0.5rem 0.6rem !important;
    }
}

/* === Past Lives グリッド === */
@media (max-width: 768px) {
    .lp-past-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.8rem !important;
    }

    .lp-past-info {
        padding: 0.75rem 0.8rem 0.9rem !important;
    }

    .lp-past-date {
        font-size: 0.62rem !important;
    }

    .lp-past-title {
        font-size: 0.8rem !important;
    }

    .lp-past-venue {
        font-size: 0.7rem !important;
    }

    .lp-past-link {
        font-size: 0.65rem !important;
    }

    .lp-empty-msg {
        padding: 2.5rem 1rem !important;
        font-size: 0.88rem !important;
    }
}

/* === カレンダー切替行 === */
@media (max-width: 768px) {
    .live-calendar-toggle-row {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 0.8rem !important;
    }

    .live-cal-toggle-btn {
        font-size: 0.75rem !important;
        padding: 0.45rem 1rem !important;
    }
}

@media (max-width: 420px) {
    .lp-past-grid {
        grid-template-columns: 1fr !important;
    }

    .lp-event-date-col {
        padding: 1rem 0.6rem !important;
    }

    .lp-event-md {
        font-size: 0.95rem !important;
    }
}

/* ============================================================
   480px以下 — スマートフォン縦向き最適化
   ============================================================ */
@media (max-width: 480px) {
    .container,
    .container-wide {
        padding: 0 1rem !important;
    }

    .premium-glass-section,
    .banner-cta-section {
        padding: 3rem 0 !important;
    }

    .glass-card {
        padding: 1.5rem 1.2rem !important;
    }

    h2.section-title-main {
        font-size: clamp(1.8rem, 9vw, 2.8rem) !important;
    }

    /* ヒーロータイトルさらに小さく */
    .hero-title {
        font-size: clamp(2.4rem, 11vw, 3.5rem) !important;
    }

    /* ライブカード詳細 */
    .schedule-card-main {
        padding: 1.2rem 0 !important;
    }

    /* ギャラリーグリッド */
    .gallery-grid-main,
    .gallery-page-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 4px !important;
    }

    /* フッター */
    .footer-top {
        gap: 1.5rem !important;
    }

    /* ライブカードの縦向き最適化 */
    .lp-event-info {
        padding: 0.9rem 0.8rem 0.75rem !important;
    }

    .lp-event-actions {
        padding: 0.65rem 0.8rem !important;
        gap: 0.5rem !important;
    }

    .lp-btn-ticket,
    .lp-btn-detail {
        font-size: 0.7rem !important;
        padding: 0.45rem 0.5rem !important;
        min-height: 38px !important;
    }
}

/* ============================================================
   タッチデバイス最適化 — ホバー効果無効化
   ============================================================ */
@media (hover: none) and (pointer: coarse) {
    /* カードホバーアニメーション無効 */
    .lp-event-card:hover,
    .lp-past-card:hover,
    .schedule-card-main:hover,
    .news-item-large:hover {
        transform: none !important;
        box-shadow: none !important;
    }

    /* ボタンアクティブ状態を明確に */
    .lp-btn-ticket:active,
    .lp-btn-detail:active {
        opacity: 0.75 !important;
        transform: scale(0.97) !important;
    }

    /* タッチターゲット最小サイズ保証 */
    .lp-btn-ticket,
    .lp-btn-detail,
    .live-cal-toggle-btn,
    .btn,
    .menu-toggle {
        min-height: 44px !important;
        min-width: 44px !important;
    }
}