.space-body {
    margin: 0;
    background-color: #0a0a1f; /* 深い宇宙のような紺色 */
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    overflow: hidden; /* スクロールバーを非表示に */
}

.universe-container {
    width: 80vmin; /* ビューポートの短辺の80%を基準にする */
    height: 80vmin;
    position: relative;
}

.star {
    width: 10vmin; /* 星のサイズも可変に */
    height: 10vmin;
    max-width: 50px; /* 星の最大サイズ */
    max-height: 50px;
    background: radial-gradient(circle, #ffeb3b 0%, #ff9800 50%, #e65100 100%); /* 太陽らしいグラデーション */
    border-radius: 50%; /* 円形にする */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* 中央配置 */
    /* 太陽の輝きを表現する影 */
    box-shadow: 0 0 20px #ffeb3b, 
                0 0 40px #ff9800, 
                0 0 60px #ff5722, /* 太陽らしい強い光彩 */
                0 0 80px #d84315;
    z-index: 10; /* 他の要素より手前に表示 */
    border: 3px solid #ff6f00; /* 太陽らしいオレンジの境界線 */
}

.orbits-svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: visible; /* SVG要素外にはみ出す部分も表示 */
}

/* 軌道の見た目に関するスタイル */
#orbit1-visual, #orbit2-visual {
    fill: none; /* 軌道の内側は塗りつぶさない */
    stroke-linecap: round; /* 線の端を丸くする */
}
#orbit1-visual {
    stroke: rgba(180, 180, 220, 0.3); /* 軌道1の色と透明度 */
    stroke-width: 1.5; /* 軌道1の太さ */
}
#orbit2-visual {
    stroke: rgba(200, 200, 240, 0.4); /* 軌道2の色と透明度 */
    stroke-width: 2; /* 軌道2の太さ */
}

/* 惑星共通のスタイル */
.planet {
    animation-name: orbit-animation; /* 下で定義するアニメーション名を指定 */
    animation-timing-function: linear; /* 一定速度でアニメーション */
    animation-iteration-count: infinite; /* 無限に繰り返す */
    /* fill (色) と r (半径) は各惑星で個別に指定 */
}

/* 惑星1の個別スタイル */
.planet1 {
    offset-path: url(#orbit1-path-for-motion); /* 軌道1のパスを参照 */
    animation-duration: 12s; /* 12秒で一周 */
    fill: #4fc3f7; /* 地球のような青色 */
    r: 5;          /* 惑星1の半径 */
}

/* 惑星2の個別スタイル */
.planet2 {
    offset-path: url(#orbit2-path-for-motion); /* 軌道2のパスを参照 */
    animation-duration: 18s; /* 18秒で一周 */
    animation-delay: -6s;    /* アニメーション開始位置をずらす（6秒進んだ状態から開始） */
    fill: #f44336; /* 火星のような赤色 */
    r: 3.5;        /* 惑星2の半径 */
}

/* 軌道上を動くアニメーションの定義 */
@keyframes orbit-animation {
    from {
        offset-distance: 0%; /* パスの開始地点 */
    }
    to {
        offset-distance: 100%; /* パスの終了地点 */
    }
}