body {
  width: 100%;
  font-family: "Sawarabi Mincho";
  margin-right: auto;
  margin-left: auto;
}

button, input, select, textarea {
  font-family : "Sawarabi Mincho";
}

#header {
  width: 100%;
  background-color: #0EA;
  background-image: linear-gradient(#EFE, #0EA, #EFE)
}

#title {
  width: 100%;
  font-style:italic;
  font-weight:900;
  font-size:3rem;
  text-shadow: 5px 5px #BBB;
  text-align: center;
  /*float: left;*/
}
#title a{
  text-decoration: none;
}

#menu {
  width: 100%;
  /*float: right;*/
}

#link {
  list-style: none;
}

#link li{
  width: 100%;
  text-align: center;
  font-size: 2rem;
  /*float: right;*/
  font-style:italic;
}

#link a {
  text-decoration: none;
}

.clearfix:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}

#main_image {
  width:100%;
  min-height:480px !important;
  overflow:auto !important;
  -webkit-overflow-scrolling:touch !important;
  position: relative;/*親要素基準とする為*/
}

#main_frame {
  width:100%;
  min-height:480px;
  display: block;
  margin: 0px auto;
  border: none;
}

#p_contents {
  font-size: 2rem;
  font-style: italic;
  text-shadow: 2px 2px #BBB;
  background-image: linear-gradient(#EFE, #0EA, #EFE)
}

#main {
  display: flex;
  width: 100%;
  flex-wrap: wrap;
}

div.contents{
  width: 100%;
  height: 10rem;
  /*display: flex;*/
  text-align: center;
  align-items: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.button{
  width: 90%;
  height: 4rem;
  font-size: 1.5rem;
  font-weight: 900;
  font-style: italic;
  border-style: none;
  border-radius: 10px 10px 10px 10px;
  box-shadow: 6px 6px 3px #066;
  display: block;
  margin: 0px auto;
  background-image: radial-gradient(circle, white, #2FF);
}

.button:hover{
  box-shadow: 6px 6px 3px #BFF;
  background-image: radial-gradient(circle, #2FF, white);
}

#fpga {
  background-image: url('images/fpga.jpg');
  opacity: 0.8;
}

#raspi {
  background-image: url('images/raspi.jpg');
  opacity: 0.8;
}

#circuit {
  background-image: url('images/circuit.jpg');
  opacity: 0.8;
}

#program {
  background-image: url('images/program.jpg');
  opacity: 0.8;
}

#access_count {
  text-align: right;

}

@media only screen and (min-width: 1023px){
  body {
    max-width: 1024px;
    font-family: "Sawarabi Mincho";
    margin-right: auto;
    margin-left: auto;
  }

  button, input, select, textarea {
    font-family : "Sawarabi Mincho";
  }

  #header {
    width: 100%;
    background-color: #0EA;
    background-image: linear-gradient(#EFE, #0EA, #EFE)
  }

  #title {
    width: 50%;
    font-style:italic;
    font-weight:900;
    font-size:2.5rem;
    text-shadow: 3px 3px #BBB;
    float: left;
  }
  #title a{
    text-decoration: none;
  }

  #menu {
    width: 50%;
    float: right;
  }

  #link {
    list-style: none;
  }

  #link li{
    width: 25%;
    text-align: center;
    font-size: 0.8rem;
    float: right;
    font-style:italic;
  }

  #link a {
    text-decoration: none;
  }

  .clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
  }

  #main_image {
    width:100%;
    height:480px;
    position: relative;/*親要素基準とする為*/
  }

  #main_frame {
    width:640px;
    height:480px;
    display: block;
    margin: 0px auto;
    border: none;
  }

  #p_contents {
    font-size: 2rem;
    font-style: italic;
    text-shadow: 2px 2px #BBB;
    background-image: linear-gradient(#EFE, #0EA, #EFE)
  }

  #main {
    display: flex;
    width: 100%;
    flex-wrap: wrap;
  }

  div.contents{
    width: 50%;
    height: 10rem;
    display: flex;
    text-align: center;
    align-items: center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
  }

  .button{
    width: 50%;
    height: 4rem;
    font-size: 1.5rem;
    font-weight: 900;
    font-style: italic;
    border-style: none;
    border-radius: 10px 10px 10px 10px;
    box-shadow: 6px 6px 3px #066;
    display: block;
    margin: 0px auto;
    background-image: radial-gradient(circle, white, #2FF);
  }

  .button:hover{
    box-shadow: 6px 6px 3px #BFF;
    background-image: radial-gradient(circle, #2FF, white);
  }

  #fpga {
    background-image: url('images/fpga.jpg');
    opacity: 0.8;
  }

  #raspi {
    background-image: url('images/raspi.jpg');
    opacity: 0.8;
  }

  #circuit {
    background-image: url('images/circuit.jpg');
    opacity: 0.8;
  }

  #program {
    background-image: url('images/program.jpg');
    opacity: 0.8;
  }

  #access_count {
    text-align: right;

  }

}