@charset "utf-8";
/* -------------------------------------------------------------------------
 * 打診まわりの追加スタイル（サイドカー / SCSSパイプライン外）
 *  - 打診中バッジ（メンバーカード）
 *  - 過去打診リスト用の3タブ switcher
 *  - ヘッダーの「過去打診リスト」導線
 * ------------------------------------------------------------------------- */

/* ===== 打診中バッジ（card_entry_01） ===== */
/* バッジは画像と情報リストの間の既存余白（.cardPrf__info の padding-top）に収める。
 * flexで余分な行ボックス高を消し、直後の .cardPrf__info の padding-top を
 * バッジ高さ分だけ詰めることで、下のコンテンツを押し下げない（オフセット無し）。 */
/* バッジ自体はレイアウトの高さを持たない（height:0）。下の年齢・単価・区切り線などを
 * 一切押し下げず、画像下端〜区切り線の既存の空白帯（約53px）の中央に浮かせる。 */
.cardPrf__status {
  position: relative;
  height: 0;
  margin: 0;
  z-index: 2;
}
.cardPrf-01 .cardPrf__status .statusBadge {
  position: absolute;
  left: 0;
  top: 15px; /* (空白帯約53px − バッジ約22px) / 2 ≒ 15px で上下中央 */
}
.statusBadge {
  display: inline-block;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  border-radius: 3px;
  letter-spacing: 0.02em;
}
.statusBadge--offering,
.statusBadge--offered {
  padding: 5px 8px;
  font-size: 1.2rem;
  color: #fff;
}
/* 打診中：オレンジ */
.statusBadge--offering {
  background-color: #ff5900;
}
/* 打診済：グレー（完了系） */
.statusBadge--offered {
  background-color: #6c6c6c;
}
@media only screen and (max-width: 767.98px) {
  /* SP: 空白帯が狭いので中央寄せの top を小さく */
  .cardPrf-01 .cardPrf__status .statusBadge {
    top: 5px;
  }
  .statusBadge--offering,
  .statusBadge--offered {
    padding: 4px 6px;
    font-size: 0.9rem;
  }
}

/* ===== 3タブ switcher ===== */
.switchListLink--3 .__child {
  width: 33.3333%;
}
/* 過去打診リストタブのアイコン（heartデフォルトを打診アイコンに差し替え） */
.switchListLink [class^="switchListLink__link--"].switchListLink__link--pastoffer::before {
  background-image: url(img/global/icon/icon_pin_wht.svg);
}

/* ===== ヘッダー「過去打診リスト」導線 ===== */
/* nth-child位置指定のSCSSが4番目のボタンに当たらないため、クラスでピル型を付与 */

/* 共通のピル形状（白ボタン） */
.sHeader .__navMylist .menu-item .menu-btn--pastoffer,
.sHeader_fixed_pc .__nav_02 a.link--pastoffer {
  display: inline-block;
  position: relative;
  border-radius: 1000px;
  background-color: #fff;
  color: #1a1a1a !important;
  text-align: center;
  text-decoration: none;
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1;
  padding: 1em;
  min-width: 11em;
  transition: opacity 0.3s ease;
}
.sHeader .__navMylist .menu-item .menu-btn--pastoffer:link,
.sHeader .__navMylist .menu-item .menu-btn--pastoffer:visited,
.sHeader .__navMylist .menu-item .menu-btn--pastoffer:hover,
.sHeader .__navMylist .menu-item .menu-btn--pastoffer:active,
.sHeader_fixed_pc .__nav_02 a.link--pastoffer:link,
.sHeader_fixed_pc .__nav_02 a.link--pastoffer:visited,
.sHeader_fixed_pc .__nav_02 a.link--pastoffer:hover,
.sHeader_fixed_pc .__nav_02 a.link--pastoffer:active {
  color: #1a1a1a !important;
}
.sHeader .__navMylist .menu-item .menu-btn--pastoffer:hover,
.sHeader_fixed_pc .__nav_02 a.link--pastoffer:hover {
  opacity: 0.8;
}
/* ピンアイコン（白背景なのでオレンジのピン） */
.sHeader .__navMylist .menu-item .menu-btn--pastoffer::before,
.sHeader_fixed_pc .__nav_02 a.link--pastoffer::before {
  content: "";
  display: inline-block;
  vertical-align: middle;
  width: 1em;
  height: 1em;
  margin-right: 0.3em;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  background-image: url(img/global/icon/icon_pin_orange.svg);
}

/* =========================================================================
 * 過去打診リスト（page-past_offer）: 打診ごとのリスト表示
 * ========================================================================= */
