/* ==========================================================
   404 LIFE SYSTEM — UI / 演出レイヤー
   外部ライブラリなし。動きは transform / opacity 中心。
   常時動かさず「たまに壊れる」演出は system.js が間隔を決める。
   prefers-reduced-motion では演出を止める（ファイル末尾）。
   ========================================================== */

:root {
  --sys-accent: #ccff00;
  --sys-accent-rgb: 204, 255, 0;
  --sys-black: #000;
  --sys-muted: #8f8f8f;
  --sys-white: #fff;
  --sys-mono: "Share Tech Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --sys-display: "Black Ops One", system-ui, sans-serif;
  --sys-sans: "Noto Sans JP", system-ui, sans-serif;
  --sys-glow: 0 0 6px rgba(var(--sys-accent-rgb), 0.55), 0 0 18px rgba(var(--sys-accent-rgb), 0.22);

  /* ---- 背景画像 ----------------------------------------
     差し替えはここだけ（パスは assets/ からの相対）。
     --sys-bg-ratio は画像の 幅 / 高さ。
     スクロールに合わせて画像の上端→下端へゆっくり移動する。 */
  --sys-bg-image: url("garage-bg.webp");
  --sys-bg-ratio: 725 / 2170;
  --sys-bg-fallback: radial-gradient(120% 70% at 50% 0%, #1c1c1c 0%, #0c0c0c 50%, #000 100%);
  /* 画像の上に重ねる暗さ。画像が明るい場合は数値を上げる */
  --sys-bg-shade: rgba(0, 0, 0, 0.32);

  /* レール（左右の縦ライン）の位置と本文の余白 */
  --pad: 28px;
  --rail: 11px;
}

@media (min-width: 768px) {
  :root {
    --pad: 48px;
    --rail: 18px;
  }
}

html {
  background: var(--sys-black);
}

body {
  -webkit-tap-highlight-color: transparent;
  overflow-x: clip;
}

@supports not (overflow: clip) {
  body { overflow-x: hidden; }
}

.sys-sr {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ---------- 背景 ---------- */

/* body の黒背景より上に描くため z-index:0（本文 .sys-page は 1） */
.sys-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background: var(--sys-bg-fallback);
}

/* PC の左右余白：同じ画像を暗くぼかして敷く */
.sys-bg::before {
  content: "";
  position: absolute;
  inset: -40px;
  background: var(--sys-bg-image) center / cover no-repeat;
  filter: blur(14px) brightness(0.32);
  display: none;
}

.sys-bg__img {
  position: absolute;
  top: 0;
  left: 50%;
  width: min(100%, 900px);
  aspect-ratio: var(--sys-bg-ratio);
  min-height: 100vh;
  min-height: 100lvh;
  background: var(--sys-bg-image) center top / cover no-repeat;
  transform: translate3d(-50%, 0, 0);
  will-change: transform;
}

@media (min-width: 901px) {
  .sys-bg::before { display: block; }

  .sys-bg__img {
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  }
}

.sys-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.45) 0%, transparent 22%, transparent 78%, rgba(0, 0, 0, 0.5) 100%),
    var(--sys-bg-shade);
}

/* ---------- CRT / 監視モニター ---------- */

.sys-crt {
  position: fixed;
  inset: 0;
  z-index: 90;
  pointer-events: none;
  overflow: hidden;
  animation: sys-flicker 9s steps(1) infinite;
}

/* 走査線 */
.sys-crt::before {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    180deg,
    transparent 0,
    transparent 2px,
    rgba(0, 0, 0, 0.07) 2px,
    rgba(0, 0, 0, 0.07) 3px
  );
}

/* フィルムグレイン */
.sys-crt::after {
  content: "";
  position: absolute;
  inset: -120px;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1.4 -.2'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
  will-change: transform;
  animation: sys-grain 0.9s steps(5) infinite;
}

/* ゆっくり降りる走査バンド */
.sys-crt__roll {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 22vh;
  background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.025) 50%, transparent);
  transform: translate3d(0, -25vh, 0);
  will-change: transform;
  animation: sys-roll 13s linear infinite;
}

@keyframes sys-grain {
  0%   { transform: translate3d(0, 0, 0); }
  20%  { transform: translate3d(-38px, 22px, 0); }
  40%  { transform: translate3d(24px, -46px, 0); }
  60%  { transform: translate3d(-52px, -14px, 0); }
  80%  { transform: translate3d(40px, 36px, 0); }
  100% { transform: translate3d(0, 0, 0); }
}

@keyframes sys-roll {
  0%   { transform: translate3d(0, -25vh, 0); }
  50%  { transform: translate3d(0, 105vh, 0); }
  100% { transform: translate3d(0, 105vh, 0); }
}

