/* ============================================================
   Global Step — Renewal Top Page
   オープニング / ヒーロー(地球儀) / 各セクション
   ============================================================ */

/* ---------- opening ---------- */
.opening{
  position:fixed;inset:0;z-index:100;
  background:var(--bg);
  display:flex;align-items:center;justify-content:center;
  transition:transform 1s var(--ease),visibility 0s linear 1s;
}
.opening.done{transform:translateY(-101%);visibility:hidden}
.opening-inner{text-align:center;padding:0 20px}
.opening-line{
  font-family:var(--mincho);
  font-size:clamp(19px,3.4vw,34px);
  letter-spacing:.14em;
  opacity:0;transform:translateY(18px);
  animation:openLine 1.1s var(--ease) forwards;
}
.opening-line+.opening-line{margin-top:.9em;animation-delay:.7s}
.opening-line .grad{
  background:var(--grad);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
@keyframes openLine{to{opacity:1;transform:none}}
.opening-rule{
  width:0;height:1px;margin:26px auto 0;
  background:var(--grad);
  animation:openRule 1.2s var(--ease) 1.3s forwards;
}
@keyframes openRule{to{width:120px}}

/* ---------- step rail ---------- */
.rail{
  position:fixed;left:34px;top:50%;transform:translateY(-50%);
  z-index:40;display:flex;flex-direction:column;gap:26px;
}
.rail a{display:flex;align-items:center;gap:12px;opacity:.4;transition:opacity .4s}
.rail a:hover,.rail a.active{opacity:1}
.rail-num{font-family:var(--mono);font-size:10px;letter-spacing:.15em;color:var(--gold)}
.rail-label{
  font-family:var(--mono);font-size:9px;letter-spacing:.3em;color:var(--muted);
  max-width:0;overflow:hidden;white-space:nowrap;transition:max-width .5s var(--ease),color .4s;
}
.rail a.active .rail-label{max-width:140px;color:var(--ink)}
.rail-tick{width:14px;height:1px;background:var(--muted);transition:background .4s,width .4s}
.rail a.active .rail-tick{background:var(--gold);width:26px}
@media(max-width:1100px){.rail{display:none}}

/* ---------- hero ---------- */
.hero{position:relative;min-height:100svh;display:flex;align-items:center;overflow:hidden}
#globe{position:absolute;inset:0;width:100%;height:100%;display:block}
.hero-vignette{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse at 30% 45%,transparent 40%,rgba(7,11,22,.65) 100%)}
.hero-inner{
  position:relative;z-index:2;
  padding:0 clamp(22px,7vw,120px);
  max-width:1400px;width:100%;margin:0 auto;
}
.hero-label{
  font-family:var(--mono);font-size:10px;letter-spacing:.4em;color:var(--gold);
  margin-bottom:26px;display:flex;align-items:center;gap:14px;
}
.hero-label::before{content:"";width:34px;height:1px;background:var(--gold);flex:0 0 auto}
.hero-title{
  font-family:var(--mincho);font-weight:600;
  font-size:clamp(30px,5.6vw,64px);
  line-height:1.55;letter-spacing:.06em;
}
.hero-title .nb{display:inline-block}
.hero-title .grad{
  background:var(--grad);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.hero-sub{margin-top:30px;color:var(--muted);font-size:clamp(13px,1.3vw,15px);max-width:33em}
.hero-anim{opacity:0;transform:translateY(26px);transition:opacity 1s var(--ease),transform 1s var(--ease)}
body.ready .hero-anim{opacity:1;transform:none}
body.ready .hero-anim:nth-child(2){transition-delay:.15s}
body.ready .hero-anim:nth-child(3){transition-delay:.3s}
body.ready .hero-anim:nth-child(4){transition-delay:.45s}
.hero-vertical{
  position:absolute;right:clamp(18px,4vw,54px);top:50%;transform:translateY(-50%);
  writing-mode:vertical-rl;font-family:var(--mincho);
  font-size:13px;letter-spacing:.5em;color:rgba(234,238,248,.34);
  z-index:2;user-select:none;
}
@media(max-width:900px){.hero-vertical{display:none}}
.hero-scroll{
  position:absolute;left:clamp(22px,7vw,120px);bottom:34px;z-index:2;
  font-family:var(--mono);font-size:10px;letter-spacing:.34em;color:var(--muted);
  display:flex;align-items:center;gap:12px;
}
.hero-scroll::after{content:"";width:1px;height:44px;background:linear-gradient(var(--muted),transparent);
  animation:scrollPulse 2.2s ease-in-out infinite}
@keyframes scrollPulse{0%,100%{opacity:.3}50%{opacity:1}}

/* ---------- common section ---------- */
.section-inner{max-width:1120px;margin:0 auto;padding:clamp(90px,14vh,160px) clamp(22px,6vw,48px)}
.sec-label{
  font-family:var(--mono);font-size:10px;letter-spacing:.4em;color:var(--gold);
  display:flex;align-items:center;gap:14px;margin-bottom:22px;
}
.sec-label::before{content:attr(data-num);color:var(--muted);letter-spacing:.15em}
.sec-label::after{content:"";flex:0 0 34px;height:1px;background:linear-gradient(90deg,var(--gold),transparent)}
.sec-heading{
  font-family:var(--mincho);font-weight:600;
  font-size:clamp(24px,3.4vw,38px);line-height:1.6;letter-spacing:.06em;
  margin-bottom:clamp(36px,6vh,64px);
}

/* ---------- philosophy (pinned scroll) ---------- */
.philo{position:relative;height:300vh}
.philo-sticky{position:sticky;top:0;height:100svh;overflow:hidden;display:flex;align-items:center;justify-content:center}
.philo-fx{position:absolute;inset:0;pointer-events:none}
.philo-ring{
  position:absolute;left:50%;top:50%;border:1px solid rgba(124,156,255,.14);border-radius:50%;
  transform:translate(-50%,-50%) rotate(0deg);
}
.philo-ring.r1{width:min(72vw,620px);height:min(72vw,620px)}
.philo-ring.r2{width:min(46vw,400px);height:min(46vw,400px);border-color:rgba(167,139,250,.12)}
.philo-orbit-dot{
  position:absolute;left:50%;top:50%;width:6px;height:6px;border-radius:50%;
  background:var(--gold);box-shadow:0 0 14px 3px rgba(231,179,106,.5);
}
.philo-glow{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:min(60vw,520px);height:min(60vw,520px);border-radius:50%;
  background:radial-gradient(circle,rgba(124,156,255,.1),transparent 65%);
}
.philo-label{
  position:absolute;top:clamp(90px,14vh,140px);left:50%;transform:translateX(-50%);
  z-index:3;margin-bottom:0;white-space:nowrap;
}
.philo-stage{position:relative;z-index:2;text-align:center;padding:0 24px;width:100%}
.philo-item{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-46%);
  width:min(90%,760px);opacity:0;transition:opacity .7s var(--ease),transform .7s var(--ease);
}
.philo-item.active{opacity:1;transform:translate(-50%,-50%)}
.philo-item.passed{opacity:0;transform:translate(-50%,-54%)}
.philo-heading{
  font-family:var(--mincho);font-weight:600;
  font-size:clamp(24px,4.4vw,46px);line-height:1.7;letter-spacing:.08em;
}
.philo-line{display:block;width:56px;height:1px;background:var(--grad);margin:30px auto}
.philo-text{color:var(--muted);font-size:clamp(13px,1.25vw,15px)}
.philo-progress{
  position:absolute;bottom:44px;left:50%;transform:translateX(-50%);z-index:3;
  display:flex;gap:10px;
}
.philo-progress span{width:36px;height:2px;background:rgba(139,148,173,.3);overflow:hidden;position:relative}
.philo-progress span i{position:absolute;inset:0;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .3s linear}

