@charset "utf-8";
/*
Theme Name: 採用サイト BENEFITS ｜3eee Group
Theme URI: http://work.3eee.co.jp/
Description: 3eeeグループで働こう！｜高齢者の介護や、福祉の仕事は3eeeで！
Author: 3eee
Version: 1.0
License: 3eee
License URI: license.txt
Tags: 
*/

* {
	font-family: 'Hind', sans-serif !important;
}


/*　スマホ
----------------------------------------*/
@media screen and (max-width: 767px) {
	.pcn {
		display: none;
	}

	.spn {
		display: block;
	}

	/*-----------  hero  -------------*/

	section.hero {
		position: relative;
		width: 100%;
		margin: 0;
	}

	section.hero img.tit {
		position: absolute;
		z-index:3;
		display: block;
		width: 60%;
	/*	margin: 35px;
		right: 0;*/
		right: 20px;
        top: 20px;
	}

	section.hero img.sld {
		z-index:3;
		width: 100%;
		display: block;
	}

	/* -------- canvas -------- */
	canvas{
		position: absolute;
		display: block;
		width: 100%;
		margin: 0;
		left:0;
		bottom: 0;
	}

	section.number_area,
	section.benefits_area2 {
		width: 100%;
		margin: 0 auto;
		display: block;
		padding: 60px 0;
	}

	section.benefits_area2 {
		background-color: #E5F9F9;
	}

	/*----キャリアステップ・スキルアップ支援  &  働く環境整備---*/
	section.number_area h2,
	section.benefits_area2 h2 {
		padding: 0;
		margin: 0 auto 30px;
		width: 100%;
		text-align: center;
		font-size: 20pt;
		color: #00c3c4;
		letter-spacing: 2px;
	}

	section.number_area div.st,
	section.benefits_area2 div.st {
		width: 90%;
		margin: 30px auto 0;
		flex-wrap: wrap;
		align-items: center;
		padding: 30px 0 0 0;
		background: #00C3C3;
	}

	section.number_area div.st div.syou,
	section.benefits_area2 div.st div.syou {
	/*	padding: 0 10px;*/
		padding:0;
		width: 90%;
        margin: 0 auto;
	}

	section.number_area div.st div.syou img,
	section.benefits_area2 div.st div.syou img {
		width: 64px;
		margin: 0 20px 0 10px;
		float: left;
	}

	section.number_area div.st div.pic,
	section.benefits_area2 div.st div.pic {
		display: block;
		margin: 0px auto;
	}

	section.number_area div.st div.pic img,
	section.benefits_area2 div.st div.pic img {
	/*	width: 300px;*/
		margin: 0 auto;
	/*	border-radius: 15px;*/
	/*	display: block;
		height: 227px;*/
		width: 100%;
        border-radius: 0;
	}

	section.number_area div.st div.syou h3,
	section.benefits_area2 div.st div.syou h3 {
		color: #fff;
		font-size: 14pt;
		letter-spacing: 2.5px;
	}

	section.number_area div.st div.syou h4,
	section.benefits_area2 div.st div.syou h4 {
		color: #fff;
		font-size: 10pt;
		letter-spacing: 2.5px;
	}

	section.number_area div.st div.syou p,
	section.benefits_area2 div.st div.syou p {
		color: #000;
		font-size: 10pt;
		background: #fff;
		border-radius: 15px;
		display: inline-block;
	/*	margin: 20px 0 20px 8px;*/
		padding: 20px;
		letter-spacing: 2px;
	/*	width: 260px;*/
		width: 100%;
        margin: 20px 0;
	}

/*--------  こんな方には & ENTRY  ----------*/
	section.k_e {
		display: block;
		width: 100%;
		margin: 0 auto;
		text-align: center;
	}

	section.k_e div.push {
		display: block;
		background: #FFF88C;
		margin: 0;
		width: 100%;
		padding: 60px 5%;
		font-size:20pt;
		letter-spacing: 2px;
		line-height: 1.3em;
	}

	section.k_e div.push span {
		color:#00c3c3;
	}

	section.k_e div.push dl dt {
		font-size:14pt;
		margin: 1em 0 0 0;
        line-height: 1.5em;
	}
	
	section.k_e div.push dl dd {
        list-style: none;
        background: #fff;
        margin: 1em auto;
        width: 100%;
        max-width: 720px;
        border-radius: 5em;
        text-align: left;
        padding-top: 0.9em;
        padding-bottom: 0.7em;
        padding-right: 1.3em;
        padding-left: calc(1em + 2.8em);
        font-size: 11pt;
        position: relative;
        line-height: 1.5em;
		letter-spacing: 1px;
	}
	
	section.k_e div.push dl dd::before {
		content: '';
        background-image: url(../img/benefits_icon.svg);
        background-size: 100%;
        background-repeat: no-repeat;
        width: 1.5em;
        height: 1.5em;
        display: block;
        position: absolute;
        top: 1em;
        left: 2em;
	}
	
	section.k_e div.push img {
	/*	display: block;
		width: 730px;
		margin: 0 auto;
		width:100%;*/
	}
	
	section.k_e img.ya {
		display: block;
		width: 30px;
		margin: 30px auto;
	}

	section.k_e a.desc {
		display: block;
		width: 90%;
		background: #00C3C3;
		padding: 45px 0;
		margin: 0 auto;
	}

	section.k_e a.desc img {
		width: 65%;
		margin: 0 auto;
		-webkit-transition: all 0.6s ease;
		transition: all 0.6s ease;
	}

	.number_area {
		width: 100%;
        margin: 0 auto;
        display: block;
        padding: 100px 0;
	}
	
	.number_area .inner {
		text-align: center;
        width: 85%;
        max-width: 1200px;
        margin: 0 auto;
	}
	
	.number_area h3 {
		margin:0 auto 2em auto;
	}
	
	.number_area h3 img {
		width: 200px;
	}
	
	.number_area ul.number_img {
        display: flex;
        flex-wrap: wrap;
        gap: 30px;
	}
	
	.number_area ul.number_img li {
		width: 100%;
        border: 3px solid #00c3c4;
        border-radius: 10px;
	}
	
	.number_area ul.number_img li img {
		width:100%;
		border-radius: 5px;
	}
	
	.number_area ul.number_img li.num_half {
		 width: calc(50% - 15px);
	}
	
	.number_area ul.number_img li.num_half img {
		width:100%;
	}

}



