/* ==========================================================================
   中途採用 ( /recruit/careers/ )
   page-recruit.css を土台に、このページだけの分を足す。
   ========================================================================== */

/* ---------- エリア / 職種 / ブランドの一覧 ---------- */

/*
 * 横に流して折り返す並び。
 * 項目の数がエリア9・職種8・ブランド5とバラバラなので、
 * 列数を決め打ちせず、入るだけ入れて折り返す形にしている。
 */
.careers-list {
  display: flex;
  flex-wrap: wrap;
  /*
   * 項目どうしの間。BRANDの地図の絞り込み(.area-tabs / .area-subs)と同じ2px。
   * 枠で1つずつ区切られているので、ほとんど空けなくても切れて見える。
   * 逆に空けると、並びではなく別々のボタンが散らばって見える。
   */
  gap: 2px;
  /* 見出し → 中身。全ページ共通の 24px */
  margin-top: var(--rule-head);
}

/*
 * 1項目。押せることが見た目で分かるよう、枠のある形にしている。
 * ホバーの動きはサイト共通のボタンと同じ考え方
 * (線だったものが、その色で塗りつぶされる)。
 */
.careers-chip {
  display: inline-flex;
  align-items: center;
  /*
   * 大きさ。
   * BRANDの地図の絞り込み(34px / 12px)と同じにしたら小さすぎたので、
   * 文字は List(14px)に戻し、高さだけ44px → 40pxに詰めている。
   * あちらは地図の上に何段も並ぶ絞り込み、こちらは項目そのものへの
   * リンクなので、少し大きいほうが押しやすい。
   */
  min-height: 40px;
  padding: 8px var(--space-md);
  border: 1px solid var(--color-line);
  border-radius: 999px;
  font: var(--type-list);
  letter-spacing: var(--ls-body);
  color: var(--color-ink);
  transition: color 0.25s ease, background-color 0.25s ease, border-color 0.25s ease;
}

@media (hover: hover) {
  .careers-chip:hover {
    color: var(--color-white);
    background-color: var(--color-ink);
    border-color: var(--color-ink);
  }
}

.careers-chip:active {
  color: var(--color-white);
  background-color: var(--color-ink);
  border-color: var(--color-ink);
}


/* ---------- 条件検索 ---------- */

.careers-search__form {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--space-md);
  /* 見出し → 中身。全ページ共通の 24px */
  margin-top: var(--rule-head);
}

.careers-field {
  display: flex;
  flex-direction: column;
  /* 幅は3つとも同じ。中身の文字数で幅が変わるとガタつくため */
  flex: 1 1 200px;
  gap: var(--space-2xs);
}

.careers-field__label {
  font: var(--type-caption);
  letter-spacing: var(--ls-caption);
  color: var(--color-ink);
}

/*
 * 選択欄。
 * ブラウザごとの既定の見た目を消して、サイトの線の色に揃える。
 * 右端の三角はSVGを背景として自前で置いている(消すと開けると分からなくなるため)。
 */
.careers-field__select {
  appearance: none;
  width: 100%;
  min-height: 47px;
  padding: 10px var(--space-lg) 10px var(--space-sm);
  font: var(--type-list);
  letter-spacing: var(--ls-body);
  color: var(--color-ink);
  background-color: var(--color-white);
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M1.2 3.2L5 7l3.8-3.8' fill='none' stroke='%231F1B18' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-sm) center;
  background-size: 10px 10px;
  border: 1px solid var(--color-line);
  border-radius: 0;
}

.careers-field__select:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

/* ボタンは選択欄と同じ高さに揃える */
.careers-search__submit {
  flex: 0 0 auto;
  min-width: 260px;
  min-height: 47px;
  justify-content: space-between;
}

.careers-search__note {
  /* 中身 → 補足。ふつうの行の区切り */
  margin-top: var(--rule-row);
  font: var(--type-caption);
  letter-spacing: var(--ls-caption);
  color: var(--color-ink);
}

/*
 * 「さらに細かい条件で探す」。
 * 先へ進むリンクなので右端にそろえる(サイト共通。.section-foot と同じ)。
 * 戻るリンクだけが左(.section-foot--back)。
 */
.careers-search__foot {
  margin-top: var(--space-xs);
  text-align: right;
}


