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

/*〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓
ヘッダー
〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓*/

header#glo_header {
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
  z-index: 1000;
  box-sizing: border-box;
  transition: 0.3s ease-in-out;
  padding: 3.2rem 4rem;
  @media screen and (min-width: 1025px) {
    &.on {
      transform: translateY(-120%);
    }
  }
  @media screen and (max-width: 1024px) {
    /* general.cssの#page_wrapのpadding-topと連動 */
    height: 4.8rem;
    padding: 0;
  }
  .header_inner {
    margin: auto;
    position: relative;
    width: 90%;
    @media screen and (max-width: 1024px) {
      width: 100%;
    }
    .header_logo {
      z-index: 2000;
      width: 31.2rem;
      position: relative;
      @media screen and (max-width: 1024px) {
        position: absolute;
        top: 2.6rem;
        left: 1.9rem;
        width: 20rem;
      }
      .logo-miurakokudo {
        a {
          display: flex;
          justify-content: space-between;
          .icon {
            width: 12%;
          }
          .text {
            width: 83.33%;
          }
        }
      }
    }
  }
  &.company {
  }
  &.recruit {
    .header_inner {
      margin: auto;
      position: relative;

      .header_logo {
        padding-bottom: 2.6rem;
        @media screen and (max-width: 1024px) {
          position: absolute;
          top: 2.6rem;
          left: 1.9rem;
          padding-bottom: 1.6rem;
        }

        &::after {
          content: "RECRUIT SITE";
          font-size: 1.8rem;
          letter-spacing: 0.13em;
          display: block;
          position: absolute;
          right: 0;
          bottom: 0rem;
          font-family: "Poppins", sans-serif;
          font-weight: 400;
        }
        &::before {
          content: "";
          display: block;
          width: 100vw;
          height: 1px;
          background-color: #000;
          position: absolute;
          right: 15rem;
          bottom: 0.8rem;
        }
        @media screen and (max-width: 1024px) {
          &::after {
            font-size: 1.15rem;
          }
          &::before {
            right: 9.6rem;
            bottom: 0.5rem;
          }
        }
      }
    }
  }
}
/*--------------------*/
/* トップページのロゴの色 */
/* メニューオープン時 */
body.home,
body.business {
  header {
    .header_logo.header_logo_svg {
      .text {
        svg {
          transition: all 0.3s ease-out;
          fill: #fff !important;
        }
      }
    }
    &.on {
      .header_logo.header_logo_svg {
        .text {
          svg {
            fill: #000 !important;
          }
        }
      }
    }
  }
}
body {
  header,
  header.on {
    .header_logo.header_logo_svg.open {
      .text {
        svg {
          fill: #fff !important;
        }
        &::after {
          color: #fff;
        }
        &::before {
          background-color: #fff !important;
        }
      }
    }
  }
}

/*〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓
ハンバーガーボタン
〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓*/

.header_nav_wrap {
  .menu_btn {
    position: absolute;
    z-index: 20000;
    width: 4.8rem;
    height: 4.8rem;
    border: none;
    right: 0.9rem;
    top: 1.8rem;
    padding: 1.1rem;
    box-sizing: border-box;
    background: rgba(0, 0, 0, 0);
    transition: all 0.2s;

    &:focus {
      /*ボタンクリック時の枠線消し*/
      outline: 0;
    }

    span.bar {
      transform-origin: center;
      display: block;
      height: 1px;
      background-color: #000;
      transition: all 0.2s;
      margin: 0.5rem 0;
    }

    &.open {
      .bar {
        background-color: #fff;
      }

      .bar1 {
        transform: rotate(45deg);
      }

      .bar2 {
        opacity: 0;
      }

      .bar3 {
        transform: rotate(-45deg);
        margin-top: -1.2rem;
      }
    }
  }

  @media screen and (min-width: 1025px) {
    &.nav-company {
      .menu_btn {
        display: none;
      }
    }
    &.nav-recruit {
      .menu_btn {
        padding: 0.4rem;
        top: 0;
        span.bar {
          margin: 0.7rem 0;
        }
        &.open {
          .bar3 {
            transform: rotate(-45deg);
            margin-top: -1.5rem;
          }
        }
      }
    }
  }
}
/*〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓
メニュー
〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓*/

