/* reset.cssの変わり */
*{
	margin: 0; /* 全要素のmarginリセット */
	padding: 0; /* 全要素のpaddingリセット */
}
/* 全要素にbox-sizingを適用 */
*, *:before, *:after {
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
         -o-box-sizing: border-box;
        -ms-box-sizing: border-box;
            box-sizing: border-box;
}
#header{
	background: #FFD464; /* 背景色変更 */
	height: 300px; /* 高さを300px */
	padding: 30px; /* 内側の余白30px */
}
#article{
	background: #F26964; /* 背景色変更 */
	height: 300px; /* 高さを300px */
	width: 70%; /* 横幅70% */
	float: left; /* 左寄せ */
	padding: 30px; /* 内側の余白30px */
}
#side{
	background: #1253A4; /* 背景色変更 */
	height: 300px; /* 高さを300px */
	width: 30%; /* 横幅30% */
	float: right; /* 右寄せ */
	padding: 30px; /* 内側の余白30px */
}
#footer{
	background: #F27398; /* 背景色変更 */
	height: 300px; /* 高さを300px */
	clear: both; /* レイアウト崩れ防止 */
	padding: 30px; /* 内側の余白30px */
}
/* 画面幅767px以下のCSS */
@media screen and ( max-width:767px ){
	#article,#side{
		float:none; /* 左寄せ、右寄せを解除 */
		width: 100%; /* 横幅を100% */
	}
	#article{
		color:#fff; /* 文字色変更 */
	}
}