@charset "UTF-8";

@media (min-width: 480px) {
}
@media (min-width: 768px) {
}
@media (min-width: 1025px) {
}

.wrapper {
  overflow: visible;
}

/* CSS変数の初期値（JS発動前の崩れ防止用フォールバック） */
:root {
  --header-height: 80px;
}

/* 下層ヘッダー */
.sec-page-ttl {
  padding-top: var(--header-height);
  position: relative;
  background: var(--secondary-color);

  &::before {
    position: absolute;
    content: "";
    left: 0;
    top: 0;
    width: 8px;
    height: 100%;
    z-index: 10;
    background: var(--primary-color);
  }
}

/* タイトル */
.page-ttl {
  font-size: var(--fs-xxxl);
  color: var(--base-color);
  padding: 0.5em 0 0.5em 0;

  &::after {
    content: attr(data-caps);
    display: block;
    color: var(--primary-color);
    font-size: var(--fs-l);
    line-height: 1;
    text-transform: capitalize;
  }
}

/* ローカルナビ */
.local-nav {
  position: sticky;
  top: var(--header-height);
  z-index: 99;
  background: var(--secondary-color);
  width: 100%;

  &::before {
    position: absolute;
    content: "";
    left: 0;
    top: 0;
    width: 8px;
    height: 100%;
    z-index: 10;
    background: var(--primary-color);
  }
}

/* ローカルナビリスト（横スクロール設定） */
.local-nav-list {
  display: flex;
  /* justify-content: center; */
  align-items: center;
  gap: 2em;
  padding: 1em 1.5em;
  margin: 0;
  list-style: none;
  overflow-x: auto;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;

  /* スクロールバー非表示 */
  &::-webkit-scrollbar {
    display: none;
  }
  scrollbar-width: none;

  @media screen and (max-width: 768px) {
    justify-content: flex-start; /* スマホ等で溢れた場合は左寄せにしてスクロール可能にする */
  }

  & li {
    flex-shrink: 0;
  }

  & a {
    font-size: 1.4rem;
    font-weight: var(--font-medium);
    color: var(--base-color);
  }
}

/* ABOUT */
.flx_iper {
  @media screen and (min-width: 1025px) {
    align-items: center;
  }
}

/* TECHNOLOGY */
.box-wht {
  background: var(--wht-color);
  padding: 2em;
}
.tec-quality {
  span {
    display: block;
    color: var(--primary-color);
    font-weight: var(--font-semibold);
  }
  .tq-txt01 {
    font-size: var(--fs-xl);
    line-height: 3rem;
    margin-bottom: 0.5em;
  }
  .tq-txt02 {
    font-size: var(--fs-xxl);
  }
}

/* OVERSEAS */
.sec-strengths {
  @media screen and (min-width: 1025px) {
    position: relative;

    &::before {
      position: absolute;
      content: "";
      width: 50%;
      height: 70%;
      right: 50%;
      top: 50%;
      transform: translateY(-50%);
      background: url(../img/os-map_pc.png) no-repeat center center / contain;
    }
  }
}

/* RECRUIT */
.rec-figure {
  width: 100px;
  height: 70px;
  margin: 0 auto 1em;
  text-align: center;

  img {
    object-fit: contain;
    width: 100%;
    height: 100%;
  }
}

.rec-box {
  .in-ttl {
    font-size: var(--fs-xl);
    margin: 0 0 0.2em;
    font-weight: var(--font-semibold);
    color: var(--base-color);
  }
}

.style-txt {
  font-weight: var(--font-semibold);
  /* font-weight: var(--font-bold); */
  color: var(--base-color);
}
/* 勤務地 */
.rec-box01 {
  .rec-fig {
    margin-bottom: 1em;
  }
  .square-list {
    margin-bottom: 1em;
  }
  .style-txt {
    font-size: 2.4rem;
    line-height: 1em;

    @media screen and (min-width: 1025px) {
      font-size: 2.2rem;
    }

    span {
      padding: 0 0.1em;
      font-size: 8.5rem;
      @media screen and (min-width: 1025px) {
        font-size: 9rem;
      }
    }
  }

  .flx-rec {
    @media screen and (min-width: 1025px) {
      display: flex;
      gap: 1em;

      .flx-rec_item:first-child {
        width: 40%;
      }
      .flx-rec_item:last-child {
        width: 60%;
      }
    }
  }
}

