/* LegalAgent JP top (/) — "The Annual Review". Loaded only by index.html (EN top keeps styles*.css). */

/* ===== Tokens (verbatim from styles.css :root) + page additions ===== */
:root {
  --ink: #111312; --ink-2: #1D201F; --ink-3: #2A2D2B; --anthropic-black: #141413;
  --ink-line: rgba(255,255,255,0.10); --ink-line-strong: rgba(255,255,255,0.18);
  --paper: #FFFFFF; --paper-2: #F3F7F6; --paper-3: #E4ECEA; --surface: #FFFFFF;
  --paper-line: rgba(17,19,18,0.12); --paper-line-strong: rgba(17,19,18,0.22);
  --on-ink: #F5F5F5; --on-ink-mute: rgba(245,245,245,0.86); --on-ink-faint: rgba(245,245,245,0.7);
  --on-paper: #111312; --on-paper-mute: rgba(17,19,18,0.82); --on-paper-faint: rgba(17,19,18,0.62);
  --accent: #D53953; --accent-deep: #B22743; --accent-soft: #ECB0BC; --accent-gold: #BC2E47; --accent-rgb: 213, 57, 83;
  --chrome: #212221; --chrome-soft: rgba(17,19,18,0.72);
  --button-charcoal: #343534; --button-charcoal-hover: #2A2B2A; --button-charcoal-line: rgba(255,255,255,0.22);
  --serif-jp: "Shippori Mincho", "Noto Serif JP", "YuMincho", "Hiragino Mincho ProN", serif;
  --sans-jp: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  --serif-en: "Space Grotesk", "Inter", system-ui, sans-serif;
  --serif-en-display: "Space Grotesk", "Inter", system-ui, sans-serif;
  --sans-en: "Space Grotesk", "Inter", system-ui, sans-serif;
  --mono: "Space Grotesk", "Inter", system-ui, sans-serif;
  --gutter: clamp(20px, 4vw, 64px); --max: 1440px;
  --radius-xs: 3px; --radius-sm: 4px; --radius-md: 6px; --radius-lg: 8px;
  --nav-bg: rgba(255,255,255,0.95); --nav-border: rgba(17,19,18,0.1);
  --nav-text: #111312; --nav-muted: rgba(17,19,18,0.7); --nav-button-border: var(--ink);

  /* === additions (named from existing values, no new hues) === */
  --rule-on-ink: rgba(255,255,255,.56);
  --hair-on-ink: rgba(255,255,255,.16);
  --on-ink-62: rgba(245,245,245,.62);
  --on-ink-78: rgba(245,245,245,.78);
  --them-bar: #DDE3E1;
  --axis: rgba(17,19,18,.28);
  --whisker: rgba(17,19,18,.32);
  --hatch-red: repeating-linear-gradient(45deg,#FFFFFF 0 3.5px,var(--accent-deep) 3.5px 5.5px);
  --hatch-ink: repeating-linear-gradient(45deg,#FFFFFF 0 3px,var(--ink) 3px 4.5px);
  --sec-y: 72px;   /* 80 -> 72 to hold the 1440 page under 11,200px */
  --col-gap: 24px;
}
@media (max-width: 1099px) { :root { --sec-y: 72px; --col-gap: 20px; } }
@media (max-width: 720px) { :root { --gutter: clamp(22px, 6vw, 28px); --sec-y: 44px; } }  /* 52 -> 44 */

/* ===== Base (production styles.css, verbatim) ===== */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; width: 100%; max-width: 100%; overflow-x: hidden; overscroll-behavior-x: none; }
@supports (overflow: clip) { html, body { overflow-x: clip; } }
html { scroll-behavior: smooth; }
body {
  font-family: var(--sans-jp); font-feature-settings: "palt"; font-weight: 400;
  background: var(--paper); color: var(--on-paper);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; position: relative;
}
::selection { background: var(--accent); color: var(--ink); }
:focus-visible { outline: 1px solid var(--accent); outline-offset: 4px; }

/* ===== Base overrides ===== */
body { letter-spacing: .02em; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 2px; }
.is-ink :focus-visible, .footer--site :focus-visible { outline-color: #F5F5F5; }
/* the nav offset lives on the scroller, so anchors and keyboard focus (with or without an id) clear the fixed nav */
html { scroll-padding-top: 88px; }
@media (max-width: 720px) { html { scroll-padding-top: 72px; } }
.reveal:not(.is-visible)[id], .reveal:not(.is-visible) [id] { scroll-margin-top: 12px; }
/* skip link: off-screen until focused */
.skip { position: absolute; left: 16px; top: -120px; z-index: 200; padding: 10px 16px; background: var(--ink); color: #FFFFFF;
  font: 500 14px/1.5 var(--sans-jp); text-decoration: none; border-radius: var(--radius-sm); }
.skip:focus { top: 12px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
img { max-width: 100%; display: block; }
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.nw { white-space: nowrap; }
br.m { display: none; }
@media (max-width: 720px) { br.d { display: none; } br.m { display: inline; } }
h1, h2, h3, .pq__q, .bl__lead { word-break: auto-phrase; line-break: strict; }
p, dd, li, td { text-wrap: pretty; line-break: strict; }
/* phrase-level wrapping for body copy too: never split a word such as 提/供 or 訴/訟 */
p, dd, dt, li, td, th, .row__t, .svc__d, .eng__bio, .pf__spec, .deal__role, .cm__who, .lede, .mh__def, .wf2__d, .acct__t, .pq__sub, .cm__voice, .cm__body { word-break: auto-phrase; }
/* the site footer's link lists wrap as in production (the rules above are for this page's own copy) */
.footer--site li { word-break: normal; line-break: auto; text-wrap: wrap; }

/* Hover line (nav + footer) — production styles.css, verbatim */
.hover-line {
  position: relative;
  display: inline-block;
}
.hover-line::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.hover-line:hover::after {
  transform: scaleX(1);
  transform-origin: left;
}

/* ===== Nav (styles-hero.css, verbatim) ===== */
.nav { letter-spacing: normal; position: fixed; top: 0; left: 0; right: 0; z-index: 100; display: flex; align-items: center; justify-content: space-between;
  padding: 18px var(--gutter); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  background: var(--nav-bg); border-bottom: 1px solid var(--nav-border); font-size: 14px; }
.nav__brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--nav-text); }
.nav__brand-logo { width: 32px; height: 32px; object-fit: contain; }
.nav__brand-name { font-family: var(--serif-jp); font-weight: 600; font-size: 17px; letter-spacing: .06em; }
.nav__items { display: flex; gap: clamp(16px, calc((100vw - 1480px) / 11), 24px); }
.nav__item { color: var(--nav-muted); text-decoration: none; font-size: 14px; letter-spacing: .06em; white-space: nowrap; }
.nav__cta { display: flex; align-items: center; gap: 24px; }
.lp-nav__lang { display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 14px; font-weight: 500;
  letter-spacing: .18em; color: var(--nav-muted); margin-right: 18px; }
.lp-nav__lang a { color: var(--nav-muted); text-decoration: none; transition: color .3s ease; }
.lp-nav__lang a:hover { color: var(--accent); }
.lp-nav__lang [aria-current="true"] { color: var(--accent); font-weight: 600; }
.lp-nav__lang-sep { opacity: .4; }
.nav__cta-btn { display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; padding: 10px 18px;
  background: var(--ink); border: 1px solid var(--ink); border-radius: var(--radius-sm); color: #FFFFFF; text-decoration: none;
  font-size: 14px; letter-spacing: .06em; transition: background-color .4s ease, border-color .4s ease, color .4s ease; }
.nav__cta-btn:hover { background: var(--ink-3); border-color: var(--ink-3); color: #FFFFFF; }
.nav__menu { display: none; position: relative; margin-left: auto; }
.nav__menu-toggle { display: inline-flex; width: 42px; height: 42px; align-items: center; justify-content: center; flex-direction: column;
  gap: 5px; border: 1px solid var(--paper-line-strong); border-radius: var(--radius-sm); background: rgba(255,255,255,.78);
  color: var(--nav-text); cursor: pointer; list-style: none; transition: background .3s ease, border-color .3s ease; }
.nav__menu-toggle::-webkit-details-marker { display: none; }
.nav__menu-toggle:hover { background: #FFFFFF; }
.nav__menu-line { display: block; width: 18px; height: 1px; background: currentColor; transition: transform .3s ease, opacity .3s ease; }
.nav__menu[open] .nav__menu-line:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav__menu[open] .nav__menu-line:nth-child(2) { opacity: 0; }
.nav__menu[open] .nav__menu-line:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
.nav__menu-panel { position: absolute; top: calc(100% + 12px); right: 0; width: min(340px, calc(100vw - 40px));
  max-height: calc(100vh - 96px); overflow: auto; padding: 10px; border: 1px solid var(--paper-line-strong);
  border-radius: var(--radius-lg); background: rgba(255,255,255,.98); box-shadow: 0 24px 70px -36px rgba(17,19,18,.36); }
.nav__menu-links { display: grid; gap: 2px; }
.nav__menu-link, .nav__menu-cta { display: flex; min-height: 42px; align-items: center; justify-content: space-between; gap: 14px;
  border-radius: var(--radius-sm); padding: 11px 12px; color: var(--nav-text); font-family: var(--sans-jp); font-size: 14px;
  font-weight: 500; line-height: 1.35; letter-spacing: .04em; text-decoration: none; }
.nav__menu-link:hover { background: var(--paper-2); }
.nav__menu-divider { height: 1px; margin: 8px 0; background: var(--paper-line); }
.nav__menu-lang { display: flex; align-items: center; gap: 7px; padding: 8px 12px 12px; color: var(--nav-muted);
  font-family: var(--mono); font-size: 14px; font-weight: 500; letter-spacing: .14em; }
.nav__menu-lang a { color: var(--nav-muted); text-decoration: none; }
.nav__menu-lang [aria-current="true"] { color: var(--accent); font-weight: 600; }
.nav__menu-cta { justify-content: center; margin-top: 2px; background: var(--button-charcoal); color: var(--on-ink); }
.nav__menu-cta:hover { background: var(--button-charcoal-hover); color: var(--on-ink); }
@media (max-width: 1640px) {
  .nav__items { display: none; }
  .nav__menu { display: block; margin-left: 12px; }
  .nav > .lp-nav__lang, .nav > .nav__items + .nav__cta { margin-left: auto; }
}
@media (max-width: 720px) {
  .nav { justify-content: flex-start; gap: 8px; padding: 14px var(--gutter); }
  .nav__brand { min-width: 0; flex: 0 1 auto; }
  .nav__brand-name { font-size: 15px; }
  .nav > .nav__cta, .nav > .lp-nav__lang { display: none; }
  .lp-nav__lang { font-size: 14px; gap: 4px; letter-spacing: 0.12em; }
  .nav__cta-btn { padding: 8px 14px; font-size: 14px; }
  .nav__menu { position: fixed; top: 14px; right: var(--gutter); flex: none; margin-left: 0; }
  .nav__menu-toggle { width: 40px; height: 40px; }
  .nav__menu-panel { width: min(330px, calc(100vw - 32px)); }
}

/* 44px hit areas for the phone bar controls without changing their 40px look */
@media (max-width: 720px) {
  .nav__menu-toggle, .nav > .nav__cta .nav__cta-btn { position: relative; }
  .nav__menu-toggle::after, .nav > .nav__cta .nav__cta-btn::after { content: ""; position: absolute; inset: -3px; }  /* -3px from the padding box = 44px */
}

/* ===== Hero film (MV) — styles-hero.css, verbatim. Nothing covers it. ===== */
.hero { position: relative; background: var(--paper); color: var(--on-paper); overflow: hidden; }
.hero.hero--film { min-height: 0; padding: var(--hero-nav-h, 80px) 0 0; }
.hero__film { position: relative; width: 100%; aspect-ratio: 16 / 9; max-height: calc(100svh - var(--hero-nav-h, 80px));
  background: #fff; overflow: hidden; }
.hero__film-video { display: block; width: 100%; height: 100%; object-fit: cover; background: #fff; }
@media (max-width: 900px) { .hero__film { aspect-ratio: 4 / 5; max-height: none; } }
/* the phone nav is 61px: start from it so the film does not move up when HeroJa syncs the measured height */
@media (max-width: 720px) { .hero.hero--film { --hero-nav-h: 61px; } }

/* ==========================================================================
   Global system
   ========================================================================== */
.container { width: 100%; min-width: 0; max-width: var(--max); margin: 0 auto; position: relative; }
.sec { position: relative; padding: var(--sec-y) var(--gutter); }
.g12 { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); }
@media (max-width: 720px) { .g12 { display: block; } }

/* chapter opening: full-width 1px ink rule + mincho H2 (no eyebrows, no numbers) */
.ch-head { border-top: 1px solid var(--ink); padding-top: 24px; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--col-gap); align-items: end; }
.ch-head .h2 { grid-column: 1 / span 6; margin: 0; }
.ch-head .lede { grid-column: 7 / -1; margin: 0; }
.ch-head--start { align-items: start; }
.is-ink .ch-head { border-top-color: var(--rule-on-ink); }
@media (max-width: 1099px) {
  .ch-head .h2, .ch-head .lede { grid-column: 1 / -1; }
  .ch-head .lede { margin-top: 20px; max-width: 40em; }
}
@media (max-width: 720px) { .ch-head { display: block; padding-top: 20px; } }
/* the same chapter rule for bands whose head sits in a column */
.rule-top { border-top: 1px solid var(--ink); padding-top: 24px; }
@media (max-width: 720px) { .rule-top { padding-top: 20px; } }

/* type scale */
.h1 { margin: 0; font: 500 40px/1.3 var(--serif-jp); letter-spacing: .02em; color: var(--ink); }
.h1 em { font-style: normal; color: inherit; }
.h2 { margin: 0; font: 600 44px/1.36 var(--serif-jp); letter-spacing: .02em; color: var(--ink); }
.h2.h2--band { font: 500 24px/1.6 var(--serif-jp); }
.contact .h2 { font-size: 52px; line-height: 1.3; }
.h3 { margin: 0; font: 600 24px/1.5 var(--serif-jp); letter-spacing: .02em; color: var(--ink); }
.h4 { margin: 0; font: 600 20px/1.5 var(--serif-jp); color: var(--ink); }
.lede { font: 400 16px/1.95 var(--sans-jp); color: var(--on-paper-mute); max-width: 36em; }
.meta { margin: 0; font: 400 14px/1.7 var(--sans-jp); color: var(--on-paper-faint); }
.lat { font: 500 14px/1.5 var(--mono); letter-spacing: .06em; font-variant-numeric: tabular-nums; }
.is-ink .meta, .is-ink .lede { color: var(--on-ink-62); }
.is-ink .h2, .is-ink .h3 { color: var(--on-ink); }
.ast { font-size: 14px; color: var(--on-paper-faint); margin-left: 2px; vertical-align: super; line-height: 0; font-weight: 400; }
@media (max-width: 1099px) {
  .h2 { font-size: 38px; line-height: 1.4; }
  .h2.h2--band { font-size: 24px; line-height: 1.6; }
  .contact .h2 { font-size: 44px; }
  .h3 { font-size: 22px; }
}
@media (min-width: 1100px) { .h1 { font-size: clamp(42px, 3.7vw, 54px); line-height: 1.25; } }
@media (max-width: 1099px) and (min-width: 721px) { .h1 { font-size: 48px; line-height: 1.3; } }
@media (max-width: 720px) {
  .h1 { font-size: clamp(22px, 7.6vw, 30px); line-height: 1.35; letter-spacing: 0; }
  .h2 { font-size: 28px; line-height: 1.45; }
  .h2.h2--band { font-size: 20px; }
  .contact .h2 { font-size: 34px; line-height: 1.35; }
  .h3 { font-size: 20px; }
  .h4 { font-size: 18px; }
  .lede { font-size: 15px; line-height: 1.9; }
}
@media (max-width: 360px) {
  .h2 { font-size: 26px; }
  .contact .h2 { font-size: 30px; }
}

/* buttons & links — three kinds only */
.ar { flex: none; }
.btn-primary { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 50px; padding: 0 28px;
  font: 500 15px/1 var(--sans-jp); letter-spacing: .06em; color: #FFFFFF; background: var(--ink); border: 1px solid var(--ink);
  border-radius: var(--radius-sm); text-decoration: none; cursor: pointer; transition: background-color .2s, border-color .2s; }
.btn-primary:hover { background: var(--ink-3); border-color: var(--ink-3); }
.btn-primary:disabled { opacity: .55; cursor: not-allowed; }
@media (max-width: 720px) { .btn-primary { width: 100%; min-height: 52px; } }
.link { display: inline-flex; align-items: center; gap: 8px; font: 500 15px/1.6 var(--sans-jp); color: var(--ink);
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px; text-decoration-color: rgba(17,19,18,.32);
  transition: text-decoration-color .2s; }
.link:hover { text-decoration-color: var(--ink); }
.is-ink .link { color: #F5F5F5; text-decoration-color: rgba(255,255,255,.4); }
.is-ink .link:hover { text-decoration-color: #F5F5F5; }
@media (max-width: 720px) { .link { min-height: 44px; } }
.row { display: block; color: inherit; text-decoration: none; }
.row:hover .row__t { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; }

/* + / − icon (ink) shared by practice, FAQ and case details */
.pacc__ic { position: relative; display: inline-block; flex: none; width: 14px; height: 14px; justify-self: center; }
.pacc__ic::before, .pacc__ic::after { content: ""; position: absolute; background: var(--ink); transition: transform .35s ease; }
.pacc__ic::before { left: 0; right: 0; top: 6px; height: 2px; }
.pacc__ic::after { top: 0; bottom: 0; left: 6px; width: 2px; }

/* one-shot entrance (block level only) */
.reveal { opacity: 0; transform: translateY(12px);
  transition: opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1); }
.reveal.is-visible { opacity: 1; transform: none; }

/* ==========================================================================
   S1 Masthead (#top)
   ========================================================================== */
.mh { border-top: 1px solid var(--paper-line); padding: 64px var(--gutter) 56px; background: var(--paper); }
.mh__id { grid-column: 1 / span 6; align-self: center; padding-top: 0; }
.mh__def { margin: 20px 0 0; font: 400 17px/1.9 var(--sans-jp); color: var(--on-paper-mute); }
.mh__def .nw { color: var(--ink); font-weight: 500; }
.mh__cta { display: flex; align-items: center; gap: 28px; margin-top: 32px; flex-wrap: wrap; }
.mh__bl { grid-column: 7 / -1; }
.bl { margin: 0; border-top: 1px solid var(--ink); }
.bl__row { display: grid; grid-template-columns: 132px 1fr; column-gap: 24px; padding: 18px 0 20px; border-bottom: 1px solid var(--paper-line); }
.bl dt { padding-top: 4px; font: 500 14px/1.6 var(--sans-jp); color: var(--on-paper-faint); }
.bl dd { margin: 0; }
.bl__lead { margin: 0; font: 600 22px/1.5 var(--serif-jp); color: var(--ink); }
.bl__sub { margin: 4px 0 0; font-size: 14px; line-height: 1.8; color: var(--on-paper-mute); }
.mh__note { margin-top: 14px; }
.mh__sem { grid-column: 1 / -1; }
@media (max-width: 1099px) {
  .mh__id, .mh__bl { grid-column: 1 / -1; }
  .mh__bl { margin-top: 36px; }
  .mh__id { padding-top: 0; }
  .bl__row { grid-template-columns: 120px 1fr; }
}
@media (max-width: 720px) {
  .mh { padding: 36px var(--gutter) 44px; }
  .mh__def { font-size: 15px; line-height: 1.85; margin-top: 16px; }
  .mh__cta { flex-direction: column; align-items: stretch; gap: 12px; margin-top: 24px; }
  .mh__cta .link { align-self: flex-start; }  /* left edge like every other label */
  .mh__bl { margin-top: 32px; }
  .bl__row { grid-template-columns: 1fr; row-gap: 4px; padding: 14px 0 16px; }
  .bl dt { padding-top: 0; }
  .bl__lead { font-size: 19px; }
}

/* seminar notice (data-driven; hidden while nothing is promoted) */
.sem { margin-top: 40px; border-top: 1px solid var(--paper-line); padding-top: 16px; display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.sem__label { display: flex; align-items: baseline; gap: 12px; }
.sem__label .lat { color: var(--on-paper-faint); }
.sem__label strong { font: 500 14px/1.6 var(--sans-jp); color: var(--ink); }
.sem__events { display: flex; flex-wrap: wrap; gap: 8px 28px; flex: 1 1 auto; }
.sem__ev { display: inline-flex; align-items: baseline; gap: 10px; }
.sem__ev time { display: inline-flex; align-items: baseline; gap: 8px; flex: none; white-space: nowrap; }  /* the date + edition label never wrap (「応用/編」) */
.sem__ev time b { font: 600 15px/1.5 var(--mono); letter-spacing: .06em; font-variant-numeric: tabular-nums; color: var(--ink); }
.sem__ev time span { font-size: 14px; color: var(--on-paper-faint); }
.sem__ev .row__t { font: 500 15px/1.6 var(--sans-jp); color: var(--ink); }
@media (max-width: 720px) { .sem { flex-direction: column; align-items: flex-start; gap: 10px; } .sem__events { flex-direction: column; } }

/* ==========================================================================
   S2 Clients + 主要サービス (P2)
   ========================================================================== */
.clients { background: var(--paper-2); padding: 64px var(--gutter); }
.clients__head { align-items: end; }
.clients__head .h2 { grid-column: 1 / span 8; }
.claim { grid-column: 9 / -1; margin: 0; text-align: right; }
.claim__label { display: block; font: 500 14px/1.6 var(--sans-jp); color: var(--on-paper-faint); }
.claim__fig { display: block; margin-top: 6px; font-family: var(--serif-jp); font-weight: 500; color: var(--ink); font-variant-numeric: lining-nums; }
.claim__num { font-size: 48px; line-height: 1; letter-spacing: .01em; }
.claim__unit { font-size: 20px; margin-left: 4px; }
.clients__mq { margin-top: 28px; }
.clients__notes { display: flex; justify-content: space-between; gap: 24px; margin-top: 14px; }
.claim__note { display: none; }
@media (max-width: 1099px) {
  .claim__note { display: block; grid-column: 1 / -1; margin-top: 6px; }
  .clients__notes .clients__num-note { display: none; }
}

/* marquee — styles-rich.css 215–305, verbatim minus shadow and hover lift */
.cl-mq {
  --dur: 58s;
  --gap: clamp(16px, 3vw, 34px);
  --logo-w: clamp(132px, 13vw, 178px);
  --logo-h: clamp(54px, 5.2vw, 70px);
  display: grid;
  gap: 12px;
  overflow: hidden;
  max-width: 100%;
  overscroll-behavior-x: contain;
  padding: 18px 0;
  border-top: 1px solid var(--paper-line);
  mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent);
}
.cl-mq:last-of-type { border-bottom: 1px solid var(--paper-line); }
.cl-mq__row { overflow: hidden; min-width: 0; }
.cl-mq__track {
  display: flex; align-items: center; width: max-content; min-width: max-content;
  animation: clDrift var(--dur, 48s) linear infinite;
  will-change: transform; transform: translate3d(0, 0, 0); backface-visibility: hidden;
}
.cl-mq__row--2 .cl-mq__track { animation-direction: reverse; animation-duration: calc(var(--dur, 48s) * 1.08); }
.cl-mq__loop { display: flex; align-items: center; gap: var(--gap); flex: 0 0 auto; padding-right: var(--gap); }
@keyframes clDrift { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } }
.cl-mq__cell {
  display: flex; align-items: center; justify-content: center;
  flex: 0 0 var(--logo-w); width: var(--logo-w); height: var(--logo-h);
  padding: 10px 16px; overflow: hidden;
  border: 1px solid rgba(17, 19, 18, 0.1); border-radius: 8px;
  background: rgba(255, 255, 255, 0.86);
}
.cl-mq__cell img { width: auto; height: auto; max-width: 100%; max-height: 36px; object-fit: contain; display: block; }
.cl-mq__cell--boost img { max-height: 42px; transform: scale(1.45); }
/* BoostCapital keeps the ordinary logo size (no boost, as in Clients.jsx); its solid square takes the 4px plate corner.
   NCV: the wordmark sits small in a square white canvas, so the cell crops the canvas instead of scaling the image */
.cl-mq__cell img[src$="boostcapital.png"] { border-radius: var(--radius-sm); }
.cl-mq__cell img[src$="ncv-dark.png"] { transform: none; max-height: none; max-width: none; width: 96px; height: 96px; }
@media (max-width: 600px) {
  .cl-mq {
    --dur: 36s; --gap: 12px; --logo-w: 124px; --logo-h: 54px;
    gap: 10px; padding: 16px 0;
    mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent);
  }
  .cl-mq__cell { padding: 9px 13px; }
  .cl-mq__cell img { max-height: 30px; }
  .cl-mq__cell--boost img { max-height: 34px; }
  .cl-mq__cell img[src$="ncv-dark.png"] { width: 80px; height: 80px; }
}

/* 主要サービス */
.svc { margin-top: 56px; }
.svc__label { margin: 0 0 12px; font: 500 14px/1.6 var(--sans-jp); color: var(--on-paper-faint); }
.svc__list { border-top: 1px solid var(--ink); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--col-gap); }
.svc__item, .svc__item:first-child { position: relative; padding: 20px 0 4px; border-left: 0; }
.svc__item + .svc__item::before { content: ""; position: absolute; top: 0; bottom: 0; left: calc(var(--col-gap) / -2); width: 1px; background: var(--paper-line-strong); }
.svc__top { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.svc__top .ar { color: var(--on-paper-faint); transition: color .2s; }
.svc__item:hover .ar { color: var(--ink); }
.svc__d { display: block; margin-top: 8px; font-size: 14px; line-height: 1.8; color: var(--on-paper-mute); }
@media (max-width: 1099px) {
  .clients__head .h2, .claim { grid-column: 1 / -1; }
  .claim { text-align: left; margin-top: 16px; }
  .svc__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .svc__item, .svc__item:first-child { padding: 20px 0; }
  .svc__item:nth-child(3)::before { display: none; }
  .svc__item:nth-child(n+3) { border-top: 1px solid var(--paper-line); }
}
@media (max-width: 720px) {
  .clients { padding: 48px var(--gutter); }
  .claim { display: flex; align-items: baseline; gap: 12px; margin-top: 12px; }
  .claim__fig { margin-top: 0; }
  .claim__num { font-size: 40px; }
  .clients__mq { margin-top: 24px; }
  .clients__notes { flex-direction: column; gap: 2px; }
  .svc { margin-top: 36px; }
  .svc__list { display: block; }
  .svc__item, .svc__item:first-child, .svc__item:nth-child(3) { padding: 16px 0; border-left: 0; }
  .svc__item::before, .svc__item + .svc__item::before { display: none; }
  .svc__item + .svc__item { border-top: 1px solid var(--paper-line); }
}

/* ==========================================================================
   S3 AI Native Law Firm (#about)
   ========================================================================== */
.ai { background: var(--paper-2); padding-bottom: calc(var(--sec-y) + 8px); }
.ai .eq2 { margin-top: 40px; }

/* equation lockup — one fade, static underline */
.eq2 { --eq-t: clamp(30px, 3.6vw, 46px); --eq-op: clamp(34px, 4vw, 56px); position: relative; border: 1px solid var(--paper-line-strong); border-radius: 8px; background: var(--surface); padding: 72px 40px 56px; }
.eq2__row { display: flex; align-items: center; justify-content: center; gap: clamp(16px, 3vw, 38px); flex-wrap: wrap; }
.eq2__lhs, .eq2__rhs { display: flex; align-items: center; gap: clamp(16px, 3vw, 38px); }
.eq2__term { text-align: center; }
.eq2__term strong { display: block; font: 700 var(--eq-t)/1.15 var(--serif-jp); color: var(--on-paper); }
.eq2__term em { display: block; margin-top: 10px; font: normal 14px var(--mono); letter-spacing: .18em; text-transform: uppercase; color: var(--on-paper-faint); white-space: nowrap; }
.eq2__term--c strong { color: var(--accent); white-space: nowrap; }
.eq2__op { font: var(--eq-op)/1 var(--serif-en-display); color: var(--on-paper-faint); }
.eq2__op--eq { color: var(--accent); }
.eq2__underline { display: block; height: 2px; margin-top: 12px; background: var(--accent); }
/* terms align by their top, so the three terms and their captions share one baseline and the underline hangs
   below the result; each operator is set on the terms' optical centre line */
.eq2__lhs, .eq2__rhs { align-items: flex-start; }
@media (min-width: 721px) { .eq2__row { align-items: flex-start; } }
/* operator ink centre = 1.5px above the x-height centre of the terms (measured: Shippori x-height centre .754em below the line top,
   Space Grotesk ×/= ink centre .491em below its line top) */
.eq2__op { align-self: flex-start; margin-top: calc(var(--eq-t) * .754 - var(--eq-op) * .491 - 1.5px); }
@media (max-width: 720px) {
  .ai .eq2 { margin-top: 28px; }
  .eq2 { padding: 36px 12px 32px; }
  .eq2__row { flex-direction: column; gap: 14px; }
  .eq2__lhs { gap: 14px; }
  .eq2__rhs { gap: 10px; }
  .eq2 { --eq-t: clamp(21px, 6.8vw, 30px); --eq-op: 28px; }
  .eq2__term em { margin-top: 8px; }
}
@media (max-width: 360px) {
  .eq2 { --eq-t: clamp(21px, 6.8vw, 26px); --eq-op: 26px; }
  .eq2__lhs { gap: 10px; }
  .eq2__term em { letter-spacing: .1em; }
}

/* workflow figure */
.wf2 { margin: 56px 0 0; }
.wf2__head { display: flex; justify-content: space-between; align-items: baseline; gap: 24px; }
.wf2__title { margin: 0; font: 500 15px/1.6 var(--sans-jp); color: var(--ink); }
.wf2__legend { display: flex; gap: 28px; margin: 0; padding: 0; list-style: none; font-size: 14px; line-height: 1.6; color: var(--on-paper-faint); }
.wf2__legend li { display: inline-flex; align-items: center; gap: 8px; }
.wf2__legend li::before { content: ""; width: 14px; height: 14px; border-radius: 3px; border: 1px solid var(--ink); box-sizing: border-box; }
.wf2__legend .is-ai::before { background: var(--hatch-ink); }
.wf2__legend .is-lawyer::before { background: var(--ink); }
.wf2__steps { list-style: none; margin: 24px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--col-gap); position: relative; }
.wf2__steps::before { content: ""; position: absolute; top: 8px; left: 8px; right: calc(25% - var(--col-gap) * .75 - 8px); height: 1px; background: var(--axis); }
.wf2__step { position: relative; }
.wf2__mk { position: relative; display: block; width: 16px; height: 16px; border-radius: 3px; border: 1px solid var(--ink); background: #FFFFFF; }
.wf2__step.is-ai .wf2__mk { background: var(--hatch-ink); }
.wf2__step.is-lawyer .wf2__mk { background: var(--ink); }
.wf2__t { margin: 20px 0 8px; font: 600 20px/1.5 var(--serif-jp); color: var(--ink); }
.wf2__d { margin: 0; font-size: 15px; line-height: 1.8; color: var(--on-paper-mute); }
.wf2__days { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--col-gap); margin-top: 24px; }
.wf2__day { position: relative; padding-top: 12px; font: 500 14px/1.5 var(--mono); letter-spacing: .06em; color: var(--on-paper-faint); }
.wf2__day--0 { grid-column: 1 / span 3; }
.wf2__day--1 { grid-column: 4 / span 1; }
.wf2__day::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 6px; border: 1px solid var(--axis); border-bottom: 0; border-radius: 3px 3px 0 0; }
.acct { display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--paper-line); }
.acct__t { margin: 0; display: flex; align-items: center; gap: 12px; font: 500 18px/1.6 var(--serif-jp); color: var(--ink); }
.acct__mk { flex: none; width: 14px; height: 14px; border-radius: 3px; background: var(--ink); }
.ai__note { margin: 12px 0 0; }

