@charset "UTF-8";
/* トップページ（index.html）新デザイン用スタイル
 * セクションごとに「.セクション名__要素名」で命名し、このファイル内で完結させる。
 * サイズは Figma の PC デザイン（幅1512px）の数値を --u（1px相当の可変単位）に掛けて指定する。
 * 画面幅に応じて --u が縮むので、レイアウト全体が同じ比率のまま拡大縮小する。 */

/*==================== FV（ファーストビュー） ====================*/
.fv {
	/* PCでは次の3つのうち一番小さい値を使う（ただし0.6pxより小さくはしない）
	 * - 0.9px：Figmaより少し小さく表示する上限
	 * - 100vw / 1512：画面幅に収まる大きさ
	 * - (画面の高さ − ヘッダー) / 776：CTAボタンの下端（FV上端から約776u）までが1画面に収まる大きさ */
	--fv-header-h: 148px; /* PCヘッダーの実測146pxを偶数に丸めた値 */
	--fv-u: max(0.6px, min(0.9px, 100vw / 1512, (100vh - var(--fv-header-h)) / 776));
	--fv-u: max(0.6px, min(0.9px, 100vw / 1512, (100svh - var(--fv-header-h)) / 776));
	--u: var(--fv-u);
	--fv-text-scale: 1.06; /* 左のテキスト群（キャッチ・特長バッジ・CTAボタン）だけFigmaより少し大きくする倍率 */
	--fv-blue: #138fff;
	--fv-blue-pale: #e2f4ff;
	--fv-orange: #ff7d13;
	--fv-text: #111;

	position: relative;
	overflow: clip;
	background: linear-gradient(#f2fbff, #fff);
	color: var(--fv-text);
}
.fv__inner {
	display: grid;
	/* 左余白 | テキスト | 間隔 | 画像
	 * 画像は常に「画面中央 + 12u」から始まり、左余白は残りの幅（最小32px）になる
	 * テキストを中央寄りに見せるため、間隔はFigmaの80より狭い40にしている */
	grid-template-columns: minmax(32px, 1fr) calc(696 * var(--fv-text-scale) * var(--u)) calc(40 * var(--u)) calc(50% - 12 * var(--u));
	grid-template-rows: auto 1fr;
	grid-template-areas:
		". content . visual"
		". cta     . visual";
	box-sizing: border-box;
}

/* --- テキスト --- */
/* テキスト群の中では --u に倍率を掛けて、文字・余白・バッジをまとめて拡大する */
.fv__copy,
.fv__points,
.fv__btn {
	--u: calc(var(--fv-u) * var(--fv-text-scale));
}
.fv__content {
	grid-area: content;
	padding-top: calc(64 * var(--u)); /* 上下の余白はテキスト側に持たせ、画像はFVの高さ全体で上下中央に置く。テキストを拡大した分、Figmaの88より詰めてCTAボタンを1画面に収める */
	display: flex;
	flex-direction: column;
	/* align-items: center; */
	gap: calc(44 * var(--u));
}
.fv__copy {
	display: flex;
	flex-direction: column;
	gap: calc(20 * var(--u));
	width: 100%;
}
.fv__lead {
	width: fit-content; /* 枠を文字幅に合わせる */
	padding: calc(12 * var(--u)) calc(24 * var(--u));
	border: max(1px, calc(2 * var(--u))) solid var(--fv-blue);
	border-radius: calc(10 * var(--u));
	color: var(--fv-blue);
	font-size: max(12px, calc(24 * var(--u)));
	font-weight: 700;
	line-height: 1.5;
	letter-spacing: 0.05em;
	text-align: center;
	font-feature-settings: "palt";
	word-break: keep-all; /* 折り返すときは「、」の位置で */
}
.fv__title {
	display: flex;
	flex-direction: column;
	gap: calc(20 * var(--u));
	margin-bottom: calc(16 * var(--u)); /* 説明文との間を36pxに */
	font-size: calc(88 * var(--u));
	font-weight: 500;
	line-height: 1;
	white-space: nowrap;
}
.fv__title-line {
	display: flex;
	align-items: flex-end;
}
.fv__title-line + .fv__title-line {
	gap: calc(4 * var(--u));
}
.fv__title-sm {
	font-size: calc(72 / 88 * 1em);
}
.fv__title-md {
	font-size: calc(80 / 88 * 1em);
	letter-spacing: -0.12em;
}
.fv__title-accent {
	color: var(--fv-orange);
	font-style: normal;
}
.fv__text {
	font-size: max(12px, calc(24 * var(--u)));
	font-weight: 500;
	line-height: 1.5;
	letter-spacing: 0.05em;
	font-feature-settings: "palt";
}

/* --- 特長バッジ --- */
.fv__points {
	display: grid;
	grid-template-columns: repeat(3, calc(208 * var(--u)));
	gap: calc(16 * var(--u));
	list-style: none;
}
.fv__point {
	padding: calc(4 * var(--u));
	border-radius: calc(16 * var(--u));
	background: var(--fv-blue-pale);
}
.fv__point-text {
	display: flex;
	flex-direction: column;
	justify-content: center;
	height: 100%;
	padding-block: calc(14 * var(--u));
	border: max(1px, calc(2 * var(--u))) solid #fff;
	border-radius: calc(12 * var(--u));
	box-sizing: border-box;
	font-size: max(11px, calc(22 * var(--u)));
	font-weight: 700;
	line-height: 1.4;
	text-align: center;
	font-feature-settings: "palt";
}
.fv__point-text strong {
	color: var(--fv-blue);
	font-weight: inherit;
}

/* --- ビジュアル（管理画面イメージ） --- */
.fv__visual {
	grid-area: visual;
	align-self: center;
	position: relative;
	isolation: isolate;
	width: fit-content;
	margin: 0;
}
.fv__visual img {
	display: block;
	width: calc(896 * var(--u));
	max-width: none;
	height: auto;
}
/* 背景の斜めの光
 * 下端の位置はFigmaのまま、上端を --beam-extend 分だけ画面外まで伸ばす（伸ばした部分は同じ濃さ） */
.fv__visual::before,
.fv__visual::after {
	--beam-rotate: 44deg;
	--beam-extend: calc(1200 * var(--u));
	content: "";
	position: absolute;
	z-index: -1;
	left: var(--beam-x);
	top: var(--beam-y);
	width: calc(264 * var(--u));
	height: calc(var(--beam-h) + var(--beam-extend));
	background: linear-gradient(rgba(48, 157, 255, 0.3) var(--beam-extend), rgba(48, 157, 255, 0));
	transform: translate(-50%, -50%) rotate(var(--beam-rotate)) translateY(calc(var(--beam-extend) / -2));
	pointer-events: none;
}
.fv__visual::before {
	--beam-x: 34%;
	--beam-y: 42%;
	--beam-h: calc(1312 * var(--u));
}
.fv__visual::after {
	--beam-x: 66%;
	--beam-y: 69%;
	--beam-h: calc(964 * var(--u));
}

/* --- CTAボタン --- */
.fv__cta {
	grid-area: cta;
	justify-self: center;
	padding-block: calc(48 * var(--u)) calc(88 * var(--u));
}
.fv__btn {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: calc(432 * var(--u));
	height: calc(84 * var(--u));
	border-radius: 999px;
	background: linear-gradient(159deg, #309dff 8%, #61d2df 92%);
	overflow: hidden;
	color: #fff;
	font-size: calc(28 * var(--u));
	font-weight: 700;
	letter-spacing: 0.05em;
	text-decoration: none;
	animation: fv-pulse 2s ease-in-out infinite;
}
/* 内側の白い線 */
.fv__btn::before {
	content: "";
	position: absolute;
	inset: calc(5 * var(--u));
	border: max(1px, calc(2 * var(--u))) solid #fff;
	border-radius: inherit;
	pointer-events: none;
}
/* 光が横切るエフェクト */
.fv__btn::after {
	content: "";
	position: absolute;
	top: -100%;
	left: -100px;
	width: 52px;
	height: 300%;
	background: linear-gradient(100deg, rgba(255, 255, 255, 0) 15%, rgba(255, 255, 255, 0.9) 50%, rgba(255, 255, 255, 0) 85%);
	transform: rotate(25deg);
	animation: fv-shine 3s ease-in-out infinite;
	pointer-events: none;
}
.fv__btn:hover {
	animation-play-state: paused;
	opacity: 0.9;
}
.fv__btn:focus-visible {
	outline: 3px solid var(--fv-blue);
	outline-offset: 4px;
}
@keyframes fv-pulse {
	50% {
		transform: scale(1.04);
	}
}
@keyframes fv-shine {
	0% {
		left: -100px;
	}
	30%,
	100% {
		left: 120%;
	}
}
@media (prefers-reduced-motion: reduce) {
	.fv__btn,
	.fv__btn::after {
		animation: none;
	}
}

/* --- タブレット・スマートフォン：1カラム（ヘッダーの切り替えと同じ900px） --- */
@media screen and (max-width: 900px) {
	.fv {
		/* 本文幅（画面幅−左右16px）に696pxのデザインを合わせる。タブレットでは大きくなりすぎないよう上限を設ける */
		--fv-u: min(0.75px, (100vw - 32px) / 696);
		--fv-text-scale: 1; /* 1カラムでは本文幅に合わせているので拡大しない */
	}
	.fv__title {
		font-size: min(calc(88 * var(--u)), 56px); /* タブレットでは56pxで止める */
	}
	.fv__inner {
		grid-template-columns: minmax(0, 1fr);
		grid-template-rows: none;
		grid-template-areas:
			"content"
			"visual"
			"cta";
		justify-items: center;
		max-width: calc(696 * var(--u) + 32px);
		margin-inline: auto;
		padding: 32px 16px 24px;
	}
	.fv__content {
		width: 100%;
		padding-top: 0;
	}
	.fv__points {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		width: 100%;
	}
	.fv__visual {
		align-self: auto;
		width: 100%;
		margin-top: 16px;
	}
	.fv__visual img {
		width: 100%;
	}
	.fv__visual::before,
	.fv__visual::after {
		--beam-rotate: 56deg;
		width: 24%;
	}
	.fv__visual::before {
		--beam-x: 86%;
		--beam-y: 42%;
		--beam-h: calc(936 * var(--u));
	}
	.fv__visual::after {
		--beam-x: 100%;
		--beam-y: 84%;
		--beam-h: calc(624 * var(--u));
	}
	.fv__cta {
		justify-self: stretch;
		padding-block: 20px 0;
	}
	.fv__btn {
		width: 100%;
		max-width: 440px;
		height: 52px;
		margin-inline: auto;
		font-size: 18px;
	}
	.fv__btn::before {
		inset: 3px;
		border-width: 1px;
	}
}

/* タブレット：CTAボタンを本文幅いっぱいに広げて大きくする */
@media screen and (min-width: 601px) and (max-width: 900px) {
	.fv__btn {
		max-width: none;
		height: 64px;
		font-size: 22px;
	}
}

/*==================== 補助金の案内バナー ====================*/
/* FVとABOUTの間に置く横長の画像バナー。下の余白はABOUTの padding-top に任せる */
.subsidy {
	padding-top: 64px;
	padding-bottom: 0;
}
.subsidy__link {
	display: block;
	max-width: 960px; /* Figmaのバナー幅（約961px）に合わせる */
	margin-inline: auto;
	transition: opacity 0.2s;
}
.subsidy__link:hover {
	opacity: 0.85;
}
.subsidy__link:focus-visible {
	border-radius: 10px; /* フォーカス枠も画像の角丸に合わせる */
	outline: 3px solid var(--sec-blue);
	outline-offset: 4px;
}
.subsidy__link img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 10px;
}

/*==================== ABOUT ====================*/
.about {
	padding-top: 96px; /* FVのすぐ下なので広めに取る */
}
.about__card {
	display: grid;
	grid-template-columns: minmax(0, 45fr) minmax(0, 55fr);
	align-items: center;
	gap: 48px;
	max-width: 1400px;
	margin-inline: auto;
	padding: 44px 48px;
	border: 2px solid var(--sec-blue);
	border-radius: 20px;
	box-sizing: border-box;
}
.about__body {
	padding-block: 20px;
}

/* --- 機能の図 --- */
.about__visual {
	position: relative;
	width: 100%;
	max-width: 560px;
	margin: 0 auto;
}
.about__visual img {
	display: block;
	width: 100%;
}
/* 図の円に重ねるリンク。--x / --y は円の中心（図に対する割合、画像から実測）、--c は円の枠の色 */
.about__visual-link {
	position: absolute;
	left: var(--x);
	top: var(--y);
	width: 27.6%;
	aspect-ratio: 1;
	border-radius: 50%;
	translate: -50% -50%;
	transition: box-shadow 0.2s;
}
.about__visual-link--reply {
	--x: 15.3%;
	--y: 57.4%;
	--c: #30a0eb;
}
.about__visual-link--analytics {
	--x: 34.2%;
	--y: 81.4%;
	--c: #259ecb;
}
.about__visual-link--report {
	--x: 63.7%;
	--y: 81.4%;
	--c: #f0b92e;
}
.about__visual-link--competitor {
	--x: 82.8%;
	--y: 57.5%;
	--c: #ff9f45;
}
/* 円の下端（枠線の真上）に付ける矢印バッジ。押せることがわかる目印 */
.about__visual-link::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: 0;
	width: 28px;
	height: 28px;
	border: 2px solid #fff;
	border-radius: 50%;
	/* 三角形の重心がバッジの中心に来るよう調整した専用アイコン */
	background: var(--c) url("../img/icon-badge-arrow.svg") center / 20px no-repeat;
	box-sizing: border-box;
	translate: -50% 50%;
	transition: scale 0.2s;
}
.about__visual-link:hover {
	box-shadow: 0 0 0 6px color-mix(in srgb, var(--c) 35%, transparent);
}
.about__visual-link:hover::after {
	scale: 1.15;
}
.about__visual-link:focus-visible {
	outline: 3px solid var(--c);
	outline-offset: 4px;
}

