﻿*{
margin:0;
padding:0;
}

img{
display:block;
}

ul{
list-style-type:none;
}

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

a{
color:#9cf;
text-decoration:none;
}

a:hover{
color:#39f;
}


#wrap{
width:750px;
margin:0 auto;
}

header{
background-image:url(img/header.jpg);
background-repeat:no-repeat;
background-size:contain;
color:#fff;
text-align:right;
height:0;
padding:100px 25px 100px;
}

h1{
font-size:40px;
}

nav ul{
display:flex;
justify-content:space-between;
text-align:center;
}

nav a{
background-color:#9cf;
display:block;
width:245px;
color:#fff;
text-decoration:none;
padding:10px 0;
}

nav a:hover{
background-color:#39f;
color:#fff;
}

#contents{
display:flex;
margin:10px 0 20px;
}

#info{
width:280px;
padding:10px;
}

#main{
width:430px;
padding:10px;
}

h2{
font-size:24px;
color:#39f;
}

h3{
font-size:18px;
border-bottom:dotted 2px #ccc;
padding-top:10px;
}

h4{
font-size:16px;
color:#39f;
padding-top:5px;
}

p{
padding:5px;
}

.news span{
font-weight:bold;
padding:0 10px;
}

table{
margin:5px 0;
}

th{
color:#fff;
background-color:#9cf;
font-weight:normal;
text-align:right;
padding:5px;
}

td{
padding-left:5px;
}

.yoko li{
display:inline;
}

.yoko li:not(:last-child):after{
content:"／";
padding-left:3px;
}

.tate li{
padding:3px 0;
}

.tate span{
font-size:12px;
padding-left:10px;
}

footer{
background-color:#9cf;
color:#fff;
text-align:center;
padding:10px;
}


/*****ここからタブレット*************************************/
@media (min-width:640px) and (max-width:960px){
body{
font-size:16px;
}

#wrap{
width:100%;
max-width:750px;
}

header{
padding:10% 25px 17%;
}

nav a{
width:32vw;
max-width:245px;
}

#info{
width:35%;
max-width:280px;
}

#main{
width:60%;
max-width:430px;
}

}

/*****ここからモバイル*************************************/
@media (max-width:639px){
body{
font-size:16px;
line-height:1.7;
}

#wrap{
width:100%;
}

header{
padding:7% 5px 20%;
}

h1{
font-size:30px;
}

nav a{
width:32vw;
}

#contents{
display:block;
}

#info, #main{
width:96%;
padding:2%;
margin:10px auto;
}

h3{
font-size:20px;
}

h4{
font-size:18px;
}

table{
width:80%;
margin:0 auto;
}

th{
text-align:center;
display:block;
}

td{
text-align:center;
display:block;
padding:5px;
}

ul{
padding-bottom:10px;
}

footer{
font-size:14px;
}

}
