/*
  様式の共通スタイル。**この1枚に語彙が全部ある**ので、
  様式そのもの（*.html）は構造だけを書けばよい。

  位置を px で決めない。書面は「ここに置く」ではなく
  「ここに何文字ぶんの欄がある」でできているので、
  欄の広さは em、並びは grid、罫線は border で持つ。
  会社名や氏名を入れても崩れないのはそのため。
*/

@page {
  size: A4;
  /* 原本の版面（左右とも 18mm ほど）に合わせる */
  margin: 14mm 16mm;
}

html {
  /* 書面の本文はだいたい9pt。見出しと注記だけがこれを基準に増減する */
  font-size: 9pt;
}

body {
  margin: 0;
  font-family: "IPAMincho", "MS Mincho", "Noto Serif JP", serif;
  font-size: 1rem;
  line-height: 1.7;
  color: #000;
  background: #fff;
}

/* --- 表題まわり ---------------------------------------------------- */

/** 右上の様式番号 */
.form-no {
  margin: 0 0 3em;
  font-size: 1.15rem;
}

h1 {
  margin: 0 0 3em;
  font-size: 1.6rem;
  font-weight: normal;
  text-align: center;
  /* 「雇　用　条　件　書」の字間。空白を打たずに CSS で空ける */
  letter-spacing: 1.2em;
  text-indent: 1.2em;
}

/* --- 書面の本体（外枠で囲うところ） -------------------------------- */

/**
 * 外枠で囲った書面。**枠そのものは持たない** ─ 枠は節が1つずつ持つ。
 *
 * 書面ぜんたいを1つの箱にして囲うと、紙をまたいだときに上下の線が
 * 切れ目に引かれず、左右の線だけが紙の端まで伸びた**開いた箱**になる。
 * `box-decoration-break: clone` で閉じることはできるが、今度は
 * 中身が終わった先まで箱が伸びて、下に空の帯が残る。
 * 節ごとに閉じた箱にしておけば、**切れ目は必ず罫線**になり、空の帯も出ない。
 */
.sheet {
  /* 枠は .sheet > section が持つ */
}

/**
 * 節（Ⅰ．雇用契約期間 …）。**罫線は節が持つ**。
 * 線だけを別に置くと、節を足したときに線を引き直すことになる。
 */
.sheet > section {
  padding: 0.3em 0.6em 0.5em;
  border: 1px solid #000;
  /* 隣り合う節で線が二重にならないように1px重ねる */
  margin-bottom: -1px;
  /*
    **紙をまたぐときは、またいだところで枠を閉じる。**
    既定（slice）だと切れ目に上下の線が引かれず、左右の線だけが紙の端まで
    伸びた開いた箱になる ─ 読む人には「途中で切れている」ようにしか見えない。
    原本（Word）も切れ目で枠を閉じている。
  */
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

.sheet > section > h2 {
  margin: 0 0 0.2em;
  font-size: 1rem;
  font-weight: normal;
}

/* --- 項目の並び ---------------------------------------------------- */

/*
  番号（１．２．）は**書面に印刷されている文字**なので、
  list-style ではなく中身として書く。読む人が原本と見比べられるように。
*/
.items {
  margin: 0;
  padding-left: 1em;
  list-style: none;
}

.items > li {
  margin: 0;
}

/** 項目の中でさらに字下げするところ */
.indent {
  padding-left: 2em;
}

.indent-2 {
  padding-left: 4em;
}

/** 行。中身を横に並べ、入りきらなければ折り返す */
p {
  margin: 0;
}

/* --- 記入欄 -------------------------------------------------------- */

/**
 * 記入欄。**空きそのもの**で、線は引かない ─ 書面の多くは
 * 「（　　　時　　分）」のように括弧と空白で欄を作っている。
 */
.blank {
  display: inline-block;
  min-width: 4em;
  text-align: center;
  /* 値を入れたときに行が割れないようにする */
  white-space: nowrap;
}

/**
 * 下線。**線は文字に付ける**（別に線だけを置かない）。
 * 記入欄そのもの（.blank.ruled）にも、
 * 「約◯◯◯円（合計）」のように単位まで線が続くところにも使える。
 */
.ruled {
  border-bottom: 1px solid #000;
  /* 下線と文字がくっつかないように */
  padding-bottom: 0.1em;
}

/**
  * 欄の広さ。**何文字ぶんの空きか**で決める（1em = 全角1文字）。
  * px で決めると、値を入れたときに前後の文字と合わなくなる。
  */
.w1 { min-width: 1em }
.w2 { min-width: 2em }
.w3 { min-width: 3em }
.w4 { min-width: 4em }
.w6 { min-width: 6em }
.w8 { min-width: 8em }
.w12 { min-width: 12em }
.w16 { min-width: 16em }
.w20 { min-width: 20em }

/**
 * 行の残りいっぱいまで伸ばす欄。
 * **1行ぶんの高さを持たせる** ─ 空のままだと高さが 0 になり、
 * 下線が見出しの文字よりずっと上に出る。
 */
.fill {
  display: block;
  min-width: 0;
  width: 100%;
  min-height: 1.5em;
  text-align: left;
}

/** □ と ☑。書面に印刷されている記号なので、中身として持つ */
.check {
  font-family: "IPAGothic", "MS Gothic", "Noto Sans JP", sans-serif;
  padding-right: 0.3em;
}

/* --- 組み方の部品 -------------------------------------------------- */

/** 見出しと欄を2列に並べる（特定技能所属機関名／所在地／…） */
dl.rows {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.15em 1em;
  margin: 0;
}

/** 差出人の欄。書面の右半分に寄せる */
.rows.issuer {
  width: 52%;
  margin-left: auto;
}

dl.rows > dt {
  white-space: nowrap;
}

dl.rows > dd {
  margin: 0;
}

/** 左右に同じものを並べる（直接雇用／派遣雇用、変更の範囲） */
.cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 1em;
}

