@charset "UTF-8";



.jobs-page {
  --jobs-green: #6b7e74;   
  --jobs-text: #272d31;    
  --jobs-beige: #e9e5df;   
  --jobs-gothic: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic", "YuGothic", "Meiryo", sans-serif;
  --jobs-pad: clamp(20px, calc(20px + 196 * var(--fluid)), 216px); 
  --jobs-card-gap: 15px;

  background-color: #ffffff;
  color: var(--jobs-text);
}

.jobs-inner {
  width: 100%;
  max-width: 1920px;
  margin: 0 auto;
  padding: 0 var(--jobs-pad);
  box-sizing: border-box;
}


.jobs-label {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-en, 'Bentham', serif);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0.02em;
  color: var(--jobs-green);
}


.jobs-label__no::after {
  content: '';
  display: inline-block;
  width: 1px;
  height: 0.85em;
  margin: 0 0.52em;
  vertical-align: -0.1em;
  background-color: currentColor;
}

.jobs-label__sub {
  margin-left: 0.3em;
  font-size: 0.7em;
}


.jobs-intro {
  padding: clamp(40px, calc(40px + 15 * var(--fluid)), 55px) 0 clamp(80px, calc(80px + 110 * var(--fluid)), 190px);
  text-align: center;
}

.jobs-intro__title {
  margin-bottom: clamp(48px, calc(48px + 92 * var(--fluid)), 140px);
  font-size: clamp(20px, calc(20px + 20 * var(--fluid)), 40px);
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0.2em;
  padding-left: 0.2em; 
  color: var(--jobs-text);
}

.jobs-intro__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75em 3.55em;
  max-width: 31em; 
  margin: 0 auto;
  font-size: clamp(16px, calc(16px + 20 * var(--fluid)), 36px);
  list-style: none;

  @media (max-width: 768px) {
    gap: 0.9em 1.6em;
    max-width: none;
  }

  & a:hover {
    opacity: 0.6;
  }
}


.jobs-cat {
  padding: clamp(60px, calc(60px + 50 * var(--fluid)), 110px) 0;
  scroll-margin-top: 80px; 

  &.jobs-cat--beige {
    background-color: var(--jobs-beige);
  }
}


.jobs-cat__head {
  display: grid;
  grid-template-columns: minmax(0, 841fr) minmax(0, 590fr);
  grid-template-areas:
    "title title"
    "catch media"
    "lead  media";
  grid-template-rows: auto auto 1fr;
  column-gap: clamp(32px, calc(32px + 25 * var(--fluid)), 57px);
  margin-bottom: clamp(40px, calc(40px + 40 * var(--fluid)), 80px);

  
  &:last-child {
    margin-bottom: 0;
  }

  @media (max-width: 768px) {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "title"
      "catch"
      "media"
      "lead";
    grid-template-rows: auto;
  }
}

.jobs-cat__title {
  grid-area: title;
  font-size: clamp(28px, calc(28px + 24 * var(--fluid)), 52px);
  line-height: 1;
}

.jobs-cat__catch {
  grid-area: catch;
  margin-top: clamp(12px, calc(12px + 10 * var(--fluid)), 22px);
  font-size: clamp(18px, calc(18px + 16 * var(--fluid)), 34px);
  font-weight: 600;
  line-height: 1.5;
  text-box-trim: trim-both;
  letter-spacing: 0.12em;
  color: var(--jobs-green);
}

.jobs-cat__lead {
  grid-area: lead;
  margin-top: clamp(20px, calc(20px + 15 * var(--fluid)), 35px);
  font-size: clamp(14px, calc(14px + 4 * var(--fluid)), 18px);
  line-height: 2.13;
  letter-spacing: 0.08em;

  @media (max-width: 768px) {
    line-height: 2.1;
  }
}

.jobs-cat__media {
  grid-area: media;
  align-self: start;
  margin-top: clamp(12px, calc(12px + 10 * var(--fluid)), 22px); 

  @media (max-width: 768px) {
    margin-top: 28px;
  }

  & img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 590 / 360;
    object-fit: cover;
  }
}


.jobs-cards {
  position: relative;
  container-type: inline-size; 
}

.jobs-cards__list {
  list-style: none;
}

.jobs-cards:not(.jobs-cards--slider) .jobs-cards__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--jobs-card-gap);

  @media (max-width: 768px) {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 40px;
  }
}

.jobs-card {
  height: auto; 
}

.jobs-card__media img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 737 / 464;
  object-fit: cover;
}

.jobs-card__title {
  margin-top: clamp(14px, calc(14px + 8 * var(--fluid)), 22px);
  font-family: var(--jobs-gothic);
  font-size: clamp(16px, calc(16px + 8 * var(--fluid)), 24px);
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.06em;
  color: var(--jobs-green);
}

.jobs-card__text {
  margin-top: clamp(4px, calc(4px + 4 * var(--fluid)), 8px);
  font-size: clamp(14px, calc(14px + 4 * var(--fluid)), 18px);
  line-height: 1.95;
  letter-spacing: 0.08em;

  @media (max-width: 768px) {
    letter-spacing: 0.06em;
  }
}


.jobs-cards__arrow {
  --arrow-w: clamp(24px, calc(24px + 37 * var(--fluid)), 61px);

  position: absolute;
  top: calc((100cqw - var(--jobs-card-gap)) / 2 * 464 / 737 / 2);
  z-index: 2;
  width: var(--arrow-w);
  aspect-ratio: 62 / 120;
  padding: 0;
  border: 0;
  background-color: var(--jobs-green);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 62 120'%3E%3Cpolyline points='61,1 1,60 61,119' fill='none' stroke='%23000' stroke-width='2'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 62 120'%3E%3Cpolyline points='61,1 1,60 61,119' fill='none' stroke='%23000' stroke-width='2'/%3E%3C/svg%3E") center / contain no-repeat;
  cursor: pointer;
  transition: opacity 0.3s ease;

  &:hover {
    opacity: 0.6;
  }

  &:focus-visible {
    outline: 2px solid var(--jobs-green);
    outline-offset: 4px;
  }

  @media (max-width: 768px) {
    --arrow-w: 20px;
    top: calc(100cqw * 464 / 737 / 2);
    background-color: #ffffff;
    filter: drop-shadow(0 0 4px rgba(0, 0, 0, 0.5));
  }
}

.jobs-cards__arrow--prev {
  left: calc(var(--jobs-pad) / -2);
  transform: translate(-50%, -50%);

  @media (max-width: 768px) {
    left: 12px;
    transform: translateY(-50%);
  }
}

.jobs-cards__arrow--next {
  right: calc(var(--jobs-pad) / -2);
  transform: translate(50%, -50%) scaleX(-1);

  @media (max-width: 768px) {
    right: 12px;
    transform: translateY(-50%) scaleX(-1);
  }
}