@media (max-width: 899px) {
  .wf2__head { flex-direction: column; align-items: flex-start; gap: 12px; }
  .wf2__steps { display: block; padding-left: 36px; }
  .wf2__steps::before { display: none; }
  .wf2__step { padding-bottom: 24px; }
  .wf2__step:last-child { padding-bottom: 0; }
  .wf2__mk { position: absolute; left: -36px; top: 4px; }
  .wf2__t { margin: 0 0 6px; font-size: 18px; line-height: 1.5; }
  .wf2__d br { display: none; }
  .wf2__days { display: none; }
  .wf2__step:first-child::before { content: "DAY 0(当日)"; }
  .wf2__step:last-child::before { content: "DAY 1(翌営業日)まで"; }
  .wf2__step:first-child::before, .wf2__step:last-child::before { display: block; margin: 0 0 8px; font: 500 14px/22px var(--mono); letter-spacing: .06em; color: var(--on-paper-faint); }
  .wf2__step:first-child .wf2__mk, .wf2__step:last-child .wf2__mk { top: 34px; }
  .wf2__step:not(:last-child)::after { content: ""; position: absolute; left: -28px; width: 1px; background: var(--axis); top: 12px; bottom: -12px; }
  .wf2__step:first-child::after { top: 42px; }
  .wf2__step:nth-child(3)::after { bottom: -42px; }
  .acct { flex-direction: column; align-items: flex-start; gap: 8px; }
}
@media (max-width: 720px) {
  .wf2 { margin-top: 36px; }
  .acct { margin-top: 24px; }
  .acct__t { font-size: 16px; align-items: flex-start; }
  .acct__mk { margin-top: 6px; }
}

