/* United World Nihongo — one stylesheet, inlined-weight, no framework.
   Palette carried over from the live site so the change reads as the same brand.
   Fonts are the system Japanese stack: the live site loaded two Google families
   at eight weights each and used three of the sixteen. */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --red:#dc2626;--red-dark:#991b1b;--red-light:#fef2f2;
  --navy:#0a1628;--navy-soft:#16233a;
  --g50:#f8fafc;--g100:#f1f5f9;--g200:#e2e8f0;--g400:#94a3b8;
  --g500:#64748b;--g700:#334155;--g900:#0f172a;
  --accent:#f59e0b;
  --wrap:1080px;--radius:10px;
  --sans:"Hiragino Kaku Gothic ProN","Hiragino Sans",Meiryo,system-ui,-apple-system,"Segoe UI",sans-serif;
}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:var(--sans);color:var(--g900);line-height:1.85;font-size:16px;background:#fff}
a{color:var(--red-dark);text-decoration:underline;text-underline-offset:2px}
a:hover{text-decoration:none}
img{max-width:100%;height:auto;display:block}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 20px}

.skip{position:absolute;left:-9999px}
.skip:focus{left:8px;top:8px;z-index:200;background:#fff;padding:12px 18px;min-height:44px;display:inline-flex;align-items:center;border:2px solid var(--red)}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px}

/* nav */
.nav{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.97);border-bottom:1px solid var(--g200);backdrop-filter:blur(8px)}
.nav-inner{max-width:var(--wrap);margin:0 auto;padding:10px 20px;display:flex;align-items:center;gap:20px}
.nav-logo{font-size:17px;font-weight:800;color:var(--navy);text-decoration:none;white-space:nowrap}
.nav-logo span{color:var(--red)}
.cta-short{display:none}
.nav-links{display:flex;gap:18px;margin-left:auto;font-size:14px;font-weight:600}
.nav-links a{color:var(--g700);text-decoration:none;padding:13px 0;display:inline-flex;align-items:center;min-height:44px}
.nav-links a:hover{color:var(--red)}
.nav-right{display:flex;align-items:center;gap:12px}
.lang{font-size:13px;font-weight:600;color:var(--g500);text-decoration:none;padding:12px 8px;min-height:44px;display:flex;align-items:center}
.nav-cta{background:var(--red);color:#fff;padding:12px 18px;border-radius:6px;font-weight:700;font-size:14px;text-decoration:none;white-space:nowrap;min-height:44px;display:flex;align-items:center}
.nav-cta:hover{background:var(--red-dark)}

/* hero */
.hero{background:linear-gradient(135deg,var(--navy) 0%,var(--navy-soft) 55%,#3b1218 100%);color:#fff;padding:64px 0 56px}
.hero .wrap{max-width:900px}
.eyebrow{display:inline-block;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.22);padding:6px 14px;border-radius:999px;font-size:13px;font-weight:600;margin-bottom:20px}
.hero h1{font-size:clamp(25px,4.4vw,40px);font-weight:800;line-height:1.42;margin-bottom:18px;letter-spacing:.01em}
.hero h1 em{font-style:normal;color:var(--accent)}
.hero-lede{font-size:16.5px;color:rgba(255,255,255,.86);max-width:660px;margin-bottom:12px}
.hero-proof{font-size:13.5px;color:rgba(255,255,255,.6);margin-bottom:28px}
.hero-btns{display:flex;gap:12px;flex-wrap:wrap}

.btn{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:14px 30px;border-radius:8px;font-weight:700;font-size:16px;text-decoration:none;border:2px solid transparent}
.btn-primary{background:var(--red);color:#fff}
.btn-primary:hover{background:var(--red-dark)}
.btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.35)}
.btn-ghost:hover{background:rgba(255,255,255,.1)}
.btn-outline{background:#fff;color:var(--red-dark);border-color:var(--g200)}
.btn-outline:hover{border-color:var(--red)}
.btn-lg{min-height:56px;padding:16px 40px}

/* crumbs */
.crumbs{border-bottom:1px solid var(--g100);background:var(--g50);font-size:13px}
.crumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:6px;padding:10px 0;color:var(--g500)}
.crumbs li+li::before{content:"›";margin-right:6px;color:var(--g400)}
.crumbs a{color:var(--g500)}

/* sections */
.section{padding:64px 0}
.section-alt{background:var(--g50)}
.label{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--red);margin-bottom:10px}
h2{font-size:clamp(21px,3vw,28px);font-weight:800;line-height:1.45;margin-bottom:14px}
h3{font-size:18px;font-weight:700;line-height:1.55;margin-bottom:10px}
h4{font-size:16px;font-weight:700;margin-bottom:8px}
.section p{color:var(--g700);margin-bottom:14px;max-width:74ch}
.lede{font-size:17px;color:var(--g700);max-width:70ch;margin-bottom:24px}