/*　タブレット
----------------------------------------*/
@media screen and (min-width: 768px) and (max-width: 1200px) {

	.pcn {
		display: block;
	}

	.spn {
		display: none;
	}

	/*-----------  hero  -------------*/

	section.hero {
		position: relative;
		width: 100%;
	}

	section.hero img.tit {
		position: absolute;
		z-index:3;
		display: block;
		width: 35%;
		margin: 50px;
		right: 0;
	}

	section.hero img.pcn {
		z-index:3;
		width: 100%;
		display: block;
	}

	/* -------- canvas -------- */
	canvas{
		position: absolute;
		z-index:3;
		display: block;
		width: 100%;
		margin: 0;
		left:0;
		bottom: 0;
	}

	section.number_area,
	section.benefits_area2 {
		width: 100%;
		margin: 0 auto;
		display: block;
		padding: 100px 0;
	}

	section.benefits_area2 {
		background-color: #E5F9F9;
	}

	/*----キャリアステップ・スキルアップ支援  &  働く環境整備---*/
	section.number_area h2,
	section.benefits_area2 h2 {
		padding: 0;
		margin: 0 auto 30px;
		width: 100%;
		text-align: center;
		font-size: 28pt;
		color: #00c3c4;
		letter-spacing: 5pt;
	}

	section.number_area div.st,
	section.benefits_area2 div.st {
		display: flex;
	/*	width: 800px;*/
		margin: 30px auto 0px;
		align-items: center;
		background: #00C3C3;
		width: 90%;
        align-items: stretch;
        max-width: 860px;
	}

	section.number_area div.st div.syou,
	section.benefits_area2 div.st div.syou {
		padding: 30px;
		width: calc(100% - 310px);
        min-width: 410px;
	}

	section.number_area div.st div.syou img,
	section.benefits_area2 div.st div.syou img {
	/*	width: 100px;*/
	/*	margin: 0 20px 0 10px;*/
		float: left;
		margin:0 3% 0 1%;
		height: 6em;
	}

	section.number_area div.st div.pic,
	section.benefits_area2 div.st div.pic {
		display: flex;
		justify-content: end;
		width: 310px;
	}

	section.number_area div.st div.pic img,
	section.benefits_area2 div.st div.pic img {
		width: 100%;
		margin: 0 auto;
		object-fit: cover;
	}

	section.number_area div.st div.syou h3,
	section.benefits_area2 div.st div.syou h3 {
		color: #fff;
		font-size: 20pt;
		letter-spacing: 2px;
		line-height: 1.25em;
        padding: 0.15em;
	}

	section.number_area div.st div.syou h4,
	section.benefits_area2 div.st div.syou h4 {
		color: #fff;
		font-size: 14pt;
		letter-spacing: 2.5px;
	}

	section.number_area div.st div.syou p,
	section.benefits_area2 div.st div.syou p {
		color: #000;
		font-size: 11pt;
		background: #fff;
		border-radius: 15px;
		display: inline-block;
		margin: 20px 0 0;
		padding: 20px;
		letter-spacing: 2px;
	/*	width: 370px;*/
	}

/*--------  こんな方には & ENTRY  ----------*/
	section.k_e {
		display: block;
		width: 100%;
		margin: 0 auto;
		text-align: center;
	}

	section.k_e div.push {
		display: block;
		background: #FFF88C;
		margin: 0;
		width: 100%;
		padding: 60px 0;
		font-size:28pt;
		letter-spacing: 2px;
	}

	section.k_e div.push span {
		color:#00c3c3;
	}

	section.k_e div.push dl dt {
		font-size:20pt;
		margin: 1em 0 0 0;
	}
	
	section.k_e div.push dl dd {
		list-style: none;
        background: #fff;
        margin: 1em auto;
        width: 89%;
        max-width: 720px;
        border-radius: 30px;
        text-align: left;
        padding-top: 0.8em;
        padding-bottom: 0.8em;
        padding-right: 0.8em;
        padding-left: calc(0.8em + 3.3em);
        font-size: 11pt;
        position: relative;
	}
	
	section.k_e div.push dl dd::before {
		content: '';
        background-image: url(../img/benefits_icon.svg);
        background-size: 100%;
        background-repeat: no-repeat;
        width: 1.5em;
        height: 1.5em;
        display: block;
        position: absolute;
        top: 0.9em;
        left: 2em;
	}
	
	section.k_e div.push img {
	/*	display: block;
		width: 730px;
		margin: 0 auto;
		width:100%;*/
	}
	
	section.k_e img.ya {
		display: block;
		width: 35px;
		margin: 30px auto;
	}

	section.k_e a.desc {
		display: block;
		width: 530px;
		background: #00C3C3;
		padding: 60px 0;
		margin: 0 auto;
	}

	section.k_e a.desc img {
		width: 50%;
		margin: 0 auto;
		-webkit-transition: all 0.6s ease;
		transition: all 0.6s ease;
	}

	.number_area {
		width: 100%;
        margin: 0 auto;
        display: block;
        padding: 100px 0;
	}
	
	.number_area .inner {
		text-align: center;
        width: 85%;
        max-width: 1200px;
        margin: 0 auto;
	}
	
	.number_area h3 {
		margin:0 auto 2em auto;
	}
	
	.number_area h3 img {
		width: 200px;
	}
	
	.number_area ul.number_img {
        display: flex;
        flex-wrap: wrap;
        gap: 30px;
	}
	
	.number_area ul.number_img li {
		width: 100%;
        border: 3px solid #00c3c4;
        border-radius: 15px;
	}
	
	.number_area ul.number_img li img {
		width:100%;
		border-radius: 10px;
	}
	
	.number_area ul.number_img li.num_half {
		 width: calc(50% - 15px);
	}
	
	.number_area ul.number_img li.num_half img {
		width:100%;
	}
}



