header{
	padding: 1em;
	display: flex;
	flex-direction: column;
	align-items: center;
	font-family: 'Marck Script', cursive;
        background-color: #f6f364
}
.sidebar, .main, footer{
	padding: 20px;
}
.sidebar{
	background-color: #ccc;
}
.main{
	background-color: #efefef;
       
}
footer{
	text-align: center;
	background-color: #222;
	color: #fff;
}

p{ height:300px;}

@media screen and (min-width : 768px) { /* デスクトップ用CSS */
	header{
		flex-direction: row;
	}
	.container{
		display: flex;
	}
	.sidebar{
		width: 200px;
	}
	.main{
		flex: 1;
		order: 2;
	}
}