:root {
			--ink: #111418;
			--sub: #5d6673;
			--paper: #fbfbf7;
			--panel: #ffffff;
			--mist: #eef2f0;
			--line: #dfe7e4;
			--cyan: #0bbbd3;
			--lime: #b8e44c;
			--coral: #ff715b;
			--violet-ink: #29304a;
			--shadow: 0 24px 70px rgba(17, 20, 24, 0.13);
		}

		* {
			box-sizing: border-box;
		}

		html {
			scroll-behavior: smooth;
		}

		body {
			margin: 0;
			color: var(--ink);
			background:
				linear-gradient(90deg, rgba(17, 20, 24, 0.035) 1px, transparent 1px),
				linear-gradient(rgba(17, 20, 24, 0.035) 1px, transparent 1px),
				var(--paper);
			background-size: 44px 44px;
			font-family: "Noto Sans JP", "Hiragino Sans", "Yu Gothic UI", Meiryo, sans-serif;
			line-height: 1.72;
			letter-spacing: 0;
		}

		a {
			color: inherit;
			text-decoration: none;
		}

		.shell {
			width: min(1180px, calc(100% - 40px));
			margin: 0 auto;
		}

		.topbar {
			position: sticky;
			top: 0;
			z-index: 50;
			border-bottom: 1px solid rgba(223, 231, 228, 0.82);
			background: rgba(251, 251, 247, 0.82);
			backdrop-filter: blur(18px);
		}

		.topbar-inner {
			min-height: 70px;
			display: flex;
			align-items: center;
			justify-content: space-between;
			gap: 24px;
		}

		.brand {
			display: flex;
			align-items: center;
			gap: 12px;
			font-weight: 900;
			letter-spacing: 0;
			white-space: nowrap;
		}

		.brand-logo {
			width: 38px;
			height: 38px;
			display: block;
			border-radius: 10px;
			object-fit: contain;
			box-shadow: 0 12px 30px rgba(17, 20, 24, 0.1);
		}

		.nav {
			display: flex;
			align-items: center;
			gap: 8px;
			padding: 6px;
			border: 1px solid rgba(17, 20, 24, 0.08);
			border-radius: 999px;
			background: rgba(255, 255, 255, 0.62);
		}

		.nav a {
			min-height: 34px;
			display: inline-flex;
			align-items: center;
			padding: 7px 14px;
			border-radius: 999px;
			color: #3d4652;
			font-size: 13px;
			font-weight: 800;
		}

		.nav a:hover {
			background: var(--ink);
			color: #fff;
		}

		.header-cta {
			min-height: 40px;
			display: inline-flex;
			align-items: center;
			justify-content: center;
			padding: 8px 16px;
			border: 1px solid var(--ink);
			border-radius: 999px;
			background: var(--ink);
			color: #fff;
			font-size: 13px;
			font-weight: 900;
			box-shadow: 0 14px 30px rgba(17, 20, 24, 0.18);
		}

		.hero {
			position: relative;
			overflow: hidden;
			min-height: calc(92svh - 70px);
			padding: 70px 0 42px;
		}

		.hero::before {
			content: "";
			position: absolute;
			inset: 9% 4% auto auto;
			width: min(38vw, 520px);
			height: min(38vw, 520px);
			border: 1px solid rgba(17, 20, 24, 0.12);
			border-radius: 38% 62% 54% 46%;
			background:
				linear-gradient(145deg, rgba(11, 187, 211, 0.22), rgba(184, 228, 76, 0.24)),
				rgba(255, 255, 255, 0.36);
			filter: blur(0.2px);
			transform: rotate(-8deg);
		}

		.hero-grid {
			position: relative;
			display: grid;
			grid-template-columns: minmax(0, 1fr) minmax(360px, 0.88fr);
			align-items: center;
			gap: 54px;
		}

		.tagline {
			display: inline-flex;
			align-items: center;
			gap: 9px;
			min-height: 34px;
			margin: 0 0 22px;
			padding: 6px 13px 6px 7px;
			border: 1px solid rgba(17, 20, 24, 0.12);
			border-radius: 999px;
			background: rgba(255, 255, 255, 0.72);
			color: #2d3642;
			font-size: 13px;
			font-weight: 900;
			box-shadow: 0 14px 34px rgba(17, 20, 24, 0.06);
		}

		.tagline span {
			width: 22px;
			height: 22px;
			border-radius: 999px;
			background: var(--lime);
			box-shadow: inset 0 0 0 6px rgba(255, 255, 255, 0.42);
		}

		h1 {
			margin: 0;
			max-width: 760px;
			font-size: clamp(44px, 7.4vw, 96px);
			line-height: 0.98;
			letter-spacing: 0;
		}

		.hero-subhead {
			max-width: 720px;
			margin: 28px 0 0;
			color: #29323d;
			font-size: clamp(18px, 2vw, 25px);
			font-weight: 900;
			line-height: 1.55;
		}

		.hero-copy {
			max-width: 690px;
			margin: 18px 0 32px;
			color: var(--sub);
			font-size: 16px;
		}

		.actions {
			display: flex;
			flex-wrap: wrap;
			gap: 12px;
		}

		.btn {
			min-height: 50px;
			display: inline-flex;
			align-items: center;
			justify-content: center;
			gap: 10px;
			padding: 12px 20px;
			border-radius: 999px;
			border: 1px solid var(--ink);
			font-weight: 900;
			transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
		}

		.btn-main {
			background: var(--ink);
			color: #fff;
			box-shadow: 0 16px 34px rgba(17, 20, 24, 0.2);
		}

		.btn-sub {
			background: rgba(255, 255, 255, 0.72);
			color: var(--ink);
		}

		.btn:hover {
			transform: translateY(-2px);
		}

		.signal-board {
			position: relative;
			min-height: 540px;
			display: grid;
			align-content: center;
			gap: 14px;
		}

		.floating-card {
			position: relative;
			border: 1px solid rgba(17, 20, 24, 0.1);
			border-radius: 22px;
			background: rgba(255, 255, 255, 0.78);
			box-shadow: var(--shadow);
			backdrop-filter: blur(18px);
			overflow: hidden;
		}

		.dashboard {
			padding: 18px;
			transform: rotate(1.4deg);
		}

		.dash-top {
			display: flex;
			align-items: center;
			justify-content: space-between;
			gap: 12px;
			padding-bottom: 14px;
			border-bottom: 1px solid var(--line);
		}

		.dots {
			display: flex;
			gap: 7px;
		}

		.dots i {
			width: 10px;
			height: 10px;
			border-radius: 99px;
			background: var(--coral);
		}

		.dots i:nth-child(2) {
			background: var(--lime);
		}

		.dots i:nth-child(3) {
			background: var(--cyan);
		}

		.dash-label {
			color: var(--sub);
			font-size: 12px;
			font-weight: 900;
		}

		.dash-main {
			display: grid;
			grid-template-columns: 1fr 0.86fr;
			gap: 14px;
			padding-top: 16px;
		}

		.monitor {
			min-height: 244px;
			padding: 18px;
			border-radius: 16px;
			background: #111418;
			color: #fff;
		}

