@charset "utf-8";

/* =============================================================================

	「経営課題の発見から、実装まで。言葉が、システムになる。」LPページ　CSS

	最終更新日：2026年10月15日

============================================================================= */

/* -------------------------------------------------------------------
	共通
------------------------------------------------------------------- */

:root {
	--base-color:#141b2e;
	--accent-color:#c89b3c;
	--accent-soft-color:#e9d9ae;
	--accent-light-color:#dbaf52;
	--accent-dark-color:#947126;
	--soft-color:#4A5468;
	--zebra-stripe:#f5f6f8;
	--dark-color:#1c2b57;
	--line:#e1e4eb;
	--text-light-color:#aab6db;
	--font-serif:"游明朝体", "Yu Mincho", YuMincho, serif;
}

.lp-campaign #main p { color:var(--base-color); }

#wrap { overflow:clip; }

/* -------------------------------------------------------------------
	コンテンツヘッダー
	.lp-campaign #main header ～
------------------------------------------------------------------- */

.lp-campaign #main header {
	display:grid; grid-template:"header header" "texts chat" "note note" / 1fr 400px;
	column-gap:38px; position:relative; z-index:2; padding:0 0 70px; }
/* 背景 */
.lp-campaign #main header::before {
	position:absolute; top:0; left:calc((100vw - 100%) / 2 * -1); z-index:-1;
	width:100vw; min-width:996px; height:100%;
	background:#0A2955 url(/products/lp/ai-iot/business-process/img/main-visual-bg.png) 50% 0 no-repeat;
	content:""; }
@media screen and (max-width:996px) {
	/* 背景 */
	.lp-campaign #main header::before { left:-18px; }
}

/* UIエリア */
.lp-campaign #main header .header-ui-area {
	display:flex; align-items:center; position:relative; grid-area:header;
	width:960px; padding:18px 0; }
.lp-campaign #main header .header-ui-area:has(+ .fixed) {
	visibility:hidden; }
.lp-campaign #main header .header-ui-area.fixed {
	position:fixed; top:0; z-index:2; }
.lp-campaign #main header .header-ui-area::before {
	position:absolute; top:0; left:-50vw; z-index:-1; width:200vw; height:100%;
	background:#101834; content:""; }
	.lp-campaign #main header .header-ui-area h1 {}
	/* グローバルナビゲーション */
	.lp-campaign #main header .header-ui-area nav {
		display:flex; align-items:center; gap:28px; margin-left:auto; }
		.lp-campaign #main header .header-ui-area nav ul {
			display:flex; align-items:center; gap:18px; list-style:none; margin:0; }
			.lp-campaign #main header .header-ui-area nav ul li {
				margin:0; padding-left:0; }
				.lp-campaign #main header .header-ui-area nav ul li a {
					display:flex; align-items:center; gap:5px; padding-left:0;
					background:none; font-size:1.4rem; color:var(--text-light-color); }
				.lp-campaign #main header .header-ui-area nav ul li a::before {
					display:inline-block; width:10px; height:7px; background:currentColor;
					content:""; clip-path:polygon(0 0, 100% 0, 50% 100%); }
				.lp-campaign #main header .header-ui-area nav ul li a:hover {
					color:#fff; text-decoration:none; }
		/* 相談リンク */
		.lp-campaign #main header .header-ui-area nav .contact {
			display:flex; align-items:center; gap:10px; padding:9px 15px 7px 10px;
			border-radius:4px; background:var(--accent-color);
			font-size:1.6rem; color:var(--base-color); font-weight:bold; }
		.lp-campaign #main header .header-ui-area nav .contact::before {
			display:inline-block; width:7px; height:10px; background:currentColor;
			content:""; clip-path:polygon(0 0, 100% 50%, 0 100%); }
		.lp-campaign #main header .header-ui-area nav .contact:hover {
			background:var(--accent-light-color); text-decoration:none; }

