/* ═══════════════════════════════════════════════════════════════════
   NextWorks Guard LP — 2枚目から下の部分
   （上の2画面は style.css。こちらは読みものなので、ふつうの大きさの単位で書く）
   ═══════════════════════════════════════════════════════════════════ */

/* ─── ページ全体：2枚目から下へスクロールできるようにする ───────── */
html{
  block-size:auto;
  scrollbar-color:#3a3a3a #111;
}
body{
  block-size:auto; overflow:visible; overflow-x:clip;
}
:root{
  --blue:#2543CB;
  --line:rgba(255,255,255,.1);
  --line-strong:rgba(255,255,255,.2);
  --soft:#a3a3a3;
  --softer:#d4d4d4;
  --sec-pad:clamp(72px, 11vw, 144px);
  --wrap:1120px;
}

/* 2枚目の下の「続きを見る」 */
.scroll-hint{
  position:absolute; z-index:5; left:50%; bottom:calc(26 * var(--u));
  transform:translateX(-50%);
  display:inline-flex; align-items:center; gap:.5em;
  font-size:max(11px, calc(13 * var(--u))); letter-spacing:.07em; color:#fff;
  opacity:0; visibility:hidden; pointer-events:none;
}
.scroll-hint::after{
  content:''; inline-size:.5em; block-size:.5em;
  border-right:1px solid currentColor; border-bottom:1px solid currentColor;
  transform:translateY(-25%) rotate(45deg);
}
.signal-in .scroll-hint{
  opacity:.6; visibility:visible; pointer-events:auto;
  transition:opacity 400ms linear 1600ms;
}
.signal-in .scroll-hint:hover{opacity:1}

