/* ══════════════════════════════════════════
   求人詳細ページ（募集職種）共有スタイル
   common.css のデザイントークン前提
   ══════════════════════════════════════════ */
.jd-hero { padding: 74px 0 52px; background: linear-gradient(135deg, #0b2447 0%, #1e3a8a 100%); color: #fff; position: relative; overflow: hidden; }
.jd-hero::after { content: ""; position: absolute; right: -120px; top: -120px; width: 460px; height: 460px; border-radius: 50%; background: radial-gradient(circle at 30% 30%, rgba(124,58,237,.42), transparent 62%); pointer-events: none; }
.jd-hero .container { max-width: 1000px; margin: 0 auto; padding: 0 24px; position: relative; z-index: 1; }
.jd-hero .eyebrow { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: #c4b5fd; margin: 0 0 14px; }
.jd-hero .tags { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.jd-hero .tag { display: inline-block; padding: 4px 12px; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.35); border-radius: 999px; font-size: 11px; font-weight: 600; color: #fff; }
.jd-hero h1 { font-family: 'Plus Jakarta Sans','Noto Sans JP', sans-serif; font-size: clamp(26px, 3.6vw, 40px); font-weight: 800; line-height: 1.3; color: #fff; margin: 0 0 12px; letter-spacing: -0.02em; }
.jd-hero .lead { font-size: clamp(14.5px, 1.7vw, 16.5px); line-height: 1.9; color: #dbe4f5; margin: 0 0 24px; max-width: 720px; }
.jd-hero .meta { display: flex; gap: 26px; flex-wrap: wrap; }
.jd-hero .meta-item { display: flex; flex-direction: column; gap: 3px; }
.jd-hero .meta-item span { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: #a5b4d4; }
.jd-hero .meta-item strong { color: #fff; font-weight: 700; font-size: 14.5px; }

.jd-breadcrumb { padding: 18px 0 0; background: #fff; font-size: 12px; border-bottom: 1px solid #e7eaf0; }
.jd-breadcrumb .container { max-width: 1000px; margin: 0 auto; padding: 0 24px 16px; }
.jd-breadcrumb ol { list-style: none; display: flex; gap: 8px; padding: 0; margin: 0; flex-wrap: wrap; color: #6e6e73; }
.jd-breadcrumb li:not(:last-child)::after { content: "›"; margin-left: 8px; color: #9ca3af; }
.jd-breadcrumb a { color: #6e6e73; text-decoration: none; }
.jd-breadcrumb a:hover { color: #0f2447; text-decoration: underline; }

.jd-body { padding: 56px 0 84px; background: #fff; }
.jd-body .container { max-width: 820px; margin: 0 auto; padding: 0 24px; }

.jd-lead-note { font-size: 15px; line-height: 2; color: #1a2a44; margin: 0 0 44px; padding: 22px 24px; background: #fafbfd; border-left: 3px solid #1d4ed8; border-radius: 0 8px 8px 0; }

.jd-section { margin-bottom: 48px; }
.jd-section > .kicker { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #7c3aed; margin: 0 0 8px; }
.jd-section > h2 { font-family: 'Plus Jakarta Sans','Noto Sans JP', sans-serif; font-size: clamp(20px, 2.3vw, 26px); font-weight: 800; color: #0b2447; margin: 0 0 16px; letter-spacing: -0.02em; }
.jd-section p { font-size: 14.5px; line-height: 2; color: #374151; margin: 0 0 14px; }
.jd-section p:last-child { margin-bottom: 0; }

.jd-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
.jd-list li { position: relative; padding-left: 26px; font-size: 14.5px; line-height: 1.9; color: #1a2a44; }
.jd-list li::before { content: ""; position: absolute; left: 2px; top: 11px; width: 8px; height: 8px; border-radius: 50%; background: #1d4ed8; }
.jd-list li b { color: #0b2447; }

/* AX 5 要素などのカード */
.jd-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.jd-card { padding: 20px 20px; background: #fafbfd; border: 1px solid #e7eaf0; border-radius: 12px; }
.jd-card__label { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #7c3aed; margin: 0 0 6px; }
.jd-card h3 { font-size: 15px; font-weight: 800; color: #0b2447; margin: 0 0 8px; line-height: 1.5; }
.jd-card p { font-size: 13px; line-height: 1.8; color: #4b5563; margin: 0; }

/* 働き方・条件 */
.jd-terms { padding: 22px 26px; background: #fafbfd; border: 1px solid #e7eaf0; border-radius: 12px; }
.jd-terms dl { display: grid; grid-template-columns: 130px 1fr; gap: 12px 20px; margin: 0; font-size: 14px; line-height: 1.8; }
.jd-terms dt { font-weight: 700; color: #0b2447; }
.jd-terms dd { margin: 0; color: #374151; }

/* 選考フロー */
.jd-flow { display: flex; flex-wrap: wrap; gap: 10px; }
.jd-flow-step { flex: 1 1 140px; padding: 16px 18px; background: #fff; border: 1px solid #e7eaf0; border-radius: 12px; position: relative; }
.jd-flow-step .num { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 12px; font-weight: 800; color: #c7d2e6; }
.jd-flow-step h4 { font-size: 14px; font-weight: 800; color: #0b2447; margin: 4px 0 4px; }
.jd-flow-step p { font-size: 12.5px; line-height: 1.7; color: #6b7280; margin: 0; }

/* CTA */
.jd-cta { padding: 40px 36px; margin-top: 8px; background: linear-gradient(135deg, #1d4ed8 0%, #1e3a8a 100%); color: #fff; border-radius: 16px; text-align: center; }
.jd-cta h3 { font-family: 'Plus Jakarta Sans','Noto Sans JP', sans-serif; font-size: clamp(20px, 2.4vw, 26px); font-weight: 800; margin: 0 0 12px; line-height: 1.45; }
.jd-cta p { font-size: 14px; line-height: 1.9; color: #dbe4f5; margin: 0 0 24px; }
.jd-cta__ctas { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.jd-cta__ctas a { display: inline-flex; align-items: center; gap: 6px; padding: 13px 30px; border-radius: 8px; text-decoration: none; font-size: 14px; font-weight: 700; transition: transform .15s; }
.jd-cta__ctas .primary { background: #fff; color: #0b2447; }
.jd-cta__ctas .ghost { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,.5); }
.jd-cta__ctas a:hover { transform: translateY(-2px); }

.jd-note { font-size: 12.5px; color: #6b7280; margin: 12px 0 0; }

.jd-back { display: inline-flex; align-items: center; gap: 6px; margin-top: 44px; padding: 10px 22px; background: #fff; border: 1px solid #d6dae3; border-radius: 999px; color: #0b2447; text-decoration: none; font-size: 14px; font-weight: 600; transition: all .15s; }
.jd-back:hover { background: #19376d; color: #fff; border-color: #19376d; }

@media (max-width: 720px) {
  .jd-hero { padding: 56px 0 40px; }
  .jd-body { padding: 40px 0 60px; }
  .jd-cards { grid-template-columns: 1fr; }
  .jd-terms dl { grid-template-columns: 1fr; gap: 4px 20px; }
  .jd-terms dt { margin-top: 8px; }
}