/* siriuspower-site — テーマシステム
 * 1つの HTML + トークン差し替えで4つの顔を持つ（agent-deck #88 の決定事項）。
 * 全コンポーネントは必ずトークン経由で色を取り、直書き色を残さないこと。
 * テーマ: terminal（既定・ダーク） / phosphor（CRT） / blueprint（図面） / ledger（帳簿・ライト）
 */

:root {
  /* terminal（既定） */
  --bg: #0d1117;
  --panel: #161b22;
  --border: #30363d;
  --fg: #e6edf3;
  --muted: #8b949e;
  --dim: #6e7681;
  --accent: #bc8cff;
  --accent-contrast: #0d1117;
  --good: #3fb950;
  --warn: #d29922;
  --link: #6cb6ff;
  --radius: 10px;
  --border-w: 1px;
  /* 余白は5段階だけ。中間値を作らない（site#23） */
  --s1: 8px;
  --s2: 16px;
  --s3: 24px;
  --s4: 40px;
  --s5: 64px;
  --s6: 96px;
  /* 面の分け方。線の意匠を持つテーマは枠線、そうでないテーマは背景差だけ */
  --surface-border: var(--border);
  /* ヒーローの帯。明るいテーマでは暗い帯を敷いて製品の顔を作る（site#23・B案） */
  --hero-bg: var(--panel);
  --hero-fg: var(--fg);
  --hero-muted: var(--muted);
  --hero-kicker: var(--accent);
  /* 反転タイルの面。帯より一段明るくして階層を作る */
  --invert-bg: var(--panel-2, var(--panel));
  --invert-fg: var(--fg);
  --invert-muted: var(--muted);
}

:root[data-theme="phosphor"] {
  --bg: #020604;
  --panel: #04120b;
  --border: #015c33;
  --fg: #00e07a;
  --muted: #00a35a;
  --dim: #015c33;
  --accent: #00e07a;
  --accent-contrast: #020604;
  --good: #00e07a;
  --warn: #ffb000;
  --link: #00e07a;
  --radius: 10px;
  --border-w: 1px;
}

:root[data-theme="blueprint"] {
  --bg: #0b2740;
  --panel: #0e2e4b;
  --border: #5d8db1;
  --fg: #b9d4e8;
  --muted: #5d8db1;
  --dim: #3d6a8d;
  --accent: #ffd166;
  --accent-contrast: #0b2740;
  --good: #ffd166;
  --warn: #ffd166;
  --link: #b9d4e8;
  --radius: 10px;
  --border-w: 2px;
}

:root[data-theme="ledger"] {
  --bg: #f6f3ec;
  --panel: #fffdf7;
  --border: #d8d2c4;
  --fg: #26221a;
  --muted: #8a8272;
  --dim: #b0a894;
  --accent: #b3402a;
  --accent-contrast: #f6f3ec;
  --good: #1a6b46;
  --warn: #b3402a;
  --link: #26221a;
  --radius: 10px;
  --border-w: 1.5px;
  --surface-border: transparent;
}


:root[data-theme="daylight"] {
  --bg: #e9ecf0;
  --panel: #ffffff;
  --border: #dcdfe4;
  --fg: #16181d;
  --muted: #5b626d;
  --dim: #9aa1ac;
  --accent: #1f4fd8;
  --accent-contrast: #ffffff;
  --good: #0d7a44;
  --warn: #b45309;
  --link: #1f4fd8;
  --radius: 10px;
  --border-w: 1px;
  --surface-border: transparent;   /* 面は背景差だけで分ける */
  --hero-bg: #16181d;              /* 暗い帯 */
  --hero-fg: #ffffff;
  --hero-muted: #c3c9d2;
  --hero-kicker: #7de2a0;
  --invert-bg: #2a2d31;            /* 帯(#16181d)より一段明るい */
  --invert-fg: #ffffff;
  --invert-muted: #b6bcc5;
  /* 暗い面の上で使う色。役割を固定し、装飾では使わない（site#23） */
  --on-dark-good: #6ee7a0;         /* 通った・動いている */
  --on-dark-wait: #f5c451;         /* 人の判断を待っている */
  --on-dark-warn: #ff9f5a;         /* 注意・要修正 */
  --on-dark-link: #7aa8ff;         /* 押せるもの */
}
/* Daylight は非エンジニア向け: 読みやすいサンセリフ・やわらかい影 */
[data-theme="daylight"] body {
  font-family: -apple-system, "Hiragino Sans", "Noto Sans JP", "Segoe UI", system-ui, sans-serif;
  letter-spacing: .01em;
}
[data-theme="daylight"] .svc article,
[data-theme="daylight"] .proof,
[data-theme="daylight"] .plate {
  box-shadow: 0 1px 3px rgba(31,41,51,.06), 0 8px 24px rgba(31,41,51,.05);
}
[data-theme="daylight"] .hero h1 { letter-spacing: 0; }
[data-theme="daylight"] section:first-of-type { padding-top: var(--s4); }
section > h2 {
  margin-bottom: var(--s3); letter-spacing: .04em; }

