@import url('common.css');

.seo-fii
{
	min-height: 5663px;
	font-size: 16pt;
}

.seo-fii H1.top
{
	display: flex;
	max-height: 480px;
}

.seo-fii H1.top .picture
{
	width: 680px;
	max-width: 95vw;
	height: 480px;
	background: url(../assets/public/financing/immo/main.jpg) no-repeat center center;
	background-size: cover;
}

.seo-fii H1.top .right
{
	width: 600px;
	max-width: 95vw;
	background-color: #FFF3D1;
}

.seo-fii H1.top .right .ttl
{
	padding: 30px 20px 90px;
	font-size: 32pt;
	font-weight: 500;
	text-align: center;
	background: url(../assets/public/commons/blue-arrows.svg) no-repeat center bottom;
	background-size: 140px;
}

.seo-fii H1.top .right .become
{
	width: 450px;
	max-width: 95vw;
	margin: auto;
	padding: 0 0 14px 80px;
	text-align: center;
	font-size: 24pt;
	font-weight: 400;
	background: url(../assets/public/financing/immo/budget.png) no-repeat left center;
	background-size: contain;
}

.seo-fii .chapo .ttl
{
	max-width: 1280px;
	padding: 30px 80px 10px;
	text-align: center;
	font-size: 22pt;
	color: var(--v-smky1fg-base);
	background: url(../assets/public/commons/yellow-arrow.svg) no-repeat 25px -12px var(--v-smky1-base);
	background-size: 80px;
}

.seo-fii .chapo .subpane
{
	display: flex;
	align-items: center;
	max-width: 1050px;
	margin: 0 auto 20px;
}

.seo-fii .chapo .picture
{
	width: 200px;
	height: 280px;
	background: url(../assets/public/financing/immo/euro-house.jpg) no-repeat left center;
	background-size: 150px;
}

.seo-fii .chapo .right
{
	width: 840px;
	max-width: 95vw;
	margin: 10px 0;
	padding: 12px 18px;
	border: 1px solid var(--v-smky1-base);
	border-radius: 30px;
}

.seo-fii .chapo P
{
	text-align: center;
}

.seo-fii .chapo HR
{
	width: 300px;
	height: 3px;
	margin: 30px auto;
	color: var(--v-smky2-base);
	background-color: var(--v-smky2-base);
}

.seo-fii .chapo .note
{
	padding-left: 50px;
	background: url(../assets/images/yellow-arrowflea.svg) no-repeat 0 -2px;
	background-size: 40px;
}

.seo-fii .panel1
{
	max-width: 1032px;
	margin: 20px auto 40px;
}

.seo-fii .panel1 .subpane
{
	display: flex;
	align-items: center;
	gap: 32px;
}

.seo-fii .panel1 .picture
{
	width: 320px;
	height: 280px;
	background: url(../assets/public/financing/immo/wood.jpg) no-repeat left center;
	background-size: contain;
}

.seo-fii .panel1 .list
{
	width: 680px;
	max-width: 95vw;
	padding: 12px 18px;
	font-size: 15pt;
	color: var(--v-smky1fg-base);
	background-color: var(--v-smky1-base);
	border-radius: 30px;
}

.seo-fii .panel1 .item
{
	padding: 10px 10px 10px 50px;
	background: url(../assets/public/commons/yellow-arrow-right.svg) no-repeat 28px 18px;
	background-size: 14px;
}

.seo-fii .panel1 .bottom
{
	max-width: 800px;
	margin: -30px auto 10px;
	padding: 34px 20px 20px 75px;
	background: url(../assets/public/commons/yellow-arrow.svg) no-repeat 0 0;
	background-size: 60px;
}

.seo-fii .panel2
{
	position: relative;
	z-index: 1;
	max-width: 1032px;
	margin: 30px auto 20px;
}

.seo-fii .panel2::before
{
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	opacity: 0.1;
	z-index: -1;
	background: url(../assets/public/financing/immo/economy.jpg) no-repeat center top;
	background-size: cover;
}

.seo-fii .panel2 .item
{
	padding: 30px 20px 20px 180px;
	background: url(../assets/public/commons/euro-hand.png) no-repeat 42px center;
	background-size: 100px;
}
.seo-fii .panel2 .item.i2 { background-image: url(../assets/public/financing/immo/comm.jpg) }
.seo-fii .panel2 .item.i3 { background-image: url(../assets/public/financing/immo/secure-folder.jpg) }

.seo-fii .panel2 .item .ttl
{
	padding-bottom: 10px;
	font-weight: bold;
}

.seo-fii .panel2 .item P
{
	font-size: 14pt;
}

.seo-fii .panel3
{
	max-width: 1032px;
	margin: 30px auto 20px;
}

.seo-fii .panel3 .top
{
	font-size: 18pt;
	font-weight: bold;
	color: var(--v-smky1-base);
}

.seo-fii .panel3 .note
{
	margin: -14px 0 0 80px;
	padding: 34px 20px 20px 75px;
	background: url(../assets/public/commons/yellow-arrow.svg) no-repeat 0 0;
	background-size: 60px;
}

