/* ==========================================================================
   働く環境を知る（Figma: 1:313）
   ========================================================================== */
.p-env__body {
  padding-top: var(--space-48);
  padding-bottom: var(--space-160);
}

/* セクション見出し + 右側リード（Figma: Frame 133 / Frame 177） */
.p-env-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-40);
}

/* --------------------------------------------------------------------------
   キャリアパス・研修制度（Figma: Frame 173 / 1:345）
   -------------------------------------------------------------------------- */
.p-env-career {
  margin-top: var(--space-120);
}

.p-env-steps {
  --step-gap: 0.4464rem;     /* 7.14px（180px幅の平行四辺形を157.14px間隔で配置） */
  --step-inset: 0.9375rem;   /* 15px（傾きで左右にはみ出す分） */
  --step-cell: calc((100% - 7 * var(--step-gap)) / 8);
  --step-skew: -7.94deg;     /* 205px の高さで 28.6px ずれる傾き */
  display: grid;
  grid-template-columns: var(--step-cell) calc(var(--step-cell) * 3 + var(--step-gap) * 2) minmax(0, 1fr);
  column-gap: var(--step-gap);
  margin-top: var(--space-64);
  padding-inline: var(--step-inset);
}

.p-env-steps__group {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
}

.p-env-steps__list {
  display: grid;
  grid-auto-columns: minmax(0, 1fr);
  grid-auto-flow: column;
  column-gap: var(--step-gap);
}

.p-env-step {
  position: relative;
  isolation: isolate;
  height: 12.8125rem; /* 205px */
  padding-top: var(--space-48);
  color: var(--color-text);
  font-family: var(--font-ja);
  text-align: center;
}

.p-env-step::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: var(--z-bg);
  border-radius: var(--radius-md);
  background-color: var(--step-color);
  transform: skewX(var(--step-skew));
}

.p-env-step--1 { --step-color: var(--color-step-1); }
.p-env-step--2 { --step-color: var(--color-step-2); }
.p-env-step--3 { --step-color: var(--color-step-3); }
.p-env-step--4 { --step-color: var(--color-step-4); }
.p-env-step--5 { --step-color: var(--color-step-5); }
.p-env-step--6 { --step-color: var(--color-step-6); }
.p-env-step--7 { --step-color: var(--color-step-7); }
.p-env-step--8 { --step-color: var(--color-step-8); }

.p-env-step--5,
.p-env-step--6,
.p-env-step--7,
.p-env-step--8 {
  color: var(--color-white);
}

.p-env-step__title {
  font-size: var(--fs-20);
  font-weight: var(--fw-medium);
  line-height: var(--lh-tight);
  white-space: nowrap;
}

.p-env-step__desc {
  margin-top: 2.0625rem; /* 33px */
  padding-right: 0.625rem; /* 傾きに合わせて中心を左へ */
  font-size: var(--fs-16);
  line-height: var(--lh-normal);
  white-space: nowrap;
}

/* 年次バー（Figma: Frame 172 / 矢羽根形） */
.p-env-steps__years {
  order: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(100% + var(--step-gap));
  height: 2rem;
  margin-left: calc(var(--step-inset) * -1);
  background-color: var(--color-step-2);
  font-family: var(--font-ja);
  font-size: var(--fs-16);
  font-weight: var(--fw-medium);
  line-height: var(--lh-tight);
  clip-path: polygon(0 0, calc(100% - 11px) 0, 100% 50%, calc(100% - 11px) 100%, 0 100%, 8px 50%);
}

.p-env-steps__group--1 .p-env-steps__years {
  background-color: var(--color-step-1);
  clip-path: polygon(0 0, calc(100% - 11px) 0, 100% 50%, calc(100% - 11px) 100%, 0 100%);
}

.p-env-steps__group--3 .p-env-steps__years {
  background-color: var(--color-main);
  color: var(--color-white);
}

/* --------------------------------------------------------------------------
   福利厚生・働き方（Figma: Frame 156 / 1:365）
   -------------------------------------------------------------------------- */
.p-env-welfare {
  padding-top: var(--space-120);
  padding-bottom: var(--space-160);
  background-color: var(--color-bg-gray);
}

