:root {
  
  --canvas:    #0d0c0b;   
  --line:      #2b2724;   
  --line-soft: #1e1b19;   
  --text:      #f2efe9;   
  --text-2:    #d9d4cc;   
  --text-3:    #b4aea5;   
  --signal:    #2c7aff;   
  
  --surface:   #151312;

  --sans: "IBM Plex Sans JP", "Noto Sans JP", "Hiragino Sans", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", monospace;

  --gutter: clamp(16px, 3.4vw, 48px);
  --maxw: 1344px;
  --rail: 184px;
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --dur-in: 520ms;
  --dur-hover: 200ms;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; font-family: var(--sans); color: var(--text); background: var(--canvas);
  font-size: 17px; line-height: 1.85; -webkit-font-smoothing: antialiased;
}
img, svg { max-width: 100%; }
a { color: inherit; }


.sec { padding: clamp(80px, 11vw, 160px) var(--gutter) 40px; }
.sec > .wrap { max-width: var(--maxw); margin: 0 auto; }
.sec > .wrap > div { max-width: 1100px; }
.rail { font-size: 15px; line-height: 1.6; color: var(--text-3); display: flex; flex-direction: column; gap: 12px; padding-top: 6px; }
.rail .n { font-family: var(--mono); color: var(--text-2); }


.h1 { margin: 0; font-weight: 600; letter-spacing: -0.02em; line-height: 1.25; font-size: clamp(34px, 5.6vw, 80px); }
.h2 { margin: 0; font-weight: 600; letter-spacing: -0.015em; line-height: 1.35; font-size: clamp(30px, 4.1vw, 58px); }
.h3 { margin: 0; font-weight: 600; line-height: 1.45; font-size: clamp(20px, 1.9vw, 28px); }
.lead { margin: 0; color: var(--text-2); font-size: clamp(17px, 1.3vw, 19px); line-height: 1.9; max-width: 640px; }
.small { font-size: 16px; line-height: 1.8; color: var(--text-2); }
.note { font-size: 14px; line-height: 1.7; color: var(--text-3); }
.signal { color: var(--signal); }


.lnk { display: inline-flex; align-items: center; gap: 10px; font-size: 17px; font-weight: 500; text-decoration: none;
  padding-bottom: 6px; border-bottom: 1px solid var(--text-3); transition: border-color var(--dur-hover); }
.lnk .arr { color: var(--signal); transition: transform var(--dur-hover) var(--ease-out); }
.lnk:hover { border-color: var(--text); }
.lnk:hover .arr { transform: translateX(3px); }
.lnk.primary { border-color: var(--signal); }
.lnk.plain { border-bottom: 0; padding-bottom: 0; color: var(--text-2); }
.lnk.plain .arr { color: inherit; }
.lnk.plain:hover { color: var(--text); }


.stage { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--text-3); }
.stage::before { content: ""; width: 6px; height: 6px; background: currentColor; flex: none; }
.stage.on { color: var(--signal); }


.js .reveal { opacity: 0; transform: translateY(16px); transition: opacity var(--dur-in) var(--ease-out), transform var(--dur-in) var(--ease-out); }
.js .reveal.in { opacity: 1; transform: none; }
.js .line-in { opacity: 0; transform: translateY(12px); animation: line-in var(--dur-in) var(--ease-out) forwards; }
@keyframes line-in { to { opacity: 1; transform: none; } }

@media (max-width: 900px) {
  .sec > .wrap { grid-template-columns: 1fr; }
  .rail { flex-direction: row; flex-wrap: wrap; gap: 4px 14px; margin-bottom: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  .js .reveal, .js .line-in { opacity: 1 !important; transform: none !important; animation: none !important; transition: none !important; }
  .lnk .arr { transition: none; }
}