/* ========================================
   Responsive Styles
   日本自動車大学校 袖ケ浦校 - レスポンシブスタイルシート
======================================== */

/* モバイル対応: 768px以下 */
@media (max-width: 768px) {
    /* ヘッダーの優先表示を確保 */
    .header {
        z-index: 9999 !important;
        position: sticky !important;
    }
    
    /* テーブルのレスポンシブ対応 */
    .responsive-table-wrapper {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        margin: 0 -1rem;
        padding: 0 1rem;
    }
    
    .responsive-table {
        min-width: 600px;
        font-size: 0.875rem;
    }
    
    .responsive-table th,
    .responsive-table td {
        padding: 0.5rem !important;
        font-size: 0.875rem !important;
    }
    
    /* 学費テーブルのモバイル最適化 - 1画面に収める */
    .responsive-table-wrapper .responsive-table {
        min-width: 100% !important;
        width: 100% !important;
    }
    
    .responsive-table-wrapper .responsive-table th,
    .responsive-table-wrapper .responsive-table td {
        padding: 0.4rem 0.25rem !important;
        font-size: 0.75rem !important;
        white-space: nowrap;
    }
    
    .responsive-table-wrapper .responsive-table th {
        font-size: 0.7rem !important;
    }
    
    /* 学費テーブルの「計」行 */
    .responsive-table-wrapper .responsive-table tr[style*="background: #f0f7ff"] td {
        font-size: 0.85rem !important;
    }
    
    /* 学費テーブルの「合計」行 */
    .responsive-table-wrapper .responsive-table tr[style*="background: #e3f2fd"] td {
        font-size: 0.75rem !important;
    }
    
    .responsive-table-wrapper .responsive-table tr[style*="background: #e3f2fd"] td[style*="font-size: 1.25rem"] {
        font-size: 1rem !important;
    }
    
    /* グリッドレイアウトのモバイル対応 */
    [style*="grid-template-columns: 1fr 1fr"] {
        grid-template-columns: 1fr !important;
    }
    
    /* カレンダーグリッドのモバイル対応 - 6カラム → 3カラム */
    [style*="grid-template-columns: repeat(6, 1fr)"] {
        grid-template-columns: repeat(3, 1fr) !important;
    }
    
    /* フォーム要素のモバイル対応 */
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="number"],
    select,
    textarea {
        font-size: 16px !important; /* iOSのズームを防ぐ */
    }
    
    /* コンテナのパディング調整 */
    .container {
        padding-left: 1rem;
        padding-right: 1rem;
    }
    
    /* セクションのパディング調整 */
    .content-section {
        padding: 2rem 0;
    }
    
    /* 見出しのサイズ調整 */
    h1 {
        font-size: 1.75rem !important;
    }
    
    h2 {
        font-size: 1.5rem !important;
    }
    
    h3 {
        font-size: 1.25rem !important;
    }
    
    h4 {
        font-size: 1.125rem !important;
    }
    
    /* テキストサイズ調整 */
    p, li, td, th {
        font-size: 0.9375rem !important;
        line-height: 1.7 !important;
    }
    
    /* スタイル属性のオーバーライド */
    [style*="padding: 2rem"] {
        padding: 1.5rem !important;
    }
    
    [style*="margin-bottom: 3rem"] {
        margin-bottom: 2rem !important;
    }
    
    [style*="margin-bottom: 2rem"] {
        margin-bottom: 1.5rem !important;
    }
    
    /* flexboxの調整 */
    [style*="display: flex"][style*="gap: 2rem"] {
        flex-direction: column;
        gap: 1rem !important;
    }
    
    /* ヒーローセクションのスライダードット - モバイル用 */
    .hero-dots {
        bottom: 0.5rem !important;
        padding: 0.5rem 1rem !important;
        gap: 0.5rem !important;
    }
    
    .hero-dot {
        width: 12px !important;
        height: 12px !important;
    }
    
    .hero-dot.active {
        width: 36px !important;
    }
    
    /* ヒーローセクションの画像位置調整 - モバイル用 */
    .hero-slide:nth-child(2) {
        background-position: 35% center !important;
    }
    
    /* アンカーリンクのスクロール位置調整 - モバイル用 */
    [id] {
        scroll-margin-top: 80px;
    }
    
    /* ヒーローセクションのコンテンツ調整 - CTAボタンとの干渉を防ぐ */
    .hero-content {
        padding-bottom: 4rem !important;
    }
    
    .hero-buttons {
        flex-direction: column !important;
        gap: 0.75rem !important;
        margin-bottom: 1rem !important;
    }
    
    .hero-buttons .btn {
        width: 100% !important;
        max-width: 300px !important;
    }
}

/* 小さいスマートフォン対応: 480px以下 */
@media (max-width: 480px) {
    /* カレンダーグリッドのさらに小さい画面対応 - 6カラム → 2カラム */
    [style*="grid-template-columns: repeat(6, 1fr)"] {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    
    /* 学費テーブルのさらなる最適化 */
    .responsive-table-wrapper .responsive-table th,
    .responsive-table-wrapper .responsive-table td {
        padding: 0.3rem 0.15rem !important;
        font-size: 0.7rem !important;
    }
    
    .responsive-table-wrapper .responsive-table th {
        font-size: 0.65rem !important;
        line-height: 1.2 !important;
    }
    
    /* 学費テーブルの「計」行 */
    .responsive-table-wrapper .responsive-table tr[style*="background: #f0f7ff"] td {
        font-size: 0.75rem !important;
    }
    
    /* 学費テーブルの「合計」行 */
    .responsive-table-wrapper .responsive-table tr[style*="background: #e3f2fd"] td {
        font-size: 0.7rem !important;
    }
    
    .responsive-table-wrapper .responsive-table tr[style*="background: #e3f2fd"] td[style*="font-size: 1.25rem"] {
        font-size: 0.9rem !important;
    }
    
    .container {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }
    
    .content-section {
        padding: 1.5rem 0;
    }
    
    h1 {
        font-size: 1.5rem !important;
    }
    
    h2 {
        font-size: 1.375rem !important;
    }
    
    h3 {
        font-size: 1.125rem !important;
    }
    
    [style*="padding: 1.5rem"] {
        padding: 1rem !important;
    }
    
    .responsive-table {
        min-width: 500px;
        font-size: 0.8125rem;
    }
    
    .responsive-table th,
    .responsive-table td {
        padding: 0.375rem !important;
        font-size: 0.8125rem !important;
    }
}

/* タブレット対応: 769px〜1024px */
@media (min-width: 769px) and (max-width: 1024px) {
    .container {
        padding-left: 2rem;
        padding-right: 2rem;
    }
    
    .responsive-table {
        font-size: 0.95rem;
    }
}