/* ==========================================================================
   data-clinic — 案E：オーロラ＋ガラス（ページ幅いっぱいのレイアウト）
   ========================================================================== */

:root {
	/* 配色パレット：--p-* がブランド色、--a-* が強調色（ボタンなど） */
	--p-900: #0B2F7A;
	--p-800: #1446B8;
	--p-700: #1F5BD6;
	--p-600: #3A75EA;
	--p-400: #7FA6F2;
	--p-300: #B3CBF8;
	--p-200: #D4E2FB;
	--p-100: #EBF2FE;
	--p-600-rgb: 58, 117, 234;
	--p-800-rgb: 20, 70, 184;
	--a-500: #FFC21A;
	--a-600: #E6A800;
	--a-700: #8A6200;
	--a-100: #FFF3CC;
	--a-50: #FFFAEB;
	--a-rgb: 255, 194, 26;
	--a-on: #1A1A1A;
	--ink-rgb: 14, 22, 48;

	--bg: #F6F8FC;
	--surface: #FFFFFF;
	--glass: rgba(255, 255, 255, .72);
	--ink: #0E1630;
	--text-2: #2B3550;
	--text-3: #4A5470;
	--line: #E1E6F0;
	--line-strong: #C9D2E3;
	--brand: var(--p-800);
	--brand-dark: var(--p-900);
	--cta: var(--a-500);
	--cta-dark: var(--a-600);
	--blue: var(--p-400);
	--link: var(--p-800);
	--link-hover: var(--p-900);
	--danger: #B3261E;

	--font-sans: "Noto Sans JP", system-ui, -apple-system, "Hiragino Sans", sans-serif;
	--font-en: "Inter", "Noto Sans JP", system-ui, sans-serif;

	--container: none;
	--gutter: clamp(16px, 4vw, 80px);
	--radius-xl: 32px;
	--radius-lg: 24px;
	--radius-md: 18px;
	--radius-sm: 12px;
	--shadow-sm: 0 1px 2px rgba(var(--ink-rgb), .04), 0 8px 24px -14px rgba(var(--ink-rgb), .18);
	--shadow-lg: 0 40px 80px -40px rgba(var(--ink-rgb), .35);
	--section-y: clamp(72px, 9vw, 128px);
	--ease: cubic-bezier(.2, .7, .2, 1);
}

/* サービスごとの色。--c: 主色 / --c-ink: 文字（AA） / --c-tint: 淡い背景 / --c-soft: 大きな数字 */
.c-teal   { --c: var(--p-600); --c-ink: var(--p-700); --c-tint: var(--p-100); --c-soft: var(--p-300); }
.c-blue   { --c: var(--p-400); --c-ink: var(--p-700); --c-tint: var(--p-100); --c-soft: var(--p-200); }
.c-orange { --c: var(--p-600); --c-ink: var(--p-700); --c-tint: var(--p-100); --c-soft: var(--p-200); }
.c-olive  { --c: var(--p-600); --c-ink: var(--p-700); --c-tint: var(--p-100); --c-soft: var(--p-200); }
.c-pink   { --c: var(--p-600); --c-ink: var(--p-700); --c-tint: var(--p-100); --c-soft: var(--p-200); }

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */

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

html {
	font-size: clamp(16px, calc(16px + (100vw - 1280px) * .00625), 20px);
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: 96px;
	background: var(--bg);
}

body {
	margin: 0;
	background: var(--bg);
	color: var(--ink);
	font-family: var(--font-sans);
	font-size: 1.0625rem;
	line-height: 1.9;
	letter-spacing: .02em;
	overflow-x: hidden;
	overflow-wrap: anywhere;
	-webkit-font-smoothing: antialiased;
}

::selection {
	background: var(--p-200);
	color: var(--ink);
}

img,
svg {
	max-width: 100%;
	height: auto;
	vertical-align: middle;
}

a {
	color: var(--link);
	text-underline-offset: 3px;
}

a:hover {
	color: var(--link-hover);
}

:focus-visible {
	outline: 3px solid var(--blue);
	outline-offset: 3px;
}

h1,
h2,
h3 {
	margin: 0;
	color: var(--ink);
	font-weight: 900;
	line-height: 1.3;
	letter-spacing: .02em;
	word-break: auto-phrase;
}

p {
	margin: 0;
}

.container {
	position: relative;
	max-width: var(--container);
	margin: 0 auto;
	padding: 0 var(--gutter);
}

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.skip-link {
	position: absolute;
	top: -100px;
	left: 16px;
	z-index: 100;
	padding: 12px 16px;
	border-radius: 0 0 var(--radius-sm) var(--radius-sm);
	background: var(--ink);
	color: #FFFFFF;
	font-weight: 700;
}

.skip-link:focus {
	top: 0;
	color: #FFFFFF;
}

.en {
	font-family: var(--font-en);
}

.ib {
	display: inline-block;
}

.glass {
	border: 1px solid rgba(255, 255, 255, .9);
	background: var(--glass);
	-webkit-backdrop-filter: blur(16px) saturate(140%);
	backdrop-filter: blur(16px) saturate(140%);
}

/* --------------------------------------------------------------------------
   Buttons / labels
   -------------------------------------------------------------------------- */

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 56px;
	padding: 0 32px;
	border: 1px solid transparent;
	border-radius: 999px;
	font: inherit;
	font-weight: 700;
	text-decoration: none;
	cursor: pointer;
	transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease);
}

.btn__arrow {
	font-family: var(--font-en);
	transition: transform .25s var(--ease);
}

.btn:hover .btn__arrow {
	transform: translateX(4px);
}

.btn--sm {
	min-height: 40px;
	padding: 0 18px;
	font-size: 0.875rem;
}

.btn--dark,
.btn--dark:hover {
	background: var(--ink);
	color: #FFFFFF;
}

.btn--dark:hover {
	transform: translateY(-2px);
	box-shadow: 0 16px 30px -14px rgba(var(--ink-rgb), .6);
}

.btn--glass,
.btn--glass:hover {
	color: var(--ink);
}

.btn--glass:hover {
	transform: translateY(-2px);
	background: #FFFFFF;
}

.btn--light,
.btn--light:hover {
	background: #FFFFFF;
	color: var(--ink);
}

.btn--light:hover {
	transform: translateY(-2px);
	box-shadow: 0 16px 30px -14px rgba(0, 0, 0, .6);
}

.eyebrow {
	margin-bottom: 12px;
	color: var(--c-ink, var(--brand));
	font-family: var(--font-en);
	font-size: 0.875rem;
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
}

.section-title {
	font-size: clamp(2rem, 3.6vw, 3.25rem);
}

.section-head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 16px 48px;
	margin-bottom: clamp(32px, 4vw, 56px);
}

.section-head__note {
	max-width: 34em;
	color: var(--text-2);
}

.chip {
	display: inline-flex;
	align-items: center;
	padding: 4px 12px;
	border-radius: 999px;
	background: var(--c-tint, var(--p-100));
	color: var(--c-ink, var(--brand));
	font-size: 0.8125rem;
	font-weight: 700;
}

.more-link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	font-weight: 700;
	text-decoration: none;
}

.more-link:hover {
	text-decoration: underline;
}

/* --------------------------------------------------------------------------
   Aurora background
   -------------------------------------------------------------------------- */

.aurora {
	position: absolute;
	inset: 0 0 auto;
	z-index: -1;
	height: 1200px;
	overflow: hidden;
	pointer-events: none;
}

.aurora__blob {
	position: absolute;
	border-radius: 999px;
	filter: blur(40px);
}

.aurora__blob--a {
	left: -12%;
	top: -24%;
	width: 62%;
	height: 80%;
	background: radial-gradient(closest-side, var(--p-300), rgba(var(--p-600-rgb), 0));
	animation: aurora-a 18s ease-in-out infinite;
}

.aurora__blob--b {
	right: -14%;
	top: -14%;
	width: 64%;
	height: 82%;
	background: radial-gradient(closest-side, var(--p-200), rgba(var(--p-600-rgb), 0));
	animation: aurora-b 22s ease-in-out infinite;
}

.aurora__blob--c {
	left: 28%;
	top: 30%;
	width: 52%;
	height: 60%;
	background: radial-gradient(closest-side, var(--a-100), rgba(var(--a-rgb), 0));
	animation: aurora-a 20s ease-in-out -7s infinite;
}

.aurora__dots {
	position: absolute;
	inset: 0;
	background-image: radial-gradient(rgba(var(--ink-rgb), .08) 1px, transparent 1px);
	background-size: 22px 22px;
	-webkit-mask-image: linear-gradient(180deg, #000 40%, transparent);
	mask-image: linear-gradient(180deg, #000 40%, transparent);
}

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */

.site-header {
	position: sticky;
	top: 0;
	z-index: 50;
	border-bottom: 1px solid var(--line);
	background: rgba(255, 255, 255, .96);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
	transition: box-shadow .3s var(--ease);
}

.site-header.is-scrolled {
	box-shadow: 0 10px 30px -20px rgba(var(--ink-rgb), .35);
}

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

.site-logo {
	display: flex;
	align-items: center;
	gap: 14px;
	min-height: 56px;
	color: var(--ink);
	text-decoration: none;
}

.site-logo:hover {
	color: var(--ink);
}

.logo-mark {
	flex: none;
	width: 48px;
	height: 48px;
}

.site-logo__text {
	display: flex;
	flex-direction: column;
	line-height: 1.25;
}

.site-logo__name {
	font-size: clamp(1.375rem, 2vw, 1.75rem);
	font-weight: 900;
	letter-spacing: .06em;
}

.site-logo__sub {
	margin-top: 4px;
	color: var(--text-2);
	font-size: 0.8125rem;
	font-weight: 500;
	letter-spacing: .04em;
}

.global-nav {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px 8px;
	font-size: 1.0625rem;
	font-weight: 700;
}

.global-nav a:not(.btn) {
	position: relative;
	display: inline-flex;
	align-items: center;
	min-height: 52px;
	padding: 0 16px;
	border-radius: 10px;
	color: var(--ink);
	text-decoration: none;
	transition: background .2s var(--ease), color .2s var(--ease);
}

.global-nav a:not(.btn):hover {
	background: var(--p-100);
	color: var(--brand);
}

.global-nav a[aria-current="page"]:not(.btn) {
	color: var(--brand);
}

.global-nav a[aria-current="page"]:not(.btn)::after {
	content: "";
	position: absolute;
	left: 16px;
	right: 16px;
	bottom: 8px;
	height: 3px;
	border-radius: 3px;
	background: var(--brand);
}

.global-nav .btn {
	min-height: 56px;
	margin-left: 8px;
	padding: 0 26px;
	font-size: 1.0625rem;
}

.nav-toggle {
	display: none;
	align-items: center;
	gap: 8px;
	min-height: 52px;
	padding: 0 16px;
	border: 1px solid var(--line-strong);
	border-radius: 12px;
	background: #FFFFFF;
	color: var(--ink);
	font: inherit;
	font-size: 0.9375rem;
	font-weight: 700;
	cursor: pointer;
}

.nav-toggle__bars,
.nav-toggle__bars::before,
.nav-toggle__bars::after {
	display: block;
	width: 20px;
	height: 2px;
	border-radius: 1px;
	background: var(--ink);
	transition: transform .2s ease, background .2s ease;
}

.nav-toggle__bars {
	position: relative;
}

.nav-toggle__bars::before,
.nav-toggle__bars::after {
	content: "";
	position: absolute;
	left: 0;
}

.nav-toggle__bars::before { top: -6px; }
.nav-toggle__bars::after  { top: 6px; }

.is-open .nav-toggle__bars { background: transparent; }
.is-open .nav-toggle__bars::before { transform: translateY(6px) rotate(45deg); }
.is-open .nav-toggle__bars::after  { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 1100px) {
	.nav-toggle {
		display: inline-flex;
	}

	.global-nav {
		display: none;
		flex-direction: column;
		align-items: stretch;
		width: 100%;
		padding: 8px 0 12px;
		font-size: 1.125rem;
	}

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

	.global-nav a:not(.btn) {
		min-height: 56px;
		border-bottom: 1px solid var(--line);
		border-radius: 0;
	}

	.global-nav a[aria-current="page"]:not(.btn)::after {
		display: none;
	}

	.global-nav .btn {
		margin: 12px 0 0;
	}
}

@media (max-width: 480px) {
	.site-logo {
		gap: 10px;
	}

	.logo-mark {
		width: 38px;
		height: 38px;
	}

	.site-logo__name {
		font-size: 1.3125rem;
	}

	.site-logo__sub {
		font-size: 0.75rem;
	}

	.site-logo__area {
		display: none;
	}

	.nav-toggle {
		flex-direction: column;
		justify-content: center;
		gap: 8px;
		min-width: 60px;
		padding: 8px 6px 6px;
		font-size: 0.75rem;
		line-height: 1;
	}

	.nav-toggle__bars {
		margin-top: 6px;
	}
}

/* --------------------------------------------------------------------------
   Hero（左：コピー／右：AIデモ）
   -------------------------------------------------------------------------- */

.hero {
	position: relative;
	padding: clamp(32px, 5vw, 72px) 0 clamp(56px, 6vw, 96px);
	isolation: isolate;
}

.hero__grid {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
	align-items: center;
	gap: clamp(32px, 4vw, 72px);
}

.hero__kicker {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 24px;
	padding: 6px 14px;
	border-radius: 999px;
	color: var(--brand);
	font-family: var(--font-en);
	font-size: 0.8125rem;
	font-weight: 600;
}

.hero__kicker::before {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: 999px;
	background: var(--p-600);
	box-shadow: 0 0 0 4px rgba(var(--p-600-rgb), .2);
}

.hero__title {
	margin-bottom: 28px;
	font-size: clamp(2.75rem, 5.6vw, 5.75rem);
	line-height: 1.18;
}

.grad-text {
	background: linear-gradient(90deg, var(--p-800), var(--p-600), var(--p-400), var(--p-800));
	background-size: 200% 100%;
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	animation: shine 8s linear infinite;
}

.hero__lead {
	max-width: 34em;
	margin-bottom: 36px;
	color: var(--text-2);
	font-size: clamp(1rem, 1.3vw, 1.1875rem);
}

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

.facts {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 8px;
	margin: 40px 0 0;
	padding: 0;
	list-style: none;
}

.facts li {
	padding: 14px 16px;
	border-radius: var(--radius-md);
}

.facts b {
	display: block;
	color: var(--brand);
	font-family: var(--font-en);
	font-size: 1.625rem;
	font-weight: 800;
	line-height: 1.2;
}

.facts span {
	display: block;
	color: var(--text-2);
	font-size: 0.75rem;
	line-height: 1.6;
}

/* AIアシスタントのデモ */
.demo {
	border-radius: 28px;
	box-shadow: var(--shadow-lg);
	overflow: hidden;
}

.demo__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 14px 20px;
	border-bottom: 1px solid var(--line);
	color: var(--text-3);
	font-size: 0.75rem;
}

.demo__dots {
	display: flex;
	gap: 6px;
}

.demo__dots span {
	width: 10px;
	height: 10px;
	border-radius: 999px;
	background: var(--line-strong);
}

.demo__title {
	font-family: var(--font-en);
	font-size: 0.8125rem;
	font-weight: 600;
}

.demo__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	padding: 16px 20px 0;
}

