/* =========================================================
   Web Marketing Partners — コラム共通スタイル
   黒×金パレット（--noir/--gold/--cream）は本サイト共通
   ========================================================= */
:root{
  --noir:#0c0a08;
  --deep:#14100b;
  --panel:#191309;
  --cream:#e7dcc6;
  --cream-hi:#f4ecd9;
  --muted:rgba(231,220,198,.72);
  --faint:rgba(231,220,198,.62); /* 4.5:1 以上（WCAG AA）を満たす下限付近に設定 */
  --gold:#c8a55f;
  --gold-soft:rgba(200,165,95,.35);
  --line:#2a2318;
  --gold-grad:linear-gradient(135deg,#f1ddab 0%,#cda863 44%,#9c7b3a 100%);
  --font-serif:"Shippori Mincho","Hiragino Mincho ProN",serif;
  --font-sans:"Noto Sans JP","Hiragino Kaku Gothic ProN",sans-serif;
  --font-en:"Jost",sans-serif;
}
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  margin:0; background:var(--noir); color:var(--cream);
  font-family:var(--font-sans); font-weight:400; line-height:2;
  font-feature-settings:"palt" 1; -webkit-font-smoothing:antialiased;
}
a{ color:var(--gold); text-decoration:none; }
a:hover{ text-decoration:underline; text-underline-offset:3px; }
img{ max-width:100%; height:auto; display:block; }

/* ---------- header ---------- */
.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(12,10,8,.92); backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.site-header .inner{
  max-width:1080px; margin:0 auto; padding:14px 20px;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
}
.brand{ font-family:var(--font-en); font-weight:500; letter-spacing:.08em; color:var(--cream-hi); font-size:15px; white-space:nowrap; }
.brand:hover{ text-decoration:none; color:var(--gold); }
.header-nav{ display:flex; align-items:center; gap:20px; font-size:13px; }
.header-nav a{ color:var(--muted); }
.header-nav a:hover{ color:var(--gold); text-decoration:none; }
.header-nav .btn-consult{
  background:var(--gold-grad); color:#1c1606; font-weight:700;
  padding:8px 18px; border-radius:999px; font-size:12.5px; letter-spacing:.04em;
}
.header-nav .btn-consult:hover{ filter:brightness(1.06); text-decoration:none; }
@media (max-width:640px){
  .header-nav{ gap:12px; }
  .header-nav .hide-sp{ display:none; }
}

/* ---------- layout ---------- */
.page{ max-width:760px; margin:0 auto; padding:56px 20px 0; }
.page-wide{ max-width:1080px; margin:0 auto; padding:56px 20px 0; }

/* ---------- breadcrumb ---------- */
.breadcrumb{ font-size:12px; color:var(--faint); margin-bottom:28px; }
.breadcrumb ol{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:6px; }
.breadcrumb li+li::before{ content:"›"; margin-right:6px; color:var(--faint); }
.breadcrumb a{ color:var(--faint); }
.breadcrumb a:hover{ color:var(--gold); }

/* ---------- article ---------- */
.article-header .en-label{
  font-family:var(--font-en); font-size:12px; letter-spacing:.28em;
  color:var(--gold); text-transform:uppercase; margin:0 0 14px;
}
h1{
  font-family:var(--font-serif); font-weight:700; color:var(--cream-hi);
  font-size:clamp(24px,4.6vw,34px); line-height:1.6; letter-spacing:.02em; margin:0 0 18px;
}
.article-meta{ font-size:12.5px; color:var(--faint); display:flex; flex-wrap:wrap; gap:14px; margin-bottom:36px; }
.lead{ color:var(--muted); font-size:15.5px; margin:0 0 40px; }

article h2{
  font-family:var(--font-serif); font-weight:700; color:var(--cream-hi);
  font-size:clamp(19px,3.4vw,24px); line-height:1.7; letter-spacing:.02em;
  margin:64px 0 20px; padding:14px 0 14px 18px;
  border-left:3px solid var(--gold); background:linear-gradient(90deg,rgba(200,165,95,.10),transparent 70%);
}
article h3{
  font-family:var(--font-serif); font-weight:600; color:var(--cream-hi);
  font-size:clamp(16.5px,2.8vw,19px); margin:44px 0 14px;
}
article p{ margin:0 0 24px; font-size:15px; color:var(--cream); }
article ul,article ol{ margin:0 0 24px; padding-left:24px; font-size:15px; }
article li{ margin-bottom:8px; }
article strong{ color:var(--cream-hi); font-weight:700; background:linear-gradient(transparent 68%,rgba(200,165,95,.28) 68%); }

/* ---------- toc ---------- */
.toc{
  background:var(--panel); border:1px solid var(--line); border-radius:10px;
  padding:24px 28px; margin:0 0 48px;
}
.toc p{ margin:0 0 10px; font-family:var(--font-en); font-size:12px; letter-spacing:.24em; color:var(--gold); text-transform:uppercase; }
.toc ol{ margin:0; padding-left:20px; font-size:14px; }
.toc li{ margin-bottom:6px; }
.toc a{ color:var(--muted); }
.toc a:hover{ color:var(--gold); }

