/* =====================================================
   案件詳細ページ（project-<コンテンツID>.html）固有スタイル
   共通トークン/ヘッダー/フッター/closing-cta は style.css + home.css、
   セクション見出し・カテゴリカード・関連案件グリッドは home.css の
   .section-eyebrow / .section-head-row / .category-grid / projects.css の
   .pl-grid / .pjob をそのまま継承する（重複実装しない）。
   書き方はarticle.css（読み幅コンテナ・scroll-margin-top・
   モバイルのブレークポイント768px）に合わせる。pj-接頭辞で
   既存クラスと衝突しないようにする。
   ===================================================== */

/* 読み幅コンテナ（パンくずのみ。article.cssの.articleと同じ考え方。ヘッダーを避ける上部パディングも同値） */
.pj {
  max-width: 1120px;
  margin: 0 auto;
  padding: 150px 20px 0;
}

/* パンくず（article-breadcrumbと同じスタイル） */
.pj-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
  font-size: 0.8125rem;
  color: #8a8a8a;
  padding: 26px 0 18px;
  line-height: 1.6;
}
.pj-breadcrumb a { color: #8a8a8a; text-decoration: none; transition: color 0.2s ease; }
.pj-breadcrumb a:hover { color: #32b470; }
.pj-breadcrumb .sep { color: #cfcfcf; }
.pj-breadcrumb .current {
  color: #555;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ===== 緑ヒーロー帯 ===== */
.pj-hero { background: #32b470; padding: 32px 0 44px; }
.pj-hero-pills { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 20px; }
.pj-hero-pill {
  display: inline-flex; align-items: center;
  background: #fff; color: #32b470;
  font-size: 1rem; font-weight: 700; line-height: 1;
  padding: 9px 22px; border-radius: var(--radius-full);
}
/* 募集終了ピル（白アウトライン。塗りのピルと並べて「終わっている」と分かるように） */
.pj-hero-pill-outline {
  background: transparent; color: #fff;
  border: 1.5px solid #fff;
}

/* 案件タイトル（長いタイトルが多いため折り返し前提。省略しない） */
.pj-hero-title {
  font-size: 1.75rem;
  font-weight: 700;
  color: #fff;
  line-height: 1.5;
  letter-spacing: 0.01em;
  margin: 0 0 32px;
  overflow-wrap: anywhere;
}

/* 統計行（月額単価だけ強調ボックス、残り3項目はラベル+値のみ） */
.pj-hero-stats { display: flex; flex-wrap: wrap; align-items: center; gap: 36px 44px; }
.pj-hero-stat { display: flex; flex-direction: column; gap: 6px; }
.pj-hero-stat-label { font-size: 0.75rem; color: #fff; opacity: 0.92; }
.pj-hero-stat-value { font-size: 1.25rem; font-weight: 700; color: #fff; overflow-wrap: anywhere; }
.pj-hero-stat-price {
  background: rgb(127, 198, 149);
  border: 2px solid #fff;
  border-radius: 20px;
  padding: 14px 24px;
  gap: 4px;
}

/* ===== 2カラム本文 ===== */
/* 本家実測(1280px幅・playwright): コンテナ幅1080(x=100開始)・左540px・サイドバー415px・
   カラム間ギャップ125px。.containerクラス(max-width:1200px)は使わず、このセクション
   だけ実測どおりのmax-widthで中央寄せする。 */
.pj-main { padding-top: 56px; padding-bottom: 56px; }
/* align-itemsは既定のstretchのまま。startにすると右カラムがサイドバーと同じ高さに
   縮み、.pj-sidebarのstickyが動く余地を失う(スクロール追従しなくなる)。 */
.pj-main-grid { max-width: 1080px; margin: 0 auto; display: grid; grid-template-columns: 540px 415px; gap: 0 125px; }
.pj-col-left { display: flex; flex-direction: column; gap: 24px; min-width: 0; }
.pj-col-right { min-width: 0; }

/* 白カード（業務内容・求めるスキル・経験・案件詳細で共通。padding 20pxは実測値） */
.pj-card {
  background: #fff;
  border: 1px solid #c0c0c0;
  border-radius: 20px;
  padding: 20px;
}
.pj-card-heading {
  font-family: 'M PLUS 1', 'Noto Sans JP', sans-serif;
  font-size: 1.875rem;
  font-weight: 700;
  color: #32b470;
  line-height: 1; /* 本家実測: カード上端→本文まで80px(サイドバーは96px) */
  letter-spacing: 1.5px;
  margin: 0 0 26px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border-color);
}

/* サイドバー（sticky。ヘッダー分の余白を空けて追従させる。padding下だけ4px広い実測値） */
.pj-sidebar { position: sticky; top: 100px; padding: 20px 20px 24px; }
.pj-sidebar-cta {
  display: flex; align-items: center; justify-content: center;
  width: 100%; margin-top: 24px;
  background: rgb(213, 179, 37); color: #fff;
  font-size: 1.125rem; font-weight: 700;
  padding: 18px 20px; border-radius: var(--radius-full);
  text-align: center; transition: opacity 0.2s ease;
}
.pj-sidebar-cta:hover { opacity: 0.88; }
/* モバイル専用の2ボタンCTA（案件へエントリーする＋30秒で無料登録する）。デスクトップでは非表示にし、
   既存の1ボタン（案件の詳細を聞いてみる）だけを表示する。768px以下で入れ替える。 */
.pj-sidebar-cta-entry,
.pj-sidebar-cta-signup {
  display: none;
}

/* 案件詳細の行（dl表でもボーダー区切りでもなく、1ブロック内の改行だけのプレーンな行） */
.pj-detail-rows {
  white-space: pre-line;
  font-family: 'M PLUS 1', 'Noto Sans JP', sans-serif;
  font-size: 1rem;
  line-height: 1.6;
  letter-spacing: 0.8px;
  color: #333;
  overflow-wrap: anywhere;
}

/* 本家はサイドバーだけ見出し余白が16px広く、行間も2.0(32px)と広い */
.pj-sidebar .pj-card-heading { margin-bottom: 40px; }
.pj-sidebar .pj-detail-rows { line-height: 2; }

/* 本文（プレーンテキスト＋pre-wrapで改行・全角スペースの字下げを保持） */
.pj-text {
  white-space: pre-wrap;
  font-family: 'M PLUS 1', 'Noto Sans JP', sans-serif;
  font-size: 1rem;
  line-height: 1.6; /* 本家実測25.6px(16px×1.6)に合わせる */
  letter-spacing: 0.8px;
  color: #333;
  margin: 0;
  overflow-wrap: anywhere;
}

/* 関連案件グリッド（projects.cssの.pl-gridを流用。カード自体は.pjobをそのまま使い回す） */
.pj-related-grid { margin-top: 8px; }

/* ===== レスポンシブ ===== */
/* 1080px固定グリッド(540/415/125は1280px幅の実測値)は769〜1080pxの中間幅だと
   画面をはみ出すため、この帯だけ比率(540:415)を保った可変列に切り替える。
   768px以下は下の1カラム化で吸収する。 */
@media (max-width: 1080px) {
  .pj-main-grid { padding: 0 20px; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 0 40px; }
}
@media (max-width: 768px) {
  .pj { padding: 116px 18px 0; }
  .pj-hero { padding: 24px 0 32px; }
  .pj-hero-title { font-size: 1.375rem; margin: 0 0 24px; }
  .pj-hero-stats { gap: 18px 28px; }
  .pj-main { padding-top: 36px; padding-bottom: 36px; }
  .pj-main-grid { grid-template-columns: 1fr; gap: 24px; padding: 0 18px; }
  .pj-card { padding: 24px 20px; }
  .pj-card-heading { font-size: 1.25rem; margin-bottom: 20px; padding-bottom: 12px; }
  .pj-sidebar { position: static; }
  .pj-sidebar-cta {
    display: none;
  }
  .pj-sidebar-cta-entry,
  .pj-sidebar-cta-signup {
    display: flex;
  }
  .pj-sidebar-cta-entry {
    background: #32b470;
  }
  .pj-sidebar-cta-signup {
    background: rgb(213, 179, 37);
    margin-top: 16px;
  }
  /* サイドバー側に同内容の「案件詳細」が続くため、モバイルでは左側の重複カードを出さない */
  .pj-card-detail-left { display: none; }
  .pj-related-grid.pl-grid { grid-template-columns: 1fr; }
}