/* ==========================================================================
   制度と福利厚生  (/recruit/benefits/)
   出典(レイアウト): Figma「POTOSITE_FINAL」制度と福利厚生 (node 4172:2422)

   ・フォーマット/レイアウトのみFigmaに準拠。中身は資料「福利厚生_枠組みsheet」。
   ・文字サイズ・色・余白は他のRECRUITページに合わせる(tokens.css / page-recruit.css)。
     RECRUITはゴシック主体・明朝は使わない方針なので、Figmaで明朝だったキャッチも
     ゴシック(H2-San)に寄せている。
   ・page-recruit.css を土台に読み込む(.recruit-page / .rec-section / .rec-cta を使う)。
   ========================================================================== */

/* ---------- 大分類ごとのブロック ---------- */

/* イントロと一覧が続くので、一覧側の上余白は詰める */
.ben-groups {
  padding-top: 0;
}

/*
 * 分類どうしの空き。
 *
 * 1つの分類が「見出し + カード + 一覧」で高さを持つ大きなまとまりになったので、
 * 大きなまとまりどうしの区切り(--rule-block / 48px)を使う。
 *
 * 以前は --rule-section(24px)だった。あれは「区切りの前後に24pxずつ取って
 * 合計48pxにする」ための値で、片側の margin だけに使うと24pxにしかならず、
 * 分類の切れ目としては足りていなかった。
 */
.ben-group + .ben-group {
  margin-top: var(--rule-block);
}

/*
 * RECRUITトップから飛んできたとき、分類の見出しが
 * 固定ヘッダーの下に潜り込まないようにする。
 * BRAND・BUSINESSのアンカーと同じ扱い。
 */
.ben-group[id] {
  scroll-margin-top: var(--header-height);
}

/*
 * 分類名。
 *
 * 「組織と文化」の見出し(.cul-block__heading)と同じ
 * ゴシック H2-San(24px)・墨色。サイト内で同じ役割の見出しは
 * 同じ形にしておく。
 *
 * 32px・瑠璃色にして線画も添えていたことがあるが、
 * 大きいだけで読みにくかった。分類の切れ目は
 * 分類どうしの空き(--rule-block / 48px)で足りている。
 */
.ben-group__title {
  font: var(--type-h2-san);
  letter-spacing: var(--ls-heading);
  color: var(--color-ink);
}

/* ==========================================================================
   制度の一覧

   1つの分類の中を2段に分けている。

     よく使う制度     … 主要4件。カードで大きく見せる
     知っておきたい制度 … それ以外。罫線で区切った一覧で並べる

   どちらも押すと詳細が開く(<details>)。
   閉じているあいだも制度名と一言は見えているので、探すことはできる。
   ========================================================================== */

/* ---------- 開き具合を示す印(カード・一覧で共用) ---------- */

/*
 * 線2本で十字を描き、開いたら縦線だけ消してマイナスにする。
 * 画像を使わないので、色や太さを文字に合わせて変えられる。
 */
.ben-mark {
  position: relative;
  flex: 0 0 auto;
  width: 12px;
  height: 12px;
  /* 制度名の1行目の中心あたりに来るように下げる */
  margin-top: 7px;
}

.ben-mark::before,
.ben-mark::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  background-color: var(--color-ink);
}

/* 横線 */
.ben-mark::before {
  width: 100%;
  height: 1px;
}

/* 縦線。開いたら消す */
.ben-mark::after {
  width: 1px;
  height: 100%;
  transition: opacity 0.2s ease;
}

[open] > .ben-card__summary .ben-mark::after,
[open] > .ben-row__summary .ben-mark::after {
  opacity: 0;
}

/* ブラウザが付ける三角の印は消す(代わりに上の十字を出す) */
.ben-card__summary,
.ben-row__summary {
  list-style: none;
  cursor: pointer;
}

.ben-card__summary::-webkit-details-marker,
.ben-row__summary::-webkit-details-marker {
  display: none;
}


/* ---------- よく使う制度(カード) ---------- */

.ben-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  /* カードどうしの空き。カードの内側の余白と同じにして、枠の内外をそろえる */
  gap: var(--space-md);
  /* 分類名 → カード。見出しと中身の24px */
  margin: var(--rule-head) 0 0;
  padding: 0;
  list-style: none;
}

/*
 * カードの枠。角は少しだけ丸める。
 * 直角のままだと角が硬く、並んだときに画面が刺々しく見える。
 * 中途採用ページのブランドカード(.careers-brand__frame)と同じ8px。
 */
.ben-card {
  background-color: var(--color-white);
  border: 1px solid var(--color-line);
  border-radius: 8px;
  /* 高さは中身にまかせる。開いたカードだけが伸びる */
  align-self: start;
}

.ben-card__summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-sm);
  padding: var(--space-md);
}

.ben-card__text {
  display: block;
  min-width: 0;
}

/*
 * アイコンと制度名。横に並べて、文字の足元でそろえる。
 * 制度名が2行になってもアイコンは1行目の横に留まる。
 */
.ben-card__head {
  display: flex;
  align-items: baseline;
  /* 印 → 名前。全ページ共通の8px */
  gap: var(--space-xs);
}