/* ==========================================================================
   S4 提供価値 (#value)
   ========================================================================== */
.value { background: var(--paper); }
.value__note { margin-top: 28px; }

@media (max-width: 720px) {
  .value__note { margin-top: 24px; }
}

/* ==========================================================================
   S5 導入事例 (#cases)
   ========================================================================== */
.cases__feat { margin-top: 48px; }
.pq { grid-column: 1 / span 6; margin: 0; }
.pq__q { margin: 0; font: 500 40px/1.6 var(--serif-jp); letter-spacing: .02em; color: var(--ink); }
/* hang the opening bracket so both lines share one text edge; close up 「。」」 (Shippori has no halt) */
.pq__q p { margin: 0; text-indent: -1em; }
.pq__stop { margin-right: -.45em; }
/* the supporting sentences are the interviewee's own words, so they sit inside the blockquote */
.pq__q .pq__sub { margin: 24px 0 0; max-width: 34em; text-indent: -.5em; font: 400 15px/1.9 var(--sans-jp); letter-spacing: .02em; color: var(--on-paper-mute); }
.pq__by { display: flex; align-items: center; gap: 20px; margin-top: 28px; }
.pq__by img { height: 44px; width: auto; margin-left: -8px; }  /* the PNG carries wide transparent padding */
.pq__who { padding-left: 16px; border-left: 1px solid var(--paper-line-strong); }
.pq__name { display: block; font: 500 15px/1.5 var(--sans-jp); color: var(--ink); }
.pq__role { display: block; font-size: 14px; line-height: 1.6; color: var(--on-paper-faint); }
.cases__side { grid-column: 7 / -1; }
.cases__cat { margin: 0; }
.cases__h { margin-top: 6px; }
.ba { width: 100%; border-collapse: collapse; margin-top: 20px; border-top: 1px solid var(--ink); font-variant-numeric: lining-nums; }
.ba th { padding: 10px 0; font: 500 14px/1.5 var(--sans-jp); color: var(--on-paper-faint); text-align: left; }
.ba td, .ba tbody th { padding: 14px 0; border-bottom: 1px solid var(--paper-line); vertical-align: baseline; }
.ba tbody th { width: 38%; text-align: left; font: 500 14px/1.5 var(--sans-jp); color: var(--ink); padding-right: 12px; }
@media (min-width: 721px) { .ba tbody th { width: auto; white-space: nowrap; padding-right: 16px; } }
.ba .b { font: 400 17px/1.4 var(--serif-jp); color: var(--on-paper-faint); white-space: nowrap; }
.ba .to { width: 28px; text-align: center; font-size: 14px; color: rgba(17,19,18,.45); }
.ba .a { font: 600 22px/1.3 var(--serif-jp); color: var(--ink); white-space: nowrap; }
.cases__src { margin-top: 12px; }
.cases__side .link { margin-top: 20px; }
.cases-more { margin-top: 56px; border-top: 1px solid var(--ink); }
.cases-more__item { padding-top: 24px; }
.cases-more__item:nth-child(1) { grid-column: 1 / span 6; }
.cases-more__item:nth-child(2) { grid-column: 7 / span 6; position: relative; }
.cases-more__item:nth-child(2)::before { content: ""; position: absolute; top: 24px; bottom: 0; left: calc(var(--col-gap) / -2); width: 1px; background: var(--paper-line); }
.cm__who { display: flex; align-items: center; gap: 10px; min-height: 28px; margin: 0; font: 500 14px/1.5 var(--sans-jp); color: var(--ink); }
.cm__who img { width: 28px; height: 28px; border-radius: 4px; }
.cm__t { margin: 10px 0 0; }
.cm__body { margin: 10px 0 0; font-size: 15px; line-height: 1.85; color: var(--on-paper-mute); }
.cm__voice { margin: 10px 0 0; font-size: 15px; line-height: 1.85; color: var(--on-paper-mute); }
.cm__voice--in { display: none; }
.cm details { margin-top: 12px; }
/* both cards share one structure: who / title / voice / <details> body; the bodies stay folded at every width */
.cm summary { display: inline-flex; align-items: center; gap: 10px; font: 500 14px/1.5 var(--sans-jp); color: var(--ink); cursor: pointer; list-style: none; min-height: 32px; }
.cm summary::-webkit-details-marker { display: none; }
.cm summary:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; }
.cm summary .pacc__ic { width: 12px; height: 12px; }
.cm summary .pacc__ic::before { top: 5.5px; height: 1px; }
.cm summary .pacc__ic::after { left: 5.5px; width: 1px; }
.cm details[open] summary .pacc__ic::after { transform: scaleY(0); }
.cm details p { margin: 8px 0 0; font-size: 15px; line-height: 1.9; color: var(--on-paper-mute); }
@media (max-width: 1099px) {
  .pq { grid-column: 1 / span 6; padding-right: 0; }
  .pq__q { font-size: 34px; }
  .cases__side { grid-column: 7 / -1; }
}
@media (max-width: 899px) {
  .pq, .cases__side { grid-column: 1 / -1; }
  .cases__side { margin-top: 44px; }
}
/* 721–899: the two case cards keep their desktop columns (shorter lines); the side block keeps a reading measure */
/* 721–899: the side block runs the full container like every other ink rule */
@media (max-width: 720px) {
  .cases-more__item:nth-child(2) { margin-top: 24px; border-top: 1px solid var(--paper-line); }
  .cases-more__item:nth-child(2)::before { display: none; }
}
@media (max-width: 720px) {
  .cases__feat { margin-top: 32px; }
  .pq__q { font-size: 22px; line-height: 1.65; }
  .pq__q br.d { display: none; }
  .pq__q .pq__sub { margin-top: 16px; }
  .pq__by { margin-top: 20px; gap: 16px; }
  .pq__by img { height: 36px; margin-left: -6px; }
  .pq__who { padding-left: 14px; }
  .cases__side { margin-top: 32px; }
  .ba tbody th { font-size: 14px; }
  .ba td, .ba tbody th { padding: 11px 0; }
  .ba .b { font-size: 15px; }
  .ba .a { font-size: 18px; }
  .cases-more { margin-top: 40px; }
  .cm__t { font-size: 18px; }
  .cm__voice { display: none; }  /* on phones the voice moves inside <details>, for both cards */
  .cm details p.cm__voice--in { display: block; }
}

/* ==========================================================================
   S6 実績 — the only ink band
   ========================================================================== */
.record { background: var(--ink); color: var(--on-ink); }
.record .h2, .record .h3 { color: var(--on-ink); }
.record .ast { color: var(--on-ink-62); }
.record__body { margin-top: 48px; }
.ledger { grid-column: 1 / span 6; }
.deals { grid-column: 7 / span 6; }
.ledger__list { margin: 20px 0 0; border-top: 1px solid var(--rule-on-ink); }
.ledger__row { display: grid; grid-template-columns: 1fr auto; align-items: end; column-gap: 24px; padding: 16px 0 14px; border-bottom: 1px solid var(--hair-on-ink); }
.ledger__row--xl { padding: 24px 0 20px; }
.ledger__row dt { font: 500 16px/1.5 var(--sans-jp); color: var(--on-ink); }
.ledger__sub { display: block; margin-top: 2px; font: 400 14px/1.6 var(--sans-jp); color: var(--on-ink-62); }
.ledger__row dd { margin: 0; font: 500 40px/1 var(--serif-jp); font-variant-numeric: lining-nums tabular-nums; white-space: nowrap; color: var(--on-ink); letter-spacing: .01em; }
.ledger__row.ledger__row--xl dd { font-size: 104px; line-height: .9; }
.ledger__row dd small { font-size: .45em; margin-left: .08em; letter-spacing: .02em; }
.ledger__row--xl dd small { font-size: .42em; }
.ledger__row--xl dt { padding-bottom: 6px; }
.ledger__note { margin-top: 16px; color: var(--on-ink-62); }
.deals__head { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 20px; row-gap: 4px; }
.deals__lead { margin: 0; font-size: 14px; line-height: 1.7; color: var(--on-ink-62); }
.deals__list { list-style: none; margin: 20px 0 0; padding: 0; border-top: 1px solid var(--rule-on-ink); }
.deal { display: grid; grid-template-columns: 104px 1fr 20px; column-gap: 16px; align-items: baseline; padding: 16px 0; border-bottom: 1px solid var(--hair-on-ink); color: inherit; text-decoration: none; }
.deal time { font: 500 14px/1.5 var(--mono); letter-spacing: .06em; color: var(--on-ink-62); font-variant-numeric: tabular-nums; }
.deal .row__t { display: block; font: 600 18px/1.5 var(--serif-jp); color: var(--on-ink); }
.deal__role { display: block; margin-top: 2px; font-size: 14px; line-height: 1.6; color: var(--on-ink-78); }
.deal .ar { color: var(--on-ink-62); align-self: center; justify-self: end; }
.deal:hover .ar { color: var(--on-ink); }
.deals .link { margin-top: 20px; }
@media (max-width: 1099px) {
  .ledger__row--xl { grid-template-columns: 1fr; }
  .ledger__row.ledger__row--xl dd { font-size: 80px; margin-top: 8px; }
  .ledger__row--xl dt { padding-bottom: 0; }
  .ledger__row dd { font-size: 34px; }
  .deal { grid-template-columns: 1fr 20px; row-gap: 2px; }
  .deal time { grid-column: 1 / -1; }
}
@media (max-width: 899px) {
  .ledger, .deals { grid-column: 1 / -1; padding: 0; }
  .deals { margin-top: 48px; }
  .ledger__row dd { font-size: 40px; }
}
@media (max-width: 720px) {
  .record__body { margin-top: 32px; }
  .ledger__row.ledger__row--xl dd { font-size: 64px; line-height: .95; }
  .ledger__row { padding: 14px 0 12px; align-items: baseline; }
  .ledger__row--xl { padding: 18px 0 16px; }
  .ledger__row dt { font-size: 14px; }
  .ledger__row dd { font-size: 32px; }
  .deals { margin-top: 44px; }
  .deals__list li:nth-child(n+3) { display: none; }  /* two matters on phones */
  .deal { grid-template-columns: 1fr 12px; column-gap: 10px; row-gap: 4px; padding: 14px 0; }
  .deal time { grid-column: 1 / -1; }
  .deal .row__t { font-size: 17px; }
}

/* ==========================================================================
   S7 対応分野 (#practice)
   ========================================================================== */
.practice { background: var(--paper); }
.practice__wrap { border-top: 1px solid var(--ink); padding-top: 24px; }
.practice__head { grid-column: 1 / span 4; }
.practice__lede { margin: 20px 0 0; max-width: 22em; font-size: 15px; line-height: 1.95; color: var(--on-paper-mute); }
.practice .pacc { grid-column: 5 / -1; }