/* ---------- stats (slot machine) ---------- */
.stats{padding:0 clamp(22px,6vw,48px)}
.stats-inner{
  max-width:1120px;margin:0 auto;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  display:grid;grid-template-columns:repeat(3,1fr);
  padding:clamp(36px,6vh,56px) 0;gap:26px;text-align:center;
}
@media(max-width:640px){
  .stats-inner{grid-template-columns:1fr;gap:38px}
}
.stat-num{
  font-family:var(--mincho);font-weight:600;line-height:1;
  font-size:clamp(44px,6vw,66px);
  display:flex;align-items:baseline;justify-content:center;
}
.stat-digit,.stat-suffix{
  background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;
}
.stat-val{display:inline-flex;overflow:hidden;height:1em}
.reel-col{
  display:flex;flex-direction:column;
  transform:translateY(0);
  transition:transform 1.7s cubic-bezier(.16,1,.3,1);
  will-change:transform;
}
.reel-col span{display:block;height:1em;line-height:1}
.stat-suffix{font-size:.4em;margin-left:.15em}
.stat-label{font-family:var(--mono);font-size:10px;letter-spacing:.3em;color:var(--muted);margin-top:12px}

/* ---------- what we do ---------- */
.wwd-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px}
.card{
  position:relative;border:1px solid var(--line);border-radius:14px;
  background:var(--surface);padding:34px 28px;
  transform-style:preserve-3d;will-change:transform;
  transition:border-color .4s,box-shadow .4s;
  overflow:hidden;
}
.card::before{
  content:"";position:absolute;inset:0;opacity:0;transition:opacity .4s;pointer-events:none;
  background:radial-gradient(360px circle at var(--mx,50%) var(--my,50%),rgba(231,179,106,.12),transparent 65%);
}
.card:hover{border-color:rgba(231,179,106,.4);box-shadow:0 18px 50px -18px rgba(0,0,0,.7)}
.card:hover::before{opacity:1}
.card-icon{
  width:46px;height:46px;border-radius:12px;display:flex;align-items:center;justify-content:center;
  border:1px solid var(--line);color:var(--blue);margin-bottom:22px;
  background:rgba(124,156,255,.06);
}
.card h3{font-family:var(--mincho);font-size:18px;letter-spacing:.08em;margin-bottom:12px;font-weight:600}
.card p{color:var(--muted);font-size:13px}
.card-en{font-family:var(--mono);font-size:9px;letter-spacing:.26em;color:rgba(139,148,173,.55);display:block;margin-top:20px}

