/* ============================================================
   review.rakuraku-webtools.com 公開ページ共通CSS
   T1で確定したデザイン（v5）を元にした本番用ファイルです。

   ファイル冒頭の :root { ... } は「CSS変数」です。
   色やフォントを一箇所にまとめておくことで、
   後で色を変えたくなったときここだけ直せば
   ページ全体に反映されます。
   ============================================================ */

:root {
  /* 基本色 */
  --color-bg: #F7F7F4;           /* ページ背景（白系） */
  --color-card: #FFFFFF;         /* カードの背景 */
  --color-card-border: #E4E3DD;  /* カードや罫線の色 */
  --color-text: #1C1E22;         /* 本文の文字色 */
  --color-text-dim: #6E7079;     /* 薄めの文字色（補足説明など） */

  /* サイトのアクセントカラー（ロゴ・ボタンなど） */
  --color-accent: #B5651D;
  --color-accent-bright: #955217;

  /* 有線グループの色 */
  --color-wired: #3B5BA5;
  --color-wired-bg: rgba(59, 91, 165, 0.07);

  /* 無線（Bluetooth）グループの色 */
  --color-wireless: #2C8C7A;
  --color-wireless-bg: rgba(44, 140, 122, 0.07);

  /* フォント（v1.1でJetBrains Monoを廃止。2ファミリーに削減） */
  --font-display: 'Space Grotesk', sans-serif;   /* 見出し用 */
  --font-body: 'Zen Kaku Gothic New', sans-serif; /* 本文用 */
  --font-mono: monospace;                         /* スペック表用（システムフォントで代用） */

  --radius: 10px; /* カードなどの角丸の大きさ */
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  line-height: 1.7;
}

.container {
  max-width: 880px;
  margin: 0 auto;
  padding: 0 20px;
}

/* ── ヘッダー ───────────────────── */
header.site-header {
  border-bottom: 1px solid var(--color-card-border);
  padding: 18px 0;
  background: var(--color-card);
}
header.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.site-logo {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: 0.02em;
}
.site-logo span { color: var(--color-accent); }

/* 「本記事にはプロモーションを含みます」の表示（景品表示法対応・必須。h1の直下に配置） */
.promo-notice {
  display: inline-block;
  background: #EFEEE8;
  border-radius: 6px;
  font-size: 0.78rem;
  color: var(--color-text-dim);
  padding: 5px 12px;
  margin: 10px 0 16px;
  letter-spacing: 0.02em;
}

/* ── ページタイトル ───────────────── */
.page-head { padding: 48px 0 28px; }
.page-head h1 {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 4vw, 2.3rem);
  font-weight: 700;
  line-height: 1.35;
  margin: 0 0 14px;
}
.page-head p.lead {
  color: var(--color-text-dim);
  font-size: 0.98rem;
  max-width: 62ch;
  margin: 0;
}
.eyebrow {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--color-accent-bright);
  letter-spacing: 0.08em;
  margin: 0 0 6px;
}
.updated-at {
  display: inline-block;
  margin-top: 14px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--color-text-dim);
  border: 1px solid var(--color-card-border);
  border-radius: 999px;
  padding: 3px 12px;
}

