@charset "UTF-8";
/* ==========================================================================
   叡智（AI Enterprise Platform）製品ページ向けスタイル

   - 既存サイト（app.css / style.css）には一切手を入れず、このファイルだけで
     完結させる。クラス名は全て `ai-` 始まりで、既存の `p-` / `l-` と衝突しない。
   - 読み込むのは index.html と product/ai-erp.html の 2 ページのみ。
   - 既存 CSS の後に読み込む前提（`ul,ol{margin:0;padding:0}` 等は継承する）。
   ========================================================================== */

.ai-scope {
	/* --- 面 ------------------------------------------------------------- */
	--ai-bg: #FFFFFF;
	--ai-bg-soft: #F8FAFC;
	--ai-bg-tint: #EEF2FF;
	--ai-line: #E2E8F0;

	/* --- 文字 ----------------------------------------------------------- */
	--ai-ink: #0F172A;
	--ai-ink-2: #334155;
	--ai-ink-3: #64748B;
	--ai-ink-4: #94A3B8;

	/* --- アクセント（AI-ERP 本体のテーマと同一値） ----------------------- */
	--ai-blue: #2563EB;
	--ai-indigo: #4F46E5;
	--ai-violet: #7C3AED;
	--ai-fuchsia: #C026D3;
	--ai-emerald: #10B981;
	--ai-amber: #D97706;
	--ai-cyan: #0891B2;
	--ai-rose: #E11D48;

	/* --- 暗転セクション ------------------------------------------------- */
	--ai-navy: #0B1020;

	--ai-radius: 18px;
	--ai-radius-sm: 12px;
	--ai-radius-lg: 26px;

	--ai-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 8px 24px rgba(15, 23, 42, .06);
	--ai-shadow-lg: 0 2px 4px rgba(15, 23, 42, .04), 0 24px 60px rgba(15, 23, 42, .12);

	--ai-font: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans",
		Meiryo, "Yu Gothic", sans-serif;

	font-family: var(--ai-font);
	color: var(--ai-ink-2);
	line-height: 1.8;
	-webkit-font-smoothing: antialiased;
	text-size-adjust: 100%;
	-webkit-text-size-adjust: 100%;
}

.ai-scope *,
.ai-scope *::before,
.ai-scope *::after {
	box-sizing: border-box;
}

.ai-scope img {
	display: block;
	max-width: 100%;
	height: auto;
}

.ai-scope ul {
	list-style: none;
}

/* 既存 style.css の ol カウンターがここまで効かないようにする */
.ai-scope ol {
	counter-reset: none;
	list-style: decimal;
	padding-left: 1.4em;
}

.ai-scope ol li::before {
	content: none;
}

/* --------------------------------------------------------------------------
   共通パーツ
   -------------------------------------------------------------------------- */

.ai-inner {
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 24px;
}

.ai-inner--wide {
	max-width: 1320px;
}

.ai-eyebrow {
	display: inline-block;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .16em;
	line-height: 1.4;
	color: var(--ai-indigo);
	margin: 0 0 18px;
}

.ai-eyebrow--onDark {
	color: #A5B4FC;
}

.ai-h2 {
	font-size: 38px;
	line-height: 1.45;
	font-weight: 700;
	letter-spacing: .01em;
	color: var(--ai-ink);
	margin: 0 0 20px;
}

.ai-h3 {
	font-size: 18px;
	line-height: 1.6;
	font-weight: 700;
	color: var(--ai-ink);
	margin: 0 0 8px;
}

.ai-lead {
	font-size: 16px;
	line-height: 2;
	color: var(--ai-ink-3);
	margin: 0;
}

/* --------------------------------------------------------------------------
   和文の折り返し

   幅の狭い画面では「〜します。」の最後の 2 文字だけが行に残りやすい。
   text-wrap で行長を均す。未対応ブラウザは単に無視するので害はない。
   （balance は数行までの短い本文向け、pretty は長めの本文向け）
   -------------------------------------------------------------------------- */

.ai-func__text,
.ai-step__text,
.ai-why__text,
.ai-value__text,
.ai-core__pillarText,
.ai-platform__hubText,
.ai-shot__caption,
.ai-shot__note {
	text-wrap: balance;
}

.ai-lead,
.ai-hero__lead,
.ai-promo__lead,
.ai-core__note,
.ai-core__disclaimer,
.ai-cta__lead,
.ai-cta__contact,
.ai-why__foot {
	text-wrap: pretty;
}

/* --------------------------------------------------------------------------
   ブランドロックアップ

       叡智
       ────────────────
       AI ENTERPRISE PLATFORM
       by 株式会社PAI

   「叡智」が製品名、「AI Enterprise Platform」はそれが何かの説明。
   覚えてもらうのは前者なので、字の大きさで明確に差をつける。
   -------------------------------------------------------------------------- */

.ai-brand {
	margin: 0 0 22px;
}

