body{
	color:#936a34;
	background:#fff url(../img/bg2.gif) repeat center top;
}
footer{
	color:#fff;
}
.top_box{
	background:#fff url(../img/c_top_bg2.webp) no-repeat center center
}
.s_title{
	color:#fff;
	background:#e4007f;
}
.scs_box li a{
	color:#e4007f;
	background:#fff;
}
.scs_box li a .scsbi_time{color:#fff;}
.sc_banner ul li a img{
	filter:grayscale(0%);
}
.rec_top img{
	filter:grayscale(0%) brightness(100%);
}



/*-------------------------------------
■ top img
-------------------------------------*/
.rec_top img{
/*
	filter:grayscale(90%) brightness(90%);
*/
	width:100%;
}
.rec_top p{
	padding:20px 10px;
	font-size:24px;
}

/*-------------------------------------
■ list
-------------------------------------*/
.rec_list_w li{
	display:table;
	width:100%;
	padding:20px 0;
	border-bottom:1px solid #ddbc8f;
}
.rec_list_w{
	padding:10px;
}
.rec_list_w li p{
	display:table-cell;
	font-size:16px;
	vertical-align:top;
}
.riw_title,
.rfw_title{
	width:200px;
	font-weight:bold;
}
.rfw_title span{
	padding-left:5px;
	color:#e4007f;
}

/*-------------------------------------
■ recruit info
-------------------------------------*/
.rec_info{
	margin-bottom:50px;
	background:rgba(255,255,255,1)
}

/*-------------------------------------
■ recruit form
-------------------------------------*/
input[type="text"],
select,
textarea{
	padding:10px;
	border:1px solid #666;
	color:#fff;
	font-size:16px;
	line-height:1.8em;
	background:rgba(0,0,0,.5);
	transition:border .3s , background .3s;
}
select option{background:#000;}
input[type="text"]:hover,
select:hover,
textarea:hover{
	border:1px solid #970054;
	background:rgba(0,0,0,.7);
}
input[type="text"]:focus,
select:focus,
textarea:focus{
	border:1px solid #e4007f;
	background:rgba(0,0,0,1);
}
input[type="radio"]{display:none}

.inp_l,
select{
	width:80%;
}
.inp_s{
	width:150px;
}
textarea{
	width:100%;
	min-height:200px;
	resize:vertical;
}

label{
	display:inline-block;
}
label span{
	display:block;
	height:50px;
	line-height:28px;
	padding:10px 15px;
	color:#999;
	border-radius:4px;
	border:1px solid #666;
	background:rgba(0,0,0,.3);
	transition:border .3s , background .3s , color .3s;
	cursor:pointer;
}
label span:hover{
	color:#ddd;
	border:1px solid #999;
	background:rgba(0,0,0,1);
}
input[type="radio"]:checked + span{
	color:#fff;
	border:1px solid #ff60b9;
	background:#e4007f;
}

#submit_w{
	padding:30px 10px 50px;
	text-align:center;
}
#submit_w input{
	width:100%;
	max-width:285px;
	height:65px;
	color:#fff;
	font-size:18px;
	font-weight:bold;
	border:1px solid #ff60b9;
	background:#e4007f;
	transition:border .3s , background .3s;
	cursor:pointer;
}
#submit_w input:hover{
	border:1px solid #ff1c6c;
	background:#e40050;
}

/*-------------------------------------
■ form confirmation
-------------------------------------*/
.s_text{
	font-size:16px;
}
.s_u_text{
	padding-bottom:50px;
}
.button2{
	box-sizing:border-box;
	text-align:center;
	display:block;
	width:100%;
	max-width:285px;
	height:65px;
	line-height:65px;
	color:#fff;
	font-size:18px;
	font-weight:bold;
	border:1px solid #ff60b9;
	background:#e4007f;
	transition:border .3s , background .3s;
}
.button2:hover{
	color:#fff;
	border:1px solid #ff1c6c;
	background:#e40050;
}

