/* Shared stylesheet for article pages.
   The landing page inlines its own CSS on purpose — it is the first-visit
   surface and a render-blocking request costs more there than a cache hit
   saves. Article pages, which are read in sequence, use this instead. */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{--teal:#0d9488;--teal-dark:#0f766e;--teal-light:#f0fdfa;--navy:#0a1628;
  --gray-50:#f8fafc;--gray-100:#f1f5f9;--gray-200:#e2e8f0;--gray-400:#94a3b8;
  --gray-500:#64748b;--gray-700:#334155;--gray-900:#0f172a;--accent:#f59e0b;--radius:8px;
  /* Warm ground, added 2026-09-01. The single biggest reason the site read as
     clinical was that every surface was pure white or cool blue-grey. */
  --paper:#FBF9F6;--sand:#F4EFE8;--sand-deep:#EDE5DA;--line:#E7E1D8;
  --ink:#141A21;--ink-soft:#4A5563;--ink-mute:#5E6975;
  --h1:clamp(31px,4.1vw,53px);--h2:clamp(25px,3.0vw,38px);
  --lead:clamp(16px,1.15vw,17.5px);--rhythm:clamp(56px,5.4vw,92px);
  --measure:34em}
html{scroll-behavior:smooth}
body{font-family:'Noto Sans JP',-apple-system,BlinkMacSystemFont,'Hiragino Sans','Yu Gothic',sans-serif;
  color:var(--gray-900);line-height:1.95;background:#fff;-webkit-font-smoothing:antialiased}
a{color:var(--teal-dark)}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:3px solid var(--accent);outline-offset:2px}
img{max-width:100%;height:auto}

#main:focus{outline:none}
.skip{position:absolute;left:-9999px;top:0;background:var(--navy);color:#fff;padding:12px 20px;z-index:200}
.skip:focus{left:0}

.crumbs{max-width:900px;margin:0 auto;padding:16px 24px 0;font-size:13px;color:var(--gray-500)}
.crumbs a{color:var(--gray-500)}
.crumbs li{display:inline;list-style:none}
.crumbs li+li::before{content:" › ";color:var(--gray-500)}

article{max-width:760px;margin:0 auto;padding:26px 24px 72px}
article h1{font-size:clamp(23px,4vw,32px);font-weight:800;line-height:1.55;margin-bottom:16px}
.meta{color:var(--gray-500);font-size:13.5px;padding-bottom:22px;border-bottom:1px solid var(--gray-200);margin-bottom:30px}
.meta b{color:var(--gray-700);font-weight:600}

.answer{background:var(--teal-light);border-left:4px solid var(--teal);border-radius:var(--radius);padding:22px 24px;margin-bottom:34px}
.answer p{font-size:15.5px;margin-bottom:10px}
.answer p:last-child{margin-bottom:0}
.answer strong{font-weight:700}

article h2{font-size:clamp(19px,3vw,23px);font-weight:800;line-height:1.6;margin:46px 0 16px;
  padding-top:26px;border-top:1px solid var(--gray-200)}
article h3{font-size:17px;font-weight:800;margin:30px 0 12px;line-height:1.6}
article p{font-size:15.5px;color:var(--gray-700);margin-bottom:18px}
article ul,article ol{margin:0 0 20px 22px}
article li{font-size:15.5px;color:var(--gray-700);margin-bottom:10px}
article strong{color:var(--gray-900);font-weight:700}

blockquote{background:var(--gray-50);border-left:4px solid var(--gray-400);border-radius:var(--radius);
  padding:18px 22px;margin:0 0 20px}
blockquote p{font-size:14.5px;margin-bottom:8px}
blockquote p:last-child{margin-bottom:0}
blockquote cite{display:block;font-style:normal;font-size:12.5px;color:var(--gray-500);margin-top:10px}

.tbl-wrap{overflow-x:auto;margin-bottom:22px}
table{border-collapse:collapse;width:100%;min-width:480px;font-size:14.5px}
th,td{border:1px solid var(--gray-200);padding:11px 14px;text-align:left;vertical-align:top}
th{background:var(--gray-50);font-weight:700}

.callout{border:1px solid var(--gray-200);border-radius:var(--radius);padding:20px 22px;margin-bottom:22px;background:#fff}
.callout h3{margin-top:0}

details.faq{border-bottom:1px solid var(--gray-200)}
details.faq summary{cursor:pointer;padding:17px 0;font-weight:700;font-size:15.5px;
  list-style:none;display:flex;justify-content:space-between;gap:16px;align-items:flex-start}
details.faq summary::-webkit-details-marker{display:none}
details.faq summary::after{content:"+";color:var(--teal);font-weight:800;font-size:20px;flex-shrink:0}
details.faq[open] summary::after{content:"−"}
details.faq p{font-size:15px;padding:0 0 18px;margin:0}

.sources{background:var(--gray-50);border-radius:var(--radius);padding:22px 24px;margin-top:40px}
.sources h2{border:0;margin:0 0 12px;padding:0;font-size:16px}
.sources ol{margin:0 0 0 20px}
.sources li{font-size:13.5px;margin-bottom:9px;color:var(--gray-700)}

.cta-box{background:var(--navy);color:#fff;border-radius:var(--radius);padding:32px 28px;margin-top:44px;text-align:center}
.cta-box h2{color:#fff;border:0;margin:0 0 12px;padding:0;font-size:20px}
.cta-box p{color:rgba(255,255,255,.82);font-size:15px;margin-bottom:22px}
.cta-box a{display:inline-block;background:var(--accent);color:var(--navy);padding:15px 34px;
  border-radius:var(--radius);font-weight:700;text-decoration:none;font-size:15.5px}

.related{margin-top:40px}
.related h2{font-size:17px}
.related ul{margin-left:20px}
.related a{font-weight:600}

@media(max-width:768px){
  article{padding:20px 20px 56px}
  article h2{margin:36px 0 14px}
  }
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* ---------------------------------------------------------------------------
   Landing page
   ---------------------------------------------------------------------------
   Ported from the static build, where these rules were inlined in index.html.
   Inlining was right for a one-page static site; in WordPress the landing page
   and the articles share a document shell, so one cached stylesheet serves
   both. The static build's base rules (:root, html, body, a, img) are omitted
   here because this file already defines them — two competing :root blocks is
   how a theme starts producing colours nobody chose.

   Found the hard way: the theme shipped with only the article rules, so the
   landing page rendered as unstyled HTML. It looked fine to every structural
   check, because the markup was correct.
   --------------------------------------------------------------------------- */

.skip{position:absolute;left:-9999px;top:0;background:var(--navy);color:#fff;padding:12px 20px;z-index:200}
.skip:focus{left:0}

/* ============================================================================
   Hero — two columns, light ground, portrait on the right.
   Was a dark centred block of text. The service is bought on trust, and the
   page opened with no human being in it. Direction A, approved 2026-09-01.
   The navy is kept on the header and the facts band below, so the brand's
   centre of gravity does not move.
   ========================================================================== */
.hero{padding:0;position:relative;color:var(--gray-900);text-align:left;
  background:linear-gradient(168deg,#f7fafb 0%,#eef4f6 100%)}
.hero-inner{max-width:1180px;margin:0 auto;padding:64px 24px 60px;
  display:grid;grid-template-columns:1.02fr .98fr;gap:52px;align-items:center}
.hero-badge{display:inline-block;background:#e4f1ef;border:1px solid #cfe6e2;
  color:var(--teal-dark);padding:6px 16px;border-radius:20px;font-size:13px;
  margin-bottom:22px;font-weight:500}
.hero h1{font-size:clamp(26px,3.4vw,41px);font-weight:800;line-height:1.42;
  letter-spacing:-.015em;margin:0 0 20px;text-wrap:balance;color:var(--gray-900)}
/* On a light ground amber text drops below 4.5:1. The emphasis moves to the
   teal, with the amber kept as a wash underneath — both brand colours, and the
   contrast holds. */
.hero h1 em{font-style:normal;color:var(--teal-dark);box-shadow:inset 0 -12px 0 #fdeccb}
.hero-sub{font-size:15.5px;line-height:1.95;color:#4a5b6c;max-width:34em;margin:0 0 30px}
.hero-btns{display:flex;gap:12px;justify-content:flex-start;flex-wrap:wrap}

/* min-width:0 is load-bearing, not decoration: a grid child defaults to
   min-content width, so a long unbroken string in the copy would push the
   column wider than its track and scroll the page sideways. */
.hero-copy{min-width:0}
.hero-figure{position:relative;margin:0;min-width:0}
.hero-figure img{display:block;width:100%;height:auto;border-radius:18px;
  background:#e7eef0}
.hero-chip{position:absolute;left:-14px;bottom:58px;display:flex;align-items:center;
  gap:9px;background:#fff;border-radius:12px;padding:11px 16px;
  box-shadow:0 10px 30px rgba(10,22,40,.16);font-size:12.5px;font-weight:700;
  color:var(--gray-900);white-space:nowrap}
.hero-chip .dot{width:8px;height:8px;border-radius:50%;background:var(--teal);flex:none}
.hero-imgnote{margin:10px 0 0;font-size:12px;color:var(--gray-500);text-align:right}
.btn{display:inline-block;padding:15px 34px;border-radius:var(--radius);font-weight:700;font-size:15px;border:none;cursor:pointer;font-family:inherit}
.btn-primary{background:var(--accent);color:var(--navy)}
.btn-primary:hover{filter:brightness(1.07)}
.hero-note{margin:22px 0 0;font-size:13px;color:var(--gray-500)}

.facts{background:var(--navy);color:#fff;padding:0 24px 54px}
.facts-inner{max-width:1000px;margin:0 auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px}
.fact{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:var(--radius);padding:20px 18px;text-align:center}
.fact-k{font-size:16px;font-weight:800;color:var(--ink);margin-bottom:4px}
.fact-v{font-size:13px;color:rgba(255,255,255,.78);line-height:1.7}

section{padding:80px 24px}
.wrap{max-width:1000px;margin:0 auto}
.wrap-narrow{max-width:760px;margin:0 auto}
.eyebrow{text-align:center;color:var(--teal-dark);font-weight:800;font-size:13px;letter-spacing:.1em;margin-bottom:12px}
.section-title{text-align:center;font-size:clamp(21px,3.4vw,30px);font-weight:800;line-height:1.5;margin-bottom:20px}
.lead{text-align:center;color:var(--gray-700);max-width:720px;margin:0 auto 48px;font-size:15.5px}
.alt{background:var(--gray-50)}

.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:22px}
.card{background:#fff;border:1px solid var(--gray-200);border-radius:var(--radius);padding:28px 24px}
.card h3{font-size:16.5px;font-weight:800;margin-bottom:10px;line-height:1.6}
.card p{font-size:14.5px;color:var(--gray-700)}

.note{background:var(--teal-light);border-left:4px solid var(--teal);border-radius:var(--radius);padding:24px 26px;margin:0 auto;max-width:820px}
.note h3{font-size:17px;font-weight:800;margin-bottom:12px}
.note p{font-size:14.5px;color:var(--gray-700);margin-bottom:12px}
.note cite{display:block;font-style:normal;font-size:13px;color:var(--gray-500);border-top:1px solid var(--gray-200);padding-top:12px;margin-top:14px}
.note cite a{color:var(--teal-dark);text-decoration:underline}

.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:20px}
.step{text-align:center}
.step-n{width:40px;height:40px;border-radius:50%;background:var(--teal-dark);color:#fff;font-weight:800;display:flex;align-items:center;justify-content:center;margin:0 auto 14px}
.step h3{font-size:15.5px;font-weight:800;margin-bottom:8px}
.step p{font-size:14px;color:var(--gray-700)}

details.faq{border-bottom:1px solid var(--gray-200);padding:4px 0}
details.faq summary{cursor:pointer;padding:18px 0;font-weight:700;font-size:15.5px;list-style:none;display:flex;justify-content:space-between;gap:16px;align-items:flex-start}
details.faq summary::-webkit-details-marker{display:none}
details.faq summary::after{content:"+";color:var(--teal);font-weight:800;font-size:20px;flex-shrink:0}
details.faq[open] summary::after{content:"−"}
details.faq p{font-size:14.5px;color:var(--gray-700);padding:0 0 20px}

.form-sec{background:var(--gray-50)}
form{max-width:660px;margin:0 auto;background:#fff;border:1px solid var(--gray-200);border-radius:var(--radius);padding:34px 30px}
.fld{margin-bottom:20px}
.fld label{display:block;font-weight:700;font-size:14px;margin-bottom:7px}
.req{color:#dc2626;font-size:12px;margin-left:6px}
.opt{color:var(--gray-500);font-size:12px;margin-left:6px;font-weight:500}
.fld input,.fld select,.fld textarea{width:100%;padding:12px 14px;border:1px solid var(--gray-200);border-radius:6px;font-size:15px;font-family:inherit;background:#fff;color:var(--gray-900)}
.fld textarea{min-height:120px;resize:vertical}
.hint{font-size:12.5px;color:var(--gray-500);margin-top:6px}
.consent{display:flex;gap:10px;align-items:flex-start;font-size:13.5px;color:var(--gray-700);margin-bottom:22px;padding:10px;border:1px solid transparent;border-radius:6px}
.consent input{width:18px;height:18px;flex-shrink:0;margin-top:3px}
.consent a{color:var(--teal-dark);text-decoration:underline}
.consent.bad{border-color:#dc2626;background:#fef2f2}
.consent.bad .err{display:block}
form .btn{width:100%;background:var(--accent);color:var(--navy);font-size:16px}
.err{color:#dc2626;font-size:13px;margin-top:6px;display:none}
.fld.bad input,.fld.bad select,.fld.bad textarea{border-color:#dc2626}
.fld.bad .err{display:block}
.hp{position:absolute;left:-9999px}

.sticky{position:fixed;bottom:0;left:0;right:0;background:#fff;border-top:1px solid var(--gray-200);padding:10px 16px;display:none;z-index:99;box-shadow:0 -2px 12px rgba(0,0,0,.08)}
.sticky .btn{display:block;width:100%;background:var(--accent);color:var(--navy);padding:14px}

@media(max-width:768px){
    section{padding:56px 20px}
    .sticky{display:block}
  form{padding:26px 20px}
    }
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* Language switcher. A crawlable link to the other language, not a JS toggle —
   two URLs with one language each is the point of the split. Styled to match
   the buttons it replaced. */
.lang-switch-link{display:inline-block;padding:8px 14px;border:1px solid var(--gray-200);
  border-radius:6px;font-size:13px;font-weight:700;color:var(--gray-700);
  white-space:nowrap;text-decoration:none;background:#fff}
.lang-switch-link:hover{background:var(--gray-50)}

@media(max-width:768px){
  /* Measured at 27px on the static build, under the 44px minimum tap target. */
  .lang-switch-link{padding:12px 16px;min-height:44px;display:flex;align-items:center}
}

/* ---------------------------------------------------------------------------
   Archive listing, and the odds and ends the templates emit.
   These lived in per-page <style> blocks in the static build; in WordPress
   they are shared, so they belong here. Found by the test that derives class
   names from the templates rather than trusting a hand-written list.
   --------------------------------------------------------------------------- */

.intro{color:var(--gray-700);font-size:15.5px;margin-bottom:34px}

.posts{list-style:none;margin:0;padding:0}
.posts li{border:1px solid var(--gray-200);border-radius:var(--radius);margin-bottom:18px}
.posts a{display:block;padding:24px 26px;text-decoration:none;color:inherit}
.posts a:hover{background:var(--gray-50)}
.posts h2{font-size:18px;font-weight:800;line-height:1.6;margin:0 0 8px;padding:0;border:0;color:var(--teal-dark)}
.posts p{font-size:14.5px;margin:0 0 10px;color:var(--gray-700)}
.posts time{font-size:12.5px;color:var(--gray-500)}

.tag{display:inline-block;background:var(--teal-light);color:var(--teal-dark);
  font-size:12px;font-weight:700;padding:3px 10px;border-radius:12px;margin-right:8px}

/* Shown when the form handler redirects back with an error, so a failed
   submission is never silent — the one thing that must not happen on the only
   conversion path. */
.form-notice{background:#fef2f2;border:1px solid #dc2626;color:#991b1b;
  border-radius:var(--radius);padding:14px 18px;margin-bottom:22px;font-size:14.5px}

.disclaimer{font-size:13px;color:var(--gray-500);margin:12px 0 0}

/* WordPress pagination on the archive. */
.pagination,.nav-links{display:flex;gap:8px;justify-content:center;margin-top:32px;flex-wrap:wrap}
.page-numbers{display:inline-block;padding:9px 15px;border:1px solid var(--gray-200);
  border-radius:6px;text-decoration:none;color:var(--gray-700);font-weight:600;font-size:14px}
.page-numbers.current{background:var(--navy);color:#fff;border-color:var(--navy)}
.page-numbers:hover{background:var(--gray-50)}

/* ---------------------------------------------------------------------------
   Navigation — one definition.
   ---------------------------------------------------------------------------
   The article sheet and the landing sheet each defined .nav, and the merge left
   a white background from one with white brand text from the other: the logo
   was invisible. Defined once here, dark, which reads correctly over both the
   landing page's dark hero and the articles' white body — and needs no
   per-template override.

   sticky rather than fixed: fixed overlaps the WordPress admin bar for logged-in
   editors, and needs hero padding to compensate on every page that has one.
   --------------------------------------------------------------------------- */

/* Header. Quiet by construction: the only strong object in it is the CTA.
   A white border on a paper ground was invisible, which is why the header had
   no baseline at all. */
.nav{position:sticky;top:0;z-index:100;background:rgba(251,249,246,.88);
  backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid var(--line)}
/* Three zones on one baseline: identity, navigation, action. A grid rather
   than space-between so the centre column stays centred as the side columns
   change width. */
.nav-inner{max-width:1160px;margin:0 auto;padding:0 clamp(20px,4vw,40px);
  min-height:72px;display:grid;grid-template-columns:auto 1fr auto;
  align-items:center;column-gap:clamp(20px,3vw,44px)}
/* The wordmark is two words doing different jobs: the company, then the
   product. Tracking the first and weighting the second separates them without
   a second size or a rule between them. */
.nav .brand,.nav a.brand{color:var(--ink);font-weight:700;font-size:15.5px;
  letter-spacing:.055em;line-height:1;text-decoration:none;white-space:nowrap;
  display:inline-flex;align-items:baseline;gap:.42em}
.nav .brand span,.nav a.brand span{color:var(--teal-dark);font-weight:800;
  letter-spacing:-.01em;font-size:16.5px}
.nav-right{display:flex;align-items:center;gap:clamp(14px,1.6vw,22px);
  justify-self:end}

/* The one strong object in the header. Sized to sit inside the row rather than
   define it: 40px, not the 44px tap minimum, because on desktop it is a mouse
   target and the mobile bar carries its own full-size CTA. */
.nav .cta{background:var(--navy);color:#fff;padding:0 20px;border-radius:7px;
  min-height:40px;display:inline-flex;align-items:center;font-weight:700;
  font-size:13.5px;letter-spacing:.02em;text-decoration:none;white-space:nowrap;
  transition:background .16s}
.nav .cta:hover{background:var(--ink)}

/* Secondary, and it should read that way: a text link, not a bordered chip. */
.nav .lang-switch-link{background:transparent;border:0;border-radius:0;padding:0;
  min-height:0;color:var(--ink-mute);font-size:13px;font-weight:600;
  letter-spacing:.02em;white-space:nowrap}
.nav .lang-switch-link:hover{background:transparent;color:var(--teal-dark)}

/* The hero's padding lives on .hero-inner now; this old override would have
   re-added an outer 96px band above a full-bleed light section. */
@media(max-width:768px){
  .nav-inner{padding:12px 18px}
  .nav .brand,.nav a.brand{font-size:15px}
}

/* ---- Hero, narrow ----
   The portrait goes ABOVE the copy on a phone. A face first is the whole point
   of the change; text first would be the page it already was, with a picture
   somewhere below the fold. */
@media(max-width:900px){
  .hero-inner{grid-template-columns:1fr;gap:26px;padding:30px 20px 34px}
  .hero-figure{order:-1}
  .hero h1{font-size:clamp(24px,6.4vw,30px);line-height:1.45}
  .hero-sub{font-size:14px;line-height:1.9;margin-bottom:22px}
  .hero-btns{gap:10px}
  .hero-btns .btn{flex:1 1 auto;text-align:center;padding:15px 18px}
  /* 4:5 is a tall crop on a phone; show the top of the frame so the face
     stays in view without pushing the CTA off-screen. */
  .hero-figure img{aspect-ratio:4/3;object-fit:cover;object-position:50% 22%;border-radius:14px}
  .hero-chip{left:10px;bottom:34px;font-size:12px;padding:9px 13px;
    box-shadow:0 8px 22px rgba(10,22,40,.18)}
  .hero-imgnote{margin-top:8px}
}
@media(max-width:380px){
  .hero-inner{padding:24px 16px 30px}
  .hero-chip{white-space:normal;max-width:calc(100% - 20px)}
}

/* ---------------------------------------------------------------------------
   Link decoration.
   ---------------------------------------------------------------------------
   The article sheet underlines links, which is right in prose — an underlined
   link is the most legible affordance there is, and removing it site-wide to
   make buttons look tidy would be a poor trade. So underlines stay on prose
   and come off the things that are already visibly clickable.
   --------------------------------------------------------------------------- */

.btn,
.cta-box a,
.posts a,
.nav a,
.crumbs a,
.lang-switch-link,
.sticky a{text-decoration:none}

/* Buttons still need a focus affordance once the underline is gone.
   This list must never lose its :focus-visible suffixes: without them the
   outline paints in the resting state, and every button and nav link on the
   site wears a 3px orange ring. That is exactly what happened when the
   declaration block that terminated the list above was deleted by an
   over-greedy cleanup — the selectors fell through into this rule. */
.btn:focus-visible,.cta-box a:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.btn:hover{filter:brightness(1.06)}

/* ---------------------------------------------------------------------------
   Mobile: clear the sticky CTA bar.
   ---------------------------------------------------------------------------
   The bar is position:fixed at the bottom, so without this the last element on
   every page sits underneath it. In the static build this rule lived in the
   base `body{}` declaration, which was deliberately not carried across in the
   merge — and the padding went with it. Restored explicitly, where it belongs.
   --------------------------------------------------------------------------- */
@media(max-width:768px){
  body{padding-bottom:76px}
}

/* ============================================================================
   Site navigation, added when the site stopped being one long landing page.
   The header previously held two anchors into the same document; there was no
   way to reach a service or a category from anywhere.

   The header is dark (--navy), so everything here is light-on-dark. Written
   against the existing bar rather than replacing it, because the bar is
   sticky, carries the brand and the CTA, and is asserted by tests.
   ========================================================================== */

.nav-inner { position: relative; }

/* The centre column of the header grid. Centred in it, not pushed away from
   the wordmark, so the row reads as three deliberate zones. */
.nav-menu {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(16px, 2vw, 30px);
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav-menu > li { position: relative; }
.nav-menu > li > a {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 8px 2px;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--ink-soft);
  text-decoration: none;
  white-space: nowrap;
  position: relative;
  transition: color .16s;
}
/* Hover is a hairline under the word, drawn from the centre. No pill, no
   background swap: the header should not light up under the cursor. */
.nav-menu > li > a::after {
  content: ""; position: absolute; left: 2px; right: 2px; bottom: 2px; height: 1px;
  background: var(--teal-dark); transform: scaleX(0); transform-origin: center;
  transition: transform .18s;
}
.nav-menu > li > a:hover, .has-children:focus-within > a { color: var(--teal-dark); }
.nav-menu > li > a:hover::after, .has-children:focus-within > a::after { transform: scaleX(1); }

.caret {
  width: 0; height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 4px solid currentColor;
  opacity: .6;
}

/* Opens on hover AND on keyboard focus — a menu that only answers a mouse is
   unreachable for anyone tabbing through the page. */
.submenu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  min-width: 248px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: 0 18px 38px -22px rgba(20,26,33,.35);
  padding: 6px;
  margin: 0;
  list-style: none;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity .15s, transform .15s, visibility .15s;
  z-index: 120;
}
.has-children:hover .submenu,
.has-children:focus-within .submenu,
/* The adjacent-sibling form as well as :focus-within. The submenu's links are
   in the tab order whether or not the panel is visible, so a keyboard user
   whose focus lands in an invisible menu is worse off than one who cannot
   reach it at all — this must not depend on a single selector behaving. */
.has-children > a:focus + .submenu,
.submenu:focus-within {
  opacity: 1; visibility: visible; transform: translateY(0);
}
.has-children > a:focus,
.has-children:focus-within > a { color: var(--teal-dark); }
.has-children > a:focus::after,
.has-children:focus-within > a::after { transform: scaleX(1); }
.submenu a {
  display: block;
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 14px;
  color: #1f2937;
  text-decoration: none;
}
.submenu a:hover { background: var(--gray-100); color: #0f3d63; }

.menu-toggle-input { position: absolute; opacity: 0; pointer-events: none; }
.menu-toggle { display: none; }
.nav-cta-mobile { display: none; }

@media (max-width: 980px) {
  .nav-menu {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin: 0;
    padding: 8px;
    background: var(--paper);
    border-top: 1px solid var(--line);
    box-shadow: 0 18px 34px -20px rgba(20,26,33,.28);
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transition: max-height .25s ease, opacity .2s;
  }
  .menu-toggle-input:checked ~ .nav-menu {
    max-height: 80vh;
    overflow-y: auto;
    opacity: 1;
    visibility: visible;
  }
  .menu-toggle {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 44px;              /* 44px: the smallest reliably hittable target */
    height: 44px;
    padding: 11px 10px;
    cursor: pointer;
    order: 3;
  }
  .menu-toggle span {
    display: block;
    height: 2px;
    background: #fff;
    border-radius: 2px;
    transition: transform .2s, opacity .2s;
  }
  .menu-toggle-input:checked ~ .menu-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .menu-toggle-input:checked ~ .menu-toggle span:nth-child(2) { opacity: 0; }
  .menu-toggle-input:checked ~ .menu-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  .nav-menu > li > a { padding: 13px 12px; font-size: 15px; }
  .submenu {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    background: transparent;
    box-shadow: none;
    border: 0;
    border-left: 2px solid rgba(255,255,255,.22);
    border-radius: 0;
    margin: 0 0 6px 14px;
    padding: 0 0 0 6px;
    min-width: 0;
  }
  .submenu a { padding: 12px; font-size: 14px; color: var(--ink-soft); }
  .submenu a:hover { background: var(--sand); color: var(--teal-dark); }
  .caret { display: none; }
  .nav-cta-mobile { display: block; margin-top: 6px; }
  .nav-cta-mobile .cta { display: block; text-align: center; }
  .nav-right .lang-switch-link { display: none; }

  /* At 360px the bar could not fit brand + CTA + hamburger: the toggle's right
     edge landed at 365.3px and the whole document scrolled sideways by 5px on
     every page. Shrinking the brand and the padding fixes it without dropping
     the header CTA — service pages have no sticky bar, so that button is the
     only persistent way to reach the form on a phone. */
  .nav-inner { padding: 12px 14px; gap: 10px; }
  .nav .brand, .nav a.brand { font-size: 15px; min-width: 0; }
  .nav .cta { padding: 9px 14px; font-size: 13px; }
}

/* ---- Footer columns ---- */

@media (max-width: 700px) {
  }

/* ============================================================================
   Service and information pages
   ========================================================================== */

.page-hero {
  background: linear-gradient(180deg, var(--gray-50) 0%, #fff 100%);
  border-bottom: 1px solid #eef2f7;
  padding: 40px 0 44px;
}
.page-hero .wrap {
  max-width: 860px;
  text-align: left;
}
/* The landing page centres .eyebrow and .lead by element, so setting the
   container to left had no effect — the H1 went left and the eyebrow and lead
   stayed centred, which reads as a mistake rather than a style. Overriding the
   elements themselves is what the earlier container rule was supposed to do. */
.page-hero .eyebrow,
.page-hero .lead,
.page-hero .section-title { text-align: left; }
.page-hero .eyebrow {
  font-size: 12px; font-weight: 700; letter-spacing: .08em;
  color: #0f3d63; text-transform: uppercase; margin: 0 0 10px;
}
.page-hero h1 { font-size: clamp(26px, 4vw, 38px); line-height: 1.35; margin: 0 0 14px; }
.page-hero .lead { font-size: 16px; line-height: 1.9; color: #475569; margin: 0; }

.page-body { max-width: 860px; margin: 0 auto; padding: 44px 20px 8px; }
.page-body h2 {
  font-size: clamp(20px, 2.6vw, 25px);
  line-height: 1.5;
  margin: 44px 0 16px;
  padding-top: 18px;
  border-top: 1px solid #eef2f7;
}
.page-body h2:first-child { margin-top: 0; border-top: 0; padding-top: 0; }
.page-body h3 { font-size: 17px; margin: 26px 0 10px; }
.page-body p { line-height: 1.95; color: var(--gray-700); margin: 0 0 16px; }
.page-body ul, .page-body ol { line-height: 1.95; color: var(--gray-700); padding-left: 1.3em; }
.page-body li { margin-bottom: 8px; }

/* ---- Cards linking onward: service -> service, service -> article ---- */
.link-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
  margin: 22px 0 8px;
}
.link-card {
  display: block;
  padding: 20px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  text-decoration: none;
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.link-card:hover {
  border-color: #0f3d63;
  box-shadow: 0 10px 26px rgba(15, 61, 99, .10);
  transform: translateY(-2px);
}
.link-card .lc-title { font-size: 16px; font-weight: 700; color: #0f3d63; margin: 0 0 8px; }
.link-card .lc-desc { font-size: 13.5px; line-height: 1.8; color: var(--gray-500); margin: 0; }
.link-card .lc-meta { font-size: 12px; color: var(--gray-500); margin: 0 0 6px; }

.section-band { background: var(--gray-50); border-block: 1px solid #eef2f7; padding: 40px 0; margin: 48px 0; }
.section-band .wrap { max-width: 860px; }
.section-band h2 { margin-top: 0; border-top: 0; padding-top: 0; }

/* ---- Blog hub ---- */
.hub-cats {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 30px;
}
.hub-cats a {
  display: inline-block;
  padding: 8px 15px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink-soft);
  text-decoration: none;
  transition: border-color .15s, background .15s, color .15s;
}
.hub-cats a:hover, .hub-cats a[aria-current="page"] {
  border-color: var(--navy); background: var(--navy); color: #fff;
}
.hub-cats .count { opacity: .6; font-weight: 500; }

@media (max-width: 700px) {
  .page-body { padding: 32px 18px 4px; }
  .page-hero { padding: 28px 0 32px; }
  .section-band { padding: 30px 0; margin: 34px 0; }
  .link-cards { grid-template-columns: 1fr; }
  .hub-cats a { padding: 9px 14px; }   /* keeps the tap target above 40px tall */
}

/* ---- The audience fork on the homepage ---- */
.aud-card {
  display: block;
  padding: 30px 28px;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  background: #fff;
  text-decoration: none;
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.aud-card:hover {
  border-color: #0f3d63;
  box-shadow: 0 14px 34px rgba(15, 61, 99, .12);
  transform: translateY(-2px);
}
.aud-kicker {
  display: inline-block;
  margin: 0 0 12px;
  padding: 5px 12px;
  border-radius: 999px;
  background: #eef4f9;
  color: #0f3d63;
  font-size: 12.5px;
  font-weight: 700;
}
.aud-title { margin: 0 0 12px; font-size: 21px; font-weight: 800; line-height: 1.5; color: var(--gray-900); }
.aud-desc { margin: 0 0 18px; font-size: 14px; line-height: 1.9; color: #475569; }
.aud-go { font-size: 14px; font-weight: 700; color: var(--teal-dark); }

@media (max-width: 780px) {
  .aud-grid { grid-template-columns: 1fr; gap: 14px; }
  .aud-card { padding: 24px 20px; }
  .aud-title { font-size: 19px; }
  .aud-title br { display: none; }
}

/* Structured explanation blocks — shared standard rules 4-6.
   All of it is plain semantic HTML in post content: a div, a list, a table.
   Nothing needs JavaScript, so nothing can be stopped by the WAF at save time,
   and the styling lives here where post content cannot break it.

   These exist for a specific reader: someone who is having a bad week and
   cannot read three thousand characters of Japanese to find out what to do.
   They are structure, not decoration. */

.uw-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));
  gap:14px;margin:0 0 26px}
.uw-card{border:1px solid var(--gray-200);border-radius:var(--radius);
  padding:17px 18px 15px;background:#fff}
.uw-card h3{margin:0 0 7px;font-size:15px;line-height:1.55;color:var(--gray-900)}
.uw-card p{margin:0;font-size:14px;line-height:1.85;color:var(--gray-700)}

.uw-flow,.uw-decision,.uw-check,.uw-next,.uw-situation{
  border:1px solid var(--gray-200);border-radius:var(--radius);
  padding:20px 22px;margin:0 0 26px;background:#fff}
.uw-flow h3,.uw-decision h3,.uw-check h3,.uw-next h3,.uw-situation h3{
  margin:0 0 14px;font-size:15px;line-height:1.5;color:var(--gray-900)}

.uw-flow ol,.uw-next ol{list-style:none;margin:0;counter-reset:uwstep}
.uw-flow li,.uw-next li{counter-increment:uwstep;position:relative;
  padding:0 0 16px 40px;margin:0;font-size:14.5px;line-height:1.85;color:var(--gray-700)}
.uw-flow li::before,.uw-next li::before{content:counter(uwstep);
  position:absolute;left:0;top:2px;width:26px;height:26px;border-radius:50%;
  background:var(--teal-dark);color:#fff;font-size:13px;font-weight:800;
  display:flex;align-items:center;justify-content:center}
.uw-flow li:not(:last-child)::after,.uw-next li:not(:last-child)::after{
  content:"";position:absolute;left:13px;top:30px;bottom:6px;width:1px;
  background:var(--gray-200)}
.uw-flow li:last-child,.uw-next li:last-child{padding-bottom:0}
.uw-flow b,.uw-next b,.uw-decision b,.uw-check b{color:var(--gray-900);font-weight:700}

.uw-next{border-color:#cfe6e2;background:var(--teal-light)}
.uw-next li::before{background:var(--teal-dark)}

.uw-check ul,.uw-decision ul,.uw-situation ul{list-style:none;margin:0}
.uw-check li{position:relative;padding:0 0 12px 28px;font-size:14.5px;
  line-height:1.85;color:var(--gray-700)}
.uw-check li::before{content:"✓";position:absolute;left:0;top:0;
  color:var(--teal-dark);font-weight:800}
.uw-check li.no::before{content:"×";color:#b91c1c}
/* The ✓/× marks are CSS content, so a screen reader hears an undifferentiated
   list — "書くこと" and "書いてはいけないこと" sound identical. The meaning has
   to be in text as well as in the mark. */
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap;border:0}
.uw-check li:last-child{padding-bottom:0}

.uw-decision li,.uw-situation li{padding:0 0 14px 0;font-size:14.5px;
  line-height:1.85;color:var(--gray-700)}
.uw-decision li:last-child,.uw-situation li:last-child{padding-bottom:0}
.uw-decision li+li,.uw-situation li+li{border-top:1px solid var(--gray-200);
  padding-top:14px}
.uw-decision .then{display:block;margin-top:5px;color:var(--gray-900);
  font-weight:700;font-size:14px}
.uw-decision .then::before{content:"→ ";color:var(--teal-dark)}
.uw-situation .lbl{display:block;font-size:12.5px;font-weight:700;
  color:var(--teal-dark);margin-bottom:3px;letter-spacing:.02em}

@media(max-width:600px){
  .uw-flow,.uw-decision,.uw-check,.uw-next,.uw-situation{padding:17px 16px}
  .uw-card{padding:15px 16px 13px}
}

/* ============================================================================
   DESIGN v2 — 2026-09-01.
   Reworked against the quality bar set by us.unitedworld.jp, not copied from
   it: that site is dark and editorial for a recruiting audience. This one has
   to read premium and calm to an HR manager AND not read cold to someone who
   is having a bad week, so the ground is warm paper rather than clinical white.

   Appended as overrides on purpose. Every rule above still applies where it is
   not restated here, so nothing that already passed the contrast, type-floor
   or overflow checks silently loses its value.
   ========================================================================= */

body{background:var(--paper);color:var(--ink-soft)}
.wrap{max-width:1200px}
.wrap-narrow{max-width:920px}
section{padding:var(--rhythm) 0}
section.alt{background:var(--sand)}

/* Hierarchy. The old scale ran H1 41 / H2 30 against 15.5 body — a 1.9x jump
   that reads flat. The gap is what makes a page look composed. */
.hero h1{font-size:var(--h1);line-height:1.18;letter-spacing:-.032em;color:var(--ink)}
.hero h1 em{color:var(--teal-dark);box-shadow:none}
.section-title{font-size:var(--h2);line-height:1.32;letter-spacing:-.022em;
  color:var(--ink);text-align:left;margin:0}
.eyebrow{font-size:12px;font-weight:700;letter-spacing:.16em;color:var(--teal-dark);
  text-align:left;margin:0 0 14px}
.lead{font-size:var(--lead);line-height:1.95;color:var(--ink-mute);
  max-width:var(--measure);text-align:left;margin:0}

/* Asymmetric section header: eyebrow + large left headline, supporting copy in
   a second column. Centring every heading is what flattened the old page. */
.shead{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);
  gap:clamp(24px,5vw,72px);align-items:end;margin-bottom:clamp(36px,5vw,64px)}
.shead .lead{padding-bottom:6px}

/* Hero */
.hero{background:transparent;position:relative;padding:clamp(40px,5vw,74px) 0 0;overflow:hidden}
.hero::before{content:"";position:absolute;inset:0 0 auto;height:74%;z-index:0;
  background:radial-gradient(120% 90% at 78% 8%,#EFF7F5 0%,rgba(239,247,245,0) 62%)}
.hero-inner{position:relative;z-index:1;max-width:1200px;
  grid-template-columns:minmax(0,1.02fr) minmax(0,.86fr);
  gap:clamp(28px,5vw,72px);padding:0 clamp(20px,4vw,40px)}
.hero-badge{background:#E8F4F1;border-color:#D3E9E4;color:var(--teal-dark);
  font-size:12px;letter-spacing:.1em;padding:7px 15px;margin-bottom:24px}
.hero-sub{font-size:var(--lead);color:var(--ink-soft);max-width:31em;margin-bottom:32px}
.hero-btns{align-items:center;gap:22px}
.hero-note{color:var(--ink-mute);margin-top:26px}
.hero-figure img{aspect-ratio:4/5;object-fit:cover;object-position:50% 18%;
  border-radius:14px;box-shadow:0 30px 70px -34px rgba(20,26,33,.42)}
.hero-chip{left:-18px;bottom:54px;border-color:var(--line);color:var(--ink);
  box-shadow:0 14px 34px -18px rgba(20,26,33,.4)}
.hero-imgnote{color:var(--ink-mute)}

/* CTA hierarchy: one solid button per view, everything else a text link. */
.btn{min-height:52px;border-radius:10px;font-size:15.5px}
.btn-primary{box-shadow:0 1px 2px rgba(20,26,33,.14),0 8px 22px -10px rgba(245,158,11,.55)}
.hero .btn-ghost,.btn-ghost{background:transparent;border:1px solid var(--line);color:var(--ink)}
.tlink{display:inline-flex;align-items:center;gap:7px;min-height:44px;
  font-size:14.5px;font-weight:700;color:var(--teal-dark);text-decoration:none}
.tlink::after{content:"→";transition:transform .18s}
.tlink:hover::after{transform:translateX(3px)}

/* The stats band was a dark slab under the hero. Quiet typographic row instead. */
.facts{background:transparent;border-top:1px solid var(--line);
  margin-top:clamp(40px,5vw,72px);padding:0;color:var(--ink-soft)}
.facts-inner{max-width:1200px;padding:22px clamp(20px,4vw,40px);
  grid-template-columns:repeat(4,1fr);gap:22px}
.fact-k{font-size:14px;font-weight:700;color:var(--ink);margin-bottom:2px}
.fact-v{font-size:13.5px;color:var(--ink-mute);line-height:1.7}

/* Editorial numbered list — replaces three emoji cards. */
.enum{max-width:880px;margin:0}
.enum li{list-style:none;display:grid;grid-template-columns:76px minmax(0,1fr);
  gap:clamp(12px,2vw,28px);padding:30px 0;border-top:1px solid var(--line);margin:0}
.enum li:last-child{border-bottom:1px solid var(--line)}
.enum .n{font-size:15px;font-weight:800;color:var(--teal-dark);letter-spacing:.1em;padding-top:3px}
.enum h3{font-size:17px;line-height:1.6;color:var(--ink);margin:0 0 8px}
.enum p{font-size:15px;line-height:1.95;color:var(--ink-soft);max-width:var(--measure);margin:0}

/* Typographic index — replaces six emoji cards. */
.tindex{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  column-gap:clamp(32px,6vw,88px)}
.tindex > div{padding:22px 0;border-top:1px solid var(--line)}
.tindex h3{font-size:17px;line-height:1.6;color:var(--ink);margin:0 0 6px}
.tindex p{font-size:14.5px;line-height:1.85;color:var(--ink-mute);margin:0}

/* Comparison — replaces the ✅ / 🔒 pair. */
.cmp{width:100%;border-collapse:collapse;font-size:15px;background:#fff;
  border:1px solid var(--line);border-radius:10px;overflow:hidden;min-width:420px}
.cmp th,.cmp td{padding:16px 20px;text-align:left;vertical-align:top;
  border-bottom:1px solid var(--line);border-right:0;border-left:0;border-top:0}
.cmp thead th{background:var(--sand);font-size:13.5px;font-weight:700;color:var(--ink)}
.cmp tbody th{font-weight:700;color:var(--ink);width:38%}
.cmp td{color:var(--ink-soft);line-height:1.85}
.cmp tbody tr:last-child th,.cmp tbody tr:last-child td{border-bottom:0}

/* Steps */
.steps{display:block;counter-reset:s;max-width:820px;grid-template-columns:none}
.steps .step{list-style:none;counter-increment:s;position:relative;
  padding:0 0 26px 52px;text-align:left;background:transparent;border:0}
.steps .step::before{content:counter(s);position:absolute;left:0;top:0;width:30px;height:30px;
  border-radius:50%;background:#fff;border:1px solid var(--line);color:var(--teal-dark);
  font-size:13px;font-weight:800;display:flex;align-items:center;justify-content:center}
.steps .step:not(:last-child)::after{content:"";position:absolute;left:15px;top:34px;
  bottom:4px;width:1px;background:var(--line)}
.steps .step h3{font-size:17px;color:var(--ink);margin:0 0 4px}
.steps .step p{font-size:14.5px;color:var(--ink-mute);line-height:1.85;margin:0}

/* Article rail */
.link-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(20px,3vw,40px)}
.link-card{display:block;text-decoration:none;background:transparent;border:0;
  border-radius:0;box-shadow:none;padding:20px 0 0;border-top:2px solid var(--ink)}
.link-card:hover{background:transparent}
.link-card .lc-meta{font-size:12px;font-weight:700;letter-spacing:.14em;
  color:var(--teal-dark);margin:0 0 9px}
.link-card .lc-title{font-size:16px;font-weight:800;line-height:1.6;
  letter-spacing:-.01em;color:var(--ink);margin:0 0 8px}
.link-card .lc-desc{font-size:14px;line-height:1.8;color:var(--ink-mute);margin:0}

/* Audience fork: two editorial blocks sharing one frame, not two cards. */
.aud-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0;
  background:#fff;border:1px solid var(--line);border-radius:10px;overflow:hidden}
.aud-card{display:block;text-decoration:none;background:transparent;border:0;
  border-radius:0;box-shadow:none;padding:clamp(28px,3.4vw,44px) clamp(24px,3vw,48px)}
.aud-card + .aud-card{border-left:1px solid var(--sand-deep)}
.aud-card:hover{background:var(--sand)}
.aud-kicker{font-size:12px;font-weight:700;letter-spacing:.16em;color:var(--teal-dark);margin:0 0 10px}
.aud-title{font-size:clamp(19px,2vw,24px);font-weight:800;line-height:1.45;
  letter-spacing:-.02em;color:var(--ink);margin:0 0 12px}
.aud-desc{font-size:15px;line-height:1.95;color:var(--ink-soft);max-width:26em;margin:0 0 18px}
.aud-go{display:inline-flex;align-items:center;min-height:44px;font-size:14.5px;
  font-weight:700;color:var(--teal-dark)}

/* Note block */
.note{background:#fff;border:1px solid var(--line);border-left:3px solid var(--teal-dark);
  border-radius:10px;max-width:none}
.note h3{font-size:17px;color:var(--ink)}

/* Header */
.nav{background:rgba(251,249,246,.9);backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid var(--line);box-shadow:none}
.nav-inner{max-width:1200px}
.nav .cta{background:var(--navy);color:#fff}
.nav .cta:hover{background:var(--ink)}
.menu-toggle span{background:var(--ink)}
.submenu{background:#fff;border-color:var(--line)}
.submenu a{color:var(--ink-soft)}
.caret{border-top-color:currentColor}

/* Compact footer — see footer.php. */
footer{background:var(--paper);color:var(--ink-soft);border-top:1px solid var(--line);
  padding:clamp(40px,4vw,56px) 0 26px}
.foot-inner{max-width:1200px;padding:0 clamp(20px,4vw,40px)}
.foot-top{display:grid;grid-template-columns:minmax(0,1.25fr) repeat(2,minmax(0,1fr));
  gap:clamp(24px,4vw,56px);padding-bottom:30px}
.foot-brand strong{display:block;font-size:15.5px;font-weight:800;color:var(--ink);
  letter-spacing:-.01em;margin-bottom:10px}
.foot-brand p{font-size:13.5px;line-height:1.85;color:var(--ink-mute);max-width:26em;margin:0 0 10px}
.foot-brand a{color:var(--teal-dark);font-size:13.5px;font-weight:600;text-decoration:none}
.foot-col h2{font-size:12px;font-weight:700;letter-spacing:.14em;color:var(--ink);
  margin:0 0 12px;border:0;padding:0}
.foot-col ul{list-style:none;margin:0}
.foot-col li{margin:0}
.foot-col a{display:inline-flex;align-items:center;min-height:38px;
  font-size:13.5px;color:var(--ink-soft);text-decoration:none}
.foot-col a:hover{color:var(--teal-dark)}
.foot-bot{border-top:1px solid var(--line);padding-top:18px;margin-top:0;
  display:flex;flex-wrap:wrap;gap:10px 22px;align-items:center;
  font-size:12.5px;color:var(--ink-mute)}
.foot-bot a{color:var(--ink-mute);text-decoration:none;display:inline-flex;
  align-items:center;min-height:38px}

/* Sticky mobile CTA */
.sticky{background:rgba(251,249,246,.96);border-top:1px solid var(--line)}

@media(max-width:900px){
  .shead{grid-template-columns:1fr;gap:16px;align-items:start}
  .hero-inner{grid-template-columns:1fr;gap:26px}
  .hero-figure img{aspect-ratio:4/3;object-position:50% 20%}
  .hero-chip{left:12px;bottom:16px}
  .facts-inner{grid-template-columns:repeat(2,1fr);gap:16px}
  .tindex{grid-template-columns:1fr}
  .link-cards{grid-template-columns:1fr;gap:0}
  .link-card{padding:20px 0;border-top:1px solid var(--line)}
  .link-card:first-child{border-top:2px solid var(--ink)}
  .aud-grid{grid-template-columns:1fr}
  .aud-card + .aud-card{border-left:0;border-top:1px solid var(--sand-deep)}
  .enum li{grid-template-columns:1fr;gap:6px;padding:24px 0}
  .enum .n{padding-top:0}
  .foot-top{grid-template-columns:1fr 1fr;gap:26px}
  .foot-brand{grid-column:1 / -1}
}
@media(max-width:600px){
  .cmp-wrap,.tbl-wrap{overflow-x:auto}
}

/* Sub-pages and articles inherit the same ground and scale, so a reader moving
   from the homepage to /service/ or an article does not cross a visual seam. */
.page-hero{background:transparent;border-bottom:1px solid var(--line);
  padding:clamp(46px,5vw,84px) 0 clamp(30px,3vw,44px)}
.page-hero .wrap{max-width:1200px}
.page-hero .eyebrow{margin-bottom:14px}
.page-hero h1{font-size:clamp(28px,3.4vw,44px);line-height:1.28;letter-spacing:-.028em;
  color:var(--ink);max-width:19em}
.page-hero .lead{font-size:var(--lead);color:var(--ink-soft);max-width:var(--measure);margin-top:18px}
.section-band{background:var(--sand);padding:clamp(48px,5vw,80px) 0}
.section-band h2{font-size:var(--h2);line-height:1.32;letter-spacing:-.022em;color:var(--ink)}
article h1{color:var(--ink);letter-spacing:-.028em;line-height:1.3}
article h2{color:var(--ink);border-top-color:var(--line);letter-spacing:-.02em}
article h3{color:var(--ink)}
article p,article li{color:var(--ink-soft)}
.meta{color:var(--ink-mute);border-bottom-color:var(--line)}
.crumbs,.crumbs a{color:var(--ink-mute)}
.answer{background:#fff;border-left-color:var(--teal-dark);border:1px solid var(--line);
  border-left:3px solid var(--teal-dark)}
.sources{background:var(--sand)}
blockquote{background:#fff;border:1px solid var(--line);border-left:3px solid var(--gray-400)}
table{border-color:var(--line)}
th,td{border-color:var(--line)}
th{background:var(--sand)}
.callout{border-color:var(--line)}
details.faq{border-bottom-color:var(--line)}
details.faq summary{color:var(--ink)}
details.faq summary::after{color:var(--teal-dark)}
.posts li{border-color:var(--line)}
.posts a:hover{background:var(--sand)}
.posts h2{color:var(--ink)}
.uw-card,.uw-flow,.uw-decision,.uw-check,.uw-next,.uw-situation{border-color:var(--line)}
.uw-next{background:var(--teal-light);border-color:#cfe6e2}
.pricing-note{margin-top:clamp(40px,4vw,64px);padding-top:clamp(28px,3vw,40px);
  border-top:1px solid var(--sand-deep);max-width:var(--measure)}
.pricing-note h3{font-size:17px;color:var(--ink);margin:0 0 8px}
.pricing-note p{font-size:15px;line-height:1.95;color:var(--ink-soft);margin:0 0 8px}
/* The regulatory note now sits inside the services section rather than owning
   a band of its own. It needs a rule above it, not a background. */
.reg{margin-top:clamp(46px,5vw,76px);padding-top:clamp(32px,3vw,44px);
  border-top:1px solid var(--sand-deep)}

/* --------------------------------------------------------------------------
   Desktop balance, 2026-09-01. Reported from a real 1440 window: a large empty
   band between the header and 「課題から探す」, and the three service links
   spread so far apart they stopped reading as a set.

   The empty band was a markup bug (the audience block closed a wrapper it had
   not opened, so everything after it escaped .wrap and rendered at full
   viewport width). These rules fix the second half: the spacing that was
   generous at 1200px and merely empty at 1440.
   -------------------------------------------------------------------------- */

/* A measured column. Above ~1240 the extra width was going into the gutter
   rather than into the reading experience. */
.wrap{max-width:1160px}
.hero-inner{max-width:1160px}
.facts-inner{max-width:1160px}
.foot-inner{max-width:1160px}
.nav-inner{max-width:1160px}
.page-hero .wrap{max-width:1160px}

/* Section headers: the lead sat on the far side of a 72px gutter from the
   headline it belongs to. Grouping beats separation here. */
.shead{gap:clamp(20px,3vw,48px);margin-bottom:clamp(28px,3.2vw,44px);
  grid-template-columns:minmax(0,1.25fr) minmax(0,1fr)}

/* Service links: 5 items in a 3-track grid at full width left them adrift.
   Constrained, tighter, and each given a light frame so it reads as one object
   — one level of framing, never a card inside a card. */
.link-cards{grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:16px;max-width:1160px}
.link-card{border:1px solid var(--line);border-top:1px solid var(--line);
  border-radius:10px;background:#fff;padding:22px 24px}
.link-card:hover{background:var(--sand);border-color:var(--sand-deep)}
.link-card .lc-title{margin-bottom:6px}

/* The article rail keeps the editorial rule-on-top treatment: three items,
   equal width, and they are the one place a heavier top border earns its keep. */
section:not(.alt) > .wrap > .link-cards .link-card{border:0;border-top:2px solid var(--ink);
  border-radius:0;background:transparent;padding:18px 0 0}
section:not(.alt) > .wrap > .link-cards .link-card:hover{background:transparent}

/* The two blocks inside the audience section are one idea; 76px between them
   was reading as a section break. */
.aud-then-hub{margin-top:clamp(34px,3.4vw,52px)}

/* The hero column ratio put the portrait on a narrower track than the copy at
   1440, which made the figure look shrunken beside a 53px headline. */
@media(min-width:901px){
  .hero-inner{grid-template-columns:minmax(0,1fr) minmax(0,.82fr);
    gap:clamp(28px,4vw,60px)}
  .hero{padding-top:clamp(36px,3.6vw,58px)}
}

/* The hub's header is emitted by architecture.php as three siblings, not as a
   .shead pair, so it needs its own rhythm rather than a bare stack. */
.aud-then-hub .eyebrow{margin-bottom:12px}
.aud-then-hub .section-title{margin-bottom:14px;max-width:22em}
.aud-then-hub .lead{margin-bottom:clamp(24px,2.6vw,36px);max-width:var(--measure)}

/* The proof row: four short pairs were stretched across the full measure, so
   each sat alone in a wide column and the second line wrapped mid-phrase. */
/* Four short pairs. A wide gap gave each one a column too narrow for its own
   second line, so 「…ご契約時に書面で」 broke after 書. Less gap, more column. */
.facts-inner{grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;
  padding-top:26px;padding-bottom:26px}
.fact{max-width:none}
.fact-v{text-wrap:pretty}

/* The header CTA is 40px on desktop, where it is a mouse target sitting inside
   a 72px row. On a phone it is a thumb target and the tap minimum applies. */
@media(max-width:900px){
  .nav-inner{grid-template-columns:auto 1fr auto;min-height:64px;
    column-gap:12px}
  .nav .cta{min-height:44px;font-size:13.5px;padding:0 16px}
  .nav-right{gap:10px}
  .nav-right .lang-switch-link{display:none}
  .nav .brand,.nav a.brand{font-size:14px;letter-spacing:.04em}
  .nav .brand span,.nav a.brand span{font-size:15px}
}
/* At 360 the wordmark and the CTA end up 12px apart. Enough, but without
   margin for a longer label later. */
@media(max-width:400px){
  .nav .brand,.nav a.brand{font-size:13px;letter-spacing:.03em;gap:.34em}
  .nav .brand span,.nav a.brand span{font-size:14px}
  .nav .cta{padding:0 14px;font-size:13px}
}

/* ---------------------------------------------------------------------------
   FIGURES — charts, diagrams and the article banner.       Added 2026-09-05.

   Bars are HTML and CSS on purpose. An SVG that scales scales its type with
   it, and at 360px a 12px label inside a 640-unit viewBox renders at 5.7px.
   Real text wraps, respects the 12px floor, and can be selected and read.

   The two SVG kinds cannot avoid a viewBox, so they get the same treatment
   `table { min-width: 480px }` already has: a scrolling container and a
   minimum width. 480/640 = 0.75, so 16px in the viewBox lands at exactly 12px.
   figures.py::MIN_TEXT_UNITS is that arithmetic and visual_gate.py checks it.
   --------------------------------------------------------------------------- */

.uw-figure{margin:34px 0;padding:0;border:1px solid var(--line);border-radius:var(--radius);
  background:var(--paper);overflow:hidden}
.uw-figure figcaption{display:block;padding:13px 18px 15px;border-top:1px solid var(--line);
  background:var(--sand);font-size:13px;line-height:1.7}
.uw-figure-title{display:block;font-weight:700;color:var(--ink);font-size:14px;margin-bottom:3px}
.uw-figure-src{display:block;color:var(--ink-mute);font-size:12px}
.uw-figure-src a{color:var(--teal-dark)}

/* horizontal bars ---------------------------------------------------------- */
.uw-chart{padding:22px 20px}
.uw-bar-row{display:grid;grid-template-columns:minmax(0,15em) 1fr auto;align-items:center;
  gap:12px;margin-bottom:11px}
.uw-bar-row:last-child{margin-bottom:0}
.uw-bar-label{font-size:13px;line-height:1.5;color:var(--ink-soft)}
.uw-bar-track{background:var(--sand-deep);border-radius:4px;height:19px;overflow:hidden}
.uw-bar-fill{display:block;height:100%;background:var(--teal);border-radius:4px}
.uw-bar-value{font-size:13px;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}
.uw-bar-fill--emph{background:var(--teal-dark)}
.uw-bar-label--emph{color:var(--ink);font-weight:700}

/* one 100% bar ------------------------------------------------------------- */
.uw-ratio-track{display:flex;height:30px;border-radius:5px;overflow:hidden;background:var(--sand-deep)}
.uw-seg{display:block;height:100%}
.uw-seg--1{background:var(--teal-dark)}.uw-seg--2{background:var(--teal)}
.uw-seg--3{background:#5eb5ab}.uw-seg--4{background:var(--sand-deep)}
.uw-seg--5{background:var(--gray-400)}.uw-seg--6{background:var(--gray-200)}
.uw-ratio-keys{display:flex;flex-wrap:wrap;gap:8px 20px;margin:15px 0 0;padding:0;list-style:none}
.uw-seg-key{display:flex;align-items:center;gap:7px;font-size:13px;color:var(--ink-soft)}
.uw-seg-swatch{width:12px;height:12px;border-radius:3px;background:currentColor;flex:0 0 auto}
.uw-seg-key.uw-seg--1 .uw-seg-swatch{background:var(--teal-dark)}
.uw-seg-key.uw-seg--2 .uw-seg-swatch{background:var(--teal)}
.uw-seg-key.uw-seg--3 .uw-seg-swatch{background:#5eb5ab}
.uw-seg-key.uw-seg--4 .uw-seg-swatch{background:var(--sand-deep)}
.uw-seg-key.uw-seg--5 .uw-seg-swatch{background:var(--gray-400)}
.uw-seg-key.uw-seg--6 .uw-seg-swatch{background:var(--gray-200)}

/* the two SVG kinds -------------------------------------------------------- */
/* The chart's numbers, for a screen reader. `.sr` is on the wrapper, not on
   the table: `.sr` hides a box by shrinking it to 1px and clipping, and a
   <table> does not shrink — the site-wide `table { min-width: 480px }` and the
   table's own min-content width both win. The hidden table therefore kept a
   480px layout box and pushed the page 144px sideways at 360px, invisible on
   every desktop. Caught by measuring the real page in a 360px viewport, which
   is the check that exists for exactly this. */
.uw-figure-data-wrap{max-width:1px}
.uw-figure-data{min-width:0}

.uw-figure-scroll{overflow-x:auto;padding:18px 16px}
.uw-svg{display:block;min-width:480px}
.uw-svg text{font-family:inherit}
.uw-axis{font-size:16px;fill:var(--ink-mute)}
.uw-grid{stroke:var(--line);stroke-width:1.5}
.uw-area{fill:var(--teal);opacity:.10}
.uw-line{fill:none;stroke:var(--teal-dark);stroke-width:3.5;stroke-linejoin:round;stroke-linecap:round}
.uw-line--b{stroke:var(--gray-400);stroke-dasharray:8 6}
.uw-dot{fill:var(--teal-dark)}
.uw-dot--b{fill:var(--gray-400)}
.uw-key--a{fill:var(--teal-dark)}.uw-key--b{fill:var(--gray-400)}

/* flow ---------------------------------------------------------------------- */
.uw-node{fill:var(--paper);stroke:var(--line);stroke-width:1.5}
.uw-num-bg{fill:var(--teal)}
.uw-num{font-size:17px;font-weight:700;fill:#fff}
.uw-node-text{font-size:18px;fill:var(--ink)}
.uw-node-meta{font-size:16px;fill:var(--ink-mute)}
.uw-arrow{stroke:var(--sand-deep);stroke-width:3}
.uw-arrow-head{fill:var(--sand-deep)}

/* decision ------------------------------------------------------------------ */
.uw-ask{fill:var(--navy)}
.uw-ask-text{font-size:19px;font-weight:700;fill:#fff}
.uw-branch{fill:var(--paper);stroke:var(--line);stroke-width:1.5}
.uw-branch-tag{fill:var(--teal)}
.uw-branch-if{font-size:18px;font-weight:700;fill:var(--ink)}
.uw-branch-then{font-size:17px;fill:var(--teal-dark)}

/* the article banner -------------------------------------------------------- */
.uw-banner-wrap{margin:0 0 26px;border-radius:var(--radius);overflow:hidden;line-height:0}
.uw-banner-wrap--wide{aspect-ratio:960/260}
.uw-banner-wrap--card{margin:0 0 14px;border-radius:6px;aspect-ratio:960/300}
.uw-banner{display:block;width:100%;height:auto}
.uw-banner-bg{fill:var(--sand)}
.uw-banner-arc{fill:none;stroke-width:2.5;opacity:.55}
.uw-banner-arc--0{stroke:var(--teal)}
.uw-banner-arc--1{stroke:var(--sand-deep)}
.uw-banner-arc--2{stroke:var(--teal-dark);opacity:.32}
.uw-banner-dot{fill:var(--teal-dark);opacity:.7}
.uw-banner-dot--soft{fill:var(--teal);opacity:.2}
/* Tone 1 is the default palette. Stated rather than inherited: three of the
   four tones are declared, and leaving the fourth implicit means a reader
   comparing them cannot see what tone 1 actually is. */
.uw-banner--1 .uw-banner-bg{fill:var(--sand)}
.uw-banner--1 .uw-banner-arc--0{stroke:var(--teal)}
.uw-banner--2 .uw-banner-bg{fill:#F2F0EA}
.uw-banner--2 .uw-banner-arc--0{stroke:#7FA8A0}
.uw-banner--3 .uw-banner-bg{fill:#F6F1EA}
.uw-banner--3 .uw-banner-arc--0{stroke:#C9A227;opacity:.45}
.uw-banner--3 .uw-banner-dot{fill:#A8811C}
.uw-banner--4 .uw-banner-bg{fill:#EFF2F1}
.uw-banner--4 .uw-banner-arc--0{stroke:var(--teal-dark);opacity:.4}

/* the blog index, now that a card has something in it ----------------------- */
.posts li a .uw-banner-wrap--card{margin-bottom:12px}

@media (max-width:600px){
  .uw-bar-row{grid-template-columns:1fr auto;gap:4px 10px}
  .uw-bar-label{grid-column:1/-1}
  .uw-chart{padding:18px 15px}
  .uw-figure{margin:26px 0}
}