/**
 * スマホ専用最適化CSS
 * モバイルでの閲覧体験を大幅に改善
 */

/* ========================================
   スマホ専用ヘッダー改善
   ======================================== */

@media (max-width: 768px) {
    /* ヘッダー全体 - コンパクト化 */
    .header {
        position: sticky;
        top: 0;
        z-index: 9999;
        /* 完全な不透明度にして背景透過を防ぐ */
        background: linear-gradient(135deg, rgb(92, 107, 192), rgb(156, 39, 176)) !important;
    }
    
    .header .container {
        padding: 0.4rem 0.6rem !important; /* さらにパディングを削減 */
        gap: 0.4rem !important;
    }
    
    .logo {
        font-size: 0.95rem !important; /* ロゴサイズをさらに削減 */
        gap: 0.3rem !important;
        padding: 0.2rem 0 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
    }
    
    /* ナビゲーションボタンのテキストを短縮 */
    .btn-nav-premium,
    .btn-nav-vip {
        font-size: 0.75rem !important;
        padding: 0.4rem 0.6rem !important;
        white-space: nowrap !important;
    }
    
    /* アイコンボタンのサイズ調整 */
    .btn-nav-icon {
        min-width: 36px !important;
        min-height: 36px !important;
        font-size: 1rem !important;
        padding: 0.4rem !important;
    }
    
    .logo i {
        font-size: 1.1rem !important; /* アイコンサイズを削減 */
    }
    
    /* ナビゲーションボタングリッド - 2行レイアウト（完全均等） */
    .nav {
        width: 100%;
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important; /* 3列グリッドに変更 */
        grid-template-rows: auto auto !important; /* 2行 */
        gap: 0.5rem !important;
        padding: 0;
    }
    
    /* 1行目：アイコンボタン（講師、勉強会、実績） - 完全均等 */
    .btn-nav-icon {
        width: 100% !important;
        height: 36px !important;
        border-radius: 10px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 2px !important;
        padding: 0.3rem !important;
        background: linear-gradient(135deg, rgba(255, 255, 255, 0.25), rgba(255, 255, 255, 0.15)) !important;
        border: 1.5px solid rgba(255, 255, 255, 0.4) !important;
        font-size: 10px !important;
        grid-row: 1 !important; /* 1行目に固定 */
        grid-column: span 1 !important; /* 1列のみ占有 */
    }
    
    /* 4つ目のアイコン（コミュニティ）を非表示にして3つ均等に */
    .btn-nav-icon:nth-of-type(4) {
        display: none !important;
    }
    
    .btn-nav-icon i {
        font-size: 16px !important;
        margin: 0 !important;
    }
    
    /* 2行目：会員ボタン（無料、プレミアム、VIP）- 完全均等 */
    .btn-nav,
    .btn-nav-premium,
    .btn-nav-vip {
        width: 100% !important;
        height: 40px !important;
        padding: 0.5rem 0.2rem !important; /* パディングを削減 */
        font-size: 10px !important; /* フォントサイズを小さく 11px → 10px */
        font-weight: 700 !important;
        border-radius: 10px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 2px !important; /* ギャップを削減 */
        white-space: nowrap !important;
        grid-row: 2 !important; /* 2行目に固定 */
        grid-column: span 1 !important; /* 1列のみ占有（完全均等） */
    }
    
    .btn-nav i,
    .btn-nav-premium i,
    .btn-nav-vip i {
        font-size: 12px !important;
    }
    
    /* タップ時のフィードバック強化 */
    .btn-nav-icon:active,
    .btn-nav:active,
    .btn-nav-premium:active,
    .btn-nav-vip:active {
        transform: scale(0.95);
        transition: transform 0.1s ease;
    }
}

/* ========================================
   スマホ専用：ヒーローセクション
   ======================================== */

@media (max-width: 768px) {
    .hero {
        min-height: 85vh;
        padding: 2rem 1rem;
    }
    
    .hero-content {
        padding: 1.5rem;
    }
    
    .hero-content h1 {
        font-size: 2rem !important;
        line-height: 1.3 !important;
        margin-bottom: 1rem !important;
    }
    
    .hero-content p {
        font-size: 1rem !important;
        line-height: 1.6 !important;
        margin-bottom: 2rem !important;
    }
    
    /* CTAボタンを縦並びに */
    .hero-cta {
        flex-direction: column !important;
        gap: 1rem !important;
        width: 100% !important;
    }
    
    .hero-cta .btn-primary,
    .hero-cta .btn-secondary {
        width: 100% !important;
        min-width: auto !important;
        padding: 1rem 2rem !important;
        font-size: 1.1rem !important;
        height: 56px !important;
    }
}

/* ========================================
   スマホ専用：カレンダーセクション
   ======================================== */

