/**
 * TOPページ（PDF イラスト別パターン 構成）
 * 後からスクショで細かく調整する前提のざっくりレイアウト
 */

/* ========== 共通セクション見出し（指定された変数・指定値で統一） ========== */
.fp-section-title {
	text-align: center;
	color: var(--color-text-title);
	font-size: 2rem; /* 28px */
	font-weight: 700;
	line-height: 1.5;
	margin-top: 0;
	margin-bottom: 50px;
}

.fp-section-title__en {
	display: block;
	color: var(--color-main-blue);
	font-weight: 900;
	letter-spacing: 0.05em;
	margin-bottom: 8px;
	font-family: "Montserrat", "Noto Sans JP", sans-serif;
	font-size: 1.25rem;
	text-align: center;
}

.fp-section-title__sub {
	display: block;
	font-size: 1.5rem;
	font-weight: 400;
	margin: 0 auto 50px;
	text-align: center;
}

/* ========== ヒーロー ========== */
.fp-hero {
	position: relative;
	min-height: 480px;
	padding: 6rem 6rem 6rem 10rem;
	overflow: hidden;
}

.fp-hero__bg {
	position: absolute;
	inset: 0;
	background-image: url("../images/hero/hero_fv_bk.jpg");
	background-size: cover;
	background-position: center top;
	background-repeat: no-repeat;
}

.fp-hero__inner {
	position: relative;
	z-index: 1;
	max-width: 660px;
	margin: 0 auto 0 0;
	text-align: center;
}

.fp-hero__h1 {
	margin: 0 0 1rem;
	font-size: 1.6rem;
	font-weight: bold;
	line-height: 1.5;
	color: var(--color-main-blue);
	text-align: center;
	/* h1 エリアの背景（タイトル下の装飾） */
	background: url("../images/hero/hero_main_titlep-bk.svg") no-repeat center bottom;
	background-size: 100% auto;
	padding-bottom: 0.5em;
}

.fp-hero__h1-inner {
	display: inline-block;
	padding: 0.25em 0 0.7em 1px;
	/* 内側でも同じ背景を指定（テキスト幅に合わせて表示） */
	background: url("../images/hero/hero_main_title-bk.svg") no-repeat center bottom;
	background-size: 100% auto;
	font-feature-settings: "palt";
}

/* PC：キャッチコピー hero_sub_title.svg（中央揃え・画像の幅で中央に配置） */
.fp-hero__catchcopy--pc {
	display: flex;
	justify-content: center;
	margin-bottom: 1rem;
}

.fp-hero__catchcopy--pc .fp-hero__catchcopy-img {
	width: auto;
	max-width: 100%;
	height: auto;
	display: block;
}

/* SP：キャッチコピー・キャッチコピー2 は SP 時のみ表示 */
.fp-hero__catchcopy--sp {
	display: none;
}

.fp-hero__catchcopy2 {
	display: none;
}

.fp-hero__catchcopy2-img {
	max-width: 100%;
	height: auto;
	display: block;
}

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

.fp-hero__feature {
	text-align: center;
	padding: 1rem;
}

.fp-hero__feature-head {
	margin: 0 0 0.25rem;
	font-size: 0.875rem;
	color: var(--color-text-body);
}

.fp-hero__feature-value {
	margin: 0;
	font-size: 1.25rem;
	font-weight: bold;
	color: var(--color-text-title);
}

.fp-hero__feature-note {
	margin: 0.25rem 0 0;
	font-size: 0.75rem;
	color: var(--color-text-body);
}