/**
 * 右側に長い注記が入る2列。
 * 原本は Word の約物半角で詰まっているが、こちらの書体は詰まらないので、
 * **等分ではなく右を広く**取って1行に収める。
 */
.cols.right-wide {
  grid-template-columns: 45% 1fr;
}

/** 3つ横並び（チェックの選択肢が3つ並ぶところ） */
.cols3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0 1em;
}

/** 両端に寄せる1行（始業（　）　　入国予定日（　）） */
.spread {
  display: flex;
  justify-content: space-between;
  gap: 1em;
}

.right {
  text-align: right;
}

.center {
  text-align: center;
}

/* --- 升目で組む表 -------------------------------------------------- */

/**
 * 罫線で升目を作る表（Excel から起こした様式）。
 * **罫線はセルの border**。線だけを別に置かないので、
 * 値が長くなって行が伸びても枠はいっしょに伸びる。
 */
table.grid {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

table.grid th,
table.grid td {
  border: 1px solid #000;
  font-weight: normal;
  text-align: center;
  vertical-align: middle;
  /* 空の升目でも高さが潰れないように */
  height: 1.8em;
}

/** 見出しの升目ではなく、書き込む升目。見出しでも左に寄せたいものがある */
table.grid .write {
  text-align: left;
}

/**
 * 使わない升目。原本では斜線が引いてある。
 * **背景ではなく線として引く** ─ 背景のグラフィックは既定では刷られない。
 */
td.na {
  position: relative;
}

td.na > svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/** 太い外枠（様式によって外周だけ太い） */
table.grid.bold-frame {
  border: 2px solid #000;
}

/** 何行ぶんか書き込む升目（所見など）。升目の既定の高さより優先させる */
table.grid td.memo {
  height: 8em;
  text-align: left;
  vertical-align: top;
}

/**
 * 縦書きの見出し升目（「Ⅳ　支援内容」など）。
 * 原本が縦に組んでいるところは縦に組む ─ 1文字ずつ置いて縦に見せるのではなく、
 * **倒すのはブラウザの仕事**にする。数字も原本と同じく立てる。
 */
.vertical {
  writing-mode: vertical-rl;
  text-orientation: upright;
  line-height: 1.15;
  letter-spacing: 0.05em;
  white-space: nowrap;
  text-align: center;
}

/** 紙を左右2つに分けて使う様式（A3 の評価調書） */
.two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 10mm;
  align-items: start;
}

