/* ==========================================================================
   福利厚生(recruit-environment) — /recruit/environment/index.php 専用
   ========================================================================== */

.page-recruit-environment {
  --env-pink:      var(--color-accent-pink); /* #D76375 福利厚生ブロック */
  --env-purple:    #A467A0;                  /* 教育・研修ブロック */
  --env-grid-line: #B2E2F9;                  /* 方眼グリッドの線 */
  --env-wm:        rgba(215, 99, 117, 0.2);  /* 英字ウォーターマーク(ピンク系・#D76375 30%) */
  --env-wm-purple: rgba(164, 103, 160, 0.2); /* 英字ウォーターマーク(紫系・#A467A0 30%) */
  --env-overlay-pink:   rgba(215, 99, 117, 0.05); /* #D76375 30%(通常合成) */
  --env-overlay-purple: rgba(164, 103, 160, 0.1); /* #A467A0 30%(通常合成) */
}

.page-recruit-environment .main {
  max-width: none;
  margin: 0;
  padding: 0;
}

/* ==========================================================================
   FV
   ========================================================================== */

.env-hero {
  position: relative;
  width: 100%;
  aspect-ratio: 2562 / 938;
  overflow: hidden;
}

.env-hero img {
  display: block;
  width: 100%;
  height: auto;
}

.env-hero__inner {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(var(--width-content), 100% - 40px);
}

.env-hero__inner > * {
  position: absolute;
  left: 0;
  width: 100%;
  margin: 0;
  color: var(--color-bg);
}

.env-hero__en {
  top: 20.5%; /* 96px */
  font-family: var(--font-base);
  font-size: 1.75rem; /* 28px */
  font-weight: var(--font-weight-normal);
}

.env-hero__title {
  top: 27.7%;
  font-family: var(--font-base);
  font-size: 3.875rem; /* 62px */
  font-weight: var(--font-weight-medium);
}

.env-hero__lead {
  top: 51%;
  font-family: var(--font-round);
  font-size: 1.5rem; /* 24px */
  font-weight: var(--font-weight-normal);
  line-height: 1.9;
}

/* ==========================================================================
   背景グリッド(方眼紙)
   ========================================================================== */

.env-grid {
  width: 100%;
  background-color: var(--color-bg);
  background-image:
    linear-gradient(to right,  var(--env-grid-line) 0 1px, transparent 1px 100%),
    linear-gradient(to bottom, var(--env-grid-line) 0 1px, transparent 1px 100%);
  background-size: 24px 24px;
  padding-bottom: 150px;
}

.env-grid--flush-bottom {
  padding-bottom: 0;
}

.env-section {
  display: flow-root;
  width: 100%;
  
}

.env-section--tint-pink,
.env-section--tint-purple {
  margin-top: 75px;
  padding-bottom: 75px;
}

.env-section--tint-pink {
  background-color: var(--env-overlay-pink);
}

.env-section--tint-purple {
  background-color: var(--env-overlay-purple);
}

/* ==========================================================================
   セクション見出し(「ノ」マーク + 日本語見出し + 英字ウォーターマーク)
   ========================================================================== */
.env-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-top: 75px; /* 前セクションのカード下端→見出し字面top(最初の見出しも同値で統一) */
  margin-bottom: 24px; /* 見出し字面bottom→次のカード上端 */
}

.env-heading__title {
  margin: 0;
  color: var(--color-text);
  font-family: var(--font-round);
  font-size: 2rem; /* 32px */
  font-weight: var(--font-weight-bold);
  white-space: nowrap;
}

.env-heading__mark {
  display: inline-block;
  width: 28.5px;
  height: 28.5px;
  margin-right: 7.5px;
  vertical-align: middle;
}

.env-heading__watermark {
  margin: 0;
  font-size: 3.25rem; /* 52px */
  font-weight: var(--font-weight-bold);
  white-space: nowrap;
}

.env-heading--pink .env-heading__watermark {
  color: var(--env-wm);
}

.env-heading--purple .env-heading__watermark {
  color: var(--env-wm-purple);
}

/* ==========================================================================
   福利厚生カード(アイコン付き・全18枚)
   ========================================================================== */
.env-cards {
  display: grid;
  gap: 52px;
}

.env-cards--cols-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.env-cards--cols-3 .env-card:nth-of-type(1) {
  grid-column: 1;
  grid-row: 1;
}

.env-cards--cols-3 .env-card:nth-of-type(2) {
  grid-column: 2;
  grid-row: 1;
}

.env-cards--cols-3 .env-card:nth-of-type(3) {
  grid-column: 3;
  grid-row: 1;
}

.env-cards--cols-3 .env-note {
  grid-column: 1;
  grid-row: 2;
}

