/*
 header
*/
#header {
  background: rgba(0, 0, 0, 0.8);
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  z-index: 1000;

  .header-inner {
    max-width:1400px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-left: 10px;
  }
  a{
    text-decoration: none;
    color: #fff;
  }
  ._logo{
    display: flex;
    align-items: center;

    img{
      height: 60px;
    }
  }
  ._button-open{
    display: none;
  }
}

#header ._navigation{
  ul{
    display: flex;
    margin:0;
  }
  a{
    width: 105px;
    height: 70px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: #fff;
    font-size: 13px;
  }
  span{
    color: var(--color-green);
    font-size: 10px;
  }
  ._contact{
    background-color: var(--color-yellow);
    a{
      color: #000;
      span{
        color: #fff;
      }
    }
  }
}



@media only screen and (max-width: 800px) {
  #header {
    padding: 2px 0;
    ._logo{
      img{
        height: 48px;
      }
    }
  }

  .menuOpen{
    .header-inner{
      flex-direction: column;
      align-items: center;
    }
  }

  #header ._navigation{
    display: none;

    ul{
      width: 200px;
      margin-top: 40px;
      flex-direction: column;
      align-items: center;
      gap: 16px;
      margin-inline: 16px;
      padding:0;
    }
    li{
      width: 100%;
    }
    a{
      width: 100%;
      height: 56px;
      justify-content: column;
      font-size: 16px;
      font-weight: bold;
    }
  }

  #header ._button-open{
    align-items: center;
    justify-content: center;
    display: flex;
    width: 44px;
    height: 44px;

    &::before{
      content: "\eb9e";
      font-family: "Material Icons";
      font-size: 28px;
      color: var(--color-yellow);
    }
  }

  /*  メニューを開いたとき */
  #header.menuOpen{
    height: 100dvh;

    ._navigation{
      display: block;
    }
    ._button-open::before{
      content: "\e5cd"; /* 閉じるボタン */
    }
  }
}