@charset "UTF-8";

/* リセットとベーススタイル */
body {
	margin: 0;
	padding: 0;
	/* ページの背景色はbodyに適用し、PCで左右の余白部分まで色を付ける */
	background-color: #f5f5f5; 
	font-family: 'Noto Sans JP', sans-serif;
	line-height: 1.6;
	color: #333;
	text-align: center;
	font-size:  1.2rem; /* 12px */
}

a {
	text-decoration: none;
}

li {
	list-style: none;
}

.lp-container {
	width: 100%; /* モバイルでは画面いっぱいに */
		
	/* PCでの中央揃えと固定幅の設定 */
	margin: 0 auto;
		
	/* LPのコンテンツ領域の背景色（白） */
	background-color: #ffffff;

	overflow-x: hidden;
	/* 要素（ここでは.lp-container）の**内容が水平方向にオーバーフロー（はみ出し）した場合、
	そのはみ出し部分をクリッピング（非表示に）**するようブラウザに指示*/
}

/* PC・タブレットでの幅固定と中央揃え */
@media (min-width: 601px) {
		/* PCサイズでのベースフォントサイズを再設定 (1.2remで現状維持) */
		body {
				font-size: 1.2rem;
		}

		/* bodyへの設定を外し、lp-containerにのみ適用 */
		.lp-container {
				max-width: 600px;
				box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
		}
}

/* 【画像】常に親要素の幅に合わせる */
img {
	max-width: 100%;
	height: auto;
	display: block;
	/* 全てのブロックレベルの画像を中央揃えにする */
	margin-left: auto; 
	margin-right: auto;
}


/*改行*/

.responsive-break {
		display: none; /* デフォルトでは改行を非表示 */
}

@media (max-width: 600px) {
		.responsive-break {
				/* ブロック要素にすることで、挿入された位置で必ず改行される */
				display: block; 
				
				/* 改行部分が高さを持たないように調整 */
				height: 0;
				margin: 0;
				padding: 0;
		}
}

.pc-break {
		display: none;
}

/* PCサイズ (601px以上) のみで改行タグを再表示する */
@media (min-width: 601px) {
		.pc-break {
				/* <br>はインライン要素として機能するため、initialまたはinlineを使います */
				display: initial; 
		}
}

/* --------------- トップ部分 ---------------------*/

