/* examinations.html レスポンシブ対応 CSS */

/* 全デバイス共通の基本設定 */
#molecular-nutrition *,
#allergy-tests *,
#oligoscan *,
#cancer-risk *,
#epiclock *,
#gi-map * {
    max-width: 100%;
    box-sizing: border-box;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* アイコンボックスの統一スタイル（全デバイス共通） */
#molecular-nutrition div[style*="background: linear-gradient"][style*="border-radius"],
#allergy-tests div[style*="background: linear-gradient"][style*="border-radius"],
#oligoscan div[style*="background: linear-gradient"][style*="border-radius"],
#cancer-risk div[style*="background: linear-gradient"][style*="border-radius"],
#epiclock div[style*="background: linear-gradient"][style*="border-radius"],
#gi-map div[style*="background: linear-gradient"][style*="border-radius"] {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    align-self: center !important;
}

/* すべてのアイコンボックスを正方形に統一（全デバイス - PC含む） */
/* より強力なセレクターで確実に適用 */

/* 70pxサイズのアイコンボックス */
#molecular-nutrition div[style*="width: 70px"][style*="height"],
#allergy-tests div[style*="width: 70px"][style*="height"],
#oligoscan div[style*="width: 70px"][style*="height"],
#cancer-risk div[style*="width: 70px"][style*="height"],
#epiclock div[style*="width: 70px"][style*="height"],
#gi-map div[style*="width: 70px"][style*="height"],
.section div[style*="width: 70px"][style*="height"] {
    width: 70px !important;
    height: 70px !important;
    min-width: 70px !important;
    min-height: 70px !important;
    max-width: 70px !important;
    max-height: 70px !important;
    flex: 0 0 70px !important;
    align-self: center !important;
}

/* 60pxサイズのアイコンボックス */
#molecular-nutrition div[style*="width: 60px"][style*="height"],
#allergy-tests div[style*="width: 60px"][style*="height"],
#oligoscan div[style*="width: 60px"][style*="height"],
#cancer-risk div[style*="width: 60px"][style*="height"],
#epiclock div[style*="width: 60px"][style*="height"],
#gi-map div[style*="width: 60px"][style*="height"],
.section div[style*="width: 60px"][style*="height"] {
    width: 60px !important;
    height: 60px !important;
    min-width: 60px !important;
    min-height: 60px !important;
    max-width: 60px !important;
    max-height: 60px !important;
    flex: 0 0 60px !important;
    align-self: center !important;
}

/* 50pxサイズのアイコンボックス */
#molecular-nutrition div[style*="width: 50px"][style*="height"],
#allergy-tests div[style*="width: 50px"][style*="height"],
#oligoscan div[style*="width: 50px"][style*="height"],
#cancer-risk div[style*="width: 50px"][style*="height"],
#epiclock div[style*="width: 50px"][style*="height"],
#gi-map div[style*="width: 50px"][style*="height"],
.section div[style*="width: 50px"][style*="height"] {
    width: 50px !important;
    height: 50px !important;
    min-width: 50px !important;
    min-height: 50px !important;
    max-width: 50px !important;
    max-height: 50px !important;
    flex: 0 0 50px !important;
    align-self: center !important;
}

/* 32pxサイズのステップ番号アイコン（検査プロセス用） */
#molecular-nutrition div[style*="width: 32px"][style*="height"],
#allergy-tests div[style*="width: 32px"][style*="height"],
#oligoscan div[style*="width: 32px"][style*="height"],
#cancer-risk div[style*="width: 32px"][style*="height"],
#epiclock div[style*="width: 32px"][style*="height"],
#gi-map div[style*="width: 32px"][style*="height"],
.section div[style*="width: 32px"][style*="height"],
div[style*="background: #EF4444"][style*="width: 32px"][style*="border-radius: 50%"],
div[style*="background: #3B82F6"][style*="width: 32px"][style*="border-radius: 50%"],
div[style*="background: #10B981"][style*="width: 32px"][style*="border-radius: 50%"] {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    min-height: 32px !important;
    max-width: 32px !important;
    max-height: 32px !important;
    flex: 0 0 32px !important;
    align-self: flex-start !important;
    aspect-ratio: 1 / 1 !important;
}

/* グラデーション背景のアイコンボックスを正方形に（最優先） */
div[style*="background: linear-gradient"][style*="border-radius"][style*="width"][style*="height"][style*="display: flex"] {
    aspect-ratio: 1 / 1 !important;
}