/* SP：背景は .fp-hero に、キャッチ2はFV一番下に配置 */
@media (max-width: 768px) {
	.fp-hero {
		display: flex;
		flex-direction: column;
		padding: 25px 1rem 10px;
		/* SEでも潰れないように最低高さ死守のため */
		height: auto;
		min-height: max(calc(100vh - 103px), 650px); 
		background-color: var(--color-bg-hero-sp);
		background-image: url("../images/hero/hero_fv_bk-sp.png");
		background-size: cover;
		background-position: center 63%; 
		background-repeat: no-repeat;
	}

	.fp-hero__bg {
		display: none;
	}

	.fp-hero__inner {
		flex: 1;
		display: flex;
		flex-direction: column;
		margin-left: auto;
		width: 100%; /* 幅が縮まないように追加 */
	}

	.fp-hero__catchcopy--sp {
		flex: 1;
		display: flex;
		flex-direction: column;
		position: relative;
		z-index: 1;
	}

	.fp-hero__h1 {
		font-size: 1rem;
		margin-bottom: .5rem;
		text-align: center;
	}

	/* PC用キャッチコピーを非表示 */
	.fp-hero__catchcopy--pc {
		display: none;
	}

	/* --- キャッチ1（hero_sub_title-sp.svg） --- */
	.fp-hero__catchcopy-img {
		width: 100%;
		max-width: 320px;
		height: auto;
		margin: 0 auto;
		display: block;
	}

	/* --- キャッチ2（hero_sub_title2-sp.svg）FV一番下に配置 --- */
	.fp-hero__catchcopy2 {
		margin-top: auto; /* Flexboxの魔法で一番下に押し付け */
		display: block;
		width: 100%;
		padding: 1rem 0 0;
		box-sizing: border-box;
		text-align: center;
	}

	.fp-hero__catchcopy2-img {
		width: 100%;
		max-width: 320px;
		height: auto;
		margin: 0 auto;
		display: block;
	}
	
	/* もし3大特徴がヒーロー内にある場合の調整 */
	.fp-hero__features {
		grid-template-columns: 1fr;
		gap: 15px;
	}
}
/* ========== PROBLEM ========== */
.fp-problem {
	background-color: var(--color-bg-light);
	padding: 80px 20px;
}

.fp-problem__inner {
	max-width: 1080px;
	margin: 0 auto;
}

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

.fp-problem__item {
	background-color: #ffffff;
	border-left: 8px solid var(--color-main-blue);
	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}

.fp-problem__item-inner {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 30px 40px;
	height: 100%;
	box-sizing: border-box;
}

.fp-problem__item-text {
	font-size: 1.125rem;
	color: var(--color-text-body);
	font-weight: 700;
	line-height: 1.1;
	margin: 0;
}

.fp-problem__item-highlight {
	display: block;
	color: var(--color-main-blue);
	font-size: 1.25rem; /* 20px */
	margin-top: 4px;
}

.fp-problem__item-icon {
	width: 150px;
	height: auto;
	flex-shrink: 0;
	margin-left: 20px;
}

.fp-problem__solve {
	text-align: center;
	color: var(--color-text-title);
	font-size: 1.5rem; /* 24px */
	font-weight: 700;
	line-height: 1.5;
	margin-top: 60px;
}

@media screen and (max-width: 768px) {
	.fp-section-title__en {
		font-size: 1rem;
	}

	.fp-problem {
		padding: 60px 20px;
	}

	.fp-section-title {
		font-size: 1.5rem; /* 24px */
	}

	.fp-problem__list {
		grid-template-columns: repeat(2, 1fr);
		gap: 8px;
	}

	.fp-problem__item {
		min-height: 0;
		border-left: none;
		border-top: 8px solid var(--color-main-blue);
	}

	.fp-problem__item-inner {
		flex-direction: column;
		align-items: center;
		justify-content: space-between;
		padding: 16px 10px 20px;
		min-height: 160px;
		text-align: center;
	}

	.fp-problem__item-text {
		font-size: 0.8125rem; /* 13px */
		margin: 0 0 12px;
		order: 1;
	}

	.fp-problem__item-highlight {
		font-size: 1.125rem; /* 18px */
	}

	.fp-problem__item-icon {
		height: auto;
		margin-left: 0;
		order: 2;
	}

	.fp-problem__solve {
		font-size: 1.25rem; /* 20px */
		margin-top: 40px;
	}
}