/* accordion — styles-rich.css, ink icons, 分野 count */
.pacc { border-top: 0; }
.pacc__item { border-bottom: 1px solid var(--paper-line-strong); }
.pacc__h { margin: 0; font: inherit; }
.pacc__head {
  width: 100%; display: grid; grid-template-columns: 56px 1fr auto 40px;
  gap: 18px; align-items: center;
  padding: 18px 8px;
  background: transparent; border: none; cursor: pointer; text-align: left;
  font: inherit; color: inherit;
}
/* hover underlines the category name (as in the FAQ); no tinted square face */
.pacc__head:hover .pacc__t { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; text-decoration-color: rgba(17,19,18,.32); }
.pacc__no { font-family: var(--mono); font-size: 14px; letter-spacing: 0.18em; color: var(--on-paper-faint); font-variant-numeric: tabular-nums; }
.pacc__t { font-family: var(--serif-jp); font-size: 19px; font-weight: 600; line-height: 1.5; color: var(--on-paper); }
.pacc__n { font: 400 14px var(--sans-jp); letter-spacing: 0; color: var(--on-paper-faint); }
.pacc__item.is-open .pacc__ic::after { transform: scaleY(0); }
.pacc__body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .35s cubic-bezier(.2,.7,.2,1); }
.pacc__item.is-open .pacc__body { grid-template-rows: 1fr; }
.pacc__inner { overflow: hidden; overflow: visible clip; min-height: 0; }  /* clip only vertically (the collapse); focus rings may pass the right edge */
.pacc__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; column-gap: 24px; padding: 6px 8px 24px 82px; }  /* 6px top: the 2px focus ring (offset 3px) is not clipped */
.pacc__link {
  display: flex; align-items: baseline; gap: 10px;
  padding: 11px 0;
  background: transparent; border: none; border-bottom: 1px solid var(--paper-line);
  text-decoration: none; color: var(--on-paper);
  font-family: var(--serif-jp); font-size: 14px; font-weight: 600; line-height: 1.6;
  transition: border-color 0.3s ease, color 0.3s ease;
}
.pacc__link:hover { color: var(--ink); border-bottom-color: var(--ink); }
.pacc__link i { font-style: normal; font-family: var(--mono); font-size: 14px; color: var(--on-paper-faint); flex-shrink: 0; font-variant-numeric: tabular-nums; }
@media (max-width: 1099px) {
  .practice__head, .practice .pacc { grid-column: 1 / -1; }
  .practice__lede { max-width: 40em; }
  .practice .pacc { margin-top: 32px; border-top: 1px solid var(--ink); }
  .pacc__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 899px) { .pacc__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 899px) { .clients__notes { flex-direction: column; gap: 2px; } }
@media (max-width: 720px) {
  .practice__lede { margin-top: 16px; }
  .practice .pacc { margin-top: 28px; }
  .pacc__head { grid-template-columns: 36px 1fr 40px; gap: 12px; padding: 15px 0; }
  .pacc__n { display: none; }
  .pacc__t { font-size: 16.5px; }
  .pacc__grid { grid-template-columns: 1fr; gap: 0; padding: 6px 0 18px 48px; }  /* room for the focus ring on top */
}

/* ==========================================================================
   S8 所属弁護士とエンジニア (#lawyers)
   ========================================================================== */
.team .ch-head .h2 { grid-column: 1 / span 5; }
.team__photos { margin-top: 40px; }
.pf { grid-column: span 3; min-width: 0; }
.pf--lead { grid-column: 1 / span 6; }
.pf__img { width: 100%; height: 360px; object-fit: cover; border-radius: 6px; background: var(--paper-3); }
.pf--lead .pf__img { object-position: 50% 34%; }
.pf--sugai .pf__img { object-position: 50% 40%; }
.pf--hirukawa .pf__img { object-position: 50% 88%; }
/* the full-length lead photo is cropped (static, no hover change) so the head matches the other two portraits */
.pf__frame { display: block; overflow: hidden; border-radius: 6px; background: var(--paper-3); }
.pf--lead .pf__img { transform: scale(1.3); transform-origin: 51.7% 9.4%; }
.pf__cap { margin-top: 16px; }
.pf__cap > span { display: block; }
.pf .row__t { font: 600 22px/1.4 var(--serif-jp); color: var(--ink); }
.pf__role { margin-top: 4px; font-size: 14px; line-height: 1.6; color: var(--on-paper-mute); }
.pf__bar { font-size: 14px; line-height: 1.6; color: var(--on-paper-faint); }
.pf__spec { margin-top: 6px; font-size: 14px; line-height: 1.6; color: var(--on-paper-mute); }
.eng { margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--paper-line); }
.eng__label { grid-column: 1 / span 2; margin: 0; font: 500 14px/1.9 var(--sans-jp); color: var(--on-paper-faint); }
.eng__item { grid-column: span 5; }
.eng__item:nth-of-type(1) { grid-column: 3 / span 5; }
.eng__item:nth-of-type(2) { grid-column: 8 / span 5; }
.eng__name { display: flex; align-items: baseline; flex-wrap: wrap; column-gap: 12px; }
.eng__item .row__t { font: 600 18px/1.5 var(--serif-jp); color: var(--ink); }
.eng__role { font-size: 14px; line-height: 1.6; color: var(--on-paper-faint); }
.eng__bio { display: block; margin-top: 4px; font-size: 14px; line-height: 1.8; color: var(--on-paper-mute); }
@media (max-width: 1099px) {
  .team .ch-head .h2 { grid-column: 1 / -1; }
  .pf__img { height: 320px; }
}
@media (max-width: 899px) {
  .pf--lead { grid-column: 1 / -1; }
  .pf--lead .pf__img { height: 360px; object-position: 50% 25%; }  /* room above the head at full width */
  .pf--sugai { grid-column: 1 / span 6; margin-top: 32px; }
  .pf--hirukawa { grid-column: 7 / span 6; margin-top: 32px; }
  .pf--sugai .pf__img, .pf--hirukawa .pf__img { height: 400px; }
  .eng__label { grid-column: 1 / -1; margin-bottom: 8px; }
  .eng__item:nth-of-type(1) { grid-column: 1 / span 6; }
  .eng__item:nth-of-type(2) { grid-column: 7 / span 6; }
}
@media (max-width: 720px) {
  .team__photos { margin-top: 24px; }
  .pf, .pf--sugai, .pf--hirukawa { display: grid; grid-template-columns: 104px 1fr; column-gap: 16px; align-items: start; margin-top: 0; padding: 14px 0; border-top: 1px solid var(--paper-line); }
  .pf:last-child { border-bottom: 1px solid var(--paper-line); }
  .pf__img, .pf--lead .pf__img, .pf--sugai .pf__img, .pf--hirukawa .pf__img { width: 104px; height: 130px; }
  .pf--lead .pf__img { object-position: 49% 50%; transform: scale(1.45); transform-origin: 54% 21%; }
  .pf__cap { margin-top: 2px; }
  .pf .row__t { font-size: 18px; }
  .eng { margin-top: 24px; padding-top: 0; border-top: 0; }
  .eng__label { margin-bottom: 4px; }
  .eng__item { display: block; padding: 12px 0; }
  .eng__item + .eng__item { border-top: 1px solid var(--paper-line); }
}

/* ==========================================================================
   S9 LegalAgent for Word (#ai-agent) + careers row
   ========================================================================== */
.word { background: var(--paper-2); }
.word__wrap { border-top: 1px solid var(--ink); padding-top: 24px; }
.word__text { grid-column: 1 / span 5; }
.word__visual { grid-column: 7 / -1; min-width: 0; }
.word__body { margin: 20px 0 0; font-size: 15px; line-height: 1.9; color: var(--on-paper-mute); }
.word__pull { margin: 16px 0 0; font: 500 19px/1.7 var(--serif-jp); color: var(--ink); }
.word__text .link { margin-top: 24px; }

/* Word mock — styles-rich.css 373–436 with frame changes */
.wordmock { position: relative; width: calc(100% - 16px); max-width: 624px; margin: 0 0 28px 0; }
.wordmock__backdrop { display: none; }  /* the offset plate read as a hard drop shadow */
.wordmock__win { position: relative; background: var(--surface); border: 1px solid var(--paper-line-strong); border-radius: 8px; box-shadow: none; overflow: hidden; }
.wordmock__bar { display: flex; align-items: center; gap: 12px; padding: 10px 16px; background: var(--paper-2); border-bottom: 1px solid var(--paper-line); }
.wordmock__dots { display: flex; gap: 5px; }
.wordmock__dots span { width: 9px; height: 9px; border-radius: 50%; background: var(--paper-3); border: 1px solid var(--paper-line); }
.wordmock__name { flex: 1; text-align: center; font-family: var(--mono); font-size: 14px; letter-spacing: 0.06em; color: var(--on-paper-mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wordmock__track { font-family: var(--mono); font-size: 14px; letter-spacing: .04em; color: var(--accent); border: 1px solid rgba(var(--accent-rgb), 0.45); border-radius: 3px; padding: 2px 7px; white-space: nowrap; }
.wordmock__body { padding: 26px 30px 76px; font-family: var(--serif-jp); font-size: 14px; line-height: 2.15; letter-spacing: 0.02em; }
.wordmock__clause { font-weight: 600; font-size: 14px; margin: 0 0 6px; }
.wordmock__text { margin: 0 0 18px; position: relative; }
.wordmock__text:last-child { margin-bottom: 0; }
.wordmock__text::before { content: ""; position: absolute; left: -16px; top: 4px; bottom: 4px; width: 2px; background: var(--accent); opacity: 0.85; }
.wordmock ins { text-decoration: none; color: var(--accent); border-bottom: 1px solid rgba(var(--accent-rgb), 0.55); }
.wordmock del { color: rgba(var(--accent-rgb), 0.75); text-decoration: line-through; text-decoration-thickness: 1.5px; }
.wordmock__comment { position: absolute; right: -16px; bottom: -28px; width: min(64%, 300px); background: var(--surface); border: 1px solid var(--paper-line-strong); border-left: 3px solid var(--accent); border-radius: 6px; box-shadow: none; padding: 12px 16px 14px; }
.wordmock__comment-head { display: flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 14px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--on-paper-faint); margin-bottom: 6px; }
.wordmock__comment-head i { display: none; }
.wordmock__comment p { margin: 0; font-size: 14px; line-height: 1.8; color: var(--on-paper); }

@media (min-width: 900px) and (max-width: 1099px) {
  .word__text { grid-column: 1 / span 5; }
  .word__visual { grid-column: 7 / -1; margin-top: 0; }  /* same columns as desktop; the H2 has the empty column to breathe */
  /* the narrower window: the comment card clears 第15条, and the file name is never cut to 「…」 */
  .wordmock__body { padding-bottom: 132px; }
  .wordmock__dots { display: none; }
  .wordmock__bar { gap: 10px; padding: 10px 14px; }
  .wordmock__name { text-align: left; letter-spacing: 0; white-space: normal; line-height: 1.5; }
  .wordmock__comment-head { letter-spacing: .08em; }
}
@media (max-width: 899px) {
  .word__text, .word__visual { grid-column: 1 / -1; }
  .word__text { max-width: 40em; }
  .word__visual { margin-top: 48px; }
}
@media (max-width: 720px) {
  .word .h2 { font-size: 26px; }
  .word__body { margin-top: 16px; }
  .word__s2 { display: none; }  /* the mock below shows the same */
  .word__pull { font-size: 18px; }
  .word__text .link { margin-top: 12px; }
  .word__visual { margin-top: 28px; }
  .wordmock { margin: 0; width: 100%; }
  .wordmock__backdrop { display: none; }
  .wordmock__bar { padding: 10px 12px; gap: 10px; }
  .wordmock__dots { display: none; }  /* the file name wraps instead of being cut to 「…」 */
  .wordmock__name { white-space: normal; text-align: left; letter-spacing: 0; line-height: 1.5; }
  .wordmock__body { padding: 20px 20px 22px 26px; }
  .wordmock__text::before { left: -12px; }
  .wordmock__comment { position: static; width: auto; margin-top: 12px; }
}

/* ==========================================================================
   S11 よくあるご質問 (#faq)
   ========================================================================== */
.faq { background: var(--paper); }
.faq__wrap { border-top: 1px solid var(--ink); padding-top: 24px; }
.faq__h { grid-column: 1 / span 4; align-self: start; }
.faq__list { grid-column: 5 / -1; margin: 0; padding: 0; list-style: none; }
.faq__item { border-bottom: 1px solid var(--paper-line-strong); }
.faq__hq { margin: 0; font: inherit; }
.faq__q { width: 100%; display: grid; grid-template-columns: 40px 1fr 24px; column-gap: 16px; align-items: center; min-height: 64px; padding: 18px 0;
  background: none; border: 0; cursor: pointer; text-align: left; font: inherit; color: var(--ink); }
.faq__q:hover .faq__qt { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; text-decoration-color: rgba(17,19,18,.32); }
.faq__no { font: 500 14px/1.5 var(--mono); letter-spacing: .06em; color: var(--on-paper-faint); font-variant-numeric: tabular-nums; }
.faq__qt { font: 600 18px/1.6 var(--serif-jp); }
.faq__item.is-open .pacc__ic::after { transform: scaleY(0); }
.faq__a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .35s cubic-bezier(.2,.7,.2,1); }
.faq__item.is-open .faq__a { grid-template-rows: 1fr; }
.faq__a > div { overflow: hidden; min-height: 0; }
.faq__a p { margin: 0; padding: 0 40px 24px 56px; font-size: 15px; line-height: 1.9; color: var(--on-paper-mute); }
@media (max-width: 1099px) {
  .faq__h, .faq__list { grid-column: 1 / -1; }
  .faq__list { margin-top: 24px; border-top: 1px solid var(--ink); }
}
@media (max-width: 720px) {
  .faq__list { margin-top: 20px; }
  .faq__q { grid-template-columns: 32px 1fr 24px; column-gap: 12px; padding: 16px 0; }
  .faq__qt { font-size: 16px; }
  .faq__a p { padding: 0 0 20px; }
}

/* ==========================================================================
   S12 お問い合わせ (#contact) — the last act
   ========================================================================== */
.contact { background: var(--paper-3); padding-top: calc(var(--sec-y) + 8px); padding-bottom: calc(var(--sec-y) + 8px); }
.contact__wrap { border-top: 1px solid var(--ink); padding-top: 24px; align-items: start; }
.contact__lead { grid-column: 1 / span 6; padding-right: 24px; }
.form-card { grid-column: 7 / -1; }
.contact__text { margin: 24px 0 0; font: 400 16px/1.95 var(--sans-jp); color: var(--on-paper-mute); }
.flow { margin-top: 40px; }
.flow__h { margin: 0; font: 600 18px/1.5 var(--serif-jp); color: var(--ink); }
.flow ol { list-style: none; margin: 12px 0 0; padding: 0; border-top: 1px solid var(--ink); }
.flow li { display: flex; align-items: center; gap: 16px; min-height: 52px; border-bottom: 1px solid rgba(17,19,18,.18); font-size: 15px; line-height: 1.6; color: var(--ink); }
.flow li span { flex: none; font: 500 14px var(--mono); letter-spacing: .06em; color: var(--on-paper-faint); width: 24px; font-variant-numeric: tabular-nums; }