/* 画面の微かな明滅（9秒に2回、一瞬だけ） */
@keyframes sys-flicker {
  0%   { opacity: 1; }
  61%  { opacity: 0.84; }
  62%  { opacity: 1; }
  88%  { opacity: 0.92; }
  89%  { opacity: 1; }
}

/* ---------- スキップリンク ---------- */

.sys-skip {
  position: absolute;
  left: 12px;
  top: -100px;
  z-index: 120;
  padding: 12px 16px;
  background: var(--sys-accent);
  color: #000;
  font-family: var(--sys-mono);
  font-size: 15px;
}

.sys-skip:focus {
  top: 12px;
}

/* ---------- BOOT ---------- */

.sys-boot {
  display: none;
}

html[data-boot="full"] .sys-boot,
html[data-boot="short"] .sys-boot {
  display: flex;
  position: fixed;
  inset: 0;
  z-index: 80;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px 20px;
  background: #000;
  color: #d9d9d9;
  font-family: var(--sys-mono);
  cursor: pointer;
  /* JSが無くても必ず消える（フェイルセーフ） */
  animation: sys-boot-out 0.3s ease-in 1.6s forwards;
}

html[data-boot="short"] .sys-boot {
  animation-duration: 0.2s;
  animation-delay: 0.42s;
}

html[data-boot="done"] .sys-boot {
  display: none;
}

.sys-boot__panel {
  width: min(100%, 340px);
}

html[data-boot="short"] .sys-boot__panel,
html[data-boot="short"] .sys-boot__skip {
  display: none;
}

.sys-boot__head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 10px;
  margin-bottom: 14px;
  border-bottom: 1px solid #333;
  color: var(--sys-accent);
  font-size: 13px;
  letter-spacing: 0.14em;
  text-shadow: var(--sys-glow);
}

.sys-boot__head span:last-child {
  color: var(--sys-muted);
  text-shadow: none;
}

.sys-boot__log {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 15px;
  line-height: 1.75;
  letter-spacing: 0.08em;
}

.sys-boot__log li {
  display: flex;
  align-items: baseline;
  opacity: 0;
  animation: sys-show 0.01s linear forwards;
  animation-delay: calc(var(--d) * 115ms + 80ms);
}

.sys-boot__dots {
  flex: 1;
  margin: 0 8px;
  border-bottom: 1px dotted #555;
  transform: translateY(-4px);
}

.sys-boot__log b {
  font-weight: 400;
  color: var(--sys-accent);
  text-shadow: var(--sys-glow);
}

.sys-boot__bar {
  height: 3px;
  margin: 16px 0 22px;
  background: #1a1a1a;
  overflow: hidden;
}

.sys-boot__bar span {
  display: block;
  height: 100%;
  background: var(--sys-accent);
  box-shadow: var(--sys-glow);
  transform: scaleX(0);
  transform-origin: left center;
  animation: sys-bar 1.05s steps(14) 0.15s forwards;
}

.sys-boot__logo {
  margin: 0;
  font-family: var(--sys-display);
  font-size: 44px;
  line-height: 1;
  letter-spacing: 0.04em;
  color: var(--sys-white);
  opacity: 0;
  animation: sys-boot-logo 0.36s steps(1) 0.82s forwards;
}

.sys-boot__logo span {
  color: var(--sys-accent);
  text-shadow: var(--sys-glow);
}

.sys-boot__jp {
  margin: 10px 0 0;
  font-family: var(--sys-sans);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: 0.2em;
  opacity: 0;
  animation: sys-show 0.01s linear 1.05s forwards;
}

.sys-boot__skip {
  position: absolute;
  bottom: max(24px, env(safe-area-inset-bottom));
  left: 0;
  right: 0;
  margin: 0;
  text-align: center;
  font-size: 12px;
  letter-spacing: 0.24em;
  color: #666;
}

.sys-boot__line {
  display: none;
}

html[data-boot="short"] .sys-boot__line {
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 2px;
  margin-top: -1px;
  background: #fff;
  box-shadow: 0 0 14px rgba(var(--sys-accent-rgb), 0.9);
  transform: scaleX(0);
  animation: sys-crt-on 0.42s ease-out forwards;
}

@keyframes sys-show {
  to { opacity: 1; }
}

@keyframes sys-bar {
  to { transform: scaleX(1); }
}

@keyframes sys-boot-logo {
  0%   { opacity: 1; transform: translateX(-6px); clip-path: inset(0 0 58% 0); }
  25%  { opacity: 1; transform: translateX(5px); clip-path: inset(46% 0 0 0); }
  50%  { opacity: 0.5; transform: translateX(-2px); clip-path: inset(20% 0 30% 0); }
  75%  { opacity: 1; transform: none; clip-path: none; }
  100% { opacity: 1; transform: none; clip-path: none; }
}

