:root {
  --bg: #f6f8fb;
  --surface: #ffffff;
  --ink: #111722;
  --muted: #667085;
  --line: rgba(17, 23, 34, .11);
  --blue: #0b63f3;
  --navy: #071a3b;
  --violet: #6c4cff;
  --max: 1220px;
  --pad: clamp(22px, 4vw, 64px);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--bg);
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", "YuGothic", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  line-height: 1.75;
}
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button { font: inherit; }
.sr-only { position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0; }

.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 78px;
  padding: 0 var(--pad);
  background: color-mix(in srgb, var(--bg) 84%, transparent);
  backdrop-filter: blur(18px);
  border-bottom: 1px solid transparent;
  transition: border-color .25s ease, background .25s ease;
}
.site-header.scrolled { border-color: var(--line); background: rgba(246,248,251,.93); }
.brand { display: inline-flex; align-items: center; gap: 12px; font-size: 15px; font-weight: 700; letter-spacing: .03em; }
.brand img { width: 32px; height: 32px; object-fit: contain; }
.global-nav { display: flex; align-items: center; gap: 34px; font-size: 13px; font-weight: 650; letter-spacing: .04em; }
.global-nav a { position: relative; }
.global-nav a::after { content:""; position:absolute; left:0; right:100%; bottom:-7px; height:1px; background:var(--ink); transition:right .2s ease; }
.global-nav a:hover::after { right:0; }
.menu-button { display:none; border:0; background:transparent; padding:12px; }
.menu-button span:not(.sr-only) { display:block; width:24px; height:1px; background:var(--ink); margin:5px 0; }

