@charset "utf-8";
/* # =================================================================
#### 01 働く環境
# ================================================================= */
.section01{
	
}
.section01 .flex{
	background-color : #FFF;
	padding : 30px 50px;
}
.section01 .flex:nth-of-type(odd){
	background-color : #F0F0F0;
}
.section01 .flex:nth-of-type(odd) .box:nth-child(1){
	order : 2;
}
.section01 .flex:nth-of-type(odd) .box:nth-child(2){
	order : 1;
}
.section01 .flex .box h4{
	position : relative;
	display : block;
	width : 100%;
	height : auto;
	font-size : var(--20px);
	font-weight : bold;
	margin-bottom : 15px;
}
.section01 .flex .box p{
	position : relative;
	display : block;
	width : 100%;
	height : auto;
	text-align : justify;
	margin-bottom : 30px;
}
.section01 .flex .box p:last-child{
	margin-bottom : 0;
}
/* # =================================================================
#### 02 福利厚生
# ================================================================= */
.section02{
	
}
.section02 .info{
	position : relative;
	display : block;
	width : 800px;
	height : auto;
	margin : 0 auto 50px;
}
.section02 .info p{
	position : relative;
	display : block;
	width : 100%;
	height : auto;
	text-align : justify;
}
.section02 .contanier{
	position : relative;
	display : block;
	width : 100%;
	height : auto;
	background-color : #F8E2E2;
	padding : 50px;
}
.section02 .contanier h4{
	position : relative;
	display : block;
	width : 100%;
	height : auto;
	text-align : center;
	font-size : var(--20px);
	font-weight : bold;
	margin-bottom : 30px;
}
.section02 .contanier .flex .box{
	border-radius : 15px;
	background-color : #FFF;
	padding : 15px 30px;
}
.section02 .contanier .flex .box .inner{
	position : relative;
	display : block;
	width : 100%;
	height : auto;
	padding-left : 120px;
}
.section02 .contanier .flex .box .inner::before{
	content : "";
	position : absolute;
	display : block;
	width : 90px;
	height : 90px;
	top : 0;
	bottom : 0;
	left : 0;
	margin : auto auto;
}
.section02 .contanier .flex .box:nth-of-type(1) .inner::before{
	background : url(../../images/recruit/support_icon_01.jpg)center / contain no-repeat;
}
.section02 .contanier .flex .box:nth-of-type(2) .inner::before{
	background : url(../../images/recruit/support_icon_02.jpg)center / contain no-repeat;
}
.section02 .contanier .flex .box h5{
	position : relative;
	display : block;
	width : fit-content;
	height : auto;
	color : #F87997;
	font-size : 18px;
	font-weight : bold;
	border-bottom : 1px solid #F87997;
	margin-bottom : 5px;
}
.section02 .contanier .flex .box p{
	position : relative;
	display : block;
	width : 100%;
	height : auto;
	text-align : justify;
}

/* # =================================================================
#### 03 募集要項
# ================================================================= */
.section03{
	
}
.section03 .wrap{
	width : 800px;
}
/* # =================================================================
#### エフェクト
# ================================================================= */
.section01 .flex figure{
	
}
.section01 .flex .box h4{
	transition : all 0.8s ease-out .1s;
}
.section01 .flex .box p:nth-of-type(1){
	transition : all 0.8s ease-out .2s;
}
.section01 .flex .box p:nth-of-type(2){
	transition : all 0.8s ease-out .3s;
}
.section02 .info{
	transition : all 0.8s ease-out .1s;
}


/* # =================================================================
#### responsive
# ================================================================= */
/* # =================================================================
#### 1200px
# ================================================================= */
@media screen and (max-width: 1200px){
.page-section .flex{
	column-gap : 30px;
}
.section01 .flex{
	padding : 30px 30px;
}
.section01 .flex .box h4{
	font-size : var(--18px);
}
.section01 .flex .box p{
	margin-bottom : 15px;
}
.section02 .contanier .flex .box{
	padding : 15px 15px;
}
.section02 .contanier .flex .box .inner{
	padding-left : 105px;
}


}/*** 1200px ***/
/* # =================================================================
#### 1024px
# ================================================================= */
@media screen and (max-width: 1024px){

}/*** 1024px ***/
/* # =================================================================
#### 896px
# ================================================================= */
@media screen and (max-width: 896px){
.page-section .flex{
	display : block;
}
.section01 .flex .box:nth-child(1){
	margin-bottom : 20px;
}
.section02 .contanier .flex .box:nth-child(1){
	margin-bottom : 20px;
}



.section03 .wrap{
	width : 100%;
}
}/*** 896px ***/
/* # =================================================================
#### 600px
# ================================================================= */
@media screen and (max-width: 600px){
.section02 .contanier{
	padding : 30px;
}
.section02 .contanier .flex .box .inner{
	padding : 75px 0 0;
}
.section02 .contanier .flex .box .inner::before{
	width : 65px;
	height : 65px;
	right : 0;
	bottom : auto;
}
.section02 .contanier .flex .box h5{
	margin : 0 auto 10px;
}


.page-section .list .group{
	display : block;
	border-bottom : none;
}
.page-section .list .group dt{
	width : 100%;
	padding : 10px 15px;
	background-color : #e87d9633;
}
.page-section .list .group dd{
	width : 100%;
	padding : 10px 15px;
}





}/*** 600px ***/
/* # =================================================================
#### 480px
# ================================================================= */
@media screen and (max-width: 480px){

}/*** 480px ***/
/* # =================================================================
#### 320px
# ================================================================= */
@media screen and (max-width: 320px){

}/*** 320px ***/