:root {
	--bg: #f5f9f8;
	--bg-soft: #e8f2f4;
	--ink: #0d2a3f;
	--muted: #486178;
	--accent: #0eb99f;
	--accent-strong: #007b95;
	--card: #ffffff;
	--line: #c9d8e2;
	--shadow: 0 14px 32px rgba(9, 45, 66, 0.12);
	--radius: 18px;
	--max-width: 1120px;
}

* {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
}

body {
	margin: 0;
	font-family: "Noto Sans JP", sans-serif;
	line-height: 1.65;
	color: var(--ink);
	background: linear-gradient(160deg, #f8fbf8 0%, #eff6f8 52%, #f6f7f4 100%);
	overflow-x: hidden;
}

h1,
h2,
h3,
.eyebrow,
.brand strong,
.plan-price {
	font-family: "Chakra Petch", "Noto Sans JP", sans-serif;
	line-height: 1.3;
}

p,
ul,
ol {
	margin: 0;
}

a {
	color: inherit;
}

.bg-orb {
	position: fixed;
	z-index: -1;
	border-radius: 50%;
	filter: blur(10px);
	opacity: 0.6;
	animation: drift 16s ease-in-out infinite;
}

.orb-a {
	width: 420px;
	height: 420px;
	background: radial-gradient(circle at 35% 35%, #4bc8b4 0%, #55b5da 42%, transparent 72%);
	top: -120px;
	left: -90px;
}

.orb-b {
	width: 360px;
	height: 360px;
	background: radial-gradient(circle at 40% 40%, #abd66d 0%, #6cc58a 40%, transparent 70%);
	right: -90px;
	bottom: -120px;
	animation-delay: -8s;
}

@keyframes drift {
	0%,
	100% {
		transform: translateY(0) scale(1);
	}
	50% {
		transform: translateY(-18px) scale(1.04);
	}
}

.inner {
	max-width: var(--max-width);
	margin: 0 auto;
	padding: 0 24px;
}

.site-header {
	position: sticky;
	top: 0;
	z-index: 30;
	backdrop-filter: blur(12px);
	background: rgba(248, 251, 248, 0.9);
	border-bottom: 1px solid rgba(102, 134, 152, 0.28);
}

.site-header .inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	padding-top: 14px;
	padding-bottom: 14px;
}

.brand {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	text-decoration: none;
}

.brand-mark {
	width: 42px;
	height: 42px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-family: "Chakra Petch", sans-serif;
	font-weight: 700;
	font-size: 15px;
	color: #fff;
	background: linear-gradient(145deg, var(--accent), var(--accent-strong));
	border-radius: 12px;
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35);
}

.brand-copy {
	display: flex;
	flex-direction: column;
	line-height: 1.15;
}

.brand-copy strong {
	font-size: 1.15rem;
}

.brand-copy small {
	font-size: 0.78rem;
	color: var(--muted);
}

.site-nav {
	display: flex;
	align-items: center;
	gap: 18px;
}

.site-nav a {
	text-decoration: none;
	font-size: 0.93rem;
	font-weight: 500;
	color: #21445d;
}

.site-nav a:hover {
	color: var(--accent-strong);
}

.site-nav a[aria-current="page"] {
	color: #0b6f87;
	font-weight: 700;
}

.nav-cta {
	padding: 8px 12px;
	border: 1px solid var(--line);
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.82);
	white-space: nowrap;
}

.nav-install {
	background: linear-gradient(135deg, #0eb99f, #087f96);
	color: #fff !important;
	border-color: transparent;
}

.nav-install:hover {
	color: #fff;
	filter: brightness(1.05);
}

.nav-dashboard {
	background: #eef7ff;
	border-color: #9bc6e6;
	color: #1a4f75 !important;
}

.menu-toggle {
	display: none;
}

.section {
	padding: 82px 0;
}

.hero {
	padding-top: 62px;
}

.hero-grid {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
	gap: 24px;
	align-items: stretch;
}

.eyebrow {
	display: inline-block;
	font-size: 0.82rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	color: var(--accent-strong);
	margin-bottom: 16px;
}

.hero-copy h1 {
	font-size: clamp(2rem, 3.8vw, 3.25rem);
	margin: 0 0 16px;
	max-width: 18ch;
}

.hero-copy h1 span {
	color: var(--accent-strong);
}

.hero-copy p {
	max-width: 58ch;
	color: var(--muted);
}

.cta-row {
	display: flex;
	gap: 12px;
	margin-top: 30px;
	flex-wrap: wrap;
}

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 12px 18px;
	border-radius: 12px;
	font-weight: 700;
	text-decoration: none;
	border: 1px solid transparent;
	transition: transform 0.22s ease, box-shadow 0.22s ease, background-color 0.22s ease;
}

