/* ==========================================================================
   MC-Call LP
   - モバイルファースト（SP デザイン幅 400px）
   - 1024px 以上で PC レイアウト（PC デザイン幅 1440px）
   - PC の重ね合わせ系レイアウト（ヒーロー・工程図など）は --u（1440px 基準の 1px）で
     画面幅 1440px 未満のとき比例縮小する。
   ========================================================================== */

:root {
	--lp-primary: #0c3fcc;
	--lp-accent: #1391ff;
	--lp-cyan: #5fe6f5;
	--lp-cyan-light: #c5f4ff;
	--lp-bg-blue: #e8f1f9;
	--lp-bg-cyan: #daf8ff;
	--lp-navy: #002b6c;
	--lp-text: #0f0f0f;
	--lp-gray: #666;
	--lp-font-ja: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
	--lp-font-en: "Inter", var(--lp-font-ja);
}

html {
	scroll-behavior: smooth;
}

.mc-lp {
	margin: 0;
	background: #fff;
	color: var(--lp-text);
	font-family: var(--lp-font-ja);
	font-size: 16px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	-webkit-text-size-adjust: 100%;
}

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

.mc-lp :where(h1, h2, h3, p, ul, ol, table) {
	margin: 0;
	padding: 0;
}

.mc-lp :where(ul, ol) {
	list-style: none;
}

.mc-lp img {
	display: block;
	max-width: 100%;
	height: auto;
}

/* 詳細度を下げ、各コンポーネントの color 指定を優先させる */
:where(.mc-lp) a {
	color: inherit;
	text-decoration: none;
}

.mc-lp small {
	font-size: inherit;
}

.lp-accent {
	color: var(--lp-primary);
}

.lp-container {
	width: 100%;
	max-width: 648px;
	margin-inline: auto;
	padding-inline: 24px;
}

@media (max-width: 1023.98px) {
	.u-pc {
		display: none !important;
	}
}

@media (min-width: 1024px) {
	.u-sp {
		display: none !important;
	}

	.mc-lp {
		--u: min(1px, calc(100vw / 1440));
		color: #000;
	}

	.lp-accent-pc {
		color: var(--lp-primary);
	}

	.lp-container {
		max-width: 1248px;
	}
}

/* --------------------------------------------------------------------------
   共通: セクション見出し / バッジ
   -------------------------------------------------------------------------- */

.lp-section-head {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 20px;
	text-align: center;
}

.lp-section-title {
	font-size: 20px;
	font-weight: 700;
	line-height: 1.5;
}

.lp-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 8px 16px;
	border: 1.5px solid var(--lp-accent);
	border-radius: 999px;
	color: var(--lp-accent);
	font-size: 16px;
	font-weight: 500;
	line-height: 1.6;
	letter-spacing: 1px;
	white-space: nowrap;
}

.lp-badge--light {
	border-color: var(--lp-cyan-light);
	color: var(--lp-cyan-light);
}

.lp-badge--filled {
	border-color: #fff;
	color: #fff;
}

@media (min-width: 1024px) {
	.lp-section-title {
		font-size: 36px;
		line-height: 1.6;
	}

	.lp-badge {
		height: 62px;
		padding: 0 40px;
		border-width: 1px;
		font-size: 28px;
		letter-spacing: 0.1em;
	}

	.lp-badge--filled {
		border-width: 2px;
		background: rgba(255, 255, 255, 0.2);
		letter-spacing: 0.02em;
	}
}

/* --------------------------------------------------------------------------
   ロゴ
   -------------------------------------------------------------------------- */

.lp-logo {
	position: relative;
	display: block;
	width: 100%;
	aspect-ratio: 236 / 42;
}

.mc-lp .lp-logo img {
	position: absolute;
	width: auto;
	max-width: none;
	height: auto;
}

.mc-lp .lp-logo .lp-logo__text {
	inset: 16.16% 4.7% 19.06% 34.19%;
	width: calc(100% - 34.19% - 4.7%);
	height: calc(100% - 16.16% - 19.06%);
}

.mc-lp .lp-logo .lp-logo__mark {
	inset: 4.7% 68.81% 4.71% 4.71%;
	width: calc(100% - 4.71% - 68.81%);
	height: calc(100% - 4.7% - 4.71%);
}

/* --------------------------------------------------------------------------
   CTA ボタン
   -------------------------------------------------------------------------- */

.lp-cta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	padding: 16px 16px 16px 20px;
	border-radius: 6px;
	background: #fff;
	box-shadow: 0 0 12px rgba(0, 0, 0, 0.25);
	transition: transform 0.2s, box-shadow 0.2s;
}

.lp-cta:hover {
	transform: translateY(-2px);
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}

.lp-cta__main {
	display: flex;
	align-items: center;
	gap: 6px;
}

.lp-cta__icon img {
	width: 32px;
	height: 32px;
}

.lp-cta__arrow img {
	width: 26px;
	height: 26px;
}

.lp-cta__label {
	color: var(--lp-text);
	font-size: 17px;
	font-weight: 700;
	line-height: 1.6;
	white-space: nowrap;
}

@media (max-width: 1023.98px) {
	.lp-cta--compact-sp {
		justify-content: center;
		padding: 18px 20px;
		border-radius: 8px;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
	}

	.lp-cta--compact-sp .lp-cta__icon,
	.lp-cta--compact-sp .lp-cta__arrow {
		display: none;
	}

	.lp-cta--compact-sp .lp-cta__label {
		font-size: 16px;
	}

	.lp-cta--compact-sp .lp-cta__label::after {
		content: "  →";
		white-space: pre;
	}
}

@media (min-width: 1024px) {
	/* --s: 親要素で上書きすると CTA 全体を比例縮小できる */
	.lp-cta {
		width: calc(380 * var(--s, 1px));
		height: calc(84 * var(--s, 1px));
		padding: 0 calc(20 * var(--s, 1px));
		box-shadow: 0 0 12px rgba(0, 0, 0, 0.35);
	}

	.lp-cta__icon img {
		width: calc(52 * var(--s, 1px));
		height: calc(52 * var(--s, 1px));
	}

	.lp-cta__arrow img {
		width: calc(48 * var(--s, 1px));
		height: calc(48 * var(--s, 1px));
	}

	.lp-cta__label {
		color: #000;
		font-size: calc(28 * var(--s, 1px));
		line-height: 1;
	}
}

/* --------------------------------------------------------------------------
   ヘッダー
   -------------------------------------------------------------------------- */

.lp-header {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 50;
	padding: 20px 20px 0;
}

