@charset "UTF-8";
/* PC */


  .drawer-nav a {
    color: #fff!important;
  }

  .drawer-nav {
    position: fixed;
    z-index: 999;
    top: 0;
    overflow: hidden;
    height: 100%;
    background-color: rgba(0,0,0,0.8);
  }

  .drawer-brand {
    font-size: 1.5rem;
    font-weight: bold;
    line-height: 3.75rem;
    display: block;
    padding-right: .75rem;
    padding-left: .75rem;
    text-decoration: none;
    color: #fff;
  }

  .drawer-menu {
    padding: 0;
    list-style: none;
  }

  .drawer-menu-item {
    font-size: 1rem;
    display: block;
    padding: .75rem;
    text-decoration: none;
    color: #fff !important;
  }

  .drawer-menu-item:hover {
    text-decoration: underline !important;
  }
  /*!------------------------------------*\
    Top
\*!------------------------------------*/
  .drawer--top .drawer-nav {
    z-index: 9999;
    right: -100vw;
    top: 0;
    width: 100%;
    height: 100vh;
    max-height: 100%;
    transition: right .6s cubic-bezier(0.190, 1.000, 0.220, 1.000);
    background : linear-gradient(to right, rgba(0, 42, 84,0) 0, rgba(0, 42, 84,1)  140px, rgba(0, 42, 84,1) 100%);
    background-size: 100%;
    background-position: center bottom;
    background-repeat: no-repeat;
  }

  .drawer--top.drawer-open .drawer-nav {
    top: 0;
    right: calc(-100vw + 640px);
  }

  .drawer--top .drawer-hamburger,
  .drawer--top.drawer-open .drawer-hamburger {
    right: 5%;
    top: 12px;
  }

  /*!------------------------------------*\
    Hamburger
\*!------------------------------------*/

  .drawer-hamburger {
    position: fixed;
    z-index: 99999;
    display: block;
    width: 4rem;
    padding: 26px 2px;
    transition: all .6s cubic-bezier(0.190, 1.000, 0.220, 1.000);
    transform: translate3d(0, 0, 0);
    border: none;
    outline: 0;
    background: none;
    &::after{
      content: "MENU";
      font-family: "游明朝", YuMincho, 'Kozuka Mincho Pro', 'Kozuka Mincho Std', '小塚明朝 Pro R';
      color: #fff;
      line-height: 1;
      letter-spacing: 0;
      font-size: 1.2rem;
      white-space: nowrap;
      position: absolute;
      left: 0;
      bottom: -4px;
    }
  }
  .drawer--top.drawer-open .drawer-hamburger{
    &::after{
      content: "CLOSE";
      left: -1px;
    }
  }

  .drawer-hamburger:hover {
    cursor: pointer;
  }

  .drawer-hamburger-icon {
    position: relative;
    display: block;
    margin-top: ;
  }

  .drawer-hamburger-icon,
  .drawer-hamburger-icon:before,
  .drawer-hamburger-icon:after {
    width: 100%;
    height: 1px;
    transition: all .6s cubic-bezier(0.190, 1.000, 0.220, 1.000);
    background-color: #fff;
  }

  .drawer-open .drawer-hamburger-icon,
  .drawer-open .drawer-hamburger-icon:before,
  .drawer-open .drawer-hamburger-icon:after {
    background-color: #fff;
  }

  .drawer-hamburger-icon:before,
  .drawer-hamburger-icon:after {
    position: absolute;
    top: -10px;
    left: 0;
    content: ' ';
  }

  .drawer-hamburger-icon:after {
    top: 10px;
  }

  .drawer-open .drawer-hamburger-icon {
    background-color: transparent;
  }

  .drawer-open .drawer-hamburger-icon:before,
  .drawer-open .drawer-hamburger-icon:after {
    top: 0;
  }

  .drawer-open .drawer-hamburger-icon:before {
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
  }

  .drawer-open .drawer-hamburger-icon:after {
    -webkit-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    transform: rotate(-45deg);
  }

/* SP */
@media screen and (max-width: 768px) {
  .drawer-nav {
  }

  .drawer-brand {
    font-size: 1.5rem;
    line-height: 3.75rem;
    padding-right: .75rem;
    padding-left: .75rem;
  }

  .drawer-menu-item {
    font-size: 1rem;
    padding: .75rem;
  }
  /*!------------------------------------*\
    Top
\*!------------------------------------*/
  .drawer--top .drawer-nav {
    background: none;
    background-color: rgba(0, 42, 84,1);
  }

  .drawer--top.drawer-open .drawer-nav {
    top: 0;
    right: 0;
  }

  .drawer--top .drawer-hamburger,
  .drawer--top.drawer-open .drawer-hamburger {
    right: 5%;
    top: 12px;
  }

  /*!------------------------------------*\
    Hamburger
\*!------------------------------------*/

  .drawer-hamburger {
    width: 3.2rem;
    padding: 22px 2px;
    &::after{
      font-size: 1rem;
      left: 0;
      bottom: -4px;
    }
  }
  .drawer--top.drawer-open .drawer-hamburger{
    &::after{
      content: "CLOSE";
      left: -1px;
    }
  }
  .drawer-hamburger-icon:before{
    top: -8px;
  }
  .drawer-hamburger-icon:after{
    top: 8px;
  }

}