.enq_text_go{
	padding:10px;
	text-align:center;
	font-size:18px;
}










@media screen and (max-width:970px){
/*-------------------------------------
■ top img
-------------------------------------*/
.rec_top p{
	font-size:20px;
}

/*-------------------------------------
■ list
-------------------------------------*/
	.riw_title,
	.rfw_title{
		width:150px;
	}

/*-------------------------------------
■ recruit form
-------------------------------------*/
	.inp_l,
	select{
		width:100%;
	}
}










@media screen and (max-width:767px){
/*-------------------------------------
■ top img
-------------------------------------*/
.rec_top p{
	font-size:18px;
}

/*-------------------------------------
■ list
-------------------------------------*/
	.rec_list_w li,
	.rec_list_w li p{
		display:block;
	}

	.rec_list_w li p.riw_text{
		font-size:14px;
	}
	
/*-------------------------------------
■ form confirmation
-------------------------------------*/
	.s_text{
		font-size:14px;
	}
}

/*-------------------------------------
■ 20210802 追加
-------------------------------------*/
.rec_osusume_wrap{ position: relative;background:url("../img/rec_back01.png") no-repeat right top;background-size:100%;width: 100%;padding: 50px 0;min-height:300px}
.rec_catch{position: absolute;font-size: 16px;line-height: 1.6 }
.rec_catch img{}

.rec_osusume{
position: absolute;
padding: 15px 10px 15px 15px;
border: double 6px #b28850;
background: #E8E7E7;
width: 340px;

}
.rec_catch{left: 20px;top: 20px;}
.rec_catch img{width: 760px}
@media screen and (max-width: 769px){
.rec_catch{left: 10px;top: 40px;}
}
@media screen and (max-width: 480px){
.rec_catch{left: 5px;top: 50px;}
}
@media screen and (min-width:768px){
.rec_osusume{left: 50px;top: 150px;}
}

@media screen and (max-width:767px){
.rec_osusume{left: 50%;right: 50%;
-webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
top:250px;max-width: 320px;}}

h2.osusume_title{color: #b28850;
    font-size: 24px;
    line-height: 2;}
