/* =========================================================
   Front page (top page redesign) — custom styles
   ========================================================= */

/* ===================== スクロールフェードイン ===================== */
/* JS有効時(.fp-anim)のみ初期非表示。reduced-motion時は適用しない */
@media (prefers-reduced-motion: no-preference) {
	.fp-anim .fp-hero__inner,
	.fp-anim .fp-section > .fp-inner {
		opacity: 0;
		transform: translateY(28px);
		transition: opacity 0.8s ease, transform 0.8s ease;
		will-change: opacity, transform;
	}
	.fp-anim .fp-hero__inner.is-revealed,
	.fp-anim .fp-section > .fp-inner.is-revealed {
		opacity: 1;
		transform: none;
	}
}

/* フロントページ本体（各セクションはbody幅いっぱいの全幅、中身は.fp-innerで中央寄せ） */
.front-page {
	margin: 0;
	padding: 0;
}

/* ===================== Hero / FV ===================== */
.fp-hero {
	position: relative;
	min-height: 640px;
	display: flex;
	align-items: flex-start; /* 中身を上寄せ（キャッチ位置をヘッダー基準で固定） */
	background-image: var(--fp-hero-pc); /* PC背景。SPは@mediaで --fp-hero-sp に切替 */
	background-size: cover;
	background-position: center right;
	background-repeat: no-repeat;
	background-color: #e9eef3; /* 画像未設定時のフォールバック */
	overflow: hidden;
}

/* 左側を白く抜いて見出しの可読性を確保 */
.fp-hero__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(
		90deg,
		rgba(255, 255, 255, 0.92) 0%,
		rgba(255, 255, 255, 0.75) 28%,
		rgba(255, 255, 255, 0.25) 50%,
		rgba(255, 255, 255, 0) 70%
	);
	pointer-events: none;
}

.fp-hero__inner {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
	/* 上=ヘッダー約88px＋余白88px／下=ボタン下の余白128px */
	padding: 176px 40px 128px;
	box-sizing: border-box;
}

.fp-hero__title {
	margin: 0 0 48px;
	color: #075A8D;
	font-family: "Noto Sans JP", sans-serif;
	font-size: 56px;
	font-style: normal;
	font-weight: 700;
	line-height: 67px; /* 119.643% */
	letter-spacing: -0.84px;
}

/* PC: 読点を表示・SP用改行は無効 */
.fp-hero__br-sp {
	display: none;
}

.fp-hero__accent {
	color: inherit; /* 見出し色(#075A8D)を継承 */
}

.fp-hero__lead {
	margin: 0 0 112px;
	color: #4a5a6a;
	font-size: 16px;
	line-height: 1.9;
}

