@charset "UTF-8";
/* 検索条件選択ページ（PC）専用スタイル。
   全社共通ヘッダー($job->header)・右サイドバー($job->sidebar)・動画ヒーローは
   job/listing/pc/assets/styles/style.css を先に読み込んで流用する。 */

.search-page {
    max-width: 1040px;
    margin: 0 auto;
    padding: 24px 24px 110px;
    background: #f5f5f5;
}

/* 全社共通の「トップに戻る」ボタン(.jump-top、job/listing等の他ページ型と同様に
   各ページ固有の下部固定要素と被らないようbottomを個別調整する既存パターンを踏襲)が、
   本ページ固有の.search-sticky-footer(高さ約75px)と重なってしまうため引き上げる */
.jump-top {
    bottom: 120px;
}

/* Figmaでは左端が直角・右端のみ丸めた形状(既存.areas-title等と同じ「旗」型)で、
   現状の4隅均等border-radiusとは異なる。既存.areas-titleと同様、左マージンは持たず
   コンテナの左端(ここでは.search-pageのpadding-left:24pxを打ち消した実際の左端)に
   ぴったり付ける */
.search-heading {
    display: inline-block;
    background: #FFEA4C;
    color: #333;
    font-weight: bold;
    font-size: 18px;
    border-radius: 0 999px 999px 0;
    padding: 12px 20px;
    margin: 0 0 20px -24px;
}

.search-top-row {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    margin-bottom: 20px;
}
.search-top-row .shop-name-search { flex: 1; padding: 0; }
.search-top-row .group-select { flex: 1; margin: 0; }

.search-back { margin-bottom: 16px; }
.search-page .search-back__btn {
    display: inline-block;
    border: 1px solid #999;
    border-radius: 20px;
    padding: 8px 24px;
    color: #333;
    background: #fff;
    font-size: 14px;
}

.search-section {
    padding: 20px 0;
    border-bottom: 1px dashed #ccc;
}
/* Figmaでは「条件で検索する...」の見出しと同じ「旗」型(左直角/右丸め)のバッジで、
   背景色は本文背景(#f5f5f5)より濃いグレー。人気のエリア/全国のエリア等のサブ見出しは
   バッジ化せず.search-section__subtitleとして別扱いにする(Figmaでもプレーンテキスト) */
.search-section__title {
    display: inline-block;
    background: #E0E0E0;
    color: #333;
    font-weight: bold;
    font-size: 16px;
    border-radius: 0 999px 999px 0;
    padding: 8px 16px;
    margin: 0 0 14px -24px;
}
.search-section__subtitle {
    font-size: 13px;
    margin-bottom: 8px;
}
.search-section__subtitle--money {
    margin-bottom: 16px;
}
.search-section__subtitle--money-spaced {
    margin: 32px 0 16px;
}

/* デザイン案では入力欄とボタンの間に隙間が無く、1つの角丸ボックスとして繋がっている */
.shop-name-search { display: flex; }
.shop-name-search input {
    flex: 1;
    border: 1px solid #ccc;
    border-right: none;
    border-radius: 4px 0 0 4px;
    padding: 12px 14px;
    font-size: 14px;
}
.search-page .shop-name-search button {
    background: #D90707;
    color: #fff;
    border: none;
    border-radius: 0 4px 4px 0;
    padding: 0 20px;
    font-size: 14px;
    white-space: nowrap;
    cursor: pointer;
}