.form-card { background: var(--surface); border: 1px solid var(--paper-line-strong); border-radius: 8px; padding: 40px 44px 36px; box-shadow: none; }
.form-card__lead { margin: 8px 0 0; font-size: 14px; line-height: 1.8; color: var(--on-paper-mute); }
.cf { margin: 0; position: relative; }
.cf input[name="website"] { border: 0; }  /* honeypot: off-screen, no frame */
.cf__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 22px 28px; margin-top: 28px; }
.cf__field { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.cf__field--full { grid-column: 1 / -1; }
.cf__label { display: flex; align-items: center; gap: 8px; font: 500 14px/1.5 var(--sans-jp); color: var(--ink); }
.req { font: 400 14px/1 var(--sans-jp); font-style: normal; color: var(--on-paper-faint); border: 1px solid var(--paper-line-strong); border-radius: 3px; padding: 3px 6px; }
/* inputs — styles-sections.css 449–491 (verbatim; .footer__field → .cf__field, 15px) */
.cf__field input[type="text"],
.cf__field input[type="email"],
.cf__field input[type="tel"],
.cf__field select,
.cf__field textarea {
  width: 100%;
  font-family: var(--sans-jp);
  font-size: 15px;
  padding: 12px 2px;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--paper-line-strong);
  border-radius: 0;
  color: var(--on-paper);
  transition: border-color 0.2s ease;
  appearance: none;
}
.cf__field select {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'><path d='M1 1l5 5 5-5' stroke='%23333' stroke-width='1.2'/></svg>");
  background-repeat: no-repeat;
  background-position: right 4px center;
  padding-right: 28px;
  cursor: pointer;
}
.cf__field select:invalid { color: var(--on-paper-faint); }
.cf__field select option { color: var(--on-paper); }
.cf__field textarea {
  resize: vertical;
  min-height: 140px;
  height: 140px;
  line-height: 1.7;
  font-family: var(--sans-jp);
  border: 1px solid var(--paper-line-strong);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
}
.cf__field input:focus,
.cf__field select:focus,
.cf__field textarea:focus {
  outline: none;
  border-bottom-color: var(--on-paper);
}
.cf__field textarea:focus { border-color: var(--on-paper); }
.cf__field input:focus-visible, .cf__field select:focus-visible { outline: none; border-bottom: 2px solid var(--ink); padding-bottom: 11px; }
.cf__field textarea:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

.cf__field textarea::placeholder { letter-spacing: 0; }
.cf__field input::placeholder,
.cf__field textarea::placeholder {
  color: var(--on-paper-faint);
}
.cf__agree { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; font-size: 14px; line-height: 1.6; color: var(--on-paper-mute); }
.cf__check { display: inline-flex; align-items: center; gap: 10px; min-height: 32px; cursor: pointer; }
.cf__agree input { width: 18px; height: 18px; margin: 0; accent-color: var(--ink); }
.u { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.cf__agree .link { font-size: 14px; }
.cf__actions { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--paper-line); }
.cf__actions .btn-primary { min-width: 220px; }
.cf__status { margin: 0; padding: 12px 16px; border: 1px solid var(--paper-line); border-radius: 4px; font-size: 14px; line-height: 1.6; background: var(--paper-2); color: var(--ink); }
.cf__status:empty { padding: 0; border: 0; }
.cf__status--error { color: var(--accent-deep); }
/* in two columns the process list sits on the form's bottom edge, so the left column ends where the form ends */
@media (min-width: 900px) {
  .contact__wrap { align-items: stretch; }
  .contact__lead { display: flex; flex-direction: column; }
  .flow { margin-top: auto; padding-top: 40px; }
  .form-card { align-self: start; }
}
@media (max-width: 1099px) {
  .contact__lead { grid-column: 1 / span 5; padding-right: 0; }
  .form-card { grid-column: 6 / -1; }
  .form-card { padding: 36px 32px 32px; }
}
@media (max-width: 899px) {
  .contact__lead, .form-card { grid-column: 1 / -1; }
  .form-card { margin-top: 40px; }
}
@media (max-width: 720px) {
  .contact__text { margin-top: 18px; font-size: 15px; line-height: 1.9; }
  .flow { margin-top: 28px; }
  .flow__h { font-size: 17px; }
  .flow li { font-size: 14px; min-height: 46px; }
  .form-card { margin-top: 32px; padding: 24px 20px; }
  .cf__field { gap: 8px; }
  .cf__field input[type="text"], .cf__field input[type="email"], .cf__field input[type="tel"], .cf__field select { padding-top: 10px; padding-bottom: 10px; }
  .cf__field input:focus-visible, .cf__field select:focus-visible { padding-bottom: 9px; }
  .cf__field textarea { padding: 14px 12px; }
  .cf__grid { grid-template-columns: 1fr; gap: 18px; margin-top: 24px; }
  .cf__field textarea { height: 116px; min-height: 116px; }
  .cf__agree { flex-direction: column; align-items: flex-start; gap: 4px; }
  .cf__actions { flex-direction: column; align-items: stretch; gap: 14px; margin-top: 28px; padding-top: 24px; }
  .cf__actions .btn-primary { min-width: 0; }
}

/* ==========================================================================
   S13 Site footer (mega footer) — styles-sections.css 594–650 + styles-rich.css 575–604
   ========================================================================== */
footer.footer--site { padding: 0 var(--gutter) 40px; background: var(--anthropic-black); color: var(--on-ink); letter-spacing: normal; position: relative; }
.label { font-family: var(--mono); font-size: 14px; letter-spacing: 0.18em; text-transform: uppercase; }
.footer__bottom { display: grid; grid-template-columns: 1.2fr 2fr; gap: 60px; padding: 60px 0; border-top: 1px solid var(--paper-line); }
.footer__brand { display: flex; flex-direction: column; gap: 8px; }
.footer__brand-logo { width: 48px; height: 48px; object-fit: contain; }
.footer__brand-name { font-family: var(--serif-jp); font-weight: 600; font-size: 24px; margin-top: 8px; }
.footer__brand-en { font-family: var(--serif-en); font-size: 14px; color: var(--on-paper-mute); }
.footer__mission { max-width: 300px; margin: 12px 0 0; font-family: var(--serif-jp); font-size: 16px; line-height: 1.7; color: var(--on-paper); }
.footer__mission span { display: block; margin-bottom: 4px; font-family: var(--mono); font-size: 14px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--on-paper-faint); }
.footer__brand-addr { display: block; font-style: normal; font-size: 14px; color: var(--on-paper-faint); margin-top: 6px; line-height: 1.7; max-width: 280px; }
.footer__cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.footer__cols .label { color: var(--on-paper-faint); display: block; margin-bottom: 16px; }
.footer__cols ul { list-style: none; padding: 0; margin: 0; }
.footer__cols li { font-family: var(--sans-jp); font-size: 14px; line-height: 2; }
.footer__cols a { color: var(--on-paper); text-decoration: none; }
.footer__copy { display: flex; justify-content: space-between; padding-top: 24px; border-top: 1px solid var(--paper-line); font-family: var(--mono); font-size: 14px; letter-spacing: 0.15em; color: var(--on-paper-mute); text-transform: uppercase; }
.footer--site { background: var(--anthropic-black); color: var(--on-ink); }
.footer--site .footer__bottom, .footer--site .footer__copy { border-color: rgba(255, 255, 255, 0.14); }
.footer--site .footer__brand-en, .footer--site .footer__brand-addr, .footer--site .footer__copy { color: var(--on-ink-mute); }
.footer--site .footer__mission { color: var(--on-ink); }
.footer--site .footer__mission span { color: var(--on-ink-faint); }
.footer--site .footer__cols .label { color: var(--on-ink-faint); }
.footer--site .footer__cols a { color: var(--on-ink); }

/* practice mega panel */
.fmega { padding: 44px 0 40px; border-top: 1px solid rgba(255, 255, 255, 0.14); }
.fmega__title { display: block; margin-bottom: 26px; color: var(--on-ink-faint) !important; }
.fmega__cols { columns: 4 220px; column-gap: 36px; }
@media (max-width: 600px) { .fmega__cols { columns: 1; } }
.fmega__group { break-inside: avoid; margin-bottom: 24px; padding-bottom: 2px; }
.fmega__head {
  display: flex; align-items: baseline; gap: 10px;
  font-family: var(--mono); font-size: 14px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--accent-soft);
  padding-bottom: 8px; margin-bottom: 5px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}
.fmega__head i { font-style: normal; color: var(--on-ink-faint); }
.fmega__group a {
  display: flex; align-items: baseline; gap: 8px;
  padding: 5px 4px;
  text-decoration: none; color: var(--on-ink-mute);
  font-family: var(--sans-jp); font-size: 14px; line-height: 1.6;
  border-radius: 3px;
  transition: color 0.25s ease, background 0.25s ease, padding-left 0.25s ease;
}
.fmega__group a:hover { color: var(--on-ink); background: rgba(255, 255, 255, 0.06); padding-left: 9px; }
.fmega__group a i { font-style: normal; font-family: var(--mono); font-size: 14px; letter-spacing: 0.1em; color: var(--on-ink-faint); flex-shrink: 0; }

@media (max-width: 720px) {
  footer.footer--site { padding-top: clamp(60px, 12vw, 100px); padding-bottom: 32px; }
  .footer__bottom { grid-template-columns: 1fr; gap: 24px; margin-bottom: 40px; }
  .footer__cols { grid-template-columns: 1fr 1fr; gap: 24px; }
  .footer__brand-name { font-size: 20px; }
  .footer__copy { flex-direction: column; gap: 10px; padding-top: 20px; }
}
@media (max-width: 480px) { .footer__cols { grid-template-columns: 1fr; gap: 20px; } }

/* ==========================================================================
   Cross-cutting fixes: font features
   ========================================================================== */
/* the font shorthand resets font-feature-settings; keep "palt" (CJK only) on all text like production */
:where(.nav, main, footer) * { font-feature-settings: "palt" !important; }

/* Japanese set in the --mono stack falls to the OS UI font; route it to Noto Sans JP (Latin stays Space Grotesk) */
.wf2__day, .wf2__step:first-child::before, .wf2__step:last-child::before,
.wordmock__name, .wordmock__track {
  font-family: "Space Grotesk", "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
}

/* collapsed panels are out of the accessibility tree and the tab order, not just 0px tall */
.pacc__item:not(.is-open) .pacc__inner, .faq__item:not(.is-open) .faq__a > div { visibility: hidden; transition: visibility 0s .35s; }
.pacc__item.is-open .pacc__inner, .faq__item.is-open .faq__a > div { visibility: visible; transition-delay: 0s; }

/* phone tap targets. the menu JP/EN targets are 44px wherever the hamburger menu shows (tablets included) */
.nav__menu-lang a, .nav__menu-lang [aria-current] { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; }
@media (max-width: 720px) {
  .nav__menu-link, .nav__menu-cta { min-height: 44px; }
  .cf__check { min-height: 44px; }
}

/* ===== Reduced motion: everything still ===== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .reveal { opacity: 1; transform: none; }
  .cl-mq__track { animation: none !important; }
  .cl-mq__loop[aria-hidden="true"] { display: none; }
}

/* ==========================================================================
   Cross-cutting fixes: kana spacing and tracking
   ========================================================================== */
/* Shippori Mincho (Google Fonts) has no palt/halt: kana runs and 「・」 carry .kn / .kd spans (copy.js, text.jsx kern()).
   The display classes drop the +.02em tracking so kanji and tightened kana sit on one rhythm. */
.kn { letter-spacing: -.1em; }
.kd { margin-inline: -.15em; }
.h1, .h2, .h3, .pq__q { letter-spacing: 0; }

/* phone tap targets */
@media (max-width: 720px) {
  .cf__field input[type="text"], .cf__field input[type="email"], .cf__field input[type="tel"], .cf__field select { min-height: 44px; }
  .cm summary { min-height: 44px; }
  .sem__ev { padding: 10px 0; }
}

/* 360/320: the before/after columns keep a gap of at least 8px */
@media (max-width: 374px) {
  .ba tbody th { width: auto; padding-right: 8px; }
  .ba tbody th br.m { display: none; }
  .ba .b { font-size: 14px; }
  .ba .a { font-size: 16px; }
  .ba .to { width: 30px; padding-left: 8px; padding-right: 8px; }
}

/* reduced motion: the still logo band shows every client (wall at >=721, swipeable rows on phones) */
@media (prefers-reduced-motion: reduce) {
  .cl-mq { mask-image: none; -webkit-mask-image: none; }
  .cl-mq__row { overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; }
}
@media (prefers-reduced-motion: reduce) and (min-width: 721px) {
  .cl-mq { grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 12px; }
  .cl-mq__row, .cl-mq__track, .cl-mq__loop { display: contents; }
  .cl-mq__loop[aria-hidden="true"] { display: none; }
  .cl-mq__cell { width: auto; padding: 8px 12px; }
}
@media (prefers-reduced-motion: reduce) and (min-width: 1100px) {
  .cl-mq { grid-template-columns: repeat(9, minmax(0, 1fr)); }
}
/* 1100–1279: tighter gaps and side padding keep the nine-column wall legible (image cells about 100px) */
@media (prefers-reduced-motion: reduce) and (min-width: 1100px) and (max-width: 1279px) {
  .cl-mq { gap: 8px; }
  .cl-mq__cell { padding: 8px 4px; }
}

/* 390 page height: spacing only (no copy, no qualifier removed) */
@media (max-width: 720px) {
  .mh { padding: 32px var(--gutter) 40px; }
  .clients { padding: 44px var(--gutter); }
  .eq2 { padding: 32px 12px 28px; }
  .cases-more { margin-top: 32px; }
  .cm details { margin-top: 2px; }
  .record__body { margin-top: 28px; }
  .deals { margin-top: 40px; }
  .cf__actions { margin-top: 20px; padding-top: 20px; }
  .wf2 { margin-top: 32px; }
  .pq__by { margin-top: 16px; }
  .cases__side { margin-top: 28px; }
  .flow { margin-top: 24px; }
  .form-card { margin-top: 28px; }
}

/* ==========================================================================
   Services with prices, the AI chapter (equation heading, process bar, three trust columns),
   Word before the contact chapter, and the AI法務ラボ chapter
   ========================================================================== */
.cases { background: var(--paper); }
.faq { background: var(--paper-2); }
.word { background: var(--paper); }

