.fv-wrapper {
  display: flex;
  align-items: flex-end;
  aspect-ratio: 1440 / 400;
  background-image: url(../image/job/fv-job.webp);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding: clamp(
      72px * var(--fluid-min-ratio),
      72 * var(--fluid),
      72px * var(--fluid-max-ratio)
    )
    clamp(
      120px * var(--fluid-min-ratio),
      120 * var(--fluid),
      120px * var(--fluid-max-ratio)
    );
}

.title > p {
  position: relative;
  gap: clamp(
    16px * var(--fluid-min-ratio),
    16 * var(--fluid),
    16px * var(--fluid-max-ratio)
  );
  color: var(--color-primaryWhite);
  font-size: clamp(
    16px * var(--fluid-min-ratio),
    16 * var(--fluid),
    16px * var(--fluid-max-ratio)
  );
}

.title-content {
  flex-direction: column;
  align-items: flex-start;
  padding: 0;
}

.title-content h1 {
  margin: 0;
  color: var(--color-primaryWhite);
  font-size: clamp(
    48px * var(--fluid-min-ratio),
    48 * var(--fluid),
    48px * var(--fluid-max-ratio)
  );
  line-height: 1.3;
  letter-spacing: 1.5px;
}

.title-content p.text-summary {
  color: var(--color-primaryWhite);
  font-size: clamp(
    16px * var(--fluid-min-ratio),
    16 * var(--fluid),
    16px * var(--fluid-max-ratio)
  );
  font-weight: bold;
  line-height: 1.8;
}

.breadcrumb {
  max-inline-size: clamp(
    1200px * var(--fluid-min-ratio),
    1200 * var(--fluid),
    1200px
  );
  inline-size: 100%;
  margin-block-start: clamp(
    24px * var(--fluid-min-ratio),
    24 * var(--fluid),
    24px
  );
  margin-inline: auto;
}

.job-list {
  max-inline-size: clamp(
    1200px * var(--fluid-min-ratio),
    1200 * var(--fluid),
    1200px
  );
  inline-size: 100%;
  margin-block: clamp(80px * var(--fluid-min-ratio), 80 * var(--fluid), 80px)
    clamp(160px * var(--fluid-min-ratio), 160 * var(--fluid), 160px);
  margin-inline: auto;
}

.job-list .sec-inner {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(40px * var(--fluid-min-ratio), 40 * var(--fluid), 40px);
}

.job-list article {
  display: grid;
  grid-template-rows: 1fr;
}

.job-list article > a {
  display: flex;
  flex-direction: column;
  block-size: 100%;
  border-radius: clamp(16px * var(--fluid-min-ratio), 16 * var(--fluid), 16px);
  overflow: hidden;
  box-shadow: 0 0 22px 0 rgba(151, 151, 151, 0.1);
}

.job-list article .img-area {
  aspect-ratio: 373 / 230;
  border-radius: clamp(16px * var(--fluid-min-ratio), 16 * var(--fluid), 16px)
    clamp(16px * var(--fluid-min-ratio), 16 * var(--fluid), 16px) 0 0;
  overflow: hidden;
}

.job-list article .img-area img {
  object-fit: cover;
  object-position: center;
  inline-size: 100%;
  height: 100%;
}

.job-list article .text-area {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: clamp(16px * var(--fluid-min-ratio), 16 * var(--fluid), 16px);
  padding: clamp(16px * var(--fluid-min-ratio), 16 * var(--fluid), 16px);
  line-height: 1.3;
  letter-spacing: 1.37px;
  background-color: var(--color-primaryWhite);
  overflow: hidden;
}

