@charset "utf-8";

:root {
	--primary:    #1a56db;
	--primary-dk: #1e40af;
	--primary-lt: #3b82f6;
	--line-green: #06C755;
	--line-dk:    #05a848;
	--accent:     #f97316;
	--dark:       #0f172a;
	--gray-50:    #f8fafc;
	--gray-100:   #f1f5f9;
	--gray-200:   #e2e8f0;
	--gray-600:   #475569;
	--gray-800:   #1e293b;
	--white:      #ffffff;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
	font-family: 'Noto Sans JP', sans-serif;
	color: var(--gray-800);
	line-height: 1.7;
	-webkit-font-smoothing: antialiased;
}

.container {
	max-width: 1100px;
	margin: 0 auto;
	padding: 0 20px;
}

/* ============ ヘッダー ============ */
.site-header {
	background: var(--white);
	border-bottom: 1px solid var(--gray-200);
	padding: 14px 20px;
	position: sticky;
	top: 0;
	z-index: 100;
	box-shadow: 0 1px 4px rgba(0,0,0,.06);
}
.site-header .inner {
	max-width: 1100px;
	margin: 0 auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.site-header .logo {
	font-size: 1rem;
	font-weight: 700;
	color: var(--primary-dk);
	text-decoration: none;
}
.site-header .logo span {
	font-size: 0.75rem;
	font-weight: 400;
	color: var(--gray-600);
	display: block;
}
.header-cta {
	background: var(--accent);
	color: var(--white);
	padding: 10px 22px;
	border-radius: 8px;
	font-weight: 700;
	font-size: 0.9rem;
	text-decoration: none;
	transition: opacity .2s;
}
.header-cta:hover { opacity: .85; }

/* ============ ヒーロー ============ */
.hero {
	background: linear-gradient(135deg, #0f172a 0%, #1e3a8a 60%, #1d4ed8 100%);
	color: var(--white);
	padding: 80px 20px 100px;
	text-align: center;
	position: relative;
	overflow: hidden;
}
.hero::before {
	content: '';
	position: absolute;
	inset: 0;
	background:
		radial-gradient(circle at 15% 40%, rgba(6,199,85,.12) 0%, transparent 50%),
		radial-gradient(circle at 85% 70%, rgba(59,130,246,.15) 0%, transparent 50%);
	pointer-events: none;
}
.hero-inner {
	position: relative;
	z-index: 1;
	max-width: 860px;
	margin: 0 auto;
}
.hero-label {
	display: inline-block;
	background: var(--line-green);
	color: var(--white);
	font-size: .8rem;
	font-weight: 700;
	padding: 5px 16px;
	border-radius: 20px;
	margin-bottom: 24px;
	letter-spacing: .05em;
}
.hero h1 {
	font-size: clamp(1.8rem, 5vw, 3rem);
	font-weight: 900;
	line-height: 1.3;
	margin-bottom: 20px;
	letter-spacing: -.01em;
}
.hero h1 em {
	font-style: normal;
	color: #6ee7b7;
}
.hero-sub {
	font-size: clamp(1rem, 2.5vw, 1.2rem);
	line-height: 1.8;
	opacity: .9;
	margin-bottom: 44px;
}
.hero-buttons {
	display: flex;
	gap: 16px;
	justify-content: center;
	flex-wrap: wrap;
}
.btn {
	display: inline-block;
	padding: 16px 32px;
	border-radius: 10px;
	font-weight: 700;
	font-size: 1rem;
	text-decoration: none;
	transition: all .25s;
	cursor: pointer;
	border: none;
}
.btn-line {
	background: var(--line-green);
	color: var(--white);
	box-shadow: 0 4px 16px rgba(6,199,85,.4);
}
.btn-line:hover { background: var(--line-dk); transform: translateY(-2px); }
.btn-outline {
	background: rgba(255,255,255,.12);
	color: var(--white);
	border: 2px solid rgba(255,255,255,.5);
}
.btn-outline:hover { background: rgba(255,255,255,.2); transform: translateY(-2px); }
.btn-primary {
	background: var(--primary);
	color: var(--white);
	box-shadow: 0 4px 16px rgba(26,86,219,.4);
}
.btn-primary:hover { background: var(--primary-dk); transform: translateY(-2px); }
.btn-accent {
	background: var(--accent);
	color: var(--white);
	box-shadow: 0 4px 16px rgba(249,115,22,.35);
}
.btn-accent:hover { opacity: .88; transform: translateY(-2px); }

/* ============ セクション共通 ============ */
.section { padding: 80px 20px; }
.section-title {
	font-size: clamp(1.5rem, 3.5vw, 2.2rem);
	font-weight: 900;
	text-align: center;
	margin-bottom: 14px;
	color: var(--dark);
}
.section-sub {
	text-align: center;
	font-size: 1.05rem;
	color: var(--gray-600);
	margin-bottom: 56px;
	max-width: 640px;
	margin-left: auto;
	margin-right: auto;
}
.label-tag {
	display: inline-block;
	background: var(--primary-lt);
	color: var(--white);
	font-size: .75rem;
	font-weight: 700;
	padding: 4px 14px;
	border-radius: 20px;
	margin-bottom: 12px;
	letter-spacing: .06em;
}

/* ============ 課題セクション ============ */
.problems { background: var(--gray-50); }
.problem-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 20px;
	max-width: 980px;
	margin: 0 auto;
}
.problem-card {
	background: var(--white);
	border-left: 4px solid var(--accent);
	padding: 28px 24px;
	border-radius: 12px;
	box-shadow: 0 2px 8px rgba(0,0,0,.06);
}
.problem-card .icon { font-size: 1.8rem; margin-bottom: 12px; display: block; }
.problem-card h3 { font-size: 1.05rem; font-weight: 700; margin-bottom: 8px; }
.problem-card p { font-size: .9rem; color: var(--gray-600); line-height: 1.6; }

/* ============ LINE訴求セクション ============ */
.line-section {
	background: linear-gradient(135deg, #022c22 0%, #064e3b 50%, #065f46 100%);
	color: var(--white);
	padding: 80px 20px;
}
.line-inner {
	max-width: 980px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 60px;
	align-items: center;
}
.line-text .label-tag { background: var(--line-green); }
.line-text h2 {
	font-size: clamp(1.5rem, 3vw, 2rem);
	font-weight: 900;
	line-height: 1.4;
	margin-bottom: 24px;
}
.line-text h2 em { font-style: normal; color: #6ee7b7; }
.line-text p {
	font-size: 1rem;
	line-height: 1.9;
	opacity: .9;
	margin-bottom: 32px;
}
.line-points { list-style: none; margin-bottom: 36px; }
.line-points li {
	padding: 10px 0;
	border-bottom: 1px solid rgba(255,255,255,.1);
	font-size: .95rem;
	display: flex;
	align-items: flex-start;
	gap: 10px;
}
.line-points li::before {
	content: '✓';
	color: var(--line-green);
	font-weight: 700;
	flex-shrink: 0;
	margin-top: 2px;
}
.line-demo {
	background: rgba(255,255,255,.05);
	border: 1px solid rgba(255,255,255,.15);
	border-radius: 20px;
	padding: 28px 24px;
	backdrop-filter: blur(8px);
}
.line-demo-header {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 24px;
	padding-bottom: 16px;
	border-bottom: 1px solid rgba(255,255,255,.1);
}
.line-demo-icon {
	width: 40px;
	height: 40px;
	background: var(--line-green);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.2rem;
}
.line-demo-name { font-weight: 700; font-size: .95rem; }
.line-demo-name small { display: block; font-size: .75rem; opacity: .6; font-weight: 400; }
.bubble-wrap { display: flex; flex-direction: column; gap: 14px; }
.bubble {
	max-width: 78%;
	padding: 12px 16px;
	border-radius: 18px;
	font-size: .88rem;
	line-height: 1.6;
}
.bubble.user {
	background: rgba(255,255,255,.15);
	align-self: flex-end;
	border-bottom-right-radius: 4px;
}
.bubble.bot {
	background: var(--line-green);
	color: var(--white);
	align-self: flex-start;
	border-bottom-left-radius: 4px;
}
.bubble-meta { font-size: .72rem; opacity: .55; margin-top: 4px; }
.bubble.user .bubble-meta { text-align: right; }

/* ============ 解決策セクション ============ */
.solutions { background: var(--white); }
.solution-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 24px;
	max-width: 980px;
	margin: 0 auto;
}
.solution-card {
	border: 2px solid var(--primary-lt);
	border-radius: 16px;
	padding: 32px 28px;
	background: linear-gradient(135deg, #eff6ff, #dbeafe);
	transition: transform .25s, box-shadow .25s;
}
.solution-card:hover { transform: translateY(-4px); box-shadow: 0 8px 24px rgba(26,86,219,.12); }
.solution-card .icon { font-size: 2rem; margin-bottom: 16px; display: block; }
.solution-card h3 { font-size: 1.1rem; font-weight: 700; color: var(--primary-dk); margin-bottom: 10px; }
.solution-card p { font-size: .9rem; color: var(--gray-600); line-height: 1.7; }

/* ============ 機能セクション ============ */
.features { background: var(--gray-50); }
.feature-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 28px;
	max-width: 980px;
	margin: 0 auto;
}
.feature-item { text-align: center; padding: 20px; }
.feature-icon-wrap {
	width: 72px;
	height: 72px;
	margin: 0 auto 18px;
	background: linear-gradient(135deg, #1e40af, #3b82f6);
	border-radius: 18px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 2rem;
	box-shadow: 0 4px 14px rgba(30,64,175,.2);
}
.feature-item h3 { font-size: 1rem; font-weight: 700; margin-bottom: 10px; }
.feature-item p { font-size: .88rem; color: var(--gray-600); line-height: 1.65; }

/* ============ 導入ステップ ============ */
.steps { background: var(--white); }
.steps-wrap {
	max-width: 820px;
	margin: 0 auto;
}
.step-row {
	display: flex;
	align-items: flex-start;
	gap: 24px;
	margin-bottom: 44px;
	position: relative;
}
.step-row:not(:last-child)::after {
	content: '';
	position: absolute;
	left: 30px;
	top: 68px;
	bottom: -44px;
	width: 2px;
	background: var(--gray-200);
}
.step-num {
	flex-shrink: 0;
	width: 62px;
	height: 62px;
	background: linear-gradient(135deg, #1e40af, #3b82f6);
	color: var(--white);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: 'Outfit', sans-serif;
	font-size: 1.6rem;
	font-weight: 800;
	position: relative;
	z-index: 1;
}
.step-body h3 { font-size: 1.2rem; font-weight: 700; margin-bottom: 8px; padding-top: 14px; }
.step-body p { font-size: .95rem; color: var(--gray-600); line-height: 1.7; }
.step-badge {
	display: inline-block;
	background: linear-gradient(90deg, #fef3c7, #fde68a);
	border-left: 3px solid var(--accent);
	padding: 14px 24px;
	border-radius: 8px;
	font-weight: 700;
	font-size: 1rem;
	margin-top: 40px;
}

/* ============ 料金セクション ============ */
.pricing { background: var(--gray-50); }
.pricing-wrap {
	max-width: 760px;
	margin: 0 auto;
}
.pricing-card {
	background: var(--white);
	border-radius: 20px;
	overflow: hidden;
	box-shadow: 0 8px 32px rgba(0,0,0,.1);
	border: 2px solid var(--primary-lt);
}
.pricing-head {
	background: linear-gradient(135deg, #1e40af, #3b82f6);
	color: var(--white);
	padding: 36px 32px;
	text-align: center;
}
.pricing-head h3 { font-size: 1.5rem; font-weight: 700; margin-bottom: 8px; }
.pricing-head p { opacity: .85; font-size: .95rem; }
.pricing-body { padding: 36px 32px; }
.price-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 20px 0;
	border-bottom: 1px solid var(--gray-200);
}
.price-row:last-of-type { border-bottom: none; }
.price-label { font-size: 1.05rem; font-weight: 600; }
.price-val {
	font-family: 'Outfit', sans-serif;
	font-size: 1.9rem;
	font-weight: 800;
	color: var(--primary);
}
.price-val small { font-size: 1rem; font-family: 'Noto Sans JP', sans-serif; }
.pricing-note {
	margin-top: 20px;
	padding: 16px 20px;
	background: var(--gray-100);
	border-radius: 8px;
	font-size: .85rem;
	color: var(--gray-600);
	line-height: 1.8;
}

/* ============ モニター募集 ============ */
.monitor {
	background: linear-gradient(135deg, #0f172a, #1e3a8a);
	color: var(--white);
	padding: 80px 20px;
}
.monitor-inner {
	max-width: 820px;
	margin: 0 auto;
	text-align: center;
}
.monitor-badge {
	display: inline-block;
	background: var(--accent);
	color: var(--white);
	font-weight: 700;
	padding: 8px 24px;
	border-radius: 24px;
	font-size: .9rem;
	margin-bottom: 28px;
	box-shadow: 0 4px 12px rgba(249,115,22,.35);
}
.monitor h2 { color: var(--white); margin-bottom: 20px; }
.monitor-desc { font-size: 1.05rem; line-height: 1.9; opacity: .9; margin-bottom: 40px; }
.monitor-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 16px;
	margin-bottom: 40px;
}
.monitor-item {
	background: rgba(255,255,255,.08);
	border: 1px solid rgba(255,255,255,.15);
	border-radius: 12px;
	padding: 20px 16px;
	font-size: .9rem;
}
.monitor-item strong { display: block; color: #6ee7b7; margin-bottom: 6px; font-size: .8rem; letter-spacing: .05em; }

/* ============ お問い合わせフォーム ============ */
.contact-section {
	background: var(--gray-50);
	padding: 80px 20px;
}
.contact-wrap {
	max-width: 760px;
	margin: 0 auto;
}
.contact-card {
	background: var(--white);
	border-radius: 16px;
	padding: 48px 40px;
	box-shadow: 0 4px 24px rgba(0,0,0,.08);
}

/* フォームスタイル（アテンド標準に合わせる） */
#m-step {
	list-style: none;
	display: flex;
	justify-content: space-between;
	padding: 0;
	margin-bottom: 32px;
	border: 1px solid var(--gray-200);
	border-radius: 8px;
	overflow: hidden;
}
#m-step li {
	flex: 1;
	text-align: center;
	padding: 12px;
	background: var(--gray-100);
	color: var(--gray-600);
	font-size: .9rem;
}
#m-step li.now {
	background: var(--primary);
	color: var(--white);
	font-weight: 700;
}
table.mailform {
	width: 100%;
	border-collapse: collapse;
	margin-top: 8px;
	table-layout: fixed;
}
table.mailform th,
table.mailform td {
	padding: 14px 16px;
	border: 1px solid var(--gray-200);
	text-align: left;
	vertical-align: middle;
}
table.mailform th {
	background: var(--gray-50);
	width: 220px;
	font-weight: 700;
	font-size: .95rem;
}
span.must {
	background: #e74c3c;
	color: var(--white);
	padding: 2px 6px;
	font-size: .72rem;
	border-radius: 3px;
	margin-right: 6px;
}
span.any {
	background: #95a5a6;
	color: var(--white);
	padding: 2px 6px;
	font-size: .72rem;
	border-radius: 3px;
	margin-right: 6px;
}
table.mailform input[type="text"],
table.mailform select,
table.mailform textarea {
	width: 100%;
	padding: 10px 12px;
	border: 1px solid var(--gray-200);
	border-radius: 6px;
	font-size: 1rem;
	box-sizing: border-box;
	font-family: 'Noto Sans JP', sans-serif;
	transition: border-color .2s;
}
table.mailform input[type="text"]:focus,
table.mailform select:focus,
table.mailform textarea:focus {
	outline: none;
	border-color: var(--primary-lt);
	box-shadow: 0 0 0 3px rgba(59,130,246,.12);
}
table.mailform textarea { height: 120px; resize: vertical; }
.mailFormErrorElement { background-color: #fff0f0 !important; border: 1px solid #e74c3c !important; }
.mailFormErrorMessage { color: #e74c3c; font-size: .82rem; margin-top: 6px; font-weight: 700; }
.agree-box {
	background: var(--gray-50);
	border: 1px solid var(--gray-200);
	border-radius: 8px;
	padding: 20px;
	margin: 28px 0;
	font-size: .88rem;
	color: var(--gray-600);
	line-height: 1.7;
}
.agree-box label {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin-top: 12px;
	font-size: .9rem;
	color: var(--gray-800);
	cursor: pointer;
}
.agree-box input[type="checkbox"] { margin-top: 3px; flex-shrink: 0; }
.mailform_buttons {
	display: flex;
	gap: 12px;
	justify-content: center;
	margin-top: 28px;
}
.button.contact.back,
.button.contact.submit {
	background: var(--primary);
	color: var(--white);
	border: none;
	padding: 16px 48px;
	border-radius: 10px;
	font-size: 1.05rem;
	font-weight: 700;
	cursor: pointer;
	transition: opacity .2s, transform .2s;
	font-family: 'Noto Sans JP', sans-serif;
}
.button.contact.submit:hover:not(:disabled) { opacity: .88; transform: translateY(-1px); }
.button.contact.submit:disabled {
	background: var(--gray-200);
	color: var(--gray-600);
	cursor: not-allowed;
}

.button.contact.back {
	background: none #999;
}

@media (max-width: 768px) {
	.line-inner { grid-template-columns: 1fr; gap: 40px; }
	.line-demo { display: none; } /* スマホではデモ非表示 */
	 .contact-section .container {padding: 0;}
	 ::placeholder{font-size: 80%;}
	table.mailform,
	table.mailform tbody,
	table.mailform tr,
	table.mailform th,
	table.mailform td { display: block; width: 100%; }
	table.mailform th { background: var(--primary-dk); color: var(--white); border-bottom: none; }
	table.mailform td { border-top: none; margin-bottom: 12px; padding-top: 16px; }
	.contact-card { padding: 32px 20px; }
	.pricing-body { padding: 28px 20px; }
}

/* ============ フッター ============ */
.footer {
	background: var(--dark);
	color: var(--white);
	padding: 48px 20px 28px;
}
.footer-inner {
	max-width: 1100px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 36px;
	margin-bottom: 36px;
}
.footer-col h4 {
	font-size: .9rem;
	font-weight: 700;
	margin-bottom: 16px;
	color: #6ee7b7;
	letter-spacing: .05em;
}
.footer-col p,
.footer-col a {
	color: rgba(255,255,255,.7);
	text-decoration: none;
	font-size: .88rem;
	line-height: 2;
	display: block;
}
.footer-col a:hover { color: var(--white); }
.footer-bottom {
	border-top: 1px solid rgba(255,255,255,.1);
	padding-top: 24px;
	text-align: center;
	font-size: .82rem;
	color: rgba(255,255,255,.4);
}