/* 全体的なスタイル */
body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    line-height: 1.6;
    margin: 0;
    padding: 0;
    background-color: #f4f7f6; /* 全体の背景色を少し変更 */
    color: #333;
}

header {
    background-color: #2c3e50; /* ダークブルー */
    color: #fff;
    padding: 1em 0;
    text-align: center;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

header h1 {
    margin: 0;
    font-size: 2.2em;
}

/* ナビゲーションのスタイル */
nav ul {
    list-style: none;
    padding: 0;
    margin: 10px 0 0 0;
    display: flex;
    justify-content: center;
    gap: 20px; /* ナビゲーション項目間のスペース */
    flex-wrap: wrap; /* 小さい画面で折り返す */
}

nav ul li a {
    color: #fff;
    text-decoration: none;
    font-weight: bold;
    padding: 5px 10px;
    border-radius: 5px;
    transition: background-color 0.3s ease;
}

nav ul li a:hover {
    background-color: #3e566e; /* ホバー時の背景色 */
}

main {
    padding: 10px;
    max-width: 900px;
    margin: 20px auto;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

footer {
    text-align: center;
    padding: 20px;
    margin-top: 30px;
    background-color: #ddd;
    color: #555;
    font-size: 0.9em;
}

/* メッセージエリアのスタイル */
.message-area {
    padding: 15px;
    margin-bottom: 20px;
    border-radius: 5px;
    font-weight: bold;
    text-align: center;
    transition: all 0.5s ease-in-out;
}

.message-area.hidden {
    opacity: 0;
    height: 0;
    padding: 0;
    overflow: hidden;
    margin-bottom: 0;
}

/* メッセージの種類ごとのスタイル */
.message-success {
    background-color: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}
.message-info {
    background-color: #d1ecf1;
    color: #0c5460;
    border: 1px solid #bee5eb;
}
.message-warning {
    background-color: #fff3cd;
    color: #856404;
    border: 1px solid #ffeeba;
}
.message-error {
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

/* 検索エリアのスタイル (machines.htmlに適用) */
#search-area {
    margin-bottom: 20px;
    display: flex; /* 横並びにする */
    gap: 10px; /* 要素間のスペース */
    align-items: center; /* 垂直方向中央揃え */
    flex-wrap: wrap; /* 小さい画面で折り返す */
}

#machine-search-input {
    flex-grow: 1; /* 可能な限り幅を広げる */
    padding: 10px 15px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 1em;
}

#search-button, #clear-search-button {
    padding: 10px 15px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1em;
    font-weight: bold;
    transition: background-color 0.3s ease;
}

#search-button {
    background-color: #28a745; /* 緑色 */
    color: white;
}

#search-button:hover {
    background-color: #218838;
}

#clear-search-button {
    background-color: #dc3545; /* 赤色 */
    color: white;
}

#clear-search-button:hover {
    background-color: #c82333;
}


/* 手術リストセクション (index.html用) */
#surgery-list-section h2, #all-machines-section h2 { /* 機械一覧ページにも適用 */
    color: #34495e; /* ダークグレー */
    border-bottom: 2px solid #ecf0f1; /* ライトグレー */
    padding-bottom: 10px;
    margin-bottom: 20px;
}

#surgery-list {
    list-style: none;
    padding: 0;
}

#surgery-list > li {
    background-color: #ecf0f1; /* ライトグレー */
    margin-bottom: 10px;
    border-radius: 5px;
    overflow: hidden; /* 子要素の丸みを維持 */
}

/* 手術名のリンク（index.html用） */
.surgery-name-link { /* 新しいクラス名 */
    display: block;
    padding: 15px 20px;
    cursor: pointer;
    background-color: #3498db; /* 青 */
    color: #fff;
    font-weight: bold;
    font-size: 1.1em;
    text-decoration: none; /* リンクの下線を削除 */
    transition: background-color 0.3s ease;
}

.surgery-name-link:hover {
    background-color: #2980b9; /* 濃い青 */
}