/* ── 選び方のポイント ───────────────── */
.choosing-points { margin: 8px 0 40px; }
.choosing-points h2 {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 700;
  margin: 0 0 14px;
}
.choosing-points ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}
.choosing-points li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--color-text);
  background: var(--color-card);
  border: 1px solid var(--color-card-border);
  border-radius: 8px;
  padding: 12px 14px;
}
.choosing-points .cp-icon {
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--color-accent);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  margin-top: 1px;
}
.choosing-points .cp-icon svg { width: 11px; height: 11px; stroke: #fff; }

/* ── よくある質問（FAQ） ───────────────── */
.faq-section { margin: 60px 0 40px; }
.faq-section h2 {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 700;
  margin: 0 0 18px;
}
.faq-list { display: flex; flex-direction: column; gap: 10px; }
.faq-item {
  background: var(--color-card);
  border: 1px solid var(--color-card-border);
  border-radius: 10px;
  padding: 0 18px;
}
.faq-item summary {
  cursor: pointer;
  padding: 15px 24px 15px 0;
  font-weight: 600;
  font-size: 0.92rem;
  list-style: none;
  position: relative;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+";
  position: absolute;
  right: 0;
  top: 13px;
  color: var(--color-accent-bright);
  font-weight: 700;
  font-size: 1.1rem;
}
.faq-item[open] summary::after { content: "−"; }
.faq-item p {
  margin: 0 0 16px;
  font-size: 0.86rem;
  color: var(--color-text-dim);
  line-height: 1.7;
}

/* ── 目次（カード型の縦リスト） ───────── */
nav.toc { margin: 18px 0 36px; }
.toc-card {
  background: var(--color-card);
  border: 1px solid var(--color-card-border);
  border-radius: 14px;
  box-shadow: 0 1px 3px rgba(28,30,34,0.05);
  max-width: 460px;
  overflow: hidden;
}
.toc-card-header {
  display: flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.95rem;
  padding: 14px 18px 10px;
  cursor: pointer;
  user-select: none;
}
.toc-card-header .chev {
  font-size: 0.65rem;
  color: var(--color-text-dim);
  transition: transform .15s ease;
}
/* 「閉じている」状態のとき、JSでこのクラスを付け外しします（script.js側で対応） */
.toc-card.is-collapsed .chev { transform: rotate(-90deg); }
.toc-card.is-collapsed .toc-body { display: none; }

.toc-group-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 0.78rem;
  padding: 8px 18px 6px;
}
.toc-group-label.is-wired { color: var(--color-wired); }
.toc-group-label.is-wireless { color: var(--color-wireless); }
ul.toc-list { list-style: none; margin: 0; padding: 0; }
ul.toc-list li { border-top: 1px solid var(--color-card-border); }
ul.toc-list a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 18px;
  font-size: 0.86rem;
  color: var(--color-text);
  text-decoration: none;
  transition: background .12s ease;
}
ul.toc-list a:hover { background: #F5F5F1; }
ul.toc-list .toc-icon {
  width: 26px; height: 26px;
  border-radius: 7px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
ul.toc-list .toc-icon.is-wired { background: var(--color-wired-bg); }
ul.toc-list .toc-icon.is-wireless { background: var(--color-wireless-bg); }
ul.toc-list .toc-icon svg { width: 14px; height: 14px; }
ul.toc-list .toc-icon.is-wired svg { stroke: var(--color-wired); }
ul.toc-list .toc-icon.is-wireless svg { stroke: var(--color-wireless); }

/* ── 波形ディバイダー（セクションの区切り装飾） ───── */
.waveform-divider { display: block; width: 100%; height: 24px; margin: 48px 0 8px; opacity: 0.5; }

/* ── 広告枠 ───────────────────── */
.ad-slot {
  border: 1px dashed #CFCEC6;
  border-radius: var(--radius);
  color: #A6A59C;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  letter-spacing: 0.05em;
  background: #FCFCFA;
}
.ad-slot--banner { max-width: 300px; height: 250px; margin: 40px auto; }
.ad-slot--strip { height: 50px; max-width: 320px; margin: 28px auto; }

/* ── グループ見出し（総合おすすめ／有線／無線） ───── */
.group-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  border-radius: var(--radius);
  margin: 56px 0 30px;
}
.group-header--top { background: rgba(181, 101, 29, 0.08); margin-top: 8px; }
.group-header--wired { background: var(--color-wired-bg); }
.group-header--wireless { background: var(--color-wireless-bg); }
.group-header .icon-circle {
  width: 40px; height: 40px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.group-header--top .icon-circle { background: var(--color-accent); }
.group-header--wired .icon-circle { background: var(--color-wired); }
.group-header--wireless .icon-circle { background: var(--color-wireless); }
.group-header .icon-circle svg { width: 20px; height: 20px; stroke: #fff; }
.group-header h2 {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 700;
  margin: 0;
}
.group-header--top h2 { color: var(--color-accent-bright); }
.group-header--wired h2 { color: var(--color-wired); }
.group-header--wireless h2 { color: var(--color-wireless); }
.group-header .group-sub {
  font-size: 0.82rem;
  color: var(--color-text-dim);
  margin: 2px 0 0;
}

/* ── 価格帯セクション ─────────────── */
section.price-section { scroll-margin-top: 24px; margin-bottom: 8px; }
section.price-section h3 {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 700;
  margin: 0 0 8px;
}
.price-desc { color: var(--color-text-dim); font-size: 0.9rem; margin: 0 0 22px; max-width: 60ch; }

/* ── 商品カード ───────────────────── */
.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 18px;
}
/* スマホ幅では商品カードを1列ずつ縦に並べる */
@media (max-width: 640px) {
  .product-grid { grid-template-columns: 1fr; }
}
article.product-card {
  background: var(--color-card);
  border: 1px solid var(--color-card-border);
  border-top: 3px solid var(--card-accent, var(--color-card-border));
  border-radius: var(--radius);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-shadow: 0 1px 2px rgba(28,30,34,0.04);
}
.product-card.is-wired { --card-accent: var(--color-wired); }
.product-card.is-wireless { --card-accent: var(--color-wireless); }

/* ── 総合おすすめ：要約カード（v1.1で新設。.is-topは廃止） ───── */
.top-pick-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 14px;
}
@media (max-width: 640px) {
  .top-pick-grid { grid-template-columns: 1fr; }
}
a.top-pick-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: var(--color-card);
  border: 1px solid var(--color-card-border);
  border-top: 3px solid var(--card-accent, var(--color-accent));
  border-radius: var(--radius);
  padding: 16px 18px;
  text-decoration: none;
  color: var(--color-text);
  box-shadow: 0 1px 2px rgba(28,30,34,0.04);
  transition: box-shadow .15s ease, transform .15s ease;
}
a.top-pick-card:hover { box-shadow: 0 3px 10px rgba(28,30,34,0.08); transform: translateY(-1px); }
.top-pick-card.is-wired { --card-accent: var(--color-wired); }
.top-pick-card.is-wireless { --card-accent: var(--color-wireless); }
.top-pick-card .top-pick-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  margin: 0;
}
.top-pick-card .top-pick-reason {
  font-size: 0.85rem;
  color: var(--color-text-dim);
  margin: 0;
  line-height: 1.5;
}
.top-pick-card .top-pick-jump {
  margin-top: auto;
  padding-top: 4px;
  font-size: 0.76rem;
  color: var(--color-accent-bright);
  font-weight: 500;
}