/* ---- 基本 ---- */
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  background: var(--bg);
  color: var(--fg);
  font: 14px/1.8 ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
  overflow-x: hidden;
}
a { color: var(--link); text-decoration: underline; text-underline-offset: 3px; }
a:hover { color: var(--accent); }

/* テーマ固有の紙面装飾 */
[data-theme="phosphor"] body { text-shadow: 0 0 6px color-mix(in srgb, var(--fg) 35%, transparent); }
[data-theme="phosphor"] .scanlines {
  position: fixed; inset: 0; pointer-events: none; z-index: 9;
  background: repeating-linear-gradient(0deg, rgba(0,0,0,.22) 0 1px, transparent 1px 3px);
}
[data-theme="blueprint"] body {
  background-image:
    linear-gradient(color-mix(in srgb, var(--fg) 6%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--fg) 6%, transparent) 1px, transparent 1px);
  background-size: 24px 24px;
}
[data-theme="ledger"] body {
  background-image: linear-gradient(var(--border) 1px, transparent 1px);
  background-size: 100% calc(1.8em);
}
:root:not([data-theme="phosphor"]) .scanlines { display: none; }

/* ---- レイアウト ---- */
/* 枠は画面に合わせて広く。ただし文章は下の .lede / p 側で行長を抑える */
.wrap { max-width: 1200px; margin: 0 auto; padding: 0 var(--s3); }
@media (min-width: 1600px) { .wrap { max-width: 1360px; } }
header.top {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 18px 0; border-bottom: var(--border-w) solid var(--border);
  /* 固定ヘッダ（site#55）。wrap 内にあるため hero と同じ全幅帯化で背面の透けを防ぐ */
  position: sticky; top: 0; z-index: 50;
  background: var(--bg);
  margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw);
  padding-left: calc(50vw - 50% + var(--s3)); padding-right: calc(50vw - 50% + var(--s3));
}

/* 固定ヘッダにアンカー着地が隠れない余白（2段折返し時も考慮） */
[id] { scroll-margin-top: 96px; }
.logo { color: var(--fg); font-size: 16px; font-weight: 700; letter-spacing: .12em; text-decoration: none; }
.logo span { color: var(--accent); }
header.top nav { margin-left: auto; display: flex; gap: 14px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
header.top nav a { color: var(--muted); text-decoration: none; }
header.top nav a:hover { color: var(--fg); }

/* ヒーローは全幅の帯にする。B案（site#23） */
.hero {
  background: var(--hero-bg); color: var(--hero-fg);
  padding: var(--s5) 0 var(--s4);
  margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw);
  padding-left: calc(50vw - 50% + var(--s3)); padding-right: calc(50vw - 50% + var(--s3));
}
.hero .lede, .hero p { color: var(--hero-muted); }
.hero .eyebrow { color: var(--hero-kicker); }
/* 実数値を帯に並べる。数字で語れるのがうちの強み */
.hero-meta { display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s3); font-size: 11px; color: var(--hero-muted); letter-spacing: .1em; }
.hero-meta i { font-style: normal; color: var(--hero-fg); font-weight: 700; }
.hero-meta .v-good i { color: var(--on-dark-good); }
.hero-meta .v-wait i { color: var(--on-dark-wait); }
/* 帯の上のボタンは帯の色で描く。暗い帯に暗い文字を置かない */
.hero .btn { color: var(--hero-fg); border-color: color-mix(in srgb, var(--hero-fg) 40%, transparent); }
.hero .btn:hover { border-color: var(--hero-fg); color: var(--hero-fg); }
.hero .btn.solid { background: var(--accent); border-color: var(--accent); color: var(--accent-contrast); }
.hero strong { color: var(--hero-fg); }
/* 帯の上ではラベルも明るい側の色にする（暗い面で沈ませない） */
.hero .tag-proving { color: var(--on-dark-good); }
.hero .tag-dev { color: var(--on-dark-wait); }
.hero .tag-idea { color: var(--invert-muted); }
/* 文字の階層は3段階だけ: ページ見出し / 節見出し / 小見出し（site#23） */
.hero h1 { font-size: clamp(28px, 5vw, 44px); line-height: 1.3; font-weight: 700; }
h3, .prod h3, .feat b { font-size: 17px; line-height: 1.5; font-weight: 700; }
.hero h1 em { font-style: normal; color: var(--hero-kicker); }
.hero .lede { color: var(--muted); margin-top: var(--s2); max-width: 38em; }
.hero .cta { margin-top: 24px; }

section { padding: var(--s6) 0 0; }
section:first-of-type { padding-top: var(--s4); }
section > h2 {
  font-size: clamp(18px, 2.4vw, 22px); letter-spacing: .04em; color: var(--fg);
  font-weight: 700; line-height: 1.4; margin-bottom: 22px;
  padding-left: 14px; border-left: 3px solid var(--accent);
}

.svc { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s3); }
/* 3つの価値はページで一番言いたいこと。番号と見出しを大きく取る */
.svc article {
  background: var(--panel); padding: var(--s4);
  border: 4px solid var(--border); border-radius: calc(var(--radius) * 3);
}
/* 3つの価値は「つなぐ / 自動で動く / 人が止める」。
   サイト共通の役割色をそのまま当てる — 目立たせるためではなく、意味が違うから色が違う。 */