/* テーブルのスタイル (小児ラパヘルセット表のスタイルを統合) */
table {
    width: 100%;
    border-collapse: separate; /* border-radiusのために必要 */
    border-spacing: 0;
    margin: 0 auto;
    overflow: hidden; /* 角丸を適用するため */
    border-radius: 10px; /* テーブル全体の角丸 */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); /* 影を少し強めに */
}

th, td {
    padding: 5px;
    text-align: left;
    border-bottom: 1px solid #e0e0e0;
}

/* ------------------------------------------------------------------- */
/* ↓↓↓ 【新規追加】器械名と数量の列幅を調整するCSSを追加 ↓↓↓ */
/* ------------------------------------------------------------------- */

/* 1. 器械名の列 (th:nth-child(2), td:nth-child(2)) */
/* 器械名の列に固定幅を設定し、テキストが収まらない場合は改行させる */
#surgery-machine-table th:nth-child(2),
#surgery-machine-table td:nth-child(2) {
    /* 表全体の幅（min-width: 500px）を考慮し、幅を割合で指定 */
    width: 70%; /* または 55% など、比率を調整してください */
    min-width: 100px; /* 最低限の幅を確保 */
    
    /* テキストが溢れたら自動的に改行する */
    white-space: normal;
    /* 長い単語でも途中で改行できるようにする (欧文の場合に有効) */
    word-break: break-all;
}

/* 2. No.の列 (th:nth-child(1), td:nth-child(1)) */
/* No.の列の幅を最も狭くする */
#surgery-machine-table th:nth-child(1),
#surgery-machine-table td:nth-child(1) {
    width: 10%; /* No.を収める最小限の幅 */
    text-align: center; /* 中央寄せにして見やすくする */
}

/* 3. 数量の列 (th:nth-child(3), td:nth-child(3)) */
/* 数量の列の幅を狭くし、中央寄せにする */
#surgery-machine-table th:nth-child(3),
#surgery-machine-table td:nth-child(3) {
    width: 20%; /* 数量の幅を調整 */
    text-align: center; /* 中央寄せにして見やすくする */
}

th {
    background-color: #3498db; /* ヘッダーの背景色 */
    color: white;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    /* position: sticky; /* テーブルがメインコンテンツ内に埋め込まれるため、ここでは固定しない */
    /* top: 0; */
}

tr:nth-child(even) {
    background-color: #f8f8f8; /* 偶数行の背景色 */
}

tr:hover {
    background-color: #eef5ff; /* ホバー時の背景色 */
    transition: background-color 0.3s ease;
}

/* テーブルの角丸をヘッダーとフッターに適用 */
th:first-child {
    border-top-left-radius: 10px;
}
th:last-child {
    border-top-right-radius: 10px;
}
tr:last-child td:first-child {
    border-bottom-left-radius: 10px;
}
tr:last-child td:last-child {
    border-bottom-right-radius: 10px;
}

/* レスポンシブデザイン for tables */
@media (max-width: 600px) {
    /* --- 以下の行をすべて削除/コメントアウトします --- */
    /* table, thead, tbody, th, td, tr {
        display: block;
    }

    thead tr {
        position: absolute;
        top: -9999px;
        left: -9999px;
    }

    tr {
        border: 1px solid #e0e0e0;
        margin-bottom: 15px;
        border-radius: 10px;
    }

    td {
        border: none;
        border-bottom: 1px solid #e0e0e0;
        position: relative;
        padding-left: 50%;
        text-align: right;
    }

    td:before {
        content: attr(data-label);
        position: absolute;
        left: 0;
        width: 45%;
        padding-left: 15px;
        font-weight: bold;
        text-align: left;
        color: #555;
    } */
    /* ---------------------------------------------------- */
    
    /* 他のレスポンシブ調整（角丸調整など）は、必要に応じて残しても構いませんが、
       今回はシンプルにするため、影響の大きい上記部分のみに言及します。
       完全に横スクロールを適用するには、この @media ブロック全体を削除
       するか、残す部分を調整する必要があります。
       ここでは、表のレイアウトに関わる部分を削除します。
    */


    /* テーブルの角丸をレスポンシブモードで調整 */
    tr:first-child, tr:last-child {
        border-radius: 10px;
    }
    td:first-child, th:first-child, td:last-child, th:last-child {
        border-left: 1px solid #e0e0e0;
        border-right: 1px solid #e0e0e0;
    }
}