/* 年間休日 */
.rec-box02 {
  .flx-rec01 {
    @media screen and (min-width: 1025px) {
      display: flex;
      gap: 1em;
      align-items: center;
    }

    .flx-rec01_01 {
      @media screen and (min-width: 1025px) {
        width: 40%;
        font-size: 4rem;
      }
      .style-txt {
        text-align: center;
        font-size: 6rem;
        line-height: 2em;

        @media screen and (min-width: 1025px) {
          font-size: 3.5rem;
          text-align: left;
        }

        span {
          font-size: 15rem;
          @media screen and (min-width: 1025px) {
            font-size: 10rem;
          }
          @media screen and (min-width: 1200px) {
            font-size: 13rem;
          }
        }
      }
    }
    .flx-rec01_02 {
      margin-bottom: 1.5em;

      @media screen and (min-width: 1025px) {
        width: 60%;
      }

      .flx-rec_item_inbox {
        display: flex;
        align-items: center;
        gap: 1em;
        margin-bottom: 1em;

        .rec-fig {
          width: 40%;
        }
        .style-txt {
          font-size: 1.9rem;

          @media screen and (min-width: 1025px) {
            font-size: 1.7rem;
          }
        }
      }
    }
  }
  .flx-rec02 {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1em 2em;

    .flx-rec_item {
      width: calc(50% - 1em);

      @media screen and (min-width: 1025px) {
        width: calc((100% - 4em) / 3);

        &:nth-of-type(2) {
          position: relative;

          &::before,
          &::after {
            position: absolute;
            content: "";
            width: 1px;
            height: 100%;
            top: 0;
            background: var(--primary-color);
          }
          &::before {
            left: -1em;
          }
          &::after {
            right: -1em;
          }
        }
      }

      .rec-fig {
        width: 70%;
        margin: 0 auto 0.5em;

        @media screen and (min-width: 1025px) {
          width: 80px;
        }
      }
    }
  }
}

/* 就業時間 */
.rec-box03 {
  .flx-rec01 {
    display: flex;
    align-items: center;
    gap: 2em;
    margin-bottom: 1em;

    .style-txt {
      font-size: 7.5rem;
      line-height: 1em;
    }
  }

  .flx-rec02 {
    display: flex;
    justify-content: center;
    gap: 2em;

    .flx-rec_item {
      .style-txt {
        text-align: center;
        font-size: 2.1rem;
        line-height: 1.8em;

        span {
          display: block;
          font-size: 3rem;
        }
      }

      &:first-child {
        position: relative;

        &::after {
          position: absolute;
          content: "";
          width: 1px;
          height: 100%;
          top: 0;
          background: var(--primary-color);
          right: -1em;
        }
      }
    }
  }
}

/* 有給休暇 */
.rec-box04 {
  .flx-rec01 {
    display: flex;
    align-items: end;
    gap: 2em;
    margin-bottom: 1em;

    .style-txt {
      font-size: 4rem;
      line-height: 1em;
      width: 60%;

      span {
        font-size: 10rem;
      }
    }
    .rec-fig {
      width: 40%;
    }
  }

  .flx-rec02 {
    .style-txt {
      font-size: 2.1rem;
    }
  }
}

/* 残業時間 */
.rec-box05 {
  position: relative;

  &::before {
    position: absolute;
    content: "";
    width: 35%;
    height: auto;
    aspect-ratio: 1/1;
    right: 2em;
    top: 2em;
    background: url(../img/rec-box05.png) no-repeat 0 0 / contain;
  }

  .flx-rec01 {
    .style-txt {
      font-size: 4.5rem;
      line-height: 2em;

      span {
        font-size: 10rem;
        padding: 0 0.1em;
      }
    }
  }

  .flx-rec02 {
    .style-txt {
      font-size: 2.1rem;
    }
  }
}