@charset "utf-8";

html,
body {
  scroll-behavior: smooth;
  scroll-padding-top: 200px;
}

#custom-main {
  overflow: initial;
}

/* --------------------------------- Header --------------------------------- */
.header {
  background: var(--clr-white);
}

.header.scrolled {
  background: rgba(255, 255, 255, 1);
}

/* ------------------------------ Custom Common ----------------------------- */
[class*="__wrapper-m"] {
  width: min(100%, 1100px);
  margin-inline: auto;
}

.cmn-py {
  padding-block: var(--sp-10);
}

/* ---------------------------------- Sec00 --------------------------------- */
.sec00 {
  background: no-repeat center / cover url("../images/sec00_img1.webp");

  .sec00__wrapper {
    width: min(100%, 1100px);
    margin-inline: auto;
    padding-block: 190px 65px;
  }

  .sec00__header {
    margin-bottom: var(--sp-2);

    h2,
    p {
      color: var(--clr-white);
    }

    h2 {
      font-size: var(--h2-fz);
      font-weight: var(--bold);
    }

    p {
      font-size: var(--small-fz);
      font-weight: var(--regular);
    }
  }

  .sec00__text {
    font-size: var(--large-fz);
    font-weight: var(--bold);
    color: var(--clr-white);
  }
}

/* 職種一覧 */
/* -------------------------------------------------------------------------- */
.sec-nav {
  position: sticky;
  width: 100%;
  top: 74px;
  background-color: var(--clr-white);
  z-index: 5;

  padding-block: var(--sp-2) var(--sp-2);
  border-bottom: 1px solid var(--clr-accent);



  .sec-nav__header {
    margin-bottom: var(--sp-2);
    transition: all 0.1s;

    h3 {
      font-size: var(--h3-fz);
      font-weight: var(--bold);
      text-align: center;
      transition: all 0.1s;
    }
  }

  &.scrolled {
    .sec-nav__header {
      h3 {
        font-size: var(--h4-fz);
      }
    }
  }

  .sec-nav__list {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-flow: row nowrap;
    gap: var(--sp-5);
  }

  .sec-nav__item {}

  .sec-nav__item-link {
    display: block;
    width: fit-content;
    border-radius: var(--sp-4);
    background-color: var(--clr-white);
    padding: var(--sp-1) var(--sp-3);
    border: 1px solid #1c1b1f;

    span {
      font-size: var(--base-fz);
      font-weight: var(--bold);
      padding-right: 28px;
      position: relative;

      &::before {
        content: "";
        position: absolute;
        inset: 0 0 0 auto;
        margin-block: auto;
        width: 20px;
        height: 20px;
        background: no-repeat center / contain url("../images/sec-nav__deco1.webp");
        transform: translateY(1px);
      }
    }
  }

  .sec-nav__item-link--active {
    background-color: #1c1b1f;

    span {
      color: var(--clr-white);

      &::before {
        background-image: url("../images/sec-nav__deco2.webp");
      }
    }
  }
}

/* -------------------------------------------------------------------------- */
.sec-cnt {
  .sec-cnt__header {
    margin-bottom: var(--sp-5);

    h3 {
      font-size: var(--h3-fz);
      font-weight: var(--bold);
      color: var(--clr-accent);
    }
  }
}

.sec-cnt--bg1 {
  background-color: #f6f6f6;
}

.sec-cnt--bg2 {
  background-color: #e6edf3;
}

.container {
  .container__item {
    display: flex;
    justify-content: start;
    align-items: start;
    flex-flow: row wrap;
    gap: var(--sp-5);

    &:not(:last-child) {
      padding-bottom: var(--sp-10);
      margin-bottom: var(--sp-10);
      border-bottom: 1px solid var(--clr-black);
    }
  }

  .container__item-header {
    margin-bottom: var(--sp-2);

    h4 {
      font-size: 26px;
      font-weight: var(--bold);
    }

    p {
      font-size: var(--small-fz);
      font-weight: var(--regular);
      text-transform: capitalize;
    }
  }

  .container__item-text {
    p {
      font-size: var(--base-fz);
      font-weight: var(--regular);

      &:not(:last-child) {
        margin-bottom: var(--sp-2);
      }
    }
  }

  .container__item-box {
    width: min(100%, 260px);
    margin-inline: 0 auto;
  }

  .container__item-box--large {
    width: min(100%, 300px);
  }
}

.card {
  width: min(100%, 760px);
  display: flex;
  justify-content: start;
  align-items: stretch;
  flex-flow: row wrap;
  gap: var(--sp-2);

  .card__item {
    width: min(100%, 372px);
    height: inherit;
  }

  .card__item-link {
    display: block;
    width: inherit;
    height: 100%;
    border-radius: var(--sp-1);
    border: 1px solid var(--clr-accent);
    background-color: var(--clr-white);
    padding: var(--sp-3);
  }

  .card__item-header {
    min-height: 30px;
    margin-bottom: var(--sp-1);
    padding-bottom: var(--sp-1);
    border-bottom: 1px solid var(--clr-accent);

    h5 {
      font-size: var(--h5-fz);
      font-weight: var(--bold);
      padding-right: var(--sp-4);
      position: relative;

      &::before {
        content: "";
        position: absolute;
        inset: 0 0 auto auto;
        width: 26px;
        height: 26px;
        background: no-repeat center / contain url("../images/card_deco1.webp");
        transform: translateY(var(--sp-05));
      }

      small {
        font-size: var(--base-fz);
      }
    }
  }

  .card__item-textbox {
    p {
      font-size: var(--small-fz);
      font-weight: var(--regular);

      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 5;
      /* 制限したい行数が3の場合 */
      overflow: hidden;

      &:not(:last-child) {
        margin-bottom: var(--sp-05);
      }
    }
  }
}