/* ===================================================================
   大会申し込みマニュアル（顧問向け）の見た目
   A4縦。画面ではページを縦に並べ、印刷・PDFでは1ページずつ出す。
   色は KendoTech／KIS ONE のロゴ（青・紺）に合わせる。
   見出し（STEP・締切・小見出し）は、色の付いたブロックにして本文と見分けやすくする。
   =================================================================== */

:root {
  --ink: #0b1f4f;        /* 深い藍。見出し・表紙 */
  --ink-2: #071640;
  --blue: #0068d6;       /* ロゴの K の青 */
  --royal: #1b2f9a;      /* ロゴの K の紺 */
  --cyan: #00a6e6;       /* 押すところの印 */
  --text: #16213b;
  --sub: #55647e;
  --mute: #8c99b0;
  --line: #d9e1ec;
  --mist: #eef3f9;
  --red: #d7263d;        /* 締切と注意だけ */
  --red-bg: #fdf0f2;
  --green: #138a62;
  --sans: "BIZ UDPGothic", "Yu Gothic UI", "Meiryo", sans-serif;
  --head: "Zen Kaku Gothic New", "BIZ UDPGothic", sans-serif;
  --num: "Jost", "Segoe UI", sans-serif;
  --skew: -22deg;
  --z: 1;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--sans);
  color: var(--text);
  background: #c9d1dc;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
  font-size: 9.5pt;
  line-height: 1.7;
  font-feature-settings: "palt" 1;
}
b, strong { font-weight: 700; }
.num { font-family: var(--num); }

/* ---------- ページ ---------- */
.page {
  width: 210mm;
  height: 297mm;
  position: relative;
  overflow: hidden;
  background: #fff;
  padding: 23mm 15mm 16mm;
  margin: 0 auto 10mm;
  box-shadow: 0 6px 30px rgba(11, 31, 79, .18);
  page-break-after: always;
  break-after: page;
}
@media screen {
  .page { zoom: var(--z); }
  body { padding-top: 64px; }
}
@media print {
  body { background: none; }
  .page { margin: 0; box-shadow: none; }
  .toolbar, .chooser { display: none !important; }
}
@page { size: A4; margin: 0; }
body.printing { padding-top: 0; background: none; }
body.printing .page { margin: 0; box-shadow: none; zoom: 1; }
body.printing .toolbar { display: none; }