.section-shell { width: min(calc(100% - 2 * var(--pad)), var(--max)); margin-inline: auto; }
.eyebrow { margin: 0 0 20px; color: #556070; font-size: 12px; font-weight: 700; letter-spacing: .15em; }
.text-link { display: inline-flex; align-items:center; gap:9px; width:fit-content; padding-bottom:4px; border-bottom:1px solid currentColor; font-size:13px; font-weight:650; letter-spacing:.02em; }
.text-link.muted { color: var(--muted); }
.text-link.disabled { color:#9aa2af; border-color:#cfd4dc; cursor:default; }

.hero {
  min-height: 100svh;
  padding-top: clamp(150px, 18vh, 210px);
  padding-bottom: clamp(90px, 12vh, 150px);
  display: grid;
  grid-template-columns: minmax(0, 1.14fr) minmax(320px, .86fr);
  align-items: center;
  gap: clamp(46px, 7vw, 92px);
}
.hero h1 {
  margin: 0;
  max-width: 760px;
  font-size: clamp(38px, 3.8vw, 56px);
  line-height: 1.18;
  letter-spacing: -.04em;
  font-weight: 700;
  text-wrap: balance;
}
.hero-lead { max-width: 660px; margin: 30px 0 0; color: #465160; font-size: clamp(16px, 1.35vw, 18px); line-height: 1.9; }
.hero-pc-break { display: inline; }
.hero-line, .hero-lead-line { display:inline-block; white-space:nowrap; }
.hero-actions { display:flex; flex-wrap:wrap; gap:28px; margin-top:40px; }
.hero-visual { position: relative; aspect-ratio: 1/1; display:grid; place-items:center; isolation:isolate; }
.hero-visual img { width: 72%; position:relative; z-index:2; filter: drop-shadow(0 34px 54px rgba(11, 44, 105, .16)); }
.orb { position:absolute; border-radius:999px; filter: blur(48px); opacity:.42; z-index:1; }
.orb-a { width:42%; height:42%; background:#46a7ff; top:12%; right:3%; }
.orb-b { width:38%; height:38%; background:#855cff; bottom:8%; left:6%; }

.products { padding-block: clamp(100px, 14vw, 190px); }
.section-heading { display:flex; justify-content:space-between; align-items:end; gap:30px; padding-bottom:40px; border-bottom:1px solid var(--line); }
.section-heading .eyebrow { margin:0; }
.section-heading h2 { margin:0; font-size: clamp(36px, 5vw, 64px); line-height:1.1; letter-spacing:-.04em; }
.product-row { display:grid; grid-template-columns: minmax(320px, .95fr) minmax(0, 1.05fr); align-items:center; gap:clamp(50px, 8vw, 110px); padding-block:clamp(76px, 10vw, 130px); border-bottom:1px solid var(--line); }
.product-row.ncw { grid-template-columns:minmax(0,1.05fr) minmax(320px,.95fr); }
.product-visual { min-height: 430px; border-radius: 32px; overflow:hidden; display:grid; place-items:center; position:relative; }
.product-visual-stellar { min-height: 520px; background: radial-gradient(60% 60% at 50% 56%, rgba(108,76,255,.10) 0%, rgba(108,76,255,0) 72%), radial-gradient(36% 36% at 26% 72%, rgba(11,99,243,.10) 0%, rgba(11,99,243,0) 70%), linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 100%); overflow: visible; }
.product-visual-stellar picture { display:block; width:100%; }
.product-visual-stellar img { display:block; height:auto; width:min(122%, 760px); max-width:none; object-fit:contain; filter:drop-shadow(0 26px 34px rgba(17,23,34,.10)); }
/* NCW visual */
.product-visual-ncw {
  min-height: 430px;
  overflow: visible;
  position: relative;
  isolation: isolate;

  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;

  background:
    radial-gradient(
      46% 42% at 68% 58%,
      rgba(11, 99, 243, .10) 0%,
      rgba(11, 99, 243, 0) 74%
    ),
    radial-gradient(
      36% 32% at 36% 72%,
      rgba(108, 76, 255, .09) 0%,
      rgba(108, 76, 255, 0) 76%
    );
}

.product-visual-ncw::before {
  content: "";
  position: absolute;
  z-index: 0;
  width: 78%;
  height: 24%;
  left: 50%;
  bottom: 10%;
  transform: translateX(-50%);
  border-radius: 50%;

  background:
    radial-gradient(
      ellipse at center,
      rgba(76, 135, 255, .18) 0%,
      rgba(108, 76, 255, .09) 45%,
      rgba(108, 76, 255, 0) 76%
    );

  filter: blur(10px);
}

.product-visual-ncw::after {
  content: "";
  position: absolute;
  z-index: 1;
  width: 82%;
  height: 42%;
  left: 50%;
  top: 34%;
  transform: translate(-50%, -50%) rotate(-8deg);
  border: 1px solid rgba(130, 170, 255, .20);
  border-radius: 50%;

  box-shadow:
    0 0 22px rgba(88, 155, 255, .10),
    inset 0 0 18px rgba(108, 76, 255, .06);

  pointer-events: none;
}

.product-visual-ncw picture {
  display: grid;
  place-items: center;
  width: 100%;
  position: relative;
  z-index: 2;
}

.product-visual-ncw picture img {
  display: block;
  width: min(132%, 900px);
  max-width: none;
  height: auto;
  object-fit: contain;
  transform: translateX(-18px);

  filter:
    drop-shadow(0 24px 30px rgba(17, 23, 34, .10));
}

.product-visual-ncw .visual-note {
  position: relative;
  z-index: 3;

  width: 100%;
  margin: 8px 0 0;
  padding: 0;

  text-align: left;
  color: #8a93a3;
  font-size: 10px;
  line-height: 1.5;
  letter-spacing: .02em;
}
.product-meta { display:flex; justify-content:space-between; align-items:center; gap:20px; color:#697386; font-size:12px; letter-spacing:.08em; }
.status { padding:6px 10px; border:1px solid rgba(11,99,243,.25); border-radius:999px; color:#0a58d3; background:rgba(11,99,243,.06); }
.status.neutral { color:#616a78; border-color:#d6dae0; background:#fff; }
.product-copy h3 { margin:25px 0 16px; font-size:clamp(42px, 6vw, 76px); letter-spacing:-.055em; line-height:1; }
.product-copy p { max-width:630px; margin:0 0 34px; color:#465160; font-size:17px; line-height:1.95; }
.availability-note { max-width:520px !important; margin-top:-10px !important; margin-bottom:0 !important; color:#7b8491 !important; font-size:13px !important; line-height:1.75 !important; }

.company { padding-block: clamp(120px, 15vw, 210px); display:grid; grid-template-columns:minmax(0,.92fr) minmax(420px,1.08fr); gap:clamp(65px, 10vw, 150px); align-items:start; }
.company-intro h2 { margin:0; font-size:clamp(40px, 4.8vw, 64px); line-height:1.14; letter-spacing:-.045em; }
.company-intro > p:last-child { max-width:570px; margin:30px 0 0; color:#465160; font-size:16px; line-height:1.95; }
.company-profile { margin:0; border-top:1px solid var(--line); }
.company-profile div { display:grid; grid-template-columns:138px 1fr; gap:30px; padding:27px 0; border-bottom:1px solid var(--line); }
.company-profile dt { color:#707987; font-size:13px; font-weight:600; }
.company-profile dd { margin:0; font-size:15px; font-weight:560; line-height:1.75; }

.contact { padding-bottom: clamp(100px, 14vw, 170px); }
.contact-inner { background:var(--ink); color:white; padding:clamp(48px,7vw,92px); border-radius:34px; }
.contact-inner .eyebrow { color:#a8b1bf; }
.contact-inner h2 { margin:0; font-size:clamp(42px,5.5vw,72px); letter-spacing:-.05em; }
.contact-inner > p:not(.eyebrow):not(.contact-note) { max-width:680px; color:#cbd2dc; margin:24px 0 36px; font-size:16px; line-height:1.9; }
.button { display:inline-flex; align-items:center; justify-content:center; min-height:54px; padding:0 24px; border-radius:999px; background:white; color:var(--ink); font-size:13px; font-weight:700; word-break:break-all; }
.contact-note { margin:24px 0 0; color:#8f99a8; font-size:11px; }

.site-footer { width:min(calc(100% - 2 * var(--pad)), var(--max)); margin-inline:auto; padding:42px 0 54px; border-top:1px solid var(--line); display:grid; grid-template-columns:1fr auto; gap:32px; align-items:end; }
.footer-brand { display:flex; flex-direction:column; gap:5px; font-weight:700; }
.footer-brand small { color:#7c8490; font-weight:500; }
.site-footer nav { grid-column:2; grid-row:1; display:flex; flex-wrap:wrap; justify-content:flex-end; gap:12px 24px; color:#626c79; font-size:12px; }
.site-footer > small { color:#8a929f; font-size:11px; }

.reveal { opacity:0; transform:translateY(18px); transition:opacity .7s ease, transform .7s ease; }
.reveal.is-visible { opacity:1; transform:none; }


@media (max-width: 1360px) and (min-width: 1101px) {
  .hero { grid-template-columns:minmax(0,1.22fr) minmax(300px,.78fr); gap:clamp(32px,4vw,54px); }
  .hero h1 {
  max-width: none;
  font-size: clamp(38px, 3.25vw, 46px);
}
  .hero-lead { max-width:none; font-size:16px; }
  .hero-visual img { width:70%; }
}

@media (max-width: 1100px) {
  .hero { grid-template-columns:1fr; min-height:auto; padding-top:132px; padding-bottom:92px; gap:64px; }
  .hero-copy { max-width:760px; }
  .hero h1 { max-width:none; }
  .hero-visual { width:min(72vw, 500px); margin-inline:auto; }
}

@media (max-width: 900px) {
  .site-header { height:68px; }
  .menu-button { display:block; position:relative; z-index:2; }
  .global-nav { position:fixed; inset:0; background:rgba(246,248,251,.98); flex-direction:column; justify-content:center; gap:30px; font-size:22px; transform:translateY(-100%); transition:transform .35s ease; }
  .global-nav.open { transform:none; }
  .hero { grid-template-columns:1fr; min-height:auto; padding-top:132px; padding-bottom:92px; gap:64px; }
  .hero-copy { max-width:720px; }
  .hero h1 { max-width:690px; }
  .hero-visual { width:min(78vw, 500px); margin-inline:auto; }
  .product-row, .product-row.ncw, .company { grid-template-columns:1fr; }
  .product-row.ncw .product-copy { order:2; }
  .product-row.ncw .product-visual { order:1; }
  .product-visual { min-height:unset; aspect-ratio: 4/3; }
  .company { gap:62px; }
  .site-footer { grid-template-columns:1fr; align-items:start; }
  .site-footer nav { grid-column:1; grid-row:auto; justify-content:flex-start; }
}

@media (max-width: 680px) {
  .hero-pc-break { display:none; }
  .hero-line, .hero-lead-line { display:inline; white-space:normal; }
}

@media (max-width: 560px) {
  :root { --pad: 20px; }
  .site-header { padding-inline:20px; }
  .brand { gap:9px; font-size:14px; }
  .brand img { width:28px; height:28px; }
  .menu-button { padding:10px 4px 10px 10px; }

  .hero { padding-top:112px; padding-bottom:78px; gap:48px; }
  .hero .eyebrow { margin-bottom:16px; }
  .hero h1 { font-size:clamp(34px,9.4vw,44px); line-height:1.18; letter-spacing:-.045em; text-wrap:pretty; }
  .hero-lead { margin-top:22px; font-size:15px; line-height:1.85; }
  .hero-pc-break { display:none; }
  .hero-line, .hero-lead-line { display:inline; white-space:normal; }
  .hero-actions { gap:16px 22px; margin-top:28px; }
  .hero-visual { width:min(84vw, 390px); }
  .hero-visual img { width:78%; }

  .products { padding-block:92px; }
  .section-heading { display:block; padding-bottom:28px; }
  .section-heading h2 { margin-top:14px; font-size:38px; }
  .product-row { gap:34px; padding-block:58px; }
  .product-visual { border-radius:20px; aspect-ratio:16/10; }
  .product-visual-stellar { aspect-ratio:auto; min-height:0; padding-block:6px; }
  .product-visual-stellar picture { width:100%; }
  .product-visual-stellar img { height:auto; width:min(100%, 360px); max-width:100%; margin-inline:auto; }
  .product-meta { gap:12px; }
  .status { padding:5px 9px; font-size:11px; }
  .product-copy h3 { margin:20px 0 14px; font-size:50px; }
  .product-copy p { margin-bottom:28px; font-size:15px; line-height:1.85; }
  .availability-note { margin-top:-8px !important; font-size:12px !important; }

  .company { padding-block:92px; gap:48px; }
  .company-intro h2 { font-size:38px; line-height:1.18; }
  .company-intro > p:last-child { margin-top:22px; font-size:15px; line-height:1.85; }
  .company-profile div { grid-template-columns:1fr; gap:5px; padding:19px 0; }
  .company-profile dt { font-size:12px; }
  .company-profile dd { font-size:15px; line-height:1.65; }

  .contact { padding-bottom:92px; }
  .contact-inner { border-radius:22px; padding:40px 22px; }
  .contact-inner h2 { font-size:40px; }
  .contact-inner > p:not(.eyebrow):not(.contact-note) { margin:20px 0 28px; font-size:15px; line-height:1.8; }
  .button { width:100%; min-height:50px; padding:12px 14px; font-size:11px; line-height:1.45; }

  .site-footer { padding:32px 0 40px; gap:24px; }
  .site-footer nav { gap:10px 18px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  *, *::before, *::after { transition:none !important; animation:none !important; }
  .reveal { opacity:1; transform:none; }
}

/* FV final visual */
@media (min-width: 1101px) {
  .hero {
    grid-template-columns:
      minmax(0, 1fr)
      clamp(110px, 8vw, 150px)
      minmax(320px, .72fr);
    gap: 0;
  }

  .hero-copy {
    grid-column: 1;
  }

  .hero-visual {
    grid-column: 3;
    position: relative;
    transform: translateX(24px);
    overflow: visible;
  }

  .hero-visual img {
    width: 78%;
    position: relative;
    z-index: 3;
    filter:
      drop-shadow(0 24px 34px rgba(18, 45, 92, .10));
  }

  /* 青い背景光 */
  .orb-a {
    width: 42%;
    height: 42%;
    top: 14%;
    right: -2%;
    opacity: .24;
  }

  /* 紫の背景光 */
  .orb-b {
    width: 38%;
    height: 38%;
    bottom: 14%;
    left: 8%;
    opacity: .24;
  }

  /* ロゴ下の楕円状の接地光 */
  .hero-visual::after {
    content: "";
    position: absolute;
    z-index: 1;

    width: 72%;
    height: 17%;

    left: 50%;
    bottom: 7%;

    transform: translateX(-50%);

    border-radius: 50%;

    background:
      radial-gradient(
        ellipse at center,
        rgba(73, 126, 255, .16) 0%,
        rgba(73, 126, 255, .09) 34%,
        rgba(108, 76, 255, .05) 55%,
        rgba(108, 76, 255, 0) 76%
      );

    box-shadow:
      inset 0 0 0 2px rgba(107, 174, 255, .26),
      0 0 22px rgba(66, 158, 255, .20),
      0 0 40px rgba(108, 76, 255, .15);

    filter: blur(.4px);
    opacity: .92;
  }
}