@media screen and (min-width: 1025px) {
  .header_nav_wrap.nav-company {
    z-index: 100;
    position: absolute;
    right: 0;
    top: 0;
    padding-right: 13.4rem;

    .glo_menu_wrap {
      margin: 0 auto;
      .glo_menu {
        display: flex;
        align-items: center;

        a {
          text-decoration: none;
          display: block;
          font-size: 1.6rem;
          color: #000;
          letter-spacing: 0.1em;
          cursor: pointer;
        }

        li.menu-item {
          display: flex;
          align-items: center;

          & > a {
            padding: 0.4em 0.8em 0.6em;
            border-radius: 9999px;

            &:hover {
              background-color: var(--color-blue);
              opacity: 1;
              color: #fff;
            }
          }
          &.menu-item-has-children {
            position: relative;
            & > a {
              span {
                display: inline-block;
                padding-right: 1em;
                position: relative;
                &::after {
                  content: "";
                  display: block;
                  width: 0.5em;
                  aspect-ratio: 1/1;
                  border-right: 1px solid #000;
                  border-bottom: 1px solid #000;
                  transform: translateY(-75%) rotate(45deg);
                  position: absolute;
                  top: 50%;
                  right: 0;
                }
              }
              &:hover {
                span {
                  &::after {
                    border-color: #fff;
                  }
                }
              }
            }

            /*--------------------*/
            /* ドロップダウンメニュー 共通 */
            .dropdown_menu {
              position: absolute;
              top: 100%;
              visibility: hidden;
              opacity: 0;
              left: 0;
              transition: 0.2s;
            }

            /* 表示非表示 */
            &:hover .dropdown_menu {
              visibility: visible;
              opacity: 1;
            }

            /* メニューシングル */
            .dropdown_menu.single {
              left: 50%;
              transform: translate(-50%, 0);
              width: 16rem;
              padding-top: 0.5rem;

              .dropdown_menu_inner {
                width: 100%;
                background-color: #fff;
                box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
                border-radius: 1rem;
                overflow: hidden;
                ul {
                  li {
                    a {
                      padding: 0.4em 1em 0.6em;
                      &:hover {
                        background-color: var(--color-blue);
                        color: #fff;
                      }
                    }
                    &:first-child {
                      a {
                        padding-top: 0.8em;
                      }
                    }
                    &:last-child {
                      a {
                        padding-bottom: 0.8em;
                      }
                    }
                  }
                }
              }
            }
          }
        }
      }
      /* サブメニュー sp */
      .sub_menu-sp {
        display: none;
      }
    }
    /* サブメニュー */
    .sub_menu-pc {
      position: absolute;
      width: 12.4rem;
      right: 0;
      top: 0;

      li {
        a {
          display: block;
          background-color: #fff;
          border-radius: 9999px;
          font-size: 1.4rem;
          color: #727171;
          padding: 0.59em 0 0.69em;
          text-align: center;
          border: 1px solid #898989;
        }
        &.recruit {
          margin-top: 1rem;

          a {
            background-color: var(--color-blue);
            color: #fff;
            border: none;
          }
        }
      }
    }
  }
  body.home,
  body.business {
    .header_nav_wrap.nav-company {
      .glo_menu_wrap {
        .glo_menu {
          a {
            color: #fff;
          }

          li.menu-item {
            & > a {
            }
            &.menu-item-has-children {
              position: relative;
              & > a {
                span {
                  &::after {
                    border-color: #fff;
                  }
                }
                &:hover {
                  span {
                    &::after {
                      border-color: #fff;
                    }
                  }
                }
              }

              /* メニューシングル */
              .dropdown_menu.single {
                .dropdown_menu_inner {
                  ul {
                    li {
                      a {
                        color: #000;
                        &:hover {
                          color: #fff;
                        }
                      }
                    }
                  }
                }
              }
            }
          }
        }
      }
      /* サブメニュー */
      .sub_menu-pc {
        li {
          a {
            border: none;
          }
        }
      }
    }
  }
}