/* ---------- ページの上（帯）と下 ---------- */
.ph {
  position: absolute; left: 15mm; right: 15mm; top: 8mm;
  display: flex; align-items: center; gap: 3.5mm;
  padding-bottom: 2.6mm; border-bottom: .3mm solid var(--line);
}
.ph .logo { height: 6.2mm; display: block; }
.ph .ttl { font-size: 7pt; color: var(--sub); white-space: nowrap; }
.ph .ed { font-size: 7pt; font-weight: 700; color: #fff; background: var(--ink); padding: .3mm 2.2mm; transform: skewX(var(--skew)); display: inline-block; }
.ph .ed > span { display: inline-block; transform: skewX(calc(var(--skew) * -1)); }
.rail { margin-left: auto; display: flex; gap: .9mm; align-items: flex-end; }
.rail .seg { width: 7.4mm; text-align: center; }
.rail .seg .bar { height: 1.9mm; transform: skewX(var(--skew)); background: #e6ebf2; }
.rail .seg .lb { font-size: 5pt; color: var(--mute); line-height: 1.2; margin-top: .7mm; white-space: nowrap; font-family: var(--num); }
.rail .seg.done .bar { background: #9fb0c9; }
.rail .seg.now .bar { background: var(--blue); height: 2.9mm; }
.rail .seg.now .lb { color: var(--blue); font-weight: 700; }
.rail .gap { width: 1.4mm; }

.pf {
  position: absolute; left: 15mm; right: 15mm; bottom: 7mm;
  display: flex; align-items: center; gap: 3mm; font-size: 7pt; color: var(--mute);
}
.pf .where b { color: var(--sub); font-weight: 700; margin-right: 1.5mm; }
.pf .pno { margin-left: auto; font-family: var(--num); font-size: 9pt; color: var(--ink); font-weight: 500; }
.pf .pno::before { content: ""; display: inline-block; width: 5.5mm; height: 1.3mm; background: var(--blue);
  transform: skewX(var(--skew)); margin-right: 2mm; vertical-align: middle; }

/* ---------- 見出しのブロック（STEP の番号・題名・締切） ---------- */
.st { display: flex; align-items: stretch; margin-bottom: 5mm; border-radius: 2.2mm; overflow: hidden;
  background: var(--mist); border: .3mm solid #d4deeb; min-height: 21mm; }
/* 右側の斜めの切り口は clip-path で作る（見出しの高さが変わっても欠けないように） */
.st .no { flex: none; width: 31mm; background: var(--blue); color: #fff; display: flex; flex-direction: column;
  align-items: center; justify-content: center; position: relative; padding: 2mm 6mm 2mm 0;
  clip-path: polygon(0 0, 100% 0, calc(100% - 7mm) 100%, 0 100%); margin-right: -4mm; }
.st .no .k { position: relative; z-index: 1; font-family: var(--num); font-size: 6.5pt; font-weight: 600; letter-spacing: .16em; opacity: .9; }
.st .no .n { position: relative; z-index: 1; font-family: var(--num); font-weight: 400; font-size: 26pt; line-height: 1; letter-spacing: -.01em; }
.st .no .n.sm { font-size: 15pt; letter-spacing: 0; padding-top: 1mm; }
.st .no.prep { background: var(--ink); }
.st .no.opt { background: #7d8aa3; }
.st .no.ev { background: var(--cyan); }
.st .body { flex: 1; padding: 3mm 4mm 3mm 8mm; display: flex; flex-direction: column; justify-content: center; }
.st h2 { font-family: var(--head); font-weight: 900; font-size: 15.5pt; line-height: 1.3; margin: 0; color: var(--ink); letter-spacing: .02em; }
.st h2 small { font-size: 9.5pt; color: var(--sub); font-weight: 700; margin-left: 2mm; letter-spacing: 0; }
.st .why { margin: 1mm 0 0; font-size: 8.8pt; color: var(--sub); line-height: 1.6; }
.st .why b { color: var(--text); }
.st .due { flex: none; width: 47mm; background: #fff; border-left: .3mm solid #d4deeb; display: flex; flex-direction: column;
  justify-content: center; padding: 2mm 3.5mm; }
.st .due .l { font-size: 7pt; font-weight: 700; color: var(--red); letter-spacing: .08em; display: flex; align-items: center; gap: 1.5mm; }
.st .due .l::before { content: ""; width: 3.5mm; height: 1.2mm; background: var(--red); transform: skewX(var(--skew)); }
.st .due .v { white-space: nowrap; font-family: var(--num); font-size: 10pt; font-weight: 500; color: var(--red); line-height: 1.35; margin-top: .6mm; }
.st .due .v small { font-family: var(--sans); font-size: 7.5pt; font-weight: 700; margin-right: 1mm; }
.st .due.plain .l, .st .due.plain .v { color: var(--sub); }
.st .due.plain .l::before { background: var(--mute); }

/* 小見出し（ブロック） */
h3.sub { font-family: var(--head); font-weight: 700; font-size: 10.5pt; color: var(--ink); margin: 5mm 0 2.5mm;
  display: flex; align-items: center; gap: 2.5mm; background: var(--mist); padding: 1.3mm 3mm; border-radius: 1.2mm; }
h3.sub::before { content: ""; width: 1.4mm; height: 3.8mm; background: var(--blue); transform: skewX(var(--skew)); flex: none; }

/* ---------- 図（画面の写真） ---------- */
.fig { position: relative; }
.fig .clip { border: .3mm solid var(--line); border-radius: 1.8mm; overflow: hidden; background: #f2f5f8;
}
.fig img.sh { display: block; width: 100%; height: auto; }
.fig .mk {
  position: absolute; transform: translate(-50%, -50%);
  width: 5.8mm; height: 5.8mm; border-radius: 50%; background: var(--cyan); color: #fff;
  font-family: var(--num); font-weight: 600; font-size: 8.8pt; display: flex; align-items: center; justify-content: center;
  border: .6mm solid #fff; box-sizing: content-box; z-index: 3;
}
.fig .hl { position: absolute; border: .6mm solid var(--cyan); border-radius: 1.4mm; z-index: 2; }
.fig.mobile { width: 50mm; }
.fig.mobile .clip { border-radius: 4.5mm; border: 1.5mm solid #1a1f2b; }
.figcap { font-size: 7.5pt; color: var(--sub); margin-top: 1.5mm; line-height: 1.6; }
.figcap b { color: var(--text); }

/* ---------- 操作の順番 ---------- */
ol.do { list-style: none; margin: 0; padding: 0; }
ol.do > li { display: grid; grid-template-columns: 7mm 1fr; gap: 2.2mm; padding: 1.8mm 0; border-bottom: .25mm solid var(--line); align-items: start; }
ol.do > li:last-child { border-bottom: none; }
ol.do .c { width: 5.8mm; height: 5.8mm; border-radius: 50%; background: var(--cyan); color: #fff; font-family: var(--num);
  font-weight: 600; font-size: 8.8pt; display: flex; align-items: center; justify-content: center; margin-top: .2mm; }
ol.do .t { font-weight: 700; font-size: 9.5pt; line-height: 1.55; color: var(--text); }
ol.do .d { font-size: 8pt; color: var(--sub); line-height: 1.6; margin-top: .3mm; }
.k-btn { display: inline-block; font-size: 8pt; font-weight: 700; color: #fff; background: #1a5ec4; border-radius: .9mm;
  padding: 0 1.8mm; line-height: 1.75; margin: 0 .5mm; white-space: nowrap; }
.k-btn.ghost { color: #1a5ec4; background: #fff; border: .3mm solid #1a5ec4; }
.cols2 { columns: 2; column-gap: 6mm; display: block; }
.cols2 > li { break-inside: avoid; }

/* ---------- 囲み ---------- */
.box { border-radius: 1.4mm; padding: 2.6mm 3.6mm; font-size: 8.5pt; line-height: 1.7; margin-top: 4mm; }
.box .h { font-weight: 700; font-size: 9pt; margin-bottom: .6mm; display: flex; align-items: center; gap: 2mm; }
.box .h::before { content: ""; width: 2.8mm; height: 2.8mm; transform: skewX(var(--skew)); flex: none; }
.box.note { background: var(--mist); }
.box.note .h { color: var(--blue); }
.box.note .h::before { background: var(--blue); }
.box.warn { background: var(--red-bg); }
.box.warn .h { color: var(--red); }
.box.warn .h::before { background: var(--red); }
.box ul { margin: 0; padding-left: 4.5mm; }
.box li { margin: .3mm 0; }

/* ---------- レイアウト ---------- */
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 6mm; }
.two-6-4 { display: grid; grid-template-columns: 1.45fr 1fr; gap: 6mm; align-items: start; }
.two-4-6 { display: grid; grid-template-columns: 1fr 1.45fr; gap: 6mm; align-items: start; }
.mt2 { margin-top: 2mm; } .mt4 { margin-top: 4mm; } .mt6 { margin-top: 6mm; }
.small { font-size: 8pt; color: var(--sub); }
.ref { font-family: var(--num); color: var(--blue); font-weight: 500; white-space: nowrap; }
p.txt { margin: 0; font-size: 9pt; line-height: 1.75; }

/* ---------- 表紙 ---------- */
.cover { padding: 0; background: var(--ink-2); color: #fff; }
.cover .photo { position: absolute; inset: 0; background: url("img/cover.jpg") center 30% / cover no-repeat; }
.cover .shade { position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(7, 22, 64, .35) 0%, rgba(7, 22, 64, .55) 45%, rgba(7, 22, 64, .96) 72%, #071640 100%); }
.cover .blade1 { position: absolute; right: -40mm; top: 118mm; width: 150mm; height: 52mm; background: var(--blue);
  clip-path: polygon(38% 0, 100% 0, 100% 100%, 0 100%); opacity: .95; }
.cover .blade2 { position: absolute; right: -40mm; top: 170mm; width: 150mm; height: 40mm; background: var(--royal);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 34% 100%); opacity: .95; }
.cover .inner { position: absolute; left: 16mm; right: 16mm; top: 22mm; bottom: 16mm; }
.cover .org { font-size: 9.5pt; letter-spacing: .14em; color: #c5d3ec; }
.cover h1 { font-family: var(--head); font-weight: 900; font-size: 36pt; line-height: 1.22; margin: 110mm 0 0; letter-spacing: .04em;
}
.cover .ver { display: flex; align-items: center; gap: 3mm; margin-top: 5mm; }
.cover .ver .bar { width: 9mm; height: .8mm; background: var(--cyan); }
.cover .ver .t { font-family: var(--num); font-size: 13.5pt; letter-spacing: .04em; }
.cover .edition { position: absolute; left: 0; bottom: 34mm; display: flex; }
.cover .edition .tag { background: #fff; color: var(--ink); transform: skewX(var(--skew)); padding: 2.3mm 7mm; margin-left: 2mm; }
.cover .edition .tag > div { transform: skewX(calc(var(--skew) * -1)); }
.cover .edition .tag .l { font-family: var(--head); font-weight: 900; font-size: 17pt; line-height: 1.2; }
.cover .edition .tag .w { font-size: 8.5pt; color: var(--sub); font-weight: 700; }
.cover .foot { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: flex-end; gap: 6mm;
  border-top: .3mm solid rgba(255, 255, 255, .22); padding-top: 4mm; font-size: 8pt; color: #c5d3ec; }
.cover .foot img { height: 9mm; margin-left: auto; }

/* ---------- 申し込みの流れ ---------- */
.tinfo { background: var(--ink); color: #fff; border-radius: 2.2mm; padding: 4mm 5mm; display: grid;
  grid-template-columns: 1fr 1fr; gap: 1mm 6mm; position: relative; overflow: hidden; margin-bottom: 5mm; padding-right: 22mm; }
.tinfo::after { content: ""; position: absolute; right: -8mm; top: 0; width: 24mm; height: 100%; background: var(--blue);
  clip-path: polygon(40% 0, 100% 0, 100% 100%, 0 100%); opacity: .9; }
.tinfo .nm { grid-column: 1 / -1; font-family: var(--head); font-weight: 900; font-size: 13pt; letter-spacing: .02em; position: relative; z-index: 1; }
.tinfo dl { margin: 1mm 0 0; display: grid; grid-template-columns: 15mm 1fr; gap: .6mm 3mm; font-size: 8.5pt; position: relative; z-index: 1; }
.tinfo dt { color: #9fb3d6; }
.tinfo dd { margin: 0; }
.tinfo dd .num { font-size: 9.5pt; }

.phase { border: .3mm solid #d4deeb; border-radius: 2.2mm; overflow: hidden; margin-bottom: 3mm; }
.phase .hd { display: flex; align-items: center; gap: 3mm; padding: 1.8mm 4mm; color: #fff; background: var(--blue); }
.phase .hd .t { font-family: var(--head); font-weight: 700; font-size: 10.5pt; }
.phase .hd .p { font-size: 8.5pt; opacity: .95; }
.phase .hd .p .num { font-size: 9.5pt; }
.phase .hd .dl { margin-left: auto; background: #fff; color: var(--red); font-weight: 700; font-size: 8pt; padding: .4mm 2.5mm;
  border-radius: .8mm; white-space: nowrap; }
.phase .hd .dl .num { font-size: 9pt; font-weight: 600; }
.phase.prep .hd { background: var(--ink); }
.phase.after .hd { background: var(--royal); }
.phase.ev .hd { background: var(--cyan); }
.phase .rw { display: grid; grid-template-columns: 19mm 1fr auto 11mm; align-items: center; gap: 0 3mm; padding: 1.5mm 4mm;
  border-top: .25mm solid var(--line); background: #fff; }
.phase .rw:first-of-type { border-top: none; }
.phase .chip { display: inline-block; transform: skewX(var(--skew)); background: var(--blue); color: #fff; padding: .3mm 1.8mm;
  font-family: var(--num); font-weight: 600; font-size: 7.5pt; white-space: nowrap; justify-self: start; margin-left: 1mm; }
.phase .chip > span { display: inline-block; transform: skewX(calc(var(--skew) * -1)); }
.phase .chip.prep { background: var(--ink); }
.phase .chip.opt { background: #fff; color: var(--sub); border: .3mm solid var(--mute); }
.phase .chip.ev { background: var(--cyan); }
.phase .rw .t { font-weight: 700; font-size: 9.5pt; color: var(--ink); line-height: 1.4; }
.phase .rw .d { font-size: 7.8pt; color: var(--sub); line-height: 1.45; }
.phase .rw .tag { font-size: 7.5pt; font-weight: 700; white-space: nowrap; padding: .2mm 2mm; border-radius: .8mm; }
.phase .rw .tag.red { color: var(--red); background: var(--red-bg); }
.phase .rw .tag.grn { color: var(--green); background: #e5f4ee; }
.phase .rw .tag.gry { color: var(--sub); background: var(--mist); }
.phase .rw .pg { font-family: var(--num); font-size: 8.5pt; color: var(--blue); text-align: right; }

/* ---------- 目次 ---------- */
.toc { list-style: none; margin: 0; padding: 0; }
.toc li { display: grid; grid-template-columns: 18mm 1fr auto; align-items: baseline; padding: 1.25mm 0; border-bottom: .25mm solid var(--line); }
.toc .k { font-family: var(--num); font-size: 7.5pt; font-weight: 600; color: var(--blue); letter-spacing: .06em; }
.toc .k.prep { color: var(--ink); }
.toc .k.opt { color: var(--mute); }
.toc .t { font-family: var(--head); font-weight: 700; font-size: 10pt; color: var(--ink); }
.toc .t small { font-family: var(--sans); font-weight: 400; font-size: 7.5pt; color: var(--sub); margin-left: 2mm; }
.toc .p { font-family: var(--num); font-size: 9.5pt; color: var(--ink); }
.toc li.grp { border-bottom: none; padding: 3mm 0 .8mm; }
.toc li.grp .t { font-size: 8.5pt; color: #fff; background: var(--ink); font-family: var(--sans); font-weight: 700; letter-spacing: .06em;
  padding: .5mm 3mm; border-radius: .8mm; justify-self: start; }

.legend { display: grid; grid-template-columns: 1fr 1fr; gap: 2.5mm 6mm; font-size: 8pt; color: var(--sub); }
.legend .it { display: flex; gap: 3mm; align-items: center; }
.legend .sw { flex: none; width: 12mm; display: flex; justify-content: center; }

/* ---------- よくある質問 ---------- */
.faq-col .cat { font-family: var(--head); font-weight: 700; font-size: 9.5pt; color: #fff; background: var(--blue);
  padding: 1mm 3mm; border-radius: 1mm; margin: 0 0 2.5mm; display: flex; gap: 2mm; align-items: center; }
.faq-col .cat.gap { margin-top: 5mm; }
.faq-col .qa { padding: 0 0 2.8mm; margin-bottom: 2.8mm; border-bottom: .25mm solid var(--line); }
.faq-col .q { font-weight: 700; font-size: 9.3pt; color: var(--ink); display: grid; grid-template-columns: 5mm 1fr; line-height: 1.5; }
.faq-col .q::before { content: "Q"; font-family: var(--num); color: var(--cyan); font-weight: 600; }
.faq-col .a { font-size: 8.5pt; color: var(--text); display: grid; grid-template-columns: 5mm 1fr; margin-top: .8mm; line-height: 1.7; }
.faq-col .a::before { content: "A"; font-family: var(--num); color: var(--mute); font-weight: 600; }

/* ---------- 裏表紙 ---------- */
.back { background: var(--ink-2); color: #dfe7f5; padding: 0; }
.back .blade { position: absolute; right: -30mm; top: 0; width: 110mm; height: 40mm; background: var(--blue);
  clip-path: polygon(38% 0, 100% 0, 100% 100%, 0 100%); opacity: .9; }
.back .blade2 { position: absolute; right: -30mm; top: 40mm; width: 110mm; height: 26mm; background: var(--royal);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 30% 100%); opacity: .9; }
.back .mid { position: absolute; left: 16mm; right: 16mm; top: 112mm; }
.back .mid .ttl { font-family: var(--head); font-weight: 900; font-size: 20pt; color: #fff; line-height: 1.3; }
.back .mid .sub { font-size: 9pt; color: #9fb3d6; margin-top: 2mm; }
.back .contact { position: absolute; left: 16mm; right: 16mm; bottom: 42mm; border-top: .3mm solid rgba(255, 255, 255, .2); padding-top: 6mm; }
.back .contact .l { font-size: 8.5pt; color: #9fb3d6; letter-spacing: .1em; }
.back .contact .n { font-size: 12pt; font-weight: 700; color: #fff; margin-top: 1.5mm; }
.back .contact .e { font-family: var(--num); font-size: 13pt; color: #6fd0ff; margin-top: 1mm; }
.back .contact .s { font-size: 8pt; color: #9fb3d6; margin-top: 2.5mm; }
.back .logo { position: absolute; left: 16mm; right: 16mm; bottom: 14mm; display: flex; align-items: center; gap: 4mm;
  border-top: .3mm solid rgba(255, 255, 255, .2); padding-top: 5mm; font-size: 7.5pt; color: #9fb3d6; }
.back .logo img { height: 9mm; }

/* ---------- 画面で開いたときの上の帯・選ぶ画面 ---------- */
.toolbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50; height: 52px;
  background: rgba(7, 22, 64, .96); color: #fff; display: flex; align-items: center; gap: 14px; padding: 0 16px;
  font-size: 13px; box-shadow: 0 2px 12px rgba(0, 0, 0, .2);
}
.toolbar a, .toolbar button { color: #fff; text-decoration: none; font: inherit; background: none; border: 1px solid rgba(255, 255, 255, .35);
  border-radius: 6px; padding: 6px 12px; cursor: pointer; white-space: nowrap; }
.toolbar .ttl { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.toolbar .sp { flex: 1; }
.toolbar .pri { background: var(--blue); border-color: var(--blue); }
@media (max-width: 640px) { .toolbar .ttl { display: none; } .toolbar .opt { display: none; } }

.chooser { max-width: 880px; margin: 0 auto; padding: 16px 16px 60px; }
.chooser .hero { position: relative; overflow: hidden; border-radius: 14px; padding: 34px 28px 30px; margin-bottom: 18px; color: #fff;
  background: linear-gradient(90deg, rgba(7, 22, 64, .97) 35%, rgba(7, 22, 64, .55)), url("img/cover.jpg") right 30% / 60% auto no-repeat, var(--ink-2); }
.chooser .hero::after { content: ""; position: absolute; right: -40px; bottom: 0; width: 220px; height: 54px; background: var(--blue);
  clip-path: polygon(30% 0, 100% 0, 100% 100%, 0 100%); }
.chooser .hero .org { font-size: 12px; letter-spacing: .12em; color: #c5d3ec; }
.chooser h1 { font-family: var(--head); font-weight: 900; font-size: 30px; color: #fff; margin: 8px 0 8px; }
.chooser p.lead { color: #c5d3ec; margin: 0; font-size: 14px; line-height: 1.8; }
body:has(#chooser:not([hidden])) { padding-top: 0; }
.chooser .cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.chooser .card { background: #fff; border-radius: 12px; padding: 22px; box-shadow: 0 4px 18px rgba(11, 31, 79, .12);
  display: flex; flex-direction: column; gap: 8px; border-top: 6px solid var(--blue); }
.chooser .card.joint { border-top-color: var(--royal); }
.chooser .card .w { font-size: 13px; color: var(--sub); font-weight: 700; }
.chooser .card .l { font-family: var(--head); font-weight: 900; font-size: 24px; color: var(--ink); }
.chooser .card .d { font-size: 13.5px; color: var(--sub); line-height: 1.8; flex: 1; }
.chooser .card .acts { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
.chooser .card a { text-decoration: none; font-weight: 700; font-size: 14px; border-radius: 8px; padding: 10px 14px; }
.chooser .card a.p { background: var(--blue); color: #fff; }
.chooser .card a.s { border: 1.5px solid var(--blue); color: var(--blue); }
.chooser .back-home { display: inline-block; margin-top: 26px; color: var(--blue); }
@media (max-width: 640px) {
  .chooser .hero { padding: 26px 20px 46px; background-size: 0 0, 0 0, auto; }
  .chooser h1 { font-size: 23px; }
  .chooser .hero::after { width: 140px; height: 28px; }
}

/* ---------- おすすめの帯（STEP5：スマートフォン推奨） ---------- */
.reco { display: grid; grid-template-columns: auto 1fr; gap: 4mm; align-items: center; background: #e8f6fd;
  border: .4mm solid var(--cyan); border-radius: 1.6mm; padding: 2.6mm 4mm; font-size: 8.8pt; line-height: 1.7; }
.reco .reco-k { background: var(--cyan); color: #fff; font-weight: 700; font-size: 8.5pt; padding: 1mm 3mm;
  transform: skewX(var(--skew)); white-space: nowrap; }

/* ---------- 届の種類の表（STEP6） ---------- */
table.kinds { width: 100%; border-collapse: collapse; font-size: 8.5pt; }
table.kinds th { text-align: left; white-space: nowrap; color: var(--ink); font-weight: 700; padding: 1.8mm 3mm 1.8mm 0; width: 22mm; }
table.kinds td { padding: 1.8mm 2mm; color: var(--text); }
table.kinds td:nth-child(3) { color: var(--sub); white-space: nowrap; font-size: 8pt; }
table.kinds td.pg { text-align: right; width: 12mm; }
table.kinds tr { border-bottom: .25mm solid var(--line); }
table.kinds tr.off th, table.kinds tr.off td { color: var(--mute); text-decoration: line-through; text-decoration-color: rgba(140, 153, 176, .6); }

/* ---------- 届の提出の流れ（4つ） ---------- */
.flow4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2.5mm; }
.flow4 > div { background: var(--mist); border-radius: 1.4mm; padding: 2.4mm 3mm; font-size: 8pt; line-height: 1.6; color: var(--sub); position: relative; }
.flow4 > div b { display: block; color: var(--ink); font-size: 9pt; margin-bottom: .6mm; }
.flow4 .n { position: absolute; right: 2.5mm; top: 1.5mm; font-family: var(--num); font-size: 14pt; font-weight: 300; color: var(--blue); }

.flow4 > div strong { color: var(--text); }

/* PDF では影を一切使わない。PDF を開く端末によっては、影が黒い四角で表示されるため（2026-10-06） */
body.printing *, body.printing *::before, body.printing *::after { box-shadow: none !important; text-shadow: none !important; }