.env-cards--cols-2 {
  grid-template-columns: repeat(2, 474px);
}

.env-card {
  box-sizing: border-box;
  min-height: 236px;
  padding: 15px 25px 25px;
  border: 2px solid var(--env-pink);
  border-radius: 20px;
  background-color: var(--color-bg);
  box-shadow: 4px 4px 0 var(--env-pink);
}

.env-card__icon-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 88px;
}

.env-card__icon {
  display: block;
  width: auto;
}

.env-card__title {
  margin: 20px 0 0;
  color: var(--env-pink);
  font-family: var(--font-round);
  font-size: 1.625rem; /* 26px */
  font-weight: var(--font-weight-bold);
  text-align: center;
}

.env-card__text {
  margin: 22px 0 0;
  color: var(--color-text);
  font-family: var(--font-round);
  font-size: 1rem; /* 16px */
  line-height: 1.7;
  text-align: left;
}

.env-note {
  grid-column: 1;
  margin: 0;
  color: var(--color-text);
  font-family: var(--font-round);
  font-size: 0.875rem; /* 14px */
  line-height: 1.4;
}

/* ==========================================================================
   教育・研修制度バンド(FVと同じ: フルブリード画像 + テキスト絶対配置)
   ========================================================================== */
.env-education {
  position: relative;
  width: 100%;
  aspect-ratio: 2562 / 1120;
  overflow: hidden;
}

.env-education img {
  display: block;
  width: 100%;
  height: auto;
}

.env-education__inner {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: var(--width-content);
  display: flex;
  flex-direction: column;
  justify-content: center;
  box-sizing: border-box;
  padding-left: 588px;
}

.env-education__en,
.env-education__title,
.env-education__text {
  margin: 0;
  color: var(--color-bg);
  text-align: left;
}

.env-education__en {
  font-family: var(--font-base);
  font-size: 1.75rem; /* 28px */
  font-weight: var(--font-weight-normal);
}

.env-education__title {
  margin-top: 10px;
  font-family: var(--font-base);
  font-size: 3.875rem; /* 62px */
  font-weight: var(--font-weight-medium);
  white-space: nowrap;
}

.env-education__text {
  margin-top: 48px;
  width: 430px;
  font-family: var(--font-round);
  font-size: 1.375rem; /* 22px */
  font-weight: var(--font-weight-normal);
  line-height: 2.0;
}

/* ==========================================================================
   研修カード(写真+テキスト・4枚)
   ========================================================================== */
.env-training-cards {
  display: grid;
  grid-template-columns: repeat(2, 474px);
  gap: 52px;
}

.env-training-card {
  display: flex;
  box-sizing: border-box;
  min-height: 304px;
  border: 2px solid var(--env-purple);
  border-radius: 20px;
  background-color: var(--color-bg);
  box-shadow: 4px 4px 0 var(--env-purple);
  overflow: hidden;
}

.env-training-card__figure {
  flex-shrink: 0;
  width: 215px;
}

.env-training-card__figure img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.env-training-card__body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  box-sizing: border-box;
  padding: 27px 22px;
}

/* 1行でも2行でも中心がカード上端+65px(パネルpadding-top:27px + タイトルゾーンheight:76pxのflex中央) */
.env-training-card__title {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 76px;
  margin: 0;
  color: var(--env-purple);
  font-family: var(--font-round);
  font-size: 1.625rem; /* 26px */
  font-weight: var(--font-weight-bold);
  line-height: 1.33;
  text-align: center;
}

.env-training-card__text {
  margin: 16px 0 0;
  color: var(--color-text);
  font-family: var(--font-round);
  font-size: 1rem; /* 16px */
  line-height: 1.7;
  text-align: left;
}

/* ==========================================================================
   専門研修カード(タブ付き・5枚)
   ========================================================================== */
.env-specialized-cards {
  display: grid;
  grid-template-columns: repeat(2, 474px);
  gap: 50px 52px;
}

.env-specialized-card {
  position: relative;
  box-sizing: border-box;
  min-height: 288px;
  border: 2px solid var(--env-purple);
  border-radius: 20px;
  background-color: var(--color-bg);
  box-shadow: 4px 4px 0 var(--env-purple);
  overflow: hidden;
}

.env-specialized-card__tab {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  width: 265px;
  height: 36px;
  padding-left: 25px;
  background-color: var(--env-purple);
  border-radius: 20px 0 24px 0;
  color: var(--color-bg);
  font-family: var(--font-round);
  font-size: 0.9375rem; /* 15px */
  font-weight: var(--font-weight-bold);
}

