html {
    font-size: 100%;
    background-color: cornflowerblue;
  }
   
  body {
      margin:0;
      padding:0;
      background-color: #f4f4f4;
      margin: auto;
      max-width:800px;
      line-height: 1.7;
  }
  html {
      font-size: 100%;
    }
  img {
      width: 100%;
      max-width: 800px;
      margin:0;
      padding:0;
  }
  h1{
      margin: 0;
      padding: 0;
  }
  h2{
      margin: 0;
      padding: 0;
  }
  h3{
      margin: 0;
      padding: 0;
      font-size: 25px;
      color: #f4f4f4;
  }
  p{
      margin:0;
      padding:0;
      font-size: 15px;
      color: black;
  }
  li{
      list-style: none;
  }
  section{
      max-width: 800px;
      margin:auto;
      padding:20px 5%;
      background-color: #f4f4f4;
  }
  .menu-open{
      transform: translate(-40%, 0);
  }
  .container{
      margin: 0;
      padding: 0;
      z-index: 0;
  }
   
  /*共通*/
  .common-title{
      text-align: center;
      font-size: 40px;
      color: #0a9b94;
      margin-top:50px;
      margin-bottom: 50px;
  }
  .common-text{
      text-align: center;
      color: #0a9b94;
      font-size: 20px;
  }
   
  /*トップイメージ*/
  .img-center{
      text-align: center;
  }
  .top-image{
      position: fixed;
      z-index: -10;
      transform: translate(-50%, 0);
      top:0;
  }
  .kumo{
      position:relative;
      z-index: -30;
      margin:0 auto;
      background-color: #f4f4f4;
      display: flex;
  }
   
  /*ヘッダー*/
  header{
      margin-top: 0;
      padding: 0;
      z-index: 10;
  }
   
  .site-header{
      position: absolute;
      width: 100%;
  }
  .fixed{
      position: fixed;
      top: 0;
  }
   
  .header-list ul{
      list-style-type: none;
      text-align: center;
      margin: 0;
      background-color: #0a9b94;
      padding :0;
  }
  .header-list li{
      display:inline-block;
      text-align: center;
      background-color: #0a9b94;
      height: 50px;
      line-height: 50px;
      margin:0;
  }
  .header-list a{
      text-decoration: none;
      font-weight: bold;
      color: #f4f4f4;
      font-size: 15px;
      padding:15px 15px;
      margin:0;
  }
  .header-list a:hover {
      background-color: #008080;
  }
  .menu-ready{
      display: none;
      font-size: 13px;
      color:#f4f4f4;
      margin: 0;
      background-color: #0a9b94;
      position: absolute;
      width: 100%;
      height: 50px;
  }
  .menu-ready p{
      float: right;
      font-size: 13px;
      padding:15px 15px
  }
  .menu-ready p:hover{
      background-color: #008080;
  }
   
  /*コンテンツ全体*/
   
   
   
  /*フッター*/
  footer{
      background-color: #313131;
      margin: 0;
      padding:15px 10px;
  }
  footer p{
      text-align: center;
      color: #f4f4f4;
  }
   
   
  /*レスポンシブ*/
   
  @media screen and (max-width:959px) {/*タブレット用*/
      h3{
          font-size: 22px;
      }
  }
   
  @media screen and (max-width:619px) {/*タブレット用*/
      h3{
          font-size: 16px;
      }
      p{
          font-size: 12px;
      }
      
      .header-list ul{
          transform: translate(250%, 0);
          width: 40%;
          margin:0 ;
          background-color: #f4f4f4;
          z-index: -5;
      }
      .header-list .menu{
          display: block;
          width: 100%;
      }
      .header-list a{
          width: 100%;
      }
      .menu-ready{
          display: block;
          width: 100%;
      }
      .introduction p{
          font-size: 15px;
      }
      .common-text{
          font-size: 15px;
      }
      .activity {
          height: 120px;
          margin-bottom: 50px;
      }
      .activity img{
          width:  120px;
          height: 120px;
      }
      .activity-text{
          left: 140px;
      }
   
  }