@charset "utf-8";
/* CSS Document */

body {
font-size: 16px;
font-weight: normal;
line-height: 1.4;
}
header {
display: flex;
justify-content: space-between;
padding: 10px 4%;
background: #CCC;
}
header .member {
display: flex;
}
header .member li {
margin-left: 10px;
}
header .member a {
display: block;
width: 10em;
padding: 0.5em;
text-align: center;
color: #FFF;
background: #000;
border: 1px solid #000;
border-radius: 4px;
transition: 0.2s;
}
header .member a:hover {
color: #000;
background: #FFF;
}
nav {
display: flex;
justify-content: center;
align-items: center;
padding: 2px 4%;
color: #FFF;
background: #000;
}
nav a {
display: block;
padding: 0.5em 1em;
transition: 0.2s;
}
nav a:hover {
background: #333;
}
main {
max-width: 640px;
margin: auto;
margin-top: 4%;
}
h2 {
font-size: 2.5em;
}

.list {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin-top: 4%;
}
.list li {
width: 48%;
text-align: center;
border: 1px solid #000;
}
.list a {
display: block;
padding: 20% 4%;
transition: 0.2s;
}
.list a:hover {
background: #F1F1F1;
}
.detail {
margin-top: 4%;
}
.detail dl {
display: flex;
align-items: center;
padding: 1em 0;
border-bottom: 1px dotted #000;
}
.detail dl:first-child {
border-top: 1px dotted #000;
}
.detail dt {
width: 10em;
}
.detail dd {
width: calc(100% - 10em);
}
.detail strong {
font-size: 1.5em;
}