/* 「仕事を知る」HEROの写真配置 */
.jw-head--photo {
  --hero-paper: #f8f5ef;
  display: grid;
  align-items: center;
  min-height: clamp(420px, 38.7vw, 620px);
  padding: clamp(42px, 5vw, 72px) 0 calc(clamp(42px, 5vw, 72px) + var(--jw-sheet-overlap) / 2);
  background: var(--hero-paper);
}
.jw-head__media {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
}
.jw-head__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: right top;
}
.jw-head__media::after {
  position: absolute;
  inset: 0;
  content: "";
  background: linear-gradient(90deg, #f8f5efe8 0%, #f8f5efba 27%, #f8f5ef7a 44%, #f8f5ef24 57%, #f8f5ef00 65%);
}
.jw-head--photo .jw-head__inner {
  width: 100%;
  max-width: 1440px;
  padding-inline: clamp(24px, 5.56vw, 80px);
}
.jw-head--photo .jw-head__copy { max-width: min(47vw, 590px); }
.jw-head--photo .jw-head__title {
  font-size: clamp(32px, 3.15vw, 50px);
  line-height: 1.28;
  letter-spacing: -.025em;
}
.jw-head__line { display: block; }
.jw-head--photo .jw-head__lead {
  max-width: 29em;
  margin-top: 23px;
  font-size: clamp(15px, 1.15vw, 17px);
  line-height: 1.9;
  text-wrap: pretty;
}

@media (min-width: 1200px) {
  .jw-head--photo .jw-head__lead { max-width: 31em; }
}

@media (max-width: 900px) {
  .jw-head--photo {
    display: block;
    min-height: 0;
    padding: 0 0 calc(clamp(40px, 7.6vw, 65px) + var(--jw-sheet-overlap) / 2);
  }
  .jw-head__media {
    position: relative;
    z-index: 0;
    height: clamp(212px, 62vw, 365px);
  }
  .jw-head__media img { object-position: right center; }
  .jw-head__media::after {
    background: linear-gradient(to bottom, transparent calc(100% - 40px), var(--hero-paper) 100%);
  }
  .jw-head--photo .jw-head__inner { padding-inline: clamp(20px, 5.6vw, 48px); }
  .jw-head--photo .jw-head__copy {
    max-width: 590px;
    margin-inline: auto;
    padding-top: 13px;
  }
  .jw-head--photo .jw-head__title { font-size: clamp(25px, 6.6vw, 42px); }
  .jw-head--photo .jw-head__lead { margin-top: 18px; }
}

/* TOPと同じ比率で、上の面に角丸の白い面を重ねる。 */
.jw-head--photo + .wt.jw-week { margin-top: calc(-1 * var(--jw-sheet-overlap)); }
