/* 📱 モバイル緊急修正 CSS - 2024年12月最新版 */

/* 1. 基本のビューポート設定強制 */
@viewport {
    width: device-width;
    initial-scale: 1.0;
    maximum-scale: 5.0;
    user-scalable: yes;
}

/* 2. 全体のレスポンシブ対応 */
* {
    box-sizing: border-box !important;
}

html {
    font-size: 16px !important;
    -webkit-text-size-adjust: 100% !important;
    -ms-text-size-adjust: 100% !important;
}

body {
    width: 100% !important;
    overflow-x: hidden !important;
    font-size: 16px !important;
    line-height: 1.6 !important;
}

/* 3. ヘッダーの修正 */
@media (max-width: 768px) {
    header {
        padding: 0 !important;
        position: relative !important;
        z-index: 1000 !important;
    }
    
    .header-content {
        flex-direction: column !important;
        gap: 1rem !important;
        padding: 1rem !important;
        align-items: stretch !important;
    }
    
    .header-content h1 {
        font-size: 1.5rem !important;
        text-align: center !important;
        margin-bottom: 0.5rem !important;
    }
    
    .search-container {
        width: 100% !important;
        max-width: none !important;
        justify-content: center !important;
        padding: 0.75rem !important;
    }
    
    .search-container input {
        width: 100% !important;
        max-width: 250px !important;
        font-size: 16px !important;
        padding: 0.75rem !important;
    }
    
    .search-container input:focus {
        width: 100% !important;
        max-width: 280px !important;
    }
    
    .search-container button {
        min-width: 44px !important;
        min-height: 44px !important;
        padding: 0.75rem !important;
    }
}

/* 4. ナビゲーションの修正 */
@media (max-width: 768px) {
    .main-nav {
        padding: 0 !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }
    
    .nav-container {
        padding: 0 1rem !important;
        min-width: 100% !important;
    }
    
    .nav-menu {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 0.5rem !important;
        padding: 0.75rem 0 !important;
        min-width: max-content !important;
    }
    
    .nav-link {
        padding: 0.75rem 1rem !important;
        font-size: 14px !important;
        white-space: nowrap !important;
        border-radius: 20px !important;
        min-width: auto !important;
    }
}

