/* ひきこまれパンダ ポートフォリオ - レスポンシブデザイン */

/* タブレット用スタイル (768px - 1024px) */
@media (min-width: 768px) and (max-width: 1024px) {
    /* ナビゲーション調整 */
    .max-w-7xl {
        max-width: 90%;
    }
    
    /* ヒーローセクション */
    #home h2 {
        font-size: 3.5rem;
    }
    
    #home p {
        font-size: 1.125rem;
    }
    
    /* グリッドレイアウト調整 */
    .grid.lg\\:grid-cols-3 {
        grid-template-columns: repeat(2, 1fr);
    }
    
    /* スキルセクション */
    #skills .grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
    }
}

/* モバイル用スタイル (〜767px) */
@media (max-width: 767px) {
    /* 全体的なパディング調整 */
    .px-6 {
        padding-left: 1rem;
        padding-right: 1rem;
    }
    
    /* ヘッダー調整 */
    header .py-4 {
        padding-top: 1rem;
        padding-bottom: 1rem;
    }
    
    header h1 {
        font-size: 1.125rem;
    }
    
    .w-10.h-10 {
        width: 2rem;
        height: 2rem;
    }
    
    /* ヒーローセクション */
    #home {
        padding-top: 5rem;
        text-align: center;
    }
    
    #home h2 {
        font-size: 2.5rem;
        line-height: 1.1;
        margin-bottom: 1.5rem;
    }
    
    #home .text-xl {
        font-size: 1.125rem;
    }
    
    #home .text-lg {
        font-size: 1rem;
        line-height: 1.5;
    }
    
    #home .w-24.h-24 {
        width: 4rem;
        height: 4rem;
    }
    
    /* ボタンレイアウト */
    #home .flex.flex-col.sm\\:flex-row {
        flex-direction: column;
        gap: 0.75rem;
    }
    
    #home .px-8.py-3 {
        padding: 0.75rem 1.5rem;
        font-size: 0.9rem;
    }
    
    /* セクション調整 */
    .py-20 {
        padding-top: 3rem;
        padding-bottom: 3rem;
    }
    
    /* About セクション */
    #about .grid.md\\:grid-cols-2 {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    
    #about .text-4xl {
        font-size: 2rem;
    }
    
    #about .bg-gray-800\\/80 {
        padding: 1.25rem;
    }
    
    #about h4 {
        font-size: 1.125rem;
    }
    
    /* Works セクション */
    #works .grid.md\\:grid-cols-2.lg\\:grid-cols-3 {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    
    #works .h-48 {
        height: 10rem;
    }
    
    #works .text-6xl {
        font-size: 3rem;
    }
    
    /* Skills セクション */
    #skills .grid.md\\:grid-cols-2.lg\\:grid-cols-3 {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    
    #skills .text-3xl {
        font-size: 2rem;
    }
    
    /* Philosophy セクション */
    #philosophy .grid.md\\:grid-cols-2 {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    
    #philosophy .text-2xl {
        font-size: 1.25rem;
    }
    
    /* Contact セクション */
    #contact .grid.md\\:grid-cols-2 {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    
    /* フッター */
    footer .grid.md\\:grid-cols-3 {
        grid-template-columns: 1fr;
        gap: 2rem;
        text-align: center;
    }
    
    footer .flex.flex-col.md\\:flex-row {
        flex-direction: column;
        align-items: center;
        gap: 1rem;
    }
    
    /* フローティング要素のモバイル調整 */
    .animate-float {
        display: none;
    }
    
    /* パーティクルエフェクトをモバイルでは軽量化 */
    .particle {
        width: 2px;
        height: 2px;
        animation-duration: 2s;
    }
}

/* 小型モバイル用スタイル (〜480px) */
@media (max-width: 480px) {
    /* ヒーローセクション */
    #home h2 {
        font-size: 2rem;
    }
    
    #home .w-16.h-16 {
        width: 3rem;
        height: 3rem;
    }
    
    /* テキストサイズ調整 */
    .text-4xl {
        font-size: 1.75rem;
    }
    
    .text-2xl {
        font-size: 1.25rem;
    }
    
    .text-xl {
        font-size: 1rem;
    }
    
    /* カードパディング調整 */
    .p-8 {
        padding: 1.25rem;
    }
    
    .p-6 {
        padding: 1rem;
    }
    
    /* スペーシング調整 */
    .space-y-6 > * + * {
        margin-top: 1rem;
    }
    
    .space-y-4 > * + * {
        margin-top: 0.75rem;
    }
    
    /* ボタンサイズ調整 */
    .px-8 {
        padding-left: 1.25rem;
        padding-right: 1.25rem;
    }
    
    /* モーダルのモバイル調整 */
    .max-w-2xl {
        max-width: 95%;
    }
}