/* 会社 */
@media screen and (max-width: 1024px) {
  .header_nav_wrap.nav-company {
    .glo_menu_wrap {
      height: 100vh;
      height: 100dvh;
      padding: 8rem 4.2rem 2rem;
      box-sizing: border-box;
      overflow-y: auto;
      top: 0;
      right: 0;
      position: absolute;
      background-color: var(--color-deep-blue);
      z-index: 1010;
      transition: 0.3s;
      width: 100vw;
      display: none;

      &.open {
        animation: manufadein 0.3s ease-in;
        display: block;
      }

      /* メニューの中身 */
      .glo_menu {
        max-width: 48rem;
        margin: auto;
        li.menu-item {
          border-bottom: 1px solid #fff;
          & > a {
            display: block;
            font-size: 2rem;
            padding: 1.15em 0;
            color: #fff;
            font-family: "IBM Plex Sans JP", sans-serif;
            position: relative;
            &::after {
              content: "→";
              font-size: 2.4rem;
              font-weight: 400;
              position: absolute;
              right: 0;
            }
          }
          &.menu-item-has-children {
            padding-bottom: 2rem;
            & > a {
              padding-bottom: 0.75em;
            }
          }

          /* ドロップダウンメニュー */
          .dropdown_menu {
            ul {
              li {
                font-size: 1.8rem;
                color: #fff;
                &::before {
                  content: "─";
                  display: inline-block;
                  padding-right: 0.5em;
                }
                a {
                  display: inline-block;
                  padding: 0.5em 0;
                  color: #fff;
                  letter-spacing: 0.065em;
                }
              }
            }
          }
        }
      }
      /* サブメニュー sp */
      .sub_menu-sp {
        display: block;
        max-width: 48rem;
        margin: 4rem auto auto;
        li {
          a {
            display: block;
            background-color: var(--color-green);
            border-radius: 9999px;
            font-size: 2rem;
            padding: 0.875em 1.5em;
            letter-spacing: 0.1em;
            color: #fff;
            span {
              display: block;
              position: relative;
              &::after {
                content: "→";
                position: absolute;
                right: 0;
                top: 50%;
                transform: translateY(-50%);
              }
            }
          }
        }
      }
    }
    /* サブメニュー PC */
    .sub_menu-pc {
      display: none;
    }
  }
}

/* リクルート */
.header_nav_wrap.nav-recruit {
  .glo_menu_wrap {
    height: 100vh;
    height: 100dvh;
    padding: 14rem 4.2rem 2rem;
    box-sizing: border-box;
    overflow-y: auto;
    top: 0;
    right: 0;
    position: fixed;
    background-color: var(--color-green);
    z-index: 1010;
    transition: 0.3s;
    width: 100vw;
    display: none;
    @media screen and (max-width: 1024px) {
      padding: 8rem 4.2rem 2rem;
    }
    &.open {
      animation: manufadein 0.3s ease-in;
      display: block;
    }

    /* メニューの中身 */
    .glo_menu {
      max-width: 62rem;
      margin: auto;

      li.menu-item {
        border-bottom: 1px solid #fff;
        & > a {
          display: block;
          font-size: 2.4rem;
          padding: 1.15em 0;
          color: #fff;
          font-family: "IBM Plex Sans JP", sans-serif;
          position: relative;
          @media screen and (max-width: 1024px) {
            font-size: 2rem;
          }
          &::after {
            content: "→";
            font-size: 2.4rem;
            font-weight: 400;
            position: absolute;
            right: 0;
          }
        }
        &.menu-item-has-children {
          padding-bottom: 2rem;
          & > a {
            padding-bottom: 0.75em;
          }
        }
      }
    }
    /* サブメニュー sp */
    .sub_menu-sp {
      display: block;
      max-width: 48rem;
      margin: 4rem auto auto;
      li {
        a {
          display: block;
          background-color: var(--color-blue);
          border-radius: 9999px;
          font-size: 2rem;
          padding: 0.875em 1.5em;
          letter-spacing: 0.1em;
          color: #fff;
          span {
            display: block;
            position: relative;
            &::after {
              content: "→";
              position: absolute;
              right: 0;
              top: 50%;
              transform: translateY(-50%);
            }
          }
        }
      }
    }
  }
  /* サブメニュー PC */
  .sub_menu-pc {
    position: absolute;
    right: 10rem;
    top: 0.4em;
    display: flex;
    align-items: center;
    @media screen and (max-width: 1024px) {
      right: 8rem;
      top: 2rem;
    }
    @media screen and (max-width: 480px) {
      display: none;
    }
    li {
      width: 16.6rem;
      a {
        display: block;
        text-align: center;
        font-size: 1.8rem;
        text-align: center;
        color: #fff;
        padding: 0.62em 0 0.77em;
        span {
          letter-spacing: 0.22em;
          padding-left: 0.22em;
          display: inline-block;
        }
      }
      &.new_graduate {
        a {
          background-color: var(--color-blue);
          border-radius: 999px 0 0 999px;
        }
      }
      &.career {
        a {
          background-color: var(--color-green);
          border-radius: 0 999px 999px 0;
        }
      }
    }
  }
}

@keyframes manufadein {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}