/*ヘッダー全体の設定*/
.header{   
  position: fixed;
  display: grid;
  grid-template-columns: 1fr 1fr;
  height:60px;
  width: 100%;
  z-index: 1000;
  background: linear-gradient(to bottom, #000000, #00000083);
}
.header{   
  position: fixed;
  display: grid;
  grid-template-columns: 1fr 1fr;
  height:70px;
  width: 100%;
  z-index: 1000;
  background: linear-gradient(to bottom, #000000, #00000083);
}
.header-logo img{  width: 180px;  height: 70px;  opacity: 0.6;}
.header-menu{text-align: center;margin: auto;color: aliceblue;}
.header-menu label{font-size: clamp(15px,20px,20px);}
#menu-toggle {display: none;}
#menu-toggle:checked ~ .menu {max-height: 300px;opacity: 0.6;}
.menu{
  position: fixed;
  height: auto;
  width: clamp(250px,30lvw,400px);
  right: 0px;
  max-height: 0px;
  opacity: 0;
  overflow: hidden;
  background:linear-gradient(to bottom, #0000007c, #030128d8);
  transition: max-height 0.5s ease, opacity 0.5s ease;
  text-align: left;
  font-size: 20px;
}
.menu ul {
  display: flex;
  flex-direction: column; /* 縦並び */
  grid-template-columns: 1fr ;
  gap: 12px;
  padding: 0;
  list-style: none;
}
.menu a {text-decoration: none;color: #fff;gap: 100px;}