.group-select { position: relative; }
.search-page .group-select__toggle {
    width: 100%;
    display: flex;
    align-items: center;
    background: #FFEA4C;
    border: none;
    border-radius: 6px;
    padding: 0;
    font-size: 14px;
    color: #333;
    cursor: pointer;
    overflow: hidden;
    height: 48px;
}
.group-select__icon {
    flex: 0 0 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #555;
}
.group-select__icon img {
    width: 21px;
    height: 18px;
}
.group-select__field {
    flex: 1;
    height: 100%;
    display: flex;
    align-items: center;
    background: #fff;
    color: #999;
    padding: 0 12px;
    text-align: left;
}
.group-select__chevron {
    flex: 0 0 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #555;
}
.group-select__chevron svg {
    width: 18px;
    height: 18px;
}
.group-select__list {
    display: none;
    position: absolute;
    z-index: 20;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    max-height: 360px;
    overflow-y: auto;
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0,0,0,.15);
    list-style: none;
    margin: 0;
    padding: 4px 0;
}
.group-select__list.is-open { display: block; }
.group-select__list li { padding: 10px 16px; font-size: 14px; color: #333; cursor: pointer; text-decoration: underline; }
.group-select__list li[data-value=""] { text-decoration: none; }
.group-select__list li:hover { background: #f5f5f5; }
.group-select__list li.is-selected { font-weight: bold; }
.group-select__list li.is-selected::before { content: '✓ '; }

.chip-row {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 10px;
}
/* 職種・歓迎・休日・金額・待遇は全角8文字程度のラベルが1列(6列グリッド)に収まるよう、
   他のchip-row(店舗形態・人気のエリア・全国のエリア・福利厚生等)より文字サイズを縮小する */
.search-page .chip-row--compact .chip {
    font-size: 10px;
}
.search-page .chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #ccc;
    border-radius: 999px;
    padding: 10px 8px;
    font-size: 13px;
    color: #555;
    background: #fff;
    cursor: pointer;
    line-height: 1.3;
    text-align: center;
}
.search-page .chip.is-selected {
    background: #7E83A3;
    border-color: #7E83A3;
    color: #fff;
    font-weight: bold;
}

/* 人気のエリア（既存 --kabuki/--minami/--susukino/--nagoya/--nakasu の配色を流用、
   job/listing/pc/assets/styles/style.css の .areas-title/.areas-title__subtitle 系と同じ値） */
.search-page .chip--popular-area.--kabuki   { border-color: #D43051; color: #D43051; }
.search-page .chip--popular-area.--minami   { border-color: #725182; color: #725182; }
.search-page .chip--popular-area.--susukino { border-color: #5256A6; color: #5256A6; }
.search-page .chip--popular-area.--nagoya   { border-color: #568B69; color: #568B69; }
.search-page .chip--popular-area.--nakasu   { border-color: #DD964F; color: #DD964F; }
.search-page .chip--popular-area.--kabuki.is-selected   { background: #FB4D70; border-color: #FB4D70; color: #fff; }
.search-page .chip--popular-area.--minami.is-selected   { background: #83499E; border-color: #83499E; color: #fff; }
.search-page .chip--popular-area.--susukino.is-selected { background: #6A71FF; border-color: #6A71FF; color: #fff; }
.search-page .chip--popular-area.--nagoya.is-selected   { background: #44AA67; border-color: #44AA67; color: #fff; }
.search-page .chip--popular-area.--nakasu.is-selected   { background: #FFA143; border-color: #FFA143; color: #fff; }

/* 職種（既存の求人詳細ページ職種タグ job1〜job4 の配色・区分[Functions::getOccupationType]を流用） */
.search-page .chip--occupation-type-1 { border-color: #e83a3a; color: #e83a3a; }
.search-page .chip--occupation-type-2 { border-color: #3a1fd7; color: #3a1fd7; }
.search-page .chip--occupation-type-3 { border-color: #d9b747; color: #d9b747; }
.search-page .chip--occupation-type-4 { border-color: #3daa52; color: #3daa52; }
.search-page .chip--occupation-type-1.is-selected { background: #e83a3a; border-color: #e83a3a; color: #fff; }
.search-page .chip--occupation-type-2.is-selected { background: #3a1fd7; border-color: #3a1fd7; color: #fff; }
.search-page .chip--occupation-type-3.is-selected { background: #d9b747; border-color: #d9b747; color: #fff; }
.search-page .chip--occupation-type-4.is-selected { background: #3daa52; border-color: #3daa52; color: #fff; }

/* 全国のエリア。Figma実測では他のchipと違いピル型ではなく角丸長方形だった。
   これはトップページ都道府県選択の既存 .area-search__item (job/listing共有CSS)と
   全く同じ形状(border-radius:6px・font-weight:bold・文字色は地域色で上書きせず既定色のまま)
   のため、そちらの実装値をそのまま踏襲する。太い上帯(border-top-width:6px)は
   「全国のエリア」第1階層の地域ボタンのみで、ドリルダウン後の都道府県ボタン
   (.chip--pref.chip--region、Figma「都道府県」状態参照)は角丸長方形のまま均等な細い
   ボーダーになる(ピルには戻らない) */
.search-page .chip--region {
    border-radius: 6px;
    border-style: solid;
    font-weight: bold;
}
.search-page .chip--region:not(.chip--pref) {
    border-width: 6px 1px 1px 1px;
}
.search-page .chip--region.chip--pref {
    border-width: 1px;
}
.search-page .chip--region.--hokkaido { border-color: #5256A6; }
.search-page .chip--region.--kanto    { border-color: #D43051; }
.search-page .chip--region.--toukai   { border-color: #568B69; }
.search-page .chip--region.--kansai   { border-color: #725182; }
.search-page .chip--region.--cyugoku  { border-color: #588294; }
.search-page .chip--region.--kyusyu   { border-color: #DD964F; }
.search-page .chip--region.is-selected { color: #fff; font-weight: bold; border-width: 1px; }
.search-page .chip--region.--hokkaido.is-selected { background: #5256A6; border-color: #5256A6; }
.search-page .chip--region.--kanto.is-selected    { background: #D43051; border-color: #D43051; }
.search-page .chip--region.--toukai.is-selected   { background: #568B69; border-color: #568B69; }
.search-page .chip--region.--kansai.is-selected   { background: #725182; border-color: #725182; }
.search-page .chip--region.--cyugoku.is-selected  { background: #588294; border-color: #588294; }
.search-page .chip--region.--kyusyu.is-selected   { background: #DD964F; border-color: #DD964F; }

/* 金銭システムのトグル（時間/1日/月間等）は結合されたセグメントコントロールとして表示する */
/* Figmaでは金銭システムのトグルは完全ピルではなく「少し丸まっている程度」の角丸長方形 */
.toggle-group-row {
    display: flex;
    gap: 10px;
    align-items: flex-start;
}
/* Figmaでは体験入店の時給/日給トグルと最低金額欄は縦積みではなく横並び */
.trial-toggle-row {
    display: flex;
    gap: 10px;
    align-items: flex-start;
}
.trial-toggle-row .amount-panel {
    flex: 1;
    margin-top: 0;
    max-width: none;
}
.toggle-group {
    display: flex;
    border: 1px solid #ccc;
    border-radius: 6px;
    overflow: hidden;
    width: fit-content;
}
.search-page .toggle-group .chip {
    flex: 1 1 auto;
    cursor: pointer;
    border: none;
    border-radius: 0;
    border-right: 1px solid #ccc;
    padding: 10px 18px;
}
.search-page .toggle-group .chip:last-child { border-right: none; }
.search-page .toggle-group .chip.is-selected { background: #7E83A3; color: #fff; }

.area-popular { margin-bottom: 16px; }
/* 都道府県パネル・小エリアパネルのアコーディオン開閉（下向きイーズイン、現状要望⑤）。
   grid-template-rows: 0fr→1fr のトリックでheight:autoでもアニメーションできるようにする */
.area-accordion-panel {
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0;
    transition: grid-template-rows 0.35s ease-in, opacity 0.35s ease-in;
}
.area-accordion-panel.is-open {
    grid-template-rows: 1fr;
    opacity: 1;
}
.area-accordion-panel__inner {
    overflow: hidden;
    min-height: 0;
}
/* Figmaでは「エリアを選びなおす」は中立色、続く「‹ 地域名」部分のみ選択中の地域色になる */
.area-panel__back { font-size: 13px; color: #333; margin-bottom: 12px; }
.search-page .area-panel__back button { background: none; border: none; color: #333; font-size: 13px; padding: 0; cursor: pointer; }
.area-panel__back-arrow { margin: 0 4px; }
.area-panel__back-arrow.--hokkaido, #area-back-region-name.--hokkaido { color: #5256A6; }
.area-panel__back-arrow.--kanto,    #area-back-region-name.--kanto    { color: #D43051; }
.area-panel__back-arrow.--toukai,   #area-back-region-name.--toukai   { color: #568B69; }
.area-panel__back-arrow.--kansai,   #area-back-region-name.--kansai   { color: #725182; }
.area-panel__back-arrow.--cyugoku,  #area-back-region-name.--cyugoku  { color: #588294; }
.area-panel__back-arrow.--kyusyu,   #area-back-region-name.--kyusyu   { color: #DD964F; }

.amount-panel { margin-top: 14px; max-width: 560px; }
/* Figmaでは最低/最高の2つの表示欄は連結した1つの箱ではなく、隙間を空けた別々の箱同士を
   中央の短い横線で繋ぐ構成になっている */
.amount-box-row {
    display: flex;
    align-items: stretch;
    margin-bottom: 8px;
}
.amount-box {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 10px 14px;
    border: 1px solid #ccc;
    border-radius: 6px;
}
.amount-box-connector {
    flex: 0 0 14px;
    position: relative;
}
.amount-box-connector::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 1px;
    background: #ccc;
    transform: translateY(-50%);
}
.amount-box__label { font-size: 12px; color: #999; white-space: nowrap; }
.amount-box__value { font-size: 15px; font-weight: bold; color: #333; }

.range-slider__track { position: relative; height: 30px; }
.range-slider__input {
    position: absolute;
    top: 8px;
    left: 0;
    width: 100%;
    margin: 0;
    -webkit-appearance: none;
    background: transparent;
    pointer-events: none;
}
.range-slider__input::-webkit-slider-runnable-track { height: 4px; background: #ddd; border-radius: 2px; }
.range-slider__input::-moz-range-track { height: 4px; background: #ddd; border-radius: 2px; }
/* --max は DOM順で後に来て前面に描画されるため、自身のトラック(線)が --min のつまみを覆ってしまう。
   --max 側のトラックだけ透明にして --min のトラックのみを見せることで、つまみが線の裏に隠れるのを防ぐ */
.range-slider__input.--max::-webkit-slider-runnable-track { background: transparent; }
.range-slider__input.--max::-moz-range-track { background: transparent; }
.range-slider__input::-webkit-slider-thumb {
    -webkit-appearance: none;
    pointer-events: auto;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #333;
    margin-top: -8px;
    cursor: pointer;
}
.range-slider__input::-moz-range-thumb {
    pointer-events: auto;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #333;
    border: none;
    cursor: pointer;
}
.range-slider__track--single .range-slider__input { pointer-events: auto; }

.search-sticky-footer {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 50;
    background: #FCF3CE;
    border-top: 1px solid #e8dca0;
    padding: 14px 24px;
    /* .search-page(max-width:1140px、host2-job-search-pc.cssによる上書き後の実際の値)と
       幅を揃える。left:0/right:0のままmax-width+margin:autoを追加することで、
       position:fixed/absoluteのどちらでも中央寄せされる */
    max-width: 1140px;
    margin: 0 auto;
}
/* 福利厚生セクション(#search-form)の下までスクロールしたら固定を解除し、
   その場に留める（サイト本来のフッターに被り続けないよう、クライアント要望）。
   topはJS側(search.js)がスクロール位置に応じて算出しインラインで設定する */
.search-sticky-footer.is-static {
    position: absolute;
    bottom: auto;
}
.search-sticky-footer__stats { font-size: 13px; color: #555; margin-bottom: 8px; }
.search-sticky-footer__stats b { color: #D90707; font-size: 15px; }
.search-sticky-footer__actions { display: flex; gap: 10px; }
.search-page .search-sticky-footer__clear {
    flex: 0 0 160px;
    background: #333;
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 13px 0;
    font-size: 14px;
    cursor: pointer;
}
.search-page .search-sticky-footer__submit {
    flex: 1;
    background: #D90707;
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 13px 0;
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
}
.search-page .search-sticky-footer__submit.is-disabled { background: #ccc; color: #888; pointer-events: none; cursor: default; }