/* =========================================================
   Marketing Monster — editorial dark concept (CARTA ZERO class)
   Built from scratch. Does NOT reuse the previous template.
   ========================================================= */
/* Fonts: Jost = freely-embeddable geometric fallback for Century Gothic (proprietary, not webfont-licensable).
   Noto Sans JP = body. Noto Serif JP = display mincho headings (matches mec-r.com recruiting site's elegant
   mincho). YakuHanMP = punctuation-only webfont (unicode-range scoped to 約物 「」（）、。 etc.) layered FIRST in
   --mincho so brackets/commas render tight & refined, falling through to Noto Serif JP for all other glyphs.
   Latin everywhere prefers Century Gothic -> Jost; JP glyphs fall through (font-family fallback is per-glyph). */
@import url('https://cdn.jsdelivr.net/npm/yakuhanjp@4.1.1/dist/css/yakuhanmp.css');
@import url('https://fonts.googleapis.com/css2?family=Jost:wght@400;500;600;700&family=Noto+Sans+JP:wght@400;500;700;800&family=Noto+Serif+JP:wght@500;600;700;800;900&display=swap');

:root{
  --bg:#070710;
  --bg2:#0b0b18;
  --ink:#f2f0ea;
  --muted:#8d8da6;
  --faint:#54546a;
  --accent:#7b6bf2;
  --accent2:#49a7ff;
  --line:rgba(255,255,255,.12);
  --line-soft:rgba(255,255,255,.07);
  --disp:"Century Gothic","Jost","Noto Sans JP",sans-serif;
  --jp:"Century Gothic","Jost","Noto Sans JP",-apple-system,"Hiragino Kaku Gothic ProN",Meiryo,sans-serif;
  --mincho:"YakuHanMP","Noto Serif JP","Hiragino Mincho ProN","Yu Mincho",YuMincho,serif;
  --mincho-w:700; /* 明朝大見出しのウェイト。800→600→700（ユーザー調整・力強さを少し戻す）。500=繊細/600=上品/800=最も力強い */
  --pad:clamp(20px,5vw,90px);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;overflow-x:hidden}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--jp);line-height:1.85;letter-spacing:.04em;
  overflow-x:hidden;font-size:17px;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
