@charset "UTF-8";

/* ========================================================================
   AGILE-75 求人検索 UIUX刷新
   対象：求人検索TOP(/search)・検索結果リスト(/search/result)
   方針：
     - common.css（共通資産）は編集しない。ここで見た目を寄せる。
     - すべて .jobSearchBlock.-jobSearchUi 配下でのみ有効（影響範囲を限定）。
     - common.css の既定値を上書きしている箇所には理由をコメントで明記。
   ========================================================================
   目次：
     1. キーワード検索（枠なし・入力欄＋検索ボタン横並び）
     2. 「条件から探す」見出し／条件カード
     3. 条件行（下線区切りのコンパクト表示）
     4. 検索／リセットボタン（横並び）
     5. SP版（〜768px）の微調整
   ======================================================================== */

/* 変数：AGILE-75で使う色・線・余白（数値の散らばりを防ぐ） */
.jobSearchBlock.-jobSearchUi {
  --jobSearchUi-border: #e5e5e5;      /* 区切り線・カード枠 */
  --jobSearchUi-heading: #666;        /* 見出しのグレー文字 */
  --jobSearchUi-gap-row: 8px;         /* キーワード検索の入力とボタンの間隔 */
  --jobSearchUi-gap-btn: 12px;        /* 検索／リセットボタンの間隔 */
  --jobSearchUi-input-h: 40px;        /* キーワード入力欄の高さ */
}

/* ========================================================================
   1. キーワード検索
   ======================================================================== */

/* 白い枠（カード）を撤去：common.css の .jobSearch__inner の背景/枠/余白を打ち消す */
.jobSearchBlock.-jobSearchUi .jobSearch__inner.-keyword {
  background: transparent;
  border: none;
  padding: 0;
  margin-bottom: 24px;
}

/* 入力欄＋検索ボタンを1行で横並び。
   common.css の flex-direction:column / justify-content:space-between を上書き
   （space-between のままだと入力欄とボタンの間に不要な隙間ができる）。 */
.jobSearchBlock.-jobSearchUi .keywordSearch {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-start;
  gap: var(--jobSearchUi-gap-row);
}

/* 入力欄は余白いっぱいまで伸縮。common.css の width:7rem を上書き。白背景・高さ統一。 */
.jobSearchBlock.-jobSearchUi .keywordSearch__input {
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
  height: var(--jobSearchUi-input-h);
  margin: 0;
  background: #fff;
}

/* 検索ボタンは伸ばさず内容幅のまま（サイズ自体は common.css のまま触らない）。 */
.jobSearchBlock.-jobSearchUi .keywordSearch .buttonD {
  flex: 0 0 auto;
  margin: 0;
}

/* ========================================================================
   2. 「条件から探す」見出し／条件カード
   ======================================================================== */

/* 見出し：カード左上に小さめのグレー文字 */
.jobSearchBlock.-jobSearchUi .jobSearch__heading {
  margin: 0 0 4px;
  padding: 0 4px;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.4;
  color: var(--jobSearchUi-heading);
}

/* 条件検索ブロック＝白背景カード */
.jobSearchBlock.-jobSearchUi .jobSearch__inner:not(.-keyword) {
  background: #fff;
  border: 1px solid var(--jobSearchUi-border);
  border-radius: 8px;
  padding: 12px;
}

/* ========================================================================
   3. 条件行（グレー塗りブロックをやめ、薄い下線区切りのコンパクト表示）
      理想＝各行が「ラベル＋⊕」の1行＋下線。選択チップは有るときだけ下に出す。
   ======================================================================== */

/* fieldWrap：カード内に一体化させるため枠・余白をリセット */
.jobSearchBlock.-jobSearchUi .jobSearch__fieldWrap {
  border: none;
  margin: 0;
  padding: 0;
}

/* 各行：ラベル行と選択チップ行を縦積み。行の下線はここで引く。 */
.jobSearchBlock.-jobSearchUi .jobSearch__field {
  flex-direction: column;
  align-items: stretch;
  border-bottom: 1px solid var(--jobSearchUi-border);
}

/* ラベル行：ラベル左・⊕右端。下線は field 側に移したのでここでは消す。 */
.jobSearchBlock.-jobSearchUi .jobSearch__field__label {
  width: auto;
  margin: 0;
  padding: 14px 4px 14px 8px;
  border-bottom: none;
}

/* ラベルテキストを伸ばして⊕を右端へ押しやる */
.jobSearchBlock.-jobSearchUi .jobSearch__field__label > label:not([class]),
.jobSearchBlock.-jobSearchUi .jobSearch__field__label > span:not([class]) {
  flex: 1;
}

/* ⊕アイコン：右端に配置（modalLink機能はHTMLそのままなので維持される） */
.jobSearchBlock.-jobSearchUi .jobSearch__field__edit {
  position: static;
  flex: 0 0 auto;
  margin-left: auto;
}

/* 飾り⊕（年収行のみ・押しても何も起きない）。見た目だけ他行に揃える。
   ※要否は学情さんに確認中（引き継ぎメモのTODO参照）。 */
.jobSearchBlock.-jobSearchUi .jobSearch__field__edit.-dummy {
  cursor: default;
  pointer-events: none;
}
.jobSearchBlock.-jobSearchUi .jobSearch__field__edit.-dummy img {
  width: 100%;
  height: auto;
}

/* 選択チップ表示エリア：グレー背景・左ボーダー・最低高さを撤去（＝空行は余白ゼロ） */
.jobSearchBlock.-jobSearchUi .jobSearch__field__selected {
  background: transparent;
  border-left: none;
  min-height: 0;
  padding: 0;
}

/* チップがある行だけ下に余白 */
.jobSearchBlock.-jobSearchUi .jobSearch__field__selected .jobSearch__field__selectedList:not(:empty) {
  padding: 0 8px 12px;
}

/* 年収のドロップダウンは従来どおり表示。上下に軽い余白。 */
.jobSearchBlock.-jobSearchUi .jobSearch__field__label.-income + .jobSearch__field__selected {
  padding: 0 8px 14px;
}

/* 年収ドロップダウンの矢印：common.css の緑矢印＋左縦線を、デザインに合わせて
   グレー矢印・縦線なしに上書き（.-jobSearchUi スコープ限定）。
   矢印SVGは common.css と同形状で stroke色だけ #999 に変更。 */
.jobSearchBlock.-jobSearchUi .selectWrap::after {
  border-left: none; /* 縦の仕切り線を消す */
  background: url("data:image/svg+xml;charset=utf8,%3Csvg%20width%3D%2216%22%20height%3D%2210%22%20viewBox%3D%220%200%2016%2010%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M2%202.13672L8%207.86399L14%202.13672%22%20stroke%3D%22%23999999%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E") no-repeat center center;
  background-size: 0.16rem auto;
}

/* ========================================================================
   4. 検索／リセットボタン（横並び・リセット左／検索右）
      common.css では .jobSearch__reset が position:absolute;right:0 で右上固定、
      .jobSearch__submitWrap が flex-direction:column。両方を打ち消して横並びにする。
   ======================================================================== */
.jobSearchBlock.-jobSearchUi .jobSearch__submitWrap.-btnRow {
  display: flex;
  flex-direction: row !important; /* common.css の column を確実に上書き */
  flex-wrap: nowrap;
  justify-content: center;
  align-items: stretch; /* リセットと検索の高さを揃える */
  gap: var(--jobSearchUi-gap-btn);
  margin-top: 28px;
}