@media screen and (max-width: 900px) {
	.subsidy {
		padding-top: 32px;
	}
	.about {
		padding-top: 64px;
	}
	.about__card {
		grid-template-columns: minmax(0, 1fr);
		gap: 24px;
		padding: 32px clamp(16px, 4vw, 40px);
	}
	.about__visual {
		max-width: 480px;
	}
	.about__body {
		padding-block: 0;
	}
	.about__body .sec-text {
		max-width: none;
	}
}
@media screen and (max-width: 600px) {
	.about__visual-link::after {
		width: 24px;
		height: 24px;
		background-size: 16px;
	}
}

/*==================== FEATURE ====================*/
.features__panel {
	display: grid;
	grid-template-columns: 292px minmax(0, 664px);
	justify-content: center;
	align-items: center;
	gap: 56px;
	max-width: 1248px;
	margin: 40px auto 0;
	padding: 48px 56px;
	border-radius: 88px;
	background: #edfaff;
	box-sizing: border-box;
}
/* 背景付きのパネルの下なので、ボタンとの間は共通ルール（56px）より狭くする */
.features .sec-action {
	margin-top: 32px;
}
.features__visual {
	margin: 0;
}
.features__visual img {
	display: block;
	width: 100%;
}

/* --- 特徴リスト（チェックアイコン付きの白い帯） --- */
.features__list {
	display: flex;
	flex-direction: column;
	gap: 20px;
	list-style: none;
}
.features__item {
	position: relative;
	padding: 16px 24px 16px 56px;
	border-radius: 32px;
	background: #fff;
	font-size: 16px;
	font-weight: 500;
	line-height: 1.9;
	letter-spacing: 0.02em;
}
.features__item strong {
	color: var(--sec-accent);
	font-weight: inherit;
}
/* 青い丸 */
.features__item::before {
	content: "";
	position: absolute;
	left: 12px;
	top: 50%;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: var(--sec-accent);
	translate: 0 -50%;
}
/* 白いチェック */
.features__item::after {
	content: "";
	position: absolute;
	left: 22px;
	top: 50%;
	width: 12px;
	height: 6px;
	border-bottom: 2px solid #fff;
	border-left: 2px solid #fff;
	translate: 0 -75%;
	rotate: -45deg;
}