.product-image-placeholder {
  aspect-ratio: 4 / 3;
  background: #F1F0EB;
  border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  color: #C4C3BA;
}
.product-image-placeholder svg { width: 34px; height: 34px; }
.product-image-placeholder img { width: 100%; height: 100%; object-fit: contain; border-radius: 6px; }

.card-top-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.conn-tag {
  display: inline-flex; align-items: center; gap: 4px;
  font-family: var(--font-mono); font-size: 0.68rem;
  padding: 2px 8px; border-radius: 999px;
}
.conn-tag.is-wired { color: var(--color-wired); background: var(--color-wired-bg); }
.conn-tag.is-wireless { color: var(--color-wireless); background: var(--color-wireless-bg); }
.conn-tag svg { width: 11px; height: 11px; }

.badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.02em;
  padding: 3px 9px; border-radius: 999px; width: fit-content;
}
.badge--handson { background: var(--color-text); color: #fff; }
.badge--research { background: transparent; color: var(--color-text-dim); border: 1px solid var(--color-card-border); }

.product-name { font-family: var(--font-display); font-weight: 700; font-size: 1.02rem; margin: 0; }
.product-brand { font-size: 0.76rem; color: var(--color-text-dim); margin: -8px 0 0; }
.product-catch { font-size: 0.86rem; color: var(--color-text-dim); margin: 0; }

table.spec-table { width: 100%; border-collapse: collapse; font-family: var(--font-mono); font-size: 0.74rem; }
table.spec-table tr { border-top: 1px solid var(--color-card-border); }
table.spec-table tr:first-child { border-top: none; }
table.spec-table td { padding: 5px 0; }
table.spec-table td:first-child { color: var(--color-text-dim); width: 42%; }

/* 良い点／惜しい点 */
.pros-cons { font-size: 0.8rem; }
.pros-cons p { margin: 0 0 3px; font-weight: 600; }
.pros-cons .pros { color: #4C7A3D; }
.pros-cons .cons { color: #A6493C; }
.pros-cons ul { margin: 0 0 8px; padding-left: 1.1em; color: var(--color-text-dim); font-weight: 400; }
.pros-cons ul:last-child { margin-bottom: 0; }

.affiliate-links { display: flex; gap: 8px; margin-top: auto; padding-top: 4px; }
.affiliate-links a {
  flex: 1; text-align: center;
  font-family: var(--font-body); font-weight: 500; font-size: 0.8rem;
  text-decoration: none; padding: 9px 0; border-radius: 6px;
}
.affiliate-links .amazon { background: var(--color-accent); color: #fff; }
.affiliate-links .rakuten { background: transparent; border: 1px solid var(--color-accent); color: var(--color-accent-bright); }

/* ── フッター ───────────────────── */
footer.site-footer {
  border-top: 1px solid var(--color-card-border);
  margin-top: 70px; padding: 26px 0 50px;
  font-size: 0.78rem; color: var(--color-text-dim); text-align: center;
}
footer.site-footer a { color: inherit; }

/* ── 補足ボックス（注意書きなど） ───────── */
.note-box {
  background: #FCFCFA;
  border: 1px solid var(--color-card-border);
  border-left: 3px solid var(--color-accent);
  border-radius: 6px;
  padding: 12px 16px;
  font-size: 0.8rem;
  color: var(--color-text-dim);
  margin: 32px 0 48px;
}
/* ============================================================
   T4（書き出し機能）で追加したクラス
   ここから下は追加分です。上の既存クラスは変更していません。
   ============================================================ */

/* ── h1の上のジャンル名ラベル（AUTO:eyebrow） ───────── */
/* 既存の .eyebrow はハードコード用として残してあります。
   書き出しで生成されるページはこちらの .page-eyebrow を使います。 */
.page-eyebrow {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--color-accent-bright);
  letter-spacing: 0.08em;
  margin: 0 0 6px;
}

/* ── 最終更新日（AUTO:updatedAt） ───────────────── */
/* 既存の .updated-at と見た目は揃えつつ、別クラスとして新設しています。 */
.page-updated {
  display: inline-block;
  margin-top: 14px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--color-text-dim);
  border: 1px solid var(--color-card-border);
  border-radius: 999px;
  padding: 3px 12px;
}

/* ── 基準機バッジ（isBenchmark が true の商品） ───────── */
/* .badge の基本形は既存クラスで定義済み。ここでは色だけ足しています。 */
.badge--benchmark {
  background: var(--color-accent);
  color: #fff;
}

/* 「このページの比較基準として使っている実機です」の一文 */
.benchmark-note {
  font-size: 0.76rem;
  color: var(--color-accent-bright);
  background: rgba(181, 101, 29, 0.07);
  border-radius: 6px;
  padding: 7px 10px;
  margin: 0;
  line-height: 1.5;
}

/* ── 商品カード内の本文（products.body） ─────────── */
.product-body {
  font-size: 0.84rem;
  line-height: 1.85;
  color: var(--color-text);
  border-top: 1px solid var(--color-card-border);
  padding-top: 12px;
}
.product-body p { margin: 0 0 0.9em; }
.product-body p:last-child { margin-bottom: 0; }

/* ── 商品カード内の出典（products.sources） ────────── */
.product-sources {
  font-size: 0.7rem;
  line-height: 1.6;
  color: var(--color-text-dim);
  margin: 0;
}
.product-sources a {
  color: var(--color-text-dim);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.product-sources a:hover { color: var(--color-accent-bright); }

/* ── まとめセクション（AUTO:summary） ─────────────── */
/* 本文の商品カードと視覚的に区別するため、アクセント色の面で囲みます。 */
.summary-section {
  background: rgba(181, 101, 29, 0.06);
  border: 1px solid rgba(181, 101, 29, 0.18);
  border-radius: var(--radius);
  padding: 26px 28px;
  margin: 56px 0 12px;
}
.summary-section h2 {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-accent-bright);
  margin: 0 0 12px;
}
.summary-section p {
  font-size: 0.9rem;
  line-height: 1.85;
  color: var(--color-text);
  margin: 0 0 0.9em;
}
.summary-section p:last-child { margin-bottom: 0; }

@media (max-width: 640px) {
  .summary-section { padding: 20px 18px; }
}
/* 絵文字アイコンのときは丸背景を消す */
.choosing-points .cp-icon.has-emoji { background: transparent; font-size: 1rem; }
/* ── 導入文の幅（PC表示） ───────────────── */
/* 既存の .lead は max-width: 62ch で右に余白ができるため、
   書き出しページではこのクラスを足して幅いっぱいに伸ばします。
   既存の .lead 自体は変更していません。 */
.page-head p.lead.page-lead { max-width: none; }
/* ── アフィリエイトリンクが未設定のとき ───────── */
.affiliate-pending {
  flex: 1;
  text-align: center;
  font-family: var(--font-body);
  font-size: 0.78rem;
  color: #A6A59C;
  border: 1px dashed #CFCEC6;
  border-radius: 6px;
  padding: 9px 0;
}
/* ── 1商品ずつ縦に並べるレイアウト ───────── */
/* 横に3枚並べると1枚あたりの幅が狭く、説明文が縦に細長くなって
   読みにくいため、1商品ずつ横幅いっぱいに広げて表示します。 */
.product-grid--single {
  grid-template-columns: 1fr;
  gap: 28px;
}
.product-card--wide { padding: 24px 26px; }

/* 画像・スペック表・リンクボタンは、横に伸びすぎると
   かえって見にくいので、それぞれ適切な幅で止めます。
   説明文（キャッチ・良い点/惜しい点・本文）は横幅いっぱいに広がります。 */
.product-card--wide .product-image-placeholder { max-width: 300px; }
.product-card--wide .spec-table { max-width: 620px; }
.product-card--wide .affiliate-links { max-width: 420px; }
.product-card--wide .benchmark-note { max-width: 620px; }

@media (max-width: 640px) {
  .product-card--wide { padding: 18px; }
  .product-card--wide .product-image-placeholder,
  .product-card--wide .spec-table,
  .product-card--wide .affiliate-links,
  .product-card--wide .benchmark-note { max-width: none; }
}
/* ============================================================
   トップページ（ジャンル一覧）用のクラス
   ============================================================ */

.genre-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 20px;
  margin: 10px 0 40px;
}
@media (max-width: 640px) {
  .genre-grid { grid-template-columns: 1fr; }
}

/* 公開中のジャンル（リンクとして機能する） */
a.genre-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--color-card);
  border: 1px solid var(--color-card-border);
  border-top: 3px solid var(--color-accent);
  border-radius: var(--radius);
  padding: 20px 22px;
  text-decoration: none;
  color: var(--color-text);
  box-shadow: 0 1px 2px rgba(28,30,34,0.04);
  transition: box-shadow .15s ease, transform .15s ease;
}
a.genre-card:hover {
  box-shadow: 0 3px 10px rgba(28,30,34,0.08);
  transform: translateY(-1px);
}

