@charset "utf-8";
/* ------------------------------------------------------------------------ */

/*  共通CSS

/* ------------------------------------------------------------------------ */

#recruit-nav{
	border-image-source: linear-gradient(#1E4ED8,#1E4ED8);
}

#contentsBlock .com-btnBox{
	margin-top: 112px;
}
#contentsBlock .com-btnBox a{
	text-align: center;
	padding: 29px 10px 30px;
	border-radius: 40px;
}
#contentsBlock .com-btnBox a.com-btn::before{
	content: "";
	display: inline-block;
	width: 13px;
	height: 7px;
	background: url("/assets/recruit/jobs/crosstalk/img/icon_arrow.svg") no-repeat center / contain;
	margin-right: 18px;
	margin-bottom: 3px;
}
#contentsBlock .com-btnBox a.com-btn::after{
	content: none;
}

[id^="sec_"] .contents > .inner{
	margin: 0 auto;
	max-width: 900px;
	width: 100%;
}
[id^="talk"] .contents{
	background: #ECF1FF;
	border-radius: 100px;
	padding: 100px 23px 0;
	position: relative;
}
[id^="talk"] .contents > .inner{
	max-width: 900px;
	width: 100%;
	margin: 0 auto;
}

[id^="talk"] .contents .ttl{
	font-size: 4rem;
	font-weight: 900;
	line-height: 1.65;
	position: relative;
	color: #378CFA;
}

[id^="talk"] .contents .ttl::before{
	content: "";
	display: block;
	background: url("/assets/recruit/jobs/crosstalk/img/p_crosstalk_en.svg") no-repeat center / contain;
	max-width: 364px;
	aspect-ratio:364/86;
	width: 100%;
	margin: 0 auto 43px;
}

.personBox{
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 30px;
	padding: 0 35px;
	margin-top: 40px;
}
.personBox li{
	position: relative;
	max-width: 320px;
	width: calc(100% / 2);
}
.personBox li figure img{
	border-radius: 50%;
	overflow: hidden;
}
.personBox li.cross{
	content: "";
	display: block;
	background: url("/assets/recruit/jobs/crosstalk/img/icon_x.svg") no-repeat center / contain;
	max-width: 111px;
	width: 17%;
	aspect-ratio: 1/1;
	margin-top: 12%;
}

.personBox .caption{
	font-weight: 900;
}
.personBox .caption .bold{
	font-size: 3rem;
	font-weight: 900;
}
.personBox .caption .min{
	font-size: 1.8rem;
	font-weight: 500;
}

.personBox .txt{
	color: #333333;
	text-align: left;
	margin-top: 16px;
	line-height: 2;
}


[id^="talk"] .container{
	margin-top: 160px;
}
[id^="talk"] .container1{
	margin-top: 60px;
}

[id^="talk"] .firstBox{
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	min-height: 495px;
}
[id^="talk"] .left .firstBox{
	flex-direction: row-reverse;
}
[id^="talk"] .firstBox .figBox{
	max-width: 790px;
	width: 90%;
	aspect-ratio: 790 / 494;
	overflow: hidden;
	position: absolute;
}
	[id^="talk"] .right .figBox{
		border-top-left-radius: 50px;
		right: 0;
	}
	[id^="talk"] .left .figBox{
		border-top-right-radius: 50px;
		left: 0;
	}

[id^="talk"] .firstBox .ttlBox{
	text-align: left;
	max-width: 540px;
	width: 100%;
	background: #ECF1FF;
	padding-top: 30px;
	position: relative;
	z-index: 10;
}
[id^="talk"] .right .ttlBox{
	border-top-right-radius: 50px;
	padding-right: 30px;
}
[id^="talk"] .left .ttlBox{
	border-top-left-radius: 50px;
	padding-left: 30px;
}

[id^="talk"] .ttlBox .label{
	color: #1E4ED8;
	font-size: 2.2rem;
	font-weight: 700;
}
	[id^="talk"] .ttlBox .label span{
		display: inline-block;
		background: #1E4ED8;
		border-radius: 19px;
		width: 150px;
		line-height: 38px;
		text-align: center;
		color: #fff;
		font-size: 2.2rem;
		font-family: "Dosis", sans-serif;
		font-weight: 900;
		letter-spacing: 0.05em;
		margin-right: 16px;
	}

[id^="talk"] .ttlBox h3{
	font-size: 3.6rem;
	font-weight: 900;
	color: #378CFA;
	margin-top: 18px;
}

