/* YardageLab Blog — LP とブランド統一した記事用スタイル(全記事で共有) */
:root{
  --c-primary:#2a6df4; --c-primary-dark:#0a3a8a; --c-primary-light:#cde0ff;
  --c-accent:#ef5350; --c-success:#2e7d32; --c-bg:#f5f7fb; --c-text:#1a1a1a;
  --c-text-light:#555; --c-text-muted:#888; --c-border:#e5e9f0; --c-card:#fff;
  --c-grad:linear-gradient(135deg,#0a3a8a 0%,#1e5fcc 50%,#2a6df4 100%);
  --shadow-sm:0 1px 3px rgba(0,0,0,.05); --shadow-md:0 4px 16px rgba(0,0,0,.08);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:"Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic","Noto Sans CJK JP",system-ui,sans-serif;
  font-size:17px;line-height:1.85;color:var(--c-text);background:var(--c-bg);font-weight:400}
.wrap{max-width:760px;margin:0 auto;padding:0 22px}

/* nav */
nav{position:sticky;top:0;background:rgba(255,255,255,.96);backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--c-border);z-index:100;padding:14px 0}
.nav-inner{display:flex;justify-content:space-between;align-items:center;max-width:1100px;margin:0 auto;padding:0 22px}
.nav-logo{font-weight:800;font-size:20px;color:var(--c-primary-dark);text-decoration:none;display:flex;align-items:center;gap:10px}
.nav-logo .mk{width:30px;height:30px;border-radius:8px;background:var(--c-primary);color:#fff;
  display:flex;align-items:center;justify-content:center;font-weight:900;font-size:18px}
.nav-cta{background:var(--c-primary);color:#fff;padding:9px 18px;border-radius:22px;
  font-weight:700;font-size:14px;text-decoration:none;transition:background .2s}
.nav-cta:hover{background:var(--c-primary-dark)}

/* article header */
.art-head{background:var(--c-grad);color:#fff;padding:54px 0 46px}
.breadcrumb{font-size:13px;opacity:.85;margin-bottom:16px}
.breadcrumb a{color:#fff;text-decoration:none;opacity:.85}
.breadcrumb a:hover{opacity:1;text-decoration:underline}
.art-head h1{font-size:clamp(28px,4.4vw,42px);font-weight:800;line-height:1.3;letter-spacing:-.01em}
.art-meta{margin-top:16px;font-size:14px;opacity:.9;display:flex;gap:16px;flex-wrap:wrap}

/* article body */
article{background:var(--c-card);margin:-28px auto 0;border-radius:18px 18px 0 0;
  box-shadow:var(--shadow-md);position:relative;padding:44px 0 10px}
article .wrap>*{margin-bottom:22px}
article h2{font-size:clamp(22px,3vw,28px);font-weight:800;color:var(--c-primary-dark);
  line-height:1.35;margin-top:46px;margin-bottom:18px;padding-bottom:10px;border-bottom:2px solid var(--c-primary-light)}
article h3{font-size:19px;font-weight:800;color:var(--c-primary-dark);margin-top:30px;margin-bottom:12px}
article p{color:var(--c-text);font-size:17px}
article strong{font-weight:700;color:var(--c-primary-dark)}
article ul,article ol{padding-left:1.3em}
article li{margin-bottom:8px}
.lead{font-size:19px;color:var(--c-text-light);line-height:1.8;font-weight:500;
  border-left:4px solid var(--c-primary);padding-left:18px;background:#f7faff;padding:16px 18px;border-radius:0 10px 10px 0}
.tip{background:#eef6ff;border:1px solid var(--c-primary-light);border-radius:12px;padding:18px 20px;font-size:15.5px}
.tip b{color:var(--c-primary-dark)}
table{width:100%;border-collapse:collapse;font-size:15px;margin:8px 0;display:block;overflow-x:auto}
th,td{border:1px solid var(--c-border);padding:10px 12px;text-align:left;vertical-align:top}
th{background:#f0f5fd;font-weight:700;color:var(--c-primary-dark);white-space:nowrap}
.toc{background:var(--c-bg);border:1px solid var(--c-border);border-radius:12px;padding:20px 24px}
.toc h2{margin:0 0 10px;font-size:15px;border:none;padding:0}
.toc ol{margin:0;padding-left:1.2em}
.toc a{color:var(--c-primary);text-decoration:none}
.toc a:hover{text-decoration:underline}

/* faq */
.faq-q{font-weight:700;color:var(--c-primary-dark);font-size:17px;margin-top:20px}
.faq-a{color:var(--c-text-light);font-size:16px}

/* CTA */
.cta-box{background:var(--c-grad);color:#fff;border-radius:18px;padding:40px 34px;text-align:center;margin:48px 0 10px}
.cta-box h2{color:#fff;border:none;font-size:26px;margin:0 0 12px;padding:0}
.cta-box p{color:#fff;opacity:.95;margin-bottom:24px;font-size:16px}
.cta-btn{display:inline-block;background:#fff;color:var(--c-primary-dark);padding:16px 36px;
  border-radius:30px;font-weight:800;font-size:17px;text-decoration:none;box-shadow:var(--shadow-md);transition:transform .2s}
.cta-btn:hover{transform:translateY(-2px)}

/* related */
.related{max-width:760px;margin:40px auto;padding:0 22px}
.related h2{font-size:18px;color:var(--c-primary-dark);margin-bottom:14px}
.related a{display:block;background:#fff;border:1px solid var(--c-border);border-radius:10px;
  padding:14px 18px;margin-bottom:10px;text-decoration:none;color:var(--c-text);font-weight:600;transition:border-color .2s}
.related a:hover{border-color:var(--c-primary)}

footer{background:#0a1a3a;color:#cde0ff;padding:40px 0 28px;margin-top:40px;font-size:13.5px}
.footer-inner{max-width:1100px;margin:0 auto;padding:0 22px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:20px}
footer a{color:#cde0ff;opacity:.8;text-decoration:none}
footer a:hover{opacity:1}
.footer-bottom{opacity:.5;font-size:12px;margin-top:20px;text-align:center}

/* charts */
.chart{margin:26px 0;background:#fafcff;border:1px solid var(--c-border);border-radius:14px;padding:20px 18px 14px}
.chart-title{font-size:15px;font-weight:800;color:var(--c-primary-dark);margin-bottom:12px;text-align:center}
.svg-chart{width:100%;height:auto;display:block}
.svg-scatter{max-width:380px;margin:0 auto}
.chart figcaption{font-size:12.5px;color:var(--c-text-muted);text-align:center;margin-top:10px;line-height:1.6}

@media(max-width:600px){
  body{font-size:16px}
  article{padding:32px 0 6px}
  .art-head{padding:40px 0 38px}
  .chart{padding:16px 12px 12px}
}