/* =========================================================
   ARTEORION 次世代版の演出（editorial.css の上に重ねる）
   テーマは「夜空の航法室」。最初の画面（時計・ナビ・ヒーロー）とお問い合わせ欄を、
   昼の表示でも紺の舞台にして、金色の図形を光らせる。
   文言・構成・文字の解読演出・図形（canvas）の描き方は変えない。
   B案（editorial.css だけ）に戻すときは、functions.php で next.css と next.js の読み込みを外す。
   ========================================================= */

/* 紺の舞台で使う色（昼・夜とも同じ）。この中では --text などを上書きする */
.site-nav, .hero, .page-hero, .cta-block, .nx-marquee{
  --bg:#0B1324; --surface:#111C33; --surface-alt:#15223D; --border:rgba(236,232,223,.14);
  --text:#ECE8DF; --muted:#A4ABBA; --rule:rgba(236,232,223,.22);
  --inv-bg:#ECE8DF; --inv-text:#0B1324; --inv-muted:#4E5566;
  --gold:#E2B26A;
  color:var(--text);
}

/* ---------- 一番上：読み進めた量を示す金色の細い線 ---------- */
.nx-progress{position:fixed; top:0; left:0; right:0; height:2px; z-index:100; pointer-events:none;
  background:linear-gradient(90deg,#9a6b2c,#E2B26A 60%,#fff3d6); transform-origin:0 50%; transform:scaleX(var(--nx-p,0));}

/* ---------- 時計：秒の点滅と、福岡の点の光 ---------- */
.wclock{background:#070D1A; border-bottom:1px solid rgba(236,232,223,.08);}
.wclock .home .city::before{background:#E2B26A; box-shadow:0 0 0 0 rgba(226,178,106,.6); animation:nx-pulse 2.4s infinite;}
@keyframes nx-pulse{ 0%{box-shadow:0 0 0 0 rgba(226,178,106,.55);} 70%{box-shadow:0 0 0 7px rgba(226,178,106,0);} 100%{box-shadow:0 0 0 0 rgba(226,178,106,0);} }

/* ---------- ナビ：紺のガラス。スクロールしても上に残る ---------- */
header.site-nav{position:sticky; top:0; z-index:60; background:#0B1324;
  -webkit-backdrop-filter:blur(14px) saturate(140%); backdrop-filter:blur(14px) saturate(140%);
  transition:background .3s;}
.navrow{border-bottom:1px solid rgba(236,232,223,.1); transition:padding .3s var(--ease);}
.nx-scrolled header.site-nav{background:rgba(11,19,36,.82);}
.nx-scrolled .navrow{padding-top:12px; padding-bottom:12px;}
.navrow .mark canvas{filter:brightness(1.7) drop-shadow(0 0 6px rgba(226,178,106,.55));}
.navrow .byline{color:var(--muted);}
html body .navrow .links a, html body .navrow .links a:visited{color:var(--text);}
.util-btn{color:var(--muted); border-color:rgba(236,232,223,.25);}

/* ---------- ヒーロー：夜空の舞台 ---------- */
.hero, .page-hero{position:relative; isolation:isolate; overflow:hidden; background:#0B1324; border-bottom:0;}
/* 星雲のような光（金と青）。マウスの位置で少し動く */
.hero::before, .page-hero::before{content:""; position:absolute; inset:-20%; z-index:-2; pointer-events:none;
  background:
    radial-gradient(38% 46% at calc(72% + var(--nx-dx,0) * 6%) calc(42% + var(--nx-dy,0) * 6%), rgba(226,178,106,.30), transparent 70%),
    radial-gradient(42% 50% at 18% 85%, rgba(64,110,200,.28), transparent 70%),
    radial-gradient(30% 40% at 95% 0%, rgba(120,90,200,.18), transparent 70%);
  animation:nx-drift 18s ease-in-out infinite alternate;}
@keyframes nx-drift{ from{transform:translate3d(-2%,0,0) scale(1);} to{transform:translate3d(2%,-2%,0) scale(1.06);} }
/* 方眼（航海図の格子）と星 */
.hero::after, .page-hero::after{content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(1px 1px at 12% 22%, rgba(255,255,255,.7), transparent 60%),
    radial-gradient(1px 1px at 34% 68%, rgba(255,255,255,.5), transparent 60%),
    radial-gradient(1.5px 1.5px at 58% 14%, rgba(255,240,210,.8), transparent 60%),
    radial-gradient(1px 1px at 81% 76%, rgba(255,255,255,.55), transparent 60%),
    radial-gradient(1px 1px at 92% 38%, rgba(255,255,255,.45), transparent 60%),
    radial-gradient(1px 1px at 46% 90%, rgba(255,255,255,.4), transparent 60%),
    linear-gradient(rgba(236,232,223,.05) 1px, transparent 1px) 0 0/64px 64px,
    linear-gradient(90deg, rgba(236,232,223,.05) 1px, transparent 1px) 0 0/64px 64px;
  -webkit-mask-image:radial-gradient(120% 90% at 60% 40%, #000 30%, transparent 85%);
          mask-image:radial-gradient(120% 90% at 60% 40%, #000 30%, transparent 85%);}
/* マウスの位置を照らすスポットライト */
.nx-spot{position:absolute; inset:0; z-index:-1; pointer-events:none; opacity:0; transition:opacity .5s;
  background:radial-gradient(420px circle at var(--nx-mx,50%) var(--nx-my,50%), rgba(226,178,106,.12), transparent 60%);}
.hero:hover .nx-spot, .page-hero:hover .nx-spot{opacity:1;}

.arteorion-front .hero-inner{min-height:calc(100svh - 120px); padding-top:80px; padding-bottom:110px; grid-template-columns:1.05fr .95fr;}
.arteorion-front .hero h1{font-size:clamp(44px,7.6vw,128px); line-height:1.08; letter-spacing:-.035em;}
/* 見出しの文字に、生成りから金への光のグラデーション（解読中の文字にも効く） */
.hero h1, .page-hero h1{background:linear-gradient(100deg,#FFFFFF 0%,#ECE8DF 45%,#E2B26A 80%,#B98642 100%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent;}
.hero .eyebrow, .page-hero .eyebrow{color:var(--gold);}
.hero .eyebrow::before, .page-hero .eyebrow::before{background:var(--gold);}
.hero p.lede, .page-hero p.lede{color:var(--muted);}
.lede-sign{border-left-color:var(--gold);}
.hero .principle{border-top-color:var(--rule);}

/* フラワーオブライフとフラーレン：大きくして、光らせる（描き方は同じ） */
.arteorion-front .hero-mark canvas{max-width:min(560px,44vw); filter:drop-shadow(0 0 18px rgba(226,178,106,.45)) brightness(1.35);
  transform:translate3d(calc(var(--nx-dx,0) * -14px), calc(var(--nx-dy,0) * -14px), 0); transition:transform .6s var(--ease);}
.arteorion-front .hero-mark{position:relative;}
/* 図形の後ろの光の輪（ゆっくり回る） */
.arteorion-front .hero-mark::before{content:""; position:absolute; width:min(620px,48vw); aspect-ratio:1; border-radius:50%; z-index:-1;
  background:conic-gradient(from 0deg, transparent 0 20%, rgba(226,178,106,.35) 30%, transparent 42%, transparent 70%, rgba(90,140,230,.30) 82%, transparent 94%);
  -webkit-mask:radial-gradient(closest-side, transparent 92%, #000 93%, #000 100%); mask:radial-gradient(closest-side, transparent 92%, #000 93%, #000 100%);
  animation:nx-spin 24s linear infinite;}
.arteorion-front .hero-mark::after{content:""; position:absolute; width:min(470px,36vw); aspect-ratio:1; border-radius:50%; z-index:-1;
  border:1px dashed rgba(236,232,223,.14); animation:nx-spin 60s linear infinite reverse;}
@keyframes nx-spin{ to{transform:rotate(360deg);} }

/* 座標の表示と、下へのスクロール案内 */
.nx-coord{position:absolute; right:4vw; bottom:28px; z-index:1; font-family:var(--mono); font-size:10.5px; letter-spacing:.18em; color:var(--muted); text-align:right; line-height:1.9;}
.nx-coord b{color:var(--gold); font-weight:400;}
.nx-scroll{position:absolute; left:4vw; bottom:28px; z-index:1; display:flex; align-items:center; gap:12px; font-family:var(--mono); font-size:10.5px; letter-spacing:.24em; color:var(--muted);}
.nx-scroll i{display:block; width:1px; height:42px; background:linear-gradient(var(--gold),transparent); position:relative; overflow:hidden;}
.nx-scroll i::after{content:""; position:absolute; left:0; top:-40%; width:1px; height:40%; background:#fff; animation:nx-fall 2s var(--ease) infinite;}
@keyframes nx-fall{ to{top:110%;} }

/* LegacyORION のネットワーク図の枠も、光る窓にする */
.hero .legacy-map{background:rgba(17,28,51,.6); border-color:rgba(226,178,106,.35); box-shadow:0 0 0 1px rgba(236,232,223,.04), 0 30px 80px -20px rgba(226,178,106,.25);}
.hero .legacy-map::before, .hero .legacy-map::after{content:""; position:absolute; width:14px; height:14px; border-color:var(--gold); border-style:solid; z-index:1;}
.hero .legacy-map::before{top:-1px; left:-1px; border-width:2px 0 0 2px;}
.hero .legacy-map::after{bottom:-1px; right:-1px; border-width:0 2px 2px 0;}
.hero .crumbs{color:var(--muted);}

/* ---------- ボタン：金の光が横切る。マウスに少し吸い寄せられる ---------- */
.btn{position:relative; overflow:hidden; isolation:isolate; transition:background .25s, color .25s, border-color .25s, transform .35s var(--ease), box-shadow .3s;}
.btn::after{content:""; position:absolute; top:0; bottom:0; left:-60%; width:40%; z-index:-1; pointer-events:none;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.55), transparent); transform:skewX(-20deg); transition:left .7s var(--ease);}
.btn:hover::after{left:130%;}
.hero .btn-primary, .page-hero .btn-primary, .cta-block .btn-primary{background:linear-gradient(100deg,#E2B26A,#C99245); color:#0B1324; box-shadow:0 10px 40px -10px rgba(226,178,106,.6);}
.hero .btn-primary:hover, .page-hero .btn-primary:hover{box-shadow:0 14px 50px -8px rgba(226,178,106,.8); color:#0B1324;}
.hero .btn-ghost, .page-hero .btn-ghost{border-color:rgba(236,232,223,.35); color:var(--text);}
.hero .btn-ghost:hover, .page-hero .btn-ghost:hover{background:var(--text); color:#0B1324;}

/* ---------- ヒーローの下：流れるキーワードの帯（飾り） ---------- */
.nx-marquee{position:relative; overflow:hidden; background:#0B1324; border-top:1px solid rgba(236,232,223,.1); border-bottom:1px solid var(--rule);}
.nx-marquee::before, .nx-marquee::after{content:""; position:absolute; top:0; bottom:0; width:10%; z-index:1; pointer-events:none;}
.nx-marquee::before{left:0; background:linear-gradient(90deg,#0B1324,transparent);}
.nx-marquee::after{right:0; background:linear-gradient(-90deg,#0B1324,transparent);}
.nx-marquee .nx-track{display:flex; width:max-content; animation:nx-marquee 42s linear infinite;}
.nx-marquee span{flex:0 0 auto; padding:18px 28px; font-family:var(--mono); font-size:12px; letter-spacing:.28em; color:var(--muted); white-space:nowrap;}
.nx-marquee span:nth-child(odd){color:var(--text);}
.nx-marquee span::after{content:"✦"; margin-left:56px; color:var(--gold); letter-spacing:0;}
@keyframes nx-marquee{ to{transform:translateX(-50%);} }

/* ---------- セクション：大きな透かし番号と、せり上がる登場 ---------- */
section.block, .statement{position:relative;}
[data-nx-num]::before{content:attr(data-nx-num); position:absolute; top:40px; right:2vw; z-index:0; pointer-events:none;
  font-family:var(--mono); font-size:clamp(90px,15vw,220px); line-height:1; letter-spacing:-.06em; font-weight:700;
  color:transparent; -webkit-text-stroke:1px var(--border); opacity:.9;}
section.block > *{position:relative; z-index:1;}
section.block > canvas.lattice-bg, section.block > canvas.wagara-bg{position:absolute; z-index:0;}
.nx-reveal{opacity:0; transform:translateY(36px); transition:opacity 1s var(--ease), transform 1s var(--ease);}
.nx-reveal.nx-in{opacity:1; transform:none;}

/* ---------- サービスのカード：紺に反転し、マウスの位置が光る ---------- */
.service, .op, .flow li{position:relative;}
.service::after{content:""; position:absolute; inset:0; pointer-events:none; opacity:0; transition:opacity .35s;
  background:radial-gradient(260px circle at var(--nx-mx,50%) var(--nx-my,50%), rgba(226,178,106,.22), transparent 65%);}
.service::before{content:""; position:absolute; left:0; top:0; height:2px; width:100%; background:linear-gradient(90deg,#E2B26A,transparent);
  transform:scaleX(0); transform-origin:left; transition:transform .5s var(--ease);}
.service:hover{background:#0B1324; color:#ECE8DF;}
.service:hover p{color:#A4ABBA;}
.service:hover::after{opacity:1;}
.service:hover::before{transform:scaleX(1);}
.service:hover .idx{color:#E2B26A;}
.service .idx{font-size:12px; letter-spacing:.12em;}
.feature-band{position:relative; overflow:hidden;}
.feature-band:hover{background:#0B1324; color:#ECE8DF;}
.feature-band:hover .fb-tag{color:#E2B26A;}

/* ---------- お問い合わせ：もう一度、夜空の舞台に ---------- */
.cta-block{background:#0B1324; max-width:none; isolation:isolate;}
section.block.cta-block{max-width:none;}
.cta-block::before{background:
    radial-gradient(40% 60% at 50% 0%, rgba(226,178,106,.22), transparent 70%),
    radial-gradient(40% 60% at 10% 100%, rgba(64,110,200,.22), transparent 70%); opacity:1;}
.cta-block .wagara-bg{opacity:.5; filter:brightness(1.4);}
.cta-block h2{font-size:clamp(32px,5vw,72px); background:linear-gradient(100deg,#FFFFFF,#ECE8DF 50%,#E2B26A);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;}
.cta-block .contact-inner{max-width:760px; margin:0 auto;}
.cta-block .contact-form input, .cta-block .contact-form select, .cta-block .contact-form textarea{background:rgba(255,255,255,.04); color:var(--text); border-color:rgba(236,232,223,.2);}

/* ---------- フッター：大きな社名の透かし ---------- */
footer{position:relative; overflow:hidden; background:#070D1A; color:#A4ABBA; padding-top:clamp(120px,16vw,240px);}
footer::before{content:"ARTEORION"; position:absolute; left:50%; top:24px; transform:translateX(-50%); white-space:nowrap; pointer-events:none;
  font-family:var(--mono); font-weight:700; font-size:clamp(56px,15.5vw,250px); line-height:1; letter-spacing:-.04em;
  color:transparent; -webkit-text-stroke:1px rgba(226,178,106,.35);
  -webkit-mask-image:linear-gradient(#000 30%,transparent 95%); mask-image:linear-gradient(#000 30%,transparent 95%);}

/* ---------- スマホ ---------- */
@media (max-width:760px){
  .arteorion-front .hero-inner{min-height:auto; padding-top:40px; padding-bottom:110px; grid-template-columns:1fr;}
  .arteorion-front .hero h1{font-size:clamp(40px,12vw,60px);}
  .arteorion-front .hero-mark canvas{max-width:240px;}
  .arteorion-front .hero-mark::before{width:280px;}
  .arteorion-front .hero-mark::after{width:210px;}
  .nx-coord{display:none;}
  [data-nx-num]::before{top:24px; font-size:84px;}
  .nx-marquee span{padding:14px 20px; font-size:11px;}
}


/* =========================================================
   さらに派手に（0.10.0 追加分）
   ========================================================= */
/* 夜空の canvas（星・流れ星・オリオン座） */
.nx-sky{position:absolute; inset:0; width:100%; height:100%; z-index:-1; pointer-events:none;}

/* 最初の画面の登場：文字が順にせり上がる（見出しは解読演出のまま） */
.hero .crumbs, .hero .eyebrow, .hero .lede, .hero .lede-sign, .hero .cta-row, .hero .principle,
.page-hero .eyebrow, .page-hero .lede, .page-hero .cta-row{animation:nx-rise 1.1s var(--ease) backwards;}
.hero .eyebrow, .page-hero .eyebrow{animation-delay:calc(var(--nx-d,0s) + .1s);}
.hero .lede, .page-hero .lede{animation-delay:calc(var(--nx-d,0s) + .45s);}
.hero .lede-sign{animation-delay:calc(var(--nx-d,0s) + .6s);}
.hero .cta-row, .page-hero .cta-row{animation-delay:calc(var(--nx-d,0s) + .75s);}
.hero .principle{animation-delay:calc(var(--nx-d,0s) + .9s);}
.hero .crumbs{animation-delay:var(--nx-d,0s);}
.hero-mark, .hero .legacy-map{animation:nx-zoom 1.8s var(--ease) backwards; animation-delay:calc(var(--nx-d,0s) + .15s);}
@keyframes nx-rise{ from{opacity:0; transform:translateY(28px);} to{opacity:1; transform:none;} }
@keyframes nx-zoom{ from{opacity:0; transform:scale(.82); filter:blur(8px);} to{opacity:1; transform:none; filter:none;} }

/* スクロールに合わせた奥行き：文字は上へ抜け、図形は手前に迫る */
.hero-inner > div:first-child{transform:translate3d(0, calc(var(--nx-s,0) * -120px), 0); opacity:calc(1 - var(--nx-s,0) * 1.1);}
.arteorion-front .hero-mark{transform:scale(calc(1 + var(--nx-s,0) * .35)); opacity:calc(1 - var(--nx-s,0) * .6);}

/* 図形の光をゆっくり脈打たせる */
.arteorion-front .hero-mark canvas{animation:nx-glow 5s ease-in-out infinite alternate;}
@keyframes nx-glow{ from{filter:drop-shadow(0 0 14px rgba(226,178,106,.35)) brightness(1.3);} to{filter:drop-shadow(0 0 34px rgba(226,178,106,.75)) brightness(1.5);} }

/* 光りながら回る枠（LegacyORIONへの帯・ネットワーク図・主ボタン） */
@property --nx-ang{syntax:'<angle>'; inherits:false; initial-value:0deg;}
.feature-band, .hero .legacy-map{border-color:transparent;}
.feature-band::before, .hero .legacy-map .nx-frame{content:""; position:absolute; inset:-1px; pointer-events:none; padding:1px;
  background:conic-gradient(from var(--nx-ang), rgba(226,178,106,.15) 0%, #E2B26A 12%, rgba(120,160,255,.8) 22%, rgba(226,178,106,.15) 34%, rgba(226,178,106,.15) 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude;
  animation:nx-turn 6s linear infinite;}
@keyframes nx-turn{ to{--nx-ang:360deg;} }
.feature-band{box-shadow:0 20px 60px -30px rgba(226,178,106,.6);}
.hero .btn-primary, .page-hero .btn-primary, .cta-block .btn-primary{animation:nx-btn 3s ease-in-out infinite;}
@keyframes nx-btn{ 0%,100%{box-shadow:0 10px 40px -10px rgba(226,178,106,.55);} 50%{box-shadow:0 10px 60px -4px rgba(226,178,106,.95);} }

/* お問い合わせ前の大きな輪郭文字の帯 */
.nx-bigline{overflow:hidden; background:#0B1324; padding:clamp(28px,4vw,56px) 0 0; border-top:1px solid rgba(236,232,223,.1);}
.nx-bigline .nx-track{display:flex; width:max-content; animation:nx-marquee 38s linear infinite;}
.nx-bigline span{flex:0 0 auto; padding:0 .45em; font-family:var(--mono); font-weight:700; font-size:clamp(56px,10vw,160px); line-height:1.1; letter-spacing:-.03em; white-space:nowrap;
  color:transparent; -webkit-text-stroke:1px rgba(236,232,223,.35);}
.nx-bigline span:nth-child(3n+2){-webkit-text-stroke:0; background:linear-gradient(100deg,#FFFFFF,#E2B26A); -webkit-background-clip:text; background-clip:text;}
.nx-bigline span::after{content:"✦"; margin-left:.45em; font-size:.4em; vertical-align:.6em; -webkit-text-stroke:0; color:#E2B26A;}
.nx-bigline + .cta-block{border-top:0;}
section.block + .nx-bigline{margin-top:0;}

/* カーソルを追う金の輪 */
.nx-cursor{position:fixed; left:0; top:0; z-index:200; width:34px; height:34px; margin:-17px 0 0 -17px; border-radius:50%; pointer-events:none;
  border:1px solid rgba(226,178,106,.85); mix-blend-mode:difference; opacity:0; transition:width .3s var(--ease), height .3s var(--ease), margin .3s var(--ease), opacity .3s, background .3s;}
.nx-cursor.on{opacity:1;}
.nx-cursor.big{width:64px; height:64px; margin:-32px 0 0 -32px; background:rgba(226,178,106,.18);}

@media (max-width:760px){
  .hero-inner > div:first-child{transform:none; opacity:1;}
  .nx-bigline span{font-size:52px;}
}

/* =========================================================
   幕開け（その訪問で最初に開いたページだけ。CSSだけで自動的に上がる）
   head-open.php の小さなスクリプトが html に nx-intro を付けたときだけ表示する。
   ========================================================= */
.nx-curtain{display:none;}
html.nx-intro{--nx-d:1.75s;}
html.nx-intro .nx-curtain{display:block; position:fixed; inset:0; z-index:1000; pointer-events:none;
  animation:nx-c-gone 0s linear 2.45s forwards;}
.nx-c-panel{position:absolute; left:0; right:0; height:50.5%; background:#0B1324;}
.nx-c-top{top:0; animation:nx-c-up .8s cubic-bezier(.76,0,.24,1) 1.6s forwards;
  background:radial-gradient(60% 90% at 50% 100%, rgba(226,178,106,.18), transparent 70%), #0B1324;}
.nx-c-bottom{bottom:0; animation:nx-c-down .8s cubic-bezier(.76,0,.24,1) 1.6s forwards;
  background:radial-gradient(60% 90% at 50% 0%, rgba(64,110,200,.18), transparent 70%), #0B1324;}
.nx-c-body{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:18px;
  animation:nx-c-fade .45s ease 1.4s forwards;}
.nx-c-mark{width:96px; height:96px; overflow:visible; filter:drop-shadow(0 0 12px rgba(226,178,106,.6));}
.nx-c-mark circle{stroke:#E2B26A; stroke-width:.9; stroke-dasharray:1; stroke-dashoffset:1; animation:nx-c-draw .9s var(--ease) forwards;}
.nx-c-mark circle:nth-child(1){stroke-width:.6; stroke-opacity:.6; animation-duration:1.2s;}
.nx-c-mark circle:nth-child(2){animation-delay:.05s;}
.nx-c-mark circle:nth-child(3){animation-delay:.12s;} .nx-c-mark circle:nth-child(4){animation-delay:.19s;} .nx-c-mark circle:nth-child(5){animation-delay:.26s;}
.nx-c-mark circle:nth-child(6){animation-delay:.33s;} .nx-c-mark circle:nth-child(7){animation-delay:.40s;} .nx-c-mark circle:nth-child(8){animation-delay:.47s;}
.nx-c-word{margin:0; display:flex; font-family:"Hiragino Mincho ProN","Yu Mincho",serif; font-size:clamp(22px,3vw,30px); letter-spacing:.42em; padding-left:.42em; color:#ECE8DF;}
.nx-c-word span{opacity:0; transform:translateY(12px); filter:blur(6px); animation:nx-c-letter .7s var(--ease) forwards;}
.nx-c-word span:nth-child(1){animation-delay:.45s;} .nx-c-word span:nth-child(2){animation-delay:.50s;} .nx-c-word span:nth-child(3){animation-delay:.55s;}
.nx-c-word span:nth-child(4){animation-delay:.60s;} .nx-c-word span:nth-child(5){animation-delay:.65s;} .nx-c-word span:nth-child(6){animation-delay:.70s;}
.nx-c-word span:nth-child(7){animation-delay:.75s;} .nx-c-word span:nth-child(8){animation-delay:.80s;} .nx-c-word span:nth-child(9){animation-delay:.85s;}
.nx-c-line{display:block; width:180px; height:1px; background:linear-gradient(90deg,transparent,#E2B26A,transparent); transform:scaleX(0); animation:nx-c-grow .8s var(--ease) .7s forwards;}
.nx-c-sub{margin:0; font-family:var(--mono); font-size:10.5px; letter-spacing:.3em; color:#A4ABBA; opacity:0; animation:nx-c-in .6s ease .95s forwards;}
@keyframes nx-c-draw{ to{stroke-dashoffset:0;} }
@keyframes nx-c-letter{ to{opacity:1; transform:none; filter:none;} }
@keyframes nx-c-grow{ to{transform:scaleX(1);} }
@keyframes nx-c-in{ to{opacity:1;} }
@keyframes nx-c-fade{ to{opacity:0; transform:scale(1.04);} }
@keyframes nx-c-up{ to{transform:translateY(-101%);} }
@keyframes nx-c-down{ to{transform:translateY(101%);} }
@keyframes nx-c-gone{ to{visibility:hidden;} }
html.nx-intro.nx-skip .nx-curtain{display:none;}
html.nx-intro.nx-skip{--nx-d:0s;}

/* =========================================================
   細部
   ========================================================= */
/* ページ内リンクで、見出しが上に残るナビに隠れないように */
html{scroll-behavior:smooth; scroll-padding-top:96px;}
/* 文字を選んだときの色・キーボード操作の枠 */
::selection{background:#E2B26A; color:#0B1324;}
:focus-visible{outline:2px solid #E2B26A; outline-offset:3px;}
.btn:focus-visible, .util-btn:focus-visible{outline-offset:4px;}
/* スクロールバー（対応ブラウザのみ） */
html{scrollbar-color:#9a6b2c #0B1324; scrollbar-width:thin;}
/* LegacyORION の英字は大文字にしない（サービス名の綴りを保つ） */
.eyebrow[data-i18n="legacy.eyebrow"]{text-transform:none; letter-spacing:.12em;}
/* カードが4枚のとき（会社概要の「ロゴに込めた意味」）は2×2にして、空きマスを出さない */
.services:has(> .service:nth-child(4):last-child){grid-template-columns:repeat(2,minmax(0,1fr));}
@media (max-width:640px){ .services:has(> .service:nth-child(4):last-child){grid-template-columns:1fr;} }
/* お問い合わせ欄の次のセクションは、紺との境に罫線を引かない */
html body section.block.cta-block + section.block{border-top:0;}
/* お問い合わせの入力欄：選んだときに金の光 */
.cta-block .contact-form input:focus, .cta-block .contact-form select:focus, .cta-block .contact-form textarea:focus{border-color:#E2B26A; box-shadow:0 0 0 3px rgba(226,178,106,.18);}
.cta-block .contact-form select option{background:#0B1324; color:#ECE8DF;}
/* 8工程の表：マウスを乗せると左に金の線が伸びる */
.flow li{background-image:linear-gradient(#E2B26A,#E2B26A); background-repeat:no-repeat; background-size:2px 0; background-position:0 50%; transition:background-color .3s, background-size .4s var(--ease);}
.flow li:hover{background-size:2px 70%;}
/* FAQ：開いたときに答えがふわっと出る */
.faq details[open] .a{animation:nx-rise .5s var(--ease);}
.faq summary:hover{color:var(--accent);}
/* 会社概要の表：行に細い区切り */
dl.facts dt, dl.facts dd{padding-top:12px; padding-bottom:12px; border-bottom:1px solid var(--border);}
/* 伴走のながれ：点の周りに金の光 */
.step::before{box-shadow:0 0 0 4px rgba(226,178,106,.12);}
/* ナビの今いるページは金の線 */
.navrow .links a[aria-current="page"]::after{background:#E2B26A; height:2px;}