@charset "utf-8";
/*
Theme Name: 採用サイト JOB LIST ｜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;
	}

	/* アニメーション前のスタイル */
	.js-marker {
		display: inline;
		position: relative;
		background-image: linear-gradient(90deg, #ffff66, #ffff66); /* 単色の場合は同じ色、グラデーションさせる場合は別々の色 */
		background-repeat: no-repeat;
		background-position: 100% .6em;
		background-size: 0 30%; /* '30%'の部分にマーカーの太さを記入 */
		transition: all 3s ease-in-out; /* マーカーを引く速度を調整 */
	}

	/* アニメーション発火時 */
	.js-marker.inview {
		background-size: 100% 30%; /* '30%'の部分は上で設定した太さに合わせる */
	}
	/*-----------  hero  -------------*/

	section.hero {
		position: relative;
		width: 100%;
	/*	margin: 50px 0 0 0;*/
		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.job-list_area {
		width: 100%;
		margin: 0 auto;
		display: block;
		padding: 60px 0;
	}

	section.job-list_area h2 {
		padding: 0;
    /*    margin: 0 auto 30px;*/
        width: 100%;
        text-align: center;
        font-size: 20pt;
        letter-spacing: 2px;
        line-height: 130%;
        margin: 20px auto 0 auto;
	}

	section.wer1 h2 {
		color: #86d764;
	}

	section.wer2 h2 {
		color: #f084a0;
	}

	section.bs h2 {
		color: #00c3c3;
	}

	section.job-list_area div.st {
		display: grid;
		width: 90%;
		margin: 0px auto 0px;
		align-items: flex-start;
	}

	section.job-list_area div.st div.syou {
	/*	padding: 0 30px 0 0;*/
		width: 100%;
	}

	section.job-list_area div.st div.syou img {
		width: 100px;
		margin: 0 20px 0 10px;
		float: left;
	}

/**/	section.job-list_area div.st div.pic {
	/*	margin: 30px 0 0;*/
	}

	section.job-list_area div.st div.pic img {
		width: 100%;
		margin: 0 auto;
		border-radius: 15px;
	}

	section.job-list_area div.st div.syou h3 {
		background: url('../img/k_l.svg') no-repeat left top, url('../img/k_r.svg') no-repeat right 1pt top 0;
        background-size: 20px 20px;
        color: #000;
        font-size: 14pt;
        letter-spacing: 2px;
        padding: 0 30px;
        width: fit-content;
        margin: 20px auto;
        text-align: center;
		line-height: 130%;
	}

	section.job-list_area div.st div.syou ul.jl {
        /* margin: 30px 0 0; */
        /* padding: 0 0 0 40px; */
        background: #f7f7f7;
        /* width: 75%; */
        margin: 20px auto 0 auto;
        display: block;
        padding: 2em 3em;
	}

	section.job-list_area div.st div.syou ul.jl2 {
        display: flex;
        /* display: flex; */
        /* flex-wrap: wrap; */
        display: block;
        background: #f7f7f7;
        margin: 0 auto;
        padding: 2em 3em;
        /* width: 75%; */
	}

	section.job-list_area div.st div.syou ul.jl li,
	section.job-list_area div.st div.syou ul.jl2 li {
		background-image: url("../img/job_m.svg") ;
        list-style-position: inside;
        background-repeat: no-repeat;
        background-position: left 2pt;
        background-size: 10px;
        margin: 5px 1em 5px 0;
        font-size: 10pt;
        letter-spacing: 2px;
        padding: 0 0 0 20px;
	}

	section.job-list_area div.st div.syou p {
		color: #fff;
		font-size: 11pt;
		background: #f084a0;
		display: block;
		margin: 0 auto;
		letter-spacing: 2px;
		text-align: center;
		padding: 0.3em 2em;
	}

	hr.bl {
		border-top: 2px solid #e6e6e6;
		width: 90%;
	}

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

/* 点滅 */
	section.k_e img.itv {
		width: 74%;
		margin: 0 auto;
		-webkit-animation:blink 1.5s ease-in-out infinite alternate;
		-moz-animation:blink 1.5s ease-in-out infinite alternate;
		animation:blink 1.5s ease-in-out infinite alternate;
	}

	@-webkit-keyframes blink{
		0% {opacity:0;}
		100% {opacity:1;}
	}

	@-moz-keyframes blink{
		0% {opacity:0;}
		100% {opacity:1;}
	}

	@keyframes blink{
		0% {opacity:0;}
		100% {opacity:1;}
	}
/*点滅終わり*/

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

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

	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: 65%;
		margin: 0 auto;
		-webkit-transition: all 0.6s ease;
		transition: all 0.6s ease;
	}

	div.hr {
		width: 90%;
		margin: 0 auto;
		border-top: 2px solid #e6e6e6;
	}

}



