/* UCG コーポレートサイト 共通スタイル（下層の読み物ページ用）
 * TOPのHUD（index.html）は全画面アプリで body{overflow:hidden} のため別系統。
 * ここは「スクロールして読む普通のページ」の作法に寄せる。 */
:root{
  --blue:#1F3FA8; --violet:#762E91; --magenta:#CC1F7A;
  --grad:linear-gradient(95deg,#1F3FA8 0%,#762E91 52%,#CC1F7A 100%);
  --bg:#05070F; --ink:#EAF0FF; --dim:rgba(234,240,255,.66); --faint:rgba(234,240,255,.38);
  --line:rgba(255,255,255,.13); --glass:rgba(255,255,255,.05);
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
body{
  background:var(--bg); color:var(--ink);
  font-family:'Noto Sans JP',-apple-system,'Segoe UI',sans-serif;
  line-height:1.85; letter-spacing:.01em; -webkit-font-smoothing:antialiased;
}
.mono{font-family:'Orbitron',sans-serif;letter-spacing:.14em}
a{color:#8FB2FF;text-decoration:none}
a:hover{text-decoration:underline}

/* 背景の淡い光。TOPの世界観をうっすら引き継ぐ */
body::before{
  content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(60vw 60vw at 12% -10%, rgba(31,63,168,.28), transparent 60%),
    radial-gradient(50vw 50vw at 95% 8%, rgba(204,31,122,.18), transparent 60%);
}

/* ---- ヘッダー ---- */
.sh{position:sticky;top:0;z-index:10;display:flex;align-items:center;gap:10px;
  padding:10px 16px;background:rgba(5,7,15,.82);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.sh img{width:26px;height:26px;border-radius:7px;object-fit:cover;flex:none}
.sh .nm{font-size:11.5px;font-weight:700;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sh nav{margin-left:auto;display:flex;gap:14px;flex:none}
.sh nav a{font-size:12px;font-weight:700;color:var(--dim)}
.sh nav a[aria-current="page"]{color:var(--ink)}

/* ---- 本文 ---- */
main{max-width:820px;margin:0 auto;padding:34px 20px 80px}
.eyebrow{font-size:11px;font-weight:700;letter-spacing:.18em;color:var(--faint)}
h1{font-size:29px;line-height:1.45;font-weight:700;margin:8px 0 14px;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
h2{font-size:20px;font-weight:700;margin:44px 0 14px;padding-top:22px;border-top:1px solid var(--line)}
h3{font-size:15.5px;font-weight:700;margin:24px 0 6px;color:#BFD0FF}
p{margin:0 0 15px;color:var(--dim)}
p strong,li strong{color:var(--ink);font-weight:700}
ul,ol{margin:0 0 16px 1.25em;color:var(--dim)}
li{margin-bottom:7px}
.lede{font-size:16px;color:var(--ink)}

table{width:100%;border-collapse:collapse;margin:0 0 18px;font-size:14px;display:block;overflow-x:auto}
th,td{border-bottom:1px solid var(--line);padding:11px 12px;text-align:left;vertical-align:top}
th{white-space:nowrap;color:var(--faint);font-weight:700;width:30%}
td{color:var(--dim)}

.card{background:var(--glass);border:1px solid var(--line);border-radius:13px;padding:16px 17px;margin:0 0 12px}
.card h3{margin-top:0}
.card p:last-child{margin-bottom:0}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(248px,1fr));gap:12px;margin-bottom:18px}
.grid .card{margin:0}

.shots{display:flex;gap:8px;overflow-x:auto;margin:0 0 11px;padding-bottom:3px}
.shots img{height:96px;border-radius:9px;border:1px solid var(--line);flex:none}

.note{font-size:12.5px;color:var(--faint);margin-top:10px}

.cta{display:inline-flex;align-items:center;gap:8px;background:var(--grad);color:#fff;
  padding:15px 30px;border-radius:999px;font-weight:700;font-size:15.5px;margin:8px 0 4px}
.cta:hover{opacity:.9;text-decoration:none}

/* ---- フッター ---- */
.sf{border-top:1px solid var(--line);padding:26px 20px 42px;font-size:12.5px;color:var(--faint)}
.sf .in{max-width:820px;margin:0 auto}
.sf nav{display:flex;flex-wrap:wrap;gap:16px;margin-bottom:14px}
.sf nav a{font-weight:700;color:var(--dim)}

@media(max-width:520px){
  h1{font-size:24px}
  h2{font-size:18px}
  main{padding:26px 16px 64px}
  th{width:36%;white-space:normal}
}