/* Theme Name: ファクタリング比較メディア（Twenty Twenty-Five 子テーマ） Theme URI: https://factoring.suiteria.jp/ Author: suiteria.jp Description: Twenty Twenty-Five をベースにした、ファクタリング比較メディア用の子テーマです。ランキング・比較表・LP などをブロックエディターで効率よく作成できる構成を目指します。 Version: 0.1.0 Requires at least: 6.4 Tested up to: 6.4 Requires PHP: 8.0 Template: twentytwentyfive Text Domain: factoring-twentytwentyfive-child */ /* * 子テーマ CSS の正本（章立て・運用ルールは docs/付録_CSSアーキテクチャ・記載ルール.md）。 * レイヤー順は Foundation → Primitive → Layout → Region → Chrome → Block → Domain → Template → Cross-app。 * 章番号は 1〜34 の通し番号を使用し、章目次と各章見出しを常に一致させる。 * 各章の「タグ構造」は、レイアウト説明に留める章では親子 2〜3 階層程度とし、 * 当章でスタイルしているクラスを含める。バリエーション・テンプレート名は日本語で補足する。 * タグ構造は **章見出し（番号付き ===== ブロック）と同じく、見出し行の直後にツリー**で書く。 * 親子は **2スペースインデント**、**1行にセレクタを詰め込まない**（ブロックコメント1行だけで「タグ構造: 親 > 子 …」と書く形式は禁止。付録 §7）。 */ /* 章目次（タイトル統一表記） * 1. [Foundation] デザイントークン（:root 変数） * 2. [Primitive] 共通ユーティリティ（非表示・スキップ・マーカー・アクセント文字） * 3. [Primitive] 共通ボタン（押し込み・フラット） * 4. [Primitive] 共通改行（PC/モバイル出し分け） * 5. [Primitive] 共通本文（サービス詳細の編集部本文/サービス本文） * 6. [Primitive] 共通目次（サービス詳細 TOC） * 7. [Primitive] 共通フォーム素子（入力・送信・同意） * 8. [Primitive] 共通タブ（ナビ・選択状態） * 9. [Layout] レイアウト・グローバル * 10. [Region] ヘッダー（.fact-header） * 11. [Region] フッター（.fact-footer） * 12. [Chrome] パンくず・ページヘッド * 13. [Block] ヒーロー * 14. [Block] フロントセクション共通（ラッパー・見出し・リード） * 15. [Block] カードタイル・グリッド（.fact-card-tile-grid / .fact-card-tile / .fact-card-pressable） * 16. [Block] フロント各セクション詳細（横スクロール・人気・ランキング・FAQ 等） * 17. [Block] 本文（.fact-page-content） * 18. [Block] サイドバー・2カラム・ランキングタブ * 19. [Block] フォーム共通（ステッパー・素子・見積モード） * 20. [Domain] 見積フォーム：ピル・クイック・チップ・セレクト * 21. [Domain] サービス一覧・検索・絞り込み * 22. [Domain] サービス詳細カード（.fact-service-detail） * 23. [Domain] サービス詳細コンテンツ部品（見出し・本文CTA・編集部要約） * 24. [Domain] お役立ち記事ドメイン部品（記事内おすすめ） * 25. [Template] サービス一覧ページ（factor） * 26. [Template] サービス詳細ページ（factor/xxx） * 27. [Template] お役立ち記事一覧ページ（magazine） * 28. [Template] お役立ち記事詳細ページ（magazine/xxx） * 29. [Template] 比較ページ（comparison／全件・検討中。マルチ表は .fact-compare-table--multi） * 30. [Template] 一括見積りページ（estimate、estimate/thanks） * 31. [Template] 固定ページ（フロントページ） * 32. [Template] 固定ページ（問い合わせページ） * 33. [Template] 固定ページ（法務系ページ） * 34. [Cross-app] 検討リスト（localStorage・スティッキーバー・見積ページ一覧） */ /* ========================================================================== 1. [Foundation] デザイントークン（:root 変数） -------------------------------------------------------------------------- レイアウト幅・色・タイポグラフィ（サイズ・行間）・形状・コンポーネント寸法・ Elevation（シャドウ）・余白スケール・モーション・状態レイヤー等（M3 系）・ブレークポイント。 余白: 16px=--fact-space-md, 12px=--fact-space-sm（値は --fact-space-12）。本文: --fact-font-size-body。 rem ベース・原則 em 不使用。基準: html font-size 16px → 1rem。 タグ構造（マークアップなし）: （`:root` のみ。実体の HTML は 2 章以降・各ショートコード／テンプレートを参照） ========================================================================== */ :root { /* ----- レイアウト幅（コンテンツ・WordPress グローバル） ----- */ /* Material / デザインシステム系：コンテナ幅は固定トークン1本。本文カラムはこの max 内に収める。 */ /* theme.json layout.contentSize / wideSize と一致（1320px）。横ガターは --fact-page-gutter の padding のみ（方式B）— ここで 100% - 〇rem としない */ --fact-container-max: 82.5rem; /* 1320px */ --wp--style--global--content-size: min(var(--fact-container-max), 100%); --wp--style--global--wide-size: min(var(--fact-container-max), 100%); /* ----- 色（Primitive: 生値） ----- */ /* 基調色。色値はまずここに置く。この定義は未使用でも削除しないこと。 */ --fact-color-blue: #004098; /* 青 ：プライマリボタン、主要リンク */ --fact-color-sky-blue: #41b3d8; /* 空色 ：現時点で未使用（削除不可） */ --fact-color-yellow: #f59e0b; /* 黄 ：セカンダリボタンなど #FDD000 */ --fact-color-orange: #ef970e; /* オレンジ ：ランキングバッジ、順位表示など */ --fact-color-red: #b71c1c; /* 赤 ：エラー、強調表示など */ --fact-color-green: #009944; /* 緑 ：現時点で未使用（削除不可） */ --fact-color-black: #3d3d3d; /* 黒 ：ヘッダー、フッター背景、テキスト、ボーダー、背景など */ --fact-color-white: #ffffff; /* 白 ：ボタン内文字、ナビ、ボタン内テキスト */ --fact-color-gray: #555555; /* グレー ：補助テキストなど */ --fact-color-light-gray:#f5f5f5; /* ライトグレー：表ヘッダ、タグ非アクティブ、区切りブロック */ /* 基調色のグレーアウト時の背景色 */ --fact-color-blue-grayout: #d1d5db; /* グレー未ハイライト：星評価未入力時など */ /* 薄い背景色 */ --fact-color-background-blue: #f0f4f8; /* ブルーグレー：比較表セル見出し */ --fact-color-background-red: #ffecec; /* 赤グレー：星評価未入力時など */ /* ----- ハイライト：蛍光黄 ----- */ --fact-color-highlight: #fff59d; /* 蛍光黄：マーカー風ハイライト、下線装飾 */ /* ----- 色（Semantic: 用途） ----- */ /* コンポーネントは原則こちらを参照する。 */ /* ----- グラデーション背景（ヒーローなど） ----- */ --fact-color-bg-gradient-start: var(--fact-color-background-blue); /* グラデーション開始（左上） */ --fact-color-bg-gradient-end: var(--fact-color-light-gray); /* グラデーション終了（右下） */ /* ----- 背景：フロント各セクション ----- */ --fact-color-bg-section-service-scroll: #e5ecf4; /* サービス詳細カード横スクロール */ --fact-color-bg-section-recommend: var(--fact-color-white); /* 人気・おすすめ */ --fact-color-bg-section-magazine: #e5ecf4; /* お役立ち記事 */ --fact-color-bg-section-beginners: #f9f9f9; /* 入門・はじめての方 */ --fact-color-bg-section-faq: var(--fact-color-white); /* よくあるご質問 */ --fact-color-bg-section-search-by-prefecture: var(--fact-color-white); /* 都道府県から探す */ /* ----- ボタン（用途別トークン） ----- */ /* 共通クラス .fact-ui-btn の各バリアントで参照する。将来のデザイン変更はこの塊を優先して更新。 */ --fact-btn-main-white-text: var(--fact-color-blue); --fact-btn-main-white-bg: var(--fact-color-white); --fact-btn-main-white-border: var(--fact-color-border-button); --fact-btn-main-white-border-hover: var(--fact-color-blue); --fact-btn-main-white-shadow: var(--fact-shadow-card); --fact-btn-main-blue-text: var(--fact-color-white); --fact-btn-main-blue-bg: var(--fact-color-blue); --fact-btn-main-blue-shadow: var(--fact-shadow-cta-blue); --fact-btn-main-blue-shadow-hover: var(--fact-shadow-cta-blue-hover); --fact-btn-flat-text: var(--fact-color-black); --fact-btn-flat-bg: var(--fact-color-bg-bubble); --fact-btn-flat-border: var(--fact-color-border-strong); --fact-btn-flat-orange-text: var(--fact-color-white); --fact-btn-flat-orange-bg: var(--fact-color-orange); --fact-btn-flat-orange-border: var(--fact-color-orange); --fact-btn-flat-blue-text: var(--fact-color-white); --fact-btn-flat-blue-bg: var(--fact-color-blue); --fact-btn-flat-blue-border: var(--fact-color-blue); --fact-btn-flat-gray-text: var(--fact-color-black); --fact-btn-flat-gray-bg: var(--fact-color-light-gray); --fact-btn-flat-gray-border: var(--fact-color-border-button); /* ----- UI 押し込み：ボタン（.fact-ui-pressable） ----- */ --fact-ui-pressable-translate-x: 4px; --fact-ui-pressable-translate-y: 4px; /* ----- カード押し込み（.fact-card-pressable。ボタン用トークンと分離し値は揃えやすい） ----- */ --fact-card-pressable-translate-x: 4px; --fact-card-pressable-translate-y: 4px; /* ----- エラー・ハイライト・オーバーレイ・パターン ----- */ --fact-color-error: var(--fact-color-red); /* エラー：フォームエラー枠・背景・テキスト */ --fact-color-error-bg: var(--fact-color-background-red); /* エラー通知：薄い背景 */ --fact-color-pattern-stripe: rgba(0, 0, 0, 0.03); /* ストライプパターン：プレースホルダー背景 */ /* ----- 以下、整理中 ----- */ /* ----- ボタン、区切り線 ----- */ --fact-color-border-button: #d9d9d9; /* ボタン：ボタン枠 */ --fact-color-border-button-hover: #c8c8c8; /* ボタン：ホバー時枠 */ --fact-color-divider: #d9d9d9; /* 区切り線：HR、表罫線、セクション区切り */ /* ----- アクセント：青 ----- */ --fact-color-blue-deep: #003060; /* 青・濃いめ：ホバー時ボタン、スコア表示 */ --fact-color-blue-tint: #e8f6fa; /* 青・淡い背景：アクティブタブ、選択中 */ /* ----- フォーム：アクセント（現状は青基調で統一） ----- */ --fact-color-form-accent: var(--fact-color-blue); --fact-color-form-accent-deep: var(--fact-color-blue-deep); --fact-color-form-accent-soft: var(--fact-color-sky-blue); --fact-color-form-accent-tint: var(--fact-color-blue-tint); /* ----- 背景：ナビ・吹き出し・グレー・ヒーロー ----- */ --fact-color-bg-sub: #f8f9fa; /* サブ背景：補助パネル・控えめな区切りブロック */ --fact-color-bg-bubble: #e5f1f8; /* 吹き出し背景（人気・おすすめカード） */ /* ----- 背景（補助）・ボーダー・線 ----- */ --fact-color-border: rgba(0, 0, 0, 0.06); /* 標準：カード枠、入力欄ボーダー、ヘッダー下線、薄い区切り */ --fact-color-border-strong: rgba(0, 0, 0, 0.12); /* 強調：フォーカス時、区切り強調、目次リンク区切り破線など */ /* ----- テキスト：本文・補助 ----- */ --fact-color-text: var(--fact-color-black); /* 本文・標準テキスト（サイト全体のデフォルト文字色） */ --fact-color-text-muted: var(--fact-color-gray); /* 補助：キャプション、説明文 */ --fact-color-text-strong: #333333; /* 強調：見出し、重要文言 */ --fact-color-text-weak: #888888; /* 弱め：パンくず、住所、メタ情報 */ --fact-color-bg-avatar-placeholder: #e8e8e8; /* アバター未設定時のプレースホルダー背景 */ /* ----- サービス詳細・目次（スレート系：境界・チップ） ----- */ --fact-color-palette-slate-900: var(--fact-color-black); /* color-mix 用基色（目次・境界） */ --fact-color-bg-slate-50: var(--fact-color-bg-sub); /* 目次トグル等の背景 */ --fact-color-bg-slate-100: var(--fact-color-background-blue); /* 目次トグルホバー背景 */ --fact-color-text-slate-600: var(--fact-color-text-muted); /* 目次トグル文字 */ /* ----- タイポグラフィ（フォントファミリー・サイズ・行間） ----- */ /* 基準 16px（html）。4px 刻みのタイプスケール。Material 3 の display / headline / title / body / label に近い段階は下記コメント参照。 */ --fact-font-family: "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", sans-serif; /* 本文 */ --fact-font-family-hero: "M PLUS Rounded 1c", "Hiragino Sans", "Hiragino Kaku Gothic ProN", sans-serif; /* ヒーロー見出し */ /* * タイプスケール（主流パターン: Primitive → Semantic） * - Primitive: 数値のみ（値の正本） * - Semantic: 役割名（コンポーネントは基本こちらを参照） */ /* Primitive（数値） */ --fact-font-size-025: 0.25rem; /* 4px */ --fact-font-size-0375: 0.375rem; /* 6px */ --fact-font-size-050: 0.5rem; /* 8px */ --fact-font-size-0625: 0.625rem; /* 10px */ --fact-font-size-075: 0.75rem; /* 12px */ --fact-font-size-0875: 0.875rem; /* 14px */ --fact-font-size-100: 1rem; /* 16px */ --fact-font-size-1125: 1.125rem; /* 18px */ --fact-font-size-125: 1.25rem; /* 20px */ --fact-font-size-150: 1.5rem; /* 24px */ --fact-font-size-175: 1.75rem; /* 28px */ --fact-font-size-200: 2rem; /* 32px */ --fact-font-size-225: 2.25rem; /* 36px */ --fact-font-size-250: 2.5rem; /* 40px */ --fact-font-size-300: 3rem; /* 48px */ /* Semantic（役割） */ --fact-font-size-hairline: 0.2rem; /* 3.2px：最小表示用 */ --fact-font-size-min: var(--fact-font-size-025); /* 4px */ --fact-font-size-micro: var(--fact-font-size-0375); /* 6px */ --fact-font-size-mini: var(--fact-font-size-050); /* 8px */ --fact-font-size-caption: var(--fact-font-size-0625); /* 10px：キャプション・バッジ */ --fact-font-size-xs: var(--fact-font-size-075); /* 12px：ラベル、メタ情報 */ --fact-font-size-sm: var(--fact-font-size-0875); /* 14px：小見出し、補助本文 */ --fact-font-size-body: var(--fact-font-size-100); /* 16px：本文・標準 */ --fact-font-size-lead: var(--fact-font-size-1125); /* 18px：中見出し、リード */ --fact-font-size-lg: var(--fact-font-size-125); /* 20px：大見出し（小さめ） */ --fact-font-size-xl: var(--fact-font-size-150); /* 24px：見出し・強調テキスト */ --fact-font-size-2xl: var(--fact-font-size-175); /* 28px：セクション見出し（小さめ） */ --fact-font-size-3xl: var(--fact-font-size-200); /* 32px：セクション見出し・PC本文ヒーローなど */ --fact-font-size-4xl: var(--fact-font-size-225); /* 36px：大きめセクション見出し */ --fact-font-size-5xl: var(--fact-font-size-250); /* 40px：メインヒーロー見出し（中程度） */ --fact-font-size-6xl: var(--fact-font-size-300); /* 48px：メインヒーロー見出し（大きめ） */ /* 行間（本文・見出し・タイト）。コンポーネントは必要に応じて参照 */ --fact-leading-tight: 1.25; --fact-leading-snug: 1.375; --fact-leading-normal: 1.5; --fact-leading-relaxed: 1.75; /* ----- 形状（角丸） ----- */ /* 4px / 8px / 12px 系。8px グリッド・4px 刻みと整合。 */ --fact-radius-sm: 0.25rem; /* 4px：小さめ角丸（バッジ、タグ、小ボタン） */ --fact-radius-md: 0.5rem; /* 8px：標準の角丸（ボタン、入力欄、カード） */ --fact-radius-lg: 0.75rem; /* 12px：大めの角丸（大カード、モーダル） */ --fact-radius-full: 9999px; /* ピル形（完全な丸み・吹き出しなど） */ /* ----- コンポーネント寸法（共通） ----- */ --fact-section-padding-x: 3rem; /* 48px：セクション左右パディング（PC） */ --fact-section-padding-x-sm: 1rem; /* 16px：セクション左右パディング（SP） */ --fact-layout-content-max: var(--fact-container-max); /* 内側コンテンツの最大幅 */ /* ----- アスペクト比・レイアウト比率 ----- */ --fact-aspect-ratio-16-9: 16 / 9; /* 動画・アイキャッチ等の標準アスペクト比 */ /* ----- Elevation（シャドウ） ----- */ /* * 参照の流れ: Primitive（elev / ring）→ Semantic（--fact-shadow-*）→ コンポーネント（ボタン・カード押し込み等） * 未使用の Primitive は増やさない（値の正本は stylelint 対象の本ブロックのみ） */ /* Primitive（レベル・リング。Semantic から var() 参照される） */ --fact-elev-1: 0 1px 2px rgba(0, 0, 0, 0.06); --fact-elev-topbar: 0 -4px 24px rgba(0, 0, 0, 0.06); --fact-ring-1: 0 0 0 1px var(--fact-color-blue-tint); --fact-ring-2: 0 0 0 2px var(--fact-color-sky-blue); /* Semantic：ニュートラル（浮き・オーバーレイ・ブランドの「紙」影） */ --fact-shadow-subtle: var(--fact-elev-1); /* 軽い浮き（カード押し込みホバー・汎用） */ --fact-shadow-hover: 0 4px 12px rgba(0, 0, 0, 0.08); /* ヘッダードロワー等の面浮き */ --fact-shadow-modal: 0 4px 20px rgba(0, 0, 0, 0.12); /* モーダル・オーバーレイ */ --fact-shadow-card: 0.25rem 0.25rem 0 rgba(15, 19, 80, 0.07); /* ブランドオフセット影（カード押し込み通常・白ボタン等） */ /* Semantic：Chrome（固定 UI・フォーカス） */ --fact-shadow-shortlist-bar: var(--fact-elev-topbar); /* 下固定検討リストバー */ --fact-shadow-header-focus: var(--fact-ring-1); /* ヘッダー検索 focus-within */ --fact-shadow-focus-ring: var(--fact-ring-2); /* フォーカス可視化（outline 代替） */ /* Semantic：バッジ・小さなコントロール */ --fact-shadow-badge: 0 0.125rem 0.375rem rgba(0, 0, 0, 0.15); /* 順位バッジ */ --fact-shadow-button: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.1); /* スクロール矢印等 */ /* Semantic：CTA 青ボタン（--fact-btn-main-blue-shadow* から参照） */ --fact-shadow-cta-blue: 0.25rem 0.25rem 0 rgba(0, 64, 152, 0.18); --fact-shadow-cta-blue-hover: 0.25rem 0.25rem 0 rgba(0, 64, 152, 0.26); /* Semantic：フォーム */ --fact-shadow-form-selection-ring: 0 0 0 3px color-mix(in srgb, var(--fact-color-form-accent) 18%, transparent); --fact-shadow-form-error-ring: 0 0 0 1px color-mix(in srgb, var(--fact-color-error) 45%, transparent); /* カード押し込み（.fact-card-pressable）：通常はブランド影、ホバーはやや薄く */ --fact-card-pressable-shadow-rest: var(--fact-shadow-card); --fact-card-pressable-shadow-hover: var(--fact-shadow-subtle); /* * 余白スケール（主流パターン: Primitive → Semantic） * - Primitive: 数値のみ（値の正本） * - Semantic: 役割名（既存利用を維持） */ /* Primitive（数値） */ --fact-space-1: 0.0625rem; /* 1px */ --fact-space-2: 0.125rem; /* 2px */ --fact-space-4: 0.25rem; /* 4px */ --fact-space-8: 0.5rem; /* 8px */ --fact-space-12: 0.75rem; /* 12px */ --fact-space-16: 1rem; /* 16px */ --fact-space-20: 1.25rem; /* 20px */ --fact-space-24: 1.5rem; /* 24px */ --fact-space-28: 1.75rem; /* 28px */ --fact-space-32: 2rem; /* 32px */ --fact-space-36: 2.25rem; /* 36px */ --fact-space-40: 2.5rem; /* 40px */ --fact-space-48: 3rem; /* 48px */ --fact-space-56: 3.5rem; /* 56px */ --fact-space-64: 4rem; /* 64px */ --fact-space-72: 4.5rem; /* 72px */ --fact-space-80: 5rem; /* 80px */ --fact-space-96: 6rem; /* 96px */ --fact-space-112: 7rem; /* 112px */ --fact-space-128: 8rem; /* 128px */ /* Semantic（役割） */ --fact-space-4xs: var(--fact-space-1); /* 1px */ --fact-space-3xs: var(--fact-space-2); /* 2px */ --fact-space-2xs: var(--fact-space-4); /* 4px */ --fact-space-xs: var(--fact-space-8); /* 8px */ --fact-space-sm: var(--fact-space-12); /* 12px */ --fact-space-md: var(--fact-space-16); /* 16px：標準 */ --fact-space-lg: var(--fact-space-20); /* 20px */ --fact-space-xl: var(--fact-space-24); /* 24px */ --fact-space-2xl: var(--fact-space-28); /* 28px */ --fact-space-3xl: var(--fact-space-32); /* 32px */ --fact-space-4xl: var(--fact-space-36); /* 36px */ --fact-space-5xl: var(--fact-space-40); /* 40px */ --fact-space-6xl: var(--fact-space-48); /* 48px */ --fact-space-7xl: var(--fact-space-56); /* 56px */ --fact-space-8xl: var(--fact-space-64); /* 64px */ --fact-space-9xl: var(--fact-space-72); /* 72px */ --fact-space-10xl: var(--fact-space-80); /* 80px */ --fact-space-11xl: var(--fact-space-96); /* 96px */ --fact-space-12xl: var(--fact-space-112); /* 112px */ --fact-space-13xl: var(--fact-space-128); /* 128px */ /* ページ本文の左右インセット正本（方式B: theme.json の contentSize では幅を減算せず、本トークンを padding のみに使う） */ --fact-page-gutter: 1.3125rem; /* 約 21px */ /* UI 密度・レイアウト（Material / デザインシステム系の考え方に合わせる） - コンテンツ最大幅は上記 --fact-container-max（theme.json・--wp--style--global--content-size と同期。横ガターは --fact-page-gutter のみ） - 余白・タッチ領域は原則この --fact-space-*（4px グリッド）を参照し、用途名の変数は増やさない - フォーム系の標準密度: 縦 var(--fact-space-xs) 横 var(--fact-space-sm)（8px / 12px） - ページング・チップ等の補助 UI: xs〜sm で統一 */ /* ----- モーション（トランジション） ----- */ --fact-transition-base: 0.25s ease; /* 標準的な遷移 */ --fact-transition-fast: 0.2s ease; /* ホバー・フォーカス等の即応 */ --fact-transition-slow: 0.3s ease-out; /* 開閉アニメ等のゆったりした遷移 */ /* インタラクティブ要素のホバー／フォーカス時の不透明度（リンク・ボタンの「抑え」）— 0.6 / 0.88 / 0.8 のばらつきをここに集約 */ --fact-opacity-hover-interactive: 0.8; /* ----- Material 3 系：状態レイヤー・フォーカス・重なり順・duration（参照用） ----- */ /* 状態の透明度は color-mix(..., 表面色 var(--fact-state-hover-opacity)) 等で参照。 */ --fact-state-hover-opacity: 0.08; --fact-state-focus-opacity: 0.12; --fact-state-pressed-opacity: 0.12; --fact-state-dragged-opacity: 0.16; /* フォーカスリング（キーボード操作の可視化。コンポーネントで outline を組み立てるときに参照） */ --fact-focus-ring-width: 2px; --fact-focus-ring-offset: 2px; --fact-focus-ring-color: var(--fact-color-blue); /* 重なり順（z-index） */ /* テーマ内階層: 「同一スタック文脈内での相対」を管理する */ --fact-z-index-base: 0; --fact-z-index-content: 1; /* 通常の「前面」 */ --fact-z-index-content-top: 2; /* 小さな浮き（矢印など） */ --fact-z-index-sticky: 10; --fact-z-index-dropdown: 100; --fact-z-index-header-backdrop: 150; /* SPドロワー背面の黒オーバーレイ（ヘッダーより背面、本文より前面） */ --fact-z-index-sticky-header: 200; --fact-z-index-shortlist-bar: 300; /* 画面下固定（ヘッダーより前） */ --fact-z-index-overlay: 1000; --fact-z-index-modal: 1100; /* WP例外: WordPress コア側の極端値に合わせる（テーマ内階層とは別管理） */ --fact-z-index-wp-adminbar: 99999; /* WordPress 管理バー */ --fact-z-index-skip-link: 100000; /* スキップリンクは最前面で確実に */ /* 所要時間（--fact-transition-* と同値。motion トークンを先に置きたいときに参照） */ --fact-motion-duration-short: 0.2s; --fact-motion-duration-medium: 0.25s; --fact-motion-duration-long: 0.3s; /* イージング（Material 3 の標準・強調系に近い cubic-bezier） */ --fact-motion-easing-standard: cubic-bezier(0.2, 0, 0, 1); --fact-motion-easing-emphasized: cubic-bezier(0.2, 0, 0, 1); --fact-motion-easing-emphasized-decelerate: cubic-bezier(0, 0, 0, 1); --fact-motion-easing-ease: ease; /* キーワード easing */ --fact-motion-easing-ease-out: ease-out; /* ----- ブレークポイント（px 統一・@media では変数不可のため値を直接記述） ----- */ /* メディアクエリの幅はすべて px。.98 は min/max の重複回避。 子テーマで主に使う幅: min 1024px / max 1023.98px / max 782px（html フォント縮小と連動）。 600px / 782px は WordPress コア（ナビブロック・管理バー）でも使用。 詳細な一覧は docs/付録_CSSアーキテクチャ・記載ルール.md「10.」参照。 */ /* 固定ヘッダー：.fact-header__inner の実高に合わせ .wp-site-blocks / ドロワーと共有（ブレークポイントで上書き） */ --fact-header-border-w: 1px; --fact-header-stack-h: calc(var(--fact-space-xs) * 2 + var(--fact-space-8xl)); --fact-header-skip: calc(var(--fact-header-stack-h) + var(--fact-header-border-w)); } @media (max-width: 782px) { :root { --fact-header-stack-h: calc(var(--fact-space-sm) * 2 + var(--fact-space-6xl)); --fact-header-skip: calc(var(--fact-header-stack-h) + var(--fact-header-border-w)); } } @media (min-width: 783px) and (max-width: 1023.98px) { :root { --fact-header-stack-h: calc(var(--fact-space-xs) * 2 + var(--fact-space-8xl)); --fact-header-skip: calc(var(--fact-header-stack-h) + var(--fact-header-border-w)); } } /* ----- ベースフォントサイズ（rem の基準） ----- */ /* 16px 基準。タブレット 15px・モバイル 14px に縮小。全 rem の基準となるため変更時は要注意。 */ html { font-size: 16px; } /* タブレット以下（〜1024px） */ @media (max-width: 1023.98px) { html { font-size: 15px; } } /* タブレット縦・スマホ（〜782px） */ @media (max-width: 782px) { html { font-size: 14px; } } /* ----- サイト全体のフォント・横スクロール防止 ----- */ /* Noto Sans JP 系。レイアウト崩れ時も全体の横スクロールを防止。 */ body { overflow-x: hidden; /* レイアウト崩れ時も全体の横スクロールを防止 */ color: var(--fact-color-black); font-family: var(--fact-font-family); font-size: var(--fact-font-size-body); } /* ホバー統一（原則）：インタラクティブ要素は opacity 0.8 を共通適用 */ :where( a, button:not([disabled]):not([aria-disabled="true"]), input[type="submit"]:not([disabled]), input[type="button"]:not([disabled]), .wp-element-button, .fact-ui-btn, .fact-service-detail__action, .fact-sidebar-cta__button, .fact-shortlist-bar__cta, .fact-service-content__cta-link ) { opacity: 1; transition: opacity var(--fact-transition-fast); } :where( a, button:not([disabled]):not([aria-disabled="true"]), input[type="submit"]:not([disabled]), input[type="button"]:not([disabled]), .wp-element-button, .fact-ui-btn, .fact-service-detail__action, .fact-sidebar-cta__button, .fact-shortlist-bar__cta, .fact-service-content__cta-link ):is(:hover, :focus-visible, :active) { opacity: var(--fact-opacity-hover-interactive); } /* フォーカス時：ブラウザ標準の黒アウトラインを非表示にし、キーボード操作時のみ青枠で表示（アクセシビリティ）。 */ *:focus { outline: none; } *:focus-visible { outline: var(--fact-focus-ring-width) solid var(--fact-color-sky-blue); outline-offset: var(--fact-focus-ring-offset); } /* 動きを減らす（OS/ブラウザ設定）：アニメ・トランジションを実質オフ。scroll-behavior も無効化 */ /* !important は個別セレクタの transition 長さに負けないよう WCAG 系パターンに合わせる */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .wp-site-blocks { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; transition-delay: 0s !important; } } /* ========================================================================== 2. [Primitive] 共通ユーティリティ（非表示・スキップ・マーカー・アクセント文字） -------------------------------------------------------------------------- 複数ページで再利用する最小部品を集約。 タグ構造（代表・マークアップはページ／パターンに分散）: a.fact-skip-link … 本文先頭へ（:focus で表示） span.marker-yellow / span.marker-yellow-thick … 見出し等の蛍光下線 span.fact-text-accent-blue / span.fact-text-accent-orange … 強調色 （視覚的非表示）.fact-visually-hidden … スクリーンリーダー向け ========================================================================== */ /* ----- ユーティリティ本体 ----- */ .fact-visually-hidden, .fact-front-page .wp-block-post-title { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; white-space: nowrap; clip: rect(0 0 0 0); clip-path: inset(50%); } .fact-skip-link { position: absolute; z-index: var(--fact-z-index-skip-link); inset-block-start: 0; inset-inline-start: var(--fact-space-md); padding: var(--fact-space-sm) var(--fact-space-md); border-radius: var(--fact-radius-sm); font-size: var(--fact-font-size-sm); font-weight: 600; color: var(--fact-color-white); text-decoration: none; background: var(--fact-color-blue); box-shadow: var(--fact-shadow-card); transition: var(--fact-transition-fast); transform: translateY(-120%); } .fact-skip-link:focus, .fact-skip-link:focus-visible { outline: var(--fact-focus-ring-width) solid var(--fact-color-sky-blue); outline-offset: var(--fact-focus-ring-offset); transform: translateY(var(--fact-space-md)); } .marker-yellow { padding: 0 var(--fact-space-4xs); background: linear-gradient(transparent 30%, var(--fact-color-highlight) 30%); } .marker-yellow-thick { padding: 0 var(--fact-space-3xs); background: linear-gradient(transparent 45%, var(--fact-color-highlight) 45%); } .fact-text-accent-blue { color: var(--fact-color-blue); } .fact-text-accent-orange { color: var(--fact-color-orange); } /* ========================================================================== 3. [Primitive] 共通ボタン（押し込み・フラット） -------------------------------------------------------------------------- サイト横断で使うボタン部品（押し込み・フラット）をこの章に集約する。 タグ構造（共通）: a|button.fact-ui-btn a|button.fact-ui-btn.fact-ui-btn--press-blue タグ構造（ボタンリスト）: .fact-ui-btn-stack ul.fact-ui-btn-group li.fact-ui-btn-group__item a[href] .fact-ui-btn.fact-ui-btn--press-white.fact-ui-pressable span.fact-ui-btn__label .fact-ui-btn--with-leading-arrow::before … 左アイコン（疑似要素） p.fact-ui-btn-note ※ヒーロー full のみ（審査状況の注釈） タグ構造（汎用ボタン）: a.fact-ui-btn.fact-ui-btn--flat ========================================================================== */ /* ----- ボタン共通ベース ----- */ .fact-ui-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--fact-space-2xs); box-sizing: border-box; border: 1px solid transparent; border-radius: var(--fact-radius-full); font-size: var(--fact-font-size-sm); font-weight: 600; line-height: 1.25; text-align: center; text-decoration: none; transition: color var(--fact-transition-fast), background-color var(--fact-transition-fast), border-color var(--fact-transition-fast), box-shadow var(--fact-transition-fast), transform var(--fact-transition-fast); } /* ----- 押し込み挙動（ボタンに付与する場合は .fact-ui-pressable を併記。transition は親の .fact-ui-btn 等に任せ、ここでは transform / box-shadow の差分のみ） ----- */ .fact-ui-pressable { transform: translate(0, 0); } .fact-ui-pressable:is(:hover, :focus-visible, :active) { box-shadow: none; transform: translate(var(--fact-ui-pressable-translate-x), var(--fact-ui-pressable-translate-y)); } /* ----- 白ボタン（押し込み） ----- */ .fact-ui-btn--press-white { position: relative; width: 100%; min-height: var(--fact-space-6xl); padding-block: var(--fact-space-md); padding-inline: var(--fact-space-7xl) var(--fact-space-5xl); border-color: var(--fact-btn-main-white-border); font-weight: 700; color: var(--fact-btn-main-white-text); background: var(--fact-btn-main-white-bg); box-shadow: var(--fact-btn-main-white-shadow); } .fact-ui-btn--press-white:is(:hover, :focus-visible, :active) { border-color: var(--fact-btn-main-white-border-hover); color: var(--fact-btn-main-white-text); background: var(--fact-btn-main-white-bg); cursor: pointer; } .fact-ui-btn--with-leading-arrow::before { position: absolute; z-index: var(--fact-z-index-content); inset-block-start: 50%; inset-inline-start: var(--fact-space-3xl); width: var(--fact-space-sm); height: var(--fact-font-size-sm); background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20width%3D%2210%22%20height%3D%2212%22%20viewBox%3D%220%200%2010%2012%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M9.5%205.42108C10.1667%205.80598%2010.1667%206.76823%209.5%207.15313L2%2011.4833C1.33333%2011.8682%200.5%2011.387%200.5%2010.6172L0.5%201.95698C0.5%201.18718%201.33333%200.706057%202%201.09096L9.5%205.42108Z%22%20fill%3D%22%23004098%22%2F%3E%3C%2Fsvg%3E"); background-repeat: no-repeat; background-position: 50% 50%; background-size: var(--fact-font-size-xs); transform: translateY(-50%); content: ""; } .fact-ui-btn__label { margin: 0; padding: 0; border: none; line-height: 1.25; text-decoration: none; } /* ----- メイン青ボタン ----- */ .fact-ui-btn--press-blue { color: var(--fact-btn-main-blue-text); background: var(--fact-btn-main-blue-bg); box-shadow: var(--fact-btn-main-blue-shadow); } .fact-ui-btn--press-blue:is(:hover, :focus-visible, :active) { color: var(--fact-btn-main-blue-text); background: var(--fact-btn-main-blue-bg); box-shadow: var(--fact-btn-main-blue-shadow-hover); } /* ----- 汎用ボタン（フラット） ----- */ .fact-ui-btn--flat { padding: var(--fact-space-xs) var(--fact-font-size-sm); border-color: var(--fact-btn-flat-border); font-weight: 600; color: var(--fact-btn-flat-text); background: var(--fact-btn-flat-bg); } .fact-ui-btn--flat:is(:hover, :focus-visible, :active) { color: var(--fact-btn-flat-text); background: var(--fact-btn-flat-bg); } .fact-ui-btn--flat-orange { border-color: var(--fact-btn-flat-orange-border); color: var(--fact-btn-flat-orange-text); background: var(--fact-btn-flat-orange-bg); } .fact-ui-btn--flat-orange:is(:hover, :focus-visible, :active) { border-color: var(--fact-btn-flat-orange-border); color: var(--fact-btn-flat-orange-text); background: var(--fact-btn-flat-orange-bg); } .fact-ui-btn--flat-blue { border-color: var(--fact-btn-flat-blue-border); color: var(--fact-btn-flat-blue-text); background: var(--fact-btn-flat-blue-bg); } .fact-ui-btn--flat-blue:is(:hover, :focus-visible, :active) { border-color: var(--fact-btn-flat-blue-border); color: var(--fact-btn-flat-blue-text); background: var(--fact-btn-flat-blue-bg); } .fact-ui-btn--flat-gray { border-color: var(--fact-btn-flat-gray-border); color: var(--fact-btn-flat-gray-text); background: var(--fact-btn-flat-gray-bg); } .fact-ui-btn--flat-gray:is(:hover, :focus-visible, :active) { border-color: var(--fact-btn-flat-gray-border); color: var(--fact-btn-flat-gray-text); background: var(--fact-btn-flat-gray-bg); } /* ----- ボタンリスト：コンテナ ----- */ /* 横並びボタン群。「もっと見る」・ヒーローCTA 等で利用。直下に注釈を置ける。 */ .fact-ui-btn-stack { display: flex; flex-direction: column; align-items: center; gap: var(--fact-space-2xs); } /* ----- ボタンリスト：リスト本体 ----- */ .fact-ui-btn-group { display: flex; flex-wrap: wrap; align-items: stretch; gap: var(--fact-space-md); margin: 0; padding: 0; list-style: none; } .fact-ui-btn-group__item { position: relative; flex: 1 1 auto; min-width: 0; margin: 0; } .fact-ui-btn-group__item:only-child { flex: 0 1 auto; } .fact-ui-btn-group__item > a { display: block; height: 100%; text-decoration: none; } /* ----- ボタンリスト直下の注釈（ヒーロー直下の「※審査状況…」等） ----- */ .fact-ui-btn-note { margin-block: var(--fact-space-xs) 0; font-size: var(--fact-font-size-caption); line-height: 1.4; color: var(--fact-color-text-weak); } /* ========================================================================== 4. [Primitive] 共通改行（PC/モバイル出し分け） -------------------------------------------------------------------------- HTML 側の
を使って、改行位置を画面幅で切り替える。 タグ構造（単一素子）: br[data-view="pc"] … 〜782px で非表示（モバイルでは改行なし） ========================================================================== */ /* ----- PC のみ改行 ----- */ br[data-view="pc"] { display: inline; } @media (max-width: 782px) { br[data-view="pc"] { display: none; } } /* ========================================================================== 5. [Primitive] 共通本文（サービス詳細の編集部本文/サービス本文） -------------------------------------------------------------------------- サービス詳細ページで共通利用する本文タイポグラフィ。 タグ構造（代表・2〜3階層まで）: div.fact-company-editorial__body h2〜h4 / p / ul / ol / li / a / strong … 編集部要約ブロック内 div.fact-service-content h2〜h4 / p / ul / ol / li / a / strong … サービス本文（ショートコード [factoring_service_content] 等） ========================================================================== */ /* ----- 本文タイポグラフィ ----- */ :is(.fact-company-editorial__body, .fact-service-content) { font-size: var(--fact-font-size-body); line-height: 1.75; color: var(--fact-color-black); } :is(.fact-company-editorial__body, .fact-service-content) p { margin-block: 0 var(--fact-space-lg); margin-inline: 0; text-align: justify; } .single-factoring_service :is(.fact-company-editorial__body, .fact-service-content) p { text-align: left; } :is(.fact-company-editorial__body, .fact-service-content) p strong { font-weight: 600; } :is(.fact-company-editorial__body, .fact-service-content) strong { font-weight: 600; color: var(--fact-color-text-strong); } :is(.fact-company-editorial__body, .fact-service-content) p:last-child { margin-block-end: 0; } :is(.fact-company-editorial__body, .fact-service-content) h2 { position: relative; box-sizing: border-box; margin-block: var(--fact-space-3xl); margin-inline: 0; padding-block: var(--fact-space-2xs); padding-inline: var(--fact-space-lg) 0; border-start-start-radius: 2px; border-end-start-radius: 2px; font-size: var(--fact-font-size-lg); font-weight: 700; color: var(--fact-color-text-strong); } :is(.fact-company-editorial__body, .fact-service-content) h2::before { position: absolute; inset-block: 0; inset-inline-start: 0; width: 5px; border-radius: 5px; background: var(--fact-color-blue); content: ""; } :is(.fact-company-editorial__body, .fact-service-content) h3 { position: relative; margin-block: var(--fact-space-lg); margin-inline: 0; padding-block: var(--fact-space-sm); padding-inline: 0; font-size: var(--fact-font-size-body); font-weight: 600; color: var(--fact-color-text-strong); } :is(.fact-company-editorial__body, .fact-service-content) h3::before { position: absolute; inset-block-end: 0; inset-inline-start: 0; width: 100%; height: 1px; background: var(--fact-color-border); content: ""; } :is(.fact-company-editorial__body, .fact-service-content) h3::after { position: absolute; inset-block-end: 0; inset-inline-start: 0; width: 15%; height: 1px; background: var(--fact-color-blue); content: ""; } :is(.fact-company-editorial__body, .fact-service-content) h4 { margin-block: 0 var(--fact-space-xs); margin-inline: 0; font-size: var(--fact-font-size-body); font-weight: 600; color: var(--fact-color-text-strong); } :is(.fact-company-editorial__body, .fact-service-content) :is(ul, ol) { margin-block: 0 var(--fact-space-md); margin-inline: 0; padding-inline-start: var(--fact-space-xl); } :is(.fact-company-editorial__body, .fact-service-content) li { margin-block-end: var(--fact-space-2xs); } :is(.fact-company-editorial__body, .fact-service-content) li:last-child { margin-block-end: 0; } :is(.fact-company-editorial__body, .fact-service-content) a { color: var(--fact-color-blue); text-decoration: underline; text-underline-offset: 2px; } :is(.fact-company-editorial__body, .fact-service-content) a:is(:hover, :focus-visible, :active) { color: var(--fact-color-blue); } /* ========================================================================== 6. [Primitive] 共通目次（サービス詳細 TOC） -------------------------------------------------------------------------- サービス詳細の目次 UI（開閉・リンク・階層リスト）を共通化。 タグ構造（代表・2〜3階層まで）: nav.fact-service-toc div.fact-service-toc__head p.fact-service-toc__title button.fact-service-toc__toggle div.fact-service-toc__panel ol.fact-service-toc__list li a … 一次リンク ol.fact-service-toc__sublist li > a … 二次リンク（任意） ========================================================================== */ /* ----- TOC コンテナ・開閉・リスト ----- */ .fact-service-toc { margin-block-end: var(--fact-space-5xl); border: 1px solid color-mix(in srgb, var(--fact-color-palette-slate-900) 6%, transparent); border-inline-start: 3px solid var(--fact-color-blue); border-radius: 6px; background: var(--fact-color-bg-sub); } .fact-service-toc.is-collapsed { margin-block-end: var(--fact-space-xl); } .fact-service-toc .fact-service-toc__head { display: flex; align-items: center; justify-content: space-between; gap: var(--fact-space-xs); margin: 0; padding: var(--fact-space-lg); } .fact-service-toc .fact-service-toc__title { margin: 0; font-size: var(--fact-font-size-body); font-weight: 600; color: var(--fact-color-text-strong); line-height: 1.2; } .fact-service-toc .fact-service-toc__toggle { flex: 0 0 auto; margin-inline-start: 0; padding: var(--fact-space-2xs) var(--fact-space-lg); border: 1px solid color-mix(in srgb, var(--fact-color-palette-slate-900) 12%, transparent); border-radius: 999px; font-size: var(--fact-font-size-xs); font-weight: 600; line-height: 1.2; letter-spacing: 0.02em; color: var(--fact-color-text-slate-600); background: var(--fact-color-bg-slate-50); box-shadow: var(--fact-shadow-subtle); transition: background var(--fact-transition-fast), border-color var(--fact-transition-fast), box-shadow var(--fact-transition-fast), transform var(--fact-transition-fast); cursor: pointer; } .fact-service-toc .fact-service-toc__toggle:is(:hover, :focus-visible, :active) { border-color: color-mix(in srgb, var(--fact-color-palette-slate-900) 12%, transparent); background: var(--fact-color-bg-slate-50); box-shadow: var(--fact-shadow-subtle); transform: translateY(-1px); } .fact-service-toc .fact-service-toc__panel { --fact-toc-duration: var(--fact-motion-duration-medium); --fact-toc-duration-fast: var(--fact-motion-duration-short); --fact-toc-easing: var(--fact-motion-easing-ease); max-height: 5000px; padding-block: 0 var(--fact-space-lg); padding-inline: var(--fact-space-lg); overflow: hidden; opacity: 1; transform: translateY(0); transition: max-height var(--fact-toc-duration) var(--fact-toc-easing), opacity var(--fact-toc-duration-fast) var(--fact-toc-easing), transform var(--fact-toc-duration) var(--fact-toc-easing); will-change: max-height, opacity, transform; } .fact-service-toc.is-collapsed .fact-service-toc__panel { max-height: 0; padding-block-end: 0; opacity: 0; transform: translateY(-4px); } @media (prefers-reduced-motion: reduce) { .fact-service-toc .fact-service-toc__panel { transition: none; } } .fact-service-toc .fact-service-toc__list, .fact-service-toc .fact-service-toc__list > li > .fact-service-toc__sublist { margin: 0; padding-inline-start: 1.5em; list-style: decimal; } .fact-service-toc .fact-service-toc__list > li > .fact-service-toc__sublist { margin-block-start: var(--fact-space-2xs); list-style: lower-alpha; } .fact-service-toc .fact-service-toc__list > li, .fact-service-toc .fact-service-toc__list > li > .fact-service-toc__sublist > li { margin-block-end: var(--fact-space-xs); } .fact-service-toc .fact-service-toc__list > li:last-child, .fact-service-toc .fact-service-toc__list > li > .fact-service-toc__sublist > li:last-child { margin-block-end: 0; } .fact-service-toc .fact-service-toc__list > li::marker, .fact-service-toc .fact-service-toc__list > li > .fact-service-toc__sublist > li::marker { font-size: var(--fact-font-size-sm); font-weight: 600; } /* TOCリンク（一次/二次）の共通定義を集約 */ /* 注意: :where() は詳細度 0 になるため、コアの `.entry-content a` 等に負けやすい。ここは通常セレクタで上書きする。 */ .fact-service-toc :is( .fact-service-toc__list > li > a, .fact-service-toc__list > li > .fact-service-toc__sublist > li > a ) { position: relative; display: block; padding-block: var(--fact-space-xs); padding-inline: 0 var(--fact-space-5xl); border-bottom: 1px dashed var(--fact-color-border-strong); font-size: var(--fact-font-size-sm); font-weight: 600; line-height: 1; letter-spacing: 0.04em; color: var(--fact-color-black); text-decoration: none; transition: var(--fact-transition-fast); cursor: pointer; } .fact-service-toc :is( .fact-service-toc__list > li > a, .fact-service-toc__list > li > .fact-service-toc__sublist > li > a ):is(:hover, :focus-visible, :active) { opacity: var(--fact-opacity-hover-interactive); } .fact-service-toc .fact-service-toc__list > li > .fact-service-toc__sublist > li::marker, .fact-service-toc .fact-service-toc__list > li > .fact-service-toc__sublist > li > a { font-weight: 400; } .fact-service-toc .fact-service-toc__list > li > .fact-service-toc__sublist > li > a { padding-block: var(--fact-font-size-min); } .fact-service-toc .fact-service-toc__list > li > a::after { position: absolute; inset-block-start: var(--fact-space-xs); inset-inline-end: var(--fact-space-xs); border-width: 10px 6px 0 6px; border-style: solid; border-color: var(--fact-color-black) transparent transparent transparent; transform: translate(-50%, 0); content: ""; } /* ========================================================================== 7. [Primitive] 共通フォーム素子（入力・送信・同意） -------------------------------------------------------------------------- 見積/口コミ/問い合わせで共通利用するフォーム部品を集約。 レイアウト（2カラム化・ステッパー固有）は 19 章で扱う。 タグ構造（代表・2〜3階層まで）: div.fact-form__field div.fact-form__label-row label.fact-form__label span.fact-form__char-count div.fact-form__textarea-wrap textarea.fact-form__textarea input.fact-form__input / select.fact-form__select div.fact-form__actions button.fact-form__submit label.fact-form__agree-label input.fact-form__agree-checkbox span.fact-form__agree-text > a ========================================================================== */ /* ラベル行（ラベル＋必須 左、文字数 右） */ .fact-form__label-row { display: flex; align-items: center; justify-content: space-between; gap: var(--fact-space-xs); margin-block-end: var(--fact-space-3xs); } .fact-form__label { display: inline-flex; align-items: center; gap: var(--fact-space-3xs); font-size: var(--fact-font-size-sm); font-weight: 500; color: var(--fact-color-text-strong); } .fact-page-contact__form-scope label { display: block; margin-block-end: var(--fact-space-3xs); font-size: var(--fact-font-size-sm); font-weight: 500; color: var(--fact-color-text-strong); } /* 文字数表示（右上・薄いグレー） */ .fact-form__char-count { flex-shrink: 0; font-size: var(--fact-font-size-xs); color: var(--fact-color-text-weak); } .fact-form__textarea-wrap { position: relative; } /* テキストエリア右上に「50〜2000文字」などを表示 */ .fact-form__char-count--textarea { position: absolute; inset-block-start: calc(-1 * var(--fact-space-sm)); inset-inline-end: 0; } .fact-form__required { display: inline-flex; align-items: center; margin-inline-start: 0; padding: 2px 6px; border-radius: 3px; font-size: 10px; font-weight: 600; line-height: 1.2; color: var(--fact-color-error); background-color: color-mix(in srgb, var(--fact-color-error) 14%, var(--fact-color-white)); } .fact-form__optional { display: inline-flex; align-items: center; margin-inline-start: 0; padding: 2px 6px; border-radius: 3px; font-size: 10px; font-weight: 600; line-height: 1.2; color: var(--fact-color-white); background-color: color-mix(in srgb, var(--fact-color-text-muted) 70%, var(--fact-color-white)); } :is( .fact-form__input, .fact-form__select, .fact-form__textarea, .fact-page-contact__form-scope :is(input[type="text"], input[type="email"], input[type="tel"], select, textarea) ) { width: 100%; max-width: 100%; box-sizing: border-box; padding: var(--fact-space-xs) var(--fact-space-sm); border: 1px solid var(--fact-color-border); border-radius: var(--fact-radius-sm); font-size: var(--fact-font-size-body); background: var(--fact-color-white); } :is( .fact-form__textarea, .fact-page-contact__form-scope textarea ) { min-height: var(--fact-space-11xl); resize: vertical; } /* ユーザー操作後の検証エラー（HTML5 制約・ブラウザが :user-invalid を付与する場合） */ :is( .fact-form__input, .fact-form__select, .fact-form__textarea, .fact-page-contact__form-scope :is(input[type="text"], input[type="email"], input[type="tel"], select, textarea) ):user-invalid { border-color: var(--fact-color-error); box-shadow: var(--fact-shadow-form-error-ring); } :is( .fact-form__input, .fact-form__select, .fact-form__textarea, .fact-page-contact__form-scope :is(input[type="text"], input[type="email"], input[type="tel"], select, textarea) ):is(:focus, :focus-visible) { outline: 2px solid var(--fact-color-form-accent); outline-offset: 1px; } :is(.fact-form__actions, .fact-company-reviews__actions) { margin-block-start: var(--fact-space-lg); text-align: center; } :is( .fact-form__submit, .fact-company-reviews__submit, .fact-page-contact__form-scope :is(input[type="submit"], button[type="submit"]) ) { display: inline-flex; align-items: center; justify-content: center; padding: var(--fact-space-xs) var(--fact-space-xl); border: none; border-radius: var(--fact-radius-full); font-size: var(--fact-font-size-body); font-weight: 600; color: var(--fact-color-white); background: var(--fact-color-blue); cursor: pointer; } :is( .fact-form__submit, .fact-company-reviews__submit, .fact-page-contact__form-scope :is(input[type="submit"], button[type="submit"]) ):is(:hover, :focus-visible, :active) { background: var(--fact-color-blue); } :is(.fact-form__actions-note, .fact-company-reviews__actions-note) { margin-block-start: var(--fact-space-xs); font-size: 11px; line-height: 1.6; text-align: center; color: var(--fact-color-text-weak); } .fact-company-reviews__field--agree { margin-block-start: var(--fact-space-lg); } :is(.fact-form__agree-label, .fact-company-reviews__agree-label) { display: inline-flex; align-items: flex-start; gap: var(--fact-space-xs); font-size: var(--fact-font-size-xs); color: var(--fact-color-text-weak); } :is(.fact-form__agree-checkbox, .fact-company-reviews__agree-checkbox) { width: var(--fact-space-md); height: var(--fact-space-md); margin-block-start: 2px; border-radius: 4px; accent-color: var(--fact-color-form-accent); } :is(.fact-form__agree-text, .fact-company-reviews__agree-text) a { color: var(--fact-color-form-accent); text-decoration: underline; } :is(.fact-form__agree-text, .fact-company-reviews__agree-text) a:is(:hover, :focus-visible, :active) { text-decoration: none; } /* ========================================================================== 8. [Primitive] 共通タブ（ナビ・選択状態） -------------------------------------------------------------------------- フォームステッパー等で使うタブUI（選択・非活性・下線）を共通化。 タグ構造（見積フォームのステッパー内・代表）: div.fact-form-stepper div.fact-form-stepper__tabs button.fact-form-stepper__tab … 19 章でラップ要素と併用 ========================================================================== */ /* ----- タブリスト（横並び・下線） ----- */ .fact-form-stepper__tabs { display: flex; align-items: stretch; gap: var(--fact-space-sm); padding-block-end: 0; border-bottom: 1px solid color-mix(in srgb, var(--fact-color-border) 65%, var(--fact-color-white)); overflow-x: auto; -webkit-overflow-scrolling: touch; } /* ----- タブ要素（通常・状態） ----- */ .fact-form-stepper__tab { position: relative; flex: 0 0 auto; padding: var(--fact-space-sm) 0; border: 0; border-radius: 0; font-size: 12px; font-weight: 700; color: var(--fact-color-text-weak); background: transparent; transition: color var(--fact-motion-duration-short) var(--fact-motion-easing-ease); cursor: pointer; } .fact-form-stepper__tab:is(:hover, :focus-visible, :active) { color: var(--fact-color-text-strong); } .fact-form-stepper__tab:is(.is-active, [aria-selected="true"]) { color: var(--fact-color-form-accent); } .fact-form-stepper__tab:is(.is-active, [aria-selected="true"])::after { position: absolute; inset-inline: 0; inset-block-end: -1px; height: 3px; border-radius: 999px; background: var(--fact-color-form-accent); content: ""; } .fact-form-stepper__tab:is(.is-disabled, [aria-disabled="true"]:not([aria-selected="true"])) { color: color-mix(in srgb, var(--fact-color-text-weak) 75%, var(--fact-color-white)); background: transparent; opacity: 0.5; cursor: not-allowed; } .fact-form-stepper__tab:is(.is-disabled, [aria-disabled="true"]:not([aria-selected="true"])):is(:hover, :focus-visible, :active) { color: color-mix(in srgb, var(--fact-color-text-weak) 75%, var(--fact-color-white)); } /* ========================================================================== 9. [Layout] レイアウト・グローバル -------------------------------------------------------------------------- - .wp-site-blocks：固定ヘッダー分の上パディング（--fact-header-skip／1 章 :root でブレークポイント別に定義）。 - 管理バー表示時は html の margin-top で本文が下がるため、padding にバー高さを二重に足さない。狭幅では #wpadminbar を fixed にそろえ固定ヘッダーとずれないよう補正する（ヘッダー章のメディアクエリ内）。 - footer.wp-block-template-part：ルート padding ブロックの上マージン打ち消し。 - レスポンシブ用のメディアクエリは、本章に無いものは以降の各章（ヘッダー・フッター・ページ別等）内で定義する。 タグ構造（WordPress ルート・代表）: body div.wp-site-blocks header.wp-block-template-part … parts/header.html（10 章） main.wp-block-group.fact-page-shell … layout default（横インセットは子の .fact-container-inner のみ） footer.wp-block-template-part … parts/footer.html（11 章） （本章）上記ラッパーの余白打ち消し・.fact-content-wrap・.fact-container-inner 監査メモ（横余白の積層）: 従来は main（constrained）＋内側 group（constrained）＋ alignfull で has-global-padding が複数段にかかり左右が過剰に狭まっていた。テンプレートを default 化し、 .fact-container-inner.fact-page-main__inner に --fact-page-gutter を padding のみ 1 回適用する。 :root の --wp--style--global--content-size に 100% - 〇rem を置かない（theme.json と方式B。幅とパディングの二重ガター防止）。 テンプレの縦パディングは .fact-content-wrap--pad-*（HTML に style 属性を置かない）。 ========================================================================== */ /* ----- サイトブロック・フッター枠 ----- */ .wp-site-blocks { /* 固定ヘッダー分の押し下げ。JS が実測値を入れた場合はそちらを優先する。 */ padding-block-start: var(--fact-header-skip-dyn, var(--fact-header-skip)); scroll-behavior: smooth; } /* ヘッダー直下の段差：WPコアの blockGap（.wp-site-blocks > * の margin）を打ち消す */ :where(.wp-site-blocks) > main.fact-page-shell { margin-block-start: 0 !important; } /* タブレット縦・スマホ（〜782px）：main 先頭：blockGap 由来の margin-block-start を消す（ヒーロー直上の段差防止） */ @media (max-width: 782px) { .fact-page-front.fact-page-shell > :first-child { margin-block-start: 0 !important; } .fact-page-front > .wp-block-factoring-shortcode-raw:first-child { margin-block-start: 0 !important; } } footer.wp-block-template-part { margin-block-start: 0; } /* メイン枠: constrained を外し横パディングを持たない（インセットは .fact-container-inner に集約） */ :where(main.fact-page-shell.wp-block-group) { box-sizing: border-box; max-width: none; margin-inline: 0; margin-block-start: 0; padding-inline: 0; } /* ヒーロー直下のコンテンツブロック：親テーマの is-layout-constrained > * の margin-block-start を打ち消し（余白の解消） */ .fact-content-wrap { margin-block-start: 0; } /* 本文エリア縦パディングのみ（横は内側 .fact-container-inner） */ .fact-page-body { margin-inline: 0; padding-inline: 0; } /* alignfull 外枠: 親に横パディングが無い前提で全幅 */ .fact-content-wrap.alignfull { box-sizing: border-box; width: 100%; max-width: none; margin-inline: 0; } /* テンプレート／パーツの縦パディング（block の style 属性は使わず class のみ。値は theme.json spacing と対応） */ .fact-content-wrap--pad-md { padding-block: 4rem; /* preset spacing 60 */ } .fact-content-wrap--pad-hero { padding-block-start: 2.5rem; /* preset spacing 40 */ padding-block-end: 4rem; /* preset spacing 60 */ } .fact-content-wrap--pad-lg { padding-block-start: 4rem; /* preset spacing 60 */ padding-block-end: 6rem; /* preset spacing 80 */ } .fact-page-body--pad-md { padding-block: 4rem; /* preset spacing 60 */ } .fact-single-post__tags-wrap { padding-block: 4rem; } /* コンテンツ幅ユーティリティ：ヒーロー・フロントセクション・ページ本文の中身を共通幅で中央寄せ */ .fact-container-inner { box-sizing: border-box; width: 100%; max-width: var(--wp--style--global--content-size); margin-inline: auto; padding-inline: var(--fact-page-gutter); } /* main 配下の本文ラッパー: コアの .wp-block-group（is-layout-flow 等）が付与する横 margin を打ち消し */ main.fact-page-shell .fact-container-inner.fact-page-main__inner { margin-block: 0; margin-inline: auto; } /* ブロックルートが .fact-container-inner のとき、コアの post-content 余白を二重にしない */ :where(.fact-container-inner) :where(.wp-block-post-content) { margin-inline: 0; padding-inline: 0; } /* フロント: ヒーロー直下の post-content はラッパー無し。コアの左右余白のみ打ち消し */ .fact-page-front.fact-page-shell > .wp-block-post-content { margin-inline: 0; padding-inline: 0; } /* ----- 2カラム骨格（Layout責務） ----- */ /* カラム比率・1列化など「骨格」だけを定義。サイドバー部品の見た目は 18 章 [Block] へ分離。 */ :is( .fact-single-with-sidebar .fact-single-columns, .fact-service-with-sidebar .fact-service-columns ) { --fact-ratio-30-70-side: 30%; --fact-ratio-30-70-main: 70%; display: flex; } @media (min-width: 783px) { .fact-single-with-sidebar .fact-single-columns .wp-block-column:is(.fact-single-sidebar, .fact-single-main), .fact-service-with-sidebar .fact-service-columns .wp-block-column:is(.fact-service-sidebar, .fact-service-main) { min-width: 0; } .fact-single-with-sidebar .fact-single-columns .wp-block-column.fact-single-sidebar, .fact-service-with-sidebar .fact-service-columns .wp-block-column.fact-service-sidebar { flex: 0 1 var(--fact-ratio-30-70-side); } .fact-single-with-sidebar .fact-single-columns .wp-block-column.fact-single-main, .fact-service-with-sidebar .fact-service-columns .wp-block-column.fact-service-main { flex: 0 1 var(--fact-ratio-30-70-main); } } @media (max-width: 782px) { :is( .fact-single-with-sidebar .fact-single-columns, .fact-service-with-sidebar .fact-service-columns ) { flex-wrap: wrap; width: 100%; } .fact-single-with-sidebar .fact-single-main, .fact-service-with-sidebar .fact-service-main, .fact-single-with-sidebar .fact-single-sidebar, .fact-service-with-sidebar .fact-service-sidebar { flex-basis: 100%; max-width: 100%; min-width: 0; } :is( .fact-single-with-sidebar .fact-single-columns, .fact-service-with-sidebar .fact-service-columns ) > *:not(:first-child) { margin-block-start: var(--fact-space-3xl); } } /* ========================================================================== 10. [Region] ヘッダー（.fact-header） -------------------------------------------------------------------------- - parts/header.html：.fact-header > .fact-header__inner（ロゴ + .fact-header__end） - .fact-header__end：ドロワー・一括見積レール・モバイル用トグル - 〜782px：ドロワー fixed・フェード表示。top / .wp-site-blocks は --fact-header-skip（管理バー時は +46px）。#wpadminbar は fixed で上端固定（コアの absolute だとスクロールで隙間が出る） - DOM：メイン → ドロワー内検索 → ユーティリティ（783px 以上は order でユーティリティを上段に） - 開閉：.is-nav-open + inert（assets/ts/fact-header-nav.ts） タグ構造（parts/header.html・代表・2〜3階層まで）: header.fact-header.fact-header--sticky[data-fact-header] div.fact-header__inner a.fact-header__logo.fact-logo > img div.fact-header__end div#fact-header-panel.fact-header__drawer[data-fact-nav-panel] nav.fact-nav.fact-nav--primary ul.fact-nav__list.fact-nav__list--primary > li > a … グローバルナビ form.fact-header__search[role="search"] … ドロワー内検索 div.fact-header__row.fact-header__row--utility … ユーティリティリンク＋検索 a.fact-header__rail.fact-ui-btn.fact-ui-btn--press-blue … 一括見積（レール） button.fact-header__toggle[data-fact-nav-toggle] … モバイル開閉 ========================================================================== */ /* ----- ヘッダー外枠・固定・疑似要素 ----- */ .fact-header { position: relative; width: 100%; border-bottom: 1px solid var(--fact-color-border); background: transparent; } .fact-header::before { position: absolute; z-index: -1; inset: 0; background: color-mix(in srgb, var(--fact-color-white) 82%, transparent); backdrop-filter: blur(10px); content: ""; } .fact-header--sticky { position: fixed; z-index: var(--fact-z-index-sticky-header); inset-inline: 0; inset-block-start: 0; } body.admin-bar .fact-header--sticky { inset-block-start: var(--fact-space-3xl); } /* ----- ヘッダー内側：コンテンツ幅・フレックス ----- */ .fact-header__inner { display: flex; align-items: center; box-sizing: border-box; width: 100%; max-width: var(--wp--style--global--content-size); margin-inline: auto; padding-block: var(--fact-space-xs); padding-inline: var(--fact-page-gutter); gap: var(--fact-space-xl); } /* ロゴ（a 自体が .fact-header__logo） */ .fact-header__logo { display: inline-block; flex: 0 0 auto; transition: opacity var(--fact-transition-fast); } .fact-header__logo:is(:hover, :focus-visible, :active) { opacity: var(--fact-opacity-hover-interactive); } .fact-logo img { display: block; width: auto; height: auto; max-height: var(--fact-space-6xl); } /* 右列：ドロワー + レール + トグル */ .fact-header__end { display: flex; flex: 1 1 auto; align-items: stretch; justify-content: flex-end; gap: var(--fact-space-md); min-width: 0; } /* デスクトップ：ナビ塊（ユーティリティ行 + メイン） */ .fact-header__drawer { display: flex; flex: 1 1 auto; flex-direction: column; align-items: flex-end; justify-content: center; gap: var(--fact-space-2xs); min-width: 0; } .fact-header__row--utility { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; width: 100%; gap: var(--fact-space-md); } /* ----- サイト内ナビ（プレーン ul/li） ----- */ .fact-nav__list { margin: 0; padding: 0; list-style: none; } .fact-nav__item { margin: 0; } .fact-nav--utility .fact-nav__list { display: flex; flex-wrap: wrap; align-items: center; gap: var(--fact-space-md); } .fact-nav__list--primary { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--fact-space-lg); } .fact-nav__list--primary .fact-nav__item { flex: 0 0 auto; } .fact-nav__link { text-decoration: none; transition: color var(--fact-transition-fast); } .fact-nav__link--utility { font-size: var(--fact-font-size-xs); font-weight: 500; color: var(--fact-color-text-muted); } .fact-nav__link--utility:is(:hover, :focus-visible, :active) { color: inherit; } .fact-nav__link--primary { position: relative; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--fact-radius-sm); font-size: var(--fact-font-size-sm); font-weight: 700; color: var(--fact-color-text-strong); transition: color var(--fact-transition-fast), background-color var(--fact-transition-fast); } .fact-nav__link--primary:is(:hover, :focus-visible, :active) { color: inherit; opacity: 1; background: transparent; } /* メインリンク下線（テキスト幅に合わせる） */ .fact-nav__link--primary::after { /* この下線アニメ専用（local scope） */ --fact-nav-underline-duration: 0.4s; position: absolute; inset-inline-start: 50%; inset-block-end: calc(var(--fact-space-md) * -1 + 3px); display: block; height: var(--fact-space-3xs); width: 0; border-radius: var(--fact-radius-full); background: var(--fact-color-blue); transform: translateX(-50%); transition: width var(--fact-nav-underline-duration); content: ""; } .fact-nav__link--primary:is(:hover, :focus-visible, :active)::after, .fact-nav__link--primary:focus-visible::after { width: 100%; } /* 長いラベル / 短いラベル（タブレット中幅のみ短縮） */ .fact-nav__text--short { display: none; } .fact-nav__text--long { display: inline; } @media (min-width: 783px) and (max-width: 1023.98px) { .fact-nav__text--short { display: inline; } .fact-nav__text--long { display: none; } } /* デスクトップ広め：メインリンクの字組を一段詰める */ @media (min-width: 1024px) { .fact-nav__link--primary { font-size: var(--fact-font-size-sm); font-weight: 600; } } .fact-header__search { margin: 0; } /* 入力＋送信を一体のピル型（枠線はラッパーに集約） */ .fact-header__search-field { display: inline-flex; align-items: stretch; max-width: 100%; border: 1px solid var(--fact-color-border); border-radius: var(--fact-radius-full); overflow: hidden; background: var(--fact-color-white); } .fact-header__search-field:focus-within { border-color: var(--fact-color-blue); box-shadow: var(--fact-shadow-header-focus); } .fact-header__search input[type="search"] { box-sizing: border-box; flex: 1 1 auto; min-width: 0; width: 9.5rem; min-height: calc(var(--fact-space-xl) + var(--fact-space-2xs)); padding: 0 var(--fact-space-xs); border: 0; border-radius: 0; font-size: var(--fact-font-size-xs); line-height: 1.2; color: var(--fact-color-black); background: transparent; -webkit-appearance: none; appearance: none; } .fact-header__search input[type="search"]:focus { outline: none; } .fact-header__search input[type="search"]::placeholder { color: var(--fact-color-text-weak); } .fact-header__search-submit { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; min-width: calc(var(--fact-space-xl) + var(--fact-space-2xs)); padding: 0 var(--fact-space-xs); border: 0; color: var(--fact-color-white); background: var(--fact-color-blue); transition: opacity var(--fact-transition-fast); cursor: pointer; } .fact-header__search-submit:is(:hover, :focus-visible, :active) { opacity: var(--fact-opacity-hover-interactive); } .fact-header__search-submit:focus-visible { opacity: var(--fact-opacity-hover-interactive); box-shadow: inset 0 0 0 2px var(--fact-color-sky-blue); } .fact-header__search-icon { display: block; width: 1.125rem; height: 1.125rem; } /* ドロワー専用検索（デスクトップでは非表示・ツールバー側のフォームを使用） */ .fact-header__search--drawer-footer { display: none; } /* 一括見積（ヘッダー右のスクエア） */ .fact-header__rail { display: flex; flex-direction: column; align-items: center; justify-content: center; align-self: stretch; aspect-ratio: 1 / 1; min-height: calc(var(--fact-space-5xl) + var(--fact-space-md)); gap: var(--fact-space-2xs); margin-block-start: 0; padding: var(--fact-space-2xs); border-radius: var(--fact-radius-sm); font-size: var(--fact-font-size-xs); font-weight: 700; line-height: 1.2; text-align: center; } .fact-header__rail:is(:hover, :focus-visible, :active) { color: var(--fact-color-white); text-decoration: none; } .fact-header__rail-icon { display: inline-flex; align-items: center; justify-content: center; width: var(--fact-space-xl); height: var(--fact-space-xl); } .fact-header__rail-icon svg { display: block; width: 100%; height: auto; } .fact-header__rail-label { font-size: var(--fact-font-size-caption); font-weight: 700; letter-spacing: 0.04em; } /* モバイル用メニュートグル（783px 以上では非表示） */ .fact-header__toggle { display: none; flex: 0 0 auto; align-items: center; justify-content: center; margin: 0; padding: 0; border: 0; box-sizing: border-box; color: var(--fact-color-white); background: var(--fact-color-blue); transition: opacity var(--fact-transition-fast); cursor: pointer; } .fact-header__toggle:is(:hover, :focus-visible, :active) { opacity: var(--fact-opacity-hover-interactive); } .fact-header__toggle:focus-visible { outline: var(--fact-focus-ring-width) solid var(--fact-focus-ring-color); outline-offset: var(--fact-focus-ring-offset); } /* * バーガー→✕：線をやや太め・間隔を詰める（参考: セゾン投信 https://www.saison-am.co.jp/ 系のモバイルヘッダー） */ .fact-header__burger { --fact-burger-bar-h: 0.1875rem; /* 3px */ display: flex; width: 1.375rem; height: 1rem; flex-direction: column; align-items: stretch; justify-content: space-between; } .fact-header__burger-line { display: block; height: var(--fact-burger-bar-h); flex-shrink: 0; border-radius: var(--fact-radius-sm); background: currentColor; transform-origin: center; transition: transform var(--fact-transition-base), opacity var(--fact-transition-fast); } .fact-header.is-nav-open .fact-header__burger-line:nth-child(1) { transform: translateY(calc((1rem - var(--fact-burger-bar-h)) / 2)) rotate(45deg); } .fact-header.is-nav-open .fact-header__burger-line:nth-child(2) { opacity: 0; } .fact-header.is-nav-open .fact-header__burger-line:nth-child(3) { transform: translateY(calc(-1 * (1rem - var(--fact-burger-bar-h)) / 2)) rotate(-45deg); } /* 〜782px：ドロワー・トグル・ロゴ周り（管理バー時は sticky top を 46px に） */ @media (max-width: 782px) { /* コアは狭幅で #wpadminbar を absolute にしがちで、スクロールでバーだけ流れ固定ヘッダーは top:46px のまま → 画面上部に隙間。常に viewport 上端に固定する */ body.admin-bar #wpadminbar { position: fixed !important; inset-block-start: 0 !important; inset-inline: 0 !important; z-index: var(--fact-z-index-wp-adminbar); width: 100% !important; } body.admin-bar .fact-header--sticky { inset-block-start: 46px; /* WordPress 管理バーが px 指定のため固定。消さないこと */ } /* 上下パディングはロゴのみ。トグルは縦いっぱい */ .fact-header__inner { max-width: none; align-items: stretch; padding-block: 0; padding-inline: var(--fact-section-padding-x-sm) 0; gap: var(--fact-space-xs); } .fact-header__logo { align-self: center; padding-block: var(--fact-space-sm); } .fact-header__end { flex: 0 0 auto; align-items: stretch; align-self: stretch; margin-inline-start: auto; gap: var(--fact-space-xs); } .fact-header__search--toolbar { display: none; } /* ベースの display:none を必ず上書き（SP のみドロワー内検索を表示） */ .fact-header__search--drawer-footer { display: block; box-sizing: border-box; width: 100%; max-width: 100%; min-width: 0; margin-block-start: 0; padding-block-start: var(--fact-space-lg); border-top: 1px solid var(--fact-color-divider); } .fact-header__search--drawer-footer .fact-header__search-field { width: 100%; border-radius: var(--fact-radius-md); background: var(--fact-color-light-gray); } .fact-header__search--drawer-footer input[type="search"] { width: 100%; min-height: 2.75rem; padding: 0 var(--fact-space-md); font-size: var(--fact-font-size-sm); } .fact-header__search--drawer-footer .fact-header__search-submit { min-width: 2.75rem; min-height: 2.75rem; padding: 0 var(--fact-space-sm); } .fact-header__search--drawer-footer .fact-header__search-icon { width: 1.25rem; height: 1.25rem; } .fact-header__rail { display: none; } /* 幅＝高さ：行の高さは --fact-header-stack-h 基準なので同じ値で正方形に近づける */ .fact-header__toggle { display: inline-flex; flex: 0 0 var(--fact-header-stack-h); box-sizing: border-box; width: var(--fact-header-stack-h); min-width: var(--fact-header-stack-h); max-width: var(--fact-header-stack-h); align-self: stretch; } /* ドロワー：フェードのみ（スライドなし） */ .fact-header__drawer { position: fixed; inset-block-start: calc(var(--fact-header-skip) - var(--fact-header-border-w)); inset-inline: 0; z-index: var(--fact-z-index-dropdown); display: flex; visibility: hidden; flex: none; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: var(--fact-space-lg); width: 100%; max-width: 100%; max-height: calc(100dvh - var(--fact-header-skip) + var(--fact-header-border-w)); padding: var(--fact-space-xl) var(--fact-section-padding-x-sm) var(--fact-space-3xl); border-bottom: 1px solid var(--fact-color-border); box-sizing: border-box; overflow-x: hidden; overflow-y: auto; background: var(--fact-color-white); box-shadow: var(--fact-shadow-hover); opacity: 0; transition: opacity var(--fact-transition-base), visibility var(--fact-transition-base); pointer-events: none; } body.admin-bar .fact-header__drawer { inset-block-start: calc(46px + var(--fact-header-skip) - var(--fact-header-border-w)); max-height: calc(100dvh - 46px - var(--fact-header-skip) + var(--fact-header-border-w)); } .fact-header.is-nav-open .fact-header__drawer { visibility: visible; opacity: 1; pointer-events: auto; } /* スマホのハンバーガーメニュー展開時：項目ホバーは薄グレー背景に統一 */ .fact-header__drawer .fact-nav--primary .fact-nav__link--primary:is(:hover, :focus-visible, :active) { opacity: 1; background: var(--fact-color-light-gray); } .fact-header__row--utility { box-sizing: border-box; max-width: 100%; min-width: 0; width: 100%; margin-block-start: 0; padding-block-start: var(--fact-space-lg); border-top: 1px solid var(--fact-color-divider); justify-content: flex-start; } .fact-nav--utility .fact-nav__list { justify-content: flex-start; } /* ドロワー内の大きいトグル下ではユーティリティを少し強調 */ .fact-nav--utility .fact-nav__link--utility { font-size: var(--fact-font-size-sm); } .fact-nav--primary { box-sizing: border-box; width: 100%; max-width: 100%; min-width: 0; } .fact-nav__list--primary { flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 0; } .fact-nav__link--primary { display: block; padding-block: var(--fact-space-lg); padding-inline: var(--fact-space-sm); font-size: var(--fact-font-size-body); line-height: 1.35; } .fact-nav__link--primary::after { display: none; } /* 正方形トグル内でアイコンをやや大きく */ .fact-header__burger { width: 1.5rem; height: 1.125rem; } .fact-header.is-nav-open .fact-header__burger-line:nth-child(1) { transform: translateY(calc((1.125rem - var(--fact-burger-bar-h)) / 2)) rotate(45deg); } .fact-header.is-nav-open .fact-header__burger-line:nth-child(3) { transform: translateY(calc(-1 * (1.125rem - var(--fact-burger-bar-h)) / 2)) rotate(-45deg); } } /* タブレット中幅（783px〜1023.98px）：管理バー文言省略・ロゴ小さめ・:root ヘッダー高 */ @media (min-width: 783px) and (max-width: 1023.98px) { #wpadminbar #wp-admin-bar-my-account > .ab-item { font-size: 0; } #wpadminbar #wp-admin-bar-my-account > .ab-item .display-name { font-size: var(--fact-font-size-sm); } .fact-logo img { max-height: var(--fact-space-5xl); } } /* ドロワー開時：背面スクロールを止める */ body.fact-header-nav-open { overflow: hidden; } /* ドロワー背面：黒の透明フィルター（下固定バーは前面のまま） */ body::before { position: fixed; inset: 0; z-index: var(--fact-z-index-header-backdrop); visibility: hidden; background: color-mix(in srgb, var(--fact-color-black) 50%, transparent); opacity: 0; transition: opacity var(--fact-transition-base), visibility var(--fact-transition-base); pointer-events: none; content: ""; } body.fact-header-nav-open::before { visibility: visible; opacity: 1; pointer-events: auto; } /* 783px 以上：ドロワーを常にレイアウト内に戻す（DOM はメイン→検索(非表示)→ユーティリティなので order で上段を先に） */ @media (min-width: 783px) { .fact-header__row--utility { order: 1; } .fact-nav--primary { order: 2; } .fact-header__search--drawer-footer { order: 3; } .fact-header__drawer { position: static; inset: auto; visibility: visible; flex: 1 1 auto; flex-direction: column; align-items: flex-end; max-height: none; padding: 0; border-bottom: 0; overflow: visible; background: transparent; box-shadow: none; opacity: 1; pointer-events: auto; } } /* ========================================================================== 11. [Region] フッター（.fact-footer） -------------------------------------------------------------------------- - .fact-footer__pr：PR表記（白背景・CTA の上）。 - .fact-footer__cta：CTA エリア（薄いグレー背景）。 - .fact-footer__middle：中段ナビ（ランキング・契約条件・契約形態・お役立ち記事）。タブレット以下で非表示。 - .fact-footer__bottom：下段コピーライト・法務リンク。 タグ構造（parts/footer.html・代表・2〜3階層まで）: footer.fact-footer.wp-block-group.alignfull div.wp-block-group.alignfull （ショートコード）[factoring_recommend_global] div.fact-footer__pr （ショートコード）[factoring_pr_notice] div.fact-footer__cta div.wp-block-group.alignwide p.fact-footer__cta-text … リード文 div.wp-block-buttons > div.wp-block-button a.fact-cta-estimate.fact-ui-btn.fact-ui-btn--press-blue span.fact-cta-estimate__icon（svg）+ span.fact-cta-estimate__text（2行） div.fact-footer__middle （ショートコード）[factoring_footer_nav] div.fact-footer__bottom ul.fact-footer__legal > li > a … 法務リンク p … Copyright ========================================================================== */ /* ----- フッター共通・PR・CTA ----- */ /* 上段：PR 表記・CTA ボタン。ダーク背景（--fact-color-blac）。 */ .fact-footer { border-top: 1px solid color-mix(in srgb, currentColor 10%, transparent); } .fact-footer__cta, .fact-footer__middle, .fact-footer__bottom, .fact-footer__pr { margin: 0; } .fact-footer__pr { padding-block: 1.5rem; /* preset spacing 30（parts/footer インライン廃止） */ border-top: 1px solid color-mix(in srgb, currentColor 10%, transparent); background: var(--fact-color-white); } .fact-footer__pr .fact-pr-disclaimer { margin-block: 0; } .fact-footer__cta { padding-block: 2.5rem; /* preset spacing 40 */ font-size: var(--fact-font-size-body); color: var(--fact-color-black); background: var(--fact-color-bg-bubble); } /* ----- 中段・下段（ダーク背景） ----- */ /* 中段：4 列レイアウト・見出し・リスト。下段：法務リンク。タブレット以下で中段非表示・1 列。 */ .fact-footer__middle { padding-block-start: 2.5rem; /* preset spacing 40 */ padding-block-end: 6rem; /* preset spacing 80 */ border-top: 1px solid color-mix(in srgb, currentColor 16%, transparent); font-size: var(--fact-font-size-sm); color: var(--fact-color-white); background: var(--fact-color-black); } .fact-footer__bottom { padding-block-start: 2.5rem; /* preset spacing 40 */ padding-block-end: 6rem; /* preset spacing 80 */ border-top: 1px solid color-mix(in srgb, currentColor 10%, transparent); font-size: var(--fact-font-size-sm); color: var(--fact-color-white); background: var(--fact-color-black); } .fact-footer__copyright-row { margin-block-start: 2.5rem; /* preset spacing 40 */ } :is(.fact-footer__middle, .fact-footer__bottom) a { color: var(--fact-color-white); text-decoration: none; } :is(.fact-footer__middle, .fact-footer__bottom) a:is(:hover, :focus-visible, :active) { text-decoration: underline; } /* ----- 中段：4列レイアウト・見出し・リスト ----- */ .fact-footer__middle .alignwide, .fact-footer__middle .fact-footer__nav .fact-footer__nav-inner { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--fact-space-5xl); } .fact-footer__middle .alignwide > .wp-block-group, .fact-footer__middle .fact-footer__nav-inner > .wp-block-group { flex: 1 1 0; min-width: 0; } .fact-footer__middle h4 { display: inline-block; width: 100%; margin-block-end: var(--fact-space-xs); padding-block-end: var(--fact-space-2xs); border-bottom: 1px solid color-mix(in srgb, var(--fact-color-white) 35%, transparent); font-size: var(--fact-font-size-body); font-weight: 600; } .fact-footer__middle .wp-block-list, .fact-footer__middle .fact-footer__nav ul { margin: 0; padding-inline-start: 0; font-size: var(--fact-font-size-sm); list-style: none; } .fact-footer__middle .fact-footer__nav-inner > .wp-block-group { margin-block: var(--fact-space-md); margin-inline: 0; } .fact-footer__middle .fact-footer__nav-inner > .wp-block-group:first-child { margin-block-start: 0; } .fact-footer__middle .fact-footer__nav ul li { margin-block: var(--fact-space-xs); margin-inline: 0; } .fact-footer__middle .fact-footer__nav ul li:first-child { margin-block-start: 0; } .fact-footer__middle .fact-footer__nav ul li:last-child { margin-block-end: 0; } /* ----- 下段：法務リンク ----- */ .fact-footer__legal { display: flex; flex-wrap: wrap; gap: var(--fact-space-sm); margin: 0; padding: 0; list-style: none; } .fact-footer__legal li::before { content: ""; } .fact-footer__legal li { padding-inline: var(--fact-space-md); } /* タブレット以下（〜1024px） */ @media (max-width: 1023.98px) { .fact-footer__legal { justify-content: center; } } /* デスクトップ（1024px〜） */ @media (min-width: 1024px) { .fact-footer__legal { justify-content: center; gap: var(--fact-space-xs); } .fact-footer__legal li { padding-inline: var(--fact-space-lg); text-align: center; } } /* ----- タブレット以下：中段非表示・1列 ----- */ /* タブレット縦・スマホ（〜782px） */ @media (max-width: 782px) { .fact-footer__middle { display: none; } .fact-footer__middle .alignwide, .fact-footer__middle .fact-footer__nav .fact-footer__nav-inner { width: 100%; flex-direction: column; } .fact-footer__middle .alignwide > .wp-block-group, .fact-footer__middle .fact-footer__nav-inner > .wp-block-group { gap: var(--fact-space-xl); } } /* ========================================================================== 12. [Chrome] パンくず・ページヘッド -------------------------------------------------------------------------- - .fact-breadcrumb：パンくずリスト。小さくグレー・控えめ。ヒーロー内・ページヘッドで使用。 - .fact-page-head：ヒーローなしページのパンくず・サブタイトル・タイトルラッパー（検索・一覧等）。 タグ構造（[factoring_breadcrumb]・inc/front/page-breadcrumb-hero.php）: nav.fact-breadcrumb[aria-label="パンくず"] a … 祖先ページ span.fact-breadcrumb__sep … 区切り （最終）span.fact-breadcrumb__current または a （.fact-page-head 利用時） .fact-page-subtitle + h1 等 … ヒーローなしページの見出し枠（12 章） ========================================================================== */ /* ----- パンくず ----- */ /* 上記 `nav.fact-breadcrumb`。フロント以外の固定ページ・サービス詳細等で利用。 */ .fact-breadcrumb { margin-block: 0 var(--fact-space-md); margin-inline: 0; padding: 0; font-size: var(--fact-font-size-caption); line-height: 1.5; color: var(--fact-color-text-weak); } .fact-breadcrumb a { color: var(--fact-color-text-weak); text-decoration: none; } .fact-breadcrumb a:is(:hover, :focus-visible, :active) { color: var(--fact-color-text-muted); text-decoration: underline; } .fact-breadcrumb__sep { margin: 0 var(--fact-space-2xs); } .fact-breadcrumb__current { color: var(--fact-color-text-muted); } /* ----- ページヘッド（ヒーローなしページ：パンくず・サブタイトル・タイトル） ----- */ /* ヒーローを使わないページの冒頭。パンくず・サブタイトル・タイトルを縦に並べる。 */ .fact-page-head { box-sizing: border-box; width: 100%; max-width: var(--fact-container-max); margin-inline: auto; padding-inline: var(--fact-space-md); } .fact-page-head__title { margin-block: 0 var(--fact-space-md); margin-inline: 0; font-size: clamp(var(--fact-font-size-xl), 4vw, var(--fact-font-size-3xl)); font-weight: 700; line-height: 1.35; color: var(--fact-color-text-strong); } .fact-page-head .fact-page-subtitle { margin-block: 0 var(--fact-space-2xs); margin-inline: 0; font-size: var(--fact-font-size-sm); color: var(--fact-color-text-weak); } /* ========================================================================== 13. [Block] ヒーロー -------------------------------------------------------------------------- PHP ショートコード [factoring_page_hero] で出力。幅・余白は子テーマで一元管理。 タグ構造（[factoring_page_hero]・inc/front/page-breadcrumb-hero.php）: div.fact-hero__container div.fact-hero.fact-container-inner （分岐） .fact-hero--full … is_front_page() div.fact-hero__headings p.fact-hero__eyebrow h1.fact-hero__title（.marker-yellow-thick 等） div.fact-ui-btn-stack … 3 章 ul.fact-ui-btn-group p.fact-ui-btn-note ※審査状況の注釈（full のみ） （分岐） .fact-hero--compact … 上記以外のシンギュラー div.fact-hero__breadcrumb-wrap nav.fact-breadcrumb div.fact-hero__headings p.fact-hero__eyebrow ※ページサブタイトルが空なら未出力 h1.fact-hero__title ※サービス詳細等はタイトル文言差し替え .fact-hero::after … 装飾画像（背面・疑似要素） ========================================================================== */ /* ----- コンテナ：全幅・背景 ----- */ /* ヒーロー外枠。全幅・最小高さ・背景グラデーション（full/compact で異なる）。 */ .fact-hero__container { position: relative; z-index: var(--fact-z-index-content); box-sizing: border-box; width: 100vw; max-width: none; margin-block: 0; margin-inline: calc(50% - 50vw) !important; padding: 0; background: linear-gradient(135deg, var(--fact-color-bg-gradient-start) 0%, var(--fact-color-bg-gradient-end) 100%); } /* ----- 内側ラッパー：コンテンツ幅・上下余白 ----- */ .fact-hero__container .fact-hero { position: relative; z-index: var(--fact-z-index-content); box-sizing: border-box; padding-block: var(--fact-space-lg); } /* ----- 装飾画像（背面） ----- */ .fact-hero__container .fact-hero::after { position: absolute; z-index: 0; inset-block-start: 50%; inset-inline-end: calc(50% - var(--wp--style--global--content-size) / 2); width: var(--wp--style--global--content-size); height: 90%; background-image: url("/wp-content/themes/factoring-twentytwentyfive-child/assets/images/header.png"); background-repeat: no-repeat; background-position: center right; background-size: contain; opacity: 0.6; transform: translateY(-50%); content: ""; pointer-events: none; } /* ----- 見出しブロック（eyebrow・title・CTA の親） ----- */ /* パンくずラップと見出しブロックを同じ前面レイヤーで扱う。 */ .fact-hero :where(.fact-hero__breadcrumb-wrap .fact-breadcrumb, .fact-hero__headings) { position: relative; z-index: var(--fact-z-index-content); } .fact-hero .fact-hero__breadcrumb-wrap .fact-breadcrumb { margin-block-end: 0; } /* ----- アイブロウ・タイトル：コンテンツ幅いっぱい・左右余白なし ----- */ .fact-hero :where(.fact-hero__eyebrow, .fact-hero__title) { box-sizing: border-box; width: 100%; max-width: var(--wp--style--global--content-size); margin: 0; padding-inline: 0; } .fact-hero .fact-hero__eyebrow { padding-block: var(--fact-space-7xl) var(--fact-space-sm); font-size: clamp(var(--fact-font-size-sm), 1.0vw, var(--fact-font-size-lead)); font-weight: 700; letter-spacing: 0.08rem; color: var(--fact-color-blue); text-transform: uppercase; } .fact-hero .fact-hero__title { padding-block-end: var(--fact-space-xl); font-size: clamp(var(--fact-font-size-xl), 1.5vw, var(--fact-font-size-2xl)); font-weight: 700; line-height: 1.25; color: var(--fact-color-text-strong); } /* ヒーロー内 CTA「最短2時間で入金! 一括見積り」は左寄せ */ .fact-hero .fact-ui-btn-stack { margin: 0; margin-inline-end: auto; padding-block-start: var(--fact-space-xl); align-items: flex-start; } .fact-hero .fact-ui-btn-group { justify-content: flex-start; } .fact-hero .fact-ui-btn-group__item .fact-ui-btn { align-items: flex-start; text-align: left; } /* ----- フロントページ（fact-hero--full） ----- */ /* フロントヒーロー: タイトル内の強調 */ .fact-hero.fact-hero--full .fact-hero__title { padding-block-end: 0; font-size: var(--fact-font-size-4xl); } .fact-hero.fact-hero--full .fact-hero__title .marker-yellow-thick { font-size: var(--fact-font-size-6xl); } .fact-hero.fact-hero--full .fact-ui-btn-stack { padding-block-end: var(--fact-space-6xl); } /* ----- フロント以外（fact-hero--compact） ----- */ .fact-hero.fact-hero--compact { min-height: 8.125rem; } .fact-hero.fact-hero--compact .fact-hero__eyebrow { padding-block: var(--fact-space-sm) var(--fact-space-2xs); } .fact-hero.fact-hero--compact .fact-hero__title { padding-block-end: var(--fact-space-2xs); } .fact-hero.fact-hero--compact .fact-ui-btn-group__item .fact-ui-btn { padding-block: var(--fact-space-xs); } /* ========================================================================== 14. [Block] フロントセクション共通（ラッパー・見出し・リード） -------------------------------------------------------------------------- - .fact-front-section：余白・背景・alignfull。見出し・リード・リボン（::before）。 - タイルグリッド・カード本体は **15 章**、各セクション固有（横スクロール・人気・…）は **16 章**。 タグ構造（patterns/front/*.html）: section.wp-block-group.fact-front-section.fact-front-section--*（wp:group の tagName: section） div.fact-front-section__inner.fact-container-inner div.fact-front-section__head h2.fact-front-section__heading（::before でリボン装飾） p.fact-front-section__lead （ショートコード等）セクション別ブロック … 中身の詳細は **16 章** ========================================================================== */ /* ----- セクション共通：余白・背景 ----- */ /* フロント・一覧ページ等のセクションラッパー。上下パディング・背景色を 1 章トークンで指定。 */ .fact-front-section { font-size: var(--fact-font-size-body); } .fact-page-front > :is(.entry-content, .wp-block-post-content) { margin-block-start: 0; } /* フロントページのセクション背景を画面端まで広げる（中身の幅は .fact-container-inner で制御） */ .fact-page-front .fact-front-section.alignfull { position: relative; width: 100vw; max-width: none; margin-inline: calc(50% - 50vw); } .fact-front-section.fact-front-section--service-scroll, .fact-front-section.fact-front-section--beginners, .fact-front-section.fact-front-section--recommend, .fact-front-section.fact-front-section--ranking, .fact-front-section.fact-front-section--magazine, .fact-front-section.fact-front-section--search-by-tag, .fact-front-section.fact-front-section--faq, .fact-front-section.fact-front-section--search-by-prefecture { margin-block: 0; margin-inline: 0; padding-block: 0 var(--fact-space-5xl); padding-inline: 0; } .fact-front-section.fact-front-section--service-scroll { padding-block: var(--fact-space-lg) var(--fact-space-xs); padding-inline: 0; } .fact-front-section--service-scroll { background: var(--fact-color-bg-section-service-scroll); } .fact-front-section--recommend { background: var(--fact-color-bg-section-recommend); } .fact-front-section--magazine { background: var(--fact-color-bg-section-magazine); } .fact-front-section--beginners { background: var(--fact-color-bg-section-beginners); } .fact-front-section--ranking { background: var(--fact-color-bg-section-ranking); } .fact-front-section--search-by-tag { background: var(--fact-color-bg-section-search-by-tag); } .fact-front-section--faq { background: var(--fact-color-bg-section-faq); } .fact-front-section--search-by-prefecture { background: var(--fact-color-bg-section-search-by-prefecture); } /* ----- セクション見出し・リード ----- */ /* セクションタイトル（lg/700）・リード文（base/行間）。左ボーダー付き見出しのバリアントあり。 */ .fact-front-section__head { margin-inline: auto; padding: 0; } .fact-front-section__heading, .fact-front-section__lead { width: 100%; max-width: min(var(--fact-container-max), 100%); padding-block: var(--fact-space-5xl) var(--fact-space-3xl); padding-inline: 0; } .fact-front-section__heading { /* この見出し専用トークン（local scope） */ --fact-section-ribbon-height: 0.25rem; /* 4px：リボン高さ */ --fact-section-ribbon-radius: 0.25rem; /* 4px：リボン角丸 */ --fact-section-ribbon-width: 5rem; /* 80px：リボン幅 */ position: relative; margin: 0; padding-block: var(--fact-space-5xl) var(--fact-space-md); padding-inline: 0; font-size: var(--fact-font-size-3xl); font-weight: 700; color: var(--fact-color-text-strong); } .fact-front-section__heading .fact-front-section__heading-label { font-size: var(--fact-font-size-lg); font-weight: 600; line-height: 2; color: var(--fact-color-black); } /* フロント見出し: 件数など */ .fact-front-section__heading .fact-front-section__heading-count { font-size: var(--fact-font-size-xl); font-weight: 700; } .fact-front-section__heading::before { position: absolute; inset-block-start: 0; inset-inline-start: 0; width: var(--fact-section-ribbon-width); height: var(--fact-section-ribbon-height); border-radius: var(--fact-section-ribbon-radius); background: var(--fact-color-blue); content: ""; } .fact-front-section__lead { font-size: var(--fact-font-size-sm); font-weight: 500; color: var(--fact-color-text-muted); } /* デスクトップ（1024px〜） */ @media (min-width: 1024px) { .fact-front-section__head { display: grid; align-items: flex-start; column-gap: var(--fact-space-3xl); grid-template-columns: minmax(0, 1.4fr) minmax(0, 1.1fr); } .fact-front-section__lead { grid-column: 2; text-align: right; } } /* タブレット以下（〜1024px） */ @media (max-width: 1023.98px) { .fact-front-section__lead { margin-block-start: 0; padding-block-start: 0; } } /* ========================================================================== 15. [Block] カードタイル・グリッド（.fact-card-tile-grid / .fact-card-tile / .fact-card-pressable） -------------------------------------------------------------------------- 3 列グリッド・共通カード・セクション末尾「もっと見る」（**3 章** .fact-ui-btn-group）。 タグ構造（代表・2〜3階層まで）: section.fact-front-recommend[aria-label] ul.fact-front-recommend__list.fact-card-tile-grid li.fact-front-recommend__item div.fact-card-tile-container a.fact-card-tile__body[href] span.fact-tile.fact-card-tile.fact-card-pressable … 人気・おすすめのサービスカード本体 section.fact-front-magazine[aria-label] ul.fact-front-magazine__list.fact-card-tile-grid li.fact-front-magazine__item div.fact-card-tile-container a.fact-card-tile__body[href] span.fact-tile.fact-card-tile.fact-card-pressable … フロントお役立ち記事カード本体 ul.fact-magazine-archive__list.fact-card-tile-grid li.fact-magazine-archive__item article.fact-magazine-card.fact-card-tile-container a.fact-card-tile__body[href] span.fact-tile.fact-card-tile.fact-card-pressable … お役立ち記事一覧カード本体 section.fact-front-ranking[aria-label] div.fact-front-ranking__cols div.fact-front-ranking__col ol.fact-front-ranking__list li.fact-front-ranking__item.fact-card-tile.fact-card-pressable a.fact-card-tile__body[href] … 指標別ランキング用カード本体 section.fact-front-service-scroll[aria-label] button.fact-front-service-scroll__arrow（前後） div.fact-front-service-scroll__inner div.fact-card-tile.fact-card-pressable a.fact-card-tile__body[href] … 横スクロール用カード（タイトル帯＋「公式サイトを見る」ボタン） div.fact-front-service-scroll__dots ========================================================================== */ /* ----- カード押し込み（タイル・FAQ・サービス一覧カード等。ボタン用 .fact-ui-pressable は 3 章。--fact-card-pressable-translate-* / --fact-card-pressable-shadow-*） ----- */ .fact-card-pressable { border: 1px solid var(--fact-color-border); border-radius: var(--fact-radius-sm); overflow: visible; background: var(--fact-color-white); box-shadow: var(--fact-card-pressable-shadow-rest); transform: translate(0, 0); transition: transform var(--fact-transition-fast), box-shadow var(--fact-transition-fast), border-color var(--fact-transition-fast); } .fact-card-pressable:is(:hover, :focus-visible, :active), .fact-card-pressable:focus-within { box-shadow: var(--fact-card-pressable-shadow-hover); transform: translate(var(--fact-card-pressable-translate-x), var(--fact-card-pressable-translate-y)); } /* カードタイルグリッド（ul.fact-card-tile-grid）：押し込み translate と影のはみ出しを吸収（body overflow-x・列端での欠け対策） */ .fact-card-tile-grid { box-sizing: border-box; padding-inline: var(--fact-space-4); } /* ----- タイルカードグリッド共通（人気・おすすめ・お役立ち記事で共用） ----- */ /* 3 列グリッド・gap 統一。子は .fact-card-tile。レスポンシブで 2 列・1 列に切替。 */ .fact-card-tile-grid .fact-card-tile-container { position: relative; display: flex; flex-direction: column; gap: var(--fact-space-sm); padding-block: 0 var(--fact-space-xs); padding-inline: 0; border: none; overflow: visible; box-shadow: none; } .fact-card-tile-grid .fact-card-tile-container .fact-card-tile__body { display: flex; flex-direction: column; gap: var(--fact-space-sm); color: inherit; text-decoration: none; } /* 画像の角丸クリップは .fact-card-tile__img に任せ、枠線・transform と overflow:hidden を同要素に載せない（右辺の欠け・影の欠けを防ぐ） */ .fact-card-tile-grid .fact-card-tile-container .fact-tile.fact-card-tile { position: relative; display: block; width: 100%; min-width: 0; padding: 0; border-radius: var(--fact-radius-sm); overflow: visible; } .fact-card-tile-grid .fact-card-tile-container .fact-card-tile__title { margin: 0; } .fact-card-tile-grid .fact-card-tile-container .fact-card-tile__service_name { font-size: var(--fact-font-size-lead); font-weight: 700; line-height: 1.35; color: var(--fact-color-text-strong); } /* サービス名の「（）」部分：改行・一回り小さく・細字（共通。PHP で span を付与） */ .fact-card-tile-grid .fact-card-tile-container .fact-card-tile__service_name .fact-card-tile__service_name-sub { display: block; font-size: var(--fact-font-size-sm); font-weight: 300; line-height: 1.35; } /* ----- 共通カードタイル（横スクロール・ランキング等で枠付きカードとして使用） ----- */ /* サムネイル・タイトル・特徴・ボタン等。横スクロール時は .fact-scroll-track と組み合わせ。 */ /* 押し込み・立体影は .fact-card-pressable 併記時のみ（上記・--fact-card-pressable-*）。 */ .fact-card-tile { position: relative; display: flex; flex-direction: column; gap: var(--fact-space-xs); padding: var(--fact-space-sm); } .fact-card-tile.fact-card-pressable:is(:hover, :focus-visible, :active), .fact-card-tile.fact-card-pressable:focus-within { border-color: var(--fact-color-blue); } .fact-card-tile__body { display: flex; min-width: 0; min-height: 0; flex: 1; align-items: flex-start; gap: var(--fact-space-xs); font-size: var(--fact-font-size-lead); font-weight: 400; color: var(--fact-color-black); } a.fact-card-tile__body { text-decoration: none; cursor: pointer; } /* 画像読み込み前も高さを確保（CLS 防止）。aspect-ratio で 16:9 を確保し、img は絶対配置でその中に表示 */ .fact-card-tile__img { position: relative; display: block; flex-shrink: 0; width: 100%; min-width: 0; aspect-ratio: var(--fact-aspect-ratio-16-9); margin: 0; border-radius: var(--fact-radius-sm); overflow: hidden; background: var(--fact-color-bg-bubble); transition: box-shadow var(--fact-transition-fast), border-color var(--fact-transition-fast); } /* aspect-ratio 非対応ブラウザ用フォールバック */ @supports not (aspect-ratio: 16 / 9) { .fact-card-tile__img, .fact-card-tile__img--placeholder { height: 0; padding-block-end: 56.25%; /* 16:9 */ } } .fact-card-tile__img img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; } .fact-card-tile__img--placeholder { display: flex; align-items: center; justify-content: center; aspect-ratio: var(--fact-aspect-ratio-16-9); font-size: var(--fact-font-size-sm); color: var(--fact-color-text-muted); background: linear-gradient(135deg, var(--fact-color-bg-bubble) 0%, color-mix(in srgb, var(--fact-color-border) 30%, transparent) 100%); } .fact-card-tile__title-wrap { display: flex; min-width: 0; flex: 1; flex-direction: column; gap: var(--fact-font-size-hairline); } .fact-card-tile__title { display: -webkit-box; min-height: calc(1.35rem * 2); max-height: calc(1.35rem * 2); overflow: hidden; line-height: 1.35; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; } .fact-card-tile__feature { display: block; font-size: var(--fact-font-size-xs); font-weight: 400; line-height: 1.3; word-break: break-word; color: var(--fact-color-text-muted); overflow-wrap: break-word; } .fact-card-tile__company { display: inline-flex; align-items: center; gap: var(--fact-space-2xs); margin-block-start: var(--fact-space-2xs); font-size: var(--fact-font-size-xs); color: var(--fact-color-text-weak); } .fact-card-tile__rank { --fact-card-tile-corner-offset: calc(-1 * var(--fact-space-xs)); position: absolute; z-index: var(--fact-z-index-content); inset-block-start: var(--fact-card-tile-corner-offset); inset-inline-start: var(--fact-card-tile-corner-offset); display: inline-flex; width: var(--fact-space-3xl); height: var(--fact-space-3xl); align-items: center; justify-content: center; border: 2px solid var(--fact-color-white); border-radius: 50%; font-size: var(--fact-font-size-sm); font-weight: 800; color: var(--fact-color-white); background: var(--fact-color-blue); box-shadow: var(--fact-shadow-badge); } .fact-card-tile__tag { --fact-card-tile-tag-offset: calc(-1 * var(--fact-space-2xs)); /* 約 -0.35rem 相当 */ position: absolute; inset-block-start: var(--fact-card-tile-tag-offset); inset-inline-end: var(--fact-card-tile-tag-offset); padding: var(--fact-space-2xs) var(--fact-space-sm); border: 1.5px solid var(--fact-color-sky-blue); border-radius: var(--fact-radius-sm); font-size: var(--fact-font-size-xs); font-weight: 600; color: var(--fact-color-sky-blue); background: var(--fact-color-white); box-shadow: var(--fact-shadow-subtle); } .fact-tile { font-size: inherit; } /* ----- セクション末尾「もっと見る」（3 章 .fact-ui-btn-group を使用） ----- */ .fact-section-more { margin-block: var(--fact-space-xl) 0; margin-inline: 0; text-align: center; } .fact-section-more .fact-ui-btn-group { justify-content: center; } /* ========================================================================== 16. [Block] フロント各セクション詳細（横スクロール・人気・ランキング・FAQ 等） -------------------------------------------------------------------------- サービス横スクロール・おすすめ・マガジン・ランキング・はじめての方・目的から探す・都道府県・レスポンシブ。 タグ構造（代表・2〜3階層まで）: section.fact-front-section.fact-front-section--*（patterns/front の wp:group tagName: section） div.fact-front-section__inner.fact-container-inner div.fact-front-section__head （h2 / p 等）見出し・リード （セクション別）ショートコードが出力するブロック … 横スクロール（15章）・人気・マガジン等（7章・パターンで揃える） タグ構造（都道府県リスト・patterns/front・[factoring_prefecture_list]・shortcodes.php）: div.fact-pref-list-wrap（パターンの枠） section.fact-pref-list[aria-label] div.fact-pref-region（地方ごと） span.fact-pref-region__title span.fact-pref-region__list a.fact-pref-region__link / span.fact-pref-region__link--empty ========================================================================== */ /* ----- サービス詳細カード横スクロール ----- */ .fact-front-service-scroll { /* このコンポーネント専用トークン（local scope） */ --fact-scroll-card-height: 11rem; /* 176px：横スクロールカード高さ（PC） */ --fact-scroll-card-width: 30rem; /* 480px：横スクロールカード幅（PC） */ --fact-scroll-card-height-sm: 10rem; /* 160px：横スクロールカード高さ（SP/タブレット） */ --fact-scroll-card-width-sm: min(17.5rem, 75vw); /* 280px：横スクロールカード幅（SP） */ position: relative; padding-inline: var(--fact-section-padding-x); } .fact-front-service-scroll__inner { display: flex; gap: var(--fact-space-sm); padding-block-end: var(--fact-space-xs); padding-inline: var(--fact-section-padding-x); overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scroll-behavior: smooth; scroll-snap-type: x mandatory; scrollbar-width: none; } .fact-front-service-scroll__inner::-webkit-scrollbar { display: none; } .fact-front-service-scroll__inner .fact-front-service-scroll__dummy { flex: 0 0 var(--fact-scroll-card-width); flex-shrink: 0; width: var(--fact-scroll-card-width); min-width: 0; height: var(--fact-scroll-card-height); scroll-snap-align: none; visibility: hidden; pointer-events: none; } .fact-front-service-scroll__inner .fact-card-tile { flex: 0 0 var(--fact-scroll-card-width); gap: 0; width: var(--fact-scroll-card-width); min-width: 0; height: var(--fact-scroll-card-height); min-height: var(--fact-scroll-card-height); padding: 0; scroll-snap-align: start; } .fact-front-service-scroll__inner .fact-card-tile__body { position: relative; display: block; min-height: 0; width: 100%; height: 100%; overflow: hidden; } .fact-front-service-scroll__inner .fact-card-tile__img { position: absolute; inset: 0; width: 100%; height: 100%; } .fact-front-service-scroll__inner .fact-card-tile__img img { width: 100%; height: 100%; object-fit: cover; } .fact-front-service-scroll__inner .fact-card-tile__title-wrap { position: absolute; inset-block-end: 0; inset-inline: 0; z-index: var(--fact-z-index-content); display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end; gap: var(--fact-space-3xs); margin: 0; padding: var(--fact-space-2xs) var(--fact-space-xs); border: none; border-radius: 0; font-size: var(--fact-font-size-lead); background: color-mix(in srgb, var(--fact-color-white) 95%, transparent); } .fact-front-service-scroll__inner .fact-card-tile__title, .fact-front-service-scroll__inner .fact-card-tile__feature { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left; background: none; } .fact-front-service-scroll__inner .fact-card-tile__title { display: block; min-height: 0; max-height: none; font-size: var(--fact-font-size-sm); font-weight: 600; line-height: 1.35; color: var(--fact-color-black); -webkit-box-orient: unset; -webkit-line-clamp: unset; line-clamp: unset; } .fact-front-service-scroll__inner .fact-card-tile__feature { color: var(--fact-color-text-weak); font-size: var(--fact-font-size-xs); font-weight: 400; } /* 横スクロール：白い帯の右に「公式サイトを見る」ボタン */ .fact-front-service-scroll__inner .fact-front-service-scroll__cta-wrap { position: absolute; inset-block-end: var(--fact-space-2xs); inset-inline-end: var(--fact-space-xs); z-index: calc(var(--fact-z-index-content) + 1); } .fact-front-service-scroll__inner .fact-front-service-scroll__cta { padding: var(--fact-space-2xs) var(--fact-space-sm); font-size: var(--fact-font-size-xs); line-height: 1.2; } /* タブレット以下（〜1024px） */ @media (max-width: 1023.98px) { .fact-front-service-scroll__inner .fact-front-service-scroll__dummy { flex: 0 0 var(--fact-scroll-card-width-sm); width: var(--fact-scroll-card-width-sm); height: var(--fact-scroll-card-height-sm); padding-inline: var(--fact-section-padding-x-sm); } .fact-front-service-scroll__inner .fact-card-tile { flex: 0 0 var(--fact-scroll-card-width-sm); width: var(--fact-scroll-card-width-sm); height: var(--fact-scroll-card-height-sm); min-height: var(--fact-scroll-card-height-sm); } .fact-front-service-scroll__inner .fact-card-tile__title-wrap { padding: var(--fact-space-2xs) var(--fact-space-xs); } .fact-front-service-scroll__inner .fact-card-tile__title { font-size: var(--fact-font-size-sm); } .fact-front-service-scroll__inner .fact-card-tile__feature { font-size: var(--fact-font-size-xs); } .fact-front-service-scroll__arrow { scroll-snap-align: start; } } .fact-front-service-scroll__arrow { position: absolute; inset-block-start: 50%; z-index: var(--fact-z-index-content-top); display: flex; align-items: center; justify-content: center; width: var(--fact-space-5xl); height: var(--fact-space-5xl); border: none; border-radius: 50%; color: var(--fact-color-blue); background: var(--fact-color-white); box-shadow: var(--fact-shadow-button); transform: translateY(-50%); transition: var(--fact-transition-fast); cursor: pointer; } .fact-front-service-scroll__arrow:is(:hover, :focus-visible, :active) { background: var(--fact-color-white); box-shadow: var(--fact-shadow-button); } .fact-front-service-scroll__arrow--prev { inset-inline-start: var(--fact-space-xs); } .fact-front-service-scroll__arrow--next { inset-inline-end: var(--fact-space-xs); } .fact-front-service-scroll__arrow::before { width: var(--fact-font-size-caption); height: var(--fact-font-size-caption); border-bottom: 2px solid currentColor; border-left: 2px solid currentColor; content: ""; } .fact-front-service-scroll__arrow--prev::before { margin-inline-start: var(--fact-space-2xs); transform: rotate(45deg); } .fact-front-service-scroll__arrow--next::before { margin-inline-end: var(--fact-space-2xs); transform: rotate(-135deg); } .fact-front-service-scroll__arrow:disabled { opacity: 0.4; cursor: not-allowed; pointer-events: none; } .fact-front-service-scroll__dots { display: flex; justify-content: center; gap: var(--fact-space-xs); margin-block-start: var(--fact-space-sm); padding-block-end: var(--fact-space-xs); } .fact-front-service-scroll__dot { width: var(--fact-font-size-caption); height: var(--fact-font-size-caption); padding: 0; border: none; border-radius: 50%; background: var(--fact-color-border); transition: var(--fact-transition-fast); cursor: pointer; } .fact-front-service-scroll__dot:is(:hover, :focus-visible, :active) { background: var(--fact-color-border-strong); } .fact-front-service-scroll__dot.is-active { background: var(--fact-color-blue); transform: scale(1.2); } /* ----- 人気・おすすめ・お役立ち記事・マガジンアーカイブ（3列グリッド・共通レイアウト） ----- */ .fact-front-recommend__list, .fact-front-magazine__list, .fact-front-beginners__list, .fact-magazine-archive__list { display: grid; row-gap: var(--fact-space-xs); column-gap: var(--fact-space-3xl); grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; } /* グリッド子（li）：最小幅を 0 にして列トラック内で縮小可能に（beginners と同様） */ .fact-front-recommend__item, .fact-front-magazine__item, .fact-magazine-archive__item { min-width: 0; } /* カードコンテナ：サムネ＋タイトルのみのレイアウト（おすすめ・フロントお役立ち・マガジン一覧で共通） */ /* content-visibility は子の transform / box-shadow をクリップしうるため付与しない（長い一覧の最適化が必要なら別手段を検討） */ .fact-front-recommend__list .fact-card-tile-container, .fact-front-magazine__list .fact-card-tile-container, .fact-magazine-archive__list .fact-card-tile-container { gap: var(--fact-space-xs); padding-block: var(--fact-space-10xl) var(--fact-space-xs); padding-inline: 0; } .fact-front-recommend__list .fact-card-tile-container .fact-card-tile__body, .fact-front-magazine__list .fact-card-tile-container .fact-card-tile__body, .fact-magazine-archive__list .fact-card-tile-container .fact-card-tile__body { gap: 0; transition: var(--fact-transition-fast); } /* タイトルエリア：おすすめは高さ固定で揃える（省略あり） */ .fact-front-recommend__list .fact-card-tile-container .fact-card-tile__title { display: flex; width: 100%; min-height: 2.7em; align-items: center; justify-content: center; margin-block: var(--fact-space-xs) 0; margin-inline: 0; padding: 0; } /* タイトル文字：おすすめは中央揃え・2行 clamp */ .fact-front-recommend__list .fact-card-tile__service_name { display: -webkit-box; width: 100%; overflow: hidden; font-size: var(--fact-font-size-lead); font-weight: 700; line-height: 1.35; text-align: center; color: var(--fact-color-black); -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; } /* お役立ち記事（フロント/一覧）：タイトル左寄せ＋投稿日を表示（タイトルは省略しない） */ .fact-front-magazine__list .fact-card-tile-container .fact-card-tile__title, .fact-magazine-archive__list .fact-card-tile-container .fact-card-tile__title { display: flex; width: 100%; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: var(--fact-space-2xs); margin-block: var(--fact-space-xs) 0; margin-inline: 0; padding: 0; /* 共通カードの 2 行 clamp / 高さ固定を解除して、タイトルを省略しない */ min-height: 0; max-height: none; overflow: visible; -webkit-line-clamp: unset; line-clamp: unset; } .fact-front-magazine__list.fact-card-tile-grid .fact-card-tile-container .fact-card-tile__service_name, .fact-magazine-archive__list.fact-card-tile-grid .fact-card-tile-container .fact-card-tile__service_name { display: block; width: 100%; overflow: visible; /* 以前より 1 段小さく */ font-size: var(--fact-font-size-body); font-weight: 500; line-height: 1.35; text-align: left; color: var(--fact-color-black); -webkit-line-clamp: unset; line-clamp: unset; } .fact-front-magazine__list.fact-card-tile-grid .fact-card-tile__meta, .fact-magazine-archive__list.fact-card-tile-grid .fact-card-tile__meta { display: block; width: 100%; font-size: var(--fact-font-size-xs); font-weight: 500; line-height: 1.4; color: var(--fact-color-text-muted); text-align: left; } /* ----- おすすめ専用：吹き出し・契約形態タグ・その他特徴（マガジン一覧では出力しない） ----- */ .fact-front-recommend__list .fact-card-tile-container .fact-card-tile__type-tags { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--fact-space-2xs); margin-block: var(--fact-space-2xs); margin-inline: 0; } .fact-front-recommend__list .fact-card-tile-container .fact-card-tile__type-tag { display: inline-block; padding: var(--fact-space-2xs) var(--fact-space-xs); border: 1px solid var(--fact-color-blue); border-radius: var(--fact-radius-sm); font-size: var(--fact-font-size-xs); font-weight: 600; line-height: 1.3; color: var(--fact-color-blue); background: var(--fact-color-white); } .fact-front-recommend__list .fact-card-tile__bubble { position: absolute; z-index: var(--fact-z-index-content); inset-block-start: var(--fact-space-sm); inset-inline-start: 50%; display: flex; width: 75%; min-height: var(--fact-space-3xl); align-items: center; justify-content: center; padding: var(--fact-space-2xs) var(--fact-space-sm); border: 1px solid var(--fact-color-blue); border-radius: 9999px; font-size: var(--fact-font-size-sm); font-weight: 600; line-height: 1.4; color: var(--fact-color-blue); text-align: center; background: var(--fact-color-bg-bubble); transform: translateX(-50%); } .fact-front-recommend__list .fact-card-tile__bubble::before { position: absolute; inset-block-start: 100%; inset-inline-start: 50%; border-width: 9px 9px 0 9px; border-style: solid; border-color: var(--fact-color-blue) transparent transparent transparent; transform: translateX(-50%); content: ""; } .fact-front-recommend__list .fact-card-tile__bubble::after { position: absolute; inset-block-start: 100%; inset-inline-start: 50%; margin-block-start: -1px; border-width: 9px 9px 0 9px; border-style: solid; border-color: var(--fact-color-bg-bubble) transparent transparent transparent; transform: translateX(-50%); content: ""; } .fact-front-recommend__list .fact-card-tile__bubble--empty { display: none; } .fact-front-recommend__list .fact-card-tile__first_feature { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .fact-front-recommend__list .fact-card-tile__other_features { margin: 0; padding-inline-start: 0; font-size: var(--fact-font-size-sm); line-height: 1.4; color: var(--fact-color-text-muted); list-style-type: none; } .fact-front-recommend__list .fact-card-tile__other_features li { margin-block-end: var(--fact-space-2xs); text-align: center; } .fact-front-recommend__list .fact-card-tile__other_features li:last-child { margin-block-end: 0; } /* ----- 入門・はじめての方（画像上にタイトル重ね・ul/li・押し込みは .fact-card-pressable） ----- */ .fact-front-beginners__item { min-width: 0; } .fact-card-tile--beginners { min-width: 0; padding: 0; container-name: beginners-card; container-type: inline-size; } .fact-card-tile--beginners a.fact-beginners-card__link { position: relative; display: block; max-width: 100%; border-radius: var(--fact-radius-sm); overflow: hidden; } /* 画像読み込み前も高さを確保（CLS 防止）。aspect-ratio 1570/1280、img は絶対配置 */ .fact-card-tile--beginners .fact-beginners-card__img-wrap { position: relative; display: block; width: 100%; max-width: 100%; aspect-ratio: 1570 / 1280; overflow: hidden; background: var(--fact-color-light-gray); } @supports not (aspect-ratio: 16 / 9) { .fact-card-tile--beginners .fact-beginners-card__img-wrap { height: 0; padding-block-end: 81.528%; /* 1280/1570 */ } } .fact-card-tile--beginners .fact-beginners-card__img, .fact-card-tile--beginners .fact-beginners-card__img-wrap .fact-beginners-card__img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; min-height: 0; object-fit: cover; object-position: center; } .fact-card-tile--beginners .fact-beginners-card__placeholder { display: block; width: 100%; height: 100%; min-height: 12rem; background: var(--fact-color-light-gray); } .fact-card-tile--beginners .fact-beginners-card__overlay { position: absolute; inset-inline: 0; inset-block-start: 0; display: flex; flex-direction: column; /* カード幅に連動：% の padding は包含塊の幅基準。clamp で上限を抑え画像帯との重なりを防ぐ */ gap: var(--fact-space-xs); padding: clamp(var(--fact-space-lg), 22%, 7.5rem) clamp(var(--fact-space-sm), 6%, 2.25rem) 0; } .fact-card-tile--beginners .fact-beginners-card__title, .fact-card-tile--beginners .fact-beginners-card__subtitle { margin: 0; font-weight: 600; line-height: 1.3; color: var(--fact-color-text-strong); background: none; text-shadow: none; } /* cqi 非対応：vw で近似。@supports(container-type) 付近で cqi に切替 */ .fact-card-tile--beginners .fact-beginners-card__title { font-size: clamp(var(--fact-font-size-body), 5vw, var(--fact-font-size-3xl)); } .fact-card-tile--beginners .fact-beginners-card__subtitle { font-size: clamp(var(--fact-font-size-caption), 2.2vw, calc(var(--fact-font-size-sm) * 1.1)); color: var(--fact-color-blue); } @supports (container-type: inline-size) { .fact-card-tile--beginners .fact-beginners-card__title { font-size: clamp(var(--fact-font-size-body), 6cqi, var(--fact-font-size-3xl)); } .fact-card-tile--beginners .fact-beginners-card__subtitle { font-size: clamp(var(--fact-font-size-caption), 2.8cqi, calc(var(--fact-font-size-sm) * 1.1)); } } .fact-card-tile--beginners .fact-beginners-card__link, .fact-card-tile--beginners .fact-beginners-card__link .fact-beginners-card__title, .fact-card-tile--beginners .fact-beginners-card__link:is(:hover, :focus-visible, :active) .fact-beginners-card__title { text-decoration: none; } /* ----- 目的から探す（指標別ランキング） ----- */ .fact-front-ranking__cols { display: grid; align-items: start; gap: var(--fact-space-lg); grid-template-columns: repeat(4, 1fr); } .fact-front-ranking__col-title { margin-block: 0 var(--fact-space-xs); margin-inline: 0; padding-block-end: var(--fact-space-2xs); border-bottom: 1px solid var(--fact-color-border); font-size: var(--fact-font-size-body); font-weight: 600; color: var(--fact-color-black); } .fact-front-ranking__list { display: flex; flex-direction: column; gap: var(--fact-space-xs); margin: 0; padding: 0; list-style: none; } .fact-front-ranking__item { flex-shrink: 0; } /* ----- 都道府県から探す（タブレット以下で非表示） ----- */ /* タブレット以下（〜1024px） */ @media (max-width: 1023.98px) { .fact-front-section.fact-front-section--search-by-prefecture { display: none; } } .fact-front-section--search-by-prefecture .fact-front-pref__header { position: relative; } .fact-front-section--search-by-prefecture .fact-front-pref__title { position: relative; z-index: var(--fact-z-index-content); margin: 0; } .fact-pref-list-wrap { padding: var(--fact-space-xl); border: 1px solid var(--fact-color-border); border-radius: var(--fact-radius-sm); background: var(--fact-color-white); box-shadow: var(--fact-shadow-subtle); } /* タグ構造（都道府県リスト・patterns/front・[factoring_prefecture_list]・shortcodes.php）: div.fact-pref-list-wrap（パターンの枠） section.fact-pref-list[aria-label] div.fact-pref-region（地方ごと） span.fact-pref-region__title span.fact-pref-region__list a.fact-pref-region__link / span.fact-pref-region__link--empty */ .fact-pref-list { display: grid; gap: var(--fact-space-lg) var(--fact-space-3xl); margin: 0; grid-template-columns: 1fr 1fr; } .fact-pref-region { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--fact-space-2xs) var(--fact-space-xs); } .fact-pref-region__title { flex: 0 0 100%; margin-block-end: 0.15rem; font-size: var(--fact-font-size-sm); font-weight: 600; color: var(--fact-color-black); } .fact-pref-region__list { display: inline; } .fact-pref-region__link { padding-inline-end: var(--fact-space-xs); font-size: var(--fact-font-size-sm); } .fact-pref-region__link:is(:hover, :focus-visible, :active) { text-decoration: none; } .fact-pref-region__link:link, .fact-pref-region__link:visited { color: var(--fact-color-blue); text-decoration: underline; } .fact-pref-region__link--empty { color: var(--fact-color-text-muted); text-decoration: none; cursor: default; } /* ----- フロントセクション・マガジンアーカイブ：レスポンシブ（2列・1列） ----- */ /* タブレット以下（〜1024px） */ @media (max-width: 1023.98px) { .fact-front-recommend__list, .fact-magazine-archive__list { grid-template-columns: repeat(2, 1fr); } .fact-front-ranking__cols { grid-template-columns: repeat(2, 1fr); } .fact-front-magazine__list, .fact-front-beginners__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* スマホ（〜782px）：1列 */ @media (max-width: 782px) { .fact-front-recommend__list, .fact-front-magazine__list, .fact-front-beginners__list, .fact-magazine-archive__list { grid-template-columns: 1fr; } .fact-front-ranking__cols { grid-template-columns: 1fr; } } /* ========================================================================== 17. [Block] 本文（.fact-page-content） -------------------------------------------------------------------------- - .fact-page-content：固定ページ・投稿のコンテンツエリア。タイポグラフィ（タイトル・画像・表・段落等）。 - .fact-page-subtitle：ショートコード [factoring_page_subtitle]。 - .fact-toc：目次はサービス詳細等と共用（**26 章** で上書きの場合あり）。 サイドバー・2カラム・ランキングタブは **18 章**。 タグ構造（.fact-page-content）: div.fact-page-content h1.wp-block-post-title ※任意 figure.wp-block-post-featured-image img ※アイキャッチ div.wp-block-post-content （ブロックエディタ）段落・画像・表・リスト等 ========================================================================== */ /* ========================================================================== 18. [Block] サイドバー・2カラム・ランキングタブ -------------------------------------------------------------------------- .fact-sidebar-blocks / .fact-sidebar、.fact-ranking-tabs、サイドバー内UI。 2カラム骨格（比率・1列化）は 8 章 [Layout] に分離。 parts/sidebar-*.html・条件検索ショートコードと連携。 タグ構造（代表・2〜3階層まで）: div.fact-single-with-sidebar.fact-content-wrap（または .fact-service-with-sidebar） div.fact-single-columns（または .fact-service-columns） div.fact-single-main（または .fact-service-main） div.fact-single-sidebar（または .fact-service-sidebar） div.fact-sidebar-blocks div.fact-sidebar … ナビ・検索・ランキング等（テンプレートパートでは .wp-block-group ラップ） ========================================================================== */ /* ----- タイトル・アイキャッチ ----- */ .fact-page-content .wp-block-post-title { margin-block: 0 var(--fact-space-md); margin-inline: 0; font-size: clamp(var(--fact-font-size-xl), 4vw, var(--fact-font-size-3xl)); font-weight: 700; line-height: 1.35; color: var(--fact-color-text-strong); } /* アイキャッチ画像：読み込み前も高さを確保（CLS 防止）。aspect-ratio 16:9、img は絶対配置 */ .fact-page-content .wp-block-post-featured-image { position: relative; display: block; aspect-ratio: var(--fact-aspect-ratio-16-9); margin-block-end: var(--fact-space-lg); border-radius: var(--fact-radius-sm); overflow: hidden; } @supports not (aspect-ratio: 16 / 9) { .fact-page-content .wp-block-post-featured-image { height: 0; padding-block-end: 56.25%; /* 16:9 */ } } .fact-page-content .wp-block-post-featured-image img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; } /* ----- ページサブタイトル（ショートコード出力） ----- */ .fact-page-subtitle { margin-block: 0 var(--fact-space-2xs); margin-inline: 0; font-size: var(--fact-font-size-sm); color: var(--fact-color-text-weak); } /* ----- 画像・figure ----- */ .fact-page-content .wp-block-post-content :is(.wp-block-image, figure) { margin-block: var(--fact-space-xl); margin-inline: 0; } .fact-page-content .wp-block-post-content .wp-block-image img { border-radius: var(--fact-radius-sm); } /* ----- 表 ----- */ .fact-page-content .wp-block-post-content .wp-block-table { margin-block: var(--fact-space-xl); margin-inline: 0; border: none; overflow-x: auto; } .fact-page-content .wp-block-post-content table { width: 100%; font-size: var(--fact-font-size-sm); border-collapse: collapse; } .fact-page-content .wp-block-post-content :is(th, td) { padding: var(--fact-space-xs) var(--fact-space-md); border: 1px solid var(--fact-color-border); text-align: left; } .fact-page-content .wp-block-post-content th { font-weight: 600; color: var(--fact-color-text-strong); background: var(--fact-color-blue-tint); } /* ----- サイドバー部品（ナビ・人気ランキング・CTA） ----- */ /* マガジン・サービス詳細・お役立ち記事個別は parts（sidebar-service / sidebar-single）。条件検索・ランキングは [factoring_search]。 いずれも .fact-sidebar-blocks 直下に .fact-sidebar を複数並べた同一構成（テンプレートパート側もラッパーで統一）。 */ /* リスト命名: ul.fact-sidebar__list > li.fact-sidebar__item（--current で現在地）。人気3社は ol.fact-sidebar-popular__list > li.fact-sidebar-popular__item。 */ /* タグ構造（サイドバー・2カラム共通・代表・2〜3階層まで）: div.fact-single-with-sidebar.fact-content-wrap（または .fact-service-with-sidebar） div.fact-single-columns（または .fact-service-columns） div.fact-single-main（メイン列・または .fact-service-main） div.fact-single-sidebar（サイドバー列・または .fact-service-sidebar） div.fact-sidebar-blocks … テンプレートパートでは .wp-block-group.fact-sidebar-blocks、ショートコードでは .fact-sidebar-blocks div.fact-sidebar（1：サービスを探す / お役立ち記事 / 検索フォーム） div.fact-sidebar（2：ランキング一覧 等） */ /* 複数 .fact-sidebar の親ラッパー（parts とショートコードで共通クラス）。セクション間の余白を統一 */ .fact-sidebar-blocks { display: flex; flex-direction: column; gap: var(--fact-space-xl); } .fact-sidebar-blocks .fact-sidebar { margin: 0; } /* サイドバー1ブロック（共通） */ .fact-sidebar { margin-block: 0; padding: var(--fact-space-md); border-radius: var(--fact-radius-sm); background: var(--fact-color-light-gray); } .fact-sidebar__title { font-size: var(--fact-font-size-body); color: var(--fact-color-text-strong); } /* サイドバー系タイトル（共通） */ :is(.fact-sidebar__title, .fact-sidebar-ranking__title, .fact-sidebar-cta__title) { margin-inline: 0; font-weight: 700; line-height: 1.35; } :is(.fact-sidebar__title, .fact-sidebar-cta__title) { margin-block: 0 var(--fact-space-md); } /* 各ボックス見出しの上余白を統一（1つ目だけ詰まって見える差を解消） */ .fact-sidebar__nav > h2 { margin-block-start: 0.12rem; } .fact-sidebar__nav { margin: 0; padding-block-end: var(--fact-space-md); } .fact-sidebar__nav:last-child { padding-block-end: 0; } :is(.fact-sidebar__list, .fact-sidebar-popular__list) { margin: 0; padding: 0; list-style: none; } .fact-sidebar__list .fact-sidebar__item + .fact-sidebar__item { margin-block-start: var(--fact-space-xs); padding-block-start: var(--fact-space-xs); } :is(.fact-sidebar__list a, .fact-sidebar-popular__link) { text-decoration: none; transition: transform var(--fact-transition-fast); } .fact-sidebar__list a { display: flex; align-items: center; justify-content: space-between; gap: var(--fact-space-xs); font-size: var(--fact-font-size-sm); line-height: 1.4; color: var(--fact-color-black); transition: color var(--fact-transition-fast); } .fact-sidebar__list a:is(:hover, :focus-visible, :active) { color: inherit; } .fact-sidebar__list a::after { color: var(--fact-color-text-weak); font-size: 1.05em; line-height: 1; content: "›"; transition: transform var(--fact-transition-fast); } .fact-sidebar__list a:is(:hover, :focus-visible, :active)::after { transform: translateX(1px); } /* 人気ランキング（総合上位3社） */ .fact-sidebar-popular__item + .fact-sidebar-popular__item { margin-block-start: var(--fact-space-md); padding-block-start: var(--fact-space-md); } :is(.fact-sidebar__list .fact-sidebar__item + .fact-sidebar__item, .fact-sidebar-popular__item + .fact-sidebar-popular__item) { border-top: 1px solid var(--fact-color-border); } .fact-sidebar-popular__link { display: flex; align-items: flex-start; gap: var(--fact-space-md); } :is(.fact-sidebar__list a, .fact-sidebar-popular__link):is(:hover, :focus-visible, :active) { transform: translateX(2px); } .fact-sidebar-popular__link:is(:hover, :focus-visible, :active) .fact-sidebar-popular__name { color: inherit; } :is(.fact-sidebar__list a, .fact-sidebar-popular__link):focus-visible { outline: none; } .fact-sidebar-popular__rank { display: inline-flex; align-items: center; justify-content: center; width: var(--fact-space-2xl); height: var(--fact-space-2xl); border-radius: var(--fact-radius-sm); font-size: var(--fact-font-size-lg); font-weight: 700; line-height: 1; color: var(--fact-color-text-weak); background: var(--fact-color-bg-sub); } .fact-sidebar-popular__text { display: flex; flex-direction: column; min-width: 0; } .fact-sidebar-popular__name { font-size: var(--fact-font-size-body); font-weight: 700; line-height: 1.35; color: var(--fact-color-text-strong); } .fact-sidebar-popular__desc { margin-block-start: var(--fact-space-2xs); font-size: var(--fact-font-size-xs); line-height: 1.5; color: var(--fact-color-text-weak); } /* ランキング一覧ナビ（サイドバー内） */ .fact-sidebar-ranking__title { margin-block-start: 0; margin-block-end: var(--fact-space-md); } /* サイドバー見出し（ランキング一覧 / サービスを探す）の左に青バーを表示 */ :where( .fact-sidebar__nav--ranking, .fact-sidebar__nav--service, .fact-sidebar__nav--learn, .fact-sidebar__nav--popular-ranking, .fact-sidebar__nav--other ) > h2 { display: flex; align-items: center; gap: var(--fact-space-xs); } :where( .fact-sidebar__nav--ranking, .fact-sidebar__nav--service, .fact-sidebar__nav--learn, .fact-sidebar__nav--popular-ranking, .fact-sidebar__nav--other ) > h2::before { width: var(--fact-font-size-micro); height: var(--fact-font-size-lg); border-radius: 2px; background: var(--fact-color-blue); content: ""; } /* サイドバー下部CTA（添付イメージ準拠の強調ブロック） */ .fact-sidebar--cta { padding: 0; border: none; background: transparent; } .fact-sidebar-cta__inner { border-radius: var(--fact-radius-md); padding: var(--fact-space-lg); color: var(--fact-color-white); background: var(--fact-color-blue); } .fact-sidebar-cta__title { font-size: var(--fact-font-size-lg); letter-spacing: 0.01em; } .fact-sidebar-cta__text { margin-block: 0 var(--fact-space-md); margin-inline: 0; font-size: var(--fact-font-size-sm); line-height: 1.6; opacity: 0.94; } .fact-sidebar-cta__button { display: inline-flex; align-items: center; justify-content: center; gap: var(--fact-space-xs); width: 100%; max-width: 100%; box-sizing: border-box; min-height: 2.85rem; padding: var(--fact-space-sm) var(--fact-space-md); border-radius: var(--fact-radius-full); font-size: calc(var(--fact-font-size-body) * 1.05); font-weight: 700; line-height: 1.2; white-space: nowrap; color: var(--fact-color-white); text-decoration: none; background: var(--fact-color-orange); transform: translateY(0); transition: transform var(--fact-transition-fast); } .fact-sidebar-cta__button:is(:hover, :focus-visible, :active) { color: var(--fact-color-white); text-decoration: none; opacity: 1; transform: translateY(-1px); } .fact-sidebar-cta__button-icon { font-size: 0.95em; font-weight: 700; line-height: 1; } :is(.fact-page-ranking .fact-sidebar__item--current a, .fact-sidebar__nav--service .fact-sidebar__item--current a) { font-weight: 700; color: var(--fact-color-blue); } /* ランキングページ（.fact-page-ranking）ではサイドバー上部の検索フォームを非表示にする。 フォーム自体はDOM上に残るため、JSの History API や将来的な拡張には影響しない。 */ .fact-page-ranking .fact-sidebar--search { display: none; } /* ランキングページではメインカラムのフォームも非表示（タブで切替） */ .fact-page-ranking .fact-search__form--ranking { display: none; } /* ----- ランキングタブ部品（タブUI・ランキングページ差分） ----- */ /* ランキングページ：フォーム下のタブ風リンク */ .fact-ranking-tabs { margin-block: var(--fact-space-lg) var(--fact-space-xl); margin-inline: 0; border-bottom: 1px solid var(--fact-color-blue); } .fact-ranking-tabs__list { display: flex; flex-wrap: nowrap; gap: var(--fact-space-4xs); margin: 0; padding: 0; list-style: none; overflow: hidden; } .fact-ranking-tabs__item { margin: 0; flex: 1 1 0; min-width: 0; } .fact-ranking-tabs__link { box-sizing: border-box; display: flex; justify-content: center; align-items: center; width: 100%; min-height: calc(var(--fact-space-3xl) + var(--fact-space-xs)); padding: var(--fact-space-xs) calc(var(--fact-space-xs) + var(--fact-space-2xs)); border: 1px solid var(--fact-color-border); border-bottom: 0; border-radius: var(--fact-radius-md) var(--fact-radius-md) 0 0; font-size: var(--fact-font-size-sm); font-weight: 600; line-height: 1.2; color: var(--fact-color-text-strong); text-decoration: none; white-space: nowrap; background: var(--fact-color-bg-sub); transition: color var(--fact-transition-fast), background-color var(--fact-transition-fast), border-color var(--fact-transition-fast); } .fact-ranking-tabs__link:is(:hover, :focus-visible, :active) { color: inherit; border-top-color: var(--fact-color-border); border-inline-color: var(--fact-color-border); background: var(--fact-color-bg-sub); } .fact-ranking-tabs__link.is-active { color: var(--fact-color-white); border-top-color: var(--fact-color-blue); border-inline-color: var(--fact-color-blue); background: var(--fact-color-blue); } /* 検索/ランキングページ：サイドバー内フォーム（.fact-sidebar--search） */ .fact-sidebar--search .fact-search__form-inner { display: flex; flex-direction: column; gap: var(--fact-space-md); } /* ----- 2カラム：モバイル（〜782px）でランキングタブ横スクロール・サイドナビ非表示・1列化・上余白 ----- */ /* 1列化そのものは 8 章 [Layout]。ここはランキングタブ・サイドナビの Block 差分のみを扱う。 */ @media (max-width: 782px) { .fact-ranking-tabs__list { flex-wrap: nowrap; gap: 0; overflow-x: auto; } .fact-ranking-tabs__item { min-width: max-content; flex: 0 0 auto; } .fact-ranking-tabs__link { min-height: calc(var(--fact-space-3xl) + var(--fact-space-sm)); font-size: var(--fact-font-size-sm); } /* 「ランキング一覧」「サービスを探す」ナビゲーションのみ非表示 */ :where(.fact-sidebar__nav--ranking, .fact-sidebar__nav--service) { display: none; } .fact-sidebar { padding: var(--fact-space-xl); } } /* ========================================================================== 19. [Block] フォーム共通（ステッパー・素子・見積モード） -------------------------------------------------------------------------- ステッパー・セクション／フィールドセット・見積モード UI（ボックス型ラジオ）。 入力・ラベル・送信・同意などの共通フォーム素子は **7 章** に集約。 口コミ固有の審査・星・カードは **26 章**（テンプレート側）。 クイック・チップ・ピル型 select は **20 章**。 タグ構造（見積・[factoring_estimate_form]・estimate-form.php・代表・2〜3階層まで）: div.fact-estimate-form-wrap form.fact-estimate-form.fact-form div.fact-form-stepper … プログレス・タブ・メタ（下記ブロックコメント参照） section.fact-form__section.fact-estimate-fieldset[data-step] h2.fact-form__section-title … または legend div.fact-form__field div.fact-estimate-field__input … input / textarea / select（ドメイン装飾は 20 章） div.fact-form__actions … 送信・同意（ステッパー有効時は最終ステップで表示） （口コミ・お問い合わせ） .fact-form__* 系で同型を再利用（7 章素子） ========================================================================== */ /* ----- ステップ表示（タブ＋プログレス）・ステップナビ・見積検証リング ----- */ /* タグ構造（.fact-form-stepper 直下）: div.fact-form-stepper div.fact-form-stepper__top … progress + メタ文言 div.fact-form-stepper__tabs button.fact-form-stepper__tab … 8 章と同型のタブ見た目 */ .fact-form-stepper { margin-block: var(--fact-space-lg) var(--fact-space-sm); margin-inline: 0; padding: var(--fact-space-sm); border: 1px solid var(--fact-color-border); border-radius: var(--fact-radius-lg); background: var(--fact-color-white); } .fact-form-stepper__top { display: flex; align-items: center; justify-content: space-between; gap: var(--fact-space-sm); margin-block-end: var(--fact-space-xs); } .fact-form-stepper__progress { flex: 1; height: 8px; border-radius: var(--fact-radius-full); overflow: hidden; background: color-mix(in srgb, var(--fact-color-form-accent) 12%, var(--fact-color-white)); } .fact-form-stepper__progress-bar { width: 0%; height: 100%; border-radius: var(--fact-radius-full); background: var(--fact-color-form-accent); transition: width 0.25s ease; } .fact-form-stepper__meta { font-size: var(--fact-font-size-xs); color: var(--fact-color-text-weak); white-space: nowrap; } .fact-form-stepper__meta-label { margin-inline-end: 0.25em; } .fact-form-stepper__meta-value { font-weight: 600; color: var(--fact-color-text-strong); } .fact-page-estimate .fact-form__step-actions { display: none; } .is-stepper-enabled .fact-form__section[data-step] { display: none; } .is-stepper-enabled .fact-form__section[data-step].is-active { display: block; } .is-stepper-enabled .fact-form__actions { display: none; } .is-stepper-enabled[data-active-step="5"] .fact-form__actions { display: block; } .fact-form__step-actions { display: flex; flex-wrap: wrap; gap: var(--fact-space-2xs); justify-content: space-between; align-items: center; margin-block-start: var(--fact-space-lg); } .fact-form__step-prev, .fact-form__step-next { appearance: none; border: 1px solid var(--fact-color-border); border-radius: var(--fact-radius-full); padding: var(--fact-space-sm) var(--fact-space-md); font-weight: 700; font-size: var(--fact-font-size-sm); cursor: pointer; } .fact-form__step-prev { color: var(--fact-color-text-strong); background: var(--fact-color-white); } .fact-form__step-next { margin-inline-start: auto; border-color: var(--fact-color-form-accent); color: var(--fact-color-white); background: var(--fact-color-form-accent); } .fact-form__step-next:is(:hover, :focus-visible, :active) { background: var(--fact-color-form-accent); } .fact-form__step-error { margin-block-start: var(--fact-space-2xs); font-size: var(--fact-font-size-xs); font-weight: 600; color: var(--fact-color-error); } .fact-estimate-btn-group.is-invalid { outline: 2px solid color-mix(in srgb, var(--fact-color-error) 65%, var(--fact-color-white)); outline-offset: 4px; border-radius: var(--fact-radius-sm); } /* ----- セクションカード・入力素子・送信・同意・見積モード（口コミ／見積／お問い合わせ再利用） ----- */ .fact-form__section, .fact-form__fieldset { margin-block-start: var(--fact-space-lg); padding: var(--fact-space-lg); border-radius: var(--fact-radius-md); border: 1px solid var(--fact-color-border); background-color: var(--fact-color-white); box-shadow: var(--fact-shadow-subtle); } .fact-form__section-title, .fact-form__legend { display: flex; align-items: center; gap: var(--fact-space-xs); width: 100%; box-sizing: border-box; margin-block: 0 var(--fact-space-sm); margin-inline: 0; padding-block-end: var(--fact-space-xs); border-bottom: 1px solid var(--fact-color-border); font-size: var(--fact-font-size-lg); font-weight: 600; color: var(--fact-color-text-strong); } :is(.fact-company-reviews, .fact-estimate-form) .fact-form__field { margin-block-end: var(--fact-space-sm); } .fact-company-reviews .fact-form__field .fact-company-reviews__help { margin-block-start: var(--fact-space-2xs); } /* ----- デスクトップ：フォーム2カラム（共通）・見積りリンク一覧のグリッド ----- */ /* 1024px 以上で「左：ラベル / 右：入力」を共通化。見積ページのリンクリストは auto-fill 列。 */ @media (min-width: 1024px) { :is(.fact-company-reviews, .fact-estimate-form) .fact-form__field { display: grid; align-items: start; gap: var(--fact-space-sm) var(--fact-space-xl); grid-template-columns: 16rem 1fr; } /* 例外：口コミフォームの「姓・名」など、フィールド内で横並びしたい行 */ .fact-company-reviews .fact-form__field.fact-company-reviews__field--inline { display: flex; } :is(.fact-company-reviews, .fact-estimate-form) .fact-form__field > :is(label, .fact-form__label-row) { padding-block-start: var(--fact-space-xs); grid-column: 1; } .fact-company-reviews .fact-form__field > :is(input:not([type="hidden"]), select, textarea, .fact-form__textarea-wrap, .fact-company-reviews__help), .fact-estimate-form .fact-form__field > :is(.fact-estimate-field__input, .fact-estimate-btn-group, .fact-estimate-btn-row, input:not([type="hidden"]), select, textarea, .fact-estimate-chips) { grid-column: 2; } .fact-estimate-form .fact-form__field > input[type="hidden"] { grid-column: 2; grid-row: 2; } .fact-estimate-link-list__inner { grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); } } .fact-company-reviews__field--bodies .fact-form__label-row + .fact-form__input { margin-block-end: var(--fact-space-sm); } /* 見積フォームは fact-form__input/select/textarea で共通化済み */ .fact-company-reviews__help { margin-block-start: var(--fact-space-2xs); font-size: var(--fact-font-size-xs); color: var(--fact-color-text-weak); } /* スマホ（〜782px）：口コミカード縦並び・見積「ご利用の形態」1列 */ @media (max-width: 782px) { .fact-company-reviews .fact-company-reviews__item-inner { display: flex; flex-direction: column; flex-wrap: nowrap; align-items: stretch; } .fact-company-reviews .fact-company-reviews__persona { display: flex; max-width: none; flex: 0 0 auto; flex-direction: column; align-items: center; justify-content: center; gap: var(--fact-space-xs); width: 100%; box-sizing: border-box; } .fact-company-reviews .fact-company-reviews__persona-text { width: 100%; max-width: 20rem; text-align: center; } .fact-company-reviews .fact-company-reviews__persona-list { margin-inline: auto; } .fact-company-reviews .fact-company-reviews__bubble { flex: 1 1 auto; min-width: 0; margin-block-start: var(--fact-space-xs); } .fact-company-reviews .fact-company-reviews__bubble::before { inset-block-start: -10px; inset-inline-start: 50%; margin-inline-start: -10px; border-top: none; border-right: 10px solid transparent; border-bottom: 10px solid var(--fact-color-white); border-left: 10px solid transparent; } .fact-estimate-mode-radios { grid-template-columns: 1fr; } } /* 見積フォーム：ご利用の形態（ボックス型ラジオ） */ /* タグ構造（estimate-form.php）: div.fact-estimate-mode-radios[role="radiogroup"] label.fact-estimate-mode-option input[type="radio"][name="mode"] span.fact-estimate-mode-option__body span.fact-estimate-mode-option__title span.fact-estimate-mode-option__desc span.fact-estimate-mode-option__check */ .fact-estimate-mode-radios { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--fact-space-sm); margin-block-start: var(--fact-space-sm); } .fact-estimate-mode-option { position: relative; display: flex; align-items: center; justify-content: space-between; gap: var(--fact-space-sm); padding: var(--fact-space-lg); border: 2px solid color-mix(in srgb, var(--fact-color-border) 70%, var(--fact-color-white)); border-radius: var(--fact-radius-lg); background: var(--fact-color-white); box-shadow: var(--fact-shadow-subtle); transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.12s ease; cursor: pointer; } .fact-estimate-mode-option:is(:hover, :focus-visible, :active) { border-color: color-mix(in srgb, var(--fact-color-form-accent) 35%, var(--fact-color-border)); box-shadow: var(--fact-shadow-subtle); } .fact-estimate-mode-option:active { transform: translateY(1px); } .fact-estimate-mode-option > input[type="radio"] { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; white-space: nowrap; clip: rect(0, 0, 0, 0); } .fact-estimate-mode-option__body { display: grid; gap: 0.3rem; min-width: 0; } .fact-estimate-mode-option__title { font-size: var(--fact-font-size-body); font-weight: 800; color: var(--fact-color-text-strong); } .fact-estimate-mode-option__desc { font-size: var(--fact-font-size-sm); font-weight: 600; color: var(--fact-color-text-weak); } .fact-estimate-mode-option__check { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; width: 28px; height: 28px; border: 2px solid color-mix(in srgb, var(--fact-color-border) 70%, var(--fact-color-white)); border-radius: 999px; background: var(--fact-color-white); } .fact-estimate-mode-option__check::before { content: ""; width: 14px; height: 14px; background: var(--fact-color-white); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='%23000' d='M7.8 13.6 3.9 9.7l-1.4 1.4 5.3 5.3L18 6.2l-1.4-1.4z'/%3E%3C/svg%3E"); mask-repeat: no-repeat; mask-position: center; mask-size: contain; opacity: 0; transform: scale(0.9); transition: opacity 0.15s ease, transform 0.15s ease; } .fact-estimate-mode-option:has(> input[type="radio"]:checked) { border-color: var(--fact-color-form-accent); box-shadow: var(--fact-shadow-form-selection-ring); } .fact-estimate-mode-option:has(> input[type="radio"]:checked) .fact-estimate-mode-option__check { border-color: var(--fact-color-form-accent); background: var(--fact-color-form-accent); } .fact-estimate-mode-option:has(> input[type="radio"]:checked) .fact-estimate-mode-option__check::before { opacity: 1; transform: scale(1); } .fact-estimate-mode-option:focus-within { outline: 2px solid color-mix(in srgb, var(--fact-color-form-accent) 55%, var(--fact-color-white)); outline-offset: 2px; } /* ========================================================================== 20. [Domain] 見積フォーム：ピル・クイック・チップ・セレクト -------------------------------------------------------------------------- .fact-estimate-btn-row / .fact-estimate-btn-group / .fact-estimate-chips / .fact-estimate-select。 論理は estimate-form.php のフィールド定義に従う。 ========================================================================== */ /* ----- 見積フォーム：クイック・チップ・ボタン群・セレクト（ピル型） ----- */ /* タグ構造（estimate-form.php・フィールド内で分岐・代表）: div.fact-estimate-btn-row[data-target] … 日付クイック button.fact-estimate-btn-row__btn[data-value] div.fact-estimate-btn-group[role="group"] … 単一選択 button.fact-estimate-choice-btn[data-value] div.fact-estimate-chips[role="group"] … 複数チェック label.fact-estimate-chip input[type="checkbox"] + span select.fact-form__select.fact-estimate-select … 外観は本章、19 章の .fact-form__select と連携 */ .fact-estimate-btn-row { display: flex; flex-wrap: wrap; gap: var(--fact-space-xs); margin-block-start: var(--fact-space-xs); } .fact-estimate-btn-group { display: flex; flex-wrap: wrap; gap: var(--fact-space-xs); margin-block-start: var(--fact-space-xs); } :is(.fact-estimate-btn-row__btn, .fact-estimate-choice-btn) { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; gap: var(--fact-space-2xs); padding: var(--fact-space-2xs) var(--fact-space-sm); border: 1px solid var(--fact-color-border-strong); border-radius: 999px; font-size: var(--fact-font-size-xs); font-weight: 500; color: var(--fact-color-black); background: var(--fact-color-white); transition: background var(--fact-transition-fast), border-color var(--fact-transition-fast), color var(--fact-transition-fast), opacity var(--fact-transition-fast); cursor: pointer; } :is(.fact-estimate-btn-row__btn, .fact-estimate-choice-btn):is(:hover, :focus-visible, :active):not(.is-disabled) { border-color: var(--fact-color-form-accent); color: var(--fact-color-form-accent); background: color-mix(in srgb, var(--fact-color-form-accent-tint) 60%, var(--fact-color-white)); } :is(.fact-estimate-btn-row__btn, .fact-estimate-choice-btn).is-active { border-color: var(--fact-color-form-accent); color: var(--fact-color-white); background: var(--fact-color-form-accent); } .fact-estimate-choice-btn.is-disabled { opacity: 0.45; cursor: not-allowed; } .fact-estimate-chips { display: flex; flex-wrap: wrap; gap: var(--fact-space-xs); margin-block-start: var(--fact-space-xs); } .fact-estimate-chip { display: inline-flex; align-items: center; gap: var(--fact-space-2xs); padding: var(--fact-space-2xs) var(--fact-space-sm); border: 1px solid var(--fact-color-border-strong); border-radius: 999px; font-size: var(--fact-font-size-xs); font-weight: 500; color: var(--fact-color-black); background: var(--fact-color-white); transition: background var(--fact-transition-fast), border-color var(--fact-transition-fast), color var(--fact-transition-fast); cursor: pointer; } .fact-estimate-chip input { position: absolute; opacity: 0; pointer-events: none; } .fact-estimate-chip span { pointer-events: none; } .fact-estimate-chip:has(input:checked) { border-color: var(--fact-color-form-accent); color: var(--fact-color-white); background: var(--fact-color-form-accent); } .fact-estimate-chip:focus-within { outline: 2px solid color-mix(in srgb, var(--fact-color-form-accent) 55%, var(--fact-color-white)); outline-offset: 2px; } .fact-estimate-select { width: 100%; max-width: 100%; padding-block: var(--fact-space-xs); padding-inline: var(--fact-space-sm) var(--fact-space-3xl); border: 1px solid var(--fact-color-border); border-radius: var(--fact-radius-sm); font-size: var(--fact-font-size-body); color: var(--fact-color-black); background: var(--fact-color-white); cursor: pointer; } /* ========================================================================== 14.5 [Primitive] CTA ボタン（.fact-cta-estimate） -------------------------------------------------------------------------- フッター等の一括見積り用（アイコン＋2 行テキスト）。parts/footer.html。色・影は .fact-ui-btn--press-blue と併用。 フォーム内の送信は **7 章**の `.fact-form__submit` / `:is(...)` 系（口コミ・見積フォーム共用。19 章でレイアウト）。 タグ構造（.fact-cta-estimate・parts/footer.html）: a.fact-cta-estimate.fact-ui-btn.fact-ui-btn--press-blue span.fact-cta-estimate__icon（svg） span.fact-cta-estimate__text span.fact-cta-estimate__line1 span.fact-cta-estimate__line2 （ヘッダー一括見積は 3 章） a.fact-header__rail.fact-ui-btn--press-blue … 構造は別 ========================================================================== */ /* ----- 見積CTA ボタン ----- */ /* 上記アンカー。ヘッダー一括見積は `a.fact-header__rail.fact-ui-btn--press-blue`（3 章）。 */ .fact-cta-estimate { display: inline-flex; align-items: center; /* アイコンとテキストのわずかなすき間（ルート rem に連動させる） */ gap: 0.1rem; padding: var(--fact-space-xs) var(--fact-space-lg); border-radius: var(--fact-radius-full); font-weight: 700; text-decoration: none; } .fact-cta-estimate__icon { display: flex; width: var(--fact-space-3xl); height: var(--fact-space-3xl); align-items: center; justify-content: center; border-radius: var(--fact-radius-full); } .fact-cta-estimate__icon svg { display: block; width: var(--fact-space-xl); height: auto; } .fact-cta-estimate__text { display: flex; flex-direction: column; line-height: 1.1; } .fact-cta-estimate__line1 { font-size: var(--fact-font-size-sm); opacity: 0.9; } .fact-cta-estimate__line2 { font-size: var(--fact-font-size-body); } /* タブレット縦・スマホ（〜782px） */ @media (max-width: 782px) { .fact-cta-estimate { padding-inline: var(--fact-font-size-sm); } } /* ========================================================================== 21. [Domain] サービス一覧・検索・絞り込み -------------------------------------------------------------------------- - .fact-services-list / .fact-search：一覧・絞り込み・結果・ページング。 - .fact-section-title--underlined / .fact-faq：検索ページ用。 タグ構造（条件検索フォーム・[factoring_search]・filter モード・shortcodes.php）: form.fact-search__form div.fact-search__form-inner input[name="prefecture"] … hidden div.fact-search__form-row--primary div.fact-search__field … select#fact-search-target / select#fact-search-type div.fact-search__form-row--full … fieldset.fact-search__field--bonds legend.fact-search__label div.fact-search__chip-group … span.fact-search__chip-item > input.fact-search__chip-input + label.fact-search__chip-label div.fact-search__form-row--full … fieldset.fact-search__field--conditions（同上） div.fact-search__form-row--keyword … div.fact-search__field--keyword + div.fact-search__field--submit > button.fact-search__submit （ranking モード） div.fact-search__form-row--ranking … sort + submit タグ構造（絞り込み・一覧・inc/search/search-ajax.php・inc/shortcodes/shortcodes.php）: section.fact-search[aria-label] div.fact-search__active … a.fact-search__chip ※条件付き p.fact-search__count div.fact-services-list section.fact-service-detail …（21 章） nav.fact-services-list__pagination … div.fact-search__other-services ※0件時等 （ページ枠） templates/page-factor.html … main > post-content 内に上記が埋まる タグ構造（よくある質問・[factoring_faq]・shortcodes.php）: section.fact-faq[aria-labelledby | aria-label] h2.fact-faq__title.fact-section-title--underlined … タイトルあり時のみ div.fact-faq__list details.fact-faq__item.fact-card-pressable summary.fact-faq__q div.fact-faq__a div.fact-faq__a-inner … 回答本文 ========================================================================== */ /* ----- サービス一覧・カード共通 ----- */ /* `div.fact-services-list`。直下に 21 章 `.fact-service-detail` が並ぶ。 */ .fact-services-list { margin: 0; font-size: var(--fact-font-size-body); } /* ========================================================================== 22. [Domain] サービス詳細カード（.fact-service-detail） -------------------------------------------------------------------------- 一覧・検索結果で使うサービス詳細カード本体。サムネ・比較表・アクション・タグ等。 タグ構造（section.fact-service-detail・inc/shortcodes/shortcodes.php）: section.fact-service-detail div.fact-service-detail__inner header.fact-service-detail__header span.fact-service-detail__badge ※優良・人気等・条件付き h2.fact-service-detail__title > a div.fact-service-detail__meta p.fact-service-detail__address … div.fact-service-detail__main div.fact-service-detail__thumb a.fact-service-detail__thumb-inner > img ※画像なし時はプレースホルダ div.fact-service-detail__content div.fact-service-detail__features … ul.fact-compare__list div.fact-service-detail__body … 比較表グリッド div.fact-service-detail__actions a.fact-ui-btn … ========================================================================== */ .fact-service-detail { /* サービス詳細カード専用トークン（local scope） */ --fact-service-card-border-width: 0.5rem; /* 8px：カード左ボーダー幅 */ margin-block-end: var(--fact-space-md); padding: var(--fact-space-md); border: var(--fact-service-card-border-width) solid var(--fact-color-border); border-radius: var(--fact-radius-sm); background: var(--fact-color-white); /* content-visibility は .fact-card-pressable の transform / 影と相性が悪く欠けが出るため付与しない */ } /* 一覧・検索・ショートコード共通：サービスカードは押し込みも枠色変化もなし（ボタン等のみインタラクション）。 */ .fact-service-detail.fact-card-pressable { transition: border-color var(--fact-transition-fast); transform: none; } .fact-service-detail.fact-card-pressable:is(:hover, :focus-visible, :active), .fact-service-detail.fact-card-pressable:focus-within { border-color: var(--fact-color-border); box-shadow: none; transform: none; } .fact-service-detail:last-of-type { margin-block-end: 0; } .fact-service-detail__inner { width: 100%; min-width: 0; box-sizing: border-box; margin-inline: auto; padding-inline: var(--fact-space-lg); } /* タブレット以下（〜1024px） */ @media (max-width: 1023.98px) { .fact-service-detail__inner { padding-inline: var(--fact-space-sm); } } /* ----- カード：ヘッダー・メイン・サムネイル・コンテンツ ----- */ /* サービス名・所在地・バッジは全幅。サムネイル左・特徴・比較表は右の 2 段組み。ヘッダー内余白統一。 */ .fact-service-detail__header { width: 100%; min-width: 0; margin-block-end: var(--fact-space-md); } .fact-service-detail__header > :where(* + *) { margin-block-start: var(--fact-space-2xs); } .fact-service-detail__header > p:empty { display: none; margin: 0; padding: 0; } .fact-service-detail__main { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--fact-space-xl); margin-block-end: var(--fact-space-md); } /* 画像読み込み前も高さを確保（CLS 防止）。aspect-ratio 16:9、img は絶対配置 */ .fact-service-detail__thumb { position: relative; display: block; flex: 0 0 280px; min-width: 0; max-width: 100%; aspect-ratio: var(--fact-aspect-ratio-16-9); border: 1px solid var(--fact-color-border); border-radius: var(--fact-radius-sm); overflow: hidden; background: var(--fact-color-bg-bubble); } @supports not (aspect-ratio: 16 / 9) { .fact-service-detail__thumb { height: 0; padding-block-end: 56.25%; /* 16:9 */ } } .fact-service-detail__content { display: flex; min-width: 0; flex: 1 1 300px; flex-direction: column; gap: var(--fact-space-md); } .fact-service-detail__title { margin-block: var(--fact-space-2xs) 0; margin-inline: 0; font-size: var(--fact-font-size-2xl); font-weight: 600; } .fact-service-detail__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--fact-space-sm); margin-block: var(--fact-space-2xs) 0; margin-inline: 0; } :is(.fact-service-detail__address, .fact-service-detail__company) { display: flex; align-items: center; gap: var(--fact-space-2xs); margin: 0; font-size: var(--fact-font-size-sm); color: var(--fact-color-text-weak); } .fact-service-detail__map-icon { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; color: var(--fact-color-text-weak); } .fact-service-detail__map-icon svg { width: var(--fact-space-md); height: var(--fact-space-md); } .fact-service-detail__title a { color: var(--fact-color-black); text-decoration: none; } .fact-service-detail__title a:is(:hover, :focus-visible, :active) { text-decoration: none; } .fact-service-detail__badge { display: inline-flex; align-items: center; padding: var(--fact-space-3xs) var(--fact-space-xs); border: 2px solid var(--fact-color-sky-blue); border-radius: var(--fact-radius-sm); font-size: var(--fact-font-size-xs); font-weight: 600; color: var(--fact-color-sky-blue); background: var(--fact-color-white); } .fact-service-detail__badge--certified { border-color: var(--fact-color-orange); color: var(--fact-color-orange); } .fact-service-detail__thumb :is(.fact-service-detail__thumb-inner, img) { position: absolute; inset: 0; display: block; } .fact-service-detail__thumb img { width: 100%; height: 100%; object-fit: cover; } .fact-service-detail__thumb-placeholder { background: linear-gradient(135deg, var(--fact-color-bg-gradient-start) 0%, var(--fact-color-bg-gradient-end) 100%); } /* ----- 特徴リスト・NA表記（サービス詳細カード共通） ----- */ .fact-compare__list { margin: 0; padding-inline-start: var(--fact-space-lg); } .fact-compare__na { opacity: 0.7; } .fact-service-detail__features { margin: 0; font-size: var(--fact-font-size-sm); } .fact-service-detail__features .fact-compare__list { padding-inline-start: 0; list-style: none; } .fact-service-detail__features .fact-compare__list li { display: flex; align-items: flex-start; gap: var(--fact-space-xs); margin-block-end: var(--fact-space-2xs); padding-inline-start: 0; } .fact-service-detail__features .fact-compare__list li:first-child { flex-wrap: wrap; font-size: var(--fact-font-size-xl); font-weight: 700; color: var(--fact-color-blue); } .fact-service-detail__features .fact-compare__list li:first-child::before { display: none; } .fact-service-detail__features .fact-compare__list li:not(:first-child)::before { width: var(--fact-font-size-hairline); height: var(--fact-space-md); flex: 0 0 auto; margin-block-start: var(--fact-space-2xs); border-radius: 1px; background: var(--fact-color-blue); content: ''; } .fact-service-detail__features .fact-compare__list li:not(:first-child) { font-size: var(--fact-font-size-body); font-weight: 400; color: var(--fact-color-text-muted); } .fact-service-detail__features .fact-compare__list li:last-child { margin-block-end: 0; } /* ----- 比較表（手数料等）・タブレット以下で縦積み ----- */ /* デスクトップ：列数は項目数に自動追従（6列/8列など）。1024px 未満でラベル|値の縦積みに切替。 */ .fact-service-detail__body { display: grid; grid-template-rows: auto auto; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); width: 100%; margin-block: 0 var(--fact-space-md); margin-inline: 0; border: 1px solid var(--fact-color-border); border-radius: var(--fact-radius-sm); overflow: hidden; font-size: var(--fact-font-size-sm); background: var(--fact-color-white); box-shadow: var(--fact-shadow-card); } .fact-service-detail__body-row { display: contents; } .fact-service-detail__body-cell { min-height: var(--fact-space-5xl); box-sizing: border-box; padding: var(--fact-space-xs) 0.65rem; border-inline-end: 1px solid var(--fact-color-border); } .fact-service-detail__body-cell--header { grid-row: 1; border-bottom: 1px solid var(--fact-color-border); font-weight: 600; color: var(--fact-color-text-strong); background: var(--fact-color-background-blue); } .fact-service-detail__body-cell--data { grid-row: 2; color: var(--fact-color-black); background: var(--fact-color-white); } /* 最終列（ヘッダ＋データ）の右罫線を消す。列数可変でも末尾2セルを対象にできる。 */ .fact-service-detail__body-cell:nth-last-child(2), .fact-service-detail__body-cell:last-child { border-inline-end: none; } /* タブレット以下（〜1024px） */ @media (max-width: 1023.98px) { .fact-service-detail__body { display: grid; border-inline-end: 1px solid var(--fact-color-border); } .fact-service-detail__body-row { border-bottom: 1px solid var(--fact-color-border); } .fact-service-detail__body-row:last-child { border-bottom: none; } .fact-service-detail__body-cell--header, .fact-service-detail__body-cell--data { border-bottom: none; grid-column: unset; } .fact-service-detail__body-cell--header { grid-row: unset; grid-template-columns: var(--fact-space-13xl) 1fr; } .fact-service-detail__body-cell { grid-template-columns: unset; } .fact-service-detail__body-cell--data { grid-template-rows: unset; } } /* ----- セル内リスト・契約形態タグ・アクション・タグ ----- */ /* 比較表セル内の必要書類リスト・契約形態タグ（青枠）。アクションボタン・タグ一覧。--plain は地の文風。 */ .fact-service-detail__body-cell .fact-compare__list { margin: 0; padding-inline-start: 0; list-style: none; } .fact-service-detail__body-cell .fact-compare__list li { position: relative; margin-block-end: var(--fact-space-2xs); padding-inline-start: var(--fact-space-md); font-size: var(--fact-font-size-sm); line-height: 1.4; } .fact-service-detail__body-cell .fact-compare__list li::before { position: absolute; inset-block-start: var(--fact-space-xs); inset-inline-start: 0; width: var(--fact-space-2xs); height: var(--fact-space-2xs); border-radius: 2px; background: var(--fact-color-blue); content: ''; } .fact-service-detail__body-cell .fact-compare__list li:last-child { margin-block-end: 0; } .fact-service-detail__body-cell :is(ul, p) { margin-block: 0 var(--fact-space-2xs); margin-inline: 0; padding: 0; } .fact-service-detail__body-cell :is(ul, p):last-child { margin-block-end: 0; } .fact-service-detail__actions { display: grid; min-width: 0; max-width: 100%; gap: var(--fact-space-sm); margin-block-start: var(--fact-space-md); grid-template-columns: repeat(2, minmax(0, 1fr)); } .fact-service-detail__action { width: 100%; min-width: 0; max-width: 100%; box-sizing: border-box; padding: var(--fact-space-sm) var(--fact-space-md); border: none; font-size: var(--fact-font-size-body); font-weight: 600; color: var(--fact-color-white); transform: translateY(0); transition: transform var(--fact-transition-fast); } /* カード内「検討リストに追加」「サービス詳細・口コミを見る」：ホバーは opacity + 軽い浮き（.fact-ui-btn の背景 mix を上書き） */ .fact-service-detail__action:is(:hover, :focus-visible, :active) { opacity: 1; transform: translateY(-1px); } .fact-service-detail__action--primary { color: var(--fact-color-white); background: var(--fact-color-blue); } .fact-service-detail__action--primary:is(:hover, :focus-visible, :active) { color: var(--fact-color-white); background: var(--fact-color-blue); } .fact-service-detail__action--secondary { color: var(--fact-color-white); background: linear-gradient( 180deg, var(--fact-color-yellow) 0%, var(--fact-color-orange) 100% ); } .fact-service-detail__action--secondary:is(:hover, :focus-visible, :active) { color: var(--fact-color-white); opacity: 1; background: linear-gradient( 180deg, var(--fact-color-yellow) 0%, var(--fact-color-orange) 100% ); } .fact-service-detail__tags { display: flex; flex-wrap: wrap; gap: var(--fact-space-2xs); } .fact-service-detail__tag { display: inline-block; padding: var(--fact-space-2xs) var(--fact-space-xs); border: 1px solid var(--fact-color-blue); border-radius: var(--fact-radius-sm); font-size: var(--fact-font-size-xs); font-weight: 600; line-height: 1.3; color: var(--fact-color-blue); background: var(--fact-color-white); } .fact-service-detail__tag--plain { border-color: var(--fact-color-white); font-weight: normal; color: var(--fact-color-text-strong); background: var(--fact-color-white); } /* ----- 検索フォーム・結果エリア・ランキング記事・ページング ----- */ /* [factoring_search]：フォーム・結果・チップ・件数・0件時・ランキング記事ブロック・ページング。タイトルはヒーローで表示。 */ .fact-search { margin-block-end: var(--fact-space-3xl); } .fact-search__results { width: 100%; min-width: 0; box-sizing: border-box; overflow-x: hidden; } /* ランキングページ：下部記事（ソート別の固定ページ本文・SEO 用） */ .fact-ranking-article__title { margin-block: 0 var(--fact-space-lg); margin-inline: 0; font-size: var(--fact-font-size-2xl); font-weight: 700; color: var(--fact-color-text-strong); } .fact-ranking-article__body { font-size: var(--fact-font-size-body); line-height: 1.7; color: var(--fact-color-black); } .fact-ranking-article__body > *:first-child { margin-block-start: 0; } .fact-ranking-article__body > *:last-child { margin-block-end: 0; } .fact-search__results .fact-service-detail { max-width: 100%; } .fact-service-detail__title, .fact-service-detail__title a { overflow-wrap: break-word; word-wrap: break-word; } .fact-service-detail__actions { gap: var(--fact-space-xs); } /* スマホ（〜782px）：サービス詳細カードの縦積み・CTA・特徴グリッド */ @media (max-width: 782px) { .fact-service-detail__main { width: 100%; gap: var(--fact-space-md); } .fact-service-detail__thumb { width: 100%; flex: 1 1 100%; min-width: 0; max-width: none; } .fact-service-detail__content { width: 100%; flex: 1 1 100%; } .fact-service-detail__body { flex-direction: column; } .fact-service-detail__actions { word-break: normal; white-space: normal; } .fact-service-detail__action { grid-template-columns: 1fr; text-align: center; } .fact-service-detail__content .fact-service-detail__features { width: 100%; grid-template-columns: 1fr; } .fact-service-detail__features .fact-compare__list li { grid-template-columns: 1fr; overflow-wrap: normal; } } .fact-search__results--loading { opacity: 0.6; transition: var(--fact-transition-fast); pointer-events: none; } /* タグ構造（条件検索フォーム本体・filter/ranking・shortcodes.php）: form.fact-search__form div.fact-search__form-inner div.fact-search__form-row … primary | full（fieldset チップ）| keyword | ranking */ .fact-search__form { margin-block-end: var(--fact-space-lg); padding: var(--fact-space-lg); border: 1px solid var(--fact-color-border); border-radius: var(--fact-radius-md); background: var(--fact-color-white); box-shadow: var(--fact-shadow-subtle); } .fact-search__form-inner { display: flex; flex-direction: column; gap: var(--fact-space-lg); } .fact-search__form-row { display: grid; gap: var(--fact-space-md); align-items: end; } .fact-search__form-row--primary { grid-template-columns: repeat(2, minmax(0, 1fr)); } .fact-search__form-row--full { grid-template-columns: 1fr; } .fact-search__form-row--keyword, .fact-search__form-row--ranking { grid-template-columns: 1fr auto; align-items: end; } .fact-search__field { display: flex; flex-direction: column; gap: var(--fact-space-2xs); min-width: 0; } .fact-search__label { font-size: var(--fact-font-size-sm); font-weight: 600; color: var(--fact-color-text-muted); } .fact-search__label--submit-spacer { margin: 0; padding: 0; visibility: hidden; line-height: 1.25; pointer-events: none; } .fact-search__select { min-width: 8.75rem; } .fact-search :is(.fact-search__select, .fact-search__input) { padding: var(--fact-space-xs) var(--fact-space-sm); border: 1px solid var(--fact-color-border-strong); border-radius: var(--fact-radius-md); font-size: var(--fact-font-size-body); } .fact-search :is(.fact-search__select, .fact-search__input):user-invalid { border-color: var(--fact-color-error); box-shadow: var(--fact-shadow-form-error-ring); } .fact-search__field--bonds, .fact-search__field--conditions { margin: 0; padding: 0; border: none; min-width: 0; max-width: 100%; } .fact-search__field--bonds > legend, .fact-search__field--conditions > legend { margin: 0 0 var(--fact-space-xs); padding: 0; font-size: var(--fact-font-size-sm); font-weight: 600; color: var(--fact-color-text-muted); } .fact-search__chip-group { display: flex; flex-wrap: wrap; gap: var(--fact-space-xs); } .fact-search__chip-item { display: inline-flex; } .fact-search__chip-label { display: inline-flex; align-items: center; margin: 0; padding: var(--fact-space-xs) var(--fact-space-md); border: 1px solid var(--fact-color-border-strong); border-radius: var(--fact-radius-full); font-size: var(--fact-font-size-sm); font-weight: 600; line-height: 1.3; color: var(--fact-color-black); background: var(--fact-color-white); transition: background var(--fact-transition-fast), color var(--fact-transition-fast), border-color var(--fact-transition-fast); cursor: pointer; } .fact-search__chip-input:focus-visible + .fact-search__chip-label { outline: 2px solid var(--fact-color-blue); outline-offset: 2px; } .fact-search__chip-input:checked + .fact-search__chip-label { border-color: var(--fact-color-blue); color: var(--fact-color-white); background: var(--fact-color-blue); } .fact-search__chip-label:is(:hover, :active) { border-color: var(--fact-color-blue); } .fact-search__chip-input:checked + .fact-search__chip-label:is(:hover, :active) { filter: brightness(1.06); } .fact-search__hint { display: block; margin-block-start: var(--fact-space-2xs); font-size: var(--fact-font-size-xs); color: var(--fact-color-text-muted); } .fact-search__field--keyword { min-width: 0; } .fact-search__field--submit { display: flex; flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: var(--fact-space-2xs); } .fact-search__submit { padding: var(--fact-space-sm) var(--fact-space-xl); border: none; border-radius: var(--fact-radius-md); font-size: var(--fact-font-size-body); font-weight: 600; white-space: nowrap; color: var(--fact-color-white); background: var(--fact-color-blue); cursor: pointer; } .fact-search__submit:is(:hover, :focus-visible, :active) { background: var(--fact-color-blue); filter: brightness(1.05); } .fact-search__active { margin-block-end: var(--fact-space-md); font-size: var(--fact-font-size-sm); } .fact-search__active-label { margin-inline-end: var(--fact-space-xs); color: var(--fact-color-text-muted); } .fact-search__chip { display: inline-flex; align-items: center; gap: var(--fact-space-2xs); margin-inline-end: var(--fact-space-xs); margin-block-end: var(--fact-space-2xs); padding: var(--fact-space-2xs) var(--fact-space-xs); border-radius: var(--fact-radius-sm); font-size: var(--fact-font-size-sm); color: var(--fact-color-blue); text-decoration: none; background: var(--fact-color-blue-tint); } .fact-search__chip--reset { border: 1px dashed var(--fact-color-border); color: var(--fact-color-text-muted); background: transparent; } .fact-search__count { margin-block-end: var(--fact-space-md); font-size: var(--fact-font-size-sm); color: var(--fact-color-text-muted); } /* ----- 検索0件時・PR表記 ----- */ /* 検索 0 件時のメッセージ＋「他のサービスを見る」セクション。PR 表記は検索・個別・フロント共通。 */ .fact-services-list__empty { margin-block-end: var(--fact-space-lg); padding: var(--fact-space-md); border-radius: var(--fact-radius-sm); color: var(--fact-color-black); background: var(--fact-color-bg-sub); } .fact-search__other-services { margin-block-start: var(--fact-space-xl); padding-block-start: var(--fact-space-xl); border-top: 1px solid var(--fact-color-border-strong); } .fact-search__other-title { margin-block: 0 var(--fact-space-lg); margin-inline: 0; font-size: var(--fact-font-size-lead); font-weight: 600; } .fact-search__other-link { margin-block: var(--fact-space-xl) 0; text-align: center; } .fact-search__other-link .fact-ui-btn { display: inline-block; } .fact-pr-disclaimer { margin-block: var(--fact-space-xl) 0; margin-inline: 0; padding: 0; font-size: var(--fact-font-size-xs); line-height: 1.5; color: var(--fact-color-text-weak); text-align: center; } .fact-pr-disclaimer a { color: var(--fact-color-text-weak); text-decoration: underline; } /* タブレット縦・スマホ（〜782px）：フォーム・サイドバーのはみ出し防止 */ @media (max-width: 782px) { .fact-search__form-inner { min-width: 100%; } .fact-search__form-row--primary, .fact-search__form-row--keyword, .fact-search__form-row--ranking { grid-template-columns: 1fr; } .fact-search__field--submit { flex-direction: column; } .fact-search__submit { align-self: stretch; width: 100%; } /* 検索/ランキングページ：サイドバー列を親内に収め、チップ・入力がメインに重ならないようにする */ :is(.fact-single-with-sidebar .fact-single-sidebar, .fact-sidebar--search) { min-width: 0; overflow: hidden; } .fact-sidebar--search .fact-search__form, .fact-sidebar--search .fact-search__form-inner { min-width: 0; max-width: 100%; } .fact-sidebar--search .fact-search__chip-group { max-width: 100%; } } /* ----- ページング ----- */ /* 絞り込み結果のページ番号リンク。中央寄せ・current は青背景。 */ .fact-services-list__pagination { margin-block-start: var(--fact-space-xl); } .fact-services-list__pagination-inner { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--fact-space-2xs); font-size: var(--fact-font-size-sm); } .fact-services-list__pagination-inner :is(a, span) { display: inline-block; padding: var(--fact-space-2xs) var(--fact-space-xs); border: 1px solid var(--fact-color-border-strong); border-radius: var(--fact-radius-sm); color: var(--fact-color-black); text-decoration: none; } .fact-services-list__pagination-inner a:is(:hover, :focus-visible, :active) { background: var(--fact-color-white); } .fact-services-list__pagination-inner .current { font-weight: 600; background: var(--fact-color-bg-bubble); } /* ----- セクション見出し・よくある質問 ----- */ /* fact-section-title--underlined。details/summary の FAQ。 */ .fact-section-title--underlined { position: relative; margin-block: 0 var(--fact-space-lg); margin-inline: auto; padding: 0; border: none; font-size: var(--fact-font-size-xl); font-weight: 700; color: var(--fact-color-black); text-align: center; } .fact-section-title--underlined::after { display: block; width: 6.5rem; height: 0.1875rem; margin-block: var(--fact-space-xs) 0; margin-inline: auto; background: var(--fact-color-black); content: ''; } /* タグ構造（よくある質問・[factoring_faq]・shortcodes.php）: section.fact-faq[aria-labelledby | aria-label] h2.fact-faq__title.fact-section-title--underlined … タイトルあり時のみ div.fact-faq__list details.fact-faq__item.fact-card-pressable summary.fact-faq__q div.fact-faq__a div.fact-faq__a-inner … 回答本文 */ .fact-faq { margin: 0; font-size: var(--fact-font-size-body); } .fact-faq__title { margin-block: 0 var(--fact-space-sm); margin-inline: 0; font-size: var(--fact-font-size-lg); font-weight: 600; color: var(--fact-color-black); } .fact-faq__title.fact-section-title--underlined { margin-block: var(--fact-space-10xl) var(--fact-space-7xl); margin-inline: auto; font-size: var(--fact-font-size-xl); font-weight: 700; text-align: center; } .fact-faq__title.fact-section-title--underlined::after { display: block; width: 6.5rem; height: 0.1875rem; margin-block: var(--fact-space-xl) 0; margin-inline: auto; background: var(--fact-color-black); content: ''; } .fact-faq__list { display: flex; flex-direction: column; gap: var(--fact-space-sm); } .fact-faq__item { overflow: visible; /* 立体影と枠が欠けないように（開閉は .fact-faq__a の grid で制御） */ } /* 立体的な影は共通クラスのまま、押し込み translate と影のトランジション差分は付けない */ .fact-faq__item.fact-card-pressable { transition: border-color var(--fact-transition-fast); transform: none; } .fact-faq__item.fact-card-pressable:is(:hover, :focus-visible, :active), .fact-faq__item.fact-card-pressable:focus-within { border-color: var(--fact-color-border); box-shadow: var(--fact-card-pressable-shadow-rest); transform: none; } .fact-faq__item summary { display: flex; align-items: center; gap: var(--fact-space-sm); padding: var(--fact-space-sm) var(--fact-space-md); font-size: var(--fact-font-size-sm); font-weight: 600; color: var(--fact-color-black); list-style: none; background: var(--fact-color-white); cursor: pointer; } .fact-faq__item *:focus { outline: none; } .fact-faq__item summary:focus-visible { outline: none; box-shadow: var(--fact-shadow-focus-ring); } .fact-faq__item summary::-webkit-details-marker { display: none; } .fact-faq__item summary::marker { content: none; } .fact-faq__icon { display: inline-flex; width: var(--fact-space-3xl); height: var(--fact-space-3xl); flex: 0 0 auto; align-items: center; justify-content: center; border-radius: 50%; font-family: "M PLUS Rounded 1c", sans-serif; font-size: var(--fact-font-size-body); font-weight: 700; line-height: 1; color: var(--fact-color-white); } .fact-faq__icon--q { background: var(--fact-color-sky-blue); } .fact-faq__icon--a { background: var(--fact-color-orange); } .fact-faq__q-text { flex: 1 1 auto; font-size: var(--fact-font-size-body); } .fact-faq__toggle-icon { flex: 0 0 auto; font-size: var(--fact-font-size-lg); font-weight: 300; color: var(--fact-color-sky-blue); transition: var(--fact-transition-fast); } .fact-faq__item[open] .fact-faq__toggle-icon { transform: rotate(45deg); } .fact-faq__item .fact-faq__a { display: grid; grid-template-rows: 0fr; margin: 0; border-top: 1px solid var(--fact-color-border); transition: grid-template-rows var(--fact-transition-slow); } .fact-faq__item[open]:not([data-closing]) .fact-faq__a { grid-template-rows: 1fr; } .fact-faq__item[data-closing] .fact-faq__a { grid-template-rows: 0fr; } .fact-faq__a-inner { display: flex; gap: var(--fact-space-sm); min-height: 0; padding: var(--fact-space-sm) var(--fact-space-md) var(--fact-space-md); overflow: hidden; font-size: var(--fact-font-size-sm); font-weight: 400; line-height: 1.7; color: var(--fact-color-black); } .fact-faq__a-body p { margin-block: var(--fact-space-2xs) 0; margin-inline: 0; } .fact-faq__a-body p:first-child { margin-block-start: 0; } .fact-faq__a-body ul, .fact-faq__a-body ol { margin-block: var(--fact-space-2xs) var(--fact-space-sm); margin-inline: 0; padding-inline-start: var(--fact-space-xl); } .fact-faq__a-body li { margin-block-end: var(--fact-space-3xs); } .fact-faq__a-body li:last-child { margin-block-end: 0; } .fact-faq__a-body strong { padding: 0 var(--fact-space-4xs); font-weight: 600; color: var(--fact-color-text-strong); background: linear-gradient(transparent 30%, var(--fact-color-highlight) 30%); } .fact-faq__a-body a { color: var(--fact-color-blue); text-decoration: underline; text-underline-offset: 2px; } .fact-faq__a-body a:is(:hover, :focus-visible, :active) { color: var(--fact-color-sky-blue); } /* ========================================================================== 23. [Domain] サービス詳細コンテンツ部品（見出し・本文CTA・編集部要約） -------------------------------------------------------------------------- サービス詳細テンプレートに依存しない、再利用可能な部品群。 - セクション見出し（編集部要約・比較表・口コミ） - 本文内 CTA（.fact-service-content__cta-*） - 編集部要約ブロック（.fact-company-editorial） タグ構造（代表・2〜3階層まで）: section.fact-company-editorial h2.fact-company-editorial__heading div.fact-company-editorial__body div.fact-service-content div.fact-service-content__cta-wrap a.fact-service-content__cta-link span.fact-service-content__cta-inner ※比較表・口コミ見出し等は同章の :is(...) と 26 章と併せて参照 ========================================================================== */ /* ----- セクション見出し（サービス詳細） ----- */ /* 編集部要約・比較表・口コミの見出し（lg/700/左ボーダー）。共通本文・目次は 5/6 章に集約。 */ :is(.fact-company-editorial__heading, .fact-company-table__heading, .fact-company-reviews__heading) { font-size: var(--fact-font-size-lg); font-weight: 700; color: var(--fact-color-text-strong); } :is(.fact-company-editorial__heading, .fact-company-table__heading) { box-sizing: border-box; margin-block: var(--fact-space-3xl); margin-inline: 0; padding-block: var(--fact-space-2xs); padding-inline: var(--fact-space-sm) 0; border-start-start-radius: 2px; border-end-start-radius: 2px; border-inline-start: 3px solid var(--fact-color-blue); } .fact-company-reviews__heading { margin-block-start: 0; } /* ----- 本文内 CTA（サービス詳細） ----- */ .fact-service-content__cta-wrap { margin-block: var(--fact-space-xl); margin-inline: 0; } .fact-service-content__cta-link { display: flex; align-items: center; justify-content: center; width: 100%; max-width: 42rem; margin-block: 0; margin-inline: auto; padding: 0.65rem 1.1rem; border-radius: 6px; box-sizing: border-box; font-size: var(--fact-font-size-body); font-weight: 600; text-decoration: none !important; color: var(--fact-color-white) !important; background: var(--fact-color-blue); } .fact-service-content__cta-link:is(:hover, :focus-visible, :active) { color: var(--fact-color-white) !important; filter: none; } .fact-service-content__cta-inner { display: inline-flex; align-items: center; justify-content: center; gap: var(--fact-space-xs); flex-wrap: wrap; } .fact-service-content__cta-logo { flex-shrink: 0; display: flex; align-items: center; justify-content: center; padding: var(--fact-space-2xs) var(--fact-space-xs); border-radius: 4px; background: var(--fact-color-white); } .fact-service-content__cta-logo img { display: block; height: 28px; width: auto; max-width: 7.5rem; object-fit: contain; } .fact-service-content__cta-label { line-height: 1.3; } /* ----- 編集部要約（目次本体は 6 章） ----- */ /* 「〇〇とは？」タイトル（中央）＋編集部要約ブロック。 */ .fact-service-about-heading { margin-block: var(--fact-space-6xl) var(--fact-space-5xl); margin-inline: 0; font-size: var(--fact-font-size-xl); font-weight: 700; color: var(--fact-color-text-strong); text-align: center; } .fact-company-editorial { margin-block: var(--fact-space-xl); margin-inline: 0; } .fact-company-editorial__block { margin-block-end: var(--fact-space-lg); } .fact-company-editorial__block:last-child { margin-block-end: 0; } /* ========================================================================== 24. [Domain] お役立ち記事ドメイン部品（記事内おすすめ） -------------------------------------------------------------------------- お役立ち記事詳細で使う、本文内の「人気・おすすめ」ブロック。 - .fact-article-recommend - .fact-article-recommend__heading タグ構造（代表・2〜3階層まで）: section.fact-article-recommend h2.fact-article-recommend__heading ※見出し （中身）.fact-card-tile-grid … 15 章のカードタイルを流用（記事本文内のおすすめ枠） ========================================================================== */ /* ----- お役立ち記事内「人気・おすすめのファクタリング会社」セクション ----- */ .fact-article-recommend { margin-block-start: 0; padding-block: var(--fact-space-6xl); } .fact-recommend-global { padding-block: var(--wp--preset--spacing--70); } .fact-article-recommend__heading { margin-block: 0 var(--fact-space-3xl); margin-inline: 0; font-size: var(--fact-font-size-2xl); font-weight: 700; color: var(--fact-color-text-strong); } /* ========================================================================== 25. [Template] サービス一覧ページ（factor） -------------------------------------------------------------------------- 絞り込みページ（body.fact-search-page）のタイトル・本文コンテナの基本。single-factoring_service のタイトル見た目を一覧と統一。 タグ構造（templates/page-factor.html）: main.fact-page-factor.fact-page-shell （ショートコード）[factoring_page_hero] div.fact-content-wrap.alignfull div.fact-page-body div.fact-container-inner.fact-page-main__inner div.post-content … ブロックエディタ（**21〜22 章**の検索・一覧・カード。本文にショートコードを配置） ========================================================================== */ /* ----- ページタイトル・本文コンテナ ----- */ /* `.fact-search-page` / `.single-factoring_service` のタイトル・本文。 */ :is(.fact-search-page, .single-factoring_service) .wp-block-post-title { margin-block: 0 var(--fact-space-md); margin-inline: 0; font-size: clamp(var(--fact-font-size-xl), 4vw, var(--fact-font-size-3xl)); font-weight: 700; line-height: 1.35; color: var(--fact-color-text-strong); } .fact-search-page .wp-block-post-content { font-size: var(--fact-font-size-body); line-height: 1.6; color: var(--fact-color-black); } /* ========================================================================== 26. [Template] サービス詳細ページ（factor/xxx） -------------------------------------------------------------------------- テンプレート single-factoring_service.html の表示順に沿って構成。セクション見出し → 編集部要約 → 比較表＋B2Bラッパー → サービス比較表 → タグ・FAQ → 法人向け導線 → 本文 → 口コミ。 タグ構造（templates/single-factoring_service.html・ショートコードは inc/shortcodes/shortcodes.php）: main.fact-single-service.fact-page-shell （ショートコード）[factoring_page_hero] div.fact-service-with-sidebar.fact-content-wrap div.fact-container-inner.fact-page-main__inner div.fact-service-columns div.fact-service-main h2.fact-service-about-heading … [factoring_service_about_heading] div.fact-search__results > section.fact-service-detail … [factoring_service_detail] nav.fact-service-toc + section.fact-company-editorial … [factoring_service_editorial_summary]（目次・特徴） … 公式CTA・div.fact-service-compare-block（比較表・B2B）・本文・タグ・FAQ 等は [factoring_service_content] 出力に準拠 section.fact-company-reviews … [factoring_service_reviews] div.fact-service-sidebar template-part sidebar-service ========================================================================== */ /* ----- 比較表＋B2Bラッパー ----- */ /* 比較表セクションと B2B 法人向け導線を上下ラインで囲むブロック。 */ .fact-service-compare-block { margin-block: var(--fact-space-xl); margin-inline: 0; padding-block: var(--fact-space-xl); } /* ----- サービス比較表（詳細2列・[factoring_service_comparison_table]） ----- */ /* * .fact-company-table がセクション、.fact-compare-table が表本体（クラスのみ、--multi なし）。 * マルチ列比較（.fact-compare-table--multi）は第29章と compare-multi-table.php。ここでは * :not(.fact-compare-table--multi) でスコープし、collapse / 10rem キー列などが固定ページ側に漏れないようにする。 */ .fact-company-table { max-width: none; margin-block: 0; margin-inline: 0; } .fact-company-table__wrap, .fact-service-content figure.wp-block-table { border: none; /* サービス詳細内のテーブルブロック枠線も打ち消す */ overflow-x: auto; } table.fact-compare-table:not(.fact-compare-table--multi), .fact-service-content table.has-fixed-layout { width: 100%; min-width: 20rem; font-size: var(--fact-font-size-body); border-collapse: collapse; } .fact-service-content table.has-fixed-layout, .fact-service-content table.has-fixed-layout th, .fact-service-content table.has-fixed-layout td { border: none; /* 親テーマ由来の黒い枠線をリセット */ } table.fact-compare-table:not(.fact-compare-table--multi) .fact-compare-table__th, table.fact-compare-table:not(.fact-compare-table--multi) .fact-compare-table__td, .fact-service-content table.has-fixed-layout th, .fact-service-content table.has-fixed-layout td { padding: var(--fact-space-xs) var(--fact-space-sm); border-bottom: 1px solid var(--fact-color-border); text-align: left; vertical-align: top; } table.fact-compare-table:not(.fact-compare-table--multi) .fact-compare-table__th, .fact-service-content table.has-fixed-layout th { width: 10rem; font-weight: 600; color: var(--fact-color-text-strong); background: var(--fact-color-light-gray); } table.fact-compare-table:not(.fact-compare-table--multi) .fact-compare-table__td, .fact-service-content table.has-fixed-layout td { color: var(--fact-color-black); } .fact-service-content table.has-fixed-layout ul { margin: 0; padding-inline-start: var(--fact-space-lg); list-style: disc; } .fact-service-content table.has-fixed-layout li { margin-block-end: var(--fact-space-2xs); } .fact-service-content table.has-fixed-layout li:last-child { margin-block-end: 0; } /* ----- タグ一覧・FAQ ----- */ /* 比較表セクション内のタグ一覧＋よくある質問（Q/A ラベルは M+ Rounded 1c）。 */ .fact-company-tags, .fact-company-faq { margin-block-start: var(--fact-space-lg); padding-block-start: var(--fact-space-lg); border-top: 1px solid var(--fact-color-border); } :is(.fact-company-tags__heading, .fact-company-faq__heading) { margin-block: 0 var(--fact-space-xs); margin-inline: 0; font-size: var(--fact-font-size-body); font-weight: 600; color: var(--fact-color-text-strong); } .fact-company-tags__list { display: flex; flex-wrap: wrap; gap: var(--fact-space-2xs); } .fact-company-tag { display: inline-block; padding: var(--fact-space-2xs) var(--fact-space-sm); border: 1px solid var(--fact-color-border); border-radius: var(--fact-radius-sm); font-size: var(--fact-font-size-sm); color: var(--fact-color-text-weak); background: var(--fact-color-light-gray); } .fact-company-tag--active { border-color: var(--fact-color-sky-blue); font-weight: 500; color: var(--fact-color-blue); background: color-mix(in srgb, var(--fact-color-blue) 12%, transparent); } .fact-company-tag--plain { border-color: var(--fact-color-white); font-weight: normal; color: var(--fact-color-text-strong); background: var(--fact-color-white); } .fact-company-faq__heading { margin-block-end: var(--fact-space-sm); } .fact-company-faq__list { margin: 0; padding: 0; list-style: none; } .fact-company-faq__term { display: flex; align-items: flex-start; gap: var(--fact-space-sm); margin-block: var(--fact-space-xl) var(--fact-space-xs); margin-inline: 0; font-size: var(--fact-font-size-body); font-weight: 600; color: var(--fact-color-text-strong); } .fact-company-faq__term:first-child { margin-block-start: 0; } .fact-company-faq__q-letter { display: inline-flex; width: var(--fact-space-3xl); height: var(--fact-space-3xl); flex: 0 0 auto; align-items: center; justify-content: center; margin-block-start: calc(-1 * var(--fact-space-2xs)); border-radius: 50%; font-family: "M PLUS Rounded 1c", sans-serif; font-size: var(--fact-font-size-body); font-weight: 700; line-height: 1; color: var(--fact-color-white); background: var(--fact-color-sky-blue); } .fact-company-faq__desc { display: flex; align-items: flex-start; gap: var(--fact-space-sm); margin: 0; padding-inline-start: 0; font-size: var(--fact-font-size-body); line-height: 1.6; color: var(--fact-color-black); } .fact-company-faq__desc > p { min-width: 0; flex: 1 1 0; margin: 0; } .fact-company-faq__desc > p + p { margin-block-start: 0.5em; } .fact-company-faq__a-letter { display: inline-flex; width: var(--fact-space-3xl); height: var(--fact-space-3xl); flex: 0 0 auto; align-items: center; justify-content: center; margin-block-start: 0; border-radius: 50%; font-family: "M PLUS Rounded 1c", sans-serif; font-size: var(--fact-font-size-body); font-weight: 700; line-height: 1; color: var(--fact-color-white); background: var(--fact-color-orange); } /* ----- 法人向け導線 ----- */ /* [factoring_service_b2b_cta]。比較表ブロック内。リンク・更新日・区切りテキスト。 */ .fact-company-b2b { max-width: none; margin-block: var(--fact-space-xl); margin-inline: 0; padding-block-start: var(--fact-space-lg); border-top: 1px solid var(--fact-color-border); } .fact-company-b2b__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--fact-space-xs); font-size: var(--fact-font-size-sm); } .fact-company-b2b__link { color: var(--fact-color-text-weak); text-decoration: none; } .fact-company-b2b__link:is(:hover, :focus-visible, :active) { color: var(--fact-color-black); text-decoration: underline; } .fact-company-b2b__updated, .fact-company-b2b__separator { color: var(--fact-color-text-weak); } .fact-company-b2b__sep { color: var(--fact-color-text-weak); pointer-events: none; } /* ----- サービス詳細本文 ----- */ /* [factoring_service_content]。リッチテキストは 5 章「共通本文」で定義。 */ .fact-service-content { margin-block: var(--fact-space-xl); margin-inline: 0; } .fact-service-content > *:first-child { margin-block-start: 0; } .fact-service-content > *:last-child { margin-block-end: 0; } /* ----- 口コミ ----- */ /* 口コミセクション：見出し・注意・一覧・カード（アバター・スコア・吹き出し）・投稿フォーム。 */ /* .fact-company-reviews--inline: サービス詳細ページ内埋め込み。.fact-company-reviews--page: 口コミ専用ページ。 */ .fact-company-reviews { margin-block: var(--fact-space-xl); margin-inline: 0; padding: var(--fact-space-lg); border-radius: var(--fact-radius-md); background: var(--fact-color-light-gray); } .fact-company-reviews--page .fact-company-reviews__form-wrap { max-width: 100%; } .fact-company-reviews__heading { margin-block: 0 var(--fact-space-sm); margin-inline: 0; font-size: var(--fact-font-size-lg); font-weight: 700; color: var(--fact-color-text-strong); } .fact-company-reviews__notice { margin-block: 0 var(--fact-space-sm); margin-inline: 0; padding: var(--fact-space-xs) var(--fact-space-sm); border-radius: var(--fact-radius-sm); font-size: var(--fact-font-size-sm); } .fact-company-reviews__notice--success { color: var(--fact-color-black); background: var(--fact-color-blue-tint); } .fact-company-reviews__notice--error { color: var(--fact-color-error); background: var(--fact-color-error-bg); } .fact-company-reviews__empty { margin: 0; } .fact-company-reviews__text { margin-block: 0 var(--fact-space-xs); margin-inline: 0; font-size: var(--fact-font-size-body); color: var(--fact-color-black); } .fact-company-reviews__link-wrap { margin-block: 0 var(--fact-space-xs); margin-inline: 0; } .fact-company-reviews__guideline-link { font-weight: 500; color: var(--fact-color-blue); text-decoration: underline; } .fact-company-reviews__guideline-link:is(:hover, :focus-visible, :active) { color: var(--fact-color-blue); text-decoration: none; } .fact-company-reviews__note { margin: 0; font-size: var(--fact-font-size-sm); color: var(--fact-color-text-weak); } .fact-company-reviews__list { margin-block: 0 var(--fact-space-xl); margin-inline: 0; padding: 0; list-style: none; } .fact-company-reviews__item { border-radius: var(--fact-radius-sm); background: var(--fact-color-white); box-shadow: var(--fact-shadow-subtle); } .fact-company-reviews__item + .fact-company-reviews__item { margin-block-start: var(--fact-space-sm); } .fact-company-reviews__item-inner { display: flex; flex-wrap: wrap; gap: var(--fact-space-sm); padding: var(--fact-space-sm); } .fact-company-reviews__persona { display: flex; max-width: 12.5rem; flex: 0 0 11.25rem; flex-direction: column; align-items: center; gap: var(--fact-space-xs); } .fact-company-reviews__avatar { display: flex; width: var(--fact-space-9xl); height: var(--fact-space-9xl); flex-shrink: 0; align-items: center; justify-content: center; border-radius: 50%; color: var(--fact-color-text-weak); background-color: var(--fact-color-bg-avatar-placeholder); } .fact-company-reviews__avatar svg { width: var(--fact-space-3xl); max-width: 58%; height: var(--fact-space-3xl); max-height: 58%; } .fact-company-reviews__persona-text { width: 100%; font-size: var(--fact-font-size-sm); text-align: center; } .fact-company-reviews__date { display: block; margin-block: var(--fact-space-2xs) 0; font-size: var(--fact-font-size-xs); color: var(--fact-color-text-weak); } .fact-company-reviews__persona-type { display: block; margin-block: var(--fact-space-2xs) var(--fact-space-xs); font-size: var(--fact-font-size-xs); font-weight: 600; color: var(--fact-color-text-weak); } .fact-company-reviews__persona-list { display: table; margin-block: 0 var(--fact-space-2xs); margin-inline: auto; padding: 0; font-size: var(--fact-font-size-xs); color: var(--fact-color-text-weak); list-style: none; border-collapse: collapse; } .fact-company-reviews__persona-item { display: table-row; } .fact-company-reviews__persona-label { display: table-cell; padding-block: 1px; padding-inline: 0 0.25em; font-weight: 600; white-space: nowrap; text-align: right; } .fact-company-reviews__persona-value { display: table-cell; padding-block: 1px; padding-inline: 0.25em 0; text-align: left; } .fact-company-reviews__persona-item + .fact-company-reviews__persona-item { margin-block-start: 0; } .fact-company-reviews__bubble { position: relative; flex: 1 1 0; padding: var(--fact-space-sm); border-radius: var(--fact-radius-md); background: var(--fact-color-white); } .fact-company-reviews__bubble::before { position: absolute; inset-block-start: var(--fact-space-lg); inset-inline-start: -10px; width: 0; height: 0; border-top: 10px solid transparent; border-right: 10px solid var(--fact-color-white); border-bottom: 10px solid transparent; content: ""; } .fact-company-reviews__item-header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--fact-space-xs); margin-block-end: var(--fact-space-xs); } .fact-company-reviews__score { display: flex; align-items: baseline; gap: var(--fact-space-2xs); font-size: var(--fact-font-size-sm); } .fact-company-reviews__score-label { color: var(--fact-color-text-weak); } .fact-company-reviews__stars { display: inline-flex; gap: 2px; } .fact-company-reviews__star { font-size: var(--fact-font-size-sm); color: var(--fact-color-border); } .fact-company-reviews__star--filled { color: var(--fact-color-orange); } .fact-company-reviews__scores-detail { display: flex; flex-wrap: wrap; gap: var(--fact-space-2xs); margin-block-start: var(--fact-space-2xs); font-size: var(--fact-font-size-xs); } .fact-company-reviews__score-row { display: flex; align-items: center; gap: var(--fact-space-2xs); } .fact-company-reviews__score-row-label { color: var(--fact-color-text-weak); } .fact-company-reviews__body-section + .fact-company-reviews__body-section { margin-block-start: var(--fact-space-xs); } .fact-company-reviews__body-heading { margin-block: 0 var(--fact-space-2xs); margin-inline: 0; font-size: var(--fact-font-size-sm); font-weight: 600; color: var(--fact-color-text-strong); } .fact-company-reviews__body-text { margin: 0; font-size: var(--fact-font-size-sm); line-height: 1.7; } .fact-company-reviews__form-wrap { max-width: 100%; box-sizing: border-box; margin-block-start: var(--fact-space-xl); padding: var(--fact-space-lg); border-radius: var(--fact-radius-md); border-top: none; background: transparent; } .fact-company-reviews__form-heading { margin-block: 0 var(--fact-space-xs); margin-inline: 0; font-size: var(--fact-font-size-lead); font-weight: 700; color: var(--fact-color-text-strong); } .fact-company-reviews__form-header { display: flex; align-items: center; justify-content: space-between; gap: var(--fact-space-sm); } .fact-company-reviews__form { width: 100%; max-width: 48rem; box-sizing: border-box; margin-block-start: var(--fact-space-lg); margin-inline: auto; } /* セクションカード（評価・口コミ本文・利用詳細・事業者・基本情報） */ .fact-company-reviews__field--scores, .fact-company-reviews__field--bodies, .fact-company-reviews__field--usage, .fact-company-reviews__field--business, .fact-company-reviews__field--personal { /* 口コミフォーム各ブロックのカード風ラップ */ margin-block-start: var(--fact-space-lg); padding: var(--fact-space-lg); border-radius: var(--fact-radius-md); border: 1px solid var(--fact-color-border); background-color: var(--fact-color-white); box-shadow: var(--fact-shadow-subtle); } .fact-company-reviews__section-icon { display: inline-flex; flex-shrink: 0; align-items: center; justify-content: center; color: var(--fact-color-form-accent); } .fact-company-reviews__section-icon svg { display: block; width: var(--fact-space-3xl); height: var(--fact-space-3xl); } /* 口コミ投稿：対象サービス表示（フォーム内） */ .fact-review-target { position: relative; padding: 0; border: 0; overflow: hidden; background: linear-gradient(135deg, var(--fact-color-bg-gradient-start) 0%, var(--fact-color-bg-gradient-end) 100%); } .fact-review-target__link { position: relative; z-index: var(--fact-z-index-content); display: block; padding: var(--fact-space-xl); text-decoration: none; } .fact-review-target__label { display: inline-flex; align-items: center; gap: var(--fact-space-xs); font-size: var(--fact-font-size-xs); font-weight: 700; letter-spacing: 0.02em; opacity: 0.95; } .fact-review-target__name { display: block; margin-block-start: var(--fact-space-2xs); font-size: clamp(var(--fact-font-size-lg), 2.5vw, var(--fact-font-size-2xl)); font-weight: 800; line-height: 1.25; } /* 口コミ投稿：サービス選択タイル */ .fact-review-entry__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--fact-space-sm); } @media (max-width: 960px) { .fact-review-entry__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 540px) { .fact-review-entry__grid { grid-template-columns: 1fr; } } .fact-review-entry__tile { position: relative; display: grid; align-items: end; min-height: 140px; padding: var(--fact-space-sm); border: 1px solid var(--fact-color-border); border-radius: var(--fact-radius-lg); overflow: hidden; text-decoration: none; color: var(--fact-color-white); background: var(--fact-color-light-gray); box-shadow: var(--fact-shadow-subtle); } .fact-review-entry__tile::before { content: ""; position: absolute; inset: 0; background-image: var(--fact-review-entry-thumb); background-size: cover; background-position: center; transform: scale(1.02); transition: transform 0.25s ease; } .fact-review-entry__tile::after { content: ""; position: absolute; inset: 0; background: linear-gradient( 180deg, color-mix(in srgb, var(--fact-color-black) 12%, transparent), color-mix(in srgb, var(--fact-color-black) 55%, transparent) ); } .fact-review-entry__tile:not([style*="--fact-review-entry-thumb"])::before { background-image: radial-gradient( circle at 30% 20%, var(--fact-color-bg-gradient-start), var(--fact-color-bg-gradient-end) ); } .fact-review-entry__tile:is(:hover, :focus-visible, :active)::before { transform: scale(1.06); } .fact-review-entry__tile-name { position: relative; z-index: var(--fact-z-index-content); font-size: 1.05rem; font-weight: 800; line-height: 1.25; text-shadow: 0 8px 18px color-mix(in srgb, var(--fact-color-black) 45%, transparent); } /* 評価：行（ラベル＋星） */ .fact-company-reviews__field--scores .fact-company-reviews__score-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--fact-space-xs); margin-block-start: var(--fact-space-sm); } .fact-company-reviews__field--scores .fact-company-reviews__score-row:first-of-type { margin-block-start: 0; } .fact-company-reviews__score-row-label { font-size: var(--fact-font-size-sm); font-weight: 500; color: var(--fact-color-text-strong); } /* 星クリック式：DOM順 1…5 を row-reverse で 5…1 表示（左が5） */ .fact-company-reviews__star-rating { display: inline-flex; flex-direction: row-reverse; justify-content: flex-end; gap: 2px; } .fact-company-reviews__star-input { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; white-space: nowrap; clip: rect(0, 0, 0, 0); } .fact-company-reviews__star-label { display: inline-block; font-size: 1.5rem; line-height: 1; color: var(--fact-color-blue-grayout); transition: color 0.2s ease, transform 0.15s ease; cursor: pointer; user-select: none; } .fact-company-reviews__star-label:is(:hover, :focus-visible, :active) { transform: scale(1.15); } .fact-company-reviews__star-input:checked + .fact-company-reviews__star-label, .fact-company-reviews__star-input:checked ~ .fact-company-reviews__star-label, .fact-company-reviews__star-label:is(:hover, :focus-visible, :active), .fact-company-reviews__star-label:is(:hover, :focus-visible, :active) ~ .fact-company-reviews__star-label { color: var(--fact-color-form-accent); } .fact-company-reviews__field--inline { display: flex; flex-wrap: wrap; gap: var(--fact-space-sm); } .fact-company-reviews__field--inline > div { min-width: 0; flex: 1 1 10rem; } .fact-company-reviews__item-title { margin-block: 0 var(--fact-space-xs); margin-inline: 0; font-size: var(--fact-font-size-body); font-weight: 600; color: var(--fact-color-text-strong); } /* ========================================================================== 27. [Template] お役立ち記事一覧ページ（magazine） -------------------------------------------------------------------------- テンプレート page-magazine・ショートコード [factoring_magazine_archive]。検索窓・記事グリッド・ページング・一覧下の口コミセクション。 タグ構造（templates/page-magazine.html・本文は [factoring_magazine_archive]・inc/shortcodes/shortcodes.php）: main.fact-page-magazine.fact-page-shell （ショートコード）[factoring_page_hero] div.fact-single-with-sidebar.fact-content-wrap div.fact-container-inner.fact-page-main__inner div.fact-single-columns div.fact-single-main section.fact-magazine-archive[aria-label] form.fact-magazine-archive__search[role="search"] input.fact-magazine-archive__search-input + button.fact-magazine-archive__search-submit ul.fact-magazine-archive__list.fact-card-tile-grid li.fact-magazine-archive__item article.fact-magazine-card … 記事カード（**15 章**） ※空時は ul なしで p.fact-magazine-archive__empty のみ nav.fact-magazine-archive__pagination … ページあり時 section.fact-magazine-archive__services … 一覧下のサービス枠（0件時は p.fact-magazine-archive__services-empty） div.fact-single-sidebar template-part sidebar-service ========================================================================== */ /* ----- マガジンアーカイブ・検索・グリッド ----- */ /* 記事検索窓・カードグリッド（1/2/3 列）・空時メッセージ。page-magazine・[factoring_magazine_archive]。 */ .fact-magazine-archive { margin-block-start: var(--fact-space-3xl); font-size: var(--fact-font-size-body); } /* ----- セクション分割（検索/おすすめ/新着/サービス） ----- */ .fact-magazine-archive__section + .fact-magazine-archive__section { margin-block-start: var(--fact-space-4xl); padding-block-start: var(--fact-space-3xl); border-top: 1px solid var(--fact-color-border); } .fact-magazine-archive__section-title { margin-block: 0 var(--fact-space-md); margin-inline: 0; font-size: var(--fact-font-size-xl); font-weight: 700; color: var(--fact-color-text-strong); text-align: center; } .fact-magazine-archive__search { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--fact-space-xs); margin-block-end: var(--fact-space-xl); } .fact-magazine-archive__search-input { min-width: 12rem; max-width: 20rem; flex: 1; padding: var(--fact-space-xs) var(--fact-space-sm); border: 1px solid var(--fact-color-border); border-radius: var(--fact-radius-sm); font-size: var(--fact-font-size-body); } .fact-magazine-archive__search-submit { padding: var(--fact-space-xs) var(--fact-space-lg); border: none; border-radius: var(--fact-radius-sm); font-size: var(--fact-font-size-body); font-weight: 600; color: var(--fact-color-white); background: var(--fact-color-blue); cursor: pointer; } .fact-magazine-archive__search-submit:is(:hover, :focus-visible, :active) { background: var(--fact-color-blue); } /* グリッド・カードレイアウトは **15 章** の .fact-magazine-archive__list（ul）で人気・おすすめと同じ 3/2/1 列 */ .fact-magazine-card { margin: 0; padding: 0; break-inside: avoid; } .fact-magazine-archive__empty, .fact-magazine-archive__services-empty { margin: 0; text-align: center; color: var(--fact-color-text-muted); } .fact-magazine-archive__empty { padding: var(--fact-space-3xl); } /* ----- ページング ----- */ /* 記事一覧のページ番号。中央寄せ・current は青背景・白文字。 */ .fact-magazine-archive__pagination { margin-block-start: var(--fact-space-3xl); padding-block-start: var(--fact-space-xl); border-top: 1px solid var(--fact-color-border); } .fact-magazine-archive__pagination ul { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--fact-space-xs); margin: 0; padding: 0; list-style: none; } .fact-magazine-archive__pagination a, .fact-magazine-archive__pagination span { display: inline-flex; min-width: var(--fact-space-5xl); align-items: center; justify-content: center; padding: var(--fact-space-xs) var(--fact-space-sm); border: 1px solid var(--fact-color-border); border-radius: var(--fact-radius-sm); font-size: var(--fact-font-size-sm); font-weight: 600; color: var(--fact-color-text-strong); text-decoration: none; background: var(--fact-color-white); } .fact-magazine-archive__pagination .current { border-color: var(--fact-color-blue); color: var(--fact-color-white); background: var(--fact-color-blue); } .fact-magazine-archive__pagination .prev, .fact-magazine-archive__pagination .next { padding-inline: var(--fact-space-md); } /* ----- 口コミ・評判セクション（一覧下） ----- */ /* マガジン一覧ページの下部。サービスの口コミ・評判セクションのタイトル・グリッド。 */ .fact-magazine-archive__services { margin-block-start: var(--fact-space-6xl); padding-block-start: var(--fact-space-3xl); border-top: 1px solid var(--fact-color-border); } .fact-magazine-archive__services-title { margin-block: 0 var(--fact-space-xl); margin-inline: 0; font-size: var(--fact-font-size-xl); font-weight: 700; color: var(--fact-color-text-strong); } .fact-magazine-archive__list--services { margin-block-start: 0; } .fact-magazine-archive__services-empty { padding: var(--fact-space-lg) 0; font-size: var(--fact-font-size-sm); } /* ========================================================================== 28. [Template] お役立ち記事詳細ページ（magazine/xxx） -------------------------------------------------------------------------- 個別記事ページ（/magazine/スラッグ/）。テンプレート専用差分のみを扱う章。 テンプレート非依存の見た目部品（記事内おすすめ・本文部品）は **24 [Domain]** へ集約。 タグ構造（templates/single.html・10 章と同型）: main.fact-single-post.fact-page-shell （ショートコード）[factoring_page_hero] div.fact-single-with-sidebar.fact-content-wrap div.fact-container-inner.fact-page-main__inner div.fact-single-columns div.fact-single-main div.post-content.fact-service-content … 本文（17章相当） div.fact-single-sidebar template-part sidebar-single body.fact-magazine-single は functions.php で付与（URL は inc/magazine/magazine-permalinks.php） templates/single.html では親テーマの twentytwentyfive/more-posts を入れない（空グループ＋spacing--60 の殻余白防止）。 ========================================================================== */ /* ----- お役立ち記事本文（個別） ----- */ /* 個別記事テンプレート専用の本文差分（画像・表）。 */ .fact-magazine-single .wp-block-post-content :is(.wp-block-image, figure) { margin-block: var(--fact-space-xl); margin-inline: 0; } .fact-magazine-single .wp-block-post-content .wp-block-image img { border-radius: var(--fact-radius-sm); } .fact-magazine-single .wp-block-post-content .wp-block-table { margin-block: var(--fact-space-xl); margin-inline: 0; border: none; overflow-x: auto; } .fact-magazine-single .wp-block-post-content table { width: 100%; font-size: var(--fact-font-size-sm); border-collapse: collapse; } .fact-magazine-single .wp-block-post-content :is(th, td) { padding: var(--fact-space-xs) var(--fact-space-md); border: 1px solid var(--fact-color-border); text-align: left; } .fact-magazine-single .wp-block-post-content th { font-weight: 600; color: var(--fact-color-text-strong); background: var(--fact-color-blue-tint); } /* ========================================================================== 29. [Template] 比較ページ（comparison） -------------------------------------------------------------------------- 固定ページ [factoring_service_compare_all] / [factoring_service_compare_shortlist]、 類似比較・AJAX 再描画のマルチ表（table.fact-compare-table.fact-compare-table--multi）。 全サービス比較のページネーションは条件検索と同じ nav.fact-services-list__pagination > div.fact-services-list__pagination-inner（search-ajax / shortcodes-front と共通。本文 .fact-service-content 内の ul/li 用タイポが list 型に掛からないよう plain）。 body.fact-page-comparison-all：ヒーロー〜本文の余白を詰める・表の sticky 強化。 詳細ページの2列表は第26章（:not(.fact-compare-table--multi)）を参照。 ========================================================================== */ /* 全サービス比較：ヒーロー直下〜本文の縦余白を抑える */ body.fact-page-comparison-all .fact-hero__container .fact-hero { padding-block: var(--fact-space-md); } body.fact-page-comparison-all .fact-content-wrap--pad-md { padding-block-start: var(--fact-space-lg); padding-block-end: 4rem; } /* 本文内リンク用タイポが青ボタンに掛からないようにする */ .fact-service-content .fact-compare-page a.fact-ui-btn { text-decoration: none; } .fact-service-content .fact-compare-page a.fact-ui-btn--press-blue, .fact-service-content .fact-compare-page a.fact-ui-btn--press-blue:is(:hover, :focus-visible, :active) { color: var(--fact-btn-main-blue-text); } .fact-compare__heading { margin-block: 0 var(--fact-space-lg); font-size: var(--fact-font-size-lg); font-weight: 700; } /* 固定ページ本文内の比較ブロック：見出しを .fact-page-content の H1 に近いトーンへ */ .fact-page-content .wp-block-post-content .fact-compare-page .fact-compare__heading { margin-block: 0 var(--fact-space-md); font-size: clamp(var(--fact-font-size-xl), 4vw, var(--fact-font-size-3xl)); font-weight: 700; line-height: 1.35; color: var(--fact-color-text-strong); } .fact-page-content .wp-block-post-content .fact-compare-page .fact-compare__empty { margin-block: 0 var(--fact-space-md); font-size: var(--fact-font-size-body); line-height: 1.6; color: var(--fact-color-black); } /* 比較ページ：導線リード・CTA */ .fact-compare__intro { margin-block-end: var(--fact-space-md); padding: var(--fact-space-md); border: 1px solid var(--fact-color-border); border-radius: var(--fact-radius-md); background: var(--fact-color-white); box-shadow: var(--fact-shadow-card); } .fact-compare__intro-lead { margin: 0 0 var(--fact-space-sm); font-size: var(--fact-font-size-sm); line-height: 1.65; color: var(--fact-color-text-strong); } .fact-compare__intro-steps { margin: 0 0 var(--fact-space-md); padding-inline-start: var(--fact-space-xl); font-size: var(--fact-font-size-sm); line-height: 1.6; color: var(--fact-color-black); } .fact-compare__intro-steps a { font-weight: 600; } .fact-compare__intro-cta { display: flex; flex-wrap: wrap; gap: var(--fact-space-sm); align-items: center; } .fact-compare__cta-estimate { display: inline-flex; min-height: var(--fact-space-5xl); padding-block: var(--fact-space-sm); padding-inline: var(--fact-space-lg); font-weight: 700; } .fact-compare__scroll-hint { margin: 0 0 var(--fact-space-sm); font-size: var(--fact-font-size-micro); line-height: 1.5; color: var(--fact-color-text-muted); } .fact-compare__pagination-note { margin-block: var(--fact-space-sm) 0; font-size: var(--fact-font-size-micro); line-height: 1.5; color: var(--fact-color-text-muted); text-align: center; } .fact-compare-table__caption { padding: var(--fact-space-xs) var(--fact-space-sm); caption-side: top; font-size: var(--fact-font-size-micro); font-weight: 600; line-height: 1.45; color: var(--fact-color-text-strong); text-align: start; } .fact-compare-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; } /* マルチ表の外枠：サービス詳細カードの比較ブロックに近いカード化 */ .fact-compare-matrix { padding: var(--fact-space-sm); border: 1px solid var(--fact-color-border); border-radius: var(--fact-radius-md); background: var(--fact-color-white); box-shadow: var(--fact-shadow-card); } table.fact-compare-table.fact-compare-table--multi { width: 100%; border-collapse: separate; border-spacing: 0; min-width: 48rem; } table.fact-compare-table.fact-compare-table--multi thead .fact-compare-table__th { position: sticky; top: 0; z-index: 2; padding: var(--fact-space-sm); border-bottom: 1px solid var(--fact-color-border); vertical-align: top; font-weight: 600; color: var(--fact-color-text-strong); background: var(--fact-color-background-blue); } table.fact-compare-table.fact-compare-table--multi thead .fact-compare-table__th--key { z-index: 3; box-shadow: 4px 0 8px -4px rgb(0 0 0 / 12%); } table.fact-compare-table.fact-compare-table--multi tbody .fact-compare-table__th, table.fact-compare-table.fact-compare-table--multi tbody .fact-compare-table__td { padding: var(--fact-space-sm); border-bottom: 1px solid var(--fact-color-border); vertical-align: top; background: var(--fact-color-white); } table.fact-compare-table.fact-compare-table--multi .fact-compare-table__th--key { position: sticky; left: 0; z-index: 1; font-weight: 700; } table.fact-compare-table.fact-compare-table--multi tbody .fact-compare-table__th--key { z-index: 1; box-shadow: 4px 0 8px -4px rgb(0 0 0 / 10%); background: var(--fact-color-light-gray); } table.fact-compare-table.fact-compare-table--multi thead .fact-compare-table__th--key { background: var(--fact-color-background-blue); } /* 列ヘッダ（サムネ・特徴・CTA）：リッチヘッダ用 */ .fact-compare-column-head { display: flex; flex-direction: column; align-items: stretch; gap: var(--fact-space-xs); min-width: 7.5rem; max-width: 12rem; } .fact-compare-column-head__thumb-link { display: block; align-self: center; border-radius: var(--fact-radius-sm); overflow: hidden; line-height: 0; } .fact-compare-column-head__thumb { display: block; width: 100%; max-width: 7.5rem; height: auto; aspect-ratio: var(--fact-aspect-ratio-16-9); object-fit: cover; } .fact-compare-column-head__title { font-size: var(--fact-font-size-sm); font-weight: 700; line-height: 1.35; color: var(--fact-color-text-strong); text-decoration: none; } .fact-compare-column-head__title:is(:hover, :focus-visible, :active) { text-decoration: underline; } .fact-compare-column-head__teaser { margin: 0; font-size: var(--fact-font-size-micro); line-height: 1.45; color: var(--fact-color-black); } .fact-compare-column-head__cta-wrap { margin-block-start: var(--fact-space-2xs); } .fact-compare-column-head__cta { width: 100%; box-sizing: border-box; justify-content: center; min-height: 2.25rem; padding-block: var(--fact-space-2xs); padding-inline: var(--fact-space-xs); font-size: var(--fact-font-size-micro); } .fact-compare-column-head__shortlist { margin-block-start: var(--fact-space-2xs); } .fact-compare-column-head__shortlist .fact-shortlist-toggle { width: 100%; min-height: 2rem; padding-block: var(--fact-space-3xs); padding-inline: var(--fact-space-xs); font-size: var(--fact-font-size-micro); } table.fact-compare-table.fact-compare-table--multi .fact-compare-table__service { display: inline-block; text-decoration: none; } .fact-compare__empty { margin: 0; padding: var(--fact-space-md); border: 1px solid var(--fact-color-border); border-radius: var(--fact-radius-md); background: var(--fact-color-white); } /* ========================================================================== 30. [Template] 一括見積りページ（estimate、estimate/thanks） -------------------------------------------------------------------------- .fact-page-estimate / .fact-estimate-form。ヒーロー・注意・エラー・フィールドセット見出しマスク・thanks・リンクリスト。 フォーム共通（ステッパー・素子・ピル UI は **18〜19 章**）。本章はページシェルと `.fact-estimate-*` の**見積ページ専用差分**。 タグ構造（templates/page-estimate.html / page-estimate-thanks.html）: main.fact-page-estimate.fact-page-shell div.fact-single-with-sidebar.fact-content-wrap div.fact-container-inner.fact-page-main__inner div.fact-single-columns div.fact-single-main div.post-content … ブロックエディタ（.fact-estimate-hero / .fact-estimate-subcopy 等はページ本文側） （ショートコード）[factoring_estimate_form] … 19 章の form 以下 div.fact-single-sidebar template-part sidebar-service （thanks） 同系テンプレート・完了文言・リンクリストは本章ブロック参照 ========================================================================== */ /* ----- ヒーロー ----- */ /* `div.fact-estimate-hero` + `p.fact-estimate-subcopy`（テンプレート） */ .fact-estimate-hero { margin-block-end: var(--fact-space-xl); padding: var(--fact-space-xl) var(--fact-space-lg); border: 1px solid var(--fact-color-border); border-radius: var(--fact-radius-sm); background: var(--fact-color-white); box-shadow: var(--fact-shadow-card); } .fact-page-estimate .fact-estimate-subcopy { margin-block: 0 var(--fact-space-xs); margin-inline: 0; font-size: var(--fact-font-size-body); color: var(--fact-color-black); } .fact-estimate-form-wrap { margin-block-end: var(--fact-space-xl); } /* ----- 注意・エラー表示 ----- */ /* 宛先・安全の説明（左ボーダー）・フォーム直前の注意・エラーリスト（赤枠）。 */ .fact-estimate-notice.fact-estimate-notice--above { margin-block-end: var(--fact-space-lg); padding-block: var(--fact-space-sm); padding-inline: var(--fact-space-lg) var(--fact-space-sm); border: 1px solid var(--fact-color-border); border-radius: var(--fact-radius-sm); border-inline-start: 4px solid var(--fact-color-blue); font-size: var(--fact-font-size-sm); background: color-mix(in srgb, var(--fact-color-blue) 6%, transparent); } .fact-estimate-notice ul { margin: 0; padding-inline-start: var(--fact-space-lg); } .fact-estimate-notice li, .fact-estimate-link-list__group li { margin-block-end: var(--fact-space-2xs); } .fact-estimate-notice li:last-child, .fact-estimate-link-list__group li:last-child { margin-block-end: 0; } .fact-estimate-notice--before-form { margin-block-end: var(--fact-space-lg); padding: var(--fact-space-xs) 0; font-size: var(--fact-font-size-sm); color: var(--fact-color-text-weak); } .fact-estimate-errors { margin-block-end: var(--fact-space-lg); padding: var(--fact-space-sm) var(--fact-space-lg); border: 1px solid var(--fact-color-error); border-radius: var(--fact-radius-sm); border-inline-start: 4px solid var(--fact-color-error); font-size: var(--fact-font-size-sm); background: color-mix(in srgb, var(--fact-color-error) 6%, transparent); } .fact-estimate-errors ul { margin-block: var(--fact-space-xs) 0; margin-inline: 0; padding-inline-start: var(--fact-space-lg); } /* ----- フォームセクション（フィールドセット・カード） ----- */ /* 希望条件・取引先・自社・同意をカード化。legend で見出し・下線。mode 用の青み背景あり。 */ .fact-estimate-form .fact-estimate-fieldset { /* 見積 fieldset の縦間隔 */ margin-block-end: var(--fact-space-lg); } .fact-estimate-form .fact-estimate-fieldset--mode { border-color: color-mix(in srgb, var(--fact-color-blue) 20%, var(--fact-color-border)); background: color-mix(in srgb, var(--fact-color-blue-tint) 40%, var(--fact-color-white)); } .fact-estimate-form .fact-form__section-title { /* 見積フォームは見出しを少し強めに */ font-weight: 700; } .fact-estimate-form .fact-form__section-title--with-mask::before { display: inline-flex; flex-shrink: 0; align-items: center; justify-content: center; width: var(--fact-space-3xl); height: var(--fact-space-3xl); border-radius: 999px; background-color: var(--fact-color-form-accent); content: ""; /* SVG をマスクとして使い「文字アイコン」を廃止 */ -webkit-mask: var(--fact-estimate-legend-mask) no-repeat center / 65%; mask: var(--fact-estimate-legend-mask) no-repeat center / 65%; } /* ここから：見積フォームの見出しアイコン（SVG mask） */ .fact-estimate-form .fact-estimate-fieldset--mode { --fact-estimate-legend-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 7V3H2v18h20V7H12zM6 19H4v-2h2v2zm0-4H4v-2h2v2zm0-4H4V9h2v2zm0-4H4V5h2v2zm4 12H8v-2h2v2zm0-4H8v-2h2v2zm0-4H8V9h2v2zm0-4H8V5h2v2zm10 12h-8v-2h2v-2h-2v-2h2v-2h-2V9h8v10zm-2-8h-2v2h2v-2zm0 4h-2v2h2v-2z'/%3E%3C/svg%3E"); } .fact-estimate-form .fact-estimate-fieldset--wish { --fact-estimate-legend-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19 3H5c-1.1 0-2 .9-2 2v14h2V5h14v14h2V5c0-1.1-.9-2-2-2zm-5 14H7v-2h7v2zm3-4H7v-2h10v2zm0-4H7V7h10v2z'/%3E%3C/svg%3E"); } :is(.fact-estimate-form .fact-estimate-fieldset--counterparty, .fact-estimate-form .fact-estimate-fieldset--company) { --fact-estimate-legend-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z'/%3E%3C/svg%3E"); } .fact-estimate-form .fact-estimate-fieldset--agree { --fact-estimate-legend-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19 3H5c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-9 14l-4-4 1.41-1.41L10 14.17l6.59-6.59L18 9l-8 8z'/%3E%3C/svg%3E"); } /* ここまで：見積フォームの見出しアイコン */ /* ----- 見積ページ専用（19 章のフォーム／モード UI への上書き・補足） ----- */ /* ボックス型ラジオの本体は 18 章。以下は余白・ラベル横並び・フィールド間隔 */ .fact-estimate-mode-callout { margin-block: 0 var(--fact-space-xs); margin-inline: 0; font-size: var(--fact-font-size-sm); color: var(--fact-color-text-weak); } .fact-estimate-mode-radios { margin-block-end: 0; } .fact-estimate-mode-radios label { display: inline-block; margin-inline-end: var(--fact-space-lg); font-weight: 500; } .fact-estimate-form .fact-form__field.fact-estimate-field { margin-block-end: var(--fact-space-sm); } .fact-estimate-form .fact-form__field.fact-estimate-field:last-child { margin-block-end: 0; } .fact-estimate-form .fact-form__field.fact-estimate-field--chips > .fact-estimate-field__input { /* chips の中は見積フォーム固有のレイアウト */ grid-template-columns: 11rem 1fr; } .fact-estimate-form .fact-estimate-date-input { cursor: pointer; } .fact-page-estimate .fact-form__input-row { display: grid; gap: var(--fact-space-xs); grid-template-columns: 1fr 1fr; } .fact-estimate-form .fact-estimate-field:has(input[type="radio"]) > label:first-of-type { display: block; margin-block-end: var(--fact-space-xs); } .fact-estimate-form .fact-estimate-field:has(input[type="radio"]) > label:not(:first-of-type) { display: inline; margin-inline-end: var(--fact-space-lg); font-weight: 400; } .fact-estimate-form .fact-estimate-fieldset--agree label { display: inline-flex; } /* 同意：枠なし・送信ボタン直前で小さく中央寄せ */ .fact-page-estimate .fact-estimate-form .fact-estimate-fieldset--agree { margin-block-end: var(--fact-space-md); padding: 0; border: none; text-align: center; background: transparent; box-shadow: none; } .fact-page-estimate .fact-estimate-form .fact-estimate-fieldset--agree .fact-form__section-title { display: none; } .fact-page-estimate .fact-estimate-form .fact-estimate-fieldset--agree .fact-form__agree-text { font-size: var(--fact-font-size-xs); color: var(--fact-color-text-muted); } /* デスクトップ2カラムグリッドの例外：同意は1カラムで中央寄せ */ @media (min-width: 1024px) { .fact-page-estimate .fact-estimate-form .fact-estimate-fieldset--agree .fact-form__field { display: block; } .fact-page-estimate .fact-estimate-form .fact-estimate-fieldset--agree .fact-form__field > :is(label, .fact-form__label-row) { padding-block-start: 0; } } .fact-page-estimate .fact-estimate-form .fact-estimate-fieldset--agree .fact-form__agree-label { justify-content: center; } .fact-estimate-hint { margin-block: var(--fact-space-2xs) 0; margin-inline: 0; font-size: var(--fact-font-size-xs); color: var(--fact-color-text-weak); } /* 見積フォーム：送信ボタンは口コミフォームの共通コンポーネントを使用 */ .fact-page-estimate .fact-form__actions { margin-block-start: var(--fact-space-lg); padding-block-start: 0; border-top: none; } /* ----- 完了画面（thanks）・リンクリスト ----- */ /* 送信完了メッセージ・リンク。その下に .fact-estimate-link-list（グループ化リンク）。 */ .fact-estimate-thanks__message { margin-block-end: var(--fact-space-lg); font-size: var(--fact-font-size-lg); } .fact-estimate-thanks__links ul { margin: 0; padding: 0; list-style: none; } .fact-estimate-thanks__links li { margin-block-end: var(--fact-space-xs); } .fact-estimate-thanks__links a { font-weight: 500; text-decoration: underline; } .fact-estimate-link-list { margin-block-start: var(--fact-space-3xl); padding-block-start: var(--fact-space-3xl); border-top: 2px solid var(--fact-color-border); } .fact-estimate-link-list__heading { margin-block: 0 var(--fact-space-lg); margin-inline: 0; padding-block-end: var(--fact-space-xs); border-bottom: 2px solid var(--fact-color-border); font-size: var(--fact-font-size-xl); font-weight: 700; } .fact-estimate-link-list__inner { display: grid; gap: var(--fact-space-lg); } .fact-estimate-link-list__group { padding: var(--fact-space-sm) var(--fact-space-lg); border: 1px solid var(--fact-color-border); border-radius: var(--fact-radius-sm); background: var(--fact-color-white); box-shadow: var(--fact-shadow-subtle); } .fact-estimate-link-list__group h3 { margin-block: 0 var(--fact-space-sm); margin-inline: 0; font-size: var(--fact-font-size-body); font-weight: 700; color: var(--fact-color-black); } .fact-estimate-link-list__group ul { margin: 0; padding-inline-start: var(--fact-space-lg); } .fact-estimate-link-list__group a { color: var(--fact-color-blue); text-decoration: none; } .fact-estimate-link-list__group a:is(:hover, :focus-visible, :active) { text-decoration: underline; } .fact-estimate-form .fact-estimate-fieldset--agree a { color: var(--fact-color-blue); text-decoration: underline; } .fact-estimate-form-wrap .flatpickr-calendar { border-radius: var(--fact-radius-sm); box-shadow: var(--fact-shadow-modal); } .fact-estimate-form-wrap .flatpickr-day.selected, .fact-estimate-form-wrap .flatpickr-day.startRange, .fact-estimate-form-wrap .flatpickr-day.endRange { border-color: var(--fact-color-blue); background: var(--fact-color-blue); } .fact-estimate-form-wrap .flatpickr-day:is(:hover, :focus-visible, :active) { border-color: var(--fact-color-blue); background: var(--fact-color-blue-tint); } /* ========================================================================== 31. [Template] 固定ページ（フロントページ） -------------------------------------------------------------------------- 固定ページ「フロントページ」用（.fact-front-page）。メイン余白は 16 章（[Block] 本文）で定義。本章は見出しのみ。 タグ構造（templates/front-page.html）: main.fact-page-front.fact-page-shell （ショートコード）[factoring_page_hero] div.post-content … patterns/front/*.html の .fact-front-section 群（7・13 章） ========================================================================== */ /* ========================================================================== 32. [Template] 固定ページ（問い合わせページ） -------------------------------------------------------------------------- 問い合わせページ用テンプレート（page-contact）。パンくず・タイトル中央・本文をカード風に。 タグ構造（templates/page-contact.html）: main.fact-page-contact.fact-page-shell div.fact-single-with-sidebar.fact-content-wrap div.fact-container-inner.fact-page-main__inner div.fact-single-columns div.fact-single-main div.post-content.fact-page-contact__content.fact-page-contact__form-scope.fact-service-content （フォームブロック） … CF7 等はサイト依存 div.fact-single-sidebar template-part sidebar-service ========================================================================== */ /* ----- 問い合わせページ：パンくず・本文カード ----- */ /* パンくず下余白。本文を最大幅 36rem のカード風（枠・シャドウ）で中央配置。 */ .fact-page-contact .fact-breadcrumb { margin-block-end: var(--fact-space-sm); } .fact-page-contact :where(.fact-page-contact__content, .wp-block-post-content) { max-width: 36rem; margin-inline: auto; padding: var(--fact-space-3xl) var(--fact-space-xl); border: 1px solid var(--fact-color-border); border-radius: var(--fact-radius-sm); background: var(--fact-color-white); box-shadow: var(--fact-shadow-subtle); } .fact-page-contact :where(.fact-page-contact__content, .wp-block-post-content) > *:first-child { margin-block-start: 0; } .fact-page-contact :where(.fact-page-contact__content, .wp-block-post-content) > *:last-child { margin-block-end: 0; } /* ========================================================================== 33. [Template] 固定ページ（法務系ページ） -------------------------------------------------------------------------- .fact-page-legal。パンくず・サブタイトル・タイトルを中央寄せで統一。 タグ構造（body.fact-page-legal・スラッグは factoring_legal_page_slugs()）: body.fact-page-legal main （ショートコード）[factoring_page_hero] … 内に nav.fact-breadcrumb （ショートコード）[factoring_page_subtitle] … 固定ページメタ h1.wp-block-post-title … 中央寄せスタイルは本章 ========================================================================== */ /* ----- 法務系：パンくず・サブタイトル・タイトル ----- */ /* パンくず・サブタイトル（弱め色・中央）・タイトル（clamp・700・中央）。プライバシー等。 */ .fact-page-legal .fact-breadcrumb { margin-block-end: var(--fact-space-sm); } .fact-page-legal :is(.fact-page-subtitle, .wp-block-post-title) { text-align: center; } .fact-page-legal .fact-page-subtitle { margin-block-end: var(--fact-space-2xs); font-size: var(--fact-font-size-sm); color: var(--fact-color-text-weak); } .fact-page-legal .wp-block-post-title { margin-block: 0 var(--fact-space-xl); margin-inline: 0; font-size: clamp(var(--fact-font-size-xl), 4vw, var(--fact-font-size-3xl)); font-weight: 700; color: var(--fact-color-text-strong); } /* ========================================================================== 34. [Cross-app] 検討リスト（localStorage・スティッキーバー・見積ページ一覧） タグ構造（バーは assets/ts/factoring-shortlist.ts が生成・トグルは inc/shortlist/factoring-shortlist.php）: div#fact-shortlist-bar.fact-shortlist-bar div.fact-shortlist-bar__inner div.fact-shortlist-bar__logos span.fact-shortlist-bar__logo-item > img ※件数に応じて p.fact-shortlist-bar__count > strong div.fact-shortlist-bar__actions nav.fact-shortlist-bar__links > a.fact-shortlist-bar__link（比較2本） a.fact-shortlist-bar__cta.fact-ui-btn--press-blue button.fact-shortlist-toggle span.fact-shortlist-toggle__icon（svg）+ ラベル（data-shortlist-*） （見積フォーム） div#fact-shortlist-estimate + input[name="shortlist_service_ids"] ※hidden ========================================================================== */ body.fact-has-shortlist-bar { padding-block-end: 6.25rem; } /* 783px 以上：タブレット横〜（ヘッダー等のブレークポイントと整合） */ @media (min-width: 783px) { body.fact-has-shortlist-bar { padding-block-end: 4.75rem; } } .fact-shortlist-bar { position: fixed; inset-block-end: 0; inset-inline: 0; z-index: var(--fact-z-index-shortlist-bar); padding: var(--fact-space-sm) var(--fact-space-sm); border-top: 1px solid var(--fact-color-border); background: var(--fact-color-white); box-shadow: var(--fact-shadow-shortlist-bar); } .fact-shortlist-bar__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--fact-space-xs); max-width: var(--fact-layout-content-max); margin-block: 0; margin-inline: auto; } .fact-shortlist-bar__logos { display: flex; align-items: center; gap: var(--fact-space-2xs); } .fact-shortlist-bar__logo-item { display: inline-flex; width: 3.5rem; height: 2rem; border: 1px solid var(--fact-color-border); border-radius: var(--fact-radius-sm); overflow: hidden; background: var(--fact-color-white); } .fact-shortlist-bar__logo-item img { display: block; width: 100%; height: 100%; object-fit: contain; } .fact-shortlist-bar__logo-item--placeholder { background: linear-gradient( 135deg, var(--fact-color-border) 0%, var(--fact-color-light-gray) 100% ); } .fact-shortlist-bar__count { margin: 0; font-size: var(--fact-font-size-sm); color: var(--fact-color-black); } .fact-shortlist-bar__count strong { font-size: var(--fact-font-size-body); color: var(--fact-color-text-strong); } .fact-shortlist-bar__actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--fact-space-sm); flex: 1 1 auto; min-width: min(100%, 14rem); } .fact-shortlist-bar__links { display: flex; flex-wrap: wrap; align-items: center; gap: var(--fact-space-sm); margin: 0; } .fact-shortlist-bar__link { font-size: var(--fact-font-size-sm); font-weight: 600; color: var(--fact-color-text-strong); text-decoration: underline; text-underline-offset: 0.15em; white-space: nowrap; } .fact-shortlist-bar__link:hover { text-decoration-thickness: 2px; } .fact-shortlist-bar__cta { display: inline-flex; flex-shrink: 0; align-items: center; justify-content: center; min-height: var(--fact-space-5xl); padding: var(--fact-space-xs) var(--fact-space-md); border-radius: var(--fact-radius-full); font-size: var(--fact-font-size-sm); font-weight: 700; line-height: 1.2; text-decoration: none; } /* ホバーは .fact-service-detail__action と同じ（opacity + translateY）。アイコンはヘッダー一括見積と同一 SVG（左・やや大きめ） */ .fact-shortlist-toggle { position: relative; gap: 0.35em; overflow: hidden; transition: opacity var(--fact-transition-fast), background-color 0.2s ease, transform var(--fact-transition-fast); cursor: pointer; } .fact-shortlist-toggle__icon { display: inline-flex; flex-shrink: 0; align-items: center; justify-content: center; /* 従来 ::after の 1em より一回り大きく（ヘッダー .fact-header__rail-icon は 24px 相当） */ width: 1.25em; height: 1.25em; } .fact-shortlist-toggle__icon svg { display: block; width: 100%; height: auto; } /* 一部の出力経路で SVG が空になる場合のフォールバック（ランキング等）。 */ .fact-shortlist-toggle__icon { --fact-shortlist-icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M6.75 3.75h7.5l4.5 4.5v12a1.5 1.5 0 0 1-1.5 1.5h-10.5a1.5 1.5 0 0 1-1.5-1.5v-15a1.5 1.5 0 0 1 1.5-1.5Zm7.5 0v4.5h4.5'/%3E%3Cpath fill='none'/%3E%3Cpath fill='%23000' d='M8.25 12h7.5M8.25 15.75h7.5'/%3E%3C/svg%3E"); background-color: currentColor; -webkit-mask: var(--fact-shortlist-icon-mask) no-repeat center / contain; mask: var(--fact-shortlist-icon-mask) no-repeat center / contain; } .fact-shortlist-toggle__icon svg { background: transparent; } .fact-shortlist-toggle.is-in-shortlist { color: var(--fact-color-black); background: var(--fact-color-border-button); } .fact-shortlist-estimate { margin-block-end: var(--fact-space-lg); padding: var(--fact-space-sm); border: 1px solid var(--fact-color-border); border-radius: var(--fact-radius-md); background: var(--fact-color-light-gray); } .fact-shortlist-estimate--empty .fact-shortlist-estimate__empty { margin: 0; font-size: var(--fact-font-size-sm); color: var(--fact-color-text-weak); } .fact-shortlist-estimate__title { margin-block: 0 var(--fact-space-sm); margin-inline: 0; font-size: var(--fact-font-size-lg); font-weight: 700; color: var(--fact-color-text-strong); } .fact-shortlist-estimate__list { margin: 0; padding: 0; list-style: none; } .fact-shortlist-estimate__item { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: var(--fact-space-xs); padding: var(--fact-space-xs) 0; border-bottom: 1px solid var(--fact-color-border); } .fact-shortlist-estimate__rank { display: inline-flex; flex-shrink: 0; align-items: center; justify-content: center; width: var(--fact-space-2xl); height: var(--fact-space-2xl); border-radius: var(--fact-radius-sm); font-size: var(--fact-font-size-sm); font-weight: 700; line-height: 1; color: var(--fact-color-text-weak); background: var(--fact-color-bg-sub); } .fact-shortlist-estimate__item:last-child { border-bottom: none; padding-block-end: 0; } .fact-shortlist-estimate__thumb { flex-shrink: 0; width: 5rem; border-radius: var(--fact-radius-sm); overflow: hidden; } .fact-shortlist-estimate__thumb img { display: block; width: 100%; height: auto; } .fact-shortlist-estimate__thumb--placeholder { display: block; width: 5rem; height: 2.8125rem; border: 1px solid var(--fact-color-border); border-radius: var(--fact-radius-sm); background: linear-gradient( 135deg, var(--fact-color-border) 0%, var(--fact-color-light-gray) 100% ); } .fact-shortlist-estimate__name { flex: 1 1 12rem; font-weight: 600; color: var(--fact-color-text-strong); text-decoration: none; transition: color var(--fact-transition-fast), transform var(--fact-transition-fast); } .fact-shortlist-estimate__name:is(:hover, :focus-visible, :active) { color: var(--fact-color-blue); transform: translateX(2px); } .fact-shortlist-estimate__badges { display: inline-flex; flex-wrap: wrap; gap: var(--fact-space-3xs); } .fact-shortlist-estimate__badges .fact-service-detail__badge { padding: var(--fact-space-3xs) var(--fact-space-2xs); font-size: var(--fact-font-size-micro); } .fact-shortlist-estimate__cta { flex-shrink: 0; margin-inline-start: auto; padding: var(--fact-space-2xs) var(--fact-space-sm); font-size: var(--fact-font-size-xs); line-height: 1.2; text-decoration: none; } .fact-shortlist-estimate__desc { flex: 1 1 100%; margin-inline-start: calc(5rem + var(--fact-space-xs) + var(--fact-space-2xl) + var(--fact-space-xs)); font-size: var(--fact-font-size-xs); font-weight: 500; line-height: 1.4; color: var(--fact-color-text-muted); } .fact-shortlist-estimate__remove { position: absolute; inset-block-start: 0.25rem; inset-inline-end: 0; display: inline-flex; align-items: center; justify-content: center; width: var(--fact-space-2xl); height: var(--fact-space-2xl); border: 1px solid var(--fact-color-border); border-radius: 999px; padding: 0; color: var(--fact-color-text-weak); line-height: 1; background: var(--fact-color-white); transition: color var(--fact-transition-fast), background-color var(--fact-transition-fast), transform var(--fact-transition-fast); cursor: pointer; } .fact-shortlist-estimate__remove:is(:hover, :focus-visible, :active) { color: var(--fact-color-black); background: var(--fact-color-light-gray); transform: translateY(-1px); }