/* ============================================================================
   KOTOHASHI shared system
   Brand source: logodraft.png  navy #2C3566 / periwinkle #6173B8 / sky #A4C7E0
   Register: bright, warm, credible Japanese B2B. Clean surfaces, generous air,
   one soft elevation used only where something should feel liftable.
   ========================================================================= */
:root{--shu:#E24A1B;--shu-d:#C43E14;
  --navy:#2C3566; --navy-d:#232A52; --peri:#6173B8; --peri-d:#47549B;
  --sky:#A4C7E0; --sky-l:#DCEAF5;
  /* TEXT IS OFF-BLACK, NOT NAVY. Navy is the brand's structural colour: bands,
     buttons, the mark. Setting headings in it made every title read as a link
     and the page as a whole read as decorated rather than written. --head is a
     touch cooler than --ink so a heading sits slightly above body text without
     changing hue. */
  /* --sub was #6B7280, which measures 4.22:1 on --wash2 and 4.50 on --wash:
     under AA for normal text wherever a grey caption sits on a tinted panel,
     which is most of the product pages. #666D7A is the same neutral one step
     darker: 5.21 on white, 4.84 on --wash, 4.54 on --wash2. */
  --head:#1B1D22; --ink:#2A2D33; --sub:#666D7A; --line:#E3EAF5;
  --wash:#F3F7FD; --wash2:#E9F0FA;

  /* Zen Kaku Gothic New: warm humanist gothic with real character.
     Chosen over Noto (the default reach) and over BIZ UD (a document face
     that goes flat at display sizes). */
  /* rakushifu, measured: Noto Sans JP on 99% of characters, weights 400 and
     700 only. This site is for Japanese buyers, so English gets no separate
     face either; the three tokens stay so nothing else has to change. */
  --jp:"Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic Medium",sans-serif;
  --en:"Noto Sans JP","Hiragino Kaku Gothic ProN",sans-serif;
  --mono:"Noto Sans JP",sans-serif;

  --r:18px;        /* surfaces: generous, the reference sits at 16-20 */
  --r-sm:8px;      /* chips, small marks */
  --r-pill:999px;  /* buttons only */
  --sh:0 2px 14px rgba(44,53,102,.06);           /* resting surface */
  --sh-lift:0 12px 30px rgba(44,53,102,.13);     /* genuinely elevated */
  /* MEASURED ON THE REFERENCE AT 1920, not guessed:
       header  1440 wide, 240px margins
       hero    1440 wide (its photo band 1470)
       body    1200 wide, 360px margins
     Using 1200 for the header and hero is what made ours read as a narrow
     strip on a wide monitor. Two tokens, not one. */
  --shell:1200px; --shell-wide:1440px;
  /* Section rhythm, from the reference: 200 between the big arguments,
     160 for an ordinary section, 120 for a close pair, 60 inside one.
     It reads as generous rather than empty because the type scale above
     grew at the same time; big gaps under small headings just look lost. */
  --gap-xl:200px; --gap-lg:160px; --gap-md:120px; --gap-sm:60px;
  --ease:cubic-bezier(.22,.61,.36,1);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}

/* ------------------------------------------------------------ scroll reveal --
   A section arrives as one movement: its head, its lead and its first content
   block rise together. Only kotohashi.reveal.js adds `reveal-on`, so with no
   JS nothing here applies and every word is visible. Never style `.rv` outside
   the `.reveal-on` prefix, or a script failure blanks the page.

   16px over .8s, against the reference's 40px over 1.6s. Theirs is tuned to
   sections 2000 to 3400px tall, where a long slow rise has room to finish
   before you have scrolled past it. Ours run 450 to 900px, and at 1.6s the
   block is still arriving after the reader has started reading it. Easing is
   the site's own --ease, which happens to already be their easeOutCubic.

   Reduced motion does not get a shorter fade, it gets no reveal at all: the
   elements stay at their final state and the observer's class does nothing.
   A reader who asks for no motion should not have content that waits for a
   scroll position to appear. */
.reveal-on .rv{opacity:0;transform:translateY(16px)}
.reveal-on .rv.shown{opacity:1;transform:none;
                     transition:opacity .8s var(--ease),transform .8s var(--ease)}
@media(prefers-reduced-motion:reduce){
  .reveal-on .rv,.reveal-on .rv.shown{opacity:1;transform:none;transition:none}}
body{background:#fff;color:var(--ink);font-family:var(--jp);
     /* rakushifu measured: 15px / 27px / 1.5px tracking. */
     font-size:15px;line-height:1.8;letter-spacing:.1em;line-break:strict;overflow-wrap:break-word;
     font-synthesis:none;-webkit-font-smoothing:antialiased;
     /* Japanese text wrapping, per the japan-ux audit.
        line-break:strict   opts into the stricter kinsoku set, so small kana
                            and the prolonged sound mark never start a line.
        overflow-wrap       long unbroken strings (a URL, an account id) can
                            no longer push a container wider than the page.
        font-synthesis:none we ship 400 and 700 only; if a weight is missing
                            the browser must fall back to a real one rather
                            than smearing a faux-bold over dense kanji. */
     line-break:strict;overflow-wrap:break-word;font-synthesis:none}
