@charset "UTF-8";

header {
   box-sizing: border-box;
   width: 100%;
   height: 200px;
   background-color: rgb(194, 252, 203);
   background-image: url(../img/top2.jpg);
   background-repeat: no-repeat;
   margin-bottom: 20px;
   /*position:relative;*/
}

header h1 {
   font-size: 35px;
   color: #fff;
   padding-top: 50px;
   text-shadow: 2px 2px 3px red, -2px 2px 3px red, 2px -2px 3px red, -2px -2px 3px red;
}

ul {
   list-style: none;
   margin: 20px 0;
}

li {
   display: inline-block;
   width: 49%;
   margin-bottom: 5px;
   border-radius: 5px;
   background-image: linear-gradient(#fbfbfb, #e1e1e1);
}
.member1 li {
   width: 16%;
   background-image: linear-gradient(#fef6f7, #fcd7d9);
}
.member2 li {
   width: 16%;
   background-image: linear-gradient(#e5ffff, #c3ffff);
}
li a {
   display: block;
   text-decoration: none;
   color: #333333;
   padding: 2px 5px;
   border: 1px solid #d4d4d4;
   line-height: 30px;
   height: auto;
}

li a:hover {
   text-decoration: underline;
}

@media screen and (max-width:600px) {
   #container {
      box-sizing: border-box;
      width: 100%;
      padding: 5px
   }

   header {
      box-sizing: border-box;
      width: 100%;
      height: 150px;
      background-image: url(../img/top2r.jpg);
      background-repeat: no-repeat;
      margin-bottom: 20px;
      position: relative;
   }

   header h1 {
      font-size: 28px;
      letter-spacing: 0;
   }

   ul {
      font-size: 18px;
   }
   .member1,.member2 {
      font-size: 16px;
   }
 
   li {
      display: block;
      width: 100%;
   }
   .member1 li ,.member2 li {
      display:inline-block;
   width: 32.5%;
}
   li a {
      line-height: 45px;

   }