/*
Theme Name: ORBITA SPACE SYSTEMS(制作サンプル)
Theme URI: https://tribal-works.com/sample/
Author: TRIBAL WORKS
Description: 宇宙・衛星データ企業向けの制作サンプル。WebGLで描く星雲と地球をメインビジュアルにした、没入型のコーポレートサイト。※社名・内容はすべて架空です。
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
License: GPL-2.0-or-later
Text Domain: orbita
*/

:root {
	--bg: #02030a; --ink: #e9efff; --muted: #8e9ab8; --line: rgba(190, 210, 255, .16); --line-strong: rgba(190, 210, 255, .3);
	--accent: #ffb454; --accent2: #7fb2ff; --panel: rgba(8, 12, 28, .62); --on-accent: #1a1204;
	--f-display: "Unbounded", "Zen Kaku Gothic New", sans-serif;
	--f-body: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif;
	--f-mono: "JetBrains Mono", ui-monospace, monospace;
	--gut: clamp(18px, 4vw, 64px);
	--header-bg: rgba(2, 3, 10, .55); --menu-bg: rgba(2, 3, 10, .96); --footer-bg: rgba(2, 3, 10, .72);
	--intro-bg: #02030a;
}
body.theme-orbita { background: #02030a; }
.m-btn--lg { padding: 22px 46px; font-size: .9rem; }

/* ---------- WebGL背景(画面全体に固定) ---------- */
.o-gl { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; background: radial-gradient(120% 80% at 70% 100%, #123 0%, #02030a 60%); }
.o-gl.is-fallback { background: radial-gradient(60% 40% at 78% 96%, rgba(255, 180, 84, .55), transparent 70%), radial-gradient(120% 70% at 50% 120%, #1c3b7a 0%, #02030a 62%); }
.o-veil { position: fixed; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(180deg, rgba(2, 3, 10, .0) 0%, rgba(2, 3, 10, .0) 40%, rgba(2, 3, 10, .35) 100%); opacity: calc(var(--sp, 0) * 2.2); }
.m-main, .m-footer { position: relative; z-index: 2; }
.m-pagehead { background: rgba(2, 3, 10, .6); }
body:not(.home) .m-main { background: #02030a; }

/* ---------- ヒーロー ---------- */
.o-hero { min-height: 100vh; min-height: 100svh; display: grid; align-items: center; padding: 120px var(--gut) 140px; position: relative; }
.o-hero__inner { max-width: 1560px; margin-inline: auto; width: 100%; }
.o-hero__label { margin-bottom: clamp(18px, 3vw, 36px); }
.o-hero__title { font-family: var(--f-display); font-weight: 800; line-height: .96; letter-spacing: -.02em; display: grid; gap: .04em; text-transform: uppercase; }
.o-hero__l1 { font-size: clamp(2.2rem, 8.2vw, 8.6rem); }
.o-hero__l2 { font-size: clamp(3rem, 14vw, 15rem); color: #ffd9a0; text-shadow: 0 0 60px rgba(255, 150, 60, .35); }
.o-hero__ja { font-family: var(--f-display); font-weight: 400; letter-spacing: .5em; font-size: clamp(.9rem, 1.6vw, 1.3rem); margin-top: clamp(20px, 3vw, 40px); color: var(--accent2); }
.o-hero__lead { max-width: 640px; margin-top: 20px; color: var(--muted); font-size: clamp(.9rem, 1.2vw, 1.05rem); }
.o-hero__cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: clamp(28px, 4vw, 48px); }
.o-pc { display: none; } @media (min-width: 900px) { .o-pc { display: inline; } }
.o-hud { position: absolute; right: var(--gut); bottom: 36px; display: flex; gap: clamp(14px, 2.4vw, 36px); font-family: var(--f-mono); font-size: .68rem; letter-spacing: .12em; color: var(--muted); }
.o-hud li { display: grid; gap: 2px; }
.o-hud span { opacity: .7; font-size: .6rem; letter-spacing: .3em; }
.o-hud b { font-weight: 500; color: var(--ink); font-size: .92rem; letter-spacing: .06em; font-variant-numeric: tabular-nums; }
.o-hud i { font-style: normal; opacity: .6; font-size: .62rem; }
.o-scroll { position: absolute; left: var(--gut); bottom: 36px; display: flex; align-items: center; gap: 14px; font-family: var(--f-mono); font-size: .66rem; letter-spacing: .3em; color: var(--muted); }
.o-scroll i { display: block; width: 1px; height: 54px; background: linear-gradient(var(--accent), transparent); transform-origin: 50% 0; animation: o-drop 2.4s cubic-bezier(.65, 0, .35, 1) infinite; }
@keyframes o-drop { 0% { transform: scaleY(0); opacity: 1; } 55% { transform: scaleY(1); opacity: 1; } 100% { transform: scaleY(1) translateY(30px); opacity: 0; } }
@media (max-width: 899px) { .o-hud { position: static; margin-top: 40px; flex-wrap: wrap; } .o-hero { align-items: end; } .o-scroll { display: none; } }

/* ---------- マニフェスト ---------- */
.o-manifesto { padding-block: clamp(100px, 18vw, 260px); }
.o-manifesto__text { font-size: clamp(1.4rem, 3.4vw, 3rem); line-height: 1.7; font-weight: 700; letter-spacing: .04em; margin-top: 28px; max-width: 1280px; }
.o-manifesto__text .ws { color: #fff; }
.o-manifesto__text .ws.on { color: #fff; text-shadow: 0 0 28px rgba(127, 178, 255, .5); }

/* ---------- 見出し ---------- */
.o-h2 { font-family: var(--f-display); font-weight: 800; font-size: clamp(1.6rem, 4.4vw, 4rem); line-height: 1.25; margin-top: 18px; letter-spacing: 0; }

/* ---------- ミッション(横スクロール) ---------- */
.o-missions { padding-block: 0; }
.o-missions__head { display: flex; justify-content: space-between; align-items: end; gap: 24px; margin-bottom: clamp(24px, 4vh, 56px); }
.o-track { align-items: stretch; }
.o-card { flex: 0 0 clamp(300px, 32vw, 520px); display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 22px; background: var(--panel); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); overflow: hidden; transition: border-color .5s, transform .7s cubic-bezier(.16, 1, .3, 1); }
.o-card:hover { border-color: var(--accent); transform: translateY(-8px); }
.o-card__art { position: relative; aspect-ratio: 16 / 10; display: grid; place-items: center; background: radial-gradient(70% 90% at 50% 50%, rgba(127, 178, 255, .16), transparent 70%); border-bottom: 1px solid var(--line); }
.o-card__art svg { width: 62%; height: auto; overflow: visible; }
.o-ring { stroke: rgba(207, 228, 255, .35); stroke-width: .8; stroke-dasharray: 2 4; }
.o-core { fill: var(--accent); }
.o-sat { fill: #fff; }
.o-orb { transform-origin: 100px 100px; animation: o-spin 14s linear infinite; }
.o-orb--2 { animation-duration: 22s; animation-direction: reverse; } .o-orb--3 { animation-duration: 31s; } .o-orb--4 { animation-duration: 9s; animation-direction: reverse; }
@keyframes o-spin { to { transform: rotate(360deg); } }
.o-card__no { position: absolute; left: 20px; top: 14px; font-family: var(--f-mono); font-size: .7rem; letter-spacing: .3em; color: var(--muted); }
.o-card__body { padding: 26px 28px 30px; display: grid; gap: 10px; flex: 1; align-content: start; }
.o-card__meta { display: flex; align-items: center; gap: 14px; font-family: var(--f-mono); font-size: .74rem; color: var(--muted); letter-spacing: .14em; }
.o-badge { padding: 3px 12px; border: 1px solid var(--accent); border-radius: 999px; color: var(--accent); font-size: .66rem; }
.o-card__title { font-family: var(--f-display); font-size: clamp(1.1rem, 1.7vw, 1.5rem); font-weight: 800; line-height: 1.35; }
.o-card__code { font-family: var(--f-mono); font-size: .78rem; color: var(--accent2); letter-spacing: .14em; }
.o-card__desc { color: var(--muted); font-size: .88rem; line-height: 1.8; }
.o-card__spec { display: grid; gap: 0; margin-top: 10px; border-top: 1px solid var(--line); }
.o-card__spec div { display: grid; grid-template-columns: 6.5em 1fr; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: .8rem; }
.o-card__spec dt { font-family: var(--f-mono); letter-spacing: .14em; color: var(--muted); font-size: .68rem; padding-top: 2px; }
.o-card--end { justify-content: center; align-items: flex-start; gap: 24px; padding: 40px; border-style: dashed; background: transparent; }
.o-card--end:hover { transform: none; border-color: var(--line); }
.o-card__endtitle { font-family: var(--f-display); font-weight: 800; font-size: clamp(1.4rem, 2.4vw, 2.2rem); line-height: 1.4; }
.o-progress { margin: clamp(20px, 4vh, 48px) var(--gut) 0; height: 2px; background: var(--line); }
.o-progress i { display: block; height: 100%; background: var(--accent); transform-origin: 0 50%; transform: scaleX(0); }
[data-hscroll].is-static .o-missions__head { flex-direction: column; align-items: start; }
[data-hscroll].is-static .o-track { gap: 18px; }
[data-hscroll].is-static .o-card { flex: 1 1 auto; }
[data-hscroll].is-static .o-progress { display: none; }
[data-hscroll].is-static { padding-block: 80px; }

/* ---------- 数字 ---------- */
.o-nums { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin-top: 40px; border-top: 1px solid var(--line); }
.o-nums li { padding: 40px 24px 40px 0; border-right: 1px solid var(--line); padding-left: 24px; }
.o-nums li:first-child { padding-left: 0; } .o-nums li:last-child { border-right: 0; }
.o-nums b { font-family: var(--f-display); font-weight: 800; font-size: clamp(3rem, 7vw, 7rem); line-height: 1; letter-spacing: -.03em; background: linear-gradient(180deg, #fff, #a9c5ff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.o-nums span { font-family: var(--f-display); font-size: 1rem; margin-left: 6px; color: var(--accent); }
.o-nums p { margin-top: 14px; color: var(--muted); font-size: .86rem; }
@media (max-width: 820px) { .o-nums { grid-template-columns: 1fr 1fr; } .o-nums li { border-bottom: 1px solid var(--line); padding-left: 0 !important; } .o-nums li:nth-child(2n) { border-right: 0; } }

/* ---------- 事業 ---------- */
.o-pillars__list { margin-top: clamp(40px, 6vw, 80px); border-top: 1px solid var(--line); }
.o-pillar { display: grid; grid-template-columns: clamp(70px, 12vw, 180px) 1fr; gap: 24px; padding: clamp(28px, 4vw, 56px) 0; border-bottom: 1px solid var(--line); transition: background .5s; }
.o-pillar:hover { background: linear-gradient(90deg, rgba(127, 178, 255, .08), transparent); }
.o-pillar__no { font-family: var(--f-mono); font-size: clamp(1rem, 2vw, 1.6rem); color: var(--accent); letter-spacing: .2em; }
.o-pillar h3 { font-family: var(--f-display); font-weight: 800; font-size: clamp(1.4rem, 3.6vw, 3.2rem); line-height: 1.2; }
.o-pillar__ja { color: var(--accent2); font-size: .9rem; margin: 8px 0 16px; letter-spacing: .12em; }
.o-pillar p:last-child { color: var(--muted); max-width: 760px; }

/* ---------- お知らせ ---------- */
.o-news__head { display: flex; justify-content: space-between; align-items: end; margin-bottom: 36px; gap: 20px; }
.o-news .m-list__item a:hover { background: transparent; }

/* ---------- CTA ---------- */
.o-cta { padding-block: clamp(100px, 16vw, 240px); text-align: center; position: relative; }
.o-cta__title { font-family: var(--f-display); font-weight: 800; font-size: clamp(3rem, 12vw, 13rem); line-height: .95; letter-spacing: -.03em; margin: 30px 0; color: #fff; text-shadow: 0 0 80px rgba(127, 178, 255, .35); }
.o-cta__title .ch:nth-child(n) { }
.o-cta__lead { max-width: 560px; margin: 0 auto 40px; color: var(--muted); }
.o-cta .m-label::before { display: none; }

@media (max-width: 899px) { .o-missions__head { flex-direction: column; align-items: start; } }