/* ================================
   Mobile Styles - KOUSUI Champagne Gold / Bronze
   ================================ */

@media screen and (max-width: 768px) {
    :root { --max-width: 100%; }

    .header-inner { padding: 12px 15px; }
    .logo .brand { font-size: 1.5rem; letter-spacing: 2px; }
    .logo .sub { font-size: 0.55rem; letter-spacing: 1px; }

    .nav-toggle { display: flex; }

    .nav-list {
        position: fixed;
        top: 56px; left: 0;
        width: 100%;
        flex-direction: column;
        gap: 0;
        background: rgba(16, 12, 7, 0.96);
        backdrop-filter: blur(12px);
        padding: 20px 0;
        transform: translateY(-100%);
        opacity: 0;
        pointer-events: none;
        transition: all 0.4s ease;
        border-bottom: 1px solid rgba(201, 168, 76, 0.15);
        z-index: 999;
    }

    .nav-list.active {
        transform: translateY(0);
        opacity: 1;
        pointer-events: auto;
    }

    .nav-list li {
        text-align: center;
        padding: 12px 0;
        border-bottom: 1px solid rgba(122, 96, 46, 0.08);
    }

    .nav-list li:last-child { border-bottom: none; }
    .nav-list a { font-size: 0.85rem; }

    .hero { min-height: 100vh; }
    .hero-en { font-size: 0.75rem; letter-spacing: 6px; }
    .hero-tagline { font-size: 0.75rem; letter-spacing: 2px; }
    .hero-info {
        flex-direction: column;
        gap: 15px;
        align-items: center;
    }
    .hero-info-item {
        text-align: center;
        padding: 8px 20px;
        min-width: 200px;
    }
    .hero-info-item .label { font-size: 0.75rem; letter-spacing: 3px; }
    .hero-info-item .value { font-size: 1rem; }

    .section, .pickup, .news, .therapist, .system, .access, .room {
        padding: 60px 0;
    }

    .section { padding: 60px 0; }
    .title-wrap { gap: 10px; margin-bottom: 40px; }
    .title-deco-left, .title-deco-right { max-width: 30px; }
    .title-box { padding: 15px 20px; }
    .title-en { font-size: 2rem; }
    .title-ja { font-size: 0.8rem; letter-spacing: 3px; }

    .pickup-swiper { padding: 0 30px; }
    .pickup-slide { flex-direction: column; }
    .pickup-slide-image { flex: none; width: 100%; aspect-ratio: 3 / 4; }
    .pickup-slide-image img { object-position: center top; }
    .pickup-slide-info { padding: 25px 20px; }
    .pickup-slide-info .name { font-size: 1.4rem; }
    .pickup-slide-info .sizes { gap: 10px; }

    .news-scroll { max-height: 350px; padding: 15px; }
    .news-item { gap: 15px; padding: 15px 0; }
    .news-date { font-size: 0.75rem; }
    .news-title { font-size: 0.82rem; }
    .news-text { font-size: 0.72rem; }

    .therapist-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
        padding: 0 15px;
    }
    .therapist-card-name { font-size: 1rem; }
    .therapist-card-sizes { font-size: 0.6rem; }

    .system-image { padding: 0 15px; }

    .access-layout { grid-template-columns: 1fr; gap: 20px; }
    .access-info { padding: 25px 20px; }
    .access-info-item { gap: 15px; padding: 15px 0; }
    .access-info-item .label { flex: 0 0 80px; font-size: 0.65rem; }
    .access-info-item .value { font-size: 0.78rem; }
    .access-map, .access-map iframe { min-height: 300px; }
    .access-phone a { padding: 12px 35px; font-size: 0.95rem; }

    .room-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; padding: 0 15px; }
    .room-item { aspect-ratio: 16 / 9; }

    .event-image { padding: 0 15px; }

    .access-map-second { min-height: 250px; }
    .access-map-second iframe { min-height: 250px; }

    .footer { padding: 40px 0 25px; }
    .footer-info { flex-direction: column; gap: 10px; }
    .footer-info .sep { display: none; }

    .page-header { padding: 100px 0 40px; }

    .therapist-list-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
        padding: 0 15px;
    }

    .therapist-detail-section { padding: 100px 0 60px; }
    .therapist-detail-layout { grid-template-columns: 1fr; gap: 30px; }
    .therapist-detail-info .name { font-size: 1.8rem; }
    .therapist-detail-info .name .age { font-size: 0.9rem; }
    .therapist-detail-info .sizes-grid { gap: 10px; }
    .therapist-detail-info .size-item .value { font-size: 0.95rem; }
    .therapist-detail-info .intro { font-size: 0.78rem; }
    .therapist-detail-gallery { grid-template-columns: repeat(3, 1fr); gap: 10px; }
}

@media screen and (max-width: 480px) {
    .therapist-list-grid { grid-template-columns: repeat(2, 1fr); }


    .hero-logo-img { width: 85%; max-width: 300px; }
    .footer-logo-img { max-width: 200px; }

    .back-to-top { width: 42px; height: 42px; bottom: 20px; right: 20px; }
}