*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
  --w:#FFFFFF;
  --k:#0A0A0A;
  --g50:#FAFAFA;
  --g100:#F5F5F5;
  --g200:#E8E8E8;
  --g400:#AAAAAA;
  --g500:#888888;
  --g600:#555555;
  --r:#f43b47;
  --p:#453a94;
  --grad:linear-gradient(135deg,#f43b47 0%,#453a94 100%);
  --grad-h:linear-gradient(to right,#453a94 0%,#f43b47 100%);
  --grad-v:linear-gradient(to top,#f43b47 0%,#453a94 100%);
  --max:1100px;
  --fd:'Barlow',sans-serif;
  --fj:'Noto Sans JP',sans-serif;
  --fm:'Barlow',sans-serif;
  --ease:cubic-bezier(.23,1,.32,1);
}

html{scroll-behavior:smooth}

body{
  background:var(--w);
  color:var(--k);
  font-family:var(--fj);
  font-size:13px;
  font-weight:500;
  line-height:1.8;
  letter-spacing:.1em;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  font-feature-settings:"palt";
}

::-webkit-scrollbar{width:2px}
::-webkit-scrollbar-track{background:var(--w)}
::-webkit-scrollbar-thumb{background:var(--grad)}
::selection{background:#453a94;color:#fff}


/* SHARED */
.container{max-width:var(--max);margin:0 auto;padding:0 40px}

.sec-label{
  font-family:var(--fm);font-size:9px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--g400);
  margin-bottom:48px;display:flex;align-items:center;gap:14px;
}
.sec-label::before{content:'';width:20px;height:1px;background:var(--grad);flex-shrink:0}

.gt{
  background:var(--grad);-webkit-background-clip:text;
  -webkit-text-fill-color:transparent;background-clip:text;
}

/* REVEAL */
.rv{
  opacity:0;transform:translateY(24px);
  transition:opacity .85s var(--ease),transform .85s var(--ease);
}
.rv.on{opacity:1;transform:translateY(0)}
.rv-l{
  opacity:0;transform:translateX(-28px);
  transition:opacity .85s var(--ease),transform .85s var(--ease);
}
.rv-l.on{opacity:1;transform:translateX(0)}
.rv-r{
  opacity:0;transform:translateX(28px);
  transition:opacity .85s var(--ease),transform .85s var(--ease);
}
.rv-r.on{opacity:1;transform:translateX(0)}

/* ===== HERO ===== */
#hero{
  min-height:100vh;display:flex;align-items:flex-end;
  border-bottom:1px solid var(--g200);
  position:relative;overflow:hidden;
}
.hero-bg{
  position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(228,228,228,.5) 1px,transparent 1px),
    linear-gradient(90deg,rgba(228,228,228,.5) 1px,transparent 1px);
  background-size:calc(100%/12) 80px;
  pointer-events:none;
}
.hero-inner{
  max-width:var(--max);margin:0;
  padding:0 40px 48px;width:100%;
  position:relative;z-index:1;
}
.hero-signal{position:absolute;right:80px;top:0;bottom:0;width:1px;background:rgba(200,200,200,.35);overflow:hidden}
.hero-signal::after{content:'';position:absolute;top:-30%;left:0;width:1px;height:30%;background:var(--grad);animation:sigSlide 2.8s ease-in-out 1.8s infinite}
@keyframes sigSlide{0%{top:-30%;opacity:0}20%{opacity:1}80%{opacity:1}100%{top:100%;opacity:0}}
.hero-coord{position:absolute;bottom:100px;right:40px;font-family:var(--fm);font-size:9px;letter-spacing:.15em;color:var(--g400);writing-mode:vertical-rl;opacity:0;animation:cdFade 1s ease 1.8s forwards}
@keyframes cdFade{to{opacity:1}}
.hero-eyebrow{
  font-family:var(--fm);font-size:10px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--g400);margin-bottom:40px;
  display:flex;align-items:center;gap:14px;
  opacity:0;animation:fadeUp .9s var(--ease) .6s forwards;
}
.hero-eyebrow::before{content:'';width:14px;height:1px;background:var(--grad);flex-shrink:0}
@keyframes fadeUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
.hero-title{
  font-family:var(--fd);
  font-size:clamp(40px,7.5vw,96px);
  line-height:.88;letter-spacing:-.03em;
  overflow:hidden;
}
.htl{
  display:block;
  opacity:0;transform:translateY(110%);
  animation:lineUp 1.1s var(--ease) forwards;
}
.htl:nth-child(1){animation-delay:.2s}
.htl:nth-child(2){animation-delay:.38s}
@keyframes lineUp{to{opacity:1;transform:translateY(0)}}
.hero-meta{
  margin-top:56px;display:flex;gap:0;align-items:flex-end;
  opacity:0;animation:fadeUp .9s var(--ease) 1.2s forwards;
  border-top:1px solid var(--g200);padding-top:28px;
}
.hm-item{
  padding-right:44px;margin-right:44px;
  border-right:1px solid var(--g200);
}
.hm-item:last-child{border-right:none;padding-right:0;margin-right:0}
.hm-num{font-family:var(--fm);font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:var(--g400);margin-bottom:6px}
.hm-val{font-family:var(--fd);font-size:clamp(13px,1.4vw,16px);letter-spacing:.04em;color:var(--k);font-weight:500}

