/*
**	シンボル表示
*/
.symbol::before {
	font-size: inherit; /* 親要素のフォントサイズを継承 */
	font-weight: bold;
	/* margin: 0.2em; /* シンボル間のスペースを0.1emに設定 */
	vertical-align: middle; /* 上下中央に揃える */
	/* padding: 0.1em; */
	display: inline-block;
	width: 1em;
}
.sun::before { content: "\2609"; color: #FFD700;} /* Sun ☉ */
.mon::before { content: "\263D"; color: #FFFFFF;} /* Moon ☽ */
.mer::before { content: "\263F"; color: #00FF7F;} /* Mer ☿ (スプリンググリーン) */
.ven::before { content: "\2640"; color: #FFB6C1;} /* Ven ♀ (ライトピンク) */
.mar::before { content: "\2642"; color: #FF6347;} /* Mar ♂ (トマト) */
.jup::before { content: "\2643"; color: #FFA07A;} /* Jup ♃ (ライトサーモン) */
.sat::before { content: "\2644"; color: #F4A460;} /* Sat ♄ (サンディブラウン) */
.ura::before { content: "\2645"; color: #7FFFD4;} /* Ura ♅ (アクアマリン) */
.nep::before { content: "\2646"; color: #00BFFF;} /* Nep ♆ (ディープスカイブルー) */
.plu::before { content: "\2647"; color: #DA70D6;} /* Plu ♇ (オーキッド) */
.asc::before { content: "ASC"; color: #FFFFFF; } /* ASC  */
.mc::before { content: "MC"; color: #FFFFFF; } /* MC  */
.ari::before { content: "\2648"; color: #FF4500;} /* Ari ♈ (オレンジレッド) */
.tau::before { content: "\2649"; color: #7FFF00;} /* Tau ♉ (チャートリューズ) */
.gem::before { content: "\264A"; color: #FFFF00;} /* Gem ♊ (イエロー) */
.can::before { content: "\264B"; color: #FFFFFF;} /* Can ♋ (ホワイト) */
.leo::before { content: "\264C"; color: #FFA500;} /* Leo ♌ (オレンジ) */
.vir::before { content: "\264D"; color: #ADFF2F;} /* Vir ♍ (グリーンイエロー) */
.lib::before { content: "\264E"; color: #1E90FF;} /* Lib ♎ (ドッジブルー) */
.sco::before { content: "\264F"; color: #FF4500;} /* Sco ♏ (オレンジレッド) */
.sag::before { content: "\2650"; color: #9370DB;} /* Sag ♐ (ミディアムパープル) */
.cap::before { content: "\2651"; color: #D2B48C;} /* Cap ♑ (タン) */
.aqu::before { content: "\2652"; color: #87CEFA;} /* Aqu ♒ (ライトスカイブルー) */
.pis::before { content: "\2653"; color: #20B2AA;} /* Pis ♓ (ライトシーブルー) */
.con::before { content: "\260C"; color: #40a440;} /* Con ☌ (ダークグリーン) */
.opp::before { content: "\260D"; color: #62cB62;} /* Opp ☍ (フォレストグリーン) */
.tri::before { content: "\25B3"; color: #FF66dd;} /* Trn △ (ラベンダーピンク) */
.sqr::before { content: "\25A1"; color: #AAAAFF;} /* Sqr □ (ラベンダーブルー) */
.sxt::before { content: "\26B9"; color: #F0c0c0;} /* Sxt ⚹ (ライトコーラル) */

.rpt::before {
	font-size: 0.3em;
	vertical-align: sub;
	display: inline-block;
	width: 0.8em;
	position: relative;
	left: -0.6em;
	top: 0.4em;
}
.radix::before { content: "R"; color: #00ee00; }
.progress::before { content: "P"; color: #eeee00;}
.transit::before { content: "T"; color: #00eeee; }

div.aspect {
	margin: 0 0.2em;
	white-space: nowrap;
}

div.aspect:has(.con)
	{ background-color: #333300; border: solid 1px #22ff22;}
div.aspect:has(.tri)
	{ background-color: #660066; border: solid 1px #ff22ff;}
div.aspect:has(.sxt)
	{ background-color: #442211; border: solid 1px #ff22ff;}
div.aspect:has(.sqr)
	{ background-color: #303088; border: solid 1px #2070ff; }
div.aspect:has(.opp)
	{ background-color: #202044; border: solid 1px #2070ff;}


/*
**	ローディング表示
*/
.loading_overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(80, 80, 80, 0.8);
	display: flex;
	flex-direction:column;
	justify-content: center;
	align-items: center;
	z-index: 10;
}

.loading-image {
	height: 50%;
	margin-bottom:
}

.loading-text {
	font-size: 22px;
}

/* ローディングスピナーのスタイル */
.spinner {
	border: 16px solid #f3f3f3;
	border-top: 16px solid #3498db;
	border-radius: 50%;
	width: 120px;
	height: 120px;
	animation: spin 2s linear infinite;
}

/* スピナーの回転アニメーション */
@keyframes spin {
	0% {
		transform: rotate(0deg);
	}

	100% {
		transform: rotate(360deg);
	}
}