/* ==========================================================
   おはな造園LP リニューアル用スタイル
   既存のstyle.css / rwd.css / advanced.cssは変更せず、
   このファイルで上書き・追加を行う。
========================================================== */

/* ---------- ファーストビュー：写真全面＋テキストを上に重ねる ---------- */

.fv_wrap {
	padding: 0;
	box-sizing: border-box;
}

.fv_hero {
	position: relative;
	width: 100%;
	max-width: 950px;
	margin: 0 auto;
	display: block;
	line-height: 0;
}

.fv_hero_static_img {
	display: block;
	width: 100%;
	height: auto;
}

/* ---------------------------------------------------------
   ヘッダー：公式ロゴ(白抜き)を使用するため、
   背景を公式サイトと同じダークグリーンに変更。
--------------------------------------------------------- */
.header {
	background-color: #235c3e;
}

/* ---------------------------------------------------------
   ヘッダー内の配置：ロゴ・電話ボタン・お問い合わせボタンが
   それぞれ別々のmargin-topで位置決めされており、高さが揃わず
   バラバラに見えていたため、flexboxで確実に縦中央揃えにする。
--------------------------------------------------------- */
.header_inr {
	display: flex;
	align-items: center;
}

.header_logo {
	order: 1;
	margin: 0;
}

.header_tel {
	order: 2;
	margin: 0 0 0 auto;
}

.header_mail {
	order: 3;
	margin: 0 0 0 8px;
}

/* ---------------------------------------------------------
   768px〜950pxの中間幅で固定950pxコンテンツが
   画面からはみ出す問題の修正(横スクロールが発生してしまう)。
   幅を可変にして画面内に収まるようにする。
--------------------------------------------------------- */
.header_inr,
.atcl_inr,
.top_image_in,
.footer_inr,
.sec_pvp_inr {
	width: 100%;
	max-width: 950px;
	margin: 0 auto;
	box-sizing: border-box;
}

/* ---------------------------------------------------------
   スマホ幅ヘッダー：ロゴ+電話+CTAボタンが環境によっては
   ぎりぎり右端で切れることがあるため、余裕を持たせる。
--------------------------------------------------------- */
@media only screen and (max-width: 768px) {
	/* ヘッダーが画面幅ぎりぎりだと右端で切れることがあるため、
	   コンテナ自体に左右の余白を持たせて安全マージンを確保する */
	.header_inr {
		padding: 0 10px;
	}

	.header_logo {
		width: 30%;
	}

	.header_tel {
		width: 28%;
	}

	.header_mail {
		width: 28%;
	}
}

@media only screen and (max-width: 420px) {
	.header_inr {
		padding: 0 8px;
	}

	.header_logo {
		width: 27%;
	}

	.header_tel,
	.header_mail {
		width: 26%;
	}
}

/* ---------------------------------------------------------
   PC幅：電話・お問い合わせボタンをもう少し大きく見せるため、
   ヘッダー内の幅を25%→30%に拡大(ロゴとの間に十分な余白があるため
   拡大しても重ならない)。
--------------------------------------------------------- */
@media only screen and (min-width: 769px) {
	.header_tel,
	.header_mail {
		width: 30%;
	}
}

/* ---------------------------------------------------------
   施工事例エリア：6サービス×ビフォーアフター構成に変更。
   これまで画像で焼き込んでいた見出し(mds_text0N.png)と
   「施工事例0N」リボン(mds0N.png)を廃止し、
   CSSテキストに置き換えて編集しやすくする。
--------------------------------------------------------- */
.jiturei_badge {
	display: inline-block;
	margin-bottom: 0.5em;
	padding: 0.2em 0.9em;
	border: 1px solid #c9a24a;
	border-radius: 999px;
	color: #8a6d2f;
	font-size: 0.8em;
	font-weight: bold;
	letter-spacing: 0.05em;
}

.jiturei_area h2 {
	margin: 0 0 0.7em;
	line-height: 1.4;
}

.jiturei_area > p {
	margin: 0 0 0.6em !important;
	line-height: 1.8;
}

/* ビフォーアフター画像ペア */
.jiturei_ba_row {
	display: flex;
	gap: 12px;
	margin: 0 0 1em;
}

