/* base style */
html {
	width: 100%;
	margin: 0;
	padding: 0;
	background-color: #ccc;
	font-family: 'Hiragino Kaku Gothic ProN',Meiryo,sans-serif;
}
body {
	width: 100%;
	max-width: 80em;
	min-width: 360px;
	background-color: #e0e0d7;
	color: #333;
	margin: 0 auto;
}

/* basic element */
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
article>p, section>p, figure>p {
	margin: 0.5em 0;
	padding: 0;
	text-indent: 1em;
	line-height: 1.8em;
}
article>ul, article>ol {
	margin: 1em 2%;
}
a {
	text-decoration: none;
	color: #003d73;
}
header, footer {
	padding: 1em;
}
h1 {
	font-size: 1.3em;
}
menu {
	list-style: none;
}
ul.comment, ol.comment {
	list-style: square;
}

article {
	padding: 1em 1%;
}
section {
	margin: 1em 0;
	padding: 1em;
}
article footer {
	text-align: right;
}
figure {
	width: 95%;
	margin: 3em auto;
}
figcaption {
	font-size: 1.5em;
	font-weight: bold;
}
figcaption a {
	
	color: #f08300;

}
ul, ol {
	margin: 0.5em;
	padding: 0.5em;
}
figure img {
	display: block;
	width: 80%;
	max-width: 512px;
	height: auto;
	margin: 1em auto;
}
dt {
	margin: 1em 0;
	font-weight: bold;
}
dd {
	margin: 0.5em ;
}

/* frame layout */
main {
	padding: 0 1%;
	float: right;
	width: calc(100% - 13em);
}
aside {
	float: left;
	width: 13em;
	padding: 1em;
	margin-top: 3em;
}
body>footer {
	clear: both;
}

/* global header layout */
body>header>* {
	display: inline-block;
}
body>header>h1 {
	font-size: 1.5em;
	margin: 0 3%;
}
body>header>h2 {
	font-size: 0.8em;
	margin: 0 1%;
}
header nav li {
	display: inline-block;
	width: 8em;
	text-align: center;
	padding: 0.5em 0;
	margin: 0;
}
header nav li:first-of-type {
	width: 5em;
}
header nav li:last-of-type {
	width: 6em;
}

/* global footer layout */
body>footer menu {
	display: inline-block;
	float: left;
	width: 30%;
	margin: 1em 10%;
}
body>footer .copyright {
	clear: both;
	text-align: center;
}
table {
	border-collapse: collapse;
	margin: 2em 2%;
}
th {
	padding: 1em 1%;
	width: 30%;
	border: 1px solid #ccc;
}
td {
	padding: 1em 2%;
	border: 1px solid #ccc;
}
/* aside layout */
aside section {
	margin: 0;
	padding: 0;
}
aside ul {
	list-style: none;
	margin: 1em 0;
	padding: 0;
}
aside li {
	margin: 0;
	padding: 0;
}
aside h1 {
	font-size: 1.1em;
}
/* view arrange */
main>article>header>h1 {
	color: #666;
}
aside {
	border-right: 1px solid #bbb;
}
body>header {
	background-color: #003d73;
}
body>header *, body>header a:visited {
	color: #fff;
}
body>header>h2 {
	font-weight: normal;
}
body>footer {
	background-color: #666;
	color: #fff;
}
body>footer a, body>footer a:visited {
	color: #fff;
}
.key-words {
	margin: 2em auto;
	list-style: none;
	padding: 1em;
	background-color: #fff799;
	border-radius: 2em;
	position: relative;
	color: #0081cc;

}
.key-words li {
	font-weight: bold;
	font-size: 1.1em;
	display: inline-block;
	position: absolute;
}
@keyframes window-scroll {
	from {

		transform: translateY(0);
	}
	25% {
		transform: translateY(0);
	
	}
	75% {
		transform: translateY(-50%);
	}
	to {
		transform: translateY(-50%);
	
	}
}
@media (max-width: 800px) {
	body>header>h1 {
		margin: 0 8%;
	}
	main {
		float: none;
		width: 100%;
	}
	aside {
		float: none;
		width: 100%;
		border: none;
		margin-top: 1em;
		padding: 1em 1%;
		border-top: 1px solid #bbb;;
	}
	aside section {
		vertical-align: top;
		display: inline-block;
		margin: 0 1%;
		padding: 0;
		width: 30%;
	}
	aside section ul {
		margin: 0.5em 5%;
	}
}
@media (max-width: 640px) {
	aside section {
		vertical-align: top;
		display: inline-block;
		margin: 0 2%;
		padding: 0;
		width: 45%;
	}
	body>footer menu {
		width: 40%;
		margin: 1em 5%;
	}
	
}