/* ===========================================================
   skk-g.asia コラム（/column/）用スタイル
   配色：案A「濃紺 × ゴールド」。トークンは current/index.html の :root と同じ値
   （トップは手書きのインライン CSS、コラムはこのファイル。値を変えるときは両方）
   ゴールドは 2 段：--gold（明るい面の文字用・白地 5.0:1）／--gold-bright（紺地の上の飾り用）
   記事本文のクラス（.faq / .scroll-x / .sup など）は partner の書式と同じものを用意している
   =========================================================== */
:root{
  --navy:#1a2b5c;
  --navy-deep:#0e1b3d;
  --gold:#8a6a22;
  --gold-bright:#c9a54c;
  --bg:#f6f4ee;
  --surface:#ffffff;
  --muted:#5a6072;
  --ring:#e4dfd2;
  --grad:linear-gradient(135deg,#0e1b3d 0%,#1a2b5c 100%);
  --grad-rev:linear-gradient(90deg,#8a6a22 0%,#c9a54c 50%,#8a6a22 100%);
  --font-en:"Outfit",sans-serif;
  --font-base:"Outfit","Yu Gothic",YuGothic,"Hiragino Kaku Gothic Pro",Meiryo,sans-serif;
  --ls:.15em;
  --container:1200px;
  --article:820px;
  --pad:48px;
  --py:clamp(48px,7vw,88px);
  --r:10px;
  --r-pill:40px;
  --card-pad:28px;
  --sh-card:0 4px 16px rgba(0,0,0,.08),0 1px 4px rgba(0,0,0,.05);
  --sh-card-hover:0 10px 24px rgba(0,0,0,.12);
  --t:.25s;
}
@media(max-width:600px){:root{--pad:5vw;--card-pad:22px}}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;min-height:100vh;display:flex;flex-direction:column;
  background:var(--bg);color:var(--navy);
  font-family:var(--font-base);font-weight:500;font-size:16px;line-height:1.9;
}
main{flex:1}
a{color:var(--gold)}
img{max-width:100%;height:auto}
h1,h2,h3{line-height:1.5;font-weight:600}
p{margin:0}
.wrap{max-width:calc(var(--container) + var(--pad)*2);margin:0 auto;padding-inline:var(--pad);width:100%}
:focus-visible{outline:2px solid var(--gold-bright);outline-offset:3px}

/* ── header ─────────────────────────── */
.head{background:var(--navy-deep);color:#fff}
.head__in{display:flex;align-items:center;justify-content:space-between;gap:12px 32px;flex-wrap:wrap;min-height:72px;padding-block:10px}
.brand{display:flex;flex-direction:column;line-height:1.25;color:#fff;text-decoration:none}
.brand b{font-family:var(--font-en);font-weight:600;font-size:18px;letter-spacing:.18em}
.brand span{font-size:11px;letter-spacing:.08em;color:rgba(255,255,255,.72)}
.nav{display:flex;flex-wrap:wrap;gap:0 28px}
.nav a{color:#fff;text-decoration:none;font-size:14px;letter-spacing:.06em;display:inline-flex;align-items:center;min-height:44px}
.nav a:hover{color:var(--gold-bright)}
@media(max-width:600px){.nav{gap:0 16px}.nav a{font-size:13px}}

/* ── page hero ──────────────────────── */
.phero{background:var(--grad);color:#fff;padding-block:clamp(40px,6vw,72px)}
.phero__crumb{font-size:12px;letter-spacing:.06em;color:rgba(255,255,255,.72);margin-bottom:18px}
.phero__crumb a{color:rgba(255,255,255,.72);text-decoration:none}
.phero__crumb a:hover{color:#fff;text-decoration:underline}
.phero__en{display:block;font-family:var(--font-en);font-size:14px;letter-spacing:var(--ls);color:var(--gold-bright);margin-bottom:10px}
.phero h1{margin:0 0 16px;font-size:clamp(24px,4vw,36px);letter-spacing:.08em;max-width:var(--article)}
.phero__lead{max-width:680px;color:rgba(255,255,255,.9);font-size:15px}

/* ── section / buttons ──────────────── */
.sec{padding-block:var(--py)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;
  font-family:var(--font-base);font-size:14px;font-weight:600;letter-spacing:.1em;
  padding:12px 32px;text-decoration:none;border-radius:var(--r-pill);border:1px solid transparent;transition:var(--t)}
.btn--line{color:var(--navy);border-color:var(--ring);background:transparent}
.btn--line:hover{background:#fff}
.btn--gold{background:var(--gold-bright);color:var(--navy-deep);font-weight:700}
.btn--gold:hover{background:#d8b860;color:var(--navy-deep)}

/* ── cards（一覧・関連記事。トップの .ccards は index.html 側に同じ定義がある） ── */
.ccards{display:grid;gap:28px}
@media(min-width:720px){.ccards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1000px){.ccards{grid-template-columns:repeat(3,minmax(0,1fr))}}
.ccard{display:flex;flex-direction:column;background:var(--surface);border-radius:var(--r);overflow:hidden;
  box-shadow:var(--sh-card);text-decoration:none;color:var(--navy);transition:transform var(--t),box-shadow var(--t)}
.ccard:hover{transform:translateY(-4px);box-shadow:var(--sh-card-hover)}
.ccard__img{display:block;aspect-ratio:16/9;background:var(--grad);overflow:hidden}
.ccard__img img{width:100%;height:100%;object-fit:cover;display:block}
.ccard__img--none{display:grid;place-items:center;font-family:var(--font-en);font-size:13px;letter-spacing:.3em;color:rgba(201,165,76,.75)}
.ccard__body{display:flex;flex-direction:column;gap:8px;padding:20px 24px 24px;flex:1}
.ccard__meta{font-family:var(--font-en);font-size:12px;letter-spacing:.1em;color:var(--muted)}
.ccard__meta span{font-family:var(--font-base);letter-spacing:.04em}
.ccard__t{margin:0;font-size:17px;letter-spacing:.03em;line-height:1.6}
.ccard:hover .ccard__t{color:var(--gold)}
.ccard__d{font-size:14px;line-height:1.8;color:var(--muted)}
.tags{display:flex;flex-wrap:wrap;gap:8px;margin:6px 0 0}
.tag{font-size:12px;line-height:1.6;letter-spacing:.04em;color:var(--navy);background:var(--bg);border:1px solid var(--ring);border-radius:var(--r-pill);padding:2px 12px}
.wait{max-width:var(--article);background:rgba(255,255,255,.6);border:1px dashed var(--ring);border-radius:var(--r);padding:var(--card-pad)}
.wait__lb{font-family:var(--font-en);font-size:12px;letter-spacing:var(--ls);color:var(--gold);margin-bottom:8px}
.wait__t{font-size:18px;font-weight:600;margin-bottom:8px}
.wait__d{font-size:14px;color:var(--muted)}
.pager{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:48px}
.pager__n{font-family:var(--font-en);font-size:13px;letter-spacing:var(--ls);color:var(--muted)}

/* ── article ────────────────────────── */
.art{max-width:var(--article);margin:0 auto}
.art__hero{margin:0 0 24px;border-radius:var(--r);overflow:hidden;aspect-ratio:16/9;background:var(--grad)}
.art__hero img{width:100%;height:100%;object-fit:cover;display:block}
.art__meta{display:flex;flex-wrap:wrap;gap:4px 20px;font-family:var(--font-en);font-size:13px;letter-spacing:.08em;color:var(--muted);margin-bottom:32px}
.art__meta span{font-family:var(--font-base)}
.art__foot{margin-top:48px;padding-top:28px;border-top:1px solid var(--ring)}
.art__back{margin-top:28px}
.rel{max-width:var(--container);margin:72px auto 0}
.rel__t{font-size:20px;font-weight:600;letter-spacing:.08em;margin-bottom:24px;padding-left:14px;border-left:4px solid var(--gold-bright)}

/* 目次（h2 が 3 つ以上のとき自動で入る） */
.toc{background:var(--surface);border:1px solid var(--ring);border-radius:var(--r);padding:20px var(--card-pad);margin:32px 0 40px}
.toc__t{font-size:14px;font-weight:700;letter-spacing:.1em;color:var(--gold);margin:0 0 8px!important}
.toc ol{margin:0;padding-left:1.4em}
.toc li{margin:.25em 0;font-size:15px}
.toc a{color:var(--navy);text-decoration:none}
.toc a:hover{color:var(--gold);text-decoration:underline}

/* 本文 */
.prose--art{font-size:16px}
.prose--art>:first-child{margin-top:0}
.prose--art p{margin:0 0 1.5em}
.prose--art h2{font-size:clamp(20px,2.6vw,24px);letter-spacing:.05em;margin:64px 0 20px;padding:12px 0 12px 16px;border-left:4px solid var(--gold-bright);background:linear-gradient(90deg,rgba(201,165,76,.08),transparent);scroll-margin-top:24px}
.prose--art h3{font-size:18px;letter-spacing:.04em;margin:40px 0 14px;padding-bottom:6px;border-bottom:1px solid var(--ring)}
.prose--art a{color:var(--gold);text-decoration:underline;text-underline-offset:.2em;text-decoration-thickness:1px}
.prose--art a:hover{color:var(--navy);text-decoration-thickness:2px}
.prose--art strong,.prose--art b{font-weight:700;background:linear-gradient(transparent 62%,rgba(201,165,76,.28) 62%)}
.prose--art em,.prose--art i{font-style:normal;-webkit-text-emphasis:filled dot currentColor;text-emphasis:filled dot currentColor}
.prose--art small{color:var(--muted)}
.prose--art ul,.prose--art ol{padding-left:1.4em;margin:0 0 1.5em}
.prose--art li{margin-bottom:.5em}
.prose--art ul>li::marker,.prose--art ol>li::marker{color:var(--gold)}
.prose--art img{display:block;margin:32px 0;border-radius:var(--r)}
.prose--art figure{margin:32px 0}
.prose--art figure img{margin:0}
.prose--art figcaption{margin-top:10px;font-size:13px;line-height:1.7;color:var(--muted)}
.prose--art table{width:100%;margin:32px 0;border-collapse:collapse;background:var(--surface);border-radius:var(--r);overflow:hidden;box-shadow:var(--sh-card);font-size:15px}
.prose--art th,.prose--art td{padding:14px 18px;text-align:left;vertical-align:top;border-bottom:1px solid var(--ring)}
.prose--art tr:last-child th,.prose--art tr:last-child td{border-bottom:0}
.prose--art thead th{font-size:14px;font-weight:600;color:#fff;background:var(--navy)}
.prose--art .scroll-x{margin:32px 0;overflow-x:auto}
.prose--art .scroll-x table{margin:0;min-width:520px}
.prose--art blockquote{margin:32px 0;padding:4px 0 4px 20px;border-left:4px solid var(--ring);font-size:15px;color:var(--navy-deep)}
.prose--art blockquote p:last-child{margin-bottom:0}
.prose--art blockquote cite{display:block;margin-top:10px;font-style:normal;font-size:13px;color:var(--muted)}
.prose--art hr{margin:48px 0;border:0;border-top:1px solid var(--ring)}
.prose--art code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.92em;padding:2px 6px;background:var(--bg);border:1px solid var(--ring);border-radius:4px}
@media(max-width:600px){.prose--art th,.prose--art td{padding:10px 12px;font-size:14px}}

/* よくある質問（<div class="faq"><details><summary>Q</summary><p>A</p></details></div>） */
.faq details{background:var(--surface);border-radius:var(--r);box-shadow:var(--sh-card);margin-bottom:12px}
.faq summary{cursor:pointer;list-style:none;padding:20px 56px 20px var(--card-pad);font-size:16px;font-weight:600;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:28px;top:27px;width:9px;height:9px;border-right:2px solid var(--gold);border-bottom:2px solid var(--gold);transform:rotate(45deg);transition:transform var(--t)}
.faq details[open] summary::after{transform:rotate(-135deg)}
.faq details>:not(summary){padding:0 var(--card-pad);margin-bottom:0}
.faq details>:last-child{padding-bottom:20px}

/* 監修者 */
.sup{margin:40px 0;background:var(--surface);border-radius:var(--r);padding:var(--card-pad);box-shadow:var(--sh-card);border-left:4px solid var(--gold-bright)}
.sup__label{margin:0 0 16px!important;font-size:12px;font-weight:700;letter-spacing:.08em;color:var(--gold)}
.sup__body{display:flex;gap:20px;align-items:flex-start}
.sup__avatar{flex:none;width:72px;height:72px;border-radius:50%;overflow:hidden;background:var(--bg);display:grid;place-items:center;color:var(--ring)}
.sup .sup__avatar img{width:100%;height:100%;object-fit:cover;display:block;margin:0;border-radius:0}
.sup__ph{width:36px;height:36px;fill:none;stroke:currentColor;stroke-width:1.6}
.sup__name{margin:0 0 4px!important;font-size:16px;font-weight:700}
.sup__aff{margin:0 0 10px!important;font-size:13px;color:var(--muted)}
.sup__bio{margin:0!important;font-size:14px;line-height:1.8;color:var(--navy-deep)}
.sup__link{display:inline-block;margin-top:12px;font-size:13px;text-decoration:none!important}
@media(max-width:480px){.sup__body{flex-direction:column}}

/* ── CTA ────────────────────────────── */
.cta{background:var(--grad);color:#fff;padding-block:var(--py);text-align:center}
.cta__en{display:block;font-family:var(--font-en);font-size:13px;letter-spacing:.24em;color:var(--gold-bright);margin-bottom:10px}
.cta__ja{font-size:clamp(20px,3vw,26px);font-weight:600;letter-spacing:.08em;margin-bottom:14px}
.cta__p{max-width:640px;margin:0 auto 28px;color:rgba(255,255,255,.9);font-size:15px}

/* ── footer（トップと同じ） ─────────── */
.footband{height:6px;background:var(--grad-rev)}
.foot{background:var(--navy-deep);color:rgba(255,255,255,.82);padding-block:40px 28px;font-size:13px}
.foot a{color:rgba(255,255,255,.82);text-decoration:none}
.foot a:hover{color:#fff;text-decoration:underline}
.foot__nav{display:flex;flex-wrap:wrap;gap:10px 28px;margin-bottom:28px}
.foot__c{font-size:11px;color:rgba(255,255,255,.55);letter-spacing:.06em;line-height:1.9}

@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}html{scroll-behavior:auto}}