@keyframes sys-boot-out {
  0%   { opacity: 1; }
  30%  { opacity: 0.55; }
  45%  { opacity: 1; }
  100% { opacity: 0; visibility: hidden; }
}

@keyframes sys-crt-on {
  0%   { transform: scaleX(0); opacity: 1; }
  45%  { transform: scaleX(1); opacity: 1; }
  100% { transform: scaleX(1); opacity: 0; }
}

/* ---------- ページ枠：レールと十字マーク ---------- */

.sys-page {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 780px;
  margin: 0 auto;
  padding: 26px var(--pad) 30px;
}

.sys-rails {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.sys-rails::before,
.sys-rails::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background: repeating-linear-gradient(
    180deg,
    rgba(var(--sys-accent-rgb), 0.7) 0 280px,
    transparent 280px 300px,
    rgba(var(--sys-accent-rgb), 0.7) 300px 330px,
    transparent 330px 352px
  );
}

.sys-rails::before { left: var(--rail); }
.sys-rails::after { right: var(--rail); }

/* 十字マーク：ブロックの角に置く。--l / --r でレール上に揃う */
.sys-cross {
  position: absolute;
  width: calc(var(--rail) * 2);
  height: 17px;
  pointer-events: none;
  background:
    linear-gradient(var(--sys-accent) 0 0) center / 100% 1px no-repeat,
    linear-gradient(var(--sys-accent) 0 0) center / 1px 100% no-repeat;
}

.sys-cross--l { left: calc(-1 * var(--pad)); }
.sys-cross--r { right: calc(-1 * var(--pad)); }
.sys-cross--top { top: -9px; }
.sys-cross--bottom { bottom: -9px; }

/* 状態ランプ */
.sys-lamp {
  display: inline-block;
  flex: none;
  width: 7px;
  height: 7px;
  margin-right: 7px;
  background: var(--sys-accent);
  box-shadow: 0 0 5px rgba(var(--sys-accent-rgb), 0.9), 0 0 12px rgba(var(--sys-accent-rgb), 0.4);
  vertical-align: 1px;
}

.sys-cursor::after {
  content: "_";
  margin-left: 2px;
  animation: sys-caret 1.1s steps(1) infinite;
}

@keyframes sys-caret {
  50% { opacity: 0; }
}

/* ---------- ヘッダー ---------- */

.sys-head {
  position: relative;
  margin-bottom: 26px;
}

.sys-head__top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 18px;
}

.sys-sysmenu {
  margin: 0;
  font-family: var(--sys-mono);
  font-size: 12px;
  line-height: 1.45;
  letter-spacing: 0.08em;
  color: var(--sys-accent);
}

.sys-sysmenu ul {
  margin: 2px 0 0;
  padding: 0 0 0 8px;
  list-style: none;
}

.sys-sysmenu li::before {
  content: "- ";
}

.sys-id {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  margin: 2px 0 0;
  font-family: var(--sys-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--sys-accent);
  white-space: nowrap;
}

/* バーコード（CSSだけで描く） */
.sys-barcode {
  display: block;
  width: 112px;
  height: 22px;
  background: linear-gradient(90deg,
    var(--sys-accent) 0 2px, transparent 2px 4px, var(--sys-accent) 4px 5px, transparent 5px 7px,
    var(--sys-accent) 7px 10px, transparent 10px 11px, var(--sys-accent) 11px 12px, transparent 12px 15px,
    var(--sys-accent) 15px 16px, transparent 16px 17px, var(--sys-accent) 17px 19px, transparent 19px 22px,
    var(--sys-accent) 22px 23px, transparent 23px 24px, var(--sys-accent) 24px 27px, transparent 27px 28px
  ) 0 0 / 28px 100% repeat-x;
  opacity: 0.9;
}

/* 横並びナビ */
.sys-nav {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sys-nav li {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 区切り線：スマホはセルの左端（3列×2段） */
.sys-nav li:not(:nth-child(3n + 1))::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 1px;
  height: 16px;
  margin-top: -8px;
  background: rgba(255, 255, 255, 0.55);
}

.sys-nav a {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0 10px;
  font-family: var(--sys-sans);
  font-weight: 900;
  font-size: 14px;
  letter-spacing: 0.02em;
  color: var(--sys-white);
  white-space: nowrap;
  touch-action: manipulation;
  transition: color 0.15s, text-shadow 0.15s;
}

.sys-nav a[aria-current] {
  position: relative;
  z-index: 0;
  padding: 0 16px;
  color: #000;
}

/* TOP：蛍光イエローの札（角を1か所だけ落とす） */
.sys-nav a[aria-current]::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 8px;
  bottom: 8px;
  z-index: -1;
  background: var(--sys-accent);
  box-shadow: var(--sys-glow);
  clip-path: polygon(0 0, 100% 0, 100% 62%, calc(100% - 8px) 100%, 0 100%);
}