@media screen and (max-width: 1100px) {
	.features__panel {
		grid-template-columns: 240px minmax(0, 1fr);
		gap: 40px;
		padding: 40px;
		border-radius: 48px;
	}
}
@media screen and (max-width: 900px) {
	.features__panel {
		grid-template-columns: minmax(0, 1fr);
		gap: 32px;
		margin-top: 32px;
		padding: 32px clamp(16px, 4vw, 40px);
		border-radius: 32px;
	}
	.features__visual {
		width: min(240px, 64%);
		margin-inline: auto;
	}
	.features__list {
		gap: 12px;
	}
	.features__item {
		padding: 12px 16px 12px 52px;
		border-radius: 24px;
		font-size: 15px;
		line-height: 1.7;
	}
	.features__item::before {
		left: 10px;
		width: 28px;
		height: 28px;
	}
	.features__item::after {
		left: 18px;
		width: 10px;
		height: 5px;
	}
}

/*==================== STRENGTHS ====================*/
.strengths__list {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 248px)); /* 1列の幅は最大248pxで固定し、広い画面では中央に寄せる */
	justify-content: center;
	gap: 48px 32px;
	margin-top: 24px;
	list-style: none;
}
.strengths__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}
/* イラストはすべて同じ大きさの正方形画像（中の絵は面積がそろうように縮尺を調整済み）。
 * 上下の透明な余白は 4:3 の枠で切り落として、本文・小見出しとの間を詰める */