/*　タブレット
----------------------------------------*/
@media screen and (min-width: 768px) and (max-width: 1200px) {
	.pcn {
		display: block;
	}

	.spn {
		display: none;
	}

	/* アニメーション前のスタイル */
	.js-marker {
		display: inline;
		position: relative;
		background-image: linear-gradient(90deg, #ffff66, #ffff66); /* 単色の場合は同じ色、グラデーションさせる場合は別々の色 */
		background-repeat: no-repeat;
		background-position: 100% .6em;
		background-size: 0 30%; /* '30%'の部分にマーカーの太さを記入 */
		transition: all 3s ease-in-out; /* マーカーを引く速度を調整 */
	}

	/* アニメーション発火時 */
	.js-marker.inview {
		background-size: 100% 30%; /* '30%'の部分は上で設定した太さに合わせる */
	}

	/*-----------  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.job-list_area {
		width: 100%;
		margin: 0 auto;
		display: block;
		padding: 80px 0;
	}

	section.job-list_area h2 {
		padding: 0;
        /* margin: 0 auto 55px; */
        margin: 0 auto;
        width: 100%;
        text-align: center;
        font-size: 28pt;
        letter-spacing: 2px;
        line-height: 130%;
	}

	section.wer1 h2 {
		color: #86d764;
	}

	section.wer2 h2 {
		color: #f084a0;
	}

	section.bs h2 {
		color: #00c3c3;
	}

	section.job-list_area div.st {
		display: flex;
        /* width: 760px; */
        margin: 0px auto 0px;
        /* align-items: flex-start; */
        align-items: stretch;
        justify-content: center;
        width: 90%;
        /* max-width: 1200px; */
        flex-direction: row-reverse;
	}

	section.job-list_area div.st div.syou {
        padding: 0 30px 0 0;
        /* width: 420px; */
        width: 50%;
	}

	section.job-list_area div.st div.syou img {
        /* display: flex; */
        /* justify-content: end; */
        width: 60%;
	}

	section.job-list_area div.st div.pic {
		display: flex;
        justify-content: end;
        width: 50%;
	}

	section.job-list_area div.st div.pic img {
        width: 100%;
        margin: 0 auto;
        /* border-radius: 15px; */
        /* width: 310px; */
        /* width: 250px; */
        /* height: 250px; */
        object-fit: cover;
		object-position: -65px 0;
	}

	section.job-list_area div.st div.syou h3 {
        background: url(../img/k_l.svg) no-repeat left top, url(../img/k_r.svg) no-repeat right 1pt top 0;
        background-size: 20px 20px;
        color: #000;
        font-size: 18pt;
        letter-spacing: 2px;
        padding: 0 36px;
        width: fit-content;
		margin: 30px auto;
		line-height: 130%;
	}

	section.job-list_area div.st div.syou ul.jl {
        margin: 30px 0 0;
        /* padding: 0 0 0 40px; */
        background: #f7f7f7;
    /*   width: 75%;*/
    /*    margin: 30px auto 0 auto;*/
        display: block;
        padding: 2em 3em;
	}

	section.job-list_area div.st div.syou ul.jl2 {
		/*	display: flex; */
        /* flex-wrap: wrap; */
        display: block;
        background: #f7f7f7;
        margin: 0 auto;
        padding: 2em 3em;
     /*   width: 75%;*/
	}

	section.job-list_area div.st div.syou ul.jl li,
	section.job-list_area div.st div.syou ul.jl2 li {
		background-image: url("../img/job_m.svg") ;
        list-style-position: inside;
        background-repeat: no-repeat;
        background-position: left 2.5pt;
        background-size: 10px;
        font-size: 12pt;
    /*    margin: 5px 1em 5px 0;*/
        letter-spacing: 2px;
        padding: 0 0 0 20px;
	}

	section.job-list_area div.st div.syou p {
        color: #fff;
        font-size: 11pt;
        background: #f084a0;
        display: block;
        margin: 0 auto;
        /* padding: 5px 10px; */
        letter-spacing: 2px;
        /* width: 90%; */
        text-align: center;
    /*    width: 75%;*/
        padding: 0.3em 2em;
	}

	div.hr {
	/*	width: 760px;*/
		margin: 0 auto;
		border-top: 2px solid #e6e6e6;
		width: 90%;
	}

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

/* 点滅 */
	section.k_e img.itv {
		height: 35px;
		margin: 0 auto;
		-webkit-animation:blink 1.5s ease-in-out infinite alternate;
		-moz-animation:blink 1.5s ease-in-out infinite alternate;
		animation:blink 1.5s ease-in-out infinite alternate;
	}

	@-webkit-keyframes blink{
		0% {opacity:0;}
		100% {opacity:1;}
	}

	@-moz-keyframes blink{
		0% {opacity:0;}
		100% {opacity:1;}
	}

	@keyframes blink{
		0% {opacity:0;}
		100% {opacity:1;}
	}
/*点滅終わり*/

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

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

	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;
	}
}




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

	.spn {
		display: none;
	}

	/* アニメーション前のスタイル */
	.js-marker {
		display: inline;
		position: relative;
		background-image: linear-gradient(90deg, #ffff66, #ffff66); /* 単色の場合は同じ色、グラデーションさせる場合は別々の色 */
		background-repeat: no-repeat;
		background-position: 100% .6em;
		background-size: 0 30%; /* '30%'の部分にマーカーの太さを記入 */
		transition: all 3s ease-in-out; /* マーカーを引く速度を調整 */
	}

	/* アニメーション発火時 */
	.js-marker.inview {
		background-size: 100% 30%; /* '30%'の部分は上で設定した太さに合わせる */
	}

	/*-----------  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.job-list_area {
		width: 100%;
		margin: 0 auto;
		display: block;
		padding: 100px 0;
	}

	section.job-list_area h2 {
        padding: 0;
        /* margin: 0 auto 55px; */
        margin: 0 auto;
        width: 100%;
        text-align: center;
        font-size: 28pt;
        letter-spacing: 2px;
        line-height: 130%;
	}

	section.wer1 h2 {
		color: #86d764;
	}

	section.wer2 h2 {
		color: #f084a0;
	}

	section.bs h2 {
		color: #00c3c3;
	}

	section.job-list_area div.st {
        display: flex;
        /* width: 860px; */
        margin: 0px auto 0px;
        /* align-items: flex-start; */
        align-items: center;
        position: relative;
        justify-content: start;
        width: 85%;
        max-width: 1200px;
		flex-direction: row-reverse;
	}
	
	section.wer2 div.st {
		flex-direction: row!important;
	}
	
	section.wer2 div.st div.syou {
		padding: 0 0 0 30px!important;
	}

	section.job-list_area div.st div.syou {
		padding: 0 30px 0 0;
	/*	width: 420px;*/
		width: 45%;
	}

	section.job-list_area div.st div.syou img {
		width: 100px;
		margin: 0 20px 0 10px;
		float: left;
	}

	section.job-list_area div.st div.pic {
	/*	display: flex;*/
	/*	justify-content: end;*/
		width: 60%;
    /*    position: absolute;
        right: 0;
        top: 15em;
        z-index: 0;*/
	}

	section.job-list_area div.st div.pic img {
		width: 100%;
		margin: 0 auto;
	/*	border-radius: 15px;*/
	/*	width: 420px;*/
	}

	section.job-list_area div.st div.syou h3 {
		background: url('../img/k_l.svg') no-repeat left top, url('../img/k_r.svg') no-repeat right 1pt top 0;
        background-size: 20px 20px;
        color: #000;
        font-size: 18pt;
        letter-spacing: 2px;
        padding: 0 36px;
        width: fit-content;
        margin: 30px auto;
		line-height: 130%;
    }

	section.job-list_area div.st div.syou ul.jl {
        margin: 30px 0 0;
        /* padding: 0 0 0 40px; */
        background: #f7f7f7;
        width: 75%;
        margin: 30px auto 0 auto;
        display: block;
        padding: 2em 3em;
	}

	section.job-list_area div.st div.syou ul.jl2 {
	/*	display: flex;*/
	/*	flex-wrap: wrap;*/
		display: block;
        background: #f7f7f7;
        margin: 0 auto;
        padding: 2em 3em;
        width: 75%;
	}

	section.job-list_area div.st div.syou ul.jl li,
	section.job-list_area div.st div.syou ul.jl2 li {
		background-image: url("../img/job_m.svg") ;
        list-style-position: inside;
        background-repeat: no-repeat;
        background-position: left 2.5pt;
        background-size: 10px;
        font-size: 12pt;
    /*    margin: 5px 1em 5px 0;*/
        letter-spacing: 2px;
        padding: 0 0 0 20px;

	}

	section.job-list_area div.st div.syou p {
		color: #fff;
        font-size: 11pt;
        background: #f084a0;
        display: block;
        margin: 0 auto;
        /* padding: 5px 10px; */
        letter-spacing: 2px;
        /* width: 90%; */
        text-align: center;
		width: 75%;
        padding: 0.3em 2em;
	}

	div.hr {
	/*	width: 860px;*/
		margin: 0 auto;
		border-top: 2px solid #e6e6e6;
		width: 85%;
        max-width: 1200px;
	}

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

/* 点滅 */
	section.k_e img.itv {
		height: 35px;
		margin: 0 auto;
		-webkit-animation:blink 1.5s ease-in-out infinite alternate;
		-moz-animation:blink 1.5s ease-in-out infinite alternate;
		animation:blink 1.5s ease-in-out infinite alternate;
	}

	@-webkit-keyframes blink{
		0% {opacity:0;}
		100% {opacity:1;}
	}

	@-moz-keyframes blink{
		0% {opacity:0;}
		100% {opacity:1;}
	}

	@keyframes blink{
		0% {opacity:0;}
		100% {opacity:1;}
	}
/*点滅終わり*/

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

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

	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;
	}
}