.shell{width:min(100% - 48px,var(--shell));margin-inline:auto}
.shell-wide{width:min(100% - 48px,var(--shell-wide));margin-inline:auto}
/* the header and the hero ride the wide box */
/* No 48px gutter subtraction on the header: rakushifu caps the bar at 1440
   and lets its own 22/10 padding be the only inset, so on a 1280 laptop the
   logo hugs 22px rather than 24+22. The gutter still applies to body shells. */
header .shell{width:min(100%,var(--shell-wide))}
/* The hero uses the BODY container, not the wide one. rakushifu at 2000px:
   nav logo 302, hero content 400 - the nav reaches 98px further out than the
   copy beneath it. Putting the hero on --shell-wide inverted that, so the
   hero poked out 22px PAST the nav. Only the header is wide. */
.hero .shell{width:min(100% - 48px,var(--shell))}
/* MEASURED: the reference's sections carry no padding and sit on margins of
   110, 120, 160 and 200px, so the gap BETWEEN two sections is 110-160px. Mine
   was 120 top plus 120 bottom, i.e. 240px, nearly double, which is what made
   the page feel loose and endless. 80 + 80 lands on their commonest value. */
/* rakushifu's vertical rhythm is MARGIN, not padding: sections carry
   margin:160px 0 with zero padding, so adjacent margins collapse to one
   clean 160 gap instead of stacking. Measured gaps down their page:
   160,160,160,159,120,200. Banded sections keep padding so the colour
   still covers the block. */
section{margin:160px 0;padding:0}
.hero{margin-top:0}
/* A tinted block carries the rhythm as PADDING (so the colour covers it),
   which means the neighbour's 160 margin has to be cancelled or the gap
   doubles to 320. Rakushifu's banded CTA does the same: margin 0, padding
   does the spacing. */
/* rakushifu puts every content block on white and separates them with the
   160 margin alone; the only banded block on their whole page is the CTA.
   Our tinted "slabs" with 160px of internal padding read as huge empty
   containers around a few lines of text. .washed is now a plain section. */
.washed{background:transparent}
/* rakushifu, measured: 121px of white between the last section and the CTA
   band, then the band's own 69 inside. Zeroing this margin put the closing
   paragraph flush on the navy edge. */
section:has(+ .band){margin-bottom:120px}

/* MEASURED ON THE REFERENCE (rakushifu.jp) AT 1280, not guessed:
     body 15px / 27px / 1.5px    h2 38px / 57px / 3.8px / 700
     h3   28px / 44.8px / 1.4px  lead 22px / 33px / 2.2px / 700
   The pattern under those numbers is what matters. Tracking is a flat 0.1em
   at every size, leading sits at 1.5 for display and 1.8 for body, and weight
   never goes past 700. Japanese needs the air: set tight, kanji closes up and
   a paragraph turns into a wall. Our own face stays (Zen Kaku Gothic New, see
   the note above); only the scale and the spacing come from the reference. */
h2{color:var(--head);font-weight:700;font-size:clamp(26px,3.1vw,38px);line-height:1.5;
   font-feature-settings:"palt" 1;letter-spacing:.1em;margin-bottom:12px}
h2 .eyebrow{display:block;font-family:var(--en);font-weight:700;font-size:11.5px;
   letter-spacing:.22em;color:var(--peri-d);margin-bottom:12px}
/* Section heads sit at 34, not the base 38. 38 is statement scale: on the home
   page only the ideology line uses it, and every section shouting at that size
   is what made the product pages feel heavy. */
h2.sechead{text-align:center;font-size:clamp(24px,2.8vw,34px);line-height:1.6;
           letter-spacing:.1em;margin-bottom:44px;position:relative}
/* NO accent bar under centred heads. It existed as a 38 x 5px periwinkle mark
   copied from the reference's measured geometry, and Marsel cut it on
   2026-09-11: it is the reference's signature, and carrying it made our
   sections read as theirs. The heading's own 44px margin-bottom carries the
   gap now. Do not reintroduce it, and do not cite the measurement as a reason
   to: matching them precisely is exactly the problem. */
h2.sechead + .lead,h2.sechead + p{margin-top:0;margin-inline:auto;text-align:center}
h2.sechead + .lead{margin-bottom:0}
.sub-kicker{display:block;text-align:center;font-size:15px;font-weight:700;color:var(--sub);letter-spacing:.1em;margin-bottom:8px}
/* 19px was the biggest single gap against the reference, which sets its
   sub-heads at 28. A sub-head that reads as body text makes a long page
   feel like one undifferentiated column. */
/* Japanese breaks between almost any two characters, so a heading or a short
   lead routinely strands one or two characters on its own last line: 答えは作
   らせませ / ん。 and 一人ず / つ。 were both live on the product pages. balance
   evens the lines of a short block; pretty stops a paragraph ending on a
   fragment. Not applied to .pkv h1, which is already hand-broken. */
