/*
Theme Name: NOZAWORLD
Theme URI: https://nozaworld.example/
Author: 株式会社Nozaworld
Description: NOZAWORLD コーポレートサイト（プロトタイプ v145 のWordPress化）。フロントページ専用のシングルページ構成。
Version: 1.0.0
Text Domain: nozaworld
*/
/* =========================================================
   TOKENS  (reused from index (2).html: white base + one accent)
   Tiffany blue is an accent only. Deep variant is for text/lines.
========================================================= */
:root{
  --tf:#6FD3CA;          /* Tiffany blue (graphics / fills) */
  --tf-d:#0B7D76;        /* deep Tiffany (text, outlines; AA on white) */
  --tf-l:#E6F7F5;
  --tf-l2:#F4FBFA;
  --ink:#1B2325;         /* black */
  --char:#2A3538;        /* charcoal */
  --mute:#5B676A;
  --gray:#F3F6F6;        /* very light gray */
  --line:#E3E9EA;
  --font-jp:"Noto Sans JP","Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic Medium","Meiryo",sans-serif;
  --font-en:"Outfit","Noto Sans JP","Helvetica Neue",Arial,sans-serif;
  --ease:cubic-bezier(.2,.75,.2,1);
  --wrap:1200px;
  --hdr:76px;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:var(--hdr)}
