@charset "UTF-8";
/* =========================================================
   LOGI NEXA — Landing Page
   パンフレット（aile_lg_pamphlet）の世界観をWebへ移植
   ========================================================= */

/* ---------- design tokens ---------- */
:root{
  --navy-950:#05091a;
  --navy-900:#0a1128;
  --navy-850:#101a3c;
  --navy-800:#15254f;
  --navy-700:#1b3168;
  --blue-800:#123a7d;
  --blue-700:#14418f;
  --blue-600:#1257a8;
  --blue-500:#1b76c9;
  --blue-400:#3a9bdd;
  --cyan:#5fc4f0;

  --ink:#14203c;
  --body:#3b465e;
  --muted:#6b7890;
  --line:#d7e1ee;
  --bg:#ffffff;
  --bg-light:#f3f7fc;
  --bg-band:#e7f0fa;

  --wrap:1200px;
  --header-h:88px;
  --radius:10px;
  --shadow-sm:0 2px 10px rgba(14,32,70,.08);
  --shadow-md:0 10px 30px rgba(14,32,70,.14);

  --fs-body:clamp(15px,.55vw + 13.4px,17px);
  --fs-lead:clamp(16px,.7vw + 14px,19px);
  --fs-h2:clamp(26px,2.6vw + 14px,46px);
  --fs-h3:clamp(19px,.9vw + 16px,25px);
  --fs-hero:clamp(31px,4.6vw + 10px,68px);

  --font-ja:"Meiryo","メイリオ","Hiragino Kaku Gothic ProN","ヒラギノ角ゴ ProN W3","Yu Gothic","Noto Sans JP",system-ui,sans-serif;
  --ease:cubic-bezier(.16,1,.3,1);
}

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:var(--header-h);}
body{
  margin:0;font-family:var(--font-ja);font-size:var(--fs-body);
  line-height:1.9;color:var(--body);background:var(--bg);
  overflow-x:hidden;-webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block;}
h1,h2,h3,h4{margin:0;line-height:1.4;color:var(--ink);font-weight:700;letter-spacing:.01em;}
p{margin:0 0 1em;}
ul,ol{margin:0;padding:0;list-style:none;}
a{color:inherit;}
button{font:inherit;color:inherit;}

.wrap{width:min(100% - 40px,var(--wrap));margin-inline:auto;}
.skip-link{position:absolute;left:-9999px;top:0;}
.skip-link:focus{left:8px;top:8px;z-index:200;background:#fff;padding:8px 14px;border-radius:6px;}
:focus-visible{outline:3px solid var(--blue-400);outline-offset:3px;}
.br-sp{display:none;}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.6em;
  padding:.95em 2.2em;border-radius:999px;font-weight:700;letter-spacing:.04em;
  text-decoration:none;line-height:1.3;text-align:center;
  transition:transform .25s var(--ease),box-shadow .25s var(--ease),background-color .25s var(--ease);
}
.btn::after{content:"";width:.52em;height:.52em;border-top:2px solid currentColor;border-right:2px solid currentColor;transform:rotate(45deg);}
.btn--primary{
  background:linear-gradient(100deg,var(--blue-600) 0%,var(--blue-500) 55%,var(--blue-400) 100%);
  color:#fff;box-shadow:0 6px 20px rgba(21,100,190,.38);
}
.btn--primary:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(21,100,190,.5);}
.btn--primary:active{transform:translateY(0);}
.btn--sm{padding:.65em 1.4em;font-size:.85rem;}
.btn--lg{font-size:1.06rem;padding:1.05em 2.6em;}
.btn--xl{font-size:clamp(1rem,.5vw + .92rem,1.25rem);padding:1.15em 3.2em;}

