@charset "utf-8";
/**
 * 隊員募集 お気に入り／閲覧履歴ページ
 * ※カード配色・余白は recruit_taiin_bosyu.css の検索結果カードに準拠
 */

/* ==========================================================================
   ページ全体
   ========================================================================== */
/*
  募集一覧用の recruit_taiin_bosyu.css が #mainContent を2カラムのグリッド
  （248px ＋ 残り）にしているため、このページでは1カラムに戻す。
  同ファイルが border-top も消しているので、common_pc.css の既定（濃茶の線）も戻す。
  上の余白 margin-top:16px は設計書どおりなので、そのまま使う。
*/
#mainContent.favorite-page {
  display: block;
  border-top: 3px solid #58462d;
}

/*
  設計書03・04のとおり、白いパネルは #mainContent（PC 960px／SP 90%・白背景・上に濃茶の線）が
  そのまま該当する。ここで白い枠を重ねると二重になるため、余白だけを持たせる。
  見出しの下の区切り線をパネル幅いっぱいに引くため、左右の余白は見出し・一覧など中の要素に付ける。
*/
.favoriteCont {
  padding-bottom: 40px;
}
@media screen and (max-width: 750px) {
  .favoriteCont {
    padding-bottom: 24px;
  }
}

.favoriteCont .favorite-inner {
  padding: 0;
  background: none;
  border: none;
}

/* ==========================================================================
   見出し
   ========================================================================== */
.favorite-ttl {
  display: flex;
  align-items: center;
  gap: 8px;
  /* 区切り線をパネル幅いっぱいに引くため、左右の余白は見出し自身の padding で取る */
  padding: 24px 28px 22px;
  margin: 0;
  border-bottom: 1px solid #E4DDD7;
  font-size: 22px;
  font-weight: bold;
  color: #3F321E;
}
@media screen and (max-width: 750px) {
  .favorite-ttl {
    padding: 18px 16px 16px;
    font-size: 17px;
  }
}

/* 見出しアイコン（お気に入り＝ハート／閲覧履歴＝時計） */
.favorite-ttl .favorite-ttl-text::before {
  content: "";
  display: inline-block;
  vertical-align: -3px;
  width: 22px;
  height: 22px;
  margin-right: 6px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
@media screen and (max-width: 750px) {
  .favorite-ttl .favorite-ttl-text::before {
    width: 18px;
    height: 18px;
    vertical-align: -2px;
  }
}
.favorite-ttl--favorite .favorite-ttl-text::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233F321E' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20.4S3.6 15 3.6 9.3A4.6 4.6 0 0 1 12 6.7a4.6 4.6 0 0 1 8.4 2.6c0 5.7-8.4 11.1-8.4 11.1z'/%3E%3C/svg%3E");
}
.favorite-ttl--history .favorite-ttl-text::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233F321E' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5.3l3.4 2'/%3E%3C/svg%3E");
}

/* ❓ヘルプボタン（1件以上のときのみ表示） */
.favorite-help-btn {
  width: 20px;
  height: 20px;
  padding: 0;
  border: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C89B3C' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M9.4 9.3a2.7 2.7 0 1 1 3.4 2.6c-.6.2-.9.7-.9 1.3v.5'/%3E%3Ccircle cx='12' cy='17' r='1' fill='%23C89B3C' stroke='none'/%3E%3C/svg%3E") no-repeat center/contain;
  cursor: pointer;
}

/* ==========================================================================
   説明文（0件時はインライン／1件以上はモーダル内）
   ========================================================================== */
.favorite-description {
  padding: 20px;
  margin: 21px 60px 0;
  background: #FDF7EB;
  font-size: 15px;
  line-height: 1.8;
  color: #3F321E;
}
@media screen and (max-width: 750px) {
  .favorite-description {
    padding: 12px;
    margin: 16px 20px 0;
    font-size: 13px;
  }
}
.favorite-description p + p {
  margin-top: 8px;
}
.favorite-description .favorite-description-link a {
  color: #C87F1E;
  font-weight: bold;
  text-decoration: underline;
}
.favorite-description .favorite-description-note {
  font-size: 13px;
  color: #6B5E4B;
}
@media screen and (max-width: 750px) {
  .favorite-description .favorite-description-note {
    font-size: 12px;
  }
}

/* 0件メッセージ */
.favorite-empty {
  padding: 28px 60px 10px;
  text-align: center;
  font-size: 16px;
  font-weight: bold;
  color: #3F321E;
}
@media screen and (max-width: 750px) {
  .favorite-empty {
    padding: 20px 20px 10px;
    font-size: 14px;
  }
}

