body {
    background-image:url("../img/bk_contents.gif");
}
header{
    display: flex;
    max-width: 800px;
    margin: 50px auto 0;
}
header H1 {
    background-color:#360;
    font-size: 40px;
    font-weight:400;
    padding:30px 10px;
}
header img{
    display: inline-block;
    margin-left: 10px;
}
section {
    max-width:800px;
    margin:30px auto;
}
ul{
    display: flex;
    flex-wrap: wrap;
}
li{
    display: inline-block;
    width: 35%;
    padding: 10px;
    font-size: 26px;
    margin-left: 20px;
    text-indent: -20px;
}
li::before{
    content:  ""; 
    display:  inline-block;
    height: 20px;
    width:20px;
    border-radius: 50%;
}
li.red::before{
    background-image: radial-gradient(
    at 6px 4px,
    #f99 0%,
    #f00 40%,
    #000 100%
  );
}
li.blue::before{
    background-image: radial-gradient(
    at 6px 4px,
    #99f 0%,
    #00f 40%,
    #000 100%
  );
}
li.gray::before{
    background-image: radial-gradient(
    at 6px 4px,
    #eee 0%,
    #999 40%,
    #000 100%
  );
}
li.kouji{
    width: 45%;
}
li.kouji::after{
    content:  ""; 
    display:  inline-block;
    height: 18px;
    width: 47px;
    background-image: url("../img/icon_kouji.gif");
    margin-left: 10px;
}
li.kouji a{
    cursor: default;
}
section p{
    text-align:center;
}
footer{
    text-align:center;
    margin-bottom: 50px;
}
footer h2{
    font-size: 20px;
}
footer img{
    display:block;
    margin: 1% auto;
}

#link header{
    display: block;
}
#link header h2{
    text-align: center;
    font-size: 32px;
    width: 600px;
}

#link img{
    cursor: pointer;
}
#link li{
    width: 40%;
}
#link li:nth-child(even){
    width: 55%;
}