/* Corporation NW — コラム（記事ページ）。style.css の色・書体を引き継ぐ。
   このファイルは media/scripts/article.css が元。site/css/article.css は build_site.py が上書きする */
:root {
  --a-q: #151924;          /* 聞き手の吹き出し */
  --a-a: #121a33;          /* 解説の吹き出し */
  --a-mark: rgba(159, 176, 255, .30);
  --a-warn: #e8b86a;
  --a-measure: 760px;
}

/* ---------- header ---------- */
.a-header { position: sticky; top: 0; z-index: 50; height: var(--header-h); background: rgba(6,7,11,.92);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--line-soft); }
.a-header__inner { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding-inline: var(--gutter); }
@media (min-width: 1100px) { .a-header__inner { padding-inline: 64px; } }
.a-header .logo { flex-shrink: 0; }
.a-header .logo__en, .a-header .logo__ja { white-space: nowrap; }
.a-header__nav { display: flex; align-items: center; gap: 2px; }
.a-header__nav a { display: inline-flex; align-items: center; min-height: 44px; padding-inline: 8px; font-size: 12.5px; color: #d4d8e2; white-space: nowrap; }
.a-header__nav a:hover { color: #fff; }
.a-header__nav .a-header__cta { margin-left: 4px; padding-inline: 12px; min-height: 38px; border: 1px solid rgba(255,255,255,.35); border-radius: 999px; }
.a-hide-sp { display: none !important; }
@media (min-width: 768px) {
  .a-hide-sp { display: inline-flex !important; }
  .a-header__nav a { font-size: 14px; padding-inline: 14px; }
  .a-header__nav .a-header__cta { padding-inline: 16px; }
}

/* 確認用ページの帯（本番には出ない） */
.a-preview-note { margin-bottom: 20px; padding: 10px 16px; border-radius: 10px; background: rgba(232,184,106,.14);
  border: 1px solid rgba(232,184,106,.5); color: #f3d7a6; font-size: 13px; }

/* ---------- layout ---------- */
.a-main { padding-block: 40px 96px; }
@media (min-width: 900px) { .a-main { padding-block: 64px 140px; } }
.a-wrap { max-width: calc(var(--a-measure) + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter); }
.a-wrap--wide { max-width: calc(1100px + var(--gutter) * 2); }
.a-crumbs { display: flex; flex-wrap: wrap; gap: 8px; font-size: 12px; color: var(--muted); margin-bottom: 28px; }
.a-crumbs a { color: var(--muted); display: inline-flex; align-items: center; min-height: 32px; }
.a-crumbs a:hover { color: #fff; }
.a-crumbs span { display: inline-flex; align-items: center; }

.a-head { display: flex; flex-direction: column; gap: 16px; padding-bottom: 32px; margin-bottom: 36px; border-bottom: 1px solid var(--line); }
.a-head h1 { font-family: var(--serif); font-weight: 500; font-size: clamp(25px, 3.6vw, 38px); line-height: 1.55;
  letter-spacing: .04em; color: #fff; word-break: auto-phrase; text-wrap: pretty; }
.a-lead { font-size: 15px; line-height: 2; color: var(--body); }
.a-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; font-size: 12px; color: var(--muted); }
.a-meta time { font-family: var(--en); letter-spacing: .06em; }
.a-cat { display: inline-flex; align-items: center; min-height: 24px; padding-inline: 10px; border: 1px solid rgba(159,176,255,.45);
  border-radius: 999px; color: var(--accent); font-size: 11px; letter-spacing: .08em; }

/* ---------- toc ---------- */
.a-toc { margin-bottom: 48px; padding: 20px 24px; background: var(--card); border: 1px solid var(--line-soft); border-radius: 12px; }
.a-toc__title { font-size: 13px; color: var(--muted); letter-spacing: .1em; margin-bottom: 8px; }
.a-toc ol { list-style: decimal; padding-left: 1.4em; color: var(--muted); font-size: 14px; }
.a-toc li { padding-block: 3px; }
.a-toc a { color: var(--link); }

/* ---------- body ---------- */
.a-body { display: flex; flex-direction: column; gap: 18px; font-size: 15.5px; line-height: 1.95; color: var(--text); }
.a-body h2 { margin-top: 48px; padding-top: 28px; border-top: 1px solid var(--line); font-family: var(--serif); font-weight: 500;
  font-size: clamp(21px, 2.6vw, 27px); line-height: 1.6; letter-spacing: .04em; color: #fff; scroll-margin-top: calc(var(--header-h) + 16px);
  word-break: auto-phrase; text-wrap: pretty; }
.a-body h2:first-child { margin-top: 0; }
.a-body h3 { margin-top: 12px; font-size: 17px; font-weight: 700; color: #fff; }
.a-body strong { color: #fff; font-weight: 700; }
.a-body mark { background: linear-gradient(transparent 55%, var(--a-mark) 55%); color: #fff; padding-inline: 1px; }
.a-body a { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(201,210,255,.4); }
.a-text { color: var(--body); }

/* 吹き出し */
.bubble { position: relative; display: flex; flex-direction: column; gap: 6px; max-width: 92%; padding: 16px 20px; border-radius: 16px;
  border: 1px solid var(--line-soft); }
.bubble p { color: var(--text); }
.bubble__who { font-size: 11px; letter-spacing: .12em; color: var(--muted); }
.bubble--left { align-self: flex-start; background: var(--a-q); border-top-left-radius: 4px; }
.bubble--right { align-self: flex-end; background: var(--a-a); border-color: rgba(159,176,255,.22); border-top-right-radius: 4px; }
.bubble--right .bubble__who { color: var(--accent); }
@media (min-width: 768px) { .bubble { max-width: 84%; padding: 18px 24px; } }

/* 図・表 */
.a-figure { margin: 8px 0; }
.a-figure img { width: 100%; height: auto; border-radius: 12px; border: 1px solid var(--line-soft); background: var(--card); }
.a-figure figcaption { margin-top: 10px; font-size: 13px; color: var(--muted); line-height: 1.8; }
.a-table { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--line); border-radius: 12px; }
.a-table table { width: 100%; min-width: 520px; border-collapse: collapse; font-size: 14px; line-height: 1.7; }
.a-table th, .a-table td { padding: 12px 16px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line-soft);
  overflow-wrap: anywhere; }
.a-table th { background: var(--card-blue); color: #fff; font-weight: 500; white-space: nowrap; }
.a-table tr:last-child td { border-bottom: 0; }
.a-table td { color: var(--body); }

/* ボックス */
.box { padding: 20px 22px; border-radius: 12px; background: var(--card); border: 1px solid var(--line); display: flex; flex-direction: column; gap: 10px; }
.box p, .box li { color: var(--body); font-size: 15px; }
.box__title { font-weight: 700; color: #fff !important; letter-spacing: .04em; }
.box ul { list-style: disc; padding-left: 1.3em; }
.box ol { list-style: decimal; padding-left: 1.4em; }
.box li { padding-block: 2px; }
.box--point { border-left: 3px solid var(--accent); }
.box--point .box__title { color: var(--accent) !important; }
.box--warn { border-left: 3px solid var(--a-warn); }
.box--warn .box__title::before { content: "!"; display: inline-grid; place-items: center; width: 20px; height: 20px; margin-right: 8px;
  border-radius: 50%; background: var(--a-warn); color: #111; font-size: 12px; font-weight: 700; vertical-align: 2px; }
.box--steps ol { list-style: none; padding: 0; counter-reset: step; display: flex; flex-direction: column; gap: 12px; }
.box--steps li { counter-increment: step; position: relative; padding-left: 44px; min-height: 30px; }
.box--steps li::before { content: counter(step); position: absolute; left: 0; top: 0; width: 30px; height: 30px; display: grid; place-items: center;
  border-radius: 50%; background: var(--card-blue); border: 1px solid rgba(159,176,255,.45); color: var(--accent);
  font-family: var(--en); font-size: 13px; }

/* ---------- after body ---------- */
.a-faq, .a-sources, .a-more { margin-top: 64px; }
.a-faq h2, .a-sources h2, .a-more h2 { font-family: var(--serif); font-weight: 500; font-size: 21px; color: #fff; margin-bottom: 16px; }
.a-faq details { border-bottom: 1px solid var(--line); }
.a-faq summary { cursor: pointer; padding: 16px 0; font-weight: 500; color: #fff; list-style: none; position: relative; padding-right: 32px; }
.a-faq summary::-webkit-details-marker { display: none; }
.a-faq summary::after { content: "+"; position: absolute; right: 4px; top: 14px; font-family: var(--en); font-size: 20px; color: var(--accent); }
.a-faq details[open] summary::after { content: "−"; }
.a-faq details p { padding-bottom: 18px; color: var(--body); font-size: 15px; }
.a-sources ol { list-style: decimal; padding-left: 1.4em; font-size: 13px; color: var(--muted); }
.a-sources li { padding-block: 4px; overflow-wrap: anywhere; }
.a-note { margin-top: 32px; padding: 14px 18px; font-size: 12.5px; line-height: 1.9; color: var(--muted); border: 1px dashed var(--line); border-radius: 10px; }
.a-cta { margin-top: 48px; padding: 32px 28px; border-radius: 16px; display: flex; flex-direction: column; gap: 12px; align-items: flex-start;
  background: radial-gradient(120% 140% at 0% 0%, rgba(159,176,255,.16), transparent 60%), var(--card-blue); border: 1px solid rgba(159,176,255,.25); }
.a-cta__name { font-family: var(--serif); font-size: 22px; color: #fff; }
.a-cta p { color: var(--body); }
.a-cta .btn { margin-top: 8px; }

/* カード一覧 */
.a-cards { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 768px) { .a-wrap--wide .a-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .a-wrap--wide .a-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.a-card a { height: 100%; display: flex; flex-direction: column; gap: 12px; padding: 22px 24px; background: var(--card); border: 1px solid var(--line-soft);
  border-radius: 14px; color: var(--text); }
.a-card a:hover { border-color: rgba(159,176,255,.45); background: #111521; }
.a-card__title { font-family: var(--serif); font-size: 18px; line-height: 1.6; color: #fff; word-break: auto-phrase; text-wrap: pretty; }
.a-card__desc { font-size: 13.5px; line-height: 1.85; color: var(--muted); }
.a-empty { color: var(--muted); }