/* ==========================================================================
   カード一覧
   ========================================================================== */
.favorite-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  /* 設計書ではカードはパネルの左右から60px内側 */
  margin-top: 21px;
  padding-inline: 60px;
}
@media screen and (max-width: 750px) {
  .favorite-list {
    gap: 12px;
    margin-top: 16px;
    padding-inline: 20px;
  }
}

.favorite-item {
  position: relative;
  border: 1px solid #E4DDD7;
  background: #fff;
}

.favorite-item > a {
  display: block;
  color: #3F321E;
}
.favorite-item > a:hover {
  color: #3F321E;
  text-decoration: none;
  background-color: #F5F5F4;
}

.favorite-item-wrapper {
  display: grid;
  grid-template-columns: 1fr 140px;
  gap: 0 16px;
  /* 右上の削除ボタンとテキストが重ならないよう右に余白を確保 */
  padding: 16px 46px 16px 16px;
}
@media screen and (max-width: 750px) {
  .favorite-item-wrapper {
    grid-template-columns: 1fr 90px;
    align-items: center;
    padding: 12px 36px 12px 12px;
  }
}

/* 地域・更新日 */
.favorite-item-location {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
@media screen and (max-width: 750px) {
  .favorite-item-location {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    margin-bottom: 0;
  }
}
.favorite-item-location .location_city {
  display: inline-block;
  min-height: 30px;
  padding: 5px 8px 1px 26px;
  background: url(../../search/img/address.svg) no-repeat center left 8px/16px, #F5F5F4;
  font-size: 16px;
  font-weight: bold;
  color: #3F321E;
}
@media screen and (max-width: 750px) {
  .favorite-item-location .location_city {
    min-height: 18px;
    padding: 3px 8px 0 22px;
    margin-bottom: 4px;
    background-size: 12px;
    font-size: 12px;
  }
}
.favorite-item-location .location_date {
  padding-top: 3px;
  font-size: 16px;
  color: #767676;
}
@media screen and (max-width: 750px) {
  .favorite-item-location .location_date {
    font-size: 11px;
    padding-top: 0;
  }
}

/* タイトル（2行でクランプ） */
.favorite-item-title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  min-height: 50px;
  font-size: 18px;
  font-weight: bold;
  color: #3F321E;
}
@media screen and (max-width: 750px) {
  .favorite-item-title {
    min-height: 33px;
    font-size: 12px;
  }
}

/* タグ */
.favorite-item-label {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-top: 10px;
  margin-top: 19px;
  border-top: 1px solid #E4DDD7;
}
@media screen and (max-width: 750px) {
  .favorite-item-label {
    margin-top: 7px;
    padding-top: 6px;
  }
}
.favorite-item-label li {
  display: grid;
  place-items: center;
  min-width: 76px;
  min-height: 20px;
  padding: 2px 6px 0;
  border-radius: 4px;
  background-color: #EFE9E2;
  font-size: 12px;
  font-weight: bold;
  color: #3F321E;
}
@media screen and (max-width: 750px) {
  .favorite-item-label li {
    min-width: unset;
    min-height: 19px;
    padding: 0 4px;
  }
}
.favorite-item-label li.kyoryokutai {
  background-color: #F49292;
}
.favorite-item-label li.intern {
  background-color: #F3D479;
}
.favorite-item-label li.otameshi {
  background-color: #8DCDE0;
}

/* サムネイル */
.favorite-item-img img {
  width: 140px;
  aspect-ratio: 1/1;
  object-fit: contain;
}
@media screen and (max-width: 750px) {
  .favorite-item-img img {
    width: 90px;
  }
}
.favorite-item-img img:hover {
  opacity: 1;
}

/* 削除ボタン（カード右上） */
.favorite-item-remove {
  position: absolute;
  top: 14px;
  right: 12px;
  z-index: 2;
  width: 32px;
  height: 28px;
  padding: 0;
  border: 1px solid #41321E;
  border-radius: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233F321E' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E") no-repeat center/13px, #fff;
  cursor: pointer;
}
.favorite-item-remove:hover {
  background-color: #F5F5F4;
}
@media screen and (max-width: 750px) {
  /* 設計書03・04のSP：32px角・角丸、カードの右上から4pxで画像の角に重ねる（押しやすい大きさ） */
  .favorite-item-remove {
    top: 4px;
    right: 4px;
    width: 32px;
    height: 32px;
    border-radius: 6px;
    background-size: 16px;
  }
}

/* ==========================================================================
   トースト通知（青帯。PCは画面上部、SPは画面下部）
   ========================================================================== */