.grid{display:grid;gap:20px;margin-top:28px}
.grid-2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.grid-3{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.card{background:#fff;border:1px solid var(--g200);border-radius:var(--radius);padding:26px}
.card p{font-size:14.5px;margin-bottom:0}
.card-num{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:8px;background:var(--red-light);color:var(--red-dark);font-weight:800;margin-bottom:14px}

.answer{background:var(--red-light);border-left:4px solid var(--red);padding:20px 24px;border-radius:0 var(--radius) var(--radius) 0;margin:24px 0}
.answer p{margin-bottom:0;color:var(--g900);font-size:15.5px}

.callout{border:1px solid var(--g200);border-left:4px solid var(--accent);background:#fffbeb;padding:18px 22px;border-radius:0 var(--radius) var(--radius) 0;margin:22px 0}
.callout p{margin-bottom:0;font-size:14.5px}

table{width:100%;border-collapse:collapse;margin:22px 0;font-size:14.5px}
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
th,td{text-align:left;padding:11px 14px;border-bottom:1px solid var(--g200);vertical-align:top}
th{background:var(--g50);font-weight:700;white-space:nowrap}

ul.ticks{list-style:none;margin:16px 0}
ul.ticks li{padding:7px 0 7px 26px;position:relative;font-size:15px;color:var(--g700)}
ul.ticks li::before{content:"✓";position:absolute;left:0;color:var(--red);font-weight:800}
ol.steps{list-style:none;counter-reset:s;margin:22px 0}
ol.steps li{counter-increment:s;padding:0 0 20px 46px;position:relative}
ol.steps li::before{content:counter(s);position:absolute;left:0;top:0;width:32px;height:32px;border-radius:50%;background:var(--red);color:#fff;font-weight:800;display:flex;align-items:center;justify-content:center;font-size:15px}

details{border-bottom:1px solid var(--g200);padding:14px 0}
details summary{font-weight:700;cursor:pointer;font-size:15.5px;list-style:none;padding:6px 24px 6px 0;position:relative;min-height:44px;display:flex;align-items:center}
details summary::-webkit-details-marker{display:none}
details summary::after{content:"＋";position:absolute;right:0;top:50%;transform:translateY(-50%);color:var(--red);font-weight:800}
details[open] summary::after{content:"−"}
details p{margin-top:12px;margin-bottom:0;font-size:14.5px}

.source{font-size:12.5px;color:var(--g500);margin-top:8px}
.source a{color:var(--g500)}

.related{background:var(--g50);border-radius:var(--radius);padding:24px;margin-top:32px}
.related h3{font-size:15px;margin-bottom:12px}
.related ul{list-style:none}
.related li{font-size:14.5px}
.related li a{display:inline-flex;align-items:center;min-height:36px}

/* CTA band */
.cta-band{background:var(--navy);color:#fff;padding:60px 0;text-align:center}
.cta-band h2{margin-bottom:12px}
.cta-band p{color:rgba(255,255,255,.75);max-width:56ch;margin:0 auto 26px;font-size:15.5px}
.band-sub{font-size:13.5px;color:rgba(255,255,255,.5);margin-top:20px}
.band-sub a{color:var(--accent)}

/* footer */
.footer{background:var(--g900);color:var(--g400);padding:40px 0 24px;font-size:13.5px}
.footer-grid{display:grid;grid-template-columns:1fr auto;gap:28px;align-items:start}
.footer-logo{font-weight:800;color:#fff;font-size:16px;margin-bottom:8px}
.footer-logo span{color:var(--red)}
.footer-note{color:var(--g400);margin-bottom:4px}
.footer a{color:var(--g200)}
.footer ul{list-style:none;columns:2;column-gap:32px}
.footer li{padding:0}
.footer li a{display:inline-flex;align-items:center;min-height:36px;padding:2px 0}
.copyright{text-align:center;color:var(--g500);margin-top:28px;font-size:12.5px}

/* form */
.form-grid{display:grid;gap:16px;max-width:640px;margin-top:24px}
.field label{display:block;font-weight:700;font-size:14px;margin-bottom:6px}
.req{color:var(--red);font-size:12px;margin-left:6px}
.field input,.field select,.field textarea{width:100%;padding:12px 14px;border:1px solid var(--g200);border-radius:6px;font-size:16px;font-family:inherit;min-height:48px}
.field textarea{min-height:120px;line-height:1.7}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--red);outline:none;box-shadow:0 0 0 3px var(--red-light)}
.hint{font-size:12.5px;color:var(--g500);margin-top:4px}
.check{display:flex;gap:10px;align-items:flex-start;font-size:14.5px}
.check input{width:20px;height:20px;min-height:20px;margin-top:3px;flex:0 0 auto}
.hp{position:absolute;left:-9999px}

@media(max-width:820px){
  /* The links used to be display:none below 820px, which left the phone with
     a logo, a language toggle and a CTA -- and no evidence that the site had
     other pages at all. A site whose whole purpose is a growing library of
     articles cannot hide its navigation on the device most of its readers
     use. They move to a second row that scrolls sideways: no JavaScript, no
     hamburger to discover, and the first three destinations are visible
     without any interaction. */
  .nav-inner{gap:10px;flex-wrap:wrap;padding-bottom:0}
  .nav-links{
    order:3;width:100%;margin-left:0;gap:0;
    overflow-x:auto;flex-wrap:nowrap;
    border-top:1px solid var(--g100);
    scrollbar-width:none;-webkit-overflow-scrolling:touch;
  }
  .nav-links::-webkit-scrollbar{display:none}
  .nav-links a{padding:11px 14px;white-space:nowrap;min-height:42px;font-size:13.5px}
  .nav-links a:first-child{padding-left:0}
  .nav-right{margin-left:auto;gap:4px}
  .lang{padding:12px 6px}
  .nav-cta{padding:12px 14px;font-size:13.5px}
  /* The full label is 162px of nowrap text; with the logo and the language
     link it overran a 390px viewport. Shorten the label rather than the
     tap target. */
  .cta-long{display:none}
  .cta-short{display:inline}
  .footer-grid{grid-template-columns:1fr}
  .hero{padding:44px 0 40px}
  .section{padding:48px 0}
  .btn{width:100%}
  .hero-btns{flex-direction:column}
}
/* Verbatim quotation of a source document. Introduced for the 助成金 articles,
   where the exact wording of a regulation is the point and paraphrasing it
   would defeat the purpose. */
blockquote{border-left:4px solid var(--g200);background:var(--g50);padding:16px 22px;margin:22px 0;border-radius:0 var(--radius) var(--radius) 0}
blockquote p{font-size:15px;color:var(--g900);margin-bottom:10px}
blockquote p:last-child{margin-bottom:0}
blockquote .cite{font-size:12.5px;color:var(--g500)}

@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

@media(max-width:420px){
  .nav-logo{font-size:15px}
}


/* ---------------------------------------------------------------------
   Home as a portal (2026-09-01)

   The home page was one long landing page: every section explained something
   and the reader had to reach the bottom to learn the site had other pages.
   These components exist to make the page a set of routes instead. Nothing
   here is decoration -- each one is a destination with a visible affordance.
   --------------------------------------------------------------------- */

.section-tight{padding:44px 0}
.hero-home{padding:60px 0 52px}

/* The four facts a B2B buyer checks before reading anything: who it is for,
   how it runs, how it is designed, how it is priced. One row, no prose. */
.factbar{list-style:none;display:grid;gap:0;margin-top:26px;
  grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  border:1px solid var(--g200);border-radius:var(--radius);overflow:hidden;background:#fff}
.factbar li{padding:16px 20px;border-right:1px solid var(--g200)}
.factbar li:last-child{border-right:0}
.factbar-k{display:block;font-size:12px;font-weight:700;color:var(--g500);letter-spacing:.04em;margin-bottom:4px}
.factbar-v{display:block;font-size:14.5px;font-weight:600;color:var(--g900);line-height:1.6}

/* A whole card is the link. The arrow is the affordance that says so, and the
   border shift on hover keeps it legible without relying on colour alone. */
.hub-grid,.portal-grid{margin-top:26px}
.hub,.portal{display:flex;flex-direction:column;background:#fff;border:1px solid var(--g200);
  border-radius:var(--radius);padding:24px;text-decoration:none;color:inherit;
  transition:border-color .12s,box-shadow .12s,transform .12s}
.hub:hover,.portal:hover{border-color:var(--red);box-shadow:0 3px 14px rgba(15,23,42,.07);transform:translateY(-1px)}
.hub h3,.portal h3{font-size:16.5px;font-weight:700;color:var(--navy);margin-bottom:8px;line-height:1.55}
.hub p,.portal p{font-size:14.5px;color:var(--g700);line-height:1.8}
.hub-go{margin-top:auto;padding-top:14px;font-size:13.5px;font-weight:700;color:var(--red-dark)}
.hub-go::after{content:" →"}
.portal h3::after{content:" →";color:var(--red);font-weight:700}

/* Section header with a route out of it, so a listing is never a dead end. */
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap}
.sec-more{font-size:14px;font-weight:700;white-space:nowrap}
.sec-more::after{content:" →"}
.sec-foot{margin-top:20px;font-size:14.5px}

/* Article listings. Generated by scripts/articles.py, so the markup here has
   to hold for three articles and for a hundred. */
.art-list{list-style:none;display:grid;gap:14px;margin-top:24px;
  grid-template-columns:repeat(auto-fit,minmax(310px,1fr))}
.art{background:#fff;border:1px solid var(--g200);border-radius:var(--radius);padding:20px 22px}
.art-meta{display:flex;align-items:center;gap:10px;font-size:12.5px;color:var(--g500);margin-bottom:8px}
.art-tag{background:var(--red-light);color:var(--red-dark);font-weight:700;
  padding:3px 10px;border-radius:999px;font-size:12px}
.art h3{font-size:16px;font-weight:700;line-height:1.6;margin-bottom:7px}
.art h3 a{color:var(--navy);text-decoration:none}
.art h3 a:hover{color:var(--red-dark);text-decoration:underline}
.art p{font-size:14px;color:var(--g700);line-height:1.75}
.art-group{margin-top:34px}
.art-group-h{font-size:15px;font-weight:800;color:var(--g900);
  padding-bottom:10px;border-bottom:2px solid var(--g200);display:flex;align-items:baseline;gap:10px}
.art-group-h a{color:var(--navy);text-decoration:none}
.art-group-h a:hover{color:var(--red-dark);text-decoration:underline}
.art-count{font-size:12.5px;font-weight:600;color:var(--g500)}

ol.steps-compact li{padding-bottom:14px}
ol.steps-compact li p{font-size:14.5px;color:var(--g700)}

@media(max-width:820px){
  .section-tight{padding:34px 0}
  .hero-home{padding:40px 0 36px}
  .factbar{grid-template-columns:1fr}
  .factbar li{border-right:0;border-bottom:1px solid var(--g200)}
  .factbar li:last-child{border-bottom:0}
  .sec-head{align-items:flex-start}
  .hub,.portal{padding:20px}
}


/* ---------------------------------------------------------------------
   Hero with a photograph (2026-09-01)

   Two columns on desktop, stacked on mobile with the text first. The image is
   the LCP element, so the rules here are about when it paints, not how it looks:

   * the panel carries `aspect-ratio`, and the <img> carries width/height, so
     the box is its final size before the bytes arrive. Reserving the space is
     the whole of CLS on this page.
   * the image is never lazy-loaded — see the note in the markup. It gets
     fetchpriority="high".
   * the text column keeps its own max-width so the measure does not stretch
     when the photo is absent.

   The Hero renders exactly as it did before if no image is present: the grid
   collapses to one column because there is only one child. Nothing here depends
   on the photo existing.
   --------------------------------------------------------------------- */

.hero-grid{display:grid;gap:40px;align-items:center;grid-template-columns:1fr}
/* Equal columns, not a text-weighted split. At 1.28/0.72 the photo came out
   360x240 against a text block about 480 tall — half the height of what it sits
   beside, which reads as a thumbnail somebody forgot to finish rather than as
   the other half of a band. The photo cannot be cropped taller without cutting
   a face, so the only way to give it height is to give it width. */
.hero-has-figure .hero-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px}
/* Note the compound selector, not a descendant one: .hero-has-figure sits on
   the same <section> as .hero, so `.hero-has-figure .hero h1` matches nothing.
   Both rules below were dead until this was spotted in the browser.

   The h1 is sized off the viewport, which was right when it had the full 900px
   measure to itself. In two columns it has about 550px, and clamp(...,4.4vw,40px)
   put five lines on it with 進められる and オンライン日本語研修 both split across
   a break. Type scales with its column, not with the window. */
.hero-has-figure.hero h1{
  font-size:clamp(25px,2.7vw,36px);line-height:1.48;
  /* Japanese breaks between any two characters by default, so a narrower column
     split 仕事 down the middle. auto-phrase breaks at phrase boundaries instead;
     browsers that do not know it ignore the declaration and behave as before,
     so this is an improvement where it lands and never a regression. */
  word-break:auto-phrase;
}
.hero-has-figure .hero-lede{font-size:15.5px}
.hero-copy{min-width:0}
.hero-figure{
  position:relative;margin:0;min-width:0;
  aspect-ratio:3/2;                 /* reserved before the image loads */
  border-radius:14px;overflow:hidden;
  background:rgba(255,255,255,.06); /* what fills the box until it paints */
  box-shadow:0 18px 44px rgba(0,0,0,.28);
}
.hero-figure img{
  display:block;width:100%;height:100%;object-fit:cover;object-position:50% 42%;
}
/* The panel is dark and the photo is bright; without this the join between the
   two reads as a sticker rather than as part of the band. */
.hero-figure::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(200deg,rgba(10,22,40,0) 45%,rgba(10,22,40,.30) 100%);
}
/* The Hero runs wider than the rest of the site. 1080 is right for a column of
   prose; for two columns it leaves each of them too narrow to be anything. The
   band is the one place on the page where that is worth breaking, and it is
   bounded by the viewport so it never causes a horizontal scrollbar. */
.hero-has-figure.hero .wrap{max-width:min(1280px, 100% - 40px)}
.hero-has-figure .hero-lede{max-width:none}

/* The label. Small, but inside the figure and over the image rather than under
   it: a disclosure a reader has to scroll past is not a disclosure. */
.hero-figcaption{
  position:absolute;right:10px;bottom:9px;z-index:1;
  font-size:11.5px;line-height:1;color:rgba(255,255,255,.92);
  background:rgba(10,22,40,.62);padding:5px 9px;border-radius:5px;
  backdrop-filter:blur(2px);letter-spacing:.02em;
}

@media(max-width:900px){
  /* One column, and the text comes first: the reader needs the sentence before
     the picture, and on a phone the picture would otherwise push the h1 below
     the fold. The ratio stays 3:2 — changing it here would crop the very faces
     the desktop layout was careful not to cut. */
  .hero-has-figure .hero-grid{grid-template-columns:1fr;gap:24px}
  .hero-copy{order:1}
  .hero-figure{order:2}
}