/* はじめての人へ（/start/）2026-11-04 */
.st-hero { position: relative; padding: 40px 0 10px; overflow: hidden; }
.st-hero::before { content: ''; position: absolute; inset: 0; z-index: -1; background: radial-gradient(700px 400px at 80% 30%, rgba(0, 160, 81, 0.22), transparent 70%), radial-gradient(600px 400px at 10% 10%, rgba(255, 212, 0, 0.16), transparent 70%); }
.st-hero-in { display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: center; }
.st-mark { display: inline-flex; align-items: center; gap: 14px; margin: 0 0 10px; padding: 8px 22px 8px 12px; border-radius: 999px; background: #fff; color: #0a3b1f; font-weight: 900; font-size: clamp(18px, 2vw, 22px); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35); }
.st-mark img { width: 40px; height: 48px; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.25)); }
.st-hero h1 { font-size: clamp(38px, 6vw, 72px); line-height: 1.2; margin: 6px 0 12px; }
.st-lead { font-size: clamp(19px, 2.2vw, 24px); font-weight: 700; }
.st-lead b { color: var(--gold); }
.st-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.st-chips span { font-size: 15px; font-weight: 900; padding: 6px 14px; border-radius: 999px; background: rgba(255, 255, 255, 0.08); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.2); }
.st-hero-owl { width: clamp(150px, 22vw, 260px); filter: drop-shadow(0 16px 30px rgba(0, 0, 0, 0.55)); animation: bob 4s ease-in-out infinite; }
.st-toc { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.st-toc a { padding: 10px 18px; border-radius: 999px; background: rgba(20, 30, 64, 0.8); box-shadow: inset 0 0 0 1.5px var(--line2); color: var(--tx); font-weight: 900; font-size: 16px; text-decoration: none !important; transition: transform 0.25s cubic-bezier(0.3, 1.6, 0.5, 1); }
.st-toc a:hover { transform: translateY(-3px); }
@media (max-width: 640px) { .st-hero-in { grid-template-columns: 1fr; } .st-hero-owl { position: absolute; right: 4px; top: 0; width: 96px; opacity: 0.9; } .st-mark { font-size: 17px; } }

.st-wrap { padding-bottom: 20px; }
.st-sec { margin-top: 70px; scroll-margin-top: 110px; }
.st-sec h2 { font-size: clamp(27px, 3.6vw, 42px); line-height: 1.35; }
.st-kicker { font-family: var(--ff-x); font-size: 13px; letter-spacing: 0.2em; color: var(--gold); margin-bottom: 6px; text-transform: uppercase; }
.st-h3 { font-size: clamp(22px, 2.6vw, 28px); margin: 44px 0 16px; }

/* ふくろうの吹き出し */
.st-say { display: flex; align-items: flex-end; gap: 12px; margin-bottom: 24px; }
.st-say img { width: 96px; height: 96px; flex: none; filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.5)); }
.st-say p { position: relative; margin: 0 0 18px; padding: 16px 22px; border-radius: 24px 24px 24px 6px; background: rgba(255, 255, 255, 0.95); color: #1a1f3a; font-weight: 700; font-size: clamp(17px, 1.9vw, 20px); line-height: 1.7; max-width: 36em; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3); }
.st-say p b { color: #c2410c; }
@media (max-width: 600px) { .st-say img { width: 70px; height: 70px; } .st-say p { padding: 12px 16px; } }

/* 数字とみる・きく・はなす */
.st-nums { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.st-nums div { padding: 18px; border-radius: 22px; text-align: center; background: rgba(14, 22, 50, 0.72); box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--c) 45%, transparent); }
.st-nums b { display: block; font-family: var(--ff-x); font-size: clamp(30px, 4vw, 46px); color: var(--c); line-height: 1.1; text-shadow: 0 0 24px color-mix(in srgb, var(--c) 50%, transparent); }
.st-nums span { font-size: 15px; font-weight: 700; color: var(--tx2); line-height: 1.5; display: block; margin-top: 4px; }
.st-three { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 16px; }
.st-three div { padding: 26px 22px; border-radius: 26px; background: linear-gradient(160deg, color-mix(in srgb, var(--c) 22%, #0d1430), #0d1430 75%); box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--c) 45%, transparent); }
.st-ic { font-size: 46px; line-height: 1; }
.st-three h3 { font-size: 26px; margin: 10px 0 4px; color: var(--c); }
.st-three p { margin: 0; }
@media (max-width: 760px) { .st-nums { grid-template-columns: 1fr 1fr; } .st-three { grid-template-columns: 1fr; } }

/* パブリックドメイン（いちばん目立たせる） */
.st-pd { position: relative; padding: 40px 36px; border-radius: 36px; background: linear-gradient(150deg, rgba(0, 160, 81, 0.25), rgba(13, 20, 48, 0.95) 55%), #0d1430; box-shadow: inset 0 0 0 3px rgba(93, 255, 176, 0.55), 0 24px 70px rgba(0, 0, 0, 0.45); overflow: hidden; }
.st-pd h2 { max-width: 20em; }
.st-pd-stamp { position: absolute; right: 26px; top: 24px; width: 150px; height: 150px; border-radius: 50%; display: grid; place-content: center; text-align: center; border: 5px solid #5dffb0; color: #5dffb0; transform: rotate(12deg); box-shadow: inset 0 0 0 4px rgba(13, 20, 48, 1), inset 0 0 0 7px rgba(93, 255, 176, 0.6); opacity: 0.92; }
.st-pd-stamp span { font-family: var(--ff-x); font-weight: 800; font-size: 18px; line-height: 1.2; letter-spacing: 0.06em; }
.st-pd-stamp small { font-size: 14px; font-weight: 900; margin-top: 4px; }
.st-pd-lead { font-size: clamp(18px, 1.9vw, 21px); max-width: 38em; }
.st-pd-lead b { color: #7dffb9; }
.st-pd-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 24px 0; }
.st-pd-grid div { padding: 18px; border-radius: 22px; background: rgba(93, 255, 176, 0.1); box-shadow: inset 0 0 0 1.5px rgba(93, 255, 176, 0.4); }
.st-pd-grid span { font-size: 30px; }
.st-pd-grid h3 { font-size: 19px; margin: 6px 0 2px; color: #7dffb9; }
.st-pd-grid p { margin: 0; font-size: 15.5px; color: var(--tx2); }
.st-pd-care { padding: 22px 26px; border-radius: 24px; background: rgba(255, 210, 122, 0.08); box-shadow: inset 0 0 0 1.5px rgba(255, 210, 122, 0.4); }
.st-pd-care h3 { font-size: 21px; color: var(--gold); }
.st-pd-care ul { margin: 0 0 14px; padding-left: 1.3em; }
.st-pd-care li { margin-bottom: 8px; }
.st-pd-care p { margin: 0; }
@media (max-width: 860px) { .st-pd-grid { grid-template-columns: 1fr 1fr; } .st-pd-stamp { width: 110px; height: 110px; right: 12px; top: 12px; } .st-pd-stamp span { font-size: 13px; } .st-pd-stamp small { font-size: 11px; } .st-pd h2 { padding-right: 100px; } }
@media (max-width: 600px) { .st-pd { padding: 26px 18px; } .st-pd h2 { padding-right: 0; padding-top: 90px; } }

/* 楽しみ方 */
.st-steps { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; }
.st-steps li { display: grid; grid-template-columns: auto auto 1fr auto; gap: 18px; align-items: center; padding: 18px 22px; border-radius: 26px; background: rgba(14, 22, 50, 0.75); box-shadow: inset 6px 0 0 var(--c), inset 0 0 0 1.5px color-mix(in srgb, var(--c) 35%, transparent); }
.st-no { display: flex; flex-direction: column; align-items: center; font-family: var(--ff-x); font-size: 11px; letter-spacing: 0.1em; color: var(--c); line-height: 1; }
.st-no b { font-size: 38px; line-height: 1.1; }
.st-steps img { width: 64px; height: 64px; }
.st-steps h3 { font-size: 22px; margin: 0 0 2px; }
.st-steps p { margin: 0; color: var(--tx2); }
@media (max-width: 760px) { .st-steps li { grid-template-columns: auto 1fr; gap: 10px 14px; padding: 16px; } .st-steps img { display: none; } .st-steps .btn { grid-column: 1 / -1; justify-self: start; } }
.st-tips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.st-tips div { display: flex; gap: 14px; align-items: center; padding: 16px 20px; border-radius: 22px; background: rgba(14, 22, 50, 0.7); box-shadow: inset 0 0 0 1.5px var(--line2); }
.st-tips span { font-size: 34px; flex: none; }
.st-tips p { margin: 0; }
.st-tips b { color: var(--gold); }
.st-who { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.st-who div { padding: 22px; border-radius: 24px; background: rgba(14, 22, 50, 0.7); box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--c) 45%, transparent); }
.st-who h4 { font-size: 21px; color: var(--c); margin: 0 0 6px; }
.st-who p { margin: 0; color: var(--tx2); }
@media (max-width: 760px) { .st-tips, .st-who { grid-template-columns: 1fr; } }

/* ケネディ宇宙センターの話 */
.st-story-in { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 36px; align-items: start; padding: 32px; border-radius: 34px; background: linear-gradient(160deg, rgba(180, 155, 255, 0.18), rgba(13, 20, 48, 0.9) 60%); box-shadow: inset 0 0 0 2px rgba(180, 155, 255, 0.4); }
.st-story-ph { aspect-ratio: 3/4; position: sticky; top: 110px; }
.st-story-txt p { font-size: 18.5px; line-height: 2; }
.st-story-txt p b { color: var(--gold); }
.st-q { font-size: clamp(22px, 2.6vw, 30px) !important; font-weight: 900; line-height: 1.5 !important; color: #fff; padding: 14px 0 14px 20px; border-left: 6px solid var(--gold); margin: 22px 0 !important; }
.st-sign, .st-story-txt .st-sign { text-align: right; font-weight: 900; color: var(--gold); }
@media (max-width: 860px) { .st-story-in { grid-template-columns: 1fr; padding: 20px 16px; } .st-story-ph { position: relative; top: 0; aspect-ratio: 16/10; } }

/* 作った人 */
.st-maker { padding: 30px; border-radius: 30px; background: rgba(14, 22, 50, 0.78); box-shadow: inset 0 0 0 2px var(--line2); max-width: 820px; }
.st-role { font-size: 15px; color: var(--gold); font-weight: 900; margin: 0; }
.st-name { font-size: clamp(32px, 4vw, 44px); font-weight: 900; margin: 0 0 12px; line-height: 1.3; }
.st-name small { font-size: 0.42em; color: var(--tx2); margin-left: 12px; }
.st-road { list-style: none; padding: 0; margin: 18px 0; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.st-road li { padding: 6px 14px; border-radius: 999px; background: rgba(255, 255, 255, 0.07); font-weight: 700; font-size: 15.5px; }
.st-road li:not(:last-child)::after { content: '→'; margin-left: 10px; color: var(--mut); }
.st-road li.now { background: linear-gradient(180deg, #ffe39d, var(--gold2)); color: #2a1600; font-weight: 900; }
.st-badges { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.st-badges span { padding: 6px 14px; border-radius: 12px; background: rgba(99, 230, 255, 0.12); box-shadow: inset 0 0 0 1.5px rgba(99, 230, 255, 0.4); color: var(--cyan); font-weight: 900; }
.st-badges em { font-style: normal; font-size: 15px; color: var(--gold); font-weight: 900; }
.st-btns { display: flex; flex-wrap: wrap; gap: 10px; margin: 22px 0 0; }
.st-xbtn { background: #000; color: #fff; box-shadow: inset 0 0 0 1px #555; }

/* しめ */
.st-go { text-align: center; padding: 40px 20px; border-radius: 36px; background: radial-gradient(600px 300px at 50% 0%, rgba(255, 210, 122, 0.2), transparent 70%), rgba(14, 22, 50, 0.6); }
.st-go img { width: 140px; height: 140px; animation: bob 4s ease-in-out infinite; }
.st-go-btns { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 10px; }