.favorite-toast {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  /*
    追従するグロナビ（.chiikiokoshi-sub-menu.header-fixed）とSPのヘッダーより前面に出す。
    ヘッダーは 99999〜100000、グロナビとモーダルはサイトの流儀で calc(1 / 0)（最前面）を使っている。
    calc に対応しないブラウザでは直前の 100001 が効く。
  */
  z-index: 100001;
  z-index: calc(1 / 0);
  width: 100%;
  /* 設計書03：高さ40px・#0175FF・16px太字（PC・SP共通） */
  padding: 8px 16px;
  background: #0175FF;
  color: #fff;
  font-size: 16px;
  font-weight: bold;
  line-height: 24px;
  text-align: center;
}
/*
  SPは画面下部に出す（設計書03）。詳細ページでは下部に固定された「メールアドレスをコピー」等のバーの
  すぐ上に出すため、JS（showToast）がバーの高さを bottom に入れる。バーが無いページでは画面の最下部。
*/
@media screen and (max-width: 750px) {
  .favorite-toast {
    top: auto;
    bottom: 0;
    padding-inline: 12px;
  }
}

/* ==========================================================================
   機能説明モーダル
   ========================================================================== */
.favorite-modal {
  display: none;
}
.favorite-modal.opened {
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1001;
  width: 100%;
  height: 100dvh;
}
.favorite-modal-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #000000B2;
}
.favorite-modal-in {
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  width: min(640px, 90%);
  max-height: 80dvh;
  overflow-y: auto;
  padding: 24px;
  background: #fff;
}
@media screen and (max-width: 750px) {
  .favorite-modal-in {
    padding: 16px;
  }
}
.favorite-modal-close {
  position: absolute;
  top: -38px;
  right: 0;
  width: 28px;
  height: 28px;
  padding: 0;
  border: none;
  background: url(../../search/img/close.svg) no-repeat center/100%;
  cursor: pointer;
}
.favorite-modal-ttl {
  display: flex;
  align-items: center;
  gap: 6px;
  padding-bottom: 12px;
  margin-bottom: 14px;
  border-bottom: 1px solid #E4DDD7;
  font-size: 20px;
  font-weight: bold;
  color: #3F321E;
}
@media screen and (max-width: 750px) {
  .favorite-modal-ttl {
    font-size: 16px;
  }
}
.favorite-modal-ttl::before {
  content: "";
  display: inline-block;
  width: 20px;
  height: 20px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
.favorite-modal-ttl.favorite-ttl--favorite::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233F321E' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20.4S3.6 15 3.6 9.3A4.6 4.6 0 0 1 12 6.7a4.6 4.6 0 0 1 8.4 2.6c0 5.7-8.4 11.1-8.4 11.1z'/%3E%3C/svg%3E");
}
.favorite-modal-ttl.favorite-ttl--history::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233F321E' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5.3l3.4 2'/%3E%3C/svg%3E");
}
.favorite-modal-body {
  font-size: 15px;
  line-height: 1.8;
  color: #3F321E;
}
@media screen and (max-width: 750px) {
  .favorite-modal-body {
    font-size: 13px;
  }
}
.favorite-modal-body p + p {
  margin-top: 8px;
}
.favorite-modal-body .favorite-description-link a {
  color: #C87F1E;
  font-weight: bold;
  text-decoration: underline;
}
.favorite-modal-body .favorite-description-note {
  font-size: 13px;
  color: #6B5E4B;
}

/* ==========================================================================
   募集詳細ページ「お気に入りに追加」ボタン
   ※既存の .searchDetailCont .mail-btn button より詳細度を上げて上書きする
   ========================================================================== */
.searchDetailCont .detail-btn-row {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 12px;
  width: 100%;
}
@media screen and (max-width: 750px) {
  .searchDetailCont .detail-btn-row {
    gap: 8px;
  }
  /* 行内では主ボタンの min-width:100% を解除して横並びを成立させる */
  .searchDetailCont .detail-btn-row > a,
  .searchDetailCont .detail-btn-row .mail-copy-btn {
    min-width: 0;
    flex: 1 1 auto;
  }
}

.searchDetailCont .detail-btn-row .favorite-add-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 0;
  flex: 0 0 auto;
  padding: 12px 20px;
  background-color: #fff;
  border: 1px solid #41321E;
  border-radius: 8px;
  font-size: 16px;
  font-weight: bold;
  color: #41321E;
  cursor: pointer;
}
.searchDetailCont .detail-btn-row .favorite-add-btn:hover {
  background-color: #F5F5F4;
}
@media screen and (max-width: 750px) {
  .searchDetailCont .detail-btn-row .favorite-add-btn {
    flex-direction: column;
    gap: 2px;
    min-width: 66px;
    padding: 6px 8px;
    font-size: 10px;
    line-height: 1.2;
  }
}