/* style.css の末尾など、どこでも構いませんが、テーブル関連スタイルの近くが分かりやすいです */

/* 横スクロールを有効にするラッパー */
.table-scroll-wrapper {
    /* 画面幅を超えた場合、横スクロールバーを表示 */
    overflow-x: auto; 
    /* iOSでスクロールを滑らかにする */
    -webkit-overflow-scrolling: touch; 
}

/* tableのmin-widthを設定し、狭い画面でも幅を保つ */
/* 3列あるため、最低限必要な幅を指定します。この値は調整が必要です。 */
#surgery-machine-table {
    min-width: 380px; /* 例：最低500pxの幅を確保し、それ以下ではスクロールが発生 */
    /* **注意:** ここに width: 100% があるため、min-widthが効くようにします */
}

/* 既存の table スタイルの width: 100% を削除または min-width を追加 */
/* 既存の table セレクタに min-width: 500px; を追加する方が簡単かもしれません。 */
/*table {
    width: 100%;
    min-width: 500px; 
    border-collapse: separate; 
}*/

/* 個別ページ用のスタイル調整 (machine_detail_xx.html) */
.detail-content {
    padding: 20px;
}
.detail-content h2 {
    color: #2c3e50;
    margin-bottom: 15px;
    text-align: center;
}
.detail-content h3 {
    color: #34495e;
    border-bottom: 1px solid #eee;
    padding-bottom: 5px;
    margin-top: 25px;
    margin-bottom: 10px;
}
.detail-content p, .detail-content ul {
    margin-bottom: 1em;
    line-height: 1.8;
}
.detail-content ul {
    list-style: disc;
    padding-left: 25px;
}
.detail-content ul li {
    margin-bottom: 5px;
}
.detail-content .image-container {
    text-align: center;
    margin-bottom: 30px;
    display: flex; /* Flexboxを有効にする */
    flex-wrap: wrap; /* 画像が収まらない場合に折り返す */
    justify-content: center; /* 画像を中央に配置 */
    gap: 15px; /* 画像間のスペース */
}
.detail-content .image-item { /* 各画像を囲む新しいコンテナ */
    flex: 1 1 calc(50% - 15px); /* 2列で表示、ギャップを考慮 */
    max-width: calc(50% - 15px); /* 最大幅を制限 */
    box-sizing: border-box; /* パディングとボーダーを幅に含める */
}
@media (max-width: 768px) { /* タブレット以下では1列にする */
    .detail-content .image-item {
        flex: 1 1 100%;
        max-width: 100%;
    }
}
.detail-content .image-container img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto; /* 画像を中央に配置 */
    border-radius: 5px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.detail-content .image-caption {
    font-size: 0.9em;
    color: #666;
    margin-top: 5px;
}
.detail-content .note {
    background-color: #f0f8ff; /* 淡い青の背景 */
    border-left: 5px solid #3498db;
    padding: 15px;
    margin-top: 20px;
    border-radius: 5px;
}
/* ポイントの下に移動した画像用のスタイル */
.image-after-note {
    text-align: center;
    margin-top: 20px; /* ポイントのメモとの間隔 */
    margin-bottom: 30px;
}
.image-after-note img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
    border-radius: 5px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.detail-content .external-link {
    display: block;
    margin-top: 20px;
    text-align: center;
}
.detail-content .external-link a {
    color: #2980b9;
    text-decoration: none;
    font-weight: bold;
}
.detail-content .external-link a:hover {
    text-decoration: underline;
}
.back-link {
    display: inline-block;
    margin-top: 20px;
    padding: 10px 15px;
    background-color: #555; /* 戻るボタンの色 */
    color: #fff;
    text-decoration: none;
    border-radius: 5px;
    transition: background-color 0.3s ease;
}
.back-link:hover {
    background-color: #333;
}

/* 非表示にするクラス */
.hidden {
    display: none;
}