.lp-campaign #main header .texts { margin-top:70px; grid-area:texts; }
	/* タイトル */
	.lp-campaign #main header .texts .title { margin-top:0; }
	/* 説明文 */
	.lp-campaign #main header .texts .description {
		margin-top:40px !important; color:var(--text-light-color); }
	/* ボタン風リンク */
	.lp-campaign #main header .texts .links-buttons {
		display:flex; align-items:center; gap:20px; margin:3.6rem 0 0; list-style:none; }
		.lp-campaign #main header .texts .links-buttons li { margin:0; padding-left:0; }
			.lp-campaign #main header .texts .links-buttons li a {
				display:flex; align-items:center; gap:10px; padding:19px 24px 16px 20px;
				border-radius:4px; background:none; font-size:1.6rem;
				font-weight:bold; box-shadow:5px 5px 8px rgba(15, 47, 100, 0.3); }
			.lp-campaign #main header .texts .links-buttons li a:hover {
				text-decoration:none; translate:0 -2px; }
			.lp-campaign #main header .texts .links-buttons li a.contact {
				background:var(--accent-color); color:var(--base-color); }
			.lp-campaign #main header .texts .links-buttons li a.contact::before {
				display:inline-block; width:7px; height:10px; background:#12366f;
				content:""; clip-path:polygon(0 0, 100% 50%, 0 100%); }
			.lp-campaign #main header .texts .links-buttons li a.contact:hover {
				background:var(--accent-light-color); }
			.lp-campaign #main header .texts .links-buttons li a.inpage-link {
				border:1px solid #4e5d88; background:#12366f; color:#fff; }
			.lp-campaign #main header .texts .links-buttons li a.inpage-link::before {
				display:inline-block; width:10px; height:7px; background:currentColor;
				content:""; clip-path:polygon(0 0, 100% 0, 50% 100%); }
			.lp-campaign #main header .texts .links-buttons li a.inpage-link:hover {
				border-color:#6a7caf; }

/* 補足テキスト */
.lp-campaign #main header .note {
	grid-area:note; margin-top:1.8rem; color:var(--text-light-color); }

/* === AIチャットウィンドウ === */
.lp-campaign #main header .ai-chat-window {
	overflow:clip; grid-area:chat; align-self:start;
	margin-top:calc(70px + 58px); border:1px solid #2c3d73; border-radius:10px;
	background:#0b1226; box-shadow:0 24px 60px rgba(0, 0, 0, 0.45); }
	.lp-campaign #main header .ai-chat-window .title-bar {
		display:flex; align-items:center; gap:8px; padding:15px 16px;
		border-bottom:1px solid #2c3d73; background:#121c3b; }
		/* コントローラー */
		.lp-campaign #main header .ai-chat-window .title-bar .dots {
			position:relative; width:10px; height:10px; border-radius:50%;
			background:#33406e; }
			.lp-campaign #main header .ai-chat-window .title-bar .dots::before,
			.lp-campaign #main header .ai-chat-window .title-bar .dots::after {
				display:block; position:absolute; top:0; width:inherit; height:inherit;
				border-radius:inherit; background:inherit; content:""; }
			.lp-campaign #main header .ai-chat-window .title-bar .dots::before {
				left:calc(10px + 8px); }
			.lp-campaign #main header .ai-chat-window .title-bar .dots::after {
				left:calc((10px + 8px) * 2); }
		/* タイトル */
		.lp-campaign #main header .ai-chat-window .title-bar .title {
			margin:0 0 0 calc(((10px + 8px) * 2) + 8px); font-size:1.3rem;
			line-height:1em; color:var(--text-light-color); letter-spacing:0.1em; }
	/* メッセージボックス */
	.lp-campaign #main header .ai-chat-window .chat-body {
		min-height:300px; padding:22px 22px 26px; box-sizing:border-box; }
		.lp-campaign #main header .ai-chat-window .chat-body .label {
			margin-top:0; font-size:1.2rem; color:var(--text-light-color); letter-spacing:0.18em; }
		.lp-campaign #main header .ai-chat-window .chat-body .input {
			margin-top:8px; margin-right:5%; padding:13px 16px; border:1px solid #2b3b72;
			border-radius:8px; background:#1a2750; font-size:1.5rem;
			color:#e7ecf9; opacity:0; animation:1s ai-chat-input-show 1s forwards; }
		@keyframes ai-chat-input-show {
			from { opacity:0; }
			to { opacity:1; }
		}
		/* コードブロック */
		.lp-campaign #main header .ai-chat-window .chat-body .code-block {
			margin-top:18px; font-size:1.3rem; line-height:1.8em; color:#9db0de; }
			.lp-campaign #main header .ai-chat-window .chat-body .code-block .comment {
				color:var(--text-light-color); }
			.lp-campaign #main header .ai-chat-window .chat-body .code-block .keyword {
				color:#e9d9ae; }
			.lp-campaign #main header .ai-chat-window .chat-body .code-block .function {
				color:#7fb8e8; }
			.lp-campaign #main header .ai-chat-window .chat-body .code-block .string {
				color:#a8d8a8; }
			.lp-campaign #main header .ai-chat-window .chat-body .code-block .char {
				opacity:0; }
		/* 結果 */
		.lp-campaign #main header .ai-chat-window .chat-body .result {
			font-size:1.4rem; color:var(--accent-color); }
		.lp-campaign #main header .ai-chat-window .chat-body .result.hide {
			opacity:0; }
		.lp-campaign #main header .ai-chat-window .chat-body .result::before {
			display:inline-block; margin-right:0.8em; content:"✓"; }



