@import url('common.css');

.seo-paa
{
	font-size: 16pt;
}

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

.seo-paa H1.top .picture
{
	width: 680px;
	height: 480px;
	background: url(../assets/public/partners/mediators/main.jpg) no-repeat center center;
	background-size: cover;
}

.seo-paa H1.top .right
{
	width: 600px;
}

.seo-paa H1.top .right .ttl
{
	padding: 30px 60px 30px;
	font-size: 32pt;
	font-weight: 500;
	text-align: center;
	background: url(../assets/public/commons/yellow-line.png) no-repeat 75% 95%;
	background-size: 500px 14px;
}

.seo-paa H1.top .become
{
	padding-bottom: 10px;
	text-align: center;
	font-size: 20pt;
	color: var(--v-smky1-base);
}

.seo-paa .chapo .top
{
	padding: 16px 180px;
	text-align: center;
	font-size: 20pt;
	font-weight: bold;
	color: var(--v-smky1fg-base);
	background-color: var(--v-smky1-base);
}

.seo-paa .chapo .subpane
{
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 20px;
	max-width: 1032px;
	margin: 0 auto 40px;
	padding-bottom: 20px;
}

.seo-paa .chapo .subpane::before
{
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	opacity: 0.1;
	z-index: -1;
	background: url(../assets/public/solutions/assistant/assistant.jpg) no-repeat center top;
	background-size: cover;
}

.seo-paa .chapo .ttl
{
	padding: 20px 40px;
	font-size: 24pt;
	font-weight: bold;
	background: url(../assets/public/commons/yellow-line.png) no-repeat 75% 95%;
	background-size: 500px 14px;
}

.seo-paa .chapo .list
{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 90px;
}

.seo-paa .chapo .item
{
	padding: 40px 0 40px 100px;
	font-weight: bold;
	background: url(../assets/public/partners/mediators/winner.png) no-repeat left center;
}
.seo-paa .chapo .item.i1 { padding-left: 120px }
.seo-paa .chapo .item.i2 { background-image: url(../assets/public/partners/mediators/clack.png) }
.seo-paa .chapo .item.i3 { background-image: url(../assets/public/partners/mediators/vision.png) }

.seo-paa .chapo .bottom
{
	padding: 16px 20px 16px 50px;
	font-size: 17pt;
	font-style: italic;
	font-weight: bold;
	color: var(--v-smky1-base);
	background: url(../assets/images/yellow-arrowflea.svg) no-repeat left center;
}

.seo-paa .panel1 .ttl
{
	text-align: center;
}

.seo-paa .panel1 .subpane
{
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
}

.seo-paa .panel1 .picture
{
	width: 500px;
	height: 400px;
	background: url(../assets/public/partners/mediators/men-women.jpg) no-repeat center center;
	background-size: contain;
}

.seo-paa .panel1 .arrow
{
	width: 84px;
	height: 50px;
	background: url(../assets/public/commons/arrow-right-circle-yellow.svg) no-repeat right center;
	background-size: 46px;

}

.seo-paa .panel1 .right
{
	width: 500px;
	margin: 0 10px 0 36px;
	padding: 270px 0 0 0;
	text-align: center;
	font-style: italic;
	background: url(../assets/public/home/mockup.jpg) no-repeat center top;
	background-size: contain;
}

.seo-paa .panel2
{
	max-width: 1032px;
	margin: 10px auto 50px;
	color: white;
	background-color: black;
}

.seo-paa .panel2 STRONG
{
	color: var(--v-smky2-base);
}

.seo-paa .panel2 H3
{
	padding: 20px 40px;
	text-align: center;
	font-size: 24pt;
	background: url(../assets/public/commons/yellow-line.png) no-repeat 55% 95%;
	background-size: 600px 14px;
}

.seo-paa .panel2 H3 SPAN
{
	display: none;
}

.seo-paa .panel2 .subpane
{
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 32px;
	margin: 40px;
}

.seo-paa .panel2 .list
{
	display: flex;
	flex-direction: column;
	gap: 20px;
	width: 500px;
}

.seo-paa .panel2 .item
{
	padding: 40px 0 40px 150px;
	font-weight: bold;
	background: url(../assets/public/commons/blue-files.svg) no-repeat 20px center;
	background-size: 100px;
}
.seo-paa .panel2 .item.i2 { background-image: url(../assets/public/commons/suivi.png) }
.seo-paa .panel2 .item.i3 { background-image: url(../assets/public/commons/worker.png) }

.seo-paa .panel2 .picture
{
	width: 300px;
	min-width: 300px;
	height: 400px;
	background: url(../assets/public/commons/hand-smartphone.jpg) no-repeat center center;
	background-size: contain;
	border-radius: 38px;
}