/* ===== INTRO ===== */
#intro{
  padding:100px 0;
  border-bottom:1px solid var(--g200);
}
.intro-grid{
  display:grid;grid-template-columns:1fr 1.2fr;
  gap:80px;align-items:center;
}
.intro-title{
  font-family:var(--fd);font-size:clamp(22px,3vw,38px);
  line-height:.95;letter-spacing:.01em;margin-bottom:24px;
}
.intro-body{font-size:13px;color:var(--g600);line-height:2.2}
.pillar-list{
  display:flex;flex-direction:column;gap:1px;
  background:var(--g200);border:1px solid var(--g200);
}
.pillar-item{
  background:var(--w);padding:24px 28px;
  display:flex;align-items:center;gap:20px;
  transition:background .2s;position:relative;overflow:hidden;
}
.pillar-item::before{
  content:'';position:absolute;top:0;left:0;bottom:0;width:2px;
  background:var(--grad);transform:scaleY(0);transform-origin:top;
  transition:transform .4s var(--ease);
}
.pillar-item:hover{background:rgba(244,59,71,.01)}
.pillar-item:hover::before{transform:scaleY(1)}
.pillar-num{
  font-family:var(--fd);font-size:11px;letter-spacing:.08em;
  color:var(--g400);flex-shrink:0;
}
.pillar-en{
  font-family:var(--fm);font-size:9px;letter-spacing:.15em;
  text-transform:uppercase;color:var(--g400);display:block;margin-bottom:2px;
}
.pillar-ja{font-size:13px;font-weight:500;color:var(--k)}
.pillar-arrow{
  margin-left:auto;font-family:var(--fm);font-size:10px;
  color:var(--g400);transition:transform .25s,color .2s;
}
.pillar-item:hover .pillar-arrow{transform:translateX(4px);color:var(--k)}

/* ===== SERVICE SECTIONS ===== */
.svc-section{
  padding:120px 0;
  border-bottom:1px solid var(--g200);
}
.svc-section:nth-of-type(even){background:var(--g50)}
.svc-layout{
  display:grid;grid-template-columns:1fr 1fr;
  gap:80px;align-items:start;
}
.svc-layout.rev{direction:rtl}
.svc-layout.rev > *{direction:ltr}
.svc-left{}
.svc-num{
  font-family:var(--fd);font-size:11px;letter-spacing:.12em;
  color:var(--g400);margin-bottom:20px;
  display:flex;align-items:center;gap:10px;
}
.svc-num::before{content:'';width:16px;height:1px;background:var(--grad);flex-shrink:0}
.svc-en{
  font-family:var(--fm);font-size:9px;letter-spacing:.2em;
  text-transform:uppercase;
  background:var(--grad);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
  margin-bottom:12px;
}
.svc-title{
  font-family:var(--fd);font-size:clamp(28px,3.5vw,48px);
  line-height:.92;letter-spacing:.01em;margin-bottom:28px;
}
.svc-body{
  font-size:13px;color:var(--g600);line-height:2.2;margin-bottom:36px;
}
.svc-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:24px}
.svc-tag{
  font-family:var(--fm);font-size:8px;letter-spacing:.1em;
  padding:4px 10px;border:1px solid var(--g200);color:var(--g500);
  transition:border-color .2s,color .2s;
}
.svc-tag:hover{border-color:var(--k);color:var(--k)}
.svc-right{}
.svc-card-stack{
  display:flex;flex-direction:column;gap:1px;
  background:var(--g200);border:1px solid var(--g200);
}
.svc-card{
  background:var(--w);padding:28px 32px;
  position:relative;overflow:hidden;
  transition:background .25s;
}
.svc-card:hover{background:rgba(244,59,71,.012)}
.svc-card::before{
  content:'';position:absolute;top:0;left:0;right:0;height:1.5px;
  background:var(--grad);transform:scaleX(0);transform-origin:left;
  transition:transform .5s var(--ease);
}
.svc-card:hover::before{transform:scaleX(1)}
.svc-card-label{
  font-family:var(--fm);font-size:8px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--g400);margin-bottom:8px;
}
.svc-card-title{
  font-size:13px;font-weight:500;line-height:1.5;margin-bottom:6px;
}
.svc-card-desc{font-size:12px;color:var(--g600);line-height:1.9}
.svc-icon{
  width:32px;height:32px;background:var(--grad);
  display:flex;align-items:center;justify-content:center;
  margin-bottom:24px;flex-shrink:0;
}
.svc-highlight{
  margin-top:32px;padding:24px;
  border:1px solid var(--g200);background:var(--g50);
  border-left:2px solid transparent;
  background-clip:padding-box;
  position:relative;
}
.svc-highlight::before{
  content:'';position:absolute;top:0;left:-1px;bottom:0;width:2px;
  background:var(--grad);
}
.svc-highlight-label{
  font-family:var(--fm);font-size:8px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--g400);margin-bottom:8px;
}
.svc-highlight-text{font-size:12px;color:var(--g600);line-height:2}


