/**
 * レスポンシブデザイン
 * モバイル・タブレット・デスクトップ対応
 */

/* ===== モバイル（≤599px） ===== */
@media (max-width: 599px) {
    :root {
        --font-size-base: 13px;
        --font-size-large: 15px;
        --font-size-xl: 16px;
        --font-size-2xl: 20px;
        --font-size-3xl: 24px;
    }
    
    html {
        font-size: 14px;
    }
    
    body {
        padding: 0;
        margin: 0;
    }
    
    h1 {
        font-size: var(--font-size-3xl);
        margin: var(--spacing-md) 0 var(--spacing-sm) 0;
    }
    
    h2 {
        font-size: var(--font-size-2xl);
        margin: var(--spacing-md) 0 var(--spacing-md) 0;
    }
    
    p {
        font-size: var(--font-size-base);
        margin: var(--spacing-sm) 0;
    }
    
    /* レイアウト */
    .container {
        width: 100%;
        padding: var(--spacing-md);
        max-width: 100%;
    }
    
    /* グリッド */
    .grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: var(--spacing-md);
    }
    
    .grid-2 {
        grid-template-columns: 1fr;
    }
    
    .grid-3 {
        grid-template-columns: 1fr;
    }
    
    /* フレックス */
    .flex-wrap {
        flex-direction: column;
    }
    
    /* ボタン */
    button, .btn {
        width: 100%;
        padding: var(--spacing-md);
        font-size: var(--font-size-large);
        min-height: 48px;
    }
    
    /* タッチ対応 */
    body {
        touch-action: manipulation;
    }
}

/* ===== タブレット（600px～899px） ===== */
@media (min-width: 600px) and (max-width: 899px) {
    :root {
        --font-size-base: 14px;
        --font-size-large: 16px;
        --font-size-xl: 18px;
        --font-size-2xl: 24px;
        --font-size-3xl: 28px;
    }
    
    html {
        font-size: 15px;
    }
    
    h1 {
        font-size: var(--font-size-3xl);
        margin: var(--spacing-lg) 0 var(--spacing-md) 0;
    }
    
    h2 {
        font-size: var(--font-size-2xl);
        margin: var(--spacing-md) 0 var(--spacing-md) 0;
    }
    
    /* レイアウト */
    .container {
        width: 100%;
        padding: var(--spacing-lg);
        max-width: 800px;
        margin: 0 auto;
    }
    
    /* グリッド */
    .grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: var(--spacing-md);
    }
    
    .grid-2 {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .grid-3 {
        grid-template-columns: repeat(2, 1fr);
    }
    
    /* ボタン */
    button, .btn {
        padding: var(--spacing-md) var(--spacing-lg);
        font-size: var(--font-size-large);
        min-height: 44px;
        max-width: 300px;
    }
}

/* ===== デスクトップ（≥900px） ===== */
@media (min-width: 900px) {
    html {
        font-size: 16px;
    }
    
    h1 {
        font-size: var(--font-size-3xl);
        margin: var(--spacing-xl) 0 var(--spacing-lg) 0;
    }
    
    h2 {
        font-size: var(--font-size-2xl);
        margin: var(--spacing-lg) 0 var(--spacing-md) 0;
    }
    
    /* レイアウト */
    .container {
        width: 100%;
        padding: var(--spacing-xl);
        max-width: 1200px;
        margin: 0 auto;
    }
    
    /* グリッド */
    .grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: var(--spacing-lg);
    }
    
    .grid-2 {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .grid-3 {
        grid-template-columns: repeat(3, 1fr);
    }
    
    /* ボタン */
    button, .btn {
        padding: var(--spacing-md) var(--spacing-xl);
        font-size: var(--font-size-large);
        min-height: 44px;
        max-width: 200px;
    }
    
    button:hover {
        box-shadow: var(--shadow-md);
    }
}

/* ===== 超大型スクリーン（≥1200px） ===== */
@media (min-width: 1200px) {
    .container {
        max-width: 1400px;
    }
    
    h1 {
        font-size: 36px;
    }
}

/* ===== 非常に小さいスクリーン（≤359px） ===== */
@media (max-width: 359px) {
    :root {
        --spacing-md: 12px;
        --spacing-lg: 16px;
    }
    
    html {
        font-size: 13px;
    }
    
    button, .btn {
        font-size: 14px;
        padding: var(--spacing-sm) var(--spacing-md);
    }
}

/* ===== 表示デバイス別 ===== */

/* ポートレイト */
@media (orientation: portrait) {
    body {
        max-width: 100vw;
        overflow-x: hidden;
    }
    
    .grid-portrait {
        display: grid;
        grid-template-columns: 1fr;
    }
}

/* ランドスケープ */
@media (orientation: landscape) {
    .grid-landscape {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }
    
    h1, h2 {
        margin: var(--spacing-md) 0;
    }
}

/* タッチデバイス */
@media (hover: none) and (pointer: coarse) {
    button, a {
        padding: var(--spacing-md);
        min-height: 48px;
        min-width: 48px;
    }
    
    button:active {
        background-color: rgba(0, 0, 0, 0.1);
    }
}

/* マウス/ポインタ */
@media (hover: hover) and (pointer: fine) {
    button:hover {
        opacity: 0.9;
    }
}

/* 折りたたみデバイス */
@media (screen-spanning: single-fold-vertical) {
    .grid {
        grid-template-columns: 1fr 1fr;
        gap: var(--spacing-lg);
    }
}

@media (screen-spanning: single-fold-horizontal) {
    .grid {
        grid-template-columns: 1fr;
    }
}

/* ===== プリント ===== */
@media print {
    body {
        background: white;
        color: black;
    }
    
    .no-print {
        display: none !important;
    }
}

/* ===== フォントサイズの自動スケーリング ===== */
@media (prefers-reduced-motion: no-preference) {
    html {
        scroll-behavior: smooth;
    }
}