/** 節の見出し（１．対象技能実習生） */
h2.section {
  margin: 1.4em 0 0.4em;
  font-size: 1rem;
}

h2.section:first-child {
  margin-top: 0;
}

/** 二重線で囲うところ（賃金の基本部分） */
.framed {
  margin: 0.3em 0;
  padding: 0.3em 0.6em;
  border: 3px double #000;
}

/** 署名を書く枠。値が入っても潰れないように高さを持たせる */
.signbox {
  padding: 0.3em 0.6em;
  border: 1px solid #000;
  /* 原本では上下だけが太い線で仕切られている */
  border-top-width: 2px;
  border-bottom-width: 2px;
  margin-bottom: -1px;
  break-inside: avoid;
  /* 手書きの署名が入る。3行ぶん空ける */
  min-height: 4.5em;
}

/** 書面の頭に置く前文（「…の条件は、次のとおりです。」） */
.lead {
  margin: 0 0 0.8em;
  text-indent: 1em;
}

/** ※ や ○ で始まる注記。本文より少しだけ小さい */
.note {
  font-size: 0.95rem;
}

/** 下線の右端に押印の丸を置く欄（代表者 役職・氏名 ────㊞） */
.with-seal {
  display: flex;
  align-items: flex-end;
  gap: 0.2em;
}

/** 押印の位置 */
.seal {
  font-size: 0.8rem;
  vertical-align: 0.4em;
}

/* --- 値が入ったときの見え方 ---------------------------------------- */

/**
 * ○で囲んだ印。**差し込む側が付ける**（`CONTRACT.md`）。
 *
 * 枠線で描く ─ 背景や影だと既定では刷られない。
 * 左右の padding と同じだけ margin を戻して、**丸を付けても行の長さが変わらない**
 * ようにしてある（丸を付けた瞬間に折り返しが変わると、書面が別物になる）。
 */
.is-marked {
  display: inline-block;
  padding: 0 0.18em;
  margin: 0 -0.18em;
  border: 1px solid #000;
  border-radius: 50%;
  line-height: 1.15;
}

/* --- 紙の切れ目 ---------------------------------------------------- */

/*
  **見出しだけを紙の下に置き去りにしない。**
  節の見出しが紙の最後の行になると、何の見出しなのか分からないまま紙が変わる
  （雇用条件書の「Ⅸ．その他」が実際にそうなっていた）。
  刷るときの紙と余白は読む人が印刷ダイアログで決めるので、
  こちらが紙の高さを当てにして切り位置を決めることはできない ─
  **切ってよい場所と悪い場所を書いておく**のが唯一の手。
*/
h1,
h2,
h3 {
  break-after: avoid;
}

/** 升目は途中で割らない。割れると罫線だけが次の紙に残る */
tr {
  break-inside: avoid;
}

/** 表の見出しの行は、続く中身と同じ紙に置く */
thead {
  break-after: avoid;
}

/** 見出しと欄の対（特定技能所属機関名と記入欄）は離さない */
dl.rows > dt {
  break-after: avoid;
}

dl.rows > dt,
dl.rows > dd {
  break-inside: avoid;
}

/** 段落の1行だけを紙の端に残さない */
p,
li {
  orphans: 2;
  widows: 2;
}

/* --- 画面で見るとき ------------------------------------------------ */

@media screen {
  body {
    background: #eef1f5;
  }

  /* 紙のふちを見せる。印刷には出ない */
  .paper {
    box-sizing: border-box;
    width: 210mm;
    min-height: 297mm;
    margin: 16px auto;
    padding: 14mm 16mm;
    background: #fff;
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.2);
  }

  /* 入力を割り当てる先が目で見て分かるようにする */
  [data-field] {
    background: #f2f8ff;
  }

  /*
    **空の記入欄は高さが 0 になる。**
    中身の無い inline-block なので、背景を敷いても見えず、押すこともできない。

    絶対配置の四角を重ねる手は捨てた ─ **上の行や隣の欄に被る**
    （行の詰まった様式では1行ぶん丸ごと隠れていた）。
    代わりに**欄そのものに高さを持たせる**。

    0.8em にするのは、**行の高さを変えないため**。inline-block は下端が
    ベースラインに載るので、文字の上端（およそ 0.88em）より低くしておけば
    行の箱は伸びない ─ 伸ばすと画面の紙と刷り上がりがずれる。
    `.fill` は `min-height: 1.5em` を持っているのでそちらが勝つ。
  */
  .blank[data-field]:empty {
    height: 0.8em;
  }
}

