/* ========================================
   レスポンシブデザイン - グローバル設定
   ======================================== */

/* ブレークポイントの定義
   - デスクトップ: 1025px以上（変更なし）
   - タブレット: 768px - 1024px
   - モバイル: 767px以下
   - 小型モバイル: 480px以下
*/

/* ========================================
   共通のレスポンシブ設定
   ======================================== */

/* ベースリセット - モバイルファースト */
* {
    box-sizing: border-box;
}

/* 横スクロール防止 */
html, body {
    overflow-x: hidden;
    width: 100%;
}

/* コンテナの最大幅制限 */
.container, section {
    max-width: 100%;
    overflow-x: hidden;
}

/* ========================================
   タブレット用スタイル (768px - 1024px)
   ======================================== */
@media (max-width: 1024px) and (min-width: 769px) {
    /* パディング調整 */
    section {
        padding: 60px 40px;
    }
    
    /* フォントサイズ調整 */
    h1 {
        font-size: 2.5rem;
    }
    
    h2 {
        font-size: 2rem;
    }
    
    h3 {
        font-size: 1.5rem;
    }
    
    /* グリッドレイアウト調整 */
    .grid-3-columns {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ========================================
   モバイル用スタイル (767px以下)
   ======================================== */
@media (max-width: 768px) {
    /* 基本的なパディング */
    section {
        padding: 40px 20px;
    }
    
    /* タイポグラフィ調整 */
    h1 {
        font-size: 2rem;
        line-height: 1.3;
    }
    
    h2 {
        font-size: 1.75rem;
        line-height: 1.3;
    }
    
    h3 {
        font-size: 1.25rem;
        line-height: 1.4;
    }
    
    p {
        font-size: 1rem;
        line-height: 1.6;
    }
    
    /* フレックスボックスの縦並び化 */
    .flex-row {
        flex-direction: column;
    }
    
    /* グリッドレイアウトの単一カラム化 */
    .grid-2-columns, 
    .grid-3-columns, 
    .grid-4-columns {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    /* 固定幅要素の調整 */
    img, video, iframe {
        max-width: 100%;
        height: auto;
    }
    
    /* ボタンの調整 */
    button, .button, .cta-button {
        width: 100%;
        max-width: 300px;
        margin: 10px auto;
        display: block;
    }
    
    /* テーブルのレスポンシブ化 */
    table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }
    
    /* モバイル用の余白調整 */
    .desktop-only {
        display: none;
    }
    
    .mobile-only {
        display: block;
    }
}

/* ========================================
   小型モバイル用スタイル (480px以下)
   ======================================== */
@media (max-width: 480px) {
    /* さらに小さいパディング */
    section {
        padding: 30px 15px;
    }
    
    /* フォントサイズのさらなる調整 */
    h1 {
        font-size: 1.75rem;
    }
    
    h2 {
        font-size: 1.5rem;
    }
    
    h3 {
        font-size: 1.15rem;
    }
    
    p {
        font-size: 0.95rem;
    }
    
    /* 小さいボタン */
    button, .button, .cta-button {
        padding: 10px 20px;
        font-size: 0.9rem;
    }
}

/* ========================================
   ユーティリティクラス
   ======================================== */

/* デスクトップのみ表示 */
@media (max-width: 768px) {
    .desktop-only {
        display: none !important;
    }
}

/* モバイルのみ表示 */
@media (min-width: 769px) {
    .mobile-only {
        display: none !important;
    }
}

/* タブレット以上で表示 */
@media (max-width: 768px) {
    .tablet-up {
        display: none !important;
    }
}

/* レスポンシブな間隔調整 */
@media (max-width: 768px) {
    .responsive-spacing {
        margin-top: 20px;
        margin-bottom: 20px;
    }
}

/* フレックスボックスのレスポンシブ化 */
@media (max-width: 768px) {
    .responsive-flex {
        flex-direction: column;
        align-items: stretch;
    }
    
    .responsive-flex > * {
        width: 100%;
        margin-bottom: 20px;
    }
    
    .responsive-flex > *:last-child {
        margin-bottom: 0;
    }
}

/* グリッドのレスポンシブ化 */
@media (max-width: 768px) {
    .responsive-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
}

/* テキストの中央揃え（モバイル） */
@media (max-width: 768px) {
    .mobile-center {
        text-align: center;
    }
}