/* =========================================================
   株式会社NAGARE  Corporate Site
   Theme: Modern / Dynamic / Black-based "Flow"
   ========================================================= */

:root{
  --bg:        #0a0a0c;
  --bg-2:      #0f0f13;
  --surface:   #141419;
  --surface-2: #1b1b22;
  --line:      rgba(255,255,255,.10);
  --line-2:    rgba(255,255,255,.16);
  --text:      #f4f4f7;
  --text-soft: #b7b7c2;
  --text-mute: #7c7c89;

  --c1: #2de2e6;   /* aqua  */
  --c2: #4d7cff;   /* blue  */
  --c3: #a45cff;   /* violet*/
  --grad: linear-gradient(100deg, var(--c1), var(--c2) 48%, var(--c3));
  --grad-soft: linear-gradient(100deg, rgba(45,226,230,.18), rgba(77,124,255,.18) 50%, rgba(164,92,255,.18));

  --maxw: 1180px;
  --pad: clamp(20px, 5vw, 48px);
  --radius: 16px;
  --ease: cubic-bezier(.2,.7,.2,1);

  --ff-jp: "Noto Sans JP", system-ui, sans-serif;
  --ff-en: "Space Grotesk", "Noto Sans JP", sans-serif;
}

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

html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }

body{
  font-family:var(--ff-jp);
  background:var(--bg);
  color:var(--text);
  line-height:1.85;
  letter-spacing:.02em;
  overflow-x:hidden;
  font-feature-settings:"palt";
  -webkit-font-smoothing:antialiased;
}

img,svg,canvas,iframe{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
ul,ol{ list-style:none; }

.container{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad); }

.pc{ display:inline; }
.sp{ display:none; }

