/* ============================================================
* ki-dark-design.css
* KIコーポレーション — HOME専用 ダークデザイン（リスキンCSS）
* ------------------------------------------------------------
* 【このファイルの前提】
* - HOME固定ページ(id=2)のGutenberg本文・ブロック構造は一切変更しません。
* - 既存の子テーマ style.css も一切変更しません（このファイルは完全に
* 新規追加で、削除すればHOMEは元の見た目に完全に戻ります）。
* - すべてのルールを body.home で始まるセレクタに限定しているため、
* SERVICE・ABOUT・CONTACT等の他ページには一切影響しません。
* (実機で確認済みのHOMEのクラス: "home ... page-id-2 ...")
* - functions.php 側で is_front_page() のときだけこのファイル自体を
* 読み込むため、他ページではこのファイルはロードすらされません
* （二重の安全策）。
* - 既存の --ki-navy 等のCSS変数は「明るい背景の上のネイビー文字色」
* 等、複数の意味で使い回されているため、うっかり再定義すると
* 他の用途を壊す可能性があります。そのため既存変数には一切手を
* 触れず、このファイル専用の新しい変数(--home-*)だけを使います。
* ============================================================ */
body.home {
/* HOME専用の配色変数（既存の --ki-* 変数とは完全に別名にして衝突を回避） */
--home-bg: #05070d; /* 最背面の黒に近い背景 */
--home-bg-2: #0b1220; /* セクション背景の濃紺 */
--home-bg-3: #121a2c; /* もう一段明るい濃紺 */
--home-cyan: #35d6e0;
--home-blue: #4c7cf5;
--home-purple: #8f6bf0;
--home-gold: #d8c189;
--home-gold-strong: #eddca0;
--home-gold-deep: #a9853e;
--home-text: #f4f6fb;
--home-text-muted: #9aa4bd;
--home-text-faint: #6b7690;
--home-border: rgba(255, 255, 255, 0.09);
--home-border-strong: rgba(255, 255, 255, 0.16);
--home-font-label: "Space Grotesk", var(--ki-font-heading);
background-color: var(--home-bg);
color: var(--home-text-muted);
}
/* ============================================================
* 1. 見出し・本文・リンクの基本色
* ------------------------------------------------------------
* 既存ルール( h1,h2,... { color: var(--ki-navy) } / a { color: var(--ki-purple) } )
* より詳しいセレクタ(body.home ...)にして、!important なしで上書きします。
* ============================================================ */
body.home h1,
body.home h2,
body.home h3,
body.home h4,
body.home h5,
body.home h6,
body.home .wp-block-heading {
color: var(--home-text);
}
body.home p {
color: var(--home-text-muted);
}
body.home a {
color: var(--home-cyan);
}
body.home a:hover {
color: var(--home-purple);
}
/* 本文に直接 style="color:#4a4f66" のようにインラインで色指定されている
箇所が2箇所あり、インラインstyleはクラスより優先されるため、
!important を使わないと上書きできません。（この2箇所のみ使用） */
body.home .ki-hero-light p[style*="color"] {
color: var(--home-text-muted) !important;
}
body.home .ki-section > p[style*="color:#5b5f73"] {
color: var(--home-text-faint) !important;
}
/* ============================================================
* 2. ヒーローエリア（.ki-hero-light）
* ------------------------------------------------------------
* 背景グラデーション・見出しの配色のみ変更。
* min-height/display:flex 等の「レイアウト」は既存定義のまま変更しません。
* ============================================================ */
body.home .ki-hero-light {
background: linear-gradient(180deg, var(--home-bg) 0%, var(--home-bg-2) 55%, var(--home-bg-3) 100%);
}
body.home .ki-bg-grid {
background-image:
linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
background-size: 44px 44px;
}
/* 既存の .ki-blob / ki-float アニメーション(14秒周期、ゆっくり漂う)は
そのまま流用し、色だけをシアン・紫・ゴールドに変更します。 */
body.home .ki-hero-light .ki-blob-1 {
background: radial-gradient(circle, rgba(53, 214, 224, 0.30), transparent 70%);
}
body.home .ki-hero-light .ki-blob-2 {
background: radial-gradient(circle, rgba(143, 107, 240, 0.28), transparent 70%);
}
body.home .ki-hero-light .ki-blob-3 {
background: radial-gradient(circle, rgba(216, 193, 137, 0.18), transparent 70%);
}
/* 見出しはシアン→ブルー→紫のグラデーション文字に */
body.home .ki-hero-light h1 {
background: linear-gradient(120deg, var(--home-cyan), var(--home-blue) 55%, var(--home-purple));
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
/* ============================================================
* 3. フェードイン演出（読み込み時のみ・スクロール連動は使いません）
* ------------------------------------------------------------
* ヒーロー内の見出し・本文・ボタン(.ki-hero-reveal > *)は、既存の
* @keyframes ki-fade-up による「読み込み時に上から順にフェードイン」
* がすでに正常に動作しているため、このファイルでは一切触れません。
*
* それ以外のセクション(.ki-reveal)は、過去にスクロール連動のJS判定が
* 環境依存で失敗し「透明なまま残る」不具合があったため、現在は
* opacity:1; transform:none; で常時表示に固定されています(既存コード
* のコメントより確認済み)。同じ不具合を再発させないよう、今回も
* JSには頼らず、読み込み時に一度だけ再生するCSSアニメーションに
* 限定します(ヒーローと同じ仕組みの応用)。
* ============================================================ */
@keyframes ki-home-fade-up {
from {
opacity: 0;
transform: translateY(16px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
body.home .ki-reveal {
opacity: 0;
transform: translateY(16px);
animation: ki-home-fade-up 0.8s cubic-bezier(0.2, 0.7, 0.3, 1) both;
}
/* カードグリッド内は少しずつ時間差をつける（既存のtransition-delay指定とは
別プロパティなので衝突しません） */
body.home .ki-service-grid .ki-reveal:nth-child(1) { animation-delay: 0s; }
body.home .ki-service-grid .ki-reveal:nth-child(2) { animation-delay: 0.08s; }
body.home .ki-service-grid .ki-reveal:nth-child(3) { animation-delay: 0.16s; }
body.home .ki-service-grid .ki-reveal:nth-child(4) { animation-delay: 0.24s; }
body.home .ki-service-grid .ki-reveal:nth-child(5) { animation-delay: 0.32s; }
body.home .ki-services > .ki-reveal:nth-child(1) { animation-delay: 0s; }
body.home .ki-services > .ki-reveal:nth-child(2) { animation-delay: 0.08s; }
body.home .ki-services > .ki-reveal:nth-child(3) { animation-delay: 0.16s; }
body.home .ki-services > .ki-reveal:nth-child(4) { animation-delay: 0.24s; }
/* 注記: prefers-reduced-motion のときは、既存の子テーマCSSにすでにある
@media (prefers-reduced-motion: reduce) { .ki-reveal { animation:none!important; ...} }
という !important 付きの安全策がそのまま効くため、このファイルでは
重複定義しません。 */
/* ============================================================
* 4. 対応業務カード（.ki-service-card）— ガラス風カード
* ------------------------------------------------------------
* 背景を不透明な白系グラデーションから、半透明+ぼかし(backdrop-filter)の
* ガラス風に変更します。サイズ・余白・グリッド列数などレイアウトに
*関わる指定は一切変更しません。
* 唯一の例外: 右上の装飾円(::before)は新デザインでは使わないため
* display:none で非表示にします(配置や余白には影響しません)。
* ============================================================ */
body.home #work {
/* WordPress標準の背景色クラス(has-ki-bg-background-color)は !important
付きで自動生成されるため、こちらも !important が必要です。 */
background-color: var(--home-bg-2) !important;
}
body.home .ki-service-card {
background: linear-gradient(160deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.02));
border: 1px solid var(--home-border);
backdrop-filter: blur(18px);
-webkit-backdrop-filter: blur(18px);
box-shadow: none;
color: var(--home-text-muted);
}
body.home .ki-service-card::before {
display: none;
}
body.home .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.home .ki-service-number {
font-family: var(--home-font-label);
background: linear-gradient(135deg, var(--home-gold-strong), var(--home-gold) 45%, var(--home-gold-deep));
-webkit-background-clip: text;
background-clip: text;
color: transparent;
opacity: 1;
}
body.home .ki-service-card h3 {
color: var(--home-text);
}
body.home .ki-service-card p {
color: var(--home-text-muted);
}
body.home .ki-service-arrow {
color: var(--home-cyan);
}
/* ============================================================
* 5. 特徴・利用の流れカード（.ki-card）— 同じくガラス風
* ============================================================ */
body.home .ki-card {
background: linear-gradient(160deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.02));
border: 1px solid var(--home-border);
backdrop-filter: blur(18px);
-webkit-backdrop-filter: blur(18px);
transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
body.home .ki-card:hover {
transform: translateY(-6px);
border-color: rgba(140, 180, 255, 0.35);
box-shadow: 0 16px 40px rgba(76, 124, 245, 0.18);
}
body.home .ki-card-number {
font-family: var(--home-font-label);
background: linear-gradient(135deg, var(--home-gold-strong), var(--home-gold) 45%, var(--home-gold-deep));
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
body.home .ki-card h3 {
color: var(--home-text);
}
body.home .ki-card p {
color: var(--home-text-muted);
}
/* ============================================================
* 6. CTAセクション（.ki-cta-dark）
* ------------------------------------------------------------
* 既存のCTA文字色(白系のインラインstyle)はすでに暗い背景向けの色に
* なっているため、そのまま流用し上書きしません。背景と光の演出、
* ボタンの配色のみ変更します。
* ============================================================ */
body.home .ki-cta-dark {
background: linear-gradient(135deg, #0d1730 0%, #16224a 45%, #2c2166 100%);
background-size: 180% 180%;
animation: ki-home-bg-drift 22s ease-in-out infinite;
}
@keyframes ki-home-bg-drift {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
body.home .ki-cta-dark .ki-blob-1 {
background: radial-gradient(circle, rgba(53, 214, 224, 0.30), transparent 70%);
}
body.home .ki-cta-dark .ki-blob-2 {
background: radial-gradient(circle, rgba(143, 107, 240, 0.35), transparent 70%);
}
body.home .ki-cta-dark .wp-block-button__link {
/* 既存の .wp-block-button__link { background: ... !important; } を
確実に上書きするため !important が必要です。 */
background: transparent !important;
color: var(--home-gold-strong) !important;
border: 1.5px solid var(--home-gold);
box-shadow: none;
transition: all 0.25s ease;
}
body.home .ki-cta-dark .wp-block-button__link:hover {
background: rgba(216, 193, 137, 0.1) !important;
box-shadow: 0 0 22px rgba(216, 193, 137, 0.28);
border-color: var(--home-gold-strong);
}
/* ============================================================
* 7. ボタン共通・ヒーローボタン
* ------------------------------------------------------------
* 既存の .wp-block-button__link は !important 付きで配色されているため、
* 同じプロパティ(background/color)を上書きする箇所はすべて !important
* を使用しています。box-shadow等、!importantが元々ない箇所には
* 付けていません。
* ============================================================ */
body.home .wp-block-button__link {
background: linear-gradient(120deg, var(--home-cyan), var(--home-blue)) !important;
color: #04101c !important;
box-shadow: 0 10px 26px rgba(76, 124, 245, 0.35);
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
body.home .wp-block-button__link:hover {
transform: translateY(-2px);
box-shadow: 0 14px 34px rgba(76, 124, 245, 0.5);
}
/* ヒーロー内の主ボタン（既存の非常に詳しいセレクタを、同じ詳しさで上書き） */
body.home .ki-hero-light .wp-block-buttons .wp-block-button:not(.is-style-outline) .wp-block-button__link {
background: linear-gradient(120deg, var(--home-cyan), var(--home-blue)) !important;
box-shadow: 0 10px 26px rgba(76, 124, 245, 0.35);
}
body.home .ki-hero-light .wp-block-buttons .wp-block-button:not(.is-style-outline) .wp-block-button__link:hover {
box-shadow: 0 14px 34px rgba(76, 124, 245, 0.5);
}
/* アウトラインボタン（「お問い合わせ」）はゴールド枠に */
body.home .is-style-outline .wp-block-button__link,
body.home .ki-hero-light .is-style-outline .wp-block-button__link {
background-color: transparent !important;
color: var(--home-gold-strong) !important;
border-color: var(--home-gold) !important;
}
body.home .is-style-outline .wp-block-button__link:hover {
background-color: rgba(216, 193, 137, 0.1) !important;
box-shadow: 0 0 22px rgba(216, 193, 137, 0.28);
}
/* ============================================================
* 8. ヘッダー（HOME表示時のみダーク化。他ページの #masthead は無関係）
* ------------------------------------------------------------
* Kadence本体の header.min.css は子テーマのCSSより後に読み込まれる
* ことを確認しているため、確実に優先させるために !important を使用
* しています。ヘッダーのHTML構造(#masthead等)は一切変更しません。
* ============================================================ */
body.home #masthead {
background: rgba(5, 7, 13, 0.86) !important;
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
border-bottom: 1px solid var(--home-border);
}
body.home .site-title,
body.home .site-title a {
color: var(--home-text) !important;
}
body.home #primary-menu > li > a {
color: var(--home-text-muted) !important;
position: relative;
padding-bottom: 4px;
transition: color 0.25s ease, text-shadow 0.25s ease;
}
body.home #primary-menu > li > a::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 1px;
transform: scaleX(0);
transform-origin: left;
background: linear-gradient(90deg, var(--home-cyan), var(--home-purple));
transition: transform 0.3s ease;
}
body.home #primary-menu > li > a:hover {
color: var(--home-text) !important;
text-shadow: 0 0 10px rgba(90, 200, 255, 0.35);
}
body.home #primary-menu > li > a:hover::after {
transform: scaleX(1);
}
body.home #primary-menu > li.current-menu-item > a {
color: var(--home-gold-strong) !important;
}
/* モバイル用ヘッダー（ハンバーガーメニュー開閉時の背景）も同様にダーク化 */
body.home #mobile-header,
body.home .mobile-bar-container {
background: rgba(5, 7, 13, 0.92) !important;
}
/* ============================================================
* 9. フッター
* ============================================================ */
body.home #colophon {
background: var(--home-bg) !important;
color: var(--home-text-faint);
border-top: 1px solid var(--home-border);
}
body.home #colophon a {
color: var(--home-text-muted) !important;
}
body.home #colophon a:hover {
color: var(--home-gold-strong) !important;
}
/* ============================================================
* 10. スマートフォン対応
* ------------------------------------------------------------
* 新たに追加する余白・サイズ関連の指定はありません。ガラス風の
* backdrop-filter はモバイルSafari/Chromeでも標準対応していますが、
* 念のため処理負荷の高い環境向けに、幅600px以下ではぼかし量を
* 少し弱めます（見た目の破綻防止・パフォーマンス配慮のみが目的で、
* レイアウトや配置は変更しません）。
* ============================================================ */
@media (max-width: 600px) {
body.home .ki-service-card,
body.home .ki-card {
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
}
/* ============================================================
* 11. 動きを減らしたい環境への配慮
* ------------------------------------------------------------
* .ki-reveal / .ki-hero-reveal / .ki-blob については、既存の
* 子テーマCSSにすでに !important 付きの
* @media (prefers-reduced-motion: reduce) { ... } が定義されており、
* このファイルより優先して効きます。
* それに加えて、このファイルで新規に追加した演出
* （.ki-reveal の読み込み時フェードイン、.ki-cta-dark の背景ドリフト、
* カード・ボタンのホバートランジション）についても、確実に停止する
* よう個別に無効化ルールを追加します。
* ============================================================ */
@media (prefers-reduced-motion: reduce) {
body.home .ki-reveal,
body.home .ki-cta-dark {
animation: none !important;
opacity: 1 !important;
transform: none !important;
}
body.home .ki-service-card,
body.home .ki-card,
body.home .wp-block-button__link {
transition: none !important;
}
}
/* ============================================================
* 【外部リソースについて】
* このCSSファイル自体には @import や外部 url() は一切含まれていません。
* 唯一の外部リソースは、functions.php 側で追加する
* Google Fonts (Space Grotesk) の 読み込みのみで、これは
* カード番号等の英数字ラベル(var(--home-font-label))にのみ使用します。
* 本文の日本語フォントは、既存の Noto Sans JP をそのまま使用し、
* 追加の読み込みは発生しません。
* ============================================================ */
/* ============================================================
* 12. こんなお悩み・技術紹介・利用の流れセクションの背景
* ------------------------------------------------------------
* Kadenceの「コンテンツをボックス化」オプションにより、
* .hentry.content-bg に白背景が指定されているため、
* body.home 全体の背景色だけでは透けて見えません。
* ここを上書きすることで、個別に背景指定のないセクション
* （お悩みリスト・技術紹介・利用の流れカードなど）も
* 一括でダーク背景になります。
* ============================================================ */
body.home .hentry.content-bg {
background-color: var(--home-bg) !important;
}
/* ============================================================
* 13. ページタイトルバー（Kadenceの「エントリーヒーロー」機能）
* ------------------------------------------------------------
* HOMEの見出し部分にKadence標準の薄いグレー背景バーが
* 表示されていたため、ダークデザインに合わせます。
* 見出し文字色は既存の body.home h1 ルールで既にほぼ白色に
* なっているため、背景色のみの変更で読みやすくなります。
* ============================================================ */
body.home .entry-hero-container-inner {
background-color: var(--home-bg) !important;
}
/* ============================================================================
* ▲▲▲ 白ベースリニューアル 追加分 (2026-09-22) ここから ▼▼▼
* ------------------------------------------------------------------------
* 目的：ページ全体が暗く重い印象になっていたため、
* ヘッダー・ヒーロー・最下部CTAはダークデザインを維持したまま、
* その間の本文セクション（お悩み／対応業務／特徴／技術／流れ）を
* 白〜薄いグレー基調に変更し、明るく清潔感のある企業サイトにする。
*
* 【元に戻す場合】
* このコメントブロック（ここから「▲▲▲ ... ここまで ▲▲▲」まで）を
* まるごと削除するだけで、直前までの状態（全面ダーク）に戻ります。
* 既存のセクション（1〜13）は一切変更していません。
*
* 【対象セクションの特定方法】
* .ki-home の直接の子要素のうち、.ki-cta-dark を除く .ki-section を
* 対象にしています。現在の構成では以下の5セクションが該当します。
* 1. こんなお悩みはありませんか？
* 2. #work（EC・SNS運営に必要な業務をまとめてサポート／対応業務カード）
* 3. サービスの特徴
* 4. 利用の流れ
* 5. EC・SNS業務代行センターを支える技術
* ヘッダー・ヒーロー(.ki-hero-light)・CTA(.ki-cta-dark)は対象外です。
* ============================================================================ */
body.home {
--home-light-bg: #ffffff;
--home-light-card-bg: #ffffff;
--home-light-card-bg-2: #f4f6fb;
--home-light-border: rgba(27, 42, 78, 0.09);
--home-light-heading: #1b2a4e;
--home-light-text-muted: #5b5f73;
--home-light-link: var(--home-blue);
--home-light-link-hover: var(--home-purple);
}
body.home .ki-home > .ki-section:not(.ki-cta-dark) {
background-color: var(--home-light-bg) !important;
}
body.home .ki-home > .ki-section:not(.ki-cta-dark) h1,
body.home .ki-home > .ki-section:not(.ki-cta-dark) h2,
body.home .ki-home > .ki-section:not(.ki-cta-dark) h3,
body.home .ki-home > .ki-section:not(.ki-cta-dark) h4,
body.home .ki-home > .ki-section:not(.ki-cta-dark) .wp-block-heading {
color: var(--home-light-heading);
}
body.home .ki-home > .ki-section:not(.ki-cta-dark) p {
color: var(--home-light-text-muted);
}
body.home .ki-home > .ki-section:not(.ki-cta-dark) a {
color: var(--home-light-link);
}
body.home .ki-home > .ki-section:not(.ki-cta-dark) a:hover {
color: var(--home-light-link-hover);
}
body.home .ki-home > .ki-section:not(.ki-cta-dark) p[style*="color:#5b5f73"],
body.home .ki-home > .ki-section:not(.ki-cta-dark) p[style*="color: #5b5f73"] {
color: #5b5f73 !important;
}
body.home .ki-home > .ki-section:not(.ki-cta-dark) .ki-service-card,
body.home .ki-home > .ki-section:not(.ki-cta-dark) .ki-card {
background: linear-gradient(160deg, var(--home-light-card-bg), var(--home-light-card-bg-2));
border: 1px solid var(--home-light-border);
backdrop-filter: none;
-webkit-backdrop-filter: none;
box-shadow: 0 8px 24px rgba(27, 42, 78, 0.06);
color: var(--home-light-text-muted);
}
body.home .ki-home > .ki-section:not(.ki-cta-dark) .ki-service-card:hover,
body.home .ki-home > .ki-section:not(.ki-cta-dark) .ki-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.home .ki-home > .ki-section:not(.ki-cta-dark) .ki-service-card h3,
body.home .ki-home > .ki-section:not(.ki-cta-dark) .ki-card h3 {
color: var(--home-light-heading);
}
body.home .ki-home > .ki-section:not(.ki-cta-dark) .ki-service-card p,
body.home .ki-home > .ki-section:not(.ki-cta-dark) .ki-card p {
color: var(--home-light-text-muted);
}
body.home .ki-home > .ki-section:not(.ki-cta-dark) .ki-service-arrow {
color: var(--home-light-link);
}
body.home .ki-home > .ki-section:not(.ki-cta-dark) .ki-service-card:hover .ki-service-arrow {
color: var(--home-light-link-hover);
}
/* ロゴ周辺に白い背景を敷き、ダークヘッダー上でも視認性を保ちます
（ヘッダー全体はダークデザインのまま維持し、ロゴアイコンの
すぐ周りのみ変更します）。 */
body.home .ki-symbol {
background-color: #ffffff;
border-radius: 10px;
padding: 3px;
box-sizing: border-box;
}
/* ============================================================================
* ▲▲▲ 白ベースリニューアル 追加分 (2026-09-22) ここまで ▲▲▲
* ============================================================================ */
/* ============================================================================
* ▲▲▲ 白ベース 修正追加 (2026-09-22 その2) ここから ▼▼▼
* ------------------------------------------------------------------------
* #work は id セレクタを使った既存のルール
* （body.home #work { background-color: var(--home-bg-2) !important; }）
* の方が、上記のクラスのみのセレクタより詳細度が高く、
* 白背景化が上書きできていませんでした。
* 同じIDセレクタで上書きします。
* 元に戻す場合はこのブロックを削除してください。
* ============================================================================ */
body.home #work {
background-color: var(--home-light-bg) !important;
}
/* ============================================================================
* ▲▲▲ 白ベース 修正追加 (2026-09-22 その2) ここまで ▲▲▲
* ============================================================================ */
/* ============================================================================
* ▲▲▲ 未来型テクノロジー背景装飾 追加分 (2026-09-23) ここから ▼▼▼
* ------------------------------------------------------------------------
* 目的：白ベース化した5セクション（お悩み／対応業務(#work)／サービスの特徴／
* 利用の流れ／支える技術）の「背景」にのみ、ごく薄いグリッド・ドット・
* 六角形パターン・シアン〜パープルのにじみ光・ゴールドの細いラインを
* 追加し、テクノロジー企業らしい上品な質感を出す。
* 【実装方法】各セクション要素自身の background-image に複数の
* グラデーションを重ねるのみで、疑似要素・新規HTML・画像素材は
* 一切使用しない。background-image は要素の内容より必ず背面に描画される
* ため、見出し・本文・カードの可読性やスタッキング順には影響しない。
* カード自体（.ki-service-card / .ki-card）の background は変更しない。
* 【元に戻す場合】このコメントブロックをまるごと削除するだけで、
* 直前までの白ベース状態（装飾なし）に戻ります。
* ============================================================================ */
body.home .ki-home > .ki-section:nth-child(2) {
background-image:
radial-gradient(circle, rgba(27, 42, 78,0.05) 1px, transparent 1.6px),
radial-gradient(circle at 10% 15%, rgba(53, 214, 224,0.09), transparent 42%);
background-size: 26px 26px, 100% 100%;
background-position: 0 0, 0 0;
background-repeat: repeat, no-repeat;
}
body.home #work {
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.04) 0px, rgba(27, 42, 78,0.04) 1px, transparent 1px, transparent 48px),
repeating-linear-gradient(to right, rgba(27, 42, 78,0.04) 0px, rgba(27, 42, 78,0.04) 1px, transparent 1px, transparent 48px),
radial-gradient(circle at 90% 85%, rgba(76, 124, 245,0.09), transparent 45%);
background-size: 100% 2px, auto, auto, 100% 100%;
background-position: top, 0 0, 0 0, 0 0;
background-repeat: no-repeat, repeat, repeat, no-repeat;
}
body.home .ki-home > .ki-section:nth-child(4) {
background-image:
linear-gradient(30deg, rgba(76, 124, 245,0.045) 12%, transparent 12.5%, transparent 87%, rgba(76, 124, 245,0.045) 87.5%, rgba(76, 124, 245,0.045)),
linear-gradient(150deg, rgba(76, 124, 245,0.045) 12%, transparent 12.5%, transparent 87%, rgba(76, 124, 245,0.045) 87.5%, rgba(76, 124, 245,0.045)),
linear-gradient(30deg, rgba(76, 124, 245,0.045) 12%, transparent 12.5%, transparent 87%, rgba(76, 124, 245,0.045) 87.5%, rgba(76, 124, 245,0.045)),
linear-gradient(150deg, rgba(76, 124, 245,0.045) 12%, transparent 12.5%, transparent 87%, rgba(76, 124, 245,0.045) 87.5%, rgba(76, 124, 245,0.045)),
linear-gradient(60deg, rgba(143, 107, 240,0.035) 25%, transparent 25.5%, transparent 75%, rgba(143, 107, 240,0.035) 75.5%, rgba(143, 107, 240,0.035)),
linear-gradient(60deg, rgba(143, 107, 240,0.035) 25%, transparent 25.5%, transparent 75%, rgba(143, 107, 240,0.035) 75.5%, rgba(143, 107, 240,0.035)),
radial-gradient(circle at 88% 12%, rgba(53, 214, 224,0.08), transparent 45%);
background-size: 56px 98px, 56px 98px, 56px 98px, 56px 98px, 56px 98px, 56px 98px, 100% 100%;
background-position: 0 0, 0 0, 28px 49px, 28px 49px, 0 0, 28px 49px, 0 0;
background-repeat: repeat, repeat, repeat, repeat, repeat, repeat, no-repeat;
}
body.home .ki-home > .ki-section:nth-child(5) {
background-image:
repeating-linear-gradient(135deg, rgba(76, 124, 245,0.045) 0px, rgba(76, 124, 245,0.045) 1px, transparent 1px, transparent 64px),
radial-gradient(circle, rgba(27, 42, 78,0.045) 1px, transparent 1.6px),
radial-gradient(circle at 92% 88%, rgba(143, 107, 240,0.08), transparent 45%);
background-size: auto, 30px 30px, 100% 100%;
background-position: 0 0, 0 0, 0 0;
background-repeat: repeat, repeat, no-repeat;
}
body.home .ki-home > .ki-section:nth-child(6) {
background-image:
linear-gradient(90deg, transparent 8%, rgba(216, 193, 137, 0.5) 50%, transparent 92%),
linear-gradient(30deg, rgba(53, 214, 224,0.05) 12%, transparent 12.5%, transparent 87%, rgba(53, 214, 224,0.05) 87.5%, rgba(53, 214, 224,0.05)),
linear-gradient(150deg, rgba(53, 214, 224,0.05) 12%, transparent 12.5%, transparent 87%, rgba(53, 214, 224,0.05) 87.5%, rgba(53, 214, 224,0.05)),
linear-gradient(30deg, rgba(53, 214, 224,0.05) 12%, transparent 12.5%, transparent 87%, rgba(53, 214, 224,0.05) 87.5%, rgba(53, 214, 224,0.05)),
linear-gradient(150deg, rgba(53, 214, 224,0.05) 12%, transparent 12.5%, transparent 87%, rgba(53, 214, 224,0.05) 87.5%, rgba(53, 214, 224,0.05)),
linear-gradient(60deg, rgba(143, 107, 240,0.04) 25%, transparent 25.5%, transparent 75%, rgba(143, 107, 240,0.04) 75.5%, rgba(143, 107, 240,0.04)),
linear-gradient(60deg, rgba(143, 107, 240,0.04) 25%, transparent 25.5%, transparent 75%, rgba(143, 107, 240,0.04) 75.5%, rgba(143, 107, 240,0.04)),
radial-gradient(circle at 8% 90%, rgba(143, 107, 240,0.09), transparent 45%),
radial-gradient(circle at 92% 10%, rgba(53, 214, 224,0.08), transparent 42%);
background-size: 100% 2px, 56px 98px, 56px 98px, 56px 98px, 56px 98px, 56px 98px, 56px 98px, 100% 100%, 100% 100%;
background-position: top, 0 0, 0 0, 28px 49px, 28px 49px, 0 0, 28px 49px, 0 0, 0 0;
background-repeat: no-repeat, repeat, repeat, repeat, repeat, repeat, repeat, no-repeat, no-repeat;
}
/* ▲▲▲ 未来型テクノロジー背景装飾 追加分 (2026-09-23) ここまで ▲▲▲ */
/* ============================================================================
* ▲▲▲ HOME 全体白ベース化 追加分 (2026-09-23) ここから ▼▼▼
* ------------------------------------------------------------------------
* 目的：既存の5つの白背景セクションだけでなく、HOMEページ全体
* （bodyの背景・ヒーローエリア）を白〜薄いグレー基調に統一する。
* ヘッダー・フッター・CTA（.ki-cta-dark）は対象外とし、
* これまで通りダークカラーのアクセントとして維持する。
* ロゴ周辺の白背景（.ki-symbol）にも変更を加えない。
* 【実装方法】既存の未来型グリッド・にじみ光（ブロブ）・
* フェードイン等のモーションはそのまま維持し、色のみを
* 白背景向けに調整する。
* 【元に戻す場合】このコメントブロックをまるごと削除するだけで、
* 直前までの状態（ヒーロー部分がダーク）に戻ります。
* ============================================================================ */
/* 1. body.home 自体の背景を白に変更（セクション間の余白等で
濃色が透けて見えるのを防ぐ。ヘッダー・フッター・CTAは
それぞれ独自の背景色を持つため、この変更の影響を受けない） */
body.home {
background-color: #ffffff;
}
/* 2. ヒーローエリアの背景を、白から薄いグレー・薄い紫へ
グラデーションする明るい配色に変更 */
body.home .ki-hero-light {
background: linear-gradient(180deg, #ffffff 0%, #f7f8fb 55%, #f1eefb 100%);
}
/* 3. ヒーロー内の薄いグリッド線を、白背景でも視認できる
濃紺の極薄ラインに変更（他の白セクションと同じ配色） */
body.home .ki-bg-grid {
background-image:
linear-gradient(rgba(27, 42, 78, 0.05) 1px, transparent 1px),
linear-gradient(90deg, rgba(27, 42, 78, 0.05) 1px, transparent 1px);
background-size: 44px 44px;
}
/* 4. ヒーロー見出し(H1)のグラデーション文字を、白背景でも
読みやすいネイビー→ブルー→パープルの配色に変更
（同系色は維持し、コントラストのみ改善） */
body.home .ki-hero-light h1 {
background: linear-gradient(120deg, var(--home-light-heading) 0%, var(--home-blue) 55%, var(--home-purple) 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
/* 5. ヒーロー内の本文（段落）の文字色を、他の白セクションと
同じ落ち着いたグレーに統一（白背景での可読性を確保） */
body.home .ki-hero-light p {
color: var(--home-light-text-muted);
}
body.home .ki-hero-light p[style*="color"] {
color: var(--home-light-text-muted) !important;
}
/* にじみ光（ブロブ）・フェードイン等のモーションは既存のまま
変更しない（色・アニメーションともに現状維持） */
/* ▲▲▲ HOME 全体白ベース化 追加分 (2026-09-23) ここまで ▲▲▲ */
/* ============================================================================
* ▲▲▲ ki-logo-stage: 未来型ロゴステージ 追加分 (2026-09-24) ここから ▼▼▼
* ------------------------------------------------------------------------
* 目的：HOME最上部にある会社の正式ロゴ画像（メディアID=72／画像ファイル自体は
* 一切加工・変更しない）を囲む表示エリアを、「未来型ステージ」風に装飾する。
*
* 【対応するHTML変更】
* HOME本文側で、既存の画像ブロックを
* …既存の画像ブロック…
* という新しいグループブロックで囲んだ（画像ブロック自体の中身・属性は無変更）。
* これ以外のHOME本文（見出し・説明文・ボタン・各セクション等）は一切変更していない。
*
* 【デザインの考え方】
* - 背景：黒〜ダークネイビーのグラデーション（既存の --home-bg / -bg-2 / -bg-3 を再利用）
* - グロー：シアン・ブルー・パープルの淡い光を数箇所に配置（既存の --home-cyan /
* -blue / -purple を再利用。不透明度は0.06〜0.14程度に抑え、ロゴより目立たないようにする）
* - 薄いテクノロジー系グリッド：::before疑似要素の背景に格子状の極薄ラインを敷き、
* 中央に向けてマスクでフェードさせることでロゴ周辺の可読性を確保
* - ゆっくり移動する光：::after疑似要素だけに18秒周期のドリフトアニメーションを
* 適用し、グリッド(::before)とは別レイヤーにすることで、background-position の
* レイヤー数不一致によるアニメーション崩れを防止
* - 立体感・縁取り：box-shadowを内側(inset)と外側に重ねることで、
* 輪郭の明るいベベルと、外側への柔らかい沈み込みを表現
* - 角丸・パディング：clamp()で画面幅に応じて滑らかに変化させる
* - ロゴ画像そのものには一切フィルター・シャドウ・加工を加えない
* （変更するのはあくまで「囲むフレーム」のみ）
*
* 【安全策】
* - 全てのルールを body.home .ki-logo-stage に限定しているため、
* SERVICE・ABOUT等の他ページには一切影響しない。
* - 新規に追加する疑似要素のアニメーション(::after のドリフト)は、
* prefers-reduced-motion: reduce のときに個別に停止する。
*
* 【元に戻す場合】
* このコメントブロック（ここから「▲▲▲ ... ここまで ▲▲▲」まで）を
* まるごと削除するだけで、ロゴステージ装飾のみを取り除ける
* （HOME本文側のグループブロックのラップを外す場合は別途本文編集が必要）。
* ============================================================================ */
body.home .ki-logo-stage {
position: relative;
overflow: hidden;
isolation: isolate;
max-width: 980px;
margin: clamp(10px, 2.5vw, 26px) auto clamp(18px, 4vw, 32px);
padding: clamp(12px, 3vw, 24px) clamp(14px, 4vw, 28px);
border-radius: 20px;
background:
radial-gradient(circle at 12% 15%, rgba(53, 214, 224, 0.20), transparent 48%),
radial-gradient(circle at 90% 85%, rgba(143, 107, 240, 0.22), transparent 48%),
radial-gradient(circle at 88% 10%, rgba(76, 124, 245, 0.16), transparent 42%),
linear-gradient(155deg, #060a14 0%, #0c1526 55%, #16203a 100%);
border: 1px solid rgba(120, 170, 255, 0.16);
box-shadow:
0 1px 0 rgba(255, 255, 255, 0.08) inset,
0 0 0 1px rgba(53, 214, 224, 0.08) inset,
0 22px 46px rgba(5, 7, 13, 0.32),
0 0 40px rgba(76, 124, 245, 0.16);
}
/* 薄いテクノロジー系グリッド + 上辺の細い発光ライン（静止レイヤー）
ロゴ画像自体が不透明なため、フレーム全体に均一に表示してよい
（中央だけマスクで薄める処理は行わない＝端でも見える） */
body.home .ki-logo-stage::before {
content: "";
position: absolute;
inset: 0;
background-image:
linear-gradient(90deg, transparent 4%, rgba(53, 214, 224, 0.55) 50%, transparent 96%),
linear-gradient(90deg, transparent 4%, rgba(143, 107, 240, 0.45) 50%, transparent 96%),
linear-gradient(rgba(255, 255, 255, 0.09) 1px, transparent 1px),
linear-gradient(90deg, rgba(255, 255, 255, 0.09) 1px, transparent 1px);
background-size: 100% 1px, 100% 1px, 24px 24px, 24px 24px;
background-position: top, bottom, 0 0, 0 0;
background-repeat: no-repeat, no-repeat, repeat, repeat;
}
/* ゆっくり移動する光（アニメーション専用レイヤー） */
body.home .ki-logo-stage::after {
content: "";
position: absolute;
inset: -30%;
background:
radial-gradient(circle at 28% 32%, rgba(53, 214, 224, 0.26), transparent 52%),
radial-gradient(circle at 70% 65%, rgba(143, 107, 240, 0.26), transparent 52%);
background-size: 150% 150%;
filter: blur(5px);
animation: ki-logo-stage-drift 20s ease-in-out infinite;
pointer-events: none;
}
@keyframes ki-logo-stage-drift {
0% { background-position: 0% 0%, 100% 100%; }
50% { background-position: 35% 25%, 65% 75%; }
100% { background-position: 0% 0%, 100% 100%; }
}
/* ロゴ画像本体：位置調整のみで、画像自体には一切手を加えない */
body.home .ki-logo-stage .wp-block-image {
position: relative;
z-index: 1;
margin: 0;
text-align: center;
}
body.home .ki-logo-stage .wp-block-image img {
max-width: 100%;
height: auto;
}
/* スマートフォン：余白をやや詰め、ぼかし演出を軽量化 */
@media (max-width: 600px) {
body.home .ki-logo-stage {
border-radius: 16px;
padding: clamp(14px, 6vw, 22px) clamp(14px, 5vw, 20px);
}
body.home .ki-logo-stage::after {
filter: blur(4px);
}
}
/* 動きを減らしたい環境への配慮：ドリフトアニメーションのみ停止し、
グリッド・グロー・枠自体はそのまま表示する */
@media (prefers-reduced-motion: reduce) {
body.home .ki-logo-stage::after {
animation: none !important;
background-position: 0% 0%, 100% 100% !important;
}
}
/* ▲▲▲ ki-logo-stage: 未来型ロゴステージ 追加分 (2026-09-24) ここまで ▲▲▲ */
/* ============================================================================
* ▲▲▲ ki-logo-stage: 外側の黒い背景を除去 追加分 (2026-09-24 その2) ここから ▼▼▼
* ------------------------------------------------------------------------
* 目的：HOME先頭の .ki-logo-stage の周囲（左右の余白・上下の隙間）に、
* article.entry.content-bg（Kadenceの「コンテンツをボックス化」機能が
* 使う要素。本ファイル冒頭セクション12で背景色を var(--home-bg) に
* 固定していた）の暗い背景色がそのまま見えてしまっていたため、
* ここだけ白に上書きする。
*
* 【安全性の確認】
* HOME内の他の要素（.ki-hero-light／各 .ki-section／.ki-cta-dark／
* ヘッダー／フッター）は、いずれもこのarticle要素の背景色に頼らず、
* 各要素が自分自身の背景色を明示的に指定している（白ベース化の
* 過去の追加分、およびCTA・ヘッダー・フッターの既存指定）。そのため、
* このarticle自体を白にしても、他の見た目には一切影響しない
* （ロゴステージ周辺の隙間にだけ見えていた暗い背景が消えるだけ）。
* SERVICE・ABOUT等、body.homeを持たない他ページには影響しない。
*
* 【元に戻す場合】
* この1ブロックを削除するだけで、セクション12の暗い背景色が
* 再び有効になる。
* ============================================================================ */
body.home .hentry.content-bg {
background-color: #ffffff !important;
}
/* ▲▲▲ ki-logo-stage: 外側の黒い背景を除去 追加分 (2026-09-24 その2) ここまで ▲▲▲ */
/* ============================================================================
* ▲▲▲ ヒーロー（EC・SNS業務代行センター）レイアウト再構成 追加分 (2026-09-24 その3) ここから ▼▼▼
* ------------------------------------------------------------------------
* 目的：タイトル・説明文（2つの段落）・ボタンが横一列に詰まっていた
* ヒーロー部分を、「1段目：タイトル」「2段目：説明文（左）＋ボタン（右）」の
* 2段構成に変更する。文章・ボタンラベル・リンク先・HTML構造は一切変更せず、
* CSS Grid による再配置のみで実現する。
*
* 【対象】body.home .ki-hero-light の直接の子要素（h1・p×2・.wp-block-buttons）
* のみ。.ki-hero-blobs は position:absolute で背景装飾のため対象外。
* ロゴステージ（.ki-logo-stage）・他のセクションには一切影響しない。
*
* 【モバイル(768px以下)】単純に1カラムで縦積み（タイトル→説明文1→説明文2→
* ボタン）。既存のDOM順序をそのまま使うため、並び替えの必要がない。
* 【PC(769px以上)】1段目にタイトルを全幅で配置し、2段目を「説明文（左）／
* ボタン（右・縦積み）」の2カラムにする。ボタン列は説明文2行分の高さに
* 対して中央揃え。
* ============================================================================ */
body.home .ki-hero-light {
display: grid;
grid-template-columns: 1fr;
grid-template-areas:
"title"
"desc1"
"desc2"
"buttons";
row-gap: clamp(10px, 3vw, 16px);
justify-items: center;
}
body.home .ki-hero-light > h1 {
grid-area: title;
margin: 0;
}
body.home .ki-hero-light > p:nth-of-type(1) {
grid-area: desc1;
margin: 0;
}
body.home .ki-hero-light > p:nth-of-type(2) {
grid-area: desc2;
margin: 0;
}
body.home .ki-hero-light > .wp-block-buttons {
grid-area: buttons;
flex-direction: column;
align-items: center;
margin: 0;
}
@media (min-width: 769px) {
body.home .ki-hero-light {
grid-template-columns: minmax(0, 1fr) auto;
grid-template-areas:
"title title"
"desc1 buttons"
"desc2 buttons";
column-gap: clamp(24px, 4vw, 56px);
row-gap: clamp(6px, 1.5vw, 10px);
justify-items: start;
}
body.home .ki-hero-light > h1,
body.home .ki-hero-light > p:nth-of-type(1),
body.home .ki-hero-light > p:nth-of-type(2) {
text-align: left !important;
}
body.home .ki-hero-light > .wp-block-buttons {
align-self: center;
align-items: stretch;
}
}
/* ▲▲▲ ヒーロー（EC・SNS業務代行センター）レイアウト再構成 追加分 (2026-09-24 その3) ここまで ▲▲▲ */
/* ============================================================================
* ▲▲▲ HOME: ページ上部の「HOME」タイトル黒帯を非表示にし、ロゴステージを繰り上げ 追加分 (2026-09-24 その4) ここから ▼▼▼
* ------------------------------------------------------------------------
* 対象：HOME最上部にあった、ページタイトル「HOME」を表示するための黒い帯
* (Kadenceのページヒーロー領域 .entry-hero / .entry-hero-container-inner)。
*
* 【変更内容】
* - HOMEページに限り、このタイトル黒帯セクションを非表示にする。
* - タイトル文字列「HOME」自体も同時に非表示になる（ユーザー指示による）。
* - 黒帯が占めていた領域がなくなることで、ロゴステージがヘッダー直下の
* 自然な位置に来る（ロゴステージ自身のCSSは一切変更しない）。
*
* 【安全策】
* - body.home に限定しているため、SERVICE・ABOUT等の他ページの
* ページタイトル表示には一切影響しない。
* - ロゴステージ（.ki-logo-stage）、EC・SNS業務代行センターのヒーロー
* （.ki-hero-light）、ページ最下部のCTAセクション（.ki-cta-dark）は
* 一切変更していない。
* - 文章・画像・ボタン・リンク先も変更していない（表示/非表示のみ）。
*
* 【元に戻す場合】
* このコメントブロック（ここから「ここまで」まで）を削除するだけで、
* HOMEのページタイトル黒帯を元の表示状態に戻せる。
* ============================================================================ */
body.home .entry-hero.page-hero-section {
display: none;
}
/* ▲▲▲ HOME: ページ上部の「HOME」タイトル黒帯を非表示 追加分 (2026-09-24 その4) ここまで ▲▲▲ */
/* ============================================================================
* ▲▲▲ HOME: ヒーロー下の「AI・IT活用業務」補足文 追加分 (2026-09-24 その5) ここから ▼▼▼
* ------------------------------------------------------------------------
* 対象：EC・SNS業務代行センターの説明・ボタンの直下に追加した1行の説明文
* (.ki-home-capability-note / 段落ブロック)。
*
* 【変更内容】
* - AI・システム開発、業務効率化・自動化、Web制作、動画・広告制作など、
* AI/ITを活用した業務にも対応していることを伝える短い説明文。
* - デフォルトの文字色のままだと白背景で視認性が低いため、既存の
* ライトセクション本文と同じ色・センター揃えに統一した。
*
* 【安全策】
* - body.home に限定。ロゴステージ・ヒーロー内部のグリッド・
* 既存の文章/ボタン/リンク先は一切変更していない。
* - 新しい段落1つに対する見た目調整のみ。
* ============================================================================ */
body.home .ki-home-capability-note {
max-width: 760px;
margin: 0 auto clamp(28px, 5vw, 40px);
padding: 0 clamp(16px, 4vw, 24px);
text-align: center;
color: var(--home-light-text-muted);
font-size: clamp(0.95rem, 0.85rem + 0.4vw, 1.0625rem);
line-height: 1.8;
}
@media (max-width: 600px) {
body.home .ki-home-capability-note {
font-size: 0.95rem;
line-height: 1.7;
}
}
/* ▲▲▲ HOME: ヒーロー下の「AI・IT活用業務」補足文 追加分 (2026-09-24 その5) ここまで ▲▲▲ */
/* ============================================================================
* ▲▲▲ HOME: 「NETの便利屋」ブロック 追加分 (2026-09-25) ここから ▼▼▼
* ------------------------------------------------------------------------
* 対象：EC・SNS業務代行センター（.ki-hero-light）のすぐ下に追加した
* 2つ目のサービスブロック（.ki-utility-hero）。
* KI CorporationのAI・IT・Web関連サービス（AI・システム開発、
* AI業務効率化・自動化、Web制作、動画・広告制作＝SERVICEページの
* 分類と一致）をまとめて相談できる窓口という位置付け。
*
* 【デザインの考え方】
* - 既存のEC・SNS業務代行センター（.ki-hero-light）と同じ「白〜淡い
* ラベンダー系グラデーション背景＋中央揃え＋グラデーション文字の見出し」
* という同一デザイン系統を、独立した新しいクラスで再現している
* （.ki-hero-lightクラス自体は再利用せず、EC/SNS側のグリッドレイアウト
* ルールと干渉しないようにするため）。
* - 見出しはSEO上h1が重複しないようh2を使用。
* - 本文（.ki-utility-desc）は既存ライトセクション本文と同じ配色・
* フォントサイズで統一。
* - 親しみを出す一言（.ki-utility-friendly）は本文よりやや小さく、
* 斜体・柔らかい配色にして温度感を分けている。
*
* 【安全策】
* - body.home に限定。ロゴステージ・EC/SNSヒーロー内部のグリッド
* （.ki-hero-light関連ルール）・既存の文章・ボタン・リンク先は
* 一切変更していない。
* - 新しいクラス（.ki-utility-hero）にのみ影響するスタイル。
* ============================================================================ */
body.home .ki-utility-hero {
position: relative;
overflow: hidden;
background: linear-gradient(180deg, var(--home-bg) 0%, var(--home-bg-2) 55%, var(--home-bg-3) 100%);
padding: clamp(40px, 7vw, 72px) clamp(20px, 6vw, 32px);
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
row-gap: clamp(12px, 2.5vw, 18px);
/* ▼ 2026-09-25 追記: 「大きな黒い箱」に見えないよう、
ロゴステージ（.ki-logo-stage）と同じ手法（極細ボーダー＋
多層box-shadowによる上品な縁取り＋角丸）を再利用して、
周囲に細い枠線と余白を持たせる。背景色・グラデーションは変更しない。 */
margin-left: clamp(12px, 4vw, 40px);
margin-right: clamp(12px, 4vw, 40px);
width: auto;
border-radius: 20px;
border: 0.8px solid rgba(120, 170, 255, 0.16);
box-shadow:
rgba(255, 255, 255, 0.08) 0px 1px 0px 0px inset,
rgba(53, 214, 224, 0.08) 0px 0px 0px 1px inset,
rgba(5, 7, 13, 0.28) 0px 16px 36px 0px,
rgba(76, 124, 245, 0.14) 0px 0px 32px 0px;
}
body.home .ki-utility-hero h2 {
margin: 0;
font-size: clamp(1.7rem, 4vw, 2.5rem);
line-height: 1.4;
background-image: linear-gradient(120deg, var(--home-cyan) 0%, var(--home-blue) 55%, var(--home-purple) 100%);
background-clip: text;
-webkit-background-clip: text;
color: transparent;
-webkit-text-fill-color: transparent;
}
body.home .ki-utility-desc {
margin: 0;
max-width: 760px;
color: var(--home-light-text-muted);
font-size: clamp(1rem, 0.9rem + 0.4vw, 1.15rem);
line-height: 1.8;
}
body.home .ki-utility-friendly {
margin: 0;
max-width: 620px;
color: var(--home-light-text-muted);
font-style: italic;
font-size: clamp(0.9rem, 0.85rem + 0.2vw, 1rem);
line-height: 1.9;
opacity: 0.9;
}
@media (max-width: 600px) {
body.home .ki-utility-hero {
padding: clamp(32px, 8vw, 48px) 20px;
margin-left: 12px;
margin-right: 12px;
border-radius: 16px;
}
body.home .ki-utility-desc {
font-size: 0.95rem;
}
body.home .ki-utility-friendly {
font-size: 0.88rem;
}
}
/* ▲▲▲ HOME: 「NETの便利屋」ブロック 追加分 (2026-09-25) ここまで ▲▲▲ */
/* ▲▲▲ HOME: 「AI・ITよろず相談」控えめな演出アニメーション 追加分 (2026-09-25 その2) ここから ▲▲▲
* 既存の .ki-reveal / @keyframes ki-home-fade-up（読み込み時に一度だけ再生される
* フェードアップ。過去にスクロール連動JS判定が環境依存で失敗した経緯があるため、
* HOMEページではこの読み込み時アニメーション方式に統一されている）をそのまま
* 再利用し、新しいJS判定は追加しない。
* カードの浮遊・背景の光の移動のみ新規の @keyframes とし、
* prefers-reduced-motion: reduce のユーザーにはこれらの動きを一切出さない
* （既存の子テーマ style.css 側の @media (prefers-reduced-motion: reduce) { .ki-reveal { ... } }
* が .ki-reveal 系にはそのまま効くため、ここでは重複定義しない）。
* 既存のレイアウト・文字・色・レスポンシブ幅は一切変更していない。
*/
/* 見出し→説明文→相談例4行、の順に時間差でフェードアップ（.ki-revealは元々ある仕組み） */
body.home .ki-utility-hero .ki-utility-desc.ki-reveal {
animation-delay: 0.15s;
}
body.home .ki-utility-hero .ki-utility-line {
display: inline-block;
}
body.home .ki-utility-hero .ki-utility-line-1 { animation-delay: 0.3s; }
body.home .ki-utility-hero .ki-utility-line-2 { animation-delay: 0.45s; }
body.home .ki-utility-hero .ki-utility-line-3 { animation-delay: 0.6s; }
body.home .ki-utility-hero .ki-utility-line-4 { animation-delay: 0.75s; }
/* カード背景の柔らかい光（常時は静止表示。動きはprefers-reduced-motionの分岐内で付与） */
body.home .ki-utility-hero::before {
content: "";
position: absolute;
inset: -15%;
background:
radial-gradient(circle at 28% 30%, rgba(53, 214, 224, 0.16), transparent 55%),
radial-gradient(circle at 75% 72%, rgba(143, 107, 240, 0.16), transparent 55%);
z-index: 0;
pointer-events: none;
}
body.home .ki-utility-hero > * {
position: relative;
z-index: 1;
}
/* 動きを許可する環境でのみ: カードのごく緩やかな浮遊 + 背景光のゆっくりした移動 + ホバーで軽く浮く */
@media (prefers-reduced-motion: no-preference) {
body.home .ki-utility-hero {
--ki-utility-lift: 0px;
animation: ki-utility-float 9s ease-in-out infinite;
will-change: transform;
}
@keyframes ki-utility-float {
0%, 100% { transform: translateY(calc(-3px + var(--ki-utility-lift))); }
50% { transform: translateY(calc(3px + var(--ki-utility-lift))); }
}
body.home .ki-utility-hero::before {
animation: ki-utility-glow-drift 26s ease-in-out infinite alternate;
}
@keyframes ki-utility-glow-drift {
0% { transform: translate(0, 0); }
100% { transform: translate(4%, -3%); }
}
}
@media (hover: hover) and (pointer: fine) {
body.home .ki-utility-hero:hover {
--ki-utility-lift: -6px;
}
}
/* スマホでは浮遊・光の移動をより控えめ・より遅くする */
@media (max-width: 600px) and (prefers-reduced-motion: no-preference) {
body.home .ki-utility-hero {
animation-duration: 11s;
}
@keyframes ki-utility-float {
0%, 100% { transform: translateY(calc(-1.5px + var(--ki-utility-lift))); }
50% { transform: translateY(calc(1.5px + var(--ki-utility-lift))); }
}
body.home .ki-utility-hero::before {
animation-duration: 34s;
}
}
/* ▲▲▲ HOME: 「AI・ITよろず相談」控えめな演出アニメーション 追加分 (2026-09-25 その2) ここまで ▲▲▲ */
/* ▼▼▼ HOME: 「AI・ITよろず相談」複数エフェクト強化 追加分 (2026-09-25 その3) ここから ▼▼▼
* 目的: 単純な浮遷だけでなく、カード登場・枠の光の巡回・背景光・見出しの呼吸するようなグロー・相談文のリズム・ホバー時の質感・マウス追従グロー(PC限定)を組み合わせ、、2026 既存のレイアウト・文字・色・レスポンシブ幅、その2の浮遷/背景光/ホバーの仕組みは壊さず、その上に追加・上書きする形で実装する。ゲーミング的な派手なネオンにならないよう、色は既存のシアン/ブルー/パープルのトーンのみを使い、発光の強さは弱めに押える。
* カスタムプロパティを transition で滑らかに変化させるため @property を使用（未対応ブラウザでは単に補間されないだけで、表示が壊れることはない）。
*/
@property --ki-utility-lift {
syntax: '';
inherits: false;
initial-value: 0px;
}
@property --ki-border-angle {
syntax: '';
inherits: false;
initial-value: 0deg;
}
/* カード本体: ホバー時の浮き上がり・影の変化を滑らかに */
body.home .ki-utility-hero {
transition: --ki-utility-lift 0.4s ease, box-shadow 0.4s ease;
}
/* 1. カードの登場（読み込み時に一度だけ。既存の方針を踏袖し、スクロール連動JSは使わない） */
@media (prefers-reduced-motion: no-preference) {
body.home .ki-utility-hero {
opacity: 0;
animation: ki-utility-card-in 0.9s cubic-bezier(0.2, 0.7, 0.3, 1) both,
ki-utility-float 9s ease-in-out infinite;
animation-delay: 0s, 0.9s;
}
@keyframes ki-utility-card-in {
from {
opacity: 0;
transform: translateY(30px) scale(0.97);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
}
@media (max-width: 600px) and (prefers-reduced-motion: no-preference) {
body.home .ki-utility-hero {
animation-duration: 0.8s, 11s;
}
}
/* 2. カード枠に沿って、シアン→ブルー→パープルの淡い光がゆっくり巡る（未対応環境では何も追加されず、既存の細い単色枚のまま） */
@supports ((mask-composite: exclude) or (-webkit-mask-composite: xor)) {
@media (prefers-reduced-motion: no-preference) {
body.home .ki-utility-hero::after {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
padding: 1px;
background: conic-gradient(
from var(--ki-border-angle, 0deg),
rgba(53, 214, 224, 0.5),
rgba(76, 124, 245, 0.5),
rgba(143, 107, 240, 0.5),
rgba(53, 214, 224, 0.5)
);
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
z-index: 2;
pointer-events: none;
opacity: 0.5;
animation: ki-utility-border-spin 13s linear infinite;
transition: opacity 0.4s ease;
}
@keyframes ki-utility-border-spin {
to {
--ki-border-angle: 360deg;
}
}
}
}
/* 3. 背景の淡い光: 既存のゆっくりした移動はそのまま。ホバー時にごくわずかに強める */
body.home .ki-utility-hero::before {
opacity: 0.85;
transition: opacity 0.4s ease;
}
/* 4. 見出し: 既存のグラデーション文字を維持したまま、弱いグローが約4秒周期で呼吸する */
@media (prefers-reduced-motion: no-preference) {
body.home .ki-utility-hero h2.ki-reveal {
animation-name: ki-home-fade-up, ki-utility-heading-glow;
animation-duration: 0.8s, 4s;
animation-timing-function: cubic-bezier(0.2, 0.7, 0.3, 1), ease-in-out;
animation-iteration-count: 1, infinite;
animation-fill-mode: both, none;
animation-delay: 0s, 0.9s;
}
@keyframes ki-utility-heading-glow {
0%, 100% {
text-shadow: 0 0 6px rgba(76, 124, 245, 0.12), 0 0 16px rgba(53, 214, 224, 0.08);
}
50% {
text-shadow: 0 0 16px rgba(76, 124, 245, 0.32), 0 0 30px rgba(143, 107, 240, 0.18);
}
}
}
/* 6. 相談文6行: opacityだけでなく translateY も組み合わせて軽く浮かび上がる（既存の0.15s間隔の遅延は継続） */
@media (prefers-reduced-motion: no-preference) {
body.home .ki-utility-hero .ki-utility-line.ki-reveal {
animation-name: ki-utility-line-in;
animation-duration: 0.7s;
animation-timing-function: cubic-bezier(0.2, 0.7, 0.3, 1);
animation-fill-mode: both;
}
@keyframes ki-utility-line-in {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
}
/* 7. ホバー時: 浮き上がり（既存）に加え、影・枠のグロー・背景光を少しだけ強める（0.4sの滑らかなトランジション） */
@media (hover: hover) and (pointer: fine) {
body.home .ki-utility-hero:hover {
--ki-utility-lift: -6px;
box-shadow:
rgba(255, 255, 255, 0.1) 0px 1px 0px 0px inset,
rgba(53, 214, 224, 0.14) 0px 0px 0px 1px inset,
rgba(5, 7, 13, 0.34) 0px 22px 44px 0px,
rgba(76, 124, 245, 0.22) 0px 0px 44px 0px;
}
body.home .ki-utility-hero:hover::after {
opacity: 0.8;
}
body.home .ki-utility-hero:hover::before {
opacity: 1;
}
}
/* 8. マウス追従グロー（PCのみ。JSがCSS変数 --ki-mx / --ki-my / --ki-mouseglow-opacity を更新する。
対応するJSが動かない環境や失敗した場合でも opacity の初期値が 0 のため何も表示されないだけで、
レイアウトやほかの演出には一切影響しない） */
@media (hover: hover) and (pointer: fine) {
body.home .ki-utility-hero {
--ki-mouseglow-opacity: 0;
}
body.home .ki-utility-hero .ki-utility-mouseglow {
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
border-radius: inherit;
background: radial-gradient(
circle 220px at var(--ki-mx, 50%) var(--ki-my, 50%),
rgba(53, 214, 224, 0.16),
rgba(143, 107, 240, 0.1) 45%,
transparent 70%
);
opacity: var(--ki-mouseglow-opacity, 0);
transition: opacity 0.3s ease;
}
}
/* スマホでは 1・2・4の新規演出も控えめに（振れ幅・持続時間を軽量化） */
@media (max-width: 600px) and (prefers-reduced-motion: no-preference) {
body.home .ki-utility-hero::after {
animation-duration: 18s;
opacity: 0.35;
}
body.home .ki-utility-hero h2.ki-reveal {
animation-duration: 0.8s, 5s;
}
@keyframes ki-utility-heading-glow {
0%, 100% {
text-shadow: 0 0 4px rgba(76, 124, 245, 0.1), 0 0 10px rgba(53, 214, 224, 0.06);
}
50% {
text-shadow: 0 0 10px rgba(76, 124, 245, 0.22), 0 0 18px rgba(143, 107, 240, 0.12);
}
}
}
/* ▲▲▲ HOME: 「AI・ITよろず相談」複数エフェクト強化 追加分 (2026-09-25 その3) ここまで ▲▲▲ */