@charset "UTF-8";

@import url('https://fonts.googleapis.com/css?family=Fira+Sans:300,400,500,900|Noto+Sans+JP:300,400');

body{
	width: 80%;
	max-width: 1280;
	margin: 10px auto 10px auto;
	font-family: 'Fira Sans','Noto Sans JP', sans-serif;
	font-weight: 300;
}

h1{
	padding: 0em 0px 0px 0px;
	font-weight: 500;
	font-size: 1.2em;
}

h2{
	padding: 0.5em 0px 0em 0px;
	font-weight: 500;
	font-size: 1.2em;
}

h3{
	padding: 0.5em 0px 0em 0px;
	font-weight: 300;
	font-size: 1.1em;
}

hr{
	border: 1px solid #f0f0f0;
	width: 98%;
}

p{
	font-family: 'Fira Sans', sans-serif;
	font-weight: 300;
	font-size: 0.9em;
	line-height: 1.8em;
}

.jp{
	font-family: 'Noto Sans JP', sans-serif;
	font-weight: 300;
	font-size: 0.8em;
	line-height: 1.8em;
}

b{
	font-family: 'Fira Sans','Noto Sans JP', sans-serif;
	font-weight: 500;
}

a{
	font-family: 'Fira Sans', sans-serif;
	color: green;
	text-decoration:none;
	font-weight: 500;
}

mark {
	font-weight: 500;
	color:white;
  background-color: #000000;
}

a:visited {
	color: green;
}

a:hover {
	color:white;
	background-color: black;
}

ul{
	font-family: 'Noto Sans JP', sans-serif;
	list-style-type: square
}

li{
	font-family: 'Noto Sans JP', sans-serif;
	font-size: 0.8em;
	line-height: 1.8em;
}

img{
	max-width: 1280px;
	height: auto;
}

.header{
	//background-color: orangered;
	padding: 0.5em 5% 0em 5%;
	font-family: 'Fira Sans', sans-serif;
	font-weight: 900;
	font-size: 2em;
	text-align: left;
	color: black;
}

.contents{
	align-items: stretch;
	flex-direction: column;
}

.nav{
	//background-color: gray;
	padding: 1.2em 5% 1.5em 5%;
	font-family: 'Fira Sans', sans-serif;
	font-weight: 500;
	text-align: left;
}

.main{
	padding: 0px 5% 0px 5%;
	text-align:justify
}

.footer{
	//background-color: gray;
	padding: 2em 5% 1em 5%;
	font-family: 'Fira Sans', sans-serif;
	font-weight: 400;
	font-size: 0.9em;
	text-align: left;
}

@media screen and (max-width: 769px){
	body{
	width: 95%;
}
	.header{
		font-family: 'Fira Sans', sans-serif;
		font-weight: 900;
		font-size: 2em;
		text-align: center;
	}
	.contents{
		flex-direction: column
		display: flex;
	}
	.nav{
		text-align: center;
		font-size: 1.2em;
	}
	.main{
		flex-grow: 1;
		font-size: 1.2em;
	}
	.footer{
	text-align: center;
	font-size: 1em;
	}

}