/* ========== SOLUTION ========== */
.fp-solution {
	position: relative;
	padding: 80px 20px;
	background-color: #fff;
	background-image: url("../images/sections/solution_bk.svg");
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

.fp-solution__inner {
	position: relative;
	z-index: 1;
	max-width: 1080px;
	margin: 0 auto;
}

/* 導入テキストエリア（中央揃えに調整） */
.fp-solution__text {
	text-align: center;
	margin-bottom: 3rem;
	line-height: 1.9;
}

.fp-solution__text p {
	margin: 0 0 0.5rem;
	color: var(--color-text-body);
	font-weight: normal;
	line-height: 2;
}

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

/* カード本体のデザイン */
.fp-solution__point {
	position: relative;
	background: var(--grad-white-mint-lightblue);
	padding: 55px 26px 35px 40px;
	box-shadow: 8px 8px 0px var(--color-sub-blue);
	border: 0.5px solid #00bfbf00;
}

/* 右上のチェックマーク（icon_check.svg） */
.fp-solution__point::before {
	content: "";
	position: absolute;
	top: 20px;
	right: 20px;
	width: 22px;
	height: 22px;
	background-color: var(--color-sub-teal);
	background-image: url("../images/icons/icon_check.svg");
	background-size: 14px;
	background-position: center;
	background-repeat: no-repeat;
}

/* カード内の配置（テキスト左・画像右） */
.fp-solution__point-inner {
	display: flex;
	align-items: center; /* 縦中央揃え */
	flex-direction: row-reverse; /* HTMLの並び（画像→テキスト）を逆にして画像を右に配置 */
	gap: 8px;
	height: 100%;
}

.fp-solution__point-icon {
	width: 150px;
	height: auto;
	flex-shrink: 0;
}

.fp-solution__point-content {
	flex: 1;
	min-width: 0;
	text-align: left;
}

.fp-solution__point h3 {
	font-size: 1.125rem;
	font-weight: bold;
	color: var(--color-text-title);
	margin: 0 0 0.75rem;
}

.fp-solution__point-h3-accent {
	color: var(--color-main-blue);
	font-size: 1.37rem;
	font-weight: bold;
}

.fp-solution__point p {
	font-size: 0.875rem;
	line-height: 1.6;
	color: var(--color-text-body);
	margin: 0;
	font-weight: 500;
}

.fp-solution__point small {
	display: block;
	font-size: 0.75rem;
	opacity: 0.8;
	margin-top: 5px;
}

/* レスポンシブ対応 */
@media screen and (max-width: 768px) {
	.fp-solution {
		padding: 60px 20px;
	}

	.fp-solution__text {
		text-align: left; /* スマホでは左揃えが読みやすいケースが多いです */
	}

	.fp-solution__points {
		grid-template-columns: 1fr;
		gap: 20px;
	}

	.fp-solution__point {
		padding: 25px 20px;
	}

	/* 見出し・アクセント文字・本文のスタイルをSP用に調整 */
	.fp-solution__point h3 {
		font-size: 0.875rem;
		margin: 0 0 0.5rem;
		text-align: left;
	}

	.fp-solution__point-h3-accent {
		font-size: 1.125rem;
	}
	.fp-solution__point-icon {
		width: 140px;
	}
	.fp-solution__point p {
		text-align: left;
	}

	.fp-solution__point-inner {
		align-items: self-end;
		text-align: center;
	}
}

/* ========== FLOW ========== */
.fp-flow {
	padding: 80px 20px;
	background: var(--grad-blue-deep-blue);
}

.fp-flow__inner {
	max-width: 1080px;
	margin: 0 auto;
}

/* --- タイトルエリア --- */
.fp-flow .fp-section-title {
	text-align: center;
	color: #ffffff;
	font-size: 1.75rem; /* 28px */
	font-weight: 700;
	line-height: 1.5;
	margin-bottom: 10px;
}

.fp-flow .fp-section-title__en {
	display: block;
	color: #FFC401; /* 黄色 */
	font-size: 1.25rem; /* 20px */
	font-weight: 900;
	letter-spacing: 0.05em;
	margin-bottom: 8px;
}

/* 「3」の強調スタイル */
.fp-flow .fp-section-title__accent-no {
	font-size: 3.75rem;
	font-weight: 700;
	padding: 0 5px 0;
	line-height: 1;
	font-family: "Montserrat", "Noto Sans JP", sans-serif;
}

/* 注釈テキスト */
.fp-flow .text-annotation {
	text-align: center;
	font-size: 0.875rem;
	color: #ffffff !important;
	margin-top: 0;
	margin-bottom: 50px;
}

/* --- ステップ（カード）のコンテナ --- */
.fp-flow__steps {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 15px; /* カード間の隙間 */
	list-style: none;
	margin: 30px auto 0;
	padding: 0;
}

/* --- カード本体の共通設定 --- */
.fp-flow__step {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center; /* 縦方向も中央揃えにして間延びを防ぐ */
	text-align: center;
	box-sizing: border-box;
	aspect-ratio: 1 / 1; /* 正方形に近い比率に強制 */
}

/* --- 各ステップの背景色と形状の個別設定 --- */

/* STEP 1: 白・左平ら・右凸（矢印） */
.fp-flow__step:nth-child(1) {
	background-color: #ffffff;
	clip-path: polygon(0% 0%, calc(100% - 30px) 0%, 100% 50%, calc(100% - 30px) 100%, 0% 100%);
	padding: 20px 45px 20px 15px; /* 右の凸部分にテキストが被らないように右paddingを広く */
}

/* STEP 2: 薄いミント・左凹・右凸（矢印） */
.fp-flow__step:nth-child(2) {
	background-color: #e9fbf6; /* 画像に合わせた淡いミント */
	clip-path: polygon(0% 0%, calc(100% - 30px) 0%, 100% 50%, calc(100% - 30px) 100%, 0% 100%);
	padding: 20px 45px 20px 45px; /* 左右の凹凸にテキストが被らないように左右paddingを広く */
}

/* STEP 3: 薄いブルー・左凹・右平ら */
.fp-flow__step:nth-child(3) {
	background-color: #edf6ff; /* 画像に合わせた淡いブルー */
	padding: 20px 15px 20px; /* 左の凹部分にテキストが被らないように左paddingを広く */
}

/* --- カード内の要素 --- */
.fp-flow__step-header {
	margin-bottom: 5px;
}

.fp-flow__step-icon {
	width: 44px; /* 正方形に収めるために少し調整 */
	height: auto;
}

.fp-flow__step-visual {
	width: 100%;
	max-width: 218px; /* 正方形に収めるために少し調整 */
	height: auto;
	margin-bottom: 5px;
}

.fp-flow__step-text {
	font-size: 1rem;
	line-height: 1.6;
	color: var(--color-text-body);
	font-weight: 500;
	margin: 0;
}

.fp-flow__step-p-accent {
	color: var(--color-main-blue);
	font-weight: 700;
}

/* --- レスポンシブ対応（スマホ・タブレット用） --- */
@media screen and (max-width: 768px) {
	.fp-flow__steps {
		grid-template-columns: 1fr; /* スマホ時は1カラムに（縦積み） */
		gap: 0;
	}

	.fp-flow__step {
		aspect-ratio: auto; /* スマホ時は正方形指定を解除 */
		min-height: 280px;
	}

	/* 縦積みの時はSTEP1,2を「下向きの矢印（Ｖ字）」、次を「上凹」に変更 */
	.fp-flow__step:nth-child(1) {
		clip-path: polygon(0% 0%, 100% 0%, 100% calc(100% - 25px), 50% 100%, 0% calc(100% - 25px));
		padding: 40px 20px 50px;
	}

	.fp-flow__step:nth-child(2) {
		clip-path: polygon(0% 0%, 50% 25px, 100% 0%, 100% calc(100% - 25px), 50% 100%, 0% calc(100% - 25px));
		padding: 50px 20px 50px;
	}

	.fp-flow__step:nth-child(3) {
		clip-path: polygon(0% 0%, 50% 25px, 100% 0%, 100% 100%, 0% 100%);
		padding: 50px 20px 40px;
	}

	.fp-flow {
		padding: 60px 20px;
	}
}

/* ========== STRENGTHS ========== */
.fp-strengths {
	padding: 80px 20px;
	background-color: #ffffff;
}

.fp-strengths .fp-section-title {
	line-height: 1.5;
	margin-bottom: 0;
}

.fp-strengths__inner {
	max-width: 1080px;
	margin: 0 auto;
}

/* --- カードリスト（グリッド） --- */
.fp-strengths__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, 1fr); /* PC時は3カラム */
	gap: 30px;
}

