@charset "utf-8";
/* CSS Document */

:root{--bg:#fafaf9;--bg2:#f0f2f2;--fg:#15181c;--mute:#656c73;--line:#dcdedf;--acc:#1b87a6;--acc2:#4f63d9;box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#0d1012;--bg2:#14181b;--fg:#ecebe8;--mute:#8b949b;--line:#252b30;--acc:#5cc3dc}}
:root[data-theme="dark"]{--bg:#07090d;--bg2:#0d1118;--fg:#eef1f5;--mute:#8590a0;--line:#1d2530;--acc:#4fd1ff;--acc2:#6c7bff}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth;scroll-padding-top:72px}
body{background:var(--bg);color:var(--fg);font-family:Inter,"Noto Sans JP","Hiragino Sans","Yu Gothic",sans-serif;line-height:1.9;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
header{position:fixed;top:0;left:0;right:0;z-index:10;display:flex;justify-content:space-between;align-items:center;padding:calc(16px + env(safe-area-inset-top,0px)) 5vw 16px;background:color-mix(in srgb,var(--bg) 85%,transparent);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.logo{display:flex;align-items:center;gap:10px;font-weight:700;font-size:20px;letter-spacing:.02em}.logo i{font-style:normal;color:var(--acc)}
.mark{height:22px;width:auto;display:block}.mark.big{height:clamp(64px,9vw,104px);margin-bottom:36px;align-self:flex-start}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .mark{filter:invert(1)}}
:root[data-theme="dark"] .mark{filter:invert(1)}
nav{display:flex;gap:26px;font-size:12px;letter-spacing:.12em}
nav a{color:var(--mute);transition:color .2s}nav a:hover{color:var(--fg)}
section{padding:130px 5vw;max-width:1100px;margin:0 auto}
.hero{min-height:100vh;display:flex;flex-direction:column;justify-content:center}
.hero small{font-size:clamp(18px,2.6vw,28px);letter-spacing:.2em;color:var(--fg);font-weight:300}
.hero h1{font-family:Inter,sans-serif;font-size:clamp(38px,7.4vw,92px);font-weight:300;line-height:1.2;margin:26px 0 30px;letter-spacing:-.01em}
.hero h1 b{color:var(--acc);font-weight:500}
.hero p{color:var(--mute);max-width:560px}
.scroll{margin-top:64px;font-size:11px;letter-spacing:.3em;color:var(--mute);display:flex;align-items:center;gap:14px}
.scroll::after{content:"";width:60px;height:1px;background:var(--mute)}
.label{font-size:12px;letter-spacing:.3em;color:var(--acc);font-weight:500;margin-bottom:12px}
h2{font-size:clamp(24px,3.4vw,38px);font-weight:300;margin-bottom:52px;letter-spacing:.04em}
.alt{background:var(--bg2)}.alt>section{margin:0 auto}
dl{display:grid;grid-template-columns:170px 1fr;border-top:1px solid var(--line)}
dt,dd{padding:20px 0;border-bottom:1px solid var(--line);font-size:15px}
dt{color:var(--mute)}
.list{list-style:none;padding:0;border-top:1px solid var(--line)}
.list li{display:flex;gap:28px;padding:24px 0;border-bottom:1px solid var(--line);font-size:17px;align-items:baseline}
.list span{font-size:12px;color:var(--acc);letter-spacing:.15em;min-width:28px}
.list em{font-style:normal;color:var(--mute);font-size:14px;display:block;margin-top:2px}
.sub{font-size:13px;letter-spacing:.2em;color:var(--mute);margin:56px 0 18px}
.vals{list-style:none;padding:0}.vals li{padding:6px 0;font-size:15px}.vals li::before{content:"— ";color:var(--acc)}
.btn{display:inline-flex;gap:12px;align-items:center;border:1px solid var(--fg);padding:14px 30px;font-size:13px;letter-spacing:.12em;margin-top:32px;transition:.25s}
.btn:hover{background:var(--fg);color:var(--bg)}
.lead{color:var(--mute);max-width:580px}
.newsgrid{display:grid;grid-template-columns:1fr minmax(0,420px);gap:56px;align-items:start}
.xbox{min-height:120px}
.xcard{border:1px solid var(--line);border-radius:14px;padding:22px;background:var(--bg2);font-size:14px}
.xcard p{margin:14px 0;color:var(--fg)}.xcard small{color:var(--mute)}
.xh{display:flex;gap:12px;align-items:center;line-height:1.4}
.av{width:40px;height:40px;border-radius:50%;background:#000;color:#fff;display:grid;place-items:center;font-weight:700}
@media(max-width:800px){.newsgrid{grid-template-columns:1fr;gap:32px}}
.alt{background:color-mix(in srgb,var(--bg2) 72%,transparent)}
:root[data-theme="dark"] .mark.big{filter:invert(1) drop-shadow(0 0 36px rgba(79,209,255,.45))}
.hero small{letter-spacing:.32em;font-weight:300}
.label{font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;letter-spacing:.24em}
.label::before{content:"";display:inline-block;width:32px;height:1px;background:linear-gradient(90deg,var(--acc),var(--acc2));vertical-align:middle;margin-right:14px}
.list li{transition:padding .35s,border-color .35s}.list li:hover{padding-left:14px;border-bottom-color:var(--acc)}
.list span{font-family:ui-monospace,Menlo,Consolas,monospace}
.btn{border-color:rgba(21,24,28,.28);border-radius:999px;background:transparent}
.btn:hover{background:linear-gradient(90deg,var(--acc),var(--acc2));border-color:transparent;color:#fff}
header{border-bottom-color:var(--line)}
footer{border-top:1px solid var(--line);padding:36px 5vw;display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;font-size:12px;color:var(--mute);letter-spacing:.06em}
.fade{opacity:0;transform:translateY(22px);transition:opacity .9s,transform .9s}.fade.in{opacity:1;transform:none}
@media(max-width:700px){nav{gap:12px;font-size:10px;letter-spacing:.04em}.logo{font-size:16px}section{padding:90px 6vw}dl{grid-template-columns:1fr}dt{border-bottom:0;padding-bottom:0;font-size:13px}dd{padding-top:4px}}