/* ---------- strengths ---------- */
.str-layout{display:grid;grid-template-columns:1fr 1.4fr;gap:clamp(30px,6vw,90px)}
@media(max-width:860px){.str-layout{grid-template-columns:1fr}}
.str-sticky{position:sticky;top:120px;align-self:start}
@media(max-width:860px){.str-sticky{position:static}}
.str-item{
  display:flex;gap:26px;padding:34px 0;border-bottom:1px solid var(--line);
}
.str-item:first-child{border-top:1px solid var(--line)}
.str-num{
  font-family:var(--mincho);font-size:30px;color:rgba(231,179,106,.9);line-height:1.2;
  flex:0 0 auto;
}
.str-item h3{font-family:var(--mincho);font-size:18px;letter-spacing:.08em;margin-bottom:8px;font-weight:600}
.str-item p{color:var(--muted);font-size:13px}

/* ---------- services ---------- */
.svc-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:20px}
.svc{
  position:relative;border-radius:16px;padding:1px;overflow:hidden;
  background:linear-gradient(140deg,rgba(124,156,255,.35),rgba(139,148,173,.08) 40%,rgba(231,179,106,.35));
  transition:transform .5s var(--ease);
  display:block;transform-style:preserve-3d;will-change:transform;
}
.svc-inner{
  border-radius:15px;background:linear-gradient(160deg,#0d1428,#0a0f1f);
  padding:44px 36px;height:100%;position:relative;overflow:hidden;
}
.svc-inner::before{
  content:"";position:absolute;inset:0;opacity:0;transition:opacity .5s;pointer-events:none;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),rgba(124,156,255,.14),transparent 65%);
}
.svc:hover .svc-inner::before{opacity:1}
.svc-tag{font-family:var(--mono);font-size:9px;letter-spacing:.3em;color:var(--gold);margin-bottom:18px;display:block}
.svc h3{font-family:var(--mincho);font-size:clamp(24px,2.6vw,30px);letter-spacing:.1em;margin-bottom:16px;font-weight:600}
.svc p{color:var(--muted);font-size:13px;min-height:5.5em}
@media(max-width:680px){.svc p{min-height:0}}
.svc-link{
  font-family:var(--mono);font-size:11px;letter-spacing:.18em;color:var(--blue);
  display:inline-flex;align-items:center;gap:8px;margin-top:22px;transition:gap .35s var(--ease),color .35s;
}
.svc:hover .svc-link{gap:16px;color:var(--gold)}
.svc-note{display:block;margin-top:16px;font-size:11px;color:var(--gold);letter-spacing:.06em}

