/* ================================================================================

	見た目の設定

================================================================================ */

/* PC設定
----------------------------------------------- */
@media (min-width: 768px) {

	/* ハンバーガーボタン */
	body.customize-support .toggle {
		margin-top: 32px;
	}

	/* 中身 */
	body.customize-support .toggleWrap {
		margin-top: 32px;
		height: calc( 100% - 32px );
	}
}

/* SP設定
----------------------------------------------- */
@media (max-width: 767px) {


  .humberger_bg{
    position: relative;
  }

    .humb-menu__title {/* メニュータイトルの幅 */
      padding: 1.3rem;
    }

    #gnav-content .botton_space{/* ボタンの幅設定(親のみ) */
        padding: 1rem;
        /* border-top: 0.5px solid #c7c5c5; */
        display: block;
    }
    #gnav-content .botton_space02{/* ボタンの幅設定（子要素付き） */
        /* border-top: 0.5px solid #c7c5c5; */
        display: block;
    }
    #gnav-content .botton_space02 p{
        padding: 1rem;
        background: #333;
        color: #fff !important;
    }

/* -------ボタンデザイン(開閉の動きなど)--------- */
/* menu-trigger外側のデザイン */
.menu-trigger {
    background: #333;
    width: 50px;
    height: 50px;
    border-radius: 3px;
    cursor: pointer;
    position: fixed; 
    z-index: 9999;
    right: 0;
    top: 6px;
  }
/* menu-trigger内側のデザイン */
.menu-trigger span {
    position: absolute;
    left: 14px;
    height: 3px;
    border-radius: 2px;
    background: #fff;
    width: 45%;
    transition: all 0.4s; /* アニメーションの設定(動きの速度を表している) */
  }
/* hamburger01の三本線 */
.menu-trigger span:nth-of-type(1) {
    top: 15px;
  }
.menu-trigger span:nth-of-type(2) {
    top: 23px;
  }
.menu-trigger span:nth-of-type(3) {
    top: 31px;
  }

/* activeクラスが付与されると線が回転して×になる */
.menu-trigger.active span:nth-of-type(1) {
    top: 18px;
    left: 18px;
    /* transformは、動きを付けるためのプロパティ */
    /* translateは、要素を水平方向や垂直方向に移動する関数 */
    /* rotateは、マウスホバー時に要素を回転させる関数 */
    transform: translateY(6px) rotate(-45deg);
    width: 30%;
  }
  
.menu-trigger.active span:nth-of-type(2) {
    opacity: 0; /* 真ん中の線は透過という意味 */
  }
  
.menu-trigger.active span:nth-of-type(3) {
    top: 30px;
    left: 18px;
    transform: translateY(-6px) rotate(45deg);
    width: 30%;
  }



    /*中身設定*/
    #gnav-content a{
        color:#fff;
    }

    #gnav-input:checked ~ #gnav-content {
        top: 0;
      }
      #gnav-content {
        position: fixed;
        top: -100%;
        left: 0;
        z-index: 10;
        transition: 0.3s;
        width: 100%;
        background: #333;
        color: #fff;
      }


      /* 親要素に子要素があるものに＋を表示 */
      #gnav-content ul li label.botton_space02 p{
        position: relative;
        z-index: 1;
      }
      #gnav-content ul li label.botton_space02 p::before{
        position: absolute;
        content: "+";
        display: inline-block;
        font-size: 23px;
        top: 9px;
        right: 1em;
      }



      .humb-menu label {
        display: flex;
        justify-content: space-between;
        cursor: pointer;
      }
      .humb-menu input {
        display: none;
      }
      .humb-menu .accshow {
        height: 0;
        overflow: hidden;
        background: #575757;
      }
      .humb-menu .accshow p {
        padding: 1.5rem;
      }

      /* メニューが開閉するときの動き */
      #gnav-content > ul > li{
        overflow: hidden;
        border-top: 0.5px solid #c7c5c5;
      }
      .humb-menu .cssacc:checked + .accshow {
        height: auto;
        transform: translateY(0);
      }
      .humb-menu input + .accshow {
        transform: translateY(-100%);
        transform-origin: top;
        transition: .3s;
      }

    /* 採用ボタン */
    .recruit_entry_button a{
        background:#8c7b65;
    }
    .contact_button a{
        background:#003366;
        color: #fff !important;
    }
}