.sys-nav a:not([aria-current]):active,
.sys-nav a:not([aria-current]):focus-visible {
  color: var(--sys-accent);
  text-shadow: 0 0 8px rgba(var(--sys-accent-rgb), 0.6);
  outline: none;
}

@media (hover: hover) {
  .sys-nav a:not([aria-current]):hover {
    color: var(--sys-accent);
    text-shadow: 0 0 8px rgba(var(--sys-accent-rgb), 0.6);
  }
}

@media (min-width: 600px) {
  .sys-nav {
    display: flex;
    justify-content: flex-end;
  }

  .sys-nav li + li::before {
    content: "";
    position: static;
    width: 1px;
    height: 16px;
    margin: 0;
    background: rgba(255, 255, 255, 0.55);
  }
}

/* 4項目のナビ（TOP）：スマホでも1段で右寄せ */
.sys-nav.sys-nav--4 {
  display: flex;
  justify-content: flex-end;
}

.sys-nav.sys-nav--4 li + li::before {
  content: "";
  position: static;
  width: 1px;
  height: 16px;
  margin: 0;
  background: rgba(255, 255, 255, 0.55);
}

/* ---------- プロフィール ---------- */

.sys-profile {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 16px;
}

.sys-avatar {
  flex: none;
  width: 104px;
  height: 104px;
  padding: 3px;
  border-radius: 50%;
  background: var(--sys-accent);
  box-shadow: var(--sys-glow);
}

.sys-avatar img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 2px solid #000;
  object-fit: cover;
}

.sys-profile__body {
  flex: 1;
  min-width: 0;
  max-width: 240px;
}

.sys-profile__name {
  margin: 0 0 8px;
  font-family: var(--sys-display);
  font-size: 15px;
  letter-spacing: 0.04em;
  color: var(--sys-white);
}

.sys-profile__links {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* SNSボタン：アイコン｜ハンドル｜矢印 */
.sys-sns-btn {
  display: flex;
  align-items: stretch;
  min-height: 44px;
  border: 1px solid rgba(var(--sys-accent-rgb), 0.85);
  background: rgba(0, 0, 0, 0.55);
  color: var(--sys-white);
  touch-action: manipulation;
  transition: box-shadow 0.15s, background-color 0.15s;
}

.sys-sns-btn__icon {
  display: grid;
  place-items: center;
  width: 42px;
  border-right: 1px solid rgba(var(--sys-accent-rgb), 0.85);
}

.sys-sns-btn__icon svg {
  width: 22px;
  height: 22px;
}

.sys-sns-btn__handle {
  display: flex;
  align-items: center;
  flex: 1;
  padding: 0 10px;
  font-family: var(--sys-sans);
  font-weight: 700;
  font-size: 14px;
}

.sys-go {
  display: grid;
  place-items: center;
  flex: none;
  color: var(--sys-accent);
  border: 1px solid var(--sys-accent);
  transition: background-color 0.15s, color 0.15s, box-shadow 0.15s;
}

.sys-go svg {
  width: 60%;
  height: 60%;
}

.sys-sns-btn .sys-go {
  width: 24px;
  height: 24px;
  margin: auto 8px auto 0;
}

.sys-sns-btn:active,
.sys-sns-btn:focus-visible {
  background: rgba(var(--sys-accent-rgb), 0.08);
  box-shadow: 0 0 16px rgba(var(--sys-accent-rgb), 0.3);
  outline: none;
}

.sys-sns-btn:active .sys-go,
.sys-sns-btn:focus-visible .sys-go {
  background: var(--sys-accent);
  color: #000;
}

@media (hover: hover) {
  .sys-sns-btn:hover {
    background: rgba(var(--sys-accent-rgb), 0.08);
    box-shadow: 0 0 16px rgba(var(--sys-accent-rgb), 0.3);
  }

  .sys-sns-btn:hover .sys-go {
    background: var(--sys-accent);
    color: #000;
  }
}

/* ---------- HERO ---------- */

.sys-hero {
  position: relative;
  padding-top: 20px;
}

.sys-hero__row {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 12px;
  margin: 0 0 12px;
  font-family: var(--sys-mono);
  font-size: 14px;
  letter-spacing: 0.05em;
  color: #a3a3a3;
}

.sys-hero__row p {
  margin: 0;
}

.sys-hero__garage {
  display: inline-block;
  padding-bottom: 6px;
  border-bottom: 1px solid #777;
  white-space: nowrap;
}

.sys-hero__maint {
  margin: 0 0 18px;
  font-family: var(--sys-mono);
  font-size: 13px;
  letter-spacing: 0.12em;
  color: var(--sys-accent);
}

.sys-hero__main {
  position: relative;
}

.sys-hero-title {
  margin: 0;
  font-family: var(--sys-display);
  font-weight: 400;
  font-size: clamp(4.2rem, 21vw, 8.4rem);
  line-height: 0.92;
  letter-spacing: 0.01em;
}

.sys-hero-title span {
  display: block;
  width: max-content;
}

.sys-hero-title .is-white { color: var(--sys-white); }

.sys-hero-title .is-accent {
  color: var(--sys-accent);
  text-shadow: 0 0 18px rgba(var(--sys-accent-rgb), 0.25);
}

/* SYSTEM ONLINE パネル（「404」の右） */
.sys-hero__status {
  position: absolute;
  top: 0.1em;
  right: 0;
  width: 108px;
  padding: 2px 0 4px 12px;
  border-left: 2px solid var(--sys-accent);
  font-family: var(--sys-mono);
}

.sys-hero__online {
  position: relative;
  margin: 0 0 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid #555;
  font-size: 14px;
  line-height: 1.3;
  letter-spacing: 0.08em;
  color: var(--sys-accent);
  text-shadow: 0 0 8px rgba(var(--sys-accent-rgb), 0.45);
}

.sys-hero__dot {
  position: absolute;
  top: 5px;
  right: -2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--sys-accent);
  box-shadow: var(--sys-glow);
}