.svc article:nth-child(1) { border-color: var(--accent); }
.svc article:nth-child(1) .no { color: var(--accent); }
.svc article:nth-child(2) { border-color: var(--good); }
.svc article:nth-child(2) .no { color: var(--good); }
.svc article:nth-child(3) { border-color: var(--warn); }
.svc article:nth-child(3) .no { color: var(--warn); }
.svc .no { color: var(--accent); font-size: 28px; font-weight: 700; letter-spacing: .04em; display: block; margin-bottom: var(--s2); line-height: 1; }
.svc b { display: block; font-size: 22px; line-height: 1.45; margin-bottom: var(--s2); }
.svc p { color: var(--muted); font-size: 13.5px; }

.proof {
  background: var(--panel); border: var(--border-w) solid var(--surface-border);
  border-radius: var(--radius); padding: var(--s3);
}
.proof .statement { font-weight: 700; max-width: 42em; }
.proof .statement em { font-style: normal; background: color-mix(in srgb, var(--good) 18%, var(--panel)); color: var(--good); font-weight: 700; padding: 1px 8px; border-radius: var(--radius); }
.log { font-size: 12px; line-height: 1.9; color: var(--muted); margin-top: 12px; overflow-x: auto; }
.log .t { color: var(--dim); margin-right: 8px; }
.log .ok { color: var(--good); font-weight: 700; }

/* ---- 実績・事例（読み物） ---- */
/* 全部の要素が同じ幅で左端に揃うと単調になる（社長指摘 site#67）。
 * 見出しは左端・本文は一段内側、要素ごとに行長を変えてリズムを作る。 */
.cases .case + .case, .cases #reading { padding-top: calc(var(--s6) + var(--s3)); }
.cases .case-body {
  border-left: var(--border-w) solid var(--border);
  margin-top: var(--s3); padding-left: var(--s3);
}
.cases .case-body > p { max-width: 36em; }
.cases .case-body > p + p, .cases .case-body > .proof + p { margin-top: var(--s2); }
.cases .case-body > .note { font-size: 11.5px; max-width: 32em; }
.cases #reading p { max-width: 36em; }
/* 実録は「確かめられる証拠」。本文より広く、別トーンの面に置いて読み分けられるようにする */
.cases .proof { border-left: 3px solid var(--accent); margin: var(--s3) 0; max-width: 46em; }
.cases .proof .statement { max-width: 32em; }
.cases .log > div { align-items: baseline; display: grid; gap: 0 var(--s2); grid-template-columns: 4.5em 1fr; }
.cases .log .t { margin-right: 0; text-align: right; }
.cases .proof .note { font-size: 11.5px; margin-top: var(--s2); }

.honest { border: var(--border-w) solid var(--warn); border-radius: var(--radius); padding: var(--s3); }
.honest h3 { color: var(--warn); font-size: 13px; letter-spacing: .1em; margin-bottom: 12px; }
.honest ul { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 8px 28px; }
.honest li { color: var(--muted); font-size: 12.5px; padding-left: 18px; position: relative; }
.honest li::before { content: "—"; position: absolute; left: 0; color: var(--warn); }
.honest .why { margin-top: 14px; font-size: 12px; color: var(--dim); }

/* よくある質問は開閉式。箱を並べず、質問だけが一覧の行として見える形にする */
.faq { border-top: var(--border-w) solid var(--border); }
.faq details { border-bottom: var(--border-w) solid var(--border); }
.faq summary {
  align-items: center; cursor: pointer; display: flex; font-size: 17px; font-weight: 700;
  gap: var(--s2); justify-content: space-between; list-style: none; padding: var(--s2) 0;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--accent); }
.faq summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.faq .faq-mark { color: var(--muted); flex: none; transition: transform .15s ease; }
.faq details[open] .faq-mark { transform: rotate(180deg); }
.faq details > p { color: var(--muted); max-width: 42em; padding: 0 0 var(--s3); }

.cta { display: flex; gap: 14px; flex-wrap: wrap; }
.btn {
  display: inline-block; padding: 10px 22px; border: var(--border-w) solid var(--border);
  border-radius: var(--radius); color: var(--fg); text-decoration: none; letter-spacing: .06em;
}
.btn:hover { border-color: var(--muted); color: var(--fg); }
.btn.solid { background: var(--accent); border-color: var(--accent); color: var(--accent-contrast); font-weight: 700; }
.btn.solid:hover { filter: brightness(1.08); color: var(--accent-contrast); }
.btn:disabled { cursor: wait; opacity: .65; }