/* ヒーローセクション（ファーストビュー全体） */
.hero-section {
		position: relative;
		/* 背景色をグラデーションに（既存の.lp-containerの白背景に上書き） */
		background: linear-gradient(180deg, #e8f9f7 0%, #F0FDFA 50%); 
		padding-bottom: 80px;
}


/* ロゴ全体のコンテナ */
.main-visual-title {
	text-align: left;
	color: white;
	font-family: sans-serif;
}

/* 上部の小さいテキスト */
.main-visual-title .sub-text {
	display: block;
	font-size: 0.4em;
	margin-bottom: 1px;
	letter-spacing: 0.1em;
	margin-left: 20px;
}

/* 文字を並べる枠組み */
.main-visual-title .logo-wrapper {
	display: flex;
	align-items: flex-end;
	justify-content: left;
	gap: 5px; /* 文字の間隔 */
	flex-wrap: wrap; /* スマホで入り切らない時に折り返す設定 */
}

/* 白い四角い枠 */
.main-visual-title .box {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 20px;  /* サイズは調整してください */
	height: 20px;
	border: 1px solid white;
	font-size: 0.5em;
	font-weight: bold;
	background-color: rgba(255, 255, 255, 0.1); /* ほんの少し透過させると馴染みます */
}

/* 「保」の傾き */
.main-visual-title .rotate {
	transform: rotate(-10deg);
}

.main-visual-title .rotate span {
  display: inline-block; /* 回転を有効にするために必要 */
  transform: rotate(10deg); /* 右に10度戻す */
}

/* 「.コム」部分 */
.main-visual-title .suffix {
	font-size: 0.5em;
	font-weight: bold;
}

/* スマホ用の調整（画面幅が狭い時） */
@media (min-width: 601px) {
	.main-visual-title .box {
		width: 30px;
		height: 30px;
		font-size: 0.8em;
	}
	.main-visual-title .suffix {
		font-size: 0.7em;
	}

	.main-visual-title .sub-text {
		font-size: 0.5em;
		margin-bottom: 6px;
		margin-left: 33px;
	}

	.main-visual-title .logo-wrapper {
		gap: 8px; /* 文字の間隔 */
	}

}

/* h1とイラストを囲むコンテナ */
.header-content {
		position: relative;
		z-index: 2;
		padding: 10px 20px 67px;
		text-align: left;
		background-color: #00BBA7;
}

/* メインキャッチコピー (h1) */
.main-catch {
		font-size: 1.6em; /* 大きめに */
		font-weight: 800;
		color: #333;
		line-height: 2.0;
		margin: 68px 0 0;
		text-align: center; 
}

/* PCサイズで元の大きさに戻す */
@media (min-width: 601px) {
		.main-catch {
				font-size: 2.2em;
				margin: 100px 0 5px;
		}

		.header-content {
			padding: 10px 20px 105px;
		}
}

/* イラストと白い丸のボックス */
.illustration-box {
		position: relative;
		width: 180px; /* イラストのサイズ */
		height: 180px;
		margin: auto;
		background-color: #ffffff; /* 白い丸の背景 */
		border-radius: 50%; /* 正円 */
		box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
		top: 37px;
		overflow: hidden; /* 確実に画像を丸く収めるため */
}

/* PCサイズで元の大きさに戻す */
@media (min-width: 601px) {
		.illustration-box {
				width: 230px; /* イラストのサイズ */
				height: 230px;
				top: 40px; /* 背景の緑の丸に少し食い込ませる */
		}
}

.illustration-box img {
		/* img { max-width: 100%; height: auto; } は既存設定でOK */
		width: 100%; 
		height: 100%; 
		object-fit: cover; /* 画像をボックスに合わせてトリミング */
		border-radius: 50%;
}

/* 文章部分のコンテナ */
.benefit-box {
		position: relative;
		z-index: 2;
		text-align: center;
		padding: 0 20px;
		margin-top: 40px; /* イラストの下部に近づける */
		color: #333; /* 文字色を黒に戻す */
		line-height: 2.5;
		font-size: 1.3rem;
}

/* PCサイズで元の大きさに戻す */
@media (min-width: 601px) {
		.benefit-box {
				margin-top: 55px; /* イラストの下部に近づける */
		}
}

/* サブキャッチコピー */
.sub-catch {
		font-size: 0.8em;
		font-weight: normal;
		margin-bottom: 5px;
}

/* PCサイズで元の大きさに戻す */
@media (min-width: 601px) {
		.sub-catch {
				font-size: 1em;
		}
}

.sub-catch .highlight {
		font-size: 1.2em;
		font-weight: bold;
		color: #ffc700; /* 黄色 */
}

/* サービス詳細 */
.service-detail {
		font-size: 0.8em;
		color: #333;
		margin-top: 5%;
}

/* 共通CTAボタンのスタイル */
.cta-button-area {
		padding: 20px;
		text-align: center;
		margin-top: 20px;
		position: relative; /* z-indexを確保するため */
		z-index: 3;
}

.cta-button {
		display: block;
		width: 80%;
		max-width: 350px;
		margin: 0 auto;
		padding: 15px 30px;
		font-size: 1em;
		font-weight: bold;
		color: #333;
		background-color: #ffc700; /* 鮮やかな黄色 */
		border-radius: 30px;
		text-decoration: none;
		/* 立体的なシャドウ */
		box-shadow: 0 4px 0 #cc9f00, 0 8px 10px rgba(0, 0, 0, 0.1); 
		transition: all 0.2s;
}

.cta-button:hover {
		transform: translateY(2px);
		box-shadow: 0 2px 0 #cc9f00, 0 4px 6px rgba(0, 0, 0, 0.1);
}

@media (min-width: 601px) {
		.service-detail {
				font-size: 1em;
		}

		.cta-button {
				width: 90%;
				font-size: 1.2em;
		}
}


/*===========再度修正必要エリア===========================*/

/* --------------豪華景品プロモーションエリア---------------- */
.present-campaign {
		position: relative;
		z-index: 2;
		/* 中央のメインカラー */
		background-color: #00BBA7; /* ★ご指定の色 */
		border-radius: 40px; 
		padding: 20px 15px 40px; 
		margin: 40px 50px; 
		box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
		text-align: center;
		color: #ffffff; /* 文字色を白に */
		overflow: hidden; /* ★重要: 波型をコンテナ内でクリップするため */
}

/* 1. 上部の波型（#F08893）の作成 ::before */
.present-campaign::before {
		content: "";
		position: absolute;
		top: -340px; /* 円の中心を上にはみ出させて、下半分を見せる */
		left: 80%;
		transform: translateX(-50%);
		
		/* 大きな円を作成 */
		width: 600px; 
		height: 600px;
		background-color: #F08893; /* ★ご指定の色 */
		border-radius: 50%;
		z-index: 0; /* 中央の緑（#00BBA7）の下に配置 */
}

/* 2. 下部の波型（#FD9572）の作成 ::after */
.present-campaign::after {
		content: "";
		position: absolute;
		bottom: -444px; /* 円の中心を下に大きくはみ出させて、上半分を見せる */
		right: -75%;
		transform: translateX(-50%);
		
		/* 大きな円を作成 */
		width: 600px; 
		height: 600px;
		background-color: #FD9572; /* ★ご指定の色 */
		border-radius: 50%;
		z-index: 0; /* 中央の緑（#00BBA7）の下に配置 */
}

/* PCサイズで元の大きさに戻す */
@media (min-width: 601px) {
		.present-campaign::after {
				right: -34%;
		}
}




/* 3. タイトルとテキストは背景の円の上に表示するためのz-index設定 */
.campaign-title-box,
.campaign-description,
.present-images,
.campaign-product-lead {
		position: relative;
		z-index: 10; 
}

/* 景品タイトル (文字色が画像では黄色なので、既存設定を維持) */
.campaign-title {
		font-size: 2.0em;
		font-weight: 900;
		color: #ffc700; /* 鮮やかな黄色 */
		line-height: 1.4;
		margin: 20px 0 15px 0;
		text-shadow: 3px 3px 0 #d18f00; 
}

/* PCサイズで元の大きさに戻す */
@media (min-width: 601px) {
		.campaign-title {
				font-size: 2.5em;
		}
}

/* 説明文 */
.campaign-description {
		font-size: 0.7em;
		margin: 25px 5px;
		line-height: 2;
}

/* PCサイズで元の大きさに戻す */
@media (min-width: 601px) {
		.campaign-description {
				font-size: 0.9em;
				margin: 25px;
				line-height: 1.5;
		}
}

.campaign-description .strong-brand {
		font-weight: bold;
		font-size: 1.1em;
}

/* 景品画像のコンテナ */
.present-images {
		display: flex;
		justify-content: center;
		gap: 5%; 
		margin: 10px 0 10px 0;
		padding: 0 10px;
}

.present-images2 {
		display: flex;
		justify-content: center;
		flex-wrap: wrap; 
		gap: 5%; 
		margin-bottom: 20px;
		padding: 0 10px;
}

.present-images img {
		width: calc(50% - 10px); 
		max-width: 150px;
		height: auto;
		border-radius: 10px;
		background-color: #ffffff; 
		box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
		margin-left: 0;
		margin-right: 0;
}

.present-images2 img {
		width: calc(50% - 10px); 
		max-width: 150px;
		height: auto;
		border-radius: 10px;
		background-color: #ffffff; 
		box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
		margin-left: 0;
		margin-right: 0;
}

/* 景品紹介のリード文 */
.campaign-product-lead {
		position: relative;
		z-index: 10;
		font-size: 1em;
		line-height: 1.5;
		margin-top: 15px;
		color: #333; /* 下の円弧の色によっては文字色を暗くする必要がある */
}

.top {
		display: flex;
		gap: 5%;
		margin-bottom: 13px;
}

/*========================================================*/


/* ライフステージと悩み セクション */

.problem-section {
		padding: 50px 20px 50px;
		text-align: center;
		background-color: #ffffff; /* 白背景 */
}

/* セクションタイトル */
.problem-section .section-title {
		font-size: 1em;
		font-weight: bold;
		color: #333;
		margin-bottom: 50px;
		line-height: 2.0;
}

/* モバイル */
@media (min-width: 601px) {
		.problem-section .section-title{
				font-size: 1.5em;
		}
}

/* 悩みカードのリストコンテナ */
.problem-items-ul {
		padding: 0;
		margin: 0;

		display: flex; /* 子要素を並べるモードにする */
		flex-direction: column; /* 縦に並べる（既存の配置を維持） */
		align-items: center; /* 子要素（li）を中央揃えにする */
}

/* 悩みカード (li) */
.problem-card {
		display: flex;
		align-items: center; /* 縦方向中央揃え */
		width: 90%; /* モバイルで適用したい幅 */
		margin-bottom: 20px;
		padding: 15px 30px;
		
		/* カードの背景と影 */
		background-color: #f7fcfb; /* 非常に薄い水色/白 */
		border-radius: 15px; /* 大きめの角丸 */
		box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08); /* 影を付けて浮き上がらせる */
}