[id^="talk"] .leadBox{
	text-align: left;
	margin-top: 60px;
}
[id^="talk"] .leadBox + .leadBox{
	margin-top: 20px;
}
	[id^="talk"] .leadBox dt{
		float: left;
		width: 90px;
		line-height: 2;
		font-weight: 700;
	}
	[id^="talk"] .leadBox dd{
		font-size: 1.8rem;
		padding-left: 90px;
		line-height: 2;
	}
	[id^="talk"] .leadBox dd::after{
		content: "";
		display: block;
		clear: both;
	}

[id^="talk"] .talkBox{
	margin-top: 60px;
}
[id^="talk"] .talkBox li{
	display: flex;
	justify-content: flex-start;
	align-items: stretch;
	text-align: left;
}
[id^="talk"] .talkBox li.row-left{
	flex-direction: row-reverse;
}

[id^="talk"] .talkBox li + li{
	margin-top: 50px;
}

[id^="talk"] .talkBox li figure{
	width: 120px;
	flex-shrink: 0;
}
[id^="talk"] .talkBox li.row-right figure{
	margin-right: 55px;
}
[id^="talk"] .talkBox li.row-left figure{
	margin-left: 55px;
}
	[id^="talk"] .talkBox figure img{
		border-radius: 50%;
	}
	[id^="talk"] .talkBox figure figcaption{
		font-weight: 900;
		margin-top: 10px;
		text-align: center;
	}
		[id^="talk"] .talkBox figcaption .big{
			font-size: 1.8rem;
		}

[id^="talk"] .talkBox .txtBox{
	background: #fff;
	width: calc(100% - 175px);
	position: relative;
	border-radius: 10px;
	padding: 25px 49px 25px 51px;
	font-size: 2rem;
	font-weight: 700;
	line-height: 1.8;
	display: flex;
	justify-content: center;
	align-items: center;
	max-width: 700px;
}
[id^="talk"] .talkBox li.row-right .txtBox::before{
	content: "";
	display: block;
	width: 0;
	height: 0;
	border-style: solid;
	border-top: 15px solid transparent;
	border-bottom: 15px solid transparent;
	border-right: 36px solid #ffffff;
	border-left: 0;
	position: absolute;
	top: 30px;
	right: 100%;
}
[id^="talk"] .talkBox li.row-left .txtBox::before{
	content: "";
	display: block;
	width: 0;
	height: 0;
	border-style: solid;
	border-top: 15px solid transparent;
	border-bottom: 15px solid transparent;
	border-left: 36px solid #ffffff;
	border-right: 0;
	position: absolute;
	top: 30px;
	left: 100%;
}


.sec_message h3{
	font-size: 4rem;
	font-weight: 900;
	color: #1E4ED8;
}
.sec_message h3::before{
	display: block;
	content: "Message";
	color: #fff;
	font-family: "Dosis", sans-serif;
	font-size: clamp(2rem,22vw,25.2rem);
	margin-bottom: -60px;
}
.sec_message h3 span{
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 25px;
}
.sec_message h3 span::after,
.sec_message h3 span::before{
	content: "";
	display: block;
	background: url("/assets/recruit/jobs/crosstalk/img/icon_01.svg") no-repeat center / contain;
	width: 48px;
	height: 97px;
}
.sec_message h3 span::before{
	transform: scale(-1,1);
}
.sec_message p {
	margin: 40px -23px 0;
}

