@charset "utf-8";
body {
  margin: 0;
  background: #fdf8e8;
}

#top{
  width: 100%;
  max-height: 600px;
}
#top img{
  width: 100%;
}
#content{
  background: #fdf8e8;
  position: relative;
  padding-right: 30px;
  padding-left: 30px;
  padding-top: 0.1px;
  padding-bottom: 10%;
}

#content::before {
  top: -20px;
  background: linear-gradient(45deg, #fdf8e8 10px, transparent 0), linear-gradient(315deg, #fdf8e8 10px, transparent 0);
  background-size: 20px 20px;
  height: 20px;
    content: "";
    position: absolute;
    left: 0;
    width: 100%;
}
.box_title{
  width: 30%;
  margin: 4% auto 4% auto;
}
.box_title img{
  width: 100%;
}
#content ul{
  width: 96%;
  margin: 0 auto;
}
#content li {
 background: #d6f7ff;
 border-radius:10px;
}
#content li a{
  display: flex;
  padding: 2%;
}
#content li .day{
  width: 15%;
  color: #00acde;
  font-weight: bold;
}
#content li .text{
  width: 85%;
  color: #123064;
  text-decoration: underline;
}
footer{
  width: 100%;
  background: #00acde;
}
footer p{
  text-align: center;
  color: #ffffff;
}
@media only screen and (max-width: 600px){
  #content{
    background: #fdf8e8;
    position: relative;
    padding-right: 4px;
    padding-left: 4px;
    padding-top: 0.1px;
    padding-bottom: 10%;
  }
  #content li a{
    display: block;
    padding: 2%;
  }
  #content li .day{
    width: 100%;
    color: #00acde;
    font-weight: bold;
  }
  #content li .text{
    width: 100%;
    color: #123064;
  }
  footer{
    position: absolute;
    bottom: 0;
    width: 100%;
    background: #00acde;
  }
}