@charset "UTF-8";
/* ============================
ヘッダー v2（header-v2.php）
Figma「ルート21 採用サイト改修 / 01.採用TOP」ヘッダー
  PC : 1727 × 121（左：白／ロゴ＋採用情報、右：青／メニュー）
  SP : 393 × 80（青背景／白ロゴ＋白帯の採用情報、ハンバーガー）
※ 本ファイルは assets/scss/header-v2.scss からコンパイルしています。
  CSSを直接編集せず、SCSSを編集して以下でビルドしてください。
  npx sass assets/scss/header-v2.scss assets/css/header-v2.css --no-source-map
 ========================= */
#header-v2 {
  position: sticky;
  top: 0;
  left: auto;
  z-index: 100;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  height: 121px;
  margin-top: 0;
  background: #FFFFFF;
  -webkit-transition: none;
  transition: none;
  font-family: "游ゴシック体", YuGothic, "Yu Gothic", "Noto Sans JP", sans-serif;
  font-weight: 700;
}
#header-v2,
#header-v2 *,
#header-v2 *::before,
#header-v2 *::after {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}
@media screen and (max-width: 1024px) {
  #header-v2 {
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    height: 80px;
    padding: 0 26px 0 20px;
    background: #3B8DFF;
  }
}

.l-header-v2__brand {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 35.16%;
          flex: 0 0 35.16%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  padding: 12px 0 0 12.46%;
}
@media screen and (max-width: 1024px) {
  .l-header-v2__brand {
    -webkit-box-flex: 0;
        -ms-flex: 0 1 auto;
            flex: 0 1 auto;
    padding: 0 0 6px;
  }
}
.l-header-v2__logo {
  display: block;
  width: clamp(220px, 19.4vw, 335px);
  -webkit-transition: opacity 0.3s;
  transition: opacity 0.3s;
}
@media screen and (max-width: 1024px) {
  .l-header-v2__logo {
    width: 219px;
  }
}
.l-header-v2__logo img {
  display: block;
  width: 100%;
  height: auto;
}
.l-header-v2__logo:hover {
  opacity: 0.7;
}
.l-header-v2__label {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: clamp(224px, 19.7vw, 340px);
  height: 24px;
  margin-top: 11px;
  padding-left: 0.5em;
  border: 1px solid #808080;
  color: #2C2C2C;
  font-size: 14.5px;
  letter-spacing: 0.5em;
  line-height: 1;
  -webkit-transition: opacity 0.3s;
  transition: opacity 0.3s;
}
.l-header-v2__label:hover {
  opacity: 0.7;
}
@media screen and (max-width: 1024px) {
  .l-header-v2__label {
    width: 228px;
    height: 19px;
    margin-top: 6px;
    padding-left: 1em;
    border: none;
    background: #FFFFFF;
    color: #1262A9;
    font-size: 12px;
    letter-spacing: 1em;
  }
}
.l-header-v2__nav {
  -webkit-box-flex: 1;
      -ms-flex: 1 1 auto;
          flex: 1 1 auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  padding: 0 20px;
  background: #3B8DFF;
}
@media screen and (max-width: 1024px) {
  .l-header-v2__nav {
    position: absolute;
    top: 100%;
    left: 0;
    display: block;
    width: 100%;
    height: calc(100vh - 80px);
    height: calc(100dvh - 80px);
    padding: 10px 20px 40px;
    overflow-y: auto;
    border-top: 1px solid rgba(255, 255, 255, 0.4);
    opacity: 0;
    visibility: hidden;
    -webkit-transition: opacity 0.3s, visibility 0.3s;
    transition: opacity 0.3s, visibility 0.3s;
  }
}
.l-header-v2__list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: clamp(20px, 20px + (100vw - 1025px) * 0.07, 68px);
  margin: 0;
  padding: 0;
  list-style: none;
}
@media screen and (max-width: 1024px) {
  .l-header-v2__list {
    display: block;
  }
}
@media screen and (max-width: 1024px) {
  .l-header-v2__item {
    border-bottom: 1px solid rgba(255, 255, 255, 0.4);
  }
}
.l-header-v2__link {
  display: block;
  color: #FFFFFF;
  font-size: clamp(13px, 13px + (100vw - 1025px) * 0.0043, 16px);
  line-height: 1.6;
  white-space: nowrap;
  text-decoration: none;
  -webkit-transition: opacity 0.3s;
  transition: opacity 0.3s;
}
.l-header-v2__link:hover {
  opacity: 0.7;
}
@media screen and (max-width: 1024px) {
  .l-header-v2__link {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    padding: 18px 4px;
    font-size: 16px;
    white-space: normal;
  }
  .l-header-v2__link::after {
    content: "";
    width: 8px;
    height: 8px;
    border-top: 1px solid #FFFFFF;
    border-right: 1px solid #FFFFFF;
    -webkit-transform: rotate(45deg);
            transform: rotate(45deg);
    -ms-flex-negative: 0;
        flex-shrink: 0;
    margin-left: 16px;
  }
}
@media screen and (max-width: 1024px) {
  .l-header-v2__br {
    display: none;
  }
}
.l-header-v2__toggle {
  display: none;
}
@media screen and (max-width: 1024px) {
  .l-header-v2__toggle {
    position: relative;
    display: block;
    -ms-flex-negative: 0;
        flex-shrink: 0;
    width: 45px;
    height: 30px;
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
  }
}
.l-header-v2__toggle-line, .l-header-v2__toggle-line::before, .l-header-v2__toggle-line::after {
  position: absolute;
  right: 0;
  height: 1px;
  background: #FFFFFF;
  -webkit-transition: width 0.3s, background-color 0.3s, top 0.3s, -webkit-transform 0.3s;
  transition: width 0.3s, background-color 0.3s, top 0.3s, -webkit-transform 0.3s;
  transition: transform 0.3s, width 0.3s, background-color 0.3s, top 0.3s;
  transition: transform 0.3s, width 0.3s, background-color 0.3s, top 0.3s, -webkit-transform 0.3s;
}
.l-header-v2__toggle-line {
  top: 50%;
  width: 33px;
}
.l-header-v2__toggle-line::before, .l-header-v2__toggle-line::after {
  content: "";
}
.l-header-v2__toggle-line::before {
  top: -11px;
  width: 45px;
}
.l-header-v2__toggle-line::after {
  top: 11px;
  width: 25px;
}
.l-header-v2.is-open .l-header-v2__nav {
  opacity: 1;
  visibility: visible;
}
.l-header-v2.is-open .l-header-v2__toggle-line {
  background-color: transparent;
}
.l-header-v2.is-open .l-header-v2__toggle-line::before, .l-header-v2.is-open .l-header-v2__toggle-line::after {
  top: 0;
  width: 36px;
}
.l-header-v2.is-open .l-header-v2__toggle-line::before {
  -webkit-transform: rotate(-45deg);
          transform: rotate(-45deg);
}
.l-header-v2.is-open .l-header-v2__toggle-line::after {
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
}

@media screen and (max-width: 1024px) {
  html.is-header-v2-open {
    overflow: hidden;
  }
}