@charset "utf-8";

.message_list > li { position: relative; margin: 5em auto;}
.message_list > li:nth-of-type(even) { flex-direction: row-reverse;}

.message_list .img_area1 { width: calc( 15% + 3em ); position: absolute; bottom: -2em;}
.message_list > li:nth-of-type(odd) .img_area1 { left: 2em;}
.message_list > li:nth-of-type(even) .img_area1 { right: 0;}

.message_list .img_area1 img { display: block; border-radius: 50%; width: 80%; margin: auto;}

.message_list .img_area1 figcaption { background: #ff88a5; color: #fff; text-align: center; line-height: 1.4; font-size: 87.5%; margin-top: -1.5em; padding: 15px; position: relative;}

.message_list .img_area1 figcaption::after { content: ""; display: block; border: dashed 2px #fff; position: absolute; top: 2px; right: 2px; bottom: 2px; left: 2px;}

.message_list .img_area1 figcaption > span { display: inline-block;}

.message_list .img_area1 figcaption .career { position: absolute; padding: 0.3em 1em 0.4em; border-radius: 1.5em; background: orange; top: -3.5em; left: -2em;}

.message_list .img_area1 figcaption .career::after { content: ""; display: block; width: 0; height: 0; border: solid 5px transparent; border-top: solid 10px orange; position: absolute; bottom: -15px; left: 50%;}

.message_list .img_area1 figcaption .career .num { font-weight: bold; font-size: 150%;}

.message_list .img_area1 figcaption .dept {}

.message_list .img_area1 figcaption .staffname { font-size: 120%; font-weight: bold;}

.sub_recruit02 #sec01 .message_list .txt_area { background: #fff; width: 80%; padding: 3em 5em; border-radius: 2em;}
.message_list > li:nth-of-type(odd) .txt_area { margin: 0 auto 0 15%;}
.message_list > li:nth-of-type(even) .txt_area { margin: 0 15% 0 auto;}

.message_list .txt_area h3 { font-weight: bold; font-size: 150%;}

.message_list .img_area2 { width: 45%; position: relative;}
.message_list > li:nth-of-type(odd) .img_area2 { float: right; margin: -3em -6em 1em 2em; transform: rotate( 5deg );}
.message_list > li:nth-of-type(even) .img_area2 { float: left; margin: -3em 2em 1em -6em; transform: rotate( -5deg );}

.message_list .img_area2::after { content: ""; display: block; background: #93d7cc; width: 100%; height: 100%; position: absolute; z-index: -1; left: 0; top: 0;}
.message_list > li:nth-of-type(odd) .img_area2::after { transform: rotate( -3deg );}
.message_list > li:nth-of-type(even) .img_area2::after { transform: rotate( 3deg );}

@media(max-width: 999px) {
	.message_list > li { margin: 3em auto; background: #fff; padding: 3vw 5vw; border-radius: 2em;}
	.message_list .img_area1 { position: static; width: 240px; order: 2;}
	.sub_recruit02 #sec01 .message_list .txt_area { order: 1; width: 100%; margin: auto; padding: 0; background: none; border-radius: 0;}
	.message_list > li:nth-of-type(odd) .img_area2, .message_list > li:nth-of-type(even) .img_area2 { float: none; margin: 0; width: calc( 100% - 240px - 10vw - 3em ); max-width: 400px; position: absolute; bottom: 3em;}
	.message_list > li:nth-of-type(odd) .img_area2 { left: calc( 240px + 5vw + 3em );}
	.message_list > li:nth-of-type(even) .img_area2 { right: calc( 240px + 5vw + 3em );}
}

@media(max-width: 699px) {
	.message_list .img_area1 { order: 1; width: 100%; margin: 0 auto 1em;}
	.message_list .img_area1 img { width: clamp( 120px, 60%, 240px );}
	.message_list .img_area1 figcaption { font-size: clamp( 14px, 3.25vw, 18px ); padding: 10px;}
	.message_list .img_area1 figcaption .career { left: 0;}
	.sub_recruit02 #sec01 .message_list .txt_area { order: 2; display: flex; flex-wrap: wrap;}
	.message_list > li:nth-of-type(odd) .img_area2, .message_list > li:nth-of-type(even) .img_area2 { order: 3; margin: 2em auto; width: clamp( 240px, 90%, 400px ); position: static;}
	.sub_recruit02 #sec01 .message_list .txt_area h3 { order: 1;}
	.sub_recruit02 #sec01 .message_list .txt_area p { order: 2;}
}