/* balance suits any SHORT block: headings, labels, captions, list items, the
   one-line bold statements in cards. It is what fixes a stranded last line.
   Long-form paragraphs keep `pretty` below, because Chrome abandons balance
   past about six lines anyway. :where() so every one of these stays at zero
   specificity and any component can still override it. */
:where(h1,h2,h3,h4,.lead,.reccap,.cap,.ph span,.strip span,.strip b,
       .ed li,.scenes li,.worry b,.xcard b,.swcard b,.four .r b,.fl b,
       .st h3,.st p,.point .pill,.faq q,.ed .who,.steps3 span,
       .prow li,.op li,.ph i){text-wrap:balance;word-break:auto-phrase}
p{text-wrap:pretty}
/* LY Corporation guideline p42: 「LINE公式アカウント」の途中に改行を入れずに表記して
   ください。 It is one word. auto-phrase and balance above would happily break it
   at 公式|アカウント, so every occurrence in visible text is wrapped in .nb. */
.nb{white-space:nowrap}
/* word-break:auto-phrase is the Japanese-specific half of this. balance evens
   the line lengths but still breaks between any two characters, which left
   AIは使っています。ただ / し、答えは作らせません。 live on the page. auto-phrase
   breaks at phrase boundaries instead (bunsetsu), so the same heading now
   breaks after the full stop. Chrome 119+; anywhere else it is simply ignored
   and we are back to balance alone, which is the current behaviour. */
/* h3 caps at 26, not 28. Section heads are 34, so 28 left barely a step
   between them: 34/28 is 1.21, under the 1.25 a reader registers as a level.
   34 / 26 / 20 / 15 gives 1.31, 1.30, 1.33. */
h3{color:var(--head);font-weight:700;font-size:clamp(20px,2.2vw,26px);line-height:1.6;
   font-feature-settings:"palt" 1;letter-spacing:.05em}
/* A max-width on a block whose text is centred must be paired with
   margin-inline:auto, or the text centres inside a narrow box parked at the
   left edge of its parent. The global 42em below is what makes this bite: it
   silently narrows every paragraph on the site, including centred ones.
   Caught three times now (.twoway .kicker, .reccap, .ph span), so it is fixed
   here as a rule rather than per component. */
p{max-width:42em}
.reccap,.ph span,.ph b,.ph i,.wstep .cap{margin-inline:auto}
.sub{color:var(--sub);font-size:13.5px}
.mono{font-family:var(--mono);font-size:12px}
/* The reference's lead is 22px and BOLD, and it carries the page: it is the
   line a busy owner reads instead of the paragraph under it. Ours was 16px
   grey, indistinguishable from body copy. */
.lead{color:var(--ink);font-size:clamp(17px,1.8vw,22px);font-weight:700;
      line-height:1.5;letter-spacing:.1em;margin-bottom:10px;max-width:34em}
.lead.quiet{color:var(--sub);font-weight:700;font-size:16px;line-height:1.8}
.center{text-align:center}
.center p{margin-inline:auto}
.todo{color:#B4232A;background:#FBEBEB;border:1px dashed #B4232A;
      padding:1px 8px;font-size:12.5px;font-weight:700;border-radius:var(--r-sm)}
.skip{position:absolute;left:-9999px;top:0;background:var(--navy);color:#fff;padding:10px 16px;z-index:99}
.skip:focus{left:0}

/* header */
.logo{display:flex;align-items:center;gap:10px;text-decoration:none}
/* The header mark is a 261x188 PNG. Its size belongs HERE, not in a page's own
   style block: it was defined per page, a page got rewritten, the rule went
   with it, and the logo rendered at full natural size across the whole header.
   One rule in the shared sheet cannot be lost that way. */
/* Header logo is the whole lockup, sized by WIDTH to rakushifu's measured
   270px desktop / 200px mobile. Sizing by height is what overflowed a phone
   last time, so width is the dimension that is pinned. */
.logo img.brandlock{display:block;width:270px;height:auto;flex:none}
.logo img.mark{height:24px;width:auto;display:block;flex:none}
/* The footer sits on navy, so the same mark is knocked out to white there.
   Same reason as above: this lived as inline style on one page's footer and
   as a hand-drawn SVG on three others. One rule, one asset, every page. */
footer .logo img.mark{height:22px}
footer .logo .word{font-size:16px}
.logo .word{font-family:var(--en);font-weight:700;font-size:19px;letter-spacing:.17em;color:var(--ink)}
.logo .word.sm{font-size:15px}
header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.94);
       backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
/* rakushifu measured: header 76px desktop, 50px mobile. */
/* rakushifu's header has its own side rule: the bar is capped at 1440 like
   ours, but it carries asymmetric internal padding 0 10px 0 22px, so at 1920
   the logo lands at 262 and the right-hand button ends 250 from the edge,
   while body copy below sits in the narrower 1200 container at 360. The nav
   deliberately reaches further out than the text it sits above. */
