/* ---------------------------------------------------------------------------
   Page layer over kotohashi.shared.css. One identity: the bubble logo's navy,
   periwinkle and sky, warm near-black text, white ground, and 朱 shu orange
   in exactly one place, the primary button.
   Written for a reader in his 50s or 60s on a phone: bigger body type, short
   lines, one idea per screen.
   --------------------------------------------------------------------------- */
p{max-width:38em}

/* the one warm button */

/* header lockup: an image of the real logo, never retyped */

/* IMAGE PLACEHOLDER. Dashed frame on the wash tint with the spec in the
   middle, in English, because the person producing the image reads English.
   Replace the whole <div class="ph"> with an <img> of the stated size. */

.telbig{text-decoration:none;color:var(--ink);line-height:1.3}
.telbig b{display:block;font-family:var(--en);font-weight:700;font-size:22px;letter-spacing:.01em}
.telbig span{font-size:12.5px;color:var(--sub)}

/* ------------------------------------------------------------ product KV --
   The product pages do NOT reuse the home hero. Measured off the reference's
   `modKvLv3`, the component their industry AND feature sub-pages share:

     wrap      1400 wide (20px in from each viewport edge), flex, space-between
     text      457px of content, 100px in from the wrap's left edge
     image     680 x 429, single and static, right edge 20px off the viewport
     icon      70 x 70, 20px above the title
     h1        48 / 67.2 / 0.1em / 700          (theirs 48/67.2/4.8px/700)
     lead      18 / 32.4 / 700, 26px under the h1
     rhythm    96px under the header, 140px down to the first h2

   What their sub-hero deliberately does NOT have, and neither does ours:
   no brand lockup at hero scale, no photo-plus-phone stack, no proof tiles,
   no telephone number. The header already carries all four, and repeating
   them 130px lower is what made our sub-pages read as the home page again.

   Two departures. Their h1 is gradient-filled text; ours is solid, with the
   key phrase alone in periwinkle. Gradient text is decoration that carries no
   meaning, and it fails at every contrast check. And ours keeps a small
   product lockup beside the glyph, because KOTOHASHI is an umbrella over two
   products and the header only ever says the umbrella's name.             */
/* ------------------------------------------------------------ product KV --
   Geometry is the HOME hero's, measured off it, so the two pages share one
   layout system. Everything here is index.html's .hero verbatim:

     section  padding 76px 0 0              (was 96)
     wrap     the 1200 --shell, grid .92fr 1.08fr, gap 60, centred
              -> 524.4 text / 615.6 media, text inks at 120, media ends 1320
     lockup   width min(100%,270px), 20px under it
     h1       clamp(27px,2.9vw,38px) / 1.55 / .03em, 12px under it
     lead     15.5 / 1.95 / .1em in --sub, max 24em, 30px under it

   This replaces the reference's modKvLv3 numbers (1400 wrap, 100px inset,
   48px h1, 680 image). Those were right while the KV was a photo and nothing
   else, but a site should not carry two hero grids. What still separates the
   two pages is CONTENT: no English tagline here, no telephone, a reassurance
   panel instead, and bubbles on the photo where home has a phone.           */