/* selection */
::selection{ background:rgba(77,124,255,.35); color:#fff; }

/* =========================================================
   Loader
   ========================================================= */
.loader{
  position:fixed; inset:0; z-index:9999;
  display:grid; place-content:center; gap:18px; justify-items:center;
  background:var(--bg);
  transition:opacity .6s var(--ease), visibility .6s;
}
.loader.is-done{ opacity:0; visibility:hidden; }
.loader__mark{
  font-family:var(--ff-en); font-weight:700; letter-spacing:.5em;
  font-size:clamp(18px,4vw,26px); padding-left:.5em;
  background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.loader__bar{
  width:160px; height:2px; background:var(--line); position:relative; overflow:hidden; border-radius:2px;
}
.loader__bar::after{
  content:""; position:absolute; inset:0; transform:translateX(-100%);
  background:var(--grad); animation:load 1.1s var(--ease) infinite;
}
@keyframes load{ 0%{transform:translateX(-100%)} 60%,100%{transform:translateX(100%)} }

/* =========================================================
   Header
   ========================================================= */
.header{
  position:fixed; top:0; left:0; right:0; z-index:1000;
  transition:background .4s var(--ease), border-color .4s, backdrop-filter .4s;
  border-bottom:1px solid transparent;
}
.header.is-stuck{
  background:rgba(10,10,12,.72);
  backdrop-filter:saturate(160%) blur(14px);
  -webkit-backdrop-filter:saturate(160%) blur(14px);
  border-bottom:1px solid var(--line);
}
.header__inner{ display:flex; align-items:center; justify-content:space-between; height:74px; }

.brand{ display:flex; align-items:center; gap:10px; }
.brand__logo{ width:42px; height:auto; }
.brand__name{
  font-family:var(--ff-en); font-weight:700; font-size:20px; letter-spacing:.22em; padding-left:.22em;
}

.nav{ display:flex; align-items:center; gap:clamp(16px,2.4vw,34px); }
.nav__link{
  font-family:var(--ff-en); font-size:14px; letter-spacing:.08em; color:var(--text-soft);
  position:relative; padding:6px 0; transition:color .3s;
}
.nav__link::after{
  content:""; position:absolute; left:0; bottom:0; height:1px; width:0; background:var(--grad); transition:width .3s var(--ease);
}
.nav__link:hover{ color:var(--text); }
.nav__link:hover::after{ width:100%; }
.nav__cta{
  font-size:14px; font-weight:700; color:#06060a; padding:11px 22px; border-radius:999px;
  background:var(--grad); position:relative; transition:transform .3s var(--ease), box-shadow .3s;
}
.nav__cta:hover{ transform:translateY(-2px); box-shadow:0 10px 30px rgba(77,124,255,.35); }

.burger{ display:none; width:42px; height:42px; background:none; border:0; cursor:pointer; position:relative; }
.burger span{
  position:absolute; left:9px; right:9px; height:2px; background:var(--text); border-radius:2px;
  transition:transform .35s var(--ease), opacity .25s, top .35s var(--ease);
}
.burger span:nth-child(1){ top:14px; }
.burger span:nth-child(2){ top:20px; }
.burger span:nth-child(3){ top:26px; }
.burger.is-open span:nth-child(1){ top:20px; transform:rotate(45deg); }
.burger.is-open span:nth-child(2){ opacity:0; }
.burger.is-open span:nth-child(3){ top:20px; transform:rotate(-45deg); }

/* =========================================================
   Hero
   ========================================================= */
.hero{
  position:relative; min-height:100svh; display:flex; align-items:center;
  overflow:hidden; isolation:isolate;
  background:
    url("../img/hero-bg.svg") center / cover no-repeat,
    var(--bg);
}
.hero__canvas{ position:absolute; inset:0; width:100%; height:100%; z-index:-2; mix-blend-mode:screen; opacity:.9; }
.hero__overlay{
  position:absolute; inset:0; z-index:-1;
  background:
    linear-gradient(90deg, rgba(10,10,12,.62) 0%, rgba(10,10,12,.18) 46%, transparent 72%),
    linear-gradient(180deg, transparent 56%, rgba(10,10,12,.55) 86%, var(--bg) 100%);
}
.hero__inner{ padding-block:120px 90px; }
.hero__eyebrow{
  font-family:var(--ff-en); letter-spacing:.32em; font-size:13px; color:var(--text-soft);
  display:inline-flex; align-items:center; gap:.6em; margin-bottom:26px;
}
.hero__eyebrow span{ color:var(--c2); }
.hero__title{
  font-weight:900; line-height:1.04; letter-spacing:.01em;
  font-size:clamp(48px, 12vw, 132px);
}
.hero__title span{ display:inline-block; }
.hero__title .grad{
  background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero__lead{
  margin-top:30px; color:var(--text-soft); font-size:clamp(15px,1.9vw,18px); line-height:2; max-width:42em;
}
.hero__actions{ margin-top:42px; display:flex; flex-wrap:wrap; gap:16px; }

.hero__scroll{
  position:absolute; left:50%; bottom:28px; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:10px;
  font-family:var(--ff-en); font-size:10px; letter-spacing:.3em; color:var(--text-mute);
}
.hero__scroll i{ width:1px; height:46px; background:linear-gradient(var(--text-mute), transparent); position:relative; overflow:hidden; }
.hero__scroll i::after{ content:""; position:absolute; inset:0; background:var(--grad); animation:scroll 1.8s var(--ease) infinite; }
@keyframes scroll{ 0%{transform:translateY(-100%)} 100%{transform:translateY(100%)} }

/* =========================================================
   Buttons
   ========================================================= */
.btn{
  display:inline-flex; align-items:center; gap:.6em; font-weight:700; font-size:15px;
  padding:15px 30px; border-radius:999px; cursor:pointer; border:1px solid transparent;
  transition:transform .3s var(--ease), box-shadow .35s var(--ease), background .35s, color .3s, border-color .3s;
  white-space:nowrap;
}
.btn--lg{ padding:18px 40px; font-size:16px; }
.btn__arrow{ font-style:normal; transition:transform .3s var(--ease); }
.btn:hover .btn__arrow{ transform:translateX(5px); }

.btn--primary{ background:var(--grad); color:#06060a; background-size:160% 160%; }
.btn--primary:hover{ transform:translateY(-3px); box-shadow:0 16px 40px rgba(77,124,255,.4); }

.btn--ghost{ border-color:var(--line-2); color:var(--text); }
.btn--ghost:hover{ border-color:transparent; background:rgba(255,255,255,.06); transform:translateY(-3px); }

/* =========================================================
   Marquee
   ========================================================= */
.marquee{
  border-block:1px solid var(--line); overflow:hidden; background:var(--bg-2);
  padding-block:20px;
}
.marquee__track{
  display:inline-flex; align-items:center; gap:26px; white-space:nowrap;
  font-family:var(--ff-en); font-weight:600; font-size:clamp(20px,3vw,34px); letter-spacing:.04em;
  color:var(--text); animation:marquee 28s linear infinite;
}
.marquee__track .dot{ color:var(--c2); font-size:.5em; }
@keyframes marquee{ from{transform:translateX(0)} to{transform:translateX(-50%)} }

/* =========================================================
   Section commons
   ========================================================= */
.section{ padding-block:clamp(80px,11vw,150px); position:relative; }
.sec-head{ max-width:760px; margin-bottom:clamp(40px,6vw,70px); }
.sec-label{
  font-family:var(--ff-en); letter-spacing:.3em; font-size:13px; color:var(--c1);
  display:inline-flex; align-items:center; gap:.7em; margin-bottom:18px;
}
.sec-label::before{ content:""; width:34px; height:1px; background:var(--grad); }
.sec-title{
  font-weight:900; line-height:1.25; font-size:clamp(28px,5vw,52px); letter-spacing:.01em;
}
.sec-desc{ margin-top:20px; color:var(--text-soft); font-size:clamp(15px,1.7vw,17px); }

/* =========================================================
   About
   ========================================================= */
.about{ background:linear-gradient(180deg, var(--bg), var(--bg-2)); }
.about__grid{ display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:clamp(36px,6vw,80px); }
.about__head .sec-title{ font-size:clamp(26px,4.4vw,48px); }
.about__body p{ color:var(--text-soft); margin-bottom:22px; font-size:clamp(15px,1.7vw,17px); }
.about__stats{
  display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:40px;
  border-top:1px solid var(--line); padding-top:34px;
}
.about__stats strong{
  display:block; font-family:var(--ff-en); font-weight:700; line-height:1.1;
  font-size:clamp(22px,3vw,32px);
  background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.about__stats span{ display:block; margin-top:10px; font-size:13px; color:var(--text-mute); line-height:1.6; }

/* =========================================================
   Service / Cards
   ========================================================= */
.cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.card{
  position:relative; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius); padding:38px 30px 42px; overflow:hidden;
  transition:transform .4s var(--ease), border-color .4s, background .4s;
}
.card::before{
  content:""; position:absolute; inset:0; opacity:0; transition:opacity .4s; pointer-events:none;
  background:var(--grad-soft);
}
.card:hover{ transform:translateY(-8px); border-color:var(--line-2); }
.card:hover::before{ opacity:1; }
.card__no{
  font-family:var(--ff-en); font-weight:700; font-size:15px; letter-spacing:.1em; color:var(--c2);
}
.card__title{
  font-size:clamp(18px,2.1vw,21px); font-weight:700; line-height:1.5; margin:16px 0 14px; position:relative;
}
.card__text{ color:var(--text-soft); font-size:14.5px; line-height:1.95; position:relative; }
.card__line{
  position:absolute; left:30px; right:30px; bottom:0; height:2px; transform:scaleX(0); transform-origin:left;
  background:var(--grad); transition:transform .5s var(--ease);
}
.card:hover .card__line{ transform:scaleX(1); }

/* =========================================================
   Strength
   ========================================================= */
.strength{ background:var(--bg-2); }
.strength__list{ display:grid; gap:0; border-top:1px solid var(--line); }
.srow{
  display:grid; grid-template-columns:120px 1fr; gap:clamp(20px,4vw,60px); align-items:start;
  padding:clamp(28px,4vw,46px) 0; border-bottom:1px solid var(--line);
  transition:padding-left .4s var(--ease);
}
.srow:hover{ padding-left:14px; }
.srow__no{
  font-family:var(--ff-en); font-weight:700; font-size:clamp(34px,5vw,58px); line-height:1;
  background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.srow__main h3{ font-size:clamp(19px,2.4vw,26px); font-weight:700; margin-bottom:12px; }
.srow__main p{ color:var(--text-soft); font-size:clamp(14.5px,1.6vw,16px); max-width:60ch; }

/* =========================================================
   Flow / Steps
   ========================================================= */
.steps{
  display:grid; grid-template-columns:repeat(5,1fr); gap:18px; counter-reset:none;
  position:relative;
}
.steps::before{
  content:""; position:absolute; top:46px; left:6%; right:6%; height:2px;
  background:linear-gradient(90deg, transparent, var(--c1), var(--c2), var(--c3), transparent);
  opacity:.5;
}
.step{
  position:relative; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  padding:30px 22px; transition:transform .4s var(--ease), border-color .4s;
}
.step:hover{ transform:translateY(-6px); border-color:var(--line-2); }
.step__no{
  font-family:var(--ff-en); font-weight:700; font-size:13px; letter-spacing:.1em; color:var(--c1);
  display:inline-block; margin-bottom:16px;
}
.step h3{ font-size:16px; font-weight:700; margin-bottom:10px; line-height:1.5; }
.step p{ color:var(--text-soft); font-size:13.5px; line-height:1.85; }

/* =========================================================
   CTA Band
   ========================================================= */
.cta-band{
  position:relative; overflow:hidden; isolation:isolate;
  padding-block:clamp(70px,10vw,120px);
  background:
    radial-gradient(800px 400px at 80% 50%, rgba(164,92,255,.22), transparent 60%),
    radial-gradient(700px 400px at 10% 50%, rgba(45,226,230,.18), transparent 60%),
    var(--bg-2);
  border-block:1px solid var(--line);
}
.cta-band__canvas{ position:absolute; inset:0; width:100%; height:100%; z-index:-1; opacity:.7; }
.cta-band__inner{
  display:flex; align-items:center; justify-content:space-between; gap:30px; flex-wrap:wrap;
}
.cta-band h2{ font-size:clamp(24px,3.6vw,40px); font-weight:900; line-height:1.4; }

/* =========================================================
   Company
   ========================================================= */
.company{ background:linear-gradient(180deg, var(--bg-2), var(--bg)); }
.profile{ border-top:1px solid var(--line); margin-bottom:40px; }
.profile__row{
  display:grid; grid-template-columns:200px 1fr; gap:24px; align-items:start;
  padding:24px 6px; border-bottom:1px solid var(--line);
}
.profile__row dt{ font-weight:700; color:var(--text); font-size:15px; }
.profile__row dd{ color:var(--text-soft); font-size:15px; }
.profile__biz{ display:grid; gap:10px; }
.profile__biz li{ position:relative; padding-left:20px; }
.profile__biz li::before{
  content:""; position:absolute; left:0; top:.85em; width:8px; height:8px; border-radius:50%;
  background:var(--grad);
}
.company__map{
  border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; height:380px;
}
.company__map iframe{ width:100%; height:100%; border:0; filter:grayscale(1) invert(.92) contrast(.9); }

/* =========================================================
   Contact / Form
   ========================================================= */
.form{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  padding:clamp(28px,4vw,48px); display:grid; gap:22px; max-width:880px;
}
.form__row{ display:grid; grid-template-columns:1fr 1fr; gap:22px; }
.form__field{ display:grid; gap:9px; }
.form__label{ font-size:14px; font-weight:700; display:flex; align-items:center; gap:10px; }
.req{
  font-style:normal; font-size:11px; font-weight:700; color:#fff; background:var(--c3);
  padding:2px 9px; border-radius:4px; letter-spacing:.05em;
}
.form input,.form select,.form textarea{
  width:100%; font-family:inherit; font-size:15px; color:var(--text);
  background:var(--bg); border:1px solid var(--line-2); border-radius:10px;
  padding:14px 16px; transition:border-color .3s, box-shadow .3s; line-height:1.6;
}
.form textarea{ resize:vertical; min-height:130px; }
.form input::placeholder,.form textarea::placeholder{ color:var(--text-mute); }
.form input:focus,.form select:focus,.form textarea:focus{
  outline:none; border-color:var(--c2); box-shadow:0 0 0 3px rgba(77,124,255,.22);
}
.form select{ appearance:none; background-image:linear-gradient(45deg,transparent 50%,var(--text-soft) 50%),linear-gradient(135deg,var(--text-soft) 50%,transparent 50%); background-position:calc(100% - 22px) 22px,calc(100% - 16px) 22px; background-size:6px 6px,6px 6px; background-repeat:no-repeat; }

.form__honeypot{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

.form__agree{ display:flex; align-items:flex-start; gap:12px; font-size:14px; color:var(--text-soft); cursor:pointer; }
.form__agree input{ width:18px; height:18px; margin-top:4px; accent-color:var(--c2); flex:none; }
.form__privacy{ color:var(--c1); text-decoration:underline; text-underline-offset:3px; }

.form__submit{ display:flex; justify-content:center; margin-top:6px; }
.form__note{ text-align:center; font-size:13px; color:var(--text-mute); }

.contact__alt{ text-align:center; margin-top:34px; color:var(--text-soft); }
.contact__alt-items{ margin-top:8px; display:flex; gap:16px; justify-content:center; flex-wrap:wrap; font-family:var(--ff-en); font-size:18px; }
.contact__alt-items a{ color:var(--text); transition:color .3s; }
.contact__alt-items a:hover{ color:var(--c1); }

/* =========================================================
   Footer
   ========================================================= */
.footer{ background:var(--bg); border-top:1px solid var(--line); padding-block:56px 30px; }
.footer__inner{ display:flex; justify-content:space-between; gap:40px; flex-wrap:wrap; padding-bottom:34px; border-bottom:1px solid var(--line); }
.footer__name{ font-family:var(--ff-en); font-weight:700; font-size:26px; letter-spacing:.22em; display:inline-block; margin-bottom:16px; background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; }
.footer__addr{ color:var(--text-mute); font-size:13.5px; line-height:1.9; }
.footer__nav{ display:flex; flex-wrap:wrap; gap:14px 26px; align-content:start; }
.footer__nav a{ font-family:var(--ff-en); font-size:14px; color:var(--text-soft); transition:color .3s; }
.footer__nav a:hover{ color:var(--text); }
.footer__copy{ padding-top:24px; }
.footer__copy small{ color:var(--text-mute); font-size:12px; font-family:var(--ff-en); letter-spacing:.05em; }

/* to top */
.to-top{
  position:fixed; right:22px; bottom:22px; z-index:900; width:48px; height:48px; border-radius:50%;
  display:grid; place-content:center; font-size:18px; color:#06060a; background:var(--grad);
  opacity:0; visibility:hidden; transform:translateY(12px); transition:all .4s var(--ease);
  box-shadow:0 10px 30px rgba(77,124,255,.35);
}
.to-top.is-show{ opacity:1; visibility:visible; transform:translateY(0); }
.to-top:hover{ transform:translateY(-4px); }

/* =========================================================
   Reveal animation
   ========================================================= */
.reveal{ opacity:0; transform:translateY(28px); transition:opacity .8s var(--ease), transform .8s var(--ease); transition-delay:var(--d,0s); }
.reveal.is-in{ opacity:1; transform:none; }

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width:1024px){
  .cards{ grid-template-columns:repeat(2,1fr); }
  .steps{ grid-template-columns:repeat(2,1fr); }
  .steps::before{ display:none; }
  .about__grid{ grid-template-columns:1fr; }
}

@media (max-width:760px){
  .pc{ display:none; }
  .sp{ display:inline; }

  .nav{
    position:fixed; inset:0 0 0 auto; width:min(82vw,340px); height:100dvh;
    flex-direction:column; align-items:flex-start; justify-content:center; gap:26px;
    background:rgba(12,12,16,.96); backdrop-filter:blur(16px); padding:0 var(--pad);
    transform:translateX(100%); transition:transform .5s var(--ease); z-index:1001;
  }
  .nav.is-open{ transform:translateX(0); }
  .nav__link{ font-size:20px; }
  .nav__cta{ font-size:16px; padding:13px 26px; }
  .burger{ display:block; z-index:1002; }

  .cards{ grid-template-columns:1fr; }
  .steps{ grid-template-columns:1fr; }
  .about__stats{ grid-template-columns:1fr; gap:0; }
  .about__stats li{ display:flex; align-items:baseline; gap:16px; padding:14px 0; border-bottom:1px solid var(--line); }
  .about__stats li:last-child{ border-bottom:0; }
  .about__stats span{ margin-top:0; }

  .srow{ grid-template-columns:1fr; gap:8px; }
  .srow__no{ font-size:34px; }

  .form__row{ grid-template-columns:1fr; }
  .profile__row{ grid-template-columns:1fr; gap:8px; padding:20px 4px; }
  .profile__row dt{ color:var(--c1); font-size:13px; font-family:var(--ff-en); letter-spacing:.08em; }

  .footer__inner{ flex-direction:column; gap:28px; }
  .cta-band__inner{ flex-direction:column; align-items:flex-start; }
}

/* reduced motion */
@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto; }
  .reveal{ opacity:1; transform:none; }
}