.jiturei_ba {
	position: relative;
	flex: 1 1 0;
	margin: 0;
	line-height: 0;
}

.jiturei_ba img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 10px;
}

.jiturei_ba figcaption {
	position: absolute;
	top: 8px;
	left: 8px;
	padding: 0.3em 0.9em;
	border-radius: 999px;
	color: #fff;
	font-size: 1em;
	font-weight: bold;
	letter-spacing: 0.05em;
}

.jiturei_ba figcaption.ba_before {
	background-color: rgba(80, 80, 80, 0.8);
}

.jiturei_ba figcaption.ba_after {
	background-color: #4caf50;
	box-shadow: 0 2px 6px rgba(76, 175, 80, 0.4);
}

@media only screen and (max-width: 480px) {
	.jiturei_ba_row {
		gap: 8px;
	}

	.jiturei_ba figcaption {
		font-size: 0.85em;
		padding: 0.25em 0.7em;
	}
}

/* ---------------------------------------------------------
   施工事例タイトル：外国風の庭仕事の丸写真3枚が入った
   画像(ohana_jirei_title.png)をやめ、テキストを中央寄せの
   見出しに変更。
--------------------------------------------------------- */
.jiturei_title {
	padding-left: 0;
	text-align: center;
	padding-top: 0.6em;
	padding-bottom: 1.6em;
}

.jiturei_title_main {
	position: relative;
	display: inline-block;
	margin: 0 !important;
	padding-bottom: 0.5em;
	color: #1f3320;
	font-family: "Shippori Mincho B1", "游明朝", "Yu Mincho", serif;
	font-size: 2.9em;
	font-weight: 800;
	letter-spacing: 0.12em;
	text-shadow: 0 2px 0 rgba(201, 162, 74, 0.15);
}

.jiturei_title_leaf {
	width: 0.6em !important;
	height: auto;
	aspect-ratio: 185 / 91;
	padding: 0 !important;
	vertical-align: middle;
	margin: 0 0.35em;
	opacity: 0.85;
}

.jiturei_title_leaf_l {
	transform: rotate(-15deg);
}

.jiturei_title_leaf_r {
	transform: scaleX(-1) rotate(-15deg);
}

.jiturei_title_main::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: 0;
	transform: translateX(-50%);
	width: 5em;
	height: 3px;
	border-radius: 2px;
	background: linear-gradient(90deg, rgba(225, 207, 151, 0), #c9a24a 20%, #c9a24a 80%, rgba(225, 207, 151, 0));
}

@media only screen and (max-width: 480px) {
	.jiturei_title_main {
		font-size: 2.1em;
	}

	.jiturei_title_leaf {
		width: 0.5em !important;
		margin: 0 0.2em;
	}
}

/* ---------------------------------------------------------
   「お客様の声」の副題バッジ：元の画像で使われていた
   黒背景＋金の上下線のデザインをCSSで再現。タイトルの
   下に配置。
--------------------------------------------------------- */
.koe_title.jiturei_title {
	padding-bottom: 1.2em;
}

.koe_title_badge {
	display: block;
	width: max-content;
	max-width: 90%;
	margin: 0.7em auto 0 !important;
	padding: 0.55em 2em;
	background: #1f3320;
	border-top: 2px solid #c9a24a;
	border-bottom: 2px solid #c9a24a;
	color: #fff;
	font-weight: 700;
	font-size: 1.35em;
	letter-spacing: 0.2em;
}

@media only screen and (max-width: 480px) {
	.koe_title_badge {
		padding: 0.45em 1em;
		font-size: 1.05em;
		letter-spacing: 0.12em;
	}
}

/* ---------------------------------------------------------
   料金エリア見出し：人物写真入りの画像見出し
   (ohana_price_text.png / _rps.png) をやめ、施工事例の
   見出しと同じフォント・装飾のテキスト見出しに変更。
--------------------------------------------------------- */
.price_title {
	text-align: center;
	padding: 1.2em 1em 1.8em;
}

.price_title_main {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.4em;
	margin: 0 !important;
	padding-bottom: 0.5em;
	color: #1f3320;
	font-family: "Shippori Mincho B1", "游明朝", "Yu Mincho", serif;
	font-size: 1.75em;
	font-weight: 800;
	line-height: 1.7;
	letter-spacing: 0.06em;
	text-shadow: 0 2px 0 rgba(201, 162, 74, 0.15);
}