/* -------------------------------------------------------------------
	コンテンツボディ
	.lp-campaign #main ～
------------------------------------------------------------------- */

/* === セクション === */
.lp-campaign #main #main-body > section { padding:96px 0; }
.lp-campaign #main #main-body > section:nth-child(even) {
	position:relative; z-index:1; }
.lp-campaign #main #main-body > section:nth-child(even)::before {
	position:absolute; top:0; left:calc((100vw - 100%) / 2 * -1); z-index:-1;
	width:100vw; min-width:996px; height:100%; background:var(--zebra-stripe);
	content:""; }

@media screen and (max-width:996px) {
	.lp-campaign #main section:nth-child(even)::before { left:-20px; }
}


/* === アイブロー === */
.lp-campaign #main .eyebrow {
	margin-top:0; font-size:1.2rem; letter-spacing:0.22em; color:var(--accent-dark-color); }


/* === 見出しレベル2 === */
.lp-campaign #main section h2 {
	margin-top:0; padding:0; border:none; font-size:3.8rem; color:var(--base-color);
	text-align:left; font-family:var(--font-serif); }
.lp-campaign #main section .eyebrow + h2 { margin-top:16px; }


/* === ISSUE：3カラムコンテンツ === */
.lp-campaign #main .issue-contents {
	display:grid; grid-template-columns:repeat(3, 1fr);
	grid-template-rows:repeat(2, auto);
	margin-top:52px; border:1px solid var(--line); }
	.lp-campaign #main .issue-contents .content {
		display:grid; grid-template-rows:subgrid; grid-row:span 2; padding:34px 30px; }
	.lp-campaign #main .issue-contents .content:nth-child(n + 2) {
		border-left:1px solid var(--line); }
		/* タイトル */
		.lp-campaign #main .issue-contents .content .title {
			margin-top:0; font-size:2rem; font-weight:bold; font-family:var(--font-serif); }
		/* テキスト */
		.lp-campaign #main .issue-contents .content .text { color:var(--soft-color); }


/* === PROCESS：リード文 === */
.lp-campaign #main .lead { margin-top:1.5em; }