@media (max-width: 768px) {
    .seminar-calendar-container {
        padding: 1.5rem 0.8rem !important;
        margin-bottom: 2rem !important;
    }
    
    .calendar-header h3 {
        font-size: 1.3rem !important;
    }
    
    .calendar-nav {
        width: 44px !important;
        height: 44px !important;
        font-size: 1.2rem !important;
    }
    
    .weekday {
        font-size: 12px !important;
        padding: 8px 4px !important;
    }
    
    .calendar-day {
        min-height: 100px !important;
        padding: 8px 6px !important;
    }
    
    .day-number {
        font-size: 16px !important;
        margin-bottom: 6px !important;
    }
    
    .event-title {
        font-size: 11px !important;
        padding: 6px 7px !important;
        min-height: 36px !important;
    }
}

/* ========================================
   スマホ専用：FAQセクション
   ======================================== */

@media (max-width: 768px) {
    .faq-chatbot-section {
        padding: 2rem 1rem !important;
    }
    
    .faq-categories {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 1rem !important;
    }
    
    .faq-category-btn {
        height: 80px !important;
        padding: 1rem !important;
        font-size: 14px !important;
    }
    
    .faq-category-btn i {
        font-size: 24px !important;
        margin-bottom: 8px !important;
    }
    
    .faq-item {
        padding: 1.2rem !important;
        margin-bottom: 1rem !important;
    }
    
    .faq-question {
        font-size: 15px !important;
        line-height: 1.5 !important;
    }
    
    .faq-answer {
        font-size: 14px !important;
        line-height: 1.7 !important;
    }
}

/* ========================================
   スマホ専用：価格表
   ======================================== */

@media (max-width: 768px) {
    .plans-grid {
        grid-template-columns: 1fr !important;
        gap: 2rem !important;
        padding: 1rem !important;
    }
    
    .plan-card {
        margin: 0 !important;
        max-width: 100% !important;
    }
    
    .plan-price {
        font-size: 2.5rem !important;
    }
    
    .plan-cta {
        padding: 1rem 2rem !important;
        font-size: 1.1rem !important;
        height: 56px !important;
    }
}

/* ========================================
   スマホ専用：フォントサイズ全体調整
   ======================================== */

@media (max-width: 768px) {
    body {
        font-size: 16px !important;
        line-height: 1.6 !important;
    }
    
    h1 {
        font-size: 2rem !important;
        line-height: 1.3 !important;
    }
    
    h2 {
        font-size: 1.7rem !important;
        line-height: 1.4 !important;
    }
    
    h3 {
        font-size: 1.4rem !important;
        line-height: 1.4 !important;
    }
    
    h4 {
        font-size: 1.2rem !important;
        line-height: 1.4 !important;
    }
    
    p {
        font-size: 15px !important;
        line-height: 1.7 !important;
    }
    
    .section-title {
        font-size: 1.8rem !important;
        margin-bottom: 1.5rem !important;
    }
    
    .section-subtitle {
        font-size: 1rem !important;
        margin-bottom: 2rem !important;
    }
}

/* ========================================
   スマホ専用：ボタン全体のサイズ調整
   ======================================== */

@media (max-width: 768px) {
    /* すべてのボタンを最低44x44pxに */
    button,
    .btn,
    .btn-primary,
    .btn-secondary,
    a.btn {
        min-height: 44px !important;
        min-width: 44px !important;
        padding: 0.8rem 1.5rem !important;
        font-size: 15px !important;
        border-radius: 12px !important;
        cursor: pointer !important;
        touch-action: manipulation !important;
    }
    
    /* タップ領域を広げる */
    button::before,
    .btn::before,
    a.btn::before {
        content: '';
        position: absolute;
        top: -8px;
        left: -8px;
        right: -8px;
        bottom: -8px;
    }
}

/* ========================================
   スマホ専用：余白・パディング調整
   ======================================== */

@media (max-width: 768px) {
    .container {
        padding: 0 1rem !important;
    }
    
    section {
        padding: 3rem 0 !important;
    }
    
    .section-padding {
        padding: 2rem 1rem !important;
    }
}

/* ========================================
   スマホ専用：画像最適化
   ======================================== */

@media (max-width: 768px) {
    img {
        max-width: 100% !important;
        height: auto !important;
    }
    
    .testimonial-preview-card img {
        width: 100% !important;
        height: auto !important;
        object-fit: cover !important;
    }
}

/* ========================================
   スマホ専用：スクロール最適化
   ======================================== */

