/* ============================================================
   SYSTEM PAGE Styles
   BEM: .pSystem__*
   ============================================================ */

/* --- Section共通見出し --- */
.pSystem__section-heading {
  font-family: var(--jp-font);
  font-size: calc(32rem / 16);           /* 48×0.667 */
  font-weight: 500;
  letter-spacing: 0.1em;
  color: #231815;
  margin-bottom: calc(48rem / 16);
}

/* =============================================================
   Section 1: 福利厚生
   ============================================================= */
.pSystem__welfare {
  background-color: #fff;
  padding: calc(80rem / 16) calc(32rem / 16) calc(80rem / 16);
}

.pSystem__welfare-inner {
  max-width: var(--container-max);
  margin: 0 auto;
}

/* 福利厚生グループ（入社直後 / 配属後 / その他） */
.pSystem__welfare-group {
  margin-bottom: calc(56rem / 16);
}

.pSystem__welfare-group:last-child {
  margin-bottom: 0;
}

.pSystem__welfare-group-title {
  font-family: var(--jp-font);
  font-size: calc(20rem / 16);           /* 28×0.667 */
  font-weight: 500;
  letter-spacing: 0.005em;
  color: #231815;
  margin-bottom: calc(24rem / 16);
  padding-bottom: calc(8rem / 16);
  border-bottom: 1px solid rgba(27, 58, 92, 0.2);
}

/* 手当2列グリッド */
.pSystem__benefit-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  align-items: start;
  gap: calc(32rem / 16);
}

.pSystem__benefit-item {
  display: flex;
  flex-direction: column;
  gap: calc(12rem / 16);
}

.pSystem__benefit-name {
  font-family: var(--jp-font);
  font-size: calc(18rem / 16);           /* 28×0.667≈19 */
  font-weight: 500;
  letter-spacing: 0.005em;
  color: #0063ae;
}

.pSystem__benefit-desc {
  font-size: calc(14rem / 16);           /* 16.3×0.667≈11 */
  font-weight: 400;
  line-height: 1.75;
  letter-spacing: 0.075em;
  color: #231815;
  text-align: justify;
}

/* 社員の声 */
.pSystem__benefit-voice {
  margin-top: calc(4rem / 16);
  padding: calc(14rem / 16) calc(16rem / 16);
  background-color: rgba(0, 99, 174, 0.05);
  border-left: 3px solid #0063ae;
  border-radius: 0 4px 4px 0;
}

.pSystem__benefit-voice-head {
  display: flex;
  align-items: center;
  gap: calc(6rem / 16);
  margin-bottom: calc(8rem / 16);
}

/* 顔写真つきのVOICE見出し */
.pSystem__benefit-voice-head--avatar {
  gap: calc(12rem / 16);
}

.pSystem__benefit-voice-avatar {
  width: calc(52rem / 16);
  height: calc(52rem / 16);
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.pSystem__benefit-voice-head-text {
  display: flex;
  flex-direction: column;
  gap: calc(2rem / 16);
}

.pSystem__benefit-voice-label {
  font-family: var(--en-font-sans);
  font-size: calc(10rem / 16);
  font-weight: 600;
  letter-spacing: 0.15em;
  color: #0063ae;
  text-transform: uppercase;
}

.pSystem__benefit-voice-name {
  font-family: var(--jp-font);
  font-size: calc(13rem / 16);
  font-weight: 500;
  letter-spacing: 0.05em;
  color: #231815;
}

.pSystem__benefit-voice-text {
  font-size: calc(13rem / 16);
  font-weight: 400;
  line-height: 1.7;
  letter-spacing: 0.05em;
  color: #4a4a4a;
  text-align: justify;
}

/* 社員の声つき項目は全幅1カラム化し、コメントを説明の直下にコンテンツ幅いっぱいで縦積み */
.pSystem__benefit-item--featured {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  gap: calc(16rem / 16);
}

.pSystem__benefit-feature-body {
  display: flex;
  flex-direction: column;
  gap: calc(12rem / 16);
}

.pSystem__benefit-item--featured .pSystem__benefit-voice {
  margin-top: 0;
  background-color: rgba(0, 99, 174, 0.06);
}

/* 写真ストリップ（親睦会など）は voice の下段に2枚並べる */
.pSystem__benefit-photos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: calc(12rem / 16);
  margin-top: calc(4rem / 16);
}

.pSystem__benefit-photos img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: 4px;
  display: block;
}

/* =============================================================
   Section 2: キャリアイメージと研修
   ============================================================= */
.pSystem__career {
  background-color: #dce9ef;
  padding: calc(80rem / 16) calc(32rem / 16) calc(100rem / 16);
}

.pSystem__career-inner {
  max-width: var(--container-max);
  margin: 0 auto;
}

/* キャリアパス */
.pSystem__career-chart-wrap {
  margin-bottom: calc(72rem / 16);
}

.pSystem__career-subtitle {
  font-family: var(--jp-font);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-wide);
  color: var(--navy);
  margin-bottom: calc(20rem / 16);
}

.pSystem__career-chart {
  width: 100%;
  aspect-ratio: 1200 / 600;
  background: var(--color-placeholder);
}

/* 拠点別ブロック（御徒町 / 茨城） */
.pSystem__training-location {
  margin-bottom: calc(64rem / 16);
  padding-top: calc(48rem / 16);
  border-top: 1px solid rgba(27, 58, 92, 0.12);
}

.pSystem__training-location:first-of-type {
  border-top: none;
  padding-top: 0;
}

.pSystem__training-location:last-child {
  margin-bottom: 0;
}