.demo__chip {
	min-height: 40px;
	padding: 0 16px;
	border: 1px solid #D5DFDA;
	border-radius: 999px;
	background: #FFFFFF;
	color: var(--ink);
	font: inherit;
	font-size: 0.875rem;
	font-weight: 700;
	cursor: pointer;
	transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}

.demo__chip:hover {
	border-color: var(--brand);
}

.demo__chip[aria-selected="true"] {
	border-color: var(--brand);
	background: var(--brand);
	color: #FFFFFF;
}

.demo__scene {
	display: grid;
	grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
	gap: 20px;
	padding: 20px;
}

.demo__scene[hidden] {
	display: none;
}

.demo__chat {
	display: flex;
	flex-direction: column;
	gap: 14px;
	min-width: 0;
}

.bubble-user {
	align-self: flex-end;
	max-width: 90%;
	padding: 12px 16px;
	border-radius: 18px 18px 4px 18px;
	background: var(--ink);
	color: #FFFFFF;
	font-size: 0.9375rem;
}

.bubble-ai {
	display: flex;
	gap: 10px;
	align-items: flex-start;
}

.bubble-ai__avatar {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 32px;
	height: 32px;
	border-radius: 10px;
	background: linear-gradient(135deg, var(--p-800), var(--p-400));
	color: #FFFFFF;
	font-family: var(--font-en);
	font-size: 0.75rem;
	font-weight: 800;
}

.bubble-ai__body {
	flex: 1;
	min-width: 0;
	padding: 12px 16px;
	border-radius: 4px 18px 18px 18px;
	background: var(--p-100);
	font-size: 0.9375rem;
}

.js .bubble-ai__answer {
	clip-path: inset(0 100% 0 0);
}

.bubble-ai__points {
	display: grid;
	gap: 4px;
	margin: 10px 0 0;
	padding: 0;
	list-style: none;
	color: var(--text-2);
	font-size: 0.875rem;
}

.js .bubble-ai__points {
	opacity: 0;
}

.bubble-ai__points li::before {
	content: "・";
}

.is-playing .bubble-ai__answer {
	animation: type 1.4s steps(28, end) .5s forwards;
}

.is-playing .bubble-ai__points {
	animation: fade-up .6s var(--ease) 2.1s forwards;
}

.demo__input {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 12px 16px;
	border: 1px solid var(--line);
	border-radius: 14px;
	background: #FFFFFF;
	color: var(--text-3);
	font-size: 0.875rem;
}

.caret {
	width: 2px;
	height: 18px;
	background: var(--brand);
	animation: blink 1s infinite;
}

.demo__chart {
	min-width: 0;
	padding: 18px;
	border: 1px solid var(--line);
	border-radius: 20px;
	background: #FFFFFF;
}

.demo__chart-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	margin-bottom: 12px;
	font-size: 0.875rem;
	font-weight: 700;
}

.spinner {
	flex: none;
	animation: spin 1.2s linear infinite;
}

.bars {
	display: flex;
	align-items: flex-end;
	gap: 10px;
	height: 180px;
	padding-bottom: 4px;
	border-bottom: 1px solid var(--line);
}

.bars span {
	flex: 1;
	height: var(--h);
	border-radius: 8px 8px 2px 2px;
	background: var(--p-600);
	transform-origin: bottom;
}

.js .bars span {
	transform: scaleY(0);
}

.bars span.is-pred {
	background: repeating-linear-gradient(135deg, var(--p-400) 0 6px, var(--p-300) 6px 12px);
}

.is-playing .bars span {
	animation: grow .8s var(--ease) forwards;
	animation-delay: calc(.3s + var(--i) * .12s);
}

.legend {
	display: flex;
	gap: 16px;
	margin-top: 10px;
	color: var(--text-3);
	font-size: 0.75rem;
}

.legend .is-pred {
	color: var(--blue);
}

.demo__note {
	padding: 0 20px 16px;
	color: var(--text-3);
	font-size: 0.75rem;
}

/* --------------------------------------------------------------------------
   Marquee
   -------------------------------------------------------------------------- */

.marquee {
	padding: 18px 0;
	border-top: 1px solid var(--line);
	border-bottom: 1px solid var(--line);
	background: #FFFFFF;
	overflow: hidden;
}

.marquee__track {
	display: flex;
	width: max-content;
	animation: marquee 40s linear infinite;
}

.marquee__group {
	display: flex;
	flex: none;
	align-items: center;
	gap: 40px;
	padding-right: 40px;
	color: var(--text-3);
	font-family: var(--font-en);
	font-size: 0.9375rem;
	font-weight: 600;
	letter-spacing: .08em;
	white-space: nowrap;
}

.marquee__group i {
	width: 6px;
	height: 6px;
	border-radius: 999px;
	background: var(--p-600);
}

/* --------------------------------------------------------------------------
   Sections
   -------------------------------------------------------------------------- */

.section {
	position: relative;
	padding: var(--section-y) 0;
}

.section--white {
	background: #FFFFFF;
}

/* サービス */
.services {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 16px;
}

.service-card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 12px;
	min-height: 340px;
	padding: 32px 28px;
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	background: linear-gradient(160deg, var(--c-tint), #FFFFFF 70%);
	transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}

.service-card:hover {
	transform: translateY(-6px);
	box-shadow: var(--shadow-lg);
}

.service-card__num {
	color: var(--c-soft);
	font-family: var(--font-en);
	font-size: 3.5rem;
	font-weight: 800;
	line-height: 1;
}

.service-card__icon {
	position: absolute;
	top: 28px;
	right: 28px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: 14px;
	background: #FFFFFF;
	color: var(--c-ink);
	box-shadow: var(--shadow-sm);
	transition: transform .35s var(--ease);
}

.service-card:hover .service-card__icon {
	transform: rotate(-8deg) scale(1.08);
}

.service-card__en {
	margin-top: 16px;
	color: var(--c-ink);
	font-family: var(--font-en);
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: .08em;
}

.service-card__title {
	font-size: 1.5rem;
}

.service-card__text {
	color: var(--text-2);
	font-size: 0.9375rem;
}

.service-card__more {
	margin-top: auto;
	color: var(--c-ink);
	font-size: 0.875rem;
	font-weight: 700;
}

.service-card__more span {
	display: inline-block;
	transition: transform .25s var(--ease);
}

.service-card:hover .service-card__more span {
	transform: translateX(4px);
}

/* カード全体をクリックできるようにする透明リンク */
.card-link {
	position: absolute;
	inset: 0;
	z-index: 2;
	border-radius: inherit;
}

/* 強み */
.strengths {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 16px;
}

.strength {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 32px 28px;
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-sm);
}

.strength__num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: 14px;
	background: var(--c-tint);
	color: var(--c-ink);
	font-family: var(--font-en);
	font-weight: 800;
}

.strength__title {
	font-size: 1.25rem;
}

.strength__text {
	color: var(--text-2);
	font-size: 0.9375rem;
}

/* サービスごとの進め方 */
.flows {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 16px;
}

.flow {
	padding: 28px;
	border-radius: var(--radius-lg);
	box-shadow: 0 20px 40px -30px rgba(var(--ink-rgb), .4);
	scroll-margin-top: 96px;
}

.flow__title {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 20px;
	padding-bottom: 14px;
	border-bottom: 3px solid var(--c);
	font-size: 1.25rem;
}

.flow__title .en {
	margin-left: auto;
	color: var(--c-ink);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: .06em;
}

.flow__steps {
	display: grid;
	gap: 0;
	margin: 0;
	padding: 0;
	list-style: none;
}

.flow__step {
	position: relative;
	display: grid;
	grid-template-columns: 28px minmax(0, 1fr);
	gap: 12px;
	padding-bottom: 18px;
}

.flow__step:not(:last-child)::before {
	content: "";
	position: absolute;
	left: 13px;
	top: 30px;
	bottom: 2px;
	width: 2px;
	background: var(--c-tint);
}

.flow__no {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 999px;
	background: var(--c-ink);
	color: #FFFFFF;
	font-family: var(--font-en);
	font-size: 0.8125rem;
	font-weight: 700;
}

.flow__step-title {
	display: block;
	font-size: 0.9375rem;
	font-weight: 700;
	line-height: 1.6;
}

.flow__step-text {
	display: block;
	color: var(--text-3);
	font-size: 0.8125rem;
	line-height: 1.7;
}

.note {
	margin-top: 28px;
	color: var(--text-2);
	font-size: 0.875rem;
}

