/* ハックの達人 記事共通CSS(v5ポップ) — 全記事が <link rel=stylesheet href=/article.css> で読む */
:root{--ink:#2a2333;--mut:#7a7488;--soft:#fef8f4;--line:#efe7ee;--pink:#ff5c8a;--pink-d:#e83f72;--mint:#15c79a;--mint-d:#0a9e7a;--lemon:#ffc83d;--sky:#3aa6ff;--sky-d:#1f86e0;--grape:#9b6ef0;--navy:#241d36;--cta:linear-gradient(135deg,#ff7a59,#ff4f86)}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;background:#fff;color:var(--ink);font-family:-apple-system,"Hiragino Maru Gothic ProN","Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif;line-height:1.85;-webkit-font-smoothing:antialiased}
.wrap{max-width:760px;margin:0 auto;padding:0 16px}
a{color:var(--sky-d)}
.prbar{background:#fff4e9;color:#9a6a3a;font-size:11.5px;text-align:center;padding:6px 10px}
header{background:#fff;border-bottom:1px solid var(--line);box-shadow:0 2px 12px rgba(255,92,138,.06);position:sticky;top:0;z-index:50}
.nav{max-width:760px;margin:0 auto;display:flex;align-items:center;gap:10px;height:56px;padding:0 16px}
.logo{display:flex;align-items:center;gap:8px;font-weight:900;font-size:16px;color:var(--ink)}
.crumbs{font-size:12px;color:var(--mut);padding:14px 0 0}
.crumbs a{color:var(--mut)}
h1{font-size:27px;line-height:1.4;font-weight:900;margin:8px 0 6px}
.meta{font-size:12px;color:var(--mut);margin-bottom:14px}
.lead{background:var(--soft);border:1px solid var(--line);border-left:5px solid var(--pink);border-radius:10px;padding:14px 16px;font-size:14.5px;margin:14px 0 24px}
h2{font-size:21px;font-weight:900;margin:34px 0 10px;padding-left:12px;border-left:6px solid var(--mint);line-height:1.4}
h3{font-size:17px;font-weight:900;margin:24px 0 8px}
p{margin:12px 0}
.tbl{width:100%;border-collapse:separate;border-spacing:0;font-size:13.5px;border:1px solid var(--line);border-radius:12px;overflow:hidden;margin:14px 0}
.tbl th{background:var(--soft);color:#6a6478;font-size:12px;padding:10px;text-align:left;font-weight:800}
.tbl td{padding:11px 10px;border-top:1px solid var(--line)}
.tbl tr.top td{background:#fffdf3}
.rkno{display:inline-flex;width:24px;height:24px;border-radius:50%;align-items:center;justify-content:center;font-weight:900;font-size:11px;color:#fff;background:var(--mut)}
.rkno.g{background:linear-gradient(135deg,#ffd24d,#f0a821);color:#6a4700}.rkno.s{background:#b9c2d0}.rkno.b{background:#d9a06a}
.cta{display:inline-flex;align-items:center;gap:6px;background:var(--cta);color:#fff;font-weight:900;font-size:14px;padding:11px 18px;border-radius:24px;box-shadow:0 6px 16px rgba(255,79,134,.3);margin:4px 0}
.mini-go{background:var(--cta);color:#fff;font-weight:900;font-size:12px;padding:6px 12px;border-radius:16px;white-space:nowrap;display:inline-block}
.mini-go.sub{background:#f0eef4;color:#6a6478;box-shadow:none}
.box{background:#fff;border:1px solid var(--line);border-radius:14px;padding:16px;margin:16px 0;box-shadow:0 6px 18px rgba(120,80,120,.05)}
.box.tip{background:#f3fbf8;border-color:#c9efe3}
.box.warn{background:#fff8ef;border-color:#ffe1b0}
.point{background:#ffe9f0;border-radius:12px;padding:14px 16px;margin:16px 0}
.point b{color:var(--pink-d)}
.faq dt{font-weight:900;margin-top:14px}
.faq dd{margin:4px 0 0;color:#48424f}
.rel{margin:24px 0}.rel a{display:block;padding:11px 4px;border-bottom:1px dashed var(--line);font-weight:700;color:var(--ink)}
.note{font-size:12px;color:var(--mut)}
.midcta{background:var(--soft);border:1px dashed var(--pink);border-radius:14px;padding:16px;text-align:center;margin:22px 0}
footer{background:var(--navy);color:#b3acc4;font-size:12.5px;padding:28px 0 40px;margin-top:24px}
footer a{color:#d6cdea}
@media(max-width:680px){h1{font-size:23px}.tbl{font-size:12.5px}}