@charset "utf-8";


/* -----------------------------------------------------------
    公開前
-------------------------------------------------------------- */
.crosstalk .commingsoon {
	margin: 150px auto;
	color: #31D8A8;
	font-size: 5rem;
}

@media screen and (max-width: 768px) {
	.crosstalk .commingsoon {
		margin: 50px auto;
		font-size: 3rem;
	}
	}



/* -----------------------------------------------------------
    MV
-------------------------------------------------------------- */
.lower-ttl-area {
	height: 550px;
}

.lower-ttl-area .int-mv-inner .img-area {
	height: 550px;
}

.lower-ttl-area .int-mv-inner .img-area img {
	object-position: top;
}

#recruit .h1-wrap h1 {
    top: 580px;
}
#recruit .breadcrumbs {
    top: 570px;
}


@media screen and (max-width: 768px) {
	.lower-ttl-area {
		height: 100%;
		margin-bottom: 0;
	}

	.lower-ttl-area .int-mv-inner .img-area {
		height:  100%;
	}
	
	.lower-ttl-area .int-mv-inner .img-area img {
		object-position: center;
	}
	
	.lower-ttl-area .txt-area {
		top: auto;
	}
	
	#recruit .h1-wrap h1 {
		top: 5px;
	}
}
/* -----------------------------------------------------------
    メンバー紹介エリア
-------------------------------------------------------------- */
#recruit.crosstalk .member-area {
	background: url("../img/gradation-bg01.jpg") no-repeat center / cover;
	padding: 40px;
	margin-top: 60px;
	border-radius: 30px;
	position: relative;
}

#recruit.crosstalk .member-area .en-ttl {
	font-family: "Space Grotesk", sans-serif;
    font-weight: 700;
	font-size: 5rem;
	color: #fff;
	margin-bottom: 30px;
	text-align: center;
	writing-mode: vertical-rl;
	text-orientation: mixed;
	position: absolute;
	left: -10px;
	top: 0px;
}

#recruit.crosstalk .member-area .member-list {
	display: flex;
	gap: 30px;
}

#recruit.crosstalk .member-area .member-list li {
	display: flex;
	flex-direction: column;
    align-items: center;
    gap: 15px;
}

#recruit.crosstalk .member-area .member-list li img {
	width: 150px;
	height: 150px;
}

#recruit.crosstalk .member-area .member-list li .name {
	font-size: 2rem;
	font-weight: 700;
	color: #002060;
}


@media screen and (max-width: 667px){
	#recruit.crosstalk .member-area {
		padding: 20px;
		margin-top: 40px;
	}

	#recruit.crosstalk .member-area .en-ttl {
		font-family: "Space Grotesk", sans-serif;
		font-weight: 700;
		font-size: 5rem;
		color: #fff;
		margin-bottom: 30px;
		text-align: center;
		writing-mode: vertical-rl;
		text-orientation: mixed;
		position: absolute;
		left: -10px;
		top: 0px;
	}

	#recruit.crosstalk .member-area .member-list {
		display: flex;
		gap: 15px;
		flex-wrap: wrap;
		justify-content: center;
	}

	#recruit.crosstalk .member-area .member-list li {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 10px;
		width: 45%;
	}

	#recruit.crosstalk .member-area .member-list li img {
		width: 100px;
		height: 100px;
	}

	#recruit.crosstalk .member-area .member-list li .name {
		font-size: 1.8rem;
	}
	
}



/* -----------------------------------------------------------
    クロストークエリア
-------------------------------------------------------------- */
#recruit.crosstalk .talk-area {
	margin-top: 100px;
}

#recruit.crosstalk .talk-area .q-img-wrap {
	display: flex;
    align-items: center;
	position: relative;
}

/*質問部分*/
#recruit.crosstalk .talk-area .q-img-wrap .q-wrap {
	position: absolute;
	padding: 0px 40px 0px calc((100% - 1400px) / 2);
}

#recruit.crosstalk .talk-area .q-img-wrap .q-en {
	display: flex;
    font-family: "Space Grotesk", sans-serif;
    font-weight: 700;
    color: #002060;
    align-items: center;
	position: relative;
	margin-bottom: 40px;
}
#recruit.crosstalk .talk-area .q-img-wrap .q-en span.s-txt {
	position: relative;
}

#recruit.crosstalk .talk-area .q-img-wrap .q-en span.s-txt::before {
	content: "";
	width: 20px;
	height: 2px;
	background-color: #002060;
	display: block;
	position: absolute;
	left: -40px;
	top: 5px;
}

#recruit.crosstalk .talk-area .q-img-wrap .q-wrap .q-en {
	font-size: 1.6rem;
}

#recruit.crosstalk .talk-area .q-img-wrap .q-wrap .q-en span.b-txt {
	font-size: 13rem;
	color: #C8F0FE;
	margin-top: -20px;
}

#recruit.crosstalk .talk-area .q-img-wrap .q-wrap .txt {
	font-size: 3.5rem;
	line-height: 2;
    font-weight: 700;
    color: #fff;
    position: relative;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
    display: inline;
    padding: .2em .2em .2em .4em;
    background-color: #002060;
}