/* 実績 */
.cases {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 16px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.case {
	display: flex;
	align-items: center;
	gap: 18px;
	padding: 20px;
	border: 1px solid var(--line);
	border-radius: 20px;
	background: #FFFFFF;
	transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}

.case:hover {
	transform: translateY(-3px);
	box-shadow: var(--shadow-sm);
}

.case__thumb {
	flex: none;
	width: 64px;
	height: 64px;
	border-radius: 16px;
	background: linear-gradient(135deg, var(--c-soft), var(--c-tint));
}

.case__label {
	display: block;
	color: var(--c-ink);
	font-size: 0.75rem;
	font-weight: 700;
}

.case__title {
	display: block;
	font-weight: 700;
	line-height: 1.6;
}

.works-more {
	margin-top: 16px;
	text-align: right;
}

.media-link {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px 32px;
	margin-top: 24px;
	padding: 32px 36px;
	border-radius: var(--radius-lg);
	background: linear-gradient(110deg, var(--c-tint), #FFFFFF 70%);
	border: 1px solid var(--line);
	color: var(--ink);
	text-decoration: none;
	transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}

.media-link:hover {
	color: var(--ink);
	transform: translateY(-3px);
	box-shadow: var(--shadow-sm);
}

.media-link__body {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}

.media-link__label {
	color: var(--c-ink);
	font-family: var(--font-en);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: .12em;
}

.media-link__title {
	font-size: 1.375rem;
	font-weight: 900;
}

.media-link__text {
	color: var(--text-2);
	font-size: 0.9375rem;
}

.media-link__url {
	display: inline-flex;
	align-items: center;
	min-height: 48px;
	padding: 0 22px;
	border-radius: 999px;
	background: #FFFFFF;
	color: var(--c-ink);
	font-family: var(--font-en);
	font-size: 0.875rem;
	font-weight: 600;
	box-shadow: var(--shadow-sm);
}

/* CTA（全幅の暗い帯） */
.cta {
	position: relative;
	padding: clamp(80px, 10vw, 140px) 0;
	background: var(--ink);
	color: #CFE0D8;
	text-align: center;
	overflow: hidden;
	isolation: isolate;
}

.cta::before,
.cta::after {
	content: "";
	position: absolute;
	z-index: -1;
	width: 60%;
	height: 160%;
	border-radius: 999px;
	filter: blur(20px);
}

.cta::before {
	left: -15%;
	top: -50%;
	background: radial-gradient(closest-side, rgba(var(--p-600-rgb), .45), rgba(var(--p-600-rgb), 0));
	animation: aurora-a 18s ease-in-out infinite;
}

.cta::after {
	right: -15%;
	bottom: -50%;
	background: radial-gradient(closest-side, rgba(var(--p-600-rgb), .45), rgba(var(--p-600-rgb), 0));
	animation: aurora-b 22s ease-in-out infinite;
}

.cta .eyebrow {
	color: var(--p-300);
}

.cta__title {
	margin-bottom: 20px;
	color: #FFFFFF;
	font-size: clamp(2rem, 4.4vw, 4rem);
}

.cta__text {
	max-width: 34em;
	margin: 0 auto 40px;
	font-size: 1.0625rem;
}

.cta .btn {
	min-height: 60px;
	padding: 0 40px;
	font-size: 1.0625rem;
}

/* --------------------------------------------------------------------------
   Lower pages
   -------------------------------------------------------------------------- */

.page-hero {
	position: relative;
	padding: clamp(40px, 6vw, 88px) 0 clamp(40px, 5vw, 72px);
	isolation: isolate;
}

.page-hero .aurora {
	height: 640px;
}

.page-hero__title {
	font-size: clamp(2.25rem, 5vw, 4.5rem);
	line-height: 1.2;
}

.page-hero__lead {
	max-width: 40em;
	margin-top: 20px;
	color: var(--text-2);
	font-size: 1.0625rem;
}

.breadcrumb {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 24px;
	color: var(--text-3);
	font-size: 0.8125rem;
}

.breadcrumb a {
	color: var(--text-3);
	text-decoration: none;
}

.breadcrumb a:hover {
	color: var(--brand);
	text-decoration: underline;
}

.page-body {
	padding: 24px 0 var(--section-y);
}

/* サービス詳細 */
.service-detail {
	display: grid;
	grid-template-columns: minmax(0, 4fr) minmax(0, 5fr) minmax(0, 5fr);
	gap: clamp(24px, 3vw, 48px);
	padding: clamp(28px, 3vw, 44px);
	border: 1px solid var(--line);
	border-radius: var(--radius-xl);
	background: linear-gradient(160deg, var(--c-tint), #FFFFFF 55%);
	scroll-margin-top: 104px;
}

.service-detail + .service-detail {
	margin-top: 20px;
}

.service-detail__head {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.service-detail__head .service-card__icon {
	position: static;
	width: 64px;
	height: 64px;
	border-radius: 18px;
}

.service-detail__title {
	font-size: clamp(1.625rem, 2.4vw, 2.125rem);
}

.service-detail__sub {
	margin-bottom: 12px;
	color: var(--c-ink);
	font-size: 0.875rem;
	font-weight: 700;
}

.rx {
	display: grid;
	gap: 0;
	margin: 0;
}

.rx__row {
	padding: 14px 0;
	border-bottom: 1px solid var(--line);
}

.rx__row:first-child {
	padding-top: 0;
}

.rx dt {
	color: var(--c-ink);
	font-size: 0.8125rem;
	font-weight: 700;
}

.rx dd {
	margin: 0;
}

.rx__row--sub dt,
.rx__row--sub dd {
	color: var(--text-3);
}

.service-detail .flow {
	padding: 0;
	border: 0;
	background: none;
	box-shadow: none;
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
}

/* 事業者情報 */
.info-table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	background: #FFFFFF;
	overflow: hidden;
}

.info-table th,
.info-table td {
	padding: 22px 28px;
	border-bottom: 1px solid var(--line);
	text-align: left;
	vertical-align: top;
}

.info-table tr:last-child th,
.info-table tr:last-child td {
	border-bottom: 0;
}

.info-table th {
	width: 14em;
	background: #F8FAF9;
	color: var(--text-2);
	font-weight: 700;
	white-space: nowrap;
}

.prose {
	max-width: 820px;
	color: var(--text-2);
}

.prose > * + * {
	margin-top: 1.2em;
}

.prose h2 {
	margin-top: 2em;
	font-size: 1.5rem;
}

.prose ul,
.prose ol {
	padding-left: 1.4em;
}

.prose--after {
	margin-top: 48px;
}

/* データの取り扱い方針 */
.policy-list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
	gap: 16px;
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: policy;
}

.policy-list li {
	display: grid;
	grid-template-columns: 56px minmax(0, 1fr);
	align-items: center;
	gap: 20px;
	padding: 24px 26px;
	border: 1px solid var(--line);
	border-radius: var(--radius-md);
	background: #FFFFFF;
	counter-increment: policy;
}

.policy-list li::before {
	content: counter(policy, decimal-leading-zero);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: 16px;
	background: var(--c-tint);
	color: var(--c-ink);
	font-family: var(--font-en);
	font-weight: 800;
}

/* --------------------------------------------------------------------------
   Contact form
   -------------------------------------------------------------------------- */

.form-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 400px);
	gap: clamp(24px, 3vw, 48px);
	align-items: start;
}

.form {
	display: grid;
	gap: 28px;
	padding: clamp(24px, 3vw, 48px);
	border: 1px solid var(--line);
	border-radius: var(--radius-xl);
	background: #FFFFFF;
	box-shadow: var(--shadow-sm);
}

.form-aside {
	position: sticky;
	top: 104px;
	display: grid;
	gap: 16px;
}

.form-aside__card {
	padding: 28px;
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-sm);
}

.form-aside__label {
	margin-bottom: 6px;
	color: var(--c-ink, var(--brand));
	font-family: var(--font-en);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
}

.form-aside__title {
	margin-bottom: 12px;
	font-size: 1.125rem;
}

.form-aside ol {
	display: grid;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
	color: var(--text-2);
	font-size: 0.875rem;
}

.form-aside ol .en {
	margin-right: 8px;
	color: var(--brand);
	font-size: 0.75rem;
	font-weight: 700;
}

.form-aside p {
	color: var(--text-2);
	font-size: 0.875rem;
}

.form__notice {
	padding: 16px 20px;
	border-radius: var(--radius-sm);
	background: var(--a-100);
	color: var(--a-700);
	font-size: 0.875rem;
}

.form__alert {
	padding: 16px 20px;
	border: 1px solid #F1C4BF;
	border-radius: var(--radius-sm);
	background: #FDF0EE;
	color: var(--danger);
	font-weight: 500;
}

.field {
	display: grid;
	gap: 8px;
}

.field__label {
	font-weight: 700;
}

.req,
.opt {
	display: inline-block;
	margin-left: 8px;
	padding: 1px 10px;
	border-radius: 999px;
	font-size: 0.75rem;
	font-weight: 700;
	vertical-align: 2px;
}

.req { background: var(--ink); color: #FFFFFF; }
.opt { background: #EEF2F0; color: var(--text-2); }

.field input[type="text"],
.field input[type="email"],
.field select,
.field textarea {
	width: 100%;
	min-height: 54px;
	padding: 12px 18px;
	border: 1px solid var(--line-strong);
	border-radius: var(--radius-sm);
	background: #FBFCFB;
	color: var(--ink);
	font: inherit;
	transition: border-color .2s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease);
}

.field select {
	appearance: none;
	padding-right: 48px;
	background-image: linear-gradient(45deg, transparent 50%, var(--text-2) 50%), linear-gradient(135deg, var(--text-2) 50%, transparent 50%);
	background-position: calc(100% - 24px) 50%, calc(100% - 18px) 50%;
	background-size: 6px 6px;
	background-repeat: no-repeat;
}

.field textarea {
	min-height: 220px;
	resize: vertical;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
	border-color: var(--brand);
	outline: none;
	background-color: #FFFFFF;
	box-shadow: 0 0 0 4px rgba(var(--p-800-rgb), .14);
}

.field [aria-invalid="true"] {
	border-color: var(--danger);
}

.field__error {
	color: var(--danger);
	font-size: 0.875rem;
	font-weight: 500;
}

.checkbox {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	min-height: 44px;
	cursor: pointer;
}

.checkbox input {
	width: 26px;
	height: 26px;
	margin: 0;
	accent-color: var(--brand);
}

.form .btn {
	justify-self: start;
	min-width: 240px;
}

/* honeypot：画面にもスクリーンリーダーにも出さない */
.dc-hp {
	position: absolute !important;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.thanks {
	max-width: 820px;
	padding: 48px 44px;
	border-radius: var(--radius-xl);
	background: var(--p-100);
	color: var(--text-2);
}

.thanks h2 {
	margin-bottom: 16px;
	font-size: 1.75rem;
}

.thanks p + p {
	margin-top: 12px;
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.site-footer {
	padding: 64px 0 36px;
	border-top: 1px solid var(--line);
	background: #FFFFFF;
	color: var(--text-3);
	font-size: 0.875rem;
}

.site-footer__inner {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 32px;
}

.site-footer__brand {
	display: grid;
	gap: 10px;
	max-width: 30em;
}

.site-footer__name {
	display: flex;
	align-items: center;
	gap: 10px;
	color: var(--ink);
	font-size: 1.125rem;
	font-weight: 700;
	letter-spacing: .06em;
}

.site-footer__nav {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, auto));
	gap: 0 40px;
}

.site-footer__nav a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	color: var(--text-2);
	text-decoration: none;
}

.site-footer__nav a:hover {
	color: var(--brand);
	text-decoration: underline;
}

.site-footer__copy {
	margin-top: 48px;
	padding-top: 20px;
	border-top: 1px solid var(--line);
	font-family: var(--font-en);
	font-size: 0.75rem;
}

/* --------------------------------------------------------------------------
   Reveal on scroll
   -------------------------------------------------------------------------- */

.js .reveal {
	opacity: 0;
	transform: translateY(20px);
	transition: opacity .9s var(--ease), transform .9s var(--ease), box-shadow .35s var(--ease);
	transition-delay: calc(var(--d, 0) * 90ms);
}

.js .reveal.is-visible {
	opacity: 1;
	transform: none;
}

.js .reveal.is-visible.service-card:hover {
	transform: translateY(-6px);
	transition-delay: 0s;
}

/* --------------------------------------------------------------------------
   Keyframes
   -------------------------------------------------------------------------- */

@keyframes aurora-a {
	0%, 100% { transform: translate(0, 0) scale(1); }
	50%      { transform: translate(8%, 6%) scale(1.15); }
}

@keyframes aurora-b {
	0%, 100% { transform: translate(0, 0) scale(1.1); }
	50%      { transform: translate(-10%, 4%) scale(.95); }
}

@keyframes shine {
	to { background-position: -200% 0; }
}

@keyframes type {
	from { clip-path: inset(0 100% 0 0); }
	to   { clip-path: inset(0 0 0 0); }
}

@keyframes fade-up {
	from { opacity: 0; transform: translateY(8px); }
	to   { opacity: 1; transform: none; }
}

@keyframes grow {
	to { transform: scaleY(1); }
}

@keyframes blink {
	0%, 49%   { opacity: 1; }
	50%, 100% { opacity: 0; }
}

