/* ============ デザインシステム（Fileforce®公式サイト準拠） ============ */ :root { /* ブランドカラー: fileforce.jp公式SVG から抽出 */ --color-primary: #22A7CB; /* 公式ターコイズブルー（メイン） */ --color-primary-dark: #1A8AAB; /* 濃色（ホバー時等） */ --color-primary-light: #E0F4FA; /* 淡色（背景・ハイライト） */ --color-primary-bright: #1CB2D9; /* 公式アクセントブルー */ --color-brand-dark: #334047; /* 公式ダークグレー（"file"部分） */ --color-accent: #FF7A00; /* CTAアクセント */ --color-text: #334047; /* 公式ダークグレーをテキストに採用 */ --color-text-muted: #6B7280; --color-bg: #FFFFFF; --color-bg-alt: #F7F9FC; --color-border: #E5E7EB; --color-success: #10B981; --color-warning: #F59E0B; --color-danger: #EF4444; --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px; --shadow-sm: 0 1px 2px rgba(0,0,0,0.04); --shadow-md: 0 4px 12px rgba(0,0,0,0.08); --shadow-lg: 0 8px 24px rgba(0,0,0,0.12); --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans JP", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif; } /* リセット */ * { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { font-family: var(--font-sans); color: var(--color-text); background: var(--color-bg); line-height: 1.7; -webkit-font-smoothing: antialiased; } a { color: var(--color-primary); text-decoration: none; } a:hover { text-decoration: underline; } button { font-family: inherit; cursor: pointer; border: none; background: none; } img { max-width: 100%; height: auto; display: block; } .container { max-width: 1180px; margin: 0 auto; padding: 0 24px; } /* ============ ヘッダー ============ */ .header { position: sticky; top: 0; z-index: 100; background: rgba(255,255,255,0.95); border-bottom: 1px solid var(--color-border); backdrop-filter: blur(8px); } .header-inner { display: flex; align-items: center; gap: 32px; padding: 16px 24px; max-width: 1180px; margin: 0 auto; } .logo { display: flex; align-items: center; gap: 14px; font-weight: 700; font-size: 18px; color: var(--color-text); } .logo:hover { text-decoration: none; } /* 公式 fileforce.jp のヘッダーロゴ高さ（36px）に準拠 */ .logo-img { height: 48px; width: auto; display: block; } .logo-suffix { font-size: 13px; font-weight: 500; color: var(--color-text-muted); border-left: 1px solid var(--color-border); padding-left: 14px; letter-spacing: 0.5px; } /* フッター: 提供カラーロゴ FFlogo_basic.png をそのまま表示（改変なし） */ .footer-logo-link { display: inline-block; line-height: 0; } .footer-logo-link:hover { text-decoration: none; opacity: 0.85; } .footer-logo-img { height: 56px; width: auto; } /* 旧 logo-mark (フォールバック) */ .logo-mark { width: 32px; height: 32px; background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark)); border-radius: 8px; display: flex; align-items: center; justify-content: center; color: white; font-weight: 800; } .header-search { flex: 1; position: relative; max-width: 480px; } .header-search input { width: 100%; padding: 10px 16px 10px 40px; border: 1px solid var(--color-border); border-radius: var(--radius-md); font-size: 14px; background: var(--color-bg-alt); transition: all 0.2s; } .header-search input:focus { outline: none; border-color: var(--color-primary); background: white; box-shadow: 0 0 0 3px var(--color-primary-light); } .header-search::before { content: ""; position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; background-image: url("data:image/svg+xml;utf8,"); } .header-nav { display: flex; gap: 20px; align-items: center; } .header-nav a { color: var(--color-text); font-size: 14px; font-weight: 500; } .header-nav .btn-primary { background: var(--color-primary); color: white; padding: 8px 16px; border-radius: var(--radius-md); font-size: 14px; font-weight: 600; } .header-nav .btn-primary:hover { background: var(--color-primary-dark); text-decoration: none; } /* ============ ヒーロー ============ */ .hero { background: linear-gradient(180deg, var(--color-primary-light) 0%, var(--color-bg) 100%); padding: 80px 24px 60px; text-align: center; } .hero h1 { font-size: 36px; font-weight: 700; margin-bottom: 12px; } .hero p { font-size: 16px; color: var(--color-text-muted); margin-bottom: 32px; } .hero-search { max-width: 720px; margin: 0 auto; position: relative; } .hero-search input { width: 100%; padding: 18px 24px 18px 56px; font-size: 16px; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: white; box-shadow: var(--shadow-md); transition: all 0.2s; } .hero-search input:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 4px var(--color-primary-light), var(--shadow-md); } .hero-search::before { content: ""; position: absolute; left: 20px; top: 50%; transform: translateY(-50%); width: 22px; height: 22px; background-image: url("data:image/svg+xml;utf8,"); } .hero-suggestions { margin-top: 20px; display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; font-size: 13px; } .hero-suggestions span { color: var(--color-text-muted); } .hero-suggestions a { padding: 4px 12px; background: white; border: 1px solid var(--color-border); border-radius: 100px; color: var(--color-text); font-size: 13px; transition: all 0.2s; } .hero-suggestions a:hover { background: var(--color-primary-light); border-color: var(--color-primary); color: var(--color-primary); text-decoration: none; } .role-tabs { display: flex; justify-content: center; gap: 0; margin: 48px 0 0; border-bottom: 1px solid var(--color-border); } .role-tabs button { padding: 12px 32px; font-size: 15px; font-weight: 600; color: var(--color-text-muted); border-bottom: 2px solid transparent; margin-bottom: -1px; transition: all 0.2s; } .role-tabs button.active { color: var(--color-primary); border-bottom-color: var(--color-primary); } .role-tabs button:hover:not(.active) { color: var(--color-text); } /* ============ セクション共通 ============ */ .section { padding: 64px 0; } .section-title { font-size: 22px; font-weight: 700; margin-bottom: 24px; display: flex; align-items: center; gap: 12px; } .section-title > a { font-size: 13px; font-weight: 500; } .section-title-bar { width: 4px; height: 24px; background: var(--color-primary); border-radius: 2px; } /* ============ FAQカード ============ */ .faq-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; } .faq-card { background: white; border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 20px; transition: all 0.2s; cursor: pointer; display: flex; flex-direction: column; gap: 12px; text-decoration: none; color: inherit; } .faq-card:hover { border-color: var(--color-primary); box-shadow: var(--shadow-md); transform: translateY(-2px); text-decoration: none; } .faq-card-icon { width: 36px; height: 36px; background: var(--color-primary-light); color: var(--color-primary); border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 18px; } .faq-card h3 { font-size: 15px; font-weight: 600; line-height: 1.5; } .faq-card p { font-size: 13px; color: var(--color-text-muted); line-height: 1.5; } /* ============ カテゴリグリッド ============ */ .category-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 24px; } .category-card { background: white; border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 28px; transition: all 0.2s; text-decoration: none; color: inherit; display: block; } .category-card:hover { border-color: var(--color-primary); box-shadow: var(--shadow-lg); text-decoration: none; transform: translateY(-2px); } .category-icon { width: 56px; height: 56px; border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; font-size: 28px; margin-bottom: 16px; } .category-card h3 { font-size: 18px; font-weight: 700; margin-bottom: 8px; } .category-card p { font-size: 14px; color: var(--color-text-muted); margin-bottom: 16px; line-height: 1.6; } .category-meta { font-size: 12px; color: var(--color-text-muted); display: flex; gap: 12px; } .category-meta span::before { content: ""; display: inline-block; width: 4px; height: 4px; border-radius: 50%; background: var(--color-text-muted); margin-right: 8px; vertical-align: middle; } /* カテゴリ別の色（公式ブランドカラー準拠） */ .cat-user .category-icon { background: #E0F4FA; color: #22A7CB; } /* 公式シアン */ .cat-admin .category-icon { background: #F3E8FF; color: #7C3AED; } /* 管理者向け＝パープル（赤紫寄り） */ .cat-trial .category-icon { background: #E8F8EE; color: #10B981; } /* 新規＝グリーン */ .cat-notice .category-icon { background: #EEF2FF; color: #4F46E5; } /* お知らせ＝インディゴ */ .cat-troubleshoot .category-icon { background: #FFF1E0; color: #FF7A00; } /* トラブルシュート＝オレンジ */ .cat-learning .category-icon { background: #CCFBF1; color: #0D9488; } /* 学習リソース＝ティール */ .cat-release .category-icon { background: #F3E8FF; color: #9333EA; } /* リリース＝パープル */ .cat-help .category-icon { background: #F3F4F6; color: #6B7280; } /* ヘルプ＝グレー */ /* ============ お知らせ ============ */ .notice-section { background: var(--color-bg-alt); } .notice-list { display: flex; flex-direction: column; background: white; border-radius: var(--radius-md); border: 1px solid var(--color-border); overflow: hidden; } .notice-item { display: flex; gap: 16px; padding: 20px 24px; border-bottom: 1px solid var(--color-border); align-items: center; text-decoration: none; color: inherit; transition: background 0.15s; } .notice-item:last-child { border-bottom: none; } .notice-item:hover { background: var(--color-bg-alt); text-decoration: none; } .notice-date { font-size: 13px; color: var(--color-text-muted); min-width: 90px; } .notice-tag { display: inline-block; padding: 2px 10px; font-size: 11px; font-weight: 600; border-radius: 4px; min-width: 70px; text-align: center; } .notice-tag.important { background: #FEE2E2; color: #DC2626; } .notice-tag.update { background: #E0F4FA; color: #1A8AAB; } /* 公式シアン濃 */ .notice-tag.notice { background: #F3F4F6; color: #4B5563; } .notice-tag.user { background: #E0F4FA; color: #22A7CB; } /* 公式シアン */ .notice-tag.admin { background: #E8ECEF; color: #334047; } /* 公式ダーク */ .notice-tag.trial { background: #E8F8EE; color: #10B981; } .notice-tag.troubleshoot { background: #FFF1E0; color: #FF7A00; } /* トラブルシュート＝オレンジ */ .notice-tag.help { background: #F3F4F6; color: #6B7280; } .notice-tag.release { background: #F3E8FF; color: #9333EA; } /* カテゴリ統一バッジ色（記事ページ・検索・新着で共通の cat-* クラス） */ .notice-tag.cat-user { background: #E0F4FA; color: #22A7CB; } .notice-tag.cat-admin { background: #F3E8FF; color: #7C3AED; } /* 管理者向け＝パープル（赤紫寄り） */ .notice-tag.cat-trial { background: #E8F8EE; color: #10B981; } .notice-tag.cat-notice { background: #EEF2FF; color: #4F46E5; } /* お知らせ＝インディゴ（情報色） */ .notice-tag.cat-troubleshoot { background: #FFF1E0; color: #FF7A00; } .notice-tag.cat-learning { background: #CCFBF1; color: #0D9488; } .notice-tag.cat-help { background: #F3F4F6; color: #6B7280; } .notice-tag.cat-release { background: #F3E8FF; color: #9333EA; } .notice-title { font-size: 14px; font-weight: 500; flex: 1; } /* ============ サポート ============ */ .support-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .support-grid.support-grid-2col { grid-template-columns: repeat(2, 1fr); max-width: 760px; margin: 0 auto; } .support-card { background: white; border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 32px; text-align: center; transition: all 0.2s; } .support-card:hover { border-color: var(--color-primary); box-shadow: var(--shadow-md); } .support-icon { width: 48px; height: 48px; margin: 0 auto 16px; background: var(--color-primary-light); color: var(--color-primary); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 22px; } .support-card h3 { font-size: 17px; font-weight: 700; margin-bottom: 8px; } .support-card p { font-size: 13px; color: var(--color-text-muted); line-height: 1.6; margin-bottom: 16px; } .support-card a { color: var(--color-primary); font-size: 14px; font-weight: 600; } /* ============ フッター（提供カラーロゴをそのまま使うため明色背景に） ============ */ .footer { background: var(--color-bg-alt); color: var(--color-text); padding: 48px 0 24px; margin-top: 80px; border-top: 1px solid var(--color-border); } .footer-cols { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 40px; margin-bottom: 32px; padding: 0 24px; max-width: 1180px; margin: 0 auto 32px; align-items: center; } .footer-brand { display: flex; flex-direction: column; gap: 12px; } .footer-brand p { font-size: 13px; color: var(--color-text-muted); line-height: 1.6; max-width: 300px; } .footer h4 { color: var(--color-text); font-size: 13px; font-weight: 600; margin-bottom: 12px; text-transform: uppercase; letter-spacing: 0.5px; } .footer ul { list-style: none; } .footer li { padding: 4px 0; } .footer a { color: var(--color-text-muted); font-size: 14px; } .footer a:hover { color: var(--color-primary); } .footer-bottom { border-top: 1px solid var(--color-border); padding-top: 24px; font-size: 12px; color: var(--color-text-muted); text-align: center; } /* ============ 記事ページ ============ */ .article-page { padding: 32px 0 80px; } .breadcrumb { display: flex; gap: 8px; align-items: center; margin-bottom: 24px; font-size: 13px; color: var(--color-text-muted); flex-wrap: wrap; } .breadcrumb a { color: var(--color-text-muted); } .breadcrumb a:hover { color: var(--color-primary); } .breadcrumb .sep::before { content: "›"; margin: 0 4px; } .article-layout { display: grid; grid-template-columns: 1fr 240px; gap: 48px; align-items: start; } .article-main h1 { font-size: 28px; font-weight: 700; margin-bottom: 16px; line-height: 1.4; } .article-meta { display: flex; gap: 20px; flex-wrap: wrap; align-items: center; padding: 16px 0; border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); margin-bottom: 32px; font-size: 13px; color: var(--color-text-muted); } .article-meta .role-badge { background: var(--color-primary-light); color: var(--color-primary); padding: 2px 10px; border-radius: 4px; font-weight: 600; font-size: 12px; } /* カテゴリ別の色分け（記事ページの役割バッジ） */ .article-meta .role-badge.cat-user { background: #E0F4FA; color: #22A7CB; } .article-meta .role-badge.cat-admin { background: #F3E8FF; color: #7C3AED; } /* 管理者向け＝パープル（赤紫寄り） */ .article-meta .role-badge.cat-trial { background: #E8F8EE; color: #10B981; } .article-meta .role-badge.cat-notice { background: #EEF2FF; color: #4F46E5; } /* お知らせ＝インディゴ */ .article-meta .role-badge.cat-troubleshoot { background: #FFF1E0; color: #FF7A00; } .article-meta .role-badge.cat-learning { background: #CCFBF1; color: #0D9488; } .article-meta .role-badge.cat-help { background: #F3F4F6; color: #6B7280; } .article-body { font-size: 15px; line-height: 1.85; word-wrap: break-word; overflow-wrap: break-word; min-width: 0; } .article-body h2 { font-size: 22px; font-weight: 700; margin: 40px 0 16px; padding-bottom: 8px; border-bottom: 2px solid var(--color-primary-light); } .article-body h3 { font-size: 18px; font-weight: 700; margin: 28px 0 12px; } .article-body h4 { font-size: 16px; font-weight: 700; margin: 20px 0 10px; } .article-body p { margin: 12px 0; } /* 末尾に極端に短い行（孤立した1〜数文字）が残りにくいよう、折り返しを最適化。 auto-phrase は日本語を文節（意味の区切り）単位で改行する（対応ブラウザのみ） */ .article-body p, .article-body li { text-wrap: pretty; word-break: auto-phrase; } .article-body ul, .article-body ol { margin: 12px 0 12px 24px; padding-left: 0; } .article-body li { margin: 4px 0; } /* 画像オーバーフロー対策 */ .article-body img { margin: 16px 0; max-width: 100%; height: auto; border-radius: var(--radius-sm); border: 1px solid var(--color-border); } .article-body a img { border-color: var(--color-border); } /* 見出し・強調（strong）内に差し込まれた小さな画像（UIボタンのスクショ等）は独立行にせず、文章と同じ行にインラインで並べる */ .article-body h1 img, .article-body h2 img, .article-body h3 img, .article-body h4 img, .article-body h5 img, .article-body h6 img, .article-body strong img { display: inline-block; vertical-align: middle; margin: 0 6px; border: 0; border-radius: var(--radius-sm); } /* Zendeskエディタの標準クラス（CSS差し替え時に抜けていたため補完）本文中の配置・下線・フォントサイズ指定を有効にする */ .article-body .wysiwyg-text-align-center { text-align: center; } .article-body .wysiwyg-text-align-right { text-align: right; } .article-body .wysiwyg-text-align-left { text-align: left; } .article-body .wysiwyg-text-align-justify { text-align: justify; } .article-body .wysiwyg-underline { text-decoration: underline; } .article-body .wysiwyg-font-size-x-small { font-size: 0.7em; } .article-body .wysiwyg-font-size-small { font-size: 0.85em; } .article-body .wysiwyg-font-size-large { font-size: 1.286em; } .article-body .wysiwyg-font-size-x-large { font-size: 1.571em; } .article-body .wysiwyg-font-size-huge { font-size: 1.857em; } /* 表セル内の画像（アイコン等）はセルの配置指定（text-align）に従い中央/縦中央に揃える（共通の img{display:block} だと text-align:center が効かず左寄せになるため） */ .article-body td, .article-body th { vertical-align: middle; } .article-body td img, .article-body th img { display: inline-block; vertical-align: middle; margin: 4px 0; } /* 表のオーバーフロー対策 */ .article-body table { border-collapse: collapse; margin: 16px 0; max-width: 100%; display: block; overflow-x: auto; /* 記事のインライン固定高さ(例: height:130px)を無効化。 overflow-x:auto により overflow-y も auto となり、固定高さだと表が縦スクロールで切れて内容が欠落して見えるため、高さは内容に合わせて自動伸長させる */ height: auto !important; } .article-body table td, .article-body table th { padding: 8px 12px; border: 1px solid var(--color-border); vertical-align: top; word-break: break-word; } /* figureの表は通常のtableスタイルを優先 */ .article-body figure.wysiwyg-table { display: block; overflow-x: auto; max-width: 100%; } .article-body figure.wysiwyg-table table { display: table; width: auto; } /* Zendesk WYSIWYG が figure にインラインで付ける固定高さ(例 height:39px)を無効化。 overflow と相まって画像・表が縦に切れて見えなくなる（縦スクロール化）のを防ぐ */ .article-body figure { height: auto !important; } .article-body hr { margin: 32px 0; border: none; border-top: 1px solid var(--color-border); } /* 埋め込み動画（YouTube等のiframe）：本文幅に収め16:9で表示 */ .article-body iframe { max-width: 100%; width: 100%; aspect-ratio: 16 / 9; height: auto; border: 0; border-radius: var(--radius-sm); margin: 16px 0; display: block; } /* 動画サムネイル（file://対応・クリックでYouTubeを開く） */ .article-body .video-embed { position: relative; display: block; width: 100%; max-width: 640px; aspect-ratio: 16 / 9; margin: 16px 0; border-radius: var(--radius-sm); overflow: hidden; background: #000; } .article-body .video-embed img { width: 100%; height: 100%; object-fit: cover; display: block; border: 0; } .article-body .video-embed .video-play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 68px; height: 48px; background: rgba(0, 0, 0, 0.75); color: #fff; border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 26px; padding-left: 4px; transition: background 0.15s; } .article-body .video-embed:hover .video-play { background: #FF0000; } /* 長いURL / コード / pre のオーバーフロー対策 */ .article-body pre, .article-body code { background: var(--color-bg-alt); padding: 2px 6px; border-radius: 4px; font-family: ui-monospace, "Cascadia Mono", Menlo, Consolas, monospace; font-size: 0.9em; } .article-body pre { padding: 12px 16px; overflow-x: auto; white-space: pre-wrap; word-wrap: break-word; } .article-body a { word-break: break-all; } /* 古い記事に残る垂直余白の異常を抑制 */ .article-body p:empty { display: none; } /* 注意: 以前ここにあった `p > br:only-child { display:none }` は削除。 :only-child はテキストノードを兄弟に数えないため、

文1。
文2。

の意味のある改行まで消してしまっていた。空段落は build 側の clean_whitespace で除去済み。 */ .article-body p { min-height: 0; } /* spanで指定された絶対サイズフォントが大きすぎる場合の制限 */ .article-body span[style*="font-size"] { font-size: inherit !important; } /* 行間がdivで強制されている古いHTMLを正常化 */ .article-body div[style*="line-height"] { line-height: inherit !important; } .article-body span[style*="line-height"] { line-height: inherit !important; } /* 過度なcolorは継承（黒系は無効化、ブランド色はそのまま見せたいので赤系・青系の警告色は許可） */ /* ※ここは控えめにし、明らかな崩れだけ抑制 */ /* ============ カラウト（マーカー変換結果） ============ */ .callout { border-left: 4px solid; border-radius: var(--radius-sm); padding: 16px 20px; margin: 20px 0; background: var(--color-bg-alt); } .callout-title { font-weight: 700; margin-bottom: 6px; display: flex; align-items: center; gap: 8px; } .callout.tips { border-color: var(--color-primary); background: var(--color-primary-light); } .callout.notice { border-color: var(--color-warning); background: #FFFBEB; } .callout.warning { border-color: var(--color-danger); background: #FEF2F2; } .callout.info-box { border-color: var(--color-success); background: #F0FDF4; } /* 旧「##」マーカーの置換：本文内の目次見出しバナー */ .article-body .toc-heading { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 15px; color: #4B5563; background: #F3F4F6; border-left: 4px solid #9CA3AF; border-radius: var(--radius-sm); padding: 10px 16px; margin: 24px 0 12px; } /* 本文中の添付ファイルDLリンク */ .article-body a.att-link { color: var(--color-primary); font-weight: 600; } .article-body a.att-link::before { content: "📄 "; } .article-body a.att-link:hover { text-decoration: underline; } /* 管理者のみ表示（🔒）バッジ */ .article-list-item .lock-badge { margin-right: 4px; font-size: 13px; } .article-meta .role-badge.lock-badge-meta { background: #FEF3C7; color: #B45309; } /* コピー枠（[[copy]]…[[/copy]]） */ .article-body .copy-block { display: flex; align-items: flex-start; gap: 12px; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-bg-alt); padding: 12px 14px; margin: 20px 0; } .article-body .copy-block .copy-btn { order: 2; flex-shrink: 0; display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--color-primary); background: #fff; border: 1px solid var(--color-primary); border-radius: 999px; padding: 5px 12px; cursor: pointer; transition: all .15s; } .article-body .copy-block .copy-btn:hover { background: var(--color-primary-light); } .article-body .copy-block .copy-btn.copied { color: #fff; background: var(--color-success); border-color: var(--color-success); } .article-body .copy-block .copy-content { order: 1; flex: 1; min-width: 0; font-family: Consolas, Menlo, "Courier New", monospace; font-size: 13px; line-height: 1.55; white-space: pre-wrap; word-break: break-word; align-self: center; } .article-body .copy-block .copy-content p { margin: 0; } /* ============ 目次 ============ */ .toc { position: sticky; top: 100px; background: var(--color-bg-alt); border-radius: var(--radius-md); padding: 20px; font-size: 13px; } .toc h4 { font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--color-text-muted); margin-bottom: 12px; } .toc ul { list-style: none; } .toc li { padding: 6px 0; } .toc a { color: var(--color-text); } .toc a:hover { color: var(--color-primary); } .toc .indent { padding-left: 16px; font-size: 12px; color: var(--color-text-muted); } /* ============ 添付ファイル ============ */ .attachments-section { margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--color-border); } .attachments-list { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; } .attachment-item { display: flex; align-items: center; gap: 16px; background: white; border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 14px 18px; text-decoration: none; color: inherit; transition: all 0.15s; } .attachment-item:hover { border-color: var(--color-primary); background: var(--color-primary-light); text-decoration: none; box-shadow: var(--shadow-sm); } .attachment-icon { font-size: 28px; flex-shrink: 0; } .attachment-info { flex: 1; min-width: 0; } .attachment-name { font-size: 14px; font-weight: 600; color: var(--color-text); margin-bottom: 2px; word-break: break-all; } .attachment-meta { font-size: 12px; color: var(--color-text-muted); } .attachment-download { font-size: 20px; color: var(--color-primary); flex-shrink: 0; opacity: 0.7; } .attachment-item:hover .attachment-download { opacity: 1; } /* ============ 関連記事 ============ */ .related-articles { margin-top: 48px; padding-top: 32px; border-top: 1px solid var(--color-border); } .related-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-top: 16px; } .related-card { background: white; border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 16px; transition: all 0.2s; text-decoration: none; color: inherit; } .related-card:hover { border-color: var(--color-primary); box-shadow: var(--shadow-sm); text-decoration: none; } .related-card h4 { font-size: 14px; margin-bottom: 4px; } .related-card p { font-size: 12px; color: var(--color-text-muted); } /* ============ カテゴリページ ============ */ .category-header { display: flex; gap: 24px; align-items: center; padding: 32px 0 16px; border-bottom: 1px solid var(--color-border); margin-bottom: 16px; } .category-icon-large { width: 80px; height: 80px; border-radius: var(--radius-lg); display: flex; align-items: center; justify-content: center; font-size: 40px; flex-shrink: 0; } .category-icon-large.cat-user { background: #E0F4FA; color: #22A7CB; } .category-icon-large.cat-admin { background: #F3E8FF; color: #7C3AED; } .category-icon-large.cat-trial { background: #E8F8EE; color: #10B981; } .category-icon-large.cat-notice { background: #EEF2FF; color: #4F46E5; } .category-icon-large.cat-release { background: #F3E8FF; color: #9333EA; } .category-icon-large.cat-help { background: #F3F4F6; color: #6B7280; } /* セクション目次（チップ型ジャンプリンク） */ .section-index { background: var(--color-bg-alt); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 18px 22px; margin: 4px 0 8px; } .section-index-title { font-size: 12px; font-weight: 700; color: var(--color-text-muted); letter-spacing: 0.6px; margin-bottom: 12px; } .section-index-chips { display: flex; flex-wrap: wrap; gap: 8px; } .section-index-chip { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; background: #fff; border: 1px solid var(--color-border); border-radius: 999px; font-size: 13px; line-height: 1.2; color: var(--color-text); transition: border-color .15s, box-shadow .15s, transform .15s, color .15s; } .section-index-chip:hover { border-color: var(--color-primary); color: var(--color-primary); text-decoration: none; box-shadow: 0 2px 8px rgba(34,167,203,0.12); transform: translateY(-1px); } .sic-count { font-size: 11px; font-weight: 600; color: var(--color-text-muted); background: var(--color-bg-alt); border-radius: 999px; padding: 1px 8px; min-width: 20px; text-align: center; } .section-index-chip:hover .sic-count { background: var(--color-primary-light); color: var(--color-primary-dark); } /* 固定ヘッダーに隠れないようジャンプ先にオフセットを付与 */ section[id^="sec-"] { scroll-margin-top: 92px; } .category-icon-large.cat-troubleshoot { background: #FFF1E0; color: #FF7A00; } .category-icon-large.cat-learning { background: #CCFBF1; color: #0D9488; } .article-list { display: flex; flex-direction: column; background: white; border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; } .article-list-item { display: flex; gap: 16px; padding: 14px 20px; border-bottom: 1px solid var(--color-border); align-items: center; text-decoration: none; color: inherit; transition: background 0.15s; } .article-list-item:last-child { border-bottom: none; } .article-list-item:hover { background: var(--color-bg-alt); text-decoration: none; } .article-list-item:hover .article-list-title { color: var(--color-primary); } .article-list-title { flex: 1; font-size: 14px; font-weight: 500; } .article-list-meta { font-size: 12px; color: var(--color-text-muted); min-width: 90px; text-align: right; } /* 固定記事のハイライト */ .article-list-item.pinned { background: var(--color-primary-light); border-left: 3px solid var(--color-primary); padding-left: 17px; } .article-list-item.pinned:hover { background: #C8E8F2; } .article-list-item.pinned .article-list-title { font-weight: 700; color: var(--color-primary); } .pin-badge { font-size: 14px; margin-right: 4px; } /* ============ 検索結果 ============ */ .filter-btn { padding: 6px 14px; border-radius: 100px; font-size: 13px; background: white; border: 1px solid var(--color-border); cursor: pointer; transition: all 0.2s; } .filter-btn.active { background: var(--color-primary-light); border-color: var(--color-primary); color: var(--color-primary); } .filter-btn:hover:not(.active) { border-color: var(--color-primary); color: var(--color-primary); } .search-result-item { background: white; border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 20px 24px; margin-bottom: 12px; transition: all 0.2s; } .search-result-item:hover { border-color: var(--color-primary); box-shadow: var(--shadow-sm); } .search-result-tags { display: flex; gap: 8px; margin-bottom: 8px; } .search-result-item h3 { font-size: 17px; font-weight: 700; margin-bottom: 6px; } .search-result-item h3 a { color: var(--color-text); } .search-result-item h3 a:hover { color: var(--color-primary); } .search-result-item p { color: var(--color-text-muted); font-size: 13px; line-height: 1.6; } .search-result-item .meta { font-size: 12px; color: var(--color-text-muted); margin-top: 8px; } .search-result-item mark { background: #FFF59D; padding: 0 2px; border-radius: 2px; } /* ============ レスポンシブ ============ */ @media (max-width: 768px) { .header-inner { flex-wrap: wrap; gap: 12px; } .header-search { order: 3; flex-basis: 100%; max-width: none; } .hero h1 { font-size: 26px; } .hero { padding: 48px 16px 32px; } .article-layout { grid-template-columns: 1fr; } .toc { position: static; } .footer-cols { grid-template-columns: 1fr 1fr; } .support-grid { grid-template-columns: 1fr; } .related-grid { grid-template-columns: 1fr; } } /* トップへ戻るボタン（長いページ用・JSで生成） */ /* クラウド版のフローティング円形を踏襲しつつ、ラベル付きピル型で視認性を上げる */ .scroll-top-btn { position: fixed; right: 24px; bottom: 24px; display: inline-flex; align-items: center; gap: 6px; padding: 11px 18px 11px 16px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.7); background: var(--color-primary); color: #fff; font-family: inherit; font-size: 13px; font-weight: 700; line-height: 1; cursor: pointer; box-shadow: var(--shadow-lg); z-index: 1000; /* 既定は非表示。スクロール時に .visible で出す */ opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity 0.2s, transform 0.2s, visibility 0.2s, background 0.15s, box-shadow 0.15s; } .scroll-top-btn.visible { opacity: 1; visibility: visible; transform: translateY(0); } .scroll-top-btn:hover { background: var(--color-primary-dark); box-shadow: 0 10px 28px rgba(34, 167, 203, 0.4); transform: translateY(-2px); } .scroll-top-btn .stt-icon { font-size: 16px; font-weight: 700; } .scroll-top-btn .stt-label { white-space: nowrap; } /* 狭い画面ではラベルを隠して円形アイコンに（場所を取らない） */ @media (max-width: 768px) { .scroll-top-btn { right: 16px; bottom: 16px; padding: 0; width: 46px; height: 46px; justify-content: center; border-radius: 50%; } .scroll-top-btn .stt-label { display: none; } .scroll-top-btn .stt-icon { font-size: 20px; } } /* スクロールアニメーションを抑制する設定のユーザーには配慮（CSS側） */ @media (prefers-reduced-motion: reduce) { .scroll-top-btn { transition: opacity 0.2s, visibility 0.2s; transform: none; } .scroll-top-btn:hover { transform: none; } } /* ============================================================ ↓ ここから Zendesk テーマ移植用の追加スタイル既存クラウド記事（536本）は本文中にマーカー（???/^^^/!!!/##/#123#）を使っており、footer.hbs のJSが下記クラスの枠に変換する。旧テーマのマーカーCSSをプロトタイプ配色に合わせて移植。 ============================================================ */ /* --- 本文コンテナ（footer.jsは .ff-content を対象に走る） --- */ .article-body.ff-content { } /* --- Tips枠（??? マーカー） --- */ .tips-container { position: relative; border: 1px solid var(--color-primary); border-radius: var(--radius-md); margin: 24px 0; padding: 16px 20px 16px 72px; background: var(--color-primary-light); } .tips-container h4 { position: absolute; top: 12px; left: 14px; margin: 0; padding: 2px 10px; color: #fff; background: var(--color-primary); border-radius: 100px; font-size: 13px; font-weight: 700; } .tips-container p { margin: 0 0 8px; } .tips-container p:last-child { margin-bottom: 0; } /* --- 注意枠（^^^ マーカー＝ .msg-container.alert） --- */ .msg-container { display: block; position: relative; width: 100%; min-height: 44px; margin: 24px 0; padding: 14px 20px 14px 52px; border: 1px solid var(--color-warning); border-radius: var(--radius-md); background: #FFFBEB; } .msg-container.alert { border-color: var(--color-warning); background: #FFFBEB; } .msg-container.warning { border-color: var(--color-danger); background: #FEF2F2; color: var(--color-danger); font-weight: 700; } .msg-container h3 { margin: 0 0 4px; font-size: 15px; } .msg-container span { text-decoration: none; } .msg-container .icon { position: absolute; left: 16px; top: 14px; } .msg-container .icon i { display: block; width: 22px; height: 22px; background-repeat: no-repeat; background-position: center center; background-size: contain; } .msg-container.alert .icon i { background-image: url(/hc/theming_assets/01M4TEACGEHC77R6AZGMV4ATX2); } .msg-container.warning .icon i { background-image: url(/hc/theming_assets/01M4TEAB63GCY442Y34EGE8TZY); } .msg-container p { margin: 0 0 6px; padding: 0; line-height: 1.7; } .msg-container p:last-child { margin-bottom: 0; } .msg-container.warning p { color: var(--color-danger); } .tips-container + .msg-container, .msg-container + .tips-container, .tips-container + .tips-container, .msg-container + .msg-container { margin-top: 20px; } /* --- チェックリスト（## マーカー） --- */ .ff-content .checklist ul { margin: 12px 0; padding: 0; } .ff-content .checklist ul > li { position: relative; margin: 8px 0; padding-left: 30px; list-style: none; } .ff-content .checklist ul > li:before { content: url(/hc/theming_assets/01M4TEAB74WEVVVRYKGFT415VJ); position: absolute; left: 0; top: 1px; width: 20px; height: 20px; } /* --- 連番リスト（#123# マーカー） --- */ .ff-content .numlist ol { counter-reset: li; list-style: none; padding-left: 0; margin: 12px 0; } .ff-content .numlist li { position: relative; margin: 10px 0; padding-left: 40px; min-height: 28px; } .ff-content .numlist li:before { counter-increment: li; content: counter(li); position: absolute; left: 0; top: 0; width: 28px; height: 28px; line-height: 28px; text-align: center; background: var(--color-primary); color: #fff; border-radius: 50%; font-weight: 700; font-size: 14px; } /* 画像の影（旧 .img-shadow を踏襲） */ .ff-content .img-shadow { margin: 24px 0; box-shadow: var(--shadow-md); border-radius: var(--radius-sm); } /* ============ Zendesk ヘルパー出力のスタイル ============ */ /* パンくず {{breadcrumbs}} は