html {
    font-size: 100%;
  }
   
  body {
      margin:0;
      padding:0;
      background-color: #f4f4f4;
      margin: auto;
      max-width:100%;
      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: #f4f4f4;
  }
  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;
  }
   
  /*コンテンツ全体*/
   
  /*SKIPの紹介*/
  .introduction {
      margin-top:50px;
  }
  .introduction h1{
      text-align: center;
      font-size: 40px;
      color: #0a9b94;
  }
  .introduction p{
      text-align: center;
      color: #0a9b94;
      font-size: 19px;
  }
  .skip-mean{
      font-size: 50px;
      color: #0a9b94;
      font-weight: lighter;
      margin-bottom: 30px;
  }
   
  /*活動*/
  .activities h1{
      text-align: center;
      font-size: 40px;
      color: #0a9b94;
      padding-bottom: 15px;
  }
  .activities a:hover .activity{
      background-color:#FEDED4 /*#E8C1A5*/;
  }
  .activities a:hover h3{
      color: #0a9b94;
  }
  .activities a:hover p{
      color: #0a9b94;
  }
  .activities a:hover img{
      border-radius: 10px 10px 10px 10px;
  }
   
  .activity{
      width:100%;
      height: 150px;
      padding: 10px 0;
      margin:20px 0;
      background-color: #ff905a /*#ff7e5a*/;
      position: relative;
      border-radius: 10px 10px 10px 10px;
      transition: 1s;
  }
  .activity img{
      width:  150px;
      height: 150px;
      border-radius: 50%;
      /*background-position: left top;*/
      display: inline-block;
      margin-left:10px;
      transition: 1s;
      object-fit: cover;
      
  }
  .activity-text{
      display: inline-block;
      vertical-align: top;
      position: absolute;
      left:170px;
      margin-right: 10px;
  }
  .activity h3{
      transition: 1s;
  }
  .activity p{
      transition: 1s;
  }
   
  /*伝統芸能*/
  #movie {
      padding: 50px 16px 50px 8px;
      margin: -50px auto -10px auto;
    }
  .fadein {
      opacity : 0;
      transform: translateY(20px);
      transition: all 1s;
    }
    #movie .grid {
      display: grid;
      gap: 26px;
      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    }
    #movie .grid img {
      vertical-align: top;
      height: 300px;
      width: 100%;
      object-fit: cover;
    }
    .grid:hover{
        color: #0a9b94;
    }
    .item{
        background-color: #ff905a;
    }
    .item:hover{
        background-color: #FEDED4;
    }
    .page{
      text-decoration: none;
    }
      .page > .item:hover p{
      color: #0a9b94;
  }
    #movie .grid .item {
      transition: all  0.3s ease;
      box-shadow: 0 0 8px 4px #ccc;
    }
    #movie .grid .item-content {
      padding: 30px;
    }
    #movie .grid .item-cat {
      font-size: 1,0rem;
      margin-bottom: 20px;
    }
    #movie .grid .item-text {
      font-size: 1.1rem;
      font-weight: bold;
      margin-bottom: 20px;
    }
    #movie .grid .item-date {
      font-size: 0.85rem;
      text-align: right;
    }
    #manuel .manuel-item{
      box-shadow: 0 0 8px 4px #ccc;
      padding-top: 15px;
      padding-bottom: 15px;
    }
   #manuel .manuel-item a{
        text-decoration: none;
    }
    #manuel .manuel-item a:hover{
      text-decoration: underline #008080;
    }
    #manuel .manuel-item .manuel-list li{
      color: #008080;
      font-size: 1.3rem;
    }
   
    /*伝統芸能の動画の作り方のページ*/
    .padding{
        padding-top: 50px;
    }
    .howto-inner{
      box-shadow: 0 0 8px 4px #ccc;
      margin-top:59px;
      margin-bottom:50px;
    }
     .howto-inner h2{
        text-align: center;
        font-size: 30px;
        color: #0a9b94;
    }
    .howto-inner p{
        font-size: 25px;
        color: #333;
    }
    .howto-inner li{
        font-size: 25px;
        list-style-type: decimal;
        color:#333;
    }
    .howto-inner a{
        text-decoration: none;
        color:#333;
    }
    .howto-inner{
        object-fit:cover;
    }
   
   
  /*フッター*/
  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;
      }
   
  }