.sys-hero__motto {
  margin: 0;
  font-size: 12px;
  line-height: 1.6;
  letter-spacing: 0.02em;
  color: #d8d8d8;
}

.sys-hero__jp {
  margin: 10px 0 8px;
  font-family: var(--sys-sans);
  font-weight: 900;
  font-size: clamp(2rem, 9vw, 2.8rem);
  line-height: 1.2;
  letter-spacing: 0.08em;
  color: var(--sys-white);
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.8);
}

.sys-hero__name {
  margin: 0;
  font-family: var(--sys-mono);
  font-size: 14px;
  letter-spacing: 0.24em;
  color: #d8d8d8;
}

.sys-hero__areas {
  margin: 26px 0 0;
  padding: 0;
  list-style: none;
  font-family: var(--sys-mono);
  font-size: 13px;
  line-height: 1.5;
  letter-spacing: 0.1em;
  color: #9a9a9a;
}

/* ガレージ（背景）を見せる余白 */
.sys-hero__space {
  position: relative;
  height: clamp(220px, 46vh, 520px);
}

.sys-scroll {
  position: absolute;
  right: 0;
  bottom: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 64px;
  min-height: 64px;
  font-family: var(--sys-mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  color: var(--sys-accent);
  line-height: 1;
}

.sys-scroll svg {
  width: 12px;
  height: 22px;
}

/* ---------- メニュー 01〜05 ---------- */

.sys-menu {
  position: relative;
  margin: 0 calc(var(--rail) - var(--pad));
  border-top: 1px solid rgba(var(--sys-accent-rgb), 0.85);
  background: rgba(0, 0, 0, 0.62);
}

.sys-menu ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

.sys-menu li {
  border-bottom: 1px solid rgba(var(--sys-accent-rgb), 0.85);
}

.sys-menu .sys-cross--l { left: calc(-1 * var(--rail)); }
.sys-menu .sys-cross--r { right: calc(-1 * var(--rail)); }

.sys-menu__link {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  column-gap: 14px;
  min-height: 96px;
  padding: 14px 14px 14px 16px;
  color: var(--sys-white);
  touch-action: manipulation;
  transition: background-color 0.15s;
}

.sys-menu__no {
  display: inline-block;
  font-family: var(--sys-display);
  font-size: clamp(3rem, 15vw, 5.2rem);
  line-height: 1;
  color: var(--sys-accent);
  text-shadow: 0 0 14px rgba(var(--sys-accent-rgb), 0.25);
}

.sys-menu__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  min-width: 0;
  padding-left: 14px;
  border-left: 1px solid rgba(var(--sys-accent-rgb), 0.85);
}