.ai-brand__name {
	display: block;
	font-size: 60px;
	line-height: 1.15;
	font-weight: 700;
	letter-spacing: .12em;
	/* 字間を空けた分、左端がずれるので打ち消す */
	text-indent: .06em;
	background: linear-gradient(120deg, var(--ai-blue) 0%, var(--ai-indigo) 42%, var(--ai-violet) 74%, var(--ai-fuchsia) 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	-webkit-text-fill-color: transparent;
	width: fit-content;
	max-width: 100%;
}

.ai-brand__type {
	display: block;
	margin-top: 14px;
	padding-top: 13px;
	border-top: 1px solid rgba(79, 70, 229, .25);
	width: fit-content;
	max-width: 100%;
	font-size: 15px;
	line-height: 1.5;
	font-weight: 700;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--ai-indigo);
}

.ai-brand__by {
	display: block;
	margin: 12px 0 0;
	font-size: 12px;
	line-height: 1.6;
	letter-spacing: .06em;
	color: var(--ai-ink-4);
}

/* トップページ用は一回り小さく */
.ai-brand--compact .ai-brand__name {
	font-size: 46px;
}

.ai-brand--compact .ai-brand__type {
	margin-top: 12px;
	padding-top: 11px;
	font-size: 13px;
	letter-spacing: .18em;
}

.ai-section {
	padding: 104px 0;
	position: relative;
}

.ai-section--soft {
	background: linear-gradient(180deg, #FFFFFF 0%, var(--ai-bg-soft) 45%, var(--ai-bg-tint) 100%);
}

.ai-section--white {
	background: var(--ai-bg);
}

.ai-section--slate {
	background: var(--ai-bg-soft);
}

/* --- ボタン ------------------------------------------------------------ */

.ai-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	margin-top: 36px;
}

.ai-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 54px;
	padding: 0 30px;
	border-radius: 999px;
	font-size: 15px;
	font-weight: 700;
	letter-spacing: .02em;
	line-height: 1.3;
	text-align: center;
	transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease, color .2s ease;
}

.ai-btn__arrow {
	font-size: 13px;
	transition: transform .2s ease;
}

.ai-btn:hover .ai-btn__arrow {
	transform: translateX(3px);
}

.ai-btn--primary {
	color: #FFFFFF;
	background: linear-gradient(135deg, var(--ai-blue) 0%, var(--ai-indigo) 55%, var(--ai-violet) 100%);
	box-shadow: 0 10px 26px rgba(79, 70, 229, .28);
}

.ai-btn--primary:hover {
	color: #FFFFFF;
	transform: translateY(-2px);
	box-shadow: 0 16px 34px rgba(79, 70, 229, .34);
}

.ai-btn--ghost {
	color: var(--ai-indigo);
	background: rgba(255, 255, 255, .8);
	border: 1px solid rgba(79, 70, 229, .28);
	box-shadow: 0 2px 10px rgba(15, 23, 42, .05);
}

.ai-btn--ghost:hover {
	color: var(--ai-indigo);
	background: #FFFFFF;
	transform: translateY(-2px);
	border-color: rgba(79, 70, 229, .5);
}

.ai-btn--onDark {
	color: var(--ai-ink);
	background: #FFFFFF;
	box-shadow: 0 12px 30px rgba(2, 6, 23, .45);
}

.ai-btn--onDark:hover {
	color: var(--ai-ink);
	transform: translateY(-2px);
}

.ai-btn--onDarkGhost {
	color: #E2E8F0;
	background: rgba(255, 255, 255, .06);
	border: 1px solid rgba(255, 255, 255, .28);
}

.ai-btn--onDarkGhost:hover {
	color: #FFFFFF;
	background: rgba(255, 255, 255, .12);
	transform: translateY(-2px);
}

/* --- スクリーンショット枠（ブラウザ風モックアップ） --------------------- */

.ai-shot {
	margin: 0;
	border-radius: var(--ai-radius);
	overflow: hidden;
	background: #FFFFFF;
	border: 1px solid rgba(15, 23, 42, .08);
	box-shadow: var(--ai-shadow-lg);
}

