/* SLAM CAREER コラム — LPと同じ黒×オレンジのトーン */
:root{
  --bg:#0b0b0c; --bg2:#141416; --card:#0f0f11; --ink:#f3efe9; --ink-dim:#a7a39b;
  --accent:#ff5a1f; --accent-deep:#c6390f; --line:#2a2a2d;
  --head:"Shippori Mincho B1",serif; --latin:"Anton",sans-serif; --eye:"Oswald",sans-serif; --body:"Noto Sans JP",sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:80px}
body{background:var(--bg);color:var(--ink);font-family:var(--body);line-height:1.9;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
.wrap{width:100%;max-width:1180px;margin:0 auto;padding:0 22px}
.wrap-narrow{width:100%;max-width:780px;margin:0 auto;padding:0 22px}
.section-pad{padding:56px 0 90px}
.hl{color:var(--accent)}
.eye{font-family:var(--eye);text-transform:uppercase;letter-spacing:.22em;font-size:12px;color:var(--accent);display:inline-flex;align-items:center;gap:10px;margin-bottom:14px}
.eye::before{content:"";width:26px;height:2px;background:var(--accent);display:inline-block}
.kill{font-family:var(--head);font-weight:800;line-height:1.25;word-break:auto-phrase;line-break:strict}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.6em;font-weight:700;background:var(--accent);color:#0b0b0c;padding:15px 28px;border-radius:2px;font-size:16px;transition:transform .15s,background .2s,box-shadow .2s}
.btn:hover{background:#ff6d38;transform:translateY(-2px);box-shadow:0 12px 36px rgba(255,90,31,.35)}
.btn .arw{font-family:var(--latin);font-size:13px;transition:transform .2s}
.btn:hover .arw{transform:translateX(4px)}
.btn-sm{padding:9px 16px;font-size:13px}

/* header */
.hdr{position:sticky;top:0;z-index:50;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 22px;background:rgba(11,11,12,.92);backdrop-filter:blur(6px);border-bottom:1px solid var(--line)}
.brand{font-family:var(--latin);font-size:19px;letter-spacing:.06em;white-space:nowrap}
.brand b{color:var(--accent);font-weight:400}
.hnav{display:flex;align-items:center;gap:20px;font-size:14px;font-weight:700}
.hnav>a:not(.btn):hover{color:var(--accent)}

/* breadcrumb */
.crumb{padding:14px 0;font-size:12px;color:var(--ink-dim)}
.crumb ol{list-style:none;display:flex;flex-wrap:wrap;gap:4px}
.crumb li:not(:last-child)::after{content:"/";margin-left:6px;color:#55555a}
.crumb li:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
.crumb a:hover{color:var(--accent)}

/* list hero */
.list-hero{position:relative;padding:48px 0 44px;border-bottom:1px solid var(--line);background:radial-gradient(circle at 85% 20%,rgba(255,90,31,.16),transparent 55%),var(--bg)}
.list-hero h1{font-size:clamp(2rem,6vw,3.4rem)}
.list-hero p{margin-top:16px;max-width:52ch;color:var(--ink-dim);word-break:auto-phrase}

/* filters */
.filters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:28px}
.filters a{font-size:13px;font-weight:700;border:1px solid var(--line);padding:7px 14px;border-radius:2px;color:var(--ink-dim);transition:all .2s}
.filters a:hover{color:var(--ink);border-color:#55555a}
.filters a.on{background:var(--accent);border-color:var(--accent);color:#0b0b0c}

/* cards */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.card{display:flex;flex-direction:column;gap:10px;background:var(--card);border:1px solid var(--line);border-top:2px solid var(--accent);padding:24px 22px;transition:border-color .2s,transform .2s}
.card:hover{border-color:var(--accent);transform:translateY(-3px)}
.card .c{font-family:var(--eye);font-size:11px;letter-spacing:.14em;color:var(--accent)}
.card .t{font-weight:900;font-size:1.08rem;line-height:1.6}
.card .d{font-size:.88rem;color:var(--ink-dim);line-height:1.8;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.card .m{margin-top:auto;padding-top:6px;font-size:.78rem;color:#7d7a74}
.empty{color:var(--ink-dim);padding:40px 0}

/* pager */
.pager{display:flex;justify-content:center;flex-wrap:wrap;gap:6px;margin-top:40px}
.pager a,.pager span{min-width:40px;padding:8px 12px;text-align:center;border:1px solid var(--line);font-size:14px}
.pager .on{background:var(--accent);border-color:var(--accent);color:#0b0b0c;font-weight:700}
.pager a:hover{border-color:var(--accent)}

/* article head */
.post-head{padding:18px 0 28px;border-bottom:1px solid var(--line)}
.post-cat{display:inline-block;font-family:var(--eye);letter-spacing:.14em;font-size:12px;color:var(--accent);border:1px solid var(--accent);padding:3px 10px;border-radius:2px}
.post-head h1{font-family:var(--head);font-weight:800;font-size:clamp(1.6rem,4.6vw,2.4rem);line-height:1.4;margin:16px 0 14px;word-break:auto-phrase;line-break:strict}
.post-meta{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:.8rem;color:#8d8a84}
.post-lead{margin-top:18px;color:var(--ink-dim);font-size:.98rem}

/* toc */
.toc{margin:30px 0;background:var(--bg2);border:1px solid var(--line);border-left:3px solid var(--accent);padding:20px 24px}
.toc-h{font-weight:900;margin-bottom:8px}
.toc ol{list-style:none;counter-reset:toc}
.toc li{font-size:.92rem;line-height:1.7;padding:4px 0}
.toc li.lv2{counter-increment:toc}
.toc li.lv2::before{content:counter(toc,decimal-leading-zero);font-family:var(--latin);color:var(--accent);margin-right:10px}
.toc li.lv3{padding-left:34px;font-size:.86rem;color:var(--ink-dim)}
.toc a:hover{color:var(--accent)}

/* article body */
.post-body{padding:10px 0 20px;font-size:1.02rem}
.post-body>*+*{margin-top:1.3em}
.post-body h2{font-family:var(--head);font-weight:800;font-size:clamp(1.35rem,3.6vw,1.75rem);line-height:1.45;margin-top:2.6em;padding:0 0 12px;border-bottom:1px solid var(--line);position:relative}
.post-body h2::before{content:"";position:absolute;left:0;bottom:-1px;width:64px;height:3px;background:var(--accent)}
.post-body h3{font-weight:900;font-size:1.15rem;line-height:1.6;margin-top:2em;padding-left:14px;border-left:3px solid var(--accent)}
.post-body p{color:#e4e0d9}
.post-body strong{color:var(--ink);background:linear-gradient(transparent 62%,rgba(255,90,31,.38) 62%)}
.post-body a{color:var(--accent);text-decoration:underline;text-underline-offset:3px}
.post-body ul,.post-body ol{padding-left:1.4em}
.post-body li{margin:.35em 0}
.post-body li::marker{color:var(--accent)}
.post-body blockquote{border-left:3px solid var(--accent);background:var(--bg2);padding:16px 20px;color:var(--ink)}
.post-body .box{background:var(--bg2);border:1px solid var(--line);border-top:2px solid var(--accent);padding:18px 22px}
.post-body .box.warn{border-top-color:#e8b339}
.post-body hr{border:0;border-top:1px solid var(--line);margin:2.4em 0}
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.post-body table{width:100%;min-width:520px;border-collapse:collapse;font-size:.92rem}
.post-body th,.post-body td{border:1px solid var(--line);padding:10px 12px;text-align:left;vertical-align:top}
.post-body th{background:#1b1b1e;color:var(--ink);font-weight:700}
.post-body td{color:#dcd8d0}

/* cta */
.cta-box{position:relative;margin:48px 0 32px;padding:40px 30px;text-align:center;border:1px solid var(--line);overflow:hidden;background:radial-gradient(circle at 50% 0%,rgba(255,90,31,.22),transparent 60%),var(--bg2)}
.cta-box h2{font-family:var(--head);font-weight:800;font-size:clamp(1.4rem,4vw,2rem);line-height:1.4;margin-bottom:14px}
.cta-box p{color:var(--ink-dim);max-width:44ch;margin:0 auto 22px;word-break:auto-phrase}
.cta-box .cta-note{margin:16px 0 0;font-family:var(--eye);letter-spacing:.1em;font-size:12px}

/* author */
.author-box{display:flex;gap:16px;align-items:flex-start;border:1px solid var(--line);padding:20px;margin:24px 0}
.author-box .ico{flex:none;width:56px;height:56px;border-radius:50%;background:#1b1b1e;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;font-family:var(--latin);font-size:18px}
.author-box .ico b{color:var(--accent);font-weight:400}
.author-box .wr{font-size:.75rem;color:#8d8a84}
.author-box .nm{font-weight:900}
.author-box .tx{font-size:.86rem;color:var(--ink-dim);margin-top:4px;line-height:1.8}

/* related */
.related{margin:48px 0 20px}
.related-h{font-family:var(--head);font-weight:800;font-size:1.4rem;margin-bottom:18px;display:flex;flex-direction:column}
.related .cards{grid-template-columns:1fr}

/* footer */
footer{background:#08080a;border-top:1px solid var(--line);padding:44px 0 120px;color:var(--ink-dim);font-size:.85rem;margin-top:40px}
.fbrand{font-family:var(--latin);font-size:22px;color:var(--ink);letter-spacing:.06em}
.fbrand b{color:var(--accent);font-weight:400}
.ftag{margin-top:6px}
.fnav{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:18px}
.fnav a:hover{color:var(--accent)}
.cp{margin-top:18px;font-size:.75rem;color:#5f5c57}

/* sticky mobile cta */
.sticky{position:fixed;left:0;right:0;bottom:0;z-index:60;display:none;padding:12px 16px;background:linear-gradient(to top,rgba(8,8,9,.98),rgba(8,8,9,.7));backdrop-filter:blur(4px)}
.sticky .btn{width:100%}

@media(max-width:900px){
  .cards{grid-template-columns:1fr 1fr}
}
@media(max-width:640px){
  .hdr{padding:10px 16px}
  .hnav{gap:14px}
  .hnav .btn{display:none}
  .wrap,.wrap-narrow{padding:0 16px}
  .cards{grid-template-columns:1fr}
  .cta-box{padding:32px 18px}
  .sticky{display:block}
  footer{padding-bottom:110px}
}