.hbar{display:flex;align-items:center;gap:24px;height:76px;padding:0 10px 0 22px}
/* Flush right. rakushifu's nav row ends at 1132 and their buttons start at
   1158 - the nav sits hard against the right cluster with all the slack in
   one lane after the logo. One auto margin before the nav absorbs it; the
   right cluster must NOT also take an auto or the space splits and the nav
   drifts back to centre. */
nav.hnav{display:flex;gap:24px;margin-left:auto}
/* A nav link never wraps. Between 925 and 1080 every one of these broke onto
   two or three lines (KOTOHASHI WORKS across two, 運営会社 as 運営会 / 社) and
   overflowed the 76px bar: the nav needs 376px unwrapped and flex was handing
   it 342. nowrap makes the failure a layout problem instead of a text problem,
   and the tightened gaps below fix the layout. */
nav.hnav a{white-space:nowrap;color:var(--ink);text-decoration:none;font-size:14px;font-weight:700;
           padding:4px 0;border-bottom:2px solid transparent;transition:.2s var(--ease)}
nav.hnav a:hover{color:var(--peri-d)}
nav.hnav a[aria-current]{color:var(--navy);border-bottom-color:var(--peri)}
/* rakushifu: 8px between the two header pills */
.hright{margin-left:0;display:flex;align-items:center;gap:8px}
/* Header carries the NUMBER only. 受付時間 is a real and useful Japanese
   convention, but at 10.5px it was below any legible floor for a reader in
   their 50s, and the same hours already appear at readable size in the hero,
   the CTA band, the footer and the drawer. Convention kept, execution moved. */
/* .tel is a .btn.ghost now; only the numeral face is its own */
/* rakushifu's outlined pill is 13px; the filled one 16px; both land at 150
   wide. Noto numerals at 14px pushed ours to 164, so the phone drops to
   their 13. */
.tel{font-family:var(--en);letter-spacing:.01em}
header .btn.tel{font-size:13px;padding-inline:25px}
/* rakushifu: both header pills are exactly 150 wide */
header .btn{min-width:150px}
/* Only two weights exist on the reference. Without this, <b> inside bold
   text computes to 900 and the browser fakes a heavier stroke. */
b,strong{font-weight:700}

/* buttons */
/* inline-flex, centred, so the label stays centred at ANY width. As
   inline-block with text-align:start a min-width silently shunts the label to
   one side, which is exactly what happened to the product KV button. */
.btn{display:inline-flex;align-items:center;justify-content:center;text-align:center;background:var(--navy);color:#fff;text-decoration:none;
     font-weight:700;font-size:15px;letter-spacing:.06em;padding:16px 36px;border-radius:var(--r-pill);
     border:1.5px solid var(--navy);box-shadow:0 3px 10px rgba(44,53,102,.18);transition:.2s var(--ease)}