/* すべてのアイコンを中央揃え */
#molecular-nutrition i,
#allergy-tests i,
#oligoscan i,
#cancer-risk i,
#epiclock i,
#gi-map i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* タブレット以下のデバイス対応 */
@media screen and (max-width: 768px) {
    /* セクション全体のパディング調整 */
    .section {
        padding: 60px 15px !important;
    }

    /* コンテナの最大幅調整 */
    .container {
        max-width: 100% !important;
        padding: 0 15px;
    }

    /* 見出しのフォントサイズ調整 */
    .section h2 {
        font-size: 1.8rem !important;
        line-height: 1.3 !important;
        word-break: break-word;
    }

    .section h3 {
        font-size: 1.4rem !important;
        line-height: 1.3 !important;
        word-break: break-word;
    }

    .section h4 {
        font-size: 1.2rem !important;
        line-height: 1.3 !important;
        word-break: break-word;
    }

    /* テキストのフォントサイズ調整 */
    .section p {
        font-size: 0.95rem !important;
        line-height: 1.7 !important;
    }

    /* カードのパディング調整 */
    .section > div > div[style*="padding: 50px"],
    .section > div > div > div[style*="padding: 50px"] {
        padding: 25px 20px !important;
    }

    .section > div > div[style*="padding: 45px"],
    .section > div > div > div[style*="padding: 45px"] {
        padding: 25px 20px !important;
    }

    .section > div > div[style*="padding: 40px"],
    .section > div > div > div[style*="padding: 40px"] {
        padding: 25px 20px !important;
    }

    .section > div > div[style*="padding: 35px"],
    .section > div > div > div[style*="padding: 35px"],
    .section > div > div > div > div[style*="padding: 35px"] {
        padding: 20px 15px !important;
    }

    .section > div > div[style*="padding: 30px"],
    .section > div > div > div[style*="padding: 30px"],
    .section > div > div > div > div[style*="padding: 30px"] {
        padding: 20px 15px !important;
    }

    .section > div > div[style*="padding: 25px"],
    .section > div > div > div[style*="padding: 25px"],
    .section > div > div > div > div[style*="padding: 25px"] {
        padding: 18px 15px !important;
    }

    .section > div > div[style*="padding: 20px"],
    .section > div > div > div[style*="padding: 20px"],
    .section > div > div > div > div[style*="padding: 20px"] {
        padding: 15px 12px !important;
    }

    /* アイコンボックスのサイズ調整 - 統一サイズに */
    .section div[style*="width: 70px"][style*="height"],
    .section div[style*="width: 60px"][style*="height"],
    .section div[style*="width: 50px"][style*="height"] {
        width: 50px !important;
        height: 50px !important;
        min-width: 50px !important;
        min-height: 50px !important;
        max-width: 50px !important;
        max-height: 50px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex-shrink: 0 !important;
        align-self: center !important;
    }

    /* アイコンボックス内のアイコンサイズを統一 */
    .section div[style*="width: 70px"] i,
    .section div[style*="width: 60px"] i,
    .section div[style*="width: 50px"] i {
        font-size: 1.4rem !important;
    }

    /* Flexレイアウトの調整 */
    /* 検査名ヘッダー部分は横並びを維持 */
    .section > div > div > div[style*="display: flex; align-items: center"] {
        flex-direction: row !important;
        align-items: center !important;
        gap: 12px !important;
    }

    /* その他のFlexは縦並び */
    .section > div > div > div[style*="display: flex"][style*="justify-content: center"] {
        flex-direction: row !important;
        flex-wrap: wrap !important;
    }

    /* グリッドレイアウトの最小幅調整 */
    .section div[style*="grid-template-columns"] {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    /* 特定のグリッドは2カラム維持（小さいカード） */
    .section div[style*="grid-template-columns"][style*="minmax(200px"] {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }

    /* 統計情報などの小さいカードは2カラム */
    .section div[style*="text-align: center"][style*="border: 2px"] {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* 特殊な血液検査セクション内のカード（アレルギー検査グループ）を1カラム表示 */
    #allergy-tests div[style*="border-radius: 20px"][style*="padding: 40px"] {
        display: flex !important;
        flex-direction: column !important;
        gap: 25px !important;
    }

    #allergy-tests div[style*="border-radius: 20px"][style*="padding: 40px"] > div[style*="border-radius: 15px"] {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* アンチエイジング評価セクション内のカード（ストレスと老化マーカー検査グループ）を1カラム表示 */
    #epiclock div[style*="border-radius: 20px"][style*="padding: 40px"] {
        display: flex !important;
        flex-direction: column !important;
        gap: 25px !important;
    }

    #epiclock div[style*="border-radius: 20px"][style*="padding: 40px"] > div[style*="border-radius: 15px"] {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}

    /* マージン・ギャップ調整 */
    .section > div > div[style*="margin-bottom: 60px"] {
        margin-bottom: 40px !important;
    }

    .section > div > div[style*="margin-bottom: 40px"],
    .section > div > div > div[style*="margin-bottom: 40px"] {
        margin-bottom: 25px !important;
    }

    .section > div > div[style*="margin-bottom: 30px"],
    .section > div > div > div[style*="margin-bottom: 30px"] {
        margin-bottom: 20px !important;
    }

    .section > div > div[style*="margin-bottom: 25px"],
    .section > div > div > div[style*="margin-bottom: 25px"] {
        margin-bottom: 18px !important;
    }

    /* 番号付きステップの調整 - 統一 */
    .section div[style*="width: 32px; height: 32px"] {
        width: 32px !important;
        height: 32px !important;
        min-width: 32px !important;
        min-height: 32px !important;
        font-size: 0.95rem !important;
        font-weight: 700 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex-shrink: 0 !important;
    }

    /* 統計数値の調整 */
    .section div[style*="font-size: 2rem"] {
        font-size: 1.5rem !important;
    }

    /* タグ・バッジのパディング調整 */
    .section span[style*="padding: 8px 16px"] {
        padding: 6px 12px !important;
        font-size: 0.85rem !important;
    }

    /* ボーダー半径の調整 */
    .section > div > div[style*="border-radius: 20px"] {
        border-radius: 15px !important;
    }

    .section > div > div > div[style*="border-radius: 15px"],
    .section > div > div > div > div[style*="border-radius: 15px"] {
        border-radius: 12px !important;
    }

    .section > div > div > div[style*="border-radius: 12px"],
    .section > div > div > div > div[style*="border-radius: 12px"] {
        border-radius: 10px !important;
    }

    /* テキストの折り返し */
    .section h2,
    .section h3,
    .section h4,
    .section p,
    .section span,
    .section div {
        word-wrap: break-word;
        overflow-wrap: break-word;
        hyphens: auto;
    }

    /* 強調テキストのインライン表示調整 */
    .section strong {
        display: inline;
        white-space: normal;
    }

    /* 特定の問題箇所を個別修正 */
    /* オリゴスキャン検査の説明文 */
    #oligoscan div[style*="background: linear-gradient(135deg, #ECFDF5, #D1FAE5)"] p {
        font-size: 0.95rem !important;
        word-break: keep-all;
        overflow-wrap: anywhere;
    }

    /* Micro CTC検査の説明文 */
    #cancer-risk div[style*="background: linear-gradient(135deg, #FEF2F2, #FEE2E2)"] p {
        font-size: 0.95rem !important;
        word-break: keep-all;
        overflow-wrap: anywhere;
    }

    /* GI-MAP検査の説明文 */
    #gi-map div[style*="background: linear-gradient(135deg, #FFF1F2, #FFE4E6)"] p {
        font-size: 0.95rem !important;
        word-break: keep-all;
        overflow-wrap: anywhere;
    }

    /* Epiclock検査の説明文 */
    #epiclock div[style*="background: linear-gradient(135deg, #F5F3FF, #EDE9FE)"] p {
        font-size: 0.95rem !important;
        word-break: keep-all;
        overflow-wrap: anywhere;
    }

    /* すべてのカード内のテキスト */
    .section div[style*="border-radius"][style*="padding"] p,
    .section div[style*="border-radius"][style*="padding"] span,
    .section div[style*="border-radius"][style*="padding"] div {
        max-width: 100% !important;
        overflow-x: hidden;
    }

    /* Flexコンテナ内のテキスト要素 */
    .section div[style*="display: flex"] > div {
        flex: 1 1 auto;
        min-width: 0;
        overflow-wrap: break-word;
    }

    /* 検査名の見出し部分 */
    .section h3,
    .section h4 {
        overflow-wrap: break-word;
        hyphens: auto;
        max-width: 100%;
    }

    /* 検査種別バッジのアイコンサイズ統一 */
    .section p[style*="font-size: 0.95rem"] i,
    .section p[style*="font-size: 0.9rem"] i,
    .section p[style*="color: #718096"] i {
        font-size: 0.9rem !important;
        margin-right: 6px !important;
    }

    /* タグ内のアイコン統一 */
    .section span[style*="padding"] i {
        font-size: 0.85rem !important;
        margin-right: 6px !important;
    }

    /* 検査名ヘッダーのタイトル部分を改行させない */
    .section > div > div > div[style*="display: flex; align-items: center"] > div {
        flex: 1;
        min-width: 0;
    }

    .section > div > div > div[style*="display: flex; align-items: center"] h3,
    .section > div > div > div[style*="display: flex; align-items: center"] h4 {
        font-size: 1.3rem !important;
        line-height: 1.3 !important;
        margin: 0 !important;
        word-break: keep-all;
    }

    /* 検査種別のバッジ */
    .section > div > div > div[style*="display: flex; align-items: center"] p {
        font-size: 0.85rem !important;
        margin: 5px 0 0 0 !important;
        white-space: nowrap;
    }
}