.pastOffer__list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.pastOffer__item {
  display: flex;
  align-items: flex-start;
  gap: 40px;
  padding: 40px 0;
  border-top: 1px solid #2d2d2d;
}
.pastOffer__item:first-child {
  border-top: none;
}

/* 打診日 */
.pastOffer__date {
  flex: 0 0 auto;
  width: 12em;
  display: flex;
  gap: 1em;
  font-size: 1.4rem;
  padding-top: 2px;
}
.pastOffer__date__label {
  color: #9a9a9a;
}
.pastOffer__date__value {
  font-weight: 700;
}

/* 案件名＋概要 */
.pastOffer__body {
  flex: 1 1 auto;
  min-width: 0;
}
.pastOffer__title {
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 1.5;
  margin: 0 0 16px;
}
.pastOffer__summary {
  position: relative;
  background-color: #242424;
  border: 1px solid #2d2d2d;
  border-radius: 5px;
  padding: 20px 24px 56px;
}
.pastOffer__summary__text {
  max-height: 190px;
  overflow-y: auto;
  font-size: 1.3rem;
  line-height: 1.9;
  color: #c9c9c9;
  white-space: pre-wrap;
}
.pastOffer__summary.is--expanded .pastOffer__summary__text {
  max-height: none;
}
/* スクロールバー */
.pastOffer__summary__text::-webkit-scrollbar {
  width: 4px;
}
.pastOffer__summary__text::-webkit-scrollbar-thumb {
  background-color: #6c6c6c;
  border-radius: 4px;
}
.pastOffer__more {
  position: absolute;
  right: 16px;
  bottom: 16px;
  background-color: #3a3a3a;
  color: #fff;
  border: none;
  border-radius: 4px;
  padding: 8px 16px;
  font-size: 1.2rem;
  font-weight: 700;
  cursor: pointer;
  transition: opacity 0.3s ease;
}
.pastOffer__more:hover {
  opacity: 0.8;
}

/* 打診したクリエイター */
.pastOffer__creators {
  flex: 0 0 auto;
  width: 380px;
}
.pastOffer__creators__ttl {
  font-size: 1.5rem;
  font-weight: 700;
  margin: 0 0 16px;
}
.pastOffer__creators__empty {
  font-size: 1.3rem;
  color: #9a9a9a;
}
/* スライダー item */
.creatorSlider__item {
  padding: 0 6px;
}
.creatorSlider:not(.slick-initialized) {
  display: flex;
}
.creatorSlider:not(.slick-initialized) .creatorSlider__item {
  flex: 0 0 33.3333%;
  max-width: 33.3333%;
}
.creatorCard {
  display: block;
  text-decoration: none;
  color: #fff;
}
.creatorCard__img {
  display: block;
  width: 100%;
  padding-top: 100%;
  background-color: #d9d9d9;
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  border-radius: 4px;
  transition: opacity 0.3s ease;
}
.creatorCard:hover .creatorCard__img {
  opacity: 0.8;
}
.creatorCard__name {
  display: block;
  margin-top: 10px;
  font-size: 1.4rem;
  font-weight: 700;
}

/* 矢印（円形） */
.pastOffer__creators__arrow {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 16px;
}
.pastOffer__creators__arrow .slider-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  background: none;
  border: 1px solid #5a5a5a;
  border-radius: 50%;
  color: #fff;
  cursor: pointer;
  transition: opacity 0.3s ease, border-color 0.3s ease;
}
.pastOffer__creators__arrow .slider-arrow:hover {
  border-color: #fff;
}
.pastOffer__creators__arrow .slider-arrow.slick-disabled {
  opacity: 0.3;
  cursor: default;
}
.pastOffer__creators__arrow .slider-arrow svg {
  display: block;
  width: 18px;
  height: 18px;
}

.pastOffer__empty {
  font-size: 1.4rem;
  color: #9a9a9a;
  padding: 24px 0;
}

/* ---- SP ---- */
@media only screen and (max-width: 767.98px) {
  .pastOffer__item {
    flex-direction: column;
    gap: 16px;
    padding: 24px 0;
  }
  .pastOffer__date {
    width: auto;
    font-size: 1.1rem;
  }
  .pastOffer__creators {
    width: 100%;
  }
  /* SPはslick解除（unslick）→横スクロールで表示 */
  .creatorSlider.slick-slider {
    display: block;
  }
  .creatorSlider:not(.slick-initialized) {
    display: flex;
    gap: 0;
    overflow-x: auto;
  }
  .creatorSlider:not(.slick-initialized) .creatorSlider__item {
    flex: 0 0 40%;
    max-width: 40%;
  }
  .pastOffer__creators__arrow {
    display: none;
  }
}