.p-env-welfare__list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px var(--space-8);
  margin-top: var(--space-64);
}

.p-env-welfare__item {
  /* 2行になる項目を文節で折り返す（auto-phrase 非対応ブラウザは通常の折り返し） */
  word-break: auto-phrase;
  text-wrap: balance;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(var(--space-32) - 1px) var(--space-16);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background-color: var(--color-white);
  color: var(--color-main);
  font-family: var(--font-ja);
  font-size: var(--fs-20);
  font-weight: var(--fw-medium);
  line-height: var(--lh-snug);
  text-align: center;
}

.p-env-welfare__item--large {
  align-items: flex-end;
  gap: 6px;
  height: 7.5rem; /* 120px */
  font-size: var(--fs-40);
}

.p-env-welfare__item--large:not(:first-child) {
  align-items: center;
}

.p-env-welfare__num {
  font-family: var(--font-base);
  font-size: var(--fs-64);
  line-height: var(--lh-deco);
  padding-bottom: 0.3rem;
}

/* --------------------------------------------------------------------------
   オフィス紹介（Figma: Frame 157 / 1:385）
   -------------------------------------------------------------------------- */
.p-env-office {
  padding-top: var(--space-120);
  padding-bottom: 12.5rem; /* 200px */
  border-bottom: 1px solid var(--color-border);
}

.p-env-office__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-40);
}

.p-env-office__text {
  display: flex;
  flex-direction: column;
  gap: var(--space-64);
}

.p-env-office__photo {
  flex-shrink: 0;
  width: 46.875%; /* 600 / 1280 */
  overflow: hidden;
  border-radius: var(--radius-xl);
}

.p-env-office__photo img {
  width: 100%;
  aspect-ratio: 600 / 337;
  object-fit: cover;
}

/* 無限横スクロール（Figma: Frame 189 / 1:396） */
.p-env-marquee {
  margin-top: var(--space-64);
  overflow: hidden;
}

.p-env-marquee__track {
  display: flex;
  width: max-content;
  animation: p-env-marquee var(--duration-marquee) linear infinite;
  animation-delay: calc(var(--duration-marquee) * -0.181); /* Figmaの初期位置（-420px / 1周2320px）から開始 */
}

.p-env-marquee__list {
  display: flex;
  flex-shrink: 0;
  align-items: flex-start;
  gap: var(--space-40);
  padding-right: var(--space-40);
}

.p-env-marquee__item {
  flex-shrink: 0;
  width: 30rem; /* 480px */
  overflow: hidden;
  border-radius: var(--radius-md);
}

.p-env-marquee__item--large {
  width: 37.5rem; /* 600px */
}

.p-env-marquee__item img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