/* --- カード本体 --- */
.fp-strengths__item {
	background-color: #F4FDFF;
	padding: 16px;
	box-shadow: 0 3px 15px rgb(0 115 225 / 20%);
	display: flex;
	flex-direction: column;
}

/* --- カード上部（アイコン＋見出し） --- */
.fp-strengths__head {
	display: flex;
	align-items: center;
	gap: 10px; /* アイコンとテキストの隙間 */
	margin-bottom: 20px;
}

.fp-strengths__icon {
	width: 85px; /* アイコンを少し大きめに調整 */
	height: auto;
	flex-shrink: 0;
}

.fp-strengths__head-text {
	flex: 1; /* 右側の余白を埋める */
	text-align: center; /* タイトルを中央揃えに */
}

.fp-strengths__head-text h3 {
	font-size: 1rem;
	line-height: 1.4;
	color: var(--color-text-title);
	margin: 0;
	font-weight: 700;
}

/* テキストの青色強調用クラス */
.text-blue {
	display: inline-block;
	color: var(--color-main-blue);
	font-weight: 700;
}

/* --- グラデーションの区切り線 --- */
.fp-strengths__divider {
	width: 100%;
	height: 3px; /* 画像に合わせて少し太めに */
	background: var(--grad-yellow-teal-blue);
	margin: 0 0 8px 0;
}

/* --- カード下部（説明文） --- */
.fp-strengths__desc {
	font-size: 1rem;
	line-height: 1.75;
	color: var(--color-text-body);
	margin: 0;
	text-align: left; /* 本文は左揃え */
}