/* === PROCESS：フロー === */
.lp-campaign #main .flow {
	display:grid; grid-template-columns:repeat(2, 1fr); gap:44px;
	margin:56px 22px 0; counter-reset:count; }
	.lp-campaign #main .flow .step { position:relative; counter-increment:count; }
	/* 番号 */
	.lp-campaign #main .flow .step::before {
		display:flex; align-items:center; justify-content:center;
		width:52px; height:52px; border:2px solid var(--accent-color);
		border-radius:50%; background:var(--dark-color); font-size:1.5rem;
		color:#fff; content:"0" counter(count); }
	/* 線 */
	.lp-campaign #main .flow .step::after {
		position:absolute; top:26px; left:6%; right:6%; height:1px; z-index:-1;
		background:linear-gradient(to right, var(--accent-color), var(--accent-soft-color));
		content:""; }
		/* 見出し */
		.lp-campaign #main .flow .step h3 {
			margin-top:20px; padding:0; border:none; font-size:2rem;
			color:var(--base-color); text-align:left; font-family:var(--font-serif); }
		/* ラベル */
		.lp-campaign #main .flow .step .label {
			margin-top:0.56em; font-size:1.2rem; letter-spacing:0.12em;
			color:var(--accent-dark-color); }
		/* テキスト */
		.lp-campaign #main .flow .step .text { margin-top:0.78em; }


/* === WHY VIBE CODING：ポイント === */
.lp-campaign #main .vibe-points {
	display:grid; grid-template-columns:repeat(2, 1fr); gap:40px; align-items:center;
	margin-top:56px; }
	.lp-campaign #main .vibe-points .sections {}
		.lp-campaign #main .vibe-points .sections section {
			display:grid; grid-template:"icon heading" "icon text" / auto 1fr;
			gap:8px 18px; }
		.lp-campaign #main .vibe-points .sections section:nth-child(n+2) { margin-top:40px; }
			/* アイコン */
			.lp-campaign #main .vibe-points .sections section .icon {
				display:flex; justify-content:center; align-items:center;
				grid-area:icon; position:relative; width:44px; height:44px;
				font-size:1.3rem; color:var(--accent-dark-color); }
			.lp-campaign #main .vibe-points .sections section .icon::before {
				position:absolute; top:0; left:0; width:100%; height:100%;
				border:1px solid var(--accent-color); content:""; rotate:45deg;
				box-sizing:border-box; }
			/* 見出し */
			.lp-campaign #main .vibe-points .sections section h3 {
				grid-area:heading; margin-top:0; padding:0; border:none;
				font-size:2rem; color:var(--base-color); text-align:left;
				font-family:var(--font-serif); }
			/* テキスト */
			.lp-campaign #main .vibe-points .sections section p {
				grid-area:text; margin-top:0; font-weight:normal; }
	/* 画像 */
	.lp-campaign #main .vibe-points .pic { margin-top:0; }
		.lp-campaign #main .vibe-points .pic img { border-radius:10px; }


/* === DELIVERY：モデル === */
.lp-campaign #main .models {
	display:grid; grid-template-columns:repeat(3, 1fr);
	grid-template-rows:repeat(5, auto); gap:0 24px; margin-top:56px; }
	.lp-campaign #main .models .model {
		display:grid; grid-template-rows:subgrid; grid-row:span 5; padding:36px 30px;
		border:1px solid var(--line); border-top:3px solid var(--dark-color);
		background:#fff; box-shadow:0 12px 36px rgba(20, 27, 46, 0.08); }
	.lp-campaign #main .models .model:nth-child(2) {
		border-top-color:var(--accent-color); }
		/* アイブロー */
		.lp-campaign #main .models .model .eyebrow {
			font-size:1.2rem; letter-spacing:0.18em; text-align:center; }
		/* 見出し */
		.lp-campaign #main .models .model h3 {
			margin-top:0.668em; padding:0; border:none; font-size:2rem;
			color:var(--base-color); font-family:var(--font-serif); }
		/* ちょっとしたテキスト */
		.lp-campaign #main .models .model .for {
			margin-top:0.429em; color:var(--soft-color); text-align:center; }
		/* モデル */
		.lp-campaign #main .models .model ul {
			margin:0; list-style:none; }
			.lp-campaign #main .models .model ul li {
				margin:20px 0 0; padding-left:1.3em; font-size:1.6rem;
				font-weight:normal; text-indent:-1.3em; }
			.lp-campaign #main .models .model ul li:nth-child(n+2) {
				margin-top:12px; }
			.lp-campaign #main .models .model ul li::before {
				content:"— "; color:var(--accent-color); }
		/* おすすめ */
		.lp-campaign #main .models .model .text-recommended {
			display:flex; justify-content:center; align-items:center; gap:10px;
			margin:36px -30px -36px; padding:10px 25px; background:#f9f4ea;
			color:var(--accent-dark-color); font-weight:bold; font-family:var(--font-serif); }