.monitor-title {
	margin: 0 0 22px;
	font-size: 18px;
	font-weight: 900;
	letter-spacing: 0;
}

		.flow {
			display: grid;
			gap: 11px;
		}

		.flow-row {
			display: grid;
			grid-template-columns: 76px 1fr 46px;
			gap: 10px;
			align-items: center;
			color: #dbe6e8;
			font-size: 12px;
			font-weight: 800;
		}

		.bar {
			height: 10px;
			border-radius: 999px;
			background: rgba(255, 255, 255, 0.1);
			overflow: hidden;
		}

		.bar span {
			display: block;
			height: 100%;
			border-radius: inherit;
			background: linear-gradient(90deg, var(--cyan), var(--lime));
		}

		.bar-fill-92 {
			width: 92%;
		}

		.bar-fill-86 {
			width: 86%;
		}

		.bar-fill-74 {
			width: 74%;
		}

		.bar-fill-81 {
			width: 81%;
		}

		.mini-stack {
			display: grid;
			gap: 12px;
		}

		.mini {
			min-height: 116px;
			padding: 16px;
			border: 1px solid var(--line);
			border-radius: 16px;
			background: #fff;
		}

		.mini b {
			display: block;
			margin-bottom: 8px;
			font-size: 24px;
			line-height: 1;
		}

		.mini span {
			display: block;
			color: var(--sub);
			font-size: 12px;
			font-weight: 800;
			line-height: 1.45;
		}

		.pill-row {
			display: flex;
			flex-wrap: wrap;
			gap: 8px;
			margin-top: 14px;
		}

		.pill {
			padding: 6px 10px;
			border-radius: 999px;
			background: var(--mist);
			color: #34404d;
			font-size: 11px;
			font-weight: 900;
		}

		.side-note {
			width: min(300px, 86%);
			margin: -18px 0 0 auto;
			padding: 18px;
			border-radius: 20px;
			background: var(--lime);
			color: #15200b;
			transform: rotate(-2.2deg);
		}

		.side-note b {
			display: block;
			margin-bottom: 6px;
			font-size: 15px;
		}

		.side-note span {
			display: block;
			font-size: 13px;
			font-weight: 800;
			line-height: 1.5;
		}

		section {
			padding: 88px 0;
		}

		.section-head {
			display: grid;
			grid-template-columns: 0.72fr 1fr;
			gap: 36px;
			align-items: end;
			margin-bottom: 38px;
		}

		.kicker {
			display: inline-flex;
			align-items: center;
			gap: 10px;
			margin: 0 0 12px;
			color: #111418;
			font-size: 13px;
			font-weight: 900;
		}

		.kicker::before {
			content: "";
			width: 11px;
			height: 11px;
			border-radius: 50%;
			background: var(--coral);
		}

		.section-title {
			margin: 0;
			font-size: clamp(30px, 4vw, 54px);
			line-height: 1.12;
			letter-spacing: 0;
		}

		.lead {
			margin: 0;
			color: var(--sub);
			font-size: 16px;
		}

		.bento {
			display: grid;
			grid-template-columns: 1.15fr 0.85fr;
			grid-template-areas:
				"main support"
				"main future";
			gap: 16px;
		}

		.tile {
			position: relative;
			min-height: 240px;
			padding: 30px;
			border: 1px solid rgba(17, 20, 24, 0.1);
			border-radius: 24px;
			background: rgba(255, 255, 255, 0.84);
			box-shadow: 0 18px 45px rgba(17, 20, 24, 0.07);
			overflow: hidden;
		}

		.tile-main {
			grid-area: main;
			min-height: 496px;
			color: #fff;
			background:
				linear-gradient(145deg, rgba(11, 187, 211, 0.2), rgba(184, 228, 76, 0.1)),
				#111418;
		}

		.tile-support {
			grid-area: support;
		}

		.tile-future {
			grid-area: future;
			background: #f8f2ed;
		}

		.tile-label {
			display: inline-flex;
			margin-bottom: 18px;
			padding: 5px 10px;
			border-radius: 999px;
			background: rgba(255, 255, 255, 0.12);
			color: inherit;
			font-size: 12px;
			font-weight: 900;
		}

		.tile:not(.tile-main) .tile-label {
			background: var(--mist);
			color: #33404d;
		}

		.tile h3 {
			margin: 0 0 14px;
			font-size: clamp(24px, 3vw, 40px);
			line-height: 1.16;
			letter-spacing: 0;
		}

		.tile p {
			margin: 0;
			color: inherit;
		}

		.tile-main p {
			color: #dce7ea;
			max-width: 690px;
		}

		.tile:not(.tile-main) p {
			color: var(--sub);
			font-size: 15px;
		}

		.capability-grid {
			display: grid;
			grid-template-columns: repeat(3, 1fr);
			gap: 12px;
			margin-top: 34px;
		}

		.capability {
			min-height: 132px;
			padding: 18px;
			border: 1px solid rgba(255, 255, 255, 0.14);
			border-radius: 18px;
			background: rgba(255, 255, 255, 0.08);
		}

		.capability b {
			display: block;
			margin-bottom: 10px;
			color: #fff;
			font-size: 16px;
		}

		.capability span {
			display: block;
			color: #c7d6d9;
			font-size: 13px;
			line-height: 1.5;
		}

		.accent-line {
			position: absolute;
			left: 30px;
			right: 30px;
			bottom: 30px;
			height: 10px;
			border-radius: 999px;
			background: linear-gradient(90deg, var(--cyan), var(--lime), var(--coral));
		}

		.trust {
			background: #111418;
			color: #fff;
		}

		.trust .lead {
			color: #cbd3dc;
		}

		.trust-grid {
			display: grid;
			grid-template-columns: repeat(4, 1fr);
			gap: 14px;
		}

		.trust-item {
			min-height: 250px;
			padding: 24px;
			border: 1px solid rgba(255, 255, 255, 0.12);
			border-radius: 22px;
			background: rgba(255, 255, 255, 0.055);
		}

		.trust-item strong {
			display: block;
			color: var(--lime);
			font-size: 34px;
			line-height: 1;
		}

		.trust-item h3 {
			margin: 28px 0 10px;
			font-size: 18px;
			line-height: 1.35;
		}

		.trust-item p {
			margin: 0;
			color: #cbd3dc;
			font-size: 14px;
		}

		.roadmap {
			display: grid;
			grid-template-columns: 1fr 1fr;
			gap: 16px;
		}

		.roadmap-copy {
			min-height: 390px;
			padding: 34px;
			border-radius: 24px;
			background: var(--panel);
			box-shadow: 0 18px 45px rgba(17, 20, 24, 0.07);
		}

		.roadmap-copy h2 {
			margin: 0 0 18px;
			font-size: clamp(30px, 4vw, 50px);
			line-height: 1.16;
			letter-spacing: 0;
		}

		.roadmap-copy p {
			margin: 0;
			color: var(--sub);
		}

		.timeline {
			display: grid;
			gap: 12px;
		}

		.timeline-item {
			display: grid;
			grid-template-columns: 76px 1fr;
			gap: 16px;
			align-items: start;
			min-height: 122px;
			padding: 22px;
			border: 1px solid rgba(17, 20, 24, 0.1);
			border-radius: 22px;
			background: rgba(255, 255, 255, 0.78);
		}

		.timeline-item b {
			display: inline-flex;
			align-items: center;
			justify-content: center;
			min-height: 38px;
			border-radius: 999px;
			background: var(--ink);
			color: #fff;
			font-size: 13px;
		}

		.timeline-item h3 {
			margin: 0 0 6px;
			font-size: 18px;
		}

		.timeline-item p {
			margin: 0;
			color: var(--sub);
			font-size: 14px;
		}

		.contact {
			padding: 44px 0 70px;
		}

		.contact-panel {
			display: grid;
			grid-template-columns: 1fr auto;
			gap: 26px;
			align-items: center;
			padding: 34px;
			border-radius: 28px;
			background:
				linear-gradient(120deg, rgba(11, 187, 211, 0.18), rgba(184, 228, 76, 0.24), rgba(255, 113, 91, 0.16)),
				#fff;
			border: 1px solid rgba(17, 20, 24, 0.1);
			box-shadow: var(--shadow);
		}

		.contact-panel h2 {
			margin: 0;
			font-size: clamp(27px, 4vw, 46px);
			line-height: 1.18;
			letter-spacing: 0;
		}

		.contact-panel p {
			margin: 12px 0 0;
			color: #3b4653;
		}

		.footer {
			padding: 30px 0;
			border-top: 1px solid var(--line);
			color: var(--sub);
			font-size: 13px;
		}

		.footer-inner {
			display: flex;
			justify-content: space-between;
			gap: 20px;
		}

		.footer-links {
			display: flex;
			flex-wrap: wrap;
			gap: 14px;
		}

		.footer-links a {
			color: inherit;
			text-decoration: none;
		}

		.footer-links a:hover {
			color: var(--ink);
		}

		@media (max-width: 980px) {
			.header-cta {
				display: none;
			}

			.hero-grid,
			.section-head,
			.bento,
			.roadmap,
			.contact-panel {
				grid-template-columns: 1fr;
			}

			.bento {
				grid-template-areas:
					"main"
					"support"
					"future";
			}

			.signal-board {
				min-height: auto;
			}

			.trust-grid {
				grid-template-columns: repeat(2, 1fr);
			}
		}

		@media (max-width: 680px) {
			.shell {
				width: min(100% - 28px, 1180px);
			}

			.topbar-inner {
				min-height: 64px;
				flex-wrap: wrap;
				gap: 10px;
				padding: 10px 0 12px;
			}

			.nav {
				order: 3;
				width: 100%;
				display: flex;
				justify-content: flex-start;
				overflow-x: auto;
				-webkit-overflow-scrolling: touch;
				scrollbar-width: none;
			}

			.nav::-webkit-scrollbar {
				display: none;
			}

			.nav a {
				flex: 0 0 auto;
			}

			.header-cta {
				order: 2;
				min-height: 36px;
				display: inline-flex;
				padding: 7px 13px;
				font-size: 12px;
			}

			.brand {
				order: 1;
				font-size: 14px;
			}

			.brand-logo {
				width: 34px;
				height: 34px;
			}

			.hero {
				min-height: auto;
				padding: 52px 0 28px;
			}

			h1 {
				font-size: clamp(40px, 14vw, 62px);
			}

			.actions .btn {
				width: 100%;
			}

			.dash-main,
			.capability-grid,
			.trust-grid {
				grid-template-columns: 1fr;
			}

			.dashboard {
				padding: 14px;
				transform: none;
			}

			.monitor {
				min-height: 220px;
			}

			.flow-row {
				grid-template-columns: 70px 1fr 40px;
			}

			section {
				padding: 64px 0;
			}

			.tile,
			.roadmap-copy,
			.timeline-item,
			.contact-panel {
				border-radius: 20px;
				padding: 24px;
			}

			.tile-main {
				min-height: auto;
			}

			.accent-line {
				position: static;
				margin-top: 28px;
			}

			.timeline-item {
				grid-template-columns: 1fr;
			}

			.footer-inner {
				flex-direction: column;
			}
		}