@charset "UTF-8";
/* ============================================================================
   Image_acquisition.css
   ----------------------------------------------------------------------------
   防衛省情報本部 画像データ取得事業まとめ 表用スタイル

   基本方針:
     ・表は中央寄せ
     ・列幅・行高・背景色・罫線・フォント等の "見た目" は PHP 側が
       元データ(ODS)から読み取り、セルごとのクラス(.iat-cs-○○)として
       <style> に出力する。ここでは構造的なスタイルとレスポンシブの
       ルールに集中する。
     ・サイト共通の style.css には「* { font-family…; font-size…; }」という
       全要素への指定があり、そのままだと表の中の td や span にも直接
       かかって ODS の書式を打ち消してしまう。そこで表の中では
       「親から引き継ぐ(inherit)」に戻し、PHP が出したクラスの指定が
       効くようにしている。
     ・(随意)/(競争) は <span class="iat-contract-type"> で囲まれて出力
       されるので、狭い画面ではこれを display:none にして表示を圧縮。

   クラス名は PHP 側 'class_prefix' オプション(デフォルト 'iat')で
   接頭辞を変更できます。
   ============================================================================ */


/* ----------------------------------------------------------------------------
   ラッパー (中央寄せ + 最大幅)
   ---------------------------------------------------------------------------- */
.iat-wrap {
    /* PHP 側で max-width / width を inline style 指定 */
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
    padding: 4px 0;

    /* 表が描画域を越えたとき(width:'ods' 指定時など)は横スクロールで逃がす */
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;

    /* 下の「レスポンシブ」の判断を、画面の幅ではなく《この枠の幅》で行うための宣言。
       表は width:100% なので、表の幅はこの枠の幅と同じになる。
       なぜ画面幅で判断してはいけないかは、下の節の注釈を参照 */
    container-type: inline-size;
    container-name: iat;
}


/* ----------------------------------------------------------------------------
   表本体
   ---------------------------------------------------------------------------- */
.iat-table {
    /* セルの左右の余白。PHP 側が段落の字下げを足すときにも参照する */
    --iat-pad-x: 6px;

    width: 100%;
    margin: 0 auto;                 /* 表自体も中央寄せ */
    border-collapse: collapse;
    table-layout: fixed;            /* <colgroup> の幅指定を有効にする */
    line-height: 1.4;
}

.iat-table caption {
    caption-side: top;
    text-align: center;
    font-weight: bold;
    padding: 6px 0;
    font-size: 1.05em;
}


/* ----------------------------------------------------------------------------
   共通CSSの「*」指定を表の中では無効にし、親からの引き継ぎに戻す
   (td 自体の書式は PHP が出すクラスで決まる。その中の span・br にも
    同じ書式が及ぶようにする)
   ---------------------------------------------------------------------------- */
.iat-table tbody,
.iat-table tr,
.iat-table td * {
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    font-style: inherit;
    color: inherit;
}


/* ----------------------------------------------------------------------------
   セル共通
   罫線は ODS の指定をセルごとに出すので、ここでは引かない
   ---------------------------------------------------------------------------- */
.iat-table td {
    border: none;
    padding: 4px var(--iat-pad-x);
    vertical-align: middle;

    /* どんな幅でもデータをセル外に飛び出させない */
    overflow-wrap: anywhere;        /* 長文・URL も折り返す */
    word-break: normal;             /* 日本語は文字単位で自然に改行 */
    line-break: strict;
    white-space: normal;            /* ODS の wrap-option=no-wrap を上書き */
}


/* ----------------------------------------------------------------------------
   最初の行(見出し行)の背景色だけは ODS に従わず、サイトの基調色にそろえる
   (この指定は PHP が出すセルごとのクラスより優先度が高い)
   ---------------------------------------------------------------------------- */
.iat-table tr:first-child td {
    background-color: var(--main_color);
}


/* ----------------------------------------------------------------------------
   契約区分タグ (随意)(競争)(契約)
   ---------------------------------------------------------------------------- */
