/* =============================================================
   Craval 公開サイト（craval.jp 配下）の DADS 土台 — 2026-10-16
   -------------------------------------------------------------
   方針: ブランドの色・ロゴ・写真・レイアウト・文言はそのまま。土台だけをデジタル庁デザインシステム（DADS）に合わせる。
   - 色は css/dads-tokens.css（DADS公式トークン 2.0.1・手で編集しない）から引く
   - 本文16px以上・UI最小14px・太さ400/700・本文の行間1.7（見出し1.4）
   - 文字色 solid-gray-800 / 補助 solid-gray-600（コーポレートの灰色地 #dfe3e3 の上では 700）/ 区切り solid-gray-200 / 入力欄の枠 solid-gray-600
   - フォーカスは黒4pxの枠＋yellow-300 のリング。outline を消さない
   - ブランド色の上に文字を載せる所は「濃い段」（下の --brand-*-deep）で 4.5:1 を確保
   各ページの <style> の後に読み込む（ページ側の同じ詳細度の指定を上書きする）。
   ============================================================= */
:root {
  /* ブランド空色（受発注総研 #46b1e1 / BtoB EC #009fe2）の濃い段。白地 6.8:1・灰色地(#dfe3e3) 5.3:1・白文字の地 6.8:1・黄文字の地 6.4:1 */
  --brand-sky-deep: #005f94;
  /* 受発注総研のグラデ後半色 #5c94cd の濃い段。白文字で 6.9:1 */
  --brand-blue-deep: #2f5f94;
  /* M&A系ページのティール（#0d9488）の濃い段。白文字で 5.4:1 */
  --brand-teal-deep: #0f766e;
  --brand-teal-deep-hover: #115e59;
  /* M&A（B-MPO）のコーラル（#ff5a6e）の濃い段。白文字で 5.4:1（ホバーはさらに濃く） */
  --brand-coral-deep: #c92a40;
  --brand-coral-deep-hover: #a51f35;
}

html { -webkit-text-size-adjust: 100%; }

/* ---- フォーカス（DADS）: ページ側の outline:none より強く効かせる ---- */
:where(a, button, input, select, textarea, summary, [tabindex], [role="button"]):focus-visible {
  outline: 4px solid var(--color-neutral-black) !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 2px var(--color-primitive-yellow-300) !important;
}

/* ---- フォーム部品 ---- */
.form-label {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--color-neutral-solid-gray-800);
}
.form-label .required {
  font-size: 14px;
  font-weight: 700;
  /* error-2（red-900）はコーポレートの灰色地で 4.48:1 と僅かに届かないので 1 段濃い red-1000 */
  color: var(--color-primitive-red-1000);
}
.form-input,
.form-textarea,
.form-select {
  font-size: 16px;
  line-height: 1.5;
  color: var(--color-neutral-solid-gray-800);
  background-color: #fff;
  border: 1px solid var(--color-neutral-solid-gray-600);
  border-radius: var(--border-radius-8);
}
.form-input,
.form-select { min-height: 48px; }
textarea.form-input,
.form-textarea { min-height: 180px; }
.form-input:hover,
.form-textarea:hover,
.form-select:hover { border-color: var(--color-neutral-solid-gray-900); }
.form-input::placeholder,
.form-textarea::placeholder { color: var(--color-neutral-solid-gray-536); }
.form-help { font-size: 14px; color: var(--color-neutral-solid-gray-600); }
.consent-label { font-size: 16px; color: var(--color-neutral-solid-gray-800); }
.consent-label a { color: var(--brand-sky-deep); text-decoration: underline; }
.consent-checkbox { width: 24px; height: 24px; }