.btn:hover{background:var(--navy-d);border-color:var(--navy-d);transform:translateY(-1px)}
.btn.ghost{background:#fff;color:var(--navy);border-color:var(--peri);box-shadow:none}
.btn.ghost:hover{background:var(--wash2);border-color:var(--navy);transform:translateY(-1px)}
.btn.sm{padding:10px 22px;font-size:13px}
/* .cta lived only in kotohashi-works-lp.html, so the "primary" button on every
   other page silently rendered navy. One warm button is a brand rule. */
.btn.cta{background:var(--shu);border-color:var(--shu);color:#fff}
.btn.cta:hover{background:var(--shu-d);border-color:var(--shu-d)}
.btn.cta small{font-weight:700;opacity:.9;margin-left:2px}
/* rakushifu header CTA measured 150x52 pill, padding 14px 20px */
/* Both header pills share one height. The phone pill set in IBM Plex came
   out 44px against the Japanese CTA's 52px; rakushifu's pair are both 52. */
header .btn{font-size:14px;padding:12px 29px;box-shadow:none;display:inline-flex;align-items:center;justify-content:center;min-height:52px;box-sizing:border-box}

/* problem list: cards, but with a numbered rail so they are not uniform boxes */
.probs{margin-top:40px;display:grid;gap:16px}
.prob{background:#fff;border:1px solid var(--line);border-radius:var(--r);box-shadow:none;
      padding:28px 32px;display:grid;grid-template-columns:46px 1fr;gap:16px;align-items:baseline}
.prob .n{font-family:var(--en);font-weight:700;font-size:13px;color:var(--peri-d)}
.prob b{font-size:15.5px}
.prob p{font-size:13.5px;color:var(--sub);margin-top:6px;max-width:none}

/* worries: rakushifu's "こんなお悩みありませんか" grid. Three cards, a task
   label chip on each, headline, two lines. */
.worries{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:40px}
/* Every card on the site takes 32px horizontal padding, the value .swcard on
   the home page already used. Vertical padding varies with density; horizontal
   must not, because it is the edge the eye tracks down the page. Card content
   was inking at 147, 149, 151 and 153 in four different sections, so the text
   column visibly jittered from section to section. */
.worry{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:30px 32px 32px}
.worry .wlabel{display:inline-block;font-size:12.5px;font-weight:700;letter-spacing:.08em;color:var(--peri-d);
               background:var(--wash2);border-radius:999px;padding:5px 12px;margin-bottom:16px}
.worry b{display:block;font-size:17px;line-height:1.7;color:var(--head);margin-bottom:10px}
.worry p{font-size:14px;color:var(--sub);max-width:none;line-height:1.85}

/* .op: the "who makes this" block. Lived inline in index.html; the product
   pages need it too, because with no 導入事例 to show yet the company IS
   the proof. Values are index's verbatim, so nothing on the home page moves. */
.op{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center}
.op p{font-size:16px;line-height:2}
.op .card{background:var(--wash);border-radius:var(--r);padding:30px 32px;font-size:15.5px;line-height:1.95}
.op .card b{display:block;color:var(--navy);font-size:17px;margin-bottom:6px}

/* .row2: the home page's two-column row (text one side, art the other),
   reused on the sub pages so no block stops half way across the container. */
/* 1fr 1.06fr, not 1fr 1fr. The home page's product rows give the art the wider
   column (553 / 587 at 1200), and a symmetric split here was the reason these
   rows read as a different component from the ones on the home page. */
.row2{display:grid;grid-template-columns:1fr 1.06fr;gap:60px;align-items:center;margin-top:40px}
.row2.art-left{grid-template-columns:1.06fr 1fr}
.row2.tight{gap:40px;align-items:start}
.row2 > .art{order:1}
.row2.art-left > .art{order:-1}
.row2 p{max-width:none}
/* A grid item's default min-width is auto, i.e. its min-content width, and
   word-break:auto-phrase raises that to the longest unbreakable PHRASE rather
   than the widest character. At 320 that pushed the POINT row 5px past the
   viewport. min-width:0 lets the column take the space it is given, and the
   text falls back to breaking wherever it must, which is the normal Japanese
   behaviour on a narrow screen anyway. */
.row2 > *{min-width:0}
.row2 .ph.wide-ph{aspect-ratio:4/3}
.row2 .ph.tall-ph{aspect-ratio:3/4;max-width:420px;margin-inline:auto}

/* three functions */
.funcs{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:40px}
.func{background:#fff;border:1px solid var(--line);border-radius:var(--r);
      box-shadow:none;padding:34px 32px 36px;transition:.25s var(--ease)}
.func:hover{box-shadow:var(--sh-lift);transform:translateY(-2px)}
.func .ico{width:48px;height:48px;border-radius:var(--r-sm);display:grid;place-items:center;margin-bottom:18px;
           background:var(--wash2);color:var(--navy)}
/* feature bullets: the reference's boxes carry a title and three short lines */
.func ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.func li{position:relative;padding-left:16px;font-size:14px;line-height:1.75;color:var(--ink)}
.func li::before{content:"";position:absolute;left:0;top:.72em;width:7px;height:7px;border-radius:50%;background:var(--peri)}
.func h3{font-size:clamp(18px,1.5vw,20px);line-height:1.6;letter-spacing:.05em;margin-bottom:10px}
.func p{font-size:13.5px;color:var(--sub);max-width:none}

/* record specimen */
.spec{background:#fff;border:1px solid var(--line);border-radius:var(--r);
      box-shadow:var(--sh);overflow:hidden;margin-top:28px}
.spec .head{display:flex;justify-content:space-between;align-items:center;
            padding:14px 24px;background:var(--navy);color:#fff;font-size:13px;font-weight:700}
.spec .head .mono{color:#B9C3E4}
.srow{display:grid;grid-template-columns:120px 1fr 120px;gap:16px;
      padding:18px 24px;border-bottom:1px solid var(--line);align-items:baseline}
.srow:last-child{border-bottom:none}
.srow.alt{background:var(--wash)}
.srow .who{font-size:12px;color:var(--sub);font-weight:700}
.srow .t{font-family:var(--mono);font-size:11.5px;color:var(--sub);text-align:right}
.srow .b{font-size:14.5px;max-width:none}
.srow .orig{display:block;margin-top:7px;padding-left:11px;border-left:2px solid var(--sky);
            font-size:12px;color:var(--sub)}
.srow .ok{color:var(--navy);font-weight:700}

/* price */
.price{background:#fff;border:2px solid var(--navy);border-radius:var(--r);
       max-width:460px;margin-top:28px;overflow:hidden;box-shadow:var(--sh)}
.price .top{padding:28px 30px 22px;text-align:center;background:var(--wash)}
.price .n{font-family:var(--en);font-size:46px;font-weight:700;color:var(--head);line-height:1.1}
.price .n small{font-size:15px;font-family:var(--jp);font-weight:700;color:var(--ink)}
.price ul{list-style:none;padding:22px 30px 28px;font-size:13.5px}
.price li{padding:6px 0 6px 26px;position:relative}
.price li::before{content:"";position:absolute;left:3px;top:15px;width:12px;height:7px;
   border-left:2.5px solid var(--peri);border-bottom:2.5px solid var(--peri);transform:rotate(-45deg)}

.langs{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.langs span{background:var(--wash2);color:var(--navy);font-size:12.5px;font-weight:700;
            padding:5px 15px;border-radius:var(--r-pill)}

/* numbered rules: this one IS a document, so it stays ruled */
.rules{margin-top:24px;max-width:46em;border-top:1px solid var(--navy)}
.rulesrow{border-bottom:1px solid var(--line);padding:16px 6px;
          display:grid;grid-template-columns:66px 1fr;gap:16px;font-size:14.5px;align-items:baseline}
.rulesrow .rn{font-family:var(--en);font-weight:700;font-size:12px;color:var(--peri-d)}

/* faq */
.faq{margin-top:24px;border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{padding:24px 42px 24px 36px;font-weight:700;font-size:16.5px;cursor:pointer;
             list-style:none;position:relative;transition:color .2s var(--ease)}
.faq summary:hover{color:var(--peri-d)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{content:"Q";font-family:var(--en);font-weight:700;position:absolute;left:2px;color:var(--peri-d)}
.faq summary::after{content:"";position:absolute;right:10px;top:29px;width:8px;height:8px;
     border-right:2px solid var(--sub);border-bottom:2px solid var(--sub);
     transform:rotate(45deg);transition:transform .25s var(--ease)}
.faq details[open] summary::after{transform:rotate(-135deg)}
.faq .a{padding:0 38px 22px 32px;font-size:14px;color:var(--sub);position:relative;max-width:46em}
.faq .a::before{content:"A";font-family:var(--en);font-weight:700;position:absolute;left:2px}

/* conversion band */
/* their CTA band: padding 69 / 61 */
.band{background:var(--navy);color:#fff;margin:0;padding:69px 0 61px;text-align:center}
.band h2{color:#fff}
.band p{color:#C3CBE8;margin-inline:auto;font-size:14.5px}
.band .row{display:flex;gap:12px;justify-content:center;margin-top:30px;flex-wrap:wrap}
.band .btn{background:#fff;color:var(--navy);border-color:#fff}
.band .btn:hover{background:var(--sky-l);border-color:var(--sky-l);color:var(--navy)}
.band .btn.ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.5)}
.band .btn.ghost:hover{background:rgba(255,255,255,.12);color:#fff}

/* rakushifu footer, measured: white, padding 60 / 16, no border. A navy
   footer under the navy CTA band fused into one 700px dark block. */
footer{background:#fff;color:var(--sub);padding:60px 0 16px;font-size:13.5px}
footer a{color:var(--ink);text-decoration:none}
footer a:hover{color:var(--peri-d);text-decoration:underline}
footer .logo img.brandlock{width:200px}
.fgrid{display:flex;justify-content:space-between;gap:36px;flex-wrap:wrap}
.fnote{margin-top:30px;padding-top:20px;border-top:1px solid var(--line);
       font-size:11.5px;line-height:1.9;color:#6E7492}

/* ---- phone walkthrough ---- */
/* image placeholders. Lived in kotohashi-works-lp.html only, so the same
   walk-through on tour.html rendered as running text. Shared now. */
.ph{display:grid;place-items:center;text-align:center;background:var(--wash2);
    border:2px dashed var(--peri);border-radius:var(--r);color:var(--navy);
    padding:18px;font-family:var(--en);line-height:1.5}
.ph b{display:block;font-size:12px;letter-spacing:.14em;text-transform:uppercase;margin-bottom:8px;color:var(--peri-d)}
.ph span{display:block;font-size:13px;max-width:26em;margin-inline:auto}
.ph i{display:block;font-style:normal;font-family:var(--mono);font-size:11px;color:var(--sub);margin-top:10px}
.ph.phone-ph{aspect-ratio:491/976;width:100%;max-width:300px;margin-inline:auto;border-radius:28px}
.ph.wide-ph{aspect-ratio:2252/1520;width:100%}

/* A sub-page hero (.pagehero) keeps its 64px bottom padding; the next
   section's margin is trimmed so the gap lands on the 160 / 120 rhythm. */
.pagehero + section{margin-top:96px}
.walk{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:34px}
.wstep{text-align:center}
.wstep .wn{font-family:var(--en);font-weight:700;font-size:12px;letter-spacing:.18em;color:var(--peri-d)}
.wstep h3{font-size:clamp(18px,1.5vw,20px);line-height:1.6;letter-spacing:.05em;margin:7px 0 16px}
.phone{width:100%;max-width:250px;margin-inline:auto;background:#fff;
       border:1px solid var(--line);border-radius:22px;padding:11px 11px 15px;
       box-shadow:var(--sh-lift);text-align:left}
.phone .pbar{display:flex;align-items:center;gap:8px;padding:6px 6px 11px;
             border-bottom:1px solid var(--line);font-size:11.5px;font-weight:700}
.phone .pdot{width:18px;height:18px;border-radius:var(--r-sm);background:var(--navy);flex:none}
.pchat{padding:13px 4px 2px;display:flex;flex-direction:column;gap:10px;min-height:196px}
.pm{max-width:88%;font-size:11.5px;line-height:1.7;padding:9px 12px;border-radius:12px}
.pm.in{background:var(--wash);border:1px solid var(--line);align-self:flex-start}
.pm.out{background:var(--navy);color:#fff;align-self:flex-end}
.pm .porig{display:block;margin-top:7px;padding-top:7px;border-top:1px solid var(--line);
           font-size:10px;color:var(--sub)}
.pm.out .porig{border-color:rgba(255,255,255,.3);color:#C3CBE8}
.pconfirm{align-self:flex-start;background:var(--wash2);color:var(--navy);font-size:11px;
          font-weight:700;padding:8px 17px;border-radius:var(--r-pill);border:1.5px solid var(--peri)}
.ptally{padding:4px 2px;display:flex;flex-direction:column;gap:7px}
.ptally .tr{display:flex;justify-content:space-between;align-items:center;
            background:var(--wash);border-radius:var(--r-sm);padding:8px 12px;font-size:11.5px}
.ptally .st{font-weight:700;color:var(--navy);font-size:10.5px}
.ptally .st.ng{color:#B4232A}
.wstep .cap{font-size:12.5px;color:var(--sub);margin-top:14px;line-height:1.75;max-width:none}
.mocknote{text-align:center;font-size:11.5px;color:var(--sub);margin-top:22px}

/* ---- comparison ---- */
.cmp{margin-top:28px;border:1px solid var(--line);border-radius:var(--r);
     overflow:hidden;background:#fff;box-shadow:var(--sh)}
.cmp table{border-collapse:collapse;width:100%;font-size:13.5px}
.cmp th,.cmp td{padding:14px 14px;text-align:center;border-bottom:1px solid var(--line)}
.cmp tr:last-child td{border-bottom:none}
.cmp thead th{background:var(--wash);font-size:12.5px;color:var(--sub)}
.cmp thead th.us{background:var(--navy);color:#fff;font-size:14px}
.cmp td:first-child,.cmp th:first-child{text-align:left;font-weight:700;font-size:12.5px;color:var(--ink)}
.cmp .ok{color:var(--navy);font-weight:700;font-size:16px}
.cmp .tri{color:#9AA0AC;font-weight:700}
.cmp .ng{color:#C4C9D2;font-weight:700;font-size:15px}
.cmp td.us{background:var(--wash2)}

/* ------------------------------------------------------------------ nav
   Desktop keeps the inline row. Below 860 it becomes a hamburger and a
   full-height drawer, which is what every Japanese B2B site this buyer has
   ever opened. The drawer is navy because navy is the brand's ground, and the
   rows are tall because the reader is 55 and holding a phone one-handed. */
.burger{display:none;width:46px;height:46px;margin-left:auto;border:0;background:transparent;
        padding:0;cursor:pointer;position:relative;z-index:80}
.burger span{position:absolute;left:11px;width:24px;height:2px;background:var(--navy);border-radius:2px;
             transition:transform .3s var(--ease),opacity .2s var(--ease),top .3s var(--ease),background .3s}
.burger span:nth-child(1){top:16px}
.burger span:nth-child(2){top:22px}
.burger span:nth-child(3){top:28px}
.burger[aria-expanded="true"] span{background:#fff}
.burger[aria-expanded="true"] span:nth-child(1){top:22px;transform:rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){top:22px;transform:rotate(-45deg)}
.drawer{position:fixed;inset:0;z-index:70;background:var(--navy);color:#fff;
        display:flex;flex-direction:column;padding:84px 24px 30px;overflow-y:auto;
        opacity:0;visibility:hidden;transform:translateY(-8px);
        transition:opacity .28s var(--ease),transform .28s var(--ease),visibility .28s}
.drawer[data-open="true"]{opacity:1;visibility:visible;transform:none}
.drawer a{color:#fff;text-decoration:none;font-size:18px;font-weight:700;letter-spacing:.06em;
          padding:19px 4px;border-bottom:1px solid rgba(255,255,255,.16);display:flex;
          align-items:center;justify-content:space-between}
.drawer a::after{content:"";width:8px;height:8px;border-right:2px solid var(--sky);
                 border-bottom:2px solid var(--sky);transform:rotate(-45deg)}
.drawer a[aria-current]{color:var(--sky)}
.drawer .foot{margin-top:auto;padding-top:28px}
.drawer .foot a{border-bottom:0}
.drawer .foot a::after{display:none}
.drawer .foot .btn{display:block;text-align:center;background:#E24A1B;border-color:#E24A1B;
                   color:#fff;box-shadow:none;margin-bottom:14px}
.drawer .foot .tel-d{display:block;text-align:center;color:#fff;font-family:var(--en);
                     font-weight:700;font-size:23px;letter-spacing:.02em;padding:6px 0}
.drawer .foot .tel-d span{display:block;font-family:var(--jp);font-size:12px;font-weight:400;
                          color:#AEB5D4;letter-spacing:.06em;margin-top:2px}
body[data-lock="1"]{overflow:hidden}
/* WHILE THE DRAWER IS OPEN the header has to float ABOVE it, not under it.
   The header is a sticky, backdrop-filtered element, so it makes its own
   stacking context and the burger's z-index cannot escape it: the button was
   painting as a pale square trapped behind the navy. So the header outranks
   the drawer, and its own chrome goes transparent so the logo and the X sit
   directly on the navy, which is what the reference does. */
header{z-index:90}
body[data-lock="1"] header{background:transparent;border-bottom-color:transparent;backdrop-filter:none}
body[data-lock="1"] .logo .word{color:#fff}
body[data-lock="1"] .logo img.mark,
body[data-lock="1"] .logo img.brandlock{filter:brightness(0) invert(1);opacity:.95}

/* mobile */
/* The sticky bar. The reference keeps one on desktop too: a short line of
   reassurance on the left and the two conversions on the right. Ours says the
   one thing every buyer needs to hear before anything else. */
.mcta{position:fixed;left:0;right:0;bottom:0;z-index:60;display:flex;align-items:center;gap:14px;
      background:rgba(255,255,255,.97);backdrop-filter:blur(10px);border-top:1px solid var(--line);
      padding:12px max(24px,calc((100vw - var(--shell-wide))/2))}
.mcta .say{display:flex;align-items:center;gap:12px;margin-right:auto;font-weight:700;font-size:15px;color:var(--navy);letter-spacing:.06em}
.mcta .say img{height:22px;width:auto}
.mcta .btn{min-height:48px;display:inline-flex;align-items:center;justify-content:center;white-space:nowrap;padding-inline:20px}
body{padding-bottom:84px}
/* Between 861 and 900 the desktop header still shows but its right cluster
   does not fit: measured 902px of content in an 880px viewport. Dropping the
   phone pill below 920 frees 158px and the bar fits again. */
/* header .btn sets display:inline-flex at (0,1,1), so a bare .tel at (0,1,0)
   never wins. header .btn.tel is (0,2,1). */
/* Measured at 1440: logo 270 + nav 424 + right cluster 308 = 1002 against
   1408 of usable bar. At 1010 the usable bar is 978 and the same contents
   still want 1002 plus gaps, so tightening the air alone cannot close it: I
   tried, and it left a 6 to 91px spill from 1040 down. The phone pill is
   150 + 12 of gap, which covers the 90px worst case, so it goes at 1060 now
   rather than 920. The number stays one tap away in the fixed bottom bar at
   every one of these widths. */
@media(max-width:1180px){
  .hbar{gap:16px}
  nav.hnav{gap:18px}
}

@media(max-width:1060px){ header .btn.tel{display:none} }

@media(max-width:860px){
  .worries{grid-template-columns:1fr}
  /* .row2.art-left must be repeated here at the same (0,2,0) specificity as
     the desktop rule above. A media query adds no specificity, so a bare
     .row2 at (0,1,0) never overrides it and the reversed rows stayed
     two-column on a phone. Third time this trap has bitten this project. */
  .row2,.row2.art-left{grid-template-columns:1fr;gap:32px}
  .op{grid-template-columns:1fr;gap:24px}
  .row2.art-left > .art{order:1}
  .pagehero + section{margin-top:56px}
  .funcs{grid-template-columns:1fr}
  .tel{display:none}
  .logo .word{font-size:15px;letter-spacing:.12em}
  .logo img.brandlock{width:200px}
  .logo img.mark{height:20px}
  /* A scrolling nav row is not a pattern this buyer has ever seen. Hamburger. */
  /* rakushifu uses 15px on mobile for BOTH header and body. Our body gutter is
     24px, so a 15px header would leave the logo out of line with everything
     under it. Held at 24 until the body gutter moves too. */
  /* rakushifu mobile gutter is 15px, header and body alike (52 of their text
     blocks sit at x=15). Ours was 24. Both move together. */
  .shell{width:min(100% - 30px,var(--shell))}
  .hbar{gap:12px;height:50px;padding:0 15px}
  nav.hnav{display:none}
  .hright{display:none}
  .burger{display:block}
  /* footer links need a real tap area, they were 19px tall */
  footer a{display:inline-block;padding:7px 0;min-height:34px}
  .fnote a{min-height:0;padding:0}
  /* margin-only rhythm on mobile too; the old padding-top:64px here was
     stacking on the 120 margin and every gap read 184. */
  section{margin:120px 0;padding:0}
  h2{letter-spacing:.05em}
  .funcs,.walk{grid-template-columns:1fr}
  .srow{grid-template-columns:1fr;gap:6px}
  .srow .t{text-align:left}
  .cmp{overflow-x:auto}
  .cmp table{min-width:520px}
  .mcta{padding:11px 14px;gap:10px}
  .mcta .say{display:none}
  .mcta a{flex:1;text-align:center}
}
@media(max-width:420px){ .logo .word{font-size:13.5px} .btn.sm{padding:9px 15px;font-size:12.5px} }