.pSystem__training-location-title {
  font-family: var(--jp-font);
  font-size: calc(24rem / 16);
  font-weight: 500;
  letter-spacing: 0.1em;
  color: #0063ae;
  margin-bottom: calc(36rem / 16);
  padding-bottom: calc(12rem / 16);
  border-bottom: 2px solid #0063ae;
}

/* 職種ブロック */
.pSystem__training-job {
  margin-bottom: calc(48rem / 16);
}

.pSystem__training-job:last-child {
  margin-bottom: 0;
}

.pSystem__training-job-title {
  font-family: var(--jp-font);
  font-size: calc(18rem / 16);
  font-weight: 500;
  letter-spacing: 0.08em;
  color: #231815;
  margin-bottom: calc(24rem / 16);
  padding: calc(10rem / 16) calc(16rem / 16);
  background-color: rgba(0, 99, 174, 0.08);
  border-radius: 4px;
}

/* ステップ群 */
.pSystem__training-steps {
  display: flex;
  flex-direction: column;
  gap: calc(28rem / 16);
}

.pSystem__training-step {
  padding-left: calc(20rem / 16);
  border-left: 3px solid #0063ae;
}

.pSystem__training-step-title {
  display: block;
  font-family: var(--jp-font);
  font-size: calc(16rem / 16);
  font-weight: 500;
  letter-spacing: 0.05em;
  color: #0063ae;
  margin-bottom: calc(10rem / 16);
}

.pSystem__training-step-text {
  font-family: var(--jp-font);
  font-size: calc(14rem / 16);
  font-weight: 400;
  line-height: 1.85;
  letter-spacing: 0.075em;
  color: #231815;
}

.pSystem__training-step-text p {
  margin: 0 0 calc(8rem / 16);
}

.pSystem__training-step-text p:last-child {
  margin-bottom: 0;
}

/* 補足テキスト */
.pSystem__training-note {
  font-family: var(--jp-font);
  font-size: calc(13rem / 16);
  font-weight: 400;
  line-height: 1.75;
  letter-spacing: 0.075em;
  color: #606060;
  margin-top: calc(24rem / 16);
  padding: calc(16rem / 16) calc(20rem / 16);
  background-color: rgba(255, 255, 255, 0.6);
  border-radius: 4px;
}

/* 旧グリッド（互換用に残置） */
.pSystem__training-group {
  margin-bottom: calc(56rem / 16);
  padding-top: calc(48rem / 16);
  border-top: 1px solid rgba(27, 58, 92, 0.12);
}

.pSystem__training-group:first-of-type {
  border-top: none;
  padding-top: 0;
}

.pSystem__training-group-title {
  font-family: var(--jp-font);
  font-size: calc(20rem / 16);
  font-weight: 500;
  letter-spacing: 0.005em;
  color: #231815;
  margin-bottom: calc(24rem / 16);
}

.pSystem__training-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: calc(32rem / 16);
}

.pSystem__training-item {
  display: flex;
  flex-direction: column;
  gap: calc(12rem / 16);
}

.pSystem__training-name {
  font-family: var(--jp-font);
  font-size: calc(18rem / 16);
  font-weight: 500;
  letter-spacing: 0.005em;
  color: #0063ae;
}

.pSystem__training-desc {
  font-size: calc(14rem / 16);
  font-weight: 400;
  line-height: 1.75;
  letter-spacing: 0.075em;
  color: #231815;
}

/* =============================================================
   Responsive
   ============================================================= */
@media (max-width: 1024px) {
  .pSystem__benefit-list,
  .pSystem__training-list {
    grid-template-columns: repeat(2, 1fr);
    gap: calc(24rem / 16);
  }
}

@media (max-width: 768px) {
  .pSystem__welfare {
    padding: calc(56rem / 16) calc(16rem / 16);
  }

  .pSystem__career {
    padding: calc(56rem / 16) calc(16rem / 16) calc(80rem / 16);
  }

  .pSystem__section-heading {
    font-size: calc(22rem / 16);
    margin-bottom: calc(32rem / 16);
  }

  .pSystem__benefit-list,
  .pSystem__training-list {
    grid-template-columns: 1fr;
    gap: calc(24rem / 16);
  }

  .pSystem__benefit-photos {
    grid-template-columns: 1fr;
  }

  .pSystem__welfare-group {
    margin-bottom: calc(40rem / 16);
  }

  .pSystem__training-group {
    margin-bottom: calc(40rem / 16);
    padding-top: calc(32rem / 16);
  }

  /* 研修制度（拠点別） */
  .pSystem__training-location {
    margin-bottom: calc(48rem / 16);
    padding-top: calc(32rem / 16);
  }

  .pSystem__training-location-title {
    font-size: calc(20rem / 16);
    margin-bottom: calc(24rem / 16);
  }

  .pSystem__training-job {
    margin-bottom: calc(36rem / 16);
  }

  .pSystem__training-job-title {
    font-size: calc(15rem / 16);
  }

  .pSystem__training-steps {
    gap: calc(20rem / 16);
  }

  .pSystem__training-step {
    padding-left: calc(16rem / 16);
  }

  .pSystem__training-step-title {
    font-size: calc(14rem / 16);
  }

  .pSystem__training-step-text {
    font-size: calc(13rem / 16);
  }

  .pSystem__training-note {
    font-size: calc(12rem / 16);
    padding: calc(12rem / 16) calc(16rem / 16);
  }
}

@media (prefers-reduced-motion: reduce) {
  .pSystem__section-heading,
  .pSystem__welfare-group,
  .pSystem__career-chart-wrap,
  .pSystem__training-group {
    transition: none;
    animation: none;
  }
}