/* --- 対訳（英語及び９か国語による様式） ------------------------------ */

/**
 * 日本語の見出しの下に置く訳文。原本（入管庁の多言語版）も同じ組み方で、
 * **日本語はそのまま残り、その下に訳が1行加わる**。
 *
 * 訳は書面に刷られている文字なので、様式が持つ ─ 画面の都合ではない。
 * 本文より少し小さくして、日本語と訳が同じ行の高さに見えないようにする。
 */
.tr {
  display: block;
  /*
    字の種類が言語ごとに違う（タイ文字・ミャンマー文字・クメール文字・
    デーヴァナーガリー・キリル・漢字）。**1つの書体では出ない**ので、
    文字ごとに持っている書体が選ばれるよう並べておく。
  */
  font-family: "Noto Sans", "Noto Sans Thai", "Noto Looped Thai",
    "Noto Sans Myanmar", "Noto Sans Khmer", "Noto Sans Devanagari",
    "Noto Sans CJK SC", "Noto Sans CJK JP", "DejaVu Sans", sans-serif;
  font-size: 0.95em;
  line-height: 1.5;
  /*
    見出しの字間（「氏　名」を広げる .spaced や h1 の letter-spacing）は
    訳には引き継がない ─ ラテン文字やタイ文字が1字ずつ離れて読めなくなる。
  */
  letter-spacing: normal;
  text-indent: 0;
  font-weight: normal;
  /*
    訳は日本語より長くなりやすい。狭い升目では**枠からはみ出させず折り返す** ─
    はみ出すと隣の欄の文字に重なって、どちらの欄の訳か読めなくなる。
  */
  overflow-wrap: anywhere;
  /*
    見出しの側が `white-space: nowrap`（.spaced や .vertical）でも、
    訳は折り返す ─ 引き継ぐと日本語の何倍も長い訳が1行のまま伸びて、
    升目の右の罫線を突き抜ける。
  */
  white-space: normal;
  /* 日本語の行から離しすぎない。升目の高さが増えると紙数が変わる */
  margin-top: 0.05em;
}

/** 行の中に収める訳（「男・女」のように語が短いところ） */
.tr.inline {
  display: inline;
  margin-left: 0.4em;
}

/*
  省令様式の申請書は、日本語の呼び名の下に**英語の呼び名が刷ってある**。
  訳を後から足した多言語版（.tr）とは違い、原本に印刷されている文字なので、
  別の名で持つ。字間は日本語の見出しから引き継がない。
*/
.en {
  display: block;
  /*
    原本の英語は **Arial Narrow**。原本を刷った PDF の字送りを測って確かめた
    （6.2pt で1文字あたり 0.9mm ─ 普通の Arial なら 1.09mm）。
    普通の幅で組むと、長い英語の行が升目や紙の右の端を越える。
  */
  font-family: "Arial Narrow", "Liberation Sans Narrow", "Nimbus Sans Narrow", Arial, sans-serif;
  font-size: 0.72em;
  line-height: 1.25;
  letter-spacing: normal;
  text-indent: 0;
  font-weight: normal;
  white-space: normal;
  overflow-wrap: anywhere;
}

/** 行の中に収める英語（「男・女」のように語が短いところ） */
.en.inline {
  display: inline;
  margin-left: 0.4em;
}

/*
  dl.rows の行（dt＋dd）に付く訳。**行ぜんたいの下に1行置く。**
  見出しの中に入れると、見出しの列は max-content で決まるので
  訳の長さがそのまま列の幅になり、記入欄が紙の外へ出る
  （原本も行の下に置いている）。
*/
dl.rows > dd.tr.row {
  grid-column: 1 / -1;
  margin: 0 0 0.3em;
}

