@charset "UTF-8";
body{
       background: #FFFFDD;
    color: #000;
    font-size:mediume;
    font-size: 16px;
    font-family: "メイリオ", "Meiryo", verdana, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Osaka", "ＭＳ Ｐゴシック", "MS PGothic", Sans-Serif;
    line-height: 150%;
   
}
#container {
   max-width: 960px;
   margin: 10px auto;
   padding: 5px;
   background: #fff;
}
header {
   width: 100%;
   box-sizing: border-box;
   background-image:url(../img/top.jpg);
   background-repeat: no-repeat;
   background-size: 100%;
   padding-top: 33%;
   position: relative;
}
header h1{
   text-align: center;
   position: absolute;
   top:20%;
   left:0;right: 0;
   color: #fff;
   font-size: 35px;
   transform: translatey(-20%);
   text-shadow: 2px 2px 3px red, -2px 2px 3px red, 2px -2px 3px red, -2px -2px 3px red;
}
main{
   width: 100%;
   box-sizing: border-box;
   
}
ul {
   margin: 0;padding: 0;
   list-style-type: none;
   margin: 20px auto;
}
li{
   display: inline-block;
   width: 32.5%;
}
li a{
   border: 1px solid #000;
   border-radius: 10px;
   display: block;
   padding: 5vh 10px;
   margin-bottom: 10px;
   text-decoration: none;
   background: linear-gradient(to bottom,#b1e9ff,#d3f3ff 50%,#b1e9ff); 
}
footer {
   text-align: center;
   color: chocolate;
}
@media screen and (max-width:600px){
   li {
    display: inline-block;
    width: 49%;
}
   li a {

    padding: 3vh 10px;

}

}