:root { --ink:#10243b; --navy:#09213d; --blue:#1163b0; --sky:#e8f4ff; --line:#d5e1ea; --orange:#f37533; }
* { box-sizing:border-box; }
html { overflow-x:hidden; scroll-behavior:smooth; -webkit-text-size-adjust:100%; text-size-adjust:100%; }
body { margin:0; overflow-x:hidden; color:var(--ink); background:#fff; font-family:"Noto Sans JP",sans-serif; }
.site-header { height:72px; display:flex; align-items:center; justify-content:space-between; max-width:1120px; margin:auto; padding:0 28px; }
.brand { color:var(--navy); font-weight:800; text-decoration:none; font-size:22px; letter-spacing:.04em; }.brand span { font:600 15px Oswald,sans-serif; letter-spacing:.12em; margin-right:5px; color:var(--blue); }
.header-link { color:var(--navy); font-size:14px; text-decoration:none; font-weight:700; }
.hero { min-height:430px; padding:76px max(28px,calc((100vw - 1064px)/2)); display:block; background:linear-gradient(115deg,#eaf6ff 0%,#f8fcff 50%,#d9efff 100%); overflow:hidden; }.hero-copy { max-width:650px; }
.eyebrow { margin:0 0 13px; color:var(--blue); font:600 14px Oswald,sans-serif; letter-spacing:.15em; }.hero h1,.section-heading h2,.download h2 { margin:0; letter-spacing:.02em; }.hero h1 { font-size:clamp(36px,5vw,59px); line-height:1.28; font-weight:800; }.hero h1 em { color:var(--blue); font-style:normal; }.lead { max-width:520px; line-height:1.95; margin:22px 0 30px; font-size:16px; }
.button { display:inline-flex; align-items:center; justify-content:center; gap:20px; padding:15px 23px; text-decoration:none; font-weight:700; border-radius:2px; transition:transform .18s,box-shadow .18s; }.button:hover { transform:translateY(-2px); box-shadow:0 9px 20px #10243b2c; }.button span { font-size:20px; }.button-primary { color:white; background:var(--orange); }
.score-card { width:min(100%,520px); justify-self:end; color:#fff; padding:24px; background:var(--navy); border-radius:8px; box-shadow:18px 20px 0 #1f7abe1f; transform:rotate(1.5deg); }.card-top { display:flex; align-items:center; justify-content:space-between; gap:12px; padding-bottom:17px; border-bottom:1px solid #ffffff43; font:500 13px Oswald,sans-serif; letter-spacing:.1em; }.match-name { line-height:1.45; font-family:"Noto Sans JP",sans-serif; font-size:13px; font-weight:700; letter-spacing:0; }.card-top b { flex:0 0 auto; background:var(--orange); padding:4px 8px; border-radius:2px; font-family:"Noto Sans JP"; font-size:11px; }.innings,.team-row { display:grid; grid-template-columns:minmax(95px,1fr) repeat(8,20px) 30px; align-items:center; column-gap:4px; }.innings { padding:16px 0 7px; color:#bad5ec; font:500 13px Oswald,sans-serif; text-align:center; }.team-row { min-height:43px; border-top:1px solid #ffffff24; text-align:center; font-size:15px; }.team-row b { text-align:left; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }.team-row strong { font-size:21px; }.card-foot { padding-top:17px; color:#c9e5fb; font-size:12px; }.live-dot { display:inline-block; width:7px; height:7px; background:#ff8b51; border-radius:50%; }
.features,.how-to { max-width:1064px; margin:auto; padding:104px 28px; }.section-heading h2 { font-size:clamp(26px,3.5vw,38px); }.feature-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:46px; }.feature-grid article { padding:26px; min-height:220px; background:#f7fafc; border-top:3px solid var(--blue); }.feature-number { font:600 20px Oswald,sans-serif; color:#6daee3; }.feature-grid h3,.how-to h3 { margin:20px 0 10px; font-size:19px; }.feature-grid p,.how-to p { margin:0; font-size:14px; line-height:1.85; color:#4c6073; }
.how-to { border-top:1px solid var(--line); }.how-to ol { display:grid; grid-template-columns:repeat(3,1fr); gap:28px; list-style:none; padding:0; margin:46px 0 22px; }.how-to li { display:flex; gap:15px; }.how-to li > span { flex:0 0 34px; height:34px; text-align:center; padding-top:5px; color:white; background:var(--blue); border-radius:50%; font:600 18px Oswald,sans-serif; }.how-to h3 { margin:4px 0 8px; }.how-to code { color:var(--blue); }.note { font-size:12px!important; }
.download { text-align:center; padding:88px 28px; color:white; background:var(--navy); }.download .eyebrow { color:#7cc3ff; }.download h2 { font-size:34px; }.download > p:not(.eyebrow) { margin:14px 0 28px; color:#c3d5e4; }.button-download { color:var(--navy); background:#fff; border:0; cursor:pointer; font:700 16px "Noto Sans JP",sans-serif; }.download small { display:block; margin-top:16px; color:#97afc5; }.create-form { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)) auto; gap:10px; max-width:1000px; margin:32px auto 0; text-align:left; }.create-form label { min-width:0; color:#c3d5e4; font-size:12px; font-weight:700; }.create-form input { width:100%; max-width:100%; height:48px; margin-top:7px; padding:0 12px; color:var(--navy); border:0; border-radius:2px; font:16px "Noto Sans JP",sans-serif; -webkit-appearance:none; appearance:none; }.create-form button { align-self:end; min-height:48px; white-space:nowrap; }
@media (max-width:760px) { .create-form input { font-size:16px !important; } }
footer { padding:28px; color:#75899c; text-align:center; font:500 12px Oswald,sans-serif; letter-spacing:.1em; }
@media (max-width:760px) { .site-header { height:62px; padding:0 20px; }.hero { grid-template-columns:1fr; padding:58px 24px 65px; gap:42px; }.score-card { justify-self:center; transform:none; }.feature-grid,.how-to ol,.create-form { grid-template-columns:1fr; }.features,.how-to { padding:70px 24px; }.feature-grid { gap:12px; margin-top:32px; }.feature-grid article { min-height:auto; }.how-to ol { gap:22px; margin-top:32px; }.download { padding:68px 24px; }.download h2 { font-size:28px; }.create-form { max-width:440px; }.create-form button { width:100%; } }
@media (max-width:420px) { .score-card { padding:18px; }.innings,.team-row { grid-template-columns:minmax(72px,1fr) repeat(8,17px) 24px; column-gap:2px; }.team-row { font-size:13px; }.team-row strong { font-size:18px; }.innings { font-size:11px; }.match-name { font-size:11px; } }