.env-specialized-card__photo {
  position: absolute;
  top: 24px;
  right: 21px;
  width: 160px;
  height: 236px;
}

.env-specialized-card__photo img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 10px;
  object-fit: cover;
}

.env-specialized-card__body {
  box-sizing: border-box;
  padding: 55px 25px 20px;
}

.env-specialized-card__title {
  max-width: 250px;
  margin: 0;
  color: var(--env-purple);
  font-family: var(--font-round);
  font-size: 1.625rem; /* 26px */
  font-weight: var(--font-weight-bold);
  line-height: 1.37;
  text-align: left;
}

.env-specialized-card__text {
  max-width: 250px;
  margin: 14px 0 0;
  color: var(--color-text);
  font-family: var(--font-round);
  font-size: 1rem; /* 16px */
  line-height: 1.7;
  text-align: left;
}

.env-specialized-card__history {
  max-width: 250px;
  margin: 24px 0 0;
  color: var(--env-purple);
  font-family: var(--font-round);
  font-size: 0.875rem; /* 14px */
  line-height: 1.55;
  text-align: left;
}

.env-specialized-card__history-label {
  display: block;
}

/* ==========================================================================
   SP(max-width: 768px)
   ========================================================================== */
@media (max-width: 768px) {
  .env-section--tint-pink,
  .env-section--tint-purple {
    margin-top: 50px;
    padding-bottom: 50px;
  }

  .env-hero {
    aspect-ratio: 750 / 956;
  }

  .env-hero__inner {
    left: 0;
    transform: none;
    width: 100%;
    box-sizing: border-box;
    padding-inline: 20px;
    text-align: center;
  }

  .env-hero__en {
    top: 22%;
    font-size: 1rem; /* 16px */
  }

  .env-hero__title {
    top: 26.2%;
    font-size: 2rem; /* 32px */
  }

  .env-hero__lead {
    top: 36.3%;
    font-size: 1rem; /* 16px */
    line-height: 1.9;
  }

  .env-grid {
    padding-bottom: 80px;
  }

  .env-grid--flush-bottom {
    padding-bottom: 0;
  }

  .env-heading {
    flex-direction: column;
    align-items: center;
    margin-top: 50px;
    margin-bottom: 27px;
  }

  .env-heading__watermark {
    order: -1;
    font-size: 1.875rem; /* 30px */
  }

  .env-heading__title {
    font-size: 1.625rem; /* 26px */
    white-space: normal;
    text-align: center;
  }

  .env-heading__mark {
    width: 23px;
    height: 23px;
  }

  .env-cards--cols-3,
  .env-cards--cols-2 {
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 30px;
  }

  .env-cards--cols-3 .env-card:nth-of-type(1),
  .env-cards--cols-3 .env-card:nth-of-type(2),
  .env-cards--cols-3 .env-card:nth-of-type(3),
  .env-cards--cols-3 .env-note {
    grid-column: auto;
    grid-row: auto;
  }

  .env-card {
    width: 300px;
    min-height: 0;
  }

  .env-card__title {
    font-size: 1.5rem; /* 24px */
  }

  .env-education {
    aspect-ratio: 750 / 1012;
  }

  .env-education__inner {
    left: 0;
    transform: none;
    width: 100%;
    top: 7%;
    bottom: 42%;
    align-items: center;
    padding-left: 0;
    padding-inline: 20px;
    text-align: center;
  }

  .env-education__en {
    font-size: 1rem; /* 16px */
  }

  .env-education__title {
    margin-top: 8px;
    font-size: 2rem; /* 32px */
    white-space: normal;
  }

  .env-education__text {
    margin-top: 16px;
    width: auto;
    font-size: 1rem; /* 16px */
    line-height: 1.9;
  }

  .env-training-cards {
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 30px;
  }

  .env-training-card {
    flex-direction: column;
    width: 300px;
    min-height: 0;
  }

  .env-training-card__figure {
    width: 100%;
    aspect-ratio: 504 / 278;
  }

  .env-training-card__body {
    padding: 20px;
  }

  .env-training-card__title {
    min-height: 0;
  }

  .env-specialized-cards {
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 30px;
  }

  .env-specialized-card {
    width: 300px;
  }

  .env-specialized-card__tab {
    position: static;
    width: 100%;
    border-radius: 18px 18px 0 0;
  }

  .env-specialized-card__photo {
    position: static;
    width: 100%;
    height: auto;
    aspect-ratio: 504 / 278;
  }

  .env-specialized-card__photo img {
    border-radius: 0;
  }

  .env-specialized-card__body {
    padding: 20px;
  }

  .env-specialized-card__title,
  .env-specialized-card__text,
  .env-specialized-card__history {
    max-width: none;
  }
}