@charset "utf-8";


#benefits #wrapContentsTtlTop {
    background-color: #f5f5f5;
}
#benefits #wrapMain {
	margin-top: 0;
	text-align: left;
}

#leadWrap {
	background:  linear-gradient(to bottom, transparent 0%, transparent 70%, #fff 78%), url("/img/recruit/index/lead_bg.png");
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
}
.benefitsContInner {
    width: 90%;
    margin-left: auto;
    margin-right: auto;
}
@media print, screen and (min-width:768px) {
/* リード */
#leadWrap {
	padding: 100px 0;
}
    .benefitsContInner {
        max-width: 1100px;
    }
}

#leadWrap .leadTtl:first-child {
    margin-top: 0;
}

.leadTtl {
    font-weight: bold;
    margin-bottom: 0.5em;
}
@media print, screen and (min-width: 768px) {
    .leadTtl {
        font-size: 2.8rem;
    }
}


/* トップメッセージ */
.message_inner {
	display: flex;
	justify-content: space-between;
}
@media screen and (max-width: 767px) {
	.message_inner {
	flex-direction: column;
	}
}

.essage_area {
	width: 570px;
}
@media screen and (max-width: 767px) {
.essage_area {
	 width: 100%;
}
}

.essage_area p:last-child {
	margin-top: 45px;
}
@media screen and (max-width: 767px) {
.essage_area p:last-child {
	margin-top: 20px;
}
}

.message_pic {
	width: 462px;
}
@media screen and (max-width: 767px) {
.message_pic {
	width: 100%;
	margin-top: 20px;
}
}

.message_pic figcaption {
	margin-top: 20px;
	text-align: right;
}

/*セリオグループの働き方に関する基本方針*/
#group {
	padding: 86px 0 64px;
	background: #F5FBFF;
}
@media screen and (max-width: 767px) {
	#group {
		padding: 40px 0 30px;
	}
}

#group .leadTtl_lev3 {
	text-align: center;
	font-weight: bold;
	font-size: 2.6rem;
}
@media screen and (max-width: 767px) {
	#group .leadTtl_lev3 {
		font-size: 2.4rem;;
	}
}

#group .leadTtl_lev4 {
	margin-top: 36px;
	text-align: center;
	font-size: 2.6rem;
}
@media screen and (max-width: 767px) {
	#group .leadTtl_lev3 {
		font-size: 2.4rem;
	}
}
.policy_wrapper {
	margin-top: 36px;
}
@media screen and (max-width: 767px) {
	#group .leadTtl_lev3 {
		margin-top: 20px;
	}
}

.policy_wrapper dl {
	display: flex;
	align-items: center;
	padding: 35px;
	background: #fff;
	box-shadow: 0 5px 20px 0 rgba(0, 0, 0, 0.1);
}
@media screen and (max-width: 767px) {
	.policy_wrapper dl {
		padding: 20px;
	}
}
.policy_wrapper dl:not(:first-child) {
	margin-top: 10px;
}

.policy_wrapper dl dt {
	font-size: 3rem;
	color: #99bccf;
	padding-right: 12px;
}
@media screen and (max-width: 767px) {
	.policy_wrapper dl dt {
		font-size: 2.8rem;
	}
}

.policy_wrapper dl dd {
	font-size: 2rem;
}
@media screen and (max-width: 767px) {
	.policy_wrapper dl dd {
		font-size: 1.8rem;
	}
}

#messagesmanager {
	margin-top: 62px;
	 padding: 30px 0 80px;
    background: rgb(255, 255, 255);
    background: linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 80%, rgba(237, 249, 253, 1) 90%, rgba(237, 249, 253, 1) 100%);
}
@media screen and (max-width: 767px) {
	#messagesmanager {
		margin-top: 30px;
	}
}

h3.message_title {
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 2.6rem;
	font-weight: bold;
}
@media screen and (max-width: 767px) {
	h3.message_title {
		font-size: 2.4rem;
	}
}

h3.message_title::before {
	position: relative;
	content: '';
	top: 0;
	left:0;
	width: 70px;
	height: 55px;
	background-image: url("/img/employee-benefits/icon_user.svg");
	background-size: contain;
	background-repeat: no-repeat;
}
@media screen and (max-width: 767px) {
	h3.message_title::before {
	width: 65px;
	height: 50px;
	}
}

.speechBubble > p {
	margin-top: 36px;
}
@media screen and (max-width: 767px) {
	.speechBubble > p {
	margin-top: 15px;
}
}

.speechBubble {
	position: relative;
	display: inline-block;
	margin-bottom: 20px;
	padding: 36px 40px;
	border-radius: 20px;
	background-color: #fff2ef;
	color: #000000;
}
@media screen and (max-width: 767px) {
	.speechBubble {
		padding: 15px 20px;
	}
}

.speechBubble::after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 6%;
	border-style: solid;
	border-width: 25px 20px 0 20px;
	border-color: #fff2ef transparent transparent;
	translate: -50% 100%;
}
@media screen and (max-width: 767px) {
	.speechBubble::after {
			left: 14%;
	}
}