/* BEZALEL 記事ページ共通（トップページ index.html の色・書体・枠線に合わせる） */
:root{
  --mustard:#F2B705; --mustard-deep:#D99A00;
  --tomato:#E8452C; --leaf:#3E9B4F; --leaf-soft:#CDEBC2;
  --ink:#2B1E2F; --paper:#FFFFFF; --cream:#f6f3e9; --butter:#FFF3C4;
  --round:"Zen Maru Gothic","Hiragino Maru Gothic ProN","Noto Sans JP",sans-serif;
  --sans:"Noto Sans JP","Hiragino Sans","Hiragino Kaku Gothic ProN",sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{background:var(--cream);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.85;-webkit-text-size-adjust:100%;overflow-wrap:anywhere;line-break:strict}
a{color:inherit}
img,svg{display:block;max-width:100%}
.wrap{width:min(1080px,100% - 32px);margin-inline:auto}
.skip{position:absolute;left:-9999px}.skip:focus{left:16px;top:16px;background:#fff;padding:8px 12px;z-index:10}
:focus-visible{outline:3px solid var(--tomato);outline-offset:2px}

/* header（トップと同じ） */
header.site{border-bottom:2px solid var(--ink);background:var(--cream);position:sticky;top:0;z-index:5}
header.site .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;height:60px}
.logo{font-family:var(--round);font-weight:900;font-size:18px;letter-spacing:.02em;text-decoration:none}
.logo b{color:var(--tomato)}
nav.top ul{display:flex;gap:20px;list-style:none;font-size:14px;font-weight:700}
nav.top a{text-decoration:none}
nav.top a:hover{text-decoration:underline}
@media (max-width:760px){nav.top{display:none}}
.crumb{font-size:13px;padding:14px 0 0;opacity:.8}
.crumb a{text-decoration:none}
.crumb a:hover{text-decoration:underline}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;font-family:var(--round);font-weight:900;font-size:16px;text-decoration:none;border:2px solid var(--ink);border-radius:999px;padding:10px 22px;box-shadow:3px 3px 0 var(--ink);transition:transform .12s,box-shadow .12s;background:var(--paper);color:var(--ink);cursor:pointer}
.btn:hover{transform:translate(1px,1px);box-shadow:2px 2px 0 var(--ink)}
.btn.primary{background:var(--tomato);color:#fff}
.btn.mustard{background:var(--mustard)}
.btn.small{font-size:14px;padding:6px 16px;min-height:40px;box-shadow:2px 2px 0 var(--ink)}

/* 一覧 */
.list-head{padding:36px 0 28px}
.eyebrow{font-family:var(--round);font-weight:900;font-size:13px;letter-spacing:.14em}
.list-head h1{font-family:var(--round);font-weight:900;font-size:clamp(28px,4.6vw,44px);line-height:1.35;margin-top:8px}
.list-head p{margin-top:12px;max-width:680px}
.cards{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;padding-bottom:64px}
@media (max-width:760px){.cards{grid-template-columns:1fr}}
.card{display:flex;flex-direction:column;gap:10px;text-decoration:none;background:var(--paper);border:2px solid var(--ink);border-radius:18px;padding:22px 22px 20px;box-shadow:4px 4px 0 var(--ink);transition:transform .12s,box-shadow .12s}
.card:hover{transform:translate(1px,1px);box-shadow:3px 3px 0 var(--ink)}
.card .tag{align-self:flex-start;font-family:var(--round);font-weight:900;font-size:12.5px;letter-spacing:.06em;background:var(--leaf-soft);border:1.5px solid var(--ink);border-radius:999px;padding:1px 12px}
.card h2{font-family:var(--round);font-weight:900;font-size:21px;line-height:1.45}
.card p{font-size:14.5px;line-height:1.75}
.card .more{margin-top:auto;font-family:var(--round);font-weight:900;font-size:14.5px}

/* 記事 */
.article{background:var(--paper);border-top:2px solid var(--ink);border-bottom:2px solid var(--ink);margin-top:18px}
.article .body{width:min(760px,100% - 32px);margin-inline:auto;padding:44px 0 56px}
.article .tag{display:inline-block;font-family:var(--round);font-weight:900;font-size:12.5px;letter-spacing:.06em;background:var(--leaf-soft);border:1.5px solid var(--ink);border-radius:999px;padding:1px 12px}
.article h1{font-family:var(--round);font-weight:900;font-size:clamp(26px,4.4vw,38px);line-height:1.4;margin-top:12px}
.article .sub{font-family:var(--round);font-weight:700;font-size:clamp(16px,2.4vw,19px);line-height:1.6;margin-top:10px}
.meta{display:flex;flex-wrap:wrap;gap:4px 18px;margin-top:16px;font-size:13.5px;opacity:.85}
.share{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:16px}
.share .msg{font-size:13px}
.article p{margin-top:1.1em;line-height:1.95}
.article h2{font-family:var(--round);font-weight:900;font-size:clamp(21px,3.2vw,26px);line-height:1.45;margin-top:2.4em;padding-top:.9em;border-top:2px solid var(--ink);scroll-margin-top:76px}
.article h2 + p{margin-top:.8em}
.lede{font-weight:700;background:var(--butter);border:2px solid var(--ink);border-radius:14px;padding:16px 18px;margin-top:24px !important}

.toc{margin-top:28px;background:var(--cream);border:2px solid var(--ink);border-radius:14px;padding:16px 20px}
.toc p{margin:0 !important;font-family:var(--round);font-weight:900}
.toc ol{margin-top:6px;padding-left:1.4em;display:grid;gap:2px;font-size:15px}
.toc a{text-decoration:none}
.toc a:hover{text-decoration:underline}

.tablewrap{margin-top:1.2em;overflow-x:auto;border:2px solid var(--ink);border-radius:14px;background:var(--paper)}
table{width:100%;border-collapse:collapse;font-size:15px;line-height:1.7}
th,td{padding:11px 14px;border-bottom:1.5px solid rgba(43,30,47,.18);text-align:left;vertical-align:top}
thead th{font-family:var(--round);font-weight:900;border-bottom:2px solid var(--ink);background:var(--butter)}
tr:last-child td{border-bottom:0}
td+td,th+th{border-left:1.5px solid rgba(43,30,47,.18)}
table.wide{min-width:640px}
@media (max-width:520px){table{font-size:14px}th,td{padding:9px 10px}}

.sheet{margin-top:1.2em;background:var(--butter);border:2px dashed var(--ink);border-radius:14px;padding:6px 18px 18px}
.sheet p{margin-top:.9em;font-weight:700}

/* 記事末の相談案内（トップの .ctabox と同じ見た目） */
.ctabox{margin-top:2.6em;background:var(--ink);color:#fff;border-radius:20px;padding:26px}
.ctabox .label{font-family:var(--round);font-weight:900;font-size:13px;letter-spacing:.14em;margin:0}
.ctabox p{opacity:.95}
.ctabox .btn{margin-top:18px}
.related{margin-top:2em;font-size:15px}
.related a{font-weight:700}

footer.site{border-top:2px solid var(--ink);padding:36px 0 44px;font-size:13.5px}
footer.site .wrap{display:flex;flex-wrap:wrap;gap:16px 40px;justify-content:space-between}
footer.site ul{list-style:none;display:flex;flex-wrap:wrap;gap:8px 18px}
.article + footer.site{border-top:0}

/* アイキャッチ */
.eyecatch{width:100%;height:auto;margin:18px 0 6px;border:2px solid var(--ink);border-radius:16px}
.card .thumb{width:calc(100% + 44px);max-width:none;height:auto;margin:-22px -22px 4px;border-bottom:2px solid var(--ink);border-radius:16px 16px 0 0}