@media screen and (max-width: 1024px){
	[id^="talk"] .firstBox{
		min-height: 54vw;
	}
}
@media screen and (max-width: 767px){
	#contentsBlock .com-btnBox{
		margin-top: 60px;
	}
	
	[id^="talk"] .contents{
		border-radius: 50px;
		padding-top: 60px;
	}
	[id^="talk"] .contents .ttl{
		font-size: clamp(1.5rem,6vw,3rem);
	}
	
	[id^="talk"] .container{
		margin-top: 80px;
	}
	[id^="talk"] .container1 {
		margin-top: 40px;
	}
	
	[id^="talk"] .firstBox{
		min-height: inherit;
		flex-direction: column;
	}
	[id^="talk"] .left .firstBox{
		flex-direction: column-reverse;
	}
	[id^="talk"] .firstBox .figBox{
		margin-top: 20px;
		position: inherit;
	}
	[id^="talk"] .right .figBox{
		position: inherit;
		margin-right: -23px;
	}
	[id^="talk"] .left .figBox{
		margin: 20px auto 0 0;
		transform: translateX(-23px);
	}
	
	[id^="talk"] .left .ttlBox,
	[id^="talk"] .right .ttlBox{
		padding: 0;
	}
	[id^="talk"] .ttlBox h3{
		font-size: 2rem;
	}
	[id^="talk"] .ttlBox .label{
		font-size: 1.8rem;
	}
	[id^="talk"] .ttlBox .label span{
		font-size: 1.6rem;
		margin-right: 8px;
		width: 100px;
	}
	
	[id^="talk"] .leadBox{
		margin-top: 30px;
	}
	[id^="talk"] .leadBox dt{
		float: none;
		width: 100%;
	}
	[id^="talk"] .leadBox dd{
		padding-left: 0;
		font-size: 1.6rem;
	}
	
	[id^="talk"] .talkBox{
		margin-top: 30px;
	}
	[id^="talk"] .talkBox li + li {
		margin-top: 30px;
	}
	[id^="talk"] .talkBox li figure{
		width: 80px;
	}
	[id^="talk"] .talkBox li.row-right figure{
		margin-right: 20px;
	}
	[id^="talk"] .talkBox li.row-left figure{
		margin-left: 20px;
	}
	[id^="talk"] .talkBox .txtBox{
		font-size: 1.6rem;
		padding: 15px;
		width: calc(100% - 100px);
	}
	[id^="talk"] .talkBox li.row-right .txtBox::before{
		border-right-width: 16px;
		top: 25px;
	}
	[id^="talk"] .talkBox li.row-left .txtBox::before{
		border-left-width: 16px;
		top: 25px;
	}
	
	.personBox{
		flex-direction: column;
		padding: 0;
		align-items: center;
	}
	.personBox li{
		width: 100%;
	}
	.personBox li.cross{
		margin-top: 0;
	}
	.personBox li figure{
		max-width: 180px;
		margin: 0 auto;
	}
	
	.sec_message{
		margin: 0 -15px;
	}
	.sec_message h3{
		font-size: clamp(1.8rem,6vw,2.8rem);
	}
	.sec_message h3 span{
		gap: 10px;
	}
	.sec_message h3 span::after,
	.sec_message h3 span::before{
		width: 28px;
		height: 57px;
	}
	.sec_message h3::before{
		font-size: clamp(1.8rem,20vw,24rem);
		margin-bottom: -6%;
	}
	.sec_message p {
		padding: 0 0 40px;
		margin: 40px 0 0;
	}
}

/* ------------------------------------------------------------------------ */

/*  個別CSS

/* ------------------------------------------------------------------------ */

#mainVisual{
	background: url("/assets/recruit/jobs/crosstalk/img/mainvisual.webp") no-repeat center top / cover;
	width: 100%;
	aspect-ratio: 1366 / 720;
	display: flex;
	justify-content: center;
	align-items: flex-start;
	text-align: left;
	padding-top: 44px;
	margin-top: 80px;
}
#mainVisual h1{
	text-align: center;
}

#sec_lead .contents{
	position: relative;
}
#sec_lead .contents::before{
	content: "";
	display: block;
	width: 100%;
	height: 100px;
	background: #fff;
	border-top-right-radius: 100px;
	border-top-left-radius: 100px;
	position: absolute;
	bottom: 100%;
	left: 0;
}

#sec_lead .topHd{
	font-size: 4rem;
	font-weight: 900;
	color: #378CFA;
}

#sec_lead .lead{
	font-size: 1.8rem;
	margin-top: 50px;
	line-height: 2;
}

#talk01{
	margin-top: 84px;
}
	#talk01 .container1 .row-right .txtBox{
		padding-right: 60px;
	}
	#talk01 .container1 .row-left .txtBox{
		padding-right: 40px;
	}
	#talk01 .container2 .row-right .txtBox{
		padding-right: 50px;
	}
	#talk01 .container2 .row-left .txtBox{
		padding-right: 60px;
	}




#talk02{
	margin-top: 150px;
}
#talk02 .container1 .row-right .txtBox{
	padding-right: 60px;
}
#talk02 .container2 .row-right .txtBox{
	padding-right: 30px;
}


@media screen and (max-width: 1024px){
	#mainVisual{
		margin-top: 0;
	}
	#sec_lead .contents::before{
		height: 9.767vw;
	}
}

@media screen and (max-width: 860px){
	#talk02 .container4 .row-left .txtBox .pcStyle{
		display: none;
	}
}
@media screen and (max-width: 767px){
	#mainVisual{
		align-items: flex-end;
		padding-bottom: 12vw;
	}
	#sec_lead .topHd{
		font-size: clamp(1.5rem,7vw,3rem);
	}
	#sec_lead .contents::before{
		border-top-right-radius: 50px;
		border-top-left-radius: 50px;
	}
	
	#talk01 .container1 .row-right .txtBox,
	#talk01 .container1 .row-left .txtBox,
	#talk01 .container2 .row-right .txtBox,
	#talk01 .container2 .row-left .txtBox,
	#talk02 .container1 .row-right .txtBox,
	#talk02 .container2 .row-right .txtBox{
		padding-right: 15px;
	}

	#talk02{
		margin-top: 60px;
	}
}