@media (max-width: 768px) {
    html {
        scroll-behavior: smooth;
    }
    
    /* 横スクロール防止 */
    body {
        overflow-x: hidden !important;
        max-width: 100vw !important;
        width: 100% !important;
    }
    
    /* すべての要素の幅制限 */
    * {
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    
    /* コンテナの幅制限 */
    .container,
    section,
    div {
        max-width: 100vw !important;
        overflow-x: hidden !important;
    }
    
    /* テキストの折り返し */
    h1, h2, h3, h4, h5, h6, p, span {
        word-break: keep-all !important;
        overflow-wrap: break-word !important;
        hyphens: auto !important;
    }
}

/* ========================================
   スマホ専用：タッチフィードバック
   ======================================== */

@media (max-width: 768px) {
    /* タップ時のハイライトカラー */
    * {
        -webkit-tap-highlight-color: rgba(156, 39, 176, 0.2);
    }
    
    /* タップ可能要素の視覚的フィードバック */
    a:active,
    button:active,
    .btn:active {
        opacity: 0.7;
        transform: scale(0.98);
    }
}

/* ========================================
   スマホ専用：フッター最適化
   ======================================== */

@media (max-width: 768px) {
    footer {
        padding: 2rem 1rem !important;
    }
    
    footer .container {
        flex-direction: column !important;
        text-align: center !important;
        gap: 1.5rem !important;
    }
}

/* ========================================
   スマホ専用：勉強会セクション最適化
   ======================================== */

@media (max-width: 768px) {
    /* 勉強会ヒーローセクション */
    .free-trial-seminar-hero {
        padding: 30px 0 40px !important;
    }
    
    .free-trial-seminar-hero .container {
        padding: 0 15px !important;
        max-width: 100% !important;
    }
    
    /* メインタイトル - 改行を考慮 */
    .free-trial-seminar-hero h1 {
        font-size: 1.4rem !important;
        line-height: 1.5 !important;
        margin-bottom: 15px !important;
        padding: 0 10px !important;
        word-break: keep-all !important;
        overflow-wrap: break-word !important;
    }
    
    /* モバイル専用改行を表示 */
    .mobile-br {
        display: block !important;
    }
    
    /* 無料会員限定バッジ */
    .free-member-badge {
        font-size: 0.9rem !important;
        padding: 8px 20px !important;
        margin-bottom: 15px !important;
    }
    
    /* 説明文 */
    .free-trial-seminar-hero p {
        font-size: 0.95rem !important;
        margin-bottom: 15px !important;
        padding: 0 10px !important;
    }
    
    /* 勉強会カードグリッド */
    .trial-seminar-grid {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
        padding: 0 5px !important;
    }
    
    /* 勉強会カード */
    .trial-seminar-card {
        border-radius: 15px !important;
        border-width: 3px !important;
        max-width: 100% !important;
        margin: 0 auto !important;
    }
    
    /* 日時バー */
    .seminar-date-bar {
        padding: 12px 15px !important;
        font-size: 1rem !important;
        word-break: keep-all !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }
    
    /* カードコンテンツ */
    .trial-seminar-card h3 {
        font-size: 1.2rem !important;
        line-height: 1.5 !important;
        margin-bottom: 10px !important;
        word-break: keep-all !important;
        overflow-wrap: break-word !important;
    }
    
    .trial-seminar-card p {
        font-size: 0.9rem !important;
        line-height: 1.6 !important;
        margin-bottom: 15px !important;
    }
    
    /* Zoomボタン */
    .btn-zoom-join {
        padding: 14px 18px !important;
        font-size: 1rem !important;
        border-radius: 40px !important;
    }
    
    /* 残席わずかバッジ */
    .availability-badge {
        padding: 10px 15px !important;
    }
    
    .badge-limited {
        font-size: 0.85rem !important;
        padding: 5px 12px !important;
    }
}

/* ========================================
   小型スマホ専用（375px以下）
   ======================================== */

@media (max-width: 375px) {
    /* メインタイトルをさらに縮小 */
    .free-trial-seminar-hero h1 {
        font-size: 1.3rem !important;
    }
    
    /* カードのパディング調整 */
    .trial-seminar-card > div[style*="padding"] {
        padding: 20px 15px !important;
    }
    
    /* 日時バーのフォントサイズ */
    .seminar-date-bar {
        font-size: 0.95rem !important;
        padding: 10px 12px !important;
    }
    
    /* タイトルのフォントサイズ */
    .trial-seminar-card h3 {
        font-size: 1.1rem !important;
    }
}

/* ========================================
   フローティングメニュー - ハイライトアニメーション
   ======================================== */

/* セクションハイライトエフェクト */
.highlighted-section {
    animation: section-highlight 2s ease;
}

@keyframes section-highlight {
    0% {
        background-color: transparent;
    }
    50% {
        background-color: rgba(255, 107, 157, 0.1);
    }
    100% {
        background-color: transparent;
    }
}

/* スムーズスクロールの有効化 */
html {
    scroll-behavior: smooth;
}