/*
  縦の見出し升目（.vertical）に入る訳。
  日本語は1字ずつ立てる（text-orientation: upright）が、**訳は行ごと倒す** ─
  ラテン文字・タイ文字・ミャンマー文字を1字ずつ立てると1文字が1行になり、
  升目の高さをはるかに超えて紙からはみ出す。原本も倒してある
  （ミャンマー語の公式PDFで確認）。

  升目の高さに入りきらない訳は折り返す ─ .vertical の nowrap のままだと
  やはりはみ出すので、ここだけ解く。
*/
.vertical .tr {
  text-orientation: sideways;
  /*
    横倒しなので、訳の長さは**升目の高さ**を食う。日本語より小さくして、
    短い升目でも1列に収まるようにする ─ 折り返すと列が1つ増えて、
    table-layout: fixed の升目では罫線を突き抜ける。
  */
  font-size: 0.8em;
  line-height: 1.25;
}

/* --- 提出書類一覧・確認表 -------------------------------------------- */

/*
  入管庁が配っている「特定技能外国人の在留諸申請に係る提出書類一覧・確認表」。
  クラス名を `checklist` にしてあるのは、`別記6-3-業種一覧` などが
  `<table class="grid list">` を使っているため ─ 名前がぶつかる余地を作らない。
  認定・変更・更新 × １号・２号で61枚あるが、**列の構成はどれも同じ**
  （番号／必要書類／様式番号又は発行機関／提出の要否／留意事項／
  提出確認欄／官用欄）。違うのは行の中身なので、組み方と列の幅はここに置き、
  様式のファイルは**行だけ**を持つ。

  原本は Excel で、書体はメイリオ（ゴシック）─ ほかの様式（明朝）とは違う。
  本文はメイリオ10ptだが、**原本は印刷の縮小が70%**にしてあるので紙の上では7pt。
  こちらは縮小を持たないので、はじめから7ptで組む。
*/
body.checklist {
  font-family: "IPAGothic", "Meiryo", "Noto Sans CJK JP", sans-serif;
  font-size: 7pt;
  /* 升目が詰まっているので、ほかの様式（1.7）より行を詰める */
  line-height: 1.25;
}

/** 表題の行。左に表題、右に＜第３表の１＞ */
.checklist-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1em;
  margin: 0 0 0.5em;
}

.checklist-head h1 {
  margin: 0;
  /* rem ではなく em ─ 本文（7pt）を基準にする */
  font-size: 1.15em;
  font-weight: bold;
  line-height: 1.3;
  text-align: left;
  /* h1 の字間（「雇　用　条　件　書」用）は引き継がない */
  letter-spacing: normal;
  text-indent: 0;
}

.checklist-head .table-no {
  margin: 0;
  font-size: 1.15em;
  font-weight: bold;
  white-space: nowrap;
}

/*
  升目の高さは中身に任せる。`table.grid th, table.grid td` は（0,1,2）なので、
  `body.checklist` を頭に付けて（0,2,3）で上書きする ─
  `.list th` だけでは既定の 1.8em に負ける。
*/
body.checklist table.grid th,
body.checklist table.grid td {
  height: auto;
  padding: 0.1em 0.25em;
  vertical-align: middle;
}

/** 必要書類と留意事項は左に寄せ、上から書く */
body.checklist table.grid .write {
  text-align: left;
  vertical-align: top;
}

/**
 * 留意事項。原本も本文よりわずかに小さい。
 * **長い URL は升目の途中で折る** ─ 折らないと `table-layout: fixed` の
 * 升目から黙ってはみ出して、隣の「提出確認欄」の文字に重なる（原本も折っている）。
 */
body.checklist table.grid .note {
  font-size: 0.95em;
  overflow-wrap: anywhere;
}

/**
 * 提出確認欄と官用欄の間の空き。原本は**罫線の無い細い列**で仕切っている。
 * 線を消すだけで、`table-layout: fixed` の列としては残す ─
 * 消すと右の2列の幅が変わる。
 */