/* 準備中のジャンル（published が false。リンクではない） */
div.genre-card--pending {
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: #FCFCFA;
  border: 1px dashed var(--color-card-border);
  border-top: 3px solid var(--color-card-border);
  border-radius: var(--radius);
  padding: 20px 22px;
  color: var(--color-text-dim);
}

.genre-card-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.08rem;
  margin: 0;
}
.genre-card-desc {
  font-size: 0.85rem;
  color: var(--color-text-dim);
  margin: 0;
  line-height: 1.6;
}
.genre-card-meta {
  margin-top: auto;
  padding-top: 4px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--color-accent-bright);
}
.genre-card--pending .genre-card-meta { color: var(--color-text-dim); }

.genre-card-badge {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  padding: 3px 9px;
  border-radius: 999px;
  background: #EFEEE8;
  color: var(--color-text-dim);
  width: fit-content;
}
/* ============================================================
   T5（固定ページ）で追加したクラス
   privacy.html / about.html / contact.html の3枚で共通して使います。
   ここから下は追加分です。上の既存クラスは一切変更していません。
   ============================================================ */

/* 固定ページ本文の共通ラッパー */
.static-page { padding-bottom: 10px; }

/* 章のかたまり。章と章の間に余白をとります */
.static-page section { margin: 0 0 36px; }
.static-page section:last-child { margin-bottom: 0; }