/* ---- S3 サービスと対応分野 ---- */
.practice { background: var(--paper); }
.plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(4, auto); column-gap: var(--col-gap); margin-top: 48px; border-top: 1px solid var(--ink); }
.plan { grid-row: span 4; display: grid; grid-template-rows: subgrid; position: relative; padding-top: 24px; min-width: 0; }
.plan + .plan::before { content: ""; position: absolute; top: 0; bottom: 0; left: calc(var(--col-gap) / -2); width: 1px; background: var(--paper-line-strong); }
.plan__for { margin: 0; font: 500 14px/1.6 var(--sans-jp); color: var(--on-paper-faint); }
.plan__name { margin: 8px 0 0; font: 600 26px/1.4 var(--serif-jp); letter-spacing: .02em; }
.plan__name a { display: inline-flex; align-items: center; gap: 12px; color: var(--ink); text-decoration: none; }
.plan__name a:hover .row__t { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px; text-decoration-color: var(--whisker); }
.plan__name .ar { flex: none; color: var(--ink); }
.plan__d { margin: 10px 0 0; font-size: 15px; line-height: 1.8; color: var(--on-paper-mute); }
.plan__body { margin-top: 28px; min-width: 0; }
.plan__sub { margin: 0; padding-bottom: 10px; border-bottom: 1px solid var(--paper-line-strong); font: 500 14px/1.6 var(--sans-jp); color: var(--on-paper-faint); }
.pt { margin: 0; }
.pt__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 16px; align-items: baseline; padding: 13px 0; border-bottom: 1px solid var(--paper-line); }
.pt dt { font: 500 15px/1.6 var(--sans-jp); color: var(--ink); }
.pt__tag { display: block; margin-top: 2px; font: 400 14px/1.6 var(--sans-jp); color: var(--on-paper-faint); }
.pt dt, .pt__tag { text-wrap: balance; }
.pt dd { margin: 0; white-space: nowrap; font: 400 14px/1.4 var(--sans-jp); color: var(--ink); }
.pt dd b { margin: 0 1px; font: 500 19px/1 var(--mono); letter-spacing: .01em; font-variant-numeric: tabular-nums lining-nums; }
.kpi__row { padding: 18px 0 16px; border-bottom: 1px solid var(--paper-line); }
.kpi__fig { margin: 0; font-family: var(--serif-jp); font-weight: 500; line-height: 1; color: var(--ink); }
.kpi__fig b { font-weight: 500; font-size: 48px; font-variant-numeric: lining-nums; }
.kpi__pre, .kpi__unit { font-size: 20px; }
.kpi__pre { margin-right: 4px; }
.kpi__unit { margin-left: 3px; }
.kpi__cap { margin: 10px 0 0; font-size: 14px; line-height: 1.7; color: var(--on-paper-mute); }
.plan__note { margin: 14px 0 0; font-size: 14px; line-height: 1.8; color: var(--on-paper-faint); }
.plan__note + .plan__note { margin-top: 6px; }
.practice__wrap { margin-top: 64px; }
.practice__head .h3 { margin: 0; }
@media (max-width: 1099px) {
  .plans { display: block; }
  .plan { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-rows: auto auto 1fr; column-gap: var(--col-gap); padding: 28px 0 32px; }
  .plan + .plan { border-top: 1px solid var(--paper-line-strong); }
  .plan + .plan::before { display: none; }
  .plan__for, .plan__name, .plan__d, .plan__go { grid-column: 1; }
  .plan__d { align-self: start; }
  .plan__body { grid-column: 2; grid-row: 1 / span 3; margin-top: 0; }
  .practice__wrap { margin-top: 56px; }
}
@media (max-width: 720px) {
  .plans { margin-top: 32px; }
  .plan { display: block; padding: 24px 0 28px; }
  .plan__name { font-size: 22px; }
  .plan__name a { min-height: 44px; }
  .plan__d { font-size: 14px; }
  .plan__body { margin-top: 20px; }
  .pt__row { padding: 12px 0; }
  .pt dt { font-size: 14px; }
  .pt dd b { font-size: 17px; }
  .kpi__fig b { font-size: 40px; }
  .kpi__pre, .kpi__unit { font-size: 18px; }
  .practice__wrap { margin-top: 40px; }
}

/* ---- S4 AI Native Law Firm: equation headline + one-line thesis + the four step names on one timeline + one trust line ----
   emphasis: red only on the answer (AI Native Law Firm); on the timeline the AI step is hatched and the attorney's step is
   the solid ink bar (the other steps are the hairline); the attorney's responsibility is set in ink 600 */
.ai__head { border-top: 1px solid var(--ink); padding-top: 24px; }
.ai__kicker { margin: 0; font: 500 14px/1.6 var(--sans-jp); color: var(--on-paper-faint); }
.ai__eq { margin: 12px 0 0; display: flex; flex-wrap: wrap; align-items: baseline; column-gap: .42em; row-gap: 2px; font: 600 clamp(34px, 3.95vw, 58px)/1.25 var(--serif-jp); letter-spacing: .01em; color: var(--ink); }
.ai__eq-g { display: inline-flex; align-items: baseline; gap: .42em; white-space: nowrap; }
.ai__eq-op { font-weight: 400; color: var(--on-paper-faint); }
.ai__eq-r { color: var(--accent); }
.ai__thesis { margin: 20px 0 0; font: 600 26px/1.5 var(--serif-jp); letter-spacing: .02em; color: var(--ink); word-break: auto-phrase; }
.wf3 { margin: 56px 0 0; }
/* the day labels, bars and names share rows across the four steps (subgrid), so a wrapped day label keeps the bars level */
.wf3__steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: auto auto auto; column-gap: var(--col-gap); }
.wf3__step { min-width: 0; display: grid; grid-row: span 3; grid-template-rows: subgrid; }
.wf3__day { align-self: end; margin-bottom: 10px; font: 500 14px/1.5 var(--mono); letter-spacing: .06em; color: var(--ink); }
.wf3__bar { display: block; position: relative; height: 10px; }
.wf3__bar::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; margin-top: -.5px; background: var(--ink); }
.wf3__step.is-ai .wf3__bar::before, .wf3__step.is-lawyer .wf3__bar::before { top: 0; bottom: 0; height: auto; margin: 0; border-radius: 2px; }
.wf3__step.is-ai .wf3__bar::before { background: var(--hatch-ink); box-shadow: inset 0 0 0 1px var(--ink); }
.wf3__step.is-lawyer .wf3__bar::before { background: var(--ink); }
.wf3__t { margin: 18px 0 0; font: 600 24px/1.45 var(--serif-jp); color: var(--ink); }
.ai__lede { margin: 14px 0 0; max-width: 40em; font-size: 17px; line-height: 1.9; color: var(--on-paper-mute); word-break: auto-phrase; }
/* AI Agent / attorney split; markers match the workflow bars below (hatched = AI Agent, solid ink = attorney) */
.duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--col-gap); margin: 48px 0 0; }
.duo__p { min-width: 0; padding-top: 18px; border-top: 1px solid var(--ink); }
.duo__who { margin: 0; font: 600 15px/1.5 var(--sans-jp); color: var(--on-paper-faint); }
.duo__name { margin-right: .25em; font: 600 28px/1.3 var(--serif-jp); color: var(--ink); }
.duo__list { list-style: none; margin: 12px 0 0; padding: 0; }
.duo__list li { position: relative; padding: 12px 0 12px 26px; border-top: 1px solid var(--paper-line); font-size: 16px; line-height: 1.7; color: var(--ink); word-break: auto-phrase; }
.duo__list li::before { content: ""; position: absolute; left: 0; top: 19px; width: 12px; height: 12px; border-radius: 2px; }
.duo__p--ai .duo__list li::before { background: var(--hatch-ink); box-shadow: inset 0 0 0 1px var(--ink); }
.duo__p--lawyer .duo__list li::before { background: var(--ink); }
/* three assurances */
.pledge { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--col-gap); margin: 48px 0 0; padding: 20px 0 0; border-top: 1px solid var(--paper-line-strong); }
.pledge__i { min-width: 0; }
.pledge__t { display: block; font: 600 19px/1.5 var(--serif-jp); color: var(--ink); word-break: auto-phrase; }
.pledge__d { display: block; margin-top: 8px; font-size: 15px; line-height: 1.8; color: var(--on-paper-mute); word-break: auto-phrase; }
@media (max-width: 1099px) {
  .ai__thesis { font-size: 24px; }
  .wf3__t { font-size: 21px; }
}
/* 721–899: the equation stays on one line (a leading 「=」 only at <=720) */
@media (min-width: 721px) and (max-width: 899px) {
  .ai__eq { font-size: clamp(30px, 4.3vw, 36px); }
}
/* <=899: the steps become a vertical list; one hairline runs down the left and the AI / attorney steps thicken it */
@media (max-width: 899px) {
  .wf3__steps { display: block; }
  .wf3__step { position: relative; grid-template-columns: 28px minmax(0, 1fr); grid-template-rows: none; column-gap: 20px; padding: 14px 0; border-bottom: 1px solid var(--paper-line); }
  .wf3__step > * { grid-column: 2; }
  .wf3__step > .wf3__bar { grid-column: auto; position: absolute; left: 0; top: 0; bottom: 0; width: 28px; height: auto;
    background: linear-gradient(var(--ink), var(--ink)) 50% 0 / 1px 100% no-repeat; }
  .wf3__bar::before { left: 50%; right: auto; top: 0; bottom: 0; width: 1px; height: auto; margin: 0 0 0 -.5px; }
  .wf3__step.is-ai .wf3__bar::before, .wf3__step.is-lawyer .wf3__bar::before { width: 12px; margin-left: -6px; top: 14px; bottom: 14px; }
  .wf3__day { align-self: auto; margin: 0 0 4px; }
  .wf3__day:empty { display: none; }
  .wf3__t { margin: 0; font-size: 19px; }
}
@media (max-width: 720px) {
  .ai__eq { font-size: clamp(24px, 7.6vw, 34px); flex-direction: column; align-items: flex-start; }
  .ai__thesis { margin-top: 16px; font-size: 20px; }
  .wf3 { margin-top: 36px; }
  .duo, .pledge { grid-template-columns: 1fr; row-gap: 28px; margin-top: 36px; }
  .duo__name { font-size: 24px; }
  .pledge__d { font-size: 14px; }
}

/* ---- S9 AI法務ラボ: its own chapter (latest insight, AI news, themes, counts) ---- */
.lab { background: var(--paper-2); }
.lab__title { grid-column: 1 / span 6; }
.lab__intro { grid-column: 7 / -1; }
.lab__intro .lede + .lede { margin-top: 12px; }
.lab__statrow { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 20px 48px; margin-top: 28px; }
.lab__stats { display: flex; gap: 40px; margin: 0; }
.lab__stats dt { font: 500 14px/1.6 var(--sans-jp); color: var(--on-paper-faint); }
.lab__stats dd { margin: 6px 0 0; font-family: var(--serif-jp); color: var(--ink); line-height: 1; }
.lab__stats b { font-weight: 500; font-size: 52px; font-variant-numeric: lining-nums tabular-nums; }
.lab__stats small { margin-left: 4px; font-size: 18px; }
.lab__statrow .link { margin-bottom: 2px; }
.lab__news { grid-column: 9 / -1; }
.lab__label { margin: 0; padding-bottom: 12px; border-bottom: 1px solid var(--ink); font: 500 14px/1.6 var(--sans-jp); color: var(--ink); }
.news__meta { font: 500 14px/1.5 var(--mono); letter-spacing: .04em; color: var(--on-paper-faint); font-variant-numeric: tabular-nums; }
.news__t { text-wrap: pretty; }
.lab .vh { font-family: var(--sans-jp); }
.news { list-style: none; margin: 0; padding: 0; }
.news .row { display: block; padding: 14px 0 15px; border-bottom: 1px solid var(--paper-line); color: inherit; text-decoration: none; }
.news__meta { display: block; }
.news__t { display: block; margin-top: 6px; font: 600 16px/1.65 var(--serif-jp); color: var(--ink); word-break: auto-phrase; }
.lab__newslink { margin-top: 18px; }
.lab__themes { display: flex; align-items: baseline; gap: 10px 24px; flex-wrap: wrap; min-width: 0; }
.lab__themes ul { display: flex; flex-wrap: wrap; gap: 8px 0; list-style: none; margin: 0; padding: 0; }
.lab__themes li + li { border-left: 1px solid var(--paper-line-strong); }
.lab__themes a { display: inline-block; padding: 0 14px; font: 500 15px/1.6 var(--sans-jp); color: var(--ink); text-decoration: none; }
.lab__themes li:first-child a { padding-left: 0; }
.lab__themes a:hover { text-decoration: underline; text-underline-offset: 5px; }
@media (max-width: 1099px) {
  .lab__title, .lab__intro { grid-column: 1 / -1; }
  .lab__intro { margin-top: 24px; }
  .lab__news { grid-column: 8 / -1; }
}
@media (max-width: 899px) {
  .lab__news { grid-column: 1 / -1; }
  .lab__news { margin-top: 40px; }
}
@media (max-width: 720px) {
  .lab__statrow { margin-top: 20px; }
  .lab__stats { gap: 32px; }
  .lab__stats b { font-size: 40px; }
  .news__t { font-size: 16px; }
  .lab__themes ul { gap: 6px 0; }
  .lab__themes a { padding: 0 10px; font-size: 14px; }
}

/* AI法務ラボ — keep the theme row and the lab link on one line at desktop widths */
.lab__themes a { padding: 0 12px; }
.lab__themes { gap: 10px 18px; }
/* テーマ別に読む: no separators, so wrapped rows start flush left */
.lab__themes li + li { border-left: 0; }
.lab__themes a, .lab__themes li:first-child a { padding: 0; }
.lab__themes ul { gap: 8px 24px; }
@media (max-width: 720px) {
  .lab__themes ul { gap: 2px 20px; }
  .lab__themes a, .lab__themes li:first-child a { padding: 6px 0; }
}
/* the M&A figures stay distinct without leading the three plans */
@media (min-width: 1100px) {
  .kpi__fig b { font-size: 38px; }
  .kpi__pre, .kpi__unit { font-size: 18px; }
}

/* ==========================================================================
   Images for the services and the lab, and the careers chapter
   Background order: mh W / clients P2 / practice W / ai P2 / value INK / lab P2 / cases W / record INK /
   lawyers W / careers P2 / faq W / word P2 / contact P3
   ========================================================================== */
.careers { background: var(--paper-2); }
.faq { background: var(--paper); }
.word { background: var(--paper-2); }

/* ---- service illustrations (existing LP visuals) ---- */
.plans { grid-template-rows: repeat(5, auto); }
.plan { grid-row: span 5; }
.plan__img { margin: 0 0 22px; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 6px; border: 1px solid var(--paper-line); background: var(--paper-2); }
.plan__img img { display: block; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 1099px) {
  .plan { grid-template-rows: auto auto auto auto 1fr; }
  .plan__img { grid-column: 1; margin-bottom: 18px; }
  .plan__body { grid-row: 1 / span 5; }
}
@media (max-width: 720px) {
  .plan__img { margin-bottom: 16px; }
}

