/*
 * 入力欄の幅（中身の種類ごとに統一）
 *   画面幅の割合（col-*）ではなく文字の大きさ（em）で幅を決めるので、
 *   画面サイズが変わっても日付などの中身が切れず、必要以上に大きくもならない。
 *   1em ≒ 全角1文字分（画面の文字サイズに合わせて伸び縮みする）
 *
 *   .fld-row     … 項目を並べる行。左から詰めて並べ、入りきらない項目は次の行へ折り返す
 *   .fld-num     … 3.5em  小さい数量（人数・回数など3桁まで）
 *   .fld-xs      … 4.5em  1〜2文字の選択（性別・血液型・有無など）、身長・体重
 *   .fld-time    … 4.5em  時刻
 *   .fld-ym      … 5.5em  年月
 *   .fld-date    … 7em    日付
 *   .fld-code    … 7em    コード・番号・郵便番号・金額
 *   .fld-tel     … 8.5em  電話番号・FAX
 *   .fld-name    … 9em    氏名（漢字）・ニックネームなど短い文字
 *   .fld-sel     … 9.5em  3〜6文字の選択（国籍・都道府県・宗教など）
 *   .fld-datetime… 9.5em  日時
 *   .fld-sel-l   … 12em   7〜10文字の選択（ステータスなど）
 *   .fld-roman   … 15em   氏名（ローマ字）・フリガナ
 *   .fld-text    … 15em   短い自由記述・11文字以上の選択
 *   .fld-mail    … 18em   メールアドレス・URL
 *   .fld-fill    … 残りの幅（15em〜36em）住所・備考・企業名など長いもの
 *   .fld-full    … 1行まるごと（最大60em）複数行の備考など
 *   .fld-auto    … 中身に合わせる（チェックボックス・ラジオボタン・複数の入力欄を並べた項目）
 *   .fld-break   … .fld-row の中で、見出しや説明文などを1行まるごと使って表示する
 *
 *   幅のクラスは入力欄（input/select）に直接付けてもよい（「日付 〜 日付」のように1項目に複数並べる場合）。
 */
.fld-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 0.2em 1em;
    margin-bottom: 0.2em;
}

.fld-row > .fld-num,
.fld-row > .fld-xs,
.fld-row > .fld-time,
.fld-row > .fld-ym,
.fld-row > .fld-date,
.fld-row > .fld-code,
.fld-row > .fld-tel,
.fld-row > .fld-name,
.fld-row > .fld-sel,
.fld-row > .fld-datetime,
.fld-row > .fld-sel-l,
.fld-row > .fld-roman,
.fld-row > .fld-text,
.fld-row > .fld-mail,
.fld-row > .fld-auto {
    flex: 0 0 auto;
    max-width: 100%;
}

.fld-num { width: 3.5em; }
.fld-xs { width: 4.5em; }
.fld-time { width: 4.5em; }
.fld-ym { width: 5.5em; }
.fld-date { width: 7em; }
.fld-code { width: 7em; }
.fld-tel { width: 8.5em; }
.fld-name { width: 9em; }
.fld-sel { width: 9.5em; }
.fld-datetime { width: 9.5em; }
.fld-sel-l { width: 12em; }
.fld-roman { width: 15em; }
.fld-text { width: 15em; }
.fld-mail { width: 18em; }
.fld-auto { width: auto; }

.fld-fill {
    flex: 1 1 15em;
    min-width: 15em;
    max-width: 36em;
}

.fld-full {
    flex: 1 1 100%;
    width: 100%;
    max-width: 60em;
}

.fld-break {
    flex: 1 1 100%;
    width: 100%;
}

/* ラベルは折り返さない（欄より長いラベルは右へはみ出して表示する） */
.fld-row > div > .control-label,
.fld-row > div > .form-label {
    white-space: nowrap;
}

/* 欄の中の select2 は欄の幅いっぱいにする */
.fld-row > div:not(.fld-auto) > .select2-container {
    width: 100% !important;
}

@media (max-width: 767.98px) {
    .fld-fill {
        min-width: 0;
        flex-basis: 100%;
    }

    /* スマホ用に1項目1行へ揃えている登録画面（.m-form）では、今までどおり1項目1行にする */
    .m-form .fld-row:not(.m-keep) > div {
        flex: 1 1 100% !important;
        width: 100% !important;
        max-width: 100% !important;
    }
}