/* === IMAGE：事例 === */
.lp-campaign #main .cases {
	display:grid; grid-template-columns:repeat(3, 1fr); gap:24px;
	margin-top:56px; }
	.lp-campaign #main .cases .case {
		padding:32px 21px; border:1px solid var(--line); background:#fff; }
		/* ちょっとしたテキスト */
		.lp-campaign #main .cases .case .bit-text {
			margin-top:0; font-size:1.2rem; letter-spacing:0.14em; color:var(--soft-color); }
		/* 見出し */
		.lp-campaign #main .cases .case h3 {
			margin-top:0.668em; padding:0; border:none; font-size:2rem;
			color:var(--base-color); text-align:left; font-family:var(--font-serif); }
		/* 強調 */
		.lp-campaign #main .cases .case p.emphasis {
			margin-top:18px; padding-top:18px; border-top:1px solid var(--line);
			font-size:3rem; font-weight:bold; font-family:var(--font-serif); }
			/* 単位 */
			.lp-campaign #main .cases .case p.emphasis .unit {
				font-size:1.4rem; color:var(--soft-color); font-family:var(--font-serif); }
		/* テキスト */
		.lp-campaign #main .cases .case p.text { color:var(--soft-color); }


/* === IMAGE：補足 === */
.lp-campaign #main #main-body .note { margin-top:28px; font-size:1.4rem; color:var(--soft-color); }


/* === FAQ：よくあるご質問 === */
.lp-campaign #main .faq { margin-top:48px; }
	.lp-campaign #main .faq details { border-bottom:1px solid var(--line); }
		/* 質問 */
		.lp-campaign #main .faq details summary {
			display:flex; justify-content:space-between; align-items:center;
			gap:20px; padding:22px 8px; font-size:1.6rem; font-weight:bold;
			cursor:pointer; list-style:none; }
		.lp-campaign #main .faq details summary::after {
			content:"＋"; color:var(--accent-color); font-weight:normal; }
		.lp-campaign #main .faq details[open] summary::after {
			content:"－"; }
		/* 回答 */
		.lp-campaign #main .faq details p {
			margin-top:0; padding:0 8px 24px; font-size:1.6rem; color:var(--soft-color); }



/* -------------------------------------------------------------------
	コンテンツヘッダー
	.lp-campaign #main footer ～
------------------------------------------------------------------- */

/* === CTA === */
.lp-campaign #main footer .cta { position:relative; z-index:1; padding:110px 0; }
.lp-campaign #main footer .cta::before {
	position:absolute; top:0; left:calc((100vw - 100%) / 2 * -1); z-index:-1;
	width:100vw; min-width:996px; height:100%;
	background:linear-gradient(160deg, #0f1834, var(--dark-color));
	content:""; }
	.lp-campaign #main footer .cta h2 { color:#fff; text-align:center; }
	.lp-campaign #main footer .cta .text {
		max-width:40em; margin:22px auto 0; color:#b9c2da; text-align:center; }
	.lp-campaign #main footer .cta .button { margin-top:36px; text-align:center; }
		.lp-campaign #main footer .cta .button a {
			display:inline-flex; align-items:center; gap:10px;
			padding:15px 34px; border-radius:4px; background:var(--accent-color);
			font-size:1.5rem; font-weight:bold; color:var(--base-color); }
		.lp-campaign #main footer .cta .button a::before {
			display:inline-block; width:7px; height:10px; background:#12366f;
			content:""; clip-path:polygon(0 0, 100% 50%, 0 100%); }
		.lp-campaign #main footer .cta .button a:hover {
			background-color:var(--accent-light-color); text-decoration:none;
			translate:0 -2px; }