@charset "UTF-8";
/* CSS Document */

/* title-page */

.title-page h2 {
	padding-top: 45px;
}

.title-page h2::before {
	content: "環境を知る";
}

/* layout01 */

.layout01 .box-inner {
	display: flex;
  justify-content: center;
flex-wrap: wrap;
	gap:65px 2%;
	text-align: center;
	padding-top: 30px;
}

.layout01 .box {
	width: 32%;
	position: relative;
	padding: 60px 20px 30px;
}

.layout01 .box::after, .layout02 .box::after {
	content: "";
	position: absolute;
left: 12%;
top: 0px;
	width: 76%;
	height: 62px;
	display: block;
	border-radius: 60px;
	text-align: center;
	background : -moz-linear-gradient(50% 0% -90deg,rgba(255, 152, 168, 1) 0%,rgba(154, 161, 255, 1) 100%);
  background : -webkit-linear-gradient(-90deg, rgba(255, 152, 168, 1) 0%, rgba(154, 161, 255, 1) 100%);
  background : -webkit-gradient(linear,50% 0% ,50% 100% ,color-stop(0,rgba(255, 152, 168, 1) ),color-stop(1,rgba(154, 161, 255, 1) ));
  background : -o-linear-gradient(-90deg, rgba(255, 152, 168, 1) 0%, rgba(154, 161, 255, 1) 100%);
  background : -ms-linear-gradient(-90deg, rgba(255, 152, 168, 1) 0%, rgba(154, 161, 255, 1) 100%);
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#FF98A8', endColorstr='#9AA1FF' ,GradientType=0)";
  background : linear-gradient(180deg, rgba(255, 152, 168, 1) 0%, rgba(154, 161, 255, 1) 100%);
	font-size: 18px;
color: #FFF;
line-height: 1.2;
letter-spacing: 0.05em;
font-weight: 400;
	display: flex;
  justify-content: center;
align-items: center;
flex-wrap: wrap;
	margin-top: -30px;
}

.contents03 .layout01 .box::after, .layout03 .box::after {
	background : -moz-linear-gradient(50% 0% -90deg,rgba(86, 171, 255, 1) 0%,rgba(155, 153, 255, 1) 100%);
  background : -webkit-linear-gradient(-90deg, rgba(86, 171, 255, 1) 0%, rgba(155, 153, 255, 1) 100%);
  background : -webkit-gradient(linear,50% 0% ,50% 100% ,color-stop(0,rgba(86, 171, 255, 1) ),color-stop(1,rgba(155, 153, 255, 1) ));
  background : -o-linear-gradient(-90deg, rgba(86, 171, 255, 1) 0%, rgba(155, 153, 255, 1) 100%);
  background : -ms-linear-gradient(-90deg, rgba(86, 171, 255, 1) 0%, rgba(155, 153, 255, 1) 100%);
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#56ABFF', endColorstr='#9B99FF' ,GradientType=0)";
  background : linear-gradient(180deg, rgba(86, 171, 255, 1) 0%, rgba(155, 153, 255, 1) 100%);
}

.layout02 .box::after {
left: 38%;
	width: 24%;
}

.layout01 .w01::after {
	content: "スライド勤務・時間休";
}

.layout01 .w02::after {
	content: "フルフレックスタイム制";
}

.layout01 .w03::after {
	content: "マイライフ勤務制度";
}

.layout01 .w04::after {
	content: "賞与・昇給";
}

.layout01 .w05::after {
	content: "お祝い金";
}

.layout01 .w06::after {
	content: "各種手当";
}

.layout01 .w07::after {
	content: "その他福利厚生";
}

.layout01 .w08::after {
	content: "完全週休２日制";
}

.layout01 .w09::after {
	content: "誕生日休暇・記念日休暇";
}

.layout01 .w10::after {
	content: "その他休日";
}

.layout01 .w11::after {
	content: "有給休暇の平均取得日数";
}

.layout01 .w12::after {
	content: "離職率";
}

.layout01 .w13::after {
	content: "月平均残業時間";
}

.layout01 .w14::after {
	content: "平均勤続年数";
}

.layout01 .w15::after {
	content: "平均年齢";
}

.layout01 .w-list {
	display: flex;
  justify-content: center;
flex-wrap: wrap;
	gap:0px 20px;
	text-align: left;
}

.w-day {
	display: flex;
  justify-content: flex-start;
flex-wrap: wrap;
	align-items: flex-end;
	padding-left: 60px;
	position: relative;
	gap:0px 15px;
}

.w-day:nth-child(1) {
	margin: 30px 0px;
}

.w-day::before {
	content: "";
	position: absolute;
left: 15px;
top: 0px;
background-position: left top;
background-repeat: no-repeat;
	background-size: auto 100%;
	width: 34px;
	height: 37px;
}

.w-day:nth-child(1)::before {
	background-image: url("../../images/welfare/text01.svg");
}

.w-day:nth-child(2)::before {
	background-image: url("../../images/welfare/text02.svg");
}

.layout01 .box h4 {
	width: 100%;
	height: 134px;
	display: flex;
  justify-content: center;
align-items: center;
flex-wrap: wrap;
}

.layout01 .box h4 img {
	width: auto;
}

.layout01 .box h5, .layout01 .box h6 {
color: #3379CB;
}

.layout01 .box h5 {
	font-family: "Montserrat", sans-serif;
	font-size: 50px;
line-height: 0.8;
font-weight: 600;
}

.layout03 .box h5 {
	font-size: 82px;
	padding-top: 20px;
}

.layout03 .w14 h5 {
	font-size: 65px;
}

.layout01 .box h5::after, .layout01 .box h5::before {
	content: "";
	font-family: 'Noto Sans JP', sans-serif;
	font-size: 18px;
line-height: 1.2;
font-weight: 500;
	display: inline-block;
	padding-left: 5px;
}

.layout01 .box h5::before {
	font-size: 24px;
	padding-left: 0px;
	padding-right: 5px;
}

.layout01 .w-day:nth-child(1) h5::after {
	content: "日";
}

.layout01 .w-day:nth-child(2) h5::after {
	content: "日付与";
}

.layout03 .box h5::after {
	font-size: 32px;
}

.layout01 .w11 h5::after {
	content: "日";
}

.layout01 .w12 h5::after {
	content: "%";
}

.layout01 .w13 h5::after {
	content: "時間";
}

.layout01 .w14 h5:nth-child(1)::before {
	content: "男性：";
}

.layout01 .w14 h5:nth-child(2)::before {
	content: "女性：";
}

.layout01 .w14 h5::after {
	content: "年";
	font-size: 24px;
}

.layout01 .w15 h5::after {
	content: "歳";
}

.layout01 .box h6 {
	font-size: 14px;
line-height: 1.2;
font-weight: 400;
}

.layout03 .box h6 {
	padding-top: 30px;
}

.layout01 .box p {
	padding-top: 20px;
	text-align: left;
}

.layout01 .w09 p {
	padding-top: 0px;
	text-align: center;
}

.layout01 ul li {
line-height: 1.2;
font-weight: 400;
	position: relative;
	padding-left: 20px;
}

.layout01 ul li:not(:last-child) {
	margin-bottom: 15px;
}

.layout01 ul li::before {
	content: "";
	position: absolute;
left: 0px;
top: 7px;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background-color: #50A0FE;
}


/* layout02 */

.layout02 {
	margin-top: 70px;
}

.layout02 .box {
	width: 100%;
	padding-bottom: 40px;
}



.sp-view {
	display: none;
}