/*
 * はたらく環境（workstyle）下層ページ専用スタイル。
 * デザイン基準幅: 1920px
 */

.workstyle-page {
  --ws-red: #811c21;
  --ws-red-deep: #751b1e;
  --ws-ink: #333;
  --ws-cream: #fff4d0;
  --ws-line: #480b05;
  --ws-font-yu: "Yu Gothic", YuGothic, "游ゴシック体", "游ゴシック", "Noto Sans JP", sans-serif;
  --ws-font-noto: "Noto Sans JP", sans-serif;
  --ws-font-roboto: "Roboto", "Noto Sans JP", sans-serif;
  font-family: var(--ws-font-noto);
  color: var(--ws-ink);
  overflow-x: clip;
}

.workstyle-page img {
  max-width: 100%;
}

/* hero は下層ページ共通のため site-common.css の .recruit-hero を使用 */

/* ---------------------------------- value */

.ws-value {
  padding: clamp(60px, 6.5vw, 124px) 0 clamp(80px, 8.5vw, 164px);
}

.ws-value__mark {
  width: min(578px, 56vw);
  margin: 0 auto;
}

.ws-value__mark img {
  display: block;
  width: 100%;
  height: auto;
}

.ws-value__body {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: clamp(40px, 8vw, 150px);
  width: min(1200px, 92%);
  margin: clamp(70px, 9.7vw, 186px) auto 0;
}

.ws-value__title {
  text-align: center;
}

.ws-value__eyebrow {
  margin: 0;
  font-family: var(--ws-font-roboto);
  font-weight: 700;
  font-size: clamp(20px, 1.5vw, 29px);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ws-red-deep);
}

.ws-value__heading {
  margin: 10px 0 0;
  font-family: var(--ws-font-yu);
  font-weight: 700;
  font-size: clamp(26px, 2.3vw, 45px);
  line-height: 1.4;
  color: #1e2939;
}

.ws-value__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: clamp(20px, 2vw, 38px);
  font-family: var(--ws-font-yu);
  font-weight: 700;
  font-size: clamp(20px, 1.7vw, 32px);
  line-height: 1.15;
  color: var(--ws-red-deep);
}

/* ---------------------------------- workplace */

.ws-workplace {
  position: relative;
  margin-top: clamp(80px, 9.8vw, 188px);
  padding: clamp(100px, 9.7vw, 187px) 0 clamp(120px, 13.5vw, 260px);
}

/* アーチ部分は roof_border.svg 側に含まれるため、その下からフラットな背景色を敷く */
.ws-workplace::before {
  content: "";
  position: absolute;
  top: 12.08vw;
  right: 0;
  bottom: 0;
  left: 0;
  background: var(--ws-red);
}

.ws-workplace__roof {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  transform: translateY(-37%);
  pointer-events: none;
}

.ws-workplace__roof img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1921 / 376;
}

.ws-workplace__inner {
  position: relative;
  width: min(1400px, 92%);
  margin: 0 auto;
}

.ws-workplace__intro {
  text-align: center;
  color: #fff;
}

.ws-section-eyebrow {
  margin: 0;
  font-family: var(--ws-font-roboto);
  font-weight: 900;
  font-size: clamp(16px, 1.25vw, 24px);
  letter-spacing: 0.11em;
  text-transform: uppercase;
  line-height: 1.4;
}

.ws-workplace__heading {
  margin: clamp(10px, 1vw, 20px) 0 0;
  font-family: var(--ws-font-yu);
  font-weight: 700;
  font-size: clamp(36px, 3.6vw, 70px);
  line-height: 1.2;
  color: #fff;
}

.ws-workplace__lead {
  margin: clamp(20px, 1.8vw, 35px) 0 0;
  font-family: var(--ws-font-yu);
  font-weight: 700;
  font-size: clamp(15px, 1.15vw, 22px);
  line-height: 1.8;
}

.ws-workplace__rows {
  display: grid;
  gap: clamp(60px, 5.2vw, 100px);
  margin-top: clamp(70px, 6.8vw, 131px);
}

.ws-place {
  position: relative;
  display: flex;
}

.ws-place--img-right {
  justify-content: flex-end;
}

.ws-place__img {
  width: 62.9%;
}

.ws-place__img img {
  display: block;
  width: 100%;
  aspect-ratio: 88 / 60;
  object-fit: cover;
  border-radius: 10px;
}

.ws-place__card {
  position: absolute;
  top: 60px;
  width: 50%;
  padding: clamp(32px, 3vw, 58px) clamp(32px, 3.3vw, 64px) clamp(28px, 2.8vw, 54px);
  background: #fff;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.16);
}

.ws-place--img-right .ws-place__card {
  left: 0;
}

.ws-place--img-left .ws-place__card {
  right: 0;
}

.ws-place__heading {
  margin: 0;
  font-family: var(--ws-font-noto);
  font-weight: 700;
  font-size: clamp(22px, 1.7vw, 32px);
  line-height: 1.6;
  color: var(--ws-ink);
}

.ws-place__text {
  margin: clamp(14px, 1.3vw, 25px) 0 0;
  font-size: clamp(14px, 0.95vw, 18px);
  line-height: 1.8;
}

/* ---------------------------------- worktime */

.ws-worktime {
  background: var(--ws-cream);
  padding: clamp(80px, 7.2vw, 139px) 0 clamp(90px, 7.8vw, 150px);
}

.ws-worktime__inner {
  width: min(1200px, 92%);
  margin: 0 auto;
}

.ws-worktime__intro {
  text-align: center;
}

.ws-worktime__intro .ws-section-eyebrow {
  color: var(--ws-red);
}

.ws-worktime__heading {
  margin: clamp(10px, 1vw, 20px) 0 0;
  font-family: var(--ws-font-noto);
  font-weight: 700;
  font-size: clamp(36px, 3.6vw, 70px);
  line-height: 1.2;
  color: var(--ws-ink);
}

.ws-time {
  display: flex;
  align-items: center;
  gap: clamp(32px, 3.4vw, 65px);
  margin-top: clamp(56px, 5.4vw, 103px);
}

.ws-time__img {
  flex: 0 0 37%;
}

.ws-time__img img {
  display: block;
  width: 100%;
  aspect-ratio: 443 / 290;
  object-fit: cover;
  border-radius: 10px;
}

.ws-time__heading {
  margin: 0;
  font-family: var(--ws-font-yu);
  font-weight: 700;
  font-size: clamp(22px, 1.7vw, 32px);
  line-height: 1.5;
  color: #000;
}

.ws-time__text {
  margin: clamp(12px, 1.2vw, 22px) 0 0;
  font-size: clamp(14px, 0.95vw, 18px);
  line-height: 1.85;
  color: #000;
}

.ws-time__note {
  margin-top: clamp(16px, 1.5vw, 28px);
}

/* リンク・CTA は下層ページ共通のため site-common.css の .recruit-links / .recruit-cta を使用 */

/* ---------------------------------- responsive */

@media (max-width: 900px) {
  .ws-value__body {
    flex-direction: column;
    align-items: center;
    gap: 40px;
  }

  .ws-place {
    display: block;
  }

  .ws-place__img {
    width: 100%;
  }

  .ws-place__card {
    position: relative;
    top: auto;
    width: min(92%, 560px);
    margin: -48px auto 0;
  }

  .ws-place--img-right .ws-place__card,
  .ws-place--img-left .ws-place__card {
    left: auto;
    right: auto;
  }

  .ws-time {
    flex-direction: column;
    align-items: stretch;
  }

  .ws-time__img {
    flex: none;
  }

  .ws-time__img img {
    width: 100%;
  }

}