/* ═══════════════════════════════════════════════════════════════════
   NextWorks Guard LP — 土台（色・文字・共通の部品）
   読み込む順番： base.css → sections.css → hero.css
   ═══════════════════════════════════════════════════════════════════ */
:root{
  --surface-top:#06080A; --surface-bottom:#191919; --white:#fff;
  --text-muted:#c1c1c1; --ink:#111; --ink-strong:#000;
  --morph-ease:cubic-bezier(0.33,0,0.2,1);
  --track-tight:-0.04em; --track-snug:-0.03em; --track-narrow:-0.02em; --track-wide:0.07em;
  --hairline:1px;
  --font-sans:'Suisse Intl','Geist','Noto Sans JP','Helvetica Neue',Arial,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html,body{margin:0}
body{
  background:var(--surface-top); color:#fff;
  font-family:var(--font-sans); font-weight:400;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  text-rendering:geometricPrecision;
}
p,h1,h2,h3,ul,figure{margin:0}
ul{padding:0; list-style:none}
a{color:inherit; text-decoration:none}
img,svg{display:block}
button{font:inherit; color:inherit}
:focus-visible{outline:2px solid #fff; outline-offset:3px}

/* 角ばった小さな札（見出しの上の「機能」など） */
.pill{
  position:relative;
  padding:7px 12px;
  text-align:left; white-space:nowrap;
  font-size:12px; line-height:1.2; letter-spacing:var(--track-wide);
  background:linear-gradient(90deg, rgba(153,153,153,.1), rgba(255,255,255,.2) 45.55%, rgba(153,153,153,.1));
}
.pill::before{
  content:''; position:absolute; inset:0; padding:1px;
  border-radius:inherit; pointer-events:none;
  background:linear-gradient(90deg, rgba(152,152,152,.1), rgba(102,102,102,.1));
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
          mask:linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}

/* 三本線のメニューボタン（スマホ・タブレット） */
.burger{
  display:none; flex-direction:column; justify-content:center;
  gap:6px; inline-size:38px; block-size:38px; padding:0 9px;
  border:1px solid rgba(255,255,255,.14); border-radius:3px;
  background:transparent; cursor:pointer;
}
.burger span{display:block; block-size:1px; background:#fff; transition:transform .2s}

/* 開いたメニュー */
.menu{
  position:fixed; z-index:20;
  inset-block-start:72px; inset-inline:16px;
  display:flex; flex-direction:column; gap:2px;
  padding:20px; border-radius:16px;
  border:1px solid rgba(255,255,255,.1);
  background:rgba(12,13,15,.9);
  -webkit-backdrop-filter:blur(20px); backdrop-filter:blur(20px);
}
.menu[hidden]{display:none}
.menu a:not(.menu__cta){padding-block:10px; font-size:17px; letter-spacing:var(--track-snug)}
.menu__cta{
  display:flex; align-items:center; justify-content:center;
  block-size:48px; margin-block-start:10px; border-radius:3px;
  background:#fff; color:#000; font-size:15px;
}

/* 流れる帯（動作環境と対応） */
.trusted{inline-size:min(680px, 100%); margin-inline:auto}
.trusted__label{
  font-size:12px; line-height:1.2; letter-spacing:var(--track-wide);
  text-align:center; white-space:nowrap; opacity:.45;
}
.marquee{
  block-size:30px; margin:18px auto 0; overflow:hidden; opacity:.65;
  -webkit-mask-image:linear-gradient(90deg, transparent 0%, #000 18%, #000 82%, transparent 100%);
          mask-image:linear-gradient(90deg, transparent 0%, #000 18%, #000 82%, transparent 100%);
}
.marquee__track{
  --marquee-shift:-50%;
  display:flex; align-items:center; gap:28px;
  inline-size:max-content; block-size:100%;
  animation:marquee-scroll 32s linear infinite;
}
.marquee:hover .marquee__track{animation-play-state:paused}
@keyframes marquee-scroll{
  from{transform:translate3d(0,0,0)}
  to{transform:translate3d(var(--marquee-shift),0,0)}
}
.marquee__item{
  flex:none; display:inline-flex; align-items:center; block-size:100%;
  padding-inline:12px;
  border:1px solid rgba(255,255,255,.5); border-radius:3px;
  font-size:13px; line-height:1; letter-spacing:var(--track-narrow); white-space:nowrap;
}

@media (prefers-reduced-motion:reduce){
  .marquee__track{animation:none}
}