@charset "UTF-8";

@font-face {
    font-family: 'Charmonman';
    src: url(/fonts/Charmonman-Regular.ttf);
    font-weight: 400;
    font-display: swap;
}

@font-face {
	font-family: 'Charmonman';
    src: url(/fonts/Charmonman-Bold.ttf);
    font-weight: 700;
    font-display: swap;
}

body {
	/*スマホで勝手に文字が大きくなる対策*/
	-webkit-text-size-adjust: 100%;
}
#contents,
.l-main {
	width: 100%;
	margin: 0;
	padding: 0;
	background: #fff;
	overflow: hidden;
}
.l-main * {
	font-family: "Yu Gothic", "Yu Gothic Medium", "游ゴシック体", "YuGothic", sans-serif;
}
.mv__img {
	width: 100%;
	height: 500px;
}
	.mv__img img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

[class*="cnt__wrap"] {
	padding-block: 80px;
}
	[class*="cnt__inner"] {
		width: 1140px;
		margin-inline: auto;
	}
		[class*="cnt__heading"] {
			font-size: 26px;
			font-weight: 700; 
			color: #263238;
		}
		[class*="cnt__sub-heading"] {
			display: block;
			font-size: 12px;
			font-weight: 400;
			letter-spacing: 0.25em;
			color: #DC143C;
			margin-top: 10px;
		}

/*///////////////////// こんな場合はご相談ください！ ////////////////////*/
.cnt__inner--consultation {
	padding-top: 80px;
	position: relative;
	z-index: 1;
}
.cnt__inner--consultation::after {
	content: "";
	width: 1100px;
	height: 439px;
	background: url(../images/consultation.webp) no-repeat center / cover;
	position: absolute;
	top: 0;
	left: 430px;
	z-index: -1;
}
	.cnt__list--consultation {
		display: flex;
		flex-direction: column;
		gap: 19px;
		width: 664px;
		border: 1px solid rgba(255, 85, 85, 0.15);
		background: #FFF;
		padding: 30px 29px;
		margin-top: 40px;
	}
		.cnt__item--consultation {
			display: flex;
			gap: 7px;
			padding: 0 14px 13px;
			border-bottom: 1px solid rgba(0, 0, 0, 0.10);
			font-size: 19px;
			font-weight: 700;
			line-height: 1.3;
			color: #263238;
		}
		.cnt__item--consultation:last-child {
			padding-bottom: 0;
			border-bottom: none;
		}
		.cnt__item--consultation::before {
			content: "";
			display: block;
			width: 17px;
			height: 12px;
			background: url(../images/check_icn.svg) no-repeat center / cover;
			margin-top: 6px;
		}

/*///////////////////// こんな場合はご相談ください！ ////////////////////*/
.cnt__wrap--reason {
	padding-block: 100px;
	background: #FFF9F9;
}
	.cnt__heading--reason,
	.cnt__sub-heading--reason {
		text-align: center;
	}
		.cnt__heading--reason__number {
			color: #DC143C;
		}
	.cnt__list--reason {
		margin-top: 40px;
		display: flex;
		flex-direction: column;
		gap: 10px;
		counter-reset: reason-count;
	}
		.cnt__item--reason {
			display: flex;
			align-items: center;
			justify-content: space-between;
			background: #FFF;
			padding-left: 40px;
			counter-increment: reason-count;
			position: relative;
		}
		.cnt__item--reason::before {
			content: counter(reason-count);
			display: block;
			font-family: "Charmonman", cursive;
			font-size: 80px;
			font-weight: 400;
			line-height: 48px;
			color: rgba(220, 20, 60, .08);
			position: absolute;
			top: 20px;
			left: 15px;
			z-index: 0;
		}
		    .cnt__item--reason dl {
				display: flex;
				flex-direction: column;
				gap: 10px;
				position: relative;
				z-index: 1;
			}
			    .cnt__item--reason dl dt {
					font-size: 19px;
					font-weight: 700;
					line-height: 1.3;
					color: #263238;
				}
				.cnt__item--reason dl dt span {
					color: #DC143C;
				}
				.cnt__item--reason dl dd {
					font-size: 16px;
					font-weight: 500;
					line-height: 1.8;
					color: #263238;
				}

/*///////////////////// あなたのご検討している物件、住宅ローン減税は受けられますか？ ////////////////////*/
.cnt__heading--loan,
.cnt__sub-heading--loan {
	text-align: center;
}
.cnt__text--loan {
	font-size: 16px;
	font-weight: 500;
	line-height: 1.8;
	color: #263238;
	text-align: center;
	margin-top: 31px;
}
.cnt__loan__title {
	font-size: 19px;
	font-weight: 700;
	line-height: 1.3;
	color: #000;
	text-align: center;
	margin-top: 30px;
}
	.cnt__loan__title span {
		color: #DC143C;
	}