/* ---- S9 採用: the careers-page OGP image carries the headline 「生成AIの大波に乗れ！」, so the image leads under the rule
   and the H2 is visually hidden. The text hangs from the rule; the image is centred beside it. ---- */
.careers__wrap { border-top: 1px solid var(--ink); padding-top: 40px; align-items: start; }
.careers__og { grid-column: 1 / span 7; grid-row: 1; margin: 0; overflow: hidden; border-radius: 6px; border: 1px solid var(--paper-line); background: var(--paper-2); }
.careers__og img { display: block; width: 100%; height: auto; }
.careers__body { grid-column: 8 / -1; grid-row: 1; }
.careers__kicker { margin: 0; font: 500 14px/1.6 var(--sans-jp); color: var(--on-paper-faint); }
.careers__lead { margin: 12px 0 0; font-size: 16px; line-height: 1.95; color: var(--on-paper-mute); word-break: auto-phrase; }
.careers__spec { margin: 28px 0 0; border-top: 1px solid var(--ink); }
.careers__spec div { display: grid; grid-template-columns: 124px minmax(0, 1fr); column-gap: 16px; align-items: baseline; padding: 12px 0; border-bottom: 1px solid var(--paper-line); }
.careers__spec dt { font: 500 14px/1.6 var(--sans-jp); color: var(--on-paper-faint); }
.careers__spec dd { margin: 0; font-size: 15px; line-height: 1.75; color: var(--ink); word-break: auto-phrase; }
.careers__spec strong { font: 600 21px/1.4 var(--serif-jp); }
.careers__others { margin: 18px 0 0; font-size: 14px; line-height: 1.8; color: var(--on-paper-mute); }
.careers__ol { margin-right: 14px; color: var(--on-paper-faint); }
.careers__cta { display: flex; align-items: center; flex-wrap: wrap; gap: 16px 28px; margin-top: 28px; }
/* fallback: if the OGP image fails to load, the hidden H2 is shown (CareersJa adds .is-noimg) */
.careers.is-noimg .careers__og { display: none; }
.careers.is-noimg .careers__body { grid-column: 1 / span 8; }
.careers.is-noimg #careers-h { margin-top: 10px; }
@media (max-width: 1279px) {
  .careers__og { grid-column: 1 / span 6; }
  .careers__body { grid-column: 7 / -1; }
}
@media (min-width: 1100px) {
  .careers__og { align-self: center; }  /* the image is always shorter than the text: centred beside it, not left hanging over a void */
}
/* below 1100 the image would shrink to a thumbnail beside a tall text column: stack it above the text */
@media (max-width: 1099px) {
  .careers__og { grid-column: 1 / span 9; }
  .careers__body { grid-column: 1 / span 10; grid-row: auto; margin-top: 28px; }
}
@media (max-width: 899px) {
  .careers__og, .careers__body, .careers.is-noimg .careers__body { grid-column: 1 / -1; }
  .careers__body { grid-row: auto; margin-top: 28px; }
}
@media (max-width: 720px) {
  .careers__wrap { padding-top: 24px; }
  .careers__body { margin-top: 24px; }
  .careers__lead { font-size: 15px; }
  .careers__spec div { grid-template-columns: 1fr; row-gap: 2px; }
  .careers__spec strong { font-size: 19px; }
  .careers__cta { flex-direction: column; align-items: stretch; gap: 12px; }
  .careers__cta .link { justify-content: center; }
}

/* ---- S10 AI法務ラボ: three image cards, then AI news + themes ---- */
.lab__cards { margin-top: 56px; }
.lcards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--col-gap); }
.lcard { min-width: 0; }
.lcard .row { display: block; padding-top: 20px; color: inherit; text-decoration: none; }
.lcard__img { display: block; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 6px; border: 1px solid var(--paper-line); background: var(--paper-2); }
.lcard__img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.lcard__meta { display: block; margin-top: 16px; font: 500 14px/1.5 var(--mono); letter-spacing: .04em; color: var(--on-paper-faint); font-variant-numeric: tabular-nums; }
.lcard__t { display: block; margin-top: 8px; font: 600 20px/1.55 var(--serif-jp); color: var(--ink); word-break: auto-phrase; }
.lcard__sub { display: block; margin-top: 4px; font: 400 14px/1.7 var(--sans-jp); color: var(--on-paper-mute); word-break: auto-phrase; }
.lcard .row:hover .lcard__t { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px; text-decoration-color: rgba(17,19,18,.4); }
.lab__lower { margin-top: 64px; align-items: start; }
.lab__lower .lab__news { grid-column: 1 / span 8; margin-top: 0; }
.news .row { display: grid; grid-template-columns: 250px minmax(0, 1fr); column-gap: 20px; align-items: baseline; }
.news .news__t { margin-top: 0; }
.lab__lower .lab__themes { grid-column: 9 / -1; display: block; }
.lab__lower .lab__themes ul { display: block; margin: 0; padding: 0; list-style: none; }
.lab__lower .lab__themes li { border-bottom: 1px solid var(--paper-line); }
.lab__lower .lab__themes li + li { border-left: 0; }
.lab__lower .lab__themes a, .lab__lower .lab__themes li:first-child a { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 13px 0; font: 500 15px/1.6 var(--sans-jp); color: var(--ink); text-decoration: none; }
.lab__lower .lab__themes a .ar { color: var(--on-paper-faint); }
.lab__lower .lab__themes a:hover .row__t { text-decoration: underline; text-underline-offset: 5px; }
@media (max-width: 1099px) {
  .lab__lower .lab__news { grid-column: 1 / span 7; }
  .lab__lower .lab__themes { grid-column: 8 / -1; }
  .news .row { grid-template-columns: minmax(0, 1fr); row-gap: 4px; }
  .lcard__t { font-size: 18px; }
}
@media (max-width: 899px) {
  .lab__lower .lab__news, .lab__lower .lab__themes { grid-column: 1 / -1; }
  .lab__lower .lab__themes { margin-top: 40px; }
}
/* the three image cards stay a grid down to 721 (the eyecatches stay readable); phones get the thumbnail list */
@media (min-width: 721px) and (max-width: 899px) {
  .lcard__t { font-size: 17px; }
  .lcard__sub { font-size: 14px; }
}
@media (max-width: 720px) {
  .lab__cards { margin-top: 36px; }
  .lcards { grid-template-columns: minmax(0, 1fr); }
  .lcard .row { display: grid; grid-template-columns: 112px minmax(0, 1fr); column-gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--paper-line); }
  .lcard__img { grid-row: 1 / span 3; align-self: start; }
  .lcard__meta { margin-top: 0; }
  .lcard__t { margin-top: 4px; font-size: 16px; }
  .lcard__sub { font-size: 14px; }
  .lab__lower { margin-top: 40px; }
}

/* ==========================================================================
   提供価値 as a three-row ink band.
   Red only on the client's gain (1営業日); the old figure is struck through like a redline.
   ========================================================================== */
.value.is-ink { background: var(--ink); color: var(--on-ink); }
.vrows { margin: 40px 0 0; border-top: 1px solid var(--rule-on-ink); }
.vrow { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); align-items: center; padding: 40px 0; border-bottom: 1px solid var(--hair-on-ink); }
.vrow__label { grid-column: 1 / span 3; margin: 0; }
.vrow__ja { display: block; font: 600 21px/1.5 var(--serif-jp); color: var(--on-ink); }
.vrow__ja .ast { color: var(--on-ink-62); }
.vrow__en { display: block; margin-top: 6px; font: 500 14px/1.4 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--on-ink-62); }
.vrow__fig { grid-column: 4 / span 5; margin: 0; display: flex; align-items: flex-end; flex-wrap: wrap; gap: 12px 22px; min-width: 0; }
.vrow__text { grid-column: 9 / -1; margin: 0; }
.vrow__text p { margin: 0; font-size: 15px; line-height: 1.9; color: var(--on-ink-78); word-break: auto-phrase; }
.vrow__text .vrow__sub { margin-top: 8px; font-size: 14px; line-height: 1.85; color: var(--on-ink-62); }
.vrow__go { margin-top: 12px !important; }
.vwas { display: flex; flex-direction: column; gap: 6px; padding-bottom: 16px; }
.vwas s { font: 400 26px/1.2 var(--serif-jp); color: var(--on-ink-62); text-decoration-thickness: 1px; }  /* 1px keeps the 〜 readable above and below the strike */
.vwas__cap { font-size: 14px; line-height: 1.4; color: var(--on-ink-62); }
.vto { padding-bottom: 26px; font-size: 26px; line-height: 1; color: var(--on-ink-62); }
.vnow { display: inline-flex; align-items: baseline; gap: 8px; padding-bottom: 8px; border-bottom: 3px solid var(--accent); color: var(--accent); line-height: 1; }
/* figures in Shippori lining, as the other large numbers on the page; the red 1 stays the largest glyph in the band */
.vnow b { font: 500 clamp(104px, 8.9vw, 128px)/.86 var(--serif-jp); letter-spacing: -.01em; font-variant-numeric: lining-nums; }
.vnow span { font: 500 42px/1 var(--serif-jp); }
.vpre { padding-bottom: 12px; font: 500 22px/1 var(--serif-jp); color: var(--on-ink); }
.vbig { font: 500 clamp(64px, 5.6vw, 84px)/1 var(--serif-jp); letter-spacing: 0; color: var(--on-ink); font-variant-numeric: lining-nums; }
.vword { font: 500 clamp(40px, 3.4vw, 50px)/1.15 "Space Grotesk", "Noto Sans JP", sans-serif; letter-spacing: -.01em; color: var(--on-ink); }  /* the ・ comes from the loaded Noto Sans JP, not a system font */
.value .value__note { margin-top: 24px; }
@media (max-width: 1099px) {
  .vrow { row-gap: 18px; padding: 32px 0; }
  .vrow__label { grid-column: 1 / -1; }
  .vrow__fig { grid-column: 1 / span 7; }
  .vrow__text { grid-column: 8 / -1; }
  .vnow b { font-size: 104px; }
  .vnow span { font-size: 34px; }
  .vbig { font-size: 68px; }
  .vword { font-size: 44px; }
}
@media (max-width: 720px) {
  .vrows { margin-top: 28px; }
  .vrow { display: block; padding: 26px 0 28px; }
  .vrow__fig { margin-top: 14px; gap: 10px 16px; }
  .vrow__text { margin-top: 18px; }
  .vwas s { font-size: 20px; }
  .vto { font-size: 20px; padding-bottom: 20px; }
  .vnow b { font-size: 88px; }
  .vnow span { font-size: 28px; }
  .vpre { font-size: 18px; padding-bottom: 8px; }
  .vbig { font-size: clamp(44px, 13vw, 56px); }
  .vword { font-size: clamp(30px, 9vw, 38px); }
  .vrow__text p { font-size: 14px; }
}
@media (max-width: 359px) {
  .vto { display: none; }  /* the arrow would end line 1 alone; the strike already marks the replaced figure */
}

/* ==========================================================================
   所属弁護士 — the pointed portrait widens, the others give way.
   Sizes follow a flex-grow design (lead 2 : 1 : 1 at rest; hovered 3 / 2 / 1.8, others 1).
   ≥900px: static rest layout for every pointer (hover: none keeps it).
   ========================================================================== */
/* the specialty copies laid out at the widened/narrowed widths (TeamJa .pf__alt) are used only by the hover layout below */
.pf__cap > .pf__alt { display: none; }
@media (min-width: 900px) {
  .team__photos { display: flex; gap: var(--col-gap); align-items: flex-start; }
  .team__photos .pf, .team__photos .pf--sugai, .team__photos .pf--hirukawa { flex: 1 1 0; min-width: 0; margin-top: 0; grid-column: auto; }
  .team__photos .pf--lead { flex-grow: 2; }
  .team__photos .pf__img, .team__photos .pf--lead .pf__img, .team__photos .pf--sugai .pf__img, .team__photos .pf--hirukawa .pf__img { height: 360px; }
  .team__photos .pf--lead .pf__img { object-position: 50% 34%; }
  /* 須貝's source has almost no room above the hair: anchor it to the top. At rest his frame never crops vertically,
     so this only matters when the card widens, and it needs no crop animation. */
  .team__photos .pf--sugai .pf__img { object-position: 50% 0%; }
  .pf__cap { min-height: 132px; }  /* room for a two-line specialty */
}
@media (min-width: 900px) and (max-width: 1099px) {
  .team__photos .pf__img, .team__photos .pf--lead .pf__img, .team__photos .pf--sugai .pf__img, .team__photos .pf--hirukawa .pf__img { height: 320px; }
}
/* Hover-capable pointers: the same rest layout drawn without layout shift. Every card keeps one fixed layout box
   (its own widened width) stacked in one grid cell; its place comes from transform and its visible width from
   clip-path, so no card and nothing below the row ever moves in layout (CLS 0; the row height never changes).
   Inside the card only the photo resizes, from the card's fixed top-left corner (object-fit, as in the flex
   version), which moves no element's start point. Captions keep their rest width, so their lines never re-wrap
   (a re-wrap moves text and counts as a shift). Only the specialty line of 須貝 and 比留川 breaks differently at the
   widths their cards take in the hover states, so each of those cards also holds copies of it laid out once at
   those widths (.pf__alt--s1/2/3: 朝戸 / 須貝 / 比留川 hovered; hidden from assistive technology; stacked in one
   grid cell with the real line, so the caption height is the same in every state), and the matching copy
   cross-fades in: the lines break as in the flex version without any reflow. 朝戸's caption fits one line at every
   width it takes.
   Only the three weights (--pf-g1/2/3, registered as numbers) are animated; every length is computed from them and
   the row width (cqw) in each frame. So resizing, zooming or a scrollbar appearing lays the row out again at once,
   and only a change of hover/focus state moves the cards (transitions on the lengths themselves would animate every
   width change).
   The clip-path is also the hit area. It ends exactly at the visible right edge (only a 2px paint margin for glyph
   edges on the other sides, where widening never moves the edge towards the pointer), so a resting pointer can never
   flip a card between widened and rest; the 6px outset for the focus ring applies only while the card has keyboard
   focus.
   The row clips its own horizontal overflow (8px of room for the focus ring), so the stacked card boxes never
   widen the page. */