/* スクロールしたら上に出る固定メニュー */
.topbar{
  position:fixed; z-index:30; inset:0 0 auto 0;
  display:flex; align-items:center; gap:24px;
  padding:12px clamp(16px, 3vw, 32px);
  background:rgba(12,13,15,.72);
  -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px);
  border-bottom:1px solid var(--line);
  transform:translateY(-100%); visibility:hidden;
  transition:transform 300ms var(--morph-ease), visibility 0s linear 300ms;
}
.is-scrolled .topbar{transform:none; visibility:visible; transition:transform 300ms var(--morph-ease)}
.topbar__brand{display:inline-flex; align-items:center; gap:8px; margin-inline-end:auto; font-size:17px; letter-spacing:var(--track-tight); white-space:nowrap}
.topbar__brand svg{inline-size:18px; block-size:21px; flex:none}
.topbar__nav{display:flex; gap:28px; font-size:14px; letter-spacing:var(--track-snug)}
.topbar__nav a{opacity:.6; transition:opacity .2s; white-space:nowrap}
.topbar__nav a:hover{opacity:1}
.topbar__cta{
  padding:9px 16px; border-radius:3px; background:#fff; color:var(--ink);
  font-size:14px; letter-spacing:var(--track-snug); white-space:nowrap; transition:background-color .2s;
}
.topbar__cta:hover{background:#e6e6e6}
.topbar .burger{
  display:none; inline-size:38px; block-size:38px; gap:6px; padding:0 9px; border-radius:3px;
}
.topbar .burger[aria-expanded='true'] span:first-child{transform:translateY(3.5px) rotate(45deg)}
.topbar .burger[aria-expanded='true'] span:last-child{transform:translateY(-3.5px) rotate(-45deg)}
@media (max-width:860px){
  .topbar{gap:12px}
  .topbar__nav{display:none}
  .topbar .burger{display:flex}
}
/* スクロール中に開くメニューは固定メニューのすぐ下に */
.is-scrolled .menu{inset-block-start:72px; padding:20px; gap:2px; border-radius:16px; background:rgba(12,13,15,.86)}
.is-scrolled .menu a:not(.btn){font-size:17px; padding-block:10px}
.is-scrolled .menu .menu__cta{block-size:48px; font-size:15px; margin-block-start:10px}

/* ─── 共通 ─────────────────────────────────────────────────────── */
.rest{
  position:relative;
  background:linear-gradient(180deg, var(--surface-bottom) 0, var(--surface-top) 480px);
  font-size:16px; line-height:1.8;
}
.sec{position:relative; padding-block:var(--sec-pad); scroll-margin-top:56px}
.sec + .sec{border-top:1px solid rgba(255,255,255,.06)}
.wrap{inline-size:min(var(--wrap), 100% - clamp(32px, 8vw, 96px)); margin-inline:auto}
.sec__head{max-inline-size:760px; margin:0 auto clamp(40px, 6vw, 72px); text-align:center}
.sec__eyebrow{
  display:inline-block; margin-block-end:22px; padding:7px 12px;
  font-size:12px; line-height:1.2; letter-spacing:.07em;
}
.sec__title{
  margin:0; font-size:clamp(28px, 4.4vw, 52px); font-weight:400; line-height:1.25;
  letter-spacing:-.02em;
  background-image:linear-gradient(180deg, #fff, #999);
  -webkit-background-clip:text; background-clip:text;
  color:transparent; -webkit-text-fill-color:transparent;
  word-break:keep-all; overflow-wrap:anywhere;
}
.sec__lead{
  margin:20px auto 0; max-inline-size:600px;
  color:var(--text-muted); font-size:clamp(15px, 1.5vw, 17px);
  word-break:keep-all; overflow-wrap:anywhere;
}
.glass{
  position:relative; border-radius:20px;
  background:rgba(255,255,255,.04);
  border:1px solid var(--line);
}
.note{font-size:12px; color:#8a8a8a; line-height:1.7}

/* 見えたらふわっと */
.js [data-rise]{opacity:0; transform:translateY(14px)}
.js [data-rise].is-in{opacity:1; transform:none; transition:opacity 600ms linear, transform 700ms var(--morph-ease)}

/* ボタン（下の部分用の大きさ） */
.cta{
  display:inline-flex; align-items:center; justify-content:center;
  min-inline-size:176px; block-size:54px; padding-inline:24px; border-radius:3px;
  font-size:16px; letter-spacing:var(--track-narrow); white-space:nowrap;
  transition:background-color .2s, border-color .2s;
}
.cta--solid{background:#fff; color:#000}
.cta--solid:hover{background:#e6e6e6}
.cta--ghost{border:1px solid var(--line-strong)}
.cta--ghost:hover{border-color:rgba(255,255,255,.5)}
.cta-row{display:flex; flex-wrap:wrap; justify-content:center; gap:14px}

/* ─── 1. お悩み ────────────────────────────────────────────────── */
.pains{display:grid; grid-template-columns:repeat(4, 1fr); gap:16px}
.pain{padding:28px 24px 30px}
.pain__no{font-family:'DM Sans', var(--font-sans); font-size:12px; letter-spacing:.07em; color:#777}
.pain__q{margin:14px 0 10px; font-size:18px; font-weight:500; line-height:1.55; letter-spacing:-.01em}
.pain__a{font-size:14px; color:var(--soft); line-height:1.75}
@media (max-width:1000px){ .pains{grid-template-columns:repeat(2, 1fr)} }
@media (max-width:560px){ .pains{grid-template-columns:1fr} }

/* ─── 2. 機能（4つの組） ──────────────────────────────────────── */
.feature{
  display:grid; grid-template-columns:minmax(0, 5fr) minmax(0, 6fr);
  gap:clamp(28px, 5vw, 72px); align-items:center;
}
.feature + .feature{margin-block-start:clamp(56px, 8vw, 104px)}
.feature:nth-of-type(even) .feature__text{order:2}
.feature__tag{
  display:inline-flex; align-items:baseline; gap:10px; margin-block-end:14px;
  font-size:13px; letter-spacing:.07em; color:var(--soft);
}
.feature__tag b{
  font-family:'DM Sans', var(--font-sans); font-weight:500; font-size:12px; color:#fff;
  padding:2px 7px; border:1px solid var(--line-strong); border-radius:3px;
}
.feature__title{margin:0 0 14px; font-size:clamp(22px, 2.6vw, 32px); font-weight:500; line-height:1.4; letter-spacing:-.02em; word-break:keep-all; overflow-wrap:anywhere}
.feature__lead{color:var(--text-muted); font-size:15px}
.feature__list{margin-block-start:20px; display:grid; gap:12px}
.feature__list li{
  position:relative; padding-inline-start:26px; font-size:15px; line-height:1.7; color:var(--softer);
}
.feature__list li::before{
  content:''; position:absolute; left:3px; top:.55em;
  inline-size:11px; block-size:6px;
  border-left:1.5px solid #fff; border-bottom:1.5px solid #fff;
  transform:rotate(-45deg);
}
.feature__list small{display:block; font-size:13px; color:#8f8f8f}
.feature__free{
  display:inline-block; margin-inline-start:8px; padding:1px 7px; border-radius:3px;
  background:#fff; color:#000; font-size:11px; font-weight:500; vertical-align:2px;
}
/* 画面の画像の置き場所（あとで本物の画像に差し替える） */
.shot{
  position:relative; aspect-ratio:16 / 10; overflow:hidden; border-radius:20px;
  border:1px solid var(--line);
  background:
    radial-gradient(120% 90% at 85% 0%, rgba(255,255,255,.14), rgba(255,255,255,0) 60%),
    linear-gradient(180deg, #1d1d1f, #0c0d0f);
  display:grid; place-items:center; text-align:center;
}
.shot::before{
  content:''; position:absolute; inset:0 0 auto 0; block-size:34px;
  border-bottom:1px solid var(--line);
  background:
    radial-gradient(circle at 18px 50%, #4a4a4a 0 4px, transparent 4.5px),
    radial-gradient(circle at 34px 50%, #4a4a4a 0 4px, transparent 4.5px),
    radial-gradient(circle at 50px 50%, #4a4a4a 0 4px, transparent 4.5px);
}
.shot img{position:absolute; inset:0; inline-size:100%; block-size:100%; object-fit:cover}
.shot__label{font-size:13px; letter-spacing:.07em; color:#6f6f6f; line-height:1.9; padding-block-start:34px}
.shot__label b{display:block; font-weight:500; font-size:15px; color:#9a9a9a; letter-spacing:.02em}
@media (max-width:860px){
  .feature{grid-template-columns:1fr}
  .feature:nth-of-type(even) .feature__text{order:0}
}

/* ─── 3. 健康診断 ─────────────────────────────────────────────── */
.checkup{
  display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr);
  gap:clamp(28px, 5vw, 72px); align-items:center;
}
.checkup .sec__head{margin:0; text-align:left; max-inline-size:none}
.checkup .sec__lead{margin-inline:0}
.checkup .cta-row{justify-content:flex-start; margin-block-start:32px}
.score{padding:clamp(22px, 3vw, 34px)}
.score__top{display:flex; align-items:flex-end; justify-content:space-between; gap:16px; padding-block-end:22px; border-bottom:1px solid var(--line)}
.score__num{font-size:clamp(56px, 7vw, 84px); line-height:.9; letter-spacing:-.04em}
.score__num small{font-size:.26em; letter-spacing:0; color:var(--soft); margin-inline-start:6px}
.score__grades{display:flex; gap:6px}
.score__grades span{
  inline-size:34px; block-size:34px; display:grid; place-items:center; border-radius:3px;
  border:1px solid var(--line-strong); font-family:'DM Sans', var(--font-sans); font-size:14px; color:#777;
}
.score__grades span.is-on{background:#fff; color:#000; border-color:#fff}
.score__areas{display:grid; grid-template-columns:repeat(3, 1fr); gap:10px; margin-block-start:22px}
.score__area{padding:14px 14px 12px; border-radius:12px; border:1px solid var(--line); background:rgba(0,0,0,.25)}
.score__area b{display:block; font-weight:400; font-size:24px; line-height:1.1; letter-spacing:-.02em}
.score__area span{font-size:13px; color:var(--soft)}
.score .note{margin-block-start:16px}
@media (max-width:860px){
  .checkup{grid-template-columns:1fr}
  .checkup .sec__head{text-align:center}
  .checkup .sec__lead{margin-inline:auto}
  .checkup .cta-row{justify-content:center}
}

/* ─── 4. 料金（ガラスのカード＋行って戻る背景動画） ─────────────── */
.sec--pricing{overflow:hidden; background:#050505; text-align:center}
.c4-video-wrap{
  position:absolute; inset:0; inline-size:100%; block-size:100%;
  z-index:0; pointer-events:none; overflow:hidden;
}
.c4-video-wrap video{
  inline-size:100%; block-size:100%; object-fit:cover;
  transform:scale(1.35);
}
.c4-video-wrap::after{            /* 上下のつなぎ目をなじませる */
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, #06080A 0, rgba(5,5,5,0) 22%, rgba(5,5,5,0) 78%, #06080A 100%);
}
.c4-content{position:relative; z-index:1; inline-size:min(1040px, 100%); margin-inline:auto; padding:20px}
.c4-title{
  display:inline-block; margin-block-end:10px;
  font-size:2.5rem; font-weight:300; line-height:1.3;
  background:linear-gradient(to right, #737373, #ffffff);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
.c4-subtitle{font-size:1rem; color:#a3a3a3; margin-block-end:40px; word-break:keep-all; overflow-wrap:anywhere}
.c4-grid{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:20px;
  margin-block-end:40px; text-align:left;
}
.c4-card{
  display:flex; flex-direction:column;
  background:rgba(255,255,255,0.05);
  border:1px solid rgba(255,255,255,0.1);
  border-radius:20px; padding:30px;
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
}
.c4-card-header{
  display:flex; justify-content:space-between; align-items:center; gap:8px;
  min-block-size:28px; margin-block-end:20px;
}
.c4-tier{font-size:.85rem; color:#a3a3a3}
.c4-badge{
  background:white; color:black;
  font-size:.75rem; font-weight:500;
  padding:2px 8px; border-radius:4px; white-space:nowrap;
}
.c4-trial{
  border:1px solid rgba(255,255,255,0.2);
  font-size:.72rem; line-height:1.4; padding:4px 10px;
  border-radius:20px; color:#d4d4d4; white-space:nowrap;
}
.c4-price{
  font-size:2.5rem; font-weight:400; line-height:1.2; margin-block-end:30px;
  display:flex; align-items:baseline; flex-wrap:wrap;
}
.c4-price span{font-size:.9rem; color:#a3a3a3; margin-inline-start:8px}
.c4-price--tbd{font-size:1.6rem; padding-block:.35rem}
.c4-list-title{font-size:.85rem; font-weight:500; margin-block-end:15px}
.c4-list{list-style:none; margin-block-end:28px}
.c4-list li{
  font-size:.85rem; line-height:1.6; color:#d4d4d4;
  margin-block-end:12px;
  display:flex; align-items:flex-start; gap:8px;
}
.c4-list li::before{content:'\2713'; color:#fff; flex:none}
.c4-btn{
  margin-block-start:auto;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:12px 24px; border-radius:24px; border:none;
  background:white; color:black;
  font-weight:500; font-size:.9rem; cursor:pointer; white-space:nowrap;
  transition:background-color .2s, border-color .2s;
}
.c4-btn:hover{background:#e6e6e6}
.c4-btn--ghost{background:transparent; color:#fff; border:1px solid rgba(255,255,255,.25)}
.c4-btn--ghost:hover{background:transparent; border-color:rgba(255,255,255,.6)}
.c4-footer{font-size:.75rem; line-height:1.8; color:#8a8a8a}
.c4-footer a{color:#a3a3a3; text-decoration:underline}
@media (max-width:900px){
  .c4-content{inline-size:min(520px, 100%)}
  .c4-grid{grid-template-columns:1fr; gap:15px}
}
@media (max-width:768px){
  .c4-title{font-size:2rem}
  .c4-subtitle{font-size:.9rem; margin-block-end:30px}
  .c4-card{padding:25px}
  .c4-price{font-size:2rem}
  .c4-price--tbd{font-size:1.4rem}
  .c4-content{padding:15px}
}
@media (max-width:480px){
  .c4-title{font-size:1.75rem}
  .c4-subtitle{font-size:.85rem}
  .c4-card{padding:20px}
  .c4-price{font-size:1.75rem}
  .c4-price--tbd{font-size:1.3rem}
  .c4-list li{font-size:.8rem}
  .c4-btn{padding:10px 20px; font-size:.85rem}
}

/* ─── 5. 始め方 ───────────────────────────────────────────────── */
.steps{display:grid; grid-template-columns:repeat(3, 1fr); gap:16px; counter-reset:step}
.step{padding:30px 26px 32px; counter-increment:step}
.step::before{
  content:counter(step, decimal-leading-zero);
  display:block; margin-block-end:18px;
  font-family:'DM Sans', var(--font-sans); font-size:32px; line-height:1; letter-spacing:-.02em;
  background-image:linear-gradient(180deg, #fff, #777);
  -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent;
}
.step__title{margin:0 0 8px; font-size:18px; font-weight:500; line-height:1.5}
.step__text{font-size:14px; color:var(--soft); line-height:1.75}
@media (max-width:760px){ .steps{grid-template-columns:1fr} }

/* ─── 6. よくある質問 ─────────────────────────────────────────── */
.faq{max-inline-size:820px; margin-inline:auto; border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{
  position:relative; list-style:none; cursor:pointer;
  padding:22px 44px 22px 2px; font-size:16px; font-weight:500; line-height:1.6;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before,.faq summary::after{
  content:''; position:absolute; right:6px; top:50%; inline-size:14px; block-size:1px; background:#fff;
  transition:transform .25s var(--morph-ease);
}
.faq summary::after{transform:rotate(90deg)}
.faq details[open] summary::after{transform:rotate(0deg)}
.faq summary:hover{color:#fff}
.faq__a{padding:0 44px 24px 2px; font-size:15px; color:var(--text-muted)}

/* ─── 7. 最後の申し込み ───────────────────────────────────────── */
.sec--final{text-align:center; overflow:hidden}
.sec--final::before{
  content:''; position:absolute; inset:auto 0 0 0; block-size:70%;
  background:radial-gradient(60% 100% at 50% 100%, rgba(37,67,203,.22), rgba(37,67,203,0) 70%);
  pointer-events:none;
}
.sec--final .wrap{position:relative}
.sec--final .sec__head{margin-block-end:36px}

/* ─── フッター ─────────────────────────────────────────────────── */
.foot{
  border-top:1px solid var(--line); background:var(--surface-top);
  padding:40px 0 48px; font-size:13px; color:#8a8a8a;
}
.foot__in{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:20px 32px}
.foot__brand{display:inline-flex; align-items:center; gap:8px; font-size:16px; color:#fff; letter-spacing:var(--track-tight)}
.foot__brand svg{inline-size:17px; block-size:20px}
.foot__nav{display:flex; flex-wrap:wrap; gap:8px 24px}
.foot__nav a{transition:color .2s}
.foot__nav a:hover{color:#fff}
.foot__copy{flex-basis:100%; padding-block-start:20px; border-top:1px solid rgba(255,255,255,.06); line-height:1.8}

@media (prefers-reduced-motion:reduce){
  .js [data-rise]{opacity:1; transform:none}
  .topbar{transition:none}
}

/* スマホ：健康診断の6分野の名前が2行にならないように */
.score__area span{white-space:nowrap}
@media (max-width:480px){
  .score__areas{gap:8px}
  .score__area{padding:12px 10px 10px}
  .score__area b{font-size:22px}
  .score__area span{font-size:12px; letter-spacing:-.02em}
}

.feature__note{display:block; margin-block-start:6px; font-size:13px; color:#8f8f8f}

/* 料金表の下の注意書き（テスト用サイトのアドレス） */
.c4-note{
  margin:-16px 0 28px; padding:20px 24px; text-align:left;
  border:1px solid rgba(255,255,255,.1); border-radius:16px;
  background:rgba(255,255,255,.04);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  font-size:.82rem; line-height:1.8; color:#c4c4c4;
}
.c4-note__title{font-size:.88rem; font-weight:500; color:#fff; margin-block-end:4px}
.c4-note ul{margin-block-start:8px; display:grid; gap:4px}
.c4-note li{position:relative; padding-inline-start:1.1em}
.c4-note li::before{content:'・'; position:absolute; left:0}
.c4-note code{
  font-family:ui-monospace, SFMono-Regular, Consolas, monospace; font-size:.92em;
  padding:1px 5px; border-radius:4px; background:rgba(255,255,255,.1); color:#fff;
  white-space:nowrap;
}
@media (max-width:480px){ .c4-note{padding:16px 16px; font-size:.78rem} }

/* 値段の横の説明（税込・買い切り など）は、3枚とも値段の下の行に揃える */
.c4-price{margin-block-end:24px}
.c4-price span{flex-basis:100%; margin-inline-start:0; margin-block-start:6px; line-height:1.4}

/* 機能の紹介：実際の画面の画像（押すと大きく開く） */
.shot--img{
  display:block; aspect-ratio:auto; padding:0; background:#f4f6f9;
  border-color:rgba(255,255,255,.16);
  box-shadow:0 30px 80px -30px rgba(0,0,0,.9);
  transition:border-color .2s, transform .3s var(--morph-ease);
}
.shot--img::before{content:none}
.shot--img img{position:static; inline-size:100%; block-size:auto; object-fit:contain; display:block}
.shot--img:hover{border-color:rgba(255,255,255,.4); transform:translateY(-3px)}
.feature__title .feature__free{vertical-align:middle; margin-inline-start:12px; font-size:12px; letter-spacing:0}
.feature{grid-template-columns:minmax(0, 4fr) minmax(0, 7fr)}
.feature:nth-of-type(even){grid-template-columns:minmax(0, 7fr) minmax(0, 4fr)}
@media (max-width:860px){
  .feature,.feature:nth-of-type(even){grid-template-columns:1fr}
}