.strengths__img {
	display: block;
	width: min(224px, 100%);
	aspect-ratio: 4 / 3;
	object-fit: cover;
}
.strengths__title {
	margin-top: 8px;
	color: var(--sec-accent);
	font-size: 20px;
	font-weight: 500;
	line-height: 1.3;
	letter-spacing: 0.02em;
}
.strengths__text {
	margin-top: 12px;
	font-size: 14px;
	line-height: 1.6;
	letter-spacing: 0.02em;
	/* 文節の切れ目で、行の長さがそろうように折り返す（非対応ブラウザは通常の折り返し） */
	word-break: auto-phrase;
	text-wrap: balance;
}

@media screen and (max-width: 900px) {
	.strengths__list {
		grid-template-columns: repeat(2, minmax(0, 280px));
		gap: 40px 16px;
		margin-top: 16px;
	}
	.strengths__img {
		width: min(176px, 90%);
	}
	.strengths__title {
		font-size: clamp(16px, 4.4vw, 20px);
	}
	.strengths__text {
		font-size: 14px;
	}
}

/*==================== MERIT（導入することで得られるメリット） ====================*/
.merit {
	padding-block: 64px;
	background: #edfaff;
	margin: 32px 0;
}
.merit__list {
	--merit-gap: 28px; /* 横の間隔。3＋2 の並びのときの幅計算にも使う */

	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 24px var(--merit-gap);
	margin-top: 32px;
	list-style: none;
}
.merit__item {
	flex: 0 0 176px;
	text-align: center;
}
/* アイコンを入れる白い角丸の箱 */
.merit__icon {
	display: grid;
	place-items: center;
	aspect-ratio: 11 / 9;
	border-radius: 32px;
	background: rgba(255, 255, 255, 0.9);
}
.merit__icon img {
	display: block;
	width: 64%;
}
.merit__title {
	margin-top: 12px;
	color: var(--sec-accent);
	font-size: 18px;
	font-weight: 500;
	line-height: 1.3;
	letter-spacing: 0.05em;
}

