/* ================================================================================ 製品ページ群共通カスタムスタイルシート ================================================================================ ファイル名: product-style.css 役割: - style.css (会社共通CSS) のスタイルを上書き、または個別製品ページ群に特化したスタイルを追加で定義します。 - 製品ヘッダー (topmenu.inc) や製品フッター (widefooter.inc) のような、製品サイト固有のインクルードファイルに関連するスタイルを含みます。 - 各ページ (index.html, compare.html など) 固有のレイアウト調整やコンポーネントのスタイルを定義します。構成: 1. 製品サイト共通スタイル (ページ全体・汎用コンポーネント) 2. インクルードファイル関連のスタイル (製品ヘッダー・フッター) 3. 個別製品固有のスタイル (ページ別) ================================================================================ */ /* =================================================================== 1. 製品サイト共通スタイル =================================================================== */ /* --- ページ全体のフォントや行間の調整 --- */ .ld-page-body { /* HTML側でのように指定する場合 */ font-family: sans-serif; line-height: 1.6; } /* --- スクロールフェードインアニメーション --- */ .fade-in-section { opacity: 0; transform: translateY(30px); transition: opacity 0.8s ease-out, transform 0.8s ease-out; } .fade-in-section.is-visible { opacity: 1; transform: translateY(0); } /* =================================================================== 2. インクルードファイル関連のスタイル =================================================================== */ /* --- 製品ヘッダー (topmenu.inc) --- */ /* 製品ページ用ヘッダーナビゲーションのドロップダウンメニュー位置調整 (デスクトップ表示時) */ @media (min-width: 992px) { .prodnavbar-right .dropdown-menu { right: 0; left: auto; } .prodnavbar-right .dropdown-menu-left { right: auto; left: 0; } } /* 製品ページ用ヘッダーナビゲーションのリスト基本スタイル (scripts/topmenu.incで使用) */ .prodnav { padding-left: 0; margin-bottom: 0; list-style: none; } .prodnav > li { position: relative; display: block; } /* 製品ページ用ヘッダーナビゲーションのリンク基本スタイル (scripts/topmenu.incで使用) */ .prodnav > li > a { position: relative; display: block; padding: 10px 15px; } /* 製品ページ用ヘッダーナビゲーションのリンクホバー/フォーカス時のスタイル */ .prodnav > li > a:hover, .prodnav > li > a:focus { text-decoration: none; /* .prodnavbar-inverse内で具体的な色指定 */ } /* 製品ページ用ヘッダーナビゲーションの無効化されたリンクのスタイル */ .prodnav > li.disabled > a { color: #ffffff; /* .prodnavbar-inverse内で具体的な色指定 */ } .prodnav > li.disabled > a:hover, .prodnav > li.disabled > a:focus { color: #ffffff; /* .prodnavbar-inverse内で具体的な色指定 */ text-decoration: none; cursor: not-allowed; background-color: transparent; } /* 製品ページ用ヘッダーナビゲーションの基本スタイル (scripts/topmenu.incで使用) */ .ld-navbar.prodnavbar { position: relative; min-height: 50px; /* Bootstrap 5ではnavbar-expand-*で高さが調整されることが多い */ margin-top: 3px; /* グローバルヘッダーとの間に3pxの隙間 */ margin-bottom: 0px; /* グローバルヘッダーとの重複を避けるため0px */ border-bottom: 7px solid transparent; /* ヘッダー下部のデザイン用ボーダー */ } @media (min-width: 992px) { .ld-navbar.prodnavbar { border-radius: 0; } } /* 製品ページ用ヘッダーのロゴやトグルボタンのコンテナ (scripts/topmenu.incで使用) */ @media (min-width: 992px) { .prodnavbar-header { float: left; } } /* 製品ページ用ヘッダーナビゲーションの折りたたみ部分 (scripts/topmenu.incで使用) */ .ld-navbar .navbar-collapse { padding-right: 15px; padding-left: 15px; overflow-x: visible; -webkit-overflow-scrolling: touch; border-top: 1px solid transparent; -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1); } .ld-navbar .navbar-collapse.show { /* .in から .show に変更 */ overflow-y: auto; } @media (min-width: 992px) { .ld-navbar .navbar-collapse { width: auto; border-top: 0; -webkit-box-shadow: none; box-shadow: none; float: right; /* デスクトップではナビゲーションを右寄せ */ } .prodnavbar-collapse.collapse { /* display: block !important; Bootstrap 5ではnavbar-expand-lgで制御 */ height: auto !important; padding-bottom: 0; overflow: visible !important; visibility: visible !important; } .ld-navbar .navbar-collapse.show { overflow-y: visible; } .ld-navbar-static-top .prodnavbar-collapse { /* LaunchDarklyページでは固定ナビは使用していないが念のため残す */ padding-right: 0; padding-left: 0; } } /* 製品ページ用ヘッダー内のコンテナ調整 (scripts/topmenu.incで使用) */ /* .container > .prodnavbar-header, */ /* Bootstrap 5ではnavbar-brandが直接containerの子になることが多い */ @media (min-width: 992px) { /* .container > .prodnavbar-header, */ /* .container-fluid > .prodnavbar-header, */ .ld-navbar .container > .navbar-collapse, .ld-navbar .container-fluid > .navbar-collapse { margin-right: 0; margin-left: 0; } } /* 製品ページ用ヘッダーのブランドロゴ (scripts/topmenu.incで使用) */ .prodnavbar-brand { float: left; background:url(../IMG/LD_side_logo_white_R40.png) 0 0 no-repeat; /* LaunchDarklyロゴ大 */ width:272px; height:40px; display:block; margin:5px 0; font-size:20px; font-weight:200; color: transparent; /* テキストを隠す */ text-indent:-9999px; /* テキストを隠す */ position:relative; } /* 製品ページ用ヘッダーのブランドロゴ (モバイル表示時) */ @media (max-width: 767px) { .prodnavbar-brand { float: left; background:url(../IMG/LD_side_logo_white_R24.png) 0 0 no-repeat; /* LaunchDarklyロゴ小 */ width:163px; height:24px; display:block; margin:15px 0 15px 15px; font-size:20px; font-weight:200; color: transparent; /* テキストを隠す */ text-indent:-9999px; /* テキストを隠す */ position:relative; } } .prodnavbar-brand:hover, .prodnavbar-brand:focus { text-decoration: none; /* ホバーエフェクトは .prodnavbar-inverse で定義 */ } /* 製品ページ用ヘッダーのトグルボタン (モバイル表示時のハンバーガーメニュー) (scripts/topmenu.incで使用) */ .ld-navbar .navbar-toggler.prodnavbar-toggle { /* .navbar-toggler を対象に */ position: relative; float: right; padding: 9px 10px; margin-top: 10px; margin-right: 15px; margin-bottom: 10px; background-color: transparent; background-image: none; border: 1px solid transparent; border-radius: 4px; } .ld-navbar .navbar-toggler.prodnavbar-toggle:focus { outline: 0; } @media (min-width: 992px) { .ld-navbar .navbar-toggler.prodnavbar-toggle { display: none; } } /* 製品ページ用ヘッダーナビゲーションのリンクコンテナ (scripts/topmenu.incで使用) */ .ld-navbar .navbar-nav.prodnav { /* .navbar-nav を対象に */ margin: 7.5px -15px; } .ld-navbar-nav > li > a { padding-top: 10px; padding-bottom: 10px; line-height: 20px; } /* 製品ページ用ヘッダーナビゲーション (モバイル表示時のドロップダウンメニュー調整) */ @media (max-width: 991px) { .ld-navbar .navbar-nav.prodnav .dropdown-menu.show { /* .open から .show に変更 */ position: static; float: none; width: auto; margin-top: 0; background-color: transparent; border: 0; -webkit-box-shadow: none; box-shadow: none; } .ld-navbar .navbar-nav.prodnav .dropdown-menu.show > li > a, /* .open から .show */ .ld-navbar .navbar-nav.prodnav .dropdown-menu.show .dropdown-header { padding: 5px 15px 5px 25px; } .ld-navbar .navbar-nav.prodnav .dropdown-menu.show > li > a { /* .open から .show */ line-height: 20px; } .ld-navbar .navbar-nav.prodnav .dropdown-menu.show > li > a:hover, /* .open から .show */ .ld-navbar .navbar-nav.prodnav .dropdown-menu.show > li > a:focus { background-image: none; } } /* 製品ページ用ヘッダーナビゲーション (デスクトップ表示時) */ @media (min-width: 992px) { .ld-navbar .navbar-nav.prodnav { float: left; margin: 0; } .ld-navbar .navbar-nav.prodnav > li { float: left; } .ld-navbar .navbar-nav.prodnav > li > a { padding-top: 15px; padding-bottom: 15px; } } /* 製品ページ用ヘッダーナビゲーションのドロップダウンメニュー調整 */ .ld-navbar-nav > li > .dropdown-menu { margin-top: 0; border-top-left-radius: 0; border-top-right-radius: 0; } /* 製品ページ用ヘッダーナビゲーションの左右寄せ (デスクトップ表示時) */ @media (min-width: 992px) { .prodnavbar-left { float: left !important; } .prodnavbar-right { float: right !important; margin-right: -15px; } .prodnavbar-right ~ .prodnavbar-right { margin-right: 0; } } /* 製品ページ用ヘッダーナビゲーションのカラースキーム (ダーク系) (scripts/topmenu.incで使用) */ /* ld-navbar クラスでスコープを限定 */ .ld-navbar.prodnavbar-inverse { background-color: #000000d3; /* 半透明の黒 - グローバルヘッダーに影響しないようにする */ border-color: #838383d3; /* 半透明のグレーボーダー */ } .ld-navbar.prodnavbar-inverse .prodnavbar-brand { /* ロゴ画像は .prodnavbar-brand で指定済み */ color: #9d9d9d; /* テキスト色 (実際にはロゴ画像で隠れる) */ } .ld-navbar.prodnavbar-inverse .prodnavbar-brand:hover, .ld-navbar.prodnavbar-inverse .prodnavbar-brand:focus { color: #fff; background-color: transparent; } .ld-navbar.prodnavbar-inverse .prodnavbar-text { /* LaunchDarklyヘッダーでは未使用 */ color: #ffffff; } /* 製品ヘッダーのナビゲーションリンクのスタイル */ .ld-navbar.prodnavbar-inverse .navbar-nav > li > a.nav-link { /* ナビゲーションリンクの文字色 */ color: #ffffff; } .ld-navbar.prodnavbar-inverse .navbar-nav > li > a.nav-link:hover, .ld-navbar.prodnavbar-inverse .navbar-nav > li > a.nav-link:focus { color: #337ab7; /* ホバー時の文字色 */ background-color: transparent; } .ld-navbar.prodnavbar-inverse .navbar-nav > .nav-item.active { background-color: #080808; /* アクティブなli要素の背景色を変更 */ } .ld-navbar.prodnavbar-inverse .navbar-nav > .nav-item.active > a.nav-link { color: #fff; } .ld-navbar.prodnavbar-inverse .navbar-nav > .nav-item.disabled > a.nav-link, .ld-navbar.prodnavbar-inverse .navbar-nav > .nav-item.disabled > a.nav-link:hover, .ld-navbar.prodnavbar-inverse .navbar-nav > .nav-item.disabled > a.nav-link:focus { color: #444; /* 無効化リンクの文字色 */ background-color: transparent; } /* モバイル表示時のトグルボタンのスタイル */ .ld-navbar.prodnavbar-inverse .navbar-toggler.prodnavbar-toggle { border-color: #336ca1; /* トグルボタンのボーダー色 */ } .ld-navbar.prodnavbar-inverse .navbar-toggler.prodnavbar-toggle:hover, .ld-navbar.prodnavbar-inverse .navbar-toggler.prodnavbar-toggle:focus { background-color: #336ca1; /* トグルボタンホバー時の背景色 */ } /* モバイル表示時の折りたたみ部分のボーダー色 */ .ld-navbar.prodnavbar-inverse .prodnavbar-collapse, .ld-navbar.prodnavbar-inverse .prodnavbar-form { border-color: #336ca1; } .ld-navbar.prodnavbar-inverse .navbar-nav > .nav-item.dropdown.show > a.nav-link, .ld-navbar.prodnavbar-inverse .navbar-nav > .nav-item.dropdown.show > a.nav-link:hover, .ld-navbar.prodnavbar-inverse .navbar-nav > .nav-item.dropdown.show > a.nav-link:focus { color: #fff; background-color: #336ca1; /* ドロップダウン展開時の背景色 */ } /* モバイル表示時のドロップダウンメニュー内のスタイル */ @media (max-width: 991px) { .ld-navbar.prodnavbar-inverse .navbar-nav .dropdown-menu.show > .dropdown-header { border-color: #080808; } .ld-navbar.prodnavbar-inverse .navbar-nav .dropdown-menu.show .divider { background-color: #080808; } .ld-navbar.prodnavbar-inverse .navbar-nav .dropdown-menu.show > li > a { color: #666666; /* モバイルドロップダウン内のリンク文字色 */ } .ld-navbar.prodnavbar-inverse .navbar-nav .dropdown-menu.show > li > a:hover, .ld-navbar.prodnavbar-inverse .navbar-nav .dropdown-menu.show > li > a:focus { color: #336ca1; /* モバイルドロップダウン内のリンクホバー文字色 */ background-color: transparent; } .ld-navbar.prodnavbar-inverse .navbar-nav .dropdown-menu.show > .active > a, .ld-navbar.prodnavbar-inverse .navbar-nav .dropdown-menu.show > .active > a:hover, .ld-navbar.prodnavbar-inverse .navbar-nav .dropdown-menu.show > .active > a:focus { color: #fff; background-color: #080808; } .ld-navbar.prodnavbar-inverse .navbar-nav .dropdown-menu.show > .disabled > a, .ld-navbar.prodnavbar-inverse .navbar-nav .dropdown-menu.show > .disabled > a:hover, .ld-navbar.prodnavbar-inverse .navbar-nav .dropdown-menu.show > .disabled > a:focus { color: #444; background-color: transparent; } } /* LaunchDarklyヘッダーでは未使用 */ .ld-navbar.prodnavbar-inverse .prodnavbar-link { color: #9d9d9d; } .ld-navbar.prodnavbar-inverse .prodnavbar-link:hover { color: #fff; } .ld-navbar.prodnavbar-inverse .btn-link { /* LaunchDarklyヘッダーでは未使用 */ color: #9d9d9d; } .ld-navbar.prodnavbar-inverse .btn-link:hover, .ld-navbar.prodnavbar-inverse .btn-link:focus { color: #fff; } .ld-navbar.prodnavbar-inverse .btn-link[disabled]:hover, fieldset[disabled] .ld-navbar.prodnavbar-inverse .btn-link:hover, .ld-navbar.prodnavbar-inverse .btn-link[disabled]:focus, fieldset[disabled] .ld-navbar.prodnavbar-inverse .btn-link:focus { color: #444; } /* clearfix用 (float解除) */ .prodnav:before, .prodnav:after, .prodnavbar:before, .prodnavbar:after, .prodnavbar-header:before, .prodnavbar-header:after, .prodnavbar-collapse:before, .prodnavbar-collapse:after { display: table; content: " "; } .prodnav:after, .prodnavbar:after, .prodnavbar-header:after, .prodnavbar-collapse:after { clear: both; } /* --- 製品フッター (widefooter.inc) --- */ /* .ld-footer クラスでスコープを限定 */ footer.ld-footer, footer.product { background-color: #000000; /* フッター背景色 - グローバルフッターに影響しないようにする */ margin: 0; padding: 30px 20px; text-align: left; border-top: 7px solid #A4A4A4; /* フッター上部のボーダー */ } /* 製品フッター内の見出し */ footer.ld-footer h3 { color: #ffffff; font-size: 18px; } /* 製品フッター内のリスト風パラグラフ */ footer.ld-footer p.footerlist { color: #ffffff; line-height: 180%; } /* 製品フッター内のリンク */ footer.ld-footer p.footerlist a { color: #ffffff; text-decoration: none; } footer.ld-footer p.footerlist a:hover { color: #ffffff; text-decoration: none; } /* =================================================================== 3. LaunchDarkly 固有のスタイル =================================================================== */ .section-title { /* compare.html および compatible.html で使用 */ color: #007bff; border-bottom: 2px solid #007bff; padding-bottom: 10px; margin-bottom: 20px; } .subsection-title { /* compare.html および compatible.html で使用 */ color: #0056b3; margin-top: 20px; margin-bottom: 10px; } /* --- index.html --- */ /* --- index.html 向けセクション見出し --- */ .section-intro-title { padding-top: 2rem; /* ジャンボトロンとの間に余白を追加 */ padding-bottom: 1rem; } .section-main-title { font-size: 2rem; /* メイン見出しのフォントサイズ調整 */ font-weight: 600; color: #333; margin-bottom: 1.5rem; } .section-subtitle { font-size: 1.75rem; /* サブ見出しのフォントサイズ調整 */ font-weight: 500; color: #0056b3; /* アクセントカラー */ margin-bottom: 1.5rem; padding-bottom: 0.5rem; border-bottom: 2px solid #007bff; /* 下線を追加 */ display: inline-block; /* 下線がテキスト幅に合うように */ } /* --- index.html 向けセクションコンテンツ --- */ .section-what-is-ld { padding-top: 2rem; padding-bottom: 2rem; } .section-what-is-ld .lead { /* リード文のスタイル */ font-size: 1.15rem; font-weight: 400; color: #555; margin-bottom: 1.5rem; } .section-what-is-ld p { /* 通常の段落 */ color: #444; line-height: 1.75; color: #333; margin-bottom: 1.5rem; } /* --- 機能リスト (index.html) --- */ .feature-list { margin-top: 2rem; } .feature-item { margin-bottom: 1.75rem; } .feature-item strong { display: block; /* strongをブロック要素にして改行させる */ font-size: 1.1rem; color: #007bff; /* 強調テキストの色 */ margin-bottom: 0.5rem; } /* --- ヒーローセクション (index.html) --- */ /* Hero Section */ .hero-section { position: relative; padding: 6rem 0; background-image: url('../images/silver_background.jpg'); background-size: cover; background-position: center; } .hero-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(135deg, rgba(26, 26, 70, 0.9) 0%, rgba(65, 40, 90, 0.85) 50%, rgba(171, 89, 103, 0.75) 100%); } .hero-logo { max-width: 400px; width: 100%; } .hero-title { font-weight: 700; } .hero-subtitle { max-width: 750px; opacity: 0.9; } /* --- カードスタイル --- */ .benefit-card-modern { transition: transform 0.3s ease, box-shadow 0.3s ease; padding: 2rem; } .benefit-card-modern:hover { transform: translateY(-5px); box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important; } /* --- ボタン --- */ .hero-section .btn-primary { background: linear-gradient(135deg, #e9758a, #ff9a8b); border: none; transition: all 0.3s ease; box-shadow: 0 4px 15px rgba(233, 117, 138, 0.4); } .hero-section .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(233, 117, 138, 0.5); background: linear-gradient(135deg, #ff9a8b, #e9758a); } .hero-section .btn-outline-light { transition: all 0.3s ease; } .hero-section .btn-outline-light:hover { background-color: rgba(171, 89, 103, 0.8); /* グラデーションのピンク系に合わせる */ border-color: rgba(171, 89, 103, 0.8); color: #fff; } /* --- Enterprise Benefits セクション (index.html) --- */ .enterprise-benefits-section { background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%); color: white; padding: 4rem 0; } /* Enterprise Benefits Section のアイコンの色を調整 */ .enterprise-benefits-section h3 .fas { color: #79bcfc !important; /* 背景に埋もれないように明るい色に変更 */ } /* --- 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; /* アイコンの下に余白を追加 */ } /* これらのテーブルスタイルがサイト上のすべてのテーブルに対してグローバルでない場合は、スコープしてください */ /* 例: テーブルに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 #000; padding: 8px; text-align: left; } #index-edition-table th { background-color: #f2f2f2; } /* --- pricing.html, document.html, faq.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; } /* pricing.html 内の料金体系詳細説明用 details/summary */ #launchdarkly-enterprise-pricing ul ul details { border: none; padding: 0; margin-bottom: 5px; box-shadow: none; background-color: transparent; } #launchdarkly-enterprise-pricing ul ul summary { font-weight: normal; /* 通常の太さにする */ cursor: pointer; padding: 5px 0; /* 上下のパディングを少し調整 */ color: #337ab7; /* リンクのような色にする */ } /* --- compare.html --- */ .subsubsection-title { color: #0056b3; margin-top: 15px; margin-bottom: 5px; font-size: 1.1em; } .section-content { margin-bottom: 30px; } /* ページ固有のテーブルスタイル (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; } /* 汎用ボタン (compare.html, compatible.html など) */ .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 .fas, .custom-inquiry-button .far, .custom-inquiry-button .fab { margin-left: 10px; font-size: 18px; } /* 比較表 (compare.html) */ .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; } /* --- compatible.html の共通事項、インテグレーション、APIセクションの改善 --- */ /* セクション全体の余白調整 */ .common-matters ul { /* 一般的すぎる可能性あり、スコープを検討 */ list-style-type: disc; padding-left: 20px; } .integration-section { margin-bottom: 40px; padding-top: 20px; /* セクション間の区切りを明確に */ padding-bottom: 20px; } .common-matters { padding-top: 20px; /* セクション間の区切りを明確に */ padding-bottom: 20px; } .integration-section ul { /* 一般的すぎる可能性あり、スコープを検討 */ list-style-type: disc; padding-left: 20px; } .integration-category { margin-bottom: 20px; } .api-section { padding-top: 20px; /* セクション間の区切りを明確に */ padding-bottom: 20px; } .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-top: 30px; /* 上のセクションとの間隔 */ margin-bottom: 30px; padding: 15px; background-color: #f9f9f9; border-left: 3px solid #ffc107; /* 注意を促す色 */ border-radius: 4px; } /* セクション内のコンテンツエリアのスタイル */ .common-matters .section-content, .integration-section .section-content, .api-section .section-content { padding-left: 15px; /* 少しインデントして見出しとの区別を明確に */ border-left: 3px solid #007bff; /* 左のアクセントボーダーを少し太く */ margin-left: 5px; /* ボーダーとコンテンツの間に少し余白 */ background-color: #fdfdfd; /* 背景をわずかに変更して区別 */ padding: 20px; border-radius: 0 8px 8px 0; /* 右側の角を丸める */ box-shadow: 2px 2px 8px rgba(0,0,0,0.05); /* 軽い影 */ } /* 各セクション内のh3（サブセクションタイトル）のスタイル調整 */ .common-matters .subsection-title, .integration-section .subsection-title, .api-section .subsection-title { /* 既存の .subsection-title スタイルを継承しつつ、必要に応じて調整 */ margin-bottom: 15px; /* コンテンツとの間隔を少し広げる */ padding-left: 10px; /* 左のアクセントボーダーとのバランス */ } /* integration-section内のカテゴリごとの見出し(h4) */ .integration-category h4 { color: #333; /* 少し濃いめの色に */ font-size: 1.15em; margin-top: 25px; /* カテゴリ間のスペースを確保 */ margin-bottom: 8px; padding-bottom: 5px; border-bottom: 1px dashed #ccc; /* カテゴリ区切りを明確に */ } /* リスト(ul, ol)のスタイル調整 */ .common-matters ul, .integration-section ul, .api-section ul, .api-section ol { padding-left: 25px; /* リストマーカーの位置を調整 */ margin-bottom: 15px; /* リスト下の余白 */ } .common-matters li, .integration-section li, .api-section li { margin-bottom: 8px; /* リストアイテム間の余白 */ line-height: 1.7; /* 行間を少し広げて読みやすく */ } /* 強調テキスト (strong) のスタイル */ .section-content strong { color: #0056b3; /* 強調テキストの色をアクセントカラーに合わせる */ } /* 導入時の共通注意点などのサブ見出し */ .integration-section .section-content h3 { font-size: 1.2em; color: #555; margin-top: 20px; margin-bottom: 10px; } /* APIセクションの利用方法・利用例などのサブ見出し */ .api-section .section-content h3 { font-size: 1.2em; color: #555; margin-top: 25px; margin-bottom: 10px; } /* --- 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; */ /* 高さを固定するためにコメントアウトまたは削除 */ aspect-ratio: 16 / 9; /* サムネイルの縦横比を16:9に固定 */ overflow: hidden; /* コンテナからはみ出た画像を隠す */ border-radius: 4px; /* コンテナに角丸を設定 */ } .blog-feature-thumbnail img { width: 100%; height: 100%; /* コンテナの高さに合わせる */ display: block; /* 画像下の余白対策 */ transition: transform 0.2s ease-in-out; object-fit: cover; /* 画像の比率を維持しつつ、コンテナを埋める */ } .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; } /* --- inquiry.html --- */ .inquiry-card { transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out; border: 1px solid #e0e0e0; border-radius: 8px; } .inquiry-card:hover { transform: translateY(-5px); box-shadow: 0 8px 16px rgba(0,0,0,0.1); } .inquiry-card .card-title { color: #0056b3; /* Accent color */ } .inquiry-card .btn { padding: 0.75rem 1.5rem; } /* --- faq.html --- */ /* details および summary のスタイルは #launchdarkly-enterprise-pricing でカバーされています。 faq.html に独自のスタイルが必要な場合は、このセクションに記述します。 */ #faq-section details { 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 { cursor: pointer; font-weight: bold; } /* =================================================================== 4. サイト共通の視覚効果・UIコンポーネント =================================================================== */ /* --- 主要メリットカード (index.html) --- */ .key-benefits-section { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); padding: 4rem 0; margin: 3rem 0; color: white; } .key-benefits-section h2 { color: white; text-align: center; font-size: 2.5rem; font-weight: 700; margin-bottom: 3rem; } .benefit-card { background: rgba(255, 255, 255, 0.95); border-radius: 15px; padding: 2.5rem; text-align: center; transition: transform 0.3s ease, box-shadow 0.3s ease; height: 100%; border: none; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2); } .benefit-card:hover { transform: translateY(-10px); box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3); } .benefit-icon { font-size: 4rem; margin-bottom: 1.5rem; display: block; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .benefit-card h3 { color: #333; font-size: 1.5rem; font-weight: 600; margin-bottom: 1rem; } .benefit-card p { color: #666; font-size: 1rem; line-height: 1.6; margin: 0; } /* --- Enterpriseセクションの背景強調 (index.html) --- */ #enterprise-benefits { background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%); border-radius: 15px; padding: 3rem !important; margin: 3rem auto; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15); max-width: 900px; } #enterprise-benefits h2 { font-size: 2.5rem; font-weight: 700; margin-bottom: 2.5rem; text-align: center; } #enterprise-benefits ul { max-width: 800px; margin: 0 auto; } #enterprise-benefits li { text-align: left; } /* --- CTAボタン (index.html) --- */ .btn-inquiry { background: linear-gradient(135deg, #e9758a, #ff9a8b); border: none; padding: 1.2rem 3rem !important; font-size: 1.25rem !important; font-weight: 700; border-radius: 50px; box-shadow: 0 8px 25px rgba(233, 117, 138, 0.4); transition: all 0.3s ease; color: white !important; } .btn-inquiry:hover { transform: translateY(-3px); box-shadow: 0 12px 35px rgba(233, 117, 138, 0.5); background: linear-gradient(135deg, #ff9a8b, #e9758a); } .btn-inquiry-hero { background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%); border: none; padding: 1rem 2.5rem !important; font-size: 1.1rem !important; font-weight: 600; border-radius: 50px; box-shadow: 0 8px 25px rgba(79, 172, 254, 0.4); transition: all 0.3s ease; color: white !important; margin-top: 1rem; } .btn-inquiry-hero:hover { transform: translateY(-3px); box-shadow: 0 12px 35px rgba(79, 172, 254, 0.5); } /* --- 機能リストのアイコンとスタイル (index.html) --- */ .feature-item { display: flex; align-items: flex-start; margin-bottom: 2rem !important; padding: 1.5rem; background: #f8f9fa; border-radius: 10px; border-left: 4px solid #007bff; transition: all 0.3s ease; } .feature-item:hover { background: #e9ecef; transform: translateX(5px); } .feature-icon { font-size: 2rem; color: #007bff; margin-right: 1.5rem; flex-shrink: 0; } .feature-content { flex: 1; } .feature-item strong { font-size: 1.2rem !important; display: block !important; } /* --- 統計数値の強調表示 (index.html) --- */ .stats-highlight { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; padding: 3rem 0; margin: 3rem 0; border-radius: 15px; } .stat-item { text-align: center; padding: 2rem 1rem; } .stat-number { font-size: 3.5rem; font-weight: 800; color: #fff; display: block; margin-bottom: 0.5rem; text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2); } .stat-label { font-size: 1.1rem; color: rgba(255, 255, 255, 0.9); font-weight: 500; } /* --- セクション間の余白調整 --- */ .container > .row { margin-bottom: 0; } /* --- ロゴカード (compatible.html) --- */ .tech-card { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; /* 上揃えに変更 */ text-decoration: none; color: #333; padding: 1rem; border: 1px solid #e9ecef; border-radius: 8px; height: 100%; background-color: #f8f9fa; transition: all 0.2s ease-in-out; } .tech-card:hover { transform: translateY(-3px); box-shadow: 0 4px 12px rgba(0,0,0,0.08); border-color: #007bff; } .tech-card img { height: 56px; /* ロゴの高さを統一 */ width: 56px; /* ロゴの幅を統一 */ margin-bottom: 0.75rem; object-fit: contain; /* アスペクト比を維持しつつコンテナに収める */ } /* --- ブログカード (compatible.html, case.html) --- */ .blog-card { display: flex; align-items: flex-start; gap: 1.5rem; padding: 1.5rem; border: 1px solid #e9ecef; border-radius: 8px; background-color: #fff; text-decoration: none; color: inherit; transition: all 0.2s ease-in-out; } .blog-card:hover { transform: translateY(-3px); box-shadow: 0 4px 12px rgba(0,0,0,0.08); border-color: #007bff; } .blog-card-img { width: 200px; height: 112px; /* 16:9 aspect ratio */ object-fit: cover; border-radius: 4px; } .blog-card-body { flex: 1; } /* =================================================================== 5. ページ固有の追加スタイル =================================================================== */ /* --- ペルソナタブ (index.html) --- */ /* ペルソナタブのスタイルを強調 */ #personaTab .nav-link { color: #495057; /* 非アクティブタブの文字色 */ background-color: #e7f1ff; /* 非選択タブの背景を水色に変更 */ border: 1px solid #dee2e6; border-bottom: none; /* 下の枠線はコンテンツエリア側で表示 */ margin: 0 2px; transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out; } #personaTab .nav-link:hover, #personaTab .nav-link:focus { background-color: #e9ecef; } #personaTab .nav-link.active { color: #fff; /* アクティブタブの文字色 */ background-color: #0d6efd; /* アクティブタブの背景色 (Bootstrapプライマリカラー) */ border-color: #0d6efd; font-weight: 600; } /* タブコンテンツのフェードインアニメーション */ .tab-content > .tab-pane { transition: opacity 0.2s ease-in-out; } /* --- ガイドセクション (index.html) --- */ .guides-section { background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%); color: white; } .guide-card { background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 15px; backdrop-filter: blur(10px); transition: transform 0.3s ease, box-shadow 0.3s ease; } .guide-card:hover { transform: translateY(-8px); box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); background: rgba(255, 255, 255, 0.1); } .guide-card .card-title { color: #fff; } .guide-card .card-text { color: rgba(255, 255, 255, 0.8); } /* --- 用語集ページ (glossary.html) --- */ .glossary-section { background-color: #ffffff; border: 1px solid #e9ecef; border-radius: 0.5rem; padding: 2rem; box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075); scroll-margin-top: 80px; /* ヘッダーに隠れないようにスクロール位置調整 */ } .glossary-section h2 { font-size: 1.75rem; font-weight: 600; color: #212529; } .glossary-section h3 { font-size: 1.1rem; font-weight: 600; color: #495057; border-bottom: 1px solid #dee2e6; padding-bottom: 0.5rem; margin-top: 1.5rem; } .glossary-section p { line-height: 1.8; color: #495057; } .realization-block { border-left: 4px solid #0d6efd; padding-left: 1.5rem; margin-top: 1rem; background-color: #f8f9fa; padding-top: 1rem; padding-bottom: 0.5rem; border-radius: 0 0.25rem 0.25rem 0; } .toc-category-title { font-size: 1.25rem; font-weight: 600; color: #343a40; display: flex; align-items: center; } .toc-category-title .fas { color: #0d6efd; margin-right: 0.75rem; width: 20px; /* アイコンの幅を固定 */ text-align: center; } /* アコーディオン目次のためのスタイル */ .toc-accordion .accordion-button { font-size: 1.1rem; font-weight: 600; } .toc-accordion .accordion-body { padding: 0; } .toc-accordion .list-group-item { border-left: 0; border-right: 0; }