/* ---- 料金表 ---- */
.pricing-intro { color: var(--muted); margin-bottom: var(--s3); max-width: 42em; }
.pricing-table-wrap { overflow-x: auto; border-radius: var(--radius); }
.pricing-table {
  width: 100%; min-width: 760px; border-collapse: separate; border-spacing: 0;
  background: var(--panel); border: var(--border-w) solid var(--surface-border);
  border-radius: var(--radius); overflow: hidden;
}
.pricing-table th, .pricing-table td {
  padding: var(--s2); text-align: left; vertical-align: middle;
  border-bottom: var(--border-w) solid var(--border);
}
.pricing-table thead th {
  color: var(--dim); font-size: 11px; font-weight: 400; letter-spacing: .12em;
}
.pricing-table tbody th { font-size: 17px; }
.pricing-table tbody td:nth-child(3) { color: var(--muted); font-size: 12.5px; }
.pricing-table tbody tr:last-child > * { border-bottom: 0; }
.pricing-table .plan-price { white-space: nowrap; }
.plan-price strong { display: block; color: var(--fg); font-size: 20px; line-height: 1.3; }
.plan-price span { color: var(--dim); font-size: 11px; }
.pricing-table .btn { white-space: nowrap; padding: 7px 14px; font-size: 12px; }
.pricing-table .plan-featured > * {
  background: color-mix(in srgb, var(--accent) 12%, var(--panel));
  border-top: 2px solid var(--accent); border-bottom: 2px solid var(--accent);
}
.pricing-table .plan-featured > *:first-child { border-left: 2px solid var(--accent); }
.pricing-table .plan-featured > *:last-child { border-right: 2px solid var(--accent); }
.plan-badge {
  display: inline-block; margin-left: var(--s1); padding: 1px 7px;
  border-radius: var(--radius); background: var(--accent); color: var(--accent-contrast);
  font-size: 10px; letter-spacing: .08em; vertical-align: 2px; white-space: nowrap;
}
.pricing-addons { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s3); }
.pricing-addons article {
  background: var(--panel); border: var(--border-w) solid var(--surface-border);
  border-radius: var(--radius); padding: var(--s3);
}
.pricing-addons b { display: block; font-size: 17px; margin-bottom: var(--s1); }
.pricing-addons p { color: var(--muted); }
.pricing-addons p strong { color: var(--fg); }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ---- お問い合わせ ---- */
.contact-fallback {
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--s1);
  margin-top: var(--s2); color: var(--muted);
}
.contact-fallback code { color: var(--fg); user-select: all; }
.copy-button { display:inline-flex; align-items:center; justify-content:center; padding:6px 8px; line-height:0; vertical-align:middle; appearance: none; background: var(--panel); border: var(--border-w) solid var(--border);
  border-radius: var(--radius); color: var(--link); cursor: pointer; font: inherit;
  padding: 3px 10px; text-decoration: underline; text-underline-offset: 3px; }
.copy-button:hover { border-color: var(--muted); color: var(--accent); }
.copy-button:focus-visible, .contact-form :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.copy-result { color: var(--good); font-size: 12px; }
.contact-main { max-width: 720px; padding-bottom: var(--s6); }
.contact-intro { color: var(--muted); margin-bottom: var(--s3); }
.contact-form { display: grid; gap: var(--s3); }
.form-field { display: grid; gap: var(--s1); }
.form-field label { font-weight: 700; }
.form-field input, .form-field textarea {
  width: 100%; background: var(--panel); border: var(--border-w) solid var(--border);
  border-radius: var(--radius); color: var(--fg); font: inherit; padding: 10px 12px;
}
.form-field textarea { min-height: 12em; resize: vertical; }
.form-field small { color: var(--dim); }
.honeypot { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.form-actions { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s2); }
.form-actions .btn { cursor: pointer; font: inherit; }
.form-result { color: var(--muted); }
.form-result.is-success { color: var(--good); }
.form-result.is-error { color: var(--warn); }

.plate {
  position: relative; background: var(--panel);
  border: var(--border-w) solid var(--surface-border); border-radius: var(--radius);
  padding: 30px 32px 26px;
}
.plate::before, .plate::after {
  content: ""; position: absolute; width: 18px; height: 18px;
  border: 2px solid var(--accent);
}
.plate::before { top: 10px; left: 10px; border-right: 0; border-bottom: 0; }
.plate::after { bottom: 10px; right: 10px; border-left: 0; border-top: 0; }
.plate-name { font-size: 24px; font-weight: 700; letter-spacing: .06em; }
.plate-name span { color: var(--accent); }
.plate-tag { color: var(--dim); font-size: 11px; letter-spacing: .3em; margin: 2px 0 22px; }
.plate-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 30px; }
.plate-cell b { display: block; font-size: 10px; letter-spacing: .28em; color: var(--dim); margin-bottom: 3px; font-weight: 400; }
.plate-cell span { font-size: 14px; }
.plate-cell a { color: var(--link); }
.plate-foot {
  margin-top: 22px; padding-top: 14px; border-top: var(--border-w) dashed var(--border);
  color: var(--muted); font-size: 12.5px;
}

