@charset "utf-8";

body {
font-family: sans-serif;
background-color: #cccc66;
font-size: 16px;
line-height: 1.7;
color:#252525;
}

.container {
	margin: 30px auto;
	max-width: 900px;
}

/* 
各パートにパディング、背景、テキスト色などを指定する
<div class="container">の子要素に指定する
*/

header {
	padding: 10px;
	background: #8d6449;
}


footer {
	padding: 20px 16px 10px 16px;
	background: #3f312b;
}

/* 2カラム用 */

.parent {
	display: flex;
	flex-flow: column;
}

main {
	padding: 20px;
	background: white;
}
.side {
	padding:20px;
	background: #deb068;
}


@media only screen and (min-width: 768px) {
.parent {
	flex-flow: row;
}
main {
	flex: 1 1 auto;
	order: 2;
}
.side {
flex: 0 0 200px;
order: 1;
}
}


/* そのたCSS */
h1{
	text-align: center;
}
h2{
border-bottom: solid 3px brown;
}
img{
max-width:100%;
height:auto;
}

.copyright {
	margin: 0;
	text-align: center;
	color: white;
}