/* ---------- message ---------- */
.msg-layout{
  max-width:760px;position:relative;
  padding-left:clamp(24px,4vw,44px);
  border-left:1px solid rgba(231,179,106,.35);
}
.msg-layout::before{
  content:"";position:absolute;left:-1px;top:0;width:1px;height:72px;
  background:var(--grad);
}
.msg-quote{font-family:var(--mincho);font-weight:600;font-size:clamp(22px,2.8vw,30px);line-height:1.9;letter-spacing:.06em;margin-bottom:26px}
.msg-body{color:var(--muted);font-size:13.5px;max-width:40em}
.msg-body p+p{margin-top:1.3em}
.msg-sign{margin-top:36px;display:flex;align-items:baseline;gap:16px;flex-wrap:wrap}
.msg-sign-role{font-family:var(--mono);font-size:10px;letter-spacing:.24em;color:var(--gold)}
.msg-sign-name{font-family:var(--mincho);font-size:20px;letter-spacing:.14em}

/* ---------- journey ---------- */
.jr-list{position:relative;margin-top:14px;padding-left:36px;max-width:720px}
.jr-track{position:absolute;left:9px;top:8px;bottom:8px;width:1px;background:rgba(139,148,173,.22)}
.jr-track::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,var(--gold),var(--blue));
  transform:scaleY(var(--jp,0));transform-origin:top;
}
.jr-item{position:relative;padding-bottom:46px}
.jr-item:last-child{padding-bottom:0}
.jr-dot{
  position:absolute;left:-31px;top:7px;width:9px;height:9px;border-radius:50%;
  background:var(--bg);border:1px solid rgba(231,179,106,.7);transition:background .5s,box-shadow .5s;
}
.jr-item.on .jr-dot{background:var(--gold);box-shadow:0 0 14px rgba(231,179,106,.55)}
.jr-year{font-family:var(--mono);font-size:11px;letter-spacing:.24em;color:var(--gold)}
.jr-item h3{font-family:var(--mincho);font-size:17px;letter-spacing:.08em;margin:8px 0 6px;font-weight:600}
.jr-item p{color:var(--muted);font-size:13px;max-width:36em}

/* ---------- about ---------- */
.about-table{border-top:1px solid var(--line);max-width:820px}
.about-row{display:grid;grid-template-columns:160px 1fr;gap:20px;padding:26px 6px;border-bottom:1px solid var(--line)}
@media(max-width:600px){.about-row{grid-template-columns:1fr;gap:6px;padding:20px 4px}}
.about-row dt{font-family:var(--mono);font-size:11px;letter-spacing:.24em;color:var(--gold);padding-top:4px}
.about-row dd{font-size:14px}
.about-coord{font-family:var(--mono);font-size:10px;letter-spacing:.2em;color:var(--muted);margin-top:26px}