/*写真部分*/
#recruit.crosstalk .talk-area .q-img-wrap .img-wrap {
	width: 65%;
	height: 530px;
	z-index: -1;
	margin: 0 0 0 auto;
	border-radius: 30px;
}
#recruit.crosstalk .talk-area .q-img-wrap .img-wrap img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}


/*---------対話部分---------*/
#recruit.crosstalk .talk-list {
	margin-top: 60px;
	display: flex;
	flex-direction: column;
    gap: 40px;
}

#recruit.crosstalk .talk-list li {
	display: flex;
	gap: 30px;
}

#recruit.crosstalk .talk-list li .img-name img {
	width: 100px;
	height: 100px;
}

#recruit.crosstalk .talk-list li .img-name .name {
	font-size: 2rem;
	font-weight: 700;
	text-align: center;
	margin-top: 5px;
}

/*----偶数----*/
#recruit.crosstalk .talk-area.even {
	position: relative;
}
#recruit.crosstalk .talk-area.even::after {
	content: "";
	display: block;
	position: absolute;
	top: 3%;
	width: 100%;
	height: 108%;
	background:url("../img/gradation-bg01.jpg") no-repeat center/ cover;
	border-radius: 110px;
	z-index: -5;
}
/*質問*/
#recruit.crosstalk .talk-area.even .q-img-wrap .q-wrap {
	position: absolute;
	right: 0;
	text-align: right;
	padding: 0px calc((100% - 1400px) / 2) 0px 40px;
}

#recruit.crosstalk .talk-area.even .q-img-wrap .q-en {
	justify-content: flex-end;
}
#recruit.crosstalk .talk-area.even .q-img-wrap .q-wrap .q-en span.b-txt {
	color: #fff;
}

/*写真*/
#recruit.crosstalk .talk-area.even .q-img-wrap .img-wrap {
	margin: 0 auto 0 0;
}

@media screen and (max-width: 667px){
	#recruit.crosstalk .talk-area {
		margin-top: 40px;
	}

	#recruit.crosstalk .talk-area .q-img-wrap {
		display: flex;
		position: relative;
		flex-direction: column-reverse;
		padding: 0 20px;
		align-items: flex-start;
		gap: 20px;
	}

	/*質問部分*/
	#recruit.crosstalk .talk-area .q-img-wrap .q-wrap {
		position: relative;
		padding: 0px;
	}

	#recruit.crosstalk .talk-area .q-img-wrap .q-en {
		display: flex;
		align-items: center;
		position: relative;
		margin-bottom: 20px;
	}
	#recruit.crosstalk .talk-area .q-img-wrap .q-en span.s-txt {
		position: relative;
	}

	#recruit.crosstalk .talk-area .q-img-wrap .q-en span.s-txt::before {
		content: "";
		width: 10px;
		height: 2px;
		background-color: #002060;
		display: block;
		position: absolute;
		left: -20px;
		top: 5px;
	}

	#recruit.crosstalk .talk-area .q-img-wrap .q-wrap .q-en {
		font-size: 1.6rem;
	}

	#recruit.crosstalk .talk-area .q-img-wrap .q-wrap .q-en span.b-txt {
		font-size: 5rem;
		margin-top: -20px;
	}

	#recruit.crosstalk .talk-area .q-img-wrap .q-wrap .txt {
		font-size: 2rem;
		line-height: 1.8;
		position: relative;
		box-decoration-break: clone;
		-webkit-box-decoration-break: clone;
		display: inline;
		padding: .2em .2em .2em .4em;
		background-color: #002060;
	}


	/*写真部分*/
	#recruit.crosstalk .talk-area .q-img-wrap .img-wrap {
		width: 100%;
		height: 200px;
		z-index: -1;
		margin: 0 0 0 auto;
		border-radius: 30px;
	}


	/*---------対話部分---------*/
	#recruit.crosstalk .talk-list {
		margin-top: 20px;
		display: flex;
		flex-direction: column;
		gap: 20px;
	}

	#recruit.crosstalk .talk-list li {
		display: flex;
		gap: 20px;
	}

	#recruit.crosstalk .talk-list li .img-name img {
		width: 50px;
		height: 50px;
	}

	#recruit.crosstalk .talk-list li .img-name .name {
		font-size: 1.6rem;
		margin-top: 5px;
	}

	/*----偶数----*/
	#recruit.crosstalk .talk-area.even {
		position: relative;
	}
	#recruit.crosstalk .talk-area.even::after {
		content: "";
		display: block;
		position: absolute;
		top: 3%;
		width: 100%;
		height: 108%;
		background:url("../img/gradation-bg01.jpg") no-repeat center/ cover;
		border-radius: 30px;
		z-index: -5;
	}
	/*質問*/
	#recruit.crosstalk .talk-area.even .q-img-wrap .q-wrap {
		position: relative;
		right: 0;
		text-align: left;
		padding: 0px 0px;
	}

	#recruit.crosstalk .talk-area.even .q-img-wrap .q-en {
		justify-content: flex-start;
	}
	/*写真*/
	#recruit.crosstalk .talk-area.even .q-img-wrap .img-wrap {
		margin: 0 auto 0 0;
	}
	
}