@property --pf-g1 { syntax: "<number>"; inherits: true; initial-value: 2; }
@property --pf-g2 { syntax: "<number>"; inherits: true; initial-value: 1; }
@property --pf-g3 { syntax: "<number>"; inherits: true; initial-value: 1; }
@supports (width: 1cqw) and selector(:has(a)) {
  @media (min-width: 900px) and (hover: hover) {
    /* --pf-h1/2/3: the weight of 朝戸 / 須貝 / 比留川 while hovered (the others 1); at rest 2 : 1 : 1 */
    .team__photos { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; align-items: start; container-type: inline-size;
      margin-inline: -8px; padding-inline: 8px; overflow-x: clip;
      --pf-lead-max: 3; --pf-h1: var(--pf-lead-max); --pf-h2: 2; --pf-h3: 1.8;
      --pf-g1: 2; --pf-g2: 1; --pf-g3: 1; }
    .team__photos:has(.pf:hover, .pf:focus-visible) { --pf-g1: 1; --pf-g2: 1; --pf-g3: 1; }
    .team__photos:has(.pf--lead:hover, .pf--lead:focus-visible) { --pf-g1: var(--pf-h1); }
    .team__photos:has(.pf--sugai:hover, .pf--sugai:focus-visible) { --pf-g2: var(--pf-h2); }
    .team__photos:has(.pf--hirukawa:hover, .pf--hirukawa:focus-visible) { --pf-g3: var(--pf-h3); }
    .team__photos .pf, .team__photos .pf--sugai, .team__photos .pf--hirukawa {
      --pf-a: calc(100cqw - 2 * var(--col-gap));
      --pf-sum: calc(var(--pf-g1) + var(--pf-g2) + var(--pf-g3));
      --pf-w: calc(var(--pf-a) * var(--pf-g) / var(--pf-sum));
      grid-area: 1 / 1; justify-self: start; flex: none; width: var(--pf-max); margin-top: 0;
      transform: translateX(var(--pf-x));
      clip-path: inset(-2px calc(var(--pf-max) - var(--pf-w)) -2px -2px);
      transition: --pf-g1 .7s cubic-bezier(.22, .8, .2, 1), --pf-g2 .7s cubic-bezier(.22, .8, .2, 1), --pf-g3 .7s cubic-bezier(.22, .8, .2, 1);
    }
    .team__photos .pf:focus-visible { clip-path: inset(-6px calc(var(--pf-max) - var(--pf-w) - 6px) -6px -6px); }
    .team__photos .pf--lead { --pf-g: var(--pf-g1); --pf-rest: .5; --pf-max: calc(var(--pf-a) * var(--pf-h1) / (var(--pf-h1) + 2)); --pf-x: 0px; }
    .team__photos .pf--sugai { --pf-g: var(--pf-g2); --pf-rest: .25; --pf-max: calc(var(--pf-a) * var(--pf-h2) / (var(--pf-h2) + 2));
      --pf-x: calc(var(--pf-a) * var(--pf-g1) / var(--pf-sum) + var(--col-gap)); }
    .team__photos .pf--hirukawa { --pf-g: var(--pf-g3); --pf-rest: .25; --pf-max: calc(var(--pf-a) * var(--pf-h3) / (var(--pf-h3) + 2));
      --pf-x: calc(100cqw - var(--pf-w)); }
    .team__photos .pf__frame { clip-path: inset(0 calc(var(--pf-max) - var(--pf-w)) 0 0 round 6px); }
    .team__photos .pf__img, .team__photos .pf--lead .pf__img, .team__photos .pf--sugai .pf__img, .team__photos .pf--hirukawa .pf__img {
      width: var(--pf-w); max-width: none; }
    /* name, role, bar, specialty in rows 1–4; the specialty copies share row 4 (align-content keeps the rows at the top) */
    .team__photos .pf__cap { width: calc(var(--pf-a) * var(--pf-rest)); display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; }
    .team__photos .pf__cap > .pf__spec { grid-area: 4 / 1; transition: opacity .35s ease; }
    .team__photos .pf__cap > .pf__alt { display: block; justify-self: start; width: var(--pf-alt-w); opacity: 0; pointer-events: none; }
    /* each copy's width is its card's width in that state: A × weight / sum of weights */
    .team__photos .pf__alt--s1 { --pf-alt-w: calc(var(--pf-a) / (var(--pf-h1) + 2)); }
    .team__photos .pf--sugai .pf__alt--s2 { --pf-alt-w: calc(var(--pf-a) * var(--pf-h2) / (var(--pf-h2) + 2)); }
    .team__photos .pf--sugai .pf__alt--s3 { --pf-alt-w: calc(var(--pf-a) / (var(--pf-h3) + 2)); }
    .team__photos .pf--hirukawa .pf__alt--s3 { --pf-alt-w: calc(var(--pf-a) * var(--pf-h3) / (var(--pf-h3) + 2)); }
    .team__photos:has(.pf--lead:hover, .pf--lead:focus-visible) .pf__alt--s1,
    .team__photos:has(.pf--sugai:hover, .pf--sugai:focus-visible) .pf__alt--s2,
    .team__photos:has(.pf--hirukawa:hover, .pf--hirukawa:focus-visible) .pf__alt--s3 { opacity: 1; }
    .team__photos:has(.pf--lead:hover, .pf--lead:focus-visible) .pf__cap:has(> .pf__alt--s1) > .pf__spec:not(.pf__alt),
    .team__photos:has(.pf--sugai:hover, .pf--sugai:focus-visible) .pf__cap:has(> .pf__alt--s2) > .pf__spec:not(.pf__alt),
    .team__photos:has(.pf--hirukawa:hover, .pf--hirukawa:focus-visible) .pf__cap:has(> .pf__alt--s3) > .pf__spec:not(.pf__alt) { opacity: 0; }
    /* 比留川's tall portrait moves up to the face when widened. The crop is timed per direction so the head travels
       one way only: it settles quickly while the card widens, and eases back while it narrows. */
    .team__photos .pf--hirukawa .pf__img { transition: object-position .7s cubic-bezier(.42, 0, .58, 1); }
    .team__photos .pf--hirukawa:hover .pf__img, .team__photos .pf--hirukawa:focus-visible .pf__img { object-position: 50% 28%; transition: object-position .25s cubic-bezier(.1, .9, .2, 1); }
    .team__photos .pf:hover .row__t { text-decoration: none; }
  }
  /* below 1000px a lead at 3 would squeeze 須貝's caption into a third line */
  @media (min-width: 900px) and (max-width: 999px) and (hover: hover) {
    .team__photos { --pf-lead-max: 2.5; }
  }
}

/* Service cards: the image links to the LP and a text link closes the intro. */
.plan__img { display: block; }
.plan__img img { transition: opacity .2s; }
a.plan__img:hover img { opacity: .92; }
.plan__go { margin: 14px 0 0; }

/* Editorial service illustrations use a separate, selectable service heading. */
.plans:has(.plan--editorial) { grid-template-rows: repeat(6, auto); }
.plan--editorial { grid-row: span 6; }
.plan--editorial .plan__name { margin: 0 0 10px; }
@media (min-width: 721px) and (max-width: 1099px) {
  .plan--editorial { grid-template-rows: repeat(5, auto) 1fr; }
  .plan--editorial .plan__body { grid-row: 1 / span 6; }
}

/* Section order: … 採用 (P2) / よくあるご質問 (W) / AI法務ラボ (P2) / LegalAgent for Word (W) / お問い合わせ (P3) */
.word { background: var(--paper); }

/* ===== S3 AI Native Law Firm (#about) — the legal outsourcing LP's "How it works" chapter, same look.
   Ported from assets/service-lp/lx/lx.css (lp.css + lp-value.css), scoped to .lxs. ===== */
.lxs {
  --lx-max: 1440px; --lx-gutter: clamp(20px, 4vw, 64px); --lx-sec: clamp(72px, 8vw, 120px);
  --lx-serif: "Shippori Mincho", "Noto Serif JP", "YuMincho", "Hiragino Mincho ProN", serif;
  --lx-sans: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  --lx-en: "Space Grotesk", "Inter", system-ui, sans-serif;
  --lx-ink: #111312; --lx-mute: rgba(17, 19, 18, 0.74); --lx-faint: rgba(17, 19, 18, 0.56); --lx-line: rgba(17, 19, 18, 0.14);
  --lx-paper-3: #e4ecea; --lx-red: #d53953; --lx-red-deep: #b22743; --lx-r: 8px;
  --lx-navy: #12233a; --lx-navy-3: #2a4a74; --lx-teal: #17675f; --lx-teal-2: #24877d; --lx-teal-soft: #dcefeb; --lx-red-soft: #fcebef;
  background: #fff; color: var(--lx-ink); font-family: var(--lx-sans); font-size: 18px; line-height: 1.9; letter-spacing: .02em; font-feature-settings: "palt";
}
.lxs.lx-sec { padding: var(--lx-sec) 0; }
.lxs .lx-wrap { width: min(var(--lx-max), calc(100% - var(--lx-gutter) * 2)); margin: 0 auto; }
.lxs .lx-sup { font-size: .7em; line-height: 0; vertical-align: super; color: var(--lx-faint); margin-left: 1px; }
.lxs .lx-ch { position: relative; border-top: 1px solid var(--lx-line); padding-top: 28px; margin-bottom: 48px; }
.lxs .lx-ch::before { content: ""; position: absolute; left: 0; top: -2px; width: 80px; height: 3px; background: var(--lx-teal); }
.lxs .lx-kicker { display: flex; align-items: center; gap: 12px; margin: 0 0 14px; font-family: var(--lx-en); font-weight: 600; font-size: 14px; letter-spacing: .14em; text-transform: uppercase; color: var(--lx-teal); }
.lxs .lx-kicker::before { content: ""; width: 22px; height: 2px; background: currentColor; }
.lxs .lx-ch h2 { margin: 0; max-width: 22em; font-family: var(--lx-serif); font-weight: 600; font-size: clamp(32px, 3.8vw, 52px); line-height: 1.3; letter-spacing: .02em; color: var(--lx-navy); text-wrap: balance; word-break: auto-phrase; }
.lxs .lx-ch .lx-lede { margin: 22px 0 0; max-width: 32em; font-size: 19px; line-height: 1.95; color: var(--lx-mute); word-break: auto-phrase; }
.lxs .lx-opener { margin: -8px 0 44px; }
.lxs .lx-opener img { display: block; width: 100%; height: auto; aspect-ratio: 21 / 9; object-fit: cover; border-radius: var(--lx-r); }
.lxs .lx-duo { display: grid; grid-template-columns: minmax(0, 1fr) 56px minmax(0, 1fr); align-items: stretch; }
.lxs .lx-duo__p { padding: 30px 32px 22px; border-radius: 12px; }
.lxs .lx-duo__p--ai { background: var(--lx-teal-soft); }
.lxs .lx-duo__p--lw { background: var(--lx-red-soft); }
.lxs .lx-duo__who { margin: 0 0 8px; font-size: 17px; font-weight: 600; color: var(--lx-mute); }
.lxs .lx-duo__who span { margin-right: 6px; font-family: var(--lx-serif); font-weight: 700; font-size: clamp(28px, 2.6vw, 36px); letter-spacing: .01em; }
.lxs .lx-duo__p--ai .lx-duo__who span { color: var(--lx-teal); }
.lxs .lx-duo__p--lw .lx-duo__who span { color: var(--lx-red-deep); }
.lxs .lx-duo__p ul { margin: 0; padding: 0; list-style: none; }
.lxs .lx-duo__p li { position: relative; padding: 14px 0 14px 28px; border-top: 1px solid rgba(17, 19, 18, .1); font-size: 18px; line-height: 1.6; word-break: auto-phrase; }
.lxs .lx-duo__p li::before { content: ""; position: absolute; left: 2px; top: 23px; width: 10px; height: 10px; border-radius: 50%; }
.lxs .lx-duo__p--ai li::before { background: var(--lx-teal); }
.lxs .lx-duo__p--lw li::before { background: var(--lx-red); }
.lxs .lx-duo__x { display: flex; align-items: center; justify-content: center; font-family: var(--lx-serif); font-size: 40px; color: var(--lx-faint); }
.lxs .lx-run { margin-top: 56px; }
.lxs .lx-run__days { display: flex; justify-content: space-between; margin-bottom: 10px; font-size: 14px; color: var(--lx-faint); }
.lxs .lx-run__steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin: 0; padding: 0; list-style: none; }
.lxs .lx-run__steps li { padding: 20px 20px 4px 0; border-top: 6px solid var(--lx-paper-3); }
.lxs .lx-run__steps li.is-ai { border-top-color: var(--lx-teal-2); }
.lxs .lx-run__steps li.is-lw { border-top-color: var(--lx-red); }
.lxs .lx-run__steps li.is-done { border-top-color: var(--lx-navy); }
.lxs .lx-run__steps em { display: block; font-style: normal; font-family: var(--lx-en); font-weight: 600; font-size: 13px; letter-spacing: .08em; color: var(--lx-faint); }
.lxs .lx-run__steps li.is-ai em { color: var(--lx-teal); }
.lxs .lx-run__steps li.is-lw em { color: var(--lx-red-deep); }
.lxs .lx-run__steps strong { display: block; margin-top: 6px; font-family: var(--lx-serif); font-weight: 600; font-size: 22px; line-height: 1.4; color: var(--lx-navy); }
.lxs .lx-trust { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin: 56px 0 0; padding: 0; list-style: none; }
.lxs .lx-trust li { padding: 22px 24px 24px; border: 1px solid var(--lx-line); border-radius: 12px; background: #fff; }
.lxs .lx-trust strong { position: relative; display: block; padding-left: 28px; font-family: var(--lx-serif); font-weight: 600; font-size: 20px; line-height: 1.45; color: var(--lx-navy); word-break: auto-phrase; }
.lxs .lx-trust strong::before { content: ""; position: absolute; left: 0; top: 6px; width: 18px; height: 18px; border-radius: 50%; background: var(--lx-navy); }
.lxs .lx-trust strong::after { content: ""; position: absolute; left: 6px; top: 10px; width: 5px; height: 8px; border: solid #fff; border-width: 0 1.8px 1.8px 0; transform: rotate(45deg); }
.lxs .lx-trust span { display: block; margin-top: 10px; font-size: 15px; line-height: 1.8; color: var(--lx-mute); word-break: auto-phrase; }
.lxs .lx-trust a { color: var(--lx-navy); }
.lxs .lx-fine { margin: 20px 0 0; font-size: 14px; line-height: 1.8; color: var(--lx-faint); }
@media (max-width: 900px) {
  .lxs .lx-duo { grid-template-columns: 1fr; }
  .lxs .lx-duo__x { height: 48px; font-size: 32px; }
  .lxs .lx-run__steps { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 20px; }
  .lxs .lx-trust { grid-template-columns: 1fr; gap: 12px; }
}
@media (max-width: 720px) {
  .lxs { --lx-sec: 60px; font-size: 17px; }
  .lxs .lx-ch h2 { font-size: 30px; }
  .lxs .lx-ch .lx-lede { font-size: 17px; }
}
@media (max-width: 560px) { .lxs .lx-run__steps { grid-template-columns: 1fr; row-gap: 8px; } }
@media (max-width: 400px) { .lxs .lx-ch h2 { font-size: 27px; } }