/* フッターはヘッダの相似形で低く一列に（社長: 高さはいらない） */
footer.bottom {
  padding: 18px 0 26px; border-top: var(--border-w) solid var(--border);
  color: var(--dim); font-size: 11px; display: flex; gap: 20px; flex-wrap: wrap; align-items: center;
}
.footer-logo { font-size: 13px; font-weight: 700; letter-spacing: .12em; color: var(--fg); text-decoration: none; }
.footer-logo span { color: var(--accent); }
.footer-nav { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12px; }
.footer-nav a { color: var(--muted); text-decoration: none; }
.footer-nav a:hover { color: var(--fg); }
.footer-meta { margin-left: auto; display: flex; gap: 16px; flex-wrap: wrap; align-items: center; }
@media (max-width: 720px) {
  .footer-meta { margin-left: 0; width: 100%; }
  .footer-credit { display: none; }  /* 狭幅では©だけ残して低く保つ */
}

/* ---- ブログ ---- */
.blog-main { padding: 48px 0; }
.blog-heading { margin-bottom: 28px; }
.blog-heading h1, .blog-article h1 { font-size: clamp(26px, 4vw, 38px); line-height: 1.35; }
.blog-heading p, .blog-summary { color: var(--muted); margin-top: 10px; }
.blog-filters { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 24px; }
.blog-filters button {
  background: var(--panel); border: var(--border-w) solid var(--surface-border); border-radius: var(--radius);
  color: var(--muted); cursor: pointer; font: inherit; padding: 5px 11px;
}
.blog-filters button[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--accent-contrast); }
.blog-filters button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.blog-list { display: grid; gap: 14px; }
.blog-card { background: var(--panel); border: var(--border-w) solid var(--surface-border); border-radius: var(--radius); padding: var(--s3); }
.blog-card[hidden] { display: none; }
.blog-card h2 { font-size: 18px; margin: 6px 0; }
.blog-card > p { color: var(--muted); }
.blog-card time, .blog-article time { color: var(--dim); font-size: 12px; }
.blog-series { color: var(--accent); font-size: 12px; font-weight: 700; letter-spacing: .08em; }
.blog-article { max-width: 720px; }
.blog-article > time { display: block; margin-top: 8px; }
.blog-summary { border-left: 3px solid var(--accent); padding-left: 14px; }
.blog-body { margin-top: 36px; }
.blog-body h2, .blog-body h3, .blog-body h4 { line-height: 1.5; margin: 34px 0 12px; }
.blog-body p, .blog-body ul, .blog-body ol, .blog-body blockquote, .blog-body pre { margin: 16px 0; }
.blog-body ul, .blog-body ol { padding-left: 2em; }
.blog-body blockquote { border-left: 3px solid var(--border); color: var(--muted); padding-left: 14px; }
.blog-body code { background: var(--panel); border-radius: var(--radius); padding: 2px 5px; }
.blog-body pre { background: var(--panel); border: var(--border-w) solid var(--border); overflow-x: auto; padding: 16px; }
.blog-body pre code { padding: 0; }
.blog-like {
  border-top: var(--border-w) solid var(--border); display: flex; align-items: center;
  gap: 12px; margin-top: 34px; padding-top: 20px;
}
.blog-like[hidden], .blog-like button[hidden] { display: none; }
.blog-like button {
  background: var(--accent); border: var(--border-w) solid var(--accent); border-radius: var(--radius);
  color: var(--accent-contrast); cursor: pointer; font: inherit; padding: 7px 13px;
}
.blog-like button:disabled { cursor: wait; opacity: .65; }
.blog-like button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.blog-like p { color: var(--muted); font-size: 12px; }
.blog-back { border-top: var(--border-w) solid var(--border); margin-top: 42px; padding-top: 20px; }

/* ---- 製品ページ ---- */
.eyebrow {
  display: block; color: var(--accent); font-size: 11px;
  letter-spacing: .28em; text-transform: uppercase; margin-bottom: 14px;
}

/* 状態ラベル — 稼働中 / 開発中 / 構想 を必ず区別する（サイト原則: 検証可能性） */
.tag {
  display: inline-block; font-size: 10px; letter-spacing: .18em;
  border: var(--border-w) solid currentColor; border-radius: var(--radius);
  padding: 1px 8px; vertical-align: 2px; white-space: nowrap;
}
.tag-proving { color: var(--good); }
.tag-live { color: var(--good); }
.tag-dev { color: var(--warn); }
.tag-idea { color: var(--dim); }

.prods { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); }
.prod {
  display: flex; flex-direction: column; gap: 10px;
  background: var(--panel); border: var(--border-w) solid var(--surface-border);
  border-radius: var(--radius); padding: var(--s3);
}
.prod.lead { grid-column: 1 / -1; border-color: var(--accent); }
.prod .role { color: var(--dim); font-size: 11px; letter-spacing: .18em; }
.prod h3 { font-size: 16px; }
.prod h3 a { color: var(--fg); text-decoration: none; }
.prod h3 a:hover { color: var(--accent); }
.prod p { color: var(--muted); font-size: 12.5px; }
.prod .more { margin-top: auto; font-size: 12px; }

.feat { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s3); }
.feat article {
  background: var(--panel); border: 2px solid var(--border);
  border-radius: calc(var(--radius) * 3); padding: var(--s3);
}
.feat b { display: block; margin-bottom: 6px; }
.feat p { color: var(--muted); font-size: 12.5px; }

