@charset "utf-8";

body.active {
  height: 100%;
  overflow: hidden;
}

.check {
  display: none;
}

.btn_menu {
  display: none;
}

.menu {
  display: none;
}

@media screen and (max-width: 750px) {
  /* --------------- ドロワーボタン ------------------ */
  .btn_menu {
    display: block;
    width: calc((100 / 750) * 105 * 1vw);
    aspect-ratio: 1/1;
    background-color: var(--dark_green);
    border-radius: calc((100 / 750) * 1 * 1vw);
    position: relative;
  }

  .btn_menu span {
    display: block;
    width: calc((100 / 750) * 41 * 1vw);
    aspect-ratio: 41/3;
    background-color: white;
    position: absolute;
    left: calc((100 / 750) * 32 * 1vw);
  }

  .btn_menu span:nth-of-type(1) {
    top: calc((100 / 750) * 37 * 1vw);
    transform: rotate(0);
  }

  .btn_menu span:nth-of-type(2) {
    top: calc((100 / 750) * 51 * 1vw);
    transform: scale(1);
  }

  .btn_menu span:nth-of-type(3) {
    bottom: calc((100 / 750) * 37 * 1vw);
    transform: rotate(0);
  }

  #btn_open:checked + .btn_menu span:nth-of-type(1) {
    top: calc((100 / 750) * 51 * 1vw);
    transform: rotate(-45deg);
  }

  #btn_open:checked + .btn_menu span:nth-of-type(2) {
    transform: scale(0);
  }

  #btn_open:checked + .btn_menu span:nth-of-type(3) {
    bottom: calc((100 / 750) * 51 * 1vw);
    transform: rotate(45deg);
  }

  /* --------------- ドロワー動き ------------------ */

  .menu {
    display: block;
    width: 100%;
    height: 100vh;
    overflow: auto;
    padding: calc((100 / 750) * 200 * 1vw) calc((100 / 750) * 95 * 1vw) 0;
    background-color: white;
    position: fixed;
    top: -100vh;
    left: 0;
    z-index: -10;
    transition: top 0.5s, right 0.5s, bottom 0.5s, left 0.5s;
  }

  #btn_open:checked ~ .menu {
    top: 0;
  }

  .nav_1 {
    display: flex;
    width: 100%;
    margin-bottom: calc((100 / 750) * 450 * 1vw);
    flex-wrap: wrap;
    justify-content: space-between;
    row-gap: calc((100 / 750) * 104 * 1vw);
  }

  .nav_1 li {
    width: 40%;
    line-height: 1;
  }

  .nav_1 li .ja {
    font-size: calc((100 / 750) * 36 * 1vw);
  }

  .nav_1 .en {
    margin-bottom: calc((100 / 750) * 10 * 1vw);
    padding-left: calc((100 / 750) * 24 * 1vw);
    font-size: calc((100 / 750) * 32 * 1vw);
    line-height: calc((100 / 750) * 20 * 1vw);
  }

  .nav_1 li .en::before {
    width: calc((100 / 750) * 19 * 1vw);
  }

  .nav_2 {
    margin-bottom: calc((100 / 750) * 40 * 1vw);
    justify-content: space-between;
    column-gap: 0;
  }

  .nav_2::after {
    content: '';
    display: block;
    width: calc((100 / 750) * 286 * 1vw);
    aspect-ratio: 286/236;
    background: url(/recruit/assets/img/sp_deco.png) no-repeat center center/cover;
    position: absolute;
    top: calc((100 / 750) * -278 * 1vw);
    right: calc((100 / 750) * -47 * 1vw);
  }

  .nav_2 li {
    padding-left: calc((100 / 750) * 29 * 1vw);
    font-size: calc((100 / 750) * 24 * 1vw);
    line-height: calc((100 / 750) * 40 * 1vw);
    position: relative;
  }

  .nav_2 li::before {
    width: calc((100 / 750) * 21 * 1vw);
    aspect-ratio: 21/20;
  }

  .menu p {
    margin-bottom: calc((100 / 750) * 30 * 1vw);
    text-align: center;
    line-height: calc((100 / 750) * 26 * 1vw);
  }

  .menu small {
    font-size: calc((100 / 750) * 22 * 1vw);
    color: var(--b);
    opacity: 0.6;
  }
}