/* ハートアイコン（未保存＝白抜き／保存済み＝塗り） */
.searchDetailCont .detail-btn-row .favorite-add-btn-icon {
  display: inline-block;
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2341321E' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20.4S3.6 15 3.6 9.3A4.6 4.6 0 0 1 12 6.7a4.6 4.6 0 0 1 8.4 2.6c0 5.7-8.4 11.1-8.4 11.1z'/%3E%3C/svg%3E") no-repeat center/contain;
}
.searchDetailCont .detail-btn-row .favorite-add-btn.is-saved .favorite-add-btn-icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2341321E' stroke='%2341321E' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20.4S3.6 15 3.6 9.3A4.6 4.6 0 0 1 12 6.7a4.6 4.6 0 0 1 8.4 2.6c0 5.7-8.4 11.1-8.4 11.1z'/%3E%3C/svg%3E");
}
@media screen and (max-width: 750px) {
  .searchDetailCont .detail-btn-row .favorite-add-btn-icon {
    width: 18px;
    height: 18px;
  }
}

/* 保存済みの見た目 */
.searchDetailCont .detail-btn-row .favorite-add-btn.is-saved {
  background-color: #F5F0E8;
}

/* ==========================================================================
   グローバルナビ内 お気に入り／閲覧履歴
   ========================================================================== */
/*
  PC：他の項目より幅の狭いマスに、アイコンを上・文字を下に並べる（設計書03・04のヘッダー）。
  表示中のページのマスは、既存の .item.active（common_pc.css）で背景色が変わる。
  SP：メニュー内では他の項目と同じ文字だけの表示にするため、アイコンはPC幅でのみ出す。
*/
@media screen and (min-width: 751px) {
  header .main-menu .main-sub-menu.chiikiokoshi-sub-menu .item-favorite a,
  header .main-menu .main-sub-menu.chiikiokoshi-sub-menu .item-history a {
    position: relative;
    align-items: center;
    padding-inline: 10px!important;
    text-align: center;
  }
  header .main-menu .main-sub-menu.chiikiokoshi-sub-menu .favorite-nav-label,
  header .main-menu .main-sub-menu.chiikiokoshi-sub-menu .history-nav-label {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    font-size: 11px;
    line-height: 1.2;
    white-space: nowrap;
  }
  header .main-menu .main-sub-menu.chiikiokoshi-sub-menu .favorite-nav-label::before,
  header .main-menu .main-sub-menu.chiikiokoshi-sub-menu .history-nav-label::before {
    content: "";
    width: 18px;
    height: 18px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
  }
  header .main-menu .main-sub-menu.chiikiokoshi-sub-menu .favorite-nav-label::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20.4S3.6 15 3.6 9.3A4.6 4.6 0 0 1 12 6.7a4.6 4.6 0 0 1 8.4 2.6c0 5.7-8.4 11.1-8.4 11.1z'/%3E%3C/svg%3E");
  }
  header .main-menu .main-sub-menu.chiikiokoshi-sub-menu .history-nav-label::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 12a8.5 8.5 0 1 1 2.5 6'/%3E%3Cpath d='M9.5 18H6v3.5'/%3E%3Cpath d='M8.8 12.3l2.5 2.2 4.2-4.8'/%3E%3C/svg%3E");
  }
  /* 件数バッジはアイコンの右上に重ねる */
  header .main-menu .main-sub-menu.chiikiokoshi-sub-menu .item-favorite .js-favorite-count {
    position: absolute;
    top: 4px;
    left: calc(50% + 3px);
  }
}
@media screen and (max-width: 750px) {
  header .main-menu .main-sub-menu.chiikiokoshi-sub-menu .item-favorite .js-favorite-count {
    margin-left: 8px;
    vertical-align: 2px;
  }
}

/* お気に入り件数バッジ */
.js-favorite-count {
  display: none;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border-radius: 9px;
  background: #F49292;
  font-size: 11px;
  font-weight: bold;
  line-height: 18px;
  text-align: center;
  color: #fff;
}
/* サブメニュー内の span 向け指定（PC 12px・SP 17px）がバッジに効かないよう上書きする */
header .main-menu .main-sub-menu.chiikiokoshi-sub-menu .item .js-favorite-count {
  font-size: 11px;
  font-weight: bold;
  letter-spacing: 0;
  color: #fff;
}