/* トマリギ 記事/地域ページ用スタイル（地域×職種・職種pillar共通）
   ブランド: Noto Sans JP / orange #ee5705 / green #3f9b4a・#2f7a3a。モバイル最優先。 */
:root{ --ink:#23282b; --muted:#6f6f6b; --line-c:#f0e7d8; --brand:#3f9b4a; --brand-d:#2f7a3a; --cta:#ee5705; --soft:#fdf3ea; --line:#22a033; --wrap:880px; }
*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{ font-family:'Noto Sans JP',sans-serif; color:var(--ink); background:#fff; line-height:1.9; font-size:16px; -webkit-font-smoothing:antialiased; padding-bottom:78px; }
a{ color:var(--brand-d); }
img{ display:block; max-width:100%; }
.wrap{ max-width:var(--wrap); margin:0 auto; padding:0 18px; }

/* header (top-page style) */
.hdr{ position:sticky; top:0; z-index:30; background:rgba(255,255,255,0.96); backdrop-filter:blur(8px); border-bottom:1px solid var(--line-c); }
.hdr__in{ max-width:var(--wrap); margin:0 auto; padding:12px 18px; display:flex; align-items:center; gap:16px; }
.brand{ display:flex; align-items:center; gap:9px; }
.brand img{ width:30px; height:auto; }
.brand b{ font-size:21px; font-weight:900; color:var(--cta); line-height:1.1; }
.brand small{ display:block; font-size:10px; color:var(--muted); font-weight:500; margin-top:1px; }
.hdr__line{ margin-left:auto; background:var(--line); color:#fff; font-weight:700; font-size:13px; padding:9px 16px; border-radius:40px; text-decoration:none; }

/* breadcrumb */
.crumb{ font-size:12px; color:var(--muted); padding:14px 0 0; }
.crumb a{ color:var(--muted); }
.crumb a:hover{ color:var(--cta); }
.crumb span{ color:#b7b1a6; margin:0 6px; }

/* hero of article */
.art-hero{ padding:14px 0 6px; }
.art-cat{ display:inline-block; background:var(--soft); color:var(--brand-d); font-weight:700; font-size:12.5px; padding:5px 12px; border-radius:30px; }
.art-hero h1{ font-size:26px; line-height:1.5; color:var(--ink); margin:12px 0 10px; font-weight:900; }
.art-hero .accent{ color:var(--cta); }
.art-point{ background:var(--soft); border:1px solid #f3e3cf; border-radius:14px; padding:16px 18px; margin:10px 0 6px; }
.art-point b{ color:var(--brand-d); }
.art-point ul{ margin:8px 0 0; padding-left:1.2em; }
.art-point li{ margin:4px 0; }

/* sections */
.art section{ padding:26px 0 0; }
.art h2{ font-size:22px; color:var(--brand-d); font-weight:900; line-height:1.5; margin:0 0 4px; }
.art h2 .num{ color:var(--cta); }
.art h3{ font-size:17px; color:var(--ink); font-weight:700; margin:18px 0 6px; }
.art p{ margin:8px 0; }
.card{ background:#fff; border:1px solid var(--line-c); border-radius:14px; padding:20px; margin-top:12px; }
.card.soft{ background:var(--soft); }
.note{ font-size:12.5px; color:var(--muted); }
.checks{ list-style:none; display:grid; gap:10px; margin:12px 0; padding:0; }
.checks li{ position:relative; padding-left:30px; }
.checks li:before{ content:"✓"; position:absolute; left:0; top:2px; color:var(--brand); font-weight:700; background:var(--soft); width:21px; height:21px; border-radius:50%; display:grid; place-items:center; font-size:12px; }
.tbl{ width:100%; border-collapse:collapse; margin:10px 0; font-size:14.5px; }
.tbl th,.tbl td{ border:1px solid var(--line-c); padding:10px 12px; text-align:left; vertical-align:top; }
.tbl th{ background:var(--soft); color:var(--brand-d); font-weight:700; white-space:nowrap; }

/* FAQ */
.faq details{ border:1px solid var(--line-c); border-radius:12px; padding:2px 16px; margin-top:10px; background:#fff; }
.faq summary{ font-weight:700; padding:14px 0; cursor:pointer; list-style:none; }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary:before{ content:"Q. "; color:var(--cta); font-weight:900; }
.faq details p{ margin:0 0 14px; color:#3d4247; }

/* CTA */
.cta-box{ background:linear-gradient(135deg,#fff7ef,#fdf3ea); border:1px solid #f3e3cf; border-radius:16px; padding:22px 20px; margin-top:22px; text-align:center; }
.cta-box b{ font-size:18px; color:var(--brand-d); }
.cta-box p{ font-size:13.5px; color:var(--muted); margin:6px 0 14px; }
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:10px; text-decoration:none; font-weight:700; border-radius:40px; padding:15px 26px; font-size:15.5px; }
.btn-line{ background:var(--line); color:#fff; box-shadow:0 8px 22px -8px rgba(34,160,51,0.5); }
.btn-shindan{ background:var(--cta); color:#fff; box-shadow:0 8px 22px -8px rgba(238,87,5,0.5); }
.btn-block{ display:flex; width:100%; margin-top:10px; }

/* related links */
.rel{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:12px; }
.rel a{ display:block; border:1px solid var(--line-c); border-radius:12px; padding:14px 16px; font-weight:700; color:var(--ink); text-decoration:none; font-size:14px; }
.rel a:hover{ border-color:var(--brand); color:var(--brand-d); }
.rel a small{ display:block; font-weight:500; color:var(--muted); font-size:12px; margin-top:4px; }

/* footer */
.ft{ background:#fbf5e9; color:var(--muted); border-top:1px solid #f2e9d8; margin-top:30px; }
.ft__in{ max-width:var(--wrap); margin:0 auto; padding:28px 18px; }
.ft b.logo{ color:var(--cta); font-size:20px; }
.ft .links{ display:flex; flex-wrap:wrap; gap:12px 20px; margin:12px 0 14px; font-weight:700; }
.ft a{ color:#3d4247; text-decoration:none; }
.ft .dis{ font-size:12px; color:#9b9b96; line-height:1.8; border-top:1px solid #ece3d2; padding-top:14px; }

/* sticky bottom */
.sticky{ position:fixed; left:0; right:0; bottom:0; z-index:40; background:rgba(255,255,255,0.96); backdrop-filter:blur(8px); border-top:1px solid var(--line-c); padding:9px 12px calc(9px + env(safe-area-inset-bottom)); box-shadow:0 -6px 20px rgba(0,0,0,0.06); }
.sticky .in{ max-width:var(--wrap); margin:0 auto; display:flex; gap:10px; }
.sticky .btn{ flex:1; padding:13px 8px; font-size:14.5px; }

@media(min-width:720px){
  .art-hero h1{ font-size:30px; }
  .rel{ grid-template-columns:1fr 1fr; }
}
@media(max-width:520px){
  .rel{ grid-template-columns:1fr; }
  .art-hero h1{ font-size:23px; }
}