/* ============================================================ * service-style-v1.css * KIコーポレーション — SERVICE（対応業務一覧）専用ダークデザイン（リスキンCSS） * ------------------------------------------------------------ * 【このファイルの前提】 * - SERVICEアーカイブページのGutenberg本文・HTML構造は一切変更しません。 * - 既存の子テーマ style.css も、HOME用 home-style-v1.css も一切変更しません * （このファイルは完全に新規追加で、削除すればSERVICEは元の見た目に * 完全に戻ります）。 * - すべてのルールを body.post-type-archive-service で始まるセレクタに * 限定しているため、HOME・ABOUT・CONTACT・個別サービスページ等の * 他ページには一切影響しません。 * (実機で確認済みのSERVICEのクラス: * "archive post-type-archive post-type-archive-service ...") * - functions.php側で is_post_type_archive('service') のときだけこの * ファイル自体を読み込むため、他ページではロードすらされません * （二重の安全策、HOMEと同じ設計）。 * - 配色はHOMEの --home-* と同じ値を採用し世界観を統一しますが、 * 変数名は --service-* とし、home-style-v1.css の変数とは完全に * 独立させています（衝突・依存を避けるため）。 * ============================================================ */ body.post-type-archive-service { --service-bg: #05070d; --service-bg-2: #0b1220; --service-bg-3: #121a2c; --service-cyan: #35d6e0; --service-blue: #4c7cf5; --service-purple: #8f6bf0; --service-gold: #d8c189; --service-gold-strong: #eddca0; --service-gold-deep: #a9853e; --service-text: #f4f6fb; --service-text-muted: #9aa4bd; --service-text-faint: #6b7690; --service-border: rgba(255, 255, 255, 0.09); --service-border-strong: rgba(255, 255, 255, 0.16); --service-font-label: "Space Grotesk", var(--ki-font-heading); background-color: var(--service-bg); color: var(--service-text-muted); } /* ============================================================ * 1. 見出し・本文・リンクの基本色 * ============================================================ */ body.post-type-archive-service h1, body.post-type-archive-service h2, body.post-type-archive-service h3, body.post-type-archive-service h4, body.post-type-archive-service .wp-block-heading { color: var(--service-text); } body.post-type-archive-service p { color: var(--service-text-muted); } body.post-type-archive-service a { color: var(--service-cyan); } body.post-type-archive-service a:hover { color: var(--service-purple); } /* ============================================================ * 2. 対応業務カード（.ki-service-card）— ガラス風カード * ------------------------------------------------------------ * HOMEの .ki-service-card と同じ質感（半透明+backdrop-filter）に * 揃えます。サイズ・余白・グリッド列数などレイアウトに関わる指定は * 一切変更しません。 * 右上の装飾円(::before)は新デザインでは使わないため非表示にします * （HOMEと同じ扱い。配置や余白には影響しません）。 * ============================================================ */ body.post-type-archive-service .ki-service-card { background: linear-gradient(160deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.02)); border: 1px solid var(--service-border); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); box-shadow: none; color: var(--service-text-muted); } body.post-type-archive-service .ki-service-card::before { display: none; } body.post-type-archive-service .ki-service-card:hover { transform: translateY(-6px); border-color: rgba(140, 180, 255, 0.4); box-shadow: 0 20px 50px rgba(76, 124, 245, 0.2), 0 0 0 1px rgba(255, 255, 255, 0.06) inset; } body.post-type-archive-service .ki-service-card h3 { color: var(--service-text); } body.post-type-archive-service .ki-service-card p { color: var(--service-text-muted); } body.post-type-archive-service .ki-service-catchcopy { color: var(--service-text-faint); } body.post-type-archive-service .ki-service-arrow { color: var(--service-cyan); } /* ============================================================ * 3. ヘッダー（サイト全体のヘッダーをこのページでのみダーク化） * ------------------------------------------------------------ * HOMEの #masthead / #primary-menu ダーク化と同じ手法です。 * body.post-type-archive-service スコープのみに限定しているため、 * 他ページのヘッダー表示には一切影響しません。 * ============================================================ */ body.post-type-archive-service #masthead { background-color: var(--service-bg) !important; border-color: var(--service-border) !important; } body.post-type-archive-service #primary-menu a { color: var(--service-text) !important; } body.post-type-archive-service #primary-menu a:hover { color: var(--service-cyan) !important; } /* ============================================================ * 4. モバイル微調整 * ------------------------------------------------------------ * グリッドは既存の grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) * により375px幅でも自然に1カラムになることを確認済みのため、 * 追加のレイアウト変更は不要です。念のため余白のみ調整します。 * ============================================================ */ @media (max-width: 600px) { body.post-type-archive-service .ki-section { padding-left: 16px; padding-right: 16px; } } /* ============================================================================ * ▲▲▲ 白ベースリニューアル追加分 (2026-09-22) ここから ▼▼▼ * ------------------------------------------------------------------------ * 目的：ページ全体が暗く重い印象になっていたため、 * ヘッダーはダークを維持したまま、ページタイトルと * サービス一覧エリアを白基調に変更する。フッターは元々 * サイト共通でダークなのでこのブロックでは変更しません。 * * 【元に戻す場合】 * このコメントブロック（ここから「▲▲▲ ... ここまで ▲▲▲」まで）を * まるごと削除するだけで、直前までの状態（全面ダーク）に戻ります。 * これより前のセクション（1〜4）は一切変更していません。 * ============================================================================ */ body.post-type-archive-service { --service-light-bg: #ffffff; --service-light-card-bg: #ffffff; --service-light-card-bg-2: #f4f6fb; --service-light-border: rgba(27, 42, 78, 0.09); --service-light-heading: #1b2a4e; --service-light-text: #3a4258; --service-light-text-muted: #5b5f73; --service-light-link: var(--service-blue); --service-light-link-hover: var(--service-purple); background-color: var(--service-light-bg); color: var(--service-light-text-muted); } /* 見出し・本文・リンクを白背景向けの濃色に上書き（ヘッダー内は別途 #masthead ルールが !important で優先されるため影響しません） */ body.post-type-archive-service h1, body.post-type-archive-service h2, body.post-type-archive-service h3, body.post-type-archive-service h4, body.post-type-archive-service .wp-block-heading { color: var(--service-light-heading); } body.post-type-archive-service p { color: var(--service-light-text-muted); } body.post-type-archive-service a { color: var(--service-light-link); } body.post-type-archive-service a:hover { color: var(--service-light-link-hover); } /* サービスカードを白〜薄いグレーのガラス風カードに */ body.post-type-archive-service .ki-service-card { background: linear-gradient(160deg, var(--service-light-card-bg), var(--service-light-card-bg-2)); border: 1px solid var(--service-light-border); backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: 0 8px 24px rgba(27, 42, 78, 0.06); color: var(--service-light-text-muted); } body.post-type-archive-service .ki-service-card:hover { transform: translateY(-6px); border-color: rgba(76, 124, 245, 0.4); box-shadow: 0 16px 36px rgba(76, 124, 245, 0.16); } body.post-type-archive-service .ki-service-card h3 { color: var(--service-light-heading); } body.post-type-archive-service .ki-service-card p { color: var(--service-light-text-muted); } body.post-type-archive-service .ki-service-catchcopy { color: var(--service-light-text-muted); } body.post-type-archive-service .ki-service-arrow { color: var(--service-light-link); } body.post-type-archive-service .ki-service-card:hover .ki-service-arrow { color: var(--service-light-link-hover); } /* ============================================================================ * ▲▲▲ 白ベースリニューアル追加分 (2026-09-22) ここまで ▲▲▲ * ============================================================================ */ /* ============================================================================ * ▲▲▲ 未来型テクノロジー背景装飾追加分 (2026-09-23) ここから ▼▼▼ * ------------------------------------------------------------------------ * 目的：白ベース化したページタイトル〜サービス一覧エリアの「背景」にのみ、 * ごく薄いグリッド・ドット・六角形パターン・シアン〜ブルー〜パープルの * にじみ光・ゴールドの細いラインを追加し、HOMEと統一感のある * テクノロジー企業らしい上品な質感を出す。 * 【実装方法】ページタイトルとサービスカード一覧を内包する * .ki-section 要素自身の background-image に複数のグラデーションを * 重ねるのみで、疑似要素・新規HTML・画像素材は一切使用しない。 * background-image は要素の内容より必ず背面に描画されるため、 * 見出し・本文・カードの可読性やスタッキング順には影響しない。 * カード自体（.ki-service-card）の background・ヘッダー・フッターの * ダークデザインは変更しない。 * 【元に戻す場合】このコメントブロックをまるごと削除するだけで、 * 直前までの白ベース状態（装飾なし）に戻ります。 * ============================================================================ */ body.post-type-archive-service #inner-wrap > .ki-section { background-image: linear-gradient(90deg, transparent 8%, rgba(216, 193, 137, 0.5) 50%, transparent 92%), repeating-linear-gradient(to bottom, rgba(27, 42, 78,0.035) 0px, rgba(27, 42, 78,0.035) 1px, transparent 1px, transparent 48px), repeating-linear-gradient(to right, rgba(27, 42, 78,0.035) 0px, rgba(27, 42, 78,0.035) 1px, transparent 1px, transparent 48px), radial-gradient(circle, rgba(27, 42, 78,0.04) 1px, transparent 1.6px), linear-gradient(30deg, rgba(76, 124, 245,0.035) 12%, transparent 12.5%, transparent 87%, rgba(76, 124, 245,0.035) 87.5%, rgba(76, 124, 245,0.035)), linear-gradient(150deg, rgba(76, 124, 245,0.035) 12%, transparent 12.5%, transparent 87%, rgba(76, 124, 245,0.035) 87.5%, rgba(76, 124, 245,0.035)), linear-gradient(30deg, rgba(76, 124, 245,0.035) 12%, transparent 12.5%, transparent 87%, rgba(76, 124, 245,0.035) 87.5%, rgba(76, 124, 245,0.035)), linear-gradient(150deg, rgba(76, 124, 245,0.035) 12%, transparent 12.5%, transparent 87%, rgba(76, 124, 245,0.035) 87.5%, rgba(76, 124, 245,0.035)), linear-gradient(60deg, rgba(76, 124, 245,0.03) 25%, transparent 25.5%, transparent 75%, rgba(76, 124, 245,0.03) 75.5%, rgba(76, 124, 245,0.03)), linear-gradient(60deg, rgba(76, 124, 245,0.03) 25%, transparent 25.5%, transparent 75%, rgba(76, 124, 245,0.03) 75.5%, rgba(76, 124, 245,0.03)), radial-gradient(circle at 8% 10%, rgba(53, 214, 224,0.09), transparent 40%), radial-gradient(circle at 92% 18%, rgba(76, 124, 245,0.08), transparent 42%), radial-gradient(circle at 85% 92%, rgba(143, 107, 240,0.07), transparent 45%); background-size: 100% 2px, auto, auto, 30px 30px, 64px 110px, 64px 110px, 64px 110px, 64px 110px, 64px 110px, 64px 110px, 100% 100%, 100% 100%, 100% 100%; background-position: top, 0 0, 0 0, 0 0, 0 0, 0 0, 32px 55px, 32px 55px, 0 0, 32px 55px, 0 0, 0 0, 0 0; background-repeat: no-repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, no-repeat, no-repeat, no-repeat; } /* ▲▲▲ 未来型テクノロジー背景装飾追加分 (2026-09-23) ここまで ▲▲▲ */