.btn:hover {
	transform: translateY(-2px);
	box-shadow: 0 10px 20px rgba(14, 66, 98, 0.18);
}

.btn-primary {
	background: linear-gradient(130deg, var(--accent), var(--accent-strong));
	color: #fff;
}

.btn-ghost {
	background: rgba(255, 255, 255, 0.86);
	border-color: var(--line);
	color: #21445d;
}

.hero-points {
	list-style: none;
	padding: 0;
	margin-top: 28px;
	display: grid;
	gap: 10px;
	color: #264b64;
}

.hero-points li {
	padding: 10px 14px;
	border-radius: 10px;
	background: rgba(255, 255, 255, 0.67);
	border: 1px solid rgba(130, 160, 176, 0.32);
}

.hero-panel {
	background: linear-gradient(150deg, #143b53 0%, #1b5268 54%, #0f6b76 100%);
	color: #eff8ff;
	border-radius: var(--radius);
	padding: 24px;
	box-shadow: var(--shadow);
	position: relative;
	overflow: hidden;
}

.hero-panel::after {
	content: "";
	position: absolute;
	inset: auto -50px -70px auto;
	width: 200px;
	height: 200px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(176, 255, 235, 0.38), transparent 70%);
}

.panel-label {
	font-size: 0.82rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: #ace8ea;
	margin-bottom: 16px;
}

.stack-list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	gap: 10px;
}

.stack-list li {
	display: flex;
	align-items: center;
	gap: 10px;
	font-weight: 500;
	padding: 10px 12px;
	background: rgba(255, 255, 255, 0.08);
	border-radius: 10px;
	border: 1px solid rgba(196, 245, 247, 0.16);
}

.stack-list span {
	font-family: "Chakra Petch", sans-serif;
	font-weight: 700;
	font-size: 0.84rem;
	color: #83f8ce;
}

.status-board {
	margin-top: 20px;
	display: grid;
	gap: 10px;
}

.status-board div {
	padding: 10px 12px;
	border-radius: 10px;
	background: rgba(4, 23, 33, 0.36);
	border: 1px solid rgba(208, 255, 243, 0.16);
}

.status-board span {
	display: block;
	font-size: 0.8rem;
	color: #afd8de;
}

.status-board strong {
	font-size: 1rem;
}

.section-head {
	margin-bottom: 24px;
}

.section-head h2 {
	font-size: clamp(1.55rem, 3.1vw, 2.2rem);
	margin: 0;
}

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

.feature-card {
	background: var(--card);
	padding: 20px;
	border-radius: var(--radius);
	border: 1px solid #d6e2ea;
	box-shadow: 0 8px 18px rgba(11, 43, 62, 0.06);
	transition: transform 0.25s ease, border-color 0.25s ease;
}

.feature-card:hover {
	transform: translateY(-3px);
	border-color: #8dbfcf;
}

.feature-card h3 {
	margin-bottom: 10px;
	font-size: 1.18rem;
}

.feature-card p {
	color: var(--muted);
}

.tone-soft {
	background: linear-gradient(170deg, rgba(209, 231, 225, 0.26), rgba(224, 233, 238, 0.48));
	border-top: 1px solid rgba(180, 201, 212, 0.45);
	border-bottom: 1px solid rgba(180, 201, 212, 0.45);
}

.simulator {
	background: linear-gradient(150deg, #ffffff 0%, #f5fbfb 100%);
	border: 1px solid #d2e2ea;
	border-radius: var(--radius);
	padding: 24px;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 0.95fr);
	gap: 22px;
	align-items: center;
	box-shadow: var(--shadow);
}

.simulator-control label {
	display: block;
	font-weight: 700;
	font-size: 0.95rem;
	color: #22455f;
	margin-bottom: 12px;
}

.simulator-control input[type="range"] {
	width: 100%;
	appearance: none;
	height: 8px;
	border-radius: 999px;
	background: linear-gradient(90deg, #7ad9cf 0%, #4ca6d8 100%);
	outline: none;
}

.simulator-control input[type="range"]::-webkit-slider-thumb {
	appearance: none;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: #fff;
	border: 3px solid var(--accent-strong);
	cursor: pointer;
}

.simulator-result {
	margin-top: 16px;
	padding: 14px;
	border-radius: 12px;
	background: #eff7fb;
	border: 1px solid #c8dbe8;
}

.simulator-result p {
	font-size: 0.93rem;
	color: #35566f;
}

.simulator-result strong {
	display: block;
	font-size: 1.3rem;
	margin-top: 8px;
}

.simulator-result span {
	display: block;
	margin-top: 8px;
	color: var(--muted);
}

.pricing-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 14px;
	margin-bottom: 22px;
}

