を本文無改変のまま
* コードブロックらしく表示する基礎スタイル。
* 色分けは SyntaxHighlighter Evolved が担当し（T386 でエンジンを
* プラグインへ一本化）、読み込み完了時にこの 自体が
* プラグインの描画結果に差し替わる。そのため本セクションは
* 差し替え前に素の が見えてしまうのを防ぐ土台として残す。
* ============================================================ */
pre[class*='brush'] {
display: block;
overflow-x: auto;
padding: 1em;
border: 1px solid #ddd;
border-radius: var(--radius);
background: #f8f8f8;
font-family: Consolas, Monaco, 'Courier New', monospace;
font-size: 0.875rem;
line-height: 1.5;
white-space: pre;
}
/* === T283 ここまで === */
/* D27/T262: 製品詳細「その他のリソース」リッチエディター領域を最大幅で表示
（旧 .ps-resources グリッドの span2 制約を解除し、ブログ固定カード削除後の全幅化）。 */
.ps-richtext--full {
grid-column: auto;
width: 100%;
max-width: 100%;
}
/* === D27/T262 ここまで === */
/* ============================================================
* D27/D47/T262: 製品リソース 5枚固定カード（タイトルのみ・説明文なし）
* issue #78。.ps-resources（page-tm_product_support.php と共用）とは別クラスで定義し
* 波及を避ける。URL があるカードのみテンプレ側で出力される。
* ============================================================ */
.ps-reslinks {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 16px;
}
.ps-reslink {
flex: 1 1 170px;
max-width: 210px;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 12px;
padding: 22px 16px;
border: 1px solid #dee2e6;
border-radius: var(--radius);
background: #fff;
text-decoration: none;
color: #222;
transition: border-color 0.2s, box-shadow 0.2s;
}
.ps-reslink:hover,
.ps-reslink:visited {
color: #222;
}
.ps-reslink:hover {
border-color: var(--ui-accent-hover);
box-shadow: 0 2px 8px rgba(var(--ui-accent-rgb), 0.1);
}
.ps-reslink__icon {
color: var(--ui-accent-strong);
line-height: 0;
}
.ps-reslink__icon svg {
width: 28px;
height: 28px;
}
.ps-reslink__title {
font-size: 14px;
font-weight: bold;
line-height: 1.4;
color: #222;
}
@media (max-width: 600px) {
.ps-reslink { flex-basis: 130px; }
}
/* 製品詳細ページ（taxonomy-product.php）はサポートバー（緑CTA）を持たず白地で終わるため、
フッターとの間に余白を確保する。.ps-container 共通には付けない
（page-products.php 等では .ps-container が緑バー内にネストされるため）。 */
.ps-container--product {
padding-bottom: 64px;
}
/* === D27/D47/T262 ここまで === */
/* ============================================================
* D47(3/3)/T274: 文末 My Esri CTA カード
* issue #78。旧「サポートのご案内」3カードは廃止（T262 §6）、代わりに My Esri への
* 導線を1枚の CTA として復活。デザインは既存の白カード（.ps-support-card）＋緑アイコン
* ＋緑ボタン（.ps-btn-green）に統一し、サイト全体のカード言語に揃える。全幅だと間延び
* するためヘッダー説明文相当（max-width 680px）に絞り中央寄せ＋上に区切り線。
* ============================================================ */
/* 区切り線は .ps-container 全幅（カード幅に縛られない）。カードのみ 680px 中央寄せ。 */
.ps-myesri-divider {
border: 0;
border-top: 1px solid #dee2e6;
margin: 8px 0 32px;
}
.ps-myesri-wrap {
max-width: 680px;
margin: 0 auto;
}
.ps-myesri-card {
padding: 32px 24px;
}
.ps-myesri-card__icon {
display: block;
color: var(--ui-accent-strong);
line-height: 0;
margin-bottom: 12px;
}
.ps-myesri-card__icon svg {
width: 40px;
height: 40px;
}
.ps-myesri-card__title {
font-size: 18px;
font-weight: bold;
margin: 0 0 8px;
}
/* 親テーマの h3 緑下線を打ち消す（中央寄せの単一カード見出しのため） */
main.-page h3.ps-myesri-card__title {
border-bottom: 0;
padding: 0;
}
.ps-myesri-card__desc {
font-size: 14px;
color: #555;
line-height: 1.7;
margin: 0 0 20px;
max-width: 480px;
}
.ps-myesri-card__btn {
padding: 12px 40px;
}
/* === D47(3/3)/T274 ここまで === */
/* ============================================================
* T274: 製品詳細「自由記述（ブロック参照）」の本文タイポグラフィ
* do_blocks() で差し込んだ同期パターン/投稿のブロックは、何も当てないと親テーマ
* （common/css/template.css）の `main.-page h2:not(.__ptitle)` が全 h2 に緑バー＋
* 白文字を強制し「見出しが大きすぎ・本文に余白が無い」状態になる。ナレッジ本文
* （.ns-body）相当の記事タイポを .ps-richtext--full（A=wysiwyg / C=ブロック参照の
* 両パスが使う自由記述コンテナ）に当てて整える。
* ============================================================ */
.ps-richtext--full {
font-size: 16px;
line-height: 1.8;
color: #333;
}
.ps-richtext--full > *:first-child {
margin-top: 0;
}
/* 親テーマの緑バー h2 を記事見出し（緑下線）へ上書き（同特異度＋祖先で勝つ） */
main.-page .ps-richtext--full h2:not(.__ptitle),
.ps-richtext--full h2 {
background-color: transparent;
color: #1a1a1a;
font-size: 24px;
font-weight: 700;
margin: 32px 0 16px;
padding: 0 0 8px;
border-bottom: 2px solid var(--ui-accent-strong);
}
.ps-richtext--full h3 {
font-size: 20px;
font-weight: 700;
margin: 24px 0 12px;
}
.ps-richtext--full p {
margin: 0 0 16px;
}
.ps-richtext--full ul,
.ps-richtext--full ol {
margin: 0 0 16px;
padding-left: 1.4em;
}
.ps-richtext--full li {
margin-bottom: 6px;
}
.ps-richtext--full a:not(.wp-block-button__link) {
color: var(--link-color);
}
/* ブロックボタンは本文 a 色の影響を受けず、ブロック側で設定した配色を保つ */
.ps-richtext--full .wp-block-button__link {
color: #fff;
}
.ps-richtext--full img {
max-width: 100%;
height: auto;
}
/* ブロックの上下を製品リソース等とほどよく離す（コンテナ余白の不足を補う） */
.ps-richtext--full .wp-block-buttons,
.ps-richtext--full .wp-block-columns {
margin-top: 20px;
margin-bottom: 20px;
}
/* === T274 自由記述タイポ ここまで === */
/* ============================================================
2026-06-19 MTG 製品まわりバッチ（T298 / T307）子テーマ独自差分
============================================================ */
/* T307 (#132): /products 主力製品カードを中央揃え（アイコン・製品名・説明・リンク）。
従来は flex-direction:column の既定で左揃えだった。 */
.pl-featured__card {
align-items: center;
text-align: center;
}
/* T298 (#126): /products フッター上部の My Esri 導線カード（製品詳細と統一）。
カード本体の見た目（.ps-myesri-wrap / .ps-myesri-card 等）は taxonomy-product.php と
共通の既存スタイルを流用し、ここでは一覧ページ側のセクション余白のみ補う。 */
.ps-myesri-section {
padding: 40px 0;
background: var(--bg-light, #f8f9fa);
}
.ps-myesri-section .ps-container {
max-width: 1240px;
margin: 0 auto;
padding: 0 20px;
}
/* === 2026-06-19 MTG 製品まわりバッチ ここまで === */
/* ============================================================
2026-06-25 デザイン修正指示バッチ（D58 / T318）子テーマ独自差分
============================================================ */
/* D58 (#141) / T318: ページ内アンカー遷移時に見出しが固定追従ヘッダーへ潜るのを防ぐ。
下スクロール後に上方アンカーへ飛ぶと、上スクロールで再出現する親テーマ追従ヘッダーが
見出しを覆っていた。固定クロームは2段重ね＝親テーマ （上端0〜clamp(70,9.1vw,100)px）
の「下」に追従グローバルナビ .post-list.support-nav（高さ約75〜85px）が重なり、wp70 実測で
下端 175px@1280 まで覆う。当初 header 分のみ（116px）では nav バー分が不足していた（2026-06-26 修正）。
方針: スクロールコンテナ（html）に scroll-padding-top を与え、ネイティブな #hash 遷移
・URL ハッシュ着地・キーボードフォーカス送りのスクロール位置を固定クローム分だけ下げる。
T391: 値を親テーマ高の近似（clamp(70px,9.1vw,100px) ＋ ナビバー高+余白の概算 90px）から、
support.js が実測配信する --esrij-anchor-offset へ移した。近似値は
①親テーマのヘッダー高が変わると追随しない ②WP 管理バー分を含まない
③追従タブ・索引の分を含まない、の 3 点で実態とズレる。JS が測る値は
window.esrijAnchorOffset() と同一の計算なので、明示スクロールとネイティブ着地で
同じ位置に着く。**フォールバックには従来の近似式をそのまま残した**——JS が値を配信する前に
ブラウザーが #hash 着地を実行しうるため、ここを固定値にすると狭い画面で従来より深く
下げてしまう（390px 幅で 160px → 190px）。JS が動けば実測値で上書きされる。
二重補正の回避（#68/D39 と非干渉）: 独自TOC（custom-toc.js）はクリック時に
e.preventDefault() ＋ window.scrollTo({top}) で明示位置へスクロールし、その getScrollOffset()
側でも header＋nav＋管理バーを実測加算している。scroll-padding-top は明示 scrollTo には作用
しないため二重補正にはならない。本指定は TOC を経由しないネイティブアンカー向け。 */
html {
scroll-padding-top: var(--esrij-anchor-offset, calc(clamp(70px, 9.1vw, 100px) + 90px));
}
/* 念のためのフォールバック: 本文中の見出し・id 付き要素にも同量の scroll-margin を付与
（scroll-padding 非対応の旧環境や scrollIntoView 経由の着地に効く）。 */
.single-knowledge .entry-content :is(h2, h3, h4, h5),
.single-news .entry-content :is(h2, h3, h4, h5),
article.type-knowledge :is(h2, h3, h4, h5)[id],
article.type-news :is(h2, h3, h4, h5)[id] {
scroll-margin-top: var(--esrij-anchor-offset, calc(clamp(70px, 9.1vw, 100px) + 90px));
}
/* === 2026-06-25 デザイン修正指示バッチ ここまで === */
/* ============================================================
2026-07-08 デザイン修正指示バッチ（T333 = 新採番 D58 / PDF D58）子テーマ独自差分
※ 既存の「D58 (#141)/T318」(上記アンカー offset) は旧採番＝新 D57。
本ブロックは 2026-07-08 再採番後の別 D58（ナレッジ サイドバー刷新）。
衝突回避のため以降は安定した T番号（T333）で識別する。
============================================================ */
/* T333 ①（D58）: 目次（サイドバー）固定・追従時にヘッダーとの間へマージン。
* → T391 で上の「サイドバー」セクション（.sidebar-inner の sticky 指定）へ統合した。
* 当初はここで top を 134px / 209px に上書きしていたが、土台の 124px / 199px と
* 合わせて 4 か所に値が散っていたため、support.js が実測配信する
* --esrij-sticky-top を基点にした 1 つの式へまとめている。
* 余白は T391 時点では 34px を維持していたが、T412 で親子タブと同じ
* --esrij-sticky-gap（10px）へ揃えた（目次がサイドバーへ戻り横並びになったため）。 */
/* === 2026-07-08 デザイン修正指示バッチ（T333）ここまで === */
/* ============================================================
2026-07-08 デザイン修正指示バッチ（D65 / T340）子テーマ独自差分
============================================================ */
/* D65 (PDF) / T340: 検索結果の外部サイトバッジ（.badge-site）視認性。
外部サイト（ArcGIS ブログ／リソース集／開発リソース集）は
ESRI_Cross_Site_Search::$label_slug_map に無いラベルのため get_badge_slug() が空を返し、
バッジは `.badge-site .badge-site--`（空サフィックス）となる。基底 .badge-site は
color:#fff だが背景指定が無く、既知の --support/--docs/--corporate 以外は
白文字＋背景なし＝白地に白文字で不可視になっていた（顧客報告）。
対処: :where() で 0 詳細度の既定背景を与え、未知slugのバッジを可読にする。
既知バッジ（--support 等）は詳細度 (0,1,0) が :where()(0,0,0) に必ず勝つため
ソース順に関わらず各自の色を維持する（本指定で上書きされない）。 */
:where(.badge-site) {
background: #475569; /* slate系ニュートラル。白文字とのコントラスト約7:1 */
}
/* === 2026-07-08 デザイン修正指示バッチ（T340）ここまで === */
/* ============================================================
2026-07-10 ナレッジ一覧 / 検索結果 検索フォーム再設計
------------------------------------------------------------
目的: ナレッジ一覧（.ka-search）と検索結果（.sr-search）の検索 UI を
トップ（.fp-search）と同じ「主フィルタ 1 行 + 詳細検索ディスクロージャ」
の見え方に統一する。
経緯: T343 で 種類/機能/バージョンを へ
畳む JS（search-filters.js）を入れたが、装飾 CSS は「追って調整」の
まま未実装で、素の 既定表示＋旧 2 列グリッドのちぐはぐな
見た目のまま放置されていた（顧客指摘 2026-07-10）。
設計（親テーマ継承ポリシー準拠・VKFS/common 非改修）:
- 主フィルタ行 = 製品 DD + キーワード + 検索ボタンを 1 行に。
submit ボタンは VKFS DOM 上 .vkfs__labels の外（form 直下の兄弟）に
あるため、.vkfs__labels を display:contents で潰して、その子
（キーワード / 製品 / details）を submit ボタンと同じ CSS グリッドに
フラット化して並べる。details だけ 2 行目に全幅で落とす。
- 詳細検索 = をアウトラインボタン化、本体はライトグレーの
パネル。中身の select / checkbox は既存共通スタイルを流用。
============================================================ */
/* --- 主フィルタ行: .ka-search / .sr-search を fp-search 風 1 行グリッドへ --- */
.ka-search .vkfs,
.sr-search .vkfs {
max-width: 900px;
margin: 0 auto;
display: grid;
grid-template-columns: minmax(160px, 200px) minmax(0, 1fr) auto;
align-items: end;
gap: 12px 14px;
}
/* .vkfs__labels を潰して子（キーワード/製品/details）を .vkfs グリッド直参加させる */
.ka-search .vkfs__labels,
.sr-search .vkfs__labels {
display: contents;
}
/* 製品 DD = 1 列目 / キーワード = 2 列目 / 検索ボタン = 3 列目（全て 1 行目） */
.ka-search .vkfs__labels > .vkfs__outer-wrap.vkfs__taxonomy,
.sr-search .vkfs__labels > .vkfs__outer-wrap.vkfs__taxonomy {
grid-column: 1;
grid-row: 1;
max-width: none;
width: auto;
margin-bottom: 0;
}
.ka-search .vkfs__labels > .vkfs__outer-wrap.vkfs__keyword,
.sr-search .vkfs__labels > .vkfs__outer-wrap.vkfs__keyword {
grid-column: 2;
grid-row: 1;
max-width: none;
width: auto;
margin-bottom: 0;
}
.ka-search .vkfs > button.vkfs_submit.btn.btn-primary,
.sr-search .vkfs > button.vkfs_submit.btn.btn-primary {
grid-column: 3;
grid-row: 1;
margin-top: 0;
min-width: 96px;
}
/* 種類/機能/バージョンが details へ移動する前（JS 実行前）や JS 無効時の
フォールバック: labels 直下に残る間は全幅で縦積みし、製品 DD との重なりを防ぐ。
移動後は details 内に入り本セレクタ（labels 直下限定）に一致しなくなる。 */
.ka-search .vkfs__labels > .vkfs__outer-wrap.vkfs__block-id--esrij-tx-type,
.ka-search .vkfs__labels > .vkfs__outer-wrap.vkfs__block-id--esrij-tx-function,
.ka-search .vkfs__labels > .vkfs__outer-wrap.vkfs__block-id--esrij-tx-version,
.sr-search .vkfs__labels > .vkfs__outer-wrap.vkfs__block-id--esrij-tx-type,
.sr-search .vkfs__labels > .vkfs__outer-wrap.vkfs__block-id--esrij-tx-function,
.sr-search .vkfs__labels > .vkfs__outer-wrap.vkfs__block-id--esrij-tx-version {
grid-column: 1 / -1;
}
/* --- 詳細検索ディスクロージャ（2 行目・全幅） --- */
.ka-search .vkfs__labels > details.esrij-adv-search,
.sr-search .vkfs__labels > details.esrij-adv-search {
grid-column: 1 / -1;
grid-row: 2;
}
.esrij-adv-search {
margin: 0;
border-top: 1px solid #e5e9ee;
padding-top: 16px;
}
/* summary をアウトラインボタン化。ネイティブ三角マーカーは消す */
.esrij-adv-search__summary {
display: inline-flex;
align-items: center;
gap: 8px;
cursor: pointer;
padding: 9px 20px;
border: 1.5px solid var(--ui-accent);
border-radius: var(--radius);
background: #fff;
color: var(--ui-accent);
font-size: 14px;
font-weight: 700;
line-height: 1.2;
list-style: none;
transition: background 0.15s, color 0.15s, box-shadow 0.15s;
}
.esrij-adv-search__summary::-webkit-details-marker {
display: none;
}
/* 開閉インジケータ（+ / −）を独自クラス側で描画 */
.esrij-adv-search__summary::before {
content: "＋";
font-size: 16px;
font-weight: 700;
line-height: 1;
}
.esrij-adv-search[open] > .esrij-adv-search__summary::before {
content: "－";
}
.esrij-adv-search__summary:hover {
background: var(--ui-accent-hover);
color: #fff;
}
.esrij-adv-search__summary:focus-visible {
outline: none;
box-shadow: 0 0 0 3px rgba(var(--ui-accent-rgb), 0.30);
}
/* 展開パネル: ライトグレー面に 種類 / 機能 / バージョン を縦積み */
.esrij-adv-search__body {
margin-top: 16px;
padding: 20px;
background: #f6f8fa;
border: 1px solid #e5e9ee;
border-radius: var(--radius);
display: flex;
flex-direction: column;
gap: 18px;
}
.esrij-adv-search__body .vkfs__outer-wrap {
max-width: none;
width: auto;
margin-bottom: 0;
}
/* 種類（select）は幅を抑えて左寄せ。機能/バージョン（checkbox）は全幅維持 */
.esrij-adv-search__body .vkfs__outer-wrap.vkfs__block-id--esrij-tx-type {
max-width: 300px;
}
/* --- レスポンシブ: 640px 以下で主フィルタ行を縦積み --- */
@media (max-width: 640px) {
.ka-search .vkfs,
.sr-search .vkfs {
grid-template-columns: 1fr;
}
.ka-search .vkfs__labels > .vkfs__outer-wrap.vkfs__taxonomy,
.sr-search .vkfs__labels > .vkfs__outer-wrap.vkfs__taxonomy,
.ka-search .vkfs__labels > .vkfs__outer-wrap.vkfs__keyword,
.sr-search .vkfs__labels > .vkfs__outer-wrap.vkfs__keyword {
grid-column: 1;
grid-row: auto; /* 1 列積みでは行固定を解除（製品とキーワードの重なり防止） */
}
.ka-search .vkfs > button.vkfs_submit.btn.btn-primary,
.sr-search .vkfs > button.vkfs_submit.btn.btn-primary {
grid-column: 1;
grid-row: auto;
width: 100%;
}
.ka-search .vkfs__labels > details.esrij-adv-search,
.sr-search .vkfs__labels > details.esrij-adv-search {
grid-row: auto;
}
.esrij-adv-search__summary {
width: 100%;
justify-content: center;
}
}
/* === 2026-07-10 ナレッジ検索フォーム再設計 ここまで === */
/* ============================================================
2026-07-23 7/16 研修 預かり事項（即対応 CSS）
============================================================ */
/* T354 (Q40): 本文の小画像が本文幅いっぱいに引き伸ばされる件の是正。
原因は移行コンテンツ（FastAnswer 由来）の画像に付く width="100%" 属性 /
style="width:100%" 指定で、これがあると .sk-body img の max-width:100% を
超えて本文幅まで拡大される（小さな画面キャプチャがボヤけて全幅化）。
対処: 100% 幅を強制している画像だけを対象に width:auto へ戻し、
小画像は等倍（本来のピクセルサイズ）、大画像は max-width:100% で本文幅に収める。
ブロックエディタで意図的に px 幅指定・リサイズした画像（style="width:400px" 等）は
本セレクタ（100% 指定限定）に一致しないため影響しない。
news 本文（.ns-body）も同じ移行由来リスクがあるため併せて対象にする。 */
.sk-body img[width="100%"],
.ns-body img[width="100%"] {
width: auto;
max-width: 100%;
height: auto;
}
.sk-body img[style*="width:100%"],
.sk-body img[style*="width: 100%"],
.ns-body img[style*="width:100%"],
.ns-body img[style*="width: 100%"] {
width: auto !important; /* インライン style を上書きするため !important が必要 */
max-width: 100%;
height: auto;
}
/* T357 (Q40): 用語集一覧の索引ナビ（0-9 + A〜Z のアルファベット見出し）が
.gl-index__inner の max-width:900px に収まらず 2 行に折り返す件の是正。
27 個のボタンは 1 行に約 970px 必要なため、内側コンテナ幅を広げて
デスクトップでは 1 行に収める（狭幅では従来どおり折り返す＝可読性維持）。 */
.gl-index__inner {
max-width: 1024px;
}
/* ============================================================
2026-08-12 T371 / D56: 絞り込み検索の結果表示・ナレッジID 欄・タブ移動順
------------------------------------------------------------
目的:
- T371 (B04): キーワードを入力せず絞り込みだけで検索したときに、件数と
「何で検索したか」が画面に出るようにする。0 件時は絞り込み向けの案内と
クリア導線を出す。
- T371 (D68②): 「詳細検索」にナレッジID 欄を足す（JS が DOM 注入。
フォームの実体は DB 上の filter-search 投稿のため、子テーマのデプロイだけで
完結させる意図）。
- D56 (T364): ナレッジ一覧 / 検索結果で「詳細検索」ディスクロージャが
submit ボタンより前の DOM に居たためタブ順が見た目とズレていた。JS 側で
form 直下の末尾へ移したので、グリッド配置指定をその位置にも当て直す。
親テーマ継承ポリシー準拠: 独自差分は独自クラス（.sr-results__* / .esrij-kid /
.esrij-search-hint）を基点に本末尾セクションへ集約。common/ は触らない。
============================================================ */
/* --- D56: form 直下へ移した「詳細検索」のグリッド配置 ---
従来の `.vkfs__labels > details` 指定と同じ見え方を維持する（.vkfs__labels は
display:contents のため、labels 直下でも form 直下でも同じ .vkfs グリッドの
アイテムになる）。旧セレクタは JS 未実行時のフォールバックとして残置。 */
.ka-search .vkfs > details.esrij-adv-search,
.sr-search .vkfs > details.esrij-adv-search {
grid-column: 1 / -1;
grid-row: 2;
}
/* --- T371: 検索フォーム直下の補足文言（キーワードは任意） --- */
.esrij-search-hint {
max-width: 900px;
margin: 10px auto 0;
font-size: 14px;
color: #666;
line-height: 1.6;
}
/* --- T371: 検索条件の併記行（件数行の直下） --- */
.sr-results__conditions {
margin: 4px 0 14px;
font-size: 14px;
color: #555;
line-height: 1.7;
}
.sr-results__conditions-label {
font-weight: 700;
margin-right: 4px;
}
.sr-results__condition {
display: inline-block;
margin-right: 10px;
white-space: nowrap;
}
/* --- T371: ナレッジID を引き当てられなかったときの案内 --- */
.sr-results__notice {
margin: 0 0 12px;
padding: 10px 14px;
border: 1px solid #e6d28a;
border-left: 4px solid #d9a800;
border-radius: var(--radius);
background: #fdf8e6;
font-size: 14px;
line-height: 1.7;
color: #5a4a10;
}
/* --- T371: 0 件時のクリア導線 --- */
.sr-noresults__reset {
margin: 20px 0 32px;
}
.sr-noresults__reset-link {
display: inline-flex;
align-items: center;
padding: 8px 18px;
border: 1.5px solid var(--ui-accent);
border-radius: var(--radius);
color: var(--ui-accent);
background: #fff;
font-size: 14px;
font-weight: 700;
line-height: 1.2;
text-decoration: none;
transition: background 0.15s, color 0.15s;
}
.sr-noresults__reset-link:hover,
.sr-noresults__reset-link:focus {
background: var(--ui-accent-hover);
color: #fff;
}
/* --- T371 (D68②): 「詳細検索」内のナレッジID 欄 ---
.esrij-adv-search__body 内の他の軸（種類 select 等）と同じ見え方に揃える。
幅を絞るセレクタは VKFS の `.vkfs input[type="text"] { max-width: 100% }`
（詳細度 0,1,1）を上回る必要があるため、wrap を経由して書く。補足文言は
input 幅に引きずられないよう wrap 側は絞らない。 */
.esrij-adv-search__body .vkfs__outer-wrap.esrij-kid .esrij-kid__input {
max-width: 300px;
}
.esrij-kid__input {
width: 100%;
height: 44px;
padding: 0 12px;
font-size: 14px;
border: 1px solid #ced4da;
border-radius: var(--radius);
background: #fff;
color: #333;
box-sizing: border-box;
text-align: left;
}
.esrij-kid__input:focus {
border-color: var(--ui-accent);
outline: none;
box-shadow: 0 0 0 2px rgba(var(--ui-accent-rgb), 0.15);
}
.esrij-kid__note {
margin: 6px 0 0;
font-size: 12px;
color: #666;
line-height: 1.6;
}
/* --- レスポンシブ: 640px 以下は主フィルタ行が縦積みになるため行固定を解除 --- */
@media (max-width: 640px) {
.ka-search .vkfs > details.esrij-adv-search,
.sr-search .vkfs > details.esrij-adv-search {
grid-row: auto;
}
.esrij-kid__input {
max-width: none;
}
}
/* === 2026-08-12 T371 / D56 ここまで === */
/* ============================================================
T378 — 再デザイン 2026-08 共通パーツ（4-1〜4-9）
------------------------------------------------------------
仕様の正:
docs/ui-structure/design-guide-2026-08_大滝様ご回答_20260816.md
docs/ui-structure/design-guide-2026-08-v2.html（顧客・大滝様へ提示中の確定版）
ここは「部品の意匠」を 1 か所に集めるセクション。画面別の指定
（fp- / sk- / ps- …）より後ろに置くことで、同じ詳細度なら後勝ちで
このセクションが効く。個別画面の事情で外したい場合は、画面別の
セクション側に詳細度の高いセレクタを足して打ち消すこと。
色・角丸・文字サイズは style.css の意味トークンを経由する。
ここで hex を直書きしない（パレット外の色を新設する場合のみ例外）。
============================================================ */
/* --- 4-1 ボタン ------------------------------------------------
大 52px/16px（画面の主役＝検索）／標準 44px/14px（塗り・線）／
キャンセル 44px/14px（地グレー）の 4 種類に集約する。
現状は場所ごとに padding と文字サイズがばらついていたため、
ここで高さ・文字・角丸・配色を揃える。 */
/* 標準（塗り） */
.ps-cta__btn.filled,
.ps-btn-green,
.ct-btn--primary {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
height: 44px;
padding: 0 20px;
font-size: var(--fs-14);
font-weight: 700;
line-height: 1;
border-radius: var(--radius);
border: 1px solid var(--ui-accent);
background: var(--ui-accent);
color: #fff;
text-decoration: none;
cursor: pointer;
}
.ps-cta__btn.filled:hover,
.ps-btn-green:hover,
.ct-btn--primary:hover {
background: var(--ui-accent-hover);
border-color: var(--ui-accent-hover);
color: #fff;
}
/* 標準（線）— ホバーで地が淡い青に変わる（v2 ガイド 4-1） */
.ps-cta__btn.outline,
.ps-btn-outline,
.ct-btn--outline,
.ct-pagenav__list li a,
.sr-noresults__reset-link {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
height: 44px;
padding: 0 20px;
font-size: var(--fs-14);
font-weight: 700;
line-height: 1;
border-radius: var(--radius);
border: 1px solid var(--ui-accent);
background: #fff;
color: var(--ui-accent);
text-decoration: none;
cursor: pointer;
}
.ps-cta__btn.outline:hover,
.ps-btn-outline:hover,
.ct-btn--outline:hover,
.ct-pagenav__list li a:hover,
.sr-noresults__reset-link:hover {
background: var(--ui-accent-tint);
border-color: var(--ui-accent-hover);
color: var(--ui-accent-hover);
text-decoration: none;
}
/* アイコン付き（大滝様ご指示）。
Material Symbols は header.php で読み込み済みのため、テンプレートに
手を入れず擬似要素で足せる。文字列は合字（ligature）名。 */
/* すでにテンプレート側にアイコンを持つボタン（お問い合わせページ等）には
足さない。二重にアイコンが並んでしまうため。 */
.ps-cta__btn.filled:not(:has(.material-symbols-outlined))::before,
.ps-btn-green:not(:has(.material-symbols-outlined))::before,
.ct-btn--primary:not(:has(.material-symbols-outlined))::before,
.ps-cta__btn.outline:not(:has(.material-symbols-outlined))::before,
.ps-btn-outline:not(:has(.material-symbols-outlined))::before,
.ct-btn--outline:not(:has(.material-symbols-outlined))::before {
font-family: 'Material Symbols Outlined';
font-weight: normal;
font-variation-settings: 'FILL' 1;
font-size: 20px;
line-height: 1;
content: 'arrow_forward';
}
.sr-noresults__reset-link::before {
font-family: 'Material Symbols Outlined';
font-variation-settings: 'FILL' 1;
font-size: 20px;
line-height: 1;
content: 'refresh';
}
/* 大（52px）＝検索ボタン。4-4 で虫眼鏡アイコンを付ける */
.fp-search__btn,
.nf-search__btn,
.search-box .search-submit,
.pl-search .vkfs button.vkfs_submit.btn.btn-primary,
.nf-search .vkfs button.vkfs_submit.btn.btn-primary,
.ka-search .vkfs button.vkfs_submit.btn.btn-primary,
.sr-search .vkfs button.vkfs_submit.btn.btn-primary,
.fp-search .vkfs button.vkfs_submit.btn.btn-primary,
.ps-search .vkfs button.vkfs_submit.btn.btn-primary {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
height: 52px;
padding: 0 24px;
font-size: var(--fs-16);
font-weight: 700;
line-height: 1;
border-radius: var(--radius);
border: 1px solid var(--ui-accent);
background: var(--ui-accent);
color: #fff;
cursor: pointer;
}
.fp-search__btn:hover,
.nf-search__btn:hover,
.search-box .search-submit:hover,
.pl-search .vkfs button.vkfs_submit.btn.btn-primary:hover,
.nf-search .vkfs button.vkfs_submit.btn.btn-primary:hover,
.ka-search .vkfs button.vkfs_submit.btn.btn-primary:hover,
.sr-search .vkfs button.vkfs_submit.btn.btn-primary:hover,
.fp-search .vkfs button.vkfs_submit.btn.btn-primary:hover,
.ps-search .vkfs button.vkfs_submit.btn.btn-primary:hover {
background: var(--ui-accent-hover);
border-color: var(--ui-accent-hover);
}
.fp-search__btn::before,
.nf-search__btn::before,
.search-box .search-submit::before,
.pl-search .vkfs button.vkfs_submit.btn.btn-primary::before,
.nf-search .vkfs button.vkfs_submit.btn.btn-primary::before,
.ka-search .vkfs button.vkfs_submit.btn.btn-primary::before,
.sr-search .vkfs button.vkfs_submit.btn.btn-primary::before,
.fp-search .vkfs button.vkfs_submit.btn.btn-primary::before,
.ps-search .vkfs button.vkfs_submit.btn.btn-primary::before {
font-family: 'Material Symbols Outlined';
font-weight: normal;
font-variation-settings: 'FILL' 1;
font-size: 22px;
line-height: 1;
content: 'search';
}
/* --- 4-6 に準じた横断検索のタブ --------------------------------
esrij-algolia-bridge が「フォルダ型・緑」のタブ CSS をインラインで
出力している。同プラグインは相談所さん管轄で弊社は中身を改修しない
取り決めのため（.claude/rules/soudanjyo-policy.md）、ここで上書きする。
見せ方は 4-6 と同じ「並列 ＋ 太字 ＋ 下の帯」に揃える。 */
.search-tabs {
border-bottom: 2px solid var(--border-color);
background: none;
}
.search-tabs__tab {
margin-right: 0;
bottom: 0;
padding: 10px 20px;
background: none;
border: 0;
border-bottom: 3px solid transparent;
border-radius: 0;
color: var(--text-light);
}
.search-tabs__tab:hover {
background: none;
color: var(--text-color);
}
.search-tabs__tab.is-active {
padding-top: 10px;
background: none;
border: 0;
border-bottom: 3px solid var(--ui-accent-strong);
border-radius: 0;
color: var(--ui-accent-strong);
}
.search-tabs__tab.is-active .search-tabs__count {
color: var(--ui-accent-strong);
}
/* --- 4-4 検索フォーム ------------------------------------------
高さ 52px でどの画面も統一。製品セレクト・キーワード入力・検索ボタンを
それぞれ独立した箱にして間隔をあける（確定デザイン画像の組み方）。
「入力欄の左端にメインカラーの線を入れる」意匠は外す。 */
.fp-search__input,
.search-box #search-input,
.nf-search .vkfs__input-wrap--keyword input[type="text"],
.pl-search .vkfs__input-wrap--keyword input[type="text"],
.ka-search .vkfs__input-wrap--keyword input[type="text"],
.sr-search .vkfs__input-wrap--keyword input[type="text"],
.fp-search .vkfs__input-wrap--keyword input[type="text"],
.ps-search .vkfs__input-wrap--keyword input[type="text"] {
height: 52px;
font-size: var(--fs-16);
border: 1px solid var(--ui-accent);
border-radius: var(--radius);
}
.fp-search__product-select select,
.search-box .search-product-dropdown,
.nf-search select.vkfs__input-wrap--select,
.pl-search select.vkfs__input-wrap--select,
.ka-search select.vkfs__input-wrap--select,
.sr-search select.vkfs__input-wrap--select,
.fp-search select.vkfs__input-wrap--select,
.ps-search select.vkfs__input-wrap--select {
height: 52px;
font-size: var(--fs-16);
border: 1px solid var(--ui-accent);
border-radius: var(--radius);
}
/* 連結（角丸を片側だけ落とす／隣接ボーダーを消す）意匠の解除 */
.fp-search__input-wrap {
gap: 12px;
}
.search-box form:not(:has(select)) #search-input {
border-left: 1px solid var(--ui-accent);
}
/* --- 4-2 タグ・バッジ ------------------------------------------
本文より目立ってはいけない部品。地色は「淡い青」と「グレー」の
2 系統だけに絞る（種類ごとの色分けはしない）。 */
.ka-tag,
.sk-tag,
a.sk-tag,
#sidebar .esrij-kb-terms__chip,
.na-card__badge,
.badge-site {
display: inline-block;
padding: 2px 8px;
font-size: var(--fs-12);
font-weight: 600;
line-height: 1.4;
border-radius: var(--radius);
border: 0;
background: var(--ui-accent-tint);
color: var(--ui-accent-strong);
text-decoration: none;
}
.ka-tag:hover,
a.sk-tag:hover,
#sidebar .esrij-kb-terms__chip:hover {
background: var(--col-Blue-lighter);
color: var(--ui-accent-strong);
text-decoration: none;
}
/* 外部サイトのバッジはグレー系 */
.badge-site,
.badge-site--docs,
.badge-site--corporate,
.na-card__badge--external,
.fp-news__badge--external {
background: var(--gray-exlight);
color: var(--gray-dark);
}
/* サポートサイト自身のバッジだけはメインカラーで区別する */
.badge-site--support {
background: var(--ui-accent);
color: #fff;
}
/* 「重要」バッジ。従来の #e53935 はパレット外だったため Red-darker に寄せる。
.fp-news__badge は「重要」専用のバッジ（--external だけが別用途）。 */
.na-card__badge--important,
.ns-header__badge,
.fp-news__badge,
.fp-news__item--important .fp-news__badge {
background: var(--col-Red-darker);
color: #fff;
}
.fp-news__badge--external {
background: var(--gray-exlight);
color: var(--gray-dark);
}
/* 重要お知らせのタイトルも同じ赤に揃える */
.fp-news__item--important .fp-news__row a {
color: var(--col-Red-darker);
}
.fp-news__item--important .fp-news__row a:hover {
color: var(--col-Red-exdark);
}
/* --- 4-3 カード ------------------------------------------------
アイコン左 ＋ タイトル右 → 区切り線 → 説明文。
DOM は変えない（顧客が固定ページで同じクラスを直接使っているため）。
顧客のページはアイコンを .fp-purpose__icon ではなく ![]()
で
直接入れているので、そちらも同じ位置・同じ大きさに収まるようにする。 */
.fp-purpose__card {
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: center;
gap: 0 14px;
padding: 20px;
border: 1px solid var(--ui-accent);
border-radius: var(--radius);
background: #fff;
text-align: left;
}
.fp-purpose__icon,
.fp-purpose__card > img {
flex: 0 0 44px;
width: 44px;
height: 44px;
margin: 0;
object-fit: contain;
}
/* 弊社が置くアイコンは「濃い青の円 ＋ 白の塗りアイコン」。
顧客が入れている ![]()
（製品アイコン）には円を付けない。 */
.fp-purpose__icon {
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: var(--ui-accent-strong);
color: #fff;
font-size: 24px;
font-variation-settings: 'FILL' 1;
}
.fp-purpose__label {
flex: 1 1 0; /* 長いタイトルでもアイコンと同じ行に留める（折り返しは行内で） */
min-width: 0;
margin: 0;
font-size: var(--fs-20);
font-weight: 700;
color: var(--text-color);
}
.fp-purpose__desc {
flex: 1 0 100%;
margin-top: 14px;
padding-top: 14px;
border-top: 1px solid var(--border-color);
font-size: var(--fs-16);
line-height: 1.6;
color: var(--text-light);
}
/* 文字揃え: トップページだけ中央。それ以外（製品ページ・固定ページ・
関連記事）は左。顧客の固定ページは説明文が 3〜4 行と長く、中央だと
行頭が毎行ずれて読みにくいため（v2 ガイド 4-3 の確定表）。
判別は body クラスではなくラッパーで行う。親テーマは body に
`_page` しか付けずトップとその他を区別できない一方、トップのカードは
front-page.php の の中にあり、顧客が
固定ページに貼るカードは .fp-purpose__grid 単体で置かれるため。 */
.fp-purpose .fp-purpose__card {
justify-content: center;
text-align: center;
}
.fp-purpose .fp-purpose__label {
flex: 0 1 auto;
}
/* 製品一覧の主力製品カードも 4-3 の形（アイコン左＋タイトル右）に揃える。
T307（#132）で中央揃えにしていたが、2026-08 の再デザインで
「カードはアイコン左＋タイトル右／トップ以外は左揃え」に確定したため
そちらへ寄せる。アイコンは製品の SVG なので円は付けない。 */
.pl-featured__card {
flex-direction: row;
flex-wrap: wrap;
align-items: center;
gap: 0 14px;
padding: 20px;
border-color: var(--ui-accent);
text-align: left;
}
.pl-featured__icon {
flex: 0 0 44px;
width: 44px;
height: 44px;
margin: 0;
}
.pl-featured__name {
flex: 1 1 auto;
margin: 0;
font-size: var(--fs-20);
}
.pl-featured__desc,
.pl-featured__link {
flex: 1 0 100%;
margin: 0;
}
/* 区切り線は「アイコン＋タイトルの行の直後」に 1 本だけ引く。
説明文が無いカード（現状の /products）ではリンク側に引く。 */
.pl-featured__desc,
.pl-featured__card:not(:has(.pl-featured__desc)) .pl-featured__link {
margin-top: 14px;
padding-top: 14px;
border-top: 1px solid var(--border-color);
}
.pl-featured__desc {
font-size: var(--fs-16);
}
/* --- 本文見出し（D70①）----------------------------------------
GIS 基礎解説・用語集の本文に見出しスタイルが当たっておらず、
ナレッジ・お知らせと見え方が揃っていなかった。同じ意匠にする。
大きさは 3 章の文字トークン（h2 24 / h3 20 / h4 18・太字）。 */
.sk-body h2,
.ns-body h2,
.gg-single-body h2,
.gl-single-body h2,
.ps-richtext--full h2 {
font-size: var(--fs-24);
font-weight: 700;
margin: 32px 0 16px;
padding-bottom: 8px;
border-bottom: 2px solid var(--ui-accent-strong);
}
.sk-body h3,
.ns-body h3,
.gg-single-body h3,
.gl-single-body h3,
.ps-richtext--full h3 {
font-size: var(--fs-20);
font-weight: 700;
margin: 24px 0 12px;
padding-left: 12px;
border-left: 3px solid var(--ui-accent-strong);
}
.sk-body h4,
.ns-body h4,
.gg-single-body h4,
.gl-single-body h4,
.ps-richtext--full h4 {
font-size: var(--fs-18);
font-weight: 700;
margin: 20px 0 10px;
}
/* daext-helpful（フィードバック）の h3 は本文見出しではないので除外 */
.sk-body .daexthefu-container h3,
.ns-body .daexthefu-container h3,
.gg-single-body .daexthefu-container h3,
.gl-single-body .daexthefu-container h3 {
border-left: none;
padding-left: 0;
font-size: var(--fs-16);
}
/* --- 4-5 検索キーワードのハイライト（D77）----------------------
タイトル側に指定が無くブラウザ標準の黄色になっていたのが不揃いの原因。
タイトル・本文とも同じ色にする。 */
.sr-card__title mark,
.sr-card__excerpt mark,
.ka-card__title mark,
.ka-card__excerpt mark,
.sk-body mark,
mark {
background: var(--highlight-bg);
color: inherit;
padding: 0 2px;
}
/* --- 4-8 フィードバック UI（D74）-------------------------------
①「はい」「いいえ」の横幅を揃える ②「送信」「キャンセル」も揃える
③文字を上下中央に ④キャンセルは文字色ではなく背景をグレーに
＋ 大滝様ご指示: 送信＝右／キャンセル＝左（DOM は 送信→キャンセル の
順なので、並びを入れ替えて表示する） */
/* daext-helpful 側が width / height / padding / display を !important で
固定しているため、ここでも !important を使わないと当たらない。
（プラグイン本体は改変しない方針のため CSS で上書きする） */
.daexthefu-container .daexthefu-button {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: 6px;
box-sizing: border-box !important;
width: 140px !important;
height: 44px !important;
padding: 0 16px !important;
margin: 0 !important;
font-size: var(--fs-14);
font-weight: 700;
line-height: 1;
border-radius: var(--radius);
border: 1px solid var(--ui-accent);
background: #fff;
color: var(--ui-accent);
cursor: pointer !important;
}
.daexthefu-container .daexthefu-button:hover {
background: var(--ui-accent-tint);
border-color: var(--ui-accent-hover);
color: var(--ui-accent-hover);
opacity: 1 !important;
}
/* D74③: プラグイン既定の height:32px + overflow:hidden で文字が上寄りに
見えていた。高さを解除して上下中央に置く。 */
.daexthefu-container .daexthefu-button-text {
height: auto !important;
overflow: visible !important;
line-height: 1;
}
.daexthefu-container .daexthefu-buttons,
.daexthefu-container .daexthefu-comment-buttons-container {
display: flex !important;
align-items: center !important;
gap: 12px !important;
}
/* 送信＝右／キャンセル＝左（DOM は 送信 → キャンセル の順） */
.daexthefu-container .daexthefu-comment-buttons-container {
flex-direction: row-reverse !important;
justify-content: flex-end !important;
}
.daexthefu-container .daexthefu-comment-submit {
background: var(--ui-accent);
border-color: var(--ui-accent);
color: #fff;
}
.daexthefu-container .daexthefu-comment-submit:hover {
background: var(--ui-accent-hover);
border-color: var(--ui-accent-hover);
color: #fff;
}
.daexthefu-container .daexthefu-comment-cancel {
background: var(--gray-exlight);
border-color: var(--gray-exlight);
color: var(--gray-darker);
}
.daexthefu-container .daexthefu-comment-cancel:hover {
background: var(--gray-lighter);
border-color: var(--gray-lighter);
color: var(--gray-darker);
}
.daexthefu-container .daexthefu-comment-submit::before {
font-family: 'Material Symbols Outlined';
font-variation-settings: 'FILL' 1;
font-size: 18px;
line-height: 1;
content: 'send';
}
.daexthefu-container .daexthefu-comment-cancel::before {
font-family: 'Material Symbols Outlined';
font-variation-settings: 'FILL' 1;
font-size: 18px;
line-height: 1;
content: 'close';
}
.daexthefu-container .daexthefu-comment-textarea {
border-radius: var(--radius);
border: 1px solid var(--border-color);
font-size: var(--fs-14);
}
/* 狭い画面では設問とボタンを縦に積む。プラグイン既定の横並び（side-by-side）
のままだと、ボタンの幅を固定した分だけ設問が潰れて縦書きのようになる。 */
@media (max-width: 640px) {
.daexthefu-container .daexthefu-feedback {
display: block !important;
}
.daexthefu-container .daexthefu-buttons-container {
margin-top: 12px !important;
}
.daexthefu-container .daexthefu-button {
width: 120px !important;
}
}
/* --- 4-9 ページネーション --------------------------------------
36×36px・14px・角丸 5px・現在地は #00619B。
.sr- / .ka- / .gg- の 3 系統が別々に定義されているのでここで揃える。 */
.sr-pagination .page-numbers,
.ka-pagination .page-numbers,
.gg-pagination .page-numbers,
.na-pagination .page-numbers {
min-width: 36px;
height: 36px;
font-size: var(--fs-14);
border-radius: var(--radius);
}
.sr-pagination .page-numbers.current,
.ka-pagination .page-numbers.current,
.gg-pagination .page-numbers.current,
.na-pagination .page-numbers.current,
.ka-pagination .page-numbers .current {
background: var(--ui-accent);
border-color: var(--ui-accent);
color: #fff;
}
/* === T378 共通パーツ ここまで === */
/* ============================================================
T379 — 目次・サイドバー・親子タブの作り直し（2026-08）
（D46 / D57 / D70② / D73①②③④ / D78 / MT05 / 追加開発 #19）
目次そのものと親子タブの意匠は esrij-support-core 側
（custom-toc.css / document-nav.css）にある。ここに置くのは
「レイアウト＝本文とサイドバーの関係」と「用語集の索引」。
============================================================ */
/* --- D78 / 4-7: サイドバーは 1024px 未満で本文の下へ ------------
目次は T379 で本文の上部へ移したので、下へ回るのはカテゴリー等だけになる。
ナレッジ・固定ページ（sk-）／お知らせ（ns-）／基礎解説（gg-）の 3 系統とも
同じ閾値で揃える。
※ 従来 .sk-wrap--with-sidebar の 768px 指定は grid-template-columns を
書いていたが、当の要素は display:flex のため何も効いていなかった
（＝狭い画面でも 2 カラムのままだった）。flex-direction で書き直す。 */
@media (max-width: 1024px) {
.sk-wrap--with-sidebar,
.ns-wrap--with-sidebar,
.gg-single-wrap--with-sidebar,
.gl-single-wrap--with-sidebar {
flex-direction: column;
gap: 32px;
}
.sk-wrap--with-sidebar .sk-article {
width: 100%;
}
.sk-sidebar,
.ns-sidebar,
.gg-single-sidebar,
.gl-single-sidebar {
width: 100%;
}
/* 幅の実体は id セレクタの #sidebar{width:300px}（既存の全幅化は 768px 止まり）。
クラス側だけ書いても詳細度で負けるので、同じ形で 1024px まで引き上げる。 */
#sidebar {
width: 100%;
}
/* 本文の下へ回った後まで追従させると画面を覆うので、追従を解除する。 */
.sk-main.active01 .sidebar-inner,
.ns-main.active01 .sidebar-inner,
.gg-single-main.active01 .sidebar-inner,
.gl-single-main.active01 .sidebar-inner,
.sk-main.active01 .sidebar.active .sidebar-inner,
.ns-main.active01 .sidebar.active .sidebar-inner,
.gg-single-main.active01 .sidebar.active .sidebar-inner,
.gl-single-main.active01 .sidebar.active .sidebar-inner {
position: static;
top: auto;
}
}
/* --- D46: サイドバー非表示時は本文をサイドバー領域まで広げる ----
「サイドバーを非表示」が有効な記事、およびサイドバーに出すものが無い記事は
1 カラム＋本文全幅にする。ナレッジ（.sk-）は既に全幅だったが、
基礎解説（800px）とお知らせ（860px）が幅を絞ったままで 1 カラムに見えなかった。 */
.gg-single-wrap--no-sidebar .gg-single-article,
.gl-single-wrap--no-sidebar .gl-single-article,
.ns-wrap--no-sidebar {
max-width: 100%;
}
/* --- D73① / D73②: 用語集の索引 --------------------------------
① ログイン時、索引が WP 管理バーの下へ潜っていた（top:0 固定のため）。
追従要素の実際の下端（support.js が配信する --esrij-sticky-top）に貼る。
② 索引をクリックしたときの着地位置は support.js のハンドラが合わせる。
JS が無い場合の保険として scroll-margin-top も入れておく。
T391: 位置指定は親子タブ（.doc-nav）と同じ「--esrij-sticky-top ＋ --esrij-sticky-gap」の
式に統一する。ただし索引の余白は 0 のまま＝見た目は従来どおり。理由は 2 つ。
①今回の指摘は親子タブについてのもので、索引に余白の要望は出ていない
②索引は前に兄弟要素（.ka-results）があり、隙間を塞ぐ帯を敷くと追従していない
ときに直前の要素の下端を 10px 覆ってしまう（タブは容器の先頭で前が無いため
この問題が起きない）。余白を入れるなら塞ぐ帯とセットで別途検討する。
変数を明示的に 0 にしておくことで、support.js の着地オフセット計算も
「索引には余白が無い」と正しく認識する（:root の 10px を継承させない）。
保険の scroll-margin-top も、72px という概算をやめて support.js が実測配信する
--esrij-anchor-offset に寄せる（値の出どころを 1 つにする）。 */
.gl-index {
--esrij-sticky-gap: 0px;
top: calc(var(--esrij-sticky-top, 0px) + var(--esrij-sticky-gap, 0px));
}
.gl-list__section {
scroll-margin-top: var(--esrij-anchor-offset, calc(clamp(70px, 9.1vw, 100px) + 90px));
}
/* --- 4-7: 目次を本文上部へ出したことによる余白調整 --------------
基礎解説は本文が .gg-single-body 直開始だったため、目次との間を空ける。 */
.gg-single-article .esrij-toc--inline,
.gl-single-article .esrij-toc--inline {
margin-top: 8px;
}
/* === T379 ここまで === */
/* ============================================================
T380 — ナレッジ詳細の作り込み（2026-08 再デザイン・ガイド 5-3）
------------------------------------------------------------
T378（トークン・共通パーツ）と T379（目次・サイドバー・親子タブ）の
上に 5-3「ナレッジ詳細」を組み上げるためのセクション。
画面固有の骨格と余白は上の「ナレッジ詳細」セクションに置いてある。
ここに置くのは、記事の末尾に並ぶブロック（フィードバック・共有・
関連記事）どうしの関係のように、記事系テンプレートで共通に効かせたいもの。
============================================================ */
/* --- 4-8: フィードバックを「記事末尾のブロック」として立てる ----
ボタンの並び・幅・順序は T378 が持っている（幅 140px・送信＝右）。
ここで足すのは ①記事末尾の独立した部品としての「面」 ②下記のとおり
環境によって当たらなかった配色・文字。
【重要・T380 で判明】daext-helpful は管理画面の設定から
`wp-content/uploads/daexthefu_uploads/custom-1.css` を生成し、
**`!important` 付き・クラス 3 個の高い詳細度**でボタンの地色・文字・枠・
角丸・コンテナの padding / border まで固定する。
このファイルは**コードではなく環境ごとのデータ**で、ローカル（MAMP）は
中身が空・wp70 と本番はプラグイン既定のまま（約 4.7KB）という差があった。
そのため 4-8（D74）は**ローカルでだけ正しく見えていて、wp70・本番では
当たっていなかった**（はい／いいえがグレーの塗り、送信が黒、角丸 4px 等）。
対処は CSS 側で行う。プラグイン本体は改変しない方針（相談所さん管轄では
ないが、設定データに依存させると環境ごとにずれ、顧客が設定を保存し直すたび
再発するため）。プラグインの生成 CSS はクラス 3 個＋`!important` なので、
**id セレクタ（プラグインが必ず出す `#daexthefu-container`）を前置**して
詳細度で確実に上回る。読み込み順に依存しないのが狙い。 */
.daexthefu-container {
margin-top: 40px !important;
margin-bottom: 0 !important;
padding: 24px !important;
border-width: 1px !important;
border-style: solid !important;
border-color: var(--border-color) !important;
border-radius: var(--radius);
background: var(--bg-light);
}
/* プラグイン既定は Inter を強制する。サイトの本文と書体が変わってしまうため戻す。 */
#daexthefu-container,
#daexthefu-container * {
font-family: inherit !important;
}
/* 「お困りごとは解決しましたか？」は本文見出しではないので、本文 h3 の
縦罫（T378 の D70① 系）を引き継がせず、ボタンと同じ行で上下中央に置く。 */
#daexthefu-container .daexthefu-title {
margin: 0;
font-size: var(--fs-16) !important;
font-weight: 700 !important;
line-height: 1.5 !important;
color: var(--text-color) !important;
}
.daexthefu-container .daexthefu-feedback {
align-items: center;
}
/* 4-1 の標準ボタン（線）。プラグイン既定はグレーの塗り＋19px・行送り 48px。 */
#daexthefu-container .daexthefu-button.daexthefu-yes,
#daexthefu-container .daexthefu-button.daexthefu-no {
background: #fff !important;
border-color: var(--ui-accent) !important;
}
#daexthefu-container .daexthefu-button.daexthefu-yes:hover,
#daexthefu-container .daexthefu-button.daexthefu-no:hover {
background: var(--ui-accent-tint) !important;
border-color: var(--ui-accent-hover) !important;
}
#daexthefu-container .daexthefu-button-text {
font-size: var(--fs-14) !important;
font-weight: 700 !important;
line-height: 1 !important;
color: var(--ui-accent) !important;
}
#daexthefu-container .daexthefu-button:hover .daexthefu-button-text {
color: var(--ui-accent-hover) !important;
}
/* 送信＝メインカラーの塗り／キャンセル＝背景グレー（D74・大滝様ご指示）。 */
#daexthefu-container .daexthefu-comment-submit {
background: var(--ui-accent) !important;
border-color: var(--ui-accent) !important;
color: #fff !important;
}
#daexthefu-container .daexthefu-comment-submit:hover {
background: var(--ui-accent-hover) !important;
border-color: var(--ui-accent-hover) !important;
}
#daexthefu-container .daexthefu-comment-cancel {
background: var(--gray-exlight) !important;
border-color: var(--gray-exlight) !important;
color: var(--gray-darker) !important;
}
#daexthefu-container .daexthefu-comment-cancel:hover {
background: var(--gray-lighter) !important;
border-color: var(--gray-lighter) !important;
}
#daexthefu-container .daexthefu-comment-submit,
#daexthefu-container .daexthefu-comment-cancel {
font-size: var(--fs-14) !important;
font-weight: 700 !important;
line-height: 1 !important;
}
/* 4-10: 角丸は 5px に統一（プラグイン既定は 4px）。 */
#daexthefu-container .daexthefu-button,
#daexthefu-container .daexthefu-comment-textarea {
border-radius: var(--radius) !important;
}
#daexthefu-container .daexthefu-comment-textarea {
border-color: var(--border-color) !important;
font-size: var(--fs-14) !important;
line-height: 1.6 !important;
color: var(--text-color) !important;
}
#daexthefu-container .daexthefu-comment-label,
#daexthefu-container .daexthefu-comment-character-counter-number,
#daexthefu-container .daexthefu-comment-character-counter-text {
font-size: var(--fs-14) !important;
color: var(--text-light) !important;
}
/* 送信後の御礼文はプラグイン既定が上下 35px で、枠を付けると間延びする。 */
#daexthefu-container .daexthefu-successful-submission-text {
margin: 0 !important;
font-size: var(--fs-16) !important;
font-weight: 700 !important;
color: var(--ui-accent-strong) !important;
}
/* === T380 ここまで === */
/* ============================================================
* T401 / MT08: 製品ページのカードを確定デザインへ展開
* 仕様の正 = docs/intake/再デザインPJ/esriジャパンさまトップページデザイン1.png
* （顧客ご質問1「TOP のカードを変えると他ページのカードも変わるのか」への
* 大滝様ご回答。確定版ガイド v2 の 5-5「製品詳細下部のカードは
* デザインB_1 を参照＝トップのカード意匠を展開」と同じ指示）
* ------------------------------------------------------------
* T378 の再デザインでカード意匠を .fp-purpose__card / .pl-featured__card にだけ
* 当てたため、製品詳細（taxonomy-product.php）の製品リソース・My Esri が
* 旧意匠（グレー枠・円なしの線アイコン・14px タイトル）のまま残っていた。
* 絵から実測した値: 枠 #00619B / アイコンの円 70px・#034B77・白のグリフ 36px /
* タイトル 20px / カード内の区切り線 1px。
* ============================================================ */
/* --- 製品リソース（.ps-reslink）---
幅と左右パディングは絵の実測（カード 216px・左右 18px）に合わせる。
「製品ライフサイクル」が 20px で 1 行に収まる下限がこの値。 */
.ps-reslink {
flex-basis: 216px;
max-width: 216px;
border-color: var(--ui-accent);
gap: 18px;
padding: 16px 12px 32px;
}
.ps-reslink__icon {
display: flex;
align-items: center;
justify-content: center;
width: 70px;
height: 70px;
border-radius: 50%;
background: var(--ui-accent-strong);
color: #fff;
}
.ps-reslink__icon svg {
width: 36px;
height: 36px;
}
.ps-reslink__title {
font-size: var(--fs-20);
color: var(--text-color);
}
/* 上の max-width 指定が既存のモバイル用 flex-basis（130px）より後ろに来るため、
狭い画面での指定をここで置き直す（130px ではタイトルが 3 行に割れる）。 */
@media (max-width: 600px) {
.ps-reslink {
flex-basis: 150px;
}
}
/* --- My Esri カード（.ps-myesri-card）---
DOM は変えずに「アイコン ＋ タイトル → 区切り線 → 説明文 → ボタン」へ組み替える。
説明文に flex-basis:100% を持たせることで、以降のボタンが次の行へ送られる。 */
.ps-myesri-card {
display: flex;
/* .ps-support-card が column 指定のため row を明示する（アイコン左＋タイトル右）。 */
flex-direction: row;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 0 14px;
border-color: var(--ui-accent);
padding: 32px 40px;
}
.ps-myesri-card__icon {
display: flex;
align-items: center;
justify-content: center;
flex: 0 0 70px;
width: 70px;
height: 70px;
margin: 0;
border-radius: 50%;
background: var(--ui-accent-strong);
color: #fff;
line-height: 1;
}
.ps-myesri-card__icon svg {
width: 36px;
height: 36px;
}
.ps-myesri-card__title {
flex: 0 1 auto;
margin: 0;
font-size: var(--fs-20);
color: var(--text-color);
}
.ps-myesri-card__desc {
flex: 1 0 100%;
max-width: none;
margin: 0;
margin-top: 14px;
padding-top: 19px;
border-top: 1px solid var(--border-color);
font-size: var(--fs-16);
color: var(--text-light);
}
.ps-myesri-card__btn {
flex: 0 0 auto;
margin-top: 20px;
}
/* === T401 / MT08 ここまで === */
/* ============================================================
* T401 / MT09: コンテンツヘッダーを白地にし、トップ以外は下に濃色バー
* 仕様の正 = docs/intake/再デザインPJ/esriジャパンさまトップページデザイン3.png
* （顧客ご質問3「コンテンツヘッダーの背景色を白にする場合、TOP 以外を
* 開いたときに下へ濃い色のバーを入れたい」への大滝様ご回答）
* トップ = 同 デザインB_TOP.png（バーなし・下にキービジュアルが続く）
* ------------------------------------------------------------
* 確定版ガイド v2 には「コンテンツヘッダー」の項目が無く、絵の中にしか存在しない
* 指示だったため T378 の再デザインで反映が漏れ、D02/T74 当時の濃紺帯のままだった。
* 絵から実測した値: 帯の地 #fff / メニューの文字 #343434 / 現在地 #034B77 /
* 区切り線 1px #343434 / ボタンは白地に #00619B の枠と文字 / バー 6px #00619B。
* ============================================================ */
.support-nav {
background-color: #fff;
border-bottom: 1px solid var(--border-color);
}
/* トップ以外のみ濃色バー。高さの変化は support.js が実測して
--esrij-sticky-top に配信するため、追従要素の位置は自動で追随する。 */
.___pt-container.-support.-sub .support-nav {
border-bottom: 6px solid var(--ui-accent);
}
.support-nav .support-nav__list li a {
color: var(--text-color);
}
.support-nav .support-nav__list li a:hover {
background: var(--ui-accent-tint);
color: var(--ui-accent-strong);
}
.support-nav .support-nav__list li.current-menu-item a {
background: transparent;
color: var(--ui-accent-strong);
font-weight: 700;
}
/* 親テーマの縦区切り線を復活させる（地が白になったため白のままでは見えない）。
ボタン（-otbtn）の前後には出さない＝確定デザインどおり文字項目の間だけ。 */
.support-nav.post-list > ul > li:not(:last-child):not(.-otbtn)::after {
display: block;
background: var(--text-color);
}
/* アウトラインボタン（D02）: 濃紺地の白枠 → 白地に青枠・青文字へ。
左右の余白は D02 当時の 4px では区切り線とボタンが詰まって見えるため、
絵の実測（ボタン同士 29px）に合わせて 14px にする。 */
.support-nav .support-nav__list li.support-nav__item--outline a,
.support-nav .support-nav__list li.-otbtn a {
margin: 2px 14px;
background-color: #fff;
border: 1px solid var(--ui-accent);
color: var(--ui-accent);
}
/* 区切り線とボタンの間はボタン同士より広い（絵の実測 26px）。
文字項目に続く最初のボタンだけ左を広げる。 */
.support-nav .support-nav__list li:not(.-otbtn):not(.support-nav__item--outline) + li.support-nav__item--outline a,
.support-nav .support-nav__list li:not(.-otbtn):not(.support-nav__item--outline) + li.-otbtn a {
margin-left: 26px;
}
.support-nav .support-nav__list li.support-nav__item--outline a:hover,
.support-nav .support-nav__list li.-otbtn a:hover {
background: var(--ui-accent);
border-color: var(--ui-accent);
color: #fff;
}
/* === T401 / MT09 ここまで === */
/* ============================================================
T400 — 目次を広い画面でサイドバー追従に戻す（2026-08-19）
T379 で目次を「本文上部の折りたたみ」1 形式に統一したが、広い画面では
常に見えている追従型のほうが読みやすいというご指摘を受けて 2 形式に戻した。
折りたたみ（.esrij-toc--inline）は狭い画面の解として残す。
テンプレートは両方を出力し、切り替えはここだけで行う。閾値はサイドバーが
本文の下へ回る D78 の 1024px と同じにする（別の値にすると「サイドバーは
下に回っているのに目次はサイドバーの中」という状態ができてしまう）。
目印になるクラスはテンプレートが付ける:
.esrij-has-sidebar-toc … サイドバーに追従目次を出した wrap
.esrij-sidebar--toc-only … 目次しか入っていないサイドバー
============================================================ */
/* 広い画面: サイドバーに目次があるので、本文上部の折りたたみは出さない。
「サイドバーを非表示」の記事やサイドバーを持たないページには
.esrij-has-sidebar-toc が付かないため、折りたたみがそのまま残る。 */
@media (min-width: 1025px) {
.esrij-has-sidebar-toc .esrij-toc--inline {
display: none;
}
}
/* 狭い画面: サイドバーは本文の下へ回る（D78）ので、目次は本文上部の折りたたみだけにする。 */
@media (max-width: 1024px) {
.esrij-toc--widget {
display: none;
}
/* 目次しか入っていないサイドバーは、下に回ると空の箱になるので畳む。
ウィジェット（カテゴリー等）がある場合は従来どおり本文の下に出す。 */
.esrij-sidebar--toc-only {
display: none;
}
}
/* ============================================================
* T403 / MT11: トップページ 大滝様フィードバック（2026-08-20）の反映
* 仕様の正 = docs/intake/再デザインPJ/デザインB_左寄せ.png（実測）
* ------------------------------------------------------------
* ②「サポートからのお知らせ」＝枠線とドロップシャドウを外し、地を敷いてフラットに
* （絵の実測: 地 #F8F8F8 / 行の区切り線 #CED4DA / 角丸は 5px のまま）
* ④ セクション間の縦余白が実装で詰まっていた（絵は 70px 前後）
* ⑤ 要素の間に罫線が入っていた（絵にはない）
* ※ ③「はじめにお読みください」の再表示ボタン #E69100 は T398（プラグイン側）。
* ============================================================ */
/* --- ② お知らせボックスをフラットに --- */
.fp-news__box {
border: 0;
box-shadow: none;
background: #f8f8f8;
}
.fp-news__item {
border-bottom-color: #ced4da;
}
/* --- ⑤ セクション間の罫線を外す（絵には無い） --- */
.fp-search {
border-bottom: 0;
}
.fp-purpose {
border-top: 0;
}
/* --- ④ 縦余白を絵の実測（70px 前後）へ戻す。8px グリッドに乗せて 72px --- */
.fp-search {
padding-top: 72px; /* キービジュアル → 検索見出し（絵 75px） */
}
.fp-news {
padding-bottom: 96px; /* お知らせボックス → グレー帯（絵 101px） */
}
.fp-purpose {
padding: 72px 0; /* 絵の実測 上 74px / 下 70px */
}
@media (max-width: 768px) {
/* 狭い画面まで 72px を持ち込むと間延びするため、従来比で少しだけ広げる。 */
.fp-search {
padding-top: 40px;
}
.fp-news {
padding-bottom: 56px;
}
.fp-purpose {
padding: 40px 0;
}
}
/* === T403 / MT11 ここまで === */
/* ============================================================
* T403 / MT11（追補）: キービジュアルを切らずに見せる
* 2026-08-20 に新しいキービジュアル（5923×751・約 7.9:1）を受領。
* 高さが 160px 固定だと、コンテナ幅での自然な高さ（1560px 幅で 196px）に対して
* 上下が 36px 切り落とされ、空の上端と地球の下端が欠けていた。
* 高さを画像の縦横比に追従させることで、どの幅でも切れずに収まる。
* min-height は「見出しが収まる下限」として残す（狭い画面では比率より優先される）。
* ============================================================ */
.fp-hero {
aspect-ratio: 2560 / 325;
/* aspect-ratio を入れると、幅が「高さ × 比率」から逆算されて親より広くなり
横スクロールが出る（768px 実測で 945px に膨らんだ）。幅を明示して止める。 */
width: 100%;
}
@media (max-width: 768px) {
/* 狭い画面は比率どおりだと帯が細くなりすぎて見出しが載らないため、下限を下げて調整。 */
.fp-hero {
min-height: 120px;
}
}
/* === T403 / MT11（追補）ここまで === */
/* ============================================================
* T404 / MT12: 関連ナレッジの列数
* 表示件数（5→6）は single-knowledge.php 側。ここは列数だけを持つ。
*
* 従来は repeat(auto-fill, minmax(280px, 1fr)) で幅任せに並べていたため、
* サイドバーの無いページ（本文幅がコンテナいっぱい＝最大 1200px）では 4 列になり、
* 6 件だと 2 行目が 2 枚だけの中途半端な形になっていた（顧客ご指摘の実例＝
* サポートポリシー配下「製品ライフサイクル」）。列数をサイドバーの有無で明示し、
* 3×2 / 2×3 のどちらでも最終行が埋まるようにする。
*
* 閾値 1025px は D78（サイドバーが本文の下へ回る幅）と同値。これ未満では
* サイドバーが下へ回って本文が全幅になるため、有無で分ける意味が無くなり、
* 従来どおり幅任せ（auto-fill）に戻る。
* ============================================================ */
@media (min-width: 1025px) {
.sk-wrap--no-sidebar .sk-related__list {
grid-template-columns: repeat(3, 1fr);
}
.sk-wrap--with-sidebar .sk-related__list {
grid-template-columns: repeat(2, 1fr);
}
}
/* === T404 / MT12 ここまで === */
/* ============================================================
* T418 / D81: 本文中に画像を入れると改行される
*
* 真因は親テーマ common/css/style.css の `img { max-width:100%; display:block }`。
* 顧客のご指摘は「display: inline が原因」だったが、実際に効いている宣言は
* block のほうで、inline は**あるべき値**。ブロック要素になった画像は必ず
* 自分の行を占めるため、文中に置いても前後で改行される。
* 旧 FastAnswer 由来の本文は ![]()
を文中にそのまま置く
* 書き方（例: /knowledge/23541・ローカルでは ID 25253）なのでこれと衝突する。
*
* common/ は親テーマ機構＝顧客管轄で編集しないため、本文領域だけを子テーマで
* inline に戻す（顧客のご要望も「子テーマで上書きして引き継ぎを解除」）。
*
* 行末に隙間が出ないのは、親テーマが既に
* `svg, img, embed, object, iframe { vertical-align: bottom }` を持っているため
* （inline に戻してもディセンダ分の下余白が出ない）。
* ============================================================ */
.sk-body img,
.ns-body img,
.gg-single-body img,
.gl-single-body img {
display: inline;
}
/* 保険: ブロックエディターで配置指定された画像と figure 直下の画像は、
中央寄せ・回り込みが margin:auto / float と display:block の組み合わせで
成立するため従来どおりブロックのまま残す。
（ローカル実データでは align 系クラスは 0 件＝現時点で該当は無く、
今後 顧客が新規記事を書いたときのための保険） */
.sk-body img.aligncenter,
.sk-body img.alignleft,
.sk-body img.alignright,
.sk-body figure > img,
.ns-body img.aligncenter,
.ns-body img.alignleft,
.ns-body img.alignright,
.ns-body figure > img,
.gg-single-body img.aligncenter,
.gg-single-body img.alignleft,
.gg-single-body img.alignright,
.gg-single-body figure > img,
.gl-single-body img.aligncenter,
.gl-single-body img.alignleft,
.gl-single-body img.alignright,
.gl-single-body figure > img {
display: block;
}
/* === T418 / D81 ここまで === */
/* ============================================================
* T413: ページ最下部でサイドバー目次の上部が固定ヘッダーに隠れる
*
* position: sticky は包含ブロック（サイドバー列）の下端までしか粘れない。
* 記事の下には「お困りごとは解決しましたか？」「関連するナレッジ」フッターが
* 続くため、最下部ではサイドバー列の下端が画面内まで上がってきて、目次カードが
* その下端に押し上げられる。押し上げられた先が固定ヘッダーの裏になるので、
* カードの上部だけが切れて見える（＝壊れて見える）。
*
* sticky の仕様上、ピン位置は「包含ブロック下端 − 要素高さ」で決まり top の値では
* 動かせないため、位置では直せない。押し上げが始まったら**役目を終えたものとして
* 消える**ようにする（サイドバー列が終わった＝本文が終わった、なので目次も不要）。
* ヘッダーの裏に半分潜ったカードを見せ続けるよりこちらが自然。
*
* 判定は support.js が実測で行い .esrij-sticky-out を付け外しする。閾値は
* 「いま実際に覆っている下端」＝ --esrij-sticky-top と同じ出どころなので、
* ここに固有の px を置かない（T391 で値の出どころを 1 本化した方針を維持）。
*
* 幅の出し分けも持たない: 押し上げは sticky が効いている二段組のときしか
* 起きず、1024px 以下（サイドバーが本文の下へ回る D78 / 目次は本文上部の
* 折りたたみ T400）では判定自体が成立しないため、幾何条件だけで自動的に
* 対象が絞られる。ここに breakpoint を足すと T400 の 1 か所管理が崩れる。
* ============================================================ */
/* T422: 上のサイドバーセクションから transition: top を外したため、ここも
opacity / visibility だけにする（退場のフェードは従来どおり）。 */
.sk-main.active01 .sidebar-inner,
.ns-main.active01 .sidebar-inner,
.gg-single-main.active01 .sidebar-inner,
.gl-single-main.active01 .sidebar-inner {
transition: opacity 0.2s ease, visibility 0.2s ease;
}
.sidebar-inner.esrij-sticky-out {
opacity: 0;
visibility: hidden;
pointer-events: none;
}
/* === T413 ここまで === */