.price_title_main_text {
	display: inline-block;
}

.price_title_line_lead {
	font-size: 0.7em;
}

.price_title_line_emph {
	display: inline-block;
	font-size: 1.2em;
	white-space: nowrap;
}

.price_title_leaf {
	width: 0.55em !important;
	height: auto;
	aspect-ratio: 185 / 91;
	padding: 0 !important;
	flex-shrink: 0;
	margin: 0;
	opacity: 0.85;
}

.price_title_leaf_l {
	transform: rotate(-15deg);
}

.price_title_leaf_r {
	transform: scaleX(-1) rotate(-15deg);
}

.price_title_main::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: 0;
	transform: translateX(-50%);
	width: 5em;
	height: 3px;
	border-radius: 2px;
	background: linear-gradient(90deg, rgba(225, 207, 151, 0), #c9a24a 20%, #c9a24a 80%, rgba(225, 207, 151, 0));
}

@media only screen and (max-width: 480px) {
	.price_title_main {
		font-size: 1.2em;
		gap: 0.25em;
	}

	.price_title_leaf {
		width: 0.5em !important;
	}

	.price_title_line_emph {
		font-size: 1.15em;
	}
}

@media only screen and (max-width: 360px) {
	.price_title_main {
		font-size: 1.05em;
	}
}

/* ---------------------------------------------------------
   料金表：A社・B社との比較表をやめ、
   「おはな造園のサービスと料金」の表に変更。
   4列前提のwidth:800px/min-width:800pxのままだと
   2列なのに不必要に横長・横スクロールになってしまうため、
   幅を2列向けに調整し、不要になった横スクロール案内も隠す。
--------------------------------------------------------- */
.price-compare-table {
	width: 100%;
	max-width: 480px;
	min-width: 0;
}

.scroll-guide {
	display: none;
}

/* スマホ幅：セルの左右余白を少し詰めて、注記(sub)が
   1行に収まりやすいようにし、読みやすさを整える */
@media only screen and (max-width: 480px) {
	.price-compare-table th,
	.price-compare-table td {
		padding: 0.85em 0.5em;
	}

	.price-compare-table .sub {
		font-size: 0.7em;
		line-height: 1.4;
	}
}

/* ---------------------------------------------------------
   料金表ヘッダー：「料金」だけ文字が大きい金色グラデーション
   だったのを、他のセルと同じ文字サイズに揃え、
   見出し行(サービス内容・料金)の背景をサイトのブランドカラー
   の緑に統一する。
--------------------------------------------------------- */
.price-compare-table .koumoku,
.price-compare-table .ohana {
	background: #2c472d;
	color: #fff;
	font-size: 1.1em;
	font-weight: bold;
	text-shadow: none;
}

/* ---------------------------------------------------------
   料金：税込み表記を追加した際、「（税込み）」や「/m²〜」の
   途中で改行されると読みにくいため、まとまりで折り返す。
   価格セル自体も文字量が増えたので少し縮小して収まりやすくする。
--------------------------------------------------------- */
.price-compare-table .ohana-price {
	font-size: 1em;
}

.price-nowrap {
	display: inline-block;
	white-space: nowrap;
}

.tax-note {
	font-size: 0.6em;
	font-weight: normal;
}

@media only screen and (max-width: 480px) {
	.price-compare-table .ohana-price {
		font-size: 0.95em;
	}
}

/* ---------------------------------------------------------
   公式サイト(ohanazoen.jp/price/)にあってこの表になかった
   サービスを追加。「特殊伐採」は公式サイトにも固定の
   最低料金が無く現地見積もりのため、金額の代わりに
   「要お見積もり」を表示する。
--------------------------------------------------------- */
.price-compare-table .ohana-price-quote {
	color: #d64541;
	font-weight: bold;
	font-size: 1em;
}

/* ---------------------------------------------------------
   料金表：サービス内容の文字の上に画像を配置(レイアウト確認用の
   ダミー画像。実写真に差し替え予定)。
--------------------------------------------------------- */
.price-icon-wrap {
	position: relative;
	width: 120px;
	height: 90px;
	margin: 0 auto 0.5em;
	border-radius: 8px;
	overflow: hidden;
}