.job-list article .text-area h2 {
  font-size: clamp(24px * var(--fluid-min-ratio), 24 * var(--fluid), 24px);
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

p.job {
  display: flex;
  align-items: center;
  gap: clamp(8px * var(--fluid-min-ratio), 8 * var(--fluid), 8px);
  color: var(--color-primaryOrange);
}

p.job img {
  inline-size: clamp(14px * var(--fluid-min-ratio), 14 * var(--fluid), 14px);
}

ul.job-info {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(8px * var(--fluid-min-ratio), 8 * var(--fluid), 8px);
}

ul.job-info li {
  padding-block: clamp(4px * var(--fluid-min-ratio), 4 * var(--fluid), 4px);
  padding-inline: clamp(14px * var(--fluid-min-ratio), 14 * var(--fluid), 14px);
  font-size: clamp(13px * var(--fluid-min-ratio), 13 * var(--fluid), 13px);
  font-weight: 500;
  line-height: 1;
  letter-spacing: 1.37px;
  color: var(--color-breadcrumb);
  border: 1px solid var(--color-breadcrumb);
  border-radius: 100vmax;
}

.post-area {
  max-inline-size: clamp(
    1200px * var(--fluid-min-ratio),
    1200 * var(--fluid),
    1200px
  );
  inline-size: 100%;
  margin-block: clamp(80px * var(--fluid-min-ratio), 80 * var(--fluid), 80px)
    clamp(160px * var(--fluid-min-ratio), 160 * var(--fluid), 160px);
  margin-inline: auto;
}

.post-area .sec-inner {
  padding: clamp(64px * var(--fluid-min-ratio), 64 * var(--fluid), 64px);
  border-radius: clamp(16px * var(--fluid-min-ratio), 16 * var(--fluid), 16px);
  box-shadow: 0 0 24px 0 rgba(14, 14, 14, 0.1);
  background-color: var(--color-primaryWhite);
}

.post-area article {
  display: flex;
  gap: clamp(80px * var(--fluid-min-ratio), 80 * var(--fluid), 80px);
}

.post-area .sec-inner h2 {
  font-size: clamp(32px * var(--fluid-min-ratio), 32 * var(--fluid), 32px);
  line-height: 1.3;
  letter-spacing: 5%;
}

.post-area p.job {
  margin-block: clamp(32px * var(--fluid-min-ratio), 32 * var(--fluid), 32px)
    clamp(16px * var(--fluid-min-ratio), 16 * var(--fluid), 16px);
  line-height: 1.3;
  letter-spacing: 1.37px;
}

.job-description {
  margin-block: clamp(48px * var(--fluid-min-ratio), 48 * var(--fluid), 48px)
    clamp(40px * var(--fluid-min-ratio), 40 * var(--fluid), 40px);
}

.job-description .list-item {
  display: flex;
  gap: clamp(80px * var(--fluid-min-ratio), 80 * var(--fluid), 80px);
  padding-block: clamp(24px * var(--fluid-min-ratio), 24 * var(--fluid), 24px);
  border-bottom: 1px solid var(--color-borderGray);
  line-height: 1.8;
}

.job-description .list-item dt {
  min-inline-size: clamp(
    160px * var(--fluid-min-ratio),
    160 * var(--fluid),
    160px
  );
  color: var(--color-primaryDarkGray);
  line-height: 1.7;
  letter-spacing: normal;
}

.job-description .list-item dd {
  font-weight: 500;
  line-height: 1.8;
  letter-spacing: 1.5px;
}

.entry-btn {
  max-inline-size: clamp(
    240px * var(--fluid-min-ratio),
    240 * var(--fluid),
    240px
  );
  margin-inline: auto;
}
.entry-btn .default-btn {
  font-size: clamp(18px * var(--fluid-min-ratio), 18 * var(--fluid), 18px);
}
.entry-btn .default-btn img {
  max-inline-size: clamp(
    24px * var(--fluid-min-ratio),
    24 * var(--fluid),
    24px
  );
}

.back-btn {
  max-inline-size: clamp(
    240px * var(--fluid-min-ratio),
    240 * var(--fluid),
    240px
  );
  margin-block-start: clamp(
    64px * var(--fluid-min-ratio),
    64 * var(--fluid),
    64px
  );
  margin-inline: auto;
}
.back-btn .default-btn {
  font-size: clamp(18px * var(--fluid-min-ratio), 18 * var(--fluid), 18px);
  border-color: var(--color-breadcrumb);
  background-image: none;
  background-color: var(--color-breadcrumb);
}
.back-btn .default-btn img {
  max-inline-size: clamp(
    24px * var(--fluid-min-ratio),
    24 * var(--fluid),
    24px
  );
}

@container (max-width: 600px) {
  .fv-wrapper {
    aspect-ratio: 393 / 350;
    padding: clamp(
        46px,
        calc(46 * var(--fluid-sp)),
        calc(46px * var(--fluid-max-ratio))
      )
      clamp(
        24px,
        calc(24 * var(--fluid-sp)),
        calc(24px * var(--fluid-max-ratio))
      );
    background-image: url(../image/job/fv-job_sp.webp);
  }
  .post-fv .fv-wrapper {
    aspect-ratio: 393 / 240;
  }
  .title-content h1 {
    font-size: clamp(
      30px,
      calc(30 * var(--fluid-sp)),
      calc(30px * var(--fluid-max-ratio))
    );
  }

  .breadcrumb {
    inline-size: auto;
    max-inline-size: none;
    margin-block-start: clamp(
      16px,
      calc(16 * var(--fluid-sp)),
      calc(16px * var(--fluid-max-ratio))
    );
    margin-inline: clamp(
      16px,
      calc(16 * var(--fluid-sp)),
      calc(16px * var(--fluid-max-ratio))
    );
  }

  .title > p {
    font-size: clamp(
      13px,
      calc(13 * var(--fluid-sp)),
      calc(13px * var(--fluid-max-ratio))
    );
  }

  .job-list {
    max-inline-size: none;
    margin-block: clamp(
        24px,
        calc(24 * var(--fluid-sp)),
        calc(24px * var(--fluid-max-ratio))
      )
      clamp(
        64px,
        calc(64 * var(--fluid-sp)),
        calc(64px * var(--fluid-max-ratio))
      );
    padding-inline: clamp(
      24px,
      calc(24 * var(--fluid-sp)),
      calc(24px * var(--fluid-max-ratio))
    );
  }
  .job-list .sec-inner {
    grid-template-columns: auto;
    gap: clamp(
      24px,
      calc(24 * var(--fluid-sp)),
      calc(24px * var(--fluid-max-ratio))
    );
  }
  .job-list article {
    border-radius: clamp(
      16px,
      calc(16 * var(--fluid-sp)),
      calc(16px * var(--fluid-max-ratio))
    );
    overflow: hidden;
  }
  .job-list article .text-area {
    gap: clamp(
      16px,
      calc(16 * var(--fluid-sp)),
      calc(16px * var(--fluid-max-ratio))
    );
    padding: clamp(
      16px,
      calc(16 * var(--fluid-sp)),
      calc(16px * var(--fluid-max-ratio))
    );
  }
  .job-list article .text-area h2 {
    font-size: clamp(
      18px,
      calc(18 * var(--fluid-sp)),
      calc(18px * var(--fluid-max-ratio))
    );
  }

  p.job {
    gap: clamp(
      8px,
      calc(8 * var(--fluid-sp)),
      calc(8px * var(--fluid-max-ratio))
    );
  }
  p.job img {
    inline-size: clamp(
      14px,
      calc(14 * var(--fluid-sp)),
      calc(14px * var(--fluid-max-ratio))
    );
  }
  ul.job-info {
    gap: clamp(
      8px,
      calc(8 * var(--fluid-sp)),
      calc(8px * var(--fluid-max-ratio))
    );
  }
  ul.job-info li {
    padding-block: clamp(
      8px,
      calc(8 * var(--fluid-sp)),
      calc(8px * var(--fluid-max-ratio))
    );
    padding-inline: clamp(
      12px,
      calc(12 * var(--fluid-sp)),
      calc(12px * var(--fluid-max-ratio))
    );
    font-size: clamp(
      13px,
      calc(13 * var(--fluid-sp)),
      calc(13px * var(--fluid-max-ratio))
    );
    line-height: 1;
  }

  .post-area {
    max-inline-size: none;
    margin-block: clamp(
        32px,
        calc(32 * var(--fluid-sp)),
        calc(32px * var(--fluid-max-ratio))
      )
      clamp(
        64px,
        calc(64 * var(--fluid-sp)),
        calc(64px * var(--fluid-max-ratio))
      );
    padding-inline: clamp(
      16px,
      calc(16 * var(--fluid-sp)),
      calc(16px * var(--fluid-max-ratio))
    );
  }
  .post-area .sec-inner {
    padding: clamp(
        24px,
        calc(24 * var(--fluid-sp)),
        calc(24px * var(--fluid-max-ratio))
      )
      clamp(
        16px,
        calc(16 * var(--fluid-sp)),
        calc(16px * var(--fluid-max-ratio))
      );
    border-radius: clamp(
      16px,
      calc(16 * var(--fluid-sp)),
      calc(16px * var(--fluid-max-ratio))
    );
  }
  .post-area .sec-inner h2 {
    font-size: clamp(
      20px,
      calc(20 * var(--fluid-sp)),
      calc(20px * var(--fluid-max-ratio))
    );
  }

  .post-area p.job {
    margin-block: clamp(
        24px,
        calc(24 * var(--fluid-sp)),
        calc(24px * var(--fluid-max-ratio))
      )
      clamp(
        16px,
        calc(16 * var(--fluid-sp)),
        calc(16px * var(--fluid-max-ratio))
      );
  }

  .job-description {
    margin-block: clamp(
      32px,
      calc(32 * var(--fluid-sp)),
      calc(32px * var(--fluid-max-ratio))
    );
  }
  .job-description .list-item {
    flex-direction: column;
    gap: clamp(
      8px,
      calc(8 * var(--fluid-sp)),
      calc(8px * var(--fluid-max-ratio))
    );
    padding-block: clamp(
      12px,
      calc(12 * var(--fluid-sp)),
      calc(12px * var(--fluid-max-ratio))
    );
  }

  .entry-btn,
  .back-btn {
    max-inline-size: clamp(
      240px,
      calc(240 * var(--fluid-sp)),
      calc(240px * var(--fluid-max-ratio))
    );
  }
  .back-btn {
    margin-block-start: clamp(
      40px,
      calc(40 * var(--fluid-sp)),
      calc(40px * var(--fluid-max-ratio))
    );
  }
  .entry-btn .default-btn,
  .back-btn .default-btn {
    padding: clamp(
        12px,
        calc(12 * var(--fluid-sp)),
        calc(12px * var(--fluid-max-ratio))
      )
      clamp(
        24px,
        calc(24 * var(--fluid-sp)),
        calc(24px * var(--fluid-max-ratio))
      );
    font-size: clamp(
      14px,
      calc(14 * var(--fluid-sp)),
      calc(14px * var(--fluid-max-ratio))
    );
  }
  .entry-btn .default-btn img,
  .back-btn .default-btn img {
    max-inline-size: clamp(
      24px,
      calc(24 * var(--fluid-sp)),
      calc(24px * var(--fluid-max-ratio))
    );
  }
}