/* ===================== 共通: CTAボタン（青系グラデのピル型） ===================== */
.fp-btn {
	display: inline-flex;
	align-items: center;
	gap: 18px;
	padding: 14px 16px 14px 30px;
	border-radius: 999px;
	background: linear-gradient(88deg, #0075BC 0.32%, #7CCDF1 99.68%);
	box-shadow: 0 8px 18px 0 rgba(37, 99, 235, 0.18);
	color: #fff;
	text-decoration: none;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.fp-btn:hover {
	transform: translateY(-2px);
	box-shadow: 0 12px 24px 0 rgba(37, 99, 235, 0.28);
	color: #fff;
}

.fp-btn__label {
	font-size: 16px;
	font-weight: 600;
	letter-spacing: 0.02em;
}

.fp-btn__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 12px;
	background: #FFF;
	color: #0075BC; /* 中の三角の色（白背景に映える青） */
}

.fp-btn__icon svg {
	width: 22px;
	height: 22px;
	flex-shrink: 0;
	aspect-ratio: 1 / 1;
	fill: #0075BC;
}

/* ===================== Responsive ===================== */
@media (max-width: 991px) {
	.fp-hero {
		min-height: 520px;
		background-position: center;
	}
	.fp-hero__overlay {
		background: linear-gradient(
			180deg,
			rgba(255, 255, 255, 0.9) 0%,
			rgba(255, 255, 255, 0.7) 45%,
			rgba(255, 255, 255, 0.4) 100%
		);
	}
	.fp-hero__title {
		font-size: 34px;
	}
}

@media (max-width: 600px) {
	.fp-hero {
		/* SP専用FV（縦長）：sp-fv.webp に切替 */
		background-image: var(--fp-hero-sp);
		background-position: center bottom; /* 画像の一番下を見せる */
		min-height: 500px; /* svh非対応ブラウザ向けフォールバック */
		min-height: 80svh;
	}
	.fp-hero__inner {
		/* SP: 固定ヘッダー(約70px)＋余白／テキストを下げるため上余白を増やす */
		padding: 180px 22px 72px;
	}
	.fp-hero__title {
		font-size: 36px;
		line-height: 1.35;
		margin-bottom: 20px;
	}
	.fp-hero__lead {
		font-size: 14px;
		margin-bottom: 48px;
	}
	/* リード文の改行のみSPで解除（タイトルの「AIとITで」改行は残す） */
	.fp-hero__lead br {
		display: none;
	}
	/* SP: 「業務を」の読点を非表示にしてそこで改行 */
	.fp-hero__comma {
		display: none;
	}
	.fp-hero__br-sp {
		display: inline;
	}
	.fp-btn__label {
		font-size: 14px;
	}
	/* SP: Problemは出現アニメを使わず最初から表示（FVが縦長で下にあり白抜けして見えるため）。
	   基準の .fp-anim .fp-section > .fp-inner（詳細度3）より1つ高い詳細度で常時表示に上書き */
	.fp-anim .fp-section.fp-problem > .fp-inner {
		opacity: 1;
		transform: none;
	}
}

/* ===================== 共通: セクション / 見出し ===================== */
.fp-section {
	padding: 90px 24px;
}

.fp-inner {
	max-width: 1200px;
	margin: 0 auto;
}

/* 見出し（.fp-head*）は style.css に共通化済み */

/* ===================== Problem / お悩み ===================== */
.fp-problem {
	background: #F7FAFC;
}

.fp-problem__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 18px 24px;
}

.fp-problem__item {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 18px 24px;
	background: #FFF;
	border: 1px solid #D0DBE7;
	border-radius: 14px;
	box-shadow: 0 4px 14px rgba(31, 95, 158, 0.06);
	color: #2a3a48;
	font-size: 15px;
	line-height: 1.6;
}

/* 左の青いチェックアイコン */
.fp-problem__item::before {
	content: "";
	flex: 0 0 auto;
	width: 22px;
	height: 22px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='12' fill='%23075A8D'/%3E%3Cpath d='M7 12.5l3 3 7-7' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-size: contain;
	background-repeat: no-repeat;
}

@media (max-width: 768px) {
	.fp-section {
		padding: 60px 20px;
	}
	.fp-problem__list {
		grid-template-columns: 1fr;
		gap: 12px;
	}
	.fp-problem__item {
		font-size: 14px;
		padding: 16px 18px;
	}
}

/* ===================== Solution / 解決策 ===================== */
.fp-solution__inner {
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: center;
	gap: 56px;
}

.fp-solution__catch {
	margin: 18px 0 22px;
	color: #1b2b3a;
	font-size: 18px;
	font-weight: 700;
	letter-spacing: 0.02em;
}

.fp-solution__lead {
	margin: 0 0 34px;
	color: #4B5563;
	font-family: "Noto Sans JP", sans-serif;
	font-size: 16px;
	font-style: normal;
	font-weight: 400;
	line-height: 31px; /* 193.75% */
}

.fp-solution__media img {
	display: block;
	width: 100%;
	height: auto;
	object-fit: cover;
	object-position: 50% 50%;
	border-radius: 24px;
	box-shadow: 0 3px 27px 0 rgba(0, 0, 0, 0.19);
}

