/* ═══════════════════════════════════════════════════════════════════
   NextWorks Guard LP — いちばん上の画面（ヒーロー）と上のメニュー
   動画・変形なし。見出し → ボタン → 本物の健康診断の画面。
   ═══════════════════════════════════════════════════════════════════ */

/* 下の部分の地色を、ヒーローとつなげる */
.rest{background:var(--surface-top)}

/* ─── 上のメニュー：いつも出しておく。スクロールしたら背景を付ける ─── */
.topbar{
  transform:none; visibility:visible;
  background:transparent; border-bottom-color:transparent;
  -webkit-backdrop-filter:none; backdrop-filter:none;
  transition:background-color .3s, border-color .3s;
}
.is-scrolled .topbar{
  background:rgba(12,13,15,.72); border-bottom-color:var(--line);
  -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px);
  transition:background-color .3s, border-color .3s;
}

/* ─── ヒーロー ─────────────────────────────────────────────────── */
.hero{
  position:relative; overflow:hidden;
  padding:clamp(112px, 15vh, 168px) 0 clamp(48px, 7vw, 88px);
  text-align:center;
}
.hero__bg{
  position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(60% 46% at 50% 0%, rgba(37,67,203,.34), rgba(37,67,203,0) 70%),
    radial-gradient(40% 30% at 50% 62%, rgba(37,67,203,.16), rgba(37,67,203,0) 70%),
    linear-gradient(180deg, #0a0d14 0%, var(--surface-top) 70%);
}
.hero__bg::after{            /* うっすらした格子 */
  content:''; position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size:64px 64px; background-position:50% 0;
  -webkit-mask-image:radial-gradient(70% 60% at 50% 20%, #000 0%, transparent 75%);
          mask-image:radial-gradient(70% 60% at 50% 20%, #000 0%, transparent 75%);
}
.hero__in{position:relative}

.hero__eyebrow{display:inline-block; margin-block-end:26px}
.hero__title{
  margin:0 auto; max-inline-size:1000px;
  font-size:clamp(34px, 6.2vw, 76px); font-weight:400; line-height:1.18;
  letter-spacing:-.03em;
  background-image:linear-gradient(180deg, #fff 20%, #9a9a9a);
  -webkit-background-clip:text; background-clip:text;
  color:transparent; -webkit-text-fill-color:transparent;
  word-break:keep-all; overflow-wrap:anywhere;
  padding-block-end:.08em;
}
.hero__sub{
  margin:22px auto 0; max-inline-size:620px;
  font-size:clamp(15px, 1.6vw, 18px); line-height:1.8; color:var(--text-muted);
  word-break:keep-all; overflow-wrap:anywhere;
}
.hero__cta{margin-block-start:34px}
.hero__note{margin-block-start:16px; font-size:13px; color:#8f8f8f}

/* 本物の画面 */
.hero__shot{
  margin:clamp(40px, 6vw, 72px) auto 0; max-inline-size:1080px;
  border-radius:16px;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.06),
    0 40px 120px -30px rgba(37,67,203,.55),
    0 30px 80px -30px rgba(0,0,0,.9);
}
.hero__shot:hover{transform:translateY(-3px)}
.hero__caption{margin-block-start:14px; font-size:12px; color:#7d7d7d}

.hero .trusted{margin-block-start:clamp(40px, 6vw, 64px)}

/* 開いたときに、上から順にふわっと出す */
@keyframes hero-in{from{opacity:0; transform:translateY(14px)} to{opacity:1; transform:none}}
.js .hero__eyebrow,.js .hero__title,.js .hero__sub,.js .hero__cta,.js .hero__note,
.js .hero__shot,.js .hero__caption,.js .hero .trusted{
  animation:hero-in 700ms var(--morph-ease) both;
}
.js .hero__title{animation-delay:80ms}
.js .hero__sub{animation-delay:180ms}
.js .hero__cta,.js .hero__note{animation-delay:280ms}
.js .hero__shot,.js .hero__caption{animation-delay:420ms}
.js .hero .trusted{animation-delay:560ms}

@media (max-width:560px){
  .hero{padding-block-start:104px}
  .hero__eyebrow{font-size:11px; padding-inline:10px}
  .hero__cta .cta{min-inline-size:0; flex:1 1 140px; block-size:50px; font-size:15px}
  .hero__shot{border-radius:10px}
}
@media (prefers-reduced-motion:reduce){
  .js .hero__eyebrow,.js .hero__title,.js .hero__sub,.js .hero__cta,.js .hero__note,
  .js .hero__shot,.js .hero__caption,.js .hero .trusted{animation:none}
}

/* ─── ロゴ（NextWorks のアイコン） ─────────────────────────────── */
.brand-icon{inline-size:26px; block-size:auto; flex:none}
.foot__brand .brand-icon{inline-size:24px}

/* ─── 途中に置く申し込みボタン ─────────────────────────────────── */
.sec__more{margin-block-start:36px; text-align:center; font-size:15px; color:var(--text-muted)}
.sec__cta{margin-block-start:44px}
.textlink{
  color:#fff; border-bottom:1px solid rgba(255,255,255,.4); padding-block-end:2px;
  transition:border-color .2s;
}
.textlink--arrow::after{content:' →'}
.textlink:hover{border-color:#fff}
.cta--sm{min-inline-size:0; block-size:44px; padding-inline:22px; font-size:15px; flex:none}
.cta-inline{
  display:flex; align-items:center; justify-content:space-between; gap:16px 24px; flex-wrap:wrap;
  margin-block:clamp(48px, 7vw, 88px); padding:20px 24px;
  border:1px solid var(--line); border-radius:16px;
  background:linear-gradient(90deg, rgba(37,67,203,.18), rgba(255,255,255,.03));
  font-size:15px; color:var(--softer);
}
.cta-inline + .feature{margin-block-start:0}
.cta-band{
  display:flex; align-items:center; justify-content:space-between; gap:24px 40px; flex-wrap:wrap;
  margin-block-start:clamp(64px, 9vw, 112px); padding:clamp(28px, 4vw, 44px);
  background:
    radial-gradient(80% 140% at 0% 0%, rgba(37,67,203,.3), rgba(37,67,203,0) 70%),
    rgba(255,255,255,.04);
}
.cta-band__title{font-size:clamp(22px, 2.6vw, 30px); font-weight:500; line-height:1.4; letter-spacing:-.02em}
.cta-band__text{margin-block-start:6px; font-size:14px; color:var(--soft)}
.cta-band .cta-row{justify-content:flex-start}
@media (max-width:560px){
  .cta-inline{flex-direction:column; align-items:flex-start}
  .cta-band .cta{flex:1 1 140px; min-inline-size:0}
}

/* ─── 機能：画像なしのカード（仮想パッチ・データベースの検査・緊急メンテナンス） ─── */
.extras{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:16px;
  margin-block:clamp(56px, 8vw, 104px);
}
.extra{padding:28px 26px 30px}
.extra .feature__tag{display:flex; align-items:center; flex-wrap:wrap}
.extra__on{
  margin-inline-start:auto; padding:2px 8px; border-radius:20px;
  border:1px solid var(--line-strong); font-size:11px; letter-spacing:0; color:var(--softer);
}
.extra__title{margin:0 0 10px; font-size:clamp(20px, 2vw, 24px); font-weight:500; line-height:1.4; letter-spacing:-.02em}
.extra__lead{font-size:14px; line-height:1.75; color:var(--text-muted)}
.extra .feature__list{margin-block-start:18px; gap:10px}
.extra .feature__list li{font-size:14px}
.extras + .feature{margin-block-start:0}
.c4-sub{display:block; margin-block-start:2px; font-size:.78rem; color:#a3a3a3}
@media (max-width:1000px){ .extras{grid-template-columns:1fr} }

/* ═══ 明るい地色の部分（お悩み・健康診断・始め方） ═══════════════════
   黒 → 明るい → 黒 … と交互にして、長いページに区切りを付ける。 */
.sec--light{
  --l-ink:#0b0f1a; --l-text:#475067; --l-soft:#6b7388; --l-line:rgba(12,22,48,.1);
  --l-blue:#2543CB;
  background:
    radial-gradient(70% 60% at 50% 0%, rgba(37,67,203,.08), rgba(37,67,203,0) 70%),
    #f3f5fa;
  color:var(--l-ink);
  border-top:none !important;
}
.sec--light + .sec{border-top:none}
.sec--light .sec__title{
  background-image:linear-gradient(180deg, #0b0f1a, #34406a);
}
.sec--light .sec__lead{color:var(--l-text)}
.sec--light .pill{
  background:rgba(37,67,203,.08); color:var(--l-blue); font-weight:500;
}
.sec--light .pill::before{background:rgba(37,67,203,.25)}
.sec--light .glass{
  background:#fff; border-color:var(--l-line);
  box-shadow:0 1px 2px rgba(12,22,48,.04), 0 18px 40px -24px rgba(12,22,48,.25);
}
.sec--light .note{color:var(--l-soft)}

/* お悩み */
.sec--light .pain__no{color:var(--l-blue)}
.sec--light .pain__a{color:var(--l-text)}
.sec--light .sec__more{color:var(--l-text)}
.sec--light .textlink{color:var(--l-blue); border-bottom-color:rgba(37,67,203,.35); font-weight:500}
.sec--light .textlink:hover{border-bottom-color:var(--l-blue)}

/* 健康診断 */
.sec--light .score__top{border-bottom-color:var(--l-line)}
.sec--light .score__num small{color:var(--l-soft)}
.sec--light .score__grades span{border-color:rgba(12,22,48,.16); color:#9aa1b3}
.sec--light .score__grades span.is-on{background:var(--l-blue); border-color:var(--l-blue); color:#fff}
.sec--light .score__area{background:#f6f8fc; border-color:var(--l-line)}
.sec--light .score__area span{color:var(--l-soft)}

/* 始め方 */
.sec--light .step::before{background-image:linear-gradient(180deg, #2543CB, #6f86ee)}
.sec--light .step__text{color:var(--l-text)}

/* ボタン：明るい地色では青を主役に */
.sec--light .cta--solid{background:var(--l-blue); color:#fff}
.sec--light .cta--solid:hover{background:#1c35a8}
.sec--light .cta--ghost{border-color:rgba(12,22,48,.22); color:var(--l-ink)}
.sec--light .cta--ghost:hover{border-color:rgba(12,22,48,.55)}
.sec--light :focus-visible{outline-color:var(--l-blue)}

.extras--2{grid-template-columns:repeat(2, 1fr)}
.extras + .feature{margin-block-start:0}
@media (max-width:1000px){ .extras--2{grid-template-columns:1fr} }

/* ═══ 守れる範囲と限界（表＋免責） ═══════════════════════════════ */
.limits{padding:6px clamp(18px, 3vw, 32px); overflow:hidden}
.limits__row{
  display:grid; grid-template-columns:minmax(0, 3fr) minmax(0, 5fr) minmax(0, 3.2fr);
  gap:clamp(16px, 3vw, 40px); padding-block:22px; align-items:start;
  font-size:15px; line-height:1.75;
}
.limits__row + .limits__row{border-top:1px solid var(--line)}
.limits__row--head{padding-block:16px; font-size:13px; letter-spacing:.04em; color:var(--soft)}
.limits__cause{position:relative; padding-inline-start:38px; font-weight:500}
.limits__cause b{
  position:absolute; left:0; top:1px; inline-size:26px; block-size:26px;
  display:grid; place-items:center; border-radius:50%;
  border:1px solid var(--line-strong);
  font-family:'DM Sans', var(--font-sans); font-size:13px; font-weight:500;
}
.limits__cause small{display:block; font-size:13px; font-weight:400; color:#8f8f8f}
.limits__do{color:var(--softer)}
.limits__level{color:var(--softer)}
.limits__level strong{color:#fff; font-weight:500}
.lv{
  display:inline-flex; align-items:center; gap:7px; margin:0 10px 4px 0; padding:2px 10px 2px 8px;
  border-radius:20px; border:1px solid var(--line-strong);
  font-size:13px; font-weight:500; color:#fff; white-space:nowrap; vertical-align:1px;
}
.lv::before{content:''; inline-size:8px; block-size:8px; border-radius:50%; background:currentColor}
.lv--high{color:#7fe0a4; border-color:rgba(127,224,164,.4)}
.lv--midhigh{color:#b9e07f; border-color:rgba(185,224,127,.4)}
.lv--mid{color:#f0c66a; border-color:rgba(240,198,106,.4)}
.lv--low{color:#f08a7c; border-color:rgba(240,138,124,.45)}

.disclaimer{
  margin-block-start:28px; padding:clamp(22px, 3vw, 32px);
  border:1px solid rgba(240,198,106,.28); border-radius:20px;
  background:rgba(240,198,106,.05);
}
.disclaimer__title{margin:0 0 14px; font-size:17px; font-weight:500}
.disclaimer__list{display:grid; gap:10px}
.disclaimer__list li{
  position:relative; padding-inline-start:18px;
  font-size:14px; line-height:1.8; color:var(--softer);
}
.disclaimer__list li::before{
  content:''; position:absolute; left:2px; top:.8em; inline-size:5px; block-size:5px;
  border-radius:50%; background:#f0c66a;
}

@media (max-width:820px){
  .limits{padding-block:0}
  .limits__row--head{display:none}
  .limits__row{grid-template-columns:1fr; gap:10px; padding-block:22px}
  .limits__do::before,.limits__level::before{
    display:block; margin-block-end:2px; font-size:12px; letter-spacing:.04em; color:#8f8f8f;
  }
  .limits__do::before{content:'NextWorks Guard でできること'}
  .limits__level::before{content:'守れる度合い'; margin-block-end:6px}
}

/* ─── よくある質問を明るい地色に ─────────────────────────────── */
.sec--light .faq,.sec--light .faq details{border-color:var(--l-line)}
.sec--light .faq summary::before,.sec--light .faq summary::after{background:var(--l-ink)}
.sec--light .faq summary:hover{color:var(--l-blue)}
.sec--light .faq__a{color:var(--l-text)}
.lv{display:flex; inline-size:fit-content; margin:0 0 6px}

.disclaimer__list strong{color:#fff; font-weight:500}