/* 5つが1列に入りきらない幅（176px×5＋間隔×4＋左右の余白）では、リストを3つ分の幅に絞って 3＋2 で並べる */
@media screen and (max-width: 1100px) {
	.merit__list {
		max-width: calc(176px * 3 + var(--merit-gap) * 2);
		margin-inline: auto;
	}
	.merit__item {
		flex-basis: calc((100% - var(--merit-gap) * 2) / 3);
	}
}
@media screen and (max-width: 900px) {
	.merit {
		padding-block: 48px;
	}
	.merit__list {
		--merit-gap: 12px;

		margin-top: 24px;
	}
	.merit__icon {
		border-radius: 24px;
	}
	.merit__title {
		font-size: 15px;
		letter-spacing: 0.02em;
	}
}
/* スマートフォンは2列（2＋2＋1、最後の1つは中央に寄せる） */
@media screen and (max-width: 600px) {
	.merit__item {
		flex-basis: calc((100% - var(--merit-gap)) / 2);
	}
}

/*==================== VOICE（お客様の声） ====================*/
.voice {
	--voice-card-w: min(420px, calc(100vw - 80px)); /* カードの幅 */
	--voice-gap: 16px; /* カード同士の間隔 */

	padding-block: 64px;
	background: #edfaff;
}

