/* 宮城の求人2ページ（job-miyagi.html／job-miyagi-startup.html）の作り込み専用（担当A・2026-10-15）。
   色・線・角は site.css の変数（--c-*）にそろえる。共通CSSは変えない。他のページには読み込まない。 */

/* ---------- 冒頭のあらまし ---------- */
.jd-a-glance{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0;margin:0 0 28px;padding:0;background:#fff;border:1px solid var(--c-line);border-radius:14px;overflow:hidden}
.jd-a-glance>div{display:grid;grid-template-columns:7.5em minmax(0,1fr);gap:10px;padding:12px 18px;border-top:1px solid var(--c-line);min-width:0}
.jd-a-glance>div:nth-child(-n+2){border-top:0}
.jd-a-glance dt{font-size:13px;font-weight:700;line-height:1.8;color:var(--c-deeper)}
.jd-a-glance dd{margin:0;font-size:14.5px;line-height:1.8;color:var(--c-ink);min-width:0}
.jd-a-glance dd a{font-weight:700}

/* ---------- 写真と図 ---------- */
.jd-a-fig{margin:18px 0 0}
.jd-a-fig picture,.jd-a-fig img{display:block;width:100%;height:auto}
.jd-a-fig figcaption{margin-top:8px;font-size:13px;line-height:1.8;color:var(--c-ink2)}
.jd-a-diagram{margin:20px 0 0;background:#f4fbfb;border:1px solid var(--c-line);border-radius:14px;padding:14px}
/* 図の img に付く width/height 属性（880×170）を、スマホ用の別の縦横比の SVG に押し付けない。 */
.jd-a-diagram picture{display:block;width:100%}
.jd-a-diagram img{display:block;width:100%;max-width:100%;height:auto;max-height:none;aspect-ratio:auto}

/* ---------- 担当すること／扱うもの ---------- */
.jd-a-do{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin:20px 0 0}
.jd-a-do>div{background:#fff;border:1px solid var(--c-line);border-radius:14px;padding:16px 18px;min-width:0}
.jd-a-do h3{margin:0 0 6px;font-size:16px;line-height:1.6;color:var(--c-deeper)}
.jd-a-do ul{margin:0;padding-left:1.25em}
.jd-a-do li{margin:3px 0;line-height:1.8;font-size:14.5px}

/* ---------- 2つの求人の違い（表の上の一言と下の導線）---------- */
.jd-a-compare-lead{margin:0 0 14px}
.jd-a-compare-links{display:flex;flex-wrap:wrap;gap:10px;margin:16px 0 0}
.jd-a-compare-links .btn{white-space:normal}
.jd-a-compare th.jd-a-here,.jd-a-compare td.jd-a-here{background:#f4fbfb}

/* ---------- 経験の3つの区分 ---------- */
.jd-a-cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:16px 0 0}
.jd-a-col{background:#fff;border:1px solid var(--c-line);border-top:4px solid var(--c-main);border-radius:14px;padding:14px 16px;min-width:0}
.jd-a-col--must{border-top-color:var(--c-orange)}
.jd-a-col h3{margin:0 0 6px;font-size:16px;line-height:1.6;color:var(--c-deeper)}
.jd-a-col p{margin:0 0 6px;font-size:13.5px;line-height:1.8;color:var(--c-ink2)}
.jd-a-col ul{margin:0;padding-left:1.25em}
.jd-a-col li{margin:3px 0;font-size:14.5px;line-height:1.8}

/* ---------- 国内と海外の勤務割合（目安）---------- */
.jd-a-split{margin:16px 0 0;padding:0;display:grid;gap:12px}
.jd-a-split>div{display:grid;grid-template-columns:11em minmax(0,1fr);gap:6px 14px;align-items:center}
.jd-a-split dt{font-size:14px;font-weight:700;line-height:1.7;color:var(--c-deeper)}
.jd-a-split dd{margin:0;min-width:0}
.jd-a-bar{display:flex;height:34px;border-radius:8px;overflow:hidden;border:1px solid var(--c-line);font-size:13px;font-weight:700;line-height:34px;text-align:center}
.jd-a-bar span{display:block;min-width:0;white-space:nowrap}
.jd-a-bar .is-home{background:var(--c-tint);color:var(--c-deeper)}
.jd-a-bar .is-abroad{background:var(--c-orange);color:#fff}
.jd-a-split-note{margin:8px 0 0;font-size:13px;line-height:1.8;color:var(--c-ink2)}

/* ---------- この求人のよくある質問 ---------- */
.jd-a-faq{margin:0;padding:0}
.jd-a-faq details{border-bottom:1px solid var(--c-line)}
.jd-a-faq details:first-child{border-top:1px solid var(--c-line)}
.jd-a-faq summary{position:relative;list-style:none;cursor:pointer;padding:16px 44px 16px 4px;font-size:16px;font-weight:700;line-height:1.7;color:#1d3c40}
.jd-a-faq summary::-webkit-details-marker{display:none}
.jd-a-faq summary::before{content:"Q";display:inline-block;margin-right:12px;font-family:var(--f-num);font-weight:700;color:var(--c-deep)}
.jd-a-faq summary::after{content:"";position:absolute;right:14px;top:50%;width:11px;height:11px;border-right:2px solid var(--c-deep);border-bottom:2px solid var(--c-deep);transform:translateY(-70%) rotate(45deg)}
.jd-a-faq details[open] summary::after{transform:translateY(-25%) rotate(225deg)}
.jd-a-faq summary:focus-visible{outline:3px solid var(--c-deeper);outline-offset:2px}
.jd-a-faq .jd-a-ans{padding:0 8px 18px 34px;font-size:14.5px;line-height:1.9;color:var(--c-ink)}
.jd-a-faq .jd-a-ans p{margin:0 0 .7em}
.jd-a-faq .jd-a-ans a{font-weight:700}

@media (max-width:900px){
  .jd-a-cols{grid-template-columns:1fr}
}
@media (max-width:760px){
  .jd-a-glance{grid-template-columns:1fr}
  .jd-a-glance>div:nth-child(2){border-top:1px solid var(--c-line)}
  .jd-a-glance>div{grid-template-columns:6.5em minmax(0,1fr);padding:10px 14px}
  .jd-a-do{grid-template-columns:1fr}
  .jd-a-split>div{grid-template-columns:1fr}
  .jd-a-faq .jd-a-ans{padding-left:8px}
  .jd-a-diagram{padding:8px}
}
@media (prefers-reduced-motion:reduce){
  .jd-a-faq .jd-a-ans{animation:none}
}