.plan-card {
	background: var(--card);
	border-radius: 14px;
	padding: 16px;
	border: 1px solid #d7e3ea;
	box-shadow: 0 6px 14px rgba(10, 43, 64, 0.05);
	transition: transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease;
}

.plan-card h3 {
	font-size: 1rem;
	margin-bottom: 8px;
}

.plan-price {
	font-size: 1.35rem;
	margin-bottom: 8px;
	color: #124d69;
}

.plan-card p {
	font-size: 0.9rem;
	color: var(--muted);
}

.plan-card:hover {
	transform: translateY(-3px);
	border-color: #89b8cb;
}

.plan-card.is-match {
	border-color: #1c8aa5;
	box-shadow: 0 12px 24px rgba(15, 105, 128, 0.24);
	background: linear-gradient(170deg, #f8ffff 0%, #ecf8ff 100%);
}

.table-wrap {
	overflow-x: auto;
	border: 1px solid #d1dde6;
	border-radius: 14px;
	background: #fff;
}

table {
	width: 100%;
	border-collapse: collapse;
	min-width: 780px;
}

th,
td {
	padding: 11px 12px;
	border-bottom: 1px solid #e6edf2;
	text-align: left;
	font-size: 0.9rem;
}

th {
	background: #eef6fb;
	font-weight: 700;
	color: #24475f;
}

tr:last-child td {
	border-bottom: 0;
}

.caption {
	margin-top: 12px;
	font-size: 0.84rem;
	color: var(--muted);
}

.compare-tools {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 10px;
	flex-wrap: wrap;
}

.compare-tools p {
	font-weight: 700;
	color: #24506a;
}

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

.pill {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 4px 10px;
	border-radius: 999px;
	font-size: 0.78rem;
	font-weight: 700;
	line-height: 1;
	white-space: nowrap;
	border: 1px solid transparent;
}

.pill.yes {
	color: #0f614b;
	background: #e7fbf2;
	border-color: #9de1c4;
}

.pill.no {
	color: #6b3030;
	background: #fff1f1;
	border-color: #f0b5b5;
}

.plan-table-wrap {
	border: 1px solid #bfd3df;
	background: linear-gradient(180deg, #fafdff 0%, #f6fbff 100%);
	box-shadow: 0 10px 22px rgba(22, 55, 73, 0.08);
}

.plan-compare th {
	background: linear-gradient(180deg, #e6f2fa 0%, #deedf8 100%);
	border-bottom: 1px solid #c7d8e5;
	font-size: 0.83rem;
	white-space: nowrap;
}

.plan-compare td {
	vertical-align: middle;
}

.plan-compare tbody tr:nth-child(even) td {
	background: #f8fcff;
}

.plan-compare tbody tr:hover td {
	background: #eef7fd;
}

.plan-compare .plan-col,
.plan-compare td:first-child {
	min-width: 180px;
}

.plan-compare .price-col {
	min-width: 106px;
}

.plan-compare .feature-col {
	min-width: 148px;
}

.plan-compare td strong {
	color: #134b66;
}

.plan-compare tr.tier-medium-plus td:first-child strong {
	color: #0b6f87;
}

.support-grid .feature-card {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.support-actions {
	margin-top: auto;
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
}

.flow-list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	gap: 12px;
}

.flow-list li {
	display: grid;
	grid-template-columns: 46px minmax(0, 1fr);
	gap: 14px;
	padding: 16px;
	background: #fff;
	border: 1px solid #d3dfe8;
	border-radius: 14px;
}

.flow-list li span {
	width: 46px;
	height: 46px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 14px;
	font-weight: 700;
	font-family: "Chakra Petch", sans-serif;
	background: linear-gradient(130deg, #2ea4bb, #59c88d);
	color: #fff;
}

.flow-list h3 {
	margin: 2px 0 8px;
	font-size: 1.1rem;
}

.flow-list p {
	color: var(--muted);
}

.faq-list {
	display: grid;
	gap: 12px;
}

.faq-item {
	border-radius: 14px;
	overflow: hidden;
	border: 1px solid #d2dee7;
	background: #fff;
}

.faq-trigger {
	width: 100%;
	text-align: left;
	padding: 15px 16px;
	border: 0;
	background: #fff;
	font: inherit;
	font-weight: 700;
	cursor: pointer;
	color: #1a425b;
}

.faq-trigger::after {
	content: "+";
	float: right;
	font-weight: 900;
	font-size: 1.1rem;
	color: #32738a;
	transition: transform 0.2s ease;
}

.faq-trigger[aria-expanded="true"]::after {
	transform: rotate(45deg);
}

.faq-panel {
	padding: 0 16px 14px;
}

.faq-panel p {
	color: var(--muted);
}

.page-hero {
	padding-top: 62px;
	padding-bottom: 40px;
}

.page-hero h1 {
	font-size: clamp(1.95rem, 3.4vw, 2.8rem);
	margin: 0 0 10px;
}

.page-hero p {
	max-width: 74ch;
	color: var(--muted);
}

.meta-line {
	margin-top: 12px;
	font-size: 0.85rem;
	color: #2f5a72;
}

.doc-layout {
	display: grid;
	grid-template-columns: minmax(0, 280px) minmax(0, 1fr);
	gap: 18px;
	align-items: start;
}

.doc-nav {
	position: sticky;
	top: 88px;
	background: #fff;
	border: 1px solid #d4e0e8;
	border-radius: 14px;
	padding: 16px;
	display: grid;
	gap: 8px;
}

.doc-nav h2 {
	margin: 0 0 6px;
	font-size: 1.15rem;
}

.doc-nav a {
	display: block;
	text-decoration: none;
	color: #24506a;
	padding: 8px 10px;
	border-radius: 8px;
	border: 1px solid #e6eef4;
	background: #f8fbfd;
}

.doc-nav a:hover {
	background: #eef7fc;
}

.doc-main {
	display: grid;
	gap: 14px;
}

.legal-card {
	background: #fff;
	border: 1px solid #d4e0e8;
	border-radius: 16px;
	padding: 20px;
	box-shadow: 0 8px 18px rgba(10, 43, 64, 0.05);
}

.legal-card h2 {
	margin-top: 0;
	margin-bottom: 12px;
	font-size: clamp(1.3rem, 2.4vw, 1.65rem);
}

.legal-card p {
	color: var(--muted);
}

.legal-list {
	padding-left: 18px;
	margin-top: 14px;
	display: grid;
	gap: 10px;
}

.legal-list li p {
	margin-top: 4px;
}

.spec-table-wrap {
	margin-top: 10px;
}

.spec-table {
	min-width: 100%;
}

.spec-table th {
	width: 34%;
	white-space: normal;
}

.cta-strip {
	padding-top: 66px;
	padding-bottom: 90px;
}

.cta-strip .inner {
	background: linear-gradient(135deg, #083654 0%, #06656f 50%, #159789 100%);
	color: #ecfbff;
	border-radius: 20px;
	padding-top: 28px;
	padding-bottom: 28px;
	box-shadow: 0 16px 30px rgba(9, 65, 86, 0.35);
}

.cta-strip h2 {
	margin-bottom: 8px;
}

.cta-strip p {
	color: #cceff6;
	margin-bottom: 16px;
}

.site-footer {
	border-top: 1px solid rgba(153, 175, 187, 0.4);
	padding: 20px 0 28px;
	font-size: 0.9rem;
	background: rgba(248, 251, 248, 0.78);
}

.site-footer .inner {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
}

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

.footer-links a {
	color: #2f5870;
	text-decoration: none;
}

.footer-links a:hover {
	text-decoration: underline;
}

.reveal {
	opacity: 0;
	transform: translateY(16px);
	transition: opacity 0.55s ease, transform 0.55s ease;
}

.reveal.visible {
	opacity: 1;
	transform: translateY(0);
}

@media (max-width: 980px) {
	.menu-toggle {
		display: inline-flex;
		padding: 8px 12px;
		border: 1px solid #c5d7e2;
		border-radius: 10px;
		background: #fff;
		font: inherit;
		font-weight: 700;
		color: #1e4d68;
		cursor: pointer;
	}

	.site-nav {
		position: absolute;
		top: calc(100% + 8px);
		right: 20px;
		left: 20px;
		display: none;
		flex-direction: column;
		align-items: stretch;
		gap: 8px;
		padding: 12px;
		border-radius: 14px;
		border: 1px solid #cad8e3;
		background: rgba(255, 255, 255, 0.96);
		box-shadow: 0 8px 18px rgba(9, 47, 66, 0.12);
	}

	.site-nav.is-open {
		display: flex;
	}

	.hero-grid,
	.simulator {
		grid-template-columns: 1fr;
	}

	.doc-layout {
		grid-template-columns: 1fr;
	}

	.doc-nav {
		position: static;
	}

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

@media (max-width: 720px) {
	.inner {
		padding-left: 16px;
		padding-right: 16px;
	}

	.section {
		padding-top: 64px;
		padding-bottom: 64px;
	}

	.page-hero {
		padding-top: 46px;
		padding-bottom: 26px;
	}

	.hero {
		padding-top: 44px;
	}

	.hero-copy h1 {
		font-size: 2rem;
	}

	.feature-grid,
	.pricing-grid {
		grid-template-columns: 1fr;
	}

	.pill {
		font-size: 0.74rem;
		padding: 4px 8px;
	}

	.btn {
		width: 100%;
	}

	.cta-row {
		width: 100%;
	}

	.site-footer .inner {
		flex-direction: column;
		align-items: flex-start;
	}
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}