@charset "UTF-8";

/* モバイル最適化 */
/*@media (max-width: 767.98px) {*/
/*  .about-avatar { max-width: 200px; }*/
/*}*/

/* ラベルと入力欄の距離を統一 */
.form-label {
	font-weight: 600;
	color: #333;
	margin-bottom: 0.4rem;
}

/* 入力欄デザイン */
.form-control {
	border-radius: 6px;
	padding: 0.75rem 1rem;
	font-size: 1rem;
}

/* placeholder色をやわらかく */
.form-control::placeholder {
	color: #aaa;
}

/* ボタン（Creative風に統一） */
.btn-primary {
	background-color: #f2653b;
	border-color: #f2653b;
	border-radius: 50px;
	font-weight: bold;
	transition: 0.2s ease-in-out;
}

.btn-primary:hover {
	background-color: #e14e2f;
	border-color: #e14e2f;
}

/* 見出しのデザイン */
.iso-info-title {
	color: rgb(0, 0, 0);
	font-weight: bold;
	font-size: 1.8rem;
	line-height: 1.8;
	text-align: center;
	margin: 0;
}

/* お問い合わせ説明文の位置調整 */
.contact-description {
	text-align: left;
	/* 左寄せ */
	max-width: 900px;
	/* 読みやすい幅（任意） */
	margin: 0 auto 1.5rem;
	/* 全体中央に配置しつつ文は左寄せ */
}

/* お問い合わせ説明文2調整 */
.iso-info-section {
	background-color: rgba(235, 235, 235, 0.5);
	padding: 1.5rem;
}

/* すべてのブラウザ対応版 */
.form-floating>.form-control::placeholder {
	color: #6c757d !important;
	opacity: 1 !important;
}

/* Firefox対応 */
.form-floating>.form-control::-moz-placeholder {
	color: #6c757d !important;
	opacity: 1 !important;
}

/* Edge/IE対応 */
.form-floating>.form-control:-ms-input-placeholder {
	color: #6c757d !important;
	opacity: 1 !important;
}

/* ================================
   代表紹介カード（PC共通）
================================ */
.divider-center {
	height: 0.2rem;
	max-width: 3.25rem;
	margin: 1.5rem;
	background-color: #f4623a;
	opacity: 1;
}

.about-card {
	border-radius: 1.25rem;
	padding: 0.5rem;
	/* 余白を確保 */
	background: #fff;
}

.about-avatar {
	max-width: 260px;
	/* デフォルト（PC用） */
	aspect-ratio: 1/1;
	object-fit: cover;
	box-shadow: 0 10px 24px rgba(0, 0, 0, .12);
	border-radius: 0.75rem;
}

/*.about-facts .fact {*/
/*	font-size: 0.98rem;*/
/*}*/

/*.about-facts .fact .fact-label {*/
/*	display: inline-block;*/
/*	min-width: 4.5rem;*/
/*	padding: .2rem .5rem;*/
/*	margin-right: .5rem;*/
/*	border-radius: .5rem;*/
/*	background: #f3f4f6;*/
/*	font-weight: 600;*/
/*	color: #333;*/
/*}*/

.about-facts {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.fact {
    display: flex;
    align-items: center;
}

.fact-label {
    display: inline-block;
    width: 80px; /* ラベル幅を統一 */
    padding: 4px 8px;
    background: #e9ecef;
    border-radius: 5px;
    font-weight: 600;
	text-align: center;
    margin-right: 10px;
}

.fact-value {
    text-align: left;
}


/* 箇条書き（黒丸を消して整列） */
.about-list {
	list-style: none;
	padding-left: 0;
	margin: 0 0 1rem;
}

.about-list li {
	display: flex;
	align-items: flex-start;
	gap: .6rem;
	margin-bottom: .4rem;
	line-height: 1.6;
	font-size: 1rem;
}

.about-list li::before {
	content: "✔";
	font-weight: 700;
	color: #2ecc71;
	/* 緑のチェックマーク */
}

/* ================================
   レスポンシブ調整
================================ */

/* タブレット用（画面幅 768px 以下） */
@media (max-width: 767.98px) {
	.about-card {
		padding: 1.5rem;
		/* 余白を少し縮小 */
	}

	.about-avatar {
		max-width: 200px;
		/* 写真を小さめに */
	}

	.about-list li {
		font-size: 0.95rem;
		/* 箇条書き文字を小さめに */
	}

	.about-facts .fact {
		font-size: 0.95rem;
	}
}

/* スマホ用（画面幅 576px 以下） */
@media (max-width: 575.98px) {
	.about-card {
		padding: 1rem;
		/* カードの余白をさらに縮小 */
	}

	.about-avatar {
		max-width: 160px;
		/* 写真をさらに小さめに */
	}

	#about h2 {
		font-size: 1.4rem;
		/* 見出しを小さく */
	}

	#about p,
	.about-list li {
		font-size: 0.9rem;
		/* 本文も少し小さく */
		line-height: 1.6;
	}

	.about-facts .fact {
		font-size: 0.9rem;
	}
}


/* 強みセクション */
strength {
	background-color: white !important;
}

#strength h3 {
	font-size: 1.25rem;
	/* PC用: 見出し大きめ */
	font-weight: 600;
}

#strength p {
	font-size: 1.05rem;
	/* PC用: 説明文少し大きめ */
	line-height: 1.8;
}

/* アイコンサイズ調整 */
.fs-1-5 {
	font-size: 2.8rem;
	/* PC用: アイコン大きめ */
	color: #f4623a;
	/* コーポレートカラー */
}

/* --- スマホ最適化 --- */
@media (max-width: 767.98px) {
	#strength h3 {
		font-size: 1.1rem;
		/* 見出しを少し小さめに */
	}

	#strength p {
		font-size: 0.95rem;
		/* 説明文を少し小さめにして収める */
		line-height: 1.6;
	}

	.fs-1-5 {
		font-size: 2.2rem;
		/* アイコンも少し小さく */
	}
}


/* ステップ番号デザイン */
.step-number {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: #f4623a;
	/* コーポレートカラーに合わせる */
	color: #fff;
	font-weight: bold;
	font-size: 1.1rem;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}


#cost .card {
	border-radius: 1rem;
	background: #fff;
}

#cost .lead {
	font-size: 1.1rem;
	line-height: 1.6;
}

.required-mark {
	background-color: #dc3545;
	/* 赤 */
	color: #fff;
	/* 白文字 */
	font-size: 0.75rem;
	/* 小さめ */
	font-weight: 600;
	border-radius: 4px;
	padding: 2px 6px;
	margin-left: 6px;

	/* ↓ ここがポイント（中央位置を正確に合わせる） */
	position: relative;
	top: -1.6px;
	/* ラベル文字の中央高さに調整 */
	display: inline-block;
	line-height: 1;
}

#about {
	padding-top: 20px;
	/* 上余白 */
	padding-bottom: 80px;
	/* 下余白 */
}

#about .container {
	min-height: 810px;
	/* 必要なら調整 */
	display: flex;
	align-items: center;
	/* 中央寄せ */
}

#about .left-about {
	padding-left: 60px ! important;
	padding-right: 0px ! important;
}