@charset "utf-8";
/* CSS Document */

header {
  box-shadow: 0px 5px 10px -3px rgba(10, 10, 10, 0.1), -10px -10px 10px 0px rgba(10, 10, 10, 0.02);
}

nav {
  position: relative;

  overflow: visible;
}

main {
}

.header_right {
  margin: 0 40px 0 0;
  padding: 0;
  width: 25%;
  height: auto;

  text-align: right;
}

@media only screen and (max-width: 480px) {
  .header_right {
    margin: 0 40px 0 0;
    padding: 0;
    width: 35%;
  }
}

/* メニュー //////////////////////////////////////////////// */

@media only screen and (max-width: 768px) {
  main {
  }

  #menu {
    display: flex;
    flex-flow: row wrap;
    /*border-top: 1px solid #444;*/
  }

  #menu li {
    width: auto;
    font-size: 0.9em;
  }

  #menu li a {
    padding: 12px 1em 10px;
  }
}

@media only screen and (max-width: 480px) {
  main {
  }

  #menu1 {
    display: none;
  }

  #menu-box {
    border: 3px;
    border-style: none none solid none;
    border-color: #f78203;

    display: flex;
  }

  #menu {
    display: flex;
    flex-flow: row wrap;
    border-top: 1px solid #fff;
  }

  #menu li {
    width: 50%;
    background: #ffcc84;
    border-top: 1px solid #fff;
  }

  #menu li:after {
    content: none;
  }

  #menu li:nth-child(odd) {
    /*奇数のliに右ボーダー*/
    border-right: 1px solid #fff;
  }

  #menu li a {
    width: 100%;
    font-size: 0.9em;
    color: #db6d00;
    background: #ffe3bb;
  }

  #menu li a:hover {
    background: #f78203;
    color: #fff;
    /*background: #ffcc84;*/
    transition: 0.3s;
  }

  #toggle {
    position: absolute;
    display: flex;

    flex-flow: row nowrap;
    justify-content: center;

    width: 50px;
    height: 60px;

    top: -60px;
    right: 0;
  }

  /* 三ボタン ///////////////////////////// */

  #toggle a {
    display: flex;
    align-items: center;
    position: relative;
    padding: 5px 0 2px;
    width: 100%;
    height: 100%;
    color: #fff;

    /*border-bottom: 1px solid #444;*/

    text-align: center;
    text-decoration: none;
  }
}

.drawer-open {
  position: absolute;
  background-color: #fff;

  display: flex;
  height: 37px;
  width: 50px;
  justify-content: center;
  align-items: center;

  z-index: 98;
  cursor: pointer;
}

.bar {
  overflow: hidden;
  position: absolute;
  display: block;
  background-color: #666;
  width: 24px;
  height: 3px;
  border-radius: 25%;

  transition: background-color 0.3s ease-in, transform 0.3s ease-in, width 0.3s ease-in;
}

.careerdle {
  margin: 0 auto;
}

/* 三本線のうち一番上の棒の位置調整 */
.top {
  top: 10px;
}

/* 三本線のうち一番下の棒の位置調整 */
.bottom {
  bottom: 10px;
}