.static-page h2 {
  font-family: var(--font-display);
  font-size: 1.16rem;
  font-weight: 700;
  color: var(--color-text);
  border-left: 3px solid var(--color-accent);
  padding-left: 12px;
  margin: 0 0 14px;
}
.static-page h3 {
  font-family: var(--font-display);
  font-size: 0.98rem;
  font-weight: 700;
  margin: 22px 0 8px;
}
.static-page p {
  font-size: 0.9rem;
  line-height: 1.9;
  margin: 0 0 1em;
}
.static-page p:last-child { margin-bottom: 0; }

.static-page ul {
  font-size: 0.9rem;
  line-height: 1.9;
  margin: 0 0 1em;
  padding-left: 1.3em;
}
.static-page li { margin-bottom: 4px; }

.static-page a { color: var(--color-accent-bright); }

/* 「制定日」など、文書の日付を出す小さな表示 */
.doc-meta {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--color-text-dim);
  border-top: 1px solid var(--color-card-border);
  padding-top: 14px;
  margin-top: 40px;
}

/* お問い合わせフォームの埋め込み枠 */
.contact-embed {
  background: var(--color-card);
  border: 1px solid var(--color-card-border);
  border-radius: var(--radius);
  padding: 10px;
  margin: 0 0 24px;
  overflow: hidden;
}
.contact-embed iframe {
  display: block;
  width: 100%;
  min-height: 900px;
  border: 0;
}

/* フォームURL未設定のときに出す案内枠（設定後は消えます） */
.embed-placeholder {
  background: #FCFCFA;
  border: 1px dashed #CFCEC6;
  border-radius: var(--radius);
  padding: 40px 24px;
  text-align: center;
  font-size: 0.86rem;
  color: #8A8980;
  margin: 0 0 24px;
}

@media (max-width: 640px) {
  .static-page h2 { font-size: 1.06rem; }
  .contact-embed { padding: 6px; }
}