/* =====================================================================
mirurunn-doc.css — /about/ ・ /method/ 共通の文書ページ用スタイル v3.0
---------------------------------------------------------------------
前提：mirurunn-brand.css を先に読み込むこと。
規律：
- 色・角丸・影・フォントは brand css のトークン（var(--*)）のみ使用。
直書きHEXは書かない（＝全成果物で揺れない）。
- brand css 本体は編集しない。追加分はこのファイルに閉じる。
- 追加トークンは --profile-* 接頭辞で名前空間を分ける。
v2.0 変更（2026-09-07）:
/about/ を「代表紹介ページ」から「運営者情報ページ」へ再構成。
人の情報量を絶対量として小さくし、空いた面積を組織と手順の情報に充てる。
削除: .profile / .profile__figure / .profile__photo / .profile__caption /
.profile__name / .profile__name-en / .profile__role / .profile__lead /
.profile__facts / .profile__link（3:4ポートレートの白カードと6pxグラデ線を含む）
追加: .doc-hero / .doc-lead / .doc-block / .operator 一式
（アバターは円形56px。カード装飾は付けない）
v1.1 変更（2026-09-07）:
v1.0 は public/report/ai-search-industry-2026/index.html のローカル
フォールバック語彙（--ink / --heading / --grad-logo / --shadow-card /
--search-aqua / --white / --font-rounded / --space）で書かれており、
mirurunn-brand.css には1つも存在しないため全て無効値になっていた。
brand css の実トークンへ対応付けた。
===================================================================== */
:root {
/* 本文グレーの可読性補正：
brand css の --text-gray (#8E8E8E) は白背景で 3.28:1 と
WCAG AA(4.5:1) に届かないため、本文・注記にはこちらを使う。
--text-body (#244D70) は白背景で 8.86:1。 */
--doc-muted-ink: var(--text-body);
}
/* ---------- ① h1 ＋ ② 事業の定義文 ---------- */
.doc-hero {
text-align: center;
padding: 56px 0 8px;
}
.doc-hero h1 {
font-size: 34px;
font-weight: 700;
color: var(--text-dark);
line-height: 1.45;
margin: 20px 0 20px;
}
.doc-lead {
font-size: 16.5px;
color: var(--text-body);
line-height: 1.95;
max-width: 62ch;
margin: 0 auto;
}
/* ---------- ③④ 本文ブロック ---------- */
.doc-block {
margin-top: 48px;
}
.doc-block h2 {
font-size: 20px;
font-weight: 700;
color: var(--text-dark);
margin-bottom: 16px;
}
.doc-block p {
font-size: 15px;
color: var(--text-body);
line-height: 1.95;
max-width: 62ch;
}
.doc-block p + p {
margin-top: 12px;
}
/* ---------- ④ 事業情報テーブル ---------- */
.doc-block .table {
width: 100%;
border-collapse: collapse;
font-size: 13.5px;
}
.doc-block .table th,
.doc-block .table td {
padding: 12px 16px;
border: 1px solid var(--line);
text-align: left;
vertical-align: top;
line-height: 1.8;
color: var(--text-body);
}
.doc-block .table th {
width: 10em;
white-space: nowrap;
background: var(--bg-section);
font-weight: 700;
color: var(--text-dark);
}
.doc-block .table a { color: var(--text-body); }
/* ---------- ⑤ 運営者（ページ末尾・カード装飾なし） ---------- */
.operator {
margin-top: 56px;
padding-top: 28px;
border-top: 1px solid var(--line);
}
.operator h2 {
font-size: 15px;
font-weight: 700;
color: var(--text-dark);
margin-bottom: 18px;
}
.operator__row {
display: flex;
gap: 16px;
align-items: flex-start;
}
.operator__avatar {
width: 56px;
height: 56px;
border-radius: 50%;
object-fit: cover;
flex: 0 0 auto;
display: block;
}
.operator__body {
max-width: 62ch;
}
.operator__body p {
font-size: 13.5px; /* 12px を下限とする */
color: var(--doc-muted-ink);
line-height: 1.9;
margin: 0;
}
.operator__body p + p {
margin-top: 8px;
}
.operator__name {
font-weight: 700;
color: var(--text-dark) !important;
}
.operator__links a {
color: var(--text-body);
text-decoration: underline;
text-underline-offset: 2px;
}
.operator__links a:hover { color: var(--aqua); }
.operator__links a:focus-visible {
outline: 2px solid var(--aqua);
outline-offset: 2px;
}
.operator__links span { margin: 0 6px; color: var(--line-2); }
/* ---------- ⑥ 免責 ----------
12px を下限とし、色は --text-gray(3.28:1) ではなく
--doc-muted-ink(8.86:1) を使う。読めない免責は置く意味がない。 */
.doc-disclaimer {
background: var(--bg-section);
border-radius: var(--radius-sm);
padding: 20px 24px;
margin-top: 48px;
font-size: 13px;
color: var(--doc-muted-ink);
line-height: 1.9;
}
/* ---------- レスポンシブ ---------- */
@media (max-width: 860px) {
.doc-hero { padding-top: 40px; }
.doc-hero h1 { font-size: 26px; }
.doc-lead { font-size: 15px; text-align: left; }
.doc-block .table th {
width: auto;
white-space: normal;
}
.doc-block .table th,
.doc-block .table td { padding: 10px 12px; font-size: 12.5px; }
}
/* =====================================================================
/method/ 追加分（v3.0）
===================================================================== */
/* ---------- 定義リスト（3軸の定義など） ---------- */
.doc-dl {
margin: 18px 0 0;
display: grid;
grid-template-columns: 11em 1fr;
border-top: 1px solid var(--line);
}
.doc-dl dt,
.doc-dl dd {
margin: 0;
padding: 14px 0;
border-bottom: 1px solid var(--line);
line-height: 1.9;
color: var(--text-body);
}
.doc-dl dt {
font-weight: 700;
color: var(--text-dark);
font-size: 14px;
padding-right: 16px;
}
.doc-dl dd { font-size: 14px; }
/* ---------- 実際のクエリ文面・コード片 ---------- */
.doc-code {
margin: 14px 0 0;
padding: 16px 18px;
background: var(--bg-section);
border: 1px solid var(--line);
border-radius: var(--radius-sm);
font-family: var(--font-en);
font-size: 13px;
line-height: 2;
color: var(--text-body);
overflow-x: auto;
white-space: pre;
}
/* ---------- 箇条書き ---------- */
.doc-list {
margin: 14px 0 0;
padding-left: 1.3em;
max-width: 62ch;
}
.doc-list li {
font-size: 15px;
color: var(--text-body);
line-height: 1.95;
margin-bottom: 8px;
}
/* ---------- 限界の節（本文と同格。小さくしない） ---------- */
.doc-limits {
margin-top: 48px;
padding: 26px 28px;
background: var(--bg-section);
border-left: 4px solid var(--aqua);
border-radius: var(--radius-sm);
}
.doc-limits h2 {
font-size: 20px;
font-weight: 700;
color: var(--text-dark);
margin-bottom: 14px;
}
.doc-limits p,
.doc-limits li {
font-size: 14.5px;
color: var(--text-body);
line-height: 1.95;
}
.doc-limits ul { margin: 12px 0 0; padding-left: 1.3em; }
.doc-limits li { margin-bottom: 10px; }
/* ---------- 項目キーの一覧（サイト診断44項目） ---------- */
.doc-keys {
margin: 12px 0 0;
font-family: var(--font-en);
font-size: 12.5px;
line-height: 1.9;
color: var(--text-body);
word-break: break-word;
}
@media (max-width: 860px) {
.doc-dl { grid-template-columns: 1fr; }
.doc-dl dt { padding-bottom: 0; border-bottom: 0; }
.doc-dl dd { padding-top: 4px; }
.doc-limits { padding: 20px 18px; }
.doc-code { font-size: 12px; }
}