/* --- 共通スタイルまたはスコープが必要な可能性のあるスタイル --- */ /* 注意: compare.html および compatible.html の 'body', 'table', 'th', 'td' のような汎用要素のスタイルは広範囲です。これらのページ内の特定のセクションのみを対象とする場合は、より具体的な親セレクターでスコープする必要があります。現時点では、元のファイルにあったとおりに含まれています。 */ /* From: compare.html */ /* And: compatible.html */ .ld-page-body { /* HTML側でのように指定 */ font-family: sans-serif; line-height: 1.6; } /* From: compare.html */ /* And: compatible.html */ .section-title { /* compare.html および compatible.html で使用 */ color: #007bff; border-bottom: 2px solid #007bff; padding-bottom: 10px; margin-bottom: 20px; } /* From: compare.html */ /* And: compatible.html */ .subsection-title { /* compare.html および compatible.html で使用 */ color: #0056b3; margin-top: 20px; margin-bottom: 10px; } /* From: compare.html */ .subsubsection-title { color: #0056b3; margin-top: 15px; margin-bottom: 5px; font-size: 1.1em; } /* From: compare.html */ .section-content { margin-bottom: 30px; } /* --- index.html からのスタイル --- */ .white-body-content { color: white; /* 文字色を設定 */ } #enterprise-benefits { max-width: 800px; margin: 0 auto; padding: 20px; font-family: sans-serif; } #enterprise-benefits h2 { color: #ffffff; text-align: center; margin-bottom: 20px; } #enterprise-benefits h3 { color: #ffffff; } #enterprise-benefits p { color: #ffffff; } #enterprise-benefits ul { list-style: none; padding: 0; } #enterprise-benefits li { margin-bottom: 25px; padding: 25px; border: 1px solid #2727278c; border-radius: 8px; box-shadow: 3px 3px 8px rgba(0, 0, 0, 0.1); background-color: #35353594; display: flex; /* Flexbox を適用 */ flex-direction: column; /* Flexboxの並び方向を縦に変更 */ align-items: flex-start; /* 水平方向に左揃え */ } #enterprise-benefits li .icon { /* アイコン用のスタイル */ font-size: 3em; margin-right: 20px; color: #007bff; margin-bottom: 10px; /* アイコンの下に余白を追加 */ } /* index.html のエディション比較表スタイル */ /* これらのテーブルスタイルがサイト上のすべてのテーブルに対してグローバルでない場合は、スコープしてください */ /* 例: テーブルにIDまたはクラスを付与: #edition-table または .edition-table */ #index-edition-table { /* index.html のテーブルに id="index-edition-table" を追加することを想定 */ border-collapse: collapse; width: 100%; margin-bottom: 20px; } #index-edition-table th, #index-edition-table td { border: 1px solid #ddd; padding: 8px; text-align: left; } #index-edition-table th { background-color: #f2f2f2; } /* --- pricing.html からのスタイル --- */ /* document.html でも使用 */ #launchdarkly-enterprise-pricing { max-width: 800px; margin: 0 auto; padding: 20px; font-family: sans-serif; } #launchdarkly-enterprise-pricing h2 { color: #333; text-align: center; margin-bottom: 20px; } #launchdarkly-enterprise-pricing h3 { margin-top: 30px; } #launchdarkly-enterprise-pricing p { line-height: 1.6; margin-bottom: 10px; } #launchdarkly-enterprise-pricing ul { list-style: none; /* リストのスタイルを削除 */ padding: 0; } #launchdarkly-enterprise-pricing li { margin-bottom: 15px; padding: 15px; border: 1px solid #ddd; border-radius: 8px; box-shadow: 3px 3px 8px rgba(0, 0, 0, 0.1); background-color: #f9f9f9; /* 背景色を追加 */ } #launchdarkly-enterprise-pricing button { background-color: #007bff; color: white; padding: 10px 20px; border: none; border-radius: 5px; cursor: pointer; } #launchdarkly-enterprise-pricing details { /* faq.html でも使用 */ margin-bottom: 10px; border: 1px solid #ddd; padding: 15px; border-radius: 5px; box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1); /* 影を追加 */ } #launchdarkly-enterprise-pricing summary { /* faq.html でも使用 */ cursor: pointer; font-weight: bold; } #launchdarkly-enterprise-pricing summary::before { /* faq.html でも使用 */ content: "▽ "; /* ▽マークを追加 */ } #launchdarkly-enterprise-pricing details[open] summary::before { /* faq.html でも使用 */ content: "△ "; /* 開いているときは△マークに変更 */ } /* --- compare.html からのスタイル --- */ table.tableizer-table { font-size: 14px; border: 1px solid #CCC; font-family: Arial, Helvetica, sans-serif; } .tableizer-table td { padding: 4px; margin: 3px; border: 1px solid #CCC; } .tableizer-table th { background-color: #01228B; color: #FFF; font-weight: bold; } .custom-inquiry-button { display: inline-flex; align-items: center; justify-content: center; background-color: #007bff; /* 青色 */ color: #fff; /* 白文字 */ padding: 15px 30px; border: none; border-radius: 5px; font-size: 16px; font-weight: bold; text-decoration: none; cursor: pointer; transition: background-color 0.3s ease; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* 影を追加 */ } .custom-inquiry-button:hover { background-color: #0056b3; /* ホバー時に濃い青色 */ } .custom-inquiry-button .glyphicon { margin-left: 10px; font-size: 18px; } .comparison-table { width: 100%; border-collapse: collapse; margin-top: 20px; } .comparison-table th, .comparison-table td { border: 1px solid #ddd; padding: 10px; text-align: left; } .comparison-table th { background-color: #f0f0f0; font-weight: bold; } .guardian-edition-details, .target-audience, .feature-comparison { margin-bottom: 40px; } /* --- case.html からのスタイル --- */ /* document.html でも使用 */ .case-study-list { list-style-type: none; padding-left: 0; } .case-study-item { display: flex; align-items: flex-start; /* ロゴとテキストの上端を合わせる */ margin-bottom: 25px; padding: 25px; background-color: #fdfdfd; /* 少しだけ色味のある白 */ border: 1px solid #eaeaea; border-left: 5px solid #007bff; /* 左側にアクセントボーダー */ border-radius: 8px; box-shadow: 0 4px 8px rgba(0,0,0,0.05); transition: box-shadow 0.3s ease-in-out; } .case-study-item:hover { box-shadow: 0 6px 12px rgba(0,0,0,0.1); } .case-study-logo { flex-shrink: 0; width: 80px; height: 80px; margin-right: 25px; display: flex; align-items: center; justify-content: center; background-color: #ffffff; /* ダミーロゴの背景 */ border-radius: 4px; overflow: hidden; } .case-study-logo img { max-width: 90%; max-height: 90%; object-fit: contain; } .case-study-content { flex-grow: 1; } .case-study-content h3 { font-size: 1.7em; /* 見出しを少し大きく */ margin-top: 0; margin-bottom: 10px; } .case-study-content h3 a { text-decoration: none; color: #333; /* リンクの色を濃いめに */ } .case-study-content h3 a:hover { color: #0056b3; /* ホバー時の色 */ text-decoration: underline; } .case-study-number { font-weight: 600; color: #555; } .case-study-company { font-weight: 700; /* 社名を太字に */ } .case-study-content p { margin-bottom: 0; line-height: 1.65; color: #444; } /* --- compatible.html からのスタイル --- */ .intro-text { margin-bottom: 30px; } .intro-text .attention { color: red; } .button-container { /* compatible.html でも使用 */ text-align: center; margin-bottom: 30px; } .custom-button { /* compatible.html でも使用 */ display: inline-block; background-color: #007bff; color: #fff; padding: 15px 30px; border: none; border-radius: 5px; text-decoration: none; transition: background-color 0.3s ease; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-weight: bold; } .custom-button:hover { /* compatible.html でも使用 */ background-color: #0056b3; } .sdk-sections { display: flex; flex-wrap: wrap; gap: 20px; margin-bottom: 40px; } .sdk-section { flex: 1; min-width: 300px; padding: 20px; border: 1px solid #ddd; border-radius: 5px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); } .sdk-section h3 { /* 一般的すぎる可能性あり、スコープを検討 */ margin-top: 15px; margin-bottom: 10px; } .sdk-section ul { /* 一般的すぎる可能性あり、スコープを検討 */ list-style-type: disc; padding-left: 20px; } .common-matters { margin-bottom: 40px; } .common-matters ul { /* 一般的すぎる可能性あり、スコープを検討 */ list-style-type: disc; padding-left: 20px; } .integration-section { margin-bottom: 40px; } .integration-section h3 { /* 一般的すぎる可能性あり、スコープを検討 */ margin-top: 20px; margin-bottom: 10px; } .integration-section ul { /* 一般的すぎる可能性あり、スコープを検討 */ list-style-type: disc; padding-left: 20px; } .integration-category { margin-bottom: 20px; } .integration-category h4 { /* 一般的すぎる可能性あり、スコープを検討 */ margin-top: 15px; margin-bottom: 10px; } .api-section { margin-bottom: 40px; } .api-section h3 { /* 一般的すぎる可能性あり、スコープを検討 */ margin-top: 20px; margin-bottom: 10px; } .api-section ul { /* 一般的すぎる可能性あり、スコープを検討 */ list-style-type: disc; padding-left: 20px; } .api-section ol { /* 一般的すぎる可能性あり、スコープを検討 */ list-style-type: decimal; padding-left: 20px; } .last-text { font-size: 0.9em; color: #666; margin-bottom: 40px; } /* --- compatible.html のブログ記事紹介セクション --- */ .blog-feature-section { background-color: #f9f9f9; border: 1px solid #e0e0e0; border-left: 5px solid #007bff; padding: 20px; margin-bottom: 30px; border-radius: 8px; display: flex; align-items: flex-start; gap: 20px; box-shadow: 0 2px 5px rgba(0,0,0,0.05); } .blog-feature-thumbnail { flex: 1; /* 比率 1 (flex-grow: 1, flex-shrink: 1, flex-basis: 0%) */ min-width: 0; /* flexアイテムがコンテンツより小さくなれるように */ max-width: 33.33%; /* 画面が広い場合でも広がりすぎないように */ height: auto; } .blog-feature-thumbnail img { width: 100%; height: auto; border-radius: 4px; border: 1px solid #ddd; display: block; /* 画像下の余白対策 */ transition: transform 0.2s ease-in-out; } .blog-feature-thumbnail a:hover img { transform: scale(1.05); } .blog-feature-content { flex: 2; /* 比率 2 (flex-grow: 2, flex-shrink: 1, flex-basis: 0%) */ min-width: 0; /* flexアイテムがコンテンツより小さくなれるように */ max-width: 66.67%; } .blog-feature-content h2 { margin-top: 0; font-size: 1.5em; /* 少し大きめのタイトル */ margin-bottom: 10px; } .blog-feature-content h2 a { text-decoration: none; color: #0056b3; } .blog-feature-content h2 a:hover { text-decoration: underline; color: #003f80; } .blog-feature-content p { margin-bottom: 0; line-height: 1.6; color: #333; } /* --- faq.html からのスタイル --- */ /* details および summary のスタイルは既に #launchdarkly-enterprise-pricing でカバーされています。 faq.html に独自の details/summary スタイルがある場合は、一意のセレクターを使用してここに追加する必要があります。例: faq.html の details/summary が id="faq-section" の div の直下にある場合: */ #faq-section details { /* 必要に応じて faq.html のスコープ例 */ margin-bottom: 10px; border: 1px solid #ddd; padding: 15px; border-radius: 5px; box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1); /* 影を追加 */ } #faq-section summary { /* 必要に応じて faq.html のスコープ例 */ cursor: pointer; font-weight: bold; /* font-weight: bold; は継承されるか、特定の場合に追加可能 */ } /* 注意: faq.html の summary の ::before 擬似要素も異なる場合は同様のスコープが必要になります */ #faq-section summary::before { content: "▽ "; /* ▽マークを追加 */ } #faq-section details[open] summary::before { content: "△ "; /* 開いているときは△マークに変更 */ }