@charset "utf-8";
/* ==========================================================================
   フォーム・募集要項一覧 専用スタイル /assets/css/form.css
   common.css の後に読み込みます。
   対象ビュー：(Recruit) Referral / (Recruit) Jobs / (Recruit) Apply
   ========================================================================== */

/* --- タブ（リファラル／カムバック） ------------------------------------ */
.fr-tabs{
  display:flex; gap:8px; padding:6px;
  background:rgba(31,77,61,.06); border-radius:999px;
}
.fr-tabs__btn{
  flex:1; min-height:44px; padding:13px 10px;
  border:none; border-radius:999px; cursor:pointer;
  background:transparent; color:var(--fr-primary);
  font-size:13px; font-weight:700;
  transition:background .25s ease,color .25s ease;
}
.fr-tabs__btn[aria-selected="true"]{ background:var(--fr-primary); color:var(--fr-base); }
.fr-tabpanel[hidden]{ display:none; }

/* --- ステップ（制度の流れ） -------------------------------------------- */
.fr-stepcards{ display:flex; flex-direction:column; gap:12px; }
.fr-stepcard{
  display:flex; gap:18px; align-items:flex-start;
  padding:22px 24px; border-radius:16px; background:var(--fr-surface);
}
.fr-stepcard__no{
  flex:0 0 auto; line-height:1.3;
  font-family:"Zen Kaku Gothic New",sans-serif; font-weight:900;
  font-size:24px; color:rgba(31,77,61,.22);
}
.fr-stepcard__body{ font-size:14px; line-height:2; }

/* --- フォーム ----------------------------------------------------------- */
.fr-form{ display:flex; flex-direction:column; gap:22px; }
.fr-field{ display:flex; flex-direction:column; gap:8px; }
.fr-field__label{ font-size:13px; font-weight:700; color:var(--fr-primary); }
.fr-field__req{
  margin-left:8px; padding:2px 8px; border-radius:4px;
  background:var(--fr-accent); color:#fff; font-size:10px; font-weight:700;
}
.fr-field__opt{
  margin-left:8px; padding:2px 8px; border-radius:4px;
  background:rgba(34,48,60,.1); color:var(--fr-secondary); font-size:10px; font-weight:700;
}
.fr-field__hint{ font-size:12px; color:rgba(34,48,60,.6); }
.fr-input,.fr-textarea,.fr-select{
  width:100%; min-height:52px; padding:14px 16px;
  border:1px solid rgba(34,48,60,.2); border-radius:12px;
  background:var(--fr-surface); color:var(--fr-ink);
  font-family:inherit; font-size:16px; /* iOSのズーム防止のため16px以上 */
  transition:border-color .2s ease,box-shadow .2s ease;
}
.fr-input:focus,.fr-textarea:focus,.fr-select:focus{
  outline:none; border-color:var(--fr-accent);
  box-shadow:0 0 0 3px rgba(123,169,63,.18);
}
.fr-textarea{ min-height:120px; resize:vertical; line-height:1.9; }

/* 選択式（ラジオをボタン状に） */
.fr-radios{ display:flex; flex-wrap:wrap; gap:10px; }
.fr-radio{ position:relative; }
.fr-radio input{ position:absolute; opacity:0; width:0; height:0; }
.fr-radio span{
  display:inline-flex; align-items:center; min-height:48px;
  padding:12px 22px; border:1px solid rgba(31,77,61,.3); border-radius:999px;
  font-size:14px; font-weight:500; cursor:pointer; white-space:nowrap;
  transition:background .2s ease,color .2s ease,border-color .2s ease;
}
.fr-radio input:checked + span{
  background:var(--fr-primary); border-color:var(--fr-primary); color:var(--fr-base); font-weight:700;
}
.fr-radio input:focus-visible + span{ box-shadow:0 0 0 3px rgba(123,169,63,.3); }