.lp-header__pill {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	max-width: 608px;
	height: 48px;
	margin-inline: auto;
	padding: 10px 20px;
	border-radius: 999px;
	background: #fff;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

.lp-header__logo {
	display: block;
	width: 157px;
	/* ロゴ画像内の左余白（幅の 4.71%）を打ち消してピル左端 20px に揃える */
	margin-left: -7.4px;
}

.lp-header__toggle {
	display: flex;
	flex-direction: column;
	gap: 9px;
	width: 29px;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
}

.lp-header__toggle span {
	display: block;
	/* 小数 px だと線ごとに太さが変わって見えるため整数 px にする */
	width: 100%;
	height: 2px;
	border-radius: 3px;
	background: var(--lp-primary);
	transition: transform 0.2s, opacity 0.2s;
}

.lp-header.is-open .lp-header__toggle span:nth-child(1) {
	transform: translateY(11px) rotate(45deg);
}

.lp-header.is-open .lp-header__toggle span:nth-child(2) {
	opacity: 0;
}

.lp-header.is-open .lp-header__toggle span:nth-child(3) {
	transform: translateY(-11px) rotate(-45deg);
}

.lp-header__nav {
	display: none;
	position: absolute;
	top: calc(100% + 8px);
	left: 0;
	right: 0;
	overflow: hidden;
	border-radius: 16px;
	background: #fff;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

.lp-header.is-open .lp-header__nav {
	display: block;
}

.lp-header__nav li + li {
	border-top: 1px solid var(--lp-bg-blue);
}

.lp-header__nav a {
	display: block;
	padding: 14px 24px;
	color: var(--lp-primary);
	font-size: 16px;
	font-weight: 500;
}

@media (min-width: 1024px) {
	.lp-header {
		padding: 20px;
	}

	.lp-header__pill {
		max-width: none;
		height: 72px;
		padding: 0 29px 0 18px;
		border-radius: 72px;
		box-shadow: 0 0 12px rgba(0, 0, 0, 0.35);
	}

	.lp-header__logo {
		width: 236px;
		margin-left: 0;
	}

	.lp-header__toggle {
		display: none;
	}

	.lp-header__nav,
	.lp-header.is-open .lp-header__nav {
		display: block;
		position: static;
		overflow: visible;
		border-radius: 0;
		background: none;
		box-shadow: none;
	}

	.lp-header__nav ul {
		display: flex;
		gap: 33px;
	}

	.lp-header__nav li + li {
		border-top: 0;
	}

	.lp-header__nav a {
		padding: 0;
		font-size: 18px;
		line-height: 1.6;
	}

	.lp-header__nav a:hover {
		opacity: 0.7;
	}
}

/* --------------------------------------------------------------------------
   ヒーロー
   -------------------------------------------------------------------------- */

.lp-hero {
	position: relative;
	overflow: hidden;
	padding: 177px 0 94px;
	background: linear-gradient(180deg, #0037ff 0%, #1391ff 51%, #b1f1ff 100%);
	color: #fff;
}

/*
 * 装飾（写真・グラデーション三角）は PC と同じ 1440 基準のステージを --hs 倍で配置する。
 * SP: デザイン幅 400px で 1440 → 611.3px（0.4245 倍）。
 * 400px 未満では --sp = ヒーロー幅 / 400 で縮小し、Figma と同じ位置関係を保つ。
 * 400px 以上は等倍のまま右端基準で配置し、文字（固定サイズ）に装飾が被らないようにする。
 */
.lp-hero__stage {
	--sp: 1px;
	--hs: calc(0.4245 * var(--sp));
	position: absolute;
	top: calc(-9.67 * var(--sp));
	right: calc(-63.3 * var(--sp));
	width: calc(1440 * var(--hs));
	height: calc(1024 * var(--hs));
	pointer-events: none;
}

.mc-lp .lp-hero__stage img {
	position: absolute;
	max-width: none;
}

.mc-lp .lp-hero__vector-top {
	left: calc(278 * var(--hs));
	top: 0;
	width: calc(820 * var(--hs));
	height: calc(410 * var(--hs));
}

.mc-lp .lp-hero__photo {
	left: calc(80 * var(--hs));
	top: 0;
	width: calc(1504 * var(--hs));
	height: calc(847 * var(--hs));
	/* 45° 回転した正方形（左頂点 689,409 / 上頂点 1127,-29 / 右頂点 1565,409 / 下頂点 1127,847）で切り抜き */
	clip-path: polygon(40.492% 48.288%, 69.614% -3.424%, 98.737% 48.288%, 69.614% 100%);
}

.mc-lp .lp-hero__vector-bottom {
	left: calc(1127 * var(--hs));
	top: calc(535 * var(--hs));
	width: calc(313 * var(--hs));
	height: calc(489 * var(--hs));
}

.lp-hero__inner {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 24px;
	max-width: 640px;
	margin-inline: auto;
	padding-inline: 20px;
}

.lp-hero__title {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
}

.lp-hero__title-line {
	display: block;
	padding: 8px 14px;
	background: #000;
	font-size: 30px;
	font-weight: 700;
	line-height: 1;
	white-space: nowrap;
}

.lp-hero__title-line--1 {
	width: 189px;
}

.lp-hero__title-line--2 {
	width: 278px;
}

.lp-hero__catch {
	font-size: 21px;
	font-weight: 700;
	line-height: 1.5;
}

.lp-hero__lead {
	font-size: 16px;
	line-height: 1.7;
}

.lp-hero__stats {
	display: flex;
	justify-content: space-between;
	gap: 14.3px;
}

.lp-stat {
	display: flex;
	flex: 1 1 0;
	flex-direction: column;
	align-items: center;
	gap: 4.4px;
	height: 94.4px;
	padding: 14.6px 0 0;
	border: 1px solid #fff;
	border-radius: 3px;
	background: rgba(255, 255, 255, 0.2);
	text-align: center;
}

.lp-stat__label {
	width: 81.7px;
	height: 24.3px;
	border-radius: 24.3px;
	background: var(--lp-primary);
	font-size: 10.7px;
	font-weight: 500;
	line-height: 24.3px;
	letter-spacing: 0.05em;
	white-space: nowrap;
}

.lp-stat__value {
	display: flex;
	align-items: baseline;
	justify-content: center;
	gap: 2px;
	color: var(--lp-primary);
	font-size: 12.65px;
	font-weight: 700;
	line-height: 35.45px;
	white-space: nowrap;
	transform: skewX(-10deg) scaleY(0.98);
}

.lp-stat__num {
	font-family: var(--lp-font-en);
	font-size: 22.38px;
	letter-spacing: -0.02em;
}

.lp-stat__num small {
	font-size: 14.6px;
}

.lp-hero__ctas {
	display: flex;
	flex-direction: column;
	gap: 17.3px;
	padding-top: 4.5px;
}

@media (max-width: 1023.98px) {
	.lp-hero {
		container-type: inline-size;
	}

	.lp-hero__stage {
		--sp: min(calc(100cqw / 400), 1px);
	}

	/* 帯幅はデザイン固定値。末尾の約物の余白ははみ出し分として切る */
	.lp-hero__title-line {
		overflow: hidden;
	}

	.lp-hero .lp-cta {
		position: relative;
		justify-content: center;
		height: 55.9px;
		padding: 0 13.3px;
		border-radius: 4px;
		box-shadow: 0 0 8px rgba(0, 0, 0, 0.35);
	}

	.lp-hero .lp-cta__main {
		gap: 4px;
	}

	.lp-hero .lp-cta__icon img {
		width: 34.6px;
		height: 34.6px;
	}

	.lp-hero .lp-cta__arrow {
		position: absolute;
		top: 50%;
		right: 13.3px;
		transform: translateY(-50%);
	}

	.lp-hero .lp-cta__arrow img {
		width: 32px;
		height: 32px;
	}

	.lp-hero .lp-cta__label {
		color: #000;
		font-size: 18.64px;
		line-height: 1;
	}
}

@media (min-width: 1024px) {
	.lp-hero {
		height: calc(1024 * var(--u));
		padding: 0;
		background: url("../images/hero-bg.svg") center / 100% 100% no-repeat;
	}

	/* 装飾（写真・グラデーション三角）は右端基準の 1440 幅ステージに配置 */
	.lp-hero__stage {
		--hs: var(--u);
		width: calc(1440 * var(--u));
		top: 0;
		right: 0;
		height: 100%;
	}

	.lp-hero__inner {
		display: block;
		position: relative;
		width: calc(1200 * var(--u));
		max-width: none;
		height: 100%;
		padding: 0;
	}

	.lp-hero__inner > * {
		position: absolute;
		left: 0;
	}

	.lp-hero__title {
		top: calc(205 * var(--u));
		display: block;
	}

	.lp-hero__title-line {
		height: calc(95 * var(--u));
		padding: 0 0 0 calc(20 * var(--u));
		font-size: calc(68 * var(--u));
		line-height: calc(95 * var(--u));
	}

	.lp-hero__title-line--1 {
		width: calc(405 * var(--u));
	}

	.lp-hero__title-line--2 {
		width: calc(607 * var(--u));
		margin-top: calc(27 * var(--u));
	}

	.lp-hero__catch {
		top: calc(480 * var(--u));
		font-size: calc(36 * var(--u));
		line-height: 1.4;
	}

	.lp-hero__lead {
		top: calc(556 * var(--u));
		font-size: calc(26 * var(--u));
		font-weight: 500;
		line-height: 1.6;
		white-space: nowrap;
	}

	.lp-hero__stats {
		top: calc(715 * var(--u));
		flex-direction: row;
		justify-content: flex-start;
		gap: calc(29.5 * var(--u));
		padding: 0;
	}

	.lp-stat {
		flex: none;
		justify-content: flex-start;
		gap: 0;
		border-width: 2px;
		width: calc(227 * var(--u));
		height: calc(194 * var(--u));
		padding: calc(30 * var(--u)) 0 0;
		border-color: #fff;
		border-radius: 6px;
	}

	.lp-stat__label {
		width: calc(168 * var(--u));
		height: calc(50 * var(--u));
		padding: 0;
		border-radius: calc(50 * var(--u));
		font-size: calc(22 * var(--u));
		line-height: calc(50 * var(--u));
		letter-spacing: 0.05em;
	}

	.lp-stat__value {
		display: flex;
		align-items: baseline;
		justify-content: center;
		gap: calc(2 * var(--u));
		margin-top: calc(9 * var(--u));
		color: var(--lp-primary);
		font-size: calc(26 * var(--u));
		line-height: calc(73 * var(--u));
	}

	.lp-stat__num {
		font-family: var(--lp-font-en);
		font-size: calc(46 * var(--u));
		letter-spacing: -0.02em;
	}

	.lp-stat__num small {
		font-size: calc(30 * var(--u));
	}

	.lp-hero__ctas {
		--s: var(--u);
		left: calc(820 * var(--u));
		top: calc(715 * var(--u));
		gap: calc(26 * var(--u));
		padding: 0;
	}
}

/* --------------------------------------------------------------------------
   課題提起
   -------------------------------------------------------------------------- */

.lp-problem {
	padding: 56px 0;
}

.lp-problem__title {
	font-size: 21px;
	font-weight: 700;
	line-height: 1.5;
	text-align: center;
}

.lp-problem__list {
	display: flex;
	flex-direction: column;
	gap: 28px;
	margin-top: 28px;
}

.lp-problem__card {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	padding: 32px 20px 28px;
	border-radius: 6px;
	background: #fff;
	box-shadow: inset 0 0 12px rgba(0, 0, 0, 0.15);
	text-align: center;
}

.lp-problem__num {
	position: relative;
	display: block;
	flex-shrink: 0;
	width: 72px;
	height: 72px;
}

.mc-lp .lp-problem__num img {
	position: absolute;
	top: 50%;
	left: 50%;
	max-width: none;
	transform: translate(-50%, -50%);
}

.mc-lp .lp-problem__ring-outer {
	width: 72px;
	height: 72px;
}

.mc-lp .lp-problem__ring-inner {
	width: 54px;
	height: 54px;
}

.lp-problem__num-text {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	font-family: var(--lp-font-en);
	font-size: 20px;
	font-weight: 700;
	line-height: 1;
}

.lp-problem__card-title {
	font-size: 22px;
	font-weight: 700;
	line-height: 1.6;
	white-space: nowrap;
}

.lp-problem__text {
	font-size: 16px;
	font-weight: 500;
	line-height: 1.6;
}

@media (min-width: 1024px) {
	.lp-problem {
		padding: 80px 0 0;
	}

	.lp-problem__title {
		font-size: 36px;
		line-height: 1.6;
	}

	.lp-problem__list {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 362px));
		justify-content: center;
		gap: 57px;
		margin-top: 50px;
	}

	.lp-problem__card {
		position: relative;
		gap: 0;
		min-height: 349px;
		margin-top: 28px;
		padding: 55px 20px 24px;
	}

	.lp-problem__num {
		position: absolute;
		top: -46px;
		left: 50%;
		width: 88px;
		height: 88px;
		transform: translateX(-50%);
	}

	.mc-lp .lp-problem__ring-outer {
		width: 88px;
		height: 88px;
	}

	.mc-lp .lp-problem__ring-inner {
		width: 66px;
		height: 66px;
	}

	.lp-problem__num-text {
		font-size: 34px;
	}

	.lp-problem__card-title {
		font-size: 26px;
	}

	.lp-problem__icon {
		display: flex;
		align-items: flex-start;
		justify-content: center;
		height: 123px;
	}

	/* Figma: カード 02・03 は見出し・本文・アイコンの位置がカード 01 と少し異なる */
	.lp-problem__card--2,
	.lp-problem__card--3 {
		padding-top: 63px;
	}

	.lp-problem__card--2 .lp-problem__icon {
		height: 119px;
	}

	.lp-problem__card--3 .lp-problem__icon {
		height: 120px;
	}

	.lp-problem__card--3 .lp-problem__text {
		font-weight: 700;
	}

	.mc-lp .lp-problem__icon img {
		max-width: none;
		object-fit: cover;
	}

	.mc-lp .lp-problem__card--1 .lp-problem__icon img {
		width: 143px;
		height: 114px;
		margin-top: -1px;
	}

	.mc-lp .lp-problem__card--2 .lp-problem__icon img {
		width: 131px;
		height: 105px;
		margin-top: 7px;
	}

	.mc-lp .lp-problem__card--3 .lp-problem__icon img {
		width: 118px;
		height: 111px;
		margin-top: 4px;
		object-position: center bottom;
	}

	.lp-problem__text {
		font-size: 18px;
	}
}

/* --------------------------------------------------------------------------
   導入でこう変わる
   -------------------------------------------------------------------------- */

.lp-change {
	padding: 8px 0 56px;
}

.lp-change__head {
	display: grid;
	grid-template-columns: 1fr 56px 56px 1fr;
	column-gap: 16px;
	row-gap: 6px;
}

/* SP: 見出しが上、矢印が下 */
.lp-change__arrow:first-child {
	grid-column: 2;
	grid-row: 2;
}

.lp-change__arrow:last-child {
	grid-column: 3;
	grid-row: 2;
}

.mc-lp .lp-change__arrow img {
	width: 56px;
	height: 43px;
}

.lp-change__title {
	grid-column: 1 / -1;
	grid-row: 1;
	font-size: 21px;
	font-weight: 700;
	line-height: 1.6;
	text-align: center;
	white-space: nowrap;
}

.lp-change__list {
	display: flex;
	flex-direction: column;
	gap: 20px;
	margin-top: 16px;
}

.lp-change__card {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
	padding: 24px 20px;
	border: 2px solid var(--lp-primary);
	border-radius: 12px;
	background: #fff;
}

.lp-change__badge {
	padding: 8px 16px;
	border-radius: 999px;
	background: #000;
	color: #fff;
	font-size: 16px;
	font-weight: 500;
	line-height: 1.6;
	letter-spacing: 1px;
	white-space: nowrap;
}

.lp-change__card-title {
	color: var(--lp-primary);
	font-size: 19px;
	font-weight: 700;
	line-height: 1.4;
}

.lp-change__text {
	color: var(--lp-gray);
	font-size: 16px;
	line-height: 1.6;
}

@media (min-width: 1024px) {
	.lp-change {
		padding: 30px 0 80px;
	}

	.lp-change__head {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 30px;
	}

	.mc-lp .lp-change__arrow img {
		width: 115px;
		height: 88.5px;
	}

	.lp-change__title {
		font-size: 28px;
	}

	.lp-change__list {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 362px));
		justify-content: center;
		gap: 57px;
		margin-top: 30px;
	}

	.lp-change__card {
		gap: 16px;
		min-height: 309px;
		padding: 30px;
		border-radius: 6px;
	}

	.lp-change__badge {
		width: 100%;
		height: 39px;
		padding: 0;
		border-radius: 0;
		font-size: 22px;
		font-weight: 700;
		line-height: 39px;
		letter-spacing: 0;
		text-align: center;
	}

	.lp-change__card-title {
		font-size: 32px;
		line-height: 1.3;
	}

	.lp-change__text {
		color: #000;
		font-size: 18px;
		font-weight: 500;
	}
}