@media (max-width: 768px) {
	.fp-solution__inner {
		grid-template-columns: 1fr;
		gap: 32px;
	}
	.fp-solution__media {
		order: -1; /* SPでは画像を上に */
	}
	.fp-solution__catch {
		font-size: 16px;
	}
	/* CTAボタンをカラム幅いっぱい＆中央寄せに */
	.fp-solution__body .fp-btn {
		display: flex;
		width: 100%;
		justify-content: center;
		box-sizing: border-box;
	}
}

/* ===================== Case / 効率化できる業務例 ===================== */
.fp-case {
	background: #F7FAFC;
}

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

.fp-case__item {
	background: #FFF;
	border: 1px solid #E6ECF2;
	border-radius: 20px;
	box-shadow: 0 8px 24px 0 rgba(23, 32, 51, 0.06);
	padding: 28px 26px 30px;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.fp-case__item:hover {
	transform: translateY(-3px);
	box-shadow: 0 12px 30px 0 rgba(23, 32, 51, 0.12);
}

.fp-case__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: 16px;
	background: #E5F2FA;
	margin-bottom: 18px;
}

.fp-case__title {
	margin: 0 0 12px;
	color: #1b2b3a;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.5;
}

.fp-case__desc {
	margin: 0;
	color: #6a7b8a;
	font-size: 13px;
	line-height: 1.8;
}

@media (max-width: 991px) {
	.fp-case__list {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 600px) {
	.fp-case__list {
		grid-template-columns: 1fr;
		gap: 16px;
	}
}

/* ===================== Contact / 無料診断CTA ===================== */
.fp-contact__card {
	display: grid;
	grid-template-columns: 1.1fr 0.9fr;
	align-items: center;
	gap: 48px;
	padding: 48px 52px;
	border-radius: 24px;
	border: 1px solid #6C92E4;
	background: #F0F6FF;
	box-shadow: 0 12px 32px 0 rgba(136, 136, 136, 0.08);
}

.fp-contact__title {
	margin: 0 0 32px;
	color: #1b2b3a;
	font-size: 22px;
	font-weight: 700;
	line-height: 1.6;
}

.fp-contact__lead {
	margin: 0 0 32px;
	color: #51616f;
	font-size: 13px;
	line-height: 2;
}

.fp-contact__media {
	align-self: center;
	aspect-ratio: 3 / 2; /* Solution写真(4096×2731≒3:2)と同じ比率 */
	border-radius: 24px; /* CTAボックスと同じ角丸 */
	box-shadow: 0 8px 24px 0 rgba(23, 32, 51, 0.06); /* Caseボックスと同じ影 */
	overflow: hidden;
}

/* 先方支給画像のプレースホルダ（画像配置後は img に置き換え可） */
.fp-contact__media-placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 200px;
	height: 100%;
	border-radius: 10px;
	background: #cfd6dc;
	color: #5d6b77;
	font-size: 15px;
}

.fp-contact__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover; /* 3:2の枠に合わせてトリミング */
	object-position: 50% 50%;
	border-radius: 24px;
}

@media (max-width: 768px) {
	.fp-contact__card {
		grid-template-columns: 1fr;
		gap: 28px;
		padding: 32px 24px;
	}
	.fp-contact__title {
		font-size: 19px;
	}
	.fp-contact__media {
		order: -1;
	}
	/* CTAボタン：全幅＆中央、ラベルは折り返さず字サイズを画面幅に連動 */
	.fp-contact__body .fp-btn {
		display: flex;
		width: 100%;
		justify-content: center;
		padding: 14px 16px;
		box-sizing: border-box;
	}
	.fp-contact__body .fp-btn__label {
		white-space: nowrap;
		font-size: clamp(13px, 3.6vw, 16px);
	}
}

/* ===================== Service / サービス概要 ===================== */
.fp-service {
	background: #F1F7FF;
}

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