.seo-fii .panel3 .subpane
{
	display: flex;
	align-items: center;
	gap: 32px;
}

.seo-fii .panel3 .left
{
	width: 680px;
	max-width: 95vw;
	padding: 12px 18px;
	font-size: 15pt;
	background-color: #E0CA5F;
}

.seo-fii .panel3 .left .ttl
{
	text-align: center;
	font-size: 17pt;
	font-weight: bold;
}

.seo-fii .panel3 .left .item
{
	padding: 10px 10px 10px 50px;
	background: url(../assets/public/commons/blue-arrow-right.svg) no-repeat 18px 18px;
	background-size: 14px;
}

.seo-fii .panel3 .picture
{
	width: 320px;
	height: 280px;
	background: url(../assets/public/financing/immo/umbrella.jpg) no-repeat left center;
	background-size: contain;
}

.seo-fii .panel3 .bottom
{
	text-align: center;
	padding: 10px 10px 10px 100px;
	background: url(../assets/public/commons/lightbulb-y.svg) no-repeat 40px 24px;
	background-size: 40px;
}

.seo-fii .panel3 .ttl
{
	font-weight: bold;
}

.seo-fii .panel3 HR
{
	width: 300px;
	height: 3px;
	margin: 10px auto;
	background-color: black;
}

.seo-fii .panel3b
{
	max-width: 1032px;
	margin: 10px auto 20px;
}

.seo-fii .panel3b .subpane
{
	padding: 10px 120px 40px 50px;
	color: white;
	background: url(../assets/public/commons/checklist.png) no-repeat right center black;
	background-size: 130px;
	border-radius: 30px;
}

.seo-fii .panel3b .ttl
{
	padding: 0 0 30px 0;
	text-align: center;
	font-size: 20pt;
	font-weight: 500;
	background: url(../assets/public/commons/yellow-line.png) no-repeat 63% 76%;
	background-size: 570px 14px;
}

.seo-fii .panel3b .note
{
	max-width: 800px;
	margin: 0 auto 10px;
	padding: 34px 20px 20px 75px;
	background: url(../assets/public/commons/blue-arrow.svg) no-repeat 0 0;
	background-size: 70px;
}

.seo-fii .panel4
{
	display: flex;
	align-items: center;
	max-width: 1032px;
	margin: 40px auto 0;
}

.seo-fii .panel4 .picture
{
	width: 432px;
	min-width: 355px;
	max-width: 95vw;
	height: 400px;
	background: url(../assets/public/financing/immo/bzh.jpg) no-repeat left center;
	background-size: cover;
}

.seo-fii .panel4 .right
{
	width: 600px;
	max-width: 95vw;
	padding: 12px 18px;
	text-align: center;
}

.seo-fii .panel4 .ttl
{
	font-weight: bold;
	color: var(--v-smky1-base);
}

.seo-fii .panel4 HR
{
	width: 200px;
	height: 2px;
	margin: 30px auto;
	color: var(--v-smky1-base);
	background-color: var(--v-smky1-base);
}

.seo-fii .panel5
{
	max-width: 1032px;
	margin: 0 auto;
	padding: 14px 20px;
	background-color: #F8F8FB;
	border-radius: 30px;
}

.seo-fii .panel5 .ttl
{
	text-align: center;
	font-size: 18pt;
	font-weight: bold;
}

.seo-fii .panel5 .list
{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 20px;
	padding: 20px 0 0 20px;
}

.seo-fii .panel5 .item
{
	display: flex;
	align-items: center;
	max-width: 450px;
	padding: 20px 10px 20px 110px;
	font-size: 14pt;
	background: url(../assets/public/course/blue-file.svg) no-repeat left center;
	background-size: 90px;
}
.seo-fii .panel5 .item.i2 { background-image: url(../assets/public/financing/immo/safety.svg) }
.seo-fii .panel5 .item.i3 { background-image: url(../assets/public/commons/wave-chart.png); max-width: 600px }

.seo-fii .note5,
.seo-fii .note6
{
	text-align: center;
	margin: 40px 110px;
}

.seo-fii .panel6
{
	position: relative;
	z-index: 1;
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	max-width: 1032px;
	margin: 40px auto -20px;
}

.seo-fii .panel6::before
{
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	opacity: 0.1;
	z-index: -1;
	background: url(../assets/public/financing/immo/economy.jpg) no-repeat center top;
	background-size: cover;
	border-radius: 30px;
}

.seo-fii .panel6 .item
{
	max-width: 510px;
	padding: 20px 0 0 124px;
	background: url(../assets/public/financing/immo/blue-check.svg) no-repeat 24px 20px;
	background-size: 80px;
}
.seo-fii .panel6 .item.i2 { background-image: url(../assets/public/financing/immo/blue-light.svg) }
.seo-fii .panel6 .item.i3 { background-image: url(../assets/public/financing/immo/blue-files.svg) }
.seo-fii .panel6 .item.i4 { background-image: url(../assets/public/financing/immo/blue-place.svg) }