/* dark, blended scrollbars */
*{scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.16) transparent}
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-track{background:#0a0a14}
::-webkit-scrollbar-thumb{background:rgba(255,255,255,.15);border-radius:10px;border:2px solid #0a0a14}
::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.26)}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
::selection{background:var(--accent);color:#fff}

/* grain */
body::after{content:"";position:fixed;inset:0;z-index:90;pointer-events:none;opacity:.05;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* =========================================================
   AURORA — site-wide ambient background (CSS port of aurora-background).
   Fixed layer behind all content; section scrims (rgba) let it peek through,
   masked to the top-right so it stays subtle on the editorial dark base.
   ========================================================= */
.aurora{position:fixed;inset:-10px;z-index:0;pointer-events:none;opacity:.45;will-change:transform;
  --au-dark:repeating-linear-gradient(100deg,#000 0%,#000 7%,transparent 10%,transparent 12%,#000 16%);
  --au-band:repeating-linear-gradient(100deg,#3b82f6 10%,#a5b4fc 15%,#93c5fd 20%,#ddd6fe 25%,#60a5fa 30%);
  background-image:var(--au-dark),var(--au-band);
  background-size:300% 200%;background-position:50% 50%,50% 50%;
  filter:blur(10px);
  -webkit-mask-image:radial-gradient(ellipse at 100% 0%,#000 10%,transparent 70%);
          mask-image:radial-gradient(ellipse at 100% 0%,#000 10%,transparent 70%)}
.aurora::after{content:"";position:absolute;inset:0;
  background-image:var(--au-dark),var(--au-band);
  background-size:200% 100%;background-attachment:fixed;
  mix-blend-mode:difference;animation:aurora 60s linear infinite}
@keyframes aurora{from{background-position:50% 50%,50% 50%}to{background-position:350% 50%,350% 50%}}

.wrap{padding-inline:var(--pad)}
.maxw{max-width:1400px;margin-inline:auto}

/* cursor */
.cursor{position:fixed;top:0;left:0;width:8px;height:8px;border-radius:50%;background:var(--ink);z-index:300;
  pointer-events:none;transform:translate(-50%,-50%);mix-blend-mode:difference;transition:width .3s,height .3s,opacity .3s}
.cursor.big{width:70px;height:70px;background:var(--accent)}
@media(hover:none){.cursor{display:none}}

/* preloader */
.pl{position:fixed;inset:0;z-index:400;background:var(--bg);display:grid;place-content:center;justify-items:center}
.pl__lbl{font-family:var(--disp);letter-spacing:.55em;font-size:.72rem;color:var(--muted);margin-bottom:20px;padding-left:.55em}
.pl__n{font-family:var(--disp);font-weight:700;font-size:clamp(5rem,20vw,15rem);line-height:.9;letter-spacing:-.03em;
  background:linear-gradient(120deg,#fff,#bcb1ff);-webkit-background-clip:text;background-clip:text;color:transparent}
.pl__bar{width:min(440px,64vw);height:1px;background:rgba(255,255,255,.14);margin-top:30px;overflow:hidden}
.pl__bar i{display:block;height:100%;width:0;background:var(--ink)}

/* header — sticky bar that detaches into a centered, blurred floating pill on scroll
   (taste port of header-2: useScroll shrink + backdrop-blur + rounded border + shadow). */
.hdr{position:fixed;top:0;left:0;right:0;z-index:120;margin-inline:auto;max-width:100%;
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:24px var(--pad);color:var(--ink);border:1px solid transparent;border-radius:0;
  transition:top .45s cubic-bezier(.4,0,.2,1),max-width .45s cubic-bezier(.4,0,.2,1),
    padding .45s cubic-bezier(.4,0,.2,1),border-radius .45s cubic-bezier(.4,0,.2,1),
    background .35s ease,border-color .35s ease,box-shadow .35s ease}
@media(min-width:861px){
  .hdr.scrolled{top:12px;max-width:1000px;padding:10px 12px 10px 22px;border-radius:16px;
    border-color:var(--line);background:rgba(11,11,24,.55);
    -webkit-backdrop-filter:blur(14px) saturate(1.3);backdrop-filter:blur(14px) saturate(1.3);
    box-shadow:0 16px 50px -20px rgba(0,0,0,.75)}
}
.hdr__logo{font-family:var(--disp);font-weight:700;letter-spacing:.02em;font-size:1.05rem;flex-shrink:0}
.hdr__nav{display:flex;gap:30px;font-family:var(--disp);font-size:.8rem;letter-spacing:.16em}
.hdr__nav a{position:relative}
.hdr__nav a::after{content:"";position:absolute;left:0;bottom:-6px;width:0;height:1px;background:currentColor;transition:width .35s}
.hdr__nav a:hover::after{width:100%}
.hdr__act{display:flex;align-items:center;gap:16px}
.hdr__lang{font-family:var(--disp);font-size:.74rem;letter-spacing:.12em;color:var(--muted)}
.hdr__cta{font-family:var(--disp);font-size:.76rem;letter-spacing:.1em;white-space:nowrap;
  padding:9px 18px;border-radius:999px;background:var(--ink);color:#0a0a14;
  transition:transform .25s ease,opacity .25s ease,box-shadow .25s ease}
.hdr__cta:hover{transform:translateY(-1px);opacity:.92;box-shadow:0 8px 24px -10px rgba(255,255,255,.4)}
.menu-btn{display:none;width:40px;height:40px;align-items:center;justify-content:center;padding:0;
  background:none;border:1px solid var(--line);border-radius:10px;color:inherit;cursor:pointer}
.mtoggle{display:block;width:22px;height:22px;transition:transform .3s ease-in-out}
.mtoggle__p1{stroke-dasharray:12 63;transition:stroke-dasharray .3s ease-in-out,stroke-dashoffset .3s ease-in-out}
.menu-btn.open .mtoggle{transform:rotate(-45deg)}
.menu-btn.open .mtoggle__p1{stroke-dasharray:20 300;stroke-dashoffset:-32.42px}
@media(max-width:860px){
  .hdr__nav,.hdr__lang,.hdr__cta{display:none}
  .menu-btn{display:flex}
  .hdr{padding:14px var(--pad)}
  .hdr.scrolled,.hdr.nav-open{background:rgba(7,7,16,.82);border-bottom-color:var(--line);
    -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
}
/* mobile nav overlay (full-screen, zoom-in; built by JS from the header nav) */
.navov{position:fixed;inset:0;z-index:115;display:none;background:rgba(7,7,16,.92);
  -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}
.navov.open{display:flex}
.navov__inner{display:flex;flex-direction:column;justify-content:space-between;gap:24px;width:100%;
  padding:92px var(--pad) calc(30px + env(safe-area-inset-bottom));
  animation:navzoom .3s cubic-bezier(.16,1,.3,1) both}
@keyframes navzoom{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:none}}
.navov__links{display:flex;flex-direction:column}
.navov__links a{font-family:var(--disp);font-size:clamp(1.4rem,7vw,1.9rem);letter-spacing:.03em;
  padding:16px 4px;border-bottom:1px solid var(--line-soft);transition:color .25s ease,padding-left .25s ease}
.navov__links a:hover,.navov__links a:active{color:#fff;padding-left:10px}
.navov__cta{display:flex;flex-direction:column;gap:12px}
.navov__cta a{text-align:center;font-family:var(--disp);letter-spacing:.08em;font-size:.95rem;padding:16px;border-radius:12px}
.navov__cta .is-fill{background:var(--ink);color:#0a0a14}
.navov__cta .is-line{border:1px solid var(--line);color:var(--ink)}

/* hero */
.hero{position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:center;overflow:hidden;background:transparent;z-index:1}

/* hero-scoped: woven particle canvas → veil (text readability) */
.hero__bg{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
#cz-weave{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:0}
.bg3d__veil{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(6,6,14,.5),rgba(6,6,14,.3) 35%,rgba(6,6,14,.7) 100%),
            radial-gradient(120% 90% at 50% 40%,transparent 32%,rgba(6,6,14,.5) 100%)}

/* lower sections sit above the aurora (z-index:1) but stay transparent so the
   ambient aurora reads uniformly full-width — no maxw-wide dark "band" in the center.
   Only the footer keeps a solid base. */
.marq,.sec,.hscroll,.sdiv,.ft,.pcta,.phero,.block{position:relative;z-index:1}
.sec,.block--soft,.hscroll,.marq{background:transparent}
.sdiv{background:transparent}
.ft{background:radial-gradient(42% 150px at 50% 0%,rgba(123,107,242,.10),transparent 72%),#06060e}
.hero::before{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(7,7,16,.55) 0%,transparent 28%,transparent 60%,rgba(7,7,16,.92) 100%)}
.hero__in{position:relative;z-index:2;width:100%}
.hero__ey{font-family:var(--disp);letter-spacing:.34em;font-size:.76rem;color:var(--muted);margin-bottom:34px}
.hero h1{margin:0;font-family:var(--mincho);font-weight:var(--mincho-w);letter-spacing:.01em;line-height:1.06;font-size:clamp(3rem,11vw,9.5rem)}
.hero h1 .l{display:block;overflow:hidden}
.hero h1 .l>span{display:block;will-change:transform}
/* heading keyword highlight — animated organic gradient (taste port of gradient-text:
   four brand-hued colour blobs drift along independent paths over a steady
   lavender->sky base, clipped to the text. Base layer keeps the word always legible).
   Shared across the hero keyword and every <em> highlight in section/CTA/subpage headings. */
.hero h1 em,.stmt em,.cta h2 em,.phero h1 em,.pcta h2 em,.hpanel--intro h2 em{
  font-style:normal;color:transparent;-webkit-background-clip:text;background-clip:text;
  background-image:
    radial-gradient(55% 55% at 50% 50%,#c97dff 0%,transparent 72%),
    radial-gradient(55% 55% at 50% 50%,#4db8ff 0%,transparent 72%),
    radial-gradient(58% 58% at 50% 50%,#6a4dff 0%,transparent 72%),
    radial-gradient(55% 55% at 50% 50%,#7fe0ff 0%,transparent 72%),
    linear-gradient(110deg,#d7b8ff,#7fc8ff);
  background-repeat:no-repeat;
  background-size:185% 185%,185% 185%,185% 185%,185% 185%,100% 100%;
  background-position:0% 0%,100% 0%,0% 100%,100% 100%,0% 0%;
  animation:heroGrad 8s ease-in-out infinite}
@keyframes heroGrad{
  0%,100%{background-position:0% 10%,100% 20%,10% 100%,100% 90%,0% 0%}
  25%{background-position:75% 35%,90% 80%,30% 60%,55% 30%,0% 0%}
  50%{background-position:100% 90%,0% 100%,90% 0%,20% 40%,0% 0%}
  75%{background-position:15% 100%,60% 25%,100% 30%,70% 95%,0% 0%}}
.hero__en{font-family:var(--disp);font-weight:500;letter-spacing:.04em;font-size:clamp(1rem,2.2vw,1.7rem);color:var(--muted);margin-top:32px}
.hero__foot{position:absolute;left:var(--pad);right:var(--pad);bottom:34px;z-index:2;display:flex;justify-content:space-between;align-items:flex-end;gap:20px}
.hero__desc{max-width:360px;color:var(--muted);font-size:.92rem;line-height:1.7}
.hero__scroll{font-family:var(--disp);font-size:.68rem;letter-spacing:.3em;color:var(--muted);display:flex;align-items:center;gap:12px}
.hero__scroll::before{content:"";width:60px;height:1px;background:linear-gradient(90deg,transparent,var(--muted))}
@media(max-width:860px){.hero__foot{position:static;margin-top:48px;flex-direction:column;align-items:flex-start}}

/* generic section */
.sec{padding-block:clamp(110px,20vh,260px);position:relative}
.lbl{font-family:var(--disp);font-size:.74rem;letter-spacing:.28em;color:var(--accent);display:flex;align-items:center;gap:16px;margin-bottom:60px}
.lbl::before{content:"";width:46px;height:1px;background:var(--accent)}
.r-line{display:block;overflow:hidden}
.r-line>span{display:block;will-change:transform}

/* TextEffect (出現時 stagger / te.js が制御) ------------------------ */
.te{white-space:pre-wrap}
.te-s{display:inline-block;white-space:pre;will-change:opacity,transform,filter}
/* 単語(文節)グループ：内部で改行させない＝「単語の途中での改行」を防ぐ。改行は語間でのみ */
.te-word{white-space:nowrap}
.te--per-line .te-line{display:block;overflow:hidden}
.te--per-line .te-line__i{display:inline-block;white-space:pre-wrap;will-change:transform}
/* whole モード（分割せず要素まるごと出現＝グラデ/マークアップ見出し用） */
.te-w{will-change:opacity,transform,filter}
@media (prefers-reduced-motion: reduce){
  /* reduced-motion 時 te.js は要素に触れないが、念のため可視を保証。
     ただし html.te-force（確認用の強制再生）時は安全網を外してアニメを通す。 */
  html:not(.te-force) .te .te-s,html:not(.te-force) .te .te-line__i,html:not(.te-force) .te-w{opacity:1!important;transform:none!important;filter:none!important}
}

/* big statement */
.stmt{font-family:var(--mincho);font-weight:var(--mincho-w);letter-spacing:.005em;line-height:1.22;font-size:clamp(2.2rem,6.7vw,5.7rem);margin:0;max-width:18ch}
.stmt em{font-style:normal}
.stmt-sub{color:var(--muted);max-width:48ch;margin-top:48px;font-size:clamp(1.08rem,1.6vw,1.3rem)}
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(40px,6vw,100px);align-items:start}
.split .stmt{font-size:clamp(1.7rem,3vw,3rem);line-height:1.22;max-width:none}
@media(max-width:900px){.split{grid-template-columns:1fr;gap:48px}.split .stmt{font-size:clamp(1.9rem,7vw,2.8rem)}}

/* business — large numbered rows */
.biz{border-top:1px solid var(--line)}
.biz__row{display:grid;grid-template-columns:auto 1fr auto;gap:clamp(20px,4vw,70px);align-items:center;
  padding:clamp(34px,5vw,64px) 0;border-bottom:1px solid var(--line);position:relative;transition:padding-left .4s ease}
.biz__row::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(123,107,242,.10),transparent);
  opacity:0;transition:opacity .4s ease;z-index:-1}
.biz__row:hover{padding-left:clamp(12px,2vw,32px)}
.biz__row:hover::before{opacity:1}
.biz__no{font-family:var(--disp);font-size:clamp(1rem,1.4vw,1.2rem);color:var(--accent);letter-spacing:.1em;align-self:start;padding-top:.4em}
.biz__main h3{margin:0;font-family:var(--mincho);font-weight:var(--mincho-w);letter-spacing:.005em;font-size:clamp(2rem,4.9vw,3.7rem);line-height:1.18}
.biz__main .en{font-family:var(--disp);font-size:.8rem;letter-spacing:.16em;color:var(--muted);margin-top:10px}
.biz__main p{color:var(--muted);max-width:52ch;margin:18px 0 0;font-size:1.08rem}
.biz__go{width:64px;height:64px;border:1px solid var(--line);border-radius:50%;display:grid;place-items:center;flex:none;
  font-size:1.3rem;transition:.35s;align-self:center}
.biz__row:hover .biz__go{background:var(--ink);color:var(--bg);transform:rotate(-45deg)}
@media(max-width:760px){.biz__row{grid-template-columns:auto 1fr;gap:18px}.biz__go{display:none}}

/* approach steps (stacked big) */
.appr{display:grid;gap:0}
.appr--grid{display:grid;grid-template-columns:1fr 1fr;gap:0 clamp(44px,5vw,90px);border-bottom:1px solid var(--line-soft)}
.appr--grid .appr__row{border-top:1px solid var(--line-soft)}
.appr--grid .appr__row:last-child{border-bottom:none}
@media(max-width:760px){.appr--grid{grid-template-columns:1fr;border-bottom:none}}
.appr__row{display:grid;grid-template-columns:84px 1fr;gap:clamp(16px,2.4vw,38px);padding:clamp(28px,4vw,52px) 0;border-top:1px solid var(--line-soft)}
.appr__row:last-child{border-bottom:1px solid var(--line-soft)}
.appr__k{font-family:var(--disp);color:var(--faint);font-size:.9rem;letter-spacing:.1em;padding-top:.6em}
.appr__row h3{margin:0;font-size:clamp(1.45rem,2.4vw,1.95rem);font-weight:700;letter-spacing:-.01em;line-height:1.45}
.appr__row p{color:var(--muted);margin:14px 0 0;max-width:60ch}
@media(max-width:680px){.appr__row{grid-template-columns:1fr;gap:8px}}

/* stats — editorial big numerals */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(24px,4vw,50px);border-top:1px solid var(--line);padding-top:clamp(40px,6vw,80px)}
@media(max-width:820px){.stats{grid-template-columns:repeat(2,1fr);gap:50px 30px}}
.stat__n{font-family:var(--disp);font-weight:700;font-size:clamp(3rem,7vw,6rem);line-height:.95;letter-spacing:-.03em}
.stat__n .u{font-size:.4em;color:var(--accent);margin-left:.1em}
.stat__c{color:var(--muted);font-size:.92rem;margin-top:14px}

/* updates list */
.upd{border-top:1px solid var(--line)}
.upd__row{display:grid;grid-template-columns:160px 160px 1fr auto;gap:30px;align-items:center;padding:30px 0;border-bottom:1px solid var(--line);transition:.3s}
.upd__row:hover{color:#fff;padding-left:14px}
.upd__date{font-family:var(--disp);color:var(--faint);font-size:.86rem;letter-spacing:.08em}
.upd__cat{font-family:var(--disp);font-size:.72rem;letter-spacing:.12em;color:var(--accent);border:1px solid var(--line);border-radius:999px;padding:4px 14px;justify-self:start}
.upd__t{font-size:1.15rem}
.upd__go{color:var(--muted)}
@media(max-width:760px){.upd__row{grid-template-columns:1fr;gap:8px}.upd__go{display:none}}

/* marquee */
.marq{overflow:hidden;border-block:1px solid var(--line);padding:30px 0;white-space:nowrap}
.marq__t{display:inline-flex;gap:48px;font-family:var(--disp);font-weight:600;font-size:clamp(1.6rem,3.4vw,2.8rem);
  color:var(--faint);animation:marq 30s linear infinite;align-items:center}
.marq__t span{display:inline-flex;gap:48px;align-items:center}
.marq__t span::after{content:"／";color:var(--accent)}
@keyframes marq{to{transform:translateX(-50%)}}

/* cta */
.cta{text-align:center}
.cta h2{font-family:var(--mincho);font-weight:var(--mincho-w);letter-spacing:.005em;line-height:1.16;font-size:clamp(2.4rem,8vw,6.5rem);margin:0 0 44px}
.cta h2 em{font-style:normal}
/* cta keyword marquee — sliding English terms with faded edges (taste port of cta-with-text-marquee).
   Edges fade via mask (not a coloured vignette) so the transparent aurora background stays clean.
   Seamless loop = content duplicated + translateX(-50%). */
.ctamarq{margin-top:clamp(54px,8vw,104px);overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 13%,#000 87%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 13%,#000 87%,transparent)}
.ctamarq__t{display:inline-flex;align-items:center;white-space:nowrap;
  font-family:var(--disp);font-weight:300;letter-spacing:-.01em;font-size:clamp(1.9rem,5.5vw,4.4rem);
  color:var(--muted);animation:ctamarq 22s linear infinite;will-change:transform}
.ctamarq__t span{display:inline-flex;align-items:center}
.ctamarq__t span::after{content:"·";margin:0 clamp(30px,4.5vw,66px);color:var(--accent);opacity:.55}
@keyframes ctamarq{to{transform:translateX(-50%)}}
.btn{display:inline-flex;align-items:center;gap:14px;border:1px solid var(--line);border-radius:999px;
  padding:20px 44px;font-family:var(--disp);letter-spacing:.05em;font-size:1.02rem;transition:.35s}
.btn:hover{background:var(--ink);color:var(--bg);gap:22px}
.btn--solid{background:var(--accent);border-color:var(--accent);color:#fff}
.btn--solid:hover{background:#fff;border-color:#fff;color:var(--bg)}

/* footer */
.ft{border-top:1px solid var(--line);padding:clamp(60px,9vw,120px) var(--pad) 40px;
  border-radius:clamp(28px,4vw,56px) clamp(28px,4vw,56px) 0 0}
/* glowing blurred divider centered on the top edge (taste port of footer-section) */
.ft::before{content:"";position:absolute;top:0;left:50%;transform:translate(-50%,-50%);
  width:33%;max-width:420px;height:2px;border-radius:99px;filter:blur(2px);pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(123,107,242,.55) 30%,rgba(73,167,255,.55) 70%,transparent)}
.ft__top{display:flex;justify-content:space-between;gap:40px;flex-wrap:wrap;margin-bottom:60px}
.ft__big{font-family:var(--disp);font-weight:700;font-size:clamp(2rem,6vw,4.5rem);letter-spacing:-.02em;line-height:1}
.ft__cols{display:flex;gap:clamp(30px,5vw,80px);flex-wrap:wrap}
.ft__cols h4{font-family:var(--disp);font-size:.72rem;letter-spacing:.16em;color:var(--muted);margin:0 0 16px}
.ft__cols ul{list-style:none;margin:0;padding:0}
.ft__cols li{margin-bottom:12px;font-size:.92rem;color:var(--muted)}
.ft__cols a:hover{color:#fff}
/* footer reveal: blur-in stagger (taste port of footer-section AnimatedContainer).
   Hidden state applies ONLY when JS+motion are present (html.cz-anim) so no-JS and
   reduced-motion visitors always see the footer fully rendered. */
.cz-anim .ft-rv{opacity:0;filter:blur(4px);transform:translateY(-8px);
  transition:opacity .8s ease,filter .8s ease,transform .8s ease}
.cz-anim .ft-rv.in{opacity:1;filter:blur(0);transform:none}
.ft__btm{display:flex;justify-content:flex-start;gap:40px;flex-wrap:wrap;border-top:1px solid var(--line);
  padding-top:24px;font-size:.78rem;color:var(--faint);font-family:var(--disp);letter-spacing:.06em}

/* =========================================================
   SUBPAGES
   ========================================================= */
.phero{padding:calc(92px + clamp(36px,7vw,80px)) var(--pad) clamp(48px,7vw,84px);border-bottom:1px solid var(--line);position:relative;overflow:hidden}
.phero::after{content:"";position:absolute;right:-10%;top:-40%;width:55%;height:180%;z-index:-1;
  background:radial-gradient(circle,rgba(123,107,242,.18),transparent 60%);filter:blur(40px)}
.phero .crumb{font-family:var(--disp);font-size:.72rem;letter-spacing:.16em;color:var(--faint);margin-bottom:30px}
.phero .crumb a:hover{color:#fff}
.phero .en{font-family:var(--disp);letter-spacing:.18em;font-size:.76rem;color:var(--accent);margin-bottom:22px}
.phero h1{margin:0;font-family:var(--mincho);font-weight:var(--mincho-w);letter-spacing:.005em;line-height:1.16;font-size:clamp(2.6rem,6.7vw,5.4rem)}
.phero h1 em{font-style:normal}
.phero .lead{color:var(--muted);max-width:62ch;margin-top:28px;font-size:clamp(1.1rem,1.6vw,1.28rem)}

.block{padding-block:clamp(70px,11vw,150px)}
.block--soft{background:transparent}
.prose-cz{max-width:760px}
.prose-cz>*:first-child{margin-top:0}
.prose-cz h2{font-family:var(--mincho);font-size:clamp(1.7rem,3.4vw,2.7rem);font-weight:var(--mincho-w);letter-spacing:.005em;margin:1.9em 0 .5em;line-height:1.4}
.prose-cz h3{font-size:1.5rem;margin:1.7em 0 .4em}
.prose-cz p{color:var(--muted)}
.prose-cz ul{color:var(--muted);padding-left:1.1em;margin:0 0 1.2em}
.prose-cz li{margin-bottom:.5em}
.prose-cz a{color:#cdc4ff;text-decoration:underline;text-underline-offset:3px}
.callout-cz{border-left:2px solid var(--accent);padding:16px 0 16px 26px;margin:1.7em 0;color:var(--ink)}
.tag-faint{color:var(--faint);font-size:.85rem}

.gcards{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.gcards--2{grid-template-columns:repeat(2,1fr)}
.gcards--4{grid-template-columns:repeat(4,1fr)}
@media(max-width:1100px){.gcards--4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:820px){.gcards,.gcards--2,.gcards--4{grid-template-columns:1fr}}
.gcard{background:var(--bg);padding:clamp(28px,3.5vw,48px);transition:background .3s}
.gcard:hover{background:var(--bg2)}
.gcard .n{font-family:var(--disp);color:var(--accent);font-size:.78rem;letter-spacing:.14em;margin-bottom:16px}
.gcard h3{margin:0 0 12px;font-size:1.4rem;font-weight:800}
.gcard p{color:var(--muted);margin:0;font-size:1.02rem}

.layers{display:grid;gap:10px;max-width:780px}
.layer{border:1px solid var(--line);border-radius:4px;padding:22px 26px;transition:.3s}
.layer:hover{background:var(--bg2);border-color:var(--accent)}
.layer b{font-weight:700}.layer .k{font-family:var(--disp);color:var(--accent);margin-right:14px}
.layer span{color:var(--muted);font-size:.98rem;display:block;margin-top:4px}

.form-cz{max-width:680px}
.frow{margin-bottom:26px}
.frow label{display:block;font-family:var(--disp);font-size:.76rem;letter-spacing:.1em;color:var(--muted);margin-bottom:10px}
.frow .req{color:var(--accent);margin-left:8px}
.frow .opt{color:var(--faint);margin-left:8px}
.frow input,.frow select,.frow textarea{width:100%;background:transparent;border:0;border-bottom:1px solid var(--line);
  color:var(--ink);font-family:var(--jp);font-size:1.05rem;padding:12px 0;transition:border-color .3s}
.frow input:focus,.frow select:focus,.frow textarea:focus{outline:none;border-color:var(--accent)}
.frow select{cursor:pointer}.frow select option{background:#12121f;color:var(--ink)}
.frow textarea{min-height:120px;resize:vertical}
.fcheck{display:flex;gap:12px;align-items:flex-start;color:var(--muted);font-size:.9rem;margin-bottom:18px}
.fcheck input{width:auto}
.fcheck a{color:#cdc4ff;text-decoration:underline}
.fnote{color:var(--faint);font-size:.82rem;margin-top:14px}
.invalid input,.invalid select,.invalid textarea{border-color:#ff5a7a!important}

.ctable{width:100%;border-collapse:collapse;max-width:840px}
.ctable th,.ctable td{text-align:left;padding:22px 0;border-bottom:1px solid var(--line);vertical-align:top}
.ctable th{width:180px;font-family:var(--disp);font-size:.78rem;letter-spacing:.1em;color:var(--muted);font-weight:500}
.ctable td{color:var(--ink)}

/* filter chips (works) */
.fbar{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:50px}
.fbar button{background:transparent;border:1px solid var(--line);color:var(--muted);border-radius:999px;
  padding:9px 20px;font-family:var(--disp);font-size:.82rem;letter-spacing:.04em;cursor:pointer;transition:.25s}
.fbar button[aria-pressed="true"]{background:var(--ink);color:var(--bg);border-color:var(--ink)}

/* works editorial grid */
.wgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
@media(max-width:760px){.wgrid{grid-template-columns:1fr}}
.witem{background:var(--bg);padding:clamp(28px,3.5vw,48px);display:block;transition:background .3s;position:relative;min-height:240px}
.witem:hover{background:var(--bg2)}
.witem .cat{font-family:var(--disp);font-size:.72rem;letter-spacing:.12em;color:var(--accent);margin-bottom:18px}
.witem h3{margin:0 0 12px;font-size:clamp(1.4rem,2.4vw,1.9rem);font-weight:800;letter-spacing:-.01em}
.witem p{color:var(--muted);font-size:1.02rem;margin:0;max-width:42ch}
.witem .go{position:absolute;right:clamp(28px,3.5vw,48px);bottom:clamp(28px,3.5vw,48px);color:var(--muted);transition:.3s}
.witem:hover .go{color:#fff;transform:translateX(6px)}

/* faq accordion (dark) */
.acc-cz{border-top:1px solid var(--line);max-width:900px}
.acc-cz__item{border-bottom:1px solid var(--line)}
.acc-cz__q{width:100%;text-align:left;background:none;border:0;color:var(--ink);font-family:var(--jp);
  font-size:1.18rem;font-weight:700;padding:28px 0;cursor:pointer;display:flex;justify-content:space-between;gap:20px;align-items:center}
.acc-cz__q::after{content:"+";font-family:var(--disp);color:var(--accent);font-size:1.4rem;transition:.3s}
.acc-cz__q[aria-expanded="true"]::after{content:"–"}
.acc-cz__a{max-height:0;overflow:hidden;transition:max-height .35s ease;color:var(--muted)}
.acc-cz__a p{padding:0 0 28px;margin:0;max-width:70ch}

.pcta{text-align:center;padding-block:clamp(90px,16vw,200px)}
.pcta h2{font-family:var(--mincho);font-weight:var(--mincho-w);letter-spacing:.005em;line-height:1.18;font-size:clamp(2rem,6vw,4.6rem);margin:0 0 40px}
.pcta h2 em{font-style:normal}

/* =========================================================
   POLISH v2 — color / type / spacing tuning
   ========================================================= */
:root{ --muted:#9a9ab6; --faint:#5c5c76; }
body{font-feature-settings:"palt" 1}            /* tighter JP kerning */
.hero{min-height:100svh}
.hero h1{max-width:16ch;line-height:1.0}
.hero__ey{color:#aaaac6}
.hero__en{color:#b7b7d0}
.sec{padding-block:clamp(120px,21vh,300px)}     /* more air */
.lbl{margin-bottom:clamp(42px,6vw,76px);color:#9b8cff}
.stmt{line-height:1.18;max-width:none}
.stmt .r-line>span{white-space:normal}
.stmt em{position:relative;white-space:nowrap}
.stmt em::after{content:"";position:absolute;left:0;right:0;bottom:.04em;height:.06em;
  background:linear-gradient(90deg,var(--accent),transparent);opacity:.55}
.biz__main p{color:#9a9ab6}
.biz__main .en,.witem .cat,.gcard .n,.appr__k{color:#9b8cff}
.marq{padding:34px 0;border-color:var(--line-soft)}
.marq__t{color:#3f3f57}
.marq__t span::after{color:var(--accent);opacity:.7}
.stat__n .u,.witem .go:hover{color:#9b8cff}
.phero h1{line-height:1.08}
.phero .en{color:#9b8cff}
.ctable th{color:#9a9ab6}
::selection{background:#9b8cff;color:#0a0a16}

/* =========================================================
   HORIZONTAL SCROLL (pinned)  + native fallback
   ========================================================= */
.hscroll{position:relative;background:transparent}
.hscroll__pin{height:100svh;display:flex;align-items:center;overflow:hidden}
.hscroll__track{display:flex;gap:clamp(18px,2.4vw,36px);padding-inline:var(--pad);will-change:transform}
.hpanel{flex:0 0 auto;width:min(420px,78vw);border:1px solid var(--line);border-radius:6px;
  padding:clamp(28px,3vw,46px);min-height:58vh;display:flex;flex-direction:column;justify-content:space-between;
  background:var(--bg);transition:border-color .3s,background .3s}
.hpanel:hover{border-color:var(--accent);background:#0e0e1d}
.hpanel--intro{border:none;background:none;justify-content:center;width:min(560px,84vw)}
.hpanel--intro .lbl{margin-bottom:30px}
/* セクション見出しは全て明朝で統一（ここだけ本文ゴシックだった不整合を解消） */
.hpanel--intro h2{font-family:var(--mincho);font-weight:var(--mincho-w);letter-spacing:.005em;font-size:clamp(2.2rem,4.8vw,3.9rem);line-height:1.18;margin:0}
.hpanel--intro h2 em{font-style:normal}
.hpanel__no{font-family:var(--disp);color:#9b8cff;font-size:.86rem;letter-spacing:.14em}
.hpanel__tag{font-family:var(--disp);font-size:.72rem;letter-spacing:.12em;color:var(--faint);margin-top:8px}
.hpanel h3{font-size:clamp(1.65rem,2.8vw,2.3rem);font-weight:800;letter-spacing:-.01em;margin:18px 0 14px}
.hpanel p{color:var(--muted);margin:0;font-size:1.02rem}
.hscroll.no-pin .hscroll__pin{height:auto;overflow-x:auto;padding-block:clamp(70px,9vw,120px);scroll-snap-type:x mandatory}
.hscroll.no-pin .hpanel{scroll-snap-align:start;min-height:auto}
@media(max-width:680px){.hpanel{min-height:auto}.hscroll__pin{height:auto;overflow-x:auto;padding-block:90px}}

/* =========================================================
   PANEL VISUALS + SCROLL EFFECTS
   ========================================================= */
.hpanel{position:relative;overflow:hidden}
.hpanel__no{font-family:var(--disp);font-weight:700;font-size:clamp(2.8rem,4.4vw,4.6rem);line-height:1;letter-spacing:-.03em;
  background:linear-gradient(125deg,#ffffff,#9b8cff 75%);-webkit-background-clip:text;background-clip:text;color:transparent;
  transition:transform .45s cubic-bezier(.2,.7,.2,1)}
.hpanel:hover .hpanel__no{transform:translateY(-6px)}
.hpanel__line{height:1px;background:var(--line);margin:16px 0;position:relative;overflow:hidden}
.hpanel__line::after{content:"";position:absolute;inset:0;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .55s cubic-bezier(.2,.7,.2,1)}
.hpanel:hover .hpanel__line::after{transform:scaleX(1)}
.hpanel h3{transition:transform .45s cubic-bezier(.2,.7,.2,1)}
.hpanel:hover h3{transform:translateX(8px)}
.hpanel__tag{transition:color .3s}
.hpanel:hover .hpanel__tag{color:#9b8cff}
/* faint giant watermark */
.hpanel[data-n]::before{content:attr(data-n);position:absolute;right:-.18em;bottom:-.36em;z-index:0;
  font-family:var(--disp);font-weight:700;font-size:14rem;line-height:1;color:rgba(255,255,255,.03);pointer-events:none}
.hpanel>*{position:relative;z-index:1}

/* horizontal progress bar */
.hscroll__prog{position:absolute;left:var(--pad);right:var(--pad);bottom:42px;height:2px;background:var(--line-soft);z-index:5}
.hscroll__prog i{display:block;height:100%;background:linear-gradient(90deg,var(--accent),var(--accent2));transform:scaleX(0);transform-origin:left}
.hscroll.no-pin .hscroll__prog{display:none}

/* count-up tabular */
.stat__n .cnt,.num .cnt{font-variant-numeric:tabular-nums}

/* panel icon */
.hpanel__top{display:flex;justify-content:space-between;align-items:flex-start;gap:16px}
.hpanel__ic{width:46px;height:46px;border:1px solid var(--line);border-radius:11px;display:grid;place-items:center;flex:none;transition:border-color .35s,background .35s,transform .35s}
.hpanel:hover .hpanel__ic{border-color:var(--accent);background:rgba(123,107,242,.14);transform:translateY(-4px)}
.hpanel__ic svg{width:23px;height:23px;fill:none;stroke:#9b8cff;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}

/* section transition divider (draws in on scroll) */
.sdiv{padding-inline:var(--pad);margin:0}
.sdiv span{display:block;height:1px;max-width:1400px;margin-inline:auto;transform:scaleX(1);transform-origin:left;
  background:linear-gradient(90deg,var(--accent),rgba(123,107,242,.15) 40%,transparent)}

/* =========================================================
   FIXES: heading balance / overflow safety / MOBILE
   ========================================================= */
.cta h2,.pcta h2,.stmt,.phero h1{text-wrap:balance;overflow-wrap:anywhere}
.cta h2{font-size:clamp(2.2rem,7vw,5.4rem)}
.hpanel h3,.biz__main h3,.appr__row h3{overflow-wrap:anywhere}

/* MOBILE: disable heavy 3D, static dark bg, simpler layout */
@media(max-width:768px){
  .hero__bg{display:none}
  body{background:
    radial-gradient(120% 70% at 72% 6%,rgba(58,40,150,.42),transparent 55%),
    radial-gradient(90% 60% at 0% 100%,rgba(20,70,160,.22),transparent 55%),#070710}
  .hero,.sec,.hscroll,.block--soft,.marq{background:transparent}
  .split{grid-template-columns:1fr}
  .hero h1{font-size:clamp(2.6rem,13vw,4.2rem)}
  .stmt{font-size:clamp(1.9rem,8vw,3rem)}
  .cta h2,.pcta h2{font-size:clamp(2rem,9vw,3.2rem)}
}

@media (prefers-reduced-motion: reduce){
  .marq__t{animation:none}
  .hero h1 .l>span,.r-line>span,.hero__ey,.hero__en,.hero__foot,
  .r-fade,.biz__row,.appr__row,.stats,.upd__row,.lbl,.stmt-sub,
  .phero .crumb,.phero .en,.phero h1,.phero .lead,.gcard,.layer,.wgrid,.upd,.hpanel,.sdiv span{transform:none!important;opacity:1!important}
}

/* =========================================================
   ASSETS — radial orbital map (vanilla port of radial-orbital-timeline)
   ========================================================= */
.orbital{position:relative;width:100%;height:clamp(560px,74vh,780px);margin-top:18px;
  -webkit-user-select:none;user-select:none}
.orbital__fallback{margin:0;padding:0}
.orbital__fallback ul{margin:0;padding-left:1.1em;color:var(--muted)}
.orbital.is-live .orbital__fallback{display:none}
.orbital__stage{position:absolute;inset:0;overflow:hidden}
/* concentric guide ring (sized by JS) */
.orbital__ring{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  border:1px solid var(--line-soft);border-radius:50%;pointer-events:none}
/* center hub */
.orbital__hub{position:absolute;left:50%;top:50%;width:64px;height:64px;border-radius:50%;
  transform:translate(-50%,-50%);display:grid;place-items:center;z-index:60;cursor:pointer;
  background:linear-gradient(135deg,var(--accent),var(--accent2));
  box-shadow:0 0 40px rgba(123,107,242,.45);animation:orbPulse 3s cubic-bezier(.4,0,.6,1) infinite}
.orbital__hub::before,.orbital__hub::after{content:"";position:absolute;border-radius:50%;
  border:1px solid rgba(255,255,255,.25);animation:orbPing 2.4s cubic-bezier(0,0,.2,1) infinite}
.orbital__hub::before{width:84px;height:84px}
.orbital__hub::after{width:104px;height:104px;animation-delay:.7s;border-color:rgba(255,255,255,.15)}
.orbital__hub b{font-family:var(--disp);font-size:.6rem;letter-spacing:.18em;color:#fff;font-weight:600}
/* node = zero-size point at (center + orbit offset); dot/label centered on it */
.orbital__node{position:absolute;left:50%;top:50%;width:0;height:0;cursor:pointer;
  transition:transform .55s linear,opacity .55s linear}
.orbital__dot{position:absolute;left:0;top:0;transform:translate(-50%,-50%);
  width:46px;height:46px;border-radius:50%;display:grid;place-items:center;
  background:var(--bg);color:#cfc9ff;border:2px solid var(--line);transition:.3s}
.orbital__dot svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round}
.orbital__node:hover .orbital__dot{border-color:var(--accent);color:#fff}
.orbital__node.is-related .orbital__dot{background:rgba(255,255,255,.5);color:#0a0a14;border-color:#fff}
.orbital__node.is-active .orbital__dot{background:#fff;color:#0a0a14;border-color:#fff;
  transform:translate(-50%,-50%) scale(1.4);box-shadow:0 0 24px rgba(255,255,255,.35)}
.orbital__name{position:absolute;left:50%;top:30px;transform:translateX(-50%);white-space:nowrap;
  font-size:.74rem;letter-spacing:.04em;color:var(--muted);transition:.3s;pointer-events:none}
.orbital__node.is-active .orbital__name{color:#fff;font-weight:600;top:36px}
/* expanded detail card */
.orbital__card{position:absolute;left:50%;top:52px;transform:translateX(-50%);width:min(280px,78vw);
  background:rgba(8,8,16,.92);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border:1px solid var(--line);border-radius:12px;padding:18px 18px 20px;z-index:300;
  box-shadow:0 18px 50px rgba(0,0,0,.5);text-align:left;animation:orbCard .3s ease both}
.orbital__card::before{content:"";position:absolute;top:-10px;left:50%;width:1px;height:10px;
  background:rgba(255,255,255,.4)}
.orbital__cat{display:inline-block;font-family:var(--disp);font-size:.62rem;letter-spacing:.14em;
  color:var(--accent);border:1px solid var(--line);border-radius:999px;padding:3px 11px;margin-bottom:12px}
.orbital__card h4{margin:0 0 8px;font-size:1.05rem;font-weight:700;letter-spacing:.01em}
.orbital__card p{margin:0;font-size:.84rem;line-height:1.8;color:var(--muted)}
.orbital__rel{margin-top:14px;padding-top:12px;border-top:1px solid var(--line-soft)}
.orbital__rel .h{display:block;font-family:var(--disp);font-size:.6rem;letter-spacing:.12em;
  color:var(--faint);margin-bottom:9px}
.orbital__rel .chips{display:flex;flex-wrap:wrap;gap:7px}
.orbital__rel button{display:inline-flex;align-items:center;gap:5px;font-family:var(--jp);
  font-size:.74rem;color:#cfc9ff;background:transparent;border:1px solid var(--line);
  border-radius:999px;padding:4px 11px;cursor:pointer;transition:.25s;letter-spacing:.02em}
.orbital__rel button:hover{background:rgba(255,255,255,.08);color:#fff;border-color:var(--accent)}
.orbital__hint{position:absolute;left:0;right:0;bottom:6px;text-align:center;font-family:var(--disp);
  font-size:.6rem;letter-spacing:.18em;color:var(--faint);pointer-events:none}
@keyframes orbPulse{0%,100%{box-shadow:0 0 40px rgba(123,107,242,.45)}50%{box-shadow:0 0 60px rgba(73,167,255,.6)}}
@keyframes orbPing{0%{transform:translate(-50%,-50%) scale(.8);opacity:.8}80%,100%{transform:translate(-50%,-50%) scale(1.5);opacity:0}}
@keyframes orbCard{from{opacity:0;transform:translateX(-50%) translateY(8px)}to{opacity:1;transform:translateX(-50%) translateY(0)}}
.orbital__hub::before,.orbital__hub::after{left:50%;top:50%;transform:translate(-50%,-50%)}
@media(max-width:768px){
  .orbital{height:clamp(480px,76vh,620px)}
  .orbital__name{font-size:.68rem}
}

/* =========================================================
   BRAND LOGO — mark + wordmark（テーマ非依存のレイアウト）
   紫グラデのマークは dark/light 両方で視認可。文字色は ink を継承し自動追従。
   ========================================================= */
/* current-page nav indicator（旧インライン color:#fff を aria-current 化／ダークは従来の白を維持） */
.hdr__nav a[aria-current="page"]{color:#fff}
.hdr__logo{display:inline-flex;align-items:center;gap:9px}
.hdr__logo-mark{height:24px;width:auto;display:block;flex:none}
.hdr__logo-txt{font-family:var(--disp);font-weight:700;letter-spacing:.02em;font-size:1.05rem;line-height:1;white-space:nowrap}
@media(max-width:420px){.hdr__logo-txt{display:none}}  /* 極小幅はマークのみ */
/* footer brand lockup */
.ft__brand{display:flex;flex-direction:column;gap:20px}
.ft__brand-mark{height:52px;width:auto;display:block}

/* =========================================================
   SECTION HEADING — 小さい .lbl（アイブロウ）の下に置く中見出し。
   te.js の data-te で出現モーション。明朝・中サイズ。
   ========================================================= */
.sec-h{font-family:var(--mincho);font-weight:var(--mincho-w);letter-spacing:.01em;line-height:1.34;
  font-size:clamp(1.8rem,3.8vw,3rem);margin:0 0 clamp(28px,4vw,46px);max-width:32ch;
  text-wrap:balance}
/* アイブロウ(.lbl)は直後に見出しが来るとき間隔を詰める（POLISH v2 の大きめ margin を上書き） */
.lbl:has(+ .sec-h){margin-bottom:clamp(12px,1.6vw,18px)}
/* 見出し直後に lead/段落が続く場合は下マージンを少し詰める */
.sec-h:has(+ .lead),.sec-h:has(+ p){margin-bottom:clamp(16px,2.2vw,24px)}

/* =========================================================
   見出しのオーファン改行抑制（末尾数文字だけが折り返るのを均す）。
   text-wrap:balance は行を均等化＝長文は自然に複数行のまま、短い末尾だけの
   不格好な折り返しを解消。te.js の文字分割(inline-block)とも併用する。
   ========================================================= */
.prose-cz h2,.prose-cz h3,.gcard h3,.appr__row h3,.witem h3,
.cta h2,.pcta h2,.phero h1,.hpanel--intro h2{text-wrap:balance}

/* =========================================================
   PAGE TRANSITION — aurora wipe（2026-06-14）
   MPA（全ページ再読込）向けの cover & reveal。配色はブランド
   グラデ（紫→藍→青→スカイ）。dark/light 両対応の固定色。
   - 入場(reveal)＝body::before。CSS のみで自動再生＝render-blocking の
     cz.css により初回ペイント前に覆い状態が確定し FOUC を防ぐ（JS 不要・
     JS 失敗時も最終的に覆い無しへ収束＝安全）。
   - 退場(cover)＝pt.js が注入する .pt-veil を左→中央へスイープ。
   - 入場・退場とも「右向きの連続ワイプ」になるよう向きを揃える。
   ========================================================= */
.pt-veil,
body::before{
  content:"";position:fixed;top:-8%;bottom:-8%;left:-50%;width:200%;
  z-index:9999;pointer-events:none;
  /* 不透明ブランドグラデ（透けなし）＋薄シアンのオーロラ・ハイライト。 */
  background:
    radial-gradient(120% 85% at 28% 18%, rgba(127,224,255,.30), transparent 58%),
    linear-gradient(115deg, #5b46e6 0%, #6a4dff 30%, #2f7fff 62%, #4db8ff 100%);
  /* エッジを大きく溶かす：マスクの長いフェード（不透明帯は中央20〜80%＝viewport
     換算 -10〜110% を確実に覆い、左右の長い溶けは“覆い切る瞬間”には画面外に逃がす）
     ＋ filter:blur で先端をさらにぼかす。透けはせず境界だけが溶けて消える。 */
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 20%,#000 80%,transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 20%,#000 80%,transparent 100%);
  filter:blur(8px);
  transform:translateX(-100%) skewX(-8deg);will-change:transform;
}
/* 入場：覆い(0)→右へ抜ける(100%)。fill both で静止時は「抜けた状態」＝覆い無し。 */
body::before{
  transform:translateX(100%) skewX(-8deg);
  animation:ptEnter .72s cubic-bezier(.7,0,.25,1) both;
}
@keyframes ptEnter{
  0%{transform:translateX(0) skewX(-8deg)}
  100%{transform:translateX(100%) skewX(-8deg)}
}
/* ホーム（.pl プリローダー有り）は入場をプリローダーが担うため擬似覆いを無効化。 */
body:has(.pl)::before{animation:none;transform:translateX(100%) skewX(-8deg)}

/* =========================================================
   LAYOUT RHYTHM（2026-06-15）
   全セクションが同一の左端（左レール）に縦積みされる単調さを解消する。
   セクション単位の整列バリエーション（中央／右アンカー／非対称split）。
   いずれもレイアウトのみ＝テーマ非依存。GSAP/te.js は class 選択のため
   要素ラップしても影響なし。
   ========================================================= */

/* --- 中央寄せ＝「宣言」セクション（lbl・見出し・リード・数値を中央へ） --- */
.sec--center{text-align:center}
.sec--center .lbl{justify-content:center}
.sec--center .lbl::after{content:"";width:46px;height:1px;background:currentColor} /* 左右対称の罫 */
.sec--center .stmt{margin-inline:auto;max-width:26ch}
.sec--center .stmt .r-line>span{text-align:center}
.sec--center .stmt-sub{margin-inline:auto;text-align:center}
/* design-review M1（2026-06-16）：中央セクションの本文中央揃え＋48chは可読性低下（和文>45字・左端不揃い）。
   Philosophy本文だけ左揃え＋measure短縮（ブロックは中央のまま＝中央の宣言＋左揃え補足）。
   Results注記(.stmt-sub)は短い中央キャプションのため対象外＝#philosophy 限定。 */
#philosophy .stmt-sub{text-align:left;max-width:38ch}

/* --- 右リズム見出し：テキストは左揃えのまま、ブロックを右へ寄せる
   （完全な右寄せ text-align:right にしない＝hd-right / prose-shift-r と統一） --- */
.sec--rhead .lbl{justify-content:flex-start}
.sec--rhead .lbl::before{order:0}
.sec--rhead .lbl,.sec--rhead .stmt,.sec--rhead .biz{margin-left:clamp(0px,6vw,100px)}
@media(max-width:900px){
  /* 中〜小幅では素直に左へ */
  .sec--rhead .lbl,.sec--rhead .stmt,.sec--rhead .biz{margin-left:0}
}

/* --- 非対称 split：sticky 見出し列 ＋ 本文列 --- */
.split2{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);
  gap:clamp(36px,5.5vw,104px);align-items:start;position:relative}
.split2__head{position:sticky;top:clamp(96px,13vh,150px)}
.split2 .stmt{font-size:clamp(1.7rem,3vw,3rem);line-height:1.2}
.split2 .lbl{margin-bottom:clamp(20px,2.4vw,30px)}
@media(max-width:900px){
  .split2{grid-template-columns:1fr;gap:34px}
  .split2__head{position:static}
}

/* --- セクションヘッダ：左ラベル ＋ 右の補助リンク（横の張力） --- */
.sec__head{display:flex;justify-content:space-between;align-items:baseline;gap:24px;flex-wrap:wrap}
.sec__head .lbl{margin-bottom:0}
.sec__head + *{margin-top:clamp(38px,5vw,64px)}
.sec__more{font-family:var(--disp);font-size:.8rem;letter-spacing:.1em;color:var(--muted);
  white-space:nowrap;display:inline-flex;align-items:center;gap:8px;transition:color .25s,gap .25s}
.sec__more:hover{color:var(--accent);gap:13px}

/* ---------------------------------------------------------
   SUBPAGES 用：見出しブロックだけを整列するモディファイア。
   .gcards / .appr / .layers / .wgrid / .prose 本文には触れない
   （カード/リストの中身まで中央寄せにすると崩れるため、ヘッダ列だけ動かす）。
   セクション(.block 等)に .hd-center / .hd-right を付与するだけで効く。
   --------------------------------------------------------- */
/* 見出しを動かしたら本文ブロックも「同じ側」へ寄せて一体に見せる
   ＝見出しの直下から内容が始まる（＝ちぐはぐの解消）。本文テキストは左のまま。
   全画面幅で確実に効くよう：狭い本文は margin:auto、全幅グリッドは可変インデント。 */

/* hd-center：見出しを中央へ。全幅グリッド(gcards)は中央軸が見出しと一致するため
   そのまま全幅。狭い本文(layers/prose/appr/wgrid/表/フォーム)だけ margin:auto で中央。 */
.hd-center{text-align:center}
.hd-center>.lbl{justify-content:center}
.hd-center>.lbl::after{content:"";width:46px;height:1px;background:currentColor}
.hd-center>.stmt .r-line>span{text-align:center}
.hd-center>.sec-h,.hd-center>.stmt,.hd-center>.lead,
.hd-center>.layers,.hd-center>.appr,.hd-center>.wgrid,
.hd-center>.prose-cz,.hd-center>.acc-cz,.hd-center>.ctable,.hd-center>.form-cz{margin-inline:auto}
.hd-center>.appr{max-width:980px}
.hd-center>.wgrid{max-width:1040px}
/* 中身のテキストは左に戻す（カード/段落の本文まで中央化しない） */
.hd-center>.gcards,.hd-center>.appr,.hd-center>.layers,.hd-center>.wgrid,
.hd-center>.prose-cz,.hd-center>.acc-cz,.hd-center>.ctable,.hd-center>.form-cz{text-align:left}

/* hd-right：テキストは「左揃えのまま」、ブロック全体を右へ寄せる
   （＝完全な右寄せ text-align:right にしない。prose-shift-r と同じ
   「左揃えテキストの右寄せブロック」に統一）。全要素を同じ量インデントして
   左端をそろえた一本の列にし、右へ寄せる。インデント量は prose-shift-r の
   左端（820px 列を margin-left:auto した位置）にほぼ一致させる。 */
.hd-right>.lbl{justify-content:flex-start}
.hd-right>.lbl::before{order:0}                   /* 罫は文字の左（通常） */
.hd-right>.lbl,.hd-right>.sec-h,.hd-right>.stmt,.hd-right>.lead,.hd-right>.tag-faint,
.hd-right>.gcards,.hd-right>.appr,.hd-right>.layers,.hd-right>.wgrid,
.hd-right>.prose-cz,.hd-right>.acc-cz,.hd-right>.ctable{margin-left:clamp(0px,6vw,100px)}
@media(max-width:1080px){
  /* 中〜小幅では素直に左へ */
  .hd-right>.lbl,.hd-right>.sec-h,.hd-right>.stmt,.hd-right>.lead,.hd-right>.tag-faint,
  .hd-right>.gcards,.hd-right>.appr,.hd-right>.layers,.hd-right>.wgrid,
  .hd-right>.prose-cz,.hd-right>.acc-cz,.hd-right>.ctable{margin-left:0}
}

/* bridge（prose-cz だけのセクション）はカラムごと中央/右へシフト。
   本文テキストは左のまま＝可読性を保ちつつ「列の位置」でリズムをつける。 */
.prose-shift-c>.prose-cz{margin-inline:auto}
.prose-shift-r>.prose-cz{margin-left:auto}
@media(max-width:680px){.prose-shift-r>.prose-cz{margin-left:0}}

/* フォーム / アコーディオン / 比較表 / works グリッドを中央寄せ（列を中央へ）。
   見出しは .hd-center 併用で中央に。中身の整列は各コンポーネント既定のまま。 */
.blk-center>.form-cz,.blk-center>.acc-cz,.blk-center>.ctable,.blk-center>.layers,
.blk-center>.wgrid,.blk-center>.gcards,.blk-center>.prose-cz{margin-inline:auto}

/* phero：左の大見出しに対して lead を右寄りの列へ（対角の非対称）。
   .phero--split を phero に付与。狭幅では素直に左へ戻す。 */
.phero--split .lead{margin-left:auto;max-width:52ch}
@media(max-width:760px){.phero--split .lead{margin-left:0;text-align:left;max-width:62ch}}

/* ═══════════════════════════════════════════════════════════════════════
   EDITORIAL DEVICES — 会社紹介資料2026 の設計言語を index へ移植（2026-06-16）
   ─────────────────────────────────────────────────────────────────────────
   テーマ非依存の「加算的」新規クラス群。既存のダーク定義（cz.css 上部）も
   ライト層（cz-light.css）も一切改変しない。ここに集約することで
   ダーク復帰時もそのまま機能する（色はトークン var(...) 参照で両テーマ追従）。
   構成要素：① 巨大ゴースト英字（背面装飾） ② ブラケット［ ］framing
            ③ 巨大セクション番号 ④ ダーク反転セクション修飾 .sec--ink
   全ての装飾は aria-hidden / data-te-skip（te.js のモーション対象外）。
   デッキ art_direction_v2 準拠：スケール差は大胆／60-30-10／余白で呼吸。
   ═══════════════════════════════════════════════════════════════════════ */

/* ── ① 巨大ゴースト英字（PHILOSOPHY / BUSINESS …） ──────────────────────
   セクション見出しの背面に置く大型エディトリアル文字（デッキ rev2/9/14/29）。
   .sec は position:relative 済（上部 .sec{position:relative}）＝親に絶対配置。
   色は地に極めて近い薄ベタ（ライト #EAE7DD 1.14:1／ダーク #20202C 1.14:1）。
   装飾につき WCAG 例外（aria-hidden）。デッキの ghost_word(spc=-1.0,ls=0.9) を踏襲。 */
.ghost{position:absolute;z-index:0;pointer-events:none;user-select:none;
  font-family:var(--disp);font-weight:700;line-height:.82;letter-spacing:-.03em;
  font-size:clamp(4.5rem,13vw,12rem);white-space:nowrap;
  color:var(--ghost-c);
  /* 見出し帯に重なる位置へ：セクション上パディング（clamp 120-300px）の途中まで下げ、
     ラベル〜見出しの背後に来るようにする（デッキ rev9 の「主役の背後に薄ベタ」）。 */
  top:clamp(48px,11vh,120px);left:-0.03em}
/* セクション本体（見出し・本文・カード）は必ずゴーストの前面に */
.sec>:not(.ghost){position:relative;z-index:1}
/* 右寄せ配置バリアント（番号と左右で張力を作る章で使用） */
/* design-review S2：BUSINESS が右端で語尾「S」途中から断たれ「溢れ」に誤読される。
   ブリードを深め断面を語の重い字画側へ寄せ、語頭「BUSI」を主役見出し背後に重ねて
   「重心が画面内」を作る（デッキ rev1/29 のゴースト断ち切りに倣う）。 */
.ghost--right{left:auto;right:-0.42em}
/* 中央寄せ（.sec--center の宣言セクション：見出しが中央＝ゴーストも中央軸に） */
.sec--center>.ghost{left:50%;right:auto;transform:translateX(-50%);text-align:center}
/* アウトライン版（ベタが重い大番号並置時に視覚重量を逃がす） */
.ghost--outline{color:transparent;-webkit-text-stroke:2px var(--ghost-c);text-stroke:2px var(--ghost-c)}
/* ※ .sec に overflow:hidden は付けない（.split2__head の position:sticky を殺すため）。
   横はみ出しは既存の html{overflow-x:hidden} が受ける。右ブリードはデッキ rev9 同様に許容。
   .sec--ink だけは反転背景の矩形を切り出すため局所的に overflow:hidden（sticky 不使用）。 */
.sec--ink{overflow:hidden}
@media(max-width:860px){
  .ghost{font-size:clamp(3.4rem,16vw,7rem);top:clamp(40px,8vh,80px)}
}

/* ── ② ブラケット［ ］framing ─────────────────────────────────────────
   主役見出しを左右の鉤括弧で挟む（デッキ表紙/CTA の［QUESTION］framing）。
   ::before / ::after で角括弧の二辺を引く＝フォント非依存・色はトークン。
   .stmt / .cta h2 を .frame でラップした要素に付与する想定。 */
.frame{position:relative;display:inline-block;
  padding:clamp(.5rem,1.4vw,1.1rem) clamp(1rem,2.6vw,2.2rem)}
.frame::before,.frame::after{content:"";position:absolute;top:0;bottom:0;
  width:clamp(.7rem,1.6vw,1.5rem);
  border:solid var(--bracket-c);border-width:2px}
.frame::before{left:0;border-right:0}
.frame::after{right:0;border-left:0}
@media(max-width:680px){
  .frame{padding-inline:clamp(.7rem,3vw,1.4rem)}
  .frame::before,.frame::after{width:.7rem;border-width:1.5px}
}

/* ── ③ 巨大セクション番号 ─────────────────────────────────────────────
   章の見せ場で番号を主役級に（デッキ rev2 の "01"）。明朝でなく欧文ディスプレイ。
   .secno を見出し列の頭に置く。グレースケールでも階層が立つ大きさ。 */
.secno{font-family:var(--disp);font-weight:700;line-height:.86;letter-spacing:-.01em;
  font-size:clamp(3.6rem,8vw,7rem);
  background:linear-gradient(125deg,var(--accent),var(--accent2));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  display:block;margin-bottom:clamp(8px,1.4vw,16px)}

/* ── ④ .sec--ink ── ダーク反転セクション修飾（明暗リズム） ───────────────
   ページは data-theme="light" のまま、このセクションだけ局所的に暗地＋反転テキスト。
   デッキ rev29（CTA ダーク）の翻訳。トークンを「ローカル上書き」して
   配下の var(--ink/--muted/--line/--ghost-c) を全部ダーク基調へ切り替える。
   ＝既存セレクタの色指定を一切書き換えずに反転が伝播する。
   bg #14141C：主役 #F4F2EC 16.4:1／本文 #C8C8D4 11.1:1／補足 #9A9AAC 6.6:1（全て AA超）。 */
.sec--ink{
  --ink:#f4f2ec;          /* 主役（白文字） */
  --muted:#c8c8d4;        /* 本文・補助（11:1） */
  --faint:#9a9aac;        /* キャプション（6.6:1） */
  --line:rgba(255,255,255,.16);
  --line-soft:rgba(255,255,255,.08);
  --bracket-c:#7b6bf2;    /* ブラケットは熱源紫（4.56:1） */
  --ghost-c:#20202c;      /* 墨上の薄ゴースト（1.14:1・地に近い） */
  background:#14141c;color:var(--ink);
  position:relative;isolation:isolate;
  /* full-bleed（ユーザー指示2026-06-16「ダーク背景をフルワイドに」）：
     .maxw(1400px中央)を解除して背景を画面端まで＝section自身を全幅化し、
     content は padding で 1400px 中央に保つ（隣接ライト.maxwセクションと content 左端が一致）。
     overflow:hidden(上部)はゴーストを全幅矩形内にクリップ。 */
  max-width:none;margin-inline:0;
  padding-inline:max(var(--pad), calc(50% - 700px + var(--pad)))}
/* aurora がダート帯に透けると濁るため、.sec--ink は不透明な暗地で覆う（§2-3 透過維持の例外＝意図的） */
.sec--ink::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(120% 120% at 84% 8%,rgba(123,107,242,.16),transparent 56%),
    radial-gradient(90% 90% at 8% 100%,rgba(47,127,255,.10),transparent 60%),
    #14141c}
.sec--ink>*{position:relative;z-index:1}
.sec--ink .secno{background:linear-gradient(125deg,#9b8cff,#6cb0ff)} /* 暗地で明度確保 */
/* ラベル/アイブロウのアクセントは暗地で明度を確保（#5b46e6=3.0:1→#9b8cff=6.6:1）。
   ライト層 html[data-theme=light] .lbl{color:var(--accent)} は .sec--ink のローカル
   --accent を見ないため、ここで .lbl 色を直接明るい紫へ。罫(::before)も追従。 */
.sec--ink .lbl{color:#9b8cff}
.sec--ink .lbl::before,.sec--ink .lbl::after{background:#9b8cff}
.sec--ink .btn--solid{background:var(--ink);border-color:var(--ink);color:#14141c}
.sec--ink .btn--solid:hover{background:#fff;border-color:#fff;color:#14141c}
.sec--ink .btn:not(.btn--solid){border-color:rgba(255,255,255,.28);color:var(--ink)}
.sec--ink .btn:not(.btn--solid):hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.5)}

/* ── CTA（.cta.sec--ink）でのブラケット framing 微調整 ──────────────────
   .cta h2 は margin:0 0 44px を持つ＝ブラケット内に下余白が出る。framing 時は
   h2 のマージンを殺し、ブラケットのパディングで上下対称の「間」を作る。 */
.cta .frame{margin:clamp(20px,3vw,40px) auto 0}
.cta .frame h2{margin:0}
/* CTA の中央ラベルは罫を左右対称に（.sec--center 以外でも中央化したため個別対応） */
.cta>.lbl{justify-content:center;margin-bottom:clamp(20px,3vw,34px)}
.cta>.lbl::after{content:"";width:46px;height:1px;background:currentColor}
/* CTA のゴーストはブラケット主役と適度に分離（上へ逃がす）＝主役を最優先（§2）。
   中央寄せにして見出しの背後・上方に薄く敷く（デッキ rev29 の QUESTION 背面）。 */
.cta>.ghost{left:50%;right:auto;transform:translateX(-50%);text-align:center;
  top:clamp(24px,5vh,56px)}
/* 暗地 CTA：マーキー（装飾）は控えめに沈め、主役（見出し・ボタン）を際立たせる。
   ブランド規律＝装飾は主張させない（§10-5）。muted直値で明地より一段落とす。 */
.sec--ink .ctamarq__t{color:#56566c}
.sec--ink .ctamarq__t span::after{color:#7b6bf2;opacity:.5}
/* 暗地 CTA のキーワード em：明地用の深色グラデはダートで沈むため、明度を上げた
   熱源グラデへ（デッキ rev29 ＝ダーク面 #7A52F0→#3D8BFF・大見出し級3:1確保）。 */
/* design-review S3：暗地 CTA の em を明側グラデへ（グレースケールでも沈みにくく）。
   ★旧セレクタ `.sec--ink .cta h2 em` はセクションが .cta.sec--ink 同居のため
   「.cta の子 h2」が存在せず不一致＝無効だった。実際に一致し、かつ
   html[data-theme=light] .cta h2 em（cz-light・特異度0,2,3）に勝つ形へ修正。 */
html[data-theme="light"] .sec--ink :is(.stmt,.cta) em,
.sec--ink :is(.stmt,.cta) em{
  background:none;
  background-image:linear-gradient(110deg,#b9a5ff,#7ab8ff);
  -webkit-background-clip:text;background-clip:text;color:transparent}

/* ── ゴースト/ブラケットのトークン既定（ライト＝ベース）。
      ダーク復帰時（data-theme なし）の既定も同ファイルで完結させる。 ── */
:root{--ghost-c:#20202c;--bracket-c:var(--accent);--meta:#9a9ab0}
/* design-review S4：注記・出典のコントラスト階層（デッキ META 相当）。FAINT(3.04:1)は
   メタ専用（©/ページ番号）に。読まれるべき注記は --meta（ダーク既定 7:1／ライトは cz-light で #6e6e86=4.6:1）へ。 */
/* design-review M2：語中改行・孤立助詞の防止（例「AI」と「が」の分断）。 */
.nb{white-space:nowrap}
/* 〔.sec--soft（中間トーン帯）は2026-06-16にユーザー指示で白紙化＝削除。
   recipe は HANDOFF §2-10 に保持（案②ウォッシュ＝off-white地＋紫.07/青.06ラジアル／
   旧案③グレージュ＝#e6e3d8＋上下罫）。再採用時はここに再追加し Approach 等に付与。〕 */

/* ═══ サブページ展開の足場（2026-06-16）═══════════════════════════════════════
   index は .sec/.stmt/.cta 系、サブページは .block/.phero/.pcta 系。
   編集装置（ゴースト/ブラケット/ダーク反転）を後者にも効かせる加算ルール。
   HTML側の付与（ghost語・.frame・.sec--ink）は各ページで行う。 */
/* ① ゴーストを .block / .phero の背面へ（本体を z:1 で前面に）。.phero は overflow:hidden 済（ghostは枠内にクリップ）。 */
.block>:not(.ghost),.phero>:not(.ghost){position:relative;z-index:1}
/* ② ダーク .pcta（ページCTAの墨クライマックス）の見出し em を明側グラデへ。
   .pcta h2 は無classかつ .pcta.sec--ink 同居のため、index の :is(.stmt,.cta) では拾えない→個別に。 */
html[data-theme="light"] .sec--ink.pcta h2 em,
.sec--ink.pcta h2 em{
  background:none;background-image:linear-gradient(110deg,#b9a5ff,#7ab8ff);
  -webkit-background-clip:text;background-clip:text;color:transparent}
/* ③ ダーク .pcta のブラケット framing（.cta 同様に h2 マージンを殺し上下対称の間に） */
.pcta .frame{display:inline-block;margin:clamp(16px,2.4vw,32px) auto 40px}
.pcta .frame h2{margin:0}
/* ④ .pcta は text-align:center ＝ ゴーストも中央軸に（index .cta>.ghost と同方針） */
.pcta>.ghost{left:50%;right:auto;transform:translateX(-50%);text-align:center;top:clamp(20px,5vh,52px)}
/* ⑤ approach 仕上げで追加（2026-06-16）：ダーク .pcta 内のアイブロウ .lbl は
   pcta が text-align:center のため中央化＋罫を左右対称に（index .cta>.lbl のサブページ版）。
   .lbl 既定は左寄せ flex＋左罫のみ＝中央寄せ面で左に流れて不自然になるのを補正。 */
.pcta>.lbl{justify-content:center;margin-bottom:clamp(18px,2.6vw,30px)}
.pcta>.lbl::after{content:"";width:46px;height:1px;background:currentColor}
/* ⑥ approach 仕上げで追加（2026-06-16）：.block に .hd-center（本文を中央寄せにする
   レイアウトモディファイア）を付けた節では、ゴーストも中央軸へ（見出しが中央＝ghostも中央）。
   index の .sec--center>.ghost と同方針。hd-center 以外（左/右レール）は既定の左基準のまま。 */
.block.hd-center>.ghost{left:50%;right:auto;transform:translateX(-50%);text-align:center}

/* ═══════════════════════════════════════════════════════════════════════
   INDEX / ARCHIVE — 索引（目録）レコードの縦積み（2026-06-22）
   ─────────────────────────────────────────────────────────────────────────
   設計意図：resources（お役立ち資料）を「2列カード格子（.wgrid/.witem）」から
   「横長レコードの縦積み目録（図書館カタログ／技術マニュアルの索引）」へ。
   主役＝“整理された集合”の権威性。1件1件の見栄えより、番号・分類・書誌メタで
   整然と並ぶ「目録としての一覧そのもの」を主役に置く（research §2-1）。
   ・既存 .wgrid/.witem/.cat/.go は不可侵＝完全新系統 .idx* を作る（works が当面継続使用）。
   ・色は全てトークン参照＝ダーク復帰追従／ライト層も改変不要。
   ・罫は 1px var(--line) のみ（太枠・影でカードを立てない＝§10-14）。索引の美は線の細さと整列。
   ・フィルタJS（cz-sub.js の [data-cat] 属性ベース）は .idx__row でも無改変で動く（works 展開時）。
   ・グレースケール耐性：番号(--disp 大)→タイトル(800)→概要(regular muted)→メタ(最小)の
     サイズ・ウェイト・位置だけで「目録レコード」と読める。紫の .cat は“あれば嬉しい棚タグ”。
   ═══════════════════════════════════════════════════════════════════════ */

/* ── コンテナ：レコードの縦積み。上罫＋各行の下罫で 1件ずつ区切る（.wgrid の罫思想の縦版）。 */
.idx{border-top:1px solid var(--line)}

/* ── 1レコード（<a>）＝3カラムグリッド：［番号］［書誌の主部］［書誌メタ］。
   gap は近接の道具：レコード内のカラム間隔（gap）＜ レコード間隔（padding 上下）。 */
.idx__row{display:grid;
  grid-template-columns:clamp(64px,8vw,110px) minmax(0,1fr) minmax(150px,210px);
  gap:clamp(18px,2.6vw,38px);align-items:start;
  padding:clamp(26px,3.4vw,46px) clamp(6px,1.4vw,20px);
  border-bottom:1px solid var(--line);position:relative;
  transition:background .3s ease}
.idx__row:hover{background:var(--bg2)}

/* ── 第1カラム：カタログ番号（視線の最初のアンカー・--disp ジオメトリック欧文）。
   主役のタイトルより“静かな脇役”＝色は --muted、サイズはタイトルと張り合わない範囲で大胆に。 */
.idx__no{font-family:var(--disp);font-weight:700;
  font-size:clamp(1.6rem,3vw,2.4rem);line-height:1;letter-spacing:-.01em;
  color:var(--muted);transition:color .3s ease;padding-top:.12em}
.idx__row:hover .idx__no{color:var(--accent)}

/* ── 第2カラム：書誌の主部（可変・主役）。 */
.idx__body{min-width:0}
/* 分類ラベル（既存 .cat の作法を踏襲＝accent紫・--disp・.12em）。.idx 専用に上下マージンを調整。 */
.idx__cat{font-family:var(--disp);font-size:.72rem;letter-spacing:.12em;
  color:var(--accent);margin:0 0 14px;display:block}
/* タイトル：索引の“格”。既存 .witem h3 と同スケール（一貫性）＝ゴシック800で番号・メタと対比。 */
.idx__t{margin:0 0 12px;font-weight:800;letter-spacing:-.01em;
  font-size:clamp(1.4rem,2.4vw,1.9rem);line-height:1.28;color:var(--ink);
  text-wrap:balance}
/* 概要：本文。measure を ≤45ch に制限（和文行長・§5）。
   行間は 1.6（§5 和文本文 1.5〜1.6 推奨レンジ内）＝目録の締まった密度を保つ（design-review N1）。 */
.idx__desc{margin:0;color:var(--muted);font-size:1.02rem;line-height:1.6;
  max-width:44ch}

/* ── 第3カラム：書誌メタ（<dl>＝ラベル：値）。索引の“情報の厚み”の正体。
   dt＝--disp 大文字ラベル／dd＝値（--ink/--muted）。
   dt の色は --muted（bg 8.57:1／hover時 bg2 7.69:1）＝ホバーで bg2 化しても AA本文基準を満たす。
   大文字＋トラッキングで“静かさ”を保てるため濃くしても主張し過ぎない（design-review S1）。 */
.idx__meta{margin:0;display:grid;gap:14px 0;align-content:start}
.idx__meta>div{display:grid;gap:3px 0}
.idx__meta dt{font-family:var(--disp);font-size:.66rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);margin:0}
.idx__meta dd{margin:0;font-size:.92rem;line-height:1.5;color:var(--ink)}
.idx__meta dd.idx__meta-sub{color:var(--muted)}

/* ── 右端 DL インジケータ（既存 .witem .go の作法＝絶対配置・ホバーで accent＋送り）。 */
.idx__go{position:absolute;right:clamp(8px,1.4vw,22px);
  bottom:clamp(22px,3vw,40px);color:var(--muted);font-family:var(--disp);
  transition:color .3s ease,transform .3s ease;pointer-events:none}
.idx__row:hover .idx__go{color:var(--accent);transform:translateX(6px)}

/* ── phero の総数メタ（“これは目録だ”を宣言する欄外メタ）。.en 内にインライン。 */
.idx__count{font-family:var(--disp);color:var(--meta);
  letter-spacing:.16em;font-size:.74rem;margin-left:.9em}
.idx__count::before{content:"/ "}

/* ── レスポンシブ ─────────────────────────────────────────────────────────
   ≤980px：第3カラム（メタ）を本文の下へ折る＝番号＋本文の2カラムに。
   ≤640px：1カラム化＝番号→分類→タイトル→概要→メタの縦順（目録の骨格＝罫と番号は維持）。 */
@media(max-width:980px){
  .idx__row{grid-template-columns:clamp(56px,9vw,90px) minmax(0,1fr);
    gap:clamp(14px,2.2vw,28px) clamp(18px,3vw,34px)}
  .idx__meta{grid-column:2;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
    gap:14px 28px;margin-top:18px;padding-top:18px;border-top:1px solid var(--line-soft)}
  .idx__go{position:static;margin-top:18px;grid-column:2;
    justify-self:start;transform:none}
  .idx__row:hover .idx__go{transform:translateX(6px)}
}
@media(max-width:640px){
  .idx__row{grid-template-columns:1fr;gap:0;
    padding:clamp(24px,6vw,34px) 2px}
  .idx__no{font-size:clamp(1.5rem,7vw,2rem);margin-bottom:14px}
  .idx__meta{grid-column:1}
  .idx__go{grid-column:1}
}


/* ---- form submit (2026-10-05 本番化) ---- */
.hp-field{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}
.form-msg{margin:14px 0 0;color:#c0392b;font-size:.92rem;min-height:1em}
.form-msg:empty{display:none}
.form-cz button[disabled]{opacity:.55;cursor:progress}
.ind-list{list-style:none;margin:0;padding:clamp(30px,4vw,50px) 0 0;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;justify-content:center;gap:10px 12px}
.ind-list li{padding:9px 18px;border:1px solid var(--line);border-radius:999px;font-size:.92rem;color:var(--fg,inherit);line-height:1.4}