body{margin:0;font-family:var(--font-jp);font-weight:400;color:var(--ink);background:#fff;line-height:1.85;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
ul,ol,dl,dd{list-style:none;margin:0;padding:0}
h1,h2,h3,h4,p{margin:0}
button{font:inherit;color:inherit;cursor:pointer;border:0;background:none;padding:0}
:focus-visible{outline:3px solid var(--tf-d);outline-offset:3px;border-radius:4px}
.wrap{width:min(var(--wrap),100% - 48px);margin-inline:auto}
.skip{position:absolute;left:12px;top:-60px;z-index:200;background:var(--ink);color:#fff;padding:.6em 1em;border-radius:4px;transition:top .3s}
.skip:focus{top:12px}

/* =========================================================
   BUTTONS  (hover sweep reused from index (2).html)
========================================================= */
.btn{position:relative;display:inline-flex;align-items:center;gap:.9em;padding:1em 1.7em;border-radius:3px;font-family:var(--font-en);font-weight:600;font-size:.86rem;letter-spacing:.14em;overflow:hidden;isolation:isolate;transition:color .35s var(--ease),transform .35s var(--ease);white-space:nowrap}
.btn::before{content:"";position:absolute;inset:0;z-index:-1;transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease)}
.btn:hover::before,.btn:focus-visible::before{transform:scaleX(1)}
.btn:hover{transform:translateY(-2px)}
.btn .arw{width:1.3em;height:.8em;flex:none;transition:transform .35s var(--ease)}
.btn:hover .arw{transform:translateX(4px)}
.btn-ink{background:var(--ink);color:#fff}
.btn-ink::before{background:var(--tf)}
.btn-ink:hover{color:var(--ink)}
.btn-tf{background:var(--tf);color:var(--ink)}
.btn-tf::before{background:#fff}
.btn-line{border:1.5px solid var(--ink);color:var(--ink)}
.btn-line::before{background:var(--ink)}
.btn-line:hover{color:#fff}

/* =========================================================
   HEADER  (fixed / hide on scroll down / drawer  — from index (2).html)
========================================================= */
.hdr{position:fixed;inset:0 0 auto 0;z-index:100;background:rgba(255,255,255,.96);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-bottom:1px solid var(--line);transition:transform .5s var(--ease);padding-top:env(safe-area-inset-top,0px)}
.hdr.hide{transform:translateY(-100%)}
.hdr-in{display:flex;align-items:center;justify-content:space-between;gap:24px;height:var(--hdr);padding:0 clamp(16px,3vw,44px)}
.logo{display:flex;align-items:center;gap:12px;min-width:44px}
.logo-mark{width:34px;height:34px;flex:none}
.logo-name{font-family:var(--font-en);font-weight:600;font-size:1.02rem;letter-spacing:.24em;color:var(--ink)}
.gnav{display:flex;align-items:center;gap:clamp(18px,2.4vw,40px)}
.gnav a.lnk{position:relative;font-family:var(--font-en);font-weight:500;font-size:.8rem;letter-spacing:.14em;color:var(--ink);padding:10px 0;white-space:nowrap}
.gnav a.lnk::after{content:"";position:absolute;left:0;right:0;bottom:2px;height:2px;background:var(--tf);transform:scaleX(0);transform-origin:right;transition:transform .4s var(--ease)}
.gnav a.lnk:hover::after,.gnav a.lnk.active::after{transform:scaleX(1);transform-origin:left}
.burger{display:none;width:48px;height:48px;border-radius:50%;background:var(--tf);position:relative;z-index:120}
.burger span{position:absolute;left:14px;right:14px;height:2px;background:var(--ink);border-radius:2px;transition:transform .45s var(--ease),opacity .3s,top .45s var(--ease)}
.burger span:nth-child(1){top:17px}
.burger span:nth-child(2){top:23px}
.burger span:nth-child(3){top:29px}
.menu-open .burger span:nth-child(1){top:23px;transform:rotate(45deg)}
.menu-open .burger span:nth-child(2){opacity:0}
.menu-open .burger span:nth-child(3){top:23px;transform:rotate(-45deg)}
.drawer{position:fixed;inset:0;z-index:110;background:var(--ink);color:#fff;display:flex;flex-direction:column;justify-content:center;padding:96px 32px 40px;clip-path:circle(0 at calc(100% - 44px) 44px);transition:clip-path .8s var(--ease);visibility:hidden;overflow-y:auto}
.menu-open .drawer{clip-path:circle(150% at calc(100% - 44px) 44px);visibility:visible}
.drawer a.lnk{display:block;font-family:var(--font-en);font-size:1.25rem;font-weight:500;letter-spacing:.14em;padding:.6em 0;border-bottom:1px solid rgba(255,255,255,.14);opacity:0;transform:translateY(16px);transition:opacity .5s,transform .6s var(--ease)}
.menu-open .drawer a.lnk{opacity:1;transform:none}
.menu-open .drawer a.lnk:nth-child(1){transition-delay:.22s}
.menu-open .drawer a.lnk:nth-child(2){transition-delay:.27s}
.menu-open .drawer a.lnk:nth-child(3){transition-delay:.32s}
.menu-open .drawer a.lnk:nth-child(4){transition-delay:.37s}
.menu-open .drawer a.lnk:nth-child(5){transition-delay:.42s}
.menu-open .drawer a.lnk:nth-child(6){transition-delay:.47s}
@media (max-width:1100px){ .gnav{display:none} .burger{display:block} :root{--hdr:64px} }
@media (min-width:1101px){ .drawer{display:none} }

/* =========================================================
   HERO  (copy left ≈42% / isometric world right ≈58%)
========================================================= */
.hero{position:relative;background:#fff;padding-top:var(--hdr);overflow:hidden}
.hero-in{display:grid;grid-template-columns:42fr 58fr;max-width:1760px;margin:0 auto;align-items:center}
.hero-copy{position:relative;z-index:3;padding:clamp(28px,4vw,64px) 0 clamp(28px,4vw,64px) clamp(24px,6vw,104px)}
.hero-brand{display:flex;align-items:center;gap:14px;font-family:var(--font-en);font-weight:600;font-size:.82rem;letter-spacing:.36em;color:var(--tf-d);margin-bottom:clamp(18px,2.4vw,30px)}
.hero-brand::before{content:"";width:36px;height:2px;background:var(--tf)}
.hero-title{font-family:var(--font-en);font-weight:600;font-size:clamp(2rem,3.4vw,3.2rem);line-height:1.18;letter-spacing:-.01em;color:var(--ink)}
.hero-title .ln{display:block}
.hero-title .w{display:inline-block;overflow:hidden;padding-bottom:.14em;margin-bottom:-.14em;vertical-align:top}
.hero-title .w>span{display:inline-block;transform:translateY(108%);animation:rise .95s var(--ease) forwards;animation-delay:calc(.2s + var(--i)*.09s)}
.hero-title .dot{color:var(--tf)}
@keyframes rise{to{transform:none}}
.hero-lead{margin-top:clamp(20px,2.6vw,32px);font-size:clamp(.92rem,1.15vw,1.05rem);line-height:2;color:#3C4A4C;opacity:0;transform:translateY(12px);animation:up .9s 1s var(--ease) forwards}
.hero-cta{margin-top:clamp(24px,3vw,40px);opacity:0;transform:translateY(12px);animation:up .9s 1.2s var(--ease) forwards}
@keyframes up{to{opacity:1;transform:none}}

.world{position:relative;width:100%;aspect-ratio:900/720;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 12%),linear-gradient(180deg,transparent 0,#000 6%,#000 94%,transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg,transparent 0,#000 12%),linear-gradient(180deg,transparent 0,#000 6%,#000 94%,transparent 100%);
  mask-composite:intersect}
.ly{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.ly-bg{z-index:1}.ly-back{z-index:2}.ly-veh{z-index:3}.ly-fg{z-index:4}.ly-front{z-index:5}
.st{font-family:var(--font-en);font-weight:700}
.veh{position:absolute;left:0;top:0;will-change:transform}
.veh svg,.veh img{display:block;width:100%;height:auto;overflow:visible}
/* 3D excavator — placed directly in the left yard (zone A/C interior), no card/panel around it: per
   feedback the dark backdrop read as a floating black box, unnatural against the flat scene. Now just an
   absolutely-positioned, fully transparent stage so the model sits straight on the yard "ground" like every
   other sprite, with only its own Three.js shadow-plane to ground it. */
/* sized down ~40% from the first pass so it reads as a small truck/forklift-scale machine rather than
   building-height (camera auto-frames to fill the box, so box size = on-screen size). Positioned so the
   box's CENTER — not bottom, the camera centers the model's whole bounding box in the container, it doesn't
   sit the model on the box's bottom edge — lands on G(-107,203) = (140,433) of the 900×720 world, i.e.
   (15.56%,60.14%), the frontier pile's own ground point that was removed from zoneC above. (The previous
   "bottom-center = ground" attempt overshot upward by roughly a full box-height — this replaces it.) */
/* re-anchored again per feedback: the pile-row ground point was right, but that's the whole model's
   bounding-box center, not the breaker/chisel tip specifically — the arm reaches out from the body, so the
   tip sits well off-center within the framed box. Re-derived analytically (camera math mirrored in Node,
   since this sandbox can't render three.js to measure it directly): with the model's own static
   yaw/pitch=0 camera, the chisel tip lands at roughly 18.6% across / 84% down within the box. Solved
   left/top so THAT point — not the box center — lands on the removed pile's ground point, G(-107,203) →
   (15.56%,60.14%) of the 900×720 world.
   Padding was bumped up twice (0.16→0.30→0.60) chasing a "gets bigger at high zoom" report that turned
   out to be a false lead — a side-by-side 200%/250% video showed the model at a CONSISTENT size across
   zoom levels, just smaller than intended overall, so the zoom issue was already resolved before either
   padding change and both are reverted back to the original 0.16 here.
   Re-solved twice more chasing the carried-pile size to match the flat scene's own static piles (see the
   SHAFT_GROUP cylinders in the module script) — first shrinking it (0.145→0.135 radius / 1.21→0.99 total
   length), then, per visual feedback that this read thin/short, growing it past the original instead
   (0.135→0.18 radius / 0.99→1.6 total length), then again after realizing the ground-lock scale was
   quietly shrinking that 1.6 back down to a fixed ~1.025 rendered length regardless (see updateAttachAnimation
   for why), which was crushing the radius down with it — so the nominal length was set to that same ~1.025
   directly (no more retraction needed) with radius raised to 0.20. Each change moves the tip's fraction
   within the box, so left/top were recomputed each time to keep the tip anchored on the same G(-107,203)
   ground point — now ~18.6% across, ~82.2%/82.1% (desktop/mobile) down. */
.exc3d-card{position:absolute;left:13.14%;top:46.99%;width:13%;height:16%;z-index:6;pointer-events:none}
@media (max-width:1100px){ .exc3d-card{left:12.39%;top:42.9%;width:17%;height:21%} }
/* no min-height here (deliberately removed): this box's height is a % of .world's own height, and the
   3D camera's auto-fit reads that box's actual aspect ratio via place()/getBoundingClientRect(). A min-
   height floor would silently override just the height once the box got small enough (e.g. at high
   browser zoom, which shrinks the effective CSS layout the same way a narrow window does), distorting the
   box's real aspect ratio without changing its width — which is exactly what was throwing the model's
   framing off at high zoom while the flat SVG scene (plain %/viewBox scaling, no aspect-ratio-dependent
   camera math) stayed perfectly aligned. */
#exc3dStage{position:relative;width:100%;height:100%;background:transparent}
/* Per feedback ("重機だけ少しはっきり見えすぎているから…くすませて周りになじませて"): the lit/shaded 3D
   render reads noticeably more saturated and contrasty than the flat, softly-tinted SVG scene around it, so
   a light CSS filter mutes it down to match — saturation and contrast pulled back a touch, brightness eased
   up very slightly (so darker shadow tones don't just look "dirty"). Filter, not material edits, so the
   whole model is toned uniformly without touching any of its individually-tuned colors. */
#exc3dStage canvas{position:absolute;inset:0;width:100%;height:100%;display:block;filter:saturate(.78) contrast(.9) brightness(1.03)}
.beacon{animation:beacon 1s steps(2,jump-none) infinite}
@keyframes beacon{0%{opacity:1}50%{opacity:.2}100%{opacity:1}}
.emb-heads{animation:embSlide 3.2s ease-in-out infinite alternate}
.emb-ndl{animation:embNdl .24s linear infinite alternate}
@keyframes embSlide{from{transform:translateX(-1.3px)}to{transform:translateX(1.3px)}}
@keyframes embNdl{to{transform:translateY(2px)}}

/* traffic light (independent DOM/SVG, state driven by JS) */
.tl{position:absolute;left:0;top:0;width:2.1%;will-change:transform}
.tl svg{display:block;width:100%;height:auto;overflow:visible}
.tl .lr,.tl .ly2,.tl .lg{fill:#3E484B;transition:fill .2s,filter .2s}
.tl.s-red .lr{fill:#E5484D;filter:drop-shadow(0 0 2.5px rgba(229,72,77,.75))}
.tl.s-yellow .ly2{fill:#F5B33B;filter:drop-shadow(0 0 2.5px rgba(245,179,59,.75))}
.tl.s-green .lg{fill:#33C489;filter:drop-shadow(0 0 2.5px rgba(51,196,137,.75))}

/* =========================================================
   NEWS  (slim single-row bar — label / date+title ticker / "一覧を見る", per reference layout)
========================================================= */
.news{position:relative;z-index:6;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:#fff}
.news .wrap{display:flex;align-items:center;gap:22px;padding-block:16px}
.news-label{flex:none;font-family:var(--font-en);font-weight:700;font-size:1rem;letter-spacing:.08em;color:var(--ink)}
.news-div{flex:none;width:1px;height:18px;background:var(--line)}
.news-list{position:relative;flex:1;height:1.7em;overflow:hidden;min-width:0}
.news-item{position:absolute;inset:0;display:flex;align-items:center;gap:16px;font-size:.88rem;opacity:0;visibility:hidden;transform:translateY(10px);transition:opacity .5s var(--ease),transform .5s var(--ease),visibility 0s linear .5s;white-space:nowrap}
.news-item.show{opacity:1;visibility:visible;transform:none;transition-delay:0s}
.news-item a:hover{color:var(--tf-d);text-decoration:underline}
.news-item span{overflow:hidden;text-overflow:ellipsis}
.news-item .news-date{font-family:var(--font-en);font-weight:500;color:var(--tf-d);flex:none}
.news-more{flex:none;font-family:var(--font-en);font-size:.76rem;font-weight:500;letter-spacing:.12em;color:var(--ink);display:flex;align-items:center;gap:8px;border-bottom:1px solid var(--ink);padding-bottom:2px}
.news-more .menu{width:16px;height:14px}

/* 投稿一覧（index.php の一覧表示用・最小限） */
.nz-posts{list-style:none;margin:32px 0 0;padding:0;border-top:1px solid var(--line)}
.nz-posts li{display:flex;gap:20px;align-items:baseline;padding:18px 4px;border-bottom:1px solid var(--line)}
.nz-posts time{flex:none;font-family:var(--font-en);font-weight:500;color:var(--tf-d)}
.nz-posts a:hover{color:var(--tf-d);text-decoration:underline}
.pagination{margin-top:32px}
.pagination .screen-reader-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.pagination .nav-links{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.pagination .page-numbers{min-width:40px;padding:8px 12px;text-align:center;border:1px solid var(--line);border-radius:3px}
.pagination .page-numbers.current{background:var(--ink);color:#fff;border-color:var(--ink)}
@media (max-width:640px){ .nz-posts li{flex-direction:column;gap:4px} }

/* =========================================================
   SECTION COMMONS
========================================================= */
.sec{padding-block:clamp(72px,10vw,132px)}
/* Per site-wide direction: HERO stays left-aligned (it carries the strong opening statement); every
   section heading after it is centered instead, so the page reads as "HERO is loud, everything after is
   calm and orderly." .sec-head/.sec-en/.sec-jp are the shared heading components for PRODUCTS, STORE &
   CRAFT and COMPANY — centering them here covers all three at once. Body copy, cards and product text are
   untouched; only the heading block itself moves to center. */
.sec-head{margin-bottom:clamp(32px,4.4vw,60px);text-align:center}
.sec-en{font-family:var(--font-en);font-weight:600;font-size:clamp(2.3rem,5.4vw,4.6rem);line-height:1.02;letter-spacing:-.02em;color:var(--ink)}
/* The dash used to sit inline before the text inside a centered flex row — since the row (dash + gap +
   text) was centered as one unit, the text itself always landed right-of-center, offset by half the dash's
   width. Fixed by centering the text alone (an inline-block, centered by the parent's text-align) and
   hanging the dash off its left edge with absolute positioning, so it's decoration that doesn't shift the
   text's own center. */
.sec-jp{position:relative;display:inline-block;margin-top:14px;font-size:clamp(.95rem,1.5vw,1.1rem);font-weight:500;color:var(--mute)}
.sec-jp::before{content:"";position:absolute;right:100%;top:50%;transform:translateY(-50%);margin-right:14px;width:40px;height:2px;background:var(--tf)}
.js .reveal{opacity:0;transform:translateY(26px);transition:opacity .9s var(--ease),transform .9s var(--ease);transition-delay:var(--d,0s)}
.js .reveal.in{opacity:1;transform:none}

/* PRODUCTS: fixed 4-column grid, without carousel arrows or clipping */
#products{background:#fff;overflow:visible}
.ptrack{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;overflow:visible;list-style:none;padding:8px 0 16px;margin:38px 0 0;}
.pcard{width:auto;min-width:0;display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:6px;overflow:hidden;transition:transform .5s var(--ease),border-color .4s;}
@media(max-width:1050px){.ptrack{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}}
@media(max-width:560px){.ptrack{grid-template-columns:1fr;gap:16px}}
.pcard:hover{transform:translateY(-6px);border-color:var(--tf)}
.pvis{position:relative;aspect-ratio:4/3;background:var(--gray);display:grid;place-items:center;color:var(--tf-d);transition:background .45s var(--ease)}
.pvis svg{width:84px;height:84px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;transition:transform .55s var(--ease)}
.pcard:hover .pvis{background:var(--tf-l)}
.pcard:hover .pvis svg{transform:translateY(-4px) scale(1.05)}
.pcard.feature .pvis{background:var(--tf-l)}
.pnum{position:absolute;left:16px;top:12px;font-family:var(--font-en);font-weight:500;font-size:.78rem;letter-spacing:.14em;color:var(--mute)}
.pbody{padding:20px 18px 26px;flex:1;display:flex;flex-direction:column;align-items:flex-start}
.pbody .en{font-family:var(--font-en);font-weight:500;font-size:.72rem;letter-spacing:.2em;color:var(--tf-d)}
.pbody h3{font-size:1.2rem;font-weight:700;line-height:1.5;margin:4px 0 6px}
.pbody p{font-size:.86rem;line-height:1.75;color:#4A5759}
.p-bar{width:min(var(--wrap),100% - 48px);margin:4px auto 0;height:3px;background:var(--line);overflow:hidden}
.p-bar i{display:block;height:100%;width:100%;background:var(--ink);transform-origin:left;transition:transform .15s linear}

/* =========================================================
   WHY NOZAWORLD / 私たちの考え方
========================================================= */
/* Rebuilt from scratch per direction: no card, no icon+line illustration, no two-column split, no cube
   props, and (this round) no left/right edge decoration either — the "一本の線" idea now lives inline,
   directly under the main copy, as one small flowing-line visual rather than framing ornament. One centered
   brand-message block: heading → statement → the line visual → description → CTA. */
.why{position:relative;background:var(--gray);padding-block:56px}
@media (min-width:900px){ .why{min-height:clamp(520px,38vw,620px);display:flex;align-items:center} }
.why-center{position:relative;z-index:2;max-width:1040px;margin:0 auto;padding-inline:24px;text-align:center;width:100%}
.why .sec-head{margin-bottom:20px}
.why .sec-en{font-size:clamp(2rem,2.6vw,2.5rem);font-weight:800;letter-spacing:.05em;line-height:1.15}
.why .sec-jp{margin-top:12px;font-size:clamp(1rem,1.05vw,1.15rem);font-weight:500;line-height:1.5;color:#4f5a5c}
.why .sec-jp::before{content:none}
/* Two lines, fixed by markup (one <span> each) rather than left to wrap — the line break is content, not a
   layout accident, so it can't be broken by a narrow measure or a long font. */
.why-copy{margin-top:28px;font-size:clamp(2.625rem,3.3vw,4rem);font-weight:800;line-height:1.4;letter-spacing:.01em;color:var(--ink)}
.why-copy span{display:block}
.why-desc{margin:clamp(32px,4.2vw,48px) auto 0;max-width:700px;font-size:clamp(1rem,1.05vw,1.0625rem);line-height:1.95;color:#282e30}
.why-cta{margin-top:clamp(22px,2.8vw,28px);min-width:210px;min-height:57px;padding-inline:2.15em;font-size:1.03rem;font-weight:700;letter-spacing:.02em;justify-content:center;box-shadow:0 5px 16px rgba(20,30,35,.08)}
.why-cta::before{background:var(--tf)}
.why-cta:hover{color:var(--ink)}
/* Precise px spec for PC (≥901px) — a tighter, more deliberate rhythm than the fluid clamp() values above,
   which stay in effect below 901px as the responsive fallback (alongside the further mobile overrides near
   the bottom of this stylesheet). Vertical spacing here is intentionally uneven: the copy→line gap is the
   widest in the block (the line is the "second lead"), then it steps back down toward the CTA. Placed here,
   AFTER every unconditional .why-* rule above, on purpose — CSS gives a later same-specificity rule the win
   regardless of whether it sits in a media query, so keeping this block earlier (as it was originally) meant
   the plain .why-desc/.why-cta/.why-line rules declared further down silently overrode it on desktop widths.
   Moving it to the end of this section is what makes it actually take effect at ≥901px. */
@media (min-width:901px){
  .why{padding-block:96px}
  .why-center{max-width:1240px}
  .why .sec-en{font-size:34px;font-weight:800;line-height:1.1;letter-spacing:.02em}
  .why .sec-jp{margin-top:12px;font-size:15px;font-weight:500}
  .why-copy{margin-top:44px;font-size:58px;font-weight:800;line-height:1.32;letter-spacing:0}
  .why-desc{margin-top:56px;font-size:17px;font-weight:500;line-height:1.95;max-width:680px;margin-left:auto;margin-right:auto;color:#282e30;text-align:center}
  .why-cta{margin-top:32px;width:210px;min-width:0;height:56px;min-height:0;padding-inline:0;font-size:16px;font-weight:700;border-width:1px}
}

/* =========================================================
   WESTMONROE / EMBROIDERY
========================================================= */
.brand-grid{display:grid;grid-template-columns:1fr 1.12fr;gap:clamp(16px,2.4vw,32px);align-items:stretch}
.panel{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:6px;overflow:hidden;background:#fff}
.panel-emb{background:var(--tf-l2);border-color:#CDEEEA}
.panel-vis{position:relative;background:var(--gray);aspect-ratio:5/3.4;overflow:hidden}
.panel-emb .panel-vis{background:var(--tf-l);aspect-ratio:5/3.65}
.panel-vis svg{width:100%;height:100%}
.panel-body{padding:clamp(22px,2.8vw,38px);display:flex;flex-direction:column;gap:12px;flex:1}
.tag{font-family:var(--font-en);font-weight:600;font-size:.8rem;letter-spacing:.3em;color:var(--tf-d)}
.panel-body h3{font-size:clamp(1.2rem,2vw,1.6rem);font-weight:700;line-height:1.55;text-wrap:balance}
.panel-body p{font-size:.94rem;color:#3C4A4C}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:auto;padding-top:8px}
.chips li{font-size:.84rem;font-weight:500;padding:.35em 1em;border:1px solid var(--ink);border-radius:2px}
.panel-emb .chips li{border-color:var(--tf-d);color:var(--tf-d);background:#fff}
.stitch-d{stroke-dasharray:10 8}
.stm{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 2.6s .3s var(--ease)}
.in .stm{stroke-dashoffset:0}
.ndl{animation:ndl 1.7s ease-in-out infinite}
@keyframes ndl{0%,100%{transform:translateY(0)}50%{transform:translateY(9px)}}

/* =========================================================
   COMPANY
========================================================= */
/* Was a 2-column grid with the heading as its own left-hand column, sitting beside the fact list. Per the
   site-wide "center every section heading" direction the heading now sits full-width and centered above
   the content instead, so .co-body is a plain centered block (its own text — the dt/dd rows and the
   button — stays left-aligned, only the block as a whole sits centered in the section). */
.co-body{max-width:640px;margin:0 auto}
.co-list>div{display:grid;grid-template-columns:8em 1fr;gap:16px;padding:20px 0;border-top:1px solid var(--line)}
.co-list>div:last-child{border-bottom:1px solid var(--line)}
.co-list dt{font-weight:700;color:var(--mute);font-size:.9rem}
.co-list dd{font-weight:500}
.co-more{margin-top:30px}

/* =========================================================
   CONTACT  (single dark moment; index (2).html CTA implementation reworked)
========================================================= */
/* Per direction: CONTACT is the one place after HERO that should read as the page's closing CTA, so it
   goes the other way from NEWS/PRODUCTS/WHY — centered, a size step up, and a calmer background — while
   staying below HERO's own scale (its title/lead sizes are the ceiling this doesn't cross). */
.contact{position:relative;background:var(--char);color:#fff;overflow:hidden;padding-block:clamp(80px,12vw,156px)}
.contact::before{content:"";position:absolute;inset:0;background:
  repeating-linear-gradient(26.565deg,transparent 0 47px,rgba(111,211,202,.045) 47px 48px),
  repeating-linear-gradient(-26.565deg,transparent 0 47px,rgba(111,211,202,.045) 47px 48px);-webkit-mask-image:radial-gradient(circle at 50% 50%,transparent 20%,#000 78%);mask-image:radial-gradient(circle at 50% 50%,transparent 20%,#000 78%);pointer-events:none}
.contact .wrap{position:relative;z-index:1;max-width:640px;margin-inline:auto;text-align:center}
.contact .sec-en{color:#fff;margin-bottom:24px}
.contact p.lead{max-width:26em;margin-inline:auto;color:#C9D6D8;font-size:clamp(1.15rem,2.2vw,1.5rem);line-height:1.7}
.contact .btn{margin-top:44px}

/* =========================================================
   FOOTER / BACK TO TOP (reused)
========================================================= */
.ftr{background:var(--gray);padding-block:56px 34px}
.ftr-top{display:flex;flex-wrap:wrap;justify-content:space-between;gap:28px;padding-bottom:32px;border-bottom:1px solid var(--line)}
.ftr nav{display:flex;flex-wrap:wrap;gap:10px 28px;font-family:var(--font-en);font-weight:500;font-size:.8rem;letter-spacing:.12em}
.ftr nav a{transition:color .3s}
.ftr nav a:hover{color:var(--tf-d)}
.copy{padding-top:22px;font-size:.78rem;color:var(--mute)}
.totop{position:fixed;right:max(16px,env(safe-area-inset-right,0px));bottom:max(16px,env(safe-area-inset-bottom,0px));width:52px;height:52px;z-index:90;border-radius:50%;background:var(--ink);color:#fff;display:grid;place-items:center;opacity:0;transform:translateY(20px);pointer-events:none;transition:opacity .4s,transform .5s var(--ease)}
.totop.show{opacity:1;transform:none;pointer-events:auto}
.totop svg.ring{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.totop svg.ring circle{fill:none;stroke-width:3}
.totop svg.ring .bg{stroke:rgba(255,255,255,.25)}
.totop svg.ring .fg{stroke:var(--tf);stroke-linecap:round}
.totop svg.arw{width:18px;height:18px;position:relative}

/* =========================================================
   RESPONSIVE
========================================================= */
@media (max-width:900px){
  .hero-in{grid-template-columns:1fr}
  .hero-copy{padding:clamp(24px,6vw,44px) 24px 4px}
  .hero-title{font-size:clamp(2rem,8.6vw,3rem)}
  .world{-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 6%,#000 92%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 6%,#000 92%,transparent 100%);-webkit-mask-composite:source-over;mask-composite:add}
  .brand-grid{grid-template-columns:1fr}
  .co-list>div{grid-template-columns:6.5em 1fr}
  /* The desktop main-copy scale (42–64px) is deliberate for its "brand statement" role, but on a phone width
     it forces an ugly mid-word wrap. Scaled down here so the same two fixed lines (each its own <span>)
     still read as two clean lines instead of four. */
  .why-copy{font-size:clamp(1.25rem,5.6vw,1.7rem);line-height:1.5}
}
@media (max-width:420px){
  .why-copy{font-size:clamp(1.1rem,5.4vw,1.5rem)}
}
@media (max-width:640px){
  .news .wrap{gap:12px}
  .news-item{font-size:.76rem;gap:10px}
  .news-more span{display:none}
  .btn{padding:.95em 1.4em}
}

/* =========================================================
   REDUCED MOTION (kept from index (2).html)
========================================================= */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .hero-title .w>span,.hero-lead,.hero-cta{opacity:1!important;transform:none!important}
  .js .reveal{opacity:1;transform:none}
  .stm{stroke-dashoffset:0}
}
/* ---- 会社情報（店舗ブロック）追加分 ---- */
.co-body{max-width:760px}
.co-store{margin-top:48px}
.co-store h3{font-family:var(--font-en);font-weight:600;font-size:1.05rem;letter-spacing:.18em;color:var(--tf-d);margin-bottom:6px}
.co-store .co-sub{font-size:.88rem;color:var(--mute);margin-bottom:14px}
.co-list a{color:var(--tf-d);font-weight:700;border-bottom:1px solid transparent;transition:border-color .3s}
.co-list a:hover{border-color:var(--tf-d)}
.ftr-info{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:28px;padding-block:28px;border-bottom:1px solid var(--line);font-size:.86rem;line-height:1.9}
.ftr-info b{display:block;font-family:var(--font-en);letter-spacing:.14em;font-size:.8rem;margin-bottom:4px}
.ftr-info a{color:var(--tf-d)}


.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ===== NOZAWORLD CONTACT ===== */
.nz-contact-main{background:#fff;color:#151d20}.nz-contact-hero{background:#111b1f;color:#fff;padding:clamp(90px,12vw,170px) 0 84px}.nz-contact-eyebrow,.nz-contact-count{font-family:var(--font-en);font-size:.75rem;letter-spacing:.22em;color:#77d7cd;font-weight:600}.nz-contact-hero h1{font-family:var(--font-en);font-size:clamp(4rem,11vw,9rem);font-weight:600;letter-spacing:-.055em;line-height:1.15;margin:22px 0 6px}.nz-contact-hero h1 span{color:#75d8cd}.nz-contact-hero p:last-child{font-size:1rem;color:#cbd6d7}.nz-contact-section{padding:clamp(60px,8vw,118px) 0 130px}.nz-contact-layout{display:grid;grid-template-columns:minmax(0, .9fr) minmax(0,1.1fr);gap:clamp(34px,7vw,120px)}.nz-contact-intro h2{font-size:clamp(1.7rem,3vw,2.65rem);font-weight:600;line-height:1.55;letter-spacing:.04em;margin:22px 0}.nz-contact-intro>p:not(.nz-contact-count){font-size:.95rem;line-height:2;color:#59676b}.nz-contact-rule{width:50px;height:2px;background:#71d3c8;margin:30px 0}.nz-contact-intro .nz-contact-note{font-size:.82rem!important}.nz-contact-panel{min-width:0}.nz-contact-form{display:grid;gap:27px}.nz-contact-field{border:0;padding:0;margin:0;min-width:0}.nz-contact-field>label,.nz-contact-field>legend{display:block;font-size:.9rem;font-weight:600;margin-bottom:12px;letter-spacing:.025em}.nz-contact-field em{font-style:normal;color:#187a75;font-size:.72rem;margin-left:8px}.nz-contact-field small{font-size:.75rem;color:#697679}.nz-contact-field input[type=text],.nz-contact-field input[type=email],.nz-contact-field textarea{display:block;width:100%;padding:15px 16px;border:1px solid #dce4e5;background:#fbfcfc;color:#172023;font:inherit;border-radius:3px;transition:border-color .2s,box-shadow .2s}.nz-contact-field input:focus,.nz-contact-field textarea:focus{outline:none;border-color:#3db9ad;box-shadow:0 0 0 3px #6fd3ca2d}.nz-contact-field textarea{resize:vertical;min-height:170px}.nz-contact-radios{display:flex;flex-wrap:wrap;gap:10px}.nz-contact-radios label{position:relative;cursor:pointer}.nz-contact-radios input{position:absolute;opacity:0}.nz-contact-radios span{display:block;padding:12px 16px;border:1px solid #dce4e5;color:#475659;border-radius:3px;transition:all .2s}.nz-contact-radios input:checked+span{border-color:#178b80;background:#effaf8;color:#135c55}.nz-contact-radios input:focus-visible+span{outline:2px solid #1c9c91;outline-offset:3px}.nz-contact-field input[type=file]{max-width:100%;font:inherit;font-size:.82rem}.nz-contact-help{font-size:.75rem;color:#778387;margin-top:7px}.nz-contact-agree{display:flex;align-items:flex-start;gap:12px;line-height:1.8;font-size:.83rem;color:#475659;cursor:pointer}.nz-contact-agree input{margin-top:6px;accent-color:#178b80;flex-shrink:0}.nz-contact-agree a{color:#14786e;text-decoration:underline;text-underline-offset:3px}.nz-contact-submit{background:#131e22;color:#fff;padding:21px 25px;border:1px solid #131e22;display:flex;align-items:center;justify-content:space-between;font-family:var(--font-en);font-size:.85rem;letter-spacing:.13em;cursor:pointer;transition:background .25s,border-color .25s}.nz-contact-submit:hover{background:#157e75;border-color:#157e75}.nz-contact-submit span{font-size:1.35rem}.nz-contact-alert{border-left:3px solid #ba6239;background:#fff4ee;padding:16px;margin-bottom:28px;line-height:1.7}.nz-contact-alert.success{border-color:#1d9b8d;background:#e9f9f6}.nz-hidden{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}@media(max-width:800px){.nz-contact-layout{grid-template-columns:1fr}.nz-contact-hero{padding:85px 0 55px}.nz-contact-section{padding-bottom:80px}}@media(prefers-reduced-motion:reduce){.nz-contact-submit,.nz-contact-radios span{transition:none}}

/* WHY NOZAWORLD: intentional editorial line breaks on desktop only. */
@media (min-width:901px){
  .why-desc{max-width:820px}
  .why-desc span{display:block;white-space:nowrap}
}
@media (max-width:900px){
  .why-desc span{display:inline;white-space:normal}
}

/* Kuimaru / Earth Maru product introductions */
.nz-ke-section .nz-ke-intro{margin:14px 0 4px;max-width:780px;font-size:14px;line-height:1.95;letter-spacing:.02em;color:inherit;opacity:.78;}
@media(max-width:700px){.nz-ke-section .nz-ke-intro{font-size:13px;line-height:1.85;}}

#products .pcard .nz-wire-card-link{margin-top:auto}

/* WESTMONROE product card: intentional two-line heading (2026-10-27) */
#products .pcard.feature .nz-product-title-line{display:block;overflow-wrap:normal;word-break:keep-all;}