/* ============================================================
 * about-style-v1.css
 * KIコーポレーション — ABOUT専用デザイン
 * ------------------------------------------------------------
 * 【このファイルの前提】
 * - ABOUT固定ページ(slug: about)のGutenberg本文・HTML構造は
 *   一切変更しません。すべての装飾はCSSのみで実現します。
 * - 既存の子テーマ style.css / home-style-v1.css / service-style-v1.css
 *   はいずれも一切変更しません（このファイルは完全に新規追加）。
 * - すべてのルールを .ki-about（ABOUT本文の最も外側のグループブロック
 *   に付与したクラス）で始まるセレクタに限定しているため、
 *   HOME・SERVICE等の他ページには一切影響しません。
 * - functions.php 側で is_page('about') のときだけこのファイル自体を
 *   読み込むため、他ページではこのファイルはロードすらされません
 *   （二重の安全策）。
 * - 配色は HOME/SERVICE の「白ベース × 未来型テクノロジー」刷新と
 *   同じパレット（シアン #35d6e0 / ブルー #4c7cf5 / パープル #8f6bf0 /
 *   ゴールド #d8c189系 / ネイビー #1b2a4e）を使い、サイト全体の
 *   統一感を保ちます。
 * - .ki-card / .ki-service-card / .ki-service-grid / .ki-service-number /
 *   .ki-service-arrow / .ki-bg-grid / .ki-reveal 等は既存の共通style.css
 *   で定義済みのクラスをそのまま再利用し、このファイルでは
 *   ABOUTページ内(.ki-about 配下)に限定した「上書き・追加」のみを
 *   行います。共通style.css自体は変更しません。
 * 【元に戻す場合】
 * このファイルの中身を空にする（もしくはfunctions.php側の
 * 読み込み処理を削除する）だけで、ABOUTページは無装飾の
 * 素のレイアウトに戻ります。他ページには影響しません。
 * ============================================================ */

/* ============================================================
 * 0. ABOUT専用カラー変数
 * ------------------------------------------------------------
 * 既存の --ki-* 変数（style.css内 :root）はそのまま利用しつつ、
 * HOME/SERVICEの未来型配色と揃えるための変数を .ki-about に
 * 限定して追加定義します（他ページ・他要素には影響しません）。
 * ============================================================ */
.ki-about {
	--about-cyan: #35d6e0;
	--about-blue: #4c7cf5;
	--about-purple: #8f6bf0;
	--about-gold: #d8c189;
	--about-gold-strong: #eddca0;
	--about-gold-deep: #a9853e;
	--about-navy: #1b2a4e;
	--about-text-muted: #5b5f73;
	--about-card-bg: #ffffff;
	--about-card-bg-2: #f4f6fb;
	--about-border: rgba(27, 42, 78, 0.09);
}

/* ============================================================
 * 1. ヒーローエリア（.ki-about-hero）
 * ------------------------------------------------------------
 * 既存の .ki-bg-grid（グリッド線）はそのまま使いつつ、白背景の
 * ABOUTページ向けにHOME/SERVICEと同じネイビーの極薄グリッドに
 * 統一し、ゴールドの細いラインと控えめなにじみ光を追加します。
 * ============================================================ */
.ki-about-hero.ki-bg-grid {
	position: relative;
	background-image:
		linear-gradient(90deg, transparent 8%, rgba(216, 193, 137, 0.5) 50%, transparent 92%),
		linear-gradient(rgba(27, 42, 78, 0.05) 1px, transparent 1px),
		linear-gradient(90deg, rgba(27, 42, 78, 0.05) 1px, transparent 1px),
		radial-gradient(circle at 6% 12%, rgba(53, 214, 224, 0.10), transparent 42%),
		radial-gradient(circle at 94% 18%, rgba(76, 124, 245, 0.09), transparent 44%),
		radial-gradient(circle at 85% 92%, rgba(143, 107, 240, 0.08), transparent 45%);
	background-size: 100% 2px, 44px 44px, 44px 44px, 100% 100%, 100% 100%, 100% 100%;
	background-position: top, 0 0, 0 0, 0 0, 0 0, 0 0;
	background-repeat: no-repeat, repeat, repeat, no-repeat, no-repeat, no-repeat;
}

.ki-about-hero .ki-eyebrow {
	margin: 0 0 0.6em;
}

