/* Michelanglo風デザインのCSS */
        :root {
            --primary-dark-blue: #2c3e50; /* ヘッダー・フッターなどの濃い青 */
            --secondary-light-blue: #3498db; /* アクセントカラー、スピナー */
            --text-color-dark: #333;
            --text-color-light: #fff;
            --bg-light-gray: #f8f9fa;
            --border-color: #dee2e6;
            --button-bg: #e9ecef;
            --button-hover-bg: #dae0e5;
            --focus-outline-color: rgba(52, 152, 219, 0.5); /* secondary-light-blue の透明度 */
        }

        body {
            margin: 0;
            /* フォントをRobotoとOpen Sansに変更 */
            font-family: 'Open Sans', 'Roboto', Arial, sans-serif;
            background-color: var(--bg-light-gray);
            color: var(--text-color-dark);
            line-height: 1.6;
        }

        header {
            background-color: var(--primary-dark-blue);
            color: var(--text-color-light);
            padding: 20px 40px; /* パディングを増やす */
            display: flex;
            justify-content: space-between;
            align-items: center;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 影を追加 */
        }

        header h1 {
            margin: 0;
            font-size: 28px; /* フォントサイズを少し大きく */
            font-weight: 500; /* フォントウェイトを調整 */
        }
        h1 a {
            text-decoration: none;
            color: inherit;
        }
        h1 a:visited {
            color: inherit;
        }

        nav a {
            color: var(--text-color-light);
            text-decoration: none;
            margin-left: 30px; /* マージンを調整 */
            font-size: 17px; /* フォントサイズを調整 */
            font-weight: 400;
            transition: color 0.3s ease; /* ホバー時のトランジション */
        }

        nav a:hover {
            color: var(--secondary-light-blue); /* ホバー時の色 */
            text-decoration: none; /* 下線をなくす */
        }

        main {
            padding: 30px 40px; /* パディングを調整 */
            max-width: 1200px; /* 最大幅を設定して中央寄せ */
            margin: 20px auto; /* 上下のマージンと左右中央寄せ */
            background-color: #fff;
            border-radius: 8px; /* 角を丸くする */
            box-shadow: 0 0 15px rgba(0, 0, 0, 0.05); /* 影を強調 */
            display: flex; /* ヘッダーとコンテンツを縦に並べるため */
            flex-direction: column;
        }

        /* 検索・アップロードエリアの調整 */
        /* main直下のレイアウト変更 */
        .top-content-wrapper {
            display: flex;
            gap: 30px; /* 画像とフォームの間のスペース */
            flex-wrap: wrap; /* スマホ向けに折り返し */
            padding: 20px;
            background-color: var(--bg-light-gray);
            border-radius: 6px;
            margin-bottom: 30px;
            box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.05);
            align-items: flex-start; /* 上揃え */
        }

        .image-container {
            flex: 2; /* 2の割合で幅を確保 (例: 60%) */
            min-width: 300px; /* 最小幅 */
            height: 450px; /* 高さの指定 */
            background-color: #fff; /* 仮の背景色 */
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 20px;
            color: #666;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
            overflow: hidden; /* 画像がはみ出さないように */
        }

        .image-container img {
            width: 100%;
            height: 100%;
            /*object-fit: cover; *//* 画像がコンテナを覆うように調整 */
            object-fit: contain; /* 表示枠内に収まるように自動調整 */
            display: block; /* 余白をなくす */
        }

        .form-controls-container {
            flex: 1; /* 1の割合で幅を確保 (例: 30%) */
            display: flex;
            flex-direction: column; /* 縦に並べる */
            gap: 20px; /* 各div間のスペース */
            min-width: 300px; /* 最小幅 */
        }

        .form-controls-container > div {
            padding: 15px; /* 各フォーム要素のパディング */
            background-color: #fff;
            border-radius: 6px;
            border: 1px solid var(--border-color);
            box-shadow: 0 1px 3px rgba(0,0,0,0.05);
        }

        label {
            display: block; /* ラベルをブロック要素に */
            margin-bottom: 8px;
            font-weight: 600;
            color: #555;
            font-size: 15px;
        }

        input[type="text"] {
            width: calc(100% - 110px); /* ボタンの幅とマージンを考慮 */
            padding: 10px 12px; /* パディングを調整 */
            margin-right: 10px; /* ボタンとの間隔 */
            border: 1px solid var(--border-color);
            border-radius: 5px; /* 角を丸くする */
            font-size: 16px;
            box-sizing: border-box; /* パディングとボーダーを幅に含める */
            transition: border-color 0.3s ease, box-shadow 0.3s ease;
        }
        input[type="text"]:focus {
            outline: none;
            border-color: var(--secondary-light-blue);
            box-shadow: 0 0 0 3px var(--focus-outline-color);
        }

        button {
            background-color: var(--button-bg);
            border: 1px solid var(--border-color);
            padding: 10px 18px; /* パディングを調整 */
            border-radius: 5px; /* 角を丸くする */
            cursor: pointer;
            font-size: 16px;
            color: var(--text-color-dark);
            transition: background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
            display: inline-flex; /* アイコンとテキストの配置調整 */
            align-items: center;
            gap: 8px; /* アイコンとテキストの間隔 */
        }
        button:hover {
            background-color: var(--button-hover-bg);
            border-color: #c9d2da;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
        }
        button:active {
            background-color: #d1d8df;
            box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
        }

        button i, button svg, .material-icons {
            vertical-align: middle;
            font-size: 18px; /* アイコンサイズを調整 */
            color: #6c757d; /* アイコンの色 */
        }
        button:hover i, button:hover svg, button:hover .material-icons {
            color: #495057;
        }

        /* ファイルアップロードの表示調整 */
        #fileNameDisplay, #uploadStatus {
            margin-top: 10px;
            font-size: 14px;
            color: #666;
        }
        #uploadStatus {
            font-weight: 500;
        }

        table {
            border-collapse: collapse;
            width: 100%;
            margin-top: 30px; /* マージンを調整 */
            background-color: #fff;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05); /* 影を追加 */
            border-radius: 8px;
            overflow: hidden; /* 角丸を適用するため */
        }

        th, td {
            border: 1px solid var(--border-color);
            padding: 12px 15px; /* パディングを調整 */
            text-align: left;
            vertical-align: middle;
            font-size: 15px;
        }

        th {
            background-color: #e9edf1; /* ヘッダーの背景色 */
            font-weight: 600;
            color: #444;
            white-space: nowrap; /* テキストの折り返しを防ぐ */
        }

        tr:nth-child(even) {
            background-color: #f6f8fa; /* 縞模様 */
        }
        tr:hover {
            background-color: #f0f4f7; /* ホバー時の背景色 */
        }


        .accession-cell {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 10px; /* スペースを確保 */
        }

        .icon-button {
            background: none;
            border: none;
            cursor: pointer;
            color: var(--secondary-light-blue); /* アクセントカラーを適用 */
            padding: 0;
            margin-left: 0; /* マージン調整 */
            display: inline-flex;
            align-items: center;
            transition: color 0.2s ease, transform 0.2s ease;
        }
        .icon-button:hover {
            color: #0056b3; /* ホバー時の色を濃くする */
            transform: translateY(-1px); /* 少し上に移動 */
        }
        .material-icons.icon-button { /* アイコンボタン内のアイコン */
            font-size: 20px;
        }

        #spinner {
            display: none;
            position: fixed;
            top: 50%;
            left: 50%;
            z-index: 1000;
            transform: translate(-50%, -50%);
        }

        .loader {
            border: 6px solid #f3f3f3;
            border-top: 6px solid var(--secondary-light-blue); /* スピナーの色をアクセントカラーに */
            border-radius: 50%;
            width: 40px;
            height: 40px;
            animation: spin 1s linear infinite;
        }

        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

        #analysisContainer {
            margin-top: 40px; /* マージンを増やす */
            padding: 25px;
            background-color: var(--bg-light-gray);
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
        }
        #analysisContainer h3 {
            margin-top: 0;
            margin-bottom: 20px;
            color: var(--primary-dark-blue);
            font-size: 22px;
            font-weight: 600;
            border-bottom: 2px solid var(--border-color);
            padding-bottom: 10px;
        }

        #analysisFrame {
            width: 100%;
            height: 700px; /* 高さを増やす */
            border: 1px solid var(--border-color);
            border-radius: 6px;
            background-color: #fff;
        }

        footer {
            background-color: var(--primary-dark-blue);
            color: var(--text-color-light);
            text-align: center;
            padding: 20px 0;
            margin-top: 50px; /* マージンを増やす */
            font-size: 14px;
            box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.1);
        }

        /* レスポンシブ対応 */
        @media (max-width: 768px) {
            header {
                flex-direction: column;
                padding: 15px 20px;
            }
            header nav {
                margin-top: 15px;
            }
            header nav a {
                margin: 0 10px;
            }
            main {
                padding: 20px;
                margin: 15px auto;
            }
            .top-content-wrapper {
                flex-direction: column; /* スマホでは縦並びに戻す */
                align-items: stretch;
                gap: 20px;
            }
            .image-container {
                width: 100%;
                height: 250px; /* スマホでの高さ調整 */
            }
            .form-controls-container {
                width: 100%;
                gap: 15px;
            }
            input[type="text"] {
                width: calc(100% - 130px); /* ボタンと合わせた幅に調整 */
                margin-right: 10px;
            }
            button {
                width: 120px;
                padding: 10px 12px;
            }
            table, th, td {
                display: block; /* スマホでテーブルを縦に表示 */
                width: 100%;
                box-sizing: border-box;
            }
            th {
                text-align: left;
                background-color: var(--bg-light-gray);
                color: #333;
                padding: 8px 15px;
            }
            td {
                border-top: none;
                border-bottom: 1px solid var(--border-color);
                padding: 10px 15px;
            }
            tr {
                margin-bottom: 15px;
                border: 1px solid var(--border-color);
                display: block;
                border-radius: 8px;
                overflow: hidden;
            }
            tr:nth-child(even) {
                background-color: #fff; /* 縦並びなので偶数行の背景色はリセット */
            }
            td:before { /* スマホで項目名を表示 */
                content: attr(data-label);
                font-weight: bold;
                display: inline-block;
                width: 120px;
                margin-right: 15px;
                color: #555;
            }
            .accession-cell {
                flex-wrap: wrap; /* スマホでアイコンが次の行に */
                justify-content: flex-start;
            }
            .accession-cell span:last-child { /* アイコンボタンの調整 */
                margin-left: auto;
            }
        }

        /* ヘルプアイコンのスタイル */
        .help-icon {
            display: inline-flex;
            align-items: center;
            cursor: pointer;
            margin-left: 8px;
            color: var(--secondary-light-blue);
            transition: color 0.2s ease, transform 0.2s ease;
        }

        .help-icon:hover {
            color: #0056b3;
            transform: scale(1.1);
        }

        /* Protein Candidates Card Style */
        .result-candidates-card {
            margin: 20px 0;
            padding: 20px;
            background-color: #ffffff;
            border: 1px solid #e0e0e0;
            border-radius: 8px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
        }

        .result-candidates-title {
            margin: 0 0 10px 0;
            font-size: 18px;
            font-weight: bold;
            color: #333;
        }

        .result-candidates-divider {
            height: 2px;
            background-color: #3498db;
            margin: 0 0 12px 0;
        }

        .result-candidates-description {
            margin: 0 0 8px 0;
            font-size: 15px;
            color: #666;
            font-style: italic;
        }

        .result-candidates-instruction {
            margin: 8px 0 0 0;
            font-size: 16px;
            color: #999;
        }

        .result-candidates-table tbody tr {
            cursor: pointer;
            transition: background-color 0.2s ease;
        }

        .result-candidates-table tbody tr:hover {
            background-color: #d1e7f0;
        }

        .help-icon.material-icons {
            font-size: 20px;
        }

        /* ヘルプモーダルのスタイル */
        .help-modal {
            display: none;
            position: fixed;
            z-index: 2000;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            animation: fadeIn 0.3s ease;
        }

        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }

        .help-modal-content {
            background-color: #fefefe;
            margin: 10% auto;
            padding: 30px;
            border: 1px solid #888;
            border-radius: 8px;
            width: 90%;
            max-width: 500px;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
            animation: slideDown 0.3s ease;
        }

        @keyframes slideDown {
            from {
                transform: translateY(-50px);
                opacity: 0;
            }
            to {
                transform: translateY(0);
                opacity: 1;
            }
        }

        .help-modal-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 15px;
            padding-bottom: 10px;
            border-bottom: 2px solid var(--border-color);
        }

        .help-modal-header h2 {
            margin: 0;
            color: var(--primary-dark-blue);
            font-size: 20px;
        }

        .help-modal-close {
            background: none;
            border: none;
            font-size: 28px;
            font-weight: bold;
            cursor: pointer;
            color: #aaa;
            padding: 0;
            line-height: 1;
            transition: color 0.2s ease;
        }

        .help-modal-close:hover,
        .help-modal-close:focus {
            color: #000;
        }

        .help-modal-body {
            color: #555;
            line-height: 1.6;
            font-size: 15px;
        }

        .help-modal.show {
            display: block;
        }