:root { --background:hsl(40 20% 97%); --foreground:hsl(30 10% 15%); --card:hsl(40 15% 99%); --secondary:hsl(40 15% 94%); --muted:hsl(30 8% 40%); --border:hsl(38 12% 88%); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--foreground); background:var(--background); font-family:system-ui,-apple-system,BlinkMacSystemFont,"Hiragino Sans","Yu Gothic","Noto Sans JP",sans-serif; line-height:1.8; }
a { color:inherit; text-decoration:none; }
img { display:block; max-width:100%; }
.site-header { position:fixed; inset:0 0 auto; z-index:10; background:color-mix(in srgb,var(--background) 82%,transparent); border-bottom:1px solid color-mix(in srgb,var(--border) 58%,transparent); backdrop-filter:blur(14px); }
.header-inner,.footer-inner,main>section { width:min(100% - 48px,1024px); margin-inline:auto; }
.header-inner { min-height:64px; display:flex; align-items:center; justify-content:space-between; }
.wordmark { font-size:1.05rem; font-weight:600; letter-spacing:-.025em; }
nav { display:flex; align-items:center; gap:30px; }
nav a { color:var(--muted); font-size:.875rem; transition:color .2s ease; }
nav a:hover { color:var(--foreground); }
.hero { min-height:88vh; display:grid; place-items:center; padding:140px 0 110px; text-align:center; }
.hero-inner { max-width:680px; }
.kicker { margin:0 0 22px; color:var(--muted); font-size:.75rem; font-weight:600; letter-spacing:.13em; text-transform:uppercase; }
h1,h2,h3,p { margin-top:0; }
h1 { margin-bottom:28px; font-size:clamp(2.25rem,6vw,4.6rem); font-weight:500; line-height:1.38; letter-spacing:-.045em; }
.hero-copy { max-width:580px; margin:0 auto; color:var(--muted); font-size:clamp(1rem,1.8vw,1.125rem); }
.text-link { display:inline-flex; gap:10px; margin-top:38px; padding-bottom:2px; border-bottom:1px solid var(--foreground); font-size:.875rem; font-weight:500; }
.section { padding:118px 0; border-top:1px solid var(--border); scroll-margin-top:63px; }
.section-intro { max-width:660px; margin-bottom:58px; }
.section-intro h2 { margin-bottom:24px; font-size:clamp(1.85rem,4vw,3.15rem); font-weight:500; line-height:1.45; letter-spacing:-.04em; }
.section-intro>p:last-child { max-width:570px; margin-bottom:0; color:var(--muted); }
.app-card { min-height:440px; display:grid; grid-template-columns:minmax(260px,.8fr) 1.2fr; overflow:hidden; background:var(--card); border:1px solid var(--border); border-radius:18px; transition:transform .2s ease,box-shadow .2s ease; }
.app-card + .app-card { margin-top:24px; }
.app-card:hover { transform:translateY(-2px); box-shadow:0 18px 45px hsl(30 10% 15%/.06); }
.app-visual { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:22px; background:var(--secondary); }
.app-visual img { width:112px; height:112px; border-radius:24px; box-shadow:0 14px 28px hsl(30 10% 15%/.1); }
.app-visual span { color:var(--muted); font-size:.75rem; letter-spacing:.08em; text-transform:uppercase; }
.app-content { padding:52px clamp(34px,6vw,70px); display:flex; flex-direction:column; justify-content:center; }
.app-status { margin-bottom:14px; color:var(--muted); font-size:.75rem; font-weight:600; letter-spacing:.1em; }
.app-content h3 { margin-bottom:10px; font-size:2rem; font-weight:600; letter-spacing:-.04em; }
.app-tagline { margin-bottom:22px; font-size:1.3rem; font-weight:500; line-height:1.6; }
.app-description { max-width:480px; margin-bottom:30px; color:var(--muted); font-size:.95rem; }
.app-site-link { align-self:flex-start; display:inline-flex; align-items:center; gap:9px; margin-bottom:22px; padding:10px 15px; background:var(--foreground); color:var(--background); border-radius:8px; font-size:.86rem; font-weight:500; transition:opacity .2s ease; }
.app-site-link:hover { opacity:.82; }
.app-links { display:flex; flex-wrap:wrap; gap:11px 20px; }
.app-links a { padding-bottom:2px; border-bottom:1px solid var(--border); font-size:.82rem; font-weight:500; transition:border-color .2s ease; }
.app-links a:hover { border-color:var(--foreground); }
.about,.support { display:grid; grid-template-columns:1fr 1fr; gap:80px; }
.about .section-intro,.support .section-intro { margin:0; }
.about-copy { align-self:end; color:var(--muted); }
.about-copy p:last-child { margin-bottom:0; }
.support-list { border-top:1px solid var(--border); }
.support-list div { display:flex; align-items:center; gap:22px; padding:22px 0; border-bottom:1px solid var(--border); }
.support-list span { color:var(--muted); font-size:.75rem; }
.support-list p { margin:0; font-size:.95rem; }
footer { background:color-mix(in srgb,var(--secondary) 45%,transparent); border-top:1px solid var(--border); }
.footer-inner { min-height:112px; display:flex; align-items:center; justify-content:space-between; }
.footer-inner p { margin:0; color:var(--muted); font-size:.8rem; }
@media(max-width:720px){ .header-inner,.footer-inner,main>section{width:min(100% - 36px,1024px)} nav{gap:18px} nav a:nth-child(2){display:none}.hero{min-height:82vh;padding:120px 0 82px}h1{line-height:1.45}.section{padding:82px 0}.section-intro{margin-bottom:40px}.app-card{grid-template-columns:1fr}.app-visual{min-height:250px}.app-content{padding:38px 28px 42px}.about,.support{grid-template-columns:1fr;gap:40px} }
@media(prefers-reduced-motion:reduce){ html{scroll-behavior:auto}*,*::before,*::after{transition-duration:.01ms!important} }