.seo-fii .panel6 .item .ttl
{
	padding-bottom: 10px;
	font-weight: bold;
}

.seo-fii .panel6 .item P
{
	font-size: 14pt;
}

.seo-fii .warn
{
	max-width: 1032px;
	margin: 40px auto 0;
	padding: 30px 20px 22px 90px;
	text-align: center;
	background: url(../assets/public/financing/works/exclamation.svg) no-repeat 20px center var(--v-bkgray-base);
	background-size: 50px;
	border-radius: 30px;
}

.seo-fii .panel7
{
	display: flex;
	align-items: center;
	gap: 32px;
	max-width: 1032px;
	margin: 40px auto -10px;
}

.seo-fii .panel7 .picture
{
	width: 500px;
	max-width: 95vw;
	height: 320px;
	background: url(../assets/public/financing/immo/meeting.jpg) no-repeat left center;
	background-size: cover;
	border-radius: 30px;
}

.seo-fii .panel7 .list
{
	width: 500px;
	max-width: 95vw;
	padding: 12px 18px;
	border: 1px solid var(--v-smky1-base);
	border-radius: 30px;
}

.seo-fii .panel7 .item
{
	padding: 10px 0 10px 110px;
	background: url(../assets/public/financing/immo/stars-y.svg) no-repeat 10px center;
	background-size: 80px;
}
.seo-fii .panel7 .item.i2 { background-image: url(../assets/public/financing/immo/puzzle-piece.svg); background-size: 60px; background-position: 26px 10px }
.seo-fii .panel7 .item.i3 { background-image: url(../assets/public/financing/immo/leadership.jpg) }

.seo-fii .note7
{
	max-width: 800px;
	margin: 0 auto 10px;
	padding: 34px 20px 20px 75px;
	font-weight: bold;
	background: url(../assets/public/commons/blue-arrow.svg) no-repeat 0 0;
	background-size: 70px;
}

.seo-fii .panel8 HR
{
	width: 300px;
	height: 2px;
	margin: 20px auto;
	color: var(--v-smky1-base);
	background-color: var(--v-smky1-base);
}

.seo-fii .panel8 .subpane
{
	display: flex;
	align-items: center;
	justify-content: space-around;
	flex-wrap: wrap;
	max-width: 800px;
	margin: auto;
}

.seo-fii .panel8 .start-project
{
	margin: 40px;
}

.seo-fii .panel8 .link
{
	margin-bottom: 20px;
}

@media (max-width: 900px)
{
	.seo-fii .chapo .ttl
	{
		padding: 30px 12px 10px;
		background-image: none;
	}
}

@media (max-width: 800px)
{
	.seo-fii H1.top
	{
		flex-direction: column;
		align-items: center;
		max-height: unset;
	}

	.seo-fii H1.top .picture
	{
		height: 60vw;
	}

	.seo-fii .chapo .ttl
	{
		padding-top: 10px;
	}

	.seo-fii .chapo .picture
	{
		width: 28vw;
		background-size: 16vw;
    	background-position-x: 1vw;
	}

	.seo-fii .panel1 .subpane
	{
		flex-direction: column;
	}

	.seo-fii .panel1 .picture
	{
		height: 37vw;
		background-position: center;
	}

	.seo-fii .panel1 .bottom
	{
		margin-top: 0;
		padding: 70px 10px 0 10px;
		text-align: center;
		background: url(../assets/public/commons/yellow-arrow-down.svg) no-repeat center top;
		background-size: 20px;
	}

	.seo-fii .panel2 .item
	{
		padding: 10px 10px 10px 120px;
		background-position-x: 20px;
		background-size: 70px;
	}

	.seo-fii .panel4,
	.seo-fii .panel7
	{
		flex-direction: column;
	}

	.seo-fii .panel4 .picture
	{
		height: 316px;
		background-position-y: top;
	}

	.seo-fii .note5,
	.seo-fii .note6
	{
		margin: 20px;
	}
}

@media (max-width: 600px)
{
	.seo-fii .chapo .subpane
	{
		flex-direction: column;
	}

	.seo-fii .chapo .picture
	{
		height: 20vw;
		min-height: 115px;
    	background-position-x: center;
		background-size: 100px;
	}

	.seo-fii .panel2 .item
	{
		padding: 100px 10px 10px 10px;
		background-position: center 10px;
		background-size: 70px;
	}

	.seo-fii .panel3 .note
	{
		margin-left: 20px;
	}

	.seo-fii .panel3 .subpane
	{
		flex-direction: column-reverse;
	}

	.seo-fii .panel3 .picture
	{
		background-position-x: center;
	}

	.seo-fii .panel3 .bottom
	{
		padding-left: 60px;
		background-position-x: 20px;
		background-size: 30px;
	}

	.seo-fii .panel3b .subpane
	{
		padding: 10px 20px 120px 20px;
		background-position: center 98%;
		background-size: 100px
	}
}

@media (max-width: 500px)
{
	.seo-fii H1.top .right .become
	{
		font-size: 20pt;
		background-size: 75px;
		background-position-x: 18px;
	}
}