/* =====================================================================
brand.css ── v42 ワイヤー（モノクロ）へ「ネイビー×ティール」を適用する
オーバーレイ。style.css の後に読み込むこと。
v42本体はハードコード色（#111 等）が多いため !important で確実に上書きする。
配色を変えたい場合は下記の :root 変数と各 !important 値を調整する。
===================================================================== */
:root {
--navy: #113662;
--navy-d: #0d2a4d;
--teal: #15aab8;
--teal-d: #0f8a96;
--pale: #eef6fb;
--soft2: #f5f7fa;
--ink: #2b3440;
}
/* ---- text / headings ---- */
body { color: var(--ink); }
/* 親テーマ(Twenty Twenty-Four)のtheme.jsonが見出し(h1-h6)にCardoフォント／
font-weight:400を指定しているため、!importantで確実に上書きする（子theme.json
のstyles.elements.heading側でも上書きしているが、二重の保険として明示）。 */
h1, h2, h3, h4, h5, h6 {
color: var(--navy) !important;
font-family: "Noto Sans JP", system-ui, sans-serif !important;
font-weight: 700 !important;
}
.eyebrow { color: var(--teal) !important; }
.section-dark h2, .section-dark h3, .section-dark .eyebrow,
.section-contact-image h2, .section-contact-image p, .section-contact-image .eyebrow { color: #fff !important; }
.section-dark .eyebrow { color: #8fdce4 !important; }
/* ---- buttons : primary = teal ---- */
.btn { background: var(--teal) !important; color: #fff !important; border-radius: 8px; }
.btn:hover { background: var(--teal-d) !important; color: #fff !important; }
.btn.secondary { background: #fff !important; color: var(--navy) !important; border: 1px solid var(--navy) !important; }
.btn.secondary:hover { background: var(--navy) !important; color: #fff !important; }
.btn.text { background: transparent !important; color: var(--navy) !important; }
.cta-visual-block .btn { background: #fff !important; color: var(--navy) !important; }
.cta-visual-block .btn:hover { background: var(--pale) !important; color: var(--navy) !important; }
/* ---- dark areas : navy ---- */
.section-dark { background: var(--navy) !important; }
.site-footer { background: var(--navy) !important; }
.section-contact-image {
background:
linear-gradient(90deg, rgba(13,42,77,.92), rgba(13,42,77,.78), rgba(13,42,77,.5)),
repeating-linear-gradient(135deg, #16407a 0, #16407a 18px, #103260 18px, #103260 36px) !important;
}
.solution-message p:not(.eyebrow) { color: rgba(255,255,255,.9) !important; }
.solution-column { background: rgba(255,255,255,.07) !important; }
.problem-number { color: rgba(255,255,255,.5) !important; }
/* ---- soft section background ---- */
.section-soft { background: var(--soft2) !important; }
/* ---- header / nav ---- */
.site-header { border-bottom: 1px solid rgba(17,54,98,.12) !important; }
.global-nav a, .nav-service-trigger { color: var(--navy); }
.global-nav a:hover, .global-nav a.is-active { border-color: var(--teal) !important; }
.service-popover a:hover { background: var(--navy) !important; color: #fff !important; }
.service-popover strong { color: var(--navy) !important; }
/* ---- accents : badges / numbers / icons ---- */
.tag { background: var(--pale) !important; color: var(--teal-d) !important; }
.service-data-card span { background: var(--navy) !important; }
.step-flow-3 > i, .case-carousel-button { background: var(--teal) !important; }
.case-carousel-button:hover { background: var(--teal-d) !important; }
.step-flow-3 article span { color: #b9dfe4 !important; }
.faq-question i { background: var(--teal) !important; }
.metric strong, .process-node strong { color: var(--navy) !important; }
.column-pagination .is-current { background: var(--navy) !important; }
.sidebar-rank-item > span { background: var(--navy) !important; }
.sidebar-category-list a { background: var(--pale) !important; color: var(--navy) !important; }
.data-bar.low { background: var(--teal) !important; }
/* ---- placeholders → on-brand soft panels (until real images go in) ---- */
.placeholder, .top-service-thumb, .point-process-visual, .step-visual-16x9,
.service-gradient-card:before, .feature-image, .placeholder.feature-image {
background: linear-gradient(135deg, var(--pale), #e2edf7) !important;
}
.service-data-card { background: var(--soft2) !important; }
.process-node { background: #fff !important; }
.hero-media:after, .service-lp-hero-media:after, .service-gradient-card:after,
.placeholder { color: #7c93ab !important; }
.pmark-placeholder { background: rgba(255,255,255,.14) !important; color: rgba(255,255,255,.85) !important; }
/* footer logo : official PNG はカラーのまま白チップに載せる（反転させない） */
.footer-logo .logo-img { filter: none !important; background: #fff; padding: 6px 10px; border-radius: 8px; }
/* =====================================================================
写真ヒーロー（hero-media に has-img と ![]()
を付けた場合）
ネイビーのオーバーレイ＋白文字で「デザイン済み」の見え方にする
===================================================================== */
.hero-media.has-img, .service-lp-hero-media.has-img { background: var(--navy-d) !important; }
.hero-media.has-img:after, .service-lp-hero-media.has-img:after { content: none !important; }
.hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.hero-media.has-img:before, .service-lp-hero-media.has-img:before {
content: ""; position: absolute; inset: 0; z-index: 1;
background: linear-gradient(90deg, rgba(13,42,77,.82), rgba(13,42,77,.5), rgba(13,42,77,.25));
}
.hero-media.has-img .hero-copy, .service-lp-hero-media.has-img .service-lp-hero-copy { position: relative; z-index: 2; }
.hero-media.has-img .hero-copy h1, .hero-media.has-img .hero-copy .eyebrow,
.service-lp-hero-media.has-img .service-lp-hero-copy h1, .service-lp-hero-media.has-img .service-lp-hero-copy .eyebrow { color: #fff !important; }
.hero-media.has-img .hero-copy .lead, .service-lp-hero-media.has-img .service-lp-hero-copy .lead { color: rgba(255,255,255,.92) !important; }
/* 通常カード画像（![]()
）で placeholder を実画像に差し替える場合 */
.ph-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.placeholder.has-img { background: none !important; padding: 0 !important; }
.placeholder.has-img:after { content: none !important; }
/* =====================================================================
v43-A 修正：PC左右余白を bpio.co.jp 相当（中央寄せ・最大幅 1160px）へ統一
===================================================================== */
.container { width: min(100% - 48px, 1160px) !important; max-width: 1160px !important; margin-left: auto !important; margin-right: auto !important; }
.hero > .container { width: min(100% - 48px, 1160px) !important; max-width: 1160px !important; margin-left: auto !important; margin-right: auto !important; }
.hero-copy, .service-lp-hero-copy { margin-left: 48px !important; }
@media (max-width: 900px) {
.container, .hero > .container { width: min(100% - 32px, 1160px) !important; }
.hero-copy, .service-lp-hero-copy { margin-left: 20px !important; }
}
/* =====================================================================
v43-B 修正：画像はすべてグレーのベタ塗り（写真は使わない）
===================================================================== */
.hero-bg, .ph-img { display: none !important; }
.placeholder, .placeholder.short, .top-service-thumb, .point-process-visual,
.step-visual-16x9, .feature-image, .placeholder.feature-image,
.hero-media, .service-lp-hero-media, .hero-media.has-img, .service-lp-hero-media.has-img,
.article-image, .column-featured-image, .column-list-image, .sidebar-case-image {
background: #d9dde2 !important;
}
/* グレー面のラベル文字・装飾を消してフラットなベタ塗りにする */
.placeholder, .top-service-thumb { color: transparent !important; }
.hero-media:after, .service-lp-hero-media:after, .service-gradient-card:after,
.hero-media.has-img:before, .hero-media.has-img:after,
.service-lp-hero-media.has-img:before, .service-lp-hero-media.has-img:after { content: none !important; }
/* 写真ヒーローを使っていたページのテキスト色を通常へ戻す */
.hero-media.has-img .hero-copy h1, .service-lp-hero-media.has-img .service-lp-hero-copy h1 { color: var(--navy) !important; }
.hero-media.has-img .hero-copy .eyebrow, .service-lp-hero-media.has-img .service-lp-hero-copy .eyebrow { color: var(--teal) !important; }
.hero-media.has-img .hero-copy .lead, .service-lp-hero-media.has-img .service-lp-hero-copy .lead { color: var(--ink) !important; }
/* =====================================================================
v43-C 修正：サービスのホバーメニュー可読性
通常時：サービス名(strong)はネイビー／ホバー時：背景ネイビー＋文字は白
（strong をネイビー固定にしていたため、ホバー時に文字が消えていた）
===================================================================== */
.service-popover a:hover { background: var(--navy) !important; color: #fff !important; }
.service-popover a:hover strong,
.service-popover a:hover span { color: #fff !important; opacity: 1 !important; }
/* =====================================================================
v44-A：メディア記事 詳細ページ（記事本文）スタイル
===================================================================== */
.article-main { min-width: 0; }
.article-header { margin-bottom: 22px; }
.article-header h1 { font-size: clamp(26px, 3.4vw, 40px); line-height: 1.45; margin: 12px 0 14px; }
.article-lead { color: var(--ink); font-size: 1.05rem; line-height: 2; }
.article-eyecatch { width: 100%; aspect-ratio: 16 / 9; min-height: 0 !important; margin: 0 0 30px; }
.article-body { color: var(--ink); line-height: 2.05; font-size: 1rem; }
.article-body > h2 { font-size: clamp(20px, 2.4vw, 28px); margin: 46px 0 18px; padding: 6px 0 6px 16px; border-left: 4px solid var(--teal); color: var(--navy); line-height: 1.5; }
.article-body > h3 { font-size: 1.2rem; margin: 32px 0 12px; color: var(--navy); }
.article-body p { margin: 0 0 22px; }
.article-body ul, .article-body ol { margin: 0 0 22px; padding-left: 1.4em; }
.article-body li { margin-bottom: 10px; }
.article-body a { color: var(--teal-d); text-decoration: underline; }
.article-body strong { color: var(--navy); }
.article-body blockquote { margin: 0 0 24px; padding: 18px 22px; background: var(--pale); border-left: 4px solid var(--teal); color: var(--ink); }
.article-body blockquote p:last-child { margin-bottom: 0; }
.article-figure { margin: 6px 0 28px; }
.article-figure .placeholder { width: 100%; aspect-ratio: 16 / 9; min-height: 0 !important; }
.article-figure figcaption { margin-top: 8px; color: var(--color-text-gray, #64748b); font-size: 12px; text-align: center; }
.article-table-wrap { overflow-x: auto; margin: 0 0 26px; }
.article-body table { width: 100%; border-collapse: collapse; min-width: 480px; background: #fff; }
.article-body th, .article-body td { border: 1px solid #e2e8f0; padding: 12px 14px; font-size: .92rem; text-align: left; }
.article-body thead th { background: var(--navy); color: #fff; }
.article-body tbody tr:nth-child(even) { background: #f5f7fa; }
.article-cta-box { margin: 40px 0; padding: 30px 28px; background: var(--navy); color: #fff; text-align: center; }
.article-cta-box h3 { color: #fff !important; margin-bottom: 14px; }
.article-cta-box p { color: rgba(255,255,255,.86); margin-bottom: 20px; }
.article-cta-box .btn { background: #fff !important; color: var(--navy) !important; }
.article-cta-box .btn:hover { background: var(--pale) !important; color: var(--navy) !important; }
.article-related { margin-top: 50px; }
.article-related .section-head { margin-bottom: 22px; }
/* =====================================================================
v44-B：ホワイトペーパー（資料DL）ページ スタイル
===================================================================== */
.wp-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(320px, .85fr); gap: 42px; align-items: start; }
.wp-list { display: grid; gap: 18px; }
.wp-card { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 18px; background: #fff; padding: 20px; align-items: center; }
.wp-card .wp-thumb { width: 100%; aspect-ratio: 3 / 4; min-height: 0 !important; }
.wp-card h3 { margin: 0 0 8px; font-size: 1.05rem; line-height: 1.6; }
.wp-card p { margin: 0; color: var(--color-text-gray, #64748b); font-size: .9rem; line-height: 1.8; }
.wp-card .tag { margin-bottom: 8px; }
.wp-form-box { background: #fff; padding: 28px; position: sticky; top: 96px; }
.wp-form-box h3 { margin: 0 0 6px; }
.wp-form-box .small { margin-bottom: 16px; }
@media (max-width: 900px) {
.wp-grid { grid-template-columns: 1fr; }
.wp-form-box { position: static; }
.wp-card { grid-template-columns: 110px minmax(0, 1fr); }
}
/* =====================================================================
v44-C：ホワイトペーパー 単一資料LP（資料LPの定番2カラム構成）
左：資料表紙＋概要＋「この資料でわかること」 ／ 右：追従フォーム
===================================================================== */
.wp-lp { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(370px, .95fr); gap: 48px; align-items: start; }
.wp-asset { display: flex; gap: 28px; align-items: flex-start; }
.wp-cover { flex: 0 0 200px; width: 200px; aspect-ratio: 3 / 4; min-height: 0 !important; box-shadow: 0 14px 34px rgba(17,54,98,.16); }
.wp-asset-meta { min-width: 0; }
.wp-asset-meta h1 { font-size: clamp(24px, 3vw, 34px); line-height: 1.45; margin: 10px 0 12px; }
.wp-asset-meta .lead { color: var(--ink); }
.wp-points { display: grid; gap: 12px; margin: 24px 0 0; padding: 0; list-style: none; }
.wp-points li { position: relative; padding-left: 30px; line-height: 1.8; }
.wp-points li::before { content: "\f00c"; font-family: "Font Awesome 6 Free"; font-weight: 900; position: absolute; left: 0; top: 3px; color: var(--teal); font-size: 14px; }
.wp-badges { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.wp-badge { font-size: 12px; color: var(--color-text-gray, #64748b); background: #fff; border: 1px solid #e2e8f0; border-radius: 999px; padding: 6px 14px; }
.wp-form-panel { background: #fff; padding: 30px 30px 28px; border-top: 4px solid var(--teal); box-shadow: 0 14px 34px rgba(17,54,98,.10); position: sticky; top: 96px; }
.wp-form-panel .eyebrow { margin-bottom: 4px; }
.wp-form-panel h2 { font-size: 1.3rem; margin-bottom: 6px; }
.wp-form-panel .small { margin-bottom: 16px; }
.wp-toc { background: #fff; padding: 26px 30px; }
.wp-toc ol { margin: 0; padding-left: 1.3em; }
.wp-toc li { margin-bottom: 10px; line-height: 1.7; }
@media (max-width: 900px) {
.wp-lp { grid-template-columns: 1fr; }
.wp-form-panel { position: static; }
.wp-asset { flex-direction: column; }
.wp-cover { flex-basis: auto; width: 160px; }
}
/* =====================================================================
v45：サービス吹き出しの誤表示を修正
v41で追加された幅約640pxの透明ブリッジ(.nav-dropdown::after)が、
「サービス」以外の位置でもホバー扱いになり、ボディ方向へマウスを
下げると吹き出しが出ていた。ブリッジを撤去し、吹き出しをトリガー
直下(top:100%)に密着させることで、ホバー継続は保ったまま誤表示を解消。
===================================================================== */
@media (min-width: 901px) {
.nav-dropdown::after { content: none !important; }
.service-popover { top: 100% !important; }
/* 表示はサービストリガー or 吹き出し自身のホバー時のみ */
.nav-dropdown:hover .service-popover,
.nav-dropdown:focus-within .service-popover,
.service-popover:hover {
opacity: 1 !important;
visibility: visible !important;
pointer-events: auto !important;
transform: translateX(-50%) translateY(0) !important;
}
}
/* =====================================================================
v46-A：フォームのチェックボックス/ラジオを小さくしてテキスト左に配置
（style.css の .form-field input{width:100%} で全幅バーになっていた）
===================================================================== */
.form-field input[type="checkbox"],
.form-field input[type="radio"] {
width: auto !important;
display: inline-block;
margin: 0 8px 0 0;
padding: 0;
vertical-align: middle;
}
.form-field label:has(> input[type="checkbox"]),
.form-field label:has(> input[type="radio"]) { font-weight: 400; }
/* =====================================================================
v46-B：ヘッダーロゴを150%拡大（フッターは別ロゴのため対象外）
===================================================================== */
.site-header .logo-img { width: 159px !important; height: auto !important; }
@media (max-width: 1100px) { .site-header .logo-img { width: 132px !important; } }
@media (max-width: 560px) { .site-header .logo-img { width: 120px !important; } }
/* =====================================================================
v46-C：フッターロゴを白ロゴ(SVG・透過)に差し替え
各ページのHTMLを変えずCSSで背景画像に置換（背景は透明）
===================================================================== */
.footer-logo { display: inline-block; width: 168px; height: 66px; background: url("../img/logo-white.svg") no-repeat left center; background-size: contain; }
.footer-logo .logo-img { display: none !important; }