.seo-paa .panel2 .note
{
	padding: 20px;
	text-align: center;
}

.seo-paa .panel3
{
	max-width: 990px;
	margin: 30px auto;
}

.seo-paa .panel3 H3
{
	padding: 20px 40px;
	text-align: center;
	font-size: 24pt;
	background: url(../assets/public/commons/yellow-line.png) no-repeat 55% 95%;
	background-size: 600px 14px;
}

.seo-paa .panel3 .subpane
{
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.seo-paa .panel3 .picture
{
	width: 450px;
	height: 500px;
	background: url(../assets/public/partners/mediators/bzh.jpg) no-repeat center center;
	background-size: contain;
}

.seo-paa .panel3 .list
{
	width: 540px;
}

.seo-paa .panel3 .item
{
	padding: 40px 0 40px 120px;
	background: url(../assets/public/partners/mediators/check.svg) no-repeat 60px center;
	background-size: 40px;
}
.seo-paa .panel3 .item.i2 { background-image: url(../assets/public/partners/mediators/phone.svg) }
.seo-paa .panel3 .item.i3 { background-image: url(../assets/public/commons/handshake-b.svg) }

.seo-paa .panel3 .bottom
{
	padding: 16px 20px;
	text-align: center;
	background-color: var(--v-bkgray-base);
	border: 3px dashed var(--v-smky1-base);
	border-radius: 30px;
}

.seo-paa .panel3 .lnk
{
	padding: 20px;
	text-align: center;
}

.seo-paa .panel4
{
	max-width: 1032px;
	margin: auto;
}

.seo-paa .panel4 .top
{
	padding: 14px 20px;
	background-color: #E0CA5F;
	border-radius: 30px;
}

.seo-paa .panel4 .top .ttl
{
	font-size: 17pt;
	font-weight: bold;
}

.seo-paa .panel4 .top .note
{
	padding: 15px 20px 0px 80px;
	font-size: 15pt;
	background: url(../assets/public/commons/blue-arrow.svg) no-repeat 9px -13px;
	background-size: 60px;
}

.seo-paa .panel4 H3
{
	margin: 30px 0;
}

.seo-paa .panel4 .list
{
	max-width: 960px;
	margin: 20px auto;
}

.seo-paa .panel4 .item
{
	display: flex;
	align-items: center;
	padding: 0 50px 40px;
	gap: 50px;
}

.seo-paa .panel4 .item:not(:last-child)
{
	background: url(../assets/public/commons/dashed-vert-line.png) repeat-y 100px 4px;
}

.seo-paa .panel4 .item .picture
{
	min-width: 100px;
	max-width: 100px;
	height: 100px;
	background: url(../assets/public/course/blue-pen.svg) no-repeat right top;
	background-size: contain;
}

.seo-paa .panel4 .item.i2 .picture { background-image: url(../assets/public/partners/mediators/chatbox.svg) }
.seo-paa .panel4 .item.i3 .picture { background-image: url(../assets/public/commons/computer.svg) }
.seo-paa .panel4 .item.i4 .picture { background-image: url(../assets/public/partners/mediators/hand-diagram.svg) }

.seo-paa .panel4 .item .border
{
	min-width: 700px;
	padding: 10px 20px;
	background-color: var(--v-bkgray-base);
	border-radius: 20px;
}

.seo-paa .panel4 .bottom
{
	margin: 0 40px 40px;
	padding: 14px;
	text-align: center;
	color: var(--v-smky1-base);
	font-weight: bold;
	border: 1px solid black;
}

.seo-paa .panel4 .bottom A
{
	display: none;
}

.seo-paa .panel5
{
	max-width: 1032px;
	margin: auto;
}

.seo-paa .panel5 > P:first-child
{
	text-align: center;
	margin-bottom: -20px;
}

.seo-paa .panel5 .arrows
{
	width: 140px;
	height: 140px;
	margin: auto;
	background: url(../assets/public/commons/black-arrows.svg) no-repeat center center;
	background-size: contain;
	transform: rotate(90deg);
}

.seo-paa .panel5 .list
{
	margin: -40px auto 30px;
	padding: 30px 20px 30px 420px;
	background: url(../assets/public/partners/mediators/guys.png) no-repeat 30px center var(--v-bkgray-base);
	background-size: 360px;
}

.seo-paa .panel5 .list P
{
	padding-left: 50px;
	background: url(../assets/public/commons/yellow-arrow-right.svg) no-repeat 7px 7px;
	background-size: 17px;
}

.seo-paa .panel6
{
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 40px;
}

.seo-paa .panel6 P
{
	max-width: 1000px;
	margin: 0px auto;
	text-align: center;
}

.seo-paa .panel6 P:last-child
{
	margin: -20px auto 40px;
	padding: 24px 10px 24px 100px;
	background: url(../assets/public/commons/idea.png) no-repeat left center;
	background-size: 76px;
}

@media (max-width: 1280px)
{
	.seo-paa H1.top .picture
	{
		max-width: 42%;
		height: 37vw;
		background-position-x: left;
	}

	.seo-paa H1.top .right
	{
		width: 57%;
	}

	.seo-paa H1.top .right .ttl
	{
		padding: 30px;
		font-size: 26pt;
	}
}

@media (max-width: 1050px)
{
	.seo-paa
	{
		font-size: 15pt;
	}

	.seo-paa H1.top .right .ttl
	{
		padding: 20px;
		font-size: 24pt;
	}

	.seo-paa .chapo .top
	{
		padding: 16px;
	}

	.seo-paa .panel1 .subpane
	{
		gap: 10px;
	}

	.seo-paa .panel1 .arrow
	{
		width: 50px;
		min-width: 50px;
		background-position-x: center;
	}

	.seo-paa .panel1 .right
	{
		margin-left: 0;
		padding-top: 250px;
	}

	.seo-paa .panel4 H3
	{
		text-align: center;
	}

	.seo-paa .panel4 .item
	{
		gap: 40px;
	}
}

@media (max-width: 900px)
{
	.seo-paa H1.top .picture
	{
		height: 34vw;
	}

	.seo-paa H1.top .right .ttl
	{
		margin-bottom: 0;
		padding-bottom: 10px;
		font-size: 20pt;
		background-position-y: bottom;
		background-size: 40vw;
	}

	.seo-paa .chapo .list
	{
		gap: 40px;
	}

	.seo-paa .panel4 .item .border
	{
		min-width: calc(100vw - 200px);
	}
}

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

	.seo-paa H1.top .picture
	{
		max-width: 100vw;
		height: 70vw;
		max-height: 380px;
		min-height: 259px;
		background-size: cover;
		background-position-x: center;
	}

	.seo-paa H1.top .right
	{
		max-width: unset;
		width: 100%;
	}

	.seo-paa .panel1 .subpane,
	.seo-paa .panel2 .subpane
	{
		flex-direction: column;
	}

	.seo-paa .panel1 .picture
	{
		height: 350px;
		margin: 5px auto 0;
		background-position-y: bottom;
	}

	.seo-paa .panel1 .arrow
	{
		transform: rotate(90deg);
	}

	.seo-paa .panel1 .right
	{
		margin-right: 0;
		padding-top: 260px;
	}

	.seo-paa .panel2 .list
	{
		width: unset;
	}

	.seo-paa .panel5 .list
	{
		padding: 400px 22vw 5px 26vw;
		background-position: center 20px;
	}
}

