@charset "UTF-8";

/* ==========================================================================
   1. 全体設定（規律と清潔感のあるフォントと背景）
   ========================================================================== */
body {
    margin: 0;
    padding: 0;
    background-color: #f4f7f9; /* ほんのり青みがかった清潔感のあるグレー */
    font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
    color: #333333;
    line-height: 1.6;
}

.container {
    max-width: 1100px;
    margin: 40px auto;
    padding: 0 20px;
}

/* ==========================================================================
   2. ヘッダー部分（組織としての信頼感を出すディープブルー）
   ========================================================================== */
header {
    border-bottom: 3px solid #002B66; /* 海上自衛隊をイメージする濃紺 */
    padding-bottom: 20px;
    margin-bottom: 30px;
}

.logo-container {
    margin: 0 0 15px 0;
}

.logo-container img {
    max-width: 100%;
    height: auto;
    display: block;
}

h1 {
    font-size: 28px;
    color: #002B66; /* 濃紺 */
    margin: 0 0 5px 0;
    font-weight: 700;
    letter-spacing: 0.05em;
}

.subtitle {
    font-size: 16px;
    color: #555555;
    margin: 0 0 15px 0;
    font-weight: 600;
}

/* 注意書きエリア */
.info-notice {
    background-color: #e6f0fa; /* 爽やかな薄い青 */
    border-left: 4px solid #0055cc;
    padding: 12px 16px;
    border-radius: 0 4px 4px 0;
    font-size: 14px;
}

.info-notice p {
    margin: 0;
}

.info-notice .date {
    font-weight: bold;
    color: #002B66;
    margin-bottom: 4px;
}

/* ==========================================================================
   3. データテーブル（視認性を最優先したスマートなデザイン）
   ========================================================================== */
/* テーブル全体の基本ルール */
.data-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: auto; /* 文字数に応じた自動幅配分を有効化 */
}

.data-table th, 
.data-table td {
    padding: 10px 12px;
    text-align: left;
    vertical-align: middle;
    border-bottom: 1px solid #e2e8f0; /* 行と行の間に薄い区切り線をプラス */
}

.data-table th {
    background-color: #002B66; /* ヘッダーを海上自衛隊イメージの濃紺に */
    color: #ffffff;            /* 文字を白にして視認性アップ */
    font-weight: bold;
}

/* --- 【重要】列幅の自動最適化ルール --- */

/* ① 基本的に「件名」以外の列はすべて、文字が折り返さない限界（最小幅）までギュッと縮める */
.data-table th,
.data-table td {
    white-space: nowrap;
    width: 1%;
}

/* ② 「件名」が入る列だけ、画面幅の余りをすべて割り当てて広く見せる */
/* ※もしExcelの見出しが「案件名」などであれば、クラス名をそれに合わせてください（例：.col-案件名） */
.data-table th.col-件名,
.data-table td.col-件名 {
    white-space: normal; /* 件名は長いので自動折り返しを許可 */
    width: auto;         /* 余った幅をこの列が独占する */
    min-width: 300px;    /* 画面が狭くなっても潰れすぎないためのセーフティ */
}

/* ③ 「年度」が含まれる列（旧C列）の個別調整 */
/* 必要最低限の幅にしつつ、文字を中央寄せにしてスッキリ見せます */
.data-table th[class*="年度"],
.data-table td[class*="年度"] {
    text-align: center;
    padding-left: 8px;
    padding-right: 8px;
}

/* ==========================================================================
   4. 特殊な行・装飾要素（JSでの追加を見据えた設計）
   ========================================================================== */

/* 年度区切り行（赤文字を引き立たせる薄い警戒色背景） */
.row-year-title {
    background-color: #fff5f5 !important;
}
.row-year-title td {
    color: #d32f2f;
    font-weight: bold;
    font-size: 15px;
    letter-spacing: 0.1em;
    border-top: 2px solid #fed7d7;
    border-bottom: 2px solid #fed7d7;
}

/* --- 公示年度ごとの背景色指定 --- */
/* 上部にある一括指定（width: 1%）に負けないよう、
   また、年度列（C列）が折り返して不格好にならないようここで完全固定します 
*/

/* 令和6年度（ほんのり薄い赤） */
.data-table td.bg-year-06 {
    background-color: #fff0f0 !important; 
    white-space: nowrap !important;
}

/* 令和7年度（ほんのり薄い緑・ミント） */
.data-table td.bg-year-07 {
    background-color: #ebfbf2 !important; 
    white-space: nowrap !important;
}

/* 令和8年度（ほんのり薄い黄色・アンバー） */
.data-table td.bg-year-08 {
    background-color: #fffbeb !important; 
    white-space: nowrap !important;
}

/* 公示終了行のグレーアウト（規律あるトーンダウン） */
.row-expired {
    background-color: #fafafa !important;
    color: #888888;
}
.row-expired td {
    border-bottom: 1px dashed #e2e8f0;
}

/* ==========================================================================
   5. コンポーネント（ボタン、バッジ）
   ========================================================================== */

/* PDFを開くボタンリンク */
.btn-link {
    display: inline-block;
    background-color: #0055cc;
    color: #ffffff;
    text-decoration: none;
    padding: 6px 12px;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 600;
    text-align: center;
    transition: background-color 0.2s ease, transform 0.1s ease;
    white-space: nowrap;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.btn-link:hover {
    background-color: #0044aa;
    transform: translateY(-1px);
}

.btn-link:active {
    transform: translateY(0);
}

/* 公示終了バッジ */
.badge-expired {
    display: inline-block;
    background-color: #a0aec0;
    color: #ffffff;
    padding: 2px 8px;
    font-size: 11px;
    font-weight: bold;
    border-radius: 3px;
    margin-right: 8px;
    vertical-align: middle;
}

/* ==========================================================================
   6. レスポンシブ対応（スマホ表示でのテーブル崩れ防止）
   ========================================================================== */
@media screen and (max-width: 768px) {
    .container {
        margin: 20px auto;
    }
    
    h1 {
        font-size: 22px;
    }
    
    /* 横スクロール可能にしてテーブルが潰れるのを防ぐ */
    .data-table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }
}