/* PCサイズ (601px以上) のみ上書き */
@media (min-width: 601px) {
		.problem-card {
				width: 70%; /* PCで適用したい幅 */
		}
}

/* テキスト部分 */
.problem-text {
		flex-grow: 1; /* アイコン以外の領域を埋める */
		font-size: 0.7em;
		line-height: 1.4;
		color: #555;
		/* 左右交互配置のためのテキスト寄せ */
		text-align: left;
}

/* PCサイズ (601px以上) のみ上書き */
@media (min-width: 601px) {
		.problem-text {
				font-size: 0.9em;
		}
}

.problem-card:nth-child(odd) .problem-text {
		padding-left: 30px;
		padding-right: 0;
}
.problem-card:nth-child(even) .problem-text {
		padding-right: 30px;
		padding-left: 0;
		text-align: right;
}

/* アイコンの丸い背景 */
.icon-circle {
		width: 60px;
		height: 60px;
		min-width: 60px; /* flexアイテムの縮小を防ぐ */
		border-radius: 50%;
		background-color: #e8f9f7; /* アイコンの薄い水色の背景 */
		display: flex;
		justify-content: center;
		align-items: center;
		box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.05); /* わずかな内側の影 */
}

.icon-circle img {
		/* 画像は線画のイラスト想定 */
		width: 90%; 
		height: 90%;
		object-fit: contain;
		border-radius: 50%;
}

