body{
font-family:sans-serif;
background:#f5f5f5;
margin:0;
padding:0;
text-align:center;
}

/* 周期表スクロールエリア */
.ptable-wrap{
width:100%;
overflow-x:auto;
padding-bottom:10px;
}

/* 周期表グリッド */
.periodic{
display:grid;
grid-template-columns:repeat(18,60px);
gap:4px;
margin:30px auto;
width:max-content;
}

/* 元素ブロック */
.element{
background:white;
border:1px solid #ccc;
padding:6px;
font-size:14px;
cursor:pointer;
border-radius:6px;
transition:0.2s;
}

.element:hover{
background:#e8e8ff;
}

/* キャラ設定あり元素 */
.hasData{
background:linear-gradient(145deg,#6a3cff,#9b6cff);
color:white;
font-weight:bold;
box-shadow:0 0 8px rgba(100,80,255,0.6);
}

/* 空セル */
.empty{
visibility:hidden;
}

/* ポップアップ背景 */
.popup{
display:none;
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,0.5);
justify-content:center;
align-items:center;
z-index:1000;
}

/* カード本体 */
.popup-card{
background:white;
padding:20px;
border-radius:10px;
max-width:900px;
width:90%;
max-height:90vh;
overflow-y:auto;
}

/* 2カラム構造 */
.popup-content{
display:flex;
gap:20px;
align-items:flex-start;
}

/* 左：テキスト */
.popup-text{
flex:1;
text-align:left;
}

/* 右：画像 */
.popup-image{
flex:1;
}

.popup-image img{
width:100%;
height:auto;
border-radius:8px;
}

/* 閉じるボタン */
.close{
margin-top:10px;
padding:8px 16px;
background:#444;
color:white;
border:none;
border-radius:6px;
cursor:pointer;
}

/* スマホ対応 */
@media (max-width:700px){

body{
overflow-x:auto;
}
.periodic{
display:grid;
grid-template-columns:repeat(18,60px);
gap:4px;
margin-top:30px;
width:max-content;
}

.element{
font-size:12px;
padding:4px;
}

.popup-content{
flex-direction:column;
}

.popup-image img{
max-width:100%;
}

}


body{
font-family:sans-serif;
background:#111;
color:white;
text-align:center;
}

.periodic{
display:grid;
grid-template-columns:repeat(18,60px);
gap:4px;
justify-content:center;
margin-top:30px;
}

.element{
background:#2b2b2b;
border-radius:6px;
padding:8px;
cursor:pointer;
transition:0.2s;
}

.element:hover{
background:#444;
transform:scale(1.05);
}

.series{
background:#555;
}
body{ font-family:sans-serif; background:#111; color:white; text-align:center; } .periodic{ display:grid; grid-template-columns:repeat(18,60px); gap:4px; justify-content:center; margin-top:30px; } .element{ background:#2a2a2a; border-radius:6px; padding:10px; cursor:pointer; } .element:hover{ background:#444; }
/* キャラカード */ .modal{ display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.7); } .modal-content{ background:#222; width:400px; margin:10% auto; padding:20px; border-radius:12px; text-align:left; } .modal img{ width:100%; border-radius:10px; } .close{ float:right; cursor:pointer; font-size:20px; } 
.card{
display:flex;
gap:30px;
align-items:flex-start;
}

.card-text{
flex:1;
text-align:left;
}

.card-image{
flex:1;
text-align:center;
}

.card-image img{
max-width:100%;
max-height:70vh;
object-fit:contain;
border-radius:10px;
}
.hasData{
background:#60c4d6;
color:white;
font-weight:bold;
}