.ai-shot__bar {
	display: flex;
	align-items: center;
	gap: 7px;
	height: 34px;
	padding: 0 14px;
	background: linear-gradient(180deg, #F8FAFC 0%, #F1F5F9 100%);
	border-bottom: 1px solid rgba(15, 23, 42, .07);
}

.ai-shot__dot {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: #CBD5E1;
	flex: 0 0 auto;
}

.ai-shot__dot:nth-child(1) {
	background: #FCA5A5;
}

.ai-shot__dot:nth-child(2) {
	background: #FCD34D;
}

.ai-shot__dot:nth-child(3) {
	background: #86EFAC;
}

.ai-shot__url {
	flex: 1;
	margin-left: 10px;
	height: 16px;
	border-radius: 999px;
	background: rgba(15, 23, 42, .05);
}

.ai-shot__caption {
	font-size: 11px;
	line-height: 1.6;
	color: var(--ai-ink-4);
	text-align: center;
	padding: 8px 12px;
	background: #FFFFFF;
	border-top: 1px solid var(--ai-line);
}

.ai-shot--onDark {
	border-color: rgba(255, 255, 255, .12);
	box-shadow: 0 30px 70px rgba(2, 6, 23, .6);
}

/* 画面を重ねて配置する箇所では、figcaption が隠れるので外に出す */
.ai-shot__note {
	position: relative;
	z-index: 3;
	margin: 18px 0 0;
	font-size: 11px;
	line-height: 1.7;
	color: var(--ai-ink-4);
	text-align: right;
}

/* --- 画面に入ったら出す（JS が .is-in を付ける） ------------------------ */

.ai-reveal {
	opacity: 0;
	transform: translateY(18px);
	transition: opacity .7s ease, transform .7s ease;
}

.ai-reveal.is-in {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {

	.ai-reveal,
	.ai-reveal.is-in {
		opacity: 1;
		transform: none;
		transition: none;
	}

	.ai-btn,
	.ai-btn__arrow {
		transition: none;
	}
}

/* ==========================================================================
   トップページ内 AI PRODUCT セクション
   ========================================================================== */

.ai-promo {
	position: relative;
	overflow: hidden;
	padding: 96px 0 104px;
	background:
		radial-gradient(900px 520px at 88% 8%, rgba(192, 38, 211, .10) 0%, rgba(192, 38, 211, 0) 62%),
		radial-gradient(820px 520px at 8% 92%, rgba(37, 99, 235, .12) 0%, rgba(37, 99, 235, 0) 60%),
		linear-gradient(180deg, #FFFFFF 0%, var(--ai-bg-soft) 40%, var(--ai-bg-tint) 100%);
	border-top: 1px solid var(--ai-line);
}

.ai-promo__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
	gap: 56px;
	align-items: center;
}

.ai-promo__title {
	font-size: 42px;
	line-height: 1.4;
	font-weight: 700;
	letter-spacing: .005em;
	color: var(--ai-ink);
	margin: 0 0 18px;
}

.ai-promo__lead {
	font-size: 16px;
	line-height: 2.05;
	color: var(--ai-ink-3);
	margin: 0;
}

.ai-promo__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 26px 0 0;
	padding: 0;
}

.ai-promo__tags li {
	font-size: 12px;
	font-weight: 600;
	line-height: 1.5;
	color: var(--ai-ink-2);
	background: rgba(255, 255, 255, .78);
	border: 1px solid var(--ai-line);
	border-radius: 999px;
	padding: 6px 14px;
}

/* --- 右側ビジュアル ---------------------------------------------------- */

.ai-promo__visual {
	position: relative;
	padding-bottom: 42px;
}

.ai-promo__visual .ai-shot--main {
	position: relative;
	z-index: 1;
}

.ai-promo__visual .ai-shot--sub {
	position: absolute;
	right: -12px;
	bottom: 0;
	width: 46%;
	z-index: 2;
}

.ai-promo__glow {
	position: absolute;
	inset: 6% 0 -6% 6%;
	border-radius: 40px;
	background: linear-gradient(135deg, rgba(37, 99, 235, .22), rgba(124, 58, 237, .18), rgba(192, 38, 211, .16));
	filter: blur(46px);
	z-index: 0;
	pointer-events: none;
}

/* ==========================================================================
   製品ページ SECTION 1 : HERO
   ========================================================================== */

.ai-hero {
	position: relative;
	overflow: hidden;
	padding: 92px 0 104px;
	background:
		radial-gradient(1000px 560px at 82% 4%, rgba(192, 38, 211, .12) 0%, rgba(192, 38, 211, 0) 62%),
		radial-gradient(900px 560px at 6% 86%, rgba(37, 99, 235, .14) 0%, rgba(37, 99, 235, 0) 60%),
		linear-gradient(180deg, #FFFFFF 0%, var(--ai-bg-soft) 42%, var(--ai-bg-tint) 100%);
}

.ai-hero__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
	gap: 56px;
	align-items: center;
}

.ai-hero__catch {
	font-size: 34px;
	line-height: 1.5;
	font-weight: 700;
	color: var(--ai-ink);
	margin: 0 0 22px;
}

.ai-hero__lead {
	font-size: 16px;
	line-height: 2.05;
	color: var(--ai-ink-3);
	margin: 0;
}

.ai-hero__visual {
	position: relative;
}

/* 2 枚を重ねる範囲。注記（.ai-shot__note）はこの外に置くので隠れない。 */
.ai-shotStack {
	position: relative;
	padding-bottom: 46px;
}

.ai-hero__visual .ai-shot--main {
	position: relative;
	z-index: 1;
}

.ai-hero__visual .ai-shot--sub {
	position: absolute;
	right: -14px;
	bottom: 0;
	width: 50%;
	z-index: 2;
}

.ai-hero__glow {
	position: absolute;
	inset: 4% 0 -8% 4%;
	border-radius: 44px;
	background: linear-gradient(135deg, rgba(37, 99, 235, .24), rgba(124, 58, 237, .2), rgba(192, 38, 211, .18));
	filter: blur(50px);
	z-index: 0;
	pointer-events: none;
}

/* ==========================================================================
   SECTION 2 : DISCONNECTED WORK
   ========================================================================== */

.ai-problem__head {
	max-width: 820px;
	margin: 0 auto 56px;
	text-align: center;
}

.ai-problem__head .ai-lead {
	margin-top: 18px;
}

.ai-problem__flow {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 64px minmax(0, 1fr);
	gap: 0;
	align-items: center;
	max-width: 980px;
	margin: 0 auto;
}

.ai-problem__box {
	background: #FFFFFF;
	border: 1px solid var(--ai-line);
	border-radius: var(--ai-radius);
	padding: 30px 28px;
	box-shadow: var(--ai-shadow);
}

.ai-problem__boxTitle {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .1em;
	color: var(--ai-ink-4);
	margin: 0 0 18px;
	text-align: center;
}

.ai-problem__chips {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
	margin: 0;
	padding: 0;
}

.ai-problem__chips li {
	font-size: 13px;
	font-weight: 600;
	line-height: 1.5;
	color: var(--ai-ink-2);
	background: var(--ai-bg-soft);
	border: 1px solid var(--ai-line);
	border-radius: 10px;
	padding: 10px 16px;
}

.ai-problem__box--result .ai-problem__chips li {
	color: #9F1239;
	background: rgba(225, 29, 72, .06);
	border-color: rgba(225, 29, 72, .18);
}

.ai-problem__arrow {
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 22px;
	color: var(--ai-ink-4);
	line-height: 1;
}

.ai-problem__note {
	max-width: 820px;
	margin: 52px auto 0;
	padding: 30px 34px;
	border-radius: var(--ai-radius);
	border: 1px solid rgba(79, 70, 229, .2);
	background: linear-gradient(135deg, rgba(238, 242, 255, .9), rgba(255, 255, 255, .9));
	text-align: center;
	font-size: 17px;
	line-height: 1.9;
	font-weight: 600;
	color: var(--ai-ink);
}

/* ==========================================================================
   SECTION 3 : ONE PLATFORM
   ========================================================================== */

.ai-platform__head {
	max-width: 820px;
	margin: 0 auto 64px;
	text-align: center;
}

.ai-platform__map {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(240px, 300px) minmax(0, 1fr);
	gap: 20px 28px;
	align-items: stretch;
	max-width: 1160px;
	margin: 0 auto;
}

.ai-platform__hub {
	grid-column: 2;
	grid-row: 1 / span 3;
	align-self: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	gap: 10px;
	padding: 40px 26px;
	border-radius: var(--ai-radius-lg);
	color: #FFFFFF;
	background: linear-gradient(150deg, #1E3A8A 0%, #4338CA 48%, #6D28D9 100%);
	box-shadow: 0 24px 60px rgba(67, 56, 202, .34);
	position: relative;
}

.ai-platform__hubMark {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .18em;
	color: rgba(255, 255, 255, .72);
}

.ai-platform__hubName {
	font-size: 24px;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: .01em;
}

.ai-platform__hubType {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .66);
	margin-top: 2px;
	padding-top: 9px;
	border-top: 1px solid rgba(255, 255, 255, .22);
}

.ai-platform__hubText {
	font-size: 13px;
	line-height: 1.9;
	color: rgba(255, 255, 255, .8);
	margin: 4px 0 0;
}

.ai-platform__card {
	display: flex;
	gap: 16px;
	padding: 22px 24px;
	background: #FFFFFF;
	border: 1px solid var(--ai-line);
	border-radius: var(--ai-radius);
	box-shadow: var(--ai-shadow);
	transition: transform .2s ease, box-shadow .2s ease;
}

.ai-platform__card:hover {
	transform: translateY(-3px);
	box-shadow: var(--ai-shadow-lg);
}

/* DOM 順は「左3枚 → ハブ → 右3枚」。行まで明示しないと
   自動配置のカーソルが戻らず、右列が下にずれる。 */
.ai-platform__card:nth-child(1) {
	grid-column: 1;
	grid-row: 1;
}

.ai-platform__card:nth-child(2) {
	grid-column: 1;
	grid-row: 2;
}

.ai-platform__card:nth-child(3) {
	grid-column: 1;
	grid-row: 3;
}

.ai-platform__card:nth-child(5) {
	grid-column: 3;
	grid-row: 1;
}

.ai-platform__card:nth-child(6) {
	grid-column: 3;
	grid-row: 2;
}

.ai-platform__card:nth-child(7) {
	grid-column: 3;
	grid-row: 3;
}

.ai-platform__mark {
	flex: 0 0 auto;
	width: 46px;
	height: 46px;
	border-radius: 14px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .04em;
	color: #FFFFFF;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25);
}

.ai-mark--sales {
	background: linear-gradient(135deg, #FCD34D 0%, #D97706 100%);
}

.ai-mark--back {
	background: linear-gradient(135deg, #60A5FA 0%, #2563EB 100%);
}

.ai-mark--people {
	background: linear-gradient(135deg, #6EE7B7 0%, #10B981 100%);
}

.ai-mark--proc {
	background: linear-gradient(135deg, #C084FC 0%, #7C3AED 100%);
}

.ai-mark--emp {
	background: linear-gradient(135deg, #818CF8 0%, #4F46E5 100%);
}

.ai-mark--ai {
	background: linear-gradient(135deg, #F0ABFC 0%, #C026D3 100%);
}

.ai-platform__body {
	min-width: 0;
}

.ai-platform__en {
	display: block;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .16em;
	color: var(--ai-ink-4);
	margin-bottom: 2px;
}

.ai-platform__ja {
	font-size: 16px;
	font-weight: 700;
	color: var(--ai-ink);
	margin: 0 0 8px;
	line-height: 1.5;
}

.ai-platform__items {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0;
	padding: 0;
}

.ai-platform__items li {
	font-size: 12px;
	line-height: 1.6;
	color: var(--ai-ink-3);
	background: var(--ai-bg-soft);
	border-radius: 6px;
	padding: 3px 9px;
}

/* ==========================================================================
   SECTION 4 : AI IS NOT AN ADD-ON.（暗転）
   ========================================================================== */

.ai-core {
	position: relative;
	overflow: hidden;
	padding: 104px 0;
	color: #E2E8F0;
	background:
		radial-gradient(900px 520px at 85% 10%, rgba(124, 58, 237, .32) 0%, rgba(124, 58, 237, 0) 60%),
		radial-gradient(800px 520px at 8% 88%, rgba(37, 99, 235, .28) 0%, rgba(37, 99, 235, 0) 58%),
		linear-gradient(160deg, #0B1020 0%, #111936 55%, #0B1020 100%);
}

.ai-core__head {
	max-width: 860px;
	margin: 0 auto 60px;
	text-align: center;
}

.ai-core__en {
	font-size: 32px;
	font-weight: 700;
	letter-spacing: .04em;
	line-height: 1.4;
	color: #FFFFFF;
	margin: 0 0 18px;
}

.ai-core__ja {
	font-size: 30px;
	font-weight: 700;
	line-height: 1.55;
	color: #C7D2FE;
	margin: 0;
}

.ai-core__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
	gap: 48px;
	align-items: center;
}

.ai-core__pillars {
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin: 0;
	padding: 0;
}

.ai-core__pillar {
	padding: 22px 26px;
	border-radius: var(--ai-radius);
	background: rgba(255, 255, 255, .05);
	border: 1px solid rgba(255, 255, 255, .12);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
}

.ai-core__pillarEn {
	display: block;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .14em;
	color: #A5B4FC;
	margin-bottom: 4px;
}

.ai-core__pillarJa {
	display: block;
	font-size: 17px;
	font-weight: 700;
	color: #FFFFFF;
	margin-bottom: 6px;
}

.ai-core__pillarText {
	font-size: 13px;
	line-height: 1.85;
	color: #94A3B8;
	margin: 0;
}

.ai-core__note {
	max-width: 860px;
	margin: 56px auto 0;
	text-align: center;
	font-size: 15px;
	line-height: 2.05;
	color: #94A3B8;
}

.ai-core__note strong {
	color: #E2E8F0;
	font-weight: 600;
}

.ai-core__disclaimer {
	max-width: 860px;
	margin: 22px auto 0;
	text-align: center;
	font-size: 12px;
	line-height: 1.9;
	color: #64748B;
}

/* ==========================================================================
   SECTION 5 : AI FUNCTIONS
   ========================================================================== */

.ai-funcs__head {
	max-width: 860px;
	margin: 0 auto 56px;
	text-align: center;
}

.ai-funcs__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 20px;
}

.ai-func {
	padding: 30px 28px;
	background: #FFFFFF;
	border: 1px solid var(--ai-line);
	border-radius: var(--ai-radius);
	box-shadow: var(--ai-shadow);
	transition: transform .2s ease, box-shadow .2s ease;
}

.ai-func:hover {
	transform: translateY(-3px);
	box-shadow: var(--ai-shadow-lg);
}

.ai-func__icon {
	width: 44px;
	height: 44px;
	border-radius: 13px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 18px;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25);
}

.ai-func__icon svg {
	width: 22px;
	height: 22px;
	display: block;
	stroke: #FFFFFF;
	fill: none;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.ai-func__title {
	font-size: 17px;
	font-weight: 700;
	color: var(--ai-ink);
	margin: 0 0 8px;
	line-height: 1.5;
}

.ai-func__text {
	font-size: 14px;
	line-height: 1.9;
	color: var(--ai-ink-3);
	margin: 0;
}

.ai-funcs__shot {
	max-width: 960px;
	margin: 60px auto 0;
}

/* ==========================================================================
   SECTION 6 : BUSINESS VALUE
   ========================================================================== */

.ai-value__head {
	max-width: 860px;
	margin: 0 auto 56px;
	text-align: center;
}

.ai-value__en {
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .16em;
	line-height: 1.8;
	color: var(--ai-indigo);
	margin: 0 0 18px;
}

.ai-value__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 22px;
}

.ai-value__card {
	position: relative;
	overflow: hidden;
	padding: 40px 38px;
	border-radius: var(--ai-radius-lg);
	background: #FFFFFF;
	border: 1px solid var(--ai-line);
	box-shadow: var(--ai-shadow);
}

.ai-value__card::before {
	content: "";
	position: absolute;
	inset: 0 auto 0 0;
	width: 4px;
	background: linear-gradient(180deg, var(--ai-blue), var(--ai-violet));
}

.ai-value__num {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .16em;
	color: var(--ai-ink-4);
	margin: 0 0 10px;
}

.ai-value__title {
	font-size: 24px;
	font-weight: 700;
	color: var(--ai-ink);
	margin: 0 0 12px;
	line-height: 1.5;
}

.ai-value__text {
	font-size: 15px;
	line-height: 1.95;
	color: var(--ai-ink-3);
	margin: 0;
}

/* ==========================================================================
   SECTION 7 : WHY PAI
   ========================================================================== */

.ai-why__head {
	max-width: 860px;
	margin: 0 auto 56px;
	text-align: center;
}

.ai-why__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 20px;
}

.ai-why__card {
	padding: 32px 26px;
	background: #FFFFFF;
	border: 1px solid var(--ai-line);
	border-radius: var(--ai-radius);
	box-shadow: var(--ai-shadow);
}

.ai-why__en {
	display: block;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .12em;
	color: var(--ai-indigo);
	margin-bottom: 10px;
}

.ai-why__title {
	font-size: 17px;
	font-weight: 700;
	color: var(--ai-ink);
	margin: 0 0 10px;
	line-height: 1.5;
}

.ai-why__text {
	font-size: 14px;
	line-height: 1.9;
	color: var(--ai-ink-3);
	margin: 0;
}

.ai-why__foot {
	max-width: 860px;
	margin: 40px auto 0;
	text-align: center;
	font-size: 13px;
	line-height: 1.95;
	color: var(--ai-ink-3);
}

/* ==========================================================================
   SECTION 8 : GET STARTED（導入の流れ）
   ========================================================================== */

.ai-steps__head {
	max-width: 860px;
	margin: 0 auto 60px;
	text-align: center;
}

.ai-steps__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 0;
	align-items: stretch;
}

.ai-step {
	position: relative;
	padding: 32px 26px;
	background: #FFFFFF;
	border: 1px solid var(--ai-line);
	border-radius: var(--ai-radius);
	box-shadow: var(--ai-shadow);
	/* 矢印の分だけ左右に余白を取る（gap ではなく margin で、
	   カード間の中央に矢印を置けるようにする） */
	margin: 0 16px;
}

/* カードとカードの間に矢印を描く。最後の1枚には出さない。 */
.ai-step::after {
	content: "";
	position: absolute;
	top: 50%;
	right: -25px;
	width: 18px;
	height: 18px;
	margin-top: -9px;
	border-top: 2px solid #C7D2FE;
	border-right: 2px solid #C7D2FE;
	transform: rotate(45deg);
}

.ai-step:last-child::after {
	content: none;
}

.ai-step__num {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .14em;
	color: var(--ai-indigo);
	background: rgba(79, 70, 229, .08);
	border-radius: 999px;
	padding: 5px 13px;
	margin: 0 0 16px;
}

.ai-step__title {
	font-size: 17px;
	font-weight: 700;
	line-height: 1.5;
	color: var(--ai-ink);
	margin: 0 0 10px;
}

.ai-step__text {
	font-size: 14px;
	line-height: 1.9;
	color: var(--ai-ink-3);
	margin: 0;
}

.ai-steps__foot {
	margin: 52px auto 0;
	max-width: 820px;
	padding: 26px 30px;
	border-radius: var(--ai-radius);
	border: 1px solid rgba(79, 70, 229, .2);
	background: linear-gradient(135deg, rgba(238, 242, 255, .9), rgba(255, 255, 255, .9));
	text-align: center;
	font-size: 18px;
	line-height: 1.8;
	font-weight: 700;
	color: var(--ai-ink);
}

/* ==========================================================================
   SECTION 9 : CTA
   ========================================================================== */

.ai-cta {
	position: relative;
	overflow: hidden;
	padding: 104px 0;
	color: #E2E8F0;
	text-align: center;
	background:
		radial-gradient(720px 420px at 20% 12%, rgba(37, 99, 235, .34) 0%, rgba(37, 99, 235, 0) 62%),
		radial-gradient(720px 420px at 82% 88%, rgba(192, 38, 211, .28) 0%, rgba(192, 38, 211, 0) 62%),
		linear-gradient(150deg, #0B1020 0%, #17204A 52%, #0B1020 100%);
}

.ai-cta__en {
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .18em;
	line-height: 2;
	color: #A5B4FC;
	margin: 0 0 22px;
}

.ai-cta__ja {
	font-size: 38px;
	font-weight: 700;
	line-height: 1.5;
	color: #FFFFFF;
	margin: 0 0 24px;
}

.ai-cta__lead {
	font-size: 16px;
	line-height: 2.05;
	color: #94A3B8;
	margin: 0 auto;
	max-width: 720px;
}

.ai-cta .ai-actions {
	justify-content: center;
	margin-top: 40px;
}

.ai-cta__contact {
	margin: 34px 0 0;
	font-size: 13px;
	line-height: 1.9;
	color: #64748B;
}

.ai-cta__contact a {
	color: #A5B4FC;
	text-decoration: underline;
}

/* ==========================================================================
   レスポンシブ
   ========================================================================== */

/* --- ~1240px : 余白を詰める -------------------------------------------- */
@media screen and (max-width: 1240px) {

	.ai-promo__grid,
	.ai-hero__grid {
		gap: 40px;
	}

	.ai-brand__name {
		font-size: 52px;
	}

	.ai-hero__catch {
		font-size: 29px;
	}

	.ai-promo__title {
		font-size: 36px;
	}

	.ai-step {
		margin: 0 12px;
		padding: 28px 20px;
	}

	.ai-step::after {
		right: -21px;
	}

	.ai-platform__map {
		grid-template-columns: minmax(0, 1fr) minmax(200px, 260px) minmax(0, 1fr);
		gap: 16px 20px;
	}
}

/* --- ~1024px : 2 カラムを解除 ------------------------------------------ */
@media screen and (max-width: 1024px) {

	.ai-section,
	.ai-core,
	.ai-cta {
		padding: 76px 0;
	}

	.ai-promo {
		padding: 72px 0 80px;
	}

	.ai-hero {
		padding: 64px 0 80px;
	}

	.ai-promo__grid,
	.ai-hero__grid,
	.ai-core__grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 44px;
	}

	.ai-promo__visual,
	.ai-hero__visual {
		max-width: 720px;
		margin: 0 auto;
		width: 100%;
	}

	/* 1 カラムに変わると、はみ出した光がビューポートの外まで届いてしまう */
	.ai-promo__glow,
	.ai-hero__glow {
		inset: 6% 0 0 0;
	}

	.ai-h2 {
		font-size: 32px;
	}

	.ai-funcs__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.ai-why__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	/* 6 モジュールの放射レイアウトは解除し、ハブを上に置く */
	.ai-platform__map {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 18px;
	}

	.ai-platform__hub {
		grid-column: 1 / -1;
		grid-row: auto;
		order: -1;
		padding: 32px 26px;
	}

	.ai-platform__card {
		grid-column: auto !important;
		grid-row: auto !important;
	}

	.ai-core__en {
		font-size: 27px;
	}

	.ai-core__ja {
		font-size: 25px;
	}

	.ai-cta__ja {
		font-size: 32px;
	}

	.ai-brand__name {
		font-size: 48px;
	}

	/* 4 ステップは横に並びきらないので 2×2 にする */
	.ai-steps__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 44px 44px;
	}

	.ai-step {
		margin: 0;
	}

	.ai-step::after {
		right: -31px;
	}

	/* 2列送りでは、2枚目の矢印は行末を指してしまうので下向きに */
	.ai-step:nth-child(2)::after {
		top: auto;
		right: 50%;
		bottom: -31px;
		margin: 0 -9px 0 0;
		transform: rotate(135deg);
	}
}

/* --- ~860px : 課題フローを縦に --------------------------------------- */
@media screen and (max-width: 860px) {
	.ai-problem__flow {
		grid-template-columns: minmax(0, 1fr);
		gap: 0;
	}

	.ai-problem__arrow {
		height: 56px;
		transform: rotate(90deg);
	}

	.ai-value__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.ai-value__card {
		padding: 32px 28px;
	}

	.ai-value__title {
		font-size: 21px;
	}
}

/* --- ~767px : スマートフォン ------------------------------------------ */
@media screen and (max-width: 767px) {

	.ai-inner {
		padding: 0 18px;
	}

	.ai-section,
	.ai-core,
	.ai-cta {
		padding: 60px 0;
	}

	.ai-promo {
		padding: 56px 0 64px;
	}

	.ai-hero {
		padding: 48px 0 64px;
	}

	.ai-eyebrow {
		font-size: 11px;
		margin-bottom: 14px;
	}

	.ai-h2 {
		font-size: 25px;
		line-height: 1.55;
	}

	.ai-h3 {
		font-size: 16px;
	}

	/* 見出しは中央のまま。本文は中央寄せのままだと最終行に
	   「います。」のような 1〜2 文字だけが残って読みにくい。 */
	.ai-lead,
	.ai-core__note,
	.ai-core__disclaimer,
	.ai-cta__lead,
	.ai-cta__contact,
	.ai-why__foot {
		text-align: left;
	}

	/* 本文中の <br> は PC で行の長さを揃えるためのもの。
	   幅の狭い画面ではそこで切ったうえに自然折り返しも起きて、
	   「へ。」「する」のような短い行が量産される。自然に流す。
	   （見出しや、2 行で見せたい短い一文の <br> は残す） */
	.ai-lead br,
	.ai-hero__lead br,
	.ai-promo__lead br,
	.ai-core__note br,
	.ai-cta__lead br,
	.ai-cta__contact br {
		display: none;
	}

	.ai-lead {
		font-size: 14px;
		line-height: 1.95;
	}

	.ai-promo__title {
		font-size: 27px;
		line-height: 1.5;
	}

	.ai-promo__lead,
	.ai-hero__lead {
		font-size: 14px;
		line-height: 1.95;
	}

	.ai-brand {
		margin-bottom: 18px;
	}

	.ai-brand__name {
		font-size: 40px;
		letter-spacing: .1em;
	}

	.ai-brand__type {
		margin-top: 10px;
		padding-top: 10px;
		font-size: 11px;
		letter-spacing: .14em;
	}

	.ai-brand--compact .ai-brand__name {
		font-size: 36px;
	}

	.ai-brand--compact .ai-brand__type {
		font-size: 11px;
	}

	.ai-hero__catch {
		font-size: 23px;
		line-height: 1.55;
	}

	/* ステップは縦一列。矢印はカードの真下に出す。 */
	.ai-steps__grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 40px;
	}

	.ai-step {
		margin: 0;
		padding: 24px 20px;
	}

	.ai-step::after,
	.ai-step:nth-child(2)::after {
		top: auto;
		right: 50%;
		bottom: -29px;
		margin: 0 -9px 0 0;
		transform: rotate(135deg);
	}

	.ai-step:last-child::after {
		content: none;
	}

	.ai-steps__foot {
		margin-top: 36px;
		padding: 20px 18px;
		font-size: 16px;
	}

	.ai-actions {
		gap: 12px;
		margin-top: 28px;
	}

	.ai-btn {
		width: 100%;
		min-height: 52px;
		padding: 0 22px;
		font-size: 14px;
	}

	/* 重ねていた小さい方の画面は、縮み過ぎるので下に並べる */
	.ai-promo__visual,
	.ai-shotStack {
		padding-bottom: 0;
		display: flex;
		flex-direction: column;
		gap: 16px;
	}

	.ai-promo__visual .ai-shot--sub,
	.ai-hero__visual .ai-shot--sub {
		position: static;
		width: 100%;
	}

	.ai-shot__note {
		margin-top: 14px;
		text-align: left;
	}

	.ai-promo__glow,
	.ai-hero__glow {
		inset: 8% 0 4% 0;
		filter: blur(36px);
	}

	.ai-shot__bar {
		height: 28px;
		padding: 0 10px;
	}

	.ai-shot__dot {
		width: 8px;
		height: 8px;
	}

	.ai-problem__head,
	.ai-platform__head,
	.ai-core__head,
	.ai-funcs__head,
	.ai-value__head,
	.ai-why__head {
		margin-bottom: 36px;
	}

	.ai-problem__box {
		padding: 22px 18px;
	}

	.ai-problem__chips li {
		font-size: 12px;
		padding: 8px 12px;
	}

	.ai-problem__note {
		margin-top: 34px;
		padding: 22px 20px;
		font-size: 15px;
		line-height: 1.85;
	}

	.ai-platform__map {
		grid-template-columns: minmax(0, 1fr);
		gap: 14px;
	}

	.ai-platform__hub {
		padding: 28px 22px;
	}

	.ai-platform__hubName {
		font-size: 20px;
	}

	.ai-platform__card {
		padding: 20px 18px;
		gap: 14px;
	}

	.ai-core__en {
		font-size: 22px;
	}

	.ai-core__ja {
		font-size: 20px;
		line-height: 1.6;
	}

	.ai-core__grid {
		gap: 32px;
	}

	.ai-core__pillar {
		padding: 18px 20px;
	}

	.ai-core__note {
		margin-top: 36px;
		font-size: 14px;
		line-height: 1.95;
	}

	.ai-funcs__grid,
	.ai-why__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.ai-func {
		padding: 24px 20px;
	}

	.ai-funcs__shot {
		margin-top: 36px;
	}

	.ai-value__card {
		padding: 26px 22px;
		border-radius: var(--ai-radius);
	}

	.ai-value__title {
		font-size: 20px;
	}

	.ai-value__text,
	.ai-why__text {
		font-size: 14px;
	}

	.ai-why__card {
		padding: 24px 20px;
	}

	.ai-cta__ja {
		font-size: 25px;
		line-height: 1.55;
	}

	.ai-cta__lead {
		font-size: 14px;
		line-height: 1.95;
	}

	.ai-cta .ai-actions {
		margin-top: 30px;
	}
}

/* --- ~400px : 最小幅 ---------------------------------------------------- */
@media screen and (max-width: 400px) {

	.ai-inner {
		padding: 0 16px;
	}

	.ai-promo__title {
		font-size: 24px;
	}

	.ai-brand__name {
		font-size: 35px;
	}

	.ai-brand--compact .ai-brand__name {
		font-size: 32px;
	}

	.ai-hero__catch {
		font-size: 21px;
	}

	/* 「企業の業務を、ひとつの基盤へ。」が 1 行に収まる大きさ */
	.ai-h2 {
		font-size: 22px;
	}

	.ai-cta__ja {
		font-size: 23px;
	}

	.ai-promo__tags li {
		font-size: 11px;
		padding: 5px 11px;
	}
}

/* ==========================================================================
   トップページ側の既存レイアウトとの接続
   （AI セクションを差し込んだ分だけ、下の事業紹介の余白を詰める）
   ========================================================================== */

.ai-promo + .p-home-solution {
	margin-top: 0;
	padding-top: 48px;
}

@media screen and (max-width: 767px) {
	.ai-promo + .p-home-solution {
		padding-top: 24px;
	}
}