/* モヤモヤの課題提起部分 */
.moyamoya-message {
		margin: 50px 0 50px;
		padding: 0 10px;
}

.moyamoya-intro {
		font-size: 1em;
		color: #333;
		margin-bottom: 7px;
		font-weight: bold;
		line-height: 2;
}

.moyamoya-text {
		/* モヤモヤの強調と色付け */
		font-size: 1.8em;
		font-weight: 900;
		color: #ffc700; /* 黄色 */
		letter-spacing: 0.05em;
		margin-bottom: 7px;
		text-shadow: 1px 1px 0 #d18f00; /* 少し立体感を出す */
		
}

/* 解決できない理由の説明部分 */
.solution-problem-text {
		padding: 0 20px;
		text-align: center;
		font-size: 0.8em;
		line-height: 2.5;
		color: #333;
}

.solution-problem-text p {
		margin-bottom: 50px;
}

/* キーメッセージの強調 */
.solution-problem-text .key-message {
		color: #333;
		font-weight: bold;
}

/* 「自分に合った整理」の部分の強調 */
.solution-problem-text strong {
		font-weight: bold;
		color: #333; /* 文字色を濃く */
		/* 画像の緑の下線のような強調があればここに追加 */
		background-image: linear-gradient(transparent 50%, #90ee90 50%); /* 薄い緑の下線例 */
		background-size: 100% 100%;
		background-repeat: no-repeat;
		padding: 0 2px;
}

/* 次の行動を促す部分 */
.next-step-prompt {
		padding: 0 20px;
		margin-top: 40px;
		margin-bottom: 40px;
		font-size: 0.8em;
		line-height: 1.7;
		color: #333;
}

.next-step-prompt p {
		margin: 0;
		font-weight: bold;
}

.highlight-blue {
		font-size: 1.2em;
		font-weight: bold;
		color: #009689; /* ブルー */
}

.experience {
	font-weight: bold;
}

/* PCサイズで元の大きさに戻す */
@media (min-width: 601px) {
		.moyamoya-text {
				font-size: 2.5em;
		}

		.moyamoya-intro {
				font-size: 1.1em;
		}

		.solution-problem-text {
				font-size: 0.95em;
		}

		.next-step-prompt {
				font-size: 0.95em;
		}

		.highlight-blue {
				font-size: 1.3em;
		}
}

/* -------最適案をオーダーメイド セクション------- */

.solution-section {
	background: linear-gradient(180deg, #e8f9f7 0%, #F0FDFA 50%);
	padding: 50px 15px;
	text-align: center;
}

/* セクションタイトル */
.solution-section .solution-title {
		font-size: 1.3em;
		font-weight: bold;
		color: #333;
		margin-bottom: 30px;
}

.solution-section .solution-title .highlight-blue {
		font-size: 1em;
}

/* タイトル内の黄色いハイライト */
.solution-title .highlight-yellow {
		color: #ffc700; /* 黄色 */
		/* 下線や背景色で目立たせることも可能 */
}

/* メインビジュアル（画像） */
.main-visual {
		margin: 0 auto 30px;
		width: 90%;
		max-width: 400px;
		/* 画像を角丸にする */
		border-radius: 15px;
		overflow: hidden; /* imgをクリップするため */
		box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.main-visual img {
		/* 既存の img { max-width: 100%; height: auto; } でOK */
		display: block;
}

/* チェックリストのコンテナ */
.service-features {
		margin: 0 auto 40px;
		max-width: 300px;
		
		/* カード型の白背景と影、角丸 */
		background-color: #ffffff;
		border-radius: 20px;
		box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
		padding: 25px 50px;
}

/* リスト本体 */
.feature-list {
		padding-top: 15px;
		margin: 0 auto; /* ★これだけで中央揃えになります */
		text-align: left;

		/* リストの幅を制限し、白いカードの中で中央配置の対象にする */
		width: 90%; 
		max-width: 300px; /* カードの幅(350px)より狭く設定 */
}

/* リストアイテム */
.feature-item {
		display: flex;
		align-items: center;
		font-size: 0.9em;
		font-weight: bold;
		color: #333;
		margin-bottom: 15px;
		line-height: 1.2;
		position: relative; /* ★重要: ::beforeを配置する基準点にする */
		padding-left: 35px; /* ★重要: 枠線分のスペースを確保 */
}

/* チェックマークをCSSで作成 (枠線とユニコード文字を使用) */
.feature-item::before {
		content: "✓"; /* チェックマークのユニコード文字 */
		
		/* 枠線の位置調整 */
		position: absolute;
		left: 0;
		top: 50%;
		transform: translateY(-50%);
		
		/* 枠線のスタイル (緑の線画のような見た目) */
		width: 20px; 
		height: 20px;
		border: 2px solid #5acbaf; /* ヒーローエリアの緑/水色 */
		border-radius: 5px; /* 角を少し丸くする */
		
		/* チェックマークの文字自体のスタイル調整 */
		color: #5acbaf; /* チェックマークの色 */
		font-size: 1.2em;
		font-weight: 900;
		
		/* 文字を枠の中央に配置 */
		display: flex;
		justify-content: center;
		align-items: center;
		line-height: 1; /* 行の高さをリセットして中央寄せを正確に */
}

/* FP資格に関する詳細説明 */
.fp-qualification-info {
		margin-bottom: 30px;
		padding: 0 10px;
		font-weight: bold;
}

.qualification-text {
		font-size: 0.95em;
		color:  #333;
		line-height: 2;
}

/* 資格保有者の強調（テキスト色を変更） */
.qualification-text .strong-highlight {
		font-weight: 900;
		color: #5acbaf; /* 緑/水色で強調 */
}

/* 継続的なサポートと改善に関する説明 */
.continuous-improvement-info {
		margin-bottom: 30px;
		padding: 0 20px;
		font-size: 0.8em;
		color:  #333;
		line-height: 2.5;
		font-weight: bold;
}

/* ユーザーへの安心メッセージ */
.support-message {
		padding: 0 20px;
		margin-bottom: 40px;
		font-weight: bold;
}

.anxiety-relief {
		line-height: 2.5;
		color: #333;
		font-size: 0.8em;
}

/* 「何が正解かわからない」の強調 */
.anxiety-relief .highlight-yellow {
	color: #ffc700; /* 黄色 */
	font-size: 1.3em;
}

.cta-lead {
		font-size: 0.8em;
		color:  #333;
		margin-top: 20px;
}

@media (min-width: 601px) {
		.anxiety-relief .highlight-yellow {
				font-size: 1.5em;
		}

		.continuous-improvement-info {
				font-size: 0.9em;
		}

		.anxiety-relief {
				font-size: 0.9em;
		}

		.cta-lead {
				font-size: 0.95em;
		}

		.service-features {
				max-width: 350px;
		}

		.solution-section .solution-title {
				font-size: 1.5em;
		}

		.qualification-text {
				line-height: 2.5;
		}

		.feature-item {
				font-size: 1em;
		}
}

/* CTAボタンは、最初のセクションで定義した .cta-button クラスを再利用 */

/*--------------ポイントセクション -------------------*/

.points-section {
		padding: 50px 20px;
		text-align: center;
}

/* セクションのメインタイトル (3つのポイント) */
.points-section .section-header {
		/* h2全体を囲むボックススタイル */
		display: inline-block; /* 内容に合わせて幅を調整 */
		padding: 10px 40px;
		margin-bottom: 50px;
		
		/* 角丸 */
		border-radius: 30px; 
		
		/* 背景 */
		background: #00BBA7;
		box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.points-section .section-title {
		font-size: 1.4em;
		font-weight: bold;
		color: #ffffff; /* 白文字 */
		margin-top: 30px;
		letter-spacing: 0.1em;
}

/* ポイントのリスト全体 */
.point-list {
		padding-top: 50px;
		margin: 0 auto;
		max-width: 450px; /* カード型コンテンツの最大幅を制限 */
}

/* 各ポイントのアイテム */
.point-item {
		position: relative; /* 数字の透かし（.point-number）の基準点 */
		text-align: left; /* テキストは左揃え */
		padding: 20px 50px;
		margin-bottom: 45px;
}

/* 大きな数字（透かし）のスタイル */
.point-number {
		position: absolute;
		top: -53px; /* 位置調整 */
		left: 42px; /* 左端から少しはみ出させる */
		
		/* 数字のサイズと色 */
		font-size: 5em; 
		font-weight: 900;
		color: #94f6eb; /* 薄い水色 (背景色に近い色) */
		
		/* テキストを透けさせる (ブラウザによっては効果が異なる) */
		opacity: 0.6; 
		z-index: 1; 
		pointer-events: none; /* クリックイベントを無効化 */
}

.point-number-right {
		position: absolute;
		top: -53px; /* 位置調整 */
		right: 40px;
		
		/* 数字のサイズと色 */
		font-size: 5em; 
		font-weight: 900;
		color: #94f6eb; /* 薄い水色 (背景色に近い色) */
		
		/* テキストを透けさせる (ブラウザによっては効果が異なる) */
		opacity: 0.6; 
		z-index: 1; 
		pointer-events: none; /* クリックイベントを無効化 */
}

/* ポイントのタイトル (h3) */
.point-title {
		position: relative;
		z-index: 2; /* 数字の上に表示させる */
		font-size: 1.2em;
		font-weight: bold;
		color: #333;
		margin-top: 0;
		margin-bottom: 10px;
		line-height: 1.5;
}

/* 説明文 */
.point-description {
		position: relative;
		z-index: 2; /* 数字の上に表示させる */
		font-size: 0.8em;
		color: #555;
		line-height: 1.6;
		margin-bottom: 0;
}

@media (min-width: 601px) {
		.point-number {
				font-size: 6em;
		}

		.point-number-right {
				font-size: 6em;
		}

		.point-description {
				font-size: 0.9em;
		}
}


/* ------- 文章セクション (モチベーション) ------- */

.motivation-section {
		background: linear-gradient(180deg, #e8f9f7 0%, #F0FDFA 50%);  
		padding: 60px 20px;
		text-align: center;
}

/* メインメッセージ (h2) */
.motivation-section .main-message {
		font-size: 1.3em;
		font-weight: 800;
		color: #333;
		line-height: 1.8;
		margin-bottom: 40px;
}


/* タイトル内の黄色いハイライト */
.motivation-section .highlight-yellow {
		color: #ffc700; /* 黄色 */
		padding: 3px 5px;
		border-radius: 5px;
}

/* 導入の共感テキスト */


.intro-text {
		margin-bottom: 40px;
		font-size: 0.9em;
		color: #555;
		line-height: 1.6;
}


/* メッセージ内のテキスト */
.highlight-green {
		font-size: 1.2em;
		font-weight: bold;
		line-height: 1.5;
		margin: 0;
		color: #009689;
}

.highlight-yellow-line {
		background: linear-gradient(to top, #ffe066 30%, transparent 30%);
		font-weight: bold;
		display: inline; /* 複数の行にまたがっても適用されるように */
		padding: 0 2px;
}

/* ------- 最後の部分 (クロージングメッセージ) ------- */

.closing-message-section {
		/* 既存のグラデーション背景 */
		background: linear-gradient(180deg, #e8f9f7 0%, #F0FDFA 50%); 
		padding: 60px 20px 5px;
		text-align: center;
}

/* 最終的なスローガン (h2) */
.closing-message-section .closing-slogan {
		font-size: 1em;
		font-weight: normal; /* 画像では太字ではない */
		color: #333;
		line-height: 2; /* 行間を広げて視認性を高める */
		margin-bottom: 40px;
}

/* CTA誘導メッセージ (p) */
.cta-message-lead {
		font-size: 1em;
		font-weight: normal;
		color: #333;
		line-height: 1.8;
		margin-bottom: 40px;
}

/* 黄色のハイライト部分 */
.cta-message-lead .highlight-yellow {
		/* 黄色の背景でテキストを強調 */
		background-color: #fff9e0; /* 画像のような薄い黄色 */
		padding: 3px 6px;
		border-radius: 4px;
		font-weight: bold;
}

.present .main-visual {
		width: 77%;
}

.company {
		font-size: 0.5em;
}

.company a {
		color: #333;
		text-decoration: underline;
}


@media (min-width: 601px) {
		.motivation-section .main-message {
				font-size: 1.6em;
		}

		.intro-text {
				font-size: 1em;
		}

		.closing-message-section .closing-slogan {
				font-size: 1.4em;
		}

		.cta-message-lead {
				font-size: 1.2em;
		}

		.company {
				font-size: 0.7em;
		}

}