@charset "UTF-8";
/* -- Setting -- */
/* チェックボックスは非表示に */
.drawer-hidden {
  display: none;
}

/* ハンバーガーアイコンの設置スペース */
.drawer-open {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  height: 50px;
  width: 40px;
  -webkit-box-pack: right;
      -ms-flex-pack: right;
          justify-content: space-evenly;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  position: relative;
  z-index: 98;
  /* 重なり順を一番下に */
  cursor: pointer;
  /* padding-top: 5px; */
}

/* ハンバーガーメニューのアイコン */
.drawer-open span,
.drawer-open span:before,
.drawer-open span:after {
  content: '';
  display: block;
  height: 2px;
  width: 22px;
  border-radius: 2px;
  background: #333;
  -webkit-transition: 0.5s;
  transition: 0.5s;
  position: absolute;
}

/* 三本線のうち一番上の棒の位置調整 */
.drawer-open span:before {
  bottom: 8px;
}

/* 三本線のうち一番下の棒の位置調整 */
.drawer-open span:after {
  top: 8px;
}

/* メニューのデザイン*/
.drawer-content {
  width: 95%;
  /* ここの割合を小さくすると閉じる部分の領域が広がる */
  height: 100%;
  position: fixed;
  top: 0;
  left: 100%;
  /* メニューを画面外へ */
  z-index: 100;
  /* 重なり順を一番上に */
  background: #fff;
  -webkit-transition: .5s;
  transition: .5s;
}
/*企業アイコン*/
.drawer-content .menu_logo_area{
    display: inline-flex;
    justify-content: center;
    align-items: center;
    margin: 15px 10px;
}
.drawer-content .menu_logo_area .logo{
    position: relative;
    top: 5px;
    margin-right: 5px;
}
.drawer-content .menu_logo_area .logo img{
    width: 54px;
    height: 40px;
    object-fit: contain;
}
/* アイコンがクリックされたらメニューを表示 */
#drawer-check:checked ~ .drawer-content {
  left: 70%;
  /* メニューを画面内へ */
}

/* メニューを閉じるための要素のデザイン*/
.drawer-close {
  width: 100%;
  height: 100%;
  background: rgba(65, 65, 65, 0.6);
  position: fixed;
  top: 0;
  left: 100%;
  /* 閉じるための要素を画面外へ */
  z-index: 99;
  /* 重なり順をメニューより下に*/
  -webkit-transition: .5s;
  transition: .5s;
}

#drawer-check:checked ~ .drawer-close {
  left: 0;
  /* 閉じるための要素を画面内へ */
}
label.drawer-close::before{
	content: "";
    display: inline-block;
    width: 24px;
    height: 24px;
    background: url('../../img/icon/w_close.svg') no-repeat;
    position: relative;
    top: 20px;
    left: 20px;
}
li.logout-icon,
li.drawer-item {
    padding: 13px;
}

li.logout-icon p,
li.drawer-item p {
  position: relative;
}

li.drawer-item:last-child {
  border-bottom: 1px solid #EFEFEF;
}

/*Arrow Area*/
li.drawer-item p::after {
  content: "";
  position: absolute;
  top: 40%;
  left: 27%;
  border-top: solid 1px #000000;
  border-right: solid 1px #000000;
  width: 6px;
  height: 6px;
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
}
/*Logout icon*/
li.logout-icon p::after {
    content: "";
    position: absolute;
    display: inline-block;
    left: 26.5%;
    background: url('../../img/icon/i_login.svg') no-repeat;
    width: 15px;
    height: 20px;
    background-size: contain;
    vertical-align: middle;
    filter: brightness(1) invert(1);
  }
li.drawer-item a:link {
  width: 100%;
  display: block;
}
a:hover li.drawer-item {
  color: var(--default-color01);
}

a:hover li.drawer-item p:after {
  border-top: solid 1px var(--default-color01);
  border-right: solid 1px var(--default-color01);
}
a:hover li.logout-icon p::after {
    filter: invert(20%) sepia(30%) saturate(6032%) hue-rotate(107deg) brightness(93%) contrast(78%);
  }
@media screen and (max-width: 1024px){
    #drawer-check:checked ~ .drawer-content{
        left: 65%;
    }
    .drawer-content{
        width: 110%;
    }
}
@media screen and (max-width: 876px){
    #drawer-check:checked ~ .drawer-content{
        left: 60%;
    }
    .drawer-content{
        width: 125%;
    }
}
@media screen and (max-width: 767px) {
  .drawer-open {
    /* padding-top: 5px; */
  }
  /* アイコンがクリックされたらメニューを表示 */
  #drawer-check:checked ~ .drawer-content {
    left: 16%;
    /* メニューを画面内へ */
  }
  li.drawer-item {
    background-position: 10%;
  }
  /*Arrow Area*/
  li.drawer-item p::after {
    left: 90%;
  }
  /*Logout icon*/
li.logout-icon p::after {
    left: 87%;
}
}
@media screen and (max-width: 560px) {
    li.drawer-item p::after {
        left: 60%;
    }
    li.logout-icon p::after {
        left: 60%;
    }
}
/*# sourceMappingURL=nav.css.map */