/* =====================================================
   案件一覧ページ（projects.html）固有スタイル
   共通のヘッダー/フッター/closing-cta/トークンは
   style.css + home.css を継承。ここは一覧ページ専用分。
   ===================================================== */

/* ページ本体は白背景（html は緑のため、各セクションで白を敷く） */
.pl-hero, .pl-main { background: var(--white); }

/* ===== ページ見出し（透明オーバーレイヘッダーを避ける上部余白） ===== */
.pl-hero { padding: 150px 0 14px; }

.pl-breadcrumb {
  display: flex; align-items: center; gap: 10px;
  font-size: 0.9rem; color: var(--text-color); margin-bottom: 20px;
}
.pl-breadcrumb a { color: var(--text-color); text-decoration: none; transition: opacity 0.2s ease; }
.pl-breadcrumb a:hover { text-decoration: underline; }
.pl-breadcrumb .sep { color: #bcbcbc; }
.pl-breadcrumb .current { color: var(--text-color); }

.pl-title { font-size: 2.5rem; font-weight: 700; color: var(--text-color); line-height: 1.4; margin: 0 0 22px; }  /* 2026-08-18 見出し余白FBで14→22 */
.pl-lead { font-size: 1rem; color: var(--text-color); line-height: 1.9; margin: 0; }
.pl-count { font-size: 1rem; color: var(--text-color); margin: 4px 0 0; }
.pl-count #plCount { font-weight: 700; }

/* ===== フィルター ===== */
.pl-main { padding: 26px 0 76px; }

.pl-filters {
  display: flex; flex-direction: column; gap: 12px;
  border-bottom: 1px solid var(--border-color);
  padding-bottom: 24px; margin-bottom: 38px;
}
.pl-filter-row { display: flex; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.pl-filter-label {
  font-size: 0.9rem; font-weight: 700; color: var(--text-color);
  min-width: 52px; padding-top: 7px; flex-shrink: 0;
}
.pl-filter-pills { display: flex; gap: 8px; flex-wrap: wrap; }
.pl-pill {
  font-family: inherit; font-size: 0.88rem; font-weight: 500; color: var(--text-color);
  background: #fff; border: 1px solid var(--border-color); border-radius: 12px;
  padding: 6px 16px; cursor: pointer; line-height: 1.4;
  transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}
.pl-pill:hover { border-color: var(--primary-color); color: #32b470; }
.pl-pill.is-active { background: var(--primary-color); border-color: var(--primary-color); color: #fff; }
.pl-pill.is-active:hover { color: #fff; }

/* ===== カードグリッド ===== */
.pl-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }

/* 2トーン案件カード（上=緑ヘッダー / 下=白ボディ）
   ライブ offeeer.jp/project のカードに忠実に合わせた再現。
   計測値: タイトル18px/weight400/行間27px、稼働率と値は横並び、
   左右振り分け、角丸24px、詳細ボタンは緑ピル。 */
.pjob {
  display: flex; flex-direction: column;
  background: #fff; border-radius: 24px; overflow: hidden;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.10);
  text-decoration: none; color: inherit;
  transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}
.pjob:hover { transform: translateY(-8px); box-shadow: 0 12px 26px rgba(0, 0, 0, 0.15); }
/* display:flex が UA の [hidden]{display:none} を上書きしてしまうため明示的に隠す */
.pjob[hidden] { display: none; }

.pjob-head {
  background: var(--primary-color);
  padding: 20px 22px 22px; display: flex; flex-direction: column; gap: 14px;
  min-height: 120px;
}
.pjob-badge {
  align-self: flex-start; background: #fff; color: #32b470;
  font-size: 0.625rem; font-weight: 700; padding: 4px 15px;
  border-radius: var(--radius-full); box-shadow: 0 2px 5px rgba(72, 72, 72, 0.2);
}
.pjob-title {
  color: #fff; font-size: 1.125rem; font-weight: 400; line-height: 1.5; margin: 0;
  /* v3カードと同じルール: 2行まで+2行分の高さ確保でヘッダー高さを統一(2026-08-25 FB) */
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  min-height: calc(1.5em * 2);
}

.pjob-body { padding: 18px 22px 20px; display: flex; flex-direction: column; gap: 18px; flex: 1; }
/* 稼働率と稼働環境を左右に振り分け、ラベルと値は横並び（ライブ準拠） */
.pjob-meta { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.pjob-meta-item { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.pjob-meta-label { font-size: 0.625rem; color: #9a9a9a; letter-spacing: 0.02em; white-space: nowrap; }
.pjob-meta-value { font-size: 1rem; font-weight: 500; color: var(--text-color); white-space: nowrap; }

/* 稼働率/稼働環境 と 単価・詳細ボタンの間の区切り線（ライブ準拠の薄グレー1px） */
.pjob-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 16px; border-top: 1px solid #d9d9d9; }
.pjob-price { font-size: 1.25rem; font-weight: 700; color: #32b470; }
.pjob-detail-btn {
  background: var(--primary-color); color: #fff; font-size: 0.8rem; font-weight: 700;
  padding: 9px 22px; border-radius: var(--radius-full);
  box-shadow: 0 2px 5px rgba(72, 72, 72, 0.2); white-space: nowrap;
  transition: background 0.25s ease-in-out;
}
.pjob:hover .pjob-detail-btn { background: var(--primary-dark); }

/* 空状態 */
.pl-empty { text-align: center; color: var(--text-color); font-size: 1rem; padding: 56px 0; }

/* すべての案件を見る */
.pl-seeall-wrap { display: flex; justify-content: center; margin-top: 46px; }
.pl-seeall {
  /* 文字色はトップの.see-allと同じ緑に統一(2026-08-25 FB) */
  display: inline-block; background: #fff; color: var(--primary-color);
  font-size: 0.95rem; font-weight: 600; text-decoration: none;
  border: 2px solid var(--primary-color); border-radius: var(--radius-full);
  padding: 12px 58px; transition: background 0.3s ease-in-out, color 0.3s ease-in-out;
}
.pl-seeall:hover { background: var(--primary-color); color: #fff; }

/* ===== レスポンシブ ===== */
@media (max-width: 1024px) {
  .pl-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .pl-hero { padding: 116px 0 4px; }
  .pl-title { font-size: 2rem; }
  .pl-filter-label { min-width: auto; width: 100%; padding-top: 0; margin-bottom: 2px; }
  .pl-main { padding: 22px 0 60px; }
}
@media (max-width: 560px) {
  .pl-grid { grid-template-columns: 1fr; }
}

/* ===== さらに表示（段階表示） ===== */
.pl-more-wrap { display: flex; justify-content: center; margin-top: 46px; }
.pl-more {
  font-family: inherit; display: inline-block; background: #fff; color: var(--text-color);
  font-size: 0.95rem; font-weight: 600;
  border: 2px solid var(--primary-color); border-radius: var(--radius-full);
  padding: 12px 40px; cursor: pointer; transition: background 0.3s ease-in-out, color 0.3s ease-in-out;
}
.pl-more:hover { background: var(--primary-color); color: #fff; }
/* display指定がUAの [hidden]{display:none} を上書きしてしまうため明示的に隠す。
   これが無いと該当0件でも「さらに表示（残り0件）」が出続ける */
.pl-more[hidden] { display: none; }
/* ボタンが隠れているときは上の余白(46px)も出さない */
.pl-more-wrap:has(.pl-more[hidden]) { display: none; }

/* ===== 募集終了カード ===== */
.pjob.is-closed { opacity: 0.72; }
.pjob.is-closed .pjob-head { background: #9aa5ab; }
.pjob.is-closed .pjob-detail-btn { background: #9aa5ab; }
.pjob.is-closed:hover .pjob-detail-btn { background: #838d92; }
.pjob-status {
  align-self: flex-start; background: rgba(255, 255, 255, 0.85); color: #4d5761;
  font-size: 0.625rem; font-weight: 700; padding: 4px 15px;
  border-radius: var(--radius-full);
}
/* =====================================================
   V3 カード（コラム一覧 .col-card とデザイン言語を統一。
   白背景・角丸24px・淡い影・hoverで持ち上がる挙動、タイポグラフィを
   column.css の .col-card / .col-title / .col-excerpt / .col-more に合わせる）
   projects.html の一覧カードと提携ページ(freelance.html等)の新着案件カードで共用。
   ===================================================== */
/* フィルターで hidden にしたカードを確実に隠す（display:flex/grid が UA の [hidden] を上書きするため） */
.pl-grid > a[hidden] { display: none; }

/* 該当案件が0件のチップはJS側で hidden にする(display指定がUAの [hidden] を上書きするため明示) */
.pl-pill[hidden] { display: none; }

.v3{display:flex;flex-direction:column;text-decoration:none;color:inherit;background:#fff;border-radius:24px;overflow:hidden;box-shadow:0 2px 15px rgba(128,128,128,.18);transition:transform .3s ease-in-out,box-shadow .3s ease-in-out;}
.v3:hover{transform:translateY(-8px);box-shadow:0 14px 30px rgba(0,0,0,.15);}
.v3 .v3__header{position:relative;padding:18px 22px 0;}
.v3 .v3__cat{position:relative;z-index:1;display:inline-block;max-width:100%;padding:4px 12px;font-size:11.5px;font-weight:700;color:#32b470;background:#eef7f1;border:1px solid #e2f0e8;border-radius:999px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;box-sizing:border-box;}
/* タイトルは2行まで(超過は…)。1行でも2行分の高さを確保し、カードヘッダーの高さを全ページで揃える(2026-08-25 FB) */
.v3 .v3__title{position:relative;z-index:1;margin:12px 0 0;font-size:1.0625rem;font-weight:700;line-height:1.5;color:var(--text-color);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:calc(1.5em * 2);}
.v3 .v3__body{display:flex;flex-direction:column;padding:14px 22px 20px;flex:1;}
.v3 .v3__price{display:flex;align-items:center;flex-wrap:wrap;gap:0 4px;padding:13px 16px;background:#eef7f1;border:1px solid #e2f0e8;border-radius:12px;}
.v3 .v3__price-label{font-size:11.5px;font-weight:700;color:#32b470;letter-spacing:.04em;margin-right:6px;}
.v3 .v3__price-num{font-size:26px;font-weight:700;line-height:1.05;color:#32b470;letter-spacing:-.01em;}
.v3 .v3__price-unit{font-size:13px;font-weight:700;color:#32b470;align-self:flex-end;padding-bottom:2px;}
.v3 .v3__specs{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px;align-items:stretch;}
.v3 .v3__spec{display:flex;flex-direction:column;gap:5px;padding:11px 13px;border:1px solid #e5e7eb;border-radius:12px;min-width:0;background:#ffffff;}
.v3 .v3__spec-head{display:flex;align-items:center;gap:6px;font-size:11px;font-weight:700;color:#8a97a0;letter-spacing:.02em;}
.v3 .v3__spec-head svg{width:14px;height:14px;flex:none;color:#94a3b8;}
.v3 .v3__spec-val{font-size:14.5px;font-weight:700;color:#333333;line-height:1.3;overflow-wrap:break-word;word-break:normal;}
.v3 .v3__foot{display:flex;align-items:center;margin-top:auto;padding-top:16px;}
.v3 .v3__cta{display:flex;align-items:center;justify-content:center;gap:7px;width:100%;padding:11px 18px;font-size:13.5px;font-weight:700;line-height:1;color:#ffffff;background:#32b470;border:none;border-radius:999px;box-sizing:border-box;transition:background .2s ease,color .2s ease,box-shadow .2s ease;}
.v3 .v3__cta svg{width:15px;height:15px;flex:none;transition:transform .2s ease;}
.v3:hover .v3__cta{background:#ffffff;color:#32b470;box-shadow:inset 0 0 0 1.5px #32b470;}
.v3:hover .v3__cta svg{transform:translateX(3px);}
.v3.is-closed { opacity: 0.72; }