body{
  margin: 0;
background-color: rgb(46, 146, 146); 
font-size: 12px;
overflow-x: hidden;
width: 100%;
  font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}


/* ヘッダー */
header{ 
z-index: 10;
position: absolute;
width: 100%;

.menubutton{
  display: none;
}

.menuul{
    margin: 2em 20%;
    padding-right: 10px;
height: 5vh;
z-index: 10; 
display: flex; 
justify-content: space-between;

a{ 
text-decoration: none;
}
}

.menuli{ 

display: flex;
flex-wrap: wrap;
list-style: none;
color: white;
}

.menubutton img{
position: absolute;
width: 50px;
margin: 2em;
}

.menuli li{ 
font-size: 2em;
padding: 2em;
list-style: none;
}
@media (width<640px) {
.menuul{display: none;} 
.menubutton{display: block;}
}
}

/* ボタン */
.menubutton{
background:none;
border:none;
padding:0;
cursor:pointer;
position:fixed;
top:20px;
left:20px;
z-index:100;
}

.menubutton img{
width:50px;
display:block;
}

/* メニュー */
.menunakami{
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100vh;
background: rgb(0, 0, 0 0,0.5);
backdrop-filter: blur(30px);
transform: translateX(-100%);
transition: transform 0.3s;
}

.menunakami.open{
transform: translateX(0);
}

.menunakami ul{
list-style:none;
padding:80px 20px;
}

.menunakami li{
margin:20px 0;
}

.menunakami a{
color:white;
text-decoration:none;
font-size:20px;
}


.articletop{
  position: relative;
  width:100%; 
  height:50vh;
      display: flex;
     align-items: center;
     justify-content: center;
     background-image: url(image/secback.png);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

  .title{
      position: relative;
      color: rgb(255, 255, 255);
      font-size: 2em;
      flex-wrap: wrap;
  }
  }

 .setumei{
      width: 100%;
      margin: 1em;
      flex-wrap: wrap;
      position: relative;
      color: rgb(255, 255, 255);
      background-color: rgb(0, 0, 0, 0.7);
      margin: auto;
      margin-top: 0;
  } 
  
  .one{
      position: relative;
      width: calc(100% - 40%);
      margin: 0 auto;
      background-color: rgb(128, 128, 128,0.2);
      backdrop-filter: blur(7px);
  } 
      .flex{
          display: block;
          margin-bottom: 3vh;
          overflow: hidden;
      }

      h4{
          background-color: black;
          color: white;
          font-size: 2em;
          padding: 1em 2em;
      }

      .vi{ 
          width: calc(100% - 10%); /*画像サイズ指定*/
          margin: 0 auto;
          padding: 0;
          position: relative;
          display: grid;
          grid-template-columns: repeat(2,1fr);
          gap: 10px;
          iframe{width: 100%;
          aspect-ratio: 16/9;
      }
      }

      span{
          font-size: 2em;
          font-weight: bolder;
          background-color: black;
          padding: 0.2em 0.5em;
      }

      p{
          color: rgb(255, 255, 255);
          line-height: 2.5em;
          letter-spacing: 1px;
          margin: 20px 10px;
          font-size: 1.25em;

          a{
              color: rgb(255, 255, 255);
              font-size: 1.25em;
              margin: 1em;
          }
      }
      
      .text{
          margin: 20px 20px;
          padding: 0;
          font-size: 1em;
      }

      .flex.text{
          margin: 20px 20px;
          padding: 0;
      color: rgb(255, 255, 255);}

      .image{ 
          float: left;
          width: 45%;
          height: auto;
          margin: 0 1.5em 1em 0;
          padding: 0;
          overflow: hidden;
          position: relative;
      }

      .image.gif{width: 10vw;}

      footer{
        position: relative;
        background-color: rgb(151, 96, 194);
        width: 100%;
        padding: 5% 10%;
        box-sizing: border-box;
    
        p{
            position: relative;
        }
    }

      @media (width <= 640px){

          /* 全体余白 */
          .one{
            width: 95%;
          }
        
          /* 横並び→縦並び */
          .flex{
            display: flex;
            flex-direction: column;
          }
        
          /* 画像：floatを解除して独立したブロックに */
          .image{
            float: none;
            width: 100%;
            margin: 0 0 10px 0;
          }
        
          /* 画像自体 */
          .image img{
            width: 100%;
            height: auto;
          }

          .image.gif{
            width: 40%;
            margin: 0 auto 10px auto;
          }
        
          /* 動画グリッド */
          .vi{
            grid-template-columns: 1fr;
          }
        
          /* 見出し */
          h4{
            font-size: 1.4em;
          }
        
          /* 文字 */
          p{
            line-height: 2em;
          margin: 20px 0px;
          
          }

          /* 文章：画像とは別ブロックとして画面いっぱいに */
          .text{
            margin: 20px 20px;
            max-width: 100%;
            width: 100%;
            padding: 0;
            font-size: 1em;
            clear: both;
        }

        .flex.text{
            margin: 20px 20px;
            padding: 0;
        color: rgb(255, 255, 255);}
        
          .articletop{
            position: relative;
            width:100%; 
            height:50vh;
                display: flex;
               align-items: center;
               justify-content: center;
               
               background-image: url(image/secback2.png);
              background-size: 100% auto;
              background-position: center;
              background-repeat: no-repeat;}
        }

        iframe{
          position: relative;
          aspect-ratio: 16/9;
          width: 40%;
          height: fit-content;
        }