.pkv{padding:76px 0 0;margin:0;
     background:radial-gradient(900px 420px at 88% 6%,var(--sky-l) 0%,rgba(220,234,245,0) 60%),#fff}
.pkv .wrap{width:min(100% - 48px,var(--shell));margin-inline:auto;
           display:grid;grid-template-columns:.92fr 1.08fr;gap:60px;align-items:center}
.pkv__text{min-width:0}

/* identity row: the product lockup alone. KOTOHASHI is an umbrella over two
   products and the header only ever says the umbrella's name, so the page
   still has to name which of the two this is. */
.pkv__id{margin:0 0 20px}
/* Sized by WIDTH, never by height. lockup-works.png is 720x43, so height:15px
   resolves to a 251px intrinsic width; with the 64px glyph and the gutters
   that overflowed a 320 screen by 24px. Same trap the ideology lockups hit. */
.pkv__id img{display:block;width:min(100%,270px);height:auto}

.pkv h1{font-weight:700;font-size:clamp(27px,2.9vw,38px);line-height:1.55;
        letter-spacing:.03em;color:var(--head);font-feature-settings:"palt" 1;
        margin:0 0 12px}
/* No text-wrap:balance here. Balancing broke 一方通行 across two lines, which
   splits a compound word: Japanese permits a line break almost anywhere, so
   the phrase has to be held together explicitly rather than left to the
   browser. nowrap on the emphasised phrase does that; natural wrapping then
   fills the first line and breaks at the phrase boundary. */
.pkv h1 b{font-weight:700;color:var(--peri-d);white-space:nowrap}
/* no letter-spacing declared, exactly as the home hero's .under: it inherits
   body's .1em computed at the BODY's 15px (=1.5px). Re-declaring .1em here
   would recompute against 15.5px and give 1.55. */
.pkv__lead{font-size:15.5px;line-height:1.95;font-weight:400;color:var(--sub);
           margin:0 0 30px;max-width:24em}
/* The two facts that decide it for this buyer, and that the first view had
   nowhere: it runs on LINE, and we do the setup. LINE is not a feature to a
   60-year-old owner, it is the category, and it is the word that makes them
   relax. Quiet weight on purpose: it reassures, it does not sell. */
/* A panel, not a floating icon beside a line. As a bare icon + text row the
   text inked at 148 while the lockup, h1, lead and button all inked at 120:
   one element 28px out of the column's left edge, which is the first thing a
   designer sees. Inside a panel the same inset reads as padding, and the
   panel's own edge holds the 120 line. */
.pkv__note{display:flex;align-items:flex-start;gap:10px;margin:0 0 30px;
           max-width:457px;background:var(--wash);border-radius:12px;
           padding:14px 18px 15px;
           font-size:14.5px;line-height:1.75;font-weight:700;color:var(--navy);
           letter-spacing:.04em}
.pkv__note svg{flex:none;width:18px;height:18px;margin-top:3px}
/* the text is its own span so balance and auto-phrase have a real block to
   work on; as a bare text node in a flex row it broke ふだ / ん mid-word */
.pkv__note span{min-width:0;word-break:auto-phrase}
/* No min-width here. The reference's sub-page CTA is a fixed 300x56, but every
   button on THIS site sizes to its own label: the home hero's is 250x62, the
   band's 194x62, and all of them sit 38px inside the pill on both sides.
   Forcing 300px on an inline-block whose text-align is start left the label
   38px from the left edge and 143px from the right. */

.pkv__media{min-width:0}
.pkv__media > *{display:block;width:100%;aspect-ratio:680/429;border-radius:var(--r);
                object-fit:cover;margin:0}
/* ------------------------------------------------------- the KV composite --
   The photo and the two bubbles used to be ONE baked bitmap. Two problems,
   both measured off that file:

   1. The bubbles overhung the photo by 172 of the artwork's 1400 units, and
      the browser aligns the IMAGE BOX, so the photo landed 116px short of the
      grid at 1440 and 88px short at 1000 while the header sat at 10px. That
      is the "right margin looks off".
   2. The bubble text was baked at 20 artboard units, so it rendered at 9.7px
      at 1440 and 6.5px at 1000. The 原文 line, the one a Japanese owner reads
      to see that the Nepali IS his sentence, hit 4.4px.

   So: the photo is a plain image that fills the media column and sits on the
   grid like every other section, and the bubbles are real text on top of it.
   Text is 15px at every width, selectable, in Noto Sans JP. Same composition,
   same corners, same tails.

   Geometry lifted from the SVG's own clip paths (artboard 1400 x 848.81):
     photo   x179.58 y83.07  1024.01 x 682.67, rx 28.12   -> 3:2, radius 2.7%
     boss    x21.35..431.58  y250.19..410.36              -> overhangs left
     worker  x950..1358.52   y410.36..651.19              -> overhangs right
   The right overhang is the one thing that could not survive: the photo now
   ends ON the grid, so anything past it lands in the 20-24px gutter. The
   worker bubble keeps its overhang DOWNWARD instead, into the whitespace
   above the strip, where there is room at every width.                      */
/* --------------------------------------------------- the KV composite ------
   Photo and bubbles are ONE locked image. container-type:inline-size makes the
   figure a query container, and every bubble dimension below is expressed in
   cqw (a percent of the photo's own width) derived from one knob, --u. So the
   composition scales as a unit: at any desktop width the bubbles sit on the
   same part of the photograph and overhang it by the same amount.

   This is what kills the drift. With type fixed in px against a fluid photo,
   a bubble's share of the photo grew as the column narrowed (the white one:
   35% of the height at 1440, 46% at 940) until it slid off the bottom edge.
   Locked, that share is constant at every width.

   Overhang is SYMMETRIC, 3.5% of the photo width on each side. The number is
   arithmetic, not taste. The photo's right edge sits on the 1200 grid, so any
   overhang lands in the page gutter, and the gutter is at its tightest exactly
   where the photo is at its widest:

        vw 1600  gutter 200   photo 616   ceiling 32.5%
        vw 1300  gutter  50   photo 616   ceiling  8.1%
        vw 1248  gutter  24   photo 616   ceiling  3.9%   <- binding
        vw 1150  gutter  24   photo 563   ceiling  4.3%

   3.5% clears the 3.9% floor everywhere with a little margin. 5% overflowed by
   2 to 5px between 1081 and 1262 and put a scrollbar on the page.

   Positions come from a local-contrast map of the photo. Calmest region is
   50-83% down, 62-87% across, the cook's dark apron: the white bubble goes
   there and gets its best contrast as a bonus. Busiest is the stacked plates
   top-left, which is where the navy one used to sit; it moves down into the
   quieter 36-55% band. Both tails are a TOP corner, because both bubbles now
   sit below the person speaking. */
.kvshot{position:relative;margin:0;container-type:inline-size}
.kvshot img{display:block;width:100%;height:auto;aspect-ratio:3/2;
            object-fit:cover;border-radius:0;
  -webkit-mask-image:linear-gradient(to right,transparent 0,#000 9%,#000 91%,transparent 100%),
                     linear-gradient(to bottom,transparent 0,#000 8%,#000 90%,transparent 100%);
          mask-image:linear-gradient(to right,transparent 0,#000 9%,#000 91%,transparent 100%),
                     linear-gradient(to bottom,transparent 0,#000 8%,#000 90%,transparent 100%);
  -webkit-mask-size:100% 100%;mask-size:100% 100%;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-composite:source-in;mask-composite:intersect}

.kvbub{--u:2.435cqw;              /* = 15px while the photo is 616 wide */
       position:absolute;margin:0;max-width:none;
       font-size:var(--u);line-height:1.7;letter-spacing:.04em;font-weight:700;
       padding:calc(var(--u)*.87) calc(var(--u)*1.13) calc(var(--u)*.93);
       text-wrap:balance;word-break:auto-phrase;
       box-shadow:0 calc(var(--u)*.8) calc(var(--u)*2) rgba(44,53,102,.20)}
/* The manager's bubble is #43577A, not --navy #2C3566. Marsel's call,
   2026-09-11. It is a lighter, bluer slate that sits on the photograph rather
   than punching a hole in it; the brand navy is reserved for chrome (header
   mark, footer, skip link). White on it measures 7.29:1. */
.kvbub.boss{left:-3.5%;top:44%;width:40%;
            background:#43577A;color:#fff;
            border-radius:calc(var(--u)*1.2) calc(var(--u)*.27) calc(var(--u)*1.2) calc(var(--u)*1.2)}
.kvbub.staff{right:-3.5%;top:50%;width:44%;
             background:#fff;color:var(--head);border:1.5px solid var(--peri);
             border-radius:calc(var(--u)*.27) calc(var(--u)*1.2) calc(var(--u)*1.2) calc(var(--u)*1.2)}
.kvbub .ne{display:block;font-family:var(--jp);line-height:1.75;letter-spacing:0}
/* TOURS. .ne above sets var(--jp), which renders 飯店大廳 in Japanese glyph
   forms: legible to a Taiwanese reader but visibly not their typeface. Noto
   Sans TC is loaded on tour.html for this one line. */
.kvbub .tc{display:block;font-family:"Noto Sans TC",var(--jp);line-height:1.75;
           letter-spacing:.02em}
.kvbub .orig{display:block;margin-top:calc(var(--u)*.6);padding-top:calc(var(--u)*.6);
             border-top:1px solid var(--line);
             font-size:calc(var(--u)*.84);line-height:1.7;font-weight:400;
             color:var(--sub);letter-spacing:.06em;text-wrap:pretty}
.kvbub .orig b{font-weight:700;color:var(--peri-d);margin-right:.5em}

/* 140px to the first h2, which the strip sits inside. The strip is ours, not
   theirs: it carries the facts a Japanese B2B buyer looks for above the fold,
   so it belongs to the hero and takes a tighter 56px. */
.pkv + .strip{margin-top:56px}
.pkv + .strip + section{margin-top:140px}

/* TWO versions, nothing in between: the locked desktop composite above 1150,
   stacked below it. 1150 is where the 原文 line, the smallest type in the
   composition, is still 11.5px; at 1080 it would be 10.7. A 1024 iPad and a
   1152 laptop therefore land on opposite sides of the line, which is right. */
@media(max-width:1150px){
  /* the reference stacks the same way: picture first, full bleed, copy below */
  .pkv{padding:24px 0 0}
  .pkv .wrap{width:100%;grid-template-columns:1fr;gap:0}
  .pkv__media{order:-1;max-width:none;width:100vw;margin-left:calc(50% - 50vw)}
  .pkv__media > *{border-radius:0;aspect-ratio:5/4}
  /* stacked: the photo goes full bleed, so a bubble hanging off its left edge
     would leave the screen, and one over the top-left lands on the chef's
     face. Both come inside, and the pair reads as a short exchange. */
  /* Stacked. The bubbles come OFF the photo entirely: it is full bleed here,
     so a left overhang leaves the screen and a bubble over the top-left lands
     on the chef's face. Below the photo they read as a short exchange.
     Every selector is repeated at .kvbub.boss / .kvbub.staff specificity,
     because the 1240 block above sets width there at (0,2,0) and a bare
     .kvbub at (0,1,0) never wins, media query or not. */
  .kvshot{padding-bottom:0}
  /* Bottom-only fade here, exactly as the home hero does on mobile: the photo
     now bleeds to both screen edges, so fading the sides would feather into
     nothing and just look like a mistake. */
  .kvshot img{border-radius:0;aspect-ratio:5/4;
    -webkit-mask-image:linear-gradient(to bottom,#000 74%,transparent 100%);
            mask-image:linear-gradient(to bottom,#000 74%,transparent 100%);
    -webkit-mask-composite:source-over;mask-composite:add}
  .kvbub,.kvbub.boss,.kvbub.staff{position:static;width:auto;max-width:86%;
      font-size:14px;left:auto;right:auto;top:auto;bottom:auto}
  .kvbub.boss{margin:18px 0 0 15px}
  .kvbub.staff{margin:10px 15px 0 auto}
  .kvbub .orig{font-size:12px}
  .pkv__text{padding:28px 15px 0}
  .pkv__id img{width:min(100%,210px)}
  .pkv h1{letter-spacing:.06em;margin-bottom:18px}
  .pkv__lead{font-size:16px;margin-bottom:16px}
  .pkv__note{font-size:14px;margin-bottom:24px;max-width:none;padding:13px 15px 14px}
  .pkv .btn.cta{width:100%;min-width:0}
  .pkv + .strip{margin-top:40px}
  .pkv + .strip + section{margin-top:120px}
}

.rise{opacity:0;transform:translateY(14px);animation:rise .7s var(--ease) forwards}
.rise.d1{animation-delay:.05s}.rise.d2{animation-delay:.16s}.rise.d3{animation-delay:.27s}.rise.d4{animation-delay:.4s}
@keyframes rise{to{opacity:1;transform:none}}

/* the honest proof strip under the hero: a ruled row, not stat tiles */
.strip{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:#fff}
.strip .shell{display:grid;grid-template-columns:repeat(3,1fr)}
.strip .cell{padding:22px 22px 22px 0;border-right:1px solid var(--line);margin-right:22px}
.strip .cell:last-child{border-right:none;margin-right:0}
.strip b{display:block;font-size:16px;color:var(--navy);line-height:1.5;margin-bottom:4px}
.strip span{font-size:13px;color:var(--sub);line-height:1.7;display:block}

/* section label */
h2 .eyebrow{color:var(--peri-d)}

/* real-screen walkthrough, three phones */
.walk .cap{font-size:14px;color:var(--ink)}
.walk .cap small{display:block;color:var(--sub);font-size:12.5px;margin-top:4px}

/* two editions */
.eds{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:30px}
.eds.eds3{grid-template-columns:repeat(3,1fr)}
.ed{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:30px 32px 26px}
.ed .tag{display:inline-block;font-size:12.5px;font-weight:700;color:var(--peri-d);background:var(--wash2);
         padding:4px 12px;border-radius:var(--r-pill);margin-bottom:12px}
.ed h3{font-size:20px;line-height:1.6;margin-bottom:6px;color:var(--navy)}
.ed .who{font-size:13.5px;color:var(--sub);margin-bottom:18px}
.ed ul{list-style:none}
.ed li{padding:10px 0 10px 28px;position:relative;border-top:1px solid var(--line);font-size:15px;line-height:1.8}
.ed li::before{content:"";position:absolute;left:4px;top:19px;width:11px;height:6px;
   border-left:2.5px solid var(--peri);border-bottom:2.5px solid var(--peri);transform:rotate(-45deg)}
.ed .langs{margin-top:16px}

/* mechanism */
.steps3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:30px}
.st{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:26px 32px 24px}
.st .n{font-family:var(--en);font-weight:700;font-size:12px;letter-spacing:.2em;color:var(--peri-d)}
.st h3{font-size:20px;line-height:1.6;margin:8px 0 8px}
.st p{font-size:14px;color:var(--sub);max-width:none}
/* the AI statement is a row, not a striped card */
.aiRow{margin-top:56px}
.aiRow h3{font-size:clamp(21px,2.2vw,28px);color:var(--head);margin-bottom:14px}
.aiRow p{max-width:none}
.aiRow ul{list-style:none;margin:18px 0 18px;display:grid;gap:8px}
.aiRow li{padding-left:24px;position:relative;font-weight:700}
.aiRow li::before{content:"";position:absolute;left:2px;top:.85em;width:10px;height:10px;border-radius:50%;background:var(--peri)}
.aiRow .fine{font-size:13.5px;color:var(--sub);margin-top:16px;padding-top:16px;border-top:1px solid var(--line)}
.regnote{margin-top:22px;font-size:14.5px;background:var(--wash);border-radius:var(--r);padding:16px 32px;max-width:none}
.regnote code{font-family:var(--jp);background:#fff;border:1px solid var(--line);border-radius:4px;padding:2px 8px;font-weight:700}

/* the record */
.recframe{margin-top:30px;background:#fff;border:1px solid var(--line);border-radius:var(--r);
          padding:14px;max-width:960px;margin-inline:auto}
.recframe img{display:block;width:100%;height:auto;border-radius:6px}
/* Caption under a POINT row's artwork. Not decoration: the TOURS screens are
   in the participant's language, so a Japanese buyer cannot read the button or
   the message. The card itself must stay in her language, because that IS her
   screen, so the explanation goes in the PAGE instead. Marsel's call
   2026-09-15. Left aligned to the image, not centred like .reccap, because it
   belongs to the picture above it rather than to the whole section. */
.row2 > .art .artcap{display:block;margin-top:14px;font-size:13.5px;
                     line-height:1.9;color:var(--sub);letter-spacing:.04em;
                     max-width:none;text-wrap:pretty}
.row2 > .art .artcap b{font-weight:700;color:var(--peri-d)}

.reccap{font-size:14px;color:var(--sub);margin-top:14px;text-align:center;
         max-width:52em;margin-inline:auto}

/* price table */
.ptable{margin-top:0;max-width:none;background:#fff;border:2px solid var(--navy);border-radius:var(--r);overflow:hidden}
.ptable .top{background:var(--wash);text-align:center;padding:30px 24px 24px}
.ptable .top .amt{font-family:var(--en);font-weight:700;font-size:54px;color:var(--navy);line-height:1}
.ptable .top .amt small{font-family:var(--jp);font-size:16px;font-weight:700;color:var(--ink);margin-left:6px}
.ptable .top .sub{margin-top:8px}
.ptable table{width:100%;border-collapse:collapse;font-size:15px}
.ptable th,.ptable td{padding:14px 22px;border-top:1px solid var(--line);text-align:left;vertical-align:top}
.ptable th{width:38%;color:var(--sub);font-weight:700;font-size:13.5px}
.ptable td{font-weight:700}
.pside{padding:8px 0 0}
.pside h3{font-size:clamp(18px,1.5vw,20px);margin-bottom:14px}
.pside p{font-size:15px;color:var(--ink);line-height:1.9;margin-bottom:12px;max-width:none}

/* flow */
/* The flow now answers "how much work is this for ME" before the reader meets
   the mechanism, so it can no longer look like three more white cards between
   two other rows of white cards. Built on the reference's flow block: tinted
   card, the STEP marker riding the top edge as a filled pill, and a small
   chevron in each gap so the three read as one path rather than three items. */
.flow{display:grid;grid-template-columns:repeat(3,1fr);gap:44px;margin-top:46px}
.fi{position:relative;background:var(--wash);border-radius:var(--r);
    padding:40px 32px 26px;text-align:center}
.fi .n{position:absolute;top:-15px;left:50%;transform:translateX(-50%);
       display:inline-flex;align-items:center;justify-content:center;
       min-width:74px;height:30px;padding:0 14px;border-radius:999px;
       background:var(--navy);color:#fff;
       font-family:var(--en);font-weight:700;font-size:12px;letter-spacing:.16em}
.fi h3{font-size:18px;line-height:1.6;color:var(--navy);margin:0 0 10px}
.fi p{font-size:14px;line-height:1.9;color:var(--ink);max-width:none}
/* the chevron sits in the gap, so it never steals width from a card */
.fi + .fi::before{content:"";position:absolute;left:-30px;top:50%;
  width:11px;height:11px;margin-top:-6px;
  border-top:2.5px solid var(--peri);border-right:2.5px solid var(--peri);
  transform:rotate(45deg)}
@media(max-width:860px){
  .flow{grid-template-columns:1fr;gap:38px}
  /* NO CHEVRON WHEN THE CARDS STACK (2026-09-14).
     It used to rotate to point down and sit at left:50%, top:-26px. The STEP
     pill is ALSO at left:50%, riding top:-15px at 30px tall, so the two were
     centred on the same axis with 11px between them: the arrow touched the
     pill and read as a broken notch on it rather than as an arrow.
     Removed rather than nudged, because the arrow has no work to do here. It
     exists on desktop to carry the eye ACROSS a horizontal row. Stacked, the
     order is already top-to-bottom and every card is numbered STEP 01/02/03. */
  .fi + .fi::before{content:none}
}

/* final band */
.band .reassure{margin-top:18px;font-size:13.5px;color:#C3CBE8}
.band .telbig{color:#fff}.band .telbig span{color:#C3CBE8}

/* footer company block */
.fco dl{display:grid;grid-template-columns:auto 1fr;gap:4px 18px;font-size:13px;margin-top:14px}
.fco dt{color:#6E7492}
.flinks{display:flex;flex-direction:column;gap:8px;font-size:13.5px}

/* mobile */
@media(max-width:860px){
  .strip .shell{grid-template-columns:1fr}
  .strip .cell{border-right:none;margin-right:0;padding:16px 0;border-bottom:1px solid var(--line)}
  .strip .cell:last-child{border-bottom:none}
  .eds,.eds.eds3,.steps3,.flow{grid-template-columns:1fr}
  .ptable th{width:44%}
  .ptable .top .amt{font-size:44px}
}

/* ===== added for the rakushifu sub-page structure ===== */
/* 「こんな場面で」 checklist: two columns of six, under the solution steps */
/* Source line under the worry cards. Two of the three cards carry a number,
   and a number on a sales page needs its origin in the same view: LINE WORKS
   2023 (n=1,000) and OTIT's FY2024 statistics. Small, grey, centred under the
   three cards, above the closing lead. margin-inline:auto because it has a
   max-width and the mis-centred-block scan would otherwise flag it. */
/* a superscript footnote mark must not push its line taller: line-height 0
   keeps the card's 1.85 rhythm intact on the line that carries it */
.worry sup{font-size:.7em;line-height:0;vertical-align:.45em;color:var(--peri-d);font-weight:700}
.src{font-size:12px;line-height:1.8;color:var(--sub);letter-spacing:.04em;
     text-align:center;margin:14px auto 0;max-width:60em}
.scenes{margin-top:56px;background:var(--wash);border-radius:var(--r);padding:30px 32px}
.scenes h3{font-size:clamp(18px,1.5vw,20px);text-align:center;margin-bottom:18px}
.scenes ul{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:10px 40px;margin:0;padding:0}
.scenes li{position:relative;padding-left:26px;font-size:15px;line-height:1.8;font-weight:700;color:var(--ink)}
.scenes li::before{content:"";position:absolute;left:2px;top:.55em;width:12px;height:7px;border-left:2.5px solid var(--peri);border-bottom:2.5px solid var(--peri);transform:rotate(-45deg)}
/* POINT rows: one お悩み pill, two-tone title, text, art alternating sides.
   One label per row, like the home page's .for. */
.points{display:grid;gap:96px;margin-top:56px}
.point .pill{display:inline-block;font-size:12.5px;font-weight:700;letter-spacing:.06em;color:var(--peri-d);background:var(--wash2);border-radius:999px;padding:6px 14px;margin-bottom:14px}
.point h3{font-size:clamp(21px,2.2vw,26px);line-height:1.55;letter-spacing:.04em;color:var(--head);margin-bottom:14px}
.point h3 b{color:var(--peri-d)}
.point p{font-size:15px;line-height:1.9;color:var(--ink);max-width:none}
/* The 関連する機能 chips lived here and were deleted 2026-09-11. They copied the
   reference's 「関連する機能・サービス」 block, but theirs are LINKS into a feature
   library and ours were inert spans: the shape of navigation with none of it.
   Worse, after the accuracy pass the labels restated the paragraph directly
   above them almost word for word. Of eleven chips only two carried anything
   the prose did not, and both were folded into the prose instead (the owner's
   voice input in POINT 1, the all-language danger matching in POINT 3).
   If a feature library ever exists, bring them back AS LINKS or not at all. */
/* cross-link to the other product, like その他の業種別活用法 */
.xlink{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:40px}
/* TOURS links to WORKS and nothing else, so its cross-link block holds ONE
   card. A single card stretched across the full 1200 shell reads as a banner,
   not as a card, so it keeps a card's width and centres. 2026-09-11. */
.xlink.one{grid-template-columns:min(100%,588px);justify-content:center}
/* Hold a phrase on one line WITHOUT using .nb. .nb means "this is the LINE
   trademark string and it may never break", and the four-scan check counts a
   split .nb as a defect; borrowing it for ordinary typography puts a permanent
   false positive in that scan. .hold is the plain typographic version. */
.hold{white-space:nowrap}
/* The AI note is a whole section now rather than a column inside HOW, so its
   fine print centres under the lead instead of hanging on a left edge. */
.ailine{text-align:center;margin-inline:auto;max-width:46em;margin-top:18px}
.xcard{display:block;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:34px 32px 30px;text-decoration:none;color:var(--ink);transition:.25s var(--ease)}
.xcard:hover{box-shadow:var(--sh-lift);transform:translateY(-2px);border-color:var(--peri)}
.xcard img{display:block;width:min(100%,250px);height:auto;margin-bottom:18px}
.xcard b{display:block;font-size:clamp(18px,1.5vw,20px);line-height:1.65;color:var(--head);margin-bottom:10px}
.xcard p{font-size:14px;color:var(--sub);line-height:1.85;max-width:none;margin:0 0 14px}
.xcard .go{font-weight:700;color:var(--navy);font-size:14px}
.xcard.now{background:var(--wash);border-color:transparent}
/* data row on TOURS */
.datarow ul{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:8px}
.datarow li{position:relative;padding-left:24px;font-weight:700}
.datarow li::before{content:"";position:absolute;left:2px;top:.85em;width:10px;height:10px;border-radius:50%;background:var(--peri)}
@media(max-width:860px){
  .scenes{padding:24px 20px}
  .scenes ul{grid-template-columns:1fr;gap:8px}
  .points{gap:56px}
  .xlink{grid-template-columns:1fr}
}

/* POINT row artwork (2026-09-14). The composite already carries its own
   rounded panels, drop shadows and a transparent margin, so it takes NO
   border, radius or shadow of its own: a soft baked edge inside a hard card
   edge contradict, the same reason the masked hero photos carry neither.
   Sized by WIDTH, never height. Fourth time that trap would have bitten. */
.row2 > .art .pointshot{display:block;width:100%;height:auto}