/* ---------- 職種から探す ---------- */

/*
 * 写真つきのカード。写真・英字・和名の組み方はRECRUITトップの
 * 募集職種(.rec-position)と同じにして、その下に説明文を足している。
 */
.careers-jobs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--rule-row) 30px;
  /* 見出し → 中身。全ページ共通の 24px */
  margin-top: var(--rule-head);
}

.careers-job {
  display: block;
}

.careers-job__thumb {
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background-color: var(--color-grayge);
}

.careers-job__thumb img,
.careers-job__thumb .placeholder {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* 枠側で形を決めているので、中身が持つ比率と枠線は打ち消す */
  aspect-ratio: auto;
  border: 0;
}

.careers-job__en {
  display: block;
  /* 写真 → その説明。全ページ共通(tokens.css の --rule-caption) */
  margin-top: var(--rule-caption);
  font: var(--type-list);
  letter-spacing: var(--ls-en);
  color: var(--color-ink);
}

.careers-job__ja {
  display: block;
  margin-top: var(--space-2xs);
  font: var(--type-caption);
  letter-spacing: var(--ls-caption);
  color: var(--color-ink);
}

.careers-job__desc {
  display: block;
  /* 名前 → 説明。ひとまとまりに見せたいので狭く取る */
  margin-top: var(--space-xs);
  font: var(--type-caption);
  letter-spacing: var(--ls-caption);
  color: var(--color-ink);
}

@media (hover: hover) {
  .careers-job:hover .careers-job__en {
    color: var(--color-accent);
  }
}


/* ---------- ブランドから探す ---------- */

.careers-brands {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--space-md);
  /* 見出し → 中身。全ページ共通の 24px */
  margin-top: var(--rule-head);
}

/*
 * 白い角丸の箱にロゴを入れ、その下にブランド名を置く。
 *
 * CMSに入っているブランドロゴは4つとも「白抜き」
 * (濃い背景に載せる前提の白いロゴ)なので、そのままでは白い箱に置けない。
 * brightness(0) で絵の部分だけを黒にしている
 * (透明な部分は透明のまま残る)。
 *
 * ※ 元が白1色のデータなので、色は復元できない。
 *   色つきで見せたい場合は、色版のロゴをCMSに入れてもらうこと。
 */
.careers-brand__frame {
  display: flex;
  align-items: center;
  justify-content: center;
  /*
   * 箱は 4:3。
   * 3:2の横長だと高さが足りず、縦長のロゴ(こなな)や
   * 正方形に近いロゴ(THE ALLEY・PEANUTS)だけが小さく見えてしまう。
   */
  aspect-ratio: 4 / 3;
  padding: var(--space-md);
  background-color: var(--color-white);
  border: 1px solid var(--color-line);
  border-radius: 8px;
  transition: border-color 0.25s ease;
}

.careers-brand__frame img {
  width: 100%;
  height: 100%;
  /* 切り抜かず、箱の中に全体を収める */
  object-fit: contain;
}

/*
 * CMSに入っているロゴは白抜き(濃い背景に載せる前提)なので、
 * 絵の部分だけを黒にする。透明な部分は透明のまま残る。
 * 色つきのロゴを持っているものだけ is-color を付けて、この処理から外す。
 */
.careers-brand__frame:not(.is-color):not(.is-mark) img {
  filter: brightness(0);
}

/*
 * 「その他」に置いた会社のマーク(鯨)。
 *
 * ブランドロゴではなく1点の図なので、枠いっぱいに広げると
 * 隣のロゴより主張が強くなる。少し小さくして、他と同じ重さに見せる。
 * 色は公式ロゴと同じ青のグラデーションが画像に入っているので、黒く潰さない。
 */
.careers-brand__frame.is-mark img {
  width: 62%;
  height: auto;
}

.careers-brand__name {
  display: block;
  /* 写真 → 説明。全ページ共通(tokens.css の --rule-caption) */
  margin-top: var(--rule-caption);
  font: var(--type-list);
  letter-spacing: var(--ls-body);
  color: var(--color-ink);
  text-align: center;
}

@media (hover: hover) {
  .careers-brand:hover .careers-brand__frame {
    border-color: var(--color-ink);
  }
}


/* ---------- ポトマックで働くメリット ---------- */