.eco { display: grid; gap: var(--s3); }
.eco .row {
  display: grid; grid-template-columns: 15em 1fr; gap: 4px 18px;
  border-left: 3px solid var(--border); padding: 2px 0 2px 14px;
}
.eco .row p { color: var(--muted); font-size: 12.5px; }

.note { color: var(--dim); font-size: 12px; margin-top: var(--s2); max-width: 42em; }
/* 節の中の小見出し。構成を意図的に見せる */
.subhead { font-size: 13px; letter-spacing: .16em; color: var(--muted); font-weight: 400; margin: var(--s5) 0 var(--s3); }

/* ---- 図（インラインSVG・トークンのみで塗る） ---- */
.diagram { margin: 0; }
.diagram svg { width: 100%; height: auto; display: block; }
.diagram figcaption { color: var(--muted); font-size: 12.5px; margin-top: 12px; }
.d-node rect { fill: var(--panel); stroke: var(--border); stroke-width: var(--border-w); }
.d-node text { fill: var(--fg); font-size: 15px; font-weight: 700; text-anchor: middle; }
.d-node .d-sub { fill: var(--dim); font-size: 11px; font-weight: 400; letter-spacing: .1em; }
.d-ai rect { stroke: var(--accent); }
.d-human rect { stroke: var(--warn); stroke-width: 2px; }
.d-human text { fill: var(--warn); }
.diagram line { stroke: var(--muted); stroke-width: 1.5px; }
.d-back { stroke: var(--warn); stroke-width: 1.5px; stroke-dasharray: 5 4; }
.d-back-label { fill: var(--warn); font-size: 11.5px; text-anchor: middle; }
.d-note { fill: var(--dim); font-size: 11px; text-anchor: middle; }
.d-note-human { fill: var(--warn); }

