@charset "utf-8";

body {
	margin: 0;
	font-family: sans-serif;
	color:#252525;
	font-size:16px;
	background-image: url(../img/bg1.jpg); 
    background-repeat: repeat;
}

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

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

header {
	padding: 10px 10px 5px 10px;
	background: #000;
}

nav {
	padding: 10px 10px 0 10px;
	color: #fff;
	background: #0086f9;
}
main {
	padding: 30px;
	background: #fff;
}
footer {
	padding: 20px;
	background: #000;
}

/* わかりやすくするために適用しているCSS */

header h1{
	font-size: 35px;
	color: #fff;
	text-align: center;
}

h2{
padding: 5px 0 5px 20px;
border-left: 6px solid #333;
border-bottom: 1px solid #333;
font-size: 20px;
}

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

/* テキストを中央 */
.naka {
	text-align: center;
}

/* 画像をレスポンシブ */
img{
max-width:100%;
height:auto;
}


/* 
リストアレンジ
*/
.zoo {
margin: 0;
padding: 0;
list-style-type: none;
display: flex;
flex-wrap: wrap;
}
.zoo li a {
display: block;
padding: 10px 20px;
color: #fff;
text-decoration: none;
text-align: center;
background: #556b2f;
margin: 10px;
border-radius: 5px;
}
.zoo li a:hover {
background: #b22222;
}

/* テキストリンクの設定 */
a {
text-decoration: none;
background-color: #333333;
color: #fff;
padding: 2px 10px;
transition: all .3s;
}
a:hover {
background-color: #b22222;
}


html{
scroll-behavior: smooth;
}