/* ===== FLOW ===== */
#flow{
  padding:100px 0;
  border-bottom:1px solid var(--g200);
  background:var(--g50);
}
.flow-header{margin-bottom:64px}
.flow-title{
  font-family:var(--fd);font-size:clamp(22px,3vw,36px);
  line-height:.95;letter-spacing:.01em;margin-bottom:12px;
}
.flow-sub{font-size:12px;color:var(--g500);line-height:2}
.flow-steps{
  display:grid;grid-template-columns:repeat(5,1fr);
  gap:0;position:relative;
}
.flow-steps::before{
  content:'';position:absolute;top:28px;left:5%;right:5%;height:1px;
  background:var(--g200);z-index:0;
}
.flow-step{
  text-align:center;padding:0 12px;position:relative;z-index:1;
}
.flow-dot{
  width:56px;height:56px;border-radius:50%;
  background:var(--w);border:1px solid var(--g200);
  display:flex;align-items:center;justify-content:center;
  margin:0 auto 20px;
  transition:border-color .3s,background .3s;
  position:relative;
}
.flow-step:hover .flow-dot{border-color:var(--r);background:rgba(244,59,71,.04)}
.flow-dot-num{
  font-family:var(--fd);font-size:11px;letter-spacing:.06em;
  background:var(--grad);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.flow-step-label{
  font-family:var(--fm);font-size:8px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--g400);margin-bottom:4px;
}
.flow-step-title{font-size:12px;font-weight:500;line-height:1.5}

/* ===== CTA ===== */
#cta{
  padding:120px 0;
  background:var(--k);
  position:relative;overflow:hidden;
}
#cta::before{
  content:'SERVICES';
  position:absolute;right:-2%;bottom:-10%;
  font-family:var(--fd);font-size:clamp(60px,12vw,160px);
  font-weight:700;letter-spacing:.05em;
  color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.04);
  pointer-events:none;user-select:none;white-space:nowrap;
}
.cta-inner{
  max-width:var(--max);margin:0 auto;padding:0 40px;
  position:relative;z-index:1;
  display:grid;grid-template-columns:1fr auto;
  gap:60px;align-items:center;
}
.cta-label{
  font-family:var(--fm);font-size:9px;letter-spacing:.22em;
  text-transform:uppercase;
  background:var(--grad);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
  margin-bottom:24px;display:flex;align-items:center;gap:12px;
}
.cta-label::before{content:'';width:16px;height:1px;background:var(--grad);flex-shrink:0}
.cta-title{
  font-family:var(--fd);font-size:clamp(24px,3.5vw,48px);
  line-height:.95;letter-spacing:.01em;
  color:var(--w);margin-bottom:20px;
}
.cta-body{font-size:13px;color:rgba(255,255,255,.45);line-height:2.1}
.cta-btn{
  display:inline-flex;align-items:center;gap:12px;
  font-family:var(--fm);font-size:10px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--w);border:1px solid rgba(255,255,255,.2);
  padding:16px 40px;text-decoration:none;
  transition:border-color .3s,background .3s;white-space:nowrap;
}
.cta-btn:hover{border-color:rgba(255,255,255,.6);background:rgba(255,255,255,.04)}
.cta-btn::after{content:'→';transition:transform .25s}
.cta-btn:hover::after{transform:translateX(4px)}

/* ===== FOOTER ===== */


/* ===== RESPONSIVE ===== */
@media(max-width:960px){
  .container{padding:0 24px}
  .hero-inner{padding:0 24px 40px}
  .svc-section{padding:64px 0}
  #intro{padding:60px 0}
  #flow{padding:60px 0}
  #cta{padding:72px 0}
}
@media(max-width:900px){
  .intro-grid,.svc-layout,.svc-layout.rev{grid-template-columns:1fr;direction:ltr}
  .svc-layout.rev > *{direction:ltr}
  .flow-steps{grid-template-columns:repeat(3,1fr);gap:32px}
  .flow-steps::before{display:none}
  .cta-inner{grid-template-columns:1fr}
}
@media(max-width:600px){
  .flow-steps{grid-template-columns:1fr 1fr}
}
@media(max-width:480px){
  .flow-steps{grid-template-columns:1fr}
  .hero-inner{padding:0 16px 32px}
  
}
@media(max-width:768px){.hero-signal,.hero-coord{display:none}}
@media(hover:none){.cursor{display:none}}
.cursor{position:fixed;width:5px;height:5px;border-radius:50%;background:var(--grad);pointer-events:none;z-index:9998;mix-blend-mode:multiply;transform:translate(-50%,-50%);transition:transform .08s}