/* 同意チェック */
.fr-consent{
  display:flex; gap:12px; align-items:flex-start;
  padding:18px 20px; border-radius:12px; background:rgba(31,77,61,.05);
  font-size:13px; line-height:1.9;
}
.fr-consent input{ flex:0 0 auto; width:22px; height:22px; margin-top:2px; accent-color:var(--fr-primary); }

/* --- ステップインジケーター（入力→確認→完了） ------------------------- */
.fr-progress{ display:flex; align-items:center; gap:8px; margin-bottom:clamp(24px,4vw,40px); }
.fr-progress__step{
  display:flex; align-items:center; gap:8px;
  font-size:12px; font-weight:700; color:rgba(34,48,60,.45);
}
.fr-progress__no{
  display:flex; align-items:center; justify-content:center;
  width:26px; height:26px; border-radius:50%;
  background:rgba(34,48,60,.12); color:rgba(34,48,60,.55); font-size:12px;
}
.fr-progress__step[aria-current="step"]{ color:var(--fr-primary); }
.fr-progress__step[aria-current="step"] .fr-progress__no{ background:var(--fr-primary); color:var(--fr-base); }
.fr-progress__bar{ flex:1 1 auto; height:1px; background:rgba(34,48,60,.18); }

/* --- 応募先の引き継ぎカード ------------------------------------------- */
.fr-applyto{
  display:flex; flex-wrap:wrap; gap:6px 16px; align-items:baseline;
  padding:18px 22px; border-radius:14px;
  background:rgba(123,169,63,.1); border:1px solid rgba(123,169,63,.3);
}
.fr-applyto__label{ font-size:11px; font-weight:700; letter-spacing:.14em; color:var(--fr-accent); }
.fr-applyto__value{ font-family:"Zen Kaku Gothic New",sans-serif; font-weight:700; font-size:16px; color:var(--fr-primary); }

/* --- 募集要項一覧：検索・絞り込み ------------------------------------- */
.fr-filter{ display:flex; flex-direction:column; gap:18px; }
.fr-search__field{ position:relative; }
.fr-search__field input{ padding-left:46px; }
.fr-search__icon{
  position:absolute; left:16px; top:50%; transform:translateY(-50%);
  color:rgba(34,48,60,.4); pointer-events:none;
}
.fr-filtergroup__label{ font-size:11px; font-weight:700; letter-spacing:.16em; color:var(--fr-accent); margin-bottom:8px; }
.fr-filterchips{ display:flex; flex-wrap:wrap; gap:8px; }
.fr-filterchip{ position:relative; }
.fr-filterchip input{ position:absolute; opacity:0; width:0; height:0; }
.fr-filterchip span{
  display:inline-flex; align-items:center; min-height:44px;
  padding:10px 18px; border:1px solid rgba(31,77,61,.28); border-radius:999px;
  background:var(--fr-surface); font-size:13px; font-weight:500; cursor:pointer;
  white-space:nowrap;
  transition:background .2s ease,color .2s ease,border-color .2s ease;
}
.fr-filterchip input:checked + span{
  background:var(--fr-primary); border-color:var(--fr-primary); color:var(--fr-base); font-weight:700;
}
.fr-sitetoggle{
  display:inline-flex; align-items:center; gap:6px; min-height:44px;
  padding:10px 18px; border:1px dashed rgba(31,77,61,.4); border-radius:999px;
  background:transparent; color:var(--fr-primary);
  font-size:13px; font-weight:700; cursor:pointer;
}
.fr-sitelist{ display:none; margin-top:12px; }
.fr-sitelist.is-open{ display:block; }
.fr-sitelist__inner{
  display:grid; gap:6px 14px;
  grid-template-columns:repeat(auto-fill,minmax(min(100%,170px),1fr));
  max-height:260px; overflow-y:auto;
  padding:16px 18px; border-radius:12px; background:var(--fr-surface);
}
.fr-sitecheck{ display:flex; gap:8px; align-items:center; font-size:13px; min-height:32px; }
.fr-sitecheck input{ width:18px; height:18px; accent-color:var(--fr-primary); }

