body {
    /* デフォルトのマージンをリセットすることが一般的です */
    margin: 0;
    font-family: sans-serif;
    background-color: #f4f4f4;
}

.container {
    /* 左右のマージンを設定してコンテンツを中央寄せにします */
    /* 上下のマージンは0、左右のマージンはautoで自動調整されます */
    margin: 0 auto; 
    
    /* コンテンツの最大幅を設定します */
    max-width: 300px; 
    
    /* コンテンツとブラウザの端に少し内側の余白を追加します (特にスマートフォン表示時) */
    padding: 0 14px;
    
    background-color: #fff;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
}

header, footer {
    background-color: #333;
    color: #fff;
    text-align: center;
    padding: 10px 0;
}

.box {
    /* 特定の要素に対して個別に左右のマージンを設定することも可能です */
    margin-left: 14px;
    margin-right: 14px;
    padding: 16px;
    background-color: #007BFF;
    color: #fff;
}

.box_Game_Structure {
    margin-left: 14px;
    margin-right: 14px;
    padding: 16px;
    background-color: #007BFF;
    color: #fff;
}

p {
    line-height: 1.6;
    padding: 24px 0px 0px 18px;
    /* padding: 24px 0 0px 22px; */
}

p1 {
	font-size: 12px;
	vertical-align: 3px;
}

p2 {
	font-size: 12px;
	margin-left: 19px;
	vertical-align: 2px;
}

p3 {
	font-size: 12px;
	margin-right: 14px;
}

p4 {
	font-size: 12px;
}

span {
	padding: 0px 0px 0px 18px;
}

span1 {
	padding: 10px 20px 10px px;
}

.EnemyExplain {
    font-size 8px;
}

.float_Opening {
	float: left;
	padding: 0px 0px 10px 0px;
}

.float_R {
	float: right;
	padding: 0px 48px 0px 0px;
}