/* ---------- header ---------- */
/* 高さは従来 64px → 88px（約1.4倍）。スクロール後は半透明＋blurで本文と階層を分ける。 */
.site-header{
  position:sticky;top:0;z-index:60;
  background:rgba(6,12,32,.94);
  border-bottom:1px solid rgba(120,170,230,.16);
  transition:background-color .35s var(--ease),box-shadow .35s var(--ease),border-color .35s var(--ease);
}
.site-header.is-scrolled{
  background:rgba(6,12,32,.9);
  -webkit-backdrop-filter:blur(16px) saturate(140%);backdrop-filter:blur(16px) saturate(140%);
  border-bottom-color:rgba(130,190,245,.24);
  box-shadow:0 8px 24px rgba(2,6,20,.22);
}
.site-header__inner{
  width:min(100% - 48px,1360px);margin-inline:auto;
  display:flex;align-items:center;gap:clamp(20px,2.2vw,36px);min-height:var(--header-h);
}
.site-header__logo{display:flex;align-items:center;gap:16px;text-decoration:none;flex:none;}
/* 正式ロゴ（パンフレットP1のベクターをSVG化）。高さだけ決め、幅は縦横比から自動。変形禁止。 */
.site-header__logo img{
  height:40px;width:auto;max-width:none;aspect-ratio:135.517 / 32.333;object-fit:contain;transform:none;
}
.site-header__tag{
  color:#b4d3f2;font-size:12px;letter-spacing:.16em;font-weight:700;line-height:1.3;
  border-left:1px solid rgba(156,196,234,.45);padding-left:16px;white-space:nowrap;
}
.site-nav{display:flex;gap:clamp(18px,1.9vw,32px);margin-left:auto;}
.site-nav a{
  position:relative;color:#e1ecf8;text-decoration:none;font-size:15.5px;font-weight:700;letter-spacing:.04em;
  padding:10px 0;transition:color .2s;white-space:nowrap;
}
.site-nav a::after{
  content:"";position:absolute;left:0;right:0;bottom:2px;height:3px;border-radius:2px;
  background:linear-gradient(90deg,var(--blue-400),var(--cyan));
  transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease),opacity .2s;opacity:.7;
}
.site-nav a:hover{color:#fff;}
.site-nav a:hover::after{transform:scaleX(1);}
.site-nav a[aria-current="location"]{color:#fff;}
.site-nav a[aria-current="location"]::after{transform:scaleX(1);opacity:1;box-shadow:0 0 10px rgba(95,196,240,.7);}
.site-header .btn--sm{font-size:15px;padding:.78em 1.6em;}

/* ---------- 1. HERO ---------- */
.hero{position:relative;isolation:isolate;background:var(--navy-950);overflow:hidden;}
.hero__media{position:absolute;inset:0;z-index:-2;}
.hero__media img{width:100%;height:100%;object-fit:cover;object-position:72% 50%;}
.hero::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(95deg,rgba(4,8,22,.95) 0%,rgba(4,8,22,.86) 34%,rgba(4,10,28,.30) 62%,rgba(4,10,28,0) 82%);
}
.hero__inner{
  width:min(100% - 40px,var(--wrap));margin-inline:auto;
  padding:clamp(48px,6.6vw,96px) 0 clamp(48px,7vw,96px);
  min-height:min(78vh,720px);display:flex;flex-direction:column;justify-content:center;
}
.hero__eyebrow{
  color:#fff;font-size:clamp(11px,.5vw + 9.6px,15px);font-weight:700;
  letter-spacing:.16em;margin-bottom:.9em;
}
.hero__title{
  color:#fff;font-size:var(--fs-hero);line-height:1.22;letter-spacing:.005em;
  margin-bottom:.6em;text-shadow:0 2px 26px rgba(0,0,0,.5);
}
.hero__lead{color:#e6eefb;font-size:var(--fs-lead);line-height:2;max-width:32em;}
.hero__lead p{margin-bottom:.45em;}
.hero__lead strong{color:#fff;font-weight:700;}
.hero__catch{
  margin-top:clamp(22px,3vw,44px);color:#fff;font-weight:700;
  font-size:clamp(18px,1.4vw + 14px,28px);line-height:1.55;
}
.hero__foot{
  margin-top:clamp(22px,3vw,40px);display:flex;align-items:center;
  gap:clamp(18px,3vw,44px);flex-wrap:wrap;
}
.hero__logo{height:clamp(40px,3.4vw,56px);width:auto;max-width:none;aspect-ratio:135.517 / 32.333;object-fit:contain;}

/* ---------- section shells ---------- */
.sec{padding:clamp(56px,7vw,110px) 0;}
.sec--dark{
  background:
    radial-gradient(1100px 620px at 78% 8%,rgba(28,96,190,.34),transparent 62%),
    linear-gradient(170deg,var(--navy-900) 0%,var(--navy-950) 55%,#070d22 100%);
  color:#cfdcef;
}
.sec--light{background:linear-gradient(180deg,#fff 0%,var(--bg-light) 100%);}
.sec--screens{background:linear-gradient(180deg,var(--bg-light) 0%,#e5eefa 100%);}

.sec-head{margin-bottom:clamp(28px,4vw,52px);}
.sec-head--bar{position:relative;padding-left:calc(5px + clamp(16px,1.6vw,26px));}
.sec-head--bar::before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:var(--blue-400);transform-origin:top;}
.sec-title{color:#fff;font-size:var(--fs-h2);line-height:1.3;letter-spacing:.01em;font-style:normal;text-wrap:balance;}
.sec-title em{font-style:italic;color:#fff;}
.sec-title strong{color:var(--blue-400);}
.sec-title--dark{color:var(--ink);}
.sec-title--dark em{font-style:normal;color:var(--blue-600);}
.sec-title--dark strong{color:var(--navy-800);}
.sec-sub{margin-top:1em;font-size:var(--fs-lead);color:#c2d3ea;line-height:1.95;}
.sec-sub--dark{color:var(--body);}

.ribbon{
  display:inline-flex;align-items:center;gap:14px;
  background:linear-gradient(100deg,var(--navy-850),var(--blue-700));
  color:#fff;padding:.5em 2.6em .5em 1.3em;margin:0 0 clamp(20px,3vw,34px);
  clip-path:polygon(0 0,100% 0,calc(100% - 22px) 100%,0 100%);
}
.ribbon--light{background:linear-gradient(100deg,var(--navy-850),var(--blue-700));}
.ribbon__en{font-size:.7rem;letter-spacing:.14em;font-weight:700;color:#a9cdf0;}
.ribbon__ja{font-size:.95rem;font-weight:700;border-left:1px solid rgba(255,255,255,.35);padding-left:14px;}

.notes{margin-top:clamp(22px,3vw,36px);font-size:.85rem;line-height:1.85;color:#9fb3cf;}
.notes li{position:relative;padding-left:1.1em;margin-bottom:.5em;}
.notes li::before{content:"・";position:absolute;left:0;}
.notes--dark{color:var(--muted);}
.caption-note{font-size:.8rem;color:var(--muted);margin-top:1.4em;}
.caption-note--light{color:#93a8c6;}
.onestop__text p.note-sm{font-size:.78rem;color:rgba(255,255,255,.62);margin:0;}

/* ---------- figures & zoom ---------- */
.figure{margin:0;}
.figure--wide{margin-bottom:clamp(26px,4vw,48px);}
.zoom{
  display:block;width:100%;padding:0;border:0;background:none;cursor:zoom-in;position:relative;
  border-radius:var(--radius);overflow:hidden;
}
.zoom img{width:100%;transition:transform .5s var(--ease);}
.zoom:hover img{transform:scale(1.015);}
.zoom__hint{
  position:absolute;right:10px;bottom:10px;
  background:rgba(8,18,44,.78);color:#fff;font-size:11px;font-weight:700;
  padding:5px 11px;border-radius:999px;letter-spacing:.04em;pointer-events:none;
  display:inline-flex;align-items:center;gap:5px;
}
.figure figcaption{margin-top:.9em;font-size:.82rem;color:#9fb3cf;line-height:1.75;}
.sec--light .figure figcaption,.sec--screens .figure figcaption{color:var(--muted);}

/* ---------- 2. role flow ---------- */
.flow{
  display:grid;grid-template-columns:1fr auto 1.25fr auto 1fr;align-items:stretch;
  gap:clamp(10px,1.4vw,20px);
}
.flow__col{
  background:rgba(255,255,255,.05);border:1px solid rgba(120,170,230,.22);
  border-radius:var(--radius);padding:clamp(18px,2vw,28px);
}
.flow__col--core{
  background:linear-gradient(160deg,rgba(24,90,180,.34),rgba(12,30,74,.44));
  border-color:rgba(90,180,240,.5);
}
.flow__col p.flow__label{
  display:inline-block;font-size:.72rem;font-weight:700;letter-spacing:.12em;
  color:#0a1128;background:var(--cyan);border-radius:3px;padding:.2em .9em;margin-bottom:.8em;
}
.flow__col h3{color:#fff;font-size:1.05rem;margin-bottom:.6em;}
.flow__col p{margin:0;font-size:.9rem;line-height:1.85;color:#bdcee6;}
.flow__arrow{align-self:center;position:relative;width:clamp(28px,2.6vw,40px);height:18px;}
.flow__arrow-line{
  position:absolute;left:0;right:5px;top:50%;height:2px;margin-top:-1px;border-radius:2px;
  background:linear-gradient(90deg,rgba(58,155,221,.15),var(--blue-400));transform-origin:left center;
}
.flow__arrow::after{
  content:"";position:absolute;right:1px;top:50%;width:11px;height:11px;margin-top:-5.5px;
  border-top:2px solid var(--blue-400);border-right:2px solid var(--blue-400);transform:rotate(45deg);
}

/* ---------- 3. benefits band ---------- */
.benefit-band{
  background:
    radial-gradient(800px 400px at 15% 0%,rgba(40,110,200,.35),transparent 60%),
    linear-gradient(105deg,var(--navy-900),#1a2550 55%,#243566 100%);
  padding:clamp(30px,4vw,52px) 0;margin-bottom:clamp(36px,5vw,68px);
}
.benefit-band__title{
  color:#fff;font-size:clamp(17px,1vw + 14px,22px);margin-bottom:1.2em;
  padding-bottom:.6em;border-bottom:1px solid rgba(160,200,240,.3);
}
.benefits{display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(12px,1.6vw,26px);}
.benefits li{display:flex;gap:12px;align-items:flex-start;}
.benefits img{width:clamp(50px,4.4vw,68px);flex:none;border-radius:50%;}
.benefits h4{color:#fff;font-size:clamp(14px,.6vw + 12.4px,17px);line-height:1.4;margin-bottom:.45em;}
.benefits p{margin:0;font-size:.78rem;line-height:1.7;color:#b9cce6;}

/* ---------- 3. feature cards ---------- */
.features{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,28px);}
.feature{
  background:#fff;border-radius:var(--radius);overflow:hidden;
  box-shadow:var(--shadow-md);display:flex;flex-direction:column;
}
.feature__head{
  position:relative;padding:clamp(18px,2vw,26px) clamp(18px,2vw,26px);
  background:linear-gradient(105deg,var(--blue-700) 0%,var(--blue-600) 55%,var(--blue-500) 100%);
  min-height:110px;display:flex;align-items:center;
}
.feature__num{
  position:absolute;left:6px;top:50%;transform:translateY(-50%);
  font-size:86px;font-weight:700;font-style:italic;line-height:1;
  color:rgba(255,255,255,.16);pointer-events:none;
}
.feature__head h3{
  position:relative;color:#fff;font-size:clamp(17px,.9vw + 14px,23px);
  font-style:italic;line-height:1.4;text-align:center;width:100%;
}
.feature__head h3 strong{display:inline-block;font-size:1.22em;font-style:italic;color:#fff;}
.feature__body{padding:clamp(20px,2.2vw,30px);display:flex;flex-direction:column;flex:1;}
.feature__body h4{
  color:var(--blue-700);font-size:clamp(17px,.85vw + 14px,22px);
  text-align:center;line-height:1.5;margin-bottom:.9em;
}
.feature__body p{font-size:.92rem;line-height:1.95;}
.feature__body .figure{margin-top:auto;padding-top:1.2em;}

.cta-inline{
  margin-top:clamp(34px,5vw,60px);text-align:center;
  background:var(--bg-band);border-radius:var(--radius);padding:clamp(24px,3.4vw,42px);
}
.cta-inline p{font-weight:700;color:var(--ink);font-size:var(--fs-lead);margin-bottom:1.1em;}

/* ---------- 4. screens ---------- */
.screens{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(18px,2.2vw,32px);}
.screen{
  background:#fff;border-radius:var(--radius);box-shadow:var(--shadow-md);
  padding:clamp(20px,2.2vw,30px);display:flex;flex-direction:column;
}
.screen__head{display:grid;grid-template-columns:auto 1fr;gap:4px 14px;align-items:center;padding-bottom:1em;}
.screen__no{
  font-size:clamp(26px,1.6vw + 20px,38px);font-weight:700;font-style:italic;
  color:var(--navy-800);line-height:1;grid-row:span 2;
}
.screen__head h3{font-size:clamp(17px,.8vw + 14px,22px);}
.screen__code{margin:0;font-size:.72rem;letter-spacing:.06em;color:var(--blue-500);font-weight:700;}
.screen__note{
  grid-column:1 / -1;margin:.6em 0 0;padding-top:.7em;border-top:1px solid var(--line);
  font-size:.85rem;color:var(--body);
}
.screen .figure{margin-bottom:1.2em;}
.screen .zoom{border:1px solid var(--line);}
.screen__body h4{font-size:clamp(17px,.8vw + 14px,22px);color:var(--ink);margin-bottom:.7em;}
.screen__body h4 strong{color:var(--blue-600);font-style:italic;}
.screen__body ul li{position:relative;padding-left:1.15em;font-size:.9rem;line-height:1.8;margin-bottom:.4em;}
.screen__body ul li::before{
  content:"";position:absolute;left:0;top:.72em;width:7px;height:7px;background:var(--blue-500);
}

/* ---------- 5. results ---------- */
.sec--results{background:linear-gradient(180deg,#eef4fb 0%,#fff 46%);padding-bottom:clamp(56px,7vw,110px);}
.results__title{margin-bottom:clamp(26px,3.6vw,46px);}
.stats-band{
  background:
    radial-gradient(700px 300px at 20% 50%,rgba(40,110,205,.4),transparent 65%),
    linear-gradient(100deg,#0d1636,#16255a 55%,#0f1c44 100%);
  padding:clamp(28px,4vw,50px) 0;margin-bottom:clamp(34px,4.6vw,60px);
  position:relative;
}
.stats-band::before,.stats-band::after{
  content:"";position:absolute;left:0;right:0;height:2px;
  background:linear-gradient(90deg,transparent,rgba(120,190,255,.6),transparent);
}
.stats-band::before{top:0;} .stats-band::after{bottom:0;}
.stats{display:grid;grid-template-columns:repeat(3,1fr);}
.stat{text-align:center;padding:clamp(6px,1vw,14px) clamp(10px,1.6vw,26px);position:relative;}
.stat + .stat::before{
  content:"";position:absolute;left:0;top:8%;bottom:8%;width:1px;
  background:linear-gradient(180deg,transparent,rgba(140,195,250,.55),transparent);
  transform:skewX(-14deg);
}
.stat__label{color:#fff;font-size:clamp(15px,.8vw + 12px,21px);font-weight:700;margin-bottom:.15em;}
.stat__value{display:flex;align-items:baseline;justify-content:center;gap:.05em;margin:0;color:#fff;}
.stat__big{font-size:clamp(42px,4.4vw + 16px,78px);font-weight:700;line-height:1.05;letter-spacing:-.01em;}
.stat__sm{font-size:clamp(20px,1.6vw + 12px,36px);font-weight:700;}
.stat__pre{font-size:clamp(17px,1vw + 12px,26px);font-weight:700;}
.stat__note{margin:.4em 0 0;font-size:clamp(11px,.4vw + 10px,14px);color:#a9c3e4;}

.results__grid{display:grid;grid-template-columns:1.35fr 1fr;gap:clamp(24px,3vw,48px);align-items:start;}
.block-title{
  font-size:clamp(18px,1vw + 15px,24px);color:var(--ink);margin-bottom:1em;
}
.impact li{
  display:flex;gap:16px;background:linear-gradient(100deg,#fff,#f1f6fc);
  border-left:4px solid var(--blue-500);border-radius:6px;
  box-shadow:var(--shadow-sm);padding:clamp(14px,1.6vw,22px);margin-bottom:12px;
}
.impact__no{
  font-size:clamp(24px,1.4vw + 18px,34px);font-weight:700;font-style:italic;
  color:var(--blue-600);line-height:1.2;flex:none;
}
.impact h4{font-size:clamp(15px,.7vw + 13px,19px);margin-bottom:.35em;}
.impact h4 strong{color:var(--blue-600);}
.impact p{margin:0;font-size:.86rem;line-height:1.8;}
.impact .mark{color:var(--blue-600);font-weight:700;}

.quote{
  margin:0;background:linear-gradient(160deg,#eaf2fb,#dde9f7);
  border:1px solid #c6d9ee;border-radius:var(--radius);
  padding:clamp(22px,2.6vw,36px);position:relative;
}
.quote__mark{
  position:absolute;left:clamp(14px,1.6vw,24px);top:2px;
  font-size:64px;line-height:1;color:#b9d2ec;font-weight:700;
}
.quote blockquote{margin:1.2em 0 0;}
.quote blockquote p{
  margin:0;color:var(--navy-800);font-weight:700;
  font-size:clamp(15px,.8vw + 13px,20px);line-height:1.95;
}
.quote figcaption{display:flex;gap:14px;align-items:center;margin-top:1.4em;padding-top:1.2em;border-top:1px solid #c6d9ee;}
.quote figcaption img{width:clamp(56px,5vw,76px);flex:none;}
.quote__who{margin:0 0 .2em;font-weight:700;color:var(--blue-600);font-size:.88rem;}
.quote__meta{margin:0;font-size:.8rem;line-height:1.7;color:var(--body);}

/* ---------- 6. support ---------- */
.sec--support{padding:0;background:linear-gradient(180deg,#fff 0%,#eef4fb 100%);}
.support__top{padding-top:clamp(40px,5vw,70px);}
.support__top-inner{
  display:grid;grid-template-columns:1fr 1.05fr;gap:clamp(24px,3vw,48px);align-items:center;
}
.support__lead p{font-size:.94rem;line-height:1.95;}
.support__lead .sec-title{margin:0 0 .7em;}
.support__lead p.support__hours{
  background:#fff;border-left:4px solid var(--blue-500);border-radius:6px;
  padding:1em 1.2em;font-size:.86rem;box-shadow:var(--shadow-sm);
}
.support__lead p.support__hours strong{color:var(--blue-700);}
.support__photo{margin:0;position:relative;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-md);}
.support__photo figcaption{
  position:absolute;right:0;bottom:0;background:rgba(6,14,36,.82);color:#fff;
  padding:.7em 1.1em;font-size:.82rem;line-height:1.5;
}
.support__photo figcaption strong{font-size:1.25em;color:var(--cyan);}

.steps{
  /* 列の内側にパディングを持たせず、下段（多層防御）と左右端を揃える。
     列間の余白は gap だけで作り、矢印はその gap の中央に置く。 */
  --steps-gap:clamp(20px,2.6vw,44px);
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--steps-gap);
  padding:clamp(40px,5vw,72px) 0 clamp(36px,4.6vw,64px);
}
.step{position:relative;text-align:center;padding:0;min-width:0;}
.step + .step::before{
  content:"";position:absolute;left:calc(var(--steps-gap) * -.5 - 6px);top:46%;
  width:13px;height:13px;border-top:2px solid #b5cde6;border-right:2px solid #b5cde6;transform:rotate(45deg);
}
.step p.step__no{
  margin:0;font-size:clamp(46px,3vw + 26px,64px);font-weight:700;font-style:italic;
  color:#b6cee8;line-height:1;text-align:left;
}
.step p.step__no span{display:block;font-size:.3em;letter-spacing:.2em;font-style:normal;color:#c6dbef;}
.step img{width:clamp(62px,6vw,96px);margin:-.6em auto .9em;}
.step h3{font-size:clamp(17px,1vw + 14px,25px);margin-bottom:.6em;}
.step h3 em{font-style:normal;color:var(--blue-600);}
.step p{font-size:.92rem;line-height:1.85;margin-bottom:1em;word-break:auto-phrase;}
.step p.step__tags{display:flex;justify-content:center;gap:0;margin:0;}
.tag{
  background:#e3ecf6;color:var(--body);font-size:.8rem;font-weight:700;
  padding:.45em 1.5em;border-radius:999px 0 0 999px;
}
.tag--solid{background:var(--navy-800);color:#fff;border-radius:0 999px 999px 0;}

.onestop{
  background:
    linear-gradient(100deg,rgba(8,16,40,.94) 0%,rgba(14,32,80,.86) 48%,rgba(20,52,120,.8) 100%),
    url("../images/texture-particles.jpg") center/cover;
  padding:clamp(30px,4vw,54px) 0;
}
.onestop__inner{display:flex;gap:clamp(24px,4vw,64px);align-items:center;flex-wrap:wrap;justify-content:space-between;}
.onestop__text h3{color:#fff;font-size:clamp(21px,1.6vw + 15px,34px);margin-bottom:.5em;}
.onestop__text h3 em{font-style:normal;color:var(--cyan);}
.onestop__text p{color:#cfdcef;font-size:.9rem;line-height:1.9;}
.onestop__stats{display:flex;gap:clamp(24px,3vw,56px);}
.onestop__stats p{margin:0;display:grid;grid-template-columns:auto auto;align-items:baseline;gap:0 .15em;}
.onestop__num{font-size:clamp(46px,4vw + 22px,80px);font-weight:700;font-style:italic;color:#fff;line-height:1;}
.onestop__unit{font-size:clamp(17px,1vw + 13px,26px);font-weight:700;color:#fff;}
.onestop__cap{grid-column:1 / -1;font-size:.8rem;color:var(--cyan);font-weight:700;font-style:italic;margin-top:.3em;}

/* ---------- 7. security ---------- */
.sec--security{
  background:
    radial-gradient(900px 560px at 82% 6%,rgba(34,96,190,.34),transparent 62%),
    linear-gradient(168deg,#0a1128 0%,#0d1633 44%,#060b1e 100%);
  color:#cfdcef;
}
.security__top{display:grid;grid-template-columns:1.4fr 1fr;gap:clamp(24px,3.4vw,54px);align-items:start;margin-bottom:clamp(30px,4vw,56px);}
.security__news{
  margin-top:clamp(20px,2.6vw,34px);border-left:4px solid var(--blue-400);
  padding-left:clamp(14px,1.6vw,24px);
}
.security__news h3{color:#fff;font-size:clamp(17px,1vw + 14px,24px);margin-bottom:.7em;text-wrap:balance;}
.security__news p{font-size:.9rem;line-height:1.95;color:#b9cce6;}
.security__news em{font-style:normal;color:var(--cyan);font-weight:700;}
.security__news p.security__ask{color:#fff;font-weight:700;font-size:clamp(15px,.9vw + 12px,20px);}
.security__news p.security__ask span{color:#b9cce6;font-weight:400;font-size:.88em;}
.security__figure .zoom{border:1px solid rgba(120,170,230,.3);}

.shields{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,2vw,26px);margin-bottom:clamp(36px,5vw,64px);}
.shield{
  background:linear-gradient(160deg,rgba(255,255,255,.075),rgba(255,255,255,.03));
  border:1px solid rgba(130,180,235,.28);border-radius:4px;
  padding:clamp(20px,2.2vw,30px);position:relative;
}
.shield::before,.shield::after{
  content:"";position:absolute;width:14px;height:14px;border-color:var(--cyan);border-style:solid;
}
.shield::before{left:-1px;top:-1px;border-width:2px 0 0 2px;}
.shield::after{right:-1px;bottom:-1px;border-width:0 2px 2px 0;}
.shield h3{color:#fff;font-size:clamp(21px,1.4vw + 16px,30px);margin-bottom:.35em;}
.shield p.shield__sub{color:#fff;font-weight:700;font-size:clamp(14px,.7vw + 12px,18px);margin-bottom:.9em;}
.shield p{font-size:.86rem;line-height:1.9;color:#b3c6e0;}
.shield p.shield__threat{
  margin:1.2em 0 0;padding-top:.9em;border-top:1px dashed rgba(140,180,225,.32);
  font-size:.76rem;color:#9db2d0;display:flex;gap:.5em;align-items:baseline;
}
.shield p.shield__threat span{
  flex:none;width:16px;height:16px;border-radius:50%;background:#e2483c;color:#fff;
  font-size:11px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;
}

.layers__title{
  color:#fff;font-size:clamp(18px,1.2vw + 14px,26px);margin-bottom:1.1em;
  padding-bottom:.6em;border-bottom:1px dotted rgba(150,195,240,.4);
}
.layers__title span{font-size:.62em;font-weight:400;color:#9fb8d8;margin-left:1em;}
.layers__list{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(16px,1.6vw,22px);margin-bottom:clamp(24px,3vw,40px);}
.layers__list li{display:flex;gap:12px;align-items:flex-start;min-width:0;}
.layers__list img{width:clamp(44px,3.2vw,54px);flex:none;border-radius:50%;}
.layers__list h4{color:#fff;font-size:clamp(16px,.6vw + 14px,19px);margin-bottom:.45em;}
.layers__list p{margin:0;font-size:.88rem;line-height:1.8;color:#b3c7e2;word-break:auto-phrase;}

.badges{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(10px,1.4vw,18px);}
.badges li{
  background:linear-gradient(150deg,rgba(255,255,255,.09),rgba(255,255,255,.035));
  border:1px solid rgba(130,180,235,.26);border-radius:4px;
  padding:clamp(12px,1.4vw,18px);text-align:center;
}
.badges strong{display:block;color:#fff;font-size:clamp(15px,.8vw + 13px,21px);margin-bottom:.3em;}
.badges span{font-size:.8rem;color:#a7bfdc;line-height:1.7;display:block;}

/* ---------- 8. contact ---------- */
.contact{
  background:
    linear-gradient(180deg,rgba(5,9,26,.78) 0%,rgba(6,14,38,.66) 52%,rgba(5,9,26,.88) 100%),
    url("../images/texture-particles.jpg") center/cover;
  padding:clamp(54px,7vw,104px) 0;text-align:center;
}
.contact__lead{
  color:var(--cyan);font-weight:700;letter-spacing:.06em;
  font-size:clamp(14px,.7vw + 12px,19px);margin-bottom:1em;
}
.contact__title{color:#fff;font-size:var(--fs-h2);line-height:1.35;margin-bottom:.7em;}
.contact__body{color:#c6d6ec;font-size:var(--fs-lead);line-height:1.95;margin-bottom:2em;}
.contact__sub{margin-top:1.4em;font-size:.84rem;color:#9fb3cf;}

/* ---------- footer ---------- */
.site-footer{background:#fff;padding:clamp(34px,4.4vw,60px) 0 0;}
.site-footer__inner{display:flex;gap:clamp(24px,4vw,64px);align-items:center;flex-wrap:wrap;justify-content:center;}
.site-footer__logo{width:clamp(150px,14vw,210px);}
.company{margin:0;font-size:.88rem;}
.company > div{display:flex;gap:1em;margin-bottom:.35em;}
.company dt{flex:none;width:5.5em;color:var(--muted);}
.company dd{margin:0;color:var(--ink);}
.company a{color:var(--blue-600);text-decoration:none;}
.company a:hover{text-decoration:underline;}
.copyright{text-align:center;margin:clamp(26px,3vw,44px) 0 0;padding:1.2em 0;font-size:.75rem;color:var(--muted);border-top:1px solid var(--line);}

/* ---------- sticky mobile CTA ---------- */
.cta-bar{
  position:fixed;left:0;right:0;bottom:0;z-index:70;display:none;
  padding:10px 14px calc(10px + env(safe-area-inset-bottom));
  background:rgba(6,12,32,.94);backdrop-filter:blur(8px);
}
.cta-bar .btn{width:100%;}

/* ---------- lightbox ---------- */
.lightbox{
  position:fixed;inset:0;z-index:120;background:rgba(3,7,20,.95);
  display:flex;align-items:center;justify-content:center;flex-direction:column;
}
.lightbox[hidden]{display:none;}
.lightbox__stage{
  width:100%;height:100%;overflow:auto;display:flex;align-items:center;justify-content:center;
  padding:56px 12px 44px;-webkit-overflow-scrolling:touch;
}
.lightbox__stage img{
  max-width:100%;max-height:100%;width:auto;cursor:zoom-in;
  transition:max-width .3s var(--ease);
}
.lightbox.is-zoomed .lightbox__stage img{max-width:none;max-height:none;width:auto;cursor:zoom-out;}
.lightbox__close{
  position:absolute;top:10px;right:14px;z-index:2;width:44px;height:44px;
  border:0;border-radius:50%;background:rgba(255,255,255,.14);color:#fff;font-size:26px;
  line-height:1;cursor:pointer;
}
.lightbox__close:hover{background:rgba(255,255,255,.26);}
.lightbox__help{
  position:absolute;bottom:10px;left:0;right:0;margin:0;text-align:center;
  color:#9fb3cf;font-size:.75rem;
}
body.is-locked{overflow:hidden;}

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width:1280px){
  .site-header__tag{display:none;}
}
@media (max-width:1100px){
  .site-nav{display:none;}
  .benefits{grid-template-columns:repeat(3,1fr);}
  .layers__list{grid-template-columns:repeat(2,1fr);}
}

@media (max-width:900px){
  :root{--header-h:72px;}
  .flow{grid-template-columns:1fr;}
  .flow__arrow{justify-self:center;transform:rotate(90deg);}
  .features{grid-template-columns:1fr;}
  .feature__head{min-height:auto;}
  .screens{grid-template-columns:1fr;}
  .results__grid{grid-template-columns:1fr;}
  .support__top-inner{grid-template-columns:1fr;}
  .security__top{grid-template-columns:1fr;}
  .shields{grid-template-columns:1fr;}
  .steps{grid-template-columns:1fr;gap:34px;}
  .step{text-align:left;padding:0;}
  .step + .step::before{left:50%;top:-24px;transform:rotate(135deg);}
  .step img{margin-inline:0;}
  .step__tags{justify-content:flex-start;}
  .badges{grid-template-columns:1fr;}
  .contact{background-attachment:scroll;}
}

@media (max-width:680px){
  .wrap{width:min(100% - 32px,var(--wrap));}
  .br-sp{display:block;}
  :root{--header-h:64px;}
  .site-header__inner{width:min(100% - 32px,1360px);gap:14px;}
  .site-header__logo img{height:30px;}
  .site-header .btn--sm{padding:.62em 1.15em;font-size:13px;}

  .hero__inner{min-height:auto;padding-block:clamp(40px,10vw,64px) clamp(36px,9vw,56px);}
  .hero__media img{object-position:66% 46%;}
  .hero::after{
    background:linear-gradient(180deg,rgba(4,8,22,.86) 0%,rgba(4,8,22,.60) 48%,rgba(4,10,28,.78) 100%);
  }
  .hero__foot{flex-direction:column;align-items:flex-start;gap:20px;}
  .hero__foot .btn{width:100%;}

  .benefits{grid-template-columns:1fr;gap:14px;}
  .benefits li{align-items:center;}
  .benefits h4 br{display:none;}

  .stats{grid-template-columns:1fr;gap:18px;}
  .stat + .stat::before{
    left:12%;right:12%;top:-9px;bottom:auto;width:auto;height:1px;transform:none;
    background:linear-gradient(90deg,transparent,rgba(140,195,250,.5),transparent);
  }
  .layers__list{grid-template-columns:1fr;}
  .onestop__stats{gap:32px;}
  .company > div{flex-direction:column;gap:0;margin-bottom:.8em;}
  .company dt{width:auto;font-size:.76rem;}
  .site-footer{padding-bottom:64px;}
  .cta-bar{display:block;}
  .zoom__hint{opacity:1;}
}

@media (max-width:374px){
  .site-header__logo img{height:26px;}
  .site-header .btn--sm{padding:.6em .9em;font-size:12px;}
  .site-header .btn--sm::after{display:none;}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{animation-duration:.001ms !important;transition-duration:.001ms !important;}
}

/* PC専用の改行（狭い画面では解除） */
.br-pc{display:inline;}
@media (max-width:680px){ .br-pc{display:none;} }