.ki-about-hero h1 {
	background: linear-gradient(120deg, var(--about-navy) 0%, var(--about-blue) 55%, var(--about-purple) 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.ki-about-hero p {
	color: var(--about-text-muted);
	max-width: 640px;
	margin-left: auto;
	margin-right: auto;
}

/* ============================================================
 * 2. 見出しラベル（.ki-eyebrow）
 * ------------------------------------------------------------
 * 「ABOUT」のような小さな英字ラベル用の新規クラス。
 * 既存の共通style.cssにはまだ存在しないため、ここで新規定義します
 * （.ki-about 配下でのみ有効）。
 * ============================================================ */
.ki-about .ki-eyebrow {
	display: inline-block;
	font-family: var(--ki-font-heading);
	font-size: 0.85rem;
	font-weight: 700;
	letter-spacing: 0.18em;
	color: var(--about-blue);
	text-transform: uppercase;
}

/* ============================================================
 * 3. セクション共通の見出し余白
 * ------------------------------------------------------------
 * 既存の .ki-section の上下paddingはそのまま活かし、見出し(h2)と
 * 本文・カード群との間の余白のみ少し広げて読みやすくします。
 * ============================================================ */
.ki-about .ki-section h2 {
	margin-bottom: clamp(1.6em, 4vw, 2.4em);
	color: var(--about-navy);
}

/* ============================================================
 * 4. カードグリッド（特徴 / 進め方）
 * ------------------------------------------------------------
 * 既存の .ki-service-grid と同じ考え方（auto-fit + minmax）で、
 * ABOUT専用の2つの新規グリッドクラスを定義します。
 * ============================================================ */
.ki-about-features,
.ki-about-steps {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 24px;
}

/* ============================================================
 * 5. カード（.ki-card）の未来型リスキン
 * ------------------------------------------------------------
 * 既存の .ki-card（背景・角丸・影・余白）はそのまま活かし、
 * ホバー時のリフト演出と、境界線・影のブルーアクセントのみを
 * ABOUT専用に追加します（HOME/SERVICEのカードと同じ質感）。
 * ============================================================ */
.ki-about .ki-card {
	transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.ki-about .ki-card:hover {
	transform: translateY(-6px);
	border-color: rgba(76, 124, 245, 0.35);
	box-shadow: 0 16px 40px rgba(76, 124, 245, 0.16);
}
.ki-about .ki-card p {
	margin: 0;
	color: var(--about-text-muted);
}

/* 進め方カード：番号を目立たせ、既存の .ki-service-number（フォント・
   サイズ）を流用しつつ、色だけHOME同様のゴールドグラデーションに */
.ki-about .ki-about-step .ki-service-number {
	background: linear-gradient(135deg, var(--about-gold-strong), var(--about-gold) 45%, var(--about-gold-deep));
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	opacity: 1;
}
.ki-about .ki-about-step h3 {
	margin: 0;
	color: var(--about-navy);
}

/* ============================================================
 * 6. 対応する業務カード（.ki-service-card）の微調整
 * ------------------------------------------------------------
 * 既存の .ki-service-card（背景・角丸・ホバー）はそのまま活かし、
 * 見出し色のみABOUTのネイビーに揃えます。
 * ============================================================ */
.ki-about .ki-service-card h3 {
	margin: 0;
	color: var(--about-navy);
	font-size: 1rem;
}

/* ============================================================
 * 7. リスト（AI・IT活用の5項目）の未来型装飾
 * ------------------------------------------------------------
 * 標準の黒丸(・)ではなく、シアン〜ブルーの短い縦バーを目印にした
 * リストに変更します。文章量・順序等は一切変更しません。
 * ============================================================ */
.ki-about .ki-section ul.wp-block-list {
	list-style: none;
	max-width: 640px;
	margin-left: auto;
	margin-right: auto;
	padding-left: 0;
}
.ki-about .ki-section ul.wp-block-list li {
	position: relative;
	padding: 0.55em 0 0.55em 1.6em;
	color: var(--about-text-muted);
	border-bottom: 1px solid var(--about-border);
}
.ki-about .ki-section ul.wp-block-list li:last-child {
	border-bottom: none;
}
.ki-about .ki-section ul.wp-block-list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 1em;
	width: 10px;
	height: 3px;
	border-radius: 2px;
	background: linear-gradient(90deg, var(--about-cyan), var(--about-blue));
}

/* ============================================================
 * 8. スクロール時のフェードイン
 * ------------------------------------------------------------
 * サイト共通のJS（functions.php内 ki_corp_scroll_reveal_script）は
 * 既にページ内の全 .ki-reveal 要素を監視しており、画面内に入ると
 * 自動で .ki-revealed クラスを付与します。共通style.cssでは
 * 以前の不具合対策のため .ki-reveal / .ki-revealed の両方が
 * opacity:1（変化なし）に固定されていますが、.ki-about 配下だけは
 * ここでより詳細度の高いセレクタを使い、実際にフェードアップする
 * 演出を有効にします（JS・HTML側の変更は不要）。
 * 動きを減らす設定のユーザーには、共通style.cssの
 * @media (prefers-reduced-motion: reduce) { .ki-reveal { ... !important } }
 * が引き続き優先して適用され、アニメーションは発生しません。
 * ============================================================ */
.ki-about .ki-reveal {
	opacity: 0;
	transform: translateY(22px);
	transition: opacity 0.8s ease, transform 0.8s ease;
}
.ki-about .ki-reveal.ki-revealed {
	opacity: 1;
	transform: translateY(0);
}

/* ============================================================
 * 9. 各セクションの背景装飾
 * ------------------------------------------------------------
 * HOME/SERVICEと同じ手法（要素自身のbackground-imageに複数の
 * グラデーションを重ねるのみ。疑似要素・新規HTML・画像素材は
 * 一切使用しない）で、セクションごとに異なる控えめな模様を
 * 追加します。background-imageは内容より必ず背面に描画されるため、
 * 見出し・本文・カードの可読性やスタッキング順には影響しません。
 * カード自体（.ki-service-card / .ki-card）の背景は変更しません。
 *
 * .ki-about の直接の子要素のうち、.ki-about-hero を除く
 * .ki-section が対象です（出現順に nth-of-type で指定）。
 *   2番目: 私たちが対応する業務（ドット柄＋シアンのにじみ光）
 *   3番目: 必要な業務を、必要な分だけ。（斜めのブルーの光の線）
 *   4番目: AI・ITを活用した業務効率化（六角格子風の配線パターン）
 *   5番目: 業務の進め方（シンプルなグリッド）
 *   6番目: 会社概要（ゴールドのライン＋控えめなドット）
 * ============================================================ */
.ki-about > .ki-section:nth-of-type(2) {
	background-image:
		radial-gradient(circle, rgba(27, 42, 78, 0.05) 1px, transparent 1.6px),
		radial-gradient(circle at 8% 10%, rgba(53, 214, 224, 0.09), transparent 42%),
		radial-gradient(circle at 92% 88%, rgba(76, 124, 245, 0.07), transparent 45%);
	background-size: 28px 28px, 100% 100%, 100% 100%;
	background-position: 0 0, 0 0, 0 0;
	background-repeat: repeat, no-repeat, no-repeat;
}

.ki-about > .ki-section:nth-of-type(3) {
	background-image:
		linear-gradient(60deg, rgba(76, 124, 245, 0.04) 25%, transparent 25.5%, transparent 75%, rgba(76, 124, 245, 0.04) 75.5%, rgba(76, 124, 245, 0.04)),
		linear-gradient(60deg, rgba(76, 124, 245, 0.04) 25%, transparent 25.5%, transparent 75%, rgba(76, 124, 245, 0.04) 75.5%, rgba(76, 124, 245, 0.04)),
		radial-gradient(circle at 90% 12%, rgba(143, 107, 240, 0.08), transparent 45%);
	background-size: 64px 110px, 64px 110px, 100% 100%;
	background-position: 0 0, 32px 55px, 0 0;
	background-repeat: repeat, repeat, no-repeat;
}

.ki-about > .ki-section:nth-of-type(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 10% 88%, 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;
}

.ki-about > .ki-section:nth-of-type(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 90% 90%, 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;
}

.ki-about > .ki-section:nth-of-type(6) {
	background-image:
		linear-gradient(90deg, transparent 8%, rgba(216, 193, 137, 0.5) 50%, transparent 92%),
		radial-gradient(circle, rgba(27, 42, 78, 0.045) 1px, transparent 1.6px),
		radial-gradient(circle at 10% 85%, rgba(143, 107, 240, 0.08), transparent 45%),
		radial-gradient(circle at 90% 15%, rgba(53, 214, 224, 0.07), transparent 42%);
	background-size: 100% 2px, 28px 28px, 100% 100%, 100% 100%;
	background-position: top, 0 0, 0 0, 0 0;
	background-repeat: no-repeat, repeat, no-repeat, no-repeat;
}

/* ============================================================
 * 10. 会社概要セクションの文字色
 * ------------------------------------------------------------
 * 「事業内容」の太字ラベルをネイビーにして視認性を高めます。
 * 内容（項目・文章）自体は一切変更しません。
 * ============================================================ */
.ki-about > .ki-section:nth-of-type(6) strong {
	color: var(--about-navy);
}

/* ============================================================
 * 11. 動きを減らしたい環境への配慮
 * ------------------------------------------------------------
 * .ki-reveal については共通style.cssの
 * @media (prefers-reduced-motion: reduce) { .ki-reveal { ... !important } }
 * がこのファイルより優先して適用されるため、ここでの追加対応は
 * 不要です。このファイルで新規に追加したカードのホバー演出のみ、
 * 念のため個別に無効化します。
 * ============================================================ */
@media (prefers-reduced-motion: reduce) {
	.ki-about .ki-card,
	.ki-about .ki-service-card {
		transition: none !important;
	}
}

/* ============================================================
 * 12. スマートフォン対応
 * ------------------------------------------------------------
 * 新たに追加する余白・サイズ関連の指定はありません。
 * リストの左右中央寄せの最大幅のみ、狭い画面でも左右の余白が
 * 保たれるよう調整します（レイアウト構造は変更しません）。
 * ============================================================ */
@media (max-width: 480px) {
	.ki-about .ki-section ul.wp-block-list li {
		padding-left: 1.4em;
	}
}