/* スマートフォン対応（さらに小さい画面） */
@media screen and (max-width: 480px) {
    /* セクションパディングをさらに調整 */
    .section {
        padding: 40px 10px !important;
    }

    /* 見出しサイズをさらに縮小 */
    .section h2 {
        font-size: 1.5rem !important;
    }

    .section h3 {
        font-size: 1.2rem !important;
    }

    .section h4 {
        font-size: 1.05rem !important;
    }

    /* テキストサイズ調整 */
    .section p {
        font-size: 0.9rem !important;
    }

    /* カードパディングをさらに縮小 */
    .section > div > div[style*="padding"],
    .section > div > div > div[style*="padding"],
    .section > div > div > div > div[style*="padding"] {
        padding: 15px 10px !important;
    }

    /* アイコンボックスサイズ - 統一 */
    .section div[style*="width: 70px"][style*="height"],
    .section div[style*="width: 60px"][style*="height"],
    .section div[style*="width: 50px"][style*="height"] {
        width: 45px !important;
        height: 45px !important;
        min-width: 45px !important;
        min-height: 45px !important;
        max-width: 45px !important;
        max-height: 45px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex-shrink: 0 !important;
        align-self: center !important;
    }

    /* アイコンサイズ - 統一 */
    .section div[style*="width: 70px"] i,
    .section div[style*="width: 60px"] i,
    .section div[style*="width: 50px"] i {
        font-size: 1.2rem !important;
    }

    /* グリッド間隔調整 */
    .section div[style*="grid-template-columns"] {
        gap: 10px !important;
    }

    /* 検査名ヘッダーは横並び維持（スマホ） */
    .section > div > div > div[style*="display: flex; align-items: center"] {
        flex-direction: row !important;
        gap: 10px !important;
    }

    .section > div > div > div[style*="display: flex; align-items: center"] h3,
    .section > div > div > div[style*="display: flex; align-items: center"] h4 {
        font-size: 1.1rem !important;
        line-height: 1.3 !important;
    }

    /* タグの横並び（スマホ） */
    .section div[style*="display: flex; gap: 10px; flex-wrap: wrap"],
    .section div[style*="display: flex; gap: 12px; flex-wrap: wrap"],
    .section div[style*="display: flex; gap: 15px; flex-wrap: wrap"] {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        gap: 6px !important;
    }

    /* 番号付きステップ（スマホ） - より具体的なセレクター */
    .section div[style*="display: flex; align-items: start"] > div[style*="width: 32px"][style*="border-radius: 50%"],
    .section div[style*="display: flex; align-items: start"] > div[style*="width: 28px"][style*="border-radius: 50%"] {
        width: 26px !important;
        height: 26px !important;
        min-width: 26px !important;
        min-height: 26px !important;
        max-width: 26px !important;
        max-height: 26px !important;
        flex: 0 0 26px !important;
        font-size: 0.85rem !important;
        align-self: flex-start !important;
    }
    
    /* 検査プロセスステップ全体（スマホ） */
    .section div[style*="display: flex; align-items: start; gap"] {
        gap: 10px !important;
    }
    
    /* 検査プロセスコンテナ（スマホ） */
    .section div[style*="display: flex; flex-direction: column; gap: 15px"],
    .section div[style*="display: flex; flex-direction: column; gap: 12px"] {
        gap: 10px !important;
    }

    /* マージン調整 */
    .section > div > div[style*="margin-bottom: 60px"] {
        margin-bottom: 30px !important;
    }

    .section > div > div[style*="margin-bottom: 40px"],
    .section > div > div > div[style*="margin-bottom: 40px"] {
        margin-bottom: 20px !important;
    }

    .section > div > div[style*="margin-bottom: 30px"],
    .section > div > div > div[style*="margin-bottom: 30px"] {
        margin-bottom: 15px !important;
    }

    /* タグ・バッジサイズ */
    .section span[style*="padding: 8px 16px"],
    .section span[style*="padding: 6px 12px"] {
        padding: 5px 10px !important;
        font-size: 0.8rem !important;
    }

    /* タグ内のアイコン統一 */
    .section span[style*="padding"] i {
        font-size: 0.75rem !important;
        margin-right: 5px !important;
    }

    /* 検査種別バッジのアイコン統一 */
    .section p[style*="color: #718096"] i {
        font-size: 0.8rem !important;
        margin-right: 5px !important;
    }

    /* すべての検査説明カード */
    #molecular-nutrition div[style*="background: white"],
    #allergy-tests div[style*="background: white"],
    #oligoscan div[style*="background: white"],
    #cancer-risk div[style*="background: white"],
    #epiclock div[style*="background: white"],
    #gi-map div[style*="background: white"] {
        overflow: hidden;
    }

    /* すべてのグラデーション背景のテキストボックス */
    .section div[style*="background: linear-gradient"] p {
        font-size: 0.85rem !important;
        line-height: 1.6 !important;
    }

    /* 長いテキストの行間調整 */
    .section p {
        line-height: 1.6 !important;
    }

    /* 検査プロセスステップ - モバイル最適化 */
    .section div[style*="display: flex; align-items: start; gap"] {
        flex-direction: row !important;
        align-items: flex-start !important;
        gap: 12px !important;
    }

    /* ステップ番号アイコン（32px円形）をモバイルで縮小 */
    .section div[style*="display: flex; align-items: start; gap"] > div[style*="width: 32px"][style*="border-radius: 50%"] {
        width: 28px !important;
        height: 28px !important;
        min-width: 28px !important;
        min-height: 28px !important;
        max-width: 28px !important;
        max-height: 28px !important;
        flex: 0 0 28px !important;
        font-size: 0.9rem !important;
    }

    .section div[style*="display: flex; align-items: start; gap"] > div:first-child {
        flex-shrink: 0 !important;
    }

    .section div[style*="display: flex; align-items: start; gap"] > p,
    .section div[style*="display: flex; align-items: start; gap"] > div:last-child {
        flex: 1 !important;
        min-width: 0 !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
    }
    
    /* 検査プロセス全体のコンテナ調整 */
    .section div[style*="display: flex; flex-direction: column; gap: 15px"] {
        gap: 12px !important;
    }

    /* タグの横並び表示を維持 */
    .section div[style*="display: flex; gap: 10px; flex-wrap: wrap"] {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
    }

    /* タグ要素 */
    .section span[style*="border-radius: 20px"] {
        display: inline-flex !important;
        align-items: center !important;
        white-space: nowrap;
    }
}

/* 横向きタブレット対応 */
@media screen and (min-width: 769px) and (max-width: 1024px) {
    /* コンテナ幅調整 */
    .container {
        max-width: 95% !important;
    }

    /* 見出しサイズ微調整 */
    .section h2 {
        font-size: 2.2rem !important;
    }

    .section h3 {
        font-size: 1.6rem !important;
    }

    /* カードパディング微調整 */
    .section > div > div[style*="padding: 50px"],
    .section > div > div > div[style*="padding: 50px"] {
        padding: 40px 30px !important;
    }

    /* グリッド最小幅調整 */
    .section div[style*="minmax(280px"] {
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) !important;
    }

    .section div[style*="minmax(250px"] {
        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) !important;
    }

    .section div[style*="minmax(230px"] {
        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) !important;
    }

    .section div[style*="minmax(220px"] {
        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) !important;
    }

    .section div[style*="minmax(200px"] {
        grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)) !important;
    }
}