h2.rec_title{position: relative;
  display: inline-block;
  padding: 0 65px;
  text-align: center;color: #fff;	font-size:22px;margin-bottom: 30px}
h2.rec_title::before,h2.rec_title::after {
  position: absolute;
  top: calc(50% - 3px);
  width: 50px;
  height: 6px;
  content: '';
  border-top: solid 2px #000;
  border-bottom: solid 2px #000;
  
}
h2.rec_title::before{left: 0;}
h2.rec_title::after{right: 0;}
.rec_osusume ul li{ position: relative;color: #666;padding: 0}
.rec_osusume ul li:before {
content:"";
background: url(../img/check_box.png) no-repeat;
display: inline-block;
width: 23px;
height: 22px;
vertical-align: middle;
margin: 0 5px 3px 0;
}
.flow{text-align: center;}

.flex-flow {
  display: flex;
  background: rgba(255,255,255,0.8);
  color: #333;
  padding: 20px;
  border: 5px solid #ffa3d6
}
.flex-flow .item1 {
  flex: 1;
}
.flex-flow .item1 img{width: 100%}
.flex-flow .item2 {font-size:18px;
  width: 20%; display: flex;
  justify-content: center;
  align-items: center;
}
.flex-flow .item2 span{font-size:30px;font-weight: bold; padding-left: 5px;color: #e4007f}
.flex-flow .item3 {
  flex: 1;text-align: left;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.flex-flow .item3 h3{font-size:24px;
font-weight: bold;
line-height: 1.6; 
border-bottom: 1px solid #333;
margin-bottom: 5px}
h3 + .flex-flow{margin-top: 50px}
.flex-flow:last-child{margin-bottom: 50px}
.flow .arrow {
    position: relative;
    display: block;
    margin: 30px auto;
    padding-bottom: 20px;height: 20px;
}
.flow .arrow::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  right: 50%;
  left:50%;
  width: 25px;
  height: 25px;
  border-top: 5px solid #ffa3d6;
  border-right: 5px solid #ffa3d6;
  transform: translateX(-50%) rotate(135deg);
}
@media screen and (max-width:480px){
.flex-flow {flex-direction: column;}
.flex-flow .item1{order: 2;}
.flex-flow .item2{  flex: 1;padding: 5px 0;order: 1;}
.flex-flow .item3{order: 3;}
}
.salary_btn_wrap{position: relative; text-align: center; display: block;
width: 100%;
    height: 0;
    padding-top: 100%;
    background:url("../img/rec_back02.png");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;}

.salary_btn{z-index: 10; position: absolute;
left: 30%;
    bottom: 30%;
  transform: translate(-50%, 0);
  margin: auto;
}
@media screen and (min-width: 1025px){.salary_btn{left: 38%;}}
@media screen and (max-width:480px){
.salary_btn{left: 20%;}
}
.salary_btn{
  display: inline-block;
  height: auto;
  text-decoration: none;
  color: #fff;
  font-size:24px;
  border-radius:8px;
  text-align:center;
  padding:10px 25px;
  box-shadow:0 6px 0 0 #a6005c;
  transform: translateY(-6px);
  transition:0.3s all;

  background: #e4007f; 
  background: -moz-linear-gradient(top,  #e4007f 0%, #d60077 100%); 
  background: -webkit-linear-gradient(top,  #e4007f 0%,#d60077 100%); 
  background: linear-gradient(to bottom,  #e4007f 0%,#d60077 100%); 
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e4007f', endColorstr='#d60077',GradientType=0 );
}
 
.salary_btn:hover {color: #fff;
  box-shadow:0 2px 0 0 #a6005c;
  transform: translateY(-2px);
}
.salary_img{text-align: center; margin-bottom: 50px}
.salary_img img{max-width:409px; width: 100%}
@media screen and (max-width:480px){
.salary_img img{max-width:320px; width: 100%}
}
.flex_card{display: flex;}
.salary_detail{font-size:38px;
line-height: 1.6; }
.salary_detail span{font-size:18px;}
.salary_detail p{font-size:18px;}
.card_title{font-size:30px;line-height: 1.6; 
border-bottom: 1px solid #ddbc8f;
margin-bottom: 5px}
.card01{
	width:calc(50% - 10px);
	padding:15px;
	border: 5px solid #ddbc8f;
	background:#fff;}
.card01:first-of-type{margin: 30px 10px 30px 0}
.card01:last-of-type{margin: 30px 0px 30px 10px}
@media screen and (max-width:480px){
.flex_card{flex-direction: column;}
.card01{width:calc(100% - 30px); padding:10px; background:#fff;}
.card01:first-of-type{margin: 20px 5px}
.card01:last-of-type{margin: 20px 5px}
}
.voice .flex_card{display: flex;}
.card02{
	position: relative;
	background: white;
	box-shadow: 0px 0px 10px rgba(0,0,0,0.2);
	margin-bottom: 75px;
	width: 480px;
	box-sizing: border-box;
	padding: 0 20px 20px;
	border: 5px solid #ddbc8f;
}
.card02 .voice-pic_w {
	margin: -50px auto 20px;
	border-radius:100%;
	width: 136px;
	overflow:hidden;
	border: 5px solid #ddbc8f;
}
.card02 .voice-title {
	margin-bottom: 15px;
	font-size: 20px;
	color: #b28850;
	text-align: center;
}
.card02 p {
	font-size: 16px;
}
.card02{width:calc(50% - 10px); padding:15px;}
.card02:first-of-type{margin: 60px 10px 30px 0}
.card02:last-of-type{margin: 60px 0px 30px 10px}
@media screen and (max-width:480px){
.flex_card{flex-direction: column;}
.card02{width:calc(100% - 10px); padding:10px;}
.card02:first-of-type{margin: 60px 5px 0}
.card02:last-of-type{margin:60px 5px 60px}
}
.circle_wrap{display: flex; justify-content: center;margin: 30px 0}
.circle{display: flex; justify-content: center;width: calc(25% - 10px);margin: 5px;}
.circle span {font-size:22px;color:#333;
    width:150px;
    height: 150px; 
  /*  background-color: #FF3399;*/
    border-radius: 50%; 
    text-align: center;
    line-height: 150px;
}

.circle:nth-of-type(1) span{background-color:#ff8f8f}
.circle:nth-of-type(2) span{background-color:#ffa3d6}
.circle:nth-of-type(3) span{background-color:#bfffa3}
.circle:nth-of-type(4) span{background-color:#ffe0a3}
@media screen and (max-width: 1024px){

.circle span {
font-size:16px;
width:110px;
height: 110px; 
line-height: 110px;}
}
@media screen and (max-width:480px){
.circle_wrap{flex-wrap: wrap}
.circle{width: calc(50% - 10px);margin: 5px;}
.circle span {
width:140px;
height: 140px; 
line-height: 140px;}}


.circle02{display: flex; justify-content: center;width: calc(25% - 10px);margin: 5px;}
.circle02 span {font-size:22px;color:#333;
position: relative;
    width: 180px;
    height: 180px; 
    background-color: pink;
    border-radius: 50%; 
    margin: 0 auto;
    text-align: center;
}
.circle-inner {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}
@media screen and (max-width:480px){

.circle02{width: calc(50% - 10px);margin: 5px;}
.circle02 span {
    width:180px;
    height: 180px; 
    line-height: 180px;}}
h3.rec_title{margin-bottom:25px;font-size:24px;text-align: center;}
@media screen and (max-width:480px){
h3.rec_title{margin-bottom:25px;font-size:20px;text-align: center;}
}
.mb30{margin-bottom:30px;}
.acc{margin:30px 0}
.acd-check{
    display: none;
}
.acd-label{
    background: #ffe4e4;
    color: #e4007f;
    display: block;
    margin-bottom: 1px;
    padding: 10px;
    position: relative;
}
.acd-label:after{
    background: #e4007f;
    box-sizing: border-box;
    content: '\f067';
    display: block;
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
   /* height: 52px;*/
    padding: 10px 20px;
    position: absolute;
    right: 0;
    top: 0px;
	color:#fff;
}
.acd-label:hover{cursor:pointer}
.acd-content{
    border: 1px solid #ffe4e4;
    display: block;
    height: 0;
    opacity: 0;
    padding: 0 10px;
    transition: .5s;
    visibility: hidden;background:#fff
}
.acd-check:checked + .acd-label:after{
    content: '\f068';
}
.acd-check:checked + .acd-label + .acd-content{
    height: 80px;
    opacity: 1;
    padding: 10px;
    visibility: visible;margin-bottom: 2px;
}
.center{text-align: center}
.rec_btn{
  display: inline-block;
  height: auto;
  text-decoration: none;
  color: #fff;
  font-size:24px;
  border-radius:8px;
  text-align:center;
  padding:10px 25px;
  box-shadow:0 6px 0 0 #a6005c;
  transform: translateY(-6px);
  transition:0.3s all;

  background: #e4007f; 
  background: -moz-linear-gradient(top,  #e4007f 0%, #d60077 100%); 
  background: -webkit-linear-gradient(top,  #e4007f 0%,#d60077 100%); 
  background: linear-gradient(to bottom,  #e4007f 0%,#d60077 100%); 
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e4007f', endColorstr='#d60077',GradientType=0 );
    margin:0 5px 10px;
} 
.rec_btn:hover {color: #fff;
  box-shadow:0 2px 0 0 #a6005c;
  transform: translateY(-2px);
}
.rec_btn_line{
    background: #06c755;
  box-shadow:0 6px 0 0 #008536;
}
.rec_btn_line:hover {color: #fff;
  box-shadow:0 2px 0 0 #008536;
}