/*
 * カードの並び。
 * 3列・すき間24pxは、制度と福利厚生のカード(.ben-cards)と同じ。
 */
.careers-merits {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-md);
  /* 見出し → 中身。全ページ共通の 24px */
  margin-top: var(--rule-head);
}

/*
 * 白いカード。
 * 見た目は制度と福利厚生のカード(.ben-card)にそろえている。
 * 白地・1pxの枠・角8px・内側24px。RECRUIT配下でカードが2種類あると、
 * 同じ役目のものが違うものに見えるため。
 *
 * 以前はここだけ角10px・影つき・内側48pxで、他と揃っていなかった。
 */
.careers-merit {
  padding: var(--space-md);
  background-color: var(--color-white);
  border: 1px solid var(--color-line);
  border-radius: 8px;
  align-self: start;
}

/* アイコン + 見出しを1行に */
.careers-merit__head {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
}

/*
 * アイコン。サイト共通の線画(inc/ben-icons.php)。
 * 大きさ・色・下げ幅は .ben-card__icon と同じ。
 * 文字と同じ行に置くので、足元がそろうよう少し下げている。
 */
.careers-merit__icon {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  color: var(--color-ruri);
  transform: translateY(3px);
}

.careers-merit__icon svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* 見出し。制度名(.ben-card__name)と同じ Name-San(20px) */
.careers-merit__title {
  min-width: 0;
  font: var(--type-name);
  letter-spacing: var(--ls-heading);
  color: var(--color-ink);
}

/* 本文。見出し → その説明。全ページ共通の8px */
.careers-merit__body {
  margin-top: var(--space-xs);
  font: var(--type-list);
  letter-spacing: var(--ls-body);
  color: var(--color-ink);
}

/* ---------- よくある質問 ---------- */

/*
 * 開け閉めはしない。12問しかないので、全部見えている方が早い。
 * 罫線の引き方は他の一覧と同じで、各行の上に引き、最後だけ下にも引く。
 */
.careers-faq {
  /* 見出し → 中身。全ページ共通の 24px */
  margin-top: var(--rule-head);
}

.careers-faq__item {
  padding-block: var(--rule-section);
  border-top: 1px solid var(--color-line);
}

.careers-faq__item:last-child {
  border-bottom: 1px solid var(--color-line);
}

/*
 * 質問。
 * 以前は List(14px)で、答え(Body / 15px)より小さかった。
 * 見出しが中身より小さいのは逆なので、答えと同じ大きさにして
 * 太さだけ一段上げている。
 */
.careers-faq__q {
  font: var(--type-body);
  font-weight: 500;
  letter-spacing: var(--ls-body);
  color: var(--color-ink);
}

.careers-faq__a {
  /* 質問 → 答え。ひとまとまりに見せたいので狭く取る */
  margin-top: var(--space-xs);
  margin-left: 0;
  font: var(--type-body);
  letter-spacing: var(--ls-body);
  color: var(--color-ink);
}

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

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

  .careers-brands {
    grid-template-columns: repeat(3, 1fr);
  }
}

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

@media (max-width: 768px) {
  /*
   * 選択欄とボタンは縦に積んで、幅いっぱいにする。
   * 横に3つ並べたままだと1つが100px程度になり、
   * 「パティシエ・製パン」のような長い項目が読めなくなる。
   */
  .careers-search__form {
    flex-direction: column;
    align-items: stretch;
  }

  /*
   * 縦積みでは伸び縮みの指定を解除する。
   * flex: 1 1 200px は「200px」を主軸の大きさとして扱うので、
   * 縦積みにすると1つあたりの高さが200pxになり、
   * 選択欄の下に大きな空きができてしまう。
   */
  .careers-field {
    flex: none;
  }

  .careers-search__submit {
    min-width: 0;
  }

  /* メリットは1列。3列のままだと1枚が狭すぎて文章が読めない */
  .careers-merits {
    grid-template-columns: 1fr;
  }

  /* ロゴは2列。5列のままだと1つが60px程度になり、ロゴが読めない */
  .careers-brands {
    grid-template-columns: repeat(2, 1fr);
  }

  /* 職種は1列。説明文まで入るので、2列だと1行が短くなりすぎる */
  .careers-jobs {
    grid-template-columns: 1fr;
  }
}