/* --- スライダー：中央のカードの両側に前後のカードが少し見える。ループは top.js で処理 --- */
.voice__slider {
	position: relative;
	margin-top: 40px;
}
.voice__list {
	position: relative; /* top.js がカードの位置（offsetLeft）を測る基準 */
	display: flex;
	gap: var(--voice-gap);
	margin-inline: calc(var(--sec-gutter) * -1); /* 画面の端までカードを見せる */
	padding-block: 8px 16px; /* カードの影が切れないように */
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	list-style: none;
}
.voice__list::-webkit-scrollbar {
	display: none;
}

/* --- カード --- */
.voice__card {
	display: flex;
	flex-direction: column;
	gap: 20px;
	flex: 0 0 var(--voice-card-w);
	padding: 40px 52px;
	border: 2px solid var(--sec-accent);
	border-radius: 20px;
	background: #fff;
	box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.16);
	box-sizing: border-box;
	scroll-snap-align: center;
}
.voice__profile {
	display: flex;
	align-items: center;
	gap: 12px;
}
.voice__icon {
	flex-shrink: 0;
	width: 80px;
	height: 80px;
	border-radius: 50%;
	object-fit: cover;
}
.voice__name {
	font-size: 20px;
	font-weight: 500;
	line-height: 1.4;
	margin-bottom: 5px;
}
.voice__role {
	font-size: 14px;
	font-weight: 500;
	line-height: 1.4;
}
.voice__text {
	font-size: 16px;
	line-height: 1.6;
	text-align: justify;
	font-weight: 200;
}
/* 成果（例：成約率 10%UP！）。数字部分を大きくする。カードの下端にそろえる */
.voice__result {
	margin-top: auto;
	color: var(--sec-accent);
	font-size: 20px;
	font-weight: 700;
	line-height: 1.2;
}
.voice__result strong {
	font-size: 32px;
	white-space: nowrap; /* 「500件！」などの途中で改行しない */
}

/* --- 前後ボタン：中央のカードの左右の端に重ねる --- */
.voice__nav {
	position: absolute;
	top: 50%;
	width: 48px;
	height: 48px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	/* 円は CSS、く字は画像（円の大きさに合わせて縮む） */
	background: var(--sec-accent) url("../img/icon-slider-chevron.svg") center / auto 62.5% no-repeat;
	cursor: pointer;
	translate: -50% -50%;
}
.voice__nav--prev {
	left: calc(50% - var(--voice-card-w) / 2 - var(--voice-gap) / 2);
	scale: -1 1; /* 右向きの矢印を左向きに反転 */
}
.voice__nav--next {
	left: calc(50% + var(--voice-card-w) / 2 + var(--voice-gap) / 2);
}
.voice__nav:focus-visible {
	outline: 3px solid var(--sec-blue);
	outline-offset: 4px;
}

@media screen and (max-width: 900px) {
	.voice {
		padding-block: 48px;
	}
	.voice__slider {
		margin-top: 24px;
	}
	.voice__card {
		gap: 16px;
		padding: 28px 24px;
	}
	.voice__icon {
		width: 64px;
		height: 64px;
	}
	.voice__name {
		font-size: 20px;
	}
	.voice__text {
		font-size: 15px;
	}
	.voice__result {
		font-size: 20px;
	}
	.voice__result strong {
		font-size: 28px;
	}
	.voice__nav {
		width: 36px;
		height: 36px;
	}
}