/* --- レスポンシブ対応 --- */
@media screen and (max-width: 768px) {
	.fp-strengths {
		padding: 60px 20px;
	}

	.fp-section-title__sub {
		font-size: 1.125rem;
	}

	.fp-strengths__list {
		grid-template-columns: 1fr;
		gap: 20px;
	}

	.fp-strengths__desc {
		font-size: 0.875rem;
	}

	.fp-strengths__item {
		padding: 25px 20px;
	}
}

/* ========== FEATURE ========== */
.fp-feature {
	padding: 80px 20px;
	background-color: var(--color-bg-hero-sp);
	background-image: url("../images/sections/solution_bk.svg");
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}
.fp-feature__inner {
	max-width: 1080px;
	margin: 0 auto;
	text-align: center;
}

.fp-feature__list {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 50px 35px;
	list-style: none;
	margin: 5rem 0 0;
	padding: 0;
}

.fp-feature__item {
	position: relative;
	background: #ffffff;
	box-shadow: 0 3px 15px rgba(0, 115, 225, 0.2);
	padding: 2.5rem 1.5rem 1.75rem;
	display: flex;
	flex-direction: column;
	align-items: center;
	border: 2px solid #2995af;
}

.fp-feature__item-tag {
	position: absolute;
	top: 0;
	left: 50%;
	transform: translate(-50%, -50%);
	margin: 0;
	width: 270px;
	box-sizing: border-box;
	background-color: var(--color-sub-teal);
	color: #ffffff;
	padding: 0.3rem 1.4rem 0.4rem;
	font-size: 1.125rem;
	font-weight: 700;
	white-space: nowrap;
	text-align: center;
}

.fp-feature__item-body {
	width: 100%;
	background-color: #ffffff;
	padding: 1rem;
}

.fp-feature__item-image {
	max-width: 100%;
	height: auto;
	display: block;
	margin: 0 auto;
}

/* 共通「もっと見る」ボタン（機能紹介・導入事例など）・ホバーで明度アップ＋上に上がる */
.fp-more-btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 999px;
	background: linear-gradient(90deg, #2995af 0%, #086abd 50%, #2995af 100%);
	background-size: 200% 100%;
	background-position: 0% 0;
	color: #ffffff;
	text-decoration: none;
	font-weight: 700;
	font-size: 1.375rem;
	width: 400px;
	height: 75px;
	overflow: hidden;
	transition: background-position 0.6s ease, color 0.2s ease, transform 0.25s ease, filter 0.25s ease;
}
.fp-more-btn::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 999px;
	background: linear-gradient(90deg, #086abd 0%, #2995af 50%, #086abd 100%);
	background-size: 200% 100%;
	background-position: 100% 0;
	opacity: 0;
	transition: opacity 0.4s ease, background-position 0.6s ease;
	z-index: 0;
}
.fp-more-btn:hover {
	color: #ffffff;
	transform: translateY(-3px);
	filter: brightness(1.06);
}
.fp-more-btn span {
	position: relative;
	z-index: 1;
	color: #ffffff;
}
.fp-more-btn:hover::before {
	opacity: 1;
	background-position: 0% 0;
}

@media screen and (max-width: 768px) {
	.fp-more-btn {
		font-size: 1rem;
		width: 280px;
		height: 60px;
	}

	.fp-feature {
		padding: 60px 20px;
	}

	.fp-feature__list {
		grid-template-columns: 1fr;
	}

	/*.fp-feature__item-tag {
		width: auto;
	}*/
}