.price-compare-table .price-icon {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	margin: 0;
}

/* table要素側の word-break:break-all を上書きし、
   「1m〜」等の英数字+記号のまとまりが変な位置で
   改行されないようにする */
.price-icon-label {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 0.3em 0.4em 0.25em;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0));
	color: #fff;
	font-weight: bold;
	font-size: 0.6em;
	line-height: 1.25;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
	text-align: center;
	word-break: keep-all;
	overflow-wrap: normal;
}

@media only screen and (max-width: 480px) {
	.price-icon-wrap {
		width: 96px;
		height: 72px;
		margin-bottom: 0.4em;
	}

	.price-icon-label {
		font-size: 0.62em;
		padding: 0.25em 0.3em 0.2em;
	}
}

/* ---------------------------------------------------------
   料金表：テーブル形式から「白背景カード＋画像は上部のみ」の
   カードグリッドに変更。画像下の文字オーバーレイはやめ、
   カード本体に見出し・注記・料金を通常表示する。
--------------------------------------------------------- */
.price-cards {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.2em;
	max-width: 1100px;
	margin: 2em auto 0;
	padding: 0 1em;
	box-sizing: border-box;
}

.price-card {
	background: #fff;
	border-radius: 14px;
	overflow: hidden;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.1);
	display: flex;
	flex-direction: column;
}

.price-card-img {
	width: 100%;
	aspect-ratio: 4 / 3;
	overflow: hidden;
}

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

.price-card-body {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	padding: 1em 1.1em 1.3em;
}

.price-card-title {
	font-weight: bold;
	font-size: 1.35em;
	color: #1f3320;
	margin: 0 0 0.4em;
}

.price-card-note {
	font-size: 0.92em;
	color: #777;
	line-height: 1.5;
	margin: 0 0 0.9em;
}

.price-card-price {
	margin: auto 0 0;
	font-weight: bold;
	font-size: 1.5em;
	color: #d64541;
}

.price-card-price-quote {
	font-size: 1.05em;
}