/*　PC
----------------------------------------*/
@media screen and (min-width: 1200px) {
	.pcn {
		display: block;
	}

	.spn {
		display: none;
	}

	/*-----------  hero  -------------*/

	section.hero {
		position: relative;
		width: 100%;
	}

	section.hero img.tit {
		position: absolute;
		z-index:9990;
		display: block;
		width: 35%;
		margin: 50px;
		right: 0;
	}

	section.hero img.pcn {
		z-index:9989;
		width: 100%;
		display: block;
	}

	/* -------- canvas -------- */
	canvas{
		position: absolute;
		z-index:9990;
		display: block;
		width: 100%;
		margin: 0;
		left:0;
		bottom: 0;
	}

	section.number_area,
	section.benefits_area2 {
		width: 100%;
		margin: 0 auto;
		display: block;
		padding: 100px 0;
	}

	section.benefits_area2 {
		background-color: #E5F9F9;
	}

	/*----キャリアステップ・スキルアップ支援  &  働く環境整備---*/
	section.number_area h2,
	section.benefits_area2 h2 {
		padding: 0;
		margin: 0 auto 0px;
		width: 100%;
		text-align: center;
		font-size: 28pt;
		color: #00c3c4;
		letter-spacing: 5pt;
	}

	section.number_area div.st,
	section.benefits_area2 div.st {
		display: flex;
		width: 860px;
		margin: 30px auto 0px;
		align-items: center;
		background: #00C3C3;
	}

	section.number_area div.st div.syou,
	section.benefits_area2 div.st div.syou {
		padding: 30px;
	}

	section.number_area div.st div.syou img,
	section.benefits_area2 div.st div.syou img {
		width: 100px;
		margin: 0 20px 0 10px;
		float: left;
	}

	section.number_area div.st div.pic,
	section.benefits_area2 div.st div.pic {
		display: flex;
		justify-content: end;
	}

	section.number_area div.st div.pic img,
	section.benefits_area2 div.st div.pic img {
		width: 100%;
		margin: 0 auto;
	}

	section.number_area div.st div.syou h3,
	section.benefits_area2 div.st div.syou h3 {
		color: #fff;
		font-size: 22pt;
		letter-spacing: 2px;
	}

	section.number_area div.st div.syou h4,
	section.benefits_area2 div.st div.syou h4 {
		color: #fff;
		font-size: 14pt;
		letter-spacing: 2.5px;
	}

	section.number_area div.st div.syou p,
	section.benefits_area2 div.st div.syou p {
		color: #000;
		font-size: 11pt;
		background: #fff;
		border-radius: 15px;
		display: inline-block;
		margin: 20px 0 0;
		padding: 20px;
		letter-spacing: 2px;
		width: 440px;
	}

/*--------  こんな方には & ENTRY  ----------*/
	section.k_e {
		display: block;
		width: 100%;
		margin: 0 auto;
		text-align: center;
	}

	section.k_e div.push {
		display: block;
		background: #FFF88C;
		margin: 0;
		width: 100%;
		padding: 60px 0;
		font-size:28pt;
		letter-spacing: 2px;
	}

	section.k_e div.push span {
		color:#00c3c3;
	}

	section.k_e div.push dl dt {
		font-size:20pt;
		margin: 1em 0 0 0;
	}
	
	section.k_e div.push dl dd {
		list-style: none;
        background: #fff;
        margin: 1em auto;
        width: 89%;
        max-width: 720px;
        border-radius: 30px;
        text-align: left;
        padding-top: 0.8em;
        padding-bottom: 0.8em;
        padding-right: 0.8em;
        padding-left: calc(0.8em + 3.3em);
        font-size: 11pt;
        position: relative;
	}
	
	section.k_e div.push dl dd::before {
		content: '';
        background-image: url(../img/benefits_icon.svg);
        background-size: 100%;
        background-repeat: no-repeat;
        width: 1.5em;
        height: 1.5em;
        display: block;
        position: absolute;
        top: 0.9em;
        left: 2em;
	}
	
	section.k_e div.push img {
	/*	display: block;
		width: 730px;
		margin: 0 auto;
		width:100%;*/
	}

	section.k_e img.ya {
		display: block;
		width: 35px;
		margin: 30px auto;
	}

	section.k_e a.desc {
		position: relative;
		z-index: 0;
		overflow: hidden;
		display: block;
		width: 530px;
		background: #00C3C3;
		padding: 60px 0;
		margin: 0 auto;
	}

	section.k_e a.desc::before {
		content: '';
		display: block;
		position: absolute;
		top: 0;
		left: 0;
		z-index: -1;
		width: 0%;
		height: 100%;
		background-color: #33CFCF;
		-webkit-transition: .5s;
		transition: .5s;
	}

	section.k_e a.desc:hover::before {
		width: 100%;
	}

	section.k_e a.desc img {
		width: 50%;
		margin: 0 auto;
		-webkit-transition: all 0.6s ease;
		transition: all 0.6s ease;
	}
	
	.number_area {
		width: 100%;
        margin: 0 auto;
        display: block;
        padding: 100px 0;
	}
	
	.number_area .inner {
		text-align: center;
        width: 85%;
        max-width: 1200px;
        margin: 0 auto;
	}
	
	.number_area h3 {
		margin:0 auto 5em auto;
	}
	
	.number_area h3 img {
		height: 150px;
	}
	
	.number_area ul.number_img {
        display: flex;
        flex-wrap: wrap;
        gap: 30px;
	}
	
	.number_area ul.number_img li {
		width: 100%;
        border: 3px solid #00c3c4;
        border-radius: 20px;
	}
	
	.number_area ul.number_img li img {
		width:100%;
		border-radius: 16px;
	}
	
	.number_area ul.number_img li.num_half {
		 width: calc(50% - 15px);
	}
	
	.number_area ul.number_img li.num_half img {
		width:100%;
	}
	
}