/* 横向きモバイル用スタイル */
@media (max-height: 600px) and (orientation: landscape) {
    #home {
        padding-top: 2rem;
        min-height: auto;
    }
    
    #home h2 {
        font-size: 2rem;
        margin-bottom: 0.5rem;
    }
    
    #home .mb-8 {
        margin-bottom: 1rem;
    }
    
    .py-20 {
        padding-top: 2rem;
        padding-bottom: 2rem;
    }
}

/* 大型画面用の調整 (1441px以上) */
@media (min-width: 1441px) {
    .max-w-7xl {
        max-width: 1400px;
    }
    
    #home h2 {
        font-size: 5rem;
    }
    
    #home .text-2xl {
        font-size: 1.75rem;
    }
    
    .text-4xl {
        font-size: 3rem;
    }
}

/* タッチデバイス用の調整 */
@media (pointer: coarse) {
    /* タッチターゲットのサイズを大きく */
    button,
    a {
        min-height: 44px;
        min-width: 44px;
    }
    
    /* ホバー効果を無効化 */
    .group:hover {
        transform: none;
    }
    
    /* タッチ用のフィードバック */
    button:active,
    a:active {
        transform: scale(0.98);
        transition: transform 0.1s ease;
    }
}

/* 高解像度ディスプレイ用 */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    /* アイコンやテキストの鮮明化 */
    .fas,
    .fab {
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }
}

/* プリント用の追加調整 */
@media print {
    /* カラー調整 */
    * {
        color: #000 !important;
        background: #fff !important;
    }
    
    /* 不要な要素を非表示 */
    .animate-float,
    .particle,
    button {
        display: none !important;
    }
    
    /* ページブレーク調整 */
    h2, h3, h4 {
        page-break-after: avoid;
    }
    
    p, li {
        orphans: 3;
        widows: 3;
    }
}

/* アクセシビリティ: 動きを減らす設定 */
@media (prefers-reduced-motion: reduce) {
    .animate-float,
    .particle {
        display: none;
    }
    
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ダークモード対応 */
@media (prefers-color-scheme: dark) {
    /* 既にダークテーマなので、さらに深いダークモード */
    .bg-gray-900 {
        background-color: #000000;
    }
    
    .bg-gray-800 {
        background-color: #111111;
    }
}

/* 高コントラストモード */
@media (prefers-contrast: high) {
    /* コントラストを高める */
    .text-gray-300 {
        color: #ffffff;
    }
    
    .text-gray-400 {
        color: #cccccc;
    }
    
    .border-gray-700 {
        border-color: #ffffff;
    }
    
    /* グラデーション背景を単色に */
    .bg-gradient-to-r,
    .bg-gradient-to-br {
        background: #ffffff;
        color: #000000;
    }
}

/* フレックスボックスの改善 */
@supports (display: flex) {
    .flex-fallback {
        display: flex;
    }
}

/* グリッドレイアウトのフォールバック */
@supports not (display: grid) {
    .grid {
        display: flex;
        flex-wrap: wrap;
    }
    
    .grid > * {
        flex: 1 1 300px;
        margin: 0.5rem;
    }
}

/* カスタムスクロールバー (WebKit browsers) */
@media (min-width: 768px) {
    ::-webkit-scrollbar {
        width: 12px;
    }
    
    ::-webkit-scrollbar-track {
        background: #1f2937;
        border-radius: 6px;
    }
    
    ::-webkit-scrollbar-thumb {
        background: linear-gradient(135deg, #3b82f6, #8b5cf6);
        border-radius: 6px;
        border: 2px solid #1f2937;
    }
    
    ::-webkit-scrollbar-thumb:hover {
        background: linear-gradient(135deg, #2563eb, #7c3aed);
    }
}