/* ---------- table ---------- */
.tbl-wrap{ overflow-x:auto; margin:0 0 24px; }
table{ border-collapse:collapse; width:100%; font-size:14px; min-width:520px; }
th,td{ border:1px solid var(--line); padding:12px 14px; text-align:left; vertical-align:top; line-height:1.8; }
th{ background:var(--panel); color:var(--cream-hi); font-weight:700; white-space:nowrap; }
td{ color:var(--muted); }

/* ---------- boxes ---------- */
.point-box{
  background:var(--panel); border:1px solid var(--gold-soft); border-radius:10px;
  padding:22px 26px; margin:0 0 24px; font-size:14.5px;
}
.point-box .box-label{
  display:block; font-family:var(--font-en); font-size:11px; letter-spacing:.26em;
  color:var(--gold); text-transform:uppercase; margin-bottom:8px;
}
.note{ font-size:12.5px; color:var(--faint); margin:0 0 24px; }

/* ---------- FAQ ---------- */
.faq-item{ border-bottom:1px solid var(--line); padding:20px 0; }
.faq-item dt{ font-weight:700; color:var(--cream-hi); font-size:15px; margin-bottom:8px; }
.faq-item dt::before{ content:"Q."; color:var(--gold); font-family:var(--font-en); margin-right:8px; }
.faq-item dd{ margin:0; font-size:14.5px; color:var(--muted); }
.faq-item dd::before{ content:"A."; color:var(--gold); font-family:var(--font-en); margin-right:8px; }

/* ---------- CTA band ---------- */
.cta-band{
  margin:72px 0 0; padding:48px 32px; text-align:center;
  background:var(--deep); border:1px solid var(--gold-soft); border-radius:14px;
}
.cta-band .en{ font-family:var(--font-en); font-size:12px; letter-spacing:.3em; color:var(--gold); text-transform:uppercase; margin:0 0 12px; }
.cta-band h2,.cta-band .cta-title{
  font-family:var(--font-serif); font-weight:700; color:var(--cream-hi);
  font-size:clamp(19px,3.4vw,24px); margin:0 0 14px; border:none; background:none; padding:0;
}
.cta-band p{ color:var(--muted); font-size:14px; margin:0 0 26px; }
.cta-band .btn{
  display:inline-block; background:var(--gold-grad); color:#1c1606; font-weight:700;
  padding:15px 40px; border-radius:999px; font-size:14.5px; letter-spacing:.04em;
}
.cta-band .btn:hover{ filter:brightness(1.06); text-decoration:none; }
.cta-band .sub-link{ display:block; margin-top:16px; font-size:13px; }

/* ---------- related ---------- */
.related{ margin-top:64px; }
.related .en-label{ font-family:var(--font-en); font-size:12px; letter-spacing:.28em; color:var(--gold); text-transform:uppercase; margin:0 0 18px; }
.related ul{ list-style:none; margin:0; padding:0; }
.related li{ border-bottom:1px solid var(--line); }
.related a{ display:block; padding:16px 4px; color:var(--cream); font-size:14.5px; }
.related a:hover{ color:var(--gold); text-decoration:none; }

/* ---------- column index cards ---------- */
.col-list{ list-style:none; margin:0; padding:0; display:grid; gap:20px; }
.col-card{
  display:block; background:var(--panel); border:1px solid var(--line); border-radius:12px;
  padding:28px 30px; transition:border-color .3s ease, transform .3s ease;
}
.col-card:hover{ border-color:var(--gold-soft); transform:translateY(-2px); text-decoration:none; }
.col-card .cat{ font-family:var(--font-en); font-size:11px; letter-spacing:.26em; color:var(--gold); text-transform:uppercase; display:block; margin-bottom:10px; }
.col-card h2{ font-family:var(--font-serif); font-weight:700; color:var(--cream-hi); font-size:18px; line-height:1.7; margin:0 0 10px; border:none; background:none; padding:0; }
.col-card p{ color:var(--muted); font-size:13.5px; margin:0 0 12px; line-height:1.9; }
.col-card .date{ font-size:12px; color:var(--faint); }

/* ---------- footer ---------- */
.site-footer{ margin-top:88px; border-top:1px solid var(--line); background:var(--deep); }
.site-footer .inner{ max-width:1080px; margin:0 auto; padding:40px 20px; }
.site-footer .links{ display:flex; flex-wrap:wrap; gap:8px 22px; font-size:13px; margin-bottom:20px; }
.site-footer .links a{ color:var(--muted); }
.site-footer .links a:hover{ color:var(--gold); }
.site-footer .copy{ font-size:12px; color:var(--faint); }