.iat-contract-type {
    /* デフォルトでは普通に表示 */
    margin-right: 0;
}


/* ----------------------------------------------------------------------------
   エラー表示
   ---------------------------------------------------------------------------- */
.iat-error {
    color: #c0392b;
    border: 1px solid #c0392b;
    background: #fdecea;
    padding: 8px 12px;
    margin: 8px auto;
    max-width: 600px;
    border-radius: 4px;
    font-size: 0.95em;
}


/* ============================================================================
   レスポンシブ
   ============================================================================ */

/* 判断の基準は「画面の幅」ではなく「表の入れ物(.iat-wrap)の幅」。
   画面幅で判断すると逆転が起きる。サイトが1列に切り替わる瞬間に本文カラムが
   「全体−サイド分」から「全体」に広がるため、画面を狭くしたのに表は広くなる。
   実際に、画面1024pxのとき表は629px、画面900pxのとき表は807pxだった。
   画面幅で判断していたころは、広いほう(807px)だけが余白を詰められていた。

   下の数字は表の幅。切りのよい数字ではないのは、従来の画面幅の境目
   (900px / 600px / 380px)にちょうど対応する表の幅を実測して当てているため。
   こうすると、逆転していた1か所を除いて見え方が変わらない。 */

/* 中くらい: 余白を控えめに */
@container iat (max-width: 808px) {
    .iat-table {
        --iat-pad-x: 5px;
    }
    .iat-table td {
        padding-top: 4px;
        padding-bottom: 4px;
    }
}


/* 小さめ(スマートフォン縦など):
     ・(随意)/(競争) は隠す
     ・行高(inline で cm 指定されているもの)を解除
     ・セルごとの文字サイズ指定を解除し、表全体で一段小さくそろえる
*/
@container iat (max-width: 534px) {
    .iat-contract-type {
        display: none;
    }

    .iat-table {
        --iat-pad-x: 4px;
        font-size: 0.9em;
    }

    .iat-table tr {
        height: auto !important;    /* インライン height を無効化 */
    }

    .iat-table td {
        padding-top: 3px;
        padding-bottom: 3px;
        /* ODS 由来の 16pt 等の font-size を解除して表全体のサイズに合わせる */
        font-size: inherit !important;
    }
}


/* とても小さい(iPhone SE 幅 等) */
@container iat (max-width: 323px) {
    .iat-table {
        --iat-pad-x: 3px;
        font-size: 0.82em;
    }

    .iat-table td {
        padding-top: 2px;
        padding-bottom: 2px;
    }
}


/* 入れ物の幅で判断する仕組み(コンテナクエリ)が使えない古いブラウザ向けの保険。
   2022年ごろより前のブラウザが該当する。上の指定が1つも効かないと、
   狭い画面で (随意)/(競争) が出たままになり表が窮屈になるので、
   従来どおり画面の幅で判断する指定を残しておく。
   使えるブラウザではこの節は丸ごと無視される */
@supports not (container-type: inline-size) {
    @media (max-width: 900px) {
        .iat-table {
            --iat-pad-x: 5px;
        }
        .iat-table td {
            padding-top: 4px;
            padding-bottom: 4px;
        }
    }
    @media (max-width: 600px) {
        .iat-contract-type {
            display: none;
        }
        .iat-table {
            --iat-pad-x: 4px;
            font-size: 0.9em;
        }
        .iat-table tr {
            height: auto !important;
        }
        .iat-table td {
            padding-top: 3px;
            padding-bottom: 3px;
            font-size: inherit !important;
        }
    }
    @media (max-width: 380px) {
        .iat-table {
            --iat-pad-x: 3px;
            font-size: 0.82em;
        }
        .iat-table td {
            padding-top: 2px;
            padding-bottom: 2px;
        }
    }
}


/* ============================================================================
   印刷時の調整
   ============================================================================ */
@media print {
    .iat-wrap {
        overflow: visible;
        max-width: 100% !important;
    }

    .iat-table {
        page-break-inside: auto;
    }

    .iat-table tr {
        page-break-inside: avoid;
    }
}