/* 宮城の求人2ページ r2（担当A）：物流リーダーの見せ方（logistics-leader-v1.css の ll-*）に足す、ページ専用の部品。
   logistics-leader-v1.css・共通CSS・jd-a-detail.css は書き換えない。色・線は ll-page の変数にそろえる。 */

/* 役割の広がり：写真のカード（手本は図。ここは写真なので、枠いっぱいに切り抜く） */
.jd-a-steps .ll-step__fig{background:#e3efed}
.jd-a-steps .ll-step__fig img{object-fit:cover}
.jd-a-steps .ll-step__fig img[src$=".svg"]{object-fit:contain;background:var(--ll-mint2)}
.ll-hero__art--photo img{aspect-ratio:3/2}

/* 年収の例の内訳 */
.jd-a-parts{max-width:920px;margin-top:8px}
.jd-a-parts__list{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:0;padding:0;list-style:none}
.jd-a-parts__list li{display:flex;flex-direction:column;gap:2px;padding:14px 16px;background:#fff;border:1px solid var(--ll-line);border-top:4px solid var(--ll-teal)}
.jd-a-parts__list li:nth-child(3){border-top-color:var(--ll-orange)}
.jd-a-parts__list span{font-size:12px;font-weight:700;letter-spacing:.06em;color:var(--ll-orange-ink)}
.jd-a-parts__list b{font-family:var(--f-num);font-size:clamp(26px,3vw,34px);font-weight:600;line-height:1.2;color:var(--ll-teal);font-variant-numeric:tabular-nums}
.jd-a-parts__list b small{margin-left:2px;font-family:var(--f-jp);font-size:14px;font-weight:700}
.jd-a-parts__list em{font-style:normal;font-size:13px;line-height:1.7;color:var(--ll-muted)}

/* 役割が広がる時期の注 */
.jd-a-timing{margin:28px 0 0;padding:16px 20px;background:#fff;border-left:4px solid var(--ll-orange)}
.jd-a-timing h4{margin:0 0 6px;font-size:17px;line-height:1.6;color:var(--ll-ink)}
.jd-a-timing p{margin:0 0 6px;font-size:14px;line-height:1.9;color:var(--ll-muted)}
.jd-a-timing a{font-weight:700;color:var(--ll-teal)}
.jd-a-learn{margin-top:clamp(36px,5vw,56px)}
.jd-a-learn .ll-sub{margin-top:0}

/* 2つ並べるカード・折りたたみの表 */
.jd-a-twocol{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-top:22px}
.jd-a-twocol .ll-card h3{margin:0 0 10px}
.jd-a-twocol .ll-card p{margin:0 0 8px;font-size:14px;line-height:1.9;color:var(--ll-muted)}
.jd-a-spec{margin-top:26px;background:#fff;border:1px solid var(--ll-line)}
.jd-a-spec summary{cursor:pointer;padding:14px 18px;font-size:15px;font-weight:700;line-height:1.7;color:var(--ll-teal)}
.jd-a-spec[open] summary{border-bottom:1px solid var(--ll-line)}
.jd-a-spec .v9-table,.jd-a-spec .gs-cond{margin:14px 18px 18px;width:auto}
.jd-a-spec .gs-note{margin:14px 18px 0}
.jd-a-applybox{margin-top:30px}
.ll-sec .jd-a-compare{margin-top:6px}
.ll-sec .jd-a-do,.ll-sec .jd-a-diagram{margin-top:22px}
.ll-sec .v9-band5{margin-top:6px}
.ll-sec .jd-a-split{max-width:760px}
.ll-sec .gs-note{margin-top:10px}

.ll-pay__day.jd-a-range{flex-wrap:wrap}
.ll-pay__day.jd-a-range b{font-size:clamp(28px,3.2vw,38px)}

@media (max-width:900px){
  .jd-a-parts__list{grid-template-columns:repeat(2,minmax(0,1fr))}
  .jd-a-twocol{grid-template-columns:1fr}
}
@media (max-width:760px){
  .jd-a-parts__list{grid-template-columns:1fr}
  .jd-a-spec .v9-table,.jd-a-spec .gs-cond{margin-left:10px;margin-right:10px}
}