body{
	background-color: #adf;
	margin:0px;
	padding:0px;
}

div{
	padding:10px;
}

div#wrapper {
	padding:0px;
	width:100%;
}
div#header,div#footer{
	width:calc(100% - 2px);
	background-color:#ffd;
	border:1px solid;
}

div#header{
	margin:0px;
	padding:10px 0;
}
div#footer{
	height:30px;
	position: fixed;
	bottom:0px;
	text-align: center;
	padding:10px 0;
}

div#header h1{
	max-width :800px;
	margin:0 auto 0px;
}

div#contents{
	min-height:100vh;
	max-width :800px;
	margin:0 auto 40px;
	background-color: #fdfdfd;
}


h1,h2,h3{
	margin: 0px;
	margin-top:10px;
}

ul{
	width:calc(100% - 80px);
}


h2,h3{
	width:calc(100% - 10px);
	background-color:#ffd;
	padding:5px;
}

h1{
	font-size:1.5em;
	cursor: pointer;
}
h2{
	font-size:1.3em;	
	border: 1px solid green;
}
h3{
	font-size:1.15em;	
	border-bottom: 1px solid green;
	border-left: 5px solid green;
}
p{
text-indent: 1em;
}

a:hover,a:active{
	background-color:#ffd;
}
table {
	width:100%;
}
td {
	text-align:right;
}

blockquote{
	border-left:4px solid #888;
	background-color: #eee;
	padding:10px;
}
cite{
	background-color:white;
}

.right{
	text-align:right;
}
.center{
	text-align:center;
}

img{
	max-width:100%;
}

span.pagebtn{
	disply:inline-block;
	margin:5px;
	padding:10px;
	width:4em;
	background-color:#edf;
	border:1px solid;
}
span.pagebtn:hover{
	background-color:#ffd;
}



/*=== menu ===*/
div#nav{
	position:fixed;
	top:0px;
	right:0px;
	margin:0px;
	padding:10px;
	background-color:#edf;
	border:1px solid;
	cursor:pointer;
}
div#nav:hover,div#nav:active{
	background-color:#ffd;
}
#menu{
	width:calc(100% - 20px);
	min-height:100vh;
	position:absolute;
	top:0px;
	left:0px;
	background-color:#555;
	color:white;
	z-index:100;
  animation: SlideIn 0.3s;
}
#menu a{
	color:#ffd;
}
#menu h2, #menu h3 {
	background-color: #aa0;
	width:calc( 100% - 40px );
}

#menu a:hover,#menu a:active{
	background-color:#aa0;
}
#menu div#nav{
	background-color:#72f;
}

@keyframes SlideIn {
  0% {
    opacity: 0.5;
    transform: translateX(100%);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

/* === 画面サイズに応じた調整 === */
@media only screen and (max-width: 620px) {
	h1 {
		font-size:1.2em;
	}
}
@media only screen and (max-width: 360px) {
	h1 {
		font-size:1.1em;
	}
	div#nav{
		font-size:0.8em;
		padding:10px 5px;
	}
}