@charset "UTF-8";

@media (max-width: 800px) {
  body{
  background-color: #f9bb00;
}
      h1 {
        text-align: center;
        color: #ec631d;
      }
      h2 {
        text-align: center;
        color: #ec631d;
        font-size: 20px;
      }
      p{
        text-align: center;
        color: #ec631d;
        font-size: 15px;
      }
      img {
        width: 100%;
      }
      .container{
        display: flex;
        flex-wrap: wrap;
      }
      .img_block{
      text-align: center;
      width: 100%;
      height: 100%;
      }
      .img_block img{
        width: 20%;
        height: 20%;
        object-fit: cover;
      }
      audio{
        display: center;
      }
      .center_item { 
        padding: 20px;              /* 余白指定 */
        background-color:  #ebdfd8;    /* 背景色指定 */
        height: 150px;              /* 高さ指定 */
      }
      
      .centering {
        background-color: #ebdfd8;  /* 背景色指定 */
        width: 100%;
        color: #4699ca;
        text-align: left;
        font-size: 20px;
        height: 150px;
        margin:  0 auto;            /* 中央寄せ */
      }
      nav{
        list-style: none;
        overflow: hidden;
      }
      nav li{
        text-align: center;
        list-style: none;
        float: left;
        width: 24%;
        height: 50px;
        line-height: 50px;
        background-color: #064879;
        color: #7eccde;
        margin-right: 1%;
        margin-top: 1%;
        margin-bottom: 1%;
      }
      nav li a{
        text-align: center;
        text-decoration: none;
        width: 19%;
        color: #7eccde;
        font-weight: bold;
      
      }
      section li{
        list-style: none;
        float: left;
        width: 13%;
        margin-right: 1%;
      }
      
      article{
        background-color: #ebdfd8;
        width: 100%;
      }
      article h1{
        text-decoration: none;
      }
      header{
        background-color: black;
        text-align: center;
      }
      header img{
      
        width: 100%;
      }
      .kouza{
        text-align: left;
      }
      .kouza h1{
        text-align: left;
      }
      .kouza h2{
        text-align: left;
      }
      .kouza h3{
        text-align: left;
      }
      .kouza p{
        text-align: left;
      }
      pre{
        display: inline-block;
        width: 100%;
        max-height: 100px;
        overflow: auto;
        background-color: #ebdfd8;
      
      }
      
}