@keyframes p-env-marquee {
  to {
    transform: translateX(-50%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .p-env-marquee__track {
    animation: none;
  }
}

/* 所在地（Figma: Frame 190 / 1:401） */
.p-env-access {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-40);
  margin-top: var(--space-120);
  padding: var(--space-20) var(--space-20) var(--space-20) var(--space-64);
  border-radius: var(--radius-xl);
  background-color: var(--color-bg-gray);
  font-family: var(--font-ja);
}

.p-env-access__info {
  display: flex;
  flex-direction: column;
  gap: var(--space-20);
  min-width: 0;
}

.p-env-access__name {
  width: 33.25rem; /* 532px（下線の長さ） */
  max-width: 100%;
  padding-bottom: var(--space-20);
  border-bottom: 1px solid var(--color-border);
  color: var(--color-main);
  font-size: var(--fs-24);
  font-weight: var(--fw-medium);
  line-height: var(--lh-snug);
}

.p-env-access__address {
  font-size: var(--fs-16);
  line-height: var(--lh-relaxed);
}

.p-env-access__station {
  font-size: var(--fs-14);
  line-height: var(--lh-relaxed);
}

.p-env-access__map {
  flex-shrink: 0;
  width: min(37.5rem, 50%); /* 600px */
  overflow: hidden;
  border-radius: var(--radius-xl);
}

.p-env-access__map iframe {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 600 / 337;
  border: 0;
}

/* --------------------------------------------------------------------------
   Tablet（769〜1100px）
   -------------------------------------------------------------------------- */
@media (max-width: 1100px) and (min-width: 769px) {
  .p-env-head {
    flex-direction: column;
    align-items: flex-start;
  }

  .p-env-step__title {
    font-size: var(--fs-16);
  }

  .p-env-step__desc {
    font-size: var(--fs-12);
    white-space: normal;
  }

  .p-env-welfare__item--large {
    font-size: var(--fs-24);
  }

  .p-env-welfare__num {
    font-size: var(--fs-40);
    padding-bottom: 0.15rem;
  }

  .p-env-access {
    padding-left: var(--space-32);
  }
}

/* --------------------------------------------------------------------------
   SP（〜768px）：キャリアステップは縦タイムラインに組み替え
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  .p-env__body {
    padding-top: var(--space-32);
    padding-bottom: var(--space-96);
  }

  .p-env-head {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-24);
  }

  .p-env-career {
    margin-top: var(--space-64);
  }

  .p-env-steps {
    display: block;
    margin-top: var(--space-40);
    padding-inline: 0;
  }

  .p-env-steps__group {
    gap: var(--space-12);
  }

  .p-env-steps__group + .p-env-steps__group {
    margin-top: var(--space-24);
  }

  .p-env-steps__years {
    order: 0;
    align-self: flex-start;
    width: auto;
    height: 1.75rem;
    margin-left: 0;
    padding-inline: var(--space-16);
    border-radius: var(--radius-pill);
    clip-path: none;
  }

  .p-env-steps__group--1 .p-env-steps__years,
  .p-env-steps__group--3 .p-env-steps__years {
    width: auto;
    clip-path: none;
  }

  .p-env-steps__list {
    grid-auto-flow: row;
    row-gap: var(--space-8);
    margin-left: var(--space-12);
    padding-left: var(--space-20);
    border-left: 2px dashed var(--color-border);
  }

  .p-env-step {
    display: flex;
    align-items: center;
    gap: var(--space-16);
    height: auto;
    padding: var(--space-16) var(--space-20);
    text-align: left;
  }

  .p-env-step::before {
    transform: none;
  }

  .p-env-step__title {
    flex-shrink: 0;
    width: 4.5em;
    font-size: var(--fs-17);
  }

  .p-env-step__desc {
    margin-top: 0;
    padding-right: 0;
    font-size: var(--fs-14);
    white-space: normal;
  }

  .p-env-step__desc br {
    display: none;
  }

  .p-env-welfare {
    padding-top: var(--space-80);
    padding-bottom: var(--space-96);
  }

  .p-env-welfare__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-8);
    margin-top: var(--space-40);
  }

  .p-env-welfare__item {
    padding: var(--space-16) var(--space-8);
    font-size: var(--fs-14);
  }

  .p-env-welfare__item--large {
    height: auto;
    min-height: 4.5rem;
    font-size: var(--fs-18);
  }

  .p-env-welfare__item--large:first-child {
    grid-column: 1 / -1;
  }

  .p-env-welfare__num {
    font-size: var(--fs-40);
    padding-bottom: 0.15rem;
  }

  .p-env-office {
    padding-top: var(--space-80);
    padding-bottom: var(--space-120);
  }

  .p-env-office__head {
    flex-direction: column;
    gap: var(--space-32);
  }

  .p-env-office__text {
    gap: var(--space-24);
  }

  .p-env-office__photo {
    width: 100%;
  }

  .p-env-marquee {
    margin-top: var(--space-40);
  }

  .p-env-marquee__list {
    gap: var(--space-16);
    padding-right: var(--space-16);
  }

  .p-env-marquee__item {
    width: 14.5rem;
  }

  .p-env-marquee__item--large {
    width: 18rem;
  }

  .p-env-access {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-24);
    margin-top: var(--space-64);
    padding: var(--space-24) var(--space-16) var(--space-16);
  }

  .p-env-access__name {
    width: auto;
    padding-bottom: var(--space-12);
    font-size: var(--fs-20);
  }

  .p-env-access__map {
    width: 100%;
  }
}