/*
 * 制度ごとの線画(inc/ben-icons.php)。
 * 大きさは制度名の文字に合わせる。色は瑠璃色。
 * 文字と同じ行に置くので、足元がそろうよう少し下げている。
 */
.ben-card__icon {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  color: var(--color-ruri);
  transform: translateY(3px);
}

.ben-card__icon svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* 制度名。ゴシック Name-San(20px) */
.ben-card__name {
  display: block;
  min-width: 0;
  font: var(--type-name);
  letter-spacing: var(--ls-heading);
  color: var(--color-ink);
}

/* 一言。制度名とひとまとまりに見せたいので空きは狭く取る */
.ben-card__short {
  display: block;
  /* 見出し → その説明。全ページ共通の8px */
  margin-top: var(--space-xs);
  font: var(--type-list);
  letter-spacing: var(--ls-body);
  color: var(--color-ink);
}

/*
 * 詳細。開いたときだけ出る。
 * 上に細い線を引いて、一言との境目をはっきりさせる。
 */
.ben-card__desc {
  margin: 0 var(--space-md);
  padding: var(--space-sm) 0 var(--space-md);
  border-top: 1px solid var(--color-line);
  font: var(--type-list);
  letter-spacing: var(--ls-body);
  color: var(--color-ink);
}


/* ---------- 知っておきたい制度(一覧) ---------- */

/*
 * 一覧も、カードと同じように枠で囲む。
 *
 * 上下の線だけだと、文字の始まりが上のカードより内側に寄っていて
 * 頭がそろわなかった。枠で囲んで内側の余白をカードと同じ24pxにすると、
 * カードの制度名と一覧の制度名が同じ位置から始まる。
 *
 * 地色は敷かない。カードは白を敷いて浮かせているが、
 * こちらは主要4件のあとに続く一覧なので、枠だけにして一段控えめに見せる。
 */
.ben-rows {
  /* カード → 一覧。同じ分類の中の切れ目なので24px */
  margin: var(--rule-head) 0 0;
  padding: 0;
  list-style: none;
  border: 1px solid var(--color-line);
  /* 角の丸みはカード(.ben-card)と同じ8px */
  border-radius: 8px;
}

/* 行どうしの区切り。枠の上下には線を重ねない */
.ben-row + .ben-row {
  border-top: 1px solid var(--color-line);
}

.ben-row__summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-sm);
  /*
   * 上下は罫線と文字のあいだ。COMPANYの会社情報(.profile__row)と同じ20px。
   * 左右はカードの内側の余白と同じ24px。文字の頭をカードとそろえるため。
   */
  padding: 20px var(--space-md);
}

/*
 * 制度名と一言は同じ行に続けて置く。
 * カードと違って1行におさめたい場所なので、縦に積まず横に並べる。
 */
.ben-row__text {
  display: block;
  min-width: 0;
}

.ben-row__name {
  font: var(--type-list);
  font-weight: 500;
  letter-spacing: var(--ls-body);
  color: var(--color-ink);
}

.ben-row__short {
  /* 制度名 → 一言。同じ行なので、横の空きは全角1文字ぶん相当 */
  margin-left: var(--space-sm);
  font: var(--type-list);
  letter-spacing: var(--ls-body);
  color: var(--color-ink);
}

/* 開いた中に出す一言。広い画面では制度名の横に出しているので、こちらは消す */
.ben-row__short-inside {
  display: none;
  margin: 0;
  padding: 0 var(--space-md) var(--space-xs);
  font: var(--type-list);
  letter-spacing: var(--ls-body);
  color: var(--color-ink);
}

.ben-row__desc {
  margin: 0;
  padding: 0 var(--space-md) 20px;
  font: var(--type-list);
  letter-spacing: var(--ls-body);
  color: var(--color-ink);
}


/* ---------- タブレット ---------- */

@media (max-width: 1100px) {
  .ben-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}


/* ---------- スマートフォン ---------- */

@media (max-width: 768px) {

  /*
   * 狭い画面ではカードも1列。
   * 2列のままだと1枚が160pxほどになり、制度名が折り返して読めない。
   */
  .ben-cards {
    grid-template-columns: 1fr;
    gap: var(--space-sm);
  }

  .ben-card__summary {
    padding: var(--space-sm);
  }

  .ben-card__desc {
    margin-inline: var(--space-sm);
    padding-bottom: var(--space-sm);
  }

  .ben-row__summary {
    /* 左右はカードと同じ16pxにそろえる */
    padding-inline: var(--space-sm);
  }

  /*
   * 一覧の一言は、閉じているときは出さない。
   *
   * 狭い画面だと制度名の横に入りきらず下へ折り返すので、
   * 1行のはずの見出しが2行になり、一覧全体が倍の長さになる。
   * 閉じているときは制度名だけを並べて一覧としての見通しを優先し、
   * 一言は開いたときに詳細の上へ出す。
   */
  .ben-row__short {
    display: none;
  }

  .ben-row__short-inside {
    display: block;
    padding-inline: var(--space-sm);
  }

  .ben-row__desc {
    padding-inline: var(--space-sm);
  }
}