@media (max-width: 700px)
{
	.seo-paa .panel3 .subpane
	{
		flex-direction: column;
	}

	.seo-paa .panel3 .picture
	{
		width: 100%;
		height: 50vw;
		margin-bottom: -20px;
	}

	.seo-paa .panel3 .list
	{
		width: unset;
	}

	.seo-paa .panel3 .item
	{
		padding: 20px 10px 20px 80px;
		background-position-x: 20px;
	}
}

@media (max-width: 600px)
{
	.seo-paa .panel6 .subscribe
	{
		width: 420px;
		padding: 20px 0;
		background: none;
	}

	.seo-paa .panel4 .item
	{
		align-items: flex-start;
		gap: 20px;
		padding-left: 20px;
	}

	.seo-paa .panel4 .item:not(:last-child)
	{
		background-position-x: 70px;
	}

	.seo-paa .panel4 .item .border
	{
		min-width: calc(100vw - 160px);
	}

	.seo-paa .panel5 .list
	{
		padding: 67vw 18vw 5px 18vw;
		background-size: 60vw;
	}
}

@media (max-width: 500px)
{
	.seo-paa .panel1 .picture
	{
		width: 97%;
		height: 65vw;
	}

	.seo-paa .panel1 .right
	{
		width: 97%;
		padding-top: 52vw;
	}

	.seo-paa .panel3 .picture
	{
		height: 70vw;
	}

	.seo-paa .panel5 .list
	{
		padding: 67vw 15vw 5px 15vw;
	}
}

@media (max-width: 430px)
{
	.seo-paa .panel5 .list
	{
		padding: 67vw 6vw 5px 6vw;
	}

	.seo-paa .subscribe,
	.seo-paa .panel6 .subscribe
	{
		width: 98%;
	}
}