/* 基本スタイル */body {font-family: 'Helvetica Neue', Arial, sans-serif;margin: 20px;background-color: #1a1a1a; /* ダークな背景色 */color: #e0e0e0; /* 明るい文字色 */line-height: 1.6;}h1 {text-align: center;color: #f0f0f0; /* 明るいタイトル色 */margin-bottom: 30px;text-shadow: 0 0 10px rgba(255, 255, 255, 0.2); /* 軽い文字シャドウで高級感を */}/* テーブルコンテナで横スクロールと縦スクロールを可能にする */.table-container {overflow-x: auto;overflow-y: auto; /* 縦スクロールを可能にする */max-height: 600px; /* テーブルの最大高さを指定 (例: 600px) */-webkit-overflow-scrolling: touch; /* iOSでのスムーズなスクロール */margin: 0 auto;max-width: 100%;border-radius: 8px; /* table-container に角丸を適用 *//* 親要素の overflow: hidden; が sticky を妨げる可能性があるため、.main-content や他の親要素に overflow: hidden; がないことを確認してください。 */}table {width: 100%;border-collapse: collapse;margin-bottom: 0;background-color: #2c2c2c; /* テーブルの背景色をダークに */box-shadow: 0 5px 20px rgba(0, 0, 0, 0.5); /* 強めのシャドウで立体感と高級感を */min-width: 800px;/* table-container に border-radius を設定したため、ここでは不要 *//* overflow: hidden; も table-container で管理されるため不要 */}th, td {padding: 12px 15px;border: 1px solid #444; /* ボーダーの色を調整 */text-align: left;vertical-align: top;color: #e0e0e0; /* セルの文字色も明るく */}thead th {background-color: #36454F; /* ウォームチャコール */color: white;font-weight: bold;position: sticky; /* ヘッダーを固定 */top: 0; /* 上端に固定 */z-index: 10; /* 他のコンテンツより手前に表示 */text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3); /* ヘッダー文字にシャドウ */}tbody tr:nth-child(even) {background-color: #383838; /* 偶数行の背景色を少し明るいダークグレーに */}tbody tr:hover {background-color: #4a4a4a; /* ホバー時の背景色をさらに明るいダークグレーに */transition: background-color 0.3s ease; /* スムーズなトランジション */}/* 最初の列（項目名）のスタイル */tbody td:first-child {background-color: #222222; /* 項目列の背景色を他のセルよりも少し濃く */font-weight: bold;white-space: nowrap;color: #f0f0f0; /* 項目名の文字色を明るく */border-right: 1px solid #555; /* 右側のボーダーを強調 */position: sticky; /* 項目列を横スクロールしても固定する */left: 0; /* 左端に固定 */z-index: 5; /* ヘッダーよりは下、他のセルよりは上 */box-shadow: 2px 0 5px rgba(0, 0, 0, 0.3); /* 固定された列の影 */}/* 強調表示のスタイル */td.highlight {background-color: #006400; /* 深みのあるグリーン（高級感を出すために暗めの色に） */font-weight: bold;color: #ffffff; /* 白い文字色 */box-shadow: inset 0 0 8px rgba(0, 255, 0, 0.4); /* 内側に光るようなシャドウ */border: 1px solid #7CFC00; /* 明るいグリーンのボーダー */animation: pulse 1.5s infinite alternate; /* 軽いアニメーションを追加 */}/* 強調表示のアニメーション */@keyframes pulse {0% {box-shadow: inset 0 0 8px rgba(0, 255, 0, 0.4);}100% {box-shadow: inset 0 0 15px rgba(0, 255, 0, 0.7);}}/* レスポンシブデザインの調整 */@media (max-width: 768px) {body {margin: 10px;}h1 {font-size: 1.8em;}.table-container {max-height: 400px; /* 小さい画面での最大高さを調整 */}table {min-width: 700px;/* table-container に border-radius を設定したため、ここでは不要 */}th, td {padding: 8px 10px;font-size: 0.9em;}tbody td:first-child {width: 120px;}}@media (max-width: 480px) {h1 {font-size: 1.5em;}.table-container {max-height: 300px; /* さらに小さい画面での最大高さを調整 */}table {min-width: 600px;}th, td {padding: 6px 8px;font-size: 0.8em;}tbody td:first-child {width: 100px;}}