/* ---- できること: 交互レイアウト（カードと図） ---- */
.feat-rows { display: grid; gap: 26px; }
.feat-row { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; align-items: center; }
.feat-row > .feat-copy { order: 1; }
.feat-row > .feat-art { order: 2; }
.feat-row:nth-child(even) > .feat-copy { order: 2; }
.feat-row:nth-child(even) > .feat-art { order: 1; }
.feat-copy {
  background: var(--panel); border: var(--border-w) solid var(--surface-border);
  border-radius: var(--radius); padding: var(--s3);
}
.feat-copy b { display: block; font-size: 15px; margin-bottom: 8px; }
.feat-copy p { color: var(--muted); font-size: 12.5px; }
.feat-art { padding: 8px 4px; }
.feat-art svg { width: 100%; height: auto; display: block; }
.a-box { fill: var(--panel); stroke: var(--border); stroke-width: var(--border-w); }
.a-line { stroke: var(--muted); stroke-width: 1.5px; fill: none; }
.a-accent { stroke: var(--accent); fill: none; stroke-width: 2px; }
.a-fill-accent { fill: var(--accent); }
.a-on-accent { fill: var(--accent-contrast); font-size: 12px; font-weight: 700; }
.a-warn { stroke: var(--warn); fill: none; stroke-width: 2px; }
.a-fill-warn { fill: var(--warn); }
.a-t { fill: var(--fg); font-size: 12px; font-weight: 700; }
.a-s { fill: var(--dim); font-size: 10.5px; }
.a-good { fill: var(--good); font-size: 12px; font-weight: 700; }
.tile-lead .a-good { fill: var(--on-dark-good); }
.tile-lead .a-t { fill: var(--invert-fg); }
.tile-lead .a-s { fill: var(--invert-muted); }
.tile-lead .a-box { fill: color-mix(in srgb, #ffffff 8%, transparent); stroke: color-mix(in srgb, #ffffff 22%, transparent); }
.tile-lead .a-line { stroke: var(--invert-muted); }
@media (max-width: 1024px) { .feat { grid-template-columns: 1fr 1fr; } }
@media (max-width: 760px) {
  .feat-row, .feat-row:nth-child(even) { grid-template-columns: 1fr; }
  .feat-row > .feat-copy, .feat-row:nth-child(even) > .feat-copy { order: 1; }
  .feat-row > .feat-art, .feat-row:nth-child(even) > .feat-art { order: 2; }
}

/* 図は「画面」だと分かる枠に入れる。説明カードと見た目を分けるため */
.screen {
  border: var(--border-w) solid var(--surface-border); border-radius: var(--radius);
  overflow: hidden; background: var(--bg);
}
.screen-bar {
  display: flex; align-items: center; gap: 6px;
  padding: 7px 10px; border-bottom: var(--border-w) solid var(--border);
  background: color-mix(in srgb, var(--fg) 4%, var(--panel));
}
.screen-bar i { width: 8px; height: 8px; border-radius: 50%; background: var(--dim); display: block; }
.screen-bar em { font-style: normal; color: var(--dim); font-size: 10.5px; letter-spacing: .06em; margin-left: 6px; }
.screen-body { padding: 12px; }
.screen-body svg { width: 100%; height: auto; display: block; }
.feat-art { padding: 0; }

/* ---- Sirius AI Chat: 最新実画面を主役にした製品紹介 ---- */
.product-ai-chat .hero { padding-bottom: var(--s5); }
.section-kicker { display: block; color: var(--accent); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; margin-bottom: 8px; }
.chat-section-lede { color: var(--muted); max-width: 54em; margin: -10px 0 var(--s4); line-height: 1.8; }
.chat-product-shot { position: relative; margin: 0; overflow: hidden; border: var(--border-w) solid var(--surface-border); border-radius: calc(var(--radius) * 2); background: #0b0f16; box-shadow: 0 22px 54px color-mix(in srgb, #000 24%, transparent); }
.chat-product-shot img { display: block; width: 100%; height: auto; }
.chat-product-shot-main { isolation: isolate; border-color: color-mix(in srgb, var(--accent) 48%, var(--surface-border)); }
.chat-product-shot-main::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; box-shadow: inset 0 0 0 1px color-mix(in srgb, #fff 12%, transparent); }
.chat-product-shot-main figcaption { position: relative; z-index: 2; display: flex; gap: 12px; align-items: center; color: var(--muted); background: var(--panel); padding: 15px 18px; font-size: 12.5px; }
.chat-product-shot-main figcaption span { color: var(--good); font-weight: 700; letter-spacing: .16em; }
.chat-shot-glow { position: absolute; z-index: -1; width: 52%; height: 44%; right: -10%; top: -18%; border-radius: 50%; background: var(--accent); filter: blur(90px); opacity: .16; }
.chat-feature-gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(22px, 3vw, 38px); }
.chat-gallery-item { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.chat-gallery-wide { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(240px, .62fr) minmax(0, 1.38fr); align-items: center; gap: clamp(24px, 4vw, 58px); }
.chat-gallery-wide:nth-child(even) { grid-template-columns: minmax(0, 1.38fr) minmax(240px, .62fr); }
.chat-gallery-wide:nth-child(even) .chat-gallery-copy { order: 2; }
.chat-gallery-copy { padding-left: 18px; border-left: 2px solid var(--accent); }
.chat-gallery-copy > span { display: block; color: var(--good); font-size: 11px; font-weight: 700; letter-spacing: .16em; margin-bottom: 7px; }
.chat-gallery-copy h3 { font-size: clamp(18px, 2vw, 25px); line-height: 1.35; margin-bottom: 9px; }
.chat-gallery-copy p { color: var(--muted); font-size: 12.5px; line-height: 1.8; }
.chat-gallery-item:not(.chat-gallery-wide) .chat-product-shot { aspect-ratio: 16 / 10; }
.chat-gallery-item:not(.chat-gallery-wide) .chat-product-shot img { width: 142%; max-width: none; transform: translateX(-22%); }
.chat-gallery-item:nth-child(3) .chat-product-shot img { transform: translateX(-32%); }
.chat-gallery-feature-list .chat-product-shot { max-height: 620px; }
.chat-gallery-guest .chat-product-shot { width: 100%; max-width: 430px; justify-self: center; }
.chat-capabilities { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: var(--border-w) solid var(--border); }
.chat-capabilities > div { display: grid; grid-template-columns: minmax(9em, .7fr) 1.3fr; gap: 14px; padding: 18px 16px; border-bottom: var(--border-w) solid var(--border); }
.chat-capabilities > div:nth-child(odd) { border-right: var(--border-w) solid var(--border); }
.chat-capabilities b { font-size: 13px; color: var(--fg); }
.chat-capabilities p { color: var(--muted); font-size: 12.5px; }
@media (max-width: 760px) {
  .product-ai-chat .hero { margin-left: 0; margin-right: 0; padding-left: var(--s3); padding-right: var(--s3); }
  .chat-feature-gallery, .chat-gallery-wide, .chat-gallery-wide:nth-child(even), .chat-capabilities { grid-template-columns: 1fr; }
  .chat-gallery-wide { display: flex; }
  .chat-gallery-wide:nth-child(even) .chat-gallery-copy { order: initial; }
  .chat-gallery-item:not(.chat-gallery-wide) .chat-product-shot { aspect-ratio: auto; }
  .chat-gallery-item:not(.chat-gallery-wide) .chat-product-shot img, .chat-gallery-item:nth-child(3) .chat-product-shot img { width: 100%; transform: none; }
  .chat-capabilities > div { grid-template-columns: 1fr; gap: 5px; padding-left: 0; padding-right: 0; }
  .chat-capabilities > div:nth-child(odd) { border-right: 0; }
}

/* ---- タイル: 枠線を使わず、背景差と余白で境界を作る ---- */
.tiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s4); }
.tile {
  background: var(--panel); border-radius: calc(var(--radius) * 2);
  padding: 0; display: flex; flex-direction: column;
  min-height: 300px; overflow: hidden;
}
/* 図を先に見せ、説明を後に読ませる（Direction 2026-08-09） */
.tile .tile-art { order: -1; padding: var(--s4) var(--s4) var(--s3); flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center; }
/* 図は白のまま、説明の段だけ薄く色を敷いて役割の違いを見せる */
.tile .tile-copy {
  margin-top: auto; padding: var(--s3) var(--s4) var(--s4);
  background: color-mix(in srgb, var(--accent) 12%, var(--panel));
  min-height: 122px;   /* 行数が違っても色の帯の高さを揃える */
}
.tile b { display: block; font-size: clamp(17px, 1.9vw, 20px); line-height: 1.45; margin-bottom: var(--s1); }
.tile p { color: var(--muted); font-size: 13px; max-width: 30em; }
.tile .tile-art svg { width: 100%; height: auto; display: block; }
/* 反転タイル。**意味があるときだけ**使う（例: 特に推す1枚）。
   並び順や見た目の変化を付けるために使わない — 理由のない色は読み手を混乱させる。
   2026-08-09、理由なく1枚目に当てて Direction から指摘を受けた。 */
.tile.tile-lead { background: var(--invert-bg); }
.tile.tile-lead b { color: var(--invert-fg); }
.tile.tile-lead p { color: var(--invert-muted); }
@media (max-width: 1024px) { .feat { grid-template-columns: 1fr 1fr; } }
@media (max-width: 760px) {
  .tiles { grid-template-columns: 1fr; }
  .tile { min-height: 0; padding: 24px 22px 0; }
}

/* スクロールで現れる。html.js-reveal が付いたときだけ隠すので、
   JS が動かない環境では最初から見えている（読めなくならない）。 */
.js-reveal .reveal { opacity: 0; transform: translateY(26px); }
.js-reveal .reveal.is-in {
  opacity: 1; transform: none;
  transition: opacity 1.1s ease-out, transform 1.1s cubic-bezier(.16,.7,.24,1);
}
.js-reveal .tile.reveal { transition-delay: .1s; }
.js-reveal .tile.reveal:nth-child(2) { transition-delay: .25s; }
.js-reveal .tile.reveal:nth-child(3) { transition-delay: .4s; }
/* 保険が働いたときは演出を捨てて即座に見せる。読めることが最優先。 */
.js-reveal.reveal-done .reveal { opacity: 1; transform: none; transition: none; }

/* ---- テーマピッカー ---- */
.theme-picker { display: flex; gap: 6px; align-items: center; }
.theme-picker span { color: var(--dim); font-size: 11px; }
.theme-picker button {
  width: 22px; height: 22px; border-radius: 50%; cursor: pointer;
  border: 2px solid var(--border); padding: 0;
}
.theme-picker button[aria-pressed="true"] { border-color: var(--accent); }
.theme-picker button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.tp-terminal { background: #0d1117; }
.tp-phosphor { background: #020604; box-shadow: inset 0 0 0 3px #00e07a33; }
.tp-blueprint { background: #0b2740; box-shadow: inset 0 0 0 3px #ffd16633; }
.tp-ledger { background: #f6f3ec; }
.tp-daylight { background: #f7f9fc; box-shadow: inset 0 0 0 3px #2563eb33; }

@media (max-width: 1024px) { .feat { grid-template-columns: 1fr 1fr; } }
@media (max-width: 760px) {
  .svc { grid-template-columns: 1fr; }
  .honest ul { grid-template-columns: 1fr; }
  .prods, .feat { grid-template-columns: 1fr; }
  .pricing-addons { grid-template-columns: 1fr; }
  .eco .row { grid-template-columns: 1fr; }
  .plate { padding: 24px 20px 20px; }
  .plate-grid { grid-template-columns: 1fr; }
  .hero { padding: 44px 0 36px; }
}
@media (prefers-reduced-motion: no-preference) {
  .caret { display: inline-block; width: 8px; height: 16px; background: var(--fg);
    vertical-align: -2px; animation: blink 1.1s steps(1) infinite; }
  @keyframes blink { 50% { opacity: 0; } }
}

/* 5つの安全 — 買う前に読む人がいちばん気にするところ。
   カードを並べず縦に流す。番号で数を見せ、本文は読める大きさにする（社長 2026-08-22）。 */
.safety { display: grid; gap: var(--s3); }
.safety article {
  display: grid; grid-template-columns: 2.4em 1fr; gap: 4px 14px;
  border-left: 3px solid var(--good); padding: 2px 0 2px 16px;
}
.safety .no { color: var(--good); font-weight: 700; font-variant-numeric: tabular-nums; }
.safety b { font-size: 15px; }
.safety p { grid-column: 2; color: var(--muted); max-width: 46em; }
@media (max-width: 640px) {
  .safety article { grid-template-columns: 1fr; }
  .safety p { grid-column: 1; }
}

/* 現場日誌のいいね（一覧・記事上部） */
.blog-card > .blog-card-likes {
  align-items: center; color: var(--dim); display: flex; font-size: .75rem;
  gap: 4px; margin-top: 10px;
}
.blog-card-likes[hidden] { display: none; }
.blog-meta { align-items: center; display: flex; flex-wrap: wrap; gap: 8px 12px; margin-top: 8px; }
.blog-like--top { border-top: 0; margin-top: 0; padding-top: 0; }
.blog-like p { color: var(--muted); font-size: .75rem; }