.fp-service__item {
	background: #FFF;
	border: 1px solid #E6ECF2;
	border-radius: 20px;
	box-shadow: 0 8px 24px 0 rgba(23, 32, 51, 0.06);
	padding: 34px 30px 36px;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.fp-service__item:hover {
	transform: translateY(-3px);
	box-shadow: 0 12px 26px rgba(31, 95, 158, 0.13);
}

.fp-service__en {
	margin: 0 0 16px;
	color: #0075BC;
	font-family: "Montserrat", sans-serif;
	font-size: 36px;
	font-style: normal;
	font-weight: 700;
	line-height: 100%; /* 36px */
	letter-spacing: 1.08px;
	text-transform: capitalize;
	white-space: nowrap; /* 「IT Consulting」を1行で固定 */
}

.fp-service__ja {
	margin: 0 0 32px;
	color: #172033;
	font-family: "Noto Sans JP", sans-serif;
	font-size: 21px;
	font-style: normal;
	font-weight: 700;
	line-height: 30px; /* 142.857% */
}

.fp-service__desc {
	margin: 0;
	color: #4B5563;
	font-family: "Noto Sans JP", sans-serif;
	font-size: 15px;
	font-style: normal;
	font-weight: 400;
	line-height: 26px; /* 173.333% */
}

@media (max-width: 991px) {
	.fp-service__list {
		grid-template-columns: repeat(2, 1fr);
	}
	/* 狭い画面では英語タイトルを折り返し可にして、カードのはみ出しを防ぐ */
	.fp-service__en {
		white-space: normal;
		overflow-wrap: anywhere;
		word-break: break-word;
	}
}

@media (max-width: 600px) {
	.fp-service__list {
		grid-template-columns: 1fr;
		gap: 16px;
	}
	.fp-service__item {
		padding: 26px 20px 28px;
	}
	/* 「AI×Consulting」はスペースが無く折り返せないため、SPは縮小＋必要時に強制改行 */
	.fp-service__en {
		font-size: 28px;
		letter-spacing: 0.5px;
		overflow-wrap: anywhere;
		word-break: break-word;
	}
}

/* ===================== Flow / 導入までの流れ ===================== */
.fp-flow__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 40px 44px; /* 横gapは矢印を置くスペースを兼ねる */
}

.fp-flow__item {
	position: relative;
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 22px 22px;
	background: #FFF;
	border: 1px solid #A0B7CF;
	border-radius: 18px;
}

/* 背景の接続ライン */
.fp-flow__wrap {
	position: relative;
}

.fp-flow__bg {
	position: absolute;
	top: 55%;
	left: 50%;
	transform: translate(-50%, calc(-50% - 15px));
	width: 75.77%; /* 旧833.5px÷コンテナ1100px。%にしてコンテナ幅(1200px化)に追従 */
	height: 179.5px;
	z-index: 0;
	pointer-events: none;
}

.fp-flow__list {
	position: relative;
	z-index: 1;
}

.fp-flow__no {
	flex: 0 0 auto;
	color: #0075BC;
	font-family: "Montserrat", sans-serif;
	font-size: 48px;
	font-style: normal;
	font-weight: 700;
	line-height: 100%; /* 48px */
	text-transform: capitalize;
}

.fp-flow__title {
	margin: 0 0 8px;
	color: #172033;
	font-family: "Noto Sans JP", sans-serif;
	font-size: 18px;
	font-style: normal;
	font-weight: 700;
	line-height: 27px; /* 150% */
}

.fp-flow__desc {
	margin: 0;
	color: #4B5563;
	font-family: "Noto Sans JP", sans-serif;
	font-size: 14px;
	font-style: normal;
	font-weight: 400;
	line-height: 23px; /* 164.286% */
}

@media (max-width: 991px) {
	.fp-flow__list {
		grid-template-columns: repeat(2, 1fr);
	}
	/* 3列前提の背景接続ラインは2列以下では合わないため非表示（横スクロールも防止） */
	.fp-flow__bg {
		display: none;
	}
}