/* ========== CASE ========== */
.fp-case {
	padding: 80px 20px;
	background: #f5f8fa;
}
.fp-case__inner { max-width: 1080px; margin: 0 auto; }
.fp-case__list {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.5rem;
	margin: 2rem 0 0;
  justify-items: center;
}
@media (max-width: 800px) {
	.fp-case{
		padding: 60px 20px;
	}
	.fp-case__list { 
		grid-template-columns: 1fr; 
	}
}
.fp-case__card {
	background: #fff;
	overflow: hidden;
	box-shadow: 0 3px 15px rgba(0, 115, 225, 0.2);
	max-width: 330px;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.fp-case__card:hover {
	transform: translateY(-5px);
	box-shadow: 0 15px 30px rgba(0, 0, 0, 0.08);
}
.fp-case__card a {
	display: block;
	padding: 0;
	text-decoration: none;
	color: inherit;
}
.fp-case__thumb { margin: 0; }
.fp-case__thumb img { 
	width: 100%; 
	height: auto; 
	display: block; 
	aspect-ratio: 533 / 336; 
	object-fit: cover; 
}
.fp-case__body { padding: 0.75rem 1.5rem 0; }
.fp-case__title {
	font-weight: 700;
	font-size: 1rem;
	line-height: 1.6;
	margin-bottom: 0.5rem;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	margin-top: 0;
}
.fp-case__excerpt {
	font-size: 0.9rem;
	line-height: 1.6;
	margin: 0 0 0.75rem;
	display: -webkit-box;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.fp-case__meta {
	font-size: 0.85rem;
	line-height: 1.5;
	color: #555;
}
.fp-case__company {
	display: block;
	font-weight: 500;
	text-align: right;
	color: var(--color-main-blue);
}
.fp-case__staff {
	display: block;
	text-align: right;
}
.fp-case__more {
	text-align: center;
	margin-top: 2.5rem;
}

/* ========== FOR BUSINESS ========== */
.fp-for-business {
	position: relative;
	padding: 80px 20px; /* Adjusted padding */
	background-image: url("../images/sections/cta_bk.jpg");
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	color: #ffffff;
}

.fp-for-business__inner {
	position: relative;
	z-index: 1;
	max-width: 1080px;
	margin: 0 auto;
	text-align: center;
}

.fp-for-business .fp-section-title {
	color: #ffffff;
	font-size: 1.75rem;
	margin-bottom: 30px;
}

.fp-for-business .fp-section-title__en {
	color: #ffffff;
	font-size: 1rem;
	letter-spacing: 0.05em;
}

.fp-for-business__lead {
	line-height: 1.8;
	margin-bottom: 40px;
	color: #ffffff;
	font-size: 0.9375rem;
}

.fp-for-business__cta {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	justify-content: center;
	list-style: none;
	margin: 0 0 40px;
	padding: 0;
}

.fp-cta-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	padding: 15px 30px;
	background: var(--color-sub-blue);
	color: #fff;
	text-decoration: none;
	font-weight: bold;
	min-width: 240px;
	transition: background 0.3s ease, transform 0.25s ease;
	border-radius: 999px;
}

.fp-cta-btn__icon {
	width: 24px;
	height: 24px;
	flex-shrink: 0;
	vertical-align: middle;
}

.fp-cta-btn:hover {
	background: var(--color-main-blue);
	color: #fff;
	transform: translateY(-3px);
}

/* Tel Section */
.fp-for-business__tel {
	display: flex;
	justify-content: center;
	gap: 30px;
	flex-wrap: wrap;
}

.fp-tel-box {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 10px 25px;
	border: 1px solid #ffffff;
	border-radius: 999px;
	text-decoration: none;
	color: #fff;
	transition: background 0.25s ease, border-color 0.25s ease;
	cursor: pointer;
}
.fp-tel-box:hover {
	background: rgba(255, 255, 255, 0.12);
	border-color: rgba(255, 255, 255, 0.5);
}
.fp-tel-box:hover .fp-tel-box__number {
	color: #b0b0b0;
}
.fp-tel-box__head {
	display: flex;
	align-items: center;
	gap: 0.2rem;
}
.fp-tel-box__icon {
	width: 24px;
	height: 24px;
	flex-shrink: 0;
}
.fp-tel-box__label {
	font-size: 0.875rem;
	margin-right: 15px;
}
.fp-tel-box__number {
	font-size: 1.25rem;
	font-weight: bold;
	color: #fff;
	transition: color 0.25s ease;
  text-decoration: none;
}
@media screen and (max-width: 768px) {
	.fp-for-business {
		padding: 60px 20px;
	}

	.fp-for-business__lead {
		font-size: 0.875rem;
		text-align: left;
	}

	/* CTA：SPでは1カラム（縦並び） */
	.fp-for-business__cta {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 12px;
	}

	.fp-cta-btn {
		width: 100%;
		min-width: 250px;
		max-width: none;
		margin: 0 auto;
		padding: 12px 8px;
		font-size: 0.875rem;
	}

	/* Tel：SPでも2カラムを維持 */
	.fp-for-business__tel {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 12px;
		justify-content: center;
	}

	.fp-tel-box {
		flex-direction: column;
		align-items: center;
		gap: 4px;
		padding: 10px 20px;
		justify-content: center;
	}

	.fp-tel-box__icon {
		width: 15px;
		height: 15px;
	}

	.fp-tel-box__label {
		font-size: 0.9375rem;
	}

	.fp-tel-box__number {
		font-size: 0.875rem;
	}
}

/* ========== NEWS お知らせ ========== */
.fp-news {
	padding: 80px 20px;
	background: #ffffff;
}

.fp-news__inner {
	max-width: 1080px;
	margin: 0 auto;
}

/* --- 各ニュースアイテム --- */
.fp-news-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.fp-news-list__item {
	/* 罫線を点線（dotted）から少し間隔の広い破線（dashed）に変更 */
	border-bottom: 1px dashed #cccccc; 
}

/* 画像を見ると一番上にも線があるため追加 */
.fp-news-list__item:first-child {
	border-top: 1px dashed #cccccc; 
}

.fp-news-list__item:last-child {
	border-bottom: none;
}

/* --- リンク・レイアウト --- */
.fp-news-list__link {
	display: flex;
	align-items: center; /* 上揃え(flex-start)から中央揃えに変更 */
	padding: 25px 0; /* 上下の余白を広げてゆったりと */
	text-decoration: none;
	color: inherit;
	transition: opacity 0.3s ease;
}

.fp-news-list__link:hover {
	opacity: 0.6; /* ホバー時は全体を少し薄くするシンプルな挙動に */
}

.fp-news-list__link--nolink {
	cursor: default;
	transition: none;
}

.fp-news-list__link--nolink:hover {
	opacity: 1;
}

/* --- 日付 --- */
.fp-news-list__date {
	flex-shrink: 0;
	font-size: 0.9375rem;
	color: #666666;
	width: 100px;
	letter-spacing: 0.05em; /* 少し文字間をあける */
}

/* --- カテゴリラベル --- */
.fp-news-list__cat {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 130px; /* 画像に合わせて幅を広く */
	padding: 8px 0;
	font-size: 0.875rem;
	font-weight: 700;
	margin-right: 30px;
	background-color: transparent; /* 背景を透明に */
	/* 魔法の指定：currentColorを使うことで、文字色と同じ色の枠線が自動で引かれます */
	border: 1px solid currentColor; 
	color: var(--color-sub-teal); /* デフォルトの色（エメラルドグリーン） */
}

/* 名刺総合（エメラルドグリーン） */
.fp-news-list__cat.cat-cat_info_all {
	color: var(--color-sub-teal);
}

/* 法人e名刺（青色） */
.fp-news-list__cat.cat-cat_info_houjinmeishi {
	color: var(--color-main-blue);
}

/* イラレ名刺（オレンジ） */
.fp-news-list__cat.cat-cat_illustrator {
	color: #e58604;
}

/* ※もし今後「重要なお知らせ」などで赤色（ピンク）のカテゴリを追加したい場合は、
   以下のようにスラッグ名と色を指定するだけで自動で枠線と文字色が変わります
.fp-news-list__cat.cat-スラッグ名 {
	color: var(--color-accent-pink);
}
*/

/* --- テキスト本体 --- */
.fp-news-list__body {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 6px; /* タイトルと抜粋の間の余白 */
}

.fp-news-list__title {
	font-weight: 700;
	font-size: 1rem;
	color: var(--color-text-body);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.fp-news-list__excerpt {
	font-size: 0.8125rem;
	color: #555555;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.fp-news-list__link--nolink .fp-news-list__excerpt {
	display: block;
	-webkit-line-clamp: unset;
	-webkit-box-orient: unset;
	overflow: visible;
}

.fp-news-list__excerpt p {
	font-size: 0.8125rem;
	color: #555555;
	margin: 0;
}

/* --- 矢印 --- */
.fp-news-list__arrow {
	flex-shrink: 0;
	color: var(--color-sub-teal); /* エメラルドグリーンに変更 */
	font-size: 1.5rem; /* 大きく */
	font-weight: 300; /* 細く */
	margin-left: 20px;
	font-family: "Helvetica Neue", Arial, sans-serif; /* 綺麗な「＞」の形にするため */
}

/* リンクがない（--nolinkがついている）要素の中にある矢印を非表示にする */
.fp-news-list__link--nolink .fp-news-list__arrow {
    display: none;
}

.fp-news__more {
	text-align: center;
	margin-top: 2.5rem;
}

/* --- お知らせ：SPレイアウト（日付・カテゴリ左／タイトル・抜粋右／矢印右端） --- */
@media screen and (max-width: 768px) {
	.fp-news {
		padding: 60px 20px;
	}
	.fp-news-list__link {
		display: grid;
		grid-template-columns: auto 1fr auto;
		grid-template-rows: auto auto auto;
		gap: 4px 12px;
		align-items: start;
		padding: 16px 0;
	}
	.fp-news-list__date {
		grid-column: 1;
		grid-row: 1;
		width: auto;
		font-size: 0.875rem;
	}
	.fp-news-list__cat {
		grid-column: 1;
		grid-row: 2;
		width: auto;
		min-width: 0;
		padding: 2px 8px;
		font-size: 0.6875rem;
		margin-right: 0;
		margin-top: 2px;
	}
	/* タイトル行は中央列（1〜2段目）に配置 */
	.fp-news-list__body {
		grid-column: 2;
		grid-row: 1 / 3;
		min-width: 0;
		gap: 4px;
	}
	.fp-news-list__title {
		font-size: 0.9375rem;
	}
	/* 抜粋は一番下の段に寄せる */
	.fp-news-list__excerpt {
		font-size: 0.75rem;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
		margin-top: 4px;
	}
	.fp-news-list__arrow {
		grid-column: 3;
		grid-row: 1 / 3;
		align-self: center;
		margin-left: 8px;
		font-size: 1.25rem;
	}
}

/* ========== INSIGHTS お役立ち情報 ========== */
.fp-insights {
	position: relative;
	padding: 0 20px 80px;
	background-color: #ffffff; /* ベースは白 */
	z-index: 1;
}

/* 魔法の指定：背景の下半分だけを薄いグレーにする */
.fp-insights::before {
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 60%; /* 下から60%分をグレーにする */
	background-color: var(--color-bg-light); /* #f5f7fa */
	z-index: -1;
}

.fp-insights__inner {
	max-width: 1080px;
	margin: 0 auto;
}

.fp-insights__list {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 30px;
	margin-top: 40px;
}

/* --- カード本体 --- */
.fp-insights__card {
	background: #ffffff;
	overflow: hidden;
	box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05); /* 影を柔らかく */
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.fp-insights__card:hover {
	transform: translateY(-5px); /* ホバーで少し浮き上がるギミック */
	box-shadow: 0 15px 30px rgba(0, 0, 0, 0.08);
}

.fp-insights__link {
	display: block;
	text-decoration: none;
	color: inherit;
	height: 100%;
}

/* --- サムネイル画像 --- */
.fp-insights__thumb {
	margin: 0;
	overflow: hidden;
	aspect-ratio: 72 / 34;
}

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

.fp-insights__thumb--noimg {
	aspect-ratio: 4 / 3;
	background: #e8e8e8;
}

/* --- カード内テキストエリア --- */
.fp-insights__body {
	padding: 25px 20px;
}

.fp-insights__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin-bottom: 15px;
}

/* --- カテゴリラベル --- */
.fp-insights__cat {
	display: inline-block;
	padding: 4px 15px;
	font-size: 0.8125rem;
	font-weight: 700;
	background-color: transparent; /* 背景は透明 */
	border: 1px solid currentColor; /* 文字色と同じ色の枠線 */
	color: var(--color-main-blue); /* デフォルト色（青） */
}

/* ▼ カテゴリごとの色設定（スラッグ連動） ▼ */

/* その他（エメラルドグリーン） */
.fp-insights__cat.cat-cat_zatsugaku_other {
	color: var(--color-sub-teal);
}

/* 操作説明（青色） ※画像にないため一旦メインブルーを指定 */
.fp-insights__cat.cat-cat_zatsugaku_operation {
	color: var(--color-main-blue); 
}

/* --- 日付・タイトル・抜粋 --- */
.fp-insights__date {
	font-size: 0.8125rem;
	color: #888888;
	flex-shrink: 0;
	letter-spacing: 0.05em;
}

.fp-insights__title {
	font-weight: 700;
	font-size: 1rem;
	line-height: 1.6;
	margin: 0 0 10px;
	color: var(--color-text-body);
	/* 2行で三点リーダーにする */
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.fp-insights__excerpt {
	font-size: 0.8125rem;
	line-height: 1.7;
	margin: 0;
	color: #666666;
	/* 2行で三点リーダーにする（画像に合わせて修正） */
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* --- 一覧へボタン（共通 .fp-more-btn と同じデザイン） --- */
.fp-insights__more {
	text-align: center;
	margin-top: 2.5rem;
}

/* --- レスポンシブ対応 --- */
@media screen and (max-width: 900px) {
	.fp-insights__list {
		grid-template-columns: repeat(2, 1fr); /* タブレット時は2カラム */
	}
}

@media screen and (max-width: 768px) {
	.fp-insights {
		padding: 60px 20px;
	}
	.fp-insights::before {
		height: 100%;
	}
	.fp-insights__list {
		grid-template-columns: 1fr; /* スマホ時は1カラム */
		gap: 20px;
	}
}