.sys-menu__title {
  display: inline-block;
  font-family: var(--sys-display);
  font-size: clamp(1.15rem, 5.6vw, 2rem);
  line-height: 1.05;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.sys-menu__jp {
  font-family: var(--sys-sans);
  font-weight: 700;
  font-size: 14px;
  color: #e6e6e6;
}

.sys-menu__side {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  font-family: var(--sys-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  white-space: nowrap;
}

.sys-menu__sys {
  color: var(--sys-accent);
}

.sys-menu__sys em {
  font-style: normal;
  color: #cfcfcf;
}

.sys-menu__slash {
  align-self: flex-start;
  color: #bdbdbd;
  letter-spacing: 0.02em;
}

.sys-menu .sys-go {
  width: 44px;
  height: 44px;
}

.sys-menu__link:active,
.sys-menu__link:focus-visible {
  background: rgba(var(--sys-accent-rgb), 0.07);
  outline: none;
}

.sys-menu__link:active .sys-go,
.sys-menu__link:focus-visible .sys-go {
  background: var(--sys-accent);
  color: #000;
  box-shadow: var(--sys-glow);
}

.sys-menu__link:active .sys-menu__title,
.sys-menu__link:focus-visible .sys-menu__title {
  color: var(--sys-accent);
  animation: sys-btn-glitch 0.24s steps(1) 1;
}

@media (hover: hover) {
  .sys-menu__link:hover {
    background: rgba(var(--sys-accent-rgb), 0.07);
  }

  .sys-menu__link:hover .sys-go {
    background: var(--sys-accent);
    color: #000;
    box-shadow: var(--sys-glow);
  }

  .sys-menu__link:hover .sys-menu__title {
    color: var(--sys-accent);
    animation: sys-btn-glitch 0.24s steps(1) 1;
  }
}

@keyframes sys-btn-glitch {
  0%   { transform: translateX(-2px); text-shadow: 2px 0 rgba(255, 0, 72, 0.7), -2px 0 rgba(0, 229, 255, 0.7); }
  33%  { transform: translateX(2px); clip-path: inset(0 0 45% 0); }
  66%  { transform: translateX(-1px); clip-path: inset(40% 0 0 0); }
  100% { transform: none; clip-path: none; }
}

/* 狭い画面：数字と右列を詰める */
@media (max-width: 359px) {
  .sys-menu__link { column-gap: 10px; padding-left: 12px; padding-right: 10px; }
  .sys-menu__body { padding-left: 10px; }
  .sys-menu__slash { display: none; }
  .sys-hero__status { position: static; display: flex; gap: 14px; width: auto; margin-top: 14px; }
  .sys-hero__online { margin: 0; padding: 0 22px 0 0; border-bottom: 0; }
  .sys-nav a { padding: 0 8px; font-size: 13px; }
  .sys-profile { gap: 12px; }
  .sys-avatar { width: 80px; height: 80px; }
  .sys-profile__name { font-size: 13px; }
  .sys-sns-btn__icon { width: 36px; }
  .sys-sns-btn__handle { padding: 0 8px; font-size: 13px; }
}

/* ---------- SNS セクション（05 の行き先） ---------- */

.sys-sns {
  position: relative;
  padding-top: 56px;
}

.sys-sec-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 18px;
  padding-top: 9px;
  background: linear-gradient(var(--sys-accent) 0 0) 0 0 / 44px 1px no-repeat,
              linear-gradient(rgba(255, 255, 255, 0.18) 0 0) 0 0 / 100% 1px no-repeat;
  font-family: var(--sys-mono);
  font-size: 13px;
  letter-spacing: 0.16em;
  color: #a3a3a3;
  white-space: nowrap;
}

.sys-sec-head > span:first-child {
  color: var(--sys-accent);
}

.sys-sec-head__state {
  display: inline-flex;
  align-items: center;
}

.sys-sns__title {
  display: inline-block;
  margin: 0 0 22px;
  font-family: var(--sys-sans);
  font-weight: 700;
  font-size: 1.875rem;
  letter-spacing: 0.025em;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.8);
}

.sys-links {
  display: grid;
  gap: 14px;
}

.sys-link {
  position: relative;
  display: block;
  padding: 26px 20px 22px;
  border: 1px solid #3a3a3a;
  background: rgba(0, 0, 0, 0.66);
  touch-action: manipulation;
  transition: border-color 0.15s, box-shadow 0.15s, background-color 0.15s;
}

/* 角ブラケット */
.sys-link::before {
  content: "";
  position: absolute;
  inset: -1px;
  pointer-events: none;
  --t: 10px;
  --fc: var(--sys-accent);
  background:
    linear-gradient(var(--fc) 0 0) 0 0 / var(--t) 2px,
    linear-gradient(var(--fc) 0 0) 0 0 / 2px var(--t),
    linear-gradient(var(--fc) 0 0) 100% 0 / var(--t) 2px,
    linear-gradient(var(--fc) 0 0) 100% 0 / 2px var(--t),
    linear-gradient(var(--fc) 0 0) 0 100% / var(--t) 2px,
    linear-gradient(var(--fc) 0 0) 0 100% / 2px var(--t),
    linear-gradient(var(--fc) 0 0) 100% 100% / var(--t) 2px,
    linear-gradient(var(--fc) 0 0) 100% 100% / 2px var(--t);
  background-repeat: no-repeat;
  opacity: 0.6;
  transition: opacity 0.15s;
}