/*==================== MANUAL（操作マニュアル＆コラム） ====================*/
/* 背景は VOICE と同じ水色で続けて見せるため、上の余白は VOICE 側の下余白だけにする */
.manual {
	padding-block: 0 64px;
	background: #edfaff;
}
/* 白いカードの中に見出し・記事一覧・ボタンをまとめる */
.manual__card {
	max-width: 1200px;
	margin-inline: auto;
	padding: 60px;
	border-radius: 16px;
	background: #fff;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
	box-sizing: border-box;
}
.manual__list {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 340px));
	justify-content: center;
	gap: 24px 20px;
	margin-top: 32px;
	list-style: none;
}
/* 記事カード全体が1つのリンク（a の直下に p を置かない：旧CSSの「a > p::before」対策） */
.manual__item {
	display: flex;
	flex-direction: column;
	gap: 8px;
	color: var(--sec-text);
}
.manual__thumb img {
	display: block;
	width: 100%;
	height: auto;
	transition: opacity 0.2s;
}
.manual__item:hover .manual__thumb img {
	opacity: 0.8;
}
.manual__item:focus-visible {
	outline: 3px solid var(--sec-blue);
	outline-offset: 4px;
}
.manual__text {
	font-size: 15px;
	font-weight: 400;
	line-height: 1.6;
}
/* 白いカードの中なので、ボタンとの間は共通ルール（56px）より狭くする */
.manual .sec-action {
	margin-top: 60px;
}

@media screen and (max-width: 900px) {
	.manual {
		padding-bottom: 48px;
	}
	.manual__card {
		padding: 32px 16px;
	}
	.manual__list {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 24px 12px;
	}
	.manual__text {
		font-size: 14px;
	}
	.manual .sec-action {
		margin-top: 32px;
	}
}
@media screen and (max-width: 600px) {
	.manual__list {
		grid-template-columns: minmax(0, 1fr);
	}
}

