/* =========================================================
   新卒採用情報ページ（page-newgraduate.php）専用クラス
========================================================= */

.ng-grade__top-text .detail-intro__heading {
  margin-bottom: 2rem;
}

/* 図解画像は基本的に100% */

.detail-section__top-img.kensyu-seido img,
.detail-section__top-img.saiyo-process img {
  height: 100%;
}

/* キャリア相談室：本文直後のリンクは flex column 内で margin が相殺されず
   余白が広くなりすぎるため詰める */

.ng-counseling__link {
  margin-top: -1rem;
}

/* 注釈 */

.ng-note {
  font-size: 0.875rem;
  text-align: right;
  margin-top: 10px;
}

/* 等級評価カード：見出し＋本文（左）／写真（右） */

.ng-grade__top {
  display: flex;
  gap: 6rem;
  align-items: flex-start;
  margin-bottom: 6rem;
}

.ng-grade__top-text {
  flex: 1 1 50%;
}

.ng-grade__top-img {
  flex: 1 1 38%;
  margin-top: 1rem;
}

.ng-grade__top-img img {
  width: 100%;
  border-radius: 16px;
  display: block;
}

/* 等級評価カード：比較レーダーチャート（白背景カード2列） */

.ng-grade__compare {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
}

.ng-grade__compare-col {
  flex: 1 1 calc(50% - 1rem);
  border-radius: 16px;
  text-align: center;
}

.ng-grade__compare-caption {
  font-family: var(--font-serif);
  font-size: 1.25rem;
  letter-spacing: 0.2em;
  line-height: 1.8;
  color: #0060A6;
  margin-bottom: 1.5rem;
}

.ng-grade__compare-img img {
  width: 100%;
  border-radius: 8px;
  display: block;
}

/* 様々な取り組み：左4枚・右2枚の不揃い2カラムレイアウト。
   左右のカードの天地を揃えるため、列ラッパーは display: contents で無効化し
   全カードを1つのグリッド（2列×4行）に配置する。
   行1-2: 女性活躍／アンコンシャス｜D&I（2行またぎ・下揃え）
   行3:   ジェンダー｜ホワイト企業（上揃え） / 行4: 働きがい */

.ng-initiatives {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem 2rem;
  align-items: start;
}

.ng-initiatives__col {
  display: contents;
}

/* 左列 */

.ng-initiatives__col:first-child > .ng-initiatives__card {
  grid-column: 1;
}

.ng-initiatives__col:first-child > .ng-initiatives__card:nth-child(1) { grid-row: 1; }

/* アンコンシャス：D&Iカードと下端を揃える */

.ng-initiatives__col:first-child > .ng-initiatives__card:nth-child(2) {
  grid-row: 2;
  align-self: end;
}

.ng-initiatives__col:first-child > .ng-initiatives__card:nth-child(3) { grid-row: 3; }

.ng-initiatives__col:first-child > .ng-initiatives__card:nth-child(4) { grid-row: 4; }

/* 右列 */

.ng-initiatives__col:last-child > .ng-initiatives__card {
  grid-column: 2;
}

/* D&I：1〜2行目にまたがり、下端をアンコンシャスと揃える */

.ng-initiatives__col:last-child > .ng-initiatives__card:nth-child(1) {
  grid-row: 1 / 3;
  align-self: stretch;
}

/* ホワイト企業：ジェンダーと同じ行の先頭＝上揃え */

.ng-initiatives__col:last-child > .ng-initiatives__card:nth-child(2) { grid-row: 3; }

.ng-initiatives__card {
  background: var(--color-white);
  border-radius: 12px;
  padding: 2rem;
}

/* リンク・画像を持たないカード（アンコンシャスバイアス等）は背景なしで本文のみ表示 */

.ng-initiatives__card--plain {
  background: none;
  padding: 0.5rem 2rem;
}

/* テキスト（左）／画像（右）の横並びカード（2026ホワイト企業認定等） */

