@charset "utf-8";

a,a:hover,a:visited{
  color: inherit;
}


.header_wrap {
  width: 100%;
  height: 8rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #FFFFFF;
  position: fixed;
  z-index: 999;
  top: 0;
}
.main_tit {
  width: 7.5rem;
  margin-left: 4.8rem;
  z-index: 999;
}
.main_tit a {
  width: 100%;
}
.main_rg {
  width: 100%;
}


/* メニュー */
.menu_wrap {
  margin-right: 9rem;
}
.menu_ul {
  display: flex;
  gap: 3.2rem;
}
.menu_li {
  font-family:  var(--noto-sans-jp);
  font-size: 1.4rem;
}


@media screen and (max-width:699.98px) {
  .header_wrap {
    height: 6rem;
    /* position: relative; */
  }
  .main_tit {
    width: 5rem;
    margin-left: 0;
    margin-left: 1.7rem;
  }


  /* メニュー */
  .menu_wrap {
    margin-right: 0;
    width: 100%;
    height: 100svh;
    position: absolute;
    left: 0;
    top: 0;
    opacity: 0;
    transition: all .4s;
    display: none;
    animation: appear2  0.3s ease-in 0s forwards alternate;
  }

  .menu_nav {
    margin-right: 0;
    position: absolute;
    top: calc(0.9rem + 5rem + 11rem);
    left: 4.5rem;
  }
  .menu_ul {
    flex-direction: column;
    gap: 1.6rem;
  }
  .menu_li {
    font-size: 1.6rem;
  }
  .menu_li a {
    font-weight: bold;
    color: #707070;
  }


  /* ハンバーガメニュー */
  .hamburger_menu {
    width: 2.6rem;
    height: 1.6rem;
    position: relative;
    margin-right: 2.2rem;
    z-index: 999;
  }
  .hamburger_menu span {
    position: absolute;
    width: 2.6rem;
    border-top: solid 0.13rem #707070;
    background-color: #707070;
    transition: all .4s;
  }
  .hamburger_menu span:nth-of-type(1) {
    top: 0;
  }
  .hamburger_menu span:nth-of-type(2) {
    top: 0.8rem;
  }
  .hamburger_menu span:nth-of-type(3) {
    top: 1.6rem;
  }

  .hamburger_menu.active span:nth-of-type(1) {
    top: 50%;
    transform: translateY(-50%) rotate(45deg);
  }
  .hamburger_menu.active span:nth-of-type(2) {
    opacity: 0;
  }
  .hamburger_menu.active span:nth-of-type(3) {
    top: 50%;
    transform: translateY(-50%) rotate(-45deg);
  }

  .menu_wrap.active {
    opacity: 1;
    background-color: #F2F2F2;
    display: block;    
    animation: appear  0.3s ease-in 0s forwards alternate;
 
    
  }

  @keyframes appear {
    0% {
      display: none;
      opacity: 0;
    }
  
    1% {
      display: block;
      opacity: 0;
    }
  
    100% {
      display: block;
      opacity: 1;
    }
  }

  @keyframes appear2 {
    0% {
      display: block;
      opacity: 1;

    }
  
    /* 1% {
      display: block;
      opacity: 0;
    } */
  
    100% {
      display: none;
      opacity: 0;
      
    }
  }
}