/* ==========================================================================
   職場環境（work-environment.html）
   ========================================================================== */

/* ---------- メインビジュアル ---------- */
.we-hero { position: relative; height: 698px; background: #fff; overflow: hidden; }
.we-hero__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .5; }
.we-hero__inner { position: absolute; right: max(0px, calc((100% - 1280px) / 2)); top: 0; width: 1280px; height: 100%; } /* 狭い画面でも文字が右で切れないよう、右端を基準にする */
.we-hero__title, .we-hero__sub {
  position: absolute; text-align: right; font-weight: 500; color: #fff;
  text-shadow: rgba(0,0,0,.4) 0 4px 5px; white-space: nowrap;
}
.we-hero__title { --fy: 60px; left: 450px; top: 306px; width: 732px; font-size: 111px; line-height: 111px; }
.we-hero__sub { left: 817px; top: 547px; width: 365px; font-size: 34px; line-height: 47.6px; }

/* ---------- 働く環境（ロゴ・文章・写真4枚） ---------- */
.we-env { padding: 59px 0 101px; }
.we-env__logo { width: 63px; height: 62px; margin-left: calc(50% - 32px); object-fit: cover; }
.we-intro { width: 846px; margin: 37px auto 0; text-align: center; font-size: 17px; line-height: 23.8px; }
.we-intro p + p { margin-top: 23.8px; }
.we-intro .we-intro__lead { margin-bottom: 47.6px; font-size: 30px; line-height: 42px; font-weight: 700; }
.vline.we-env__vline { position: relative; display: block; left: auto; width: 1px; height: 79px; margin: 32px 0 0 calc(50% - 1px); }

/* 写真カード（2列×2段）。白い箱は写真の左下に重ねる */
.we-grid { margin-top: 39px; padding: 0 30px; }
.we-grid__row { display: grid; grid-template-columns: 592.6fr 596.4fr; column-gap: 31px; height: 455.5px; }
.we-grid__row + .we-grid__row { margin-top: 40px; }
.we-card { position: relative; background: #fff; overflow: hidden; }
.we-grid--edu .we-card { background: var(--c-line); }
.we-card__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.we-card__box { position: absolute; left: 0; top: var(--top); width: 342px; height: var(--h); background: #fff; }
.we-card__title { position: absolute; left: 27px; top: 21px; font-size: 23px; line-height: 39.1px; font-weight: 500; white-space: nowrap; }
.we-card__text { position: absolute; left: 27px; top: 72.1px; width: var(--bw); font-size: 17px; line-height: 23.8px; }

/* ---------- 教育制度（グレーの帯） ---------- */
.we-edu { position: relative; height: 1448px; }
.we-edu__band { height: 1344px; padding-top: 120px; background: var(--c-gray); }
.we-edu__head { display: block; width: 530px; margin-left: calc(50% - 259px); text-align: center; }
.we-grid--edu { margin-top: 54px; }
.we-grid--edu .we-grid__row + .we-grid__row { height: 456.5px; }
.we-edu__vline { z-index: 1; height: 154px; left: calc(50% - 2px); }
.we-edu__vline--top { top: -72px; }
.we-edu__vline--bottom { top: 1271px; }

/* ==========================================================================
   スマホ
   ========================================================================== */
@media (max-width: 699px) {
  .we-hero { height: 269.2px; margin-top: -10px; }
  .we-hero__inner { left: 0; width: 320px; margin-left: 0; }
  .we-hero__title { --fx: -60px; --fy: 0px; left: 23px; top: 131px; width: 280px; font-size: 37px; line-height: 37px; }
  .we-hero__sub { left: 23px; top: 212px; width: 280px; font-size: 18px; line-height: 25.2px; }
  .we-hero__sub.anim.is-in { --fx: -60px; animation: k-float 1200ms cubic-bezier(.445,.05,.55,.95) 300ms both; }

  .we-env { padding: 20px 0 30px; }
  .we-env__logo { width: 60px; height: 60px; margin-left: 130px; }
  .we-intro { width: 280px; margin: 20px 0 0 20px; font-size: 12px; line-height: 16.8px; }
  .we-intro.anim.is-in { --fy: 60px; animation: k-float 1200ms cubic-bezier(.445,.05,.55,.95) both; }
  .we-intro p + p { margin-top: 16.8px; }
  .we-intro .we-intro__lead { margin-bottom: 33.6px; font-size: 19px; line-height: 26.6px; }
  .vline.we-env__vline, .we-edu__vline { display: none; }

  /* カードは縦に1列。白い箱は写真の下側にはみ出して重なる */
  .we-grid { margin-top: 35px; padding: 0; }
  .we-grid__row, .we-grid--edu .we-grid__row + .we-grid__row { display: flow-root; height: auto; }
  .we-grid__row + .we-grid__row { margin-top: 0; }
  /* 写真の下に白いカードを重ねる（文章の長さに合わせて伸びる） */
  .we-card, .we-grid--edu .we-card { height: auto; margin-bottom: 30px; overflow: visible; background: none; }
  .we-card__img { position: relative; inset: auto; height: 200.7px; }
  .we-card__box { position: relative; left: 20px; top: auto; width: 280px; height: auto; margin-top: -56px; padding: 16px 22px 20px; box-shadow: 0 14px 30px -18px rgba(0,0,0,.35); }
  .we-card__title, .we-card__text { position: static; width: auto; }
  .we-card__title { font-size: var(--s-ts); line-height: 1.7; }
  .we-card__text { margin-top: 6px; font-size: 12px; line-height: 16.8px; }
  /* スマホは「中央から広がる」アニメーション */
  .js .we-card__box.anim.a-reveal-l:not(.is-in) { opacity: 0; clip-path: inset(50%); }
  .we-card__box.anim.is-in.a-reveal-l {
    animation: k-fade 960ms cubic-bezier(.25,.46,.45,.94) both, k-shape 1200ms cubic-bezier(.645,.045,.355,1) both;
  }

  .we-edu { height: auto; }
  .we-edu__band { height: auto; padding: 41px 0 10px; }
  .we-edu__head { width: 280px; margin-left: 20px; }
  .we-edu__head .sec-head__en { font-size: 25px; line-height: 20px; }
  .we-edu__head .sec-head__ja { margin-top: 8px; font-size: 12px; line-height: 17px; }
  .we-grid--edu { margin-top: 28px; }
}
@keyframes k-shape { from { clip-path: inset(50%); } to { clip-path: inset(0); } }
.we-hero__sub { font-weight: 700; }
.we-edu__head .sec-head__ja { margin-bottom: 7px; }
@media (max-width: 699px) { .we-edu__head .sec-head__ja { margin-bottom: 0; } }

/* ---------- スマホの文字サイズ（全ページ共通の基準）----------
   本文 11.5px ／ 補足 10〜11px ／ 小見出し・質問 13px ／ 見出し 16.5〜17px ／ ページの題 18px */
@media (max-width: 699px) {
  .we-intro { font-size: 11.5px; line-height: 1.8; }
  .we-intro p + p { margin-top: 1em; }
  .we-intro .we-intro__lead { font-size: 16.5px; line-height: 1.6; margin-bottom: 24px; }
  .we-card__title { font-size: 16.5px; }
  .we-card__text { font-size: 11.5px; line-height: 1.75; }
  .we-edu__head .sec-head__ja { font-size: 11px; }
}