/* --------------------------------------------------------------------------
   全工程を MC-Call ひとつで
   -------------------------------------------------------------------------- */

.lp-flow {
	padding: 56px 0;
	background: var(--lp-bg-blue);
	text-align: center;
}

.lp-flow__title {
	font-size: 21px;
	font-weight: 700;
	line-height: 1.5;
}

.lp-flow__lead {
	margin-top: 24px;
	color: var(--lp-gray);
	font-size: 16px;
	line-height: 1.7;
}

.lp-flow__visual {
	margin-top: 24px;
}

.mc-lp .lp-flow__screen {
	width: 100%;
	height: auto;
}

.lp-flow__steps {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	margin-top: 24px;
}

.lp-flow__step {
	position: relative;
	width: calc((100% - 16px) / 3);
	padding: 14px 4px;
	border-radius: 10px;
	background: linear-gradient(90deg, var(--lp-accent), var(--lp-primary));
	color: #fff;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.6;
	white-space: nowrap;
}


@media (min-width: 1024px) {
	.lp-flow {
		padding: 80px 0 100px;
	}

	.lp-flow__title {
		font-size: 36px;
		line-height: 1.6;
	}

	.lp-flow__lead {
		margin-top: 20px;
		color: #000;
		font-size: 18px;
		font-weight: 500;
		line-height: 1.6;
	}

	.lp-flow__visual {
		position: relative;
		width: calc(1030 * var(--u));
		height: calc(390 * var(--u));
		margin: 50px auto 0;
	}

	.mc-lp .lp-flow__screen {
		position: absolute;
		top: 0;
		left: calc(157 * var(--u));
		width: calc(717 * var(--u));
		height: calc(390 * var(--u));
		max-width: none;
		aspect-ratio: auto;
		border-radius: 0;
		box-shadow: none;
	}

	.lp-flow__steps {
		display: block;
		position: absolute;
		inset: 0;
		margin: 0;
	}

	.lp-flow__step,
	.lp-flow__step + .lp-flow__step {
		position: absolute;
		top: calc(var(--y) * var(--u));
		left: calc(var(--x) * var(--u));
		display: flex;
		align-items: center;
		justify-content: center;
		width: calc(182 * var(--u));
		height: calc(70 * var(--u));
		margin: 0;
		padding: 0;
		border-radius: 0 calc(20 * var(--u));
		box-shadow: 0 0 10px rgba(0, 0, 0, 0.25);
		font-size: calc(24 * var(--u));
	}

	.lp-flow__step + .lp-flow__step::before {
		content: none;
	}

	.lp-flow__step--a {
		background: linear-gradient(135deg, #25c1ff 2.976%, #1391ff 64.484%);
	}

	.lp-flow__step--b {
		background: linear-gradient(148.54deg, #1391ff 50%, #3541ed 132.98%);
	}
}

/* --------------------------------------------------------------------------
   3モード概要
   -------------------------------------------------------------------------- */

.lp-modes {
	padding: 56px 0 40px;
}

.lp-modes .lp-section-head {
	gap: 24px;
}

.lp-modes__list {
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin-top: 24px;
}

.lp-mode-card {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 100px;
	grid-template-areas:
		"tag tag"
		"title icon"
		"sub sub"
		"text text"
		"btn btn";
	overflow: hidden;
	padding: 0 20px 24px;
	border-radius: 6px;
	background: var(--lp-bg-blue);
}

.lp-mode-card__tag {
	grid-area: tag;
	justify-self: start;
	margin: 0 0 14px -20px;
	padding: 8px 16px;
	background: #000;
	color: #fff;
	font-family: var(--lp-font-en);
	font-size: 14px;
	font-weight: 700;
	line-height: 1.6;
}

.lp-mode-card__title {
	grid-area: title;
	align-self: start;
	color: var(--lp-primary);
	font-size: 24px;
	font-weight: 700;
	line-height: 1.3;
}

.lp-mode-card__icon {
	grid-area: icon;
	position: relative;
	width: 100px;
	height: 100px;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.mc-lp .lp-mode-card__icon-img {
	position: absolute;
	top: 14px;
	left: 14px;
	width: 72px;
	height: 72px;
	object-fit: cover;
}

.lp-mode-card__sub {
	grid-area: sub;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.6;
}

.lp-mode-card__text {
	grid-area: text;
	margin-top: 12px;
	color: var(--lp-gray);
	font-size: 14px;
	font-weight: 500;
	line-height: 1.6;
}

.lp-mode-card__btn {
	grid-area: btn;
	justify-self: start;
	margin-top: 12px;
	padding: 12px 16px;
	border-radius: 6px;
	background: #fff;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
	font-size: 14px;
	font-weight: 700;
	line-height: 1.6;
}

.lp-mode-card__btn span::after {
	content: "  →";
	white-space: pre;
}

@media (min-width: 1024px) {
	.lp-modes {
		padding: 80px 0;
	}

	.lp-modes .lp-section-head {
		gap: 20px;
	}

	.lp-modes__list {
		display: grid;
		grid-template-columns: minmax(0, 361px) 58px minmax(0, 361px) 58px minmax(0, 361px);
		justify-content: center;
		gap: 0;
		margin-top: 50px;
	}

	.lp-modes__arrow {
		display: flex;
		justify-content: center;
	}

	.mc-lp .lp-modes__arrow img {
		width: 63px;
		height: 28px;
		max-width: none;
		margin-top: 230px;
		transform: rotate(90deg);
	}

	.lp-mode-card {
		display: flex;
		flex-direction: column;
		min-height: 552px;
		padding: 0 25px 39px;
		border-radius: 0;
	}

	.lp-mode-card__tag {
		align-self: flex-start;
		width: 125px;
		height: 46px;
		margin: 0 0 0 -25px;
		padding: 0 0 0 25px;
		border-radius: 6px 0 6px 0;
		font-size: 20px;
		font-weight: 500;
		line-height: 46px;
	}

	.lp-mode-card__title {
		margin-top: 19px;
		font-size: 28px;
		line-height: 1.4;
		white-space: nowrap;
	}

	.lp-mode-card__icon {
		align-self: center;
		width: 125px;
		height: 122px;
		margin-top: 15px;
		border-radius: 0;
		background: none;
		box-shadow: none;
	}

	.mc-lp .lp-mode-card__icon-bg {
		width: 125px;
		height: 122px;
	}

	.mc-lp .lp-mode-card__icon-img {
		top: 13px;
		left: 15px;
		width: 94px;
		height: 94px;
	}

	.lp-mode-card__sub {
		margin-top: 20px;
		font-size: 22px;
	}

	.lp-mode-card__text {
		margin-top: 13px;
		color: #000;
		font-size: 18px;
		margin-bottom: 29px;
	}

	.lp-mode-card__btn {
		display: flex;
		align-items: center;
		justify-content: space-between;
		align-self: stretch;
		height: 62px;
		margin-top: auto;
		padding: 10px 15px 10px 20px;
		box-shadow: 0 0 12px rgba(0, 0, 0, 0.15);
		font-size: 20px;
		line-height: 1;
	}

	.lp-mode-card__btn span::after {
		content: none;
	}

	.mc-lp .lp-mode-card__btn img {
		width: 40px;
		height: 40px;
	}

	.lp-mode-card__text + .lp-mode-card__btn {
		margin-top: auto;
	}

	.lp-mode-card__btn:hover,
	.lp-case-link:hover {
		opacity: 0.85;
	}
}

/* --------------------------------------------------------------------------
   モード詳細（共通）
   -------------------------------------------------------------------------- */

.lp-mode {
	padding: 48px 0;
}

.lp-mode--1 {
	padding: 56px 0 48px;
	background: var(--lp-bg-cyan);
}

.lp-mode--3 {
	padding: 48px 0 56px;
	background: var(--lp-bg-blue);
}

.lp-mode-head {
	padding-top: 8px;
}

.lp-mode-head__title {
	color: var(--lp-primary);
	font-family: var(--lp-font-en);
	font-size: 16px;
	font-weight: 700;
	line-height: 1.6;
	letter-spacing: 1px;
}

.lp-mode-head__tag {
	margin-right: 0.3em;
}

.lp-mode-head__title::after {
	content: "";
	display: block;
	width: var(--ul-w, 179px);
	height: 5px;
	margin-top: 6px;
	background: linear-gradient(90deg, var(--lp-cyan) 50%, var(--ul-base, #fff) 50%);
}

.lp-mode-head__lead {
	margin-top: 6px;
	font-size: 24px;
	font-weight: 700;
	line-height: 1.4;
}

@media (min-width: 1024px) {
	.lp-mode {
		padding: 80px 0;
	}

	.lp-mode--1 {
		--ul-w: 179px;
	}

	.lp-mode--2 {
		--ul-w: 412px;
		--ul-base: var(--lp-cyan-light);
	}

	.lp-mode--3 {
		--ul-w: 351px;
	}

	.lp-mode-head {
		padding-top: 0;
	}

	.lp-mode-head__title {
		display: flex;
		flex-direction: column;
		color: #000;
		font-family: var(--lp-font-ja);
		letter-spacing: 0;
	}

	.lp-mode-head__tag {
		margin: 0;
		font-family: var(--lp-font-en);
		font-size: 20px;
		line-height: 1.4;
	}

	.lp-mode-head__name {
		font-size: 36px;
		line-height: 1.4;
	}

	.lp-mode--1 .lp-mode-head__name {
		font-size: 32px;
	}

	.lp-mode-head__title::after {
		margin-top: 12px;
	}

	.lp-mode-head__lead {
		margin-top: 50px;
		color: var(--lp-primary);
		font-size: 38px;
		line-height: 1.6;
	}
}

/* --------------------------------------------------------------------------
   MODE 1: IVR ステップ / ポイント
   -------------------------------------------------------------------------- */

.lp-ivr-steps {
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin-top: 28px;
}

.lp-ivr-steps__item {
	display: flex;
	align-items: center;
	gap: 14px;
}

.lp-ivr-steps__num,
.lp-num-steps__num {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--lp-primary);
	color: #fff;
	font-family: var(--lp-font-en);
	font-size: 16px;
	font-weight: 700;
	line-height: 1.6;
}

.lp-ivr-steps__text,
.lp-num-steps__text {
	font-size: 16px;
	font-weight: 500;
	line-height: 1.5;
}

.lp-mode-points {
	display: flex;
	flex-direction: column;
	gap: 14px;
	margin-top: 28px;
}

.lp-mode-points__item {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 20px 18px;
	border: 3px solid var(--lp-primary);
	border-radius: 6px;
}

.lp-mode-points__title {
	color: var(--lp-primary);
	font-size: 16px;
	font-weight: 700;
	line-height: 1.5;
}

.lp-mode-points__text {
	color: #000;
	font-size: 16px;
	line-height: 1.6;
}

.lp-case-link {
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: 28px;
	padding: 18px 20px;
	border-radius: 8px;
	background: var(--lp-primary);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
	color: #fff;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.6;
}

.lp-case-link span::after {
	content: "  →";
	white-space: pre;
}

@media (min-width: 1024px) {
	.lp-ivr-steps {
		display: block;
		position: relative;
		width: calc(1201 * var(--u));
		height: calc(324 * var(--u));
		margin: 40px auto 0;
	}

	.lp-ivr-steps__item {
		display: block;
		position: absolute;
		top: 0;
		height: 100%;
	}

	.lp-ivr-steps__item--1 {
		left: 0;
		width: calc(422.5 * var(--u));
		--tx: 49;
		--ix: 104;
		--iy: 133;
		--is: 169;
	}

	.lp-ivr-steps__item--2 {
		left: calc(383 * var(--u));
		width: calc(441.56 * var(--u));
		--tx: 81;
		--ix: 142.5;
		--iy: 132;
		--is: 166;
	}

	.lp-ivr-steps__item--3 {
		left: calc(786 * var(--u));
		width: calc(415 * var(--u));
		--tx: 82.5;
		--ix: 158.5;
		--iy: 140;
		--is: 150;
	}

	.mc-lp .lp-ivr-steps__bg {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		max-width: none;
	}

	.lp-ivr-steps__text {
		position: absolute;
		top: calc(33 * var(--u));
		left: calc(var(--tx) * var(--u));
		color: #000;
		white-space: nowrap;
	}

	.lp-ivr-steps__small,
	.lp-ivr-steps__big {
		display: block;
		line-height: 1.4;
	}

	.lp-ivr-steps__small {
		font-size: calc(24 * var(--u));
		font-weight: 500;
	}

	.lp-ivr-steps__big {
		font-size: calc(36 * var(--u));
		font-weight: 700;
	}

	.mc-lp .lp-ivr-steps__icon {
		position: absolute;
		top: calc(var(--iy) * var(--u));
		left: calc(var(--ix) * var(--u));
		width: calc(var(--is) * var(--u));
		height: calc(var(--is) * var(--u));
		max-width: none;
		object-fit: cover;
	}

	.lp-mode-points {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 29px;
		margin-top: 50px;
	}

	.lp-mode-points__item {
		gap: 18px;
		min-height: 200px;
		padding: 28px 31px;
	}

	.lp-mode-points__title {
		font-size: 24px;
		line-height: 1.4;
	}

	.lp-mode-points__text {
		font-size: 18px;
		font-weight: 500;
	}

	.lp-case-link {
		justify-content: space-between;
		width: 380px;
		height: 84px;
		margin: 50px auto 0;
		padding: 20px;
		border-radius: 6px;
		background: #fff;
		box-shadow: 0 0 12px rgba(0, 0, 0, 0.15);
		color: #000;
		font-size: 26px;
		line-height: 1;
	}

	.lp-case-link span::after {
		content: none;
	}

	.mc-lp .lp-case-link img {
		width: 48px;
		height: 48px;
	}
}

/* --------------------------------------------------------------------------
   MODE 2: 番号付きステップ / 特長
   -------------------------------------------------------------------------- */

.lp-num-steps {
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin-top: 28px;
}

.lp-num-steps__item {
	display: flex;
	align-items: center;
	gap: 14px;
}

.lp-num-steps__item.is-highlight {
	padding: 10px 14px 10px 10px;
	border: 1.5px solid var(--lp-accent);
	border-radius: 12px;
	background: rgba(19, 145, 255, 0.12);
}

.lp-num-steps__item.is-highlight .lp-num-steps__num {
	width: 48px;
	height: 48px;
	background: var(--lp-accent);
	box-shadow: 0 2px 8px rgba(18, 145, 255, 0.5);
	font-size: 18px;
}

.lp-num-steps__item.is-highlight .lp-num-steps__text {
	font-weight: 700;
}

.lp-mode2__body {
	margin-top: 28px;
}

.lp-features {
	display: flex;
	flex-direction: column;
	gap: 18px;
	padding: 24px 20px;
	border-radius: 12px;
	background: #fff;
}

.lp-features--check {
	background: var(--lp-bg-blue);
}

.lp-features__item {
	display: grid;
	grid-template-columns: 4px minmax(0, 1fr);
	column-gap: 12px;
	row-gap: 6px;
}

.lp-features__item::before {
	content: "";
	grid-row: 1 / 3;
	border-radius: 2px;
	background: var(--lp-primary);
}

.lp-features__title {
	font-size: 16px;
	font-weight: 700;
	line-height: 1.6;
}

.lp-features__text {
	color: var(--lp-gray);
	font-size: 16px;
	line-height: 1.6;
}

@media (min-width: 1024px) {
	.lp-num-steps {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 264px) 19px) minmax(0, 264px);
		justify-content: center;
		gap: 15px;
		margin-top: 40px;
	}

	.lp-num-steps__item,
	.lp-num-steps__item.is-highlight {
		flex-direction: column;
		gap: 0;
		height: 252px;
		padding: 55px 10px 0;
		border: 2px solid transparent;
		border-radius: 6px;
		background: var(--lp-bg-blue);
		text-align: center;
	}

	.lp-num-steps__item.is-highlight {
		border-color: var(--lp-primary);
	}

	.lp-num-steps__num,
	.lp-num-steps__item.is-highlight .lp-num-steps__num {
		width: auto;
		height: auto;
		border-radius: 0;
		background: none;
		box-shadow: none;
		color: #000;
		font-size: 38px;
	}

	.lp-num-steps__text,
	.lp-num-steps__item.is-highlight .lp-num-steps__text {
		margin-top: 7px;
		color: var(--lp-primary);
		font-size: 20px;
		font-weight: 700;
		line-height: 1.6;
	}

	.lp-num-steps__arrow,
	.lp-onboarding__arrow {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.mc-lp .lp-num-steps__arrow img,
	.mc-lp .lp-onboarding__arrow img {
		width: 47px;
		height: 21px;
		max-width: none;
		transform: rotate(90deg);
	}

	.lp-mode2__body {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 576px);
		gap: 45px;
		margin-top: 50px;
	}

	.lp-features {
		gap: 21px;
		padding: 0;
		border-radius: 0;
		background: none;
	}

	.lp-features__item {
		grid-template-columns: 9px minmax(0, 1fr);
		column-gap: 14px;
		row-gap: 7px;
		min-height: 87px;
		padding-bottom: 15px;
	}

	.lp-features__item::before {
		grid-row: 1 / 3;
		margin-bottom: -15px;
		border-radius: 0;
		background: var(--lp-accent);
	}

	.lp-features__title {
		padding-top: 9px;
		color: #000;
		font-size: 22px;
		line-height: 1.4;
	}

	.lp-features__text {
		color: #000;
		font-size: 18px;
		line-height: 1.4;
	}

	.lp-mode2__photo {
		position: relative;
		overflow: hidden;
		height: 305px;
	}

	.mc-lp .lp-mode2__photo img {
		position: absolute;
		top: -25.32%;
		left: -20.97%;
		width: 141.8%;
		height: 150.72%;
		max-width: none;
	}

	/* MODE 3 はチェックアイコン付きの白カード */
	.lp-features--check {
		gap: 31px;
		background: none;
	}

	.lp-features--check .lp-features__item {
		display: block;
		min-height: 138px;
		padding: 20px 25px 22px 27px;
		border-radius: 6px;
		background: #fff;
	}

	.lp-features--check .lp-features__item:last-child {
		min-height: 115px;
	}

	.lp-features--check .lp-features__item::before {
		content: none;
	}

	.lp-features--check .lp-features__title {
		display: flex;
		align-items: center;
		gap: 12px;
		padding: 0;
		font-size: 24px;
		line-height: 1.6;
	}

	.mc-lp .lp-features__check {
		flex-shrink: 0;
		width: 26px;
		height: 26px;
	}

	.lp-features--check .lp-features__text {
		margin-top: 4px;
	}
}

/* --------------------------------------------------------------------------
   MODE 3: 料金カード
   -------------------------------------------------------------------------- */

.lp-mode3__body {
	display: flex;
	flex-direction: column;
	gap: 28px;
	margin-top: 28px;
}

.lp-zoom-price {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 14px;
	padding: 32px 24px;
	border-radius: 16px;
	background: linear-gradient(165.15deg, #0bcaff 8.333%, #0b81ff 33.333%, #0045d9 75%);
	color: #fff;
}

.lp-zoom-price__badge {
	padding: 8px 16px;
	border-radius: 999px;
	background: #fff;
	color: var(--lp-primary);
	font-size: 16px;
	font-weight: 500;
	line-height: 1.6;
	letter-spacing: 1px;
	white-space: nowrap;
}

.lp-zoom-price__amount {
	display: flex;
	align-items: baseline;
	gap: 8px;
	font-weight: 700;
	line-height: 1.6;
	white-space: nowrap;
}

.lp-zoom-price__num {
	font-size: 34px;
}

.lp-zoom-price__unit {
	font-size: 16px;
}

.lp-zoom-price__annual {
	font-size: 16px;
	font-weight: 700;
	line-height: 1.6;
}

.lp-zoom-price__text {
	font-size: 16px;
	line-height: 1.6;
}

@media (min-width: 1024px) {
	.lp-mode3__body {
		display: grid;
		grid-template-columns: minmax(0, 453fr) minmax(0, 685fr);
		align-items: center;
		gap: 62px;
		margin-top: 40px;
	}

	.lp-zoom-price {
		align-items: center;
		gap: 0;
		min-height: 455px;
		padding: 60px 24px 40px;
		border-radius: 6px;
		background: linear-gradient(175.43deg, #0bcaff 14.46%, #0b81ff 49.365%, #0045d9 107.28%);
	}

	.lp-zoom-price__badge {
		width: 340px;
		max-width: 100%;
		height: 59px;
		padding: 0;
		border-radius: 59px;
		font-size: 26px;
		line-height: 59px;
		letter-spacing: 0;
		text-align: center;
	}

	.lp-zoom-price__amount {
		margin-top: 24px;
	}

	.lp-zoom-price__num {
		font-size: 46px;
	}

	.lp-zoom-price__unit {
		font-size: 24px;
	}

	.lp-zoom-price__annual {
		margin-top: 2px;
		font-size: 24px;
	}

	.lp-zoom-price__text {
		margin-top: 56px;
		font-size: 24px;
		font-weight: 500;
	}
}

/* --------------------------------------------------------------------------
   管理機能
   -------------------------------------------------------------------------- */

.lp-management {
	padding: 56px 0;
}

.lp-management__intro {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.lp-management__head {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 20px;
}

.lp-management__title {
	font-size: 22px;
	font-weight: 700;
	line-height: 1.45;
}

.lp-management__lead {
	color: var(--lp-gray);
	font-size: 16px;
	line-height: 1.7;
}

.lp-management__image {
	overflow: hidden;
	height: 241px;
	border-radius: 14px;
}

.mc-lp .lp-management__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.lp-management__list {
	display: flex;
	flex-direction: column;
	gap: 14px;
	margin-top: 28px;
}

.lp-management__card {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 20px 18px;
	border-radius: 10px;
	background: var(--lp-bg-cyan);
}

.lp-management__card-title {
	color: var(--lp-primary);
	font-size: 17px;
	font-weight: 700;
	line-height: 1.6;
}

.lp-management__card-text {
	font-size: 16px;
	line-height: 1.6;
}

@media (min-width: 1024px) {
	.lp-management {
		padding: 80px 0;
	}

	.lp-management__intro {
		flex-direction: row;
		align-items: flex-start;
		justify-content: space-between;
		gap: 40px;
		padding-inline: 4px;
	}

	.lp-management__head {
		gap: 0;
		width: 540px;
		max-width: 50%;
	}

	.lp-management__title {
		margin-top: 29px;
		font-size: 36px;
		line-height: 1.6;
	}

	.lp-management__lead {
		margin-top: 32px;
		color: #000;
		font-size: 22px;
		font-weight: 500;
		line-height: 1.6;
	}

	.lp-management__image {
		position: relative;
		flex-shrink: 1;
		width: 573px;
		height: 392px;
		border-radius: 0;
	}

	.mc-lp .lp-management__image img {
		position: absolute;
		top: -9.69%;
		left: 0;
		height: 109.77%;
		object-fit: fill;
	}

	.lp-management__list {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 30px 33px;
		margin-top: 30px;
	}

	.lp-management__card {
		gap: 12px;
		min-height: 232px;
		padding: 24px;
		border-radius: 6px;
	}

	.lp-management__card-title {
		font-size: 24px;
	}

	.lp-management__card-text {
		color: #000;
		font-size: 18px;
	}
}

/* --------------------------------------------------------------------------
   サービス比較
   -------------------------------------------------------------------------- */

.lp-comparison {
	padding: 56px 0;
	background: var(--lp-navy);
	color: #fff;
}

.lp-comparison__table {
	display: block;
	width: 100%;
	margin-top: 28px;
	border-collapse: collapse;
	font-size: 16px;
	line-height: 1.6;
}

.lp-comparison__table thead {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.lp-comparison__table tbody {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.lp-comparison__table tr {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 18px;
	border: 1px solid rgba(255, 255, 255, 0.15);
	border-radius: 10px;
	background: rgba(255, 255, 255, 0.06);
}

.lp-comparison__table th,
.lp-comparison__table td {
	padding: 0;
}

.lp-comparison__table tbody th {
	font-weight: 700;
	text-align: left;
}

.lp-comparison__table td {
	display: flex;
	gap: 8px;
	color: #bfcce5;
}

.lp-comparison__table td::before {
	content: attr(data-label);
	flex-shrink: 0;
	color: #99b2d9;
	font-weight: 500;
}

.lp-comparison__table td.is-mc,
.lp-comparison__table td.is-mc::before {
	color: var(--lp-cyan-light);
	font-weight: 700;
}

@media (min-width: 1024px) {
	.lp-comparison {
		padding: 80px 0;
	}

	.lp-comparison__table {
		display: table;
		max-width: 1200px;
		margin: 40px auto 0;
		table-layout: fixed;
		color: #000;
		font-size: 20px;
	}

	.lp-comparison__table thead {
		position: static;
		display: table-header-group;
		width: auto;
		height: auto;
		overflow: visible;
		clip: auto;
	}

	.lp-comparison__table tbody {
		display: table-row-group;
	}

	.lp-comparison__table tr {
		display: table-row;
		padding: 0;
		border: 0;
		border-radius: 0;
		background: #fff;
	}

	.lp-comparison__table th,
	.lp-comparison__table td {
		display: table-cell;
		height: 68px;
		padding: 18px 24px;
		border-right: 2px solid #023a6e;
		border-bottom: 2px solid #023a6e;
		vertical-align: middle;
		text-align: left;
	}

	.lp-comparison__table th:nth-child(1) {
		width: 33.4%;
	}

	.lp-comparison__table th:nth-child(2) {
		width: 32%;
	}

	.lp-comparison__table .is-mc {
		padding-right: 12px;
		border-right: 0;
	}

	.lp-comparison__table tbody tr:last-child > * {
		border-bottom: 0;
	}

	.lp-comparison__table thead th {
		border-bottom: 0;
		background: var(--lp-bg-blue);
		font-size: 24px;
		font-weight: 700;
	}

	.lp-comparison__table thead th.is-mc {
		background: #b1f1ff;
		color: var(--lp-primary);
	}

	.lp-comparison__table tbody th {
		font-weight: 400;
	}

	.lp-comparison__table td,
	.lp-comparison__table td.is-mc {
		color: #000;
	}

	.lp-comparison__table td::before {
		content: none;
	}
}

/* --------------------------------------------------------------------------
   導入実績
   -------------------------------------------------------------------------- */

.lp-case {
	padding: 56px 0;
}

.lp-case .lp-section-head {
	align-items: flex-start;
	text-align: left;
}

.lp-case__list {
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin-top: 28px;
}

.lp-case__item {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 12px;
	padding: 24px 20px;
	border-radius: 14px;
	background: var(--lp-bg-blue);
}

.lp-case__label {
	padding: 8px 16px;
	border-radius: 999px;
	background: var(--lp-primary);
	color: #fff;
	font-size: 16px;
	font-weight: 500;
	line-height: 1.6;
	letter-spacing: 1px;
	white-space: nowrap;
}

.lp-case__title {
	font-size: 18px;
	font-weight: 700;
	line-height: 1.45;
}

.lp-case__text {
	margin-top: 12px;
	color: var(--lp-gray);
	font-size: 16px;
	line-height: 1.65;
}

@media (min-width: 1024px) {
	.lp-case {
		padding: 80px 0;
	}

	.lp-case .lp-section-head {
		align-items: center;
		gap: 29px;
		text-align: center;
	}

	.lp-case__heading {
		color: var(--lp-primary);
	}

	.lp-case__list {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 574px));
		justify-content: center;
		gap: 52px;
		margin-top: 50px;
	}

	.lp-case__item {
		gap: 0;
		padding: 0;
		border-radius: 0;
		background: none;
	}

	.lp-case__label {
		display: flex;
		align-items: center;
		gap: 8px;
		width: 264px;
		height: 60px;
		padding: 11px;
		border-radius: 6px 6px 0 0;
		font-size: 22px;
		font-weight: 700;
		letter-spacing: 0;
	}

	.mc-lp .lp-case__label img {
		width: 28px;
		height: 28px;
	}

	.lp-case__body {
		align-self: stretch;
		min-height: 240px;
		padding: 20px 11px 20px 29px;
		border-radius: 0 6px 6px 6px;
		background: var(--lp-bg-blue);
	}

	.lp-case__title {
		font-size: 26px;
		line-height: 1.6;
	}

	.lp-case__num {
		font-size: 32px;
	}

	.lp-case__text {
		margin-top: 15px;
		color: #000;
		font-size: 18px;
		line-height: 1.6;
	}
}

/* --------------------------------------------------------------------------
   導入までの流れ
   -------------------------------------------------------------------------- */

.lp-onboarding {
	padding: 56px 0;
	background: var(--lp-bg-cyan);
}

.lp-onboarding__steps {
	display: flex;
	flex-direction: column;
	gap: 14px;
	margin-top: 28px;
}

.lp-onboarding__step {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 22px 20px;
	border-radius: 12px;
	background: #fff;
}

.lp-onboarding__step-num {
	color: var(--lp-accent);
	font-family: var(--lp-font-en);
	font-size: 16px;
	font-weight: 700;
	line-height: 1.6;
	letter-spacing: 1px;
}

.lp-onboarding__step-title {
	font-size: 17px;
	font-weight: 700;
	line-height: 1.6;
}

.lp-onboarding__step-text {
	color: var(--lp-gray);
	font-size: 16px;
	line-height: 1.6;
}

.lp-onboarding__banners {
	display: flex;
	flex-direction: column;
	gap: 14px;
	margin-top: 28px;
}

.lp-onboarding__banner {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 20px 18px;
	border-radius: 12px;
	background: var(--lp-primary);
	color: #fff;
	line-height: 1.6;
}

.lp-onboarding__banner-title {
	font-weight: 700;
}

@media (min-width: 1024px) {
	.lp-onboarding {
		padding: 80px 0;
	}

	.lp-onboarding__steps {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 264px) 19px) minmax(0, 264px);
		justify-content: center;
		gap: 14.5px;
		margin-top: 50px;
	}

	.lp-onboarding__step {
		position: relative;
		gap: 0;
		height: 252px;
		padding: 80px 22px 0;
		border-radius: 6px;
	}

	.lp-onboarding__step-num {
		position: absolute;
		top: 0;
		left: 50%;
		width: 120px;
		height: 42px;
		border-radius: 0 0 8px 8px;
		background: var(--lp-accent);
		color: #fff;
		font-size: 24px;
		line-height: 42px;
		letter-spacing: 0;
		text-align: center;
		transform: translateX(-50%);
	}

	.lp-onboarding__step-title {
		font-size: 22px;
		white-space: nowrap;
	}

	.lp-onboarding__step-text {
		margin-top: 19px;
		color: #000;
	}

	.lp-onboarding__banners {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 576px));
		justify-content: center;
		gap: 48px;
		margin-top: 50px;
	}

	.lp-onboarding__banner {
		flex-direction: row;
		align-items: center;
		gap: 38px;
		min-height: 109px;
		padding: 0 38px;
		border-radius: 6px;
		background: #fff;
		box-shadow: inset 0 0 12px rgba(0, 0, 0, 0.15);
		color: var(--lp-primary);
	}

	.lp-onboarding__banner-title {
		flex-shrink: 0;
		font-size: 22px;
		line-height: 1.4;
		text-align: center;
	}

	.lp-onboarding__banner-text {
		font-size: 16px;
		font-weight: 500;
	}
}

/* --------------------------------------------------------------------------
   料金
   -------------------------------------------------------------------------- */

.lp-pricing {
	padding: 56px 0;
	background: var(--lp-accent);
	text-align: center;
}

.lp-pricing .lp-container {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 24px;
}

.lp-pricing__title {
	color: #fff;
	font-size: 24px;
	font-weight: 700;
	line-height: 1.6;
}

.lp-pricing__card {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	width: 100%;
	padding: 28px 24px;
	border-radius: 16px;
	background: #fff;
	line-height: 1.6;
}

.lp-pricing__label {
	color: var(--lp-primary);
	font-weight: 700;
}

.lp-pricing__price {
	display: flex;
	align-items: baseline;
	justify-content: center;
	gap: 6px;
	font-weight: 700;
	white-space: nowrap;
}

.lp-pricing__num {
	font-family: var(--lp-font-en);
	font-size: 44px;
}

.lp-pricing__unit {
	font-size: 18px;
}

.lp-pricing__note {
	color: var(--lp-gray);
}

.lp-pricing__ctas {
	display: flex;
	flex-direction: column;
	gap: 12px;
	width: 100%;
	padding-top: 4px;
}

@media (min-width: 1024px) {
	.lp-pricing {
		padding: 80px 0;
	}

	.lp-pricing .lp-container {
		gap: 0;
	}

	.lp-pricing__title {
		margin-top: 40px;
		color: #000;
		font-size: 36px;
	}

	.lp-pricing__card {
		display: grid;
		grid-template-columns: auto auto;
		justify-content: start;
		align-items: center;
		gap: 0;
		width: 605px;
		margin-top: 4px;
		padding: 0;
		border-radius: 0;
		background: none;
	}

	.lp-pricing__label {
		width: 191px;
		height: 62px;
		margin-left: 19px;
		border-radius: 0 10px 0 10px;
		background: #000;
		color: #fff;
		font-size: 28px;
		line-height: 62px;
	}

	.lp-pricing__price {
		gap: 0;
		margin-left: 21px;
		color: #fff;
	}

	.lp-pricing__num {
		font-size: 63px;
	}

	.lp-pricing__unit {
		margin-left: 4px;
		font-size: 42px;
	}

	.mc-lp .lp-pricing__line {
		grid-column: 1 / -1;
		width: 605px;
		height: 2px;
		margin-top: 13px;
	}

	.lp-pricing__note {
		grid-column: 1 / -1;
		justify-self: end;
		margin-top: 12px;
		color: #fff;
		font-size: 20px;
		font-weight: 500;
	}

	.lp-pricing__ctas {
		flex-direction: row;
		justify-content: space-between;
		width: 820px;
		margin-top: 40px;
		padding: 0;
	}

	.lp-pricing .lp-cta {
		box-shadow: 0 0 12px rgba(0, 0, 0, 0.25);
	}
}

/* --------------------------------------------------------------------------
   よくあるご質問
   -------------------------------------------------------------------------- */

.lp-faq {
	padding: 56px 0;
}

.lp-faq .lp-section-title {
	font-size: 22px;
	line-height: 1.6;
}

.lp-faq__list {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin-top: 28px;
}

.lp-faq__item {
	border-radius: 12px;
	background: var(--lp-bg-blue);
}

.lp-faq__q {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 20px 18px;
	cursor: pointer;
	list-style: none;
}

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

.lp-faq__mark {
	flex-shrink: 0;
	color: var(--lp-primary);
	font-family: var(--lp-font-en);
	font-size: 24px;
	font-weight: 700;
	line-height: 1.2;
}

.lp-faq__q-text {
	flex: 1;
	font-size: 16px;
	font-weight: 500;
	line-height: 1.5;
}

.lp-faq__toggle {
	position: relative;
	flex-shrink: 0;
	width: 10px;
	height: 10px;
	margin-top: -4px;
	border-right: 2px solid var(--lp-gray);
	border-bottom: 2px solid var(--lp-gray);
	transform: rotate(45deg);
	transition: transform 0.2s;
}

.lp-faq__item[open] .lp-faq__toggle {
	margin-top: 4px;
	transform: rotate(-135deg);
}

.lp-faq__a {
	padding: 0 18px 20px 49px;
	color: var(--lp-gray);
	line-height: 1.6;
}

@media (min-width: 1024px) {
	.lp-faq {
		padding: 80px 0;
		background: var(--lp-bg-blue);
	}

	.lp-faq .lp-section-title {
		font-size: 36px;
	}

	.lp-faq__list {
		gap: 16px;
		width: 820px;
		max-width: 100%;
		margin: 50px auto 0;
	}

	.lp-faq__item {
		border-radius: 6px;
		background: #fff;
	}

	.lp-faq__q {
		gap: 20px;
		min-height: 81px;
		padding: 9px 25px 9px 26px;
	}

	.lp-faq__mark {
		font-size: 34px;
		line-height: 1.6;
		letter-spacing: 0.02em;
	}

	.lp-faq__q-text {
		color: #000;
		font-size: 20px;
		line-height: 1.6;
	}

	/* PC は「＋」、開いたら「－」 */
	.lp-faq__toggle,
	.lp-faq__item[open] .lp-faq__toggle {
		width: 26px;
		height: 26px;
		margin: 0;
		border: 0;
		transform: none;
	}

	.lp-faq__toggle::before,
	.lp-faq__toggle::after {
		content: "";
		position: absolute;
		top: 50%;
		left: 0;
		width: 26px;
		height: 2.5px;
		margin-top: -1.25px;
		background: var(--lp-primary);
		transition: transform 0.2s;
	}

	.lp-faq__toggle::after {
		transform: rotate(90deg);
	}

	.lp-faq__item[open] .lp-faq__toggle::after {
		transform: rotate(0deg);
	}

	.lp-faq__a {
		padding: 0 25px 24px 71px;
		color: #000;
		font-size: 18px;
	}
}

/* --------------------------------------------------------------------------
   PC 幅が狭いとき（1024〜1279px）: 3〜4 カラムのカード内の文字を詰める
   -------------------------------------------------------------------------- */

@media (min-width: 1024px) and (max-width: 1279.98px) {
	.lp-problem__card-title {
		font-size: 22px;
		white-space: normal;
	}

	.lp-problem__text,
	.lp-change__text,
	.lp-mode-card__text {
		font-size: 16px;
	}

	.lp-change__card {
		padding: 24px;
	}

	.lp-change__badge {
		font-size: 17px;
	}

	.lp-change__card-title {
		font-size: 26px;
	}

	.lp-mode-card__title {
		font-size: 22px;
		white-space: normal;
	}

	.lp-mode-card__sub {
		font-size: 20px;
	}

	.lp-mode-card__btn {
		font-size: 17px;
	}

	.lp-management__card-title,
	.lp-features--check .lp-features__title {
		font-size: 20px;
	}

	.lp-onboarding__step {
		padding-inline: 16px;
	}

	.lp-onboarding__step-title {
		font-size: 18px;
		white-space: normal;
	}
}

/* --------------------------------------------------------------------------
   フッター
   -------------------------------------------------------------------------- */

.lp-footer {
	padding: 48px 0 40px;
	background: var(--lp-navy);
	color: #fff;
	text-align: center;
}

.lp-footer__top {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 28px;
}

.lp-footer__logo {
	display: block;
	width: 150px;
}

.lp-footer__ctas {
	display: flex;
	flex-direction: column;
	gap: 12px;
	width: 100%;
}

.lp-footer__links {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	margin-top: 28px;
	font-size: 16px;
	font-weight: 500;
	line-height: 1.6;
}

.lp-footer__copy {
	margin-top: 28px;
	color: #b2c7e5;
	font-size: 16px;
	font-weight: 500;
	line-height: 1.6;
}

@media (min-width: 1024px) {
	.lp-footer {
		--s: var(--u);
		padding: 50px 0 37px;
	}

	.lp-footer__top {
		flex-direction: row;
		justify-content: space-between;
		max-width: 1200px;
		margin-inline: auto;
	}

	.lp-footer__logo {
		width: calc(253 * var(--s));
	}

	.lp-footer__ctas {
		flex-direction: row;
		gap: calc(26 * var(--s));
		width: auto;
	}

	.lp-footer__links {
		flex-direction: row;
		justify-content: center;
		gap: 40px;
		margin-top: 35px;
		font-size: 18px;
	}

	.lp-footer__links a {
		text-decoration: underline;
	}

	.lp-footer__links a:hover {
		opacity: 0.8;
	}

	.lp-footer__copy {
		margin-top: 46px;
		color: #fff;
		font-size: 14px;
	}
}

/* 語の途中で改行させない */
.lp-nowrap {
	display: inline-block;
}


/* --------------------------------------------------------------------------
   料金（料金表）2026-10 更新
   -------------------------------------------------------------------------- */

.lp-pricing__summary {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
	width: 100%;
}

.lp-pricing__summary-item {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 14px 8px;
	border-radius: 12px;
	background: #fff;
}

.lp-pricing__summary-label {
	color: var(--lp-gray);
	font-size: 14px;
}

.lp-pricing__summary-value {
	color: var(--lp-primary);
	font-family: var(--lp-font-en);
	font-size: 22px;
	font-weight: 700;
	line-height: 1.4;
}

.lp-pricing__body {
	display: flex;
	flex-direction: column;
	gap: 16px;
	width: 100%;
}

.lp-pricing__table {
	width: 100%;
	border-collapse: collapse;
	overflow: hidden;
	border-radius: 12px;
	background: #fff;
	font-size: 15px;
}

.lp-pricing__table th,
.lp-pricing__table td {
	padding: 12px 8px;
	border-bottom: 1px solid var(--lp-bg-blue);
	text-align: center;
}

.lp-pricing__table thead th {
	background: var(--lp-navy);
	color: #fff;
	font-size: 13px;
	font-weight: 700;
}

.lp-pricing__table tbody th {
	font-weight: 700;
}

.lp-pricing__table td {
	color: var(--lp-primary);
	font-family: var(--lp-font-en);
	font-size: 18px;
	font-weight: 700;
}

.lp-pricing__table tbody tr:last-child > * {
	border-bottom: 0;
}

.lp-pricing__extra {
	padding: 20px;
	border-radius: 12px;
	background: #fff;
	text-align: left;
}

.lp-pricing__extra-title {
	color: var(--lp-primary);
	font-size: 18px;
	font-weight: 700;
}

.lp-pricing__extra-list {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin: 12px 0 0;
}

.lp-pricing__extra-list dt {
	color: var(--lp-gray);
	font-size: 14px;
}

.lp-pricing__extra-list dd {
	margin: 0;
	font-size: 18px;
	font-weight: 700;
}

@media (min-width: 1024px) {
	.lp-pricing__summary {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 20px;
		width: min(100%, 1100px);
		margin-top: 32px;
	}

	.lp-pricing__summary-item {
		padding: 22px 12px;
	}

	.lp-pricing__summary-label {
		font-size: 16px;
	}

	.lp-pricing__summary-value {
		font-size: 34px;
	}

	.lp-pricing__body {
		display: grid;
		grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
		gap: 24px;
		width: min(100%, 1100px);
		margin-top: 24px;
	}

	.lp-pricing__table {
		font-size: 18px;
	}

	.lp-pricing__table th,
	.lp-pricing__table td {
		padding: 16px 12px;
	}

	.lp-pricing__table thead th {
		font-size: 17px;
	}

	.lp-pricing__table td {
		font-size: 24px;
	}

	.lp-pricing__extra {
		padding: 28px;
	}
}


/* --------------------------------------------------------------------------
   資料内容の追加に伴うレイアウト調整（2026-10）
   -------------------------------------------------------------------------- */

.lp-zoom-price__note {
	margin-top: 12px;
	color: #fff;
	font-size: 14px;
	line-height: 1.6;
}

@media (min-width: 1024px) {
	/* MODE 1: ポイントが 3 つになったため 3 列に */
	.lp-mode-points {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	/* MODE 3: 注記は本文の下に小さく */
	.lp-zoom-price__note {
		margin-top: 16px;
		font-size: 16px;
		font-weight: 500;
	}

	/* 導入実績: 3 件目は 2 列分の幅で表示 */
	.lp-case__item:nth-child(3) {
		grid-column: 1 / -1;
	}
}

@media (min-width: 1024px) {
	/* MODE 1: 3 列時の文字組み */
	.lp-mode-points__item {
		padding: 28px 26px;
	}

	.lp-mode-points__title {
		font-size: 22px;
	}

	.lp-mode-points__text {
		font-size: 16px;
	}

	.lp-zoom-price__note {
		text-align: center;
	}
}

/* ==========================================================================
   追従ヘッダー / フェードインアニメーション（2026-10-08 追加）
   ========================================================================== */

/* ページ内リンクで見出しがヘッダーに隠れないように */
html:has(.mc-lp) {
	scroll-padding-top: 88px;
}

@media (min-width: 1024px) {
	html:has(.mc-lp) {
		scroll-padding-top: 112px;
	}
}

/* --- 追従ヘッダー ------------------------------------------------------- */

.lp-header {
	position: fixed;
	transition: padding 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.lp-header__pill {
	transition:
		background-color 0.5s ease,
		box-shadow 0.5s ease,
		height 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

/* スクロール後: 少し上に詰め、すりガラス＋柔らかい影に */
.lp-header.is-scrolled {
	padding-top: 12px;
}

.lp-header.is-scrolled .lp-header__pill {
	background: rgba(255, 255, 255, 0.82);
	-webkit-backdrop-filter: blur(14px) saturate(160%);
	backdrop-filter: blur(14px) saturate(160%);
	box-shadow: 0 8px 28px rgba(12, 63, 204, 0.16);
}

@media (min-width: 1024px) {
	.lp-header.is-scrolled {
		padding-top: 14px;
	}

	.lp-header.is-scrolled .lp-header__pill {
		height: 64px;
	}
}

/* --- フェードイン ------------------------------------------------------- */
/* html.mc-anim は JS 有効かつ「視差効果を減らす」がオフのときだけ付く */

@keyframes mcFadeUp {
	from {
		opacity: 0;
		translate: 0 32px;
		filter: blur(6px);
	}
	to {
		opacity: 1;
		translate: 0 0;
		filter: blur(0);
	}
}

@keyframes mcFadeDown {
	from {
		opacity: 0;
		translate: 0 -24px;
	}
	to {
		opacity: 1;
		translate: 0 0;
	}
}

@keyframes mcFade {
	from {
		opacity: 0;
		scale: 1.04;
	}
	to {
		opacity: 1;
		scale: 1;
	}
}

/* スクロールで表示 */
.mc-anim .js-reveal {
	opacity: 0;
}

.mc-anim .js-reveal.is-inview {
	animation: mcReveal 0.9s cubic-bezier(0.22, 1, 0.36, 1) var(--reveal-delay, 0s) both;
}

.mc-anim .js-reveal.is-instant {
	opacity: 1;
	animation: none;
}

/* セクション内用: FV より移動量・ぼかしを控えめにして、揃って見えるように */
@keyframes mcReveal {
	from {
		opacity: 0;
		translate: 0 24px;
		filter: blur(4px);
	}
	to {
		opacity: 1;
		translate: 0 0;
		filter: blur(0);
	}
}

/* ページ読み込み時: ヘッダー */
.mc-anim .lp-header__pill {
	animation: mcFadeDown 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.1s both;
}

/* ページ読み込み時: ファーストビュー（順番にふわっと） */
.mc-anim .lp-hero__stage {
	animation: mcFade 1.6s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.mc-anim :is(
	.lp-hero__title-line--1,
	.lp-hero__title-line--2,
	.lp-hero__lead,
	.lp-hero__badge,
	.lp-hero__stats,
	.lp-hero__ctas,
	.lp-hero__note
) {
	animation: mcFadeUp 1.1s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.mc-anim .lp-hero__title-line--1 { animation-delay: 0.25s; }
.mc-anim .lp-hero__title-line--2 { animation-delay: 0.4s; }
.mc-anim .lp-hero__lead          { animation-delay: 0.6s; }
.mc-anim .lp-hero__badge         { animation-delay: 0.72s; }
.mc-anim .lp-hero__stats         { animation-delay: 0.86s; }
.mc-anim .lp-hero__ctas          { animation-delay: 1s; }
.mc-anim .lp-hero__note          { animation-delay: 1.15s; }

@media (prefers-reduced-motion: reduce) {
	.mc-anim .js-reveal {
		opacity: 1;
		animation: none !important;
	}
}

/* ==========================================================================
   FV 訴求強化（2026-10-08 追加）
   - キャッチで通話料の安さを言い切る / Zoom Phone 連携バッジ
   - 数字カードに分単価・注釈 / CTA の主従
   ========================================================================== */

/* キャッチの帯幅（文字数変更に合わせる。末尾の約物は従来どおりはみ出し分として切る） */
.lp-hero__title-line--1 {
	width: 160px;
}

.lp-hero__title-line--2 {
	width: 248px;
}

/* Zoom Phone 連携バッジ */
.lp-hero__zoom {
	display: inline-block;
	margin-right: 8px;
	padding: 2px 12px;
	border-radius: 999px;
	background: #fff;
	color: var(--lp-primary);
	font-family: var(--lp-font-en);
	font-size: 0.78em;
	font-weight: 700;
	line-height: 1.6;
	letter-spacing: 0.01em;
	vertical-align: 0.12em;
	box-shadow: 0 2px 10px rgba(0, 43, 108, 0.25);
}

/* 数字カード: 分単価などの補足 */
/* 3枠とも同じサイズ。補足テキストの下にも余白を取る */
.lp-stat {
	height: 118px;
}

.lp-stat__note {
	color: var(--lp-navy);
	font-size: 11px;
	font-weight: 700;
	line-height: 1;
	white-space: nowrap;
}

/* 注釈（背景が明るくなる下部に置くため濃紺） */
.lp-hero__note {
	color: var(--lp-navy);
	font-size: 11px;
	line-height: 1.6;
}

/* CTA の主従: 資料請求を主役（白・大きく）、お問い合わせは一回り小さい濃紺の半透明
   （背景のグラデーションが明るい位置でも文字が読めるよう、白抜きではなく濃紺地にする） */
.lp-hero .lp-cta--contact {
	background: rgba(0, 43, 108, 0.72);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.5);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
}

.lp-hero .lp-cta--contact .lp-cta__label {
	color: #fff;
}

.lp-hero .lp-cta--contact .lp-cta__icon img {
	filter: brightness(0) invert(1);
}

.lp-hero .lp-cta--contact:hover {
	background: rgba(0, 43, 108, 0.85);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.7), 0 4px 16px rgba(0, 0, 0, 0.2);
}

.lp-hero .lp-cta--document {
	box-shadow: 0 6px 22px rgba(0, 43, 108, 0.35);
}

@media (max-width: 1023.98px) {
	.lp-hero .lp-cta--contact {
		height: 48px;
		box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.5);
	}

	.lp-hero .lp-cta--contact .lp-cta__label {
		color: #fff;
		font-size: 16px;
	}

	.lp-hero .lp-cta--contact .lp-cta__icon img,
	.lp-hero .lp-cta--contact .lp-cta__arrow img {
		width: 26px;
		height: 26px;
	}
}

@media (min-width: 1024px) {
	.lp-hero__title-line--1 {
		width: calc(337 * var(--u));
	}

	.lp-hero__title-line--2 {
		width: calc(539 * var(--u));
	}

	.lp-hero__zoom {
		margin-right: calc(14 * var(--u));
		padding: calc(4 * var(--u)) calc(20 * var(--u));
		font-size: calc(28 * var(--u));
	}

	.lp-stat {
		height: calc(212 * var(--u));
	}

	.lp-stat__value {
		margin-top: calc(4 * var(--u));
	}

	.lp-stat__note {
		font-size: calc(19 * var(--u));
	}

	.lp-hero__note {
		top: calc(948 * var(--u));
		font-size: calc(16 * var(--u));
		white-space: nowrap;
	}

	/* お問い合わせは一回り小さく */
	.lp-hero .lp-cta--contact {
		height: calc(68 * var(--u));
	}

	.lp-hero .lp-cta--contact .lp-cta__label {
		font-size: calc(24 * var(--u));
	}

	.lp-hero .lp-cta--contact .lp-cta__icon img {
		width: calc(42 * var(--u));
		height: calc(42 * var(--u));
	}

	.lp-hero .lp-cta--contact .lp-cta__arrow img {
		width: calc(40 * var(--u));
		height: calc(40 * var(--u));
	}
}


/* ==========================================================================
   FV リニューアル（2026-10-09）
   - キャッチ「コールセンターの通話料を、業界最安水準に。」（キーワードを黄色）
   - Zoom Phone 連携バッジをリード文の下に黄色ピルで配置
   - 数字カード: 最大40%削減 / 秒単価 0.12円/秒 / 初期費用 0円
   ========================================================================== */

:root {
	--lp-yellow: #ffff49;
}

/* 帯は文字幅に合わせる（従来の固定幅・はみ出しカットは解除） */
.lp-hero__title-line,
.lp-hero__title-line--1,
.lp-hero__title-line--2 {
	width: max-content;
	max-width: none;
	overflow: visible;
}

.lp-hero__title-line {
	padding: 8px 10px;
	font-size: min(28px, calc((100vw - 60px) / 13));
	font-weight: 900;
	letter-spacing: 0;
}

.lp-hero__hl {
	color: var(--lp-yellow);
}

.lp-hero__badge {
	align-self: flex-start;
	padding: 6px 18px;
	border-radius: 999px;
	background: var(--lp-yellow);
	color: var(--lp-primary);
	font-family: var(--lp-font-en);
	font-size: 16px;
	font-weight: 700;
	line-height: 1.5;
	white-space: nowrap;
}

/* 補足テキストを外したので元の高さに戻す */
.lp-stat {
	height: 94.4px;
}

@media (min-width: 1024px) {
	.lp-hero__title-line {
		height: calc(95 * var(--u));
		padding: 0 calc(22 * var(--u)) 0 calc(25 * var(--u));
		font-size: calc(64 * var(--u));
		line-height: calc(95 * var(--u));
	}

	.lp-hero__title-line--2 {
		margin-top: calc(27 * var(--u));
	}

	.lp-hero__lead {
		top: calc(459 * var(--u));
		font-size: calc(26 * var(--u));
		line-height: calc(42 * var(--u));
	}

	.lp-hero__badge {
		top: calc(570 * var(--u));
		padding: 0 calc(26 * var(--u));
		height: calc(47 * var(--u));
		font-size: calc(24 * var(--u));
		line-height: calc(47 * var(--u));
	}

	.lp-stat {
		height: calc(194 * var(--u));
	}

	.lp-stat__value {
		margin-top: calc(9 * var(--u));
	}
}