.sys-link__ch {
  position: absolute;
  top: 10px;
  right: 14px;
  font-family: var(--sys-mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  color: #7a7a7a;
}

.sys-link__name {
  display: inline-block;
  transition: color 0.15s;
}

.sys-link__arrow {
  transition: transform 0.2s;
}

.sys-link:active,
.sys-link:focus-visible {
  border-color: rgba(var(--sys-accent-rgb), 0.7);
  background-color: rgba(var(--sys-accent-rgb), 0.06);
  box-shadow: 0 0 22px rgba(var(--sys-accent-rgb), 0.18), inset 0 0 18px rgba(var(--sys-accent-rgb), 0.06);
  outline: none;
}

.sys-link:active::before,
.sys-link:focus-visible::before {
  opacity: 1;
}

.sys-link:active .sys-link__name,
.sys-link:focus-visible .sys-link__name {
  color: var(--sys-accent);
  text-shadow: 0 0 10px rgba(var(--sys-accent-rgb), 0.5);
  animation: sys-btn-glitch 0.26s steps(1) 1;
}

@media (hover: hover) {
  .sys-link:hover {
    border-color: rgba(var(--sys-accent-rgb), 0.7);
    background-color: rgba(var(--sys-accent-rgb), 0.06);
    box-shadow: 0 0 22px rgba(var(--sys-accent-rgb), 0.18), inset 0 0 18px rgba(var(--sys-accent-rgb), 0.06);
  }

  .sys-link:hover::before {
    opacity: 1;
  }

  .sys-link:hover .sys-link__name {
    color: var(--sys-accent);
    text-shadow: 0 0 10px rgba(var(--sys-accent-rgb), 0.5);
    animation: sys-btn-glitch 0.26s steps(1) 1;
  }

  .sys-link:hover .sys-link__arrow {
    transform: translate(3px, -3px);
  }
}

/* ---------- フッター ---------- */

.sys-foot {
  position: relative;
  margin-top: 56px;
  padding-top: 26px;
}

.sys-foot__grid {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: end;
  gap: 12px;
}

.sys-foot__sys {
  margin: 0;
  font-family: var(--sys-mono);
  font-size: 12px;
  line-height: 1.5;
  letter-spacing: 0.06em;
  color: var(--sys-accent);
  white-space: nowrap;
}

.sys-foot__block {
  display: inline-block;
  width: 7px;
  height: 11px;
  margin-left: 3px;
  background: var(--sys-accent);
  vertical-align: -1px;
  animation: sys-caret 1.1s steps(1) infinite;
}

.sys-bar-mark {
  display: block;
  width: 34px;
  height: 8px;
  margin-top: 8px;
  background: var(--sys-accent);
  box-shadow: 0 0 10px rgba(var(--sys-accent-rgb), 0.35);
}

.sys-foot__top {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: 64px;
  min-height: 56px;
  font-family: var(--sys-mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  color: var(--sys-accent);
  touch-action: manipulation;
}

.sys-foot__top svg {
  width: 12px;
  height: 18px;
}

.sys-foot__top:focus-visible,
.sys-scroll:focus-visible {
  outline: 1px solid var(--sys-accent);
  outline-offset: 2px;
}

.sys-foot__right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  margin: 0;
  font-family: var(--sys-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--sys-accent);
  white-space: nowrap;
}

.sys-foot__right .sys-bar-mark {
  margin: 0;
}

.sys-foot__copy {
  margin: 22px 0 0;
  font-family: var(--sys-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  color: #7a7a7a;
  text-align: center;
}

@media (max-width: 419px) {
  .sys-foot__grid { grid-template-columns: 1fr auto; }
  .sys-foot__right { grid-column: 1 / -1; justify-content: flex-start; }
}

section[id],
#top {
  scroll-margin-top: 12px;
}

/* ---------- たまに起きる不具合 ----------
   system.js が数秒おきに1か所だけ属性を付ける */

/* 文字のズレ＋RGBずれ */
[data-glitch] {
  position: relative;
}

span[data-glitch] {
  display: inline-block;
}

[data-glitch][data-glitching] {
  animation: sys-glitch 0.34s steps(1) 1;
}

[data-glitch][data-glitching]::after {
  content: "";
  position: absolute;
  left: -3%;
  right: -3%;
  top: 42%;
  height: 3px;
  background: var(--sys-accent);
  box-shadow: var(--sys-glow);
  pointer-events: none;
  animation: sys-glitch-bar 0.34s steps(1) 1 forwards;
}

/* 小さく少しだけズレる版（小さい文字用） */
[data-glitch="soft"][data-glitching] {
  animation: sys-glitch-soft 0.26s steps(1) 1;
}

[data-glitch="soft"][data-glitching]::after {
  display: none;
}

@keyframes sys-glitch {
  0%   { transform: translateX(-3px) skewX(-6deg); text-shadow: 2px 0 rgba(255, 0, 72, 0.75), -2px 0 rgba(0, 229, 255, 0.75); }
  14%  { transform: translateX(4px); clip-path: inset(8% 0 52% 0); text-shadow: -3px 0 rgba(255, 0, 72, 0.75), 3px 0 rgba(0, 229, 255, 0.75); }
  28%  { transform: translateX(-2px); clip-path: inset(48% 0 6% 0); }
  42%  { transform: none; clip-path: none; text-shadow: 0 0 10px rgba(var(--sys-accent-rgb), 0.9), 0 0 26px rgba(var(--sys-accent-rgb), 0.45); }
  58%  { transform: translateX(2px); clip-path: inset(30% 0 34% 0); text-shadow: 2px 0 rgba(255, 0, 72, 0.6), -2px 0 rgba(0, 229, 255, 0.6); }
  72%  { transform: none; clip-path: none; text-shadow: 0 0 8px rgba(var(--sys-accent-rgb), 0.6); }
  100% { transform: none; clip-path: none; text-shadow: none; }
}

@keyframes sys-glitch-soft {
  0%   { transform: translateX(3px); text-shadow: -2px 0 rgba(255, 0, 72, 0.6), 2px 0 rgba(0, 229, 255, 0.6); }
  35%  { transform: translateX(-2px); }
  70%  { transform: translateX(1px); text-shadow: none; }
  100% { transform: none; }
}

@keyframes sys-glitch-bar {
  0%   { opacity: 0.85; transform: translateY(-10px) scaleX(0.6); }
  25%  { opacity: 0.6; transform: translateY(8px) scaleX(1); }
  50%  { opacity: 0; }
  60%  { opacity: 0.7; transform: translateY(-2px) scaleX(0.4); }
  75%  { opacity: 0; }
  100% { opacity: 0; }
}

/* 照明・ラインのちらつき */
[data-flicker][data-flickering] {
  animation: sys-flick 0.5s steps(1) 1;
}

@keyframes sys-flick {
  0%   { opacity: 0.15; }
  12%  { opacity: 1; }
  24%  { opacity: 0.3; }
  34%  { opacity: 0.9; }
  46%  { opacity: 0.1; }
  60%  { opacity: 1; }
  100% { opacity: 1; }
}

/* ---------- セクション読み込み演出 ---------- */

[data-sys-load] {
  position: relative;
}

html[data-reveal] [data-sys-load]:not([data-loaded]) {
  opacity: 0;
}

html[data-reveal] [data-sys-load][data-loaded="run"] {
  animation: sys-load 0.6s linear var(--sys-delay, 0ms) backwards;
}

html[data-reveal] [data-sys-load][data-loaded="run"]::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 2px;
  background: var(--sys-accent);
  box-shadow: var(--sys-glow);
  pointer-events: none;
  opacity: 0;
  animation: sys-load-scan 0.6s linear var(--sys-delay, 0ms) 1;
}

