@charset "UTF-8";
/*　ヘッダー伸縮アニメーション */
header {
  transition: transform 0.3s ease-in-out; }

#header-nav .header-nav__inner {
  width: 100%; }

#header-nav .header-nav__inner:nth-of-type(2) {
  display: none; }

@media (max-width: 767px) {
  .header__inner {
    gap: 0; }

  .header-nav__inner:last-child {
    flex: 1; }

  #header-nav .header-nav__inner:nth-of-type(1) {
    display: none; }

  #header-nav .header-nav__inner:nth-of-type(2) {
    display: block; }

  .header-nav__nav-menu .menu-gnav-drawer-container {
    height: auto; }

  .header-nav__nav-menu {
    position: fixed;
    top: 0;
    right: 0;
    width: 50%;
    height: 100vh;
    background-color: var(--sectionbgcolor);
    transform: translateX(100%);
    /* 右側に隠す */
    transition: transform 0.7s ease;
    /* アニメーション */
    z-index: 1000;
    overflow-y: scroll;
    /* ドロワー内スクロール用 */
    padding-bottom: 10rem;
    /* ドロワー内スクロール用余白 */ }

  .header-nav__nav-menu
  #menu-gnav {
    display: flex;
    flex-direction: column; }

  /* ドロワーメニューが開いたとき */
  .js-drawer.is-open {
    transform: translateX(0);
    /* メニューを表示 */ }

  /* ドロワーメニュー内のリンクのスタイル */
  .js-drawer a {
    display: block;
    text-decoration: none; }

  /* ドロワーメニューのリンクにホバーしたときのスタイル */
  .js-drawer a:hover {
    background-color: #e8fbe8; }

  ul#menu-gnav-drawer {
    display: block; }

  ul#menu-gnav-drawer li.menu-item {
    width: 100%;
    text-align: center; }

  ul#menu-gnav-drawer li.menu-item a {
    font-size: 1rem;
    line-height: 1.5;
    padding: 1rem; }

  .header-nav__nav-menu .menu-gnav-drawer-container {
    padding: 5rem 0; }

  .header-nav__nav-menu {
    width: 100%; } }
/*　Hamburger */
.hamburger {
  display: none; }

@media (max-width: 767px) {
  .hamburger {
    display: block;
    position: absolute;
    z-index: 9999;
    display: inline-block;
    width: 50px;
    height: 50px;
    top: 1.4rem;
    right: 0.5rem;
    background-color: transparent;
    cursor: pointer; }

  .hamburger span {
    position: absolute;
    display: inline-block;
    width: 100%;
    height: 6px;
    background-color: var(--maincolor);
    border-radius: 10px; }

  .hamburger span:first-child {
    top: 0;
    transition: rotate, 0.5s; }

  .hamburger span:nth-child(2) {
    top: 1rem;
    transition: opacity, 0.5s; }

  .hamburger span:nth-child(3) {
    top: 2rem;
    transition: rotate, 0.5s; }

  .hamburger.is-active span:first-child {
    top: 1rem;
    transform: rotate(-45deg); }

  .hamburger.is-active span:nth-child(2) {
    opacity: 0; }

  .hamburger.is-active span:nth-child(3) {
    top: 1rem;
    transform: rotate(45deg); }

  .header-nav__nav-menu
  #nav {
    height: initial; } }