.fr-resultcount{
  display:flex; flex-wrap:wrap; gap:8px 16px; align-items:baseline;
  padding:16px 0; border-bottom:1px solid rgba(34,48,60,.12);
  font-size:13px;
}
.fr-resultcount__num{
  font-family:"Zen Kaku Gothic New",sans-serif; font-weight:900;
  font-size:26px; color:var(--fr-primary); line-height:1;
}

/* --- 求人カード ------------------------------------------------------- */
.fr-joblist{ display:grid; gap:14px; grid-template-columns:repeat(auto-fill,minmax(min(100%,320px),1fr)); }
.fr-jobcard{
  display:flex; flex-direction:column; gap:12px;
  padding:24px 26px; border-radius:16px; background:var(--fr-surface);
  box-shadow:0 4px 20px rgba(34,48,60,.05);
}
.fr-jobcard[hidden]{ display:none; }
.fr-jobcard__tags{ display:flex; flex-wrap:wrap; gap:6px; }
.fr-jobcard__pin{
  display:inline-flex; align-items:center; gap:4px;
  padding:5px 11px; border-radius:999px;
  background:var(--fr-accent); color:#fff; font-size:11px; font-weight:700;
}
.fr-jobcard__title{
  font-family:"Zen Kaku Gothic New",sans-serif; font-weight:900;
  font-size:20px; color:var(--fr-primary);
}
.fr-jobcard__site{ font-size:13px; color:rgba(34,48,60,.75); }
.fr-jobcard__pay{ font-family:"Zen Kaku Gothic New",sans-serif; font-weight:700; font-size:17px; }
.fr-jobcard__foot{ display:flex; flex-wrap:wrap; gap:10px; margin-top:auto; padding-top:4px; }
.fr-jobcard__foot .fr-btn{ flex:0 0 auto; min-height:48px; padding:12px 24px; font-size:14px; }
.fr-noresult{ padding:48px 0; text-align:center; font-size:14px; color:rgba(34,48,60,.6); }
.fr-noresult[hidden]{ display:none; }

/* --- 求人詳細モーダル ------------------------------------------------- */
.fr-modal{
  position:fixed; inset:0; z-index:90;
  display:flex; align-items:flex-end; justify-content:center;
  padding:0; background:rgba(20,28,24,.55);
}
.fr-modal[hidden]{ display:none; }
.fr-modal__panel{
  width:min(100%,720px); max-height:92svh; overflow-y:auto;
  background:var(--fr-base); border-radius:20px 20px 0 0;
  padding:clamp(24px,4vw,40px);
}
@media (min-width:700px){
  .fr-modal{ align-items:center; padding:24px; }
  .fr-modal__panel{ border-radius:20px; max-height:86svh; }
}
.fr-modal__head{ display:flex; justify-content:space-between; align-items:flex-start; gap:16px; margin-bottom:20px; }
.fr-modal__close{
  flex:0 0 auto; width:44px; height:44px; border-radius:50%;
  border:1px solid rgba(34,48,60,.25); background:transparent; cursor:pointer;
  font-size:18px; color:var(--fr-secondary);
}
.fr-modal__map{
  height:180px; border-radius:12px; overflow:hidden; margin-top:4px;
}

/* --- 完了画面 --------------------------------------------------------- */
.fr-done{ max-width:640px; margin-inline:auto; text-align:center; }
.fr-done__mark{
  display:flex; align-items:center; justify-content:center;
  width:88px; height:88px; margin:0 auto 28px;
  border-radius:50%; background:rgba(123,169,63,.16);
  font-size:38px; color:var(--fr-accent);
}
.fr-done__steps{ display:flex; flex-direction:column; gap:12px; margin:32px 0; text-align:left; }
.fr-done__next{ display:flex; flex-wrap:wrap; gap:10px 24px; justify-content:center; font-size:13px; }