@charset "UTF-8";
/*base.css */

/*Base setting_____________________________________*/
body {
	color:#666;
	font:14px/1.6 Century Gothic,'Hiragino Kaku Gothic ProN', Meiryo, sans-serif;
	overflow-x:hidden
	}

/*header footer*/
header, footer {
	width:100%;
	z-index:2;
	position:fixed;
	background: white}
footer {
	bottom:0;	
	text-align: center;
	font-size:85%;
	padding:10px 0 8px}
footer span {font-family:Century Gothic, sans-serif}
/*header menu_____________________________________*/
header {display:table;font-size:0;line-height:0}
header h1, nav {display:table-cell}
nav {text-align:right;vertical-align:bottom}
header h1 a img {height:40px;margin:10px}
header ul {font-size:13px;line-height:1;margin:0 10px 10px 0}
header ul li {margin-left:3px; display:inline-block}
header ul li::after {content:' |'}
header ul li:last-child::after {content:''}
header ul li a {color:inherit}

/*layout_____________________________________*/
/*wrap*/
#wrap {display:table; height:100%; height:100vh; width:100%}
#wrap section {display:table-cell; vertical-align:middle}
#wrap section p { width:90%; margin:auto}

/*Media-queries_____________________________________*/
@media screen and (max-width: 1000px) {
html {-webkit-text-size-adjust:100%}/*disable webkit text size adjust (for iPhone)*/
a img:hover {opacity:1}
header h1 a img {height:30px}
}
@media screen and (max-height: 640px) {
html {-webkit-text-size-adjust:100%}/*disable webkit text size adjust (for iPhone)*/
a img:hover {opacity:1}
header h1 a img {height:30px}
}
/*smaller than 640-----------------------------*/
@media screen and (max-width: 640px) {
html {-webkit-text-size-adjust:100%}/*disable webkit text size adjust (for iPhone)*/
a img:hover {opacity:1}
header h1 a img {height:30px}
footer {font-size:80%; padding:5px}
}