/* 基本設定 */
body {
    font-family: 'Helvetica Neue', 'Arial', 'Hiragino Sans', 'Meiryo', sans-serif;
    background-color: #ffffff;
    color: #333;
    margin: 0;
    padding: 15px; /* スマホ用に少し余白を調整 */
}

/* 全体を囲むコンテナ */
.container {
    max-width: 900px;
    margin: 0 auto;
    background-color: #fff;
    padding: 15px; /* パディングを少し減らして画面を広く使う */
}

/* ヘッダー */
.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 2px solid #5da0a2;
    padding-bottom: 20px;
    margin-bottom: 20px;
}
.header img {
    max-width: 200px; /* 少し控えめに調整 */
    height: auto;
}
.header-title h1 {
    font-size: 24px;
    margin: 0;
    color: #000;
}
.header-title p {
    margin: 5px 0 0;
    font-size: 15px;
    font-weight: bold;
    color: #d32f2f;
}

/* テーブル */
.table-wrapper {
    overflow-x: auto; /* 横スクロールを許可 */
    -webkit-overflow-scrolling: touch; /* iOSでのスクロールを滑らかに */
    margin-bottom: 20px;
    border: 1px solid #ddd; /* 外枠 */
}
table {
    width: 100%;
    border-collapse: collapse;
    min-width: 450px; /* 重要：これより狭くならないようにして「ゆとり」を確保 */
}
th, td {
    border: 1px solid #ddd;
    padding: 15px 10px; /* 上下にゆとりを持たせる */
    text-align: center;
    vertical-align: middle;
    line-height: 1.4;
}
th {
    background-color: #5da0a2;
    color: #fff;
    white-space: nowrap; /* 見出しが変に改行されないように */
}
td.applicant-count {
    font-weight: bold;
    font-size: 1.3em;
    color: #d32f2f;
}

/* 補足情報 */
.info {
    font-size: 14px;
    line-height: 1.8;
    background-color: #f4f7f7;
    padding: 15px;
    border-radius: 5px;
    border-left: 5px solid #5da0a2;
}

/* ==========================================
   スマートフォン向けの調整 (レスポンシブ)
   ========================================== */
@media (max-width: 768px) {
    /* ヘッダー：ロゴを上、タイトルを下にする */
    .header {
        flex-direction: column;
        align-items: center; /* 中央揃え */
        text-align: center;
        gap: 15px; /* ロゴとタイトルの間に隙間 */
    }

    .header-title h1 {
        font-size: 19px; /* スマホでは文字を少し小さく */
        line-height: 1.3;
    }

    .header-title p {
        font-size: 14px;
    }

    /* 表の「ゆとり」調整 */
    th, td {
        padding: 12px 8px; /* スマホでも窮屈にならない程度の余白 */
        font-size: 14px;
    }

    td.applicant-count {
        font-size: 1.1em;
    }
}