@media (max-width: 600px) {
	.fp-flow__list {
		grid-template-columns: 1fr;
		gap: 14px;
	}
}

/* ===================== Reason / 選ばれる理由 ===================== */
.fp-reason {
	background: #F7FAFC;
}

.fp-reason__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.fp-reason__item {
	display: flex;
	align-items: center;
	gap: 28px;
	padding: 26px 34px;
	background: #FFF;
	border: 1px solid #A8BDD2;
	border-radius: 20px;
	box-shadow: 0 8px 24px 0 rgba(23, 32, 51, 0.06);
}

.fp-reason__no {
	flex: 0 0 auto;
	color: #0075BC;
	font-family: "Montserrat", sans-serif;
	font-size: 56px;
	font-style: normal;
	font-weight: 700;
	line-height: 100%; /* 56px */
}

.fp-reason__title {
	flex: 0 0 240px;
	margin: 0;
	color: #172033;
	font-family: "Noto Sans JP", sans-serif;
	font-size: 21px;
	font-style: normal;
	font-weight: 700;
	line-height: 30px; /* 142.857% */
}

.fp-reason__desc {
	flex: 1;
	margin: 0;
	color: #4B5563;
	font-family: "Noto Sans JP", sans-serif;
	font-size: 15px;
	font-style: normal;
	font-weight: 400;
	line-height: 26px; /* 173.333% */
}

@media (max-width: 768px) {
	.fp-reason__item {
		flex-wrap: wrap;
		gap: 10px 18px;
		padding: 22px 22px;
	}
	.fp-reason__title {
		flex: 1 1 auto;
	}
	.fp-reason__desc {
		flex: 1 1 100%;
	}
}

/* ===================== Case(実績) / 実績・事例 ===================== */
.fp-works {
	background: #FFF;
}

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