/* 5. メインコンテンツの修正 */
@media (max-width: 768px) {
    main {
        padding: 1rem !important;
        margin: 1rem auto !important;
        max-width: 100% !important;
    }
    
    .grid-container {
        display: block !important;
        gap: 1.5rem !important;
    }
    
    .category-tile {
        margin-bottom: 1.5rem !important;
        padding: 1.5rem !important;
        border-radius: 12px !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    
    .category-header {
        flex-direction: row !important;
        align-items: center !important;
        gap: 1rem !important;
        margin-bottom: 1.5rem !important;
    }
    
    .category-header i {
        font-size: 1.5rem !important;
        padding: 0.75rem !important;
        min-width: auto !important;
    }
    
    .category-header h2 {
        font-size: 1.25rem !important;
        margin-bottom: 0 !important;
        flex: 1 !important;
    }
}

/* 6. 計算機リストの修正 */
@media (max-width: 768px) {
    .calculator-list {
        margin: 0 !important;
        padding: 0 !important;
    }
    
    .calculator-list li {
        margin-bottom: 0.75rem !important;
        width: 100% !important;
    }
    
    .calculator-list a {
        display: block !important;
        padding: 1rem !important;
        font-size: 16px !important;
        line-height: 1.4 !important;
        border-radius: 8px !important;
        width: 100% !important;
        text-decoration: none !important;
        color: var(--text-main, #333) !important;
        background: var(--tile-background, #fff) !important;
        border: 1px solid var(--border-color, #eee) !important;
        transition: all 0.3s ease !important;
    }
    
    .calculator-list a:hover,
    .calculator-list a:focus {
        background: var(--main-color, #f5f5f5) !important;
        transform: none !important;
        box-shadow: 0 2px 8px rgba(0,0,0,0.1) !important;
    }
}

/* 7. フッターの修正 */
@media (max-width: 768px) {
    footer {
        padding: 2rem 1rem !important;
        text-align: center !important;
    }
    
    footer p {
        font-size: 14px !important;
        line-height: 1.5 !important;
        margin: 0 !important;
    }
    
    .footer-links {
        flex-direction: column !important;
        gap: 0.5rem !important;
        margin-top: 1rem !important;
    }
    
    .footer-links a {
        font-size: 14px !important;
        padding: 0.5rem !important;
    }
}

/* 8. 検索結果の修正 */
@media (max-width: 768px) {
    #search-results {
        margin-top: 1rem !important;
        padding: 1rem !important;
        border-radius: 8px !important;
    }
    
    .search-result-item {
        padding: 1rem !important;
        margin-bottom: 0.75rem !important;
        border-radius: 8px !important;
    }
    
    .search-result-item a {
        font-size: 16px !important;
        line-height: 1.4 !important;
    }
}

/* 9. ボタンの修正 */
@media (max-width: 768px) {
    .primary-button,
    .secondary-button,
    button[type="submit"],
    input[type="submit"] {
        width: 100% !important;
        max-width: 300px !important;
        margin: 0 auto !important;
        display: block !important;
        padding: 1rem 2rem !important;
        font-size: 16px !important;
        border-radius: 8px !important;
        min-height: 48px !important;
    }
    
    #clear-search {
        width: auto !important;
        max-width: none !important;
        display: inline-block !important;
        padding: 0.75rem 1.5rem !important;
        margin: 1rem 0 !important;
    }
}

/* 10. ブレッドクラムの修正 */
@media (max-width: 768px) {
    .breadcrumb {
        padding: 0.75rem 1rem !important;
        font-size: 14px !important;
    }
    
    .breadcrumb ol {
        justify-content: flex-start !important;
        flex-wrap: wrap !important;
        gap: 0.25rem !important;
    }
    
    .breadcrumb li {
        font-size: 14px !important;
    }
}

/* 11. 関連コンテンツの修正 */
@media (max-width: 768px) {
    .related-calculators,
    .health-content-section,
    .faq-section,
    .blog-section {
        padding: 1.5rem 1rem !important;
    }
    
    .related-grid,
    .content-grid,
    .blog-categories,
    .featured-articles {
        display: block !important;
        gap: 1rem !important;
    }
    
    .related-item,
    .content-item,
    .article-preview {
        margin-bottom: 1rem !important;
        padding: 1rem !important;
        border-radius: 8px !important;
    }
}

/* 12. タッチ操作の最適化 */
@media (max-width: 768px) {
    a, button, input, select, textarea {
        min-height: 44px !important;
        min-width: 44px !important;
    }
    
    /* タップハイライト色 */
    a, button {
        -webkit-tap-highlight-color: rgba(0, 123, 255, 0.2) !important;
    }
    
    /* スクロール最適化 */
    * {
        -webkit-overflow-scrolling: touch !important;
    }
}

/* 13. 計算機ページ専用の修正 */
@media (max-width: 768px) {
    .calculator-container {
        padding: 1rem !important;
        margin: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    
    .form-group {
        margin-bottom: 1.5rem !important;
    }
    
    .form-group label {
        font-size: 16px !important;
        margin-bottom: 0.5rem !important;
        display: block !important;
    }
    
    .form-group input,
    .form-group select {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0.75rem !important;
        font-size: 16px !important;
        border-radius: 6px !important;
        border: 1px solid #ddd !important;
    }
    
    .result-section {
        margin-top: 1.5rem !important;
        padding: 1.5rem !important;
        border-radius: 8px !important;
    }
    
    .result-value {
        font-size: 2.5rem !important;
        margin: 1rem 0 !important;
    }
}

/* 14. ブログページの修正 */
@media (max-width: 768px) {
    .article-content {
        padding: 1rem !important;
        margin: 0 !important;
    }
    
    .article-header {
        padding: 1rem !important;
    }
    
    .article-meta span {
        font-size: 14px !important;
        margin-right: 1rem !important;
    }
    
    .highlight-box,
    .info-box,
    .warning-box {
        padding: 1rem !important;
        margin: 1rem 0 !important;
        border-radius: 8px !important;
    }
    
    .related-calculators-box {
        padding: 1rem !important;
        margin: 1.5rem 0 !important;
    }
    
    .calculator-links {
        display: block !important;
        gap: 0.75rem !important;
    }
    
    .calculator-link {
        display: block !important;
        padding: 1rem !important;
        margin-bottom: 0.75rem !important;
        border-radius: 8px !important;
        border: 1px solid #ddd !important;
        text-decoration: none !important;
    }
}

/* 15. 緊急時の強制表示修正 */
@media (max-width: 768px) {
    /* 横スクロール防止 */
    body, html {
        overflow-x: hidden !important;
        max-width: 100vw !important;
    }
    
    /* すべての要素の最大幅制限 */
    * {
        max-width: 100% !important;
    }
    
    /* フレックスボックスの調整 */
    .flex, [style*="display: flex"], [style*="display:flex"] {
        flex-wrap: wrap !important;
    }
    
    /* グリッドの調整 */
    .grid, [style*="display: grid"], [style*="display:grid"] {
        display: block !important;
    }
    
    /* 固定幅要素の調整 */
    [style*="width:"], [style*="width "] {
        width: auto !important;
        max-width: 100% !important;
    }
}

/* 16. iOS Safari対応 */
@media (max-width: 768px) {
    /* セーフエリア対応 */
    body {
        padding-left: env(safe-area-inset-left) !important;
        padding-right: env(safe-area-inset-right) !important;
    }
    
    header {
        padding-top: max(1rem, env(safe-area-inset-top)) !important;
    }
    
    /* iOS Safariのズーム防止 */
    input[type="text"],
    input[type="number"],
    input[type="email"],
    input[type="tel"],
    input[type="search"],
    select,
    textarea {
        font-size: 16px !important;
        transform: translateZ(0) !important;
    }
}

/* 17. Android Chrome対応 */
@media (max-width: 768px) {
    /* ビューポートの調整 */
    body {
        -webkit-text-size-adjust: none !important;
        -ms-text-size-adjust: none !important;
        text-size-adjust: none !important;
    }
    
    /* フォントの最適化 */
    * {
        -webkit-font-smoothing: antialiased !important;
        -moz-osx-font-smoothing: grayscale !important;
    }
}

/* 18. 最後の安全対策 */
@media (max-width: 768px) {
    /* すべてのレイアウトを確実にモバイル対応 */
    .container,
    .wrapper,
    .content,
    main,
    section,
    article,
    div {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: auto !important;
        margin-right: auto !important;
        box-sizing: border-box !important;
    }
    
    /* 最小フォントサイズの確保 */
    * {
        font-size: max(14px, 1rem) !important;
        line-height: 1.4 !important;
    }
    
    /* タップターゲットの最小サイズ確保 */
    a, button, input[type="button"], input[type="submit"] {
        min-height: 44px !important;
        min-width: 44px !important;
        padding: 0.75rem 1rem !important;
    }
}