/* Google Fontsを使用する場合、HTMLのに追加
*/
/* 全体設定 */
body {
font-family: 'Shadows Into Light', cursive, Arial, sans-serif;
background: radial-gradient(ellipse at bottom, #0b1d3a 0%, #000022 100%);
color: #ffffff;
text-align: center;
padding: 20px;
position: relative;
}
/* ヘッダー・フッター */
header, footer {
display: flex;
padding: 20px;
margin: 0 20px;
border: 2px solid rgba(255,255,255,0.5);
background-color: rgba(10,25,50,0.85);
border-radius: 10px;
align-items: center;
justify-content: space-between;
backdrop-filter: blur(4px);
}
/* セクション・コンテナ */
section, .container, .left, .center, .right {
border: 2px solid rgba(255,255,255,0.4);
background-color: rgba(0, 0, 30, 0.85);
border-radius: 10px;
padding: 10px;
backdrop-filter: blur(4px);
}
/* ヘッダー内部 */
.header-left, .header-center, .header-right {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
}
.header-left img, .header-center img {
width: 40px;
}
/* ボタン */
button {
margin: 5px;
padding: 10px 20px;
background-color: rgba(255,255,255,0.2);
color: #ffffff;
border: 1px solid rgba(255,255,255,0.5);
border-radius: 5px;
cursor: pointer;
transition: 0.3s;
}
button:hover {
background-color: rgba(255,255,255,0.4);
color: #ffff99;
}
/* テーブル */
table {
width: 100%;
border-collapse: collapse;
border: 1px solid rgba(255,255,255,0.5);
background-color: rgba(0,0,30,0.85);
color: #ffffff;
}
th, td {
padding: 10px;
border: 1px solid rgba(255,255,255,0.5);
text-align: center;
}
th {
background-color: rgba(0,0,50,0.9);
color: #ffffaa;
}
tr:nth-child(even) {
background-color: rgba(255,255,255,0.05);
}
tr:nth-child(odd) {
background-color: rgba(255,255,255,0.02);
}
/* 入力欄 */
input, select {
background-color: rgba(255,255,255,0.2);
border: 1px solid rgba(255,255,255,0.5);
border-radius: 5px;
color: #fff;
padding: 5px;
margin: 3px 0;
}
/* コンテナの配置 */
.container {
display: flex;
gap: 10px;
}
/* 左右・中央カラム */
.left, .center, .right {
flex: 1;
display: flex;
flex-direction: column;
gap: 10px;
}
/* 星用コンテナ */
#star-container {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 0;
}
.star {
position: absolute;
width: 2px;
height: 2px;
background: white;
border-radius: 50%;
opacity: 0.8;
animation: twinkle 2s infinite alternate;
}
@keyframes twinkle {
from { opacity: 0.5; }
to { opacity: 1; }
}