.cnt__loan__img {
	width: 1140px;
	margin-top: 19px;
}
	.cnt__loan__img img {
		width: 100%;
		object-fit: cover;
	}

/*///////////////////// 購入から契約までの流れ ////////////////////*/
.cnt__wrap--flow {
	background: #FFF9F9;
}
	.cnt__heading--flow,
	.cnt__sub-heading--flow {
		text-align: center;
	}
	.cnt__list--flow {
		margin-top: 80px;
		display: flex;
		justify-content: space-between;
		counter-reset: flow-count;
		position: relative;
		z-index: 1;
	}
	.cnt__list--flow::before {
		content: "";
		width: 993px;
		height: 12px;
		background: url(../images/flow_arrow.svg) no-repeat center / cover;
		position: absolute;
		top: -21px;
		left: 55px;
	}
		.cnt__item--flow {
			display: flex;
			justify-content: center;
			width: 125px;
			height: 444px;
			padding-top: 28px;
			background: #FFF;
			position: relative;
			counter-increment: flow-count;
		}
		.cnt__item--flow::before {
			content: counter(flow-count);
			display: flex;
			align-items: center;
			justify-content: center;
			font-family: "Charmonman", cursive;
			font-size: 26px;
			font-weight: 700;
			line-height: 1;
			color: #fff;
			width: 44px;
			height: 50px;
			background: url(../images/flow_polygon.svg) no-repeat center / cover;
			padding-top: 4px;
			position: absolute;
			top: -40px;
			left: 0;
			right: 0;
			margin-inline: auto;
			z-index: 0;
		}
			.cnt__flow__title {
				font-size: 22px;
				font-weight: 700;
				line-height: 1.3;
				color: #263238;
				writing-mode: vertical-lr;
				text-orientation: upright;
			}
				.cnt__flow__title span {
					font-size: 18px;
				}
			.cnt__flow__title-space {
				letter-spacing: 0.095em;
			}

/*///////////////////// お問い合わせ ////////////////////*/
.cnt__wrap--contact {
	background: url(../images/contact_img.webp) no-repeat center / cover;
}
	.cnt__inner--contact {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 939px;
		background: #FFF;
		padding: 53px 60px 60px;
	}
		.cnt__heading--contact {
			margin-top: 7px;
		}
		.contact__box {
			display: flex;
			align-items: center;
			gap: 31px;
			width: fit-content;
			margin-top: 10px;
		}
			.contact__box-left {
				width: fit-content;
			}
				.contact__tel {
					display: flex;
					align-items: center;
					gap: 7px;
					font-size: 36px;
					font-weight: 700;
					line-height: 1.2;
					color: #263238;
				}
				.contact__tel::before {
					content: "";
					display: block;
					width: 26px;
					height: 26px;
					background: url(../images/tel_icn.svg) no-repeat center / cover;
					margin-bottom: 3px;
				}
				.contact__times {
					display: flex;
					gap: 13px;
				}
					.contact__time {
						font-size: 13px;
						font-weight: 500;
						color: #263238;
					}
					.contact__time span {
						color: #DC685D;
					}
			.contact__box-right {
				width: 300px;
				margin-top: 3px;
			}
				.contact__box-right a {
					display: flex;
					align-items: center;
					gap: 3px;
					width: 300px;
					height: 60px;
					border-radius: 3px;
					box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.05);
					border: 1px solid #DC143C;
					background: #DC143C;
					padding-left: 20px;
					font-size: 19px;
					font-weight: 700;
					line-height: 1.3;
					color: #fff;
					position: relative;
					transition: .4s;
				}
				.contact__box-right a::before {
					content: "";
					display: block;
					width: 30px;
					height: 30px;
					background: url(../images/contact_bt-icn.svg) no-repeat center / cover;
					transition: .4s;
				}
				.contact__box-right a::after {
					content: "";
					width: 20px;
					height: 6px;
					background: url(../images/contact_arrow.svg) no-repeat center / cover;
					position: absolute;
					right: 18px;
					top: 50%;
					transform: translateY(-50%);
					transition: .4s;
				}
				.contact__box-right a:hover {
					opacity: 1;
					background: #fff;
					color: #DC143C;
				}
				.contact__box-right a:hover::before {
					background: url(../images/contact_bt-icn-on.svg) no-repeat center / cover;
				}
				.contact__box-right a:hover::after {
					background: url(../images/contact_arrow-on.svg) no-repeat center / cover;
				}