@keyframes sys-load {
  0%   { opacity: 0; clip-path: inset(0 0 100% 0); transform: none; }
  10%  { opacity: 1; clip-path: inset(0 0 74% 0); transform: translateX(-6px); }
  20%  { opacity: 0.55; clip-path: inset(36% 0 30% 0); transform: translateX(5px); }
  30%  { opacity: 1; clip-path: inset(0 0 42% 0); transform: translateX(-2px); }
  42%  { opacity: 0.7; clip-path: inset(58% 0 0 0); transform: translateX(3px); }
  54%  { opacity: 1; clip-path: inset(0); transform: none; }
  62%  { opacity: 0.45; }
  68%  { opacity: 1; }
  100% { opacity: 1; clip-path: inset(0); transform: none; }
}

@keyframes sys-load-scan {
  0%   { opacity: 0.9; top: 0; }
  54%  { opacity: 0.7; top: 100%; }
  55%  { opacity: 0; }
  100% { opacity: 0; top: 100%; }
}

/* ---------- 動きを減らす設定 ---------- */

@media (prefers-reduced-motion: reduce) {
  html.scroll-smooth {
    scroll-behavior: auto;
  }

  .sys-crt,
  .sys-crt::after,
  .sys-crt__roll,
  .sys-cursor::after,
  .sys-foot__block,
  [data-glitch][data-glitching],
  [data-glitch][data-glitching]::after,
  [data-flicker][data-flickering],
  .sys-menu__title,
  .sys-link__name {
    animation: none !important;
  }

  .sys-crt__roll,
  [data-glitch][data-glitching]::after {
    display: none;
  }

  html[data-boot] .sys-boot {
    display: none;
  }
}