body.checklist table.grid td.gap {
  border: 0;
}

/**
 * 「過去に提出した申請情報」の升目。原本には「・申請年月日」「・受付番号」が
 * 赤で刷ってあり、**それぞれの下の空いた行に書く**（升目が狭く、
 * 見出しの右には入らない）。原本に下線は無いので `.ruled` は付けない。
 */
body.checklist td.past {
  padding: 0.1em 0.25em;
}

body.checklist td.past .blank.fill {
  min-height: 1em;
}

/**
 * 「過去に提出した申請情報」の見出し。原本はここだけ本文より小さい字で、
 * 狭い升目に1行で収めている ─ 折り返すと見出しが2行になり、
 * 表ぜんたいが1行ぶん下がる。
 */
body.checklist table.grid th.past-head {
  font-size: 0.8em;
}

/**
 * 表の前に置く注意書き（農業・漁業の派遣雇用の表）。原本は赤の太字で、
 * 升目の外（表の上）に置いてある。
 */
body.checklist .checklist-note {
  margin: 0 0 0.6em;
  font-weight: bold;
}

/* --- 提出書類一覧表の表紙（第１表） --------------------------------- */

/** 右上の改定日と＜表紙＞ */
body.checklist .revised,
body.checklist .sheet-no {
  margin: 0;
  font-weight: bold;
}

body.checklist .sheet-no {
  margin-bottom: 4em;
}

/** 表紙の表題。原本は中央にゴシックの太字で2行 */
body.checklist .cover-title {
  margin: 0 0 3em;
  font-size: 1.9em;
  font-weight: bold;
  line-height: 1.5;
  text-align: center;
  letter-spacing: normal;
  text-indent: 0;
}

/**
 * 表紙の「申請に当たっての留意事項」。原本は橙色の枠で囲ってある。
 * 見出しではなく**太字の1行**なので `<p><b>` で持つ（原本も字の大きさは本文と同じ）。
 */
body.checklist .cover-note {
  padding: 0.8em 1em;
  border: 2px solid #ffc000;
}

body.checklist .cover-note > .items > li {
  margin-bottom: 0.9em;
}

/** 原本で下線が引いてある語 */
.u {
  text-decoration: underline;
}

/** 表紙の二次元コード。原本に貼ってある画像 */
body.checklist .qr {
  width: 22mm;
  height: 22mm;
}

/** 表紙の次の紙にある2行（申請人の氏名・特定技能所属機関の名称） */
body.checklist .rows.applicant {
  grid-template-columns: max-content 1fr;
  gap: 1.6em 2em;
  margin-top: 6em;
  font-size: 1.15em;
}

/**
 * 紙を改める。**原本が改ページを持っているところ**にだけ置く
 * （第１表の表紙・氏名の紙・表の3枚）。刷るときの紙の高さを当てにした
 * 切り位置ではなく、書面がそう作られているという事実。
 */
.new-page {
  break-before: page;
}

/*
  列の幅。原本の升目の比で、合計100%。
  第１表・第２表は「必要書類」の入れ子が浅い（くくりや条件の列が無い）ので、
  その様式のファイルが自分の `<style>` で上書きする。
*/
body.checklist col.num { width: 4.3% }
body.checklist col.group { width: 2.6% }
body.checklist col.cond { width: 13.3% }
body.checklist col.doc { width: 13.1% }
body.checklist col.ref { width: 10.1% }
body.checklist col.need { width: 4.5% }
body.checklist col.note { width: 23.5% }
body.checklist col.yes,
body.checklist col.no { width: 3.5% }
body.checklist col.past { width: 14.3% }
body.checklist col.gap { width: 1.3% }
body.checklist col.office { width: 3.1% }

/* --- 原本に刷られている色 -------------------------------------------- */

/*
  一覧・確認表は色で意味を分けている。**書面としての事実**なのでそのまま持つ。
  赤は「過去に提出した申請情報」まわりと、いずれかを選ぶ束ねの見出し。
  青は「提出の要否」の△と、省略できる条件の注記。
*/
.red { color: #ff0000 }

.blue { color: #0070c0 }