.fp-works__item {
	background: #FFF;
	border: 1px solid #D7E0EA;
	border-radius: 20px;
	box-shadow: 0 8px 24px 0 rgba(23, 32, 51, 0.06);
	overflow: hidden;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.fp-works__item:hover {
	transform: translateY(-3px);
	box-shadow: 0 12px 26px rgba(31, 95, 158, 0.13);
}

.fp-works__media {
	aspect-ratio: 16 / 10;
	background: #cfd6dc;
}

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

.fp-works__title {
	margin: 18px 22px 12px;
	color: #4B5563;
	font-family: "Noto Sans JP", sans-serif;
	font-size: 18px;
	font-style: normal;
	font-weight: 700;
	line-height: 27px;
}

.fp-works__desc {
	margin: 0 22px 24px;
	color: #4B5563;
	font-family: "Noto Sans JP", sans-serif;
	font-size: 15px;
	font-style: normal;
	font-weight: 400;
	line-height: 26px; /* 173.333% */
}

@media (max-width: 991px) {
	.fp-works__list {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 600px) {
	.fp-works__list {
		grid-template-columns: 1fr;
		gap: 16px;
	}
}

/* ===================== Q&A / よくある質問 ===================== */
.fp-qa {
	background: linear-gradient(180deg, #eef4fb 0%, #f6f9fc 100%);
}

.fp-qa__list {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.fp-qa__item {
	background: #FFF;
	border: 1px solid #B9C9DA;
	border-radius: 14px;
}

.fp-qa__q {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 20px 24px;
	cursor: pointer;
	list-style: none;
}

.fp-qa__q::-webkit-details-marker {
	display: none;
}

.fp-qa__mark {
	flex: 0 0 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 40px;
	height: 40px;
	aspect-ratio: 1 / 1;
	border-radius: 32px;
	background: #0075BC;
	color: #fff;
	font-size: 15px;
	font-weight: 700;
}

.fp-qa__qtext {
	flex: 1;
	color: #4B5563;
	font-family: "Noto Sans JP", sans-serif;
	font-size: 17px;
	font-style: normal;
	font-weight: 500;
	line-height: 26px; /* 152.941% */
}

/* 開閉トグル（＋ ⇔ −） */
.fp-qa__toggle {
	flex: 0 0 auto;
	position: relative;
	width: 16px;
	height: 16px;
}
.fp-qa__toggle::before,
.fp-qa__toggle::after {
	content: "";
	position: absolute;
	background: #1f6cb4;
	transition: transform 0.2s ease, opacity 0.2s ease;
}
.fp-qa__toggle::before { /* 横棒 */
	top: 50%;
	left: 0;
	width: 100%;
	height: 2px;
	transform: translateY(-50%);
}
.fp-qa__toggle::after { /* 縦棒 */
	left: 50%;
	top: 0;
	width: 2px;
	height: 100%;
	transform: translateX(-50%);
}
.fp-qa__item[open] .fp-qa__toggle::after {
	opacity: 0; /* open時は縦棒を消して「−」に */
}

.fp-qa__a {
	padding: 0 24px 22px 64px;
	color: #51616f;
	font-family: "Noto Sans JP", sans-serif;
	font-size: 15px;
	line-height: 1.9;
}

@media (max-width: 600px) {
	.fp-qa__a {
		padding-left: 24px;
	}
}

/* ===================== Contact / お問い合わせフォーム ===================== */
/* アンカー(#contact)到達時に固定ヘッダー分ずらす */
.fp-contactform {
	scroll-margin-top: 100px;
}

.fp-contactform__inner {
	display: grid;
	grid-template-columns: 0.85fr 1.15fr;
	gap: 48px;
	align-items: start;
}

.fp-contactform__catch {
	margin: 16px 0 18px;
	color: #1b2b3a;
	font-size: 18px;
	font-weight: 700;
}

.fp-contactform__lead {
	margin: 0;
	color: #4B5563;
	font-family: "Noto Sans JP", sans-serif;
	font-size: 16px;
	font-style: normal;
	font-weight: 400;
	line-height: 29px; /* 181.25% */
}

.fp-contactform__panel {
	border-radius: 20px;
	border: 1px solid #E6ECF2;
	background: #EEF3F7;
	box-shadow: 0 8px 24px 0 rgba(23, 32, 51, 0.06);
	padding: 36px 38px;
}

/* フォーム（仮HTML / CF7 共通で効くよう汎用指定も併記） */
.fp-form__row {
	margin-bottom: 18px;
}

/* CF7がラベルと入力欄の間に自動挿入する<br>を除去（余白はlabelのmargin:8pxで制御） */
.fp-form__row br {
	display: none;
}

.fp-form__label {
	display: block;
	margin-bottom: 8px;
	color: #3a4a58;
	font-size: 13px;
	font-weight: 700;
}

/* The7の #page input[...] に勝つよう #page を付ける */
#page .fp-contactform__panel input[type="text"],
#page .fp-contactform__panel input[type="email"],
#page .fp-contactform__panel input[type="tel"],
#page .fp-contactform__panel textarea,
.fp-form__input {
	width: 100%;
	margin: 0; /* The7のinput margin-bottom:10px を打ち消し（余白は行の18pxで制御） */
	border: 1px solid #D8E0EA;
	border-radius: 10px;
	background: #FFF;
	color: #1b2b3a;
	font-size: 14px;
	box-sizing: border-box;
}

/* 1行入力は高さ54px固定 */
#page .fp-contactform__panel input[type="text"],
#page .fp-contactform__panel input[type="email"],
#page .fp-contactform__panel input[type="tel"],
.fp-form__input {
	height: 54px;
	padding: 0 16px;
	line-height: normal;
}

/* テキストエリア（ご相談内容）は126pxを下限に、内容に応じて自動で伸びる（JSで制御） */
#page .fp-contactform__panel textarea,
.fp-form__textarea {
	min-height: 126px;
	padding: 14px 16px;
	overflow: hidden;
	resize: none;
}

.fp-form__input:focus,
.fp-contactform__panel input:focus,
.fp-contactform__panel textarea:focus {
	outline: none;
	border-color: #1f6cb4;
	box-shadow: 0 0 0 3px rgba(31, 108, 180, 0.12);
}

.fp-form__textarea {
	resize: vertical;
}

.fp-form__check {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 6px 0 24px;
	color: #51616f;
	font-size: 13px;
}

/* The7の .wpcf7-submit 既定色に勝つよう詳細度を上げる（#page で hover も上書き） */
#page .fp-contactform__panel .fp-form__submit {
	display: block;
	width: 100%;
	padding: 15px;
	border: none;
	border-radius: 999px;
	background: linear-gradient(88deg, #0075BC 0.32%, #7CCDF1 99.68%);
	box-shadow: 0 8px 18px 0 rgba(37, 99, 235, 0.18);
	color: #FFF;
	font-family: "Noto Sans JP", sans-serif;
	font-size: 16px;
	font-style: normal;
	font-weight: 700;
	line-height: 26px; /* 162.5% */
	cursor: pointer;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

#page .fp-contactform__panel .fp-form__submit:hover {
	background: linear-gradient(88deg, #0075BC 0.32%, #7CCDF1 99.68%);
	transform: translateY(-2px);
	box-shadow: 0 12px 24px 0 rgba(37, 99, 235, 0.28);
}

/* ---- Contact Form 7 出力の調整（CF7に切り替えた場合） ---- */
/* CF7はフィールドを <p> で囲むので余白をリセット */
.fp-contactform__panel .wpcf7 p {
	margin: 0 0 18px;
}
/* 必須マーク */
.fp-contactform__panel .fp-form__label .req {
	color: #e2483d;
	margin-left: 4px;
}
/* 同意チェック（acceptance） */
.fp-contactform__panel .wpcf7-acceptance {
	display: block;
	margin: 6px 0 24px;
	color: #51616f;
	font-size: 13px;
}
.fp-contactform__panel .wpcf7-acceptance .wpcf7-list-item {
	margin: 0;
}
.fp-contactform__panel .wpcf7-acceptance label {
	display: flex;
	align-items: center;
	gap: 10px;
	cursor: pointer;
}
/* チェックボックス本体（カスタム見た目） */
.fp-contactform__panel .wpcf7-acceptance input[type="checkbox"] {
	appearance: none;
	-webkit-appearance: none;
	flex-shrink: 0;
	width: 28px;
	height: 28px;
	margin: 0;
	border-radius: 8px;
	border: 1px solid #D1DAE6;
	background: #FFF;
	cursor: pointer;
}
.fp-contactform__panel .wpcf7-acceptance input[type="checkbox"]:checked {
	border-color: #0075BC;
	background: #0075BC url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4 4 10-10' fill='none' stroke='%23fff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 18px 18px no-repeat;
}
/* 「同意する」テキスト */
.fp-contactform__panel .wpcf7-list-item-label {
	color: #172033;
	font-family: "Noto Sans JP", sans-serif;
	font-size: 14px;
	font-style: normal;
	font-weight: 500;
	line-height: 22px; /* 157.143% */
}
/* 送信ボタン（[submit class:fp-form__submit] で .fp-form__submit が当たる） */
.fp-contactform__panel .wpcf7-spinner {
	margin: 12px auto 0;
	display: block;
}
/* バリデーションエラー文言 */
.fp-contactform__panel .wpcf7-not-valid-tip {
	color: #e2483d;
	font-size: 12px;
	margin-top: 6px;
}
.fp-contactform__panel .wpcf7-form-control.wpcf7-not-valid {
	border-color: #e2483d;
}
/* 送信完了/エラーの応答メッセージ */
.fp-contactform__panel .wpcf7-response-output {
	margin: 18px 0 0;
	padding: 12px 14px;
	border-radius: 8px;
	font-size: 13px;
}

@media (max-width: 768px) {
	.fp-contactform__inner {
		grid-template-columns: 1fr;
		gap: 28px;
	}
	.fp-contactform__panel {
		padding: 26px 22px;
	}
}