@charset "utf-8";

html,
body {
  scroll-behavior: smooth;
  scroll-padding-top: calc((100 / 390) * 100vw);
}

#custom-main {
  overflow: initial;

  padding-block: calc((50 / 390) * 100vw) var(--sp-4);
}

.floating-entry {
  display: none;
}

/* --------------------------------- 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;
}

.sp-px {
  padding-inline: var(--sp-2);
}

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

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

  .sec00__wrapper {
    width: min(100%, 1100px);
    margin-inline: auto;
    padding-block: calc((85 / 390) * 100vw) var(--sp-4);
    padding-inline: var(--sp-4);
  }

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

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

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

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

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

/* 職種一覧 */
/* -------------------------------------------------------------------------- */
.sec-nav {
  position: sticky;
  width: 100%;
  top: calc((-10 / 390) * 100vw);
  height: calc((113 / 390) * 100vw);
  background-color: var(--clr-white);
  z-index: 5;

  padding-block: var(--sp-2) 0;
  padding-inline: calc((10 / 390) * 100vw);
  border-bottom: 1px solid var(--clr-accent);

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

    h3 {
      font-size: var(--h4-fz);
      font-weight: var(--bold);
      text-align: center;
    }
  }

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

  .sec-nav__item {}

  .sec-nav__item-link {
    display: block;
    width: 100%;
    border-radius: var(--sp-1) var(--sp-1) 0 0;
    background-color: var(--clr-white);
    padding: var(--sp-1) calc((10 / 390) * 100vw);
    border: 1px solid #1c1b1f;
    border-bottom: none;

    span {
      font-size: var(--tiny-fz);
      font-weight: var(--bold);
      padding-right: var(--sp-2);
      position: relative;
      white-space: nowrap;

      &::before {
        content: "";
        position: absolute;
        inset: 0 0 0 auto;
        margin-block: auto;
        width: calc((14 / 390) * 100vw);
        height: calc((14 / 390) * 100vw);
        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-2);

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

  .sec-cnt__text {
    font-size: calc((10 / 390) * 100vw);
    font-weight: var(--regular);
    margin-bottom: var(--sp-1);
  }

  /* .sec-cnt__list {
    margin-bottom: var(--sp-5);
  }

  .sec-cnt__item-link {
    display: block;
    padding: var(--sp-2) var(--sp-3) var(--sp-2) 0;
    border-bottom: 1px solid var(--clr-accent);
    position: relative;

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

    span {
      font-size: var(--small-fz);
      font-weight: var(--bold);
    }
  } */

  .sec-cnt__list {
    display: flex;
    justify-content: start;
    align-items: stretch;
    flex-flow: row wrap;
    gap: var(--sp-2) var(--sp-1);
    margin-bottom: var(--sp-5);
  }

  .sec-cnt__item {}

  .sec-cnt__item-link {
    display: block;
    padding: var(--sp-1) calc((12 / 390) * 100vw);
    border: 1px solid #1c1b1f;
    border-radius: calc((20 / 390) * 100vw);
    background-color: var(--clr-white);

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

    &:hover {
      background-color: #1c1b1f;
      border: 1px solid #1c1b1f;
      color: var(--clr-white);
    }
  }
}

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

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

.container {
  .container__item {
    width: 100%;
    display: flex;
    justify-content: start;
    align-items: start;
    flex-flow: row wrap;
    gap: var(--sp-5);
    padding-top: var(--sp-2);

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

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

    h4 {
      font-size: calc((24 / 390) * 100vw);
      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: 100%;
    /* 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: calc((30 / 390) * 100vw);
    margin-bottom: var(--sp-1);
    padding-bottom: var(--sp-1);
    border-bottom: 1px solid var(--clr-accent);

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

      &::before {
        content: "";
        position: absolute;
        inset: 0 0 auto auto;
        width: calc((26 / 390) * 100vw);
        height: calc((26 / 390) * 100vw);
        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);
      }
    }
  }
}