/* ============================
   NEWEMPLOYEE ARCHIVE (新入社員の声 一覧)
============================ */

/* ============================
   FVエリア
============================ */
.newemployee-archive__fv {
  height: 348px;
  background-image: url(../../images/newemployee/newemployee_fv_bg.jpg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
@media (max-width: 767px) {
  .newemployee-archive__fv {
    height: 225px;
    background-color: #80BFA2;   /* 保険。通常は bg_sp 画像で覆われる */
    background-image:
      url(../../images/newemployee/newemployee_fv_mark.svg),
      url(../../images/newemployee/newemployee_fv_bg_sp.jpg);
    background-repeat: no-repeat, no-repeat;
    /* Mマーク(左上, -23px で左端切り) / bg_sp(グラデ+マイク, 右下固定) */
    background-position: -23px top, right bottom;
    background-size: 253px 222px, auto 225px;
  }
}

.newemployee-archive__fv-inner {
  position: relative;
  max-width: 1228px;
  height: 100%;
  margin-inline: auto;
  padding-inline: 30px;
}

.newemployee-archive__fv-title {
  position: absolute;
  top: 130px;
  left: 30px;
  color: #FFF;
  font-family: var(--font-heading);
  font-size: 65px;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1;
}
@media (max-width: 767px) {
  .newemployee-archive__fv-title {
    top: 50%;
    transform: translateY(-50%);   /* 上下中央 (PC top:130px を上書き) */
    font-size: 32px;
    padding-left: 33px;
  }
}

/* ============================
   パンくず / c-page-title 前後余白
============================ */
.newemployee-archive .c-breadcrumb {
  padding-top: 26px;
}

.newemployee-archive .c-page-title {
  margin-top: 160px;
}
@media (max-width: 767px) {
  .newemployee-archive .c-page-title {
    margin-top: 60px;   /* お知らせ一覧と揃える */
  }
}

/* c-page-title のカラーを緑系に上書き (このページ限定) */
.newemployee-archive__page-title .c-page-title__jp,
.newemployee-archive__page-title .c-page-title__en {
  color: var(--color-accent-green);
}

.newemployee-archive__page-title .c-page-title__line {
  background: var(--color-accent-green);
}

/* ============================
   一覧セクション
============================ */
.newemployee-archive__list-section {
  margin-top: 172px;
}
@media (max-width: 767px) {
  .newemployee-archive__list-section {
    margin-top: 90px;   /* PC 172 × 約0.52 (お知らせ一覧 167→90 と同傾向) */
  }
}

.newemployee-archive__inner {
  max-width: 1210px;
  margin-inline: auto;
  padding-inline: 30px;
}
@media (max-width: 767px) {
  .newemployee-archive__inner {
    padding-inline: 30px;
  }
}

/* --- グリッド 2列 --- */
.newemployee-archive__list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  /* カードが縮んでも間隔だけ残らないよう、カードと同じ比率で詰める
     (1440 幅で Figma の 87 / 78) */
  gap: calc(87 / 1440 * 100vw) calc(78 / 1440 * 100vw);
}
@media (min-width: 1440px) {
  .newemployee-archive__list {
    gap: 87px 78px;
  }
}
@media (max-width: 767px) {
  .newemployee-archive__list {
    grid-template-columns: 1fr;   /* 1列化 */
    gap: calc(87 / 1440 * 100vw); /* 縦のみ */
  }
}

/* --- カード1枚 (538:304 = 幅:高さ)
   以前はカード全体が1枚の画像だった。人物画像・入社年・所属を ACF から出すため
   HTML/CSS で組み直している。寸法はデザイン画像 (1076x608) の実測を 1076 で割った比率。

   カード幅はコンテナ幅で決まりビューポート幅に比例しないため、
   サイズ指定はコンテナクエリ単位 (cqw = カード幅の1%) を使う。
   これでカードが縮んでも中身の比率が崩れない。 */
.newemployee-archive__item {
  container-type: inline-size;
}

.nes-card {
  position: relative;
  display: flex;
  width: 100%;
  aspect-ratio: 538 / 304;
  overflow: hidden;
  background-color: var(--color-white);
  border: 2px solid var(--color-accent-green);
  transition: opacity 0.3s;
}
@media (hover: hover) {
  .nes-card:hover {
    opacity: 0.7;
  }
}

/* 右上の M ウォーターマーク
   Figma 実測 (カード幅 538 基準): 幅 175 / 上に 7 はみ出し / 右に 22 はみ出し */
.nes-card__mark {
  position: absolute;
  z-index: 2;
  /* 絶対配置の基準が枠線の内側になるため、枠線 2px 分を足してはみ出させる */
  top: -1.67cqw;
  right: -4.46cqw;
  width: 32.53cqw;
  aspect-ratio: 253 / 222;
  background: url(../../images/newemployee/newemployee_card_mark.svg) no-repeat center top / contain;
}

/* 写真の右端を白へなじませる (Figma のグラデーションオーバーレイをそのまま再現)
   カード左端から 396.68/538 = 73.7% の幅で、49.5% の位置で白に到達する */
.nes-card__fade {
  position: absolute;
  z-index: 1;
  /* Figma 実測のはみ出し (カード 538 基準): 上 15.56 / 右 33.69 / 下 19.17
     絶対配置の基準が枠線の内側なので、枠線 2px 分を足している */
  top: -3.26cqw;
  right: -13.63cqw;
  bottom: -3.93cqw;
  width: 73.7cqw;
  background: linear-gradient(90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.04) 0.4%,
    rgba(255, 255, 255, 0.22) 2.4%,
    rgba(255, 255, 255, 0.38) 4.6%,
    rgba(255, 255, 255, 0.53) 7%,
    rgba(255, 255, 255, 0.66) 9.7%,
    rgba(255, 255, 255, 0.77) 12.6%,
    rgba(255, 255, 255, 0.85) 15.8%,
    rgba(255, 255, 255, 0.92) 19.7%,
    rgba(255, 255, 255, 0.97) 24.4%,
    rgba(255, 255, 255, 0.99) 31.1%,
    #FFF 49.5%);
}

/* --- 人物画像 (左) --- */
/* 写真はフェードの下へ潜り込ませたいので、テキストの回り込みから外して絶対配置にする。
   これで写真幅を変えてもテキストの開始位置は動かない */
.nes-card__photo {
  position: absolute;
  z-index: 0;
  top: 0;
  bottom: 0;
  left: 0;
  width: 46.5cqw;
}

.nes-card__photo img {
  width: 100%;
  height: 100%;
  /* 顔を上にそろえて枠いっぱいに。肩から下はカードの下辺で切る (デザイン準拠) */
  object-fit: cover;
  object-position: center top;
}

/* --- 右のテキスト --- */
.nes-card__body {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex: 1;
  min-width: 0;
  /* 学部行がなくなった分、上下中央に寄せてボタンとの間延びを防ぐ */
  justify-content: center;
  /* デザイン実測: テキスト左端 563/1076 */
  padding: 5cqw 4cqw 5cqw 52.3cqw;
  color: var(--color-accent-green);
}

.nes-card__year {
  font-size: 5.95cqw;     /* Figma 28px → 情報量が減った分 32px 相当に拡大 */
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: 0.05em;
}

.nes-card__affiliation {
  display: flex;
  flex-direction: column;
  margin-top: 4.5cqw;
  font-size: 3.35cqw;     /* Figma 16px → 18px 相当に拡大 */
  line-height: 1.55;
  letter-spacing: 0.05em;
}

/* --- Q&Aを見る ボタン --- */
.nes-card__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2.4cqw;
  width: 44cqw;
  min-height: 8.8cqw;
  /* auto で下端に貼り付けると所属との間が空きすぎるため固定値にする */
  margin-top: 5.5cqw;
  /* デザインではボタンだけテキストより少し左から始まる (273 vs 281) */
  margin-left: -1.67cqw;
  filter: drop-shadow(0.74cqw 0.74cqw 1.48cqw rgba(48, 141, 78, 0.32));
  padding: 1cqw 2cqw;
  border: 2px solid var(--color-accent-green);
  border-radius: 999px;
  font-size: 3.53cqw;     /* Figma 19px */
  letter-spacing: 0.1em;
  white-space: nowrap;
}

.nes-card__btn-arrow {
  flex-shrink: 0;
  width: 0;
  height: 0;
  border-style: solid;
  /* デザイン実測: 幅 12 x 高さ 17.5 (カード 538 基準) の右向き三角 */
  border-width: 1.63cqw 0 1.63cqw 2.23cqw;
  border-color: transparent transparent transparent var(--color-accent-green);
}

/* --- 左下の Rookie 番号 --- */
.nes-card__no {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 13.4cqw;
  height: 13.4cqw;        /* 幅と同じ (正方形) */
  padding-left: 2.4cqw;
  background-color: var(--color-accent-green);
  color: var(--color-white);
  line-height: 1.1;
}

.nes-card__no-label {
  font-family: var(--font-heading);
  font-size: 2.23cqw;     /* Figma 12px */
  letter-spacing: 0.02em;
}

.nes-card__no-num {
  display: flex;
  align-items: baseline;
  gap: 0.6cqw;
  font-family: var(--font-heading);
  font-size: 5.95cqw;     /* Figma 32px */
  letter-spacing: 0.02em;
}

.nes-card__no-hash {
  font-size: 1.86cqw;     /* Figma 10px */
}