@media only screen and (max-width: 768px) {
	.price-cards {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media only screen and (max-width: 480px) {
	.price-cards {
		grid-template-columns: repeat(1, 1fr);
		gap: 0.9em;
	}

	.price-card-title {
		font-size: 1.25em;
	}

	.price-card-note {
		font-size: 0.85em;
		margin-bottom: 0.6em;
	}

	.price-card-price {
		font-size: 1.4em;
	}
}

/* ---------------------------------------------------------
   「5つの特徴」見出し：背景に焼き込まれた画像
   (ohana_tokutyou_title.png)をやめ、テキストに変更。
   「5」を大きく強調し、バッジ部分は実際のロゴ画像に差し替え。
--------------------------------------------------------- */
.tokutyou_title {
	text-align: center;
	padding: 1.6em 1em 1.9em;
}

.tokutyou_title_sub {
	margin: 0 0 0.7em !important;
	color: #fff;
	font-weight: bold;
	font-size: 1.15em;
	line-height: 1.6;
}

.tokutyou_title_main {
	display: inline-flex;
	align-items: flex-end;
	gap: 0.08em;
	margin: 0 !important;
	color: #fff;
	font-family: "Shippori Mincho B1", "游明朝", "Yu Mincho", serif;
	font-weight: 800;
	line-height: 1;
}

.tokutyou_title_num {
	font-size: 3.1em;
	line-height: 0.85;
}

.tokutyou_title_right {
	display: inline-flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.25em;
}

.tokutyou_title_badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: #4f7a56;
	padding: 0.45em 0.9em;
	border-radius: 999px;
	line-height: 0;
}

.tokutyou_title .tokutyou_title_logo {
	display: block;
	height: 2.3em;
	width: auto;
}

.tokutyou_title_text {
	font-size: 2.1em;
	line-height: 1;
}

@media only screen and (max-width: 480px) {
	.tokutyou_title_sub {
		font-size: 1em;
	}

	.tokutyou_title_num {
		font-size: 2.3em;
	}

	.tokutyou_title_text {
		font-size: 1.55em;
	}

	.tokutyou_title_badge {
		padding: 0.35em 0.7em;
	}

	.tokutyou_title .tokutyou_title_logo {
		height: 2em;
		padding: 0;
	}
}

/* ---------------------------------------------------------
   「5つの特徴」の画像：スマホでカード幅いっぱいに広がって
   しまうのを防ぎ、余白のある写真風の見せ方に調整。
--------------------------------------------------------- */
.tokutyou_img img {
	border-radius: 12px;
}

@media only screen and (max-width: 768px) {
	.tokutyou_img img {
		max-width: 78%;
		display: block;
		margin: 0 auto;
	}
}


/* ---------------------------------------------------------
   「評判の一部をご紹介」テストモニアルカード：
   写真に焼き込まれていた「依頼内容／施工費用」バッジ(緑ピル+太字の値)を
   そのままCSSで再現。その下に本数・高さ・面積・回収処分の有無を
   小さなバッジ型タグで並べる。
--------------------------------------------------------- */
.koe_img {
	text-align: center;
}

.koe_img img {
	border-radius: 8px;
}

.koe_price {
	max-width: 260px;
	margin: 0.9em auto 0;
	text-align: center;
}

.koe_badge_row {
	display: flex;
	justify-content: center;
	gap: 1.6em;
	margin: 0 0 0.7em;
}

.koe_badge_item {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.koe_badge_label {
	display: inline-block;
	background: #4f7a56;
	color: #fff;
	font-weight: bold;
	font-size: 0.78em;
	letter-spacing: 0.05em;
	padding: 0.35em 1em;
	border-radius: 999px;
	margin-bottom: 0.4em;
	white-space: nowrap;
}

.koe_badge_value {
	color: #1f3320;
	font-weight: 800;
	font-size: 1.2em;
	white-space: nowrap;
}

.koe_badge_price {
	color: #d64541;
}

.koe_price_num {
	font-size: 1.2em;
}

.koe_price_unit {
	font-size: 0.75em;
	margin-left: 0.05em;
}

.koe_price_tags {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.4em;
	list-style: none;
	margin: 0 !important;
	padding: 0;
}

.koe_price_tags li {
	background: #eef1e9;
	color: #4a5a4a;
	font-size: 0.72em;
	line-height: 1.4;
	padding: 0.3em 0.8em;
	border-radius: 999px;
	white-space: nowrap;
}

/* ---------------------------------------------------------
   電話ボタン(ヘッダー／スマホ下部固定バー)：
   これまで画像(ohana_CVBtn_TEL.png)に「050-1724-3444」と
   「24時間電話受付中」が焼き込まれていたが、実際の受付時間
   (8:00〜18:00)と合っていなかったため、番号と受付時間を
   編集可能なライブテキストに変更。元画像と同じ配色
   (オレンジ地+白背景の受付時間バッジ)を再現。
--------------------------------------------------------- */
/* header_tel／header_mailの両ボタンは共通の.header_cta_btnで
   padding・角丸・高さを完全に統一し、色とテキストだけを
   .tel_btn/.cta_btnで出し分ける(デザインの統一)。 */
.header_cta_btn {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	min-height: 38px;
	border: 2px solid #fff;
	border-radius: 10px;
	text-decoration: none;
	box-sizing: border-box;
	padding: 0.35em 0.3em;
}

.tel_btn {
	background: #e67e22;
}

.cta_btn {
	background: #d64541;
}

.tel_btn_number,
.cta_btn_main {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.15em;
	width: 100%;
	color: #fff;
	font-weight: 800;
	font-size: 10.5px;
	letter-spacing: -0.02em;
	line-height: 1.2;
	white-space: nowrap;
	text-align: center;
}

/* cta_btn_main(「無料で相談する」)はtel_btn_number(電話番号)より
   文字数が多いため、同じ幅でも収まるよう少し小さめのサイズを指定 */
.cta_btn_main {
	font-size: 9px;
	letter-spacing: -0.03em;
}

.cta_btn_arrow {
	font-size: 0.7em;
}

.tel_btn_hours {
	display: block;
	width: 100%;
	margin-top: 0.3em;
	background: #fff;
	color: #e67e22;
	font-weight: bold;
	font-size: 8px;
	line-height: 1.35;
	white-space: nowrap;
	text-align: center;
	border-radius: 10px;
	box-sizing: border-box;
	padding: 0.15em 0.1em;
}

/* ---------------------------------------------------------
   ヘッダーナビゲーションメニューの文字サイズを少し縮小
--------------------------------------------------------- */
.nav_links {
	font-size: 1.15em;
}

.cta_btn_sub {
	display: block;
	width: 100%;
	margin-top: 0.3em;
	background: #fff;
	color: #d64541;
	font-weight: bold;
	font-size: 7px;
	letter-spacing: -0.03em;
	line-height: 1.35;
	white-space: normal;
	text-align: center;
	border-radius: 10px;
	box-sizing: border-box;
	padding: 0.15em 0.1em;
}

@media only screen and (min-width: 421px) {
	.header_cta_btn {
		min-height: 44px;
		padding: 0.45em 0.35em;
	}

	.tel_btn_number,
	.cta_btn_main {
		font-size: 14px;
	}

	.cta_btn_main {
		font-size: 12px;
	}

	.tel_btn_hours,
	.cta_btn_sub {
		font-size: 9px;
	}
}

@media only screen and (min-width: 601px) {
	.header_cta_btn {
		min-height: 52px;
		padding: 0.55em 0.4em;
	}

	.tel_btn_number,
	.cta_btn_main {
		font-size: 17px;
	}

	.cta_btn_main {
		font-size: 15px;
	}

	.tel_btn_hours,
	.cta_btn_sub {
		font-size: 10px;
	}
}

@media only screen and (min-width: 769px) {
	.header_cta_btn {
		min-height: 70px;
		padding: 0.7em 0.5em;
	}

	.tel_btn_number,
	.cta_btn_main {
		font-size: 24px;
	}

	.cta_btn_main {
		font-size: 20px;
	}

	.tel_btn_hours,
	.cta_btn_sub {
		font-size: 13px;
	}
}

/* スマホ下部固定バーのボタンは同じビューポート幅でも
   ヘッダーより横幅が広い(50%)ため、別途大きめのサイズを指定 */
.fix_menu_smartphone .tel_btn_number,
.fix_menu_smartphone .cta_btn_main {
	font-size: 18px;
}

.fix_menu_smartphone .tel_btn_hours,
.fix_menu_smartphone .cta_btn_sub {
	font-size: 11px;
	margin-top: 0.3em;
}

@media only screen and (min-width: 600px) {
	.fix_menu_smartphone .tel_btn_number,
	.fix_menu_smartphone .cta_btn_main {
		font-size: 26px;
	}

	.fix_menu_smartphone .tel_btn_hours,
	.fix_menu_smartphone .cta_btn_sub {
		font-size: 15px;
	}
}

/* ---------------------------------------------------------
   「3つの約束」の見出し：これまで画像(ohana_yakusoku_title.png)
   だったものをテキスト化。「5つの特徴」の見出し(tokutyou_title)と
   同じ構造だが、こちらは明るい背景の上に乗るため黒文字にする。
--------------------------------------------------------- */
.yakusoku_title {
	text-align: center;
	padding: 1.2em 1em 1.8em;
}

.yakusoku_title_main {
	display: inline-flex;
	align-items: flex-end;
	gap: 0.08em;
	margin: 0 !important;
	color: #333;
	font-family: "Shippori Mincho B1", "游明朝", "Yu Mincho", serif;
	font-weight: 800;
	line-height: 1;
}

.yakusoku_title_num {
	font-size: 3.1em;
	line-height: 0.85;
}

.yakusoku_title_right {
	display: inline-flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.25em;
}

.yakusoku_title_badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: #4f7a56;
	padding: 0.45em 0.9em;
	border-radius: 999px;
	line-height: 0;
}

.yakusoku_title .yakusoku_title_logo {
	display: block;
	height: 2.3em;
	width: auto;
}

.yakusoku_title_text {
	font-size: 2.1em;
	line-height: 1;
}

@media only screen and (max-width: 480px) {
	.yakusoku_title_num {
		font-size: 2.3em;
	}

	.yakusoku_title_text {
		font-size: 1.55em;
	}

	.yakusoku_title_badge {
		padding: 0.35em 0.7em;
	}

	.yakusoku_title .yakusoku_title_logo {
		height: 2em;
		padding: 0;
	}
}

/* ---------------------------------------------------------
   「5つの約束」各項目：見出し・番号が焼き込まれた画像
   (ohana_yakusoku_img1〜5.png) をやめ、テキスト化。写真部分は
   番号・見出しを取り除いた円形の写真素材(ohana_yakusoku_photo
   1〜5.png)に差し替え。
--------------------------------------------------------- */
.yakusoku_heading {
	margin: 0 0 0.5em !important;
	min-height: 3.3em;
	color: #222;
	font-family: "Shippori Mincho B1", "游明朝", "Yu Mincho", serif;
	font-weight: 800;
	font-size: 1.15em;
	line-height: 1.4;
}

.yakusoku_heading_lead {
	display: block;
	font-size: 0.85em;
}

.yakusoku_heading_emph {
	display: block;
	font-size: 1.3em;
}

.yakusoku_photo_wrap {
	position: relative;
	margin-top: 0.3em;
}

.yakusoku_photo_wrap img {
	position: relative;
	display: block;
	width: 84%;
	margin: 0 auto;
}

@media only screen and (max-width: 480px) {
	.yakusoku_heading {
		min-height: 0;
		font-size: 1.05em;
	}
}


/* ---------------------------------------------------------
   「お見積もりの流れ」タイトル：見出し画像
   (ohana_nagare_title1.png)をやめ、テキストに変更。
   下の緑の帯線は.nagare_cntnr01のborder-topを流用。
--------------------------------------------------------- */
.sec_nagare .ohana_sec_title {
	padding-top: 1.4em;
	padding-bottom: 1.1em;
}

.nagare_title_main1 {
	margin: 0 !important;
	color: #66a87d;
	font-family: "Shippori Mincho B1", "游明朝", "Yu Mincho", serif;
	font-weight: 800;
	font-size: 2.9em;
	letter-spacing: 0.06em;
}

@media only screen and (max-width: 480px) {
	.nagare_title_main1 {
		font-size: 2.1em;
	}
}

/* ---------------------------------------------------------
   「お見積もりから施工完了までの流れ」タイトル：見出し画像
   (ohana_nagare_title2.png)をやめ、テキストに変更。
   下の赤い帯線は.nagare_cntnr02のborder-topを流用。
--------------------------------------------------------- */
.nagare_title_main2 {
	margin: 0 !important;
	color: #ba272d;
	font-family: "Shippori Mincho B1", "游明朝", "Yu Mincho", serif;
	font-weight: 800;
	font-size: 2.3em;
	line-height: 1.35;
	letter-spacing: 0.02em;
}

.nagare_title2_line1 {
	display: block;
	font-size: 0.72em;
}

.nagare_title2_line2 {
	display: block;
	font-size: 1em;
}

.nagare_title2_emph {
	font-size: 1.25em;
}

@media only screen and (max-width: 480px) {
	.nagare_title_main2 {
		font-size: 1.7em;
	}
}

/* ---------------------------------------------------------
   「よくあるご質問」タイトル：見出し画像
   (ohana_qa_title.png)をやめ、テキストに変更。
--------------------------------------------------------- */
.sec_qa .ohana_sec_title {
	padding-top: 1.4em;
	padding-bottom: 1.2em;
}

.qa_title_badge {
	display: block;
	width: max-content;
	max-width: 90%;
	margin: 0 auto 0.5em !important;
	padding: 0.45em 1.4em;
	background: #66a87d;
	border-radius: 4px;
	color: #fff;
	font-weight: 700;
	font-size: 1.05em;
	letter-spacing: 0.12em;
}

.qa_title_main {
	margin: 0 !important;
	color: #333;
	font-family: "Shippori Mincho B1", "游明朝", "Yu Mincho", serif;
	font-weight: 800;
	font-size: 2.9em;
	letter-spacing: 0.06em;
}

@media only screen and (max-width: 480px) {
	.qa_title_badge {
		padding: 0.4em 1em;
		font-size: 0.85em;
		letter-spacing: 0.08em;
	}

	.qa_title_main {
		font-size: 2.1em;
	}
}