/* ---- ボタン: 高さ48px・太字・ホバーで下線・無効は灰色の面 ---- */
.submit-btn,
.btn-submit,
.about-btn,
.btn-cta-hero,
.btn-cta-banner,
.btn-cta-sec6,
.article-cta__btn,
.cta-widget__btn,
.sidebar-cta__btn,
.cta-btn {
  min-height: 48px;
  font-weight: 700;
  line-height: 1.3;
}
.submit-btn:hover,
.btn-submit:hover,
.about-btn:hover,
.btn-cta-hero:hover,
.btn-cta-banner:hover,
.btn-cta-sec6:hover,
.article-cta__btn:hover,
.cta-widget__btn:hover,
.sidebar-cta__btn:hover,
.cta-btn:hover {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
.submit-btn:disabled,
.btn-submit:disabled,
.submit-btn:disabled:hover,
.btn-submit:disabled:hover {
  opacity: 1;
  background: var(--color-neutral-solid-gray-300);
  border-color: var(--color-neutral-solid-gray-300);
  color: var(--color-neutral-solid-gray-800);
  text-decoration: none;
  cursor: not-allowed;
}

/* ---- 受発注総研（/btobec/media/）記事テンプレート: 読みやすさ ---- */
article.article-body {
  box-shadow: none;
  border: 1px solid var(--color-neutral-solid-gray-200);
  border-radius: var(--border-radius-16);
  color: var(--color-neutral-solid-gray-800);
}
article.article-body p,
article.article-body ul li,
article.article-body ol li,
article.article-body dd {
  font-size: 16px;
  line-height: 1.7;
}
article.article-body h1,
article.article-body h2,
article.article-body h3,
article.article-body h4 { line-height: 1.4; }
/* h2 の左アクセント線（禁止パターン）を外し、灰色の面だけで見出しを区切る */
article.article-body h2 { border-left: 0; border-radius: var(--border-radius-8); }
article.article-body a:not([class]) { color: var(--brand-sky-deep); text-decoration: underline; text-underline-offset: 0.2em; }
article.article-body a:not([class]):hover { text-decoration-thickness: 2px; }
article.article-body table { font-size: 16px; }
article.article-body table th,
article.article-body table td { line-height: 1.5; }
.diagram-tree .tree__root { border-left: 0; border: 1px solid var(--color-neutral-solid-gray-200); }
.sidebar-widget { box-shadow: none; border: 1px solid var(--color-neutral-solid-gray-200); border-radius: var(--border-radius-8); }
.diagram-cards .card { box-shadow: none; }
.article-related-card:hover { transform: none; box-shadow: none; }
.header { box-shadow: none; border-bottom: 1px solid var(--color-neutral-solid-gray-200); }

/* 一覧カードのカテゴリ札（受発注総研トップ）。color:grey は灰色地で 3.1:1 */
.extra-info span { color: var(--color-neutral-solid-gray-700); }

/* 受発注総研のブランドグラデーション（#46b1e1→#5c94cd）は白文字が 2.4〜3.2:1。同じ向き・同じ色相の濃い段に置き換える */
.header-req.-contact,
.cta-widget,
.lab-contact,
.breadcrumb__list,
.tab__menu.current,
.tab__menu a:hover,
.tab__menu:hover {
  background: linear-gradient(135deg, var(--brand-sky-deep), var(--brand-blue-deep));
}
.header-req.-contact:hover,
.lab-contact:hover { text-decoration: underline; text-underline-offset: 0.2em; }
.cta-widget__btn { color: var(--brand-sky-deep); }

/* スマホ: 記事カードが align-self:flex-start のため表の最大幅（2,000px超）まで広がり、本文が横に流れていた。画面幅に収め、表だけを横スクロールにする */
@media (max-width: 720px) {
  article.article-body { align-self: stretch; width: 100%; }
  article.article-body .diagram-figure,
  article.article-body .table-wrap { max-width: 100%; overflow-x: auto; }
  /* 表のセルは折り返す（nowrap だと1行が 2,000px を超え、横スクロールしないと読めない）。列が多い表は figure 側で横スクロール */
  article.article-body table th,
  article.article-body table td { white-space: normal; min-width: 7em; }
}