/* リセットの絶対配置を解除して通常フローへ（HTML順どおり左に来る） */
.jobSearchBlock.-jobSearchUi .jobSearch__submitWrap.-btnRow .jobSearch__reset {
  position: static;
  right: auto;
  top: auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 検索の margin:0 auto を解除（中央寄せは親の justify-content で行う） */
.jobSearchBlock.-jobSearchUi .jobSearch__submitWrap.-btnRow .jobSearch__submit {
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 「検/索」と縦に折り返すのを防止 */
.jobSearchBlock.-jobSearchUi .jobSearch__submitWrap.-btnRow .jobSearch__submit span,
.jobSearchBlock.-jobSearchUi .jobSearch__submitWrap.-btnRow .jobSearch__reset span {
  white-space: nowrap;
}

/* ========================================================================
   5. SP版（〜768px）
   ======================================================================== */
@media screen and (max-width: 768px) {
  /* キーワード検索：SPでも横並び維持。入力欄は伸縮、ボタンは内容幅・折り返し禁止。
     （common.css の width:7rem / 縦積みを !important で確実に解除） */
  .jobSearchBlock.-jobSearchUi .keywordSearch {
    gap: 6px;
  }
  .jobSearchBlock.-jobSearchUi .keywordSearch__input {
    width: auto !important;
    max-width: none;
  }
  .jobSearchBlock.-jobSearchUi .keywordSearch .buttonD {
    width: auto !important;
    min-width: 0;
    white-space: nowrap;
    padding-left: 16px;
    padding-right: 16px;
  }

  /* 条件行のラベル余白をSP用に微調整 */
  .jobSearchBlock.-jobSearchUi .jobSearch__field__label {
    padding: 12px 4px 12px 8px;
  }

  /* ボタン横並び：SPでは「リセット小・検索大」の比率にする。
     common.css の SP指定で reset が広がるのを打ち消し、
     リセットは内容幅、検索は残り幅いっぱいに。 */
  .jobSearchBlock.-jobSearchUi .jobSearch__submitWrap.-btnRow .jobSearch__reset {
    flex: 0 0 auto;        /* 内容幅のまま（広げない） */
    width: auto;
    min-width: 0;
    padding-left: 16px;
    padding-right: 16px;
    white-space: nowrap;
  }
  .jobSearchBlock.-jobSearchUi .jobSearch__submitWrap.-btnRow .jobSearch__submit {
    flex: 1 1 auto;        /* 残り幅いっぱいに広げる */
    width: auto;
    min-width: 0;
  }
}


/* ============================================================
   求人検索結果リスト（/search/result）AGILE-75
   ※この上部エリア（検索条件リンク・条件保存ボタン・件数バー・並び替え）は
     検索結果リスト専用。素の searchResult__ クラスにスコープする。
   ============================================================ */

/* 上部エリア：検索条件リンク（左）と条件保存ボタン（右）を横並び */
.searchResult__titleWrapper {
  display: flex;
  align-items: center;    /* カード・ボタンそれぞれ自然な高さで中央揃え（無理に伸ばさない） */
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 16px;
}
/* 条件保存ボタン：既存 margin-left:35px を打ち消す＋
   デザインに合わせて角丸にする（common.css の角ばった既定を上書き）。 */
.searchResult__titleWrapper .buttonB {
  margin: 0;
  border-radius: 8px;
  overflow: hidden;   /* 内側の背景が角丸からはみ出さないように */
}
.searchResult__titleWrapper .searchResult__title {
  flex: 1 1 auto;   /* カードを条件保存ボタン手前まで最大限広げる */
  min-width: 0;     /* テキスト省略(...)を効かせるため */
  margin: 0;
}

/* 検索条件テキストを押せる「白いカード」リンク（虫眼鏡＋テキスト）。
   親(h1)いっぱいに広げるが、max-width で伸びすぎを抑える。
   テキスト（サーバー側で80桁省略済み）が収まらなければ末尾で ... にする。 */
.searchResult__condLink {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  max-width: 1120px;    /* 全幅よりほんの少しだけ短く（伸びすぎ防止） */
  box-sizing: border-box;
  padding: 10px 16px;   /* 縦10px＝保存ボタン(高さ42px)に近い高さに抑える */
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  text-decoration: none;
  color: #333;
}
/* 検索条件テキスト＋「を含む転職・求人情報」をひとまとめにして、
   カード幅に収まらない分を末尾で ... にする（全部カード内に収める） */
.searchResult__condLink .searchResult__condLink__text {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.searchResult__condLink:hover {
  border-color: #17A462;
}

/* 虫眼鏡アイコン（Figma提供のPNG。__icon を含むクラスに付く既存の
   ::before 白アイコン(0.2rem)と干渉しないよう __mark クラスにしている） */
.searchResult__condLink__mark {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  background: url("/common/img/icon_search.png") no-repeat center / contain;
}
/* 念のため ::before が付いても無効化 */
.searchResult__condLink__mark::before {
  display: none !important;
  content: none !important;
}


/* 件数＋並び替えバー：件数(左)と並び替え(右)を同じ行に横並び */
.searchResult__sortBar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin-top: 20px;
  margin-bottom: 12px;
  padding-left: 12px;   /* 件数・プルダウンが端にくっつかないよう左右に余白 */
  padding-right: 12px;
}

/* 件数側（paging_count が内部で .pageNumber を出力するため余白をリセット。
   フォントは既存の rem 指定で巨大化しないよう固定px） */
.searchResult__sortBar .searchResult__count .pageNumber {
  display: flex;
  align-items: baseline;
  gap: 4px 8px;
  margin: 0;
}
.searchResult__sortBar .searchResult__count .pageNumber__current,
.searchResult__sortBar .searchResult__count .pageNumber__all {
  margin: 0;
}
/* 数字は少し大きく・太字・黒（デザイン：数字を強調） */
.searchResult__sortBar .searchResult__count .pageNumber__num {
  font-size: 16px;
  font-weight: bold;
  color: #333;
}
/* 単位（件/全/件中）と区切り（/）は小さめ・黒（サイズ差だけでメリハリ） */
.searchResult__sortBar .searchResult__count .pageNumber__unit,
.searchResult__sortBar .searchResult__count .pageNumber__sep {
  font-size: 13px;
  color: #333;
}
/* 既存共通CSSが .pageNumber__all に括弧（::before '(' / ::after ')'）を
   付けているため、本画面では打ち消す（デザインに括弧は無い） */
.searchResult__sortBar .searchResult__count .pageNumber__all::before,
.searchResult__sortBar .searchResult__count .pageNumber__all::after {
  content: none !important;
}

/* 並び替え側：ラベルとセレクトを横並び（rem指定で巨大化しないよう固定px） */
.searchResult__sortBar .searchResult__sort {
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}
/* 並び替えプルダウンの矢印：縦の仕切り線を消し、矢印をグレーに
   （求人検索の年収プルダウンと同じ見た目に揃える） */
.searchResult__sort .selectWrap::after {
  border-left: none;
  background: url("data:image/svg+xml;charset=utf8,%3Csvg%20width%3D%2216%22%20height%3D%2210%22%20viewBox%3D%220%200%2016%2010%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M2%202.13672L8%207.86399L14%202.13672%22%20stroke%3D%22%23999999%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E") no-repeat center center;
  background-size: 0.16rem auto;
}


/* SP：横並びのまま、件数が左・並び替えが右で収まるように */
@media screen and (max-width: 768px) {
  .searchResult__sortBar {
    gap: 6px 12px;
  }
  /* SPでは検索条件カードを画面幅に収める */
  .searchResult__condLink {
    max-width: none;
  }
  /* SPでも上部バー（カード＋条件保存ボタン）を横並びにする。
     共通CSSのSP指定が強いため !important 上書き。 */
  .searchResult__titleWrapper {
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 6px !important;
    padding-left: 12px !important;   /* 共通CSSのSP左右padding(約29px)を詰めて緑の余白を減らす */
    padding-right: 12px !important;
  }
  /* カードを優先的に広げる（h1） */
  .searchResult__titleWrapper .searchResult__title {
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }
  /* 検索窓（カード）：小さめ・幅は親いっぱい（長く）・中の文字も小さめ */
  .searchResult__titleWrapper .searchResult__condLink {
    width: 100% !important;
    max-width: none !important;
    padding: 8px 10px !important;
    gap: 6px !important;
    font-size: 12px !important;
  }
  .searchResult__condLink .searchResult__condLink__mark {
    width: 16px !important;
    height: 16px !important;
  }
  /* 条件保存ボタン：横幅を縮める（コンパクト）。min-width 等の既存指定も打ち消す */
  .searchResult__titleWrapper .buttonB {
    width: auto !important;
    min-width: 0 !important;
    margin: 0 !important;
    flex: 0 0 auto !important;
    white-space: nowrap !important;
    padding: 8px 8px !important;
    font-size: 12px !important;
  }
}


/* ============================================================
   共通パーツ：気になる（ハート）ボタンの見た目（jobCardUi）
   求人検索結果リスト・求人詳細の両方で使う。
   見た目のみ（動作は likeAction / likeRemoveAction のJSそのまま）。
   配置（絶対配置など）は使う画面側で指定する（ここは見た目だけ）。
   ============================================================ */

/* ボタン枠：白背景＋グレー枠＋角丸の小さなボックス */
.jobCardUi__like {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: #fff;
  border: 1px solid #d9d9d9;  /* 未気になる時はグレー枠（デザイン） */
  border-radius: 6px;
  text-decoration: none;
  box-sizing: border-box;
}
/* ハートアイコン：未（通常）＝緑のアウトライン（白抜き）ハート */
.jobCardUi__like__icon {
  display: block;
  width: 18px;
  height: 18px;
  background: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%230B864C%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M20.84%204.61a5.5%205.5%200%200%200-7.78%200L12%205.67l-1.06-1.06a5.5%205.5%200%200%200-7.78%207.78l1.06%201.06L12%2021.23l7.78-7.78%201.06-1.06a5.5%205.5%200%200%200%200-7.78z%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}
/* 気になる済み（-on）＝薄緑背景＋緑枠＋塗りつぶし緑ハート */
.jobCardUi__like.-on {
  background: #E2F1EA;    /* 済みの薄い背景 */
  border-color: #0B864C;  /* 済みのときは緑枠に */
}
.jobCardUi__like.-on .jobCardUi__like__icon {
  background: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22%230B864C%22%3E%3Cpath%20d%3D%22M12%2021.23l-1.45-1.32C5.4%2015.36%202%2012.28%202%208.5%202%205.42%204.42%203%207.5%203c1.74%200%203.41.81%204.5%202.09C13.09%203.81%2014.76%203%2016.5%203%2019.58%203%2022%205.42%2022%208.5c0%203.78-3.4%206.86-8.55%2011.54L12%2021.23z%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}


/* ============================================================
   共通パーツ：最終更新日・掲載終了日の横並び（jobCardUi）
   求人検索結果リスト・求人詳細の両方で使う。
   日付2つ（最終更新日／掲載終了日）を1行に横並びで表示する。
   ============================================================ */
.jobCardUi__dateRow .featuredJob__item__postingEnd {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 20px;
  margin: 0;
}
.jobCardUi__dateRow .postingEnd__date {
  white-space: nowrap;
}


/* ============================================================
   一覧専用：求人カード上部の日付行・NEWバッジ・ハート配置
   （searchResult__item スコープ＝検索結果リストのカード限定）
   ============================================================ */

/* 更新日の行はカード全幅で最上部に。
   カードは common.css で flex-wrap:wrap のため、全幅にすることで
   画像・本文は次の行（＝更新日の下）に並ぶ＝崩れを防ぐ。
   配置：NEW＝全幅で上／日付＝左・ハート＝右（右は絶対配置）。 */
.featuredJob__item.searchResult__item .jobCardUi__dateRow {
  width: 100%;
  flex: 0 0 100%;
  margin-bottom: 4px;
  padding: 6px 44px 6px 0;  /* 上下に余白／右は絶対配置ハートと重ならない余白 */
  box-sizing: border-box;
}
/* 日付は左で伸ばす（中央寄せを打ち消す） */
.featuredJob__item.searchResult__item .jobCardUi__dateRow .featuredJob__item__postingEnd {
  flex: 1 1 auto;
  min-width: 0;
  justify-content: flex-start;
  text-align: left;
}
/* NEWバッジ：カード先頭（日付行の上）に左寄せの小さい赤バッジ（赤背景・白文字）。
   見た目・配置とも共通パーツ（jobCardUi）。検索結果リスト・求人詳細の似た求人カードで共通利用。
   ※NEW判定（start_dateから何日以内か）はビュー側のPHPで行う（基準日数は学情確認待ち）。 */
.jobCardUi .jobCardUi__newBadge {
  flex: 0 0 100%;         /* カードのflexで単独行に */
  order: -1;              /* 日付行より前（上）に */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: flex-start; /* 左寄せ（横に広がらない） */
  width: -moz-fit-content;
  width: fit-content;
  margin: 0 0 4px;
  padding: 5px 10px;      /* 縦の高さを少し増やす（デザインに寄せる） */
  background: #e4322b;    /* デザインの赤 */
  color: #fff;
  font-size: 11px;
  font-weight: 500;       /* 文字を細めに（太字をやめる） */
  line-height: 1.3;
  border-radius: 3px;
  letter-spacing: 0.04em;
}
/* 気になるハート：一覧カードでは右上角に絶対配置（見た目は jobCardUi__like 共通）。 */
.featuredJob__item.searchResult__item .jobCardUi__like {
  position: absolute;
  top: 16px;    /* カード上端からの余白（デザインの右上位置） */
  right: 16px;  /* カード右端からの余白 */
  z-index: 2;
}


/* ============================================================
   汎用カスタムセレクト（AGILE-75・他画面でも流用可）
   ネイティブ select では開いた時の選択肢の色・角丸を変えられないため、
   見た目用のドロップダウンを JS(custom_select.js) で生成して使う。
   - 元 select は .customSelect__native で視覚的に隠す（フォールバック用に残す）。
   - トリガ（選択中表示）＋パネル（選択肢リスト）を緑系デザインに。
   ============================================================ */

/* ラッパ（相対配置の基準。パネルを絶対配置で下に出す）。
   トリガ・パネルはサーバー側で最初から出力されるため、JS待ちの非表示は不要。
   （以前の -ready 非表示は遷移直後にプルダウンが消える原因だったため撤去） */
.customSelect {
  position: relative;
  display: inline-block;
  min-width: 160px;
}

/* 元 select を視覚的に隠す（表示はカスタムUIが担う。アクセシビリティ用に残す）。
   data-custom-select が付いた時点（JS初期化前でも）で隠すことで、
   並び替え遷移中にネイティブ select が一瞬見える FOUC を防ぐ。 */
.customSelect[data-custom-select] > select,
.customSelect[data-custom-select] > .selectWrap,
.customSelect__native {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  clip: rect(0 0 0 0);
  overflow: hidden;
}

/* トリガ（閉じている状態：白背景＋枠＋選択中テキスト＋矢印） */
.customSelect__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  padding: 8px 12px;
  background: #fff;
  border: 1px solid #d9d9d9;   /* 閉じている時はグレー枠（開くとパネルが緑系） */
  border-radius: 4px;          /* トリガは角丸控えめ（丸いのはパネル側） */
  font-size: 14px;
  color: #333;
  line-height: 1.4;
  cursor: pointer;
  box-sizing: border-box;
  text-align: left;
}
.customSelect__label {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 矢印（グレーのシェブロン。開いているときは上向き） */
.customSelect__arrow {
  flex: 0 0 auto;
  width: 14px;
  height: 9px;
  background: url("data:image/svg+xml;charset=utf8,%3Csvg%20width%3D%2216%22%20height%3D%2210%22%20viewBox%3D%220%200%2016%2010%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M2%202.13672L8%207.86399L14%202.13672%22%20stroke%3D%22%23999999%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
  transition: transform 0.15s ease;
}
.customSelect.-open .customSelect__arrow {
  transform: rotate(180deg);   /* 開いているときは上向き（∧） */
}

/* パネル（開いた時の選択肢リスト：角丸・白背景・影） */
.customSelect__panel {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 20;
  margin: 0;
  padding: 6px;
  list-style: none;
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 10px;         /* デザイン：角丸 */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
  display: none;               /* 既定は非表示 */
}
.customSelect.-open .customSelect__panel {
  display: block;
}

/* 選択肢（各項目：角丸・ホバーで薄緑） */
.customSelect__option {
  padding: 10px 12px;
  border-radius: 6px;
  font-size: 14px;
  color: #333;
  line-height: 1.4;
  cursor: pointer;
}
.customSelect__option:hover {
  background: #eef7f1;         /* ホバー：薄緑 */
}
/* 選択中：薄緑背景＋緑文字＋太字（デザイン） */
.customSelect__option.-selected {
  background: #e3f2ea;
  color: #17A462;
  font-weight: 700;
}


/* ============================================================
   共通パーツ：求人カードの条件タグの色（jobCardUi）
   求人検索結果リスト・求人詳細の両方で使う。
   ・緑枠タグ（雇用形態・年収＝li.-condition）：白背景＋緑枠＋緑文字＋太字
   ・こだわり系タグ（li）：白背景＋薄グレー枠＋濃いグレー文字
   common.css の既定（薄緑背景＋緑文字／濃い緑背景＋白文字）を
   .jobCardUi スコープで上書きする（他画面には影響させない）。
   ============================================================ */

/* タグリスト：会社名（subheading）との間に余白を空ける。
   既存クラス（scoutDetail__info__tagList）を温存し、色だけ jobCardUi スコープで上書き。 */
.jobCardUi .scoutDetail__info__tagList {
  margin-top: 10px;
}
/* こだわり系（通常タグ）：白背景＋グレー枠＋濃いグレー文字（common.css の薄緑を上書き） */
.jobCardUi .scoutDetail__info__tagList li {
  background: #fff;
  border: 1px solid #d9d9d9;
  color: #555;
}
/* 緑枠タグ（雇用形態・年収＝-condition）：薄緑背景＋緑枠＋緑文字（common.css の濃い緑背景を上書き）。
   背景は #E2F1EA（気になるハート済みの薄緑と同色）、文字・枠はカード内の緑統一色 #0B864C。 */
.jobCardUi .scoutDetail__info__tagList li.-condition {
  background: #E2F1EA;
  border: 1px solid #0B864C;
  color: #0B864C;
  font-weight: 700;   /* 緑枠タグ（雇用形態・年収）は太字 */
}


/* ============================================================
   一覧専用：求人カードのレイアウト（searchResult__item スコープ・flex方式）
   構成（縦積み）：
     jobCardUi__dateRow（更新日・全幅）
     searchResult__cardTop（画像＋本文を横並び）
     featuredJob__item__body（タグ・詳細・全幅）
   float をやめ flex にすることで、タイトル行数やカード順に関係なく
   安定してレイアウトされる（2個目以降が崩れる問題を解消）。
   ============================================================ */

/* カード全体：縦積み（common.css の flex-wrap を打ち消す）＋ハート絶対配置の基準。 */
.featuredJob__item.searchResult__item {
  display: block;
  position: relative;
}

/* マイページTOPの気になるリスト限定：白カード枠を付ける（AGILE-75）。
   検索結果リスト(/search/result)は別途ベースCSSで枠が付くため、ここは .likeListBlock に限定し
   /search/result には影響させない（二重枠防止）。 */
.likeListBlock .featuredJob__item.searchResult__item {
  background: #fff;
  border: 1px solid var(--jobSearchUi-border, #e5e5e5);
  padding: 16px;
  box-sizing: border-box;
}
/* カード間の余白（縦積み） */
.likeListBlock .featuredJob.likeList .featuredJob__item.searchResult__item + .featuredJob__item.searchResult__item {
  margin-top: 12px;
}
/* 共通 .featuredJob.likeList の左右padding(0.16rem)を打ち消す。
   これが残ると likeListBlock(mypageTopBlock=--spacer-3) の余白と二重になり、
   カードだけヘッダーより内側に入って短く見える。カード左右をヘッダーに揃える。 */
.likeListBlock .featuredJob.likeList {
  padding-left: 0;
  padding-right: 0;
}

/* 上段：画像（左）＋本文（右）を横並び・上揃え */
.searchResult__cardTop {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
/* サムネ：固定幅・上端そろえ・下余白なし。既定（SP）は100px、PCで240pxに拡大。 */
.searchResult__cardTop .featuredJob__item__thumb {
  flex: 0 0 auto;
  width: 100px;
  margin: 0;
  height: auto;
}
@media screen and (min-width: 769px) {
  .searchResult__cardTop .featuredJob__item__thumb {
    width: 240px;
  }
}
.searchResult__cardTop .featuredJob__item__thumb img {
  width: 100%;
  height: auto;
  object-fit: cover;
}
/* 本文（タイトル・カテゴリ・会社名）：残り幅。長いタイトルも折り返す。 */
.searchResult__cardTop .searchResult__cardTopBody {
  flex: 1 1 0;
  min-width: 0;
}
/* カテゴリ（[業種]）と会社名は縦並び（common.css の横並びを上書き） */
.searchResult__cardTop .featuredJob__item__subheading {
  display: block;
}
.searchResult__cardTop .featuredJob__item__categories {
  display: flex;
  flex-wrap: wrap;
}

/* 共通パーツ：求人タイトルの色をカード内の緑統一色に揃える（jobCardUi）。
   common.css のリンク色（明るい緑に見える）を jobCardUi 内だけ #0B864C に上書き。 */
.jobCardUi .featuredJob__item__title a {
  color: #0B864C;
}



/* ============================================================
   共通パーツ：条件タグの N行省略トグル（jobCardUi__tagClamp）
   求人検索結果リスト（2行）・求人詳細（3行）の両方で使う。
   ・既定：タグリストを N行ぶんの高さにクランプ（超過分は隠す）。
   ・-expanded：全表示。
   ・トグルは JS(tag_clamp.js) が「N行に収まらない時だけ」表示する（既定は非表示）。
   ・ラベル：条件をもっと見る ▾ / 条件の表示を省略する ▲
   ・何行でクランプするかは data-tag-clamp="2|3" でビューから指定（JSが読む）。
   ============================================================ */

/* ラッパ：縦積みでトグルを右端に。
   既存のタグHTML（scoutDetail__info__tagList）をこのラッパで囲んで使う。 */
.jobCardUi__tagClamp {
  display: flex;
  flex-direction: column;
  align-items: flex-end;   /* トグルを右端へ */
}
/* タグリストを N行にクランプ。--tag-max-h は JS が実測値（N行ぶん＋次の行のチラ見え分）を
   セットする。タグリストは全幅のまま（右寄せの影響を受けない）。 */
.jobCardUi__tagClamp .scoutDetail__info__tagList {
  width: 100%;
  overflow: hidden;
  max-height: var(--tag-max-h, 999px);
}
/* 省略中（トグルあり・未展開）だけ下端をフェードアウト。
   デザイン：N行目まではくっきり見せ、その下（次の行のチラ見え）をぼんやり消す。
   --tag-fade-start は「くっきり見せる割合」。JS がN行ぶんの比率をセットする。
   mask は -webkit- も併記（Safari対応）。 */
.jobCardUi__tagClamp.-hasToggle:not(.-expanded) .scoutDetail__info__tagList {
  -webkit-mask-image: linear-gradient(to bottom, #000 var(--tag-fade-start, 70%), transparent 100%);
          mask-image: linear-gradient(to bottom, #000 var(--tag-fade-start, 70%), transparent 100%);
}
/* 全表示：クランプ解除＋フェード解除 */
.jobCardUi__tagClamp.-expanded .scoutDetail__info__tagList {
  max-height: none;
  -webkit-mask-image: none;
          mask-image: none;
}

/* トグルボタン：既定は非表示。JS が超過判定したカードだけ表示する。 */
.jobCardUi__tagClamp .scoutDetail__info__tagToggle {
  display: none;
  align-items: center;
  gap: 4px;
  margin-top: 8px;
  padding: 0;
  background: none;
  border: none;
  color: #0B864C;      /* デザイン：カード内の緑（求人タイトル等と同色） */
  font-size: 13px;
  line-height: 1.4;
  cursor: pointer;
}
/* 文字に緑と同色の下線（矢印には付けない） */
.jobCardUi__tagClamp .scoutDetail__info__tagToggle .tagToggle__text {
  text-decoration: underline;
  text-underline-offset: 2px;
}
/* JS が超過と判定したら表示（-hasToggle をラッパに付与） */
.jobCardUi__tagClamp.-hasToggle .scoutDetail__info__tagToggle {
  display: inline-flex;
}
/* 矢印（▾）。文字の左に置く。全表示時は上向き（▲）に。 */
.jobCardUi__tagClamp .scoutDetail__info__tagToggle::before {
  content: "";
  width: 10px;
  height: 7px;
  background: url("data:image/svg+xml;charset=utf8,%3Csvg%20width%3D%2216%22%20height%3D%2210%22%20viewBox%3D%220%200%2016%2010%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M2%202.13672L8%207.86399L14%202.13672%22%20stroke%3D%22%230B864C%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}
.jobCardUi__tagClamp.-expanded .scoutDetail__info__tagToggle::before {
  transform: rotate(180deg);
}


/* ============================================================
   求人紹介コメント（AGILE-75）
   求人カード最下部に、薄グレー背景の枠で表示。
   タイトル（緑太字＋左アイコン）＋本文（黒）。
   データは job_contents.job_intro_comment_title_id / _body。
   ============================================================ */
.jobIntroComment {
  margin-top: 16px;
  padding: 16px;
  background: #f5f5f5;      /* デザイン：薄グレー背景 */
}
/* タイトル：緑太字。左にアイコン。 */
.jobIntroComment__title {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 8px;
  color: #0B864C;      /* カード内の緑統一色（求人タイトル・緑枠タグ・トグルと同色） */
  font-size: 14px;
  font-weight: 700;
  line-height: 1.4;
}
/* アイコン：学情提供の advisor.png（緑のアドバイザー図・背景透過の24x24）。
   デザインは「白い丸の中に緑のアドバイザー図」なので、透過PNG（中身の緑図）を
   白い円（border-radius:50%・白背景）の中央に配置して丸ごとアイコンを再現する。
   丸=28px／中の緑図=18px（paddingぶん余白が内側にできる）。 */
.jobIntroComment__icon {
  flex: 0 0 auto;
  box-sizing: border-box;
  width: 28px;
  height: 28px;
  padding: 5px;                 /* 白丸と緑図の間の余白 */
  background-color: #fff;       /* 白い丸 */
  background-image: url("/common/img/icon_advisor.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 18px 18px;    /* 中の緑図のサイズ */
  border-radius: 50%;           /* 丸にする */
}
/* 本文：黒・読みやすい行間 */
.jobIntroComment__body {
  margin: 0;
  color: #333;
  font-size: 13px;
  line-height: 1.7;
}

/* ========================================================================
   AGILE-84 求人詳細 UIUX刷新（SP_RECRUIT-DE）
   方針：
     - 既存 jobCardUi / jobIntroComment / scoutDetail__info__tagList を流用。
     - ここでは求人詳細フレーム固有のレイアウトのみ定義する。
     - すべて .recruitDetail スコープ配下に限定し、他画面へ影響させない。
     - 色は AGILE-75 共通：緑 #0B864C / タグ緑枠 #17a462 / グレー #636363 / 区切り #e8e8e8。
   ======================================================================== */

/* 全体：375幅想定。外側は灰色フレーム(#f4f4f4)、内側の白ブロックが浮く構成。
   figma: .sp_recruit-de-1 background #f4f4f4 / blocks gap 24px */
.recruitDetail {
  background: #f4f4f4;
}
.recruitDetail__inner {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 100%;
  /* 現行求人詳細のコンテンツ幅に合わせる：旧デザインの
     .recruitDetail__head/__info/__pageLink/__section = width:9.6rem(中央寄せ)と同値。
     可変remシステム(PC時 1rem=100vw/13.66)に連動するためズーム/デバイスにも追従する。 */
  max-width: 9.6rem;
  margin-left: auto;
  margin-right: auto;
  /* 左右16px=灰色の外側余白。下は元 120px(固定フッター回避)だったが空き過ぎたため 0 に。
     ※実機で、最下部までスクロールしたとき固定フッター(応募バー)に最後のコンテンツが
       隠れないかを確認すること。隠れる場合はフッター高分(約64px)を戻す（AGILE-75）。 */
  padding: 16px 16px 0;
  box-sizing: border-box;
}

/* ---- 1枚の白枠パネル（figma .frame-1000007789-3） ----
   ヘッダー〜企業情報までを内包。白地+#e8e8e8枠。内部は区切り線で分割。 */
.recruitDetail__panel {
  display: flex;
  flex-direction: column;
  width: 100%;
  background: #fff;
  border: 1px solid #e8e8e8;
  box-sizing: border-box;
}
/* パネル内の各ブロックは白枠幅いっぱい（100%）に広げ、上下に余白を取る。
   width:100%＋border-box で左右paddingを含めても枠内に収める（左寄り防止）。 */
.recruitDetail__panel > * {
  width: 100%;
  margin: 0;
  padding-top: 24px;
  padding-bottom: 24px;
  box-sizing: border-box;
}
/* common.css の .section { background:#fff; border:1px solid #e8e8e8 } の
   「白地＋四辺枠」をパネル内でのみ打ち消す（白枠はパネル自身が1枚だけ持つ）。
   .recruitDetail__panel スコープ限定のため他画面の .section には影響しない。 */
.recruitDetail__panel .section {
  background-color: transparent;
  border: 0;
}
/* ただし figma（rectangle-4246/4247 = #e8e8e8）に合わせ、
   アイコン付きタイトルのセクション（事業内容/募集要項/PR/企業情報）は
   セクション上辺にグレーの区切り線を入れる。 */
.recruitDetail__panel > .recruitDetail__section {
  border-top: 1px solid #e8e8e8;
}
/* 新デザインの区切りは「セクション上辺」に一本化する。
   旧 common.css がタイトル/内枠に付ける border は不要（SPでタイトル下に線が出る原因）。
   パネルスコープ限定で打ち消す（他画面の求人詳細には影響しない）。 */
.recruitDetail__panel .recruitDetail__sectionTitle,
.recruitDetail__panel .recruitDetail__sectionInner,
.recruitDetail__panel .recruitDetail__sectionSubTitle {
  border: 0;
}
/* 大見出し（事業内容/募集要項/PRポイント/企業情報）の見た目を変更（AGILE-75）。
   ・文字色：従来の緑(--brand-main) → 黒 に。
   ・アイコン：従来の「書類＋横線」→ 求人検索「採用対象」と同じ「メモ＋チェック」書類アイコン
     （緑 #17A462）に差し替える。common.css はビルド済み共有のため触らず本CSSで上書き。 */
.recruitDetail__panel .recruitDetail__sectionTitle {
  color: #000;
  /* 文字サイズは変更しない（従来の緑文字時と同じ＝PC: common.css の --font-size-xl のまま）。
     色を黒にするだけ。SP の 14px 化は下の @media(max-width:767) で別途行う（AGILE-75）。 */
}
/* PC：アイコンと見出し文字の間隔（AGILE-75・指定値 0.29rem）。 */
@media screen and (min-width: 768px), print {
  .recruitDetail__sectionTitle > span {
    padding-left: 0.29rem;
  }
}
.recruitDetail__panel .recruitDetail__sectionTitle > span::before {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20width%3D%2219%22%20height%3D%2222%22%20viewBox%3D%220%200%2019%2022%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M17%2011.5V5.8C17%204.11984%2017%203.27976%2016.673%202.63803C16.3854%202.07354%2015.9265%201.6146%2015.362%201.32698C14.7202%201%2013.8802%201%2012.2%201H5.8C4.11984%201%203.27976%201%202.63803%201.32698C2.07354%201.6146%201.6146%202.07354%201.32698%202.63803C1%203.27976%201%204.11984%201%205.8V16.2C1%2017.8802%201%2018.7202%201.32698%2019.362C1.6146%2019.9265%202.07354%2020.3854%202.63803%2020.673C3.27976%2021%204.11984%2021%205.8%2021H9M11%2010H5M7%2014H5M13%206H5M11.5%2018L13.5%2020L18%2015.5%22%20stroke%3D%22%2317A462%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  /* アイコンを少し大きめに（概要見出しとのバランス・AGILE-75）。縦横比(19:22)維持。 */
  width: 20px;
  height: 23px;
  /* アイコンを見出し文字(span)に対して縦中央にそろえる（固定 top だとアイコン拡大でズレるため）。 */
  top: 50%;
  transform: translateY(-50%);
}
/* 「応募・選考について」は募集要項セクション内の sectionSubInner に入るため、
   セクション上辺の区切り線が付かない。figma に合わせ上辺にグレー区切り線を付ける。
   （上の一括打ち消しから sectionSubInner を外し、ここで上辺のみ復活）。 */
.recruitDetail__panel .recruitDetail__sectionSubInner {
  border: 0;
  border-top: 1px solid #e8e8e8;
  margin-top: 24px;
  padding-top: 24px;
}
/* パネル内ブロックの左右余白（figma：本文は左右12px） */
.recruitDetail__panel > .recruitDetail__section,
.recruitDetail__panel > .recruitDetail__pageLink {
  padding-left: 12px;
  padding-right: 12px;
}

/* ---- ヘッダーカード（日付・タイトル・画像・会社名・タグ） ----
   パネル内に内包されるため自前の白地/枠は持たない。 */
.recruitDetail__card {
  position: relative;  /* 右上の気になるハート(.jobCardUi__like)の絶対配置基準（AGILE-75） */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 12px 0 24px;
}
/* 気になるハート：求人詳細ヘッダーカードの右上角に絶対配置（検索結果カードと同じ位置・AGILE-75）。
   カード右左padは左右12pxのため right:12px でカード端に合わせる。 */
.recruitDetail__card > .jobCardUi__like {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
}
.recruitDetail__card .jobCardUi__dateRow {
  width: 100%;
  padding: 0 12px;
  box-sizing: border-box;
}
.recruitDetail__cardMain {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  width: 100%;
  padding: 0 12px;
  box-sizing: border-box;
}
/* タグ領域だけ左寄せにする（AGILE-75）。cardMain は align-items:center のため、
   幅指定の無い tagClamp は中身幅に縮んで中央に寄る。全幅＋左揃えでタグをカード左端から
   並べる（タイトルと同じ左端）。トグルは tagClamp 内で従来どおり右端。 */
.recruitDetail__cardMain > .jobCardUi__tagClamp {
  width: 100%;
  align-self: stretch;
}
.recruitDetail__cardTitle {
  margin: 0;
  width: 100%;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5;
  color: #000;
}
.recruitDetail__cardImage {
  width: 100%;
  text-align: center;
}
/* figma：白枠343幅に対して 157×105。幅は白枠に対する比率(157/343≒45.8%)で指定し、
   固定pxは使わない（PCで白枠が広がれば画像も比例拡大）。アスペクト比157:105を維持。
   中央寄せ（.recruitDetail__card が align-items:center）。 */
.recruitDetail__cardImage img {
  width: 45.77%;      /* 157 / 343 */
  height: auto;
  aspect-ratio: 157 / 105;
  object-fit: cover;
}
.recruitDetail__cardCompany {
  margin: 0;
  width: 100%;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.5;
  color: #000;
}

/* ---- 本文セクション共通（縦積み） ----
   上下paddingはパネル側(.recruitDetail__panel > *)で付与。ここは左右のみ。 */
.recruitDetail__block {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-left: 12px;
  padding-right: 12px;
}
/* 「この求人の概要」ブロックの上辺にグレー区切り線を入れる（AGILE-75）。
   他セクション(.recruitDetail__section)と同じ #e8e8e8 線で、タグ(ヘッダーカード)と
   概要の間の空白に区切りを付ける。線より上（ヘッダーカード側）の余白は詰める。 */
.recruitDetail__panel > .recruitDetail__block {
  border-top: 1px solid #e8e8e8;
}
/* ヘッダーカード下の余白を詰める（24px→12px）。線が入ることで区切りは明確になるため。 */
.recruitDetail__panel > .recruitDetail__card {
  padding-bottom: 12px;
}
.recruitDetail__blockTitle {
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.5;
  color: #000;
}
/* セクション見出しの緑アイコン（必要箇所でのみ付与） */
.recruitDetail__blockTitle .-icon {
  display: inline-flex;
  width: 16px;
  height: 16px;
  color: #17a462;
}

/* ---- SP文字サイズ調整（AGILE-84・SP限定） ----
   common.css 由来でSPのセクション見出し(--font-size-xl)・サブ見出し(--font-size-lg)が大きすぎるため、
   基準の「この求人の概要」見出し(.recruitDetail__blockTitle=12px相当)とそろう大きさへ縮小する。
   アイコン(::before)・本文・タイトル〜本文の余白もタイトルに合わせて縮める。
   ★PCには影響させない（PCは従来サイズのまま）。.recruitDetail スコープ限定で他画面にも波及させない。 */
@media screen and (max-width: 767px) {
  .recruitDetail .recruitDetail__sectionTitle {
    font-size: 14px;  /* 概要見出し(.recruitDetail__blockTitle SP=14px)と同じ固定pxに揃える（AGILE-75） */
  }
  .recruitDetail .recruitDetail__sectionSubTitle {
    font-size: var(--font-size-sm);
  }
  .recruitDetail .recruitDetail__sectionText {
    font-size: var(--font-size-sm);
  }
  /* タイトル左のアイコン：概要見出しとのバランスで少し大きめ・固定px（縦横比19:22維持）。 */
  .recruitDetail .recruitDetail__sectionTitle > span::before {
    width: 20px;
    height: 23px;
  }
  /* タイトル〜本文、サブ見出し〜本文の余白を詰める */
  .recruitDetail .recruitDetail__sectionTitle + * {
    margin-top: 0.12rem;
  }
  .recruitDetail .recruitDetail__sectionSubTitle + * {
    margin-top: 0.12rem;
  }

  /* ヘッダーコンテンツ（求人名〜概要ポイント）をSPで一回り拡大。
     svgつきセクションタイトルを縮小した分、相対的に小さく見えるため揃える。
     ※ラベルリスト(scoutDetail__info__tagList)は対象外＝従来サイズのまま。 */
  .recruitDetail .recruitDetail__cardTitle {
    font-size: 18px;  /* 16 → 18 */
  }
  .recruitDetail .recruitDetail__cardCompany {
    font-size: 14px;  /* 12 → 14 */
  }
  .recruitDetail .recruitDetail__blockTitle {
    font-size: 14px;  /* 概要見出し 12 → 14 */
  }
  .recruitDetail .recruitDetail__summaryList li {
    font-size: 14px;  /* 概要ポイント 12 → 14 */
  }
}
.recruitDetail__text {
  margin: 0;
  font-size: 12px;
  line-height: 1.6;
  color: #000;
}
.recruitDetail__text + .recruitDetail__text {
  margin-top: 8px;
}

/* ---- 概要（チェックリスト） ---- */
.recruitDetail__summaryList {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.recruitDetail__summaryList li {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.6;
  color: #000;
}
.recruitDetail__summaryCheck {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  /* マイページ特典タグ(.scoutCard__tags li::before)と同じ 緑丸＋白レ点 SVG に揃える（AGILE-75）。
     従来は緑丸背景＋テキスト「✓」だったが、チェックの形を特典と統一するため SVG 背景にする。
     HTML の「✓」テキストは font-size:0 で隠す。 */
  background: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20fill%3D%22none%22%3E%3Ccircle%20cx%3D%228%22%20cy%3D%228%22%20r%3D%228%22%20fill%3D%22%2317A462%22%2F%3E%3Cpath%20d%3D%22M4.5%208.2L7%2010.5L11.5%205.5%22%20stroke%3D%22%23fff%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E") no-repeat center center;
  background-size: contain;
  font-size: 0;  /* HTMLのテキスト「✓」を隠す（見た目はSVGに統一） */
  line-height: 1;
}

/* ---- 区切り線 ---- */
.recruitDetail__divider {
  height: 1px;
  margin: 0 12px;
  background: #e8e8e8;
}

/* ---- ホームページリンク ---- */
.recruitDetail__link {
  margin: 0;
  font-size: 12px;
  line-height: 1.6;
  color: #0b864c;
  text-decoration: underline;
  word-break: break-all;
}

/* ---- 似た求人セクション ----
   figma .frame-1000008459-102 は padding:0。左右余白は外側(.recruitDetail__inner 16px)のみで、
   上部の白枠パネルと左右の外縁を揃える（独自の左右12pxは付けない）。 */
.recruitDetail__similar {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.recruitDetail__similarTitle {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.5;
  color: #000;
}
.recruitDetail__similarList {
  display: flex;
  flex-direction: column;
  gap: 16px;
  /* legacy .searchResult__list の左右padding(0.16rem)を打ち消し、
     見出し(.recruitDetail__similarTitle)とカードの左端を揃える。 */
  padding-left: 0;
  padding-right: 0;
}

/* 似た求人カードは jobCardUi 共通スタイルを流用。
   figma .frame-1000007754：白地＋#e8e8e8枠。灰色フレーム上で白カードが浮く見た目を明示指定
   （共通カードの background 継承が詳細側で効かないケースへの保険も兼ねる）。 */
.recruitDetail__similarList .searchResult__item {
  width: 100%;
  box-sizing: border-box;
  background-color: #fff;
  border: 1px solid #e8e8e8;
}
/* 似た求人カードのサムネは figma で 56×37（検索結果一覧の 100/240px より小さい）。
   詳細の似た求人スコープ限定で上書き。白枠343に対する比率(56/343≒16.3%)で、
   固定pxは使わず PC でも比例拡大。アスペクト比56:37を維持。
   （一覧 .searchResult__cardTop の 100/240px には影響しない）。 */
.recruitDetail__similarList .searchResult__cardTop .featuredJob__item__thumb {
  width: 16.33%;      /* 56 / 343 */
}
@media screen and (min-width: 769px) {
  .recruitDetail__similarList .searchResult__cardTop .featuredJob__item__thumb {
    width: 16.33%;    /* 一覧の PC 240px 指定を打ち消し、詳細では比率を維持 */
  }
}
.recruitDetail__similarList .searchResult__cardTop .featuredJob__item__thumb img {
  width: 100%;
  height: auto;
  aspect-ratio: 56 / 37;
  object-fit: cover;
}

/* ---- 固定フッター（応募バー・figma Frame 1000007792） ----
   白地 / 上向きシャドウ 0 -3px 12px rgba(0,0,0,.5) / 上下 #ddd 枠 /
   padding 12px / gap 10px / 横並び：気になる(小・左) + 応募(オレンジ・幅広・右)。 */
.recruitDetail__fixedBar.fixedButton {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  padding: 12px;
  box-sizing: border-box;
  background: #fff;
  box-shadow: 0 -3px 12px rgba(0, 0, 0, 0.5);
  border-top: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
  margin-top: 0;
}
/* 気になる（小・左）：白地・#e8e8e8枠・角丸5px。
   高さは応募ボタンと揃える（align-items:stretch＋縦paddingを同値12pxに）。 */
.recruitDetail__fixedLike {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  background: #fff;
  border: 1px solid #e8e8e8;
  border-radius: 5px;
  box-sizing: border-box;
  cursor: pointer;
}
.recruitDetail__fixedLike__icon {
  display: block;
  width: 24px;
  height: 24px;
  background: url('/common/img/icon_favorite.svg') no-repeat center / contain;
}
/* 気になる済み（-on）：薄緑背景＋緑枠。アイコンも塗りつぶし緑ハートに差し替え
   （似た求人 jobCardUi__like.-on と同一表現に統一）。 */
.recruitDetail__fixedLike.-on {
  background: #e2f1ea;
  border-color: #0b864c;
}
.recruitDetail__fixedLike.-on .recruitDetail__fixedLike__icon {
  background: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22%230B864C%22%3E%3Cpath%20d%3D%22M12%2021.23l-1.45-1.32C5.4%2015.36%202%2012.28%202%208.5%202%205.42%204.42%203%207.5%203c1.74%200%203.41.81%204.5%202.09C13.09%203.81%2014.76%203%2016.5%203%2019.58%203%2022%205.42%2022%208.5c0%203.78-3.4%206.86-8.55%2011.54L12%2021.23z%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}
/* 応募：オレンジ #ff782b・角丸5px。
   SP は従来どおり残り幅いっぱい(flex:1)。PC は幅が広がりすぎるため最大幅を
   旧 .scoutAction__consent（width:2.6rem）相当に抑え、文字サイズもアップする。 */
.recruitDetail__fixedApply {
  flex: 1 1 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 12px 8px;
  background: #ff782b;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 5px;
  color: #fff;
  font-size: 14px;      /* 文字サイズアップ（旧12px→14px） */
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  box-sizing: border-box;
}
/* PC：応募ボタン幅が広すぎるため最大2.6rem(旧ボタン幅)で頭打ち。文字もさらにアップ。
   ボタン群(気になる＋応募)は中央寄せでまとめる（gap:10pxで隣接）。 */
@media screen and (min-width: 769px) {
  .recruitDetail__fixedBar.fixedButton {
    justify-content: center;
  }
  .recruitDetail__fixedApply {
    flex: 0 1 auto;
    width: 2.6rem;
    max-width: 2.6rem;
    font-size: var(--font-size-lg);  /* 旧 scoutAction__consent と同じ 0.18rem 相当 */
  }
}
/* 応募アイコン：改修前と同じ background-image（白の編集ペンアイコン・common.css の -edit と同一SVG）。 */
.recruitDetail__fixedApply::before {
  content: "";
  display: inline-block;
  width: 20px;
  height: 20px;
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%200%2018%2018%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M8.15659%202.68682H4.81685C3.48083%202.68682%202.81281%202.68682%202.30252%202.94683C1.85366%203.17554%201.48872%203.54048%201.26001%203.98935C1%204.49964%201%205.16765%201%206.50367V13.1832C1%2014.5192%201%2015.1872%201.26001%2015.6975C1.48872%2016.1463%201.85366%2016.5113%202.30252%2016.74C2.81281%2017%203.48083%2017%204.81685%2017H11.4963C12.8324%2017%2013.5004%2017%2014.0107%2016.74C14.4595%2016.5113%2014.8245%2016.1463%2015.0532%2015.6975C15.3132%2015.1872%2015.3132%2014.5192%2015.3132%2013.1832V9.84341M5.77104%2012.2289H7.10259C7.49158%2012.2289%207.68607%2012.2289%207.8691%2012.185C8.03138%2012.146%208.18651%2012.0818%208.3288%2011.9946C8.48929%2011.8962%208.62682%2011.7587%208.90187%2011.4837L16.5059%203.87959C17.1647%203.22084%2017.1647%202.15281%2016.5059%201.49406C15.8472%200.835314%2014.7792%200.835313%2014.1204%201.49406L6.51633%209.09813C6.24127%209.37318%206.10374%209.51071%206.00539%209.6712C5.9182%209.81349%205.85394%209.96862%205.81498%2010.1309C5.77104%2010.3139%205.77104%2010.5084%205.77104%2010.8974V12.2289Z%22%20stroke%3D%22%23fff%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

/* ---- プレビュー専用：URLコピー欄（固定フッター内・AGILE-84） ----
   企業側/管理側プレビューでのみ使用。固定フッター(.recruitDetail__fixedBar)内に
   「上段：気になる＋応募の行(.recruitDetail__fixedBarRow)／下段：コピー欄」で縦積みする。 */
.recruitDetail__fixedBar.fixedButton:has(.recruitDetail__previewCopy) {
  flex-direction: column;
  gap: 8px;
}
/* 上段のボタン行：会員向けフッターと同じ横並び（気になる＋応募）。 */
.recruitDetail__fixedBarRow {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
}
/* コピー欄：input＋ボタンを横並び・中央寄せ。 */
.recruitDetail__previewCopy {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  width: 100%;
  box-sizing: border-box;
}
.recruitDetail__previewCopy .input {
  width: 9rem;
  max-width: 100%;
}
/* PC：ボタン行内の応募ボタン幅も会員向けと同様に上限を設ける。 */
@media screen and (min-width: 769px) {
  .recruitDetail__fixedBarRow .recruitDetail__fixedApply {
    flex: 0 1 auto;
    width: 2.6rem;
    max-width: 2.6rem;
  }
}


/* ========================================================================
   マイページTOP限定：求人検索ブロックを /search/ と同じ新デザインにする（RE30_AGILE-75）
   【設計変更 2026-10-18】当初は 6〜13 を SP(〜767px) 限定にしていたが、
   PC版も /search/ と同じ新デザインに揃える方針に変更。SP限定ラッパーを外し、
   PC/SP 共通で適用する。すべて .mypageTop スコープ限定のため /search/ には影響しない。
   ======================================================================== */

/* 6. マイページTOPでは求人検索ブロックのグレー背景を消す（白カード群に馴染ませる） */
.mypageTop .jobSearchBlock.-jobSearchUi {
  background: transparent;
}

/* 6-SP. SP版：マイページTOPの求人検索ブロックが画面幅いっぱいになるのを防ぎ、
   他ブロック（mypageTopBlock = --spacer-3 左右余白）と同じ左右余白にそろえる。
   セクション自身に左右paddingを !important で確実に付与する。 */
@media screen and (max-width: 767px) {
  .mypageTop .jobSearchBlock.-jobSearchUi {
    padding-left: var(--spacer-3, 0.16rem) !important;
    padding-right: var(--spacer-3, 0.16rem) !important;
    box-sizing: border-box;
  }
}

/* 7. 吹き出し型タブ（選択中＝緑背景＋白文字＋下向き三角／非選択＝白＋黒）。
      タブ下は緑の太ライン。タブは2つで均等割り。 */
.mypageTop .tabBlock.-styleA .tabList {
  border-bottom: 3px solid #17A462;
  gap: 0;
  display: flex;
  width: 100%;
}
/* PC版：common.css が .tabList を inline-flex＋中央寄せ＋左右padding にするため、
   タブ列が下線(width:100%)より狭くなり下線がはみ出す。
   PC限定で flex・padding:0 に上書きし、タブを全幅に広げて下線と一致させる（AGILE-75）。
   ※common.css はビルド済み共有のため触らず、編集可能な本CSSで上書きする。SPは現状維持。 */
@media screen and (min-width: 768px), print {
  .mypageTop .tabBlock.-styleA .tabList {
    display: flex !important;
    width: 100%;
    padding: 0 !important;
    justify-content: flex-start;
  }
}
.mypageTop .tabBlock.-styleA .tabItem {
  flex: 1 1 0;
  position: relative;
}
.mypageTop .tabBlock.-styleA .tabButton {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding-top: 0.16rem;
  padding-bottom: 0.16rem;
  min-height: 0;
  background: #fff;
  color: #333;
  border-radius: 0;
}
.mypageTop .tabBlock.-styleA .tabButton::after {
  display: none !important;
}
.mypageTop .tabBlock.-styleA .tabButton[aria-selected="true"] {
  background: #17A462 !important;
  color: #fff !important;
}
.mypageTop .tabBlock.-styleA .tabButton[aria-selected="true"] .jobSearch__tabItem__label,
.mypageTop .tabBlock.-styleA .tabButton[aria-selected="true"] .jobSearch__tabItem__count,
.mypageTop .tabBlock.-styleA .tabButton[aria-selected="true"] b {
  color: #fff;
}
.mypageTop .tabBlock.-styleA .tabButton[aria-selected="true"]::before {
  content: "";
  display: block;
  position: absolute;
  left: 50%;
  bottom: -9px;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-top: 7px solid #17A462;
  z-index: 3;
}
.mypageTop .tabBlock.-styleA .tabButton:hover::after {
  display: none !important;
}

/* 8. 外枠を「条件から探す」だけにする（タブ/タブパネルは枠なし、条件エリアを白カードで囲う） */
.mypageTop .jobSearchBlock.-jobSearchUi .jobSearch__inner:not(.-keyword) {
  background: transparent;
  border: none;
  padding: 0;
}
.mypageTop .jobSearchBlock.-jobSearchUi .tabBlock.-styleA .tabPanel {
  background-color: transparent;
}
.mypageTop .jobSearchBlock.-jobSearchUi .tabPanel__item.jobSearch .jobSearch__item {
  background: #fff;
  border: 1px solid var(--jobSearchUi-border);
  border-radius: 8px;
  padding: 16px 20px 20px;
  margin-top: 16px;
}
.mypageTop .jobSearchBlock.-jobSearchUi .tabPanel__item.jobSearch .jobSearch__fieldWrap {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
  margin-top: 0;
}

/* 9. キーワード検索の上余白＆見出し位置調整 */
.mypageTop .jobSearchBlock.-jobSearchUi .tabPanel__item.jobSearch .jobSearch__inner.-keyword {
  margin-top: 20px;
}
.mypageTop .jobSearchBlock.-jobSearchUi .tabPanel__item.jobSearch .jobSearch__item .jobSearch__heading {
  margin: 4px 0 4px;
  padding: 0 4px;
  text-align: left;
}

/* 10. 年収フィールドの折り返し整形（白カード内の狭幅対策） */
.mypageTop .jobSearchBlock.-jobSearchUi .jobSearch__field__label.-income + .jobSearch__field__selected .inputWrap.-column02 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 8px;
}
.mypageTop .jobSearchBlock.-jobSearchUi .jobSearch__field__label.-income + .jobSearch__field__selected .inputWrap.-column02 .selectWrap {
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
}
.mypageTop .jobSearchBlock.-jobSearchUi .jobSearch__field__label.-income + .jobSearch__field__selected .inputWrap.-column02 .selectWrap__text {
  flex: 0 0 auto;
  white-space: nowrap;
  margin: 0;
}
.mypageTop .jobSearchBlock.-jobSearchUi .jobSearch__field__label.-income + .jobSearch__field__selected .inputWrap.-column02 .incomeRowBreak {
  flex-basis: 100%;
  width: 100%;
  height: 0;
  margin: 0;
}

/* 10-PC. 年収はPC版（769px〜）だけ1行にする（SPは上の折り返しのまま＝変更しない）。
   .incomeRowBreak の 100%改行を無効化し、行を nowrap にして
   「選択〜以上〜 〜 選択〜以下」を1行に並べる。 */
@media screen and (min-width: 769px) {
  .mypageTop .jobSearchBlock.-jobSearchUi .jobSearch__field__label.-income + .jobSearch__field__selected .inputWrap.-column02 {
    flex-wrap: nowrap;
  }
  .mypageTop .jobSearchBlock.-jobSearchUi .jobSearch__field__label.-income + .jobSearch__field__selected .inputWrap.-column02 .incomeRowBreak {
    display: none;
    flex-basis: 0;
    width: 0;
  }
}

/* 11. 保存した検索条件カード（アコーディオン） */
.mypageTop .tabBlock.-styleA .tabPanel__item.savedConditionList {
  padding: 8px 0 0;
}
.mypageTop .savedCondition {
  background: #fff;
  border: 1px solid var(--jobSearchUi-border);
  border-radius: 8px;
  margin-top: 12px;
  overflow: hidden;
}
.mypageTop .savedCondition:first-child {
  margin-top: 0;
}
.mypageTop .savedCondition__head {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 14px 12px;
  background: transparent;
  border: none;
  font: inherit;
  font-weight: 700;
  color: #333;
  text-align: left;
  cursor: pointer;
}
.mypageTop .savedCondition__arrow {
  flex: 0 0 auto;
  width: 14px;
  height: 9px;
  background: url("data:image/svg+xml;charset=utf8,%3Csvg%20width%3D%2216%22%20height%3D%2210%22%20viewBox%3D%220%200%2016%2010%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M2%202.13672L8%207.86399L14%202.13672%22%20stroke%3D%22%230B864C%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E") no-repeat center center;
  background-size: contain;
  transition: transform 0.15s ease;
}
.mypageTop .savedCondition.-open .savedCondition__arrow {
  transform: rotate(180deg);
}
.mypageTop .savedCondition__title {
  flex: 1 1 auto;
  font-size: 15px;
}
.mypageTop .savedCondition__body {
  padding: 0 12px 14px;
}
.mypageTop .savedCondition__body[hidden] {
  display: none;
}
/* 親 .tabBlock.-styleA が text-align:center のため、保存条件の中身は左寄せに戻す。 */
.mypageTop .savedCondition__body,
.mypageTop .savedCondition__head {
  text-align: left;
}
.mypageTop .savedCondition__summary {
  margin: 0 0 12px;
  text-align: left;
}
.mypageTop .savedCondition__summary dt {
  font-weight: 700;
  color: #333;
  font-size: 13px;
  margin-top: 10px;
}
.mypageTop .savedCondition__summary dt:first-child {
  margin-top: 0;
}
.mypageTop .savedCondition__summary dd {
  margin: 2px 0 0;
  color: #555;
  font-size: 14px;
  line-height: 1.5;
}
.mypageTop .savedCondition__buttons {
  display: flex;
  gap: 10px;
  align-items: stretch;
  /* PC：削除・検索ボタンを中央寄せ（サイズはそのまま） */
  justify-content: center;
  /* アコーディオン本体(body)の外へ出し常時表示にしたため、
     body が持っていたカード内余白（左右12px・下14px）をボタン側で持つ。
     上は閉じている時にタイトル行と近づきすぎないよう少し空ける。 */
  padding: 4px 12px 14px;
}
.mypageTop .savedCondition__buttons .savedCondition__delete {
  flex: 0 0 auto;
}
/* 検索ボタンは残り幅いっぱいに広げず、内容に応じた適度な幅に（PCで巨大化しないよう上限）。 */
.mypageTop .savedCondition__buttons .savedCondition__search {
  flex: 0 1 auto;
  min-width: 2.4rem;
  max-width: 3.6rem;
  margin: 0;
}
/* SP：ボタンが枠からはみ出すため、幅上限を外して枠内に収める。
   PC版と同じ比率＝削除は内容幅（小）、検索は残り幅（広め）に。
   共通CSSのSP指定でボタンが全幅に広がるのを打ち消して削除を内容幅に固定。 */
@media screen and (max-width: 767px) {
  .mypageTop .savedCondition__buttons {
    justify-content: flex-start;
  }
  .mypageTop .savedCondition__buttons .savedCondition__delete {
    flex: 0 0 auto;
    width: auto;
    min-width: 0;
    white-space: nowrap;
    padding-left: 0.16rem;
    padding-right: 0.16rem;
  }
  .mypageTop .savedCondition__buttons .savedCondition__search {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    max-width: none;
  }
}

/* 13. 検索ブロックの幅を他ブロックと揃える（左右paddingを0に） */
.mypageTop .jobSearchBlock.-jobSearchUi {
  padding-left: 0;
  padding-right: 0;
}


/* ========================================================================
   マイページTOP：見出しアイコンを nav(globalNavi__icon)と同一SVGにそろえる（RE30_AGILE-75）。
   ・応募メッセージ(-message)は現状のメッセージアイコン(common.css)のまま＝変更しない。
   ・スカウト(-scout)は common.css の封筒＝nav の -scout と同一のため変更不要。
   ・Web履歴書(-webresume)＝nav の -scoutInfo（人物カード）SVG。
   ・気になる(-like)＝nav の -like（丸にハート）SVG。
   -message/-scout と同じ .headingBlock__title .titleIcon で詳細度を合わせる。
   ======================================================================== */
/* Web履歴書：nav -scoutInfo（人物カード）と同一SVG */
.headingBlock__title .titleIcon.-webresume::before {
  height: 0.24rem;
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20width%3D%2222%22%20height%3D%2222%22%20viewBox%3D%220%200%2022%2022%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M3.00002%2020.8174C3.6026%2021%204.41649%2021%205.8%2021H16.2C17.5835%2021%2018.3974%2021%2019%2020.8174M3.00002%2020.8174C2.87082%2020.7783%202.75133%2020.7308%202.63803%2020.673C2.07354%2020.3854%201.6146%2019.9265%201.32698%2019.362C1%2018.7202%201%2017.8802%201%2016.2V5.8C1%204.11984%201%203.27976%201.32698%202.63803C1.6146%202.07354%202.07354%201.6146%202.63803%201.32698C3.27976%201%204.11984%201%205.8%201H16.2C17.8802%201%2018.7202%201%2019.362%201.32698C19.9265%201.6146%2020.3854%202.07354%2020.673%202.63803C21%203.27976%2021%204.11984%2021%205.8V16.2C21%2017.8802%2021%2018.7202%2020.673%2019.362C20.3854%2019.9265%2019.9265%2020.3854%2019.362%2020.673C19.2487%2020.7308%2019.1292%2020.7783%2019%2020.8174M3.00002%2020.8174C3.00035%2020.0081%203.00521%2019.5799%203.07686%2019.2196C3.39249%2017.6329%204.63288%2016.3925%206.21964%2016.0769C6.60603%2016%207.07069%2016%208%2016H14C14.9293%2016%2015.394%2016%2015.7804%2016.0769C17.3671%2016.3925%2018.6075%2017.6329%2018.9231%2019.2196C18.9948%2019.5799%2018.9996%2020.0081%2019%2020.8174M15%208.5C15%2010.7091%2013.2091%2012.5%2011%2012.5C8.79086%2012.5%207%2010.7091%207%208.5C7%206.29086%208.79086%204.5%2011%204.5C13.2091%204.5%2015%206.29086%2015%208.5Z%22%20stroke%3D%22%2317A462%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center center;
}
/* 気になる：ハートだけ（丸なし）。nav/色 #17A462 に統一。
   viewBox に上下左右の余白(-2 .. 24/22)を持たせて、stroke線が端で切れないようにする。 */
.headingBlock__title .titleIcon.-like::before {
  height: 0.24rem;
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%22-2%20-2%2026%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M11%2018.35L9.55%2017.03C4.4%2012.36%201%209.28%201%205.5C1%202.42%203.42%200%206.5%200C8.24%200%209.91%200.81%2011%202.09C12.09%200.81%2013.76%200%2015.5%200C18.58%200%2021%202.42%2021%205.5C21%209.28%2017.6%2012.36%2012.45%2017.04L11%2018.35Z%22%20stroke%3D%22%2317A462%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center center;
}
/* 応募メッセージ：絵柄は現状の吹き出しのまま、色だけ他(nav)と同じ #17A462 に統一
   （common.css の titleIcon.-message は #00743D で色が違うため上書き）。 */
.headingBlock__title .titleIcon.-message::before {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20width%3D%2226%22%20height%3D%2226%22%20viewBox%3D%220%200%2026%2026%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M6.33333%208.15072H13M6.33333%2012.7012H17M6.33333%2020.502V23.5384C6.33333%2024.2312%206.33333%2024.5776%206.47897%2024.7555C6.60563%2024.9102%206.79769%2025.0002%207.00072%2025C7.23417%2024.9998%207.51156%2024.7834%208.06634%2024.3506L11.247%2021.8695C11.8967%2021.3626%2012.2216%2021.1092%2012.5833%2020.929C12.9043%2020.7691%2013.2459%2020.6522%2013.599%2020.5816C13.9969%2020.502%2014.4129%2020.502%2015.245%2020.502H18.6C20.8402%2020.502%2021.9603%2020.502%2022.816%2020.0768C23.5686%2019.7029%2024.1805%2019.1062%2024.564%2018.3723C25%2017.538%2025%2016.4458%2025%2014.2613V7.24063C25%205.0562%2025%203.96399%2024.564%203.12965C24.1805%202.39574%2023.5686%201.79906%2022.816%201.42512C21.9603%201%2020.8402%201%2018.6%201H7.4C5.15979%201%204.03969%201%203.18404%201.42512C2.43139%201.79906%201.81947%202.39574%201.43597%203.12965C1%203.96399%201%205.0562%201%207.24062V15.3014C1%2016.5105%201%2017.1151%201.1363%2017.6111C1.50617%2018.9571%202.58436%2020.0084%203.96472%2020.3691C4.47339%2020.502%205.09337%2020.502%206.33333%2020.502Z%22%20stroke%3D%22%2317A462%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E");
}
/* スカウト・ヘッドハンティング：絵柄は封筒のまま、色だけ #17A462 に統一
   （common.css の titleIcon.-scout は #00743D で色が違うため上書き）。 */
.headingBlock__title .titleIcon.-scout::before {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20width%3D%2226%22%20height%3D%2222%22%20viewBox%3D%220%200%2026%2022%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M24.4%2018.5L16.4286%2011M9.57143%2011L1.60004%2018.5M1%204.75L10.7979%2011.8943C11.5913%2012.4728%2011.988%2012.7621%2012.4195%2012.8741C12.8007%2012.9731%2013.1993%2012.9731%2013.5805%2012.8741C14.012%2012.7621%2014.4087%2012.4728%2015.2021%2011.8943L25%204.75M6.76%2021H19.24C21.2562%2021%2022.2643%2021%2023.0344%2020.5913C23.7117%2020.2317%2024.2625%2019.6581%2024.6076%2018.9525C25%2018.1503%2025%2017.1002%2025%2015V7C25%204.8998%2025%203.8497%2024.6076%203.04754C24.2625%202.34193%2023.7117%201.76825%2023.0344%201.40873C22.2643%201%2021.2562%201%2019.24%201H6.76C4.74381%201%203.73572%201%202.96563%201.40873C2.28825%201.76825%201.73752%202.34193%201.39238%203.04754C1%203.8497%201%204.8998%201%207V15C1%2017.1002%201%2018.1503%201.39238%2018.9525C1.73752%2019.6581%202.28825%2020.2317%202.96563%2020.5913C3.73572%2021%204.74381%2021%206.76%2021Z%22%20stroke%3D%22%2317A462%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E");
}


/* ============================================================
   チップ「すべて」まとめ再構築中のチラつき防止（AGILE-75）
   job_chip_all.js / job_industry_chip_all.js が「決定」後にチップを
   いったん全削除→再生成する。その数フレームの間だけ中身を不可視にして
   削除→再生成の見た目のチラつきを隠す（高さは保つため visibility を使う）。
   職種(modal_jobType)・業種(modal_jobIndustry)の両方に効く汎用指定。
   ============================================================ */
.jobSearch__field__selectedList.is-regrouping {
  visibility: hidden;
}


/* ============================================================
   気になるリスト単独画面（/mypage/like/）専用の微調整（AGILE-75）
   ------------------------------------------------------------
   ・カジュアル面談オファー帯(likeList__offerWrapper)はカード最上部に
     position:absolute / top:0 で重なる（min-height PC0.64rem / SP0.48rem）。
   ・ハート(jobCardUi__like)は通常カード右上(top16px)に絶対配置しているため、
     帯があるカードだけ帯の高さ分ハートを下にずらして被りを防ぐ。
   ・帯が無いカード・他画面（マイページTOPの .likeListBlock 等）には影響しない
     よう、必ず .-hasOffer スコープに限定する。
   ============================================================ */
.featuredJob__item.searchResult__item.-hasOffer .jobCardUi__like {
  top: 0.72rem; /* 帯(min-height 0.64rem)の下に出す */
}
@media screen and (max-width: 767px) {
  .featuredJob__item.searchResult__item.-hasOffer .jobCardUi__like {
    top: 0.56rem; /* SPは帯 min-height 0.48rem */
  }
}

/* 条件タグ（カード本文）とアクションボタンの間に余白を入れる（この画面のみ）。 */
.featuredJob.likeList .featuredJob__item__actions {
  margin-top: 0.16rem;
}

/* 日付行(jobCardUi__dateRow)の中で、掲載終了日の「すぐ右隣」に期限を並べる（既存デザイン踏襲）。
   日付部分を伸ばさず（flex:0 0 auto）、期限を少しだけ間を空けて左寄せで置く（この画面のみ）。 */
.featuredJob.likeList .jobCardUi__dateRow {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 0.2rem;
}
.featuredJob.likeList .jobCardUi__dateRow .featuredJob__item__postingEnd {
  flex: 0 0 auto;  /* 日付を伸ばさない＝期限を右端に飛ばさない */
}
.featuredJob.likeList .jobCardUi__dateRow .featuredJob__item__deadline {
  display: flex;
  align-items: baseline;
  gap: 0.04rem;
  margin: 0;
  flex: 0 0 auto;
}
.featuredJob.likeList .jobCardUi__dateRow .featuredJob__item__deadline dt,
.featuredJob.likeList .jobCardUi__dateRow .featuredJob__item__deadline dd {
  display: inline;
  white-space: nowrap;
}

/* PC版：ボタンのラベル（ヘッドハンティングの詳細を見る 等）が長いと折り返すので、
   この画面のボタンだけ幅を広げて1行に収める（他画面に影響しないようスコープ限定）。 */
@media screen and (min-width: 768px), print {
  .featuredJob.likeList .featuredJob__item__actions li {
    width: auto;
  }
  .featuredJob.likeList .featuredJob__item__actions a {
    width: auto;
    min-width: 0;
    white-space: nowrap;  /* アイコンを含む内容を1行に保つ（幅は内容に合わせて伸びる） */
  }
}

/* SP版：アクションボタンが横並びだとはみ出すので縦並び＋全幅にする（この画面のみ）。
   共通CSSの searchResult__item .featuredJob__item__actions{flex-direction:row} を上書き。 */
@media screen and (max-width: 767px) {
  .featuredJob.likeList .featuredJob__item__actions {
    flex-direction: column;
    width: 100%;
  }
  .featuredJob.likeList .featuredJob__item__actions li {
    width: 100%;
  }
  .featuredJob.likeList .featuredJob__item__actions a {
    width: 100%;
  }
}

/* ============================================================
   すべてクリアボタン（職種・業種／RE30_AGILE-75）
   見出し行（.jobSearch__field__label）内、ラベルの直後・⊕の前に表示。
   既存のカード内緑統一色（#0B864C）に合わせた控えめなテキストボタン。
   JSが生成し、チップが1件以上あるときのみ表示する。
   ============================================================ */
.jobSearchBlock.-jobSearchUi .jobSearch__field__clearAll {
  /* 余白で⊕を右端へ押しやる（JS側コメントの並び＝ラベル すべてクリア …余白… ⊕） */
  margin: 0 auto 0 8px;
  padding: 3px 12px;
  display: inline-flex;
  align-items: center;
  background: #fff;
  border: 1px solid #0B864C;   /* 緑枠 */
  border-radius: 4px;
  color: #0B864C;              /* カード内の緑統一色 */
  font-size: 12px;
  line-height: 1.4;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  -webkit-appearance: none;
          appearance: none;
}
.jobSearchBlock.-jobSearchUi .jobSearch__field__clearAll:hover {
  background: #E2F1EA;         /* ホバーで薄緑背景（既存の緑枠タグと同トーン） */
}


/* ============================================================
   検索条件を保存モーダル（#modal_saveSearch）AGILE-75
   このモーダル内の条件タグ（jobSearch__field__selectedItem）は
   「保存する条件の確認用」で、タグを外す操作は想定していない。
   common.css が label::before（緑丸）／::after（×）でタグ右端に
   「外す×」を描画しているため、このモーダル内だけ×を非表示にする。
   ・検索フォーム側（.jobSearchBlock.-jobSearchUi 配下）の×は残す
     （あちらは JS でチップを外す機能があるため）。影響させない。
   ============================================================ */
/* ×（＋アイコンを45°回転したもの）と緑丸の背景を消す */
.modal_saveSearch .jobSearch__field__selectedItem label::before,
.modal_saveSearch .jobSearch__field__selectedItem label::after {
  content: none !important;
  display: none !important;
}
/* ×ぶんに空けていた右パディングを左右対称に詰める／押せる見た目をやめる */
.modal_saveSearch .jobSearch__field__selectedItem label {
  padding-right: 0.16rem;
  cursor: default;
}
.modal_saveSearch .jobSearch__field__selectedItem label:hover {
  background-color: var(--white);
}