*{
padding:0;
margin:0;
}
img{
vertical-align:bottom;
}
ul{
list-style-type:none;
padding-bottom:15px;
}

body{
line-height:1.5;
font-size:14px;
}

header{
background-color:#3c9;
}

#header{
width:800px;
margin:0 auto;
color:#fff;
display:flex;
justify-content:space-between;
align-items:flex-end;
}

#wrap{
background-color:#fff;
width:800px;
margin:0 auto;
}

#sitename{
padding-bottom:30px;
}

article{
background-color:#fff;
width:360px;
padding:10px;
margin:10px;
float:left;
}

h1{
font-size:50px;
}

h2, #novel h1{
font-size:30px;
color:#3c9;
padding-top:10px;
border-bottom:dotted 5px #3c9;
}

h3{
font-size:18px;
padding-left:5px;
border-left:double 10px #3c9;
margin:10px 0;
}

h4{
padding:5px;
}

h4 span{
background-color:#3c9;
color:#fff;
margin-left:-5px;
padding:5px;
}

h5{
padding:5px 0 0 5px;
font-size:14px;
border-bottom:dotted 2px #3c9;
}

a{
color:#096;
text-decoration:none;
}

a:hover{
color:#3c9;
text-decoration:underline;
}

li{
padding-bottom:5px;
}

nav ul, nav li{
padding-bottom:0;
}

nav ul{
display:flex;
}

nav a{
display:block;
color:#fff;
font-size:16px;
background-color:#3c9;
width:100px;
padding:10px 0;
text-align:center;
text-decoration:none;
}

nav a:hover{
background-color:#096;
color:#fff;
text-decoration:none;
}

.date span{
margin-right:5px;
background-color:#3c9;
color:#fff;
padding:0 3px;
}

table{
margin:10px;
width:300px;
}

th{
font-weight:normal;
text-align:left;
padding:3px;
border-right:dotted 1px #3c9;
border-bottom:dotted 1px #3c9;
}

td{
padding-left:3px;
border-bottom:dotted 1px #3c9;
}

.tate span{
padding-left:5px;
}

.tate, .yoko{
padding:5px;
}

.yoko li{
display:inline;
padding-right:5px;
}

footer{
padding-top:30px;
text-align:center;
}

#novel article{
width:750px;
margin:0 auto;
font-size:16px;
line-height:1.8;
float:none;
}

.atgk{
font-size:14px;
width:680px;
padding:10px;
margin:10px 0 10px auto;
border:dotted 1px #3c9;
}

.clearfix:after{
content:".";
display:block;
clear:both;
height:0;
visibility:hidden;
}

/* タブレット用 */

@media (min-width:640px) and (max-width:960px){

#header{
width:98%;
padding:1%;
display:block;
}

#wrap{
width:98%;
padding:1%;
}

#sitename{
padding-bottom:10px;
}

article{
width:44%;
padding:10px 2%;
margin:10px 1%;
float:left;
}

nav ul{
justify-content:flex-end;
}

table{
margin:10px auto;
width:90%;
}

#novel article{
width:95%;
}

.atgk{
width:85%;
}

}


/* モバイル用 */
@media (max-width:639px){
body{
line-height:1.8;
}

#header{
width:98%;
padding-left:2%;
display:block;
}

#wrap{
width:98%;
padding:1%;
}

#sitename{
padding-bottom:10px;
}

article{
width:94%;
padding:10px 2%;
margin:10px 1%;
float:none;
}

h2, #novel h1{
padding:10px;
}

nav ul{
justify-content:flex-end;
}

table{
margin:10px auto;
width:85%;
}


#novel article{
width:95%;
}

.atgk{
width:90%;
}

}