/*==================== FLOW / FAQ（リンクカード） ====================*/
.guide__list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 4px;
	max-width: 1400px;
	margin-inline: auto;
	list-style: none;
}
/* カード全体が1つのリンク。説明文は <div> で包む（旧CSSの「a > p::before」の矢印飾りが付かないように） */
.guide__card {
	display: flex;
	flex-direction: column;
	gap: 24px;
	height: 100%;
	min-height: 280px;
	padding: 40px;
	border-radius: 20px;
	box-sizing: border-box;
	color: #fff;
	transition: translate 0.2s, box-shadow 0.2s;
}
.guide__card--flow {
	background: linear-gradient(143deg, #7177eb 8%, #daacf1 92%);
}
.guide__card--faq {
	background: linear-gradient(143deg, #309dff 8%, #61d2df 92%);
}
.guide__card:hover {
	translate: 0 -4px;
	box-shadow: 0 12px 24px rgba(0, 60, 120, 0.16);
}
.guide__card:focus-visible {
	outline: 3px solid var(--sec-blue);
	outline-offset: 4px;
}
.guide__en {
	font-size: clamp(36px, 3.4vw, 48px);
	font-weight: 400;
	line-height: 1.2;
	letter-spacing: 0.02em;
}
.guide__title {
	margin-top: 4px;
	font-size: clamp(16px, 1.2vw, 18px);
	font-weight: 500;
	line-height: 1.8;
	letter-spacing: 0.05em;
}
.guide__text {
	font-size: 16px;
	font-weight: 200;
	line-height: 1.9;
}

@media screen and (max-width: 900px) {
	.guide__list {
		grid-template-columns: minmax(0, 1fr);
		gap: 4px;
	}
	.guide__card {
		gap: 16px;
		min-height: 0;
		padding: 32px 24px;
	}
	.guide__text {
		font-size: 15px;
	}
}

/*==================== PLAN（料金プラン） ====================*/
.plan__card {
	max-width: 816px;
	margin: 24px auto 0;
	overflow: hidden;
	border: 2px solid var(--sec-blue);
	border-radius: 20px;
	box-sizing: border-box;
}
.plan__name {
	padding: 16px;
	background: var(--sec-blue);
	color: #fff;
	font-size: 24px;
	font-weight: 700;
	line-height: 1.6;
	letter-spacing: 0.02em;
	text-align: center;
}
.plan__body {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 32px 24px 40px;
	text-align: center;
}
.plan__price {
	font-size: 24px;
	font-weight: 500;
	line-height: 1;
}
.plan__price strong {
	margin-inline: 2px;
	font-size: 60px;
	font-weight: 700;
}
.plan__body .btn-cta {
	margin-top: 28px;
}
.plan__note {
	margin-top: 12px;
	font-size: 16px;
	font-weight: 500;
	line-height: 1.9;
}
/* 枠付きのカードの下なので、ボタンとの間は共通ルール（56px）より狭くする */
.plan .sec-action {
	margin-top: 32px;
}

@media screen and (max-width: 900px) {
	.plan__card {
		margin-top: 16px;
		border-radius: 16px;
	}
	.plan__name {
		padding: 12px;
		font-size: 20px;
	}
	.plan__body {
		padding: 24px 16px 32px;
	}
	.plan__price {
		font-size: 18px;
	}
	.plan__price strong {
		font-size: 44px;
	}
	.plan__body .btn-cta {
		min-height: 60px;
		margin-top: 24px;
	}
	.plan__note {
		font-size: 14px;
	}
}

/*==================== TRY（無料トライアルへの誘導・フッター直前） ====================*/
/* 横いっぱいの青い帯（.try__band）。ノートパソコンの画像を帯の上下に同じだけはみ出させ、
 * はみ出した画像の端から前のセクション・フッターまでを 24px あける。
 * はみ出し＋24px は外側の section の padding で確保する（margin だと main の外に出て、
 * main の overflow: clip で画像が切れてしまうため） */
.try {
	--try-img-w: 326px;
	--try-img-h: calc(var(--try-img-w) * 661 / 652); /* 画像の縦横比から計算 */
	--try-overhang: 40px; /* 帯からはみ出す量（上下それぞれ） */

	padding: calc(var(--try-overhang) + 24px) 0;
}
.try__band {
	padding-inline: var(--sec-gutter);
	background: linear-gradient(162deg, #309dff 8%, #61d2df 92%);
	color: #fff;
}
.try__inner {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 32px;
	max-width: 900px;
	/* 帯の高さ＝画像の高さ − はみ出し×2（文字が多くて高くなる場合は padding の分だけ広がる） */
	min-height: calc(var(--try-img-h) - var(--try-overhang) * 2);
	margin-inline: auto;
	padding-block: 24px;
	box-sizing: border-box;
}
.try__visual {
	flex-shrink: 0;
	width: var(--try-img-w);
	height: auto;
	margin-block: calc(var(--try-overhang) * -1 - 24px); /* 帯の padding のぶんも含めてはみ出させる */
}
.try__body {
	display: flex;
	flex-direction: column;
	align-items: center;
	flex: 1;
	text-align: center;
}
/* 文字が折り返して帯が高くなると画像のはみ出しが減るため、幅が狭いときは少し縮めて1行に収める */
.try__lead {
	font-size: clamp(16px, 1.8vw, 20px);
	font-weight: 700;
	line-height: 1.9;
	letter-spacing: 0.02em;
}
.try__title {
	font-size: clamp(24px, 2.7vw, 30px);
	font-weight: 700;
	line-height: 1.9;
	letter-spacing: 0.02em;
}
.try__body .btn-cta {
	margin-top: 12px;
}

/* タブレット・スマートフォン：パソコンの画像は出さず、文字とボタンだけの帯にする。
 * 帯の外側の余白は PC と同じ（はみ出し＋24px）なので、前のセクション・フッターとは離れる */
@media screen and (max-width: 900px) {
	.try__inner {
		flex-direction: column;
		min-height: 0;
		padding-block: 40px;
	}
	.try__visual {
		display: none;
	}
	.try__lead {
		font-size: 16px;
	}
	.try__title {
		font-size: 24px;
		line-height: 1.6;
	}
}

/*==================== フッター固定CTA（トップページのみ） ====================*/
/* FVが見えている間は画面の下に隠す（top.js が .is-fv-visible を付け外しする）
 * CMSのJSが .fixbtnwrap の transform を直接書き換えるため、別プロパティの translate で動かす */
#fixbtn.is-fv-visible .fixbtnwrap {
	translate: 0 100%;
	visibility: hidden;
}