@keyframes spin {
	to { transform: rotate(360deg); }
}

@keyframes marquee {
	to { transform: translateX(-50%); }
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 1200px) {
	.hero__grid {
		grid-template-columns: minmax(0, 1fr);
	}

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

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

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

	.service-detail__head {
		grid-column: 1 / -1;
	}

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

	.form-aside {
		position: static;
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 760px) {
	.facts {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

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

	.services,
	.flows,
	.strengths,
	.cases {
		grid-template-columns: minmax(0, 1fr);
	}

	.service-card {
		min-height: 0;
	}

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

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

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

	.site-footer__nav {
		grid-template-columns: repeat(2, minmax(0, auto));
	}
}

@media (max-width: 600px) {
	.btn-row .btn {
		width: 100%;
	}

	.bubble-ai__answer {
		white-space: normal;
	}

	.bars {
		height: 140px;
	}

	.info-table th,
	.info-table td {
		display: block;
		width: auto;
		padding: 14px 22px;
	}

	.info-table th {
		padding-bottom: 6px;
		border-bottom: 0;
	}

	.form .btn {
		width: 100%;
	}

	.thanks {
		padding: 32px 24px;
	}

	.media-link {
		padding: 26px 22px;
	}

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

	.policy-list li {
		grid-template-columns: 48px minmax(0, 1fr);
		padding: 20px;
	}

	.policy-list li::before {
		width: 48px;
		height: 48px;
	}
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation: none !important;
		transition: none !important;
	}

	.js .reveal {
		opacity: 1;
		transform: none;
	}

	.js .bubble-ai__answer {
		clip-path: none;
	}

	.js .bubble-ai__points {
		opacity: 1;
	}

	.js .bars span {
		transform: none;
	}
}

/* --------------------------------------------------------------------------
   Primary CTA（相談ボタン）
   -------------------------------------------------------------------------- */

.btn--cta,
.btn--cta:hover {
	background: var(--cta);
	color: var(--a-on);
}

.btn--cta:hover {
	background: var(--cta-dark);
	transform: translateY(-2px);
	box-shadow: 0 16px 30px -14px rgba(var(--a-rgb), .7);
}

.btn--lg {
	min-height: 64px;
	padding: 0 40px;
	font-size: 1.125rem;
}

/* --------------------------------------------------------------------------
   中小企業向けのセクション
   -------------------------------------------------------------------------- */

.container--narrow {
	max-width: none;
}

.section-head--center {
	flex-direction: column;
	align-items: center;
	text-align: center;
}

/* こんなお悩み */
.worries-section {
	background: #FFFFFF;
}

.worries {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 16px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.worry {
	display: grid;
	grid-template-columns: 36px minmax(0, 1fr);
	gap: 8px 14px;
	align-content: start;
	padding: 24px;
	border: 2px solid var(--line);
	border-radius: var(--radius-lg);
	background: #FBFCFB;
	transition: border-color .25s var(--ease), transform .25s var(--ease);
}

.worry:hover {
	border-color: var(--brand);
	transform: translateY(-3px);
}

.worry__check {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 10px;
	background: var(--brand);
	color: #FFFFFF;
}

.worry__text {
	align-self: center;
	font-size: 1.125rem;
	font-weight: 700;
	line-height: 1.6;
}

.worry__link {
	grid-column: 2;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 44px;
	color: var(--brand);
	font-size: 0.9375rem;
	font-weight: 700;
	text-decoration: none;
}

.worry__link:hover {
	text-decoration: underline;
}

.worries__answer {
	margin-top: 40px;
	font-size: 1.25rem;
	font-weight: 500;
	line-height: 1.9;
	text-align: center;
}

.worries__answer strong {
	background: linear-gradient(transparent 62%, rgba(var(--a-rgb), .25) 62%);
}

/* 代表あいさつ */
.greeting {
	display: grid;
	grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
	gap: clamp(28px, 4vw, 64px);
	align-items: center;
	padding: clamp(24px, 4vw, 56px);
	border: 1px solid var(--line);
	border-radius: var(--radius-xl);
	background: #FFFFFF;
}

.greeting__photo {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 4 / 5;
	border-radius: var(--radius-lg);
	background: linear-gradient(160deg, var(--p-100), var(--p-100));
	color: var(--text-2);
	font-size: 0.9375rem;
}

.greeting__text {
	margin: 16px 0 24px;
	color: var(--text-2);
	font-size: 1.125rem;
	line-height: 2;
}

.greeting__name {
	margin-bottom: 12px;
	font-size: 1.5rem;
	font-weight: 900;
}

.greeting__name span {
	display: block;
	color: var(--text-3);
	font-size: 0.875rem;
	font-weight: 500;
}

/* よくある質問 */
.faq {
	display: grid;
	gap: 12px;
}

.faq__item {
	border: 1px solid var(--line);
	border-radius: var(--radius-md);
	background: #FBFCFB;
}

.faq__item[open] {
	border-color: var(--brand);
	background: #FFFFFF;
}

.faq__q {
	position: relative;
	display: flex;
	align-items: center;
	gap: 16px;
	min-height: 72px;
	padding: 16px 56px 16px 20px;
	font-size: 1.125rem;
	font-weight: 700;
	cursor: pointer;
	list-style: none;
}

.faq__q::-webkit-details-marker {
	display: none;
}

.faq__q::after {
	content: "+";
	position: absolute;
	right: 22px;
	top: 50%;
	color: var(--brand);
	font-family: var(--font-en);
	font-size: 1.625rem;
	font-weight: 600;
	transform: translateY(-50%);
	transition: transform .2s var(--ease);
}

.faq__item[open] .faq__q::after {
	transform: translateY(-50%) rotate(45deg);
}

.faq__mark {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 36px;
	height: 36px;
	border-radius: 999px;
	background: var(--brand);
	color: #FFFFFF;
	font-family: var(--font-en);
	font-size: 0.9375rem;
	font-weight: 800;
}

.faq__mark--a {
	background: var(--cta);
}

.faq__a {
	display: flex;
	gap: 16px;
	padding: 0 20px 20px;
	color: var(--text-2);
	font-size: 1.0625rem;
}

.faq__a p {
	padding-top: 4px;
}

@media (max-width: 1100px) {
	.worries {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 760px) {
	.worries,
	.greeting {
		grid-template-columns: minmax(0, 1fr);
	}

	.worries__answer {
		font-size: 1.0625rem;
		text-align: left;
	}

	.pc-only {
		display: none;
	}

	.greeting__photo {
		max-width: 320px;
	}

	.faq__q {
		font-size: 1rem;
	}
}

/* 初回無料の案内 */
.hero__free {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin-top: 16px;
	color: var(--text-2);
	font-size: 0.9375rem;
	font-weight: 500;
}

.hero__free-badge {
	display: inline-flex;
	align-items: center;
	padding: 4px 12px;
	border-radius: 999px;
	background: var(--a-100);
	color: var(--a-700);
	font-size: 0.875rem;
	font-weight: 900;
}

.worries__answer strong + br + strong,
.worries__answer strong {
	font-weight: 900;
}

/* 料金の目安 */
.pricing {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 16px;
}

.price-card {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 32px 28px;
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	background: #FFFFFF;
}

.price-card--free {
	border: 2px solid var(--cta);
	background: var(--a-50);
}

.price-card__label {
	color: var(--text-2);
	font-size: 0.875rem;
	font-weight: 700;
	line-height: 1.7;
}

.price-card--free .price-card__label {
	color: var(--a-700);
}

.price-card__title {
	font-size: 1.375rem;
}

.price-card__price {
	color: var(--brand);
	font-size: clamp(1.875rem, 3vw, 2.5rem);
	font-weight: 900;
	line-height: 1.3;
}

.price-card--free .price-card__price {
	color: var(--a-700);
}

.price-card__fit {
	color: var(--text-2);
	font-size: 0.9375rem;
}

.price-card .btn {
	margin-top: auto;
}

.price-card__items {
	display: grid;
	gap: 6px;
	margin: 6px 0 0;
	padding: 14px 0 0;
	border-top: 1px solid var(--line);
	list-style: none;
	font-size: 0.9375rem;
}

.price-card__items li {
	position: relative;
	padding-left: 22px;
}

.price-card__items li::before {
	content: "";
	position: absolute;
	left: 2px;
	top: .7em;
	width: 10px;
	height: 6px;
	border-left: 2px solid var(--brand);
	border-bottom: 2px solid var(--brand);
	transform: translateY(-50%) rotate(-45deg);
}

.pricing__notes {
	display: grid;
	gap: 6px;
	margin: 24px 0 0;
	padding: 0;
	list-style: none;
	color: var(--text-2);
	font-size: 0.9375rem;
}

.pricing__notes li::before {
	content: "※";
	margin-right: 4px;
}

@media (max-width: 1100px) {
	.pricing {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* --------------------------------------------------------------------------
   サイドビジネスのページ（案08：モノクロ人物＋電気色）
   -------------------------------------------------------------------------- */

.biz {
	--biz: var(--p-800);
	--biz-soft: var(--p-100);
	--biz-ink: var(--p-800);
	background: #FFFFFF;
}

.biz--music {
	--biz: var(--a-500);
	--biz-soft: var(--a-100);
	--biz-ink: var(--a-700);
}

.biz-hero {
	display: grid;
	grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
	min-height: 640px;
}

.biz-hero__visual {
	position: relative;
	min-height: 560px;
	overflow: hidden;
	background: linear-gradient(160deg, #D9D9D9 0%, #8C8C8C 45%, #2B2B2B 100%);
}

.biz-hero__visual img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: grayscale(1);
	animation: biz-zoom 10s ease-out forwards;
}

.biz-hero__placeholder {
	position: absolute;
	left: 24px;
	top: 24px;
	padding: 6px 12px;
	background: rgba(255, 255, 255, .85);
	color: #111111;
	font-size: 0.8125rem;
}

/* 写真を斜めに横切る色の面 */
.biz-hero__plane {
	position: absolute;
	left: 34%;
	top: -10%;
	width: 44%;
	height: 120%;
	background: var(--biz);
	opacity: .78;
	mix-blend-mode: multiply;
	transform: skewX(-18deg);
	animation: biz-slide 1.2s cubic-bezier(.2, .7, .2, 1) .2s both;
}

.biz-hero__word {
	position: absolute;
	left: 28px;
	bottom: 16px;
	margin: 0;
	color: #FFFFFF;
	font-family: var(--font-en);
	font-size: clamp(5.5rem, 12vw, 11.25rem);
	font-weight: 800;
	line-height: .85;
	letter-spacing: -.04em;
}

.biz-hero__body {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: clamp(32px, 4vw, 64px);
}

.biz-hero__eyebrow {
	margin-bottom: 18px;
	color: var(--biz-ink);
	font-family: var(--font-en);
	font-size: 0.875rem;
	font-weight: 700;
	letter-spacing: .14em;
}

.biz-hero__title {
	margin-bottom: 24px;
	word-break: keep-all;
	font-size: clamp(2.125rem, 3.6vw, 3.25rem);
	line-height: 1.35;
}

.biz-hero__lead {
	margin-bottom: 32px;
	color: var(--text-2);
	line-height: 2;
}

.biz-hero__body .breadcrumb {
	margin-bottom: 32px;
}

.btn--biz,
.btn--biz:hover {
	background: var(--biz);
	color: #FFFFFF;
}

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

.biz-band {
	overflow: hidden;
	padding: 22px 0;
	background: var(--biz);
	color: #FFFFFF;
}

.biz-band__track {
	display: flex;
	width: max-content;
	animation: marquee 30s linear infinite;
	font-size: clamp(1.625rem, 3vw, 2.5rem);
	font-weight: 900;
	white-space: nowrap;
}

.biz-band__track span {
	padding-right: 56px;
}

.biz-section {
	padding: var(--section-y) 0;
}

.biz-section--soft {
	background: var(--biz-soft);
}

.biz-section .eyebrow {
	color: var(--biz-ink);
}

/* 運営メディア・作品のカード */
.biz-feature {
	display: grid;
	grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
	gap: clamp(24px, 4vw, 56px);
	align-items: center;
}

.biz-feature__shot {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 16 / 10;
	border-radius: 6px;
	background: #F2F2F2;
	color: #555555;
	font-size: 0.875rem;
	box-shadow: 18px 18px 0 var(--biz);
}

.biz-feature__name {
	margin: 8px 0 16px;
	font-size: clamp(1.875rem, 3vw, 2.75rem);
}

.biz-feature__text {
	margin-bottom: 24px;
	color: var(--text-2);
	line-height: 2;
}

.biz-facts {
	display: grid;
	gap: 0;
	margin: 0 0 28px;
	border-top: 2px solid #111111;
}

.biz-facts div {
	display: grid;
	grid-template-columns: 8em minmax(0, 1fr);
	gap: 16px;
	padding: 14px 0;
	border-bottom: 1px solid var(--line);
}

.biz-facts dt {
	color: var(--biz-ink);
	font-weight: 700;
}

.biz-facts dd {
	margin: 0;
}

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

.biz-item__num {
	color: var(--biz);
	font-family: var(--font-en);
	font-size: 3rem;
	font-weight: 800;
	line-height: 1;
}

.biz-item__title {
	margin: 12px 0 8px;
	font-size: 1.375rem;
}

.biz-item__text {
	color: var(--text-2);
}

.biz-work {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.biz-work__cover {
	aspect-ratio: 1 / 1;
	background: linear-gradient(160deg, #E6E6E6, #9A9A9A);
	display: flex;
	align-items: center;
	justify-content: center;
	color: #333333;
	font-size: 0.875rem;
	box-shadow: 12px 12px 0 var(--biz);
}

.biz-cta {
	padding: clamp(64px, 8vw, 112px) 0;
	background: #111111;
	color: #DDDDDD;
}

.biz-cta__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 24px 48px;
}

.biz-cta__title {
	margin-bottom: 12px;
	color: #FFFFFF;
	font-size: clamp(1.75rem, 3.4vw, 2.75rem);
}

/* トップ・事業者情報からの導線 */
.side-biz {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
}

.side-biz__card {
	position: relative;
	display: grid;
	grid-template-columns: 140px minmax(0, 1fr);
	gap: 24px;
	align-items: center;
	padding: 20px;
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	background: #FFFFFF;
	color: var(--ink);
	text-decoration: none;
	overflow: hidden;
	transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}

.side-biz__card:hover {
	color: var(--ink);
	transform: translateY(-3px);
	box-shadow: var(--shadow-sm);
}

.side-biz__thumb {
	position: relative;
	aspect-ratio: 1 / 1;
	border-radius: 12px;
	background: linear-gradient(160deg, #D9D9D9, #4A4A4A);
	overflow: hidden;
}

.side-biz__thumb::after {
	content: "";
	position: absolute;
	left: 30%;
	top: -10%;
	width: 40%;
	height: 120%;
	background: var(--biz);
	opacity: .8;
	transform: skewX(-18deg);
}

.side-biz__en {
	color: var(--biz-ink);
	font-family: var(--font-en);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: .12em;
}

.side-biz__name {
	display: block;
	margin: 4px 0 6px;
	font-size: 1.375rem;
	font-weight: 900;
}

.side-biz__text {
	display: block;
	color: var(--text-2);
	font-size: 0.9375rem;
}

@keyframes biz-slide {
	from { transform: translateX(-120%) skewX(-18deg); }
	to   { transform: skewX(-18deg); }
}

@keyframes biz-zoom {
	from { transform: scale(1.08); }
	to   { transform: scale(1); }
}

@media (max-width: 1000px) {
	.biz-hero,
	.biz-feature {
		grid-template-columns: minmax(0, 1fr);
	}

	.biz-hero__visual {
		min-height: 380px;
	}

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

@media (max-width: 600px) {
	.side-biz__card {
		grid-template-columns: 96px minmax(0, 1fr);
		gap: 16px;
	}

	.biz-facts div {
		grid-template-columns: minmax(0, 1fr);
		gap: 2px;
	}
}

.side-biz-wrap {
	margin-top: 48px;
}

.side-biz__card.biz {
	background: #FFFFFF;
}

/* 小さめのスマホ（360px以下）でもヘッダーを1行に収める */
@media (max-width: 360px) {
	.site-header__inner {
		gap: 8px;
	}

	.site-logo {
		gap: 8px;
	}

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

	.site-logo__name {
		font-size: 1.125rem;
		letter-spacing: .02em;
	}

	.site-logo__sub {
		display: none;
	}
}

/* --------------------------------------------------------------------------
   横幅全体を使うレイアウト（広い画面で列を増やす）
   -------------------------------------------------------------------------- */

@media (min-width: 1200px) {
	.faq {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		align-items: start;
	}
}

@media (min-width: 1600px) {
	.cases {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

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

	.hero__title {
		font-size: clamp(2.75rem, 5vw, 7rem);
	}
}

/* --------------------------------------------------------------------------
   トップページの読みやすさ
   -------------------------------------------------------------------------- */

/* 背景の光を控えめにし、ドット模様は外す */
.aurora {
	opacity: .45;
}

.aurora__dots {
	display: none;
}

/* 見出しの下に説明文を置き、上から順に読めるようにする */
.section-head {
	flex-direction: column;
	align-items: flex-start;
	gap: 12px;
}

.section-head--center {
	align-items: center;
}

.section-head__note {
	max-width: 46em;
	font-size: 1.0625rem;
}

/* 小さすぎる文字の底上げ */
.hero__kicker {
	font-size: .9375rem;
}

.hero__lead {
	color: var(--ink);
}

.facts span {
	font-size: .875rem;
}

.service-card__text,
.strength__text,
.case__title,
.worry__link {
	font-size: 1rem;
}

.service-card__en,
.case__label {
	font-size: .875rem;
}

.flow__step-title {
	font-size: 1rem;
}

.flow__step-text {
	color: var(--text-2);
	font-size: .9375rem;
}

.bubble-ai__body,
.bubble-user {
	font-size: 1rem;
}

.bubble-ai__points {
	font-size: .9375rem;
}

.price-card__label,
.price-card__fit,
.price-card__items,
.pricing__notes,
.side-biz__text {
	font-size: 1rem;
}

/* セクションの区切りをはっきりさせる */
.section {
	border-top: 1px solid var(--line);
}

.hero + .section,
.worries-section {
	border-top: 0;
}

/* --------------------------------------------------------------------------
   配色の役割（ブルー×イエロー）
   青：情報を整理する色（ラベル・番号・アイコン）／黄：押してほしい場所と強調の一言
   濃い青：ページを締める帯（お問い合わせ・フッター）
   -------------------------------------------------------------------------- */

/* キャッチの「診ます。」は青の文字＋黄色のマーカー */
.grad-text {
	padding: 0 .04em;
	background: linear-gradient(transparent 66%, rgba(var(--a-rgb), .9) 66%);
	-webkit-background-clip: border-box;
	background-clip: border-box;
	color: var(--p-800);
	animation: none;
}

.hero__free-badge {
	background: var(--a-500);
	color: var(--a-on);
}

/* セクションの背景は白とごく薄い青を交互に */
.section:not(.section--white):not(.worries-section) {
	background: #F3F7FE;
}

/* サービス：白いカードに青い番号とアイコン */
.service-card {
	background: #FFFFFF;
}

.service-card__num {
	color: var(--p-200);
}

.service-card__icon {
	background: var(--p-100);
	color: var(--p-800);
	box-shadow: none;
}

.service-card:hover {
	border-color: var(--p-400);
}

/* 強調したい番号・答えは黄色 */
.strength__num,
.faq__mark--a {
	background: var(--a-500);
	color: var(--a-on);
}

.faq__item[open] {
	border-color: var(--p-400);
}

/* AIデモ：質問は濃い青、グラフは青の濃淡 */
.bubble-user {
	background: var(--p-900);
}

.bars span {
	background: var(--p-700);
}

.bars span.is-pred {
	background: repeating-linear-gradient(135deg, var(--p-400) 0 6px, var(--p-200) 6px 12px);
}

/* お問い合わせの帯：濃い青に黄色のボタン */
.cta {
	background: var(--p-900);
	color: rgba(255, 255, 255, .88);
}

.cta .eyebrow {
	color: var(--a-500);
}

.cta::before {
	background: radial-gradient(closest-side, rgba(var(--p-600-rgb), .55), rgba(var(--p-600-rgb), 0));
}

.cta::after {
	background: radial-gradient(closest-side, rgba(var(--a-rgb), .18), rgba(var(--a-rgb), 0));
}

/* フッター：濃い青で締める */
.site-footer {
	border-top: 0;
	background: #0A2463;
	color: rgba(255, 255, 255, .78);
}

.site-footer__name {
	color: #FFFFFF;
}

.site-footer__nav a {
	color: rgba(255, 255, 255, .9);
}

.site-footer__nav a:hover {
	color: var(--a-500);
}

.site-footer__copy {
	border-top-color: rgba(255, 255, 255, .15);
	color: rgba(255, 255, 255, .6);
}

/* 音楽活動のページ：黄色の上は濃い文字に */
.biz--music .btn--biz,
.biz--music .btn--biz:hover,
.biz--music .biz-band {
	color: var(--a-on);
}

/* --------------------------------------------------------------------------
   トップのメイン画像（働く姿）
   -------------------------------------------------------------------------- */

.hero-photo {
	position: relative;
	margin: 0;
}

.hero-photo img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: var(--radius-xl);
	box-shadow: var(--shadow-lg);
}

.hero-photo__badge {
	position: absolute;
	left: -24px;
	bottom: 32px;
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 16px 22px;
	border-radius: var(--radius-md);
	background: #FFFFFF;
	box-shadow: var(--shadow-lg);
	font-size: 1rem;
	font-weight: 700;
}

.hero-photo__badge-label {
	align-self: flex-start;
	padding: 2px 10px;
	border-radius: 999px;
	background: var(--a-500);
	color: var(--a-on);
	font-size: .8125rem;
	font-weight: 900;
}

/* AIデモのセクション：左に見出し、右にデモ */
.demo-section__grid {
	display: grid;
	grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
	gap: clamp(24px, 4vw, 72px);
	align-items: center;
}

.demo-section .section-head {
	margin-bottom: 0;
}

@media (max-width: 1200px) {
	.hero-photo {
		max-width: 760px;
	}

	.hero-photo__badge {
		left: 16px;
		bottom: 16px;
	}

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

@media (max-width: 600px) {
	.hero-photo__badge {
		position: static;
		margin-top: 12px;
		box-shadow: var(--shadow-sm);
	}
}

/* ==========================================================================
   定番パーツをやめ、日本の企業サイトらしい平らで整った見た目にする
   （丸いバッジ・英字ラベル・ぼかし背景・すりガラス・大きな角丸・影・浮く演出を外す）
   ========================================================================== */

:root {
	--radius-xl: 8px;
	--radius-lg: 6px;
	--radius-md: 4px;
	--radius-sm: 4px;
	--shadow-sm: none;
	--shadow-lg: none;
	--font-en: "Noto Sans JP", system-ui, sans-serif;
}

body {
	background: #FFFFFF;
}

/* 背景のぼかし・すりガラスをやめる */
.aurora,
.cta::before,
.cta::after {
	display: none;
}

.glass {
	border: 1px solid var(--line);
	background: #FFFFFF;
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
}

/* 見出しの上の英字ラベル・丸いバッジをやめる */
.eyebrow,
.hero__kicker,
.service-card__en,
.service-card__num,
.service-card__more span,
.more-link span[aria-hidden="true"],
.btn__arrow {
	display: none;
}

h1,
h2,
h3 {
	font-weight: 700;
	letter-spacing: .04em;
}

/* セクション見出し：日本語の見出しに太い下線 */
.section-title,
.page-hero__title {
	position: relative;
	padding-bottom: 18px;
	font-size: clamp(1.75rem, 2.6vw, 2.5rem);
}

.section-title::after,
.page-hero__title::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 48px;
	height: 4px;
	background: var(--p-800);
}

.section-head--center .section-title::after {
	left: 50%;
	transform: translateX(-50%);
}

.section {
	border-top: 0;
}

.section:not(.section--white):not(.worries-section) {
	background: #F4F6FA;
}

/* ボタン：丸いピルをやめ、角の小さい四角に */
.btn {
	border-radius: 4px;
	letter-spacing: .06em;
}

.btn:hover,
.btn--cta:hover,
.btn--dark:hover,
.btn--glass:hover,
.btn--light:hover {
	transform: none;
	box-shadow: none;
}

.btn--glass,
.btn--glass:hover {
	border: 1px solid var(--p-800);
	background: #FFFFFF;
	color: var(--p-800);
}

.global-nav .btn {
	border-radius: 4px;
}

/* ヒーロー */
.hero {
	padding: clamp(40px, 5vw, 80px) 0;
	background: #FFFFFF;
}

.hero__title {
	font-weight: 700;
	line-height: 1.3;
}

.grad-text {
	padding: 0;
	background: none;
	color: var(--p-800);
}

.hero__free-badge {
	border-radius: 2px;
}

.facts {
	gap: 0;
	border-top: 1px solid var(--line);
	border-bottom: 1px solid var(--line);
}

.facts li,
.facts li.glass {
	padding: 16px 20px;
	border: 0;
	border-radius: 0;
	background: none;
}

.facts li + li {
	border-left: 1px solid var(--line);
}

.facts b {
	color: var(--p-800);
	font-weight: 700;
}

.hero-photo img {
	border-radius: 4px;
}

.hero-photo__badge {
	border: 1px solid var(--line);
	border-left: 4px solid var(--a-500);
	border-radius: 0;
}

.hero-photo__badge-label {
	border-radius: 2px;
}

/* カード全般：角丸・影・浮く演出をやめ、細い線で区切る */
.service-card,
.strength,
.flow,
.case,
.worry,
.price-card,
.faq__item,
.greeting,
.media-link,
.side-biz__card,
.demo,
.demo__chart,
.info-table,
.form,
.form-aside__card,
.policy-list li,
.service-detail,
.thanks {
	border-radius: 4px;
	box-shadow: none;
}

.service-card:hover,
.case:hover,
.worry:hover,
.media-link:hover,
.side-biz__card:hover,
.js .reveal.is-visible.service-card:hover {
	transform: none;
	box-shadow: none;
}

/* サービス：番号の飾りをやめ、上の太線で区切る */
.service-card {
	min-height: 0;
	padding: 28px 24px;
	border: 1px solid var(--line);
	border-top: 4px solid var(--p-800);
	background: #FFFFFF;
}

.service-card__icon {
	position: static;
	width: 44px;
	height: 44px;
	margin-bottom: 4px;
	border-radius: 4px;
}

.service-card__title {
	margin-top: 4px;
}

.service-card__more {
	text-decoration: underline;
	text-underline-offset: 4px;
}

/* こんなお悩み：カードをやめ、チェックリストに */
.worries {
	gap: 0 40px;
}

.worry {
	padding: 20px 0;
	border: 0;
	border-bottom: 1px solid var(--line);
	background: none;
}

.worry__check {
	border-radius: 2px;
}

/* 強み・進め方 */
.strength {
	padding: 28px 0 0;
	border: 0;
	border-top: 2px solid var(--p-800);
	background: none;
}

.strength__num,
.faq__mark,
.flow__no,
.worry__check {
	border-radius: 2px;
}

.flow {
	padding: 24px;
	border: 1px solid var(--line);
	background: #FFFFFF;
}

.flow__title {
	border-bottom-width: 2px;
}

.flow__title .en {
	display: none;
}

/* 実績 */
.case {
	border: 0;
	border-bottom: 1px solid var(--line);
	border-radius: 0;
	background: none;
	padding: 18px 0;
}

.case__thumb {
	width: 6px;
	height: 44px;
	border-radius: 0;
	background: var(--p-800);
}

/* 料金 */
.price-card {
	border: 1px solid var(--line);
	background: #FFFFFF;
}

.price-card--free {
	border: 2px solid var(--a-500);
	background: #FFFFFF;
}

/* よくある質問・代表あいさつ */
.faq__item,
.faq__item[open] {
	background: #FFFFFF;
}

.greeting {
	border: 1px solid var(--line);
}

.greeting__photo {
	border-radius: 4px;
	background: #EEF1F6;
}

/* お問い合わせの帯：飾りなしの濃い青 */
.cta {
	background: var(--p-900);
}

/* AIデモ：すりガラス・影をやめる */
.demo {
	border: 1px solid var(--line);
}

.demo__chip {
	border-radius: 4px;
}

.bubble-user,
.bubble-ai__body,
.bubble-ai__avatar,
.demo__input {
	border-radius: 4px;
}

/* サイドビジネス */
.side-biz__thumb {
	border-radius: 2px;
}

/* 動き：ふわっと表示は残し、ずらし（移動）はやめる */
.js .reveal {
	transform: none;
}

.worry__link,
.more-link,
.service-card__more {
	text-decoration: underline;
	text-underline-offset: 4px;
}

.side-biz__en {
	display: none;
}

/* キャッチ「その業務、データとAIで変えられます。」を句の途中で折り返さない */
.hero__title {
	font-size: clamp(2.25rem, 4.4vw, 4.5rem);
}

.hero__title .ib {
	white-space: nowrap;
}

@media (min-width: 1600px) {
	.hero__title {
		font-size: clamp(2.25rem, 4.2vw, 5.5rem);
	}
}

/* --------------------------------------------------------------------------
   トップ：イラストを全面の背景に敷き、左側に白い文字
   -------------------------------------------------------------------------- */

.hero--bg {
	display: flex;
	align-items: center;
	min-height: min(88vh, 880px);
	padding: clamp(56px, 7vw, 120px) 0;
	background: #050B24 var(--hero-img) center right / cover no-repeat;
	color: #FFFFFF;
	isolation: isolate;
}

/* 文字の後ろだけを暗くして読みやすくする */
.hero--bg::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(90deg, rgba(5, 11, 36, .92) 0%, rgba(5, 11, 36, .78) 38%, rgba(5, 11, 36, .25) 64%, rgba(5, 11, 36, 0) 80%);
}

.hero--bg .hero__inner {
	width: 100%;
}

.hero--bg .hero__inner > div {
	max-width: 720px;
}

.hero--bg .hero__title {
	color: #FFFFFF;
}

.hero--bg .grad-text {
	color: var(--a-500);
}

.hero--bg .hero__lead {
	color: rgba(255, 255, 255, .9);
}

.hero--bg .btn--glass,
.hero--bg .btn--glass:hover {
	border: 1px solid rgba(255, 255, 255, .7);
	background: transparent;
	color: #FFFFFF;
}

.hero--bg .btn--glass:hover {
	background: rgba(255, 255, 255, .1);
}

.hero--bg .hero__free {
	color: rgba(255, 255, 255, .9);
}

.hero--bg .facts {
	border-color: rgba(255, 255, 255, .25);
}

.hero--bg .facts li + li {
	border-left-color: rgba(255, 255, 255, .25);
}

.hero--bg .facts b {
	color: #FFFFFF;
}

.hero--bg .facts span {
	color: rgba(255, 255, 255, .8);
}

@media (max-width: 900px) {
	.hero--bg {
		min-height: 0;
		background-position: 72% center;
	}

	.hero--bg::before {
		background: linear-gradient(180deg, rgba(5, 11, 36, .86) 0%, rgba(5, 11, 36, .8) 60%, rgba(5, 11, 36, .9) 100%);
	}
}

/* --------------------------------------------------------------------------
   AIデモのグラフ：月の目盛り・横線・色の合った凡例
   -------------------------------------------------------------------------- */

.demo__chart-head {
	margin-bottom: 16px;
}

.chart {
	position: relative;
	height: 200px;
	background-image: linear-gradient(var(--line) 1px, transparent 1px);
	background-size: 100% 25%;
	border-bottom: 1px solid var(--line-strong);
}

.chart__plot {
	position: absolute;
	inset: 0 0 -26px;
	display: flex;
	gap: 10px;
	padding: 0 4px;
}

.chart__col {
	display: flex;
	flex: 1;
	flex-direction: column;
	justify-content: flex-end;
	align-items: center;
	gap: 8px;
	min-width: 0;
}

.chart__bar {
	display: block;
	width: 100%;
	max-width: 36px;
	height: calc(var(--h) * 1.8px);
	border-radius: 2px 2px 0 0;
	background: var(--p-700);
	transform-origin: bottom;
}

.chart__bar.is-pred {
	background: repeating-linear-gradient(135deg, var(--p-400) 0 5px, var(--p-200) 5px 10px);
}

.chart__label {
	height: 18px;
	color: var(--text-3);
	font-size: .75rem;
	line-height: 18px;
}

.js .chart__bar {
	transform: scaleY(0);
}

.is-playing .chart__bar {
	animation: grow .8s var(--ease) forwards;
	animation-delay: calc(.3s + var(--i) * .12s);
}

.legend {
	margin-top: 40px;
	font-size: .8125rem;
}

.legend span {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--text-2);
}

.legend__swatch {
	width: 12px;
	height: 12px;
	border-radius: 2px;
	background: var(--p-700);
}

.legend__swatch.is-pred {
	background: repeating-linear-gradient(135deg, var(--p-400) 0 3px, var(--p-200) 3px 6px);
}

@media (prefers-reduced-motion: reduce) {
	.js .chart__bar {
		transform: none;
	}
}

/* --------------------------------------------------------------------------
   ご相談から納品までの共通の流れ
   -------------------------------------------------------------------------- */

.common-flow {
	display: grid;
	gap: 0;
	margin: 32px 0 0;
	padding: 0;
	list-style: none;
	counter-reset: none;
}

.common-flow__step {
	display: grid;
	grid-template-columns: 44px minmax(0, 1fr);
	gap: 20px;
	padding: 20px 0;
	border-bottom: 1px solid var(--line);
}

.common-flow__no {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 2px;
	background: var(--p-800);
	color: #FFFFFF;
	font-weight: 700;
}

.common-flow__body {
	display: grid;
	gap: 4px;
	align-content: center;
}

.common-flow__title {
	font-size: 1.125rem;
	font-weight: 700;
}

.common-flow__text {
	color: var(--text-2);
}

/* トップでは横一列に並べる */
.common-flow--compact {
	grid-template-columns: repeat(7, minmax(0, 1fr));
	gap: 8px;
}

.common-flow--compact .common-flow__step {
	grid-template-columns: minmax(0, 1fr);
	justify-items: center;
	gap: 10px;
	padding: 20px 8px;
	border: 1px solid var(--line);
	border-radius: 4px;
	background: #FFFFFF;
	text-align: center;
}

.common-flow--compact .common-flow__title {
	font-size: 1rem;
}

@media (max-width: 1100px) {
	.common-flow--compact {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

@media (max-width: 600px) {
	.common-flow--compact {
		grid-template-columns: minmax(0, 1fr);
		gap: 0;
	}

	.common-flow--compact .common-flow__step {
		grid-template-columns: 44px minmax(0, 1fr);
		justify-items: start;
		padding: 14px 0;
		border: 0;
		border-bottom: 1px solid var(--line);
		background: none;
		text-align: left;
	}
}

/* 進め方ページ */
.flow-page__section + .flow-page__section {
	margin-top: clamp(56px, 6vw, 88px);
}

.flow-page__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
	margin-top: 28px;
}

.flow-page__card {
	padding: 24px;
	border: 1px solid var(--line);
	border-top: 4px solid var(--p-800);
	border-radius: 4px;
}

.flow-page__card h3 {
	margin-bottom: 8px;
	font-size: 1.125rem;
}

.flow-page__text {
	max-width: 46em;
	margin-top: 24px;
	color: var(--text-2);
}

.flow-page__links {
	display: flex;
	flex-wrap: wrap;
	gap: 12px 32px;
	margin: 20px 0 0;
	padding: 0;
	list-style: none;
	font-weight: 700;
}

.flow-page__links a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
}

@media (max-width: 760px) {
	.flow-page__grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* --------------------------------------------------------------------------
   ナビの「その他の事業」（ドロップダウン）
   -------------------------------------------------------------------------- */

.nav-sub {
	position: relative;
}

.nav-sub__toggle {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 52px;
	padding: 0 16px;
	border: 0;
	border-radius: 4px;
	background: none;
	color: var(--ink);
	font: inherit;
	font-weight: 700;
	cursor: pointer;
}

.nav-sub__toggle:hover,
.nav-sub.is-open .nav-sub__toggle,
.nav-sub.is-current .nav-sub__toggle {
	color: var(--p-800);
}

.nav-sub__caret {
	width: 8px;
	height: 8px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: translateY(-2px) rotate(45deg);
	transition: transform .2s var(--ease);
}

.nav-sub.is-open .nav-sub__caret {
	transform: translateY(2px) rotate(-135deg);
}

.nav-sub__list {
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 60;
	display: none;
	min-width: 220px;
	margin: 0;
	padding: 8px;
	border: 1px solid var(--line);
	border-top: 3px solid var(--p-800);
	border-radius: 4px;
	background: #FFFFFF;
	box-shadow: 0 12px 30px -16px rgba(var(--ink-rgb), .35);
	list-style: none;
}

.nav-sub.is-open .nav-sub__list {
	display: block;
}

@media (hover: hover) and (min-width: 1101px) {
	.nav-sub:hover .nav-sub__list,
	.nav-sub:focus-within .nav-sub__list {
		display: block;
	}
}

.nav-sub__list a {
	display: flex;
	align-items: center;
	min-height: 48px;
	padding: 0 14px;
	border-radius: 4px;
	color: var(--ink);
	font-weight: 700;
	text-decoration: none;
	white-space: nowrap;
}

.nav-sub__list a:hover,
.nav-sub__list a[aria-current="page"] {
	background: var(--p-100);
	color: var(--p-800);
}

/* スマホ：見出しとして2つのリンクを並べる */
@media (max-width: 1100px) {
	.nav-sub {
		border-bottom: 1px solid var(--line);
	}

	.nav-sub__toggle {
		width: 100%;
		min-height: 56px;
		padding: 0 16px;
		justify-content: space-between;
		font-size: 18px;
	}

	.nav-sub__list {
		position: static;
		display: none;
		padding: 0 0 8px 16px;
		border: 0;
		box-shadow: none;
	}

	.nav-sub.is-open .nav-sub__list {
		display: block;
	}
}

/* --------------------------------------------------------------------------
   音楽活動（アーティストページ）
   -------------------------------------------------------------------------- */

.biz-hero__reading {
	display: block;
	margin-top: 10px;
	color: var(--text-3);
	font-size: .45em;
	font-weight: 700;
	letter-spacing: .08em;
}

.music-releases {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr));
	gap: 32px;
}

.music-release__player {
	position: relative;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border-radius: 4px;
	background: #0E1630;
}

.music-release__player iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

.music-release__title {
	margin-top: 14px;
	font-size: 1.25rem;
}

.music-release__meta {
	color: var(--text-3);
	font-size: .875rem;
}

.music-empty {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 240px;
	padding: 24px;
	border: 2px dashed var(--line-strong);
	border-radius: 4px;
	color: var(--text-3);
	text-align: center;
}

.music-profile {
	display: grid;
	grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
	gap: clamp(24px, 4vw, 64px);
	align-items: center;
}

.music-profile__photo {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 1 / 1;
	border-radius: 4px;
	background: linear-gradient(160deg, #E6E6E6, #9A9A9A);
	color: #333333;
	box-shadow: 14px 14px 0 var(--biz);
}

.music-profile__name {
	margin: 20px 0 12px;
	font-size: 1.75rem;
	font-weight: 900;
}

.music-profile__name span {
	margin-left: 8px;
	color: var(--text-3);
	font-size: 1rem;
	font-weight: 700;
}

.music-profile__text {
	margin-bottom: 24px;
	color: var(--text-2);
}

@media (max-width: 760px) {
	.music-profile {
		grid-template-columns: minmax(0, 1fr);
	}

	.music-profile__photo {
		max-width: 320px;
	}
}

.biz--music .biz-hero__word {
	font-size: clamp(56px, 8vw, 150px);
	white-space: nowrap;
}

/* 作品は2列で並べる（スマホでは1列） */
.music-releases {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 760px) {
	.music-releases {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ソムリエノートのスクリーンショット */
.biz-feature__shot { overflow: hidden; }
.biz-feature__shot img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; filter: none; }

/* 代表あいさつ（段落を複数並べる） */
.greeting__text { margin: 0; }
.greeting__text + .greeting__text { margin-top: 1em; }
.greeting .section-title + .greeting__text { margin-top: 16px; }
.greeting__name { margin-top: 28px; }

/* --------------------------------------------------------------------------
   実績：写真付きのカード（トップは写真・業種・タイトル、実績ページは概要・担当内容・キーワードも）
   -------------------------------------------------------------------------- */
.works {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
	gap: clamp(20px, 2.4vw, 32px);
	margin: 0;
	padding: 0;
	list-style: none;
}

.works--detail {
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 380px), 1fr));
}

.work {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border: 1px solid var(--line);
	border-radius: 4px;
	background: #FFFFFF;
}

.work__image {
	position: relative;
	margin: 0;
	aspect-ratio: 16 / 10;
	background: var(--p-100);
}

.work__image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.work__field {
	position: absolute;
	left: 0;
	bottom: 0;
	padding: 6px 14px;
	background: var(--p-800);
	color: #FFFFFF;
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: .04em;
}

.work__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	padding: 20px 22px 24px;
}

.work__industry {
	margin: 0 0 6px;
	color: var(--p-700);
	font-size: 0.8125rem;
	font-weight: 700;
}

.work__title {
	margin: 0;
	color: var(--ink);
	font-size: 1.0625rem;
	line-height: 1.6;
}

.works--detail .work__title {
	font-size: 1.1875rem;
}

.work__summary {
	margin: 14px 0 0;
	color: var(--text-2);
	font-size: 0.9375rem;
	line-height: 1.9;
}

.work__scope-title {
	margin: 18px 0 8px;
	padding-top: 16px;
	border-top: 1px solid var(--line);
	color: var(--ink);
	font-size: 0.8125rem;
	font-weight: 700;
}

.work__scope {
	margin: 0;
	padding: 0;
	list-style: none;
	color: var(--text-2);
	font-size: 0.9375rem;
	line-height: 1.7;
}

.work__scope li {
	position: relative;
	padding-left: 1.1em;
}

.work__scope li + li {
	margin-top: 4px;
}

.work__scope li::before {
	content: "";
	position: absolute;
	left: 0;
	top: .7em;
	width: 6px;
	height: 6px;
	background: var(--a-500);
}

.work__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: auto 0 0;
	padding: 18px 0 0;
	list-style: none;
}

.work__tags li {
	padding: 3px 10px;
	border: 1px solid var(--line);
	border-radius: 2px;
	background: var(--bg);
	color: var(--text-2);
	font-size: 0.75rem;
}

/* --------------------------------------------------------------------------
   実績ページ：1列の行。クリックで下に詳細が開く
   -------------------------------------------------------------------------- */
.work-list {
	display: grid;
	gap: 12px;
}

.work-row {
	border: 1px solid var(--line);
	border-radius: 4px;
	background: #FFFFFF;
}

.work-row[open] {
	border-color: var(--p-800);
}

.work-row__head {
	display: grid;
	grid-template-columns: clamp(120px, 16vw, 240px) minmax(0, 1fr) auto;
	align-items: center;
	gap: clamp(16px, 2.4vw, 36px);
	padding: 14px clamp(14px, 2vw, 28px) 14px 14px;
	cursor: pointer;
	list-style: none;
}

.work-row__head::-webkit-details-marker {
	display: none;
}

.work-row__head:focus-visible {
	outline: 3px solid var(--a-500);
	outline-offset: 2px;
}

.work-row__thumb {
	display: block;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	border-radius: 2px;
	background: var(--p-100);
}

.work-row__thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .4s ease;
}

.work-row__head:hover .work-row__thumb img {
	transform: scale(1.04);
}

.work-row__labels {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 12px;
	margin-bottom: 8px;
}

.work-row__field {
	padding: 3px 10px;
	background: var(--p-800);
	color: #FFFFFF;
	font-size: 0.8125rem;
	font-weight: 700;
}

.work-row__industry {
	color: var(--p-700);
	font-size: 0.875rem;
	font-weight: 700;
}

.work-row__title {
	display: block;
	color: var(--ink);
	font-size: clamp(1.0625rem, 1.4vw, 1.3125rem);
	font-weight: 700;
	line-height: 1.6;
}

.work-row__toggle {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	color: var(--p-800);
	font-size: 0.875rem;
	font-weight: 700;
	white-space: nowrap;
}

.work-row__toggle::after {
	content: "";
	width: 10px;
	height: 10px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: translateY(-3px) rotate(45deg);
	transition: transform .25s ease;
}

.work-row[open] .work-row__toggle::after {
	transform: translateY(3px) rotate(-135deg);
}

.work-row__close,
.work-row[open] .work-row__open {
	display: none;
}

.work-row[open] .work-row__close {
	display: inline;
}

.work-row__detail {
	display: grid;
	grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
	gap: clamp(20px, 3vw, 48px);
	margin: 0 14px 14px;
	padding: clamp(20px, 2.4vw, 32px);
	border-top: 1px solid var(--line);
	background: var(--bg);
	animation: work-open .3s ease;
}

.work-row__heading {
	margin: 0 0 8px;
	color: var(--ink);
	font-size: 0.875rem;
	font-weight: 700;
}

.work-row__summary {
	margin: 0;
	color: var(--text-2);
	font-size: 1rem;
	line-height: 2;
}

.work-row__detail .work__tags {
	margin: 0;
}

.work-row__detail .work__tags li {
	background: #FFFFFF;
}

@keyframes work-open {
	from { opacity: 0; transform: translateY(-6px); }
	to { opacity: 1; transform: none; }
}

@media (max-width: 767px) {
	.work-row__head {
		grid-template-columns: 96px minmax(0, 1fr);
		padding: 12px;
	}

	.work-row__toggle {
		grid-column: 2;
		justify-self: start;
	}

	.work-row__detail {
		grid-template-columns: minmax(0, 1fr);
		margin: 0 12px 12px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.work-row__detail { animation: none; }
	.work-row__thumb img { transition: none; }
}

.work__link { display: flex; flex: 1; flex-direction: column; color: inherit; text-decoration: none; }
.work__link:hover .work__title { text-decoration: underline; text-underline-offset: 4px; }
.work__link:focus-visible { outline: 3px solid var(--a-500); outline-offset: 2px; }
.work-row { scroll-margin-top: 120px; }

.price-card__tax { margin-left: .3em; font-size: 0.875rem; font-weight: 500; color: var(--text-2); }

/* --------------------------------------------------------------------------
   事業内容のカード・納品までの流れ：写真
   -------------------------------------------------------------------------- */
.service-card__image {
	display: block;
	margin: -28px -24px 20px;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: var(--p-100);
}

.service-card__image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .4s ease;
}

.service-card:hover .service-card__image img {
	transform: scale(1.04);
}

.common-flow__step:has(.common-flow__image) {
	grid-template-columns: clamp(200px, 22vw, 320px) 44px minmax(0, 46em);
	grid-template-areas: "image no body";
	align-items: center;
	gap: clamp(20px, 2.4vw, 36px);
}

.common-flow__step:has(.common-flow__image) .common-flow__no { grid-area: no; }
.common-flow__step:has(.common-flow__image) .common-flow__body { grid-area: body; }

.common-flow__image {
	grid-area: image;
	display: block;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	border-radius: 2px;
	background: var(--p-100);
}

.common-flow__image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.common-flow--compact .common-flow__step:has(.common-flow__image) {
	grid-template-columns: minmax(0, 1fr);
	grid-template-areas: "image" "no" "body";
	align-items: start;
	padding-top: 0;
	overflow: hidden;
}

.common-flow--compact .common-flow__image {
	width: calc(100% + 16px);
	margin: 0 -8px 4px;
	border-radius: 0;
}

@media (max-width: 600px) {
	.common-flow__step:has(.common-flow__image) {
		grid-template-columns: 44px minmax(0, 1fr);
		grid-template-areas: "image image" "no body";
		gap: 14px;
	}

	.common-flow--compact .common-flow__step:has(.common-flow__image) {
		grid-template-columns: 44px minmax(0, 1fr);
		grid-template-areas: "no body";
		padding-top: 14px;
	}

	.common-flow--compact .common-flow__image {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.service-card__image img { transition: none; }
}

/* ==========================================================================
   サービスページ：サービスごとに色を分け、IT・AIらしい見た目にする
   ========================================================================== */

.services-page .c-teal,
.services .c-teal,
.worries .c-teal,
.page-hero__chips .c-teal   { --c: #06B6D4; --c2: #3B82F6; --c-ink: #0E7490; --c-tint: #ECFEFF; --c-rgb: 6, 182, 212; }
.services-page .c-blue,
.services .c-blue,
.worries .c-blue,
.page-hero__chips .c-blue   { --c: #8B5CF6; --c2: #EC4899; --c-ink: #6D28D9; --c-tint: #F5F3FF; --c-rgb: 139, 92, 246; }
.services-page .c-orange,
.services .c-orange,
.worries .c-orange,
.page-hero__chips .c-orange { --c: #F43F5E; --c2: #F97316; --c-ink: #BE123C; --c-tint: #FFF1F2; --c-rgb: 244, 63, 94; }
.services-page .c-olive,
.services .c-olive,
.worries .c-olive,
.page-hero__chips .c-olive  { --c: #10B981; --c2: #06B6D4; --c-ink: #047857; --c-tint: #ECFDF5; --c-rgb: 16, 185, 129; }

/* 見出し帯：濃紺に方眼とネットワーク図 */
.page-hero--tech {
	position: relative;
	overflow: hidden;
	padding-bottom: clamp(40px, 5vw, 72px);
	background:
		radial-gradient(60% 90% at 85% 10%, rgba(139, 92, 246, .45), transparent 60%),
		radial-gradient(50% 80% at 60% 110%, rgba(6, 182, 212, .40), transparent 60%),
		linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px) 0 0 / 32px 32px,
		linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px) 0 0 / 32px 32px,
		#0A1230;
	color: #FFFFFF;
}

.page-hero--tech .container {
	position: relative;
	z-index: 1;
}

.page-hero--tech .breadcrumb,
.page-hero--tech .breadcrumb a {
	color: rgba(255, 255, 255, .72);
}

.page-hero--tech .page-hero__title {
	color: #FFFFFF;
}

.page-hero--tech .page-hero__title::after {
	width: 96px;
	background: linear-gradient(90deg, #06B6D4, #8B5CF6, #F43F5E, #10B981);
}

.page-hero--tech .page-hero__lead {
	color: rgba(255, 255, 255, .86);
}

.page-hero__net {
	position: absolute;
	right: max(-80px, -4vw);
	top: 50%;
	width: min(52vw, 720px);
	transform: translateY(-50%);
	opacity: .9;
	pointer-events: none;
}

.page-hero__links path {
	fill: none;
	stroke: rgba(255, 255, 255, .22);
	stroke-width: 1.2;
	stroke-dasharray: 4 6;
}

.page-hero__nodes circle { stroke: rgba(255, 255, 255, .6); stroke-width: 1.5; }
.page-hero__nodes .n1 { fill: #06B6D4; }
.page-hero__nodes .n2 { fill: #8B5CF6; }
.page-hero__nodes .n3 { fill: #F43F5E; }
.page-hero__nodes .n4 { fill: #10B981; }

@media (prefers-reduced-motion: no-preference) {
	.page-hero__links path { animation: dc-dash 18s linear infinite; }
	.page-hero__nodes circle { animation: dc-pulse 3.2s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
	.page-hero__nodes circle:nth-child(2n) { animation-delay: -1.6s; }
	.page-hero__nodes circle:nth-child(3n) { animation-delay: -.8s; }
}

@keyframes dc-dash { to { stroke-dashoffset: -200; } }
@keyframes dc-pulse { 50% { transform: scale(1.35); opacity: .7; } }

/* サービスへのショートカット */
.page-hero__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 28px 0 0;
	padding: 0;
	list-style: none;
}

.page-hero__chips a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 16px;
	border: 1px solid rgba(var(--c-rgb), .6);
	border-radius: 999px;
	background: rgba(var(--c-rgb), .16);
	color: #FFFFFF;
	font-size: 0.9375rem;
	font-weight: 700;
	text-decoration: none;
	transition: background .2s var(--ease);
}

.page-hero__chips a:hover,
.page-hero__chips a:focus-visible {
	background: rgba(var(--c-rgb), .4);
}

.page-hero__chips .icon {
	color: var(--c);
}

/* 各サービス */
.services-page .service-detail {
	position: relative;
	overflow: hidden;
	border-color: rgba(var(--c-rgb), .35);
	background:
		radial-gradient(40% 60% at 100% 0%, rgba(var(--c-rgb), .10), transparent 70%),
		#FFFFFF;
}

.services-page .service-detail::before {
	content: "";
	position: absolute;
	inset: 0 0 auto;
	height: 5px;
	background: linear-gradient(90deg, var(--c), var(--c2));
}

.services-page .service-detail + .service-detail {
	margin-top: 28px;
}

.service-detail__photo {
	position: relative;
	overflow: hidden;
	margin: 0 0 4px;
	border-radius: 6px;
	aspect-ratio: 16 / 10;
	background: #0A1230;
}

.service-detail__photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.service-detail__photo::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(135deg, rgba(var(--c-rgb), .35), transparent 55%),
		linear-gradient(rgba(255, 255, 255, .08) 1px, transparent 1px) 0 0 / 20px 20px,
		linear-gradient(90deg, rgba(255, 255, 255, .08) 1px, transparent 1px) 0 0 / 20px 20px;
	mix-blend-mode: screen;
}

.service-detail__label {
	display: flex;
	align-items: center;
	gap: 12px;
}

.services-page .service-detail__head .service-card__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: 12px;
	background: linear-gradient(135deg, var(--c), var(--c2));
	color: #FFFFFF;
	box-shadow: 0 10px 24px -10px rgba(var(--c-rgb), .9);
}

.service-detail__code {
	color: var(--c-ink);
	font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: .08em;
}

.services-page .rx dt,
.services-page .service-detail__sub {
	display: flex;
	align-items: center;
	gap: 8px;
	color: var(--c-ink);
}

.services-page .rx dt::before,
.services-page .service-detail__sub::before {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: 2px;
	background: linear-gradient(135deg, var(--c), var(--c2));
}

.tech-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 6px 0 0;
	padding: 0;
	list-style: none;
}

.tech-chips li {
	padding: 3px 10px;
	border: 1px solid rgba(var(--c-rgb), .35);
	border-radius: 4px;
	background: var(--c-tint);
	color: var(--ink);
	font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, "Noto Sans JP", monospace;
	font-size: 0.75rem;
	line-height: 1.7;
}

/* 進め方：番号をグラデーションに、線を色つきに */
.services-page .service-detail .flow {
	padding: 20px;
	border-radius: 6px;
	background: var(--c-tint);
}

.services-page .flow__no {
	border-radius: 8px;
	background: linear-gradient(135deg, var(--c), var(--c2));
	box-shadow: 0 6px 14px -8px rgba(var(--c-rgb), .9);
}

.services-page .flow__step:not(:last-child)::before {
	background: linear-gradient(var(--c), rgba(var(--c-rgb), .15));
	opacity: .5;
}

@media (max-width: 900px) {
	.page-hero__net {
		opacity: .35;
		width: 90vw;
	}
}

/* トップの事業内容：サービスページと同じ色分け */
.services .service-card {
	position: relative;
	overflow: hidden;
	border-color: rgba(var(--c-rgb), .35);
	border-top: 0;
	background:
		radial-gradient(70% 50% at 100% 100%, rgba(var(--c-rgb), .10), transparent 70%),
		#FFFFFF;
	transition: border-color .2s var(--ease);
}

.services .service-card::before {
	content: "";
	position: absolute;
	inset: 0 0 auto;
	z-index: 1;
	height: 5px;
	background: linear-gradient(90deg, var(--c), var(--c2));
}

.services .service-card:hover {
	border-color: var(--c);
}

.services .service-card__image {
	position: relative;
	background: #0A1230;
}

.services .service-card__image::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(135deg, rgba(var(--c-rgb), .35), transparent 55%),
		linear-gradient(rgba(255, 255, 255, .08) 1px, transparent 1px) 0 0 / 20px 20px,
		linear-gradient(90deg, rgba(255, 255, 255, .08) 1px, transparent 1px) 0 0 / 20px 20px;
	mix-blend-mode: screen;
	pointer-events: none;
}

.services .service-card__icon {
	display: inline-flex;
	border-radius: 10px;
	background: linear-gradient(135deg, var(--c), var(--c2));
	color: #FFFFFF;
	box-shadow: 0 8px 20px -10px rgba(var(--c-rgb), .9);
}

.services .service-card__more {
	color: var(--c-ink);
}

/* こんなお悩み：悩みごとのイラストつきカード */
.worries {
	gap: 20px;
}

.worries .worry {
	position: relative;
	overflow: hidden;
	grid-template-columns: 32px minmax(0, 1fr);
	padding: 0 22px 14px;
	border: 1px solid rgba(var(--c-rgb), .3);
	border-radius: 6px;
	background: #FFFFFF;
	transition: border-color .2s var(--ease);
}

.worries .worry:hover {
	border-color: var(--c);
	transform: none;
}

.worry__art {
	grid-column: 1 / -1;
	display: block;
	margin: 0 -22px 6px;
	padding: 10px 0 0;
	background:
		radial-gradient(60% 80% at 50% 100%, rgba(var(--c-rgb), .14), transparent 70%),
		var(--c-tint);
	border-bottom: 1px solid rgba(var(--c-rgb), .2);
}

.worry__illust {
	display: block;
	width: 100%;
	max-width: 300px;
	height: auto;
	margin: 0 auto;
}

.worries .worry__check {
	width: 32px;
	height: 32px;
	margin-top: 2px;
	border-radius: 8px;
	background: linear-gradient(135deg, var(--c), var(--c2));
}

.worries .worry__text {
	align-self: start;
	font-size: 1.0625rem;
}

.worries .worry__link {
	color: var(--c-ink);
}

/* イラストの部品 */
.worry__illust .i-main { fill: var(--c); }
.worry__illust .i-sub { fill: var(--c2); }
.worry__illust .i-tint-on { fill: rgba(var(--c-rgb), .22); }
.worry__illust .i-shadow { fill: rgba(var(--c-rgb), .18); }
.worry__illust .i-ink { fill: #1E2A4A; }
.worry__illust .i-dot { fill: #FFFFFF; }
.worry__illust .i-paper { fill: #FFFFFF; stroke: #1E2A4A; stroke-width: 2.5; }
.worry__illust .i-nostroke { stroke: none; }
.worry__illust .i-line { fill: none; stroke: #1E2A4A; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.worry__illust .i-thin { stroke-width: 1.5; opacity: .45; }
.worry__illust .i-dash { stroke-dasharray: 3 5; opacity: .6; }
.worry__illust .i-lock { stroke-width: 5; }
.worry__illust .i-wl { fill: none; stroke: #FFFFFF; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; opacity: .85; }
.worry__illust .i-arrow { fill: none; stroke: var(--c); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.worry__illust .i-code { fill: none; stroke: var(--c); stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; }
.worry__illust .i-crack { fill: none; stroke: #1E2A4A; stroke-width: 2.5; stroke-linejoin: round; }
.worry__illust .i-warn { fill: #FFC21A; stroke: #1E2A4A; stroke-width: 2.5; stroke-linejoin: round; }
.worry__illust .i-drop { fill: #7DD3FC; }
.worry__illust .i-gear { fill: none; stroke: #FFFFFF; stroke-width: 4; stroke-dasharray: 4 3; }
.worry__illust .i-sparkle { fill: var(--c2); }
.worry__illust .i-ghost { fill: none; stroke: #1E2A4A; stroke-width: 2.5; stroke-dasharray: 5 5; opacity: .5; }
.worry__illust text { font-family: var(--font-sans); font-weight: 800; text-anchor: middle; }
.worry__illust .i-q { fill: var(--c); font-size: 30px; }
.worry__illust .i-q--s { fill: #FFFFFF; font-size: 20px; }
.worry__illust .i-ai { fill: var(--c); font-size: 34px; text-anchor: start; }
.worry__illust .i-z { fill: #1E2A4A; opacity: .45; font-size: 18px; }
.worry__illust .i-z--s { font-size: 13px; }

@media (max-width: 600px) {
	.worries {
		gap: 12px;
	}

	.worries .worry {
		grid-template-columns: 104px minmax(0, 1fr);
		gap: 4px 14px;
		padding: 0 14px 0 0;
	}

	.worry__art {
		grid-column: 1;
		grid-row: 1 / span 2;
		display: flex;
		align-items: center;
		margin: 0;
		padding: 8px 4px;
		border-bottom: 0;
		border-right: 1px solid rgba(var(--c-rgb), .2);
	}

	.worries .worry__check {
		display: none;
	}

	.worries .worry__text {
		grid-column: 2;
		align-self: end;
		padding-top: 14px;
		font-size: 1rem;
	}

	.worries .worry__link {
		grid-column: 2;
		min-height: 40px;
	}
}