:root { color-scheme: dark; --bg: #07101c; --panel: rgba(15,23,42,.88); --border: rgba(148,163,184,.18); --text: #e5eefc; --muted: #afc0d8; --accent-soft: rgba(59,130,246,.16); }
* { box-sizing: border-box; }
html, body { min-height: 100%; }
body { margin: 0; background: radial-gradient(circle at top left,rgba(59,130,246,.12),transparent 22%),radial-gradient(circle at top right,rgba(20,184,166,.08),transparent 24%),linear-gradient(180deg,#050b14 0%,#08101a 100%); color: var(--text); font-family: Inter,"Noto Sans JP",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
a { color: inherit; }
.site-shell { width: min(100% - 2.4rem,1040px); margin: 0 auto; }
.site-header { padding-top: .95rem; margin-bottom: 1rem; }
.site-header-row { display: grid; grid-template-columns: 1.9fr 3.5fr; align-items: center; gap: 1rem; }
.site-brand { color: var(--text); font-size: 1rem; font-weight: 800; letter-spacing: -.02em; text-decoration: none; }
.site-brand:hover { color: #fff; }
.site-nav { display: grid; grid-template-columns: .7fr .9fr .9fr 1.35fr 1.2fr; align-items: center; gap: .18rem; }
.site-nav a { display: inline-flex; align-items: center; justify-content: center; min-height: 1.9rem; padding: .3rem .62rem; border: 1px solid transparent; border-radius: 999px; color: var(--muted); font-size: .88rem; font-weight: 700; text-decoration: none; transition: color .18s ease,border-color .18s ease,background .18s ease; }
.site-nav a:hover { border-color: rgba(148,163,184,.18); background: var(--accent-soft); color: var(--text); }
.site-nav a.active { border-color: rgba(148,163,184,.22); background: rgba(59,130,246,.14); color: #fff; }
.language-switcher { display: grid; grid-template-columns: .9fr .9fr 1.15fr; align-items: center; gap: .2rem; }
.language-switcher .language-label { display: flex; align-items: center; justify-content: center; min-height: 1.8rem; color: rgba(175,192,216,.62); font-size: .84rem; font-weight: 800; letter-spacing: .02em; text-decoration: none; }
.language-switcher .language-label.active { color: #f8fbff; }
.language-toggle { display: flex; align-items: center; justify-content: center; min-height: 1.8rem; border-radius: 999px; text-decoration: none; }
.language-toggle-track { position: relative; display: block; width: 1.9rem; height: 1.05rem; border-radius: 999px; background: rgba(30,41,59,.95); box-shadow: inset 0 0 0 1px rgba(148,163,184,.12); }
.language-toggle-track::after { content: ""; position: absolute; top: .18rem; left: .18rem; width: .69rem; height: .69rem; border-radius: 50%; background: #f8fbff; box-shadow: 0 1px 4px rgba(2,6,23,.45); transition: transform .18s ease; }
.language-toggle.en .language-toggle-track::after { transform: translateX(.85rem); }
.language-toggle:focus-visible { outline: 2px solid rgba(125,211,252,.88); outline-offset: 3px; }
.site-header-divider { height: 1px; margin-top: .85rem; background: rgba(148,163,184,.12); }
.lp-shell { width: min(100%,1040px); margin: 0 auto; }
.lp-hero { padding: 2.5rem 2.2rem 1.9rem; border: 1px solid rgba(148,163,184,.14); border-radius: 26px; background: radial-gradient(circle at top right,rgba(20,184,166,.16),transparent 28%),radial-gradient(circle at top left,rgba(56,189,248,.18),transparent 30%),linear-gradient(145deg,rgba(9,16,30,.98) 0%,rgba(14,23,42,.95) 55%,rgba(16,40,62,.92) 100%); box-shadow: 0 16px 32px rgba(2,6,23,.18); }
.lp-title { margin: 0; color: #f8fbff; font-size: clamp(2.8rem,5.5vw,4.8rem); line-height: .96; letter-spacing: -.05em; }
.lp-copy { max-width: 56rem; margin: 1rem 0 0; color: #c6d4e7; font-size: 1.02rem; line-height: 1.9; }
.lp-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 1rem; margin-top: 1.55rem; }
.lp-card { min-height: 100%; padding: 1.25rem; border: 1px solid rgba(148,163,184,.14); border-radius: 22px; background: rgba(7,15,29,.56); }
.lp-card h2 { margin: 0 0 .55rem; color: #f8fbff; font-size: 1.02rem; }
.lp-card p,.lp-card li { margin: 0; color: #c6d4e7; font-size: .96rem; line-height: 1.8; }
.lp-card ul { margin: 0; padding-left: 1.1rem; }
.lp-plan-spotlight { display: grid; grid-template-columns: minmax(0,1.25fr) auto; align-items: center; gap: 1rem; margin-top: 1.25rem; padding: 1.05rem 1.15rem; border: 1px solid rgba(125,211,252,.18); border-radius: 22px; background: radial-gradient(circle at left center,rgba(56,189,248,.12),transparent 26%),linear-gradient(135deg,rgba(13,25,42,.92) 0%,rgba(13,45,68,.9) 58%,rgba(13,67,76,.88) 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,.04),0 14px 28px rgba(2,6,23,.16); }
.lp-plan-kicker { display: inline-flex; align-items: center; gap: .55rem; color: #9de5ff; font-size: .83rem; font-weight: 900; letter-spacing: .14em; }
.lp-plan-icon { position: relative; width: 1.1rem; height: 1.1rem; flex: 0 0 auto; border-radius: .35rem; background: linear-gradient(135deg,#38bdf8 0%,#34d399 100%); box-shadow: 0 8px 18px rgba(56,189,248,.28); }
.lp-plan-icon::after { content: ""; position: absolute; inset: .24rem; border: 1px solid rgba(255,255,255,.14); border-radius: .18rem; background: rgba(7,16,28,.78); }
.lp-plan-title { margin: .5rem 0 0; color: #f8fbff; font-size: 1.38rem; font-weight: 850; line-height: 1.25; letter-spacing: -.02em; }
.lp-plan-copy { margin: .45rem 0 0; color: #cce2f2; font-size: .97rem; line-height: 1.75; }
.lp-hero-button { display: inline-flex; align-items: center; justify-content: center; gap: .55rem; min-width: 240px; min-height: 68px; padding: 1rem 1.25rem; border: 1px solid rgba(186,230,253,.42); border-radius: 18px; background: linear-gradient(135deg,#67e8f9 0%,#38bdf8 42%,#4ade80 100%); color: #062033; font-size: 1.14rem; font-weight: 900; text-decoration: none; box-shadow: 0 18px 34px rgba(14,165,233,.18); transition: transform .18s ease,filter .18s ease,box-shadow .18s ease; }
.lp-hero-button:hover { color: #041826; transform: translateY(-1px); filter: brightness(1.03); box-shadow: 0 22px 38px rgba(14,165,233,.24); }
.lp-hero-button__arrow { font-size: 1.1rem; line-height: 1; }
.lp-actions { display: grid; grid-template-columns: 1.25fr .95fr; gap: 1rem; margin-top: 1.25rem; }
.lp-action { display: inline-flex; align-items: center; justify-content: center; min-height: 64px; border: 1px solid rgba(148,163,184,.22); border-radius: 16px; background: rgba(15,23,42,.9); color: #f8fbff; font-size: 1.05rem; font-weight: 800; text-decoration: none; box-shadow: 0 14px 30px rgba(2,6,23,.2); transition: transform .18s ease,filter .18s ease; }
.lp-action:hover { transform: translateY(-1px); filter: brightness(1.05); }
.lp-action--primary { border-color: rgba(255,255,255,.12); background: linear-gradient(135deg,#ff5f58 0%,#ff4b63 100%); color: #fff; }
.lp-note { margin-top: 1rem; color: #b9c8db; font-size: .95rem; line-height: 1.75; }
.lp-section-title { margin: 1.6rem 0 .75rem; color: #f8fbff; font-size: 1.15rem; font-weight: 800; }
.lp-update-list { display: grid; gap: .95rem; }
.lp-update-item { display: block; padding: 1rem 1.1rem; border: 1px solid rgba(148,163,184,.12); border-radius: 18px; background: rgba(8,18,35,.62); color: #c6d4e7; line-height: 1.75; text-decoration: none; transition: transform .18s ease,border-color .18s ease,background .18s ease; }
.lp-update-item:hover { transform: translateY(-1px); border-color: rgba(125,211,252,.28); background: rgba(12,27,48,.78); }
.lp-update-item strong { display: block; color: #f8fbff; }
.lp-updates-button { width: 100%; margin-top: 1rem; }
.site-footer { width: min(100%,1040px); margin: 2rem auto 0; padding-bottom: 2rem; }
.site-footer-nav { display: flex; justify-content: center; flex-wrap: wrap; gap: .15rem; }
.site-footer-nav a { padding: .3rem .62rem; border: 1px solid transparent; border-radius: 999px; color: var(--muted); font-size: .88rem; font-weight: 700; text-decoration: none; }
.site-footer-nav a:hover,.site-footer-nav a.active { color: #fff; border-color: rgba(148,163,184,.18); background: var(--accent-soft); }
.site-footer-copy { margin-top: .7rem; color: var(--muted); font-size: .95rem; text-align: center; }
@media (max-width:900px) { .site-header-row { grid-template-columns: 1fr; gap: .55rem; } .site-nav { width: min(100%,520px); } .lp-grid,.lp-plan-spotlight,.lp-actions { grid-template-columns: 1fr; } .lp-hero { padding: 1.7rem 1.1rem 1.35rem; } .lp-hero-button { width: 100%; min-width: 0; } }
@media (max-width:520px) { .site-shell { width: min(100% - 1.5rem,1040px); } .site-nav { grid-template-columns: repeat(4,auto) 1fr; gap: .08rem; } .site-nav a { padding: .28rem .32rem; font-size: .72rem; white-space: nowrap; } .language-switcher { max-width: 10rem; } .language-switcher .language-label { font-size: .76rem; } }