.ng-initiatives__card--row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

.ng-initiatives__card--row .ng-initiatives__img {
  margin-bottom: 0;
  flex-shrink: 0;
}

.ng-initiatives__text {
  flex: 1 1 auto;
}

.ng-initiatives__title {
  font-family: var(--font-serif);
  font-weight: 400;
  letter-spacing: 0.2em;
  line-height: 1.8;
  margin-bottom: 0.75rem;
}

.ng-initiatives__img {
  margin-bottom: 0.75rem;
  text-align: center;
}

.ng-initiatives__img img {
  width: auto;
  max-height: 160px;
  display: inline-block;
}

/* 「詳しくはこちら」等のカード内リンク：色は黒のまま、下線＋矢印（＞）を付ける */

.ng-initiatives__link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.25rem;
  color: var(--color-black);
  text-decoration: underline;
  font-size: 0.9375rem;
  letter-spacing: 0.05em;
}

.ng-initiatives__link::after {
  content: '';
  display: inline-block;
  flex-shrink: 0;
  width: 12px;
  height: 11px;
  background: url('../images/gaibu_link_black.svg') no-repeat center center / contain;
  margin: 1px 0 0 2px;
}

.ng-counseling-intro .detail-intro{
  margin-bottom: 0;
}


/* ==========================================================================
   SP対応（max-width: 768px）
   ========================================================================== */

@media (max-width: 767px) {
  .ng-note{
    text-align: left;
  }

.ng-counseling__link{
  margin-bottom: 60px;
}

.ng-grade__top{
  flex-direction: column;
  gap: 15px;
}

.ng-grade__compare{
  flex-direction: column;
}
.ng-grade__compare-caption{
  font-size: 1.125rem;
}

.ng-initiatives__card{
  padding: 20px;
}

/* 様々な取り組み SP：1列の縦積み（PCの行指定・下揃えを解除）
   カンプ: _comps/newg_sp_様々な取り組み.png
   並び順: 女性活躍→アンコンシャス→D&I→ジェンダー→ホワイト企業→働きがい */

.ng-initiatives {
  grid-template-columns: 1fr;
}

.ng-initiatives__col:first-child > .ng-initiatives__card:nth-child(n),
.ng-initiatives__col:last-child > .ng-initiatives__card:nth-child(n) {
  grid-column: auto;
  grid-row: auto;
  align-self: auto;
}

.ng-initiatives__col:first-child > .ng-initiatives__card:nth-child(1) { order: 1; }

.ng-initiatives__col:first-child > .ng-initiatives__card:nth-child(2) { order: 2; }

.ng-initiatives__col:last-child > .ng-initiatives__card:nth-child(1) { order: 3; }

.ng-initiatives__col:first-child > .ng-initiatives__card:nth-child(3) { order: 4; }

.ng-initiatives__col:last-child > .ng-initiatives__card:nth-child(2) { order: 5; }

.ng-initiatives__col:first-child > .ng-initiatives__card:nth-child(4) { order: 6; }

/* 受賞ロゴ（縦積みカード）はカード幅いっぱいに表示 */

.ng-initiatives__img {
  margin-bottom: 1rem;
}

.ng-initiatives__img img {
  width: 100%;
  max-height: none;
}

/* 横並びカード（ホワイト企業・働きがい）はテキスト左・バッジ右のままサイズ維持 */

.ng-initiatives__card--row {
  gap: 1rem;
}

.ng-initiatives__card--row .ng-initiatives__img img {
  width: auto;
  max-height: 140px;
}


.ng-initiatives__title{
  font-size: 0.875rem;
}
.ng-initiatives__link{
  font-size: 0.75rem;
  letter-spacing: 0;
  margin-top: 10px;
}

.ng-initiatives__link::after {
    width: 9px;
    margin: 3px 0 0 2px;
}

.ng-counseling-intro .toggle-item__link{
  margin-bottom: 40px;
}


}