/* ---------- news (top strip) ---------- */
.tnews-list{border-top:1px solid var(--line)}
.tnews-item{
  display:grid;grid-template-columns:120px 110px 1fr auto;gap:18px;align-items:center;
  padding:24px 6px;border-bottom:1px solid var(--line);transition:background .35s,padding .35s;
}
.tnews-item:hover{background:rgba(124,156,255,.05);padding-left:16px}
@media(max-width:680px){.tnews-item{grid-template-columns:1fr;gap:6px}}
.tnews-date{font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--muted)}
.tnews-cat{
  font-family:var(--mono);font-size:9px;letter-spacing:.2em;color:var(--gold);
  border:1px solid rgba(231,179,106,.4);border-radius:999px;padding:3px 12px;text-align:center;width:fit-content;
}
.tnews-title{font-size:13.5px}
.tnews-arrow{color:var(--muted);font-family:var(--mono);font-size:12px;transition:color .3s,transform .3s}
.tnews-item:hover .tnews-arrow{color:var(--gold);transform:translateX(4px)}
@media(max-width:680px){.tnews-arrow{display:none}}
.tnews-empty{color:var(--muted);font-size:14px}
.tnews-more{margin-top:30px}
.tnews-more a{
  font-family:var(--mono);font-size:11px;letter-spacing:.18em;color:var(--blue);
  display:inline-flex;align-items:center;gap:8px;transition:gap .35s var(--ease),color .35s;
}
.tnews-more a:hover{gap:16px;color:var(--gold)}

/* ---------- cta ---------- */
.cta{position:relative;overflow:hidden;text-align:center}
.cta-glow{
  position:absolute;left:50%;bottom:-40%;transform:translateX(-50%);
  width:min(90vw,900px);height:min(90vw,900px);border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(231,179,106,.12),rgba(124,156,255,.06) 40%,transparent 70%);
}
.cta-arc{
  position:absolute;left:50%;bottom:-52%;transform:translateX(-50%);
  width:min(96vw,1000px);height:min(96vw,1000px);border-radius:50%;
  border:1px solid rgba(231,179,106,.25);pointer-events:none;
}
.cta-heading{font-family:var(--mincho);font-size:clamp(24px,3.6vw,40px);letter-spacing:.08em;font-weight:600;line-height:1.7}
.cta-text{color:var(--muted);margin:22px 0 40px;font-size:14px}
.cta-btn{
  position:relative;display:inline-block;font-family:var(--gothic);font-size:13px;letter-spacing:.2em;
  padding:18px 52px;border-radius:999px;color:var(--gold);
  border:1px solid rgba(231,179,106,.55);overflow:hidden;transition:color .4s,transform .25s ease-out;z-index:1;
}
.cta-btn::before{
  content:"";position:absolute;inset:0;background:var(--gold);z-index:-1;
  transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease);
}
.cta-btn:hover{color:#0a0d18}
.cta-btn:hover::before{transform:scaleX(1)}
.flow-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;text-align:left}
@media(max-width:820px){.flow-grid{grid-template-columns:1fr 1fr}}
@media(max-width:480px){.flow-grid{grid-template-columns:1fr}}
.flow-step{border:1px solid var(--line);border-radius:14px;padding:26px 22px;background:var(--surface);position:relative;overflow:hidden}
.flow-step::before{content:"";position:absolute;left:0;top:0;width:100%;height:2px;background:var(--grad);transform:scaleX(0);transform-origin:left;transition:transform .6s var(--ease)}
.flow-step:hover::before{transform:scaleX(1)}
.flow-num{font-family:var(--mono);font-size:10px;letter-spacing:.24em;color:var(--gold)}
.flow-step h3{font-family:var(--mincho);font-size:16px;letter-spacing:.08em;margin:12px 0 8px;font-weight:600}
.flow-step p{color:var(--muted);font-size:12.5px}
.chips{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin:30px 0 6px}
.chip{
  font-family:var(--mono);font-size:10px;letter-spacing:.18em;color:#b9c6ee;
  padding:8px 18px;border:1px solid rgba(124,156,255,.35);border-radius:999px;
  background:rgba(124,156,255,.06);
}
.cta-sub{margin-top:26px;font-size:12px;color:var(--muted)}
.cta-sub a{color:var(--blue);border-bottom:1px solid rgba(124,156,255,.4);transition:color .3s,border-color .3s}
.cta-sub a:hover{color:var(--gold);border-color:rgba(231,179,106,.6)}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  .opening{display:none}
  .hero-anim{opacity:1!important;transform:none!important}
  .philo{height:auto}
  .philo-sticky{position:static;height:auto;padding:120px 0}
  .philo-item{position:static;opacity:1!important;transform:none!important;margin:60px auto}
  .philo-progress{display:none}
  .jr-track::after{transform:scaleY(1)!important}
}