/* office THUNAGU — one visual language across all 18 pages.
   Loaded after the saved reference styles. Components have no Studio hooks. */
:root {
  --ui-content: 1280px;
  --ui-reading: 760px;
  --ui-gutter: clamp(20px, 4.23vw, 64px);
  --ui-space-section: clamp(72px, 8vw, 120px);
  --ui-ink: #293d33;
  --ui-copy: #4c5c52;
  --ui-muted: #67756c;
  --ui-green: #0e7a61;
  --ui-green-hover: #09644f;
  --ui-line: #dce5de;
  --ui-paper: #f1eee8;
  --ui-tint: #f4f8f4;
  --ui-radius: 16px;
  --ui-control-radius: 8px;
  --ui-section-radius: 40px;
  --ui-body: 16px;
  --ui-meta: 13px;
  --ui-shadow: 0 12px 32px rgb(26 65 43 / 7%);
  --ui-ease: cubic-bezier(.22,.61,.36,1);
  --green-strong: var(--ui-green);
  --paper: var(--ui-paper);
  --line: var(--ui-line);
}
body.ui-system { color: var(--ui-ink); font-family: var(--japanese); }
body.ui-system :is(a,button,input,select,textarea) { -webkit-tap-highlight-color: transparent; }
body.ui-system :is(a,button) { touch-action: manipulation; }
body.ui-system :is(h1,h2,h3) { text-wrap: pretty; }
body.ui-system :focus-visible { outline: 3px solid var(--ui-green); outline-offset: 5px; }
body.ui-system :is(a,button):active { -webkit-tap-highlight-color: transparent; }
body.ui-system .ui-icon { display: block; flex: 0 0 auto; width: 20px; height: 20px; overflow: visible; pointer-events: none; }
body.ui-system .ui-container,
body.ui-system .reference-page .ui-container {
  width: min(var(--ui-content),calc(100% - var(--ui-gutter)*2));
  max-width: none; padding-inline: 0; margin-inline: auto;
}
body.ui-system .section-container { margin-block: var(--ui-space-section); }
body.ui-system .reference-page .ui-section-content { width: 100%; max-width: 100%; padding-inline: 0; margin-inline: 0; }
/* A shared two-level section signature. Page titles retain their larger scale. */
body.ui-system .ui-section-heading,
body.ui-system .reference-page .ui-section-heading {
  display: flex; flex-direction: column; align-items: flex-start;
  flex: 0 0 auto; gap: 12px; width: auto; max-width: 100%; padding: 0;
}
body.ui-system .ui-section-english,
body.ui-system .reference-page .ui-section-english {
  display: block; margin: 0; width: auto; max-width: 100%; padding: 0;
  color: var(--ui-green); font: 500 clamp(46px,4.24vw,64px)/1.08 "Inter",sans-serif;
  letter-spacing: -.04em; text-align: left; overflow-wrap: anywhere;
}
body.ui-system .ui-section-heading > h2,
body.ui-system .reference-page .ui-section-heading > h2 {
  display: block; width: auto; max-width: 100%; padding: 0 0 0 2px; margin: 0;
  color: var(--ui-ink); font: 400 16px/1.8 var(--japanese); letter-spacing: .06em; text-align: left;
}
body.ui-system .track-heading.ui-section-heading,
body.ui-system .ui-heading--center,
body.ui-system .reference-page .ui-heading--center { align-items: center; text-align: center; }
body.ui-system .track-heading .ui-section-english,
body.ui-system .track-heading.ui-section-heading > h2 { color: white; }
body.ui-system .reference-page .ui-copy { color: var(--ui-copy); font: 400 var(--ui-body)/2 var(--japanese); letter-spacing: .02em; }
/* Actions: one target, one label, one consistent direction. */
body.ui-system .ui-action,
body.ui-system .reference-page .ui-action {
  position: relative; display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center;
  gap: 16px; width: auto; max-width: 100%; min-height: 44px; margin: 0; padding: 0;
  border: 0; border-radius: 0; background: transparent; color: var(--ui-green);
  font: 500 14px/1.7 var(--japanese); letter-spacing: .02em; text-decoration: none;
  cursor: pointer; transition: color 200ms,background 200ms,border-color 200ms,box-shadow 200ms;
}
body.ui-system .ui-action-label { min-width: 0; color: inherit; font: inherit; letter-spacing: inherit; }
body.ui-system .ui-case-action > span { color: inherit; font: inherit; letter-spacing: inherit; }
body.ui-system .ui-action-circle,
body.ui-system .reference-page .ui-action-circle {
  position: static; display: grid; place-items: center; flex: 0 0 44px;
  width: 44px; height: 44px; margin: 0; padding: 0; border: 1px solid #abc8b9;
  border-radius: 50%; background: transparent; color: var(--ui-green); font: 400 20px/1 "Inter",sans-serif;
  transition: background 200ms,color 200ms,border-color 200ms;
}
body.ui-system .ui-action--primary,
body.ui-system .reference-page .ui-action--primary {
  width: 320px; min-height: 64px; padding: 16px 52px 16px 28px;
  border: 1px solid var(--ui-green); border-radius: var(--ui-control-radius);
  background: var(--ui-green); color: white; font: 600 16px/1.7 var(--japanese-bold);
  box-shadow: 0 4px 14px rgb(14 122 97 / 9%);
}
body.ui-system .ui-action--secondary,
body.ui-system .reference-page .ui-action--secondary {
  width: 320px; min-height: 56px; padding: 14px 52px 14px 28px;
  border: 1px solid #bfd2c5; border-radius: var(--ui-control-radius);
  background: var(--ui-tint); color: var(--ui-green); font-size: 15px;
}
body.ui-system .ui-action--primary > .ui-icon,
body.ui-system .ui-action--secondary > .ui-icon { position: absolute; right: 20px; }
body.ui-system .ui-action--secondary:has(.ui-icon path[d^="M20"]) { padding: 14px 28px 14px 52px; }
body.ui-system .ui-action--secondary:has(.ui-icon path[d^="M20"]) > .ui-icon { right: auto; left: 20px; }
body.ui-system .ui-action--primary:active { background: #075641; }
@media (hover:hover) {
  body.ui-system :is(.ui-action--text,.ui-service-card):hover .ui-action-circle,
  body.ui-system .ui-news-row:hover .ui-action-circle { background: var(--ui-green); border-color: var(--ui-green); color: white; }
  body.ui-system .ui-action--text:hover .ui-action-label { text-decoration: underline; text-underline-offset: 6px; }
  body.ui-system .ui-action--primary:hover { background: var(--ui-green-hover); border-color: var(--ui-green-hover); box-shadow: 0 8px 24px rgb(14 122 97 / 17%); }
  body.ui-system .ui-action--secondary:hover { background: #e7f0e8; border-color: #96b9a4; }
}
/* Services use the same information architecture on the top and service pages. */
body.ui-system .ui-service-list,
body.ui-system .reference-page .ui-service-list { display: flex; flex-direction: column; gap: 0; width: 100%; padding: 0; }
body.ui-system .ui-service-item,
body.ui-system .reference-page .ui-service-item { display: block; width: 100%; border: 0; padding: 0; margin: 0; }
body.ui-system .ui-service-card {
  font: 400 var(--ui-body)/1.8 var(--japanese);
  position: relative; display: grid; grid-template-columns: minmax(0,1fr) minmax(0,2fr);
  gap: 40px; align-items: start; width: 100%; padding: 40px 0;
  border-bottom: 1px solid var(--ui-line); color: var(--ui-ink);
  transition: background 220ms,border-color 220ms;
}
body.ui-system .ui-service-card::before { content: ''; position: absolute; z-index: -1; inset: 16px -20px; border-radius: var(--ui-radius); background: var(--ui-tint); opacity: 0; transition: opacity 220ms; }
body.ui-system .ui-service-image { width: 100%; height: auto; aspect-ratio: 600/337; object-fit: cover; border-radius: var(--ui-radius); }
body.ui-system .ui-service-body { display: flex; flex-direction: column; align-items: stretch; gap: 20px; min-width: 0; }
body.ui-system .ui-service-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; }
body.ui-system .ui-service-title { margin: 0; flex: 1; color: var(--ui-ink); font: 600 clamp(22px,1.86vw,28px)/1.6 var(--japanese-bold); letter-spacing: -.02em; }
body.ui-system .ui-service-heading > .ui-action { margin-top: 1px; }
body.ui-system .ui-service-copy { margin: 0; color: var(--ui-copy); font: 400 var(--ui-body)/2 var(--japanese); text-align: left; overflow-wrap: anywhere; }
body.ui-system .ui-tags { display: flex; flex-wrap: wrap; gap: 8px; width: 100%; padding: 0; margin: 4px 0 0; list-style: none; }
body.ui-system .ui-tags > li { display: block; max-width: 100%; padding: 5px 12px; border: 1px solid #e5e5db; border-radius: 4px; background: var(--ui-paper); color: #566354; font: 400 12px/1.8 var(--japanese); overflow-wrap: anywhere; }
body.ui-system .service-header { padding-bottom: 16px; }
body.ui-system .service-actions { gap: 24px; margin-top: 48px; }
@media (hover:hover) {
  body.ui-system .ui-service-card:hover { border-color: #91b6a2; }
  body.ui-system .ui-service-card:hover::before { opacity: 1; }
  body.ui-system .ui-service-card:hover .ui-service-title { color: var(--ui-green); }
}
/* News: one date column, one title column and a predictable destination cue. */
body.ui-system .ui-news-list,
body.ui-system .reference-page .ui-news-list { display: flex; flex-direction: column; gap: 0; width: 100%; padding: 0; }
body.ui-system .ui-news-item { display: block; width: 100%; padding: 0; margin: 0; border: 0; }
body.ui-system .ui-news-row { color: var(--ui-ink); font: 400 var(--ui-body)/1.8 var(--japanese); position: relative; display: grid; grid-template-columns: 116px minmax(0,1fr) 44px; align-items: center; gap: 24px; width: 100%; min-height: 96px; padding: 24px 0; border-bottom: 1px solid var(--ui-line); transition: background 200ms; }
body.ui-system .ui-news-date { color: var(--ui-muted); font: 400 13px/1.8 "Inter",sans-serif; font-variant-numeric: tabular-nums; }
body.ui-system .ui-news-title { min-width: 0; margin: 0; color: var(--ui-ink); font: 400 16px/1.9 var(--japanese); text-align: left; overflow-wrap: anywhere; }
body.ui-system .ui-news-row:focus-visible { outline-offset: 1px; }
@media (hover:hover) { body.ui-system .ui-news-row:hover { background: #f7faf7; } body.ui-system .ui-news-row:hover .ui-news-title { color: var(--ui-green); } }
/* Case studies: the same logo frame, type scale and action in every context. */
body.ui-system .ui-case-card { color: var(--ui-ink); font: 400 var(--ui-body)/1.8 var(--japanese); position: relative; display: flex; flex-direction: column; align-items: stretch; flex: 1; width: 100%; min-width: 0; height: 100%; overflow: hidden; border: 1px solid var(--ui-line); border-radius: var(--ui-radius); background: white; box-shadow: 0 4px 16px rgb(26 65 43 / 3%); transition: border-color 250ms,box-shadow 250ms; }
body.ui-system .ui-case-image { display: block; width: 100%; height: auto; aspect-ratio: 8/5; border-bottom: 1px solid #edf1eb; overflow: hidden; background: white; }
body.ui-system .ui-case-logo { width: 100%; height: 100%; padding: 16px; object-fit: contain; transition: transform 400ms var(--ui-ease); }
body.ui-system .ui-case-body { color: var(--ui-ink); font: inherit; display: flex; flex: 1; flex-direction: column; align-items: stretch; gap: 8px; min-width: 0; padding: 24px; }
body.ui-system .ui-case-company { margin: 0; color: var(--ui-muted); font: 400 12px/1.8 var(--japanese); }
body.ui-system .ui-case-title { margin: 0; color: var(--ui-ink); font: 600 20px/1.7 var(--japanese-bold); }
body.ui-system .ui-case-meta { margin: 8px 0 0; color: var(--ui-muted); font: 400 12px/1.8 var(--japanese); }
body.ui-system .ui-case-action { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 44px; padding-top: 16px; margin-top: auto; border-top: 1px solid var(--ui-line); color: var(--ui-green); font: 500 13px/1.8 var(--japanese); }
body.ui-system .ui-case-body > :is(.ui-case-title,.ui-case-meta):has(+.ui-case-action) { margin-bottom: 16px; }
body.ui-system .ui-case-card.is-pending { background: #fafbf7; box-shadow: none; }
body.ui-system .ui-case-card.is-pending .ui-case-title { color: var(--ui-muted); font: 500 24px/1.5 "Inter",sans-serif; letter-spacing: -.025em; }
body.ui-system .ui-case-card.is-pending .ui-case-action { color: var(--ui-muted); }
body.ui-system .reference-page .ui-case-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); align-items: stretch; gap: 32px; width: 100%; padding: 0; }
body.ui-system .reference-page .ui-case-grid > li { max-width: none; min-width: 0; width: 100%; height: auto; margin: 0; padding: 0; }
body.ui-system .voice-inner { width: calc(100% - max(var(--ui-gutter),(100% - var(--ui-content))/2)); margin: var(--ui-space-section) 0; }
body.ui-system .voice-header,
body.ui-system .voice-controls { width: min(var(--ui-content),calc(100% - var(--ui-gutter))); margin-inline: 0; }
body.ui-system .voice-viewport { padding-left: 0; }
body.ui-system .voice-slide { flex: 0 0 432px; padding-right: 32px; }
body.ui-system .voice-toggle-icon { display: block; }
body.ui-system .voice-toggle .ui-play-icon,
body.ui-system .voice-toggle.is-paused .ui-pause-icon { display: none; }
body.ui-system .voice-toggle.is-paused .ui-play-icon { display: block; }
body.ui-system .voice-toggle-icon .ui-icon { width: 16px; height: 16px; }
body.ui-system .voice-controls { gap: 16px; }
body.ui-system .voice-hint { font-size: 12px; color: var(--ui-muted); }
@media (hover:hover) {
  body.ui-system a.ui-case-card:hover { border-color: #99bda8; box-shadow: var(--ui-shadow); }
  body.ui-system a.ui-case-card:hover .ui-case-title { color: var(--ui-green); }
  body.ui-system a.ui-case-card:hover .ui-case-logo { transform: scale(1.025); }
}
/* The contact invitation is intentionally identical across all landing pages. */
body.ui-system .ui-contact-section { position: relative; display: block; flex: 0 0 auto; width: 100%; margin-top: -40px; border-radius: var(--ui-section-radius) var(--ui-section-radius) 0 0; background: linear-gradient(105.58deg,#c3e0c8,#edd5a6 28.72%,#cfe1c3 58.45%,#99d3c5 84.56%,#bceef1); overflow: hidden; }
body.ui-system .reference-page .ui-contact-section { margin-top: 0; }
body.ui-system .ui-contact-glass { display: flex; justify-content: center; width: 100%; padding: 96px var(--ui-gutter); background: rgb(255 255 255 / 50%); }
body.ui-system .ui-contact-card { color: var(--ui-ink); font: 400 var(--ui-body)/1.8 var(--japanese); display: flex; flex-direction: column; align-items: center; width: min(1076px,100%); max-width: 100%; gap: 0; padding: 56px 32px; border: 1px solid white; border-radius: var(--ui-radius); background: white; box-shadow: 0 18px 60px rgb(61 87 66 / 5%); text-align: center; }
body.ui-system .ui-contact-title { margin: 28px 0 8px; color: var(--ui-ink); font: 600 17px/1.8 var(--japanese-bold); }
body.ui-system .ui-contact-copy { margin: 0 0 32px; color: var(--ui-muted); font: 400 14px/1.9 var(--japanese); text-wrap: balance; }
/* Header, mobile navigation and footer share the same icon grammar and targets. */
body.ui-system .dropdown { border-color: var(--ui-line); border-radius: var(--ui-radius); box-shadow: 0 18px 48px rgb(26 65 43 / 12%); }
body.ui-system .dropdown-links a { min-height: 44px; gap: 12px; font-size: 14px; }
body.ui-system .dropdown-links a::before { content: none; }
body.ui-system .dropdown-links a > .ui-icon { width: 16px; height: 16px; color: var(--ui-green); }
body.ui-system .dropdown-toggle > .dropdown-chevron { width: 14px; height: 14px; border: 0; transform: none; transition: transform 200ms; }
body.ui-system .dropdown-toggle[aria-expanded="true"] > .dropdown-chevron { transform: rotate(180deg); }
body.ui-system .menu-toggle .ui-icon,
body.ui-system .menu-close .ui-icon { width: 28px; height: 28px; }
body.ui-system .menu-close { display: grid; place-items: center; }
body.ui-system .hero-discover { min-height: 44px; }
body.ui-system .hero-discover > span { width: 32px; height: 32px; }
body.ui-system .hero-news-arrow { display: block; }
body.ui-system .hero-news-arrow > .ui-icon { width: 22px; height: 22px; }
body.ui-system .mobile-menu-body { width: calc(100% - var(--ui-gutter)*2); }
body.ui-system .mobile-link { min-height: 48px; }
body.ui-system .mobile-contact { border-radius: var(--ui-control-radius); min-height: 64px; }
body.ui-system .mobile-contact-dock { border-radius: var(--ui-control-radius); }
body.ui-system .mobile-sub-links { padding-left: 16px; }
body.ui-system .footer-main { gap: 40px; margin-block: 32px 40px; }
body.ui-system .footer-nav { gap: 48px; }
body.ui-system .footer-column { gap: 0; }
body.ui-system .footer-main-link { min-height: 44px; height: auto; padding: 8px 0; font-size: 15px; }
body.ui-system .footer-sub-links { gap: 0; }
body.ui-system .footer-sub-links a { min-height: 44px; height: auto; padding: 8px 0; color: var(--ui-muted); font-size: 13px; }
body.ui-system .footer-address { color: var(--ui-copy); font-size: 14px; }
body.ui-system .footer-address > a { width: 44px; height: 44px; border: 1px solid var(--ui-line); border-radius: 50%; }
body.ui-system .footer-address > a .ui-icon { width: 18px; height: 18px; }
body.ui-system .footer-back-top > span { width: 44px; height: 44px; }
body.ui-system .footer-bottom { align-items: center; gap: 8px 24px; color: var(--ui-muted); font-size: 12px; }
body.ui-system .footer-bottom a { display: flex; align-items: center; min-height: 44px; }
/* Page framing uses the same grid as the home page, including the hero rule. */
body.ui-system .reference-page { --page-line: var(--ui-line); --page-muted: var(--ui-muted); --page-tint: var(--ui-tint); --page-accent: var(--ui-green); }
body.ui-system .reference-page .page-heading,
body.ui-system .reference-page .page-rule,
body.ui-system .reference-page .page-hero > .page-breadcrumb { width: min(var(--ui-content),calc(100% - var(--ui-gutter)*2)); }
body.ui-system .reference-page .page-hero { padding-top: 108px; }
body.ui-system .reference-page .page-rule { margin-top: 48px; }
body.ui-system .reference-page .page-english { color: var(--ui-green); }
body.ui-system .reference-page .index-hero .page-english { font: 500 clamp(54px,6.1vw,88px)/1.08 "Inter",sans-serif; letter-spacing: -.045em; }
body.ui-system .reference-page .page-title { color: var(--ui-ink); }
body.ui-system .reference-page .page-breadcrumb { font-size: 12px; }
body.ui-system .page-breadcrumb a { display: flex; align-items: center; min-height: 44px; padding-block: 0; }
body.ui-system .page-hero > .page-breadcrumb { top: 16px; }
body.ui-system .page-section-nav,
body.ui-system .reference-page .faq-categories { max-width: calc(100% - var(--ui-gutter)*2); padding: 5px; gap: 4px; border: 1px solid var(--ui-line); border-radius: var(--ui-control-radius); box-shadow: 0 5px 22px rgb(23 64 44 / 4%); }
body.ui-system .page-section-nav a,
body.ui-system .reference-page .faq-categories a { min-height: 44px; border-radius: 4px; font: 400 13px/1.7 var(--japanese); padding: 10px 18px; }
body.ui-system .reference-page .faq-categories { max-width: 100%; }
body.ui-system .reference-page .article-shell { width: min(840px,calc(100% - var(--ui-gutter)*2)); padding-bottom: 96px; }
body.ui-system .reference-page .article-page > .page-breadcrumb { width: min(840px,calc(100% - var(--ui-gutter)*2)); }
body.ui-system .reference-page .article-body,
body.ui-system .reference-page .policy-body { width: min(var(--ui-reading),100%); color: var(--ui-copy); font: 400 var(--ui-body)/2.05 var(--japanese); }
body.ui-system .reference-page .article-body p { font-size: var(--ui-body); line-height: 2.05; }
body.ui-system .reference-page .article-body h2 { margin-top: 56px; margin-bottom: 24px; font-size: clamp(22px,2vw,28px); }
body.ui-system .reference-page .article-body :is(h2,h3) { color: var(--ui-ink); }
body.ui-system .reference-page .article-cover { border-radius: var(--ui-radius); }
body.ui-system .reference-page .article-contents { border-color: var(--ui-line); border-radius: var(--ui-control-radius); }
body.ui-system .article-contents a { display: flex; align-items: center; min-height: 44px; }
body.ui-system .reference-page .policy-body { width: min(var(--ui-reading),calc(100% - var(--ui-gutter)*2)); }
body.ui-system .reference-page .policy-section { padding-bottom: 32px; border-color: var(--ui-line); }
body.ui-system .reference-page .policy-section > p,
body.ui-system .reference-page .policy-body > p { color: var(--ui-copy); font-size: var(--ui-body); line-height: 2.05; }
body.ui-system .reference-page .partner-card { padding: 24px; border-color: var(--ui-line); border-radius: var(--ui-radius); background: white; }
body.ui-system .reference-page .company-photo { border-radius: var(--ui-radius); }
body.ui-system .reference-page .ui-offering { border: 1px solid var(--ui-line); border-radius: var(--ui-control-radius); background: var(--ui-tint); padding: 20px 24px; }
body.ui-system .reference-page .ui-definition-row { gap: 24px; padding-block: 24px; border-color: var(--ui-line); }
body.ui-system .reference-page .ui-definition-row > p { color: var(--ui-copy); font-size: var(--ui-body); line-height: 1.9; }
/* FAQ and contact share field shape, line color, body rhythm and error treatment. */
body.ui-system .reference-page .faq-box { border-color: var(--ui-line); border-radius: var(--ui-control-radius); }
body.ui-system .reference-page .faq-question { min-height: 80px; gap: 20px; padding: 24px; }
body.ui-system .reference-page .faq-question > span:nth-child(2) { color: var(--ui-ink); font-size: var(--ui-body); line-height: 1.9; }
body.ui-system .faq-question .ui-disclosure-icon { width: 24px; height: 24px; margin-left: auto; color: var(--ui-green); }
body.ui-system .ui-plus-vertical { transform-origin: center; transition: transform 200ms,opacity 200ms; }
body.ui-system .faq-question[aria-expanded="true"] .ui-plus-vertical { transform: rotate(90deg); opacity: 0; }
body.ui-system .reference-page .faq-answer { padding: 0 24px 24px; }
body.ui-system .reference-page .faq-answer p { color: var(--ui-copy); font-size: var(--ui-body); line-height: 2; }
body.ui-system .reference-page .faq-group > h2 { color: var(--ui-ink); font: 600 24px/1.8 var(--japanese-bold); }
body.ui-system .faq-search-field { min-height: 56px; padding: 0 16px; gap: 12px; border: 1px solid #bfcfc3; border-radius: var(--ui-control-radius); box-shadow: none; }
body.ui-system .faq-search-field > .ui-icon { color: var(--ui-muted); }
body.ui-system .faq-search-field input { height: 54px; font-size: 16px; }
body.ui-system .faq-search-field button { min-width: 48px; min-height: 44px; background: var(--ui-tint); border-radius: 4px; color: var(--ui-green); }
body.ui-system .reference-page .contact-form { gap: 32px; padding-top: 48px; }
body.ui-system .reference-page .form-field { gap: 12px; }
body.ui-system .reference-page .form-field p:not(.required-tag) { color: var(--ui-ink); font-size: 15px; }
body.ui-system .reference-page .required-tag { border-radius: 4px; color: var(--ui-green); background: #eaf3ec; font-size: 11px; }
body.ui-system .reference-page [data-demo-field]:not([type="checkbox"]) { min-height: 56px; border-color: #bfcfc3; border-radius: var(--ui-control-radius); background: #fcfdfb; box-shadow: none; }
body.ui-system .reference-page [data-demo-field][aria-invalid="true"] { border-color: #b04738; background: #fffafa; }
body.ui-system .reference-page .form-select-wrap::after { content: none; }
body.ui-system .form-select-wrap { position: relative; }
body.ui-system .ui-select-icon { position: absolute; right: 16px; top: 18px; color: var(--ui-muted); }
body.ui-system .form-select-wrap select { appearance: none; padding-right: 48px !important; }
body.ui-system .completion-mark .ui-icon { width: 30px; height: 30px; }
body.ui-system .reference-page .demo-note { border-color: var(--ui-line); background: var(--ui-tint); color: var(--ui-copy); font-size: 12px; }
body.ui-system .reference-page .thanks-section { padding-inline: var(--ui-gutter); }
/* Existing photo and number compositions retain their character. */
body.ui-system .track-inner { width: min(1060px,calc(100% - var(--ui-gutter)*2)); max-width: none; }
body.ui-system .track-list > li { border: 1px solid rgb(255 255 255 / 70%); border-radius: var(--ui-radius); }
body.ui-system .reference-page .ui-records > li { border-radius: var(--ui-radius); }
body.ui-system .section-voice { border-radius: 0 var(--ui-section-radius) 0 0; }
body.ui-system .section-company > .company-photo { border-radius: 0 var(--ui-section-radius) 0 0; }
body.ui-system .company-panel { width: min(1440px,100%); max-width: calc(100% - var(--ui-gutter)); margin-left: var(--ui-gutter); padding-right: var(--ui-gutter); }
body.ui-system .company-body { width: 920px; max-width: calc(100% - var(--ui-gutter)*2); margin-inline: var(--ui-gutter); }
body.ui-system .company-links a { font-size: 16px; gap: 16px; }
body.ui-system .company-links .ui-icon { color: var(--ui-green); }
@media (max-width:1060px) {
  body.ui-system .ui-service-card { gap: 28px; }
  body.ui-system .ui-service-heading { gap: 16px; }
  body.ui-system .ui-service-heading .ui-action-label { display: none; }
  body.ui-system .reference-page .ui-case-grid { gap: 24px; grid-template-columns: repeat(2,minmax(0,1fr)); }
  body.ui-system .footer-nav { gap: 28px; }
}
@media (max-width:840px) {
  :root { --ui-body: 15px; --ui-meta: 12px; --ui-section-radius: 24px; }
  body.ui-system .ui-section-heading,
  body.ui-system .reference-page .ui-section-heading { gap: 8px; }
  body.ui-system .ui-section-heading > h2,
  body.ui-system .reference-page .ui-section-heading > h2 { font-size: 15px; }
  body.ui-system .ui-service-card { grid-template-columns: minmax(0,1fr); padding-block: 32px; gap: 24px; }
  body.ui-system .ui-service-card::before { inset: 16px -12px; }
  body.ui-system .ui-service-body { gap: 16px; }
  body.ui-system .ui-service-title { font-size: 23px; }
  body.ui-system .ui-news-row { grid-template-columns: minmax(0,1fr) 44px; gap: 8px 20px; min-height: 112px; padding-block: 24px; }
  body.ui-system .ui-news-date { grid-column: 1; font-size: 12px; }
  body.ui-system .ui-news-title { grid-column: 1; font-size: 15px; }
  body.ui-system .ui-news-row > .ui-action-circle { grid-column: 2; grid-row: 1/3; }
  body.ui-system .ui-case-body { padding: 24px; }
  body.ui-system .ui-case-title { font-size: 19px; }
  body.ui-system .voice-slide { flex-basis: 380px; padding-right: 24px; }
  body.ui-system .ui-contact-glass { padding-block: 72px; }
  body.ui-system .ui-contact-card { padding: 48px 24px; }
  body.ui-system .ui-contact-title { font-size: 16px; }
  body.ui-system .ui-contact-copy { font-size: 13px; }
  body.ui-system .reference-page .page-hero { padding-top: 96px; }
  body.ui-system .reference-page .page-rule { margin-top: 40px; }
  body.ui-system .page-section-nav a,
  body.ui-system .reference-page .faq-categories a { padding-inline: 14px; font-size: 12px; }
  body.ui-system .reference-page .article-shell { padding-top: 32px; padding-bottom: 72px; }
  body.ui-system .reference-page .faq-question { padding: 20px; gap: 16px; }
  body.ui-system .reference-page .faq-answer { padding: 0 20px 24px; }
  body.ui-system .company-panel { margin-left: 0; max-width: 100%; width: 100%; padding-inline: var(--ui-gutter); }
  body.ui-system .company-body { width: 100%; max-width: 100%; margin-inline: 0; }
  body.ui-system .footer-nav { gap: 16px 28px; }
  body.ui-system .footer-bottom { justify-content: flex-start; }
}
@media (max-width:540px) {
  body.ui-system .ui-section-english,
  body.ui-system .reference-page .ui-section-english { font-size: clamp(40px,11.8vw,50px); }
  body.ui-system .ui-service-title { font-size: 21px; line-height: 1.65; }
  body.ui-system .ui-service-card { gap: 24px; }
  body.ui-system .ui-service-image { border-radius: var(--ui-radius); }
  body.ui-system .ui-tags { gap: 8px; margin-top: 0; }
  body.ui-system .ui-tags > li { font-size: 12px; padding: 4px 10px; }
  body.ui-system .ui-action, body.ui-system .reference-page .ui-action { gap: 12px; font-size: 13px; }
  body.ui-system .ui-action--primary, body.ui-system .reference-page .ui-action--primary { min-height: 60px; font-size: 15px; }
  body.ui-system .ui-action--secondary, body.ui-system .reference-page .ui-action--secondary { min-height: 56px; font-size: 14px; }
  body.ui-system .service-actions { width: 100%; gap: 16px; margin-top: 32px; }
  body.ui-system .service-actions .ui-action { width: 100%; }
  body.ui-system .reference-page .ui-case-grid { grid-template-columns: minmax(0,1fr); gap: 24px; }
  body.ui-system .voice-slide { flex-basis: 88%; padding-right: 20px; }
  body.ui-system .voice-header,
  body.ui-system .voice-controls { width: calc(100% - var(--ui-gutter)); }
  body.ui-system .voice-hint { text-align: left; font-size: 11px; }
  body.ui-system .ui-contact-card { padding: 40px 20px; }
  body.ui-system .ui-contact-title { margin-top: 24px; font-size: 15px; }
  body.ui-system .ui-contact-copy { font-size: 12px; margin-bottom: 24px; }
  body.ui-system .ui-contact-card .ui-action { width: 100%; }
  body.ui-system .reference-page .page-hero { padding-top: 88px; }
  body.ui-system .reference-page .index-hero .page-english { font-size: clamp(50px,14vw,60px); }
  body.ui-system .reference-page .page-rule { margin-top: 32px; }
  body.ui-system .reference-page .page-breadcrumb { font-size: 11px; }
  body.ui-system .reference-page .detail-hero .page-title { font-size: 28px; line-height: 1.6; }
  body.ui-system .reference-page .faq-group > h2 { font-size: 21px; }
  body.ui-system .reference-page .faq-question { padding: 20px 16px; gap: 12px; }
  body.ui-system .reference-page .faq-question > span:first-child { font-size: 14px; }
  body.ui-system .reference-page .faq-answer { padding: 0 16px 20px; }
  body.ui-system .reference-page .article-title { font-size: 27px; }
  body.ui-system .reference-page .policy-body { padding-top: 48px; }
  body.ui-system .reference-page .contact-form { padding-top: 32px; }
  body.ui-system .footer-back-top { margin-top: 8px; }
  body.ui-system .footer-main { margin-block: 24px 32px; }
}
@media (max-width:360px) {
  body.ui-system .ui-service-title { font-size: 19px; }
  body.ui-system .ui-news-row { column-gap: 12px; }
  body.ui-system .ui-case-body { padding: 20px; }
  body.ui-system .ui-case-title { font-size: 18px; }
  body.ui-system .ui-case-company { font-size: 11px; }
  body.ui-system .ui-contact-card { padding-inline: 16px; }
}
@media (prefers-reduced-motion:reduce) { body.ui-system *, body.ui-system *::before, body.ui-system *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }
@media print { body.ui-system .ui-contact-section { break-inside: avoid; } }
/* Stateful disclosures use semantic markup, independent of source state selectors. */
body.ui-system .reference-page .faq-question { display: flex; align-items: center; width: 100%; text-align: left; }
body.ui-system .faq-question .ui-faq-marker { flex: 0 0 auto; width: 20px; color: var(--ui-green); font: 500 15px/1.9 "Inter",sans-serif; }
body.ui-system .faq-question .ui-faq-question-copy { flex: 1; min-width: 0; max-width: none; color: var(--ui-ink); font: 500 var(--ui-body)/1.9 var(--japanese); }
body.ui-system .reference-page .faq-box { display: block; width: 100%; }
body.ui-system .reference-page .ui-faq-list { gap: 16px; }
body.ui-system .ui-faq-answer-row { display: flex; align-items: flex-start; gap: 20px; }
body.ui-system .ui-faq-answer-row .ui-faq-marker { flex: 0 0 20px; color: var(--ui-green); font: 500 15px/2 "Inter",sans-serif; }
body.ui-system .ui-faq-answer-row p { flex: 1; min-width: 0; margin: 0; font: 400 var(--ui-body)/2 var(--japanese); }
body.ui-system .ui-heading--light.ui-section-heading > :is(p,h2),
body.ui-system .reference-page .ui-heading--light.ui-section-heading > :is(p,h2) { color: white; }
body.ui-system .ui-records { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 32px; width: 100%; margin: 0; padding: 0; list-style: none; }
body.ui-system .ui-records > li { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; width: 100%; max-width: none; min-width: 0; padding: 32px 24px; border: 1px solid rgb(255 255 255 / 80%); border-radius: var(--ui-radius); background: white; box-shadow: var(--ui-shadow); }
body.ui-system .ui-record-label { margin: 0; color: var(--ui-muted); font: 400 14px/1.8 var(--japanese); }
body.ui-system .ui-record-value { margin: 0; color: var(--ui-green); font: 500 52px/1.2 "Inter",sans-serif; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
body.ui-system .ui-record-value > span { margin-left: 6px; color: inherit; font: 400 20px/1.4 var(--japanese); letter-spacing: 0; }
@media (max-width:840px) { body.ui-system .ui-records { gap: 20px; } body.ui-system .ui-records > li { padding-inline: 16px; } body.ui-system .ui-record-value { font-size: 42px; } }
@media (max-width:540px) {
 body.ui-system .ui-faq-answer-row { gap: 12px; }
 body.ui-system .ui-records { grid-template-columns: minmax(0,1fr); gap: 16px; }
 body.ui-system .ui-records > li { flex-direction: row; justify-content: space-between; gap: 16px; padding: 20px 24px; }
 body.ui-system .ui-record-value { font-size: 38px; }
 body.ui-system .ui-record-value > span { font-size: 16px; }
}

body.ui-system .reference-page .ui-section-bar { display: flex; flex-direction: row; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 24px; width: 100%; }
/* Service FAQs have a narrow introduction beside the questions on desktop. */
@media (min-width:841px) {
 body.ui-system .reference-page .ui-section-bar:has(+ .ui-faq-list) {
  flex-direction: column; align-items: flex-start; justify-content: flex-start;
  flex-wrap: nowrap; gap: 32px; padding-right: 32px;
 }
}

body.ui-system .track-heading.ui-section-heading { margin-bottom: 48px; }
@media (max-width:840px) { body.ui-system .track-heading.ui-section-heading { margin-bottom: 32px; } }
/* The related-news introduction follows the same composition as the home page. */
body.ui-system .ui-news-layout,
body.ui-system .reference-page .ui-news-layout { display: flex; flex-direction: row; align-items: flex-start; justify-content: space-between; gap: 0; }
body.ui-system .ui-news-intro,
body.ui-system .reference-page .ui-news-intro { display: flex; flex-direction: column; align-items: flex-start; flex: 0 0 25%; width: 25%; max-width: none; gap: 48px; padding: 0 24px 0 0; }
body.ui-system .ui-news-layout > .ui-news-list { flex: 0 0 75%; width: 75%; max-width: none; }
@media (max-width:840px) {
 body.ui-system .ui-news-layout, body.ui-system .reference-page .ui-news-layout { flex-direction: column; }
 body.ui-system .ui-news-intro, body.ui-system .reference-page .ui-news-intro { flex: 0 0 auto; flex-direction: row; align-items: flex-end; justify-content: space-between; gap: 20px; width: 100%; padding: 0 0 24px; }
 body.ui-system .ui-news-layout > .ui-news-list { flex: 1 0 auto; width: 100%; }
}
/* A clear address panel stays useful before the optional live map is opened. */
body.ui-system .ui-map-frame { width: 100%; border: 1px solid var(--ui-line); border-radius: var(--ui-radius); overflow: hidden; background: var(--ui-tint); }
body.ui-system .ui-map-preview { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; min-height: 360px; padding: 40px 24px; text-align: center; }
body.ui-system .ui-map-marker { display: grid; place-items: center; width: 64px; height: 64px; margin-bottom: 8px; border: 1px solid #c5d8cb; border-radius: 50%; background: white; color: var(--ui-green); }
body.ui-system .ui-map-marker .ui-icon { width: 28px; height: 28px; }
body.ui-system .ui-map-name { color: var(--ui-ink); font: 600 20px/1.8 "Inter",sans-serif; letter-spacing: .03em; }
body.ui-system .ui-map-copy { color: var(--ui-muted); font: 400 14px/1.8 var(--japanese); margin-bottom: 12px; }
body.ui-system .ui-map-frame iframe { display: block; width: 100%; height: 400px; border: 0; }
body.ui-system .ui-map-external { align-self: flex-end; margin-top: 24px; }
@media (max-width:540px) {
 body.ui-system .ui-map-preview { min-height: 320px; padding: 32px 20px; }
 body.ui-system .ui-map-name { font-size: 18px; }
 body.ui-system .ui-map-frame iframe { height: 320px; }
 body.ui-system .ui-map-external { width: 100%; }
}
/* Field boundaries and placeholder text remain legible on the light surface. */
:root { --ui-field-line: #83978a; --ui-placeholder: #657469; }
body.ui-system .faq-search-field,
body.ui-system .reference-page [data-demo-field]:not([type="checkbox"]) { border-color: var(--ui-field-line); }
body.ui-system .faq-search-field:focus-within { border-color: var(--ui-green); }
body.ui-system .reference-page [data-demo-field]:not([type="checkbox"]):focus { border-color: var(--ui-green); }
body.ui-system .reference-page [data-demo-field][aria-invalid="true"] { border-color: #b04738; }
body.ui-system .faq-search input::placeholder,
body.ui-system .reference-page [data-demo-field]::placeholder { color: var(--ui-placeholder); opacity: 1; }
/* Keep the same hover motion on invitations, completion actions and form actions. */
body.ui-system .ui-action:hover,
body.ui-system .reference-page .ui-action:hover { transform: none; }