html {font-size: 625%;}

/*リセット*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,button {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	vertical-align: baseline;
	background: transparent;
}

body {
font-family: "Noto Sans JP", 游ゴシック, "Yu Gothic", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "Noto Sans Japanese", Meiryo, sans-serif;
	font-size: 16px;
	font-size: .16rem;
	color:#555;
	letter-spacing: .01rem;
	line-height: .2rem;
	-webkit-text-size-adjust: 100%;
	background: #f1f1f1;
	box-sizing: border-box;
}

.container{
	overflow: hidden;
}
/*共通*/
ol
,ul {
	list-style: none;
}
a{
	text-decoration: none;
	cursor: pointer;
	color: #fff;
}
button{
	cursor: pointer;
	border: none;
}
::placeholder{
	color: #ccc;
	font-size: .12rem;
}
.wrap{
	max-width: 1050px;
	width: 96%;
	margin: 0 auto;
}
.bg_white{
	background: #fff;
	filter: drop-shadow(0px 0px 4px #ccc);
	max-width: calc(960px - 1rem);
	width: 96%;
	padding: .5rem;
	margin: 0 auto;
}
.bg_pink{
	background: #b55481;
}
.bg_pink:hover{
	animation: purupuru 1.6s linear 0s 1;
}
.bg_blue{
	background: #4d64f8;
}
.bg_green{
	background: #009eb8!important;
}
.bg_orange{
	background: #B77646;
}
.bg_darkred{
	background: #b55481;
}
.bg_red{
	background: #c1272d;
}
.pink{
	color: #b55481;
}
.red{
	color: red;
	font-size: .12rem;
}
.black{
	color: #555;
}
input[type="search"]
,button[type="submit"]{
	padding: 5px;
	height: 34px;
	-webkit-appearance: none;
}
button[type="submit"]{
	background: #b55481;
	color: #fff;
	border: none;
}

button[type="submit"]:hover{
	animation: purupuru 1.6s linear 0s 1;
}

nav button[type="submit"]{
	padding: 5px 10px;
	margin-right: 5px;
	border-radius: 3px;
}
select:invalid{
	color: #f1f1f1;
}
select
,option{
	height: 40px;
}
.search p{
	color:#fff;
	padding-left:5%;
	margin-bottom:0.5em;
}
.half{
	width: 49%;
	display: inline-block;
}
label{
	font-weight: bold;
	display: block;
}
i{
	margin-left: 10px;
}
img{
	width: 100%;
}
.mgb1{
	margin-bottom: 1em;
	display: block;
}
/*header*/
header{
	width: calc(100% - 20px);
	padding: 10px;
	margin: auto;
	position: relative;
}
header .login{
	display: none;
}
header .logo{
	width: 220px;
}
header .logo img{
	filter:drop-shadow(0.2px 0.2px 1px black);
}
header img{
	width: 100%;
	max-width: 150px;
}
header .logo
,header .menu{
	display: inline-block;
	vertical-align: middle;
}
.menu{
	position: absolute;
	right:180px;
	top: 0;
  bottom: 0;
  margin: auto;
  height: 1em;
}
.menu li{
	display: inline-block;
	margin-left: 30px;
	filter:drop-shadow(0.4px 0.4px 1px black);
}
.menu li i{
	margin-right: 3px;
}
/*　ハンバーガーボタン　*/
.hamburger {
	-webkit-transition: 0.3s ease-in-out;
  -moz-transition   : 0.3s ease-in-out;
  transition        : 0.3s ease-in-out;
  position: absolute;
  z-index : 3;
  right : 20px;
  top   : 0;
	bottom: 0;
	margin: auto;
  width : 42px;
  height: 42px;
  cursor: pointer;
  text-align: center;
}
.hamburger span {
  display : block;
  position: absolute;
  width   : 30px;
  height  : 2px ;
  left    : 6px;
  background : #fff;
  -webkit-transition: 0.3s ease-in-out;
  -moz-transition   : 0.3s ease-in-out;
  transition        : 0.3s ease-in-out;
	filter: drop-shadow(1.4px 1.4px 2px black);
}
.hamburger span:nth-child(1) {
  top: 10px;
}
.hamburger span:nth-child(2) {
  top: 20px;
}
.hamburger span:nth-child(3) {
  top: 30px;
}

/* ナビ開いてる時のボタン */
.hamburger.active{
	-webkit-transition: 0.3s ease-in-out;
  -moz-transition   : 0.3s ease-in-out;
  transition        : 0.3s ease-in-out;
	right: 10px;
}
.hamburger.active span:nth-child(1) {
  top : 16px;
  left: 6px;
  -webkit-transform: rotate(-45deg);
  -moz-transform   : rotate(-45deg);
  transform        : rotate(-45deg);
	filter: none;
}

.hamburger.active span:nth-child(2),
.hamburger.active span:nth-child(3) {
  top: 16px;
  -webkit-transform: rotate(45deg);
  -moz-transform   : rotate(45deg);
  transform        : rotate(45deg);
	filter: none;

}

nav.globalMenuSp {
  position: fixed;
  z-index : 2;
  top  : 0;
  right : 0;
  color: #fff;
  background: #fff;
  text-align: center;
  transform: translateX(100%);
  transition: all 0.6s;
  width: 240px;
}

nav.globalMenuSp ul {
	background: #295d72;
	margin: 0 auto;
	padding-top: 15vh;
	width: 96%;
	height: 100vh;
}
nav.globalMenuSp ul:after {
	content: '';/*何も入れない*/
	display: inline-block;
	width: 50px;/*画像の幅*/
	height: 50px;/*画像の高さ*/
	background-image: url(../images/bard01.svg);
	background-size: cover;
	vertical-align: middle;
	transform: scale(-1,1);
	margin-top: 1em;
	animation: korokoro 5s linear 1s infinite;
}

nav.globalMenuSp ul li {
	list-style-type: none;
	padding: 0;
	width: 90%;
	margin: 0 auto;
	border-bottom: 1px dotted rgba(255,255,255,0.3);
	text-align: right;
}
nav.globalMenuSp ul li:last-child {
  padding-bottom: 0;
  border-bottom: none;
}
nav.globalMenuSp ul li:hover{
  background :#ddd;
}
nav.globalMenuSp ul li:hover a{
  color :#000;
}

nav.globalMenuSp ul li a {
  display: block;
  color: #FFF;
  padding: 0.5em;
  text-decoration :none;
  font-size: 14px;
}

/* このクラスを、jQueryで付与・削除する */
nav.globalMenuSp.active {
  transform: translateX(0%);
}

/*footer*/
footer{
	background: #295d72;
	color: #fff;
	padding: .14rem;
	position: relative;
	height: fit-content;
}
footer nav{
	width: 80%;
}
footer li
,footer nav{
	display: inline-block;
}
footer li{
	font-size: .12rem;
	margin-right: 1em;
}
footer a{
	color: #fff;
}
footer span{
	width: 19%;
	text-align: right;
	display: inline-block;
	font-size: .12rem;
}
.bard{
	height: 100px;
	position: absolute;
	top: -50px;
	left: 1%;

}
.bard img{
	height: 100%;
	width: 100px;
	filter: drop-shadow(0.5px 1px 0.4px #000);
}


/*button*/
.button{
	width: 100%;
	display: block;
	text-align: center;
	color: #fff;
	padding: .1rem 0;
	border-radius: 2px;
	font-size: .14rem;
	filter: drop-shadow(0px 0px 0.4px #ccc);
}

#geo_search{
	font-size: 30px;
	vertical-align: middle;
	color: #fff;
	margin-right: 10px;
	padding: .1rem .14rem;
	border-radius: 30px;
	background: #b55481;
	filter: drop-shadow(0px 0px 3px #333);
	border: 3px solid #b55481;
	cursor: pointer;
	animation: purupuru 1.6s linear 1s infinite;
}
.fa-map-marker-alt:before{
	filter: drop-shadow(1px 1px 1px #333);
}


/*pager*/
.pager{
	text-align: center;
	margin-bottom: .3rem;
}
.cp_pagenum{
	padding: .06rem .1rem;
}
.keywords_area .wrap{
	margin-bottom: .2rem;
}
.pager p{
	margin-bottom: .3rem;
}

/*index*/
.top_main{
	background: url("../images/top_main.webp") center center /cover no-repeat;
	height: 60vh;
	position: relative;
}
.list .top_main{
	height: 25vh;
}
.top_main .wrap{
	position: absolute;
	height: fit-content;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
	text-align: center;

}
.list .top_main .wrap{
	bottom: -50px;
}
.top_main form{
	max-width: 960px;
	width: 90%;
	margin: 0 auto;
}
.top_main form button,
.top_main form input,
.top_main .geo_search button{
	width: 30%;
	border: 1px solid #ccc;
	background: #f1f1f1;
	outline: none;
	height: 44px;
	border-radius: 2px;
	filter: drop-shadow(1px 1px 1.5px black);
}
.top_main form input:last-child{
	width: 20%;
}
.top_main form button[type="submit"],
.top_main .geo_search button {
	background: #b55481;
	color: #fff;
	border: none;
}
.top_main form button[type="submit"]:hover,
.top_main .geo_search button:hover {
	animation: purupuru 1.6s linear 0s 1;
}
.list_area{
	padding: 0 0 1rem 0;
}
.list_area .bg_white_area{
	width: 100%;
}
.list_area .bg_white{
	width: calc(24% - 20px - 1.2%);
	padding: 10px;
	display: inline-block;
	margin: 0 1.2% .2rem 0;
	vertical-align: top;
}
.list_area .bg_white:hover h1
,.list_area .bg_white:hover h2
,.list_area .bg_white:hover p{
	color: #295d72;
}
.list_area .bg_white:last-child{
	margin-right: 0;
}
.list_area .bg_white .button{
	width: 44%;
	font-size: .14rem;
	display: inline-block;
	padding: .05rem 0;
}
.list_area .bg_white .button i{
	margin-left: 5px;
}
.list_area .bg_white .button:first-child{
	margin-right: 10px;
}
.img_area{
	width: 100%;
}
.img_area .img_box{
	width: 24%;
	margin-right: 6%;
	vertical-align: top;
	display: inline-block;
	max-height: 62px;
}
.img_box img{
	width: 100%;
	max-height: 62px;
}
.img_area .text_area{
	width: 69%;
	display: inline-block;
}
.img_area h1{
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
	text-overflow: ellipsis;
	font-size: .14rem;
	margin-bottom: 5px;
	color: #555;
	letter-spacing: 0;
}

.img_area a
,.edit .bg_pink{
	background: #b55481;
	color: #fff;
	width: 100%;
	display: block;
	padding: 7px 0;
}
.content_area{
	width: 100%;
	letter-spacing: 0;
	line-height: .2rem;
	color: #555;
}
.content_area h2{
	font-size: .12rem;
	font-weight: normal;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	width: 100%;
}
.content_area p{
	font-size: .12rem;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	width: 100%;
}
.content_area label{
	display: inline-block;
}
.tag li{
	display: inline-block;
	background: #009eb8;
	font-size: .15rem;
	color: #fff;
	padding: 0 5px;
	margin-right: 5px;
	border-radius: 2px;
}
.tag li a{
	color: #fff;
}

/*recruit_detail*/
#sub_page header{
	margin-bottom: .5rem;
	background: #295d72;
}
.recruit_detail i{
	margin: 0 10px 0 0;
}
.detail_content{
	margin-bottom: .3rem;
}
.detail_content h1{
	margin-bottom: .3rem;
	font-size: .2rem;
	line-height: .24rem;
	white-space: pre-wrap;
}
.recruit_detail p{
	font-size: .12rem;
}
.inside .img_area{
	width: 30%;
	display: inline-block;
	vertical-align: top;
}
.inside img{
	width: 100%;
}
.inside .detail{
	width: 66%;
	margin-left: 3%;
	display: inline-block;
}
.detail p{
	margin-bottom: .1rem;
}
.detail .tag{
	margin-bottom: .3rem;
}
.bg_white .half{
	margin-bottom: .3rem;
	vertical-align: top;
}
.bg_white .half p{
	border-bottom: 1px solid #ccc;
	padding: .1rem .1rem .02rem;
}
.bg_white .half_area .half:last-child{
	margin-left: 5%;
	width: calc(49% - 5%);
}
.free_area{
	padding: 0 .1rem;
}
.free_area label{
	margin-bottom: .1rem;
}
.recruit_detail .bg_white{
	margin-bottom: 1rem;
}
.detail .bg_pink
,.free_area .bg_pink
,.button.bg_orange{
	width: fit-content;
	padding: .08rem .2rem;
}
.free_area p{
	margin-bottom: .3rem;
	white-space: pre-wrap;
}
.detail .tag li a{
	font-size: .12rem;
}
.button .bg_orange{
	margin: 0 auto .5rem;
}
.recruit_detail .black:hover{
	color: blue;
}
.recruit_detail .button.bg_pink{
	display: inline-block;
	font-size: .12rem;
	letter-spacing: normal;
    font-weight: bold;
}
.recruit_detail .button.bg_pink i{
	font-size: .16rem;
	margin-right: 5px;
}
.recruit_detail .button.bg_pink .fa-phone-volume{
	transform: rotate(-45deg);

}
.recruit_detail .button.bg_orange{
	margin: 0 auto 0.6rem;
}


/*step*/
.step .bg_gray{
	margin-bottom: 1.5rem;
}
.step header{
	margin-bottom: .5rem;
	background: #295d72;
}
.sub_bar
,.title_area{
	text-align: center;
	margin-bottom: .5rem;
}
.sub_bar{
	background: #fff;
	padding: .2rem 0;
}
.sub_bar h1
,.title_area h1{
	font-size: .18rem;
	font-weight: normal;
}
.title_area h1{
	margin-bottom: .2rem;
}
.title_area h2{
	color: #4d64f8;
	font-size: .4rem;
	display: flex;
	align-items: center;
	justify-content: center;
	letter-spacing: 0.03rem;
	line-height: .4rem;
}
.title_area h2::before
,.title_area h2::after{
	border-top: 3px solid #4d64f8;
	content: "";
	width: 1rem;
}
.title_area h2::before{
	margin-right: 30px;
}
.title_area h2::after{
	margin-left: 30px;
}
.title_area img{
	height: 60px;
	margin-bottom: 10px;
	display: inline-block;
	width: auto;
}
.middle_area{
	max-width: 640px;
}
.bg_white .pink{
	margin-bottom: .2rem;
	display: block;
	font-size: .12rem;
}
.step .bg_white label{
	font-size: .14rem;
}
.step .bg_white label
,.step .bg_white i{
	display: inline-block;
	margin-bottom: .05rem;
}
.step .bg_white i{
	color: #b55481;
	margin-left: 5px;
	font-size: .1rem;
	vertical-align: middle;
}
.step .bg_white input
,.step .bg_white textarea
,.step .bg_white select{
	display: block;
	width: calc(100% - 10px - 2px);
	height: 20px;
	padding: 5px;
	font-size: .14rem;
	background: #f1f1f1;
	border: 1px solid #ccc;
	outline-color: #4d64f8;
}
.step .bg_white input[type="file"]{
	height: 30px;
}
.step .bg_white select{
	height: 34px;
	background: #f1f1f1;
	width: 100%;
}
.step .bg_white textarea{
	height: 120px;
}
.step .bg_white div{
	margin-bottom: .2rem;
}
.button{
	line-height: 1;
}
.step .button_area{
	text-align: center;
	margin-top: .5rem;
}
.step .button_area .button{
	width: 200px;
	display: inline-block;
	vertical-align: top;
	border: none;
	margin: 0 .2rem;
}
.step .button_area i{
	color: #fff;font-size: .14rem;
	margin-bottom: 1px;
	margin-right: 10px;
}
.step .bg_white{
	margin-bottom: .5rem ;
}
.step .short_area{
	width: 100%;
}
.step .short_area input{
	width: 10%;
	display: inline-block;
}
.step .short_area.salary input{
	width: 40%;
}

/*step3*/
.step .bg_white .text_center{
	text-align: center;
}
.step .text_center h1{
	margin-bottom: .3rem;
}
.step .text_center p{
	margin-bottom: .3rem;
}


/*step_area*/
.progressbar {
    position: relative;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.progressbar li {
    position: relative;
    list-style-type: none;
    text-align: center;
    text-transform: uppercase;
    width: 33.333%;
    color: #ccc;
    font-weight: bold;
    counter-increment: steps;
}
.progressbar li:before {
    display: block;
    width: 56px;
    height: 56px;
    margin: -13px auto 10px auto;
    content: '';
    line-height: 56px;
    font-size: 16px;
    text-align: center;
    border-radius: 50%;
    background-color: #fff;
    content: counter(steps);
}
.progressbar li:after {
    position: absolute;
    z-index: -1;
    top: 15px;
    left: -50%;
    width: 100%;
    height: 4px;
    content: '';
    background-color: #fff;
}
.progressbar li:first-child:after {
    content: none;
}
.progressbar li.active,
.progressbar li.complete{
    color: #b55481;
}
.progressbar li.active:before,
.progressbar li.complete:before {
    background-color: #b55481;
    color: #FFF;
}
.progressbar li.active:after,
.progressbar li.complete:after {
    background-color: #b55481;
}
/* 装飾 */
.step_area ul{
  margin: 40px 0 !important;
}

/*recruit_edit*/
.recruit_edit textarea{
	width: calc(100% - .08rem - 4px);
	margin-bottom: .1rem;
	height: 50px;
}
.recruit_edit input{
	padding: .04rem;
}
.recruit_edit i{
	margin-left: 0;
}
.recruit_edit .detail_content{
	margin-bottom: .5rem;
}
.edit_content{
	margin-bottom: .14rem;
}
.detail .edit_content:nth-child(3) input:nth-child(3){
	margin-bottom: .1rem;
}
.edit_content label{
	margin-bottom: .04rem;
	display: inline-block;
}
.recruit_edit .tag li{
	background: none;
	padding: 0;
}
.recruit_edit .tag input{
	width: 40%;
	background: #fff;
	border: 1px solid #1cd5bd;
	margin: 0 10px 5px 0;
	padding: 5px;
	border-radius: 2px;
}
.recruit_edit .tag i{
	font-size: .16rem;
	margin-left: 0;
}
.detail .edit_content:last-of-type label{
	display: inline-block;
}
.detail .edit_content:nth-child(1) input
,.detail .edit_content:nth-child(3) input{
	width: calc(100% - .08rem - 4px);
}
.recruit_edit select{
	height: 30px;
	width: 100%;
}
.recruit_edit .half{
	vertical-align: top;
}
.recruit_edit .half:last-child input{
	width: calc(100% - .08rem - 4px);
}
.recruit_edit .free_area{
	padding: 0;
}
.recruit_edit .free_area textarea{
	height: 300px;
	line-height: .18rem;
	margin-bottom: .3rem;
}
.recruit_edit .free_area .button{
	margin: 0 auto;
}
.recruit_edit .free_area label{
	display: inline-block;
}
.fa-info-circle{
	color: #4d64f8;
	margin-left: 10px;
	font-size: .14rem;
}
.recruit_edit .bg_white{
	margin-bottom: .5rem;
}
.recruit_edit .button_area .button{
	width: 200px;
	display: inline-block;
	border: none;
	vertical-align: top;
	margin: 0 .1rem;
}
.recruit_edit .button_area{
	text-align: center;
	margin-bottom: .5rem;
}
.bottom6{
	margin-bottom: .6rem;
	text-align: center;
}
.bottom3{
	margin-bottom: .3rem;
}
.center{
	text-align: center;
}
.recruit_edit .img_area i{
	margin-right: 10px;
}
.recruit_edit .bg_white h3{
	font-size: .2rem;
	margin-bottom: .3rem;
}
.error{
	color: red;
}
.related.list_area .bg_white_area{
	width: 90%;
	margin: 0 auto;
}
.related{
	padding-bottom: 0;
}
.related.list_area .related_title{
	margin-bottom: .5rem;
	text-align: center;
	display: flex;
	align-items: center;
}
.related.list_area .related_title::before
,.related.list_area .related_title::after{
	content: '';
	height: 1px;
	flex-grow: 1;
}
.related.list_area h1::before{
	background: linear-gradient(-90deg, #666, transparent);
	margin-right: 20px;
}
.related.list_area h1::after{
	background: linear-gradient(90deg, #666, transparent);
	margin-left: 20px;
}
.related .bg_white{
	margin-bottom: .4rem;
}
/*list*/
.keywords_area h1{
	text-align: center;
	padding: .5rem 0;
	letter-spacing: 0;
}
.keywords_area li{
	text-decoration: underline;
	background: none;
}
.keywords_area li a{
	color: #999;
	font-size: 12px;
}
.keywords_area ul{
	margin: 0 auto;
}
.list .top_main{
	margin-bottom: .3rem;
}



/*sample_tag*/
.sample{
	padding: .1rem;
}
.sample p{
	font-size: .14rem;
}
.sample .bg_white{
	margin-bottom: .5rem;
}
.sample .button{
	margin: 0 auto;
}
/*add_img*/
.add_img img{
	padding: .1rem;
	width: calc(100% - .2rem);
}
.c_pass{
  width: 170px;
  margin: 0 auto;
}

@media (max-width: 1210px){
	.bard{
		transform: scalex(-1);
		right: 0;
		height: 70px;

	}
}



@media (max-width: 768px){
	body {
		font-size: 14px;
		font-size: .14rem;
	}
	.list {
		background: #fff;
	}
	/*header*/
	header .menu{
		display: none;
	}
	header .login{
		display: block;
	}
	header .login li{
		list-style: none;
	}

	/*バーガーメニュー*/
	nav.globalMenuSp{
		width: 80%;
		background: #ccc;
	}
	nav.globalMenuSp ul li a{
		padding: 1em;
	}
	.login li a{
		color: #555;
	}
	.login li:first-child{
		margin-bottom: .3rem;
	}
	.login li:first-child i{
		font-size: .8rem;
		display: block;
	}
	nav.globalMenuSp ul{
		padding-top: 10vh;
	}
	.login li:nth-child(2){
		text-align: right;
	}

	/*footer*/
	footer span{
		width: 100%;
	}
	footer .bard{
		transform: scalex(-1);
		right: 0;
		height: 70px;
	}

	/**/

	/*index*/
	.top_main img{
		width: 60%;
	}
	.top_main form input
	,.top_main form button[type="submit"],
	.top_main .geo_search button{
		width: 70%;
		display: block;
		margin: 0 auto .1rem;;
	}
	.search p span:first-child{
		display: none;
	}
	.list_area .bg_white{
		width: calc(100% - 20px);
		padding: 10px;
		margin-bottom: .08rem;
		background: none;
		filter: none;
		border-bottom: 1px dotted #ccc;
	}
	.img_area {
		overflow: hidden;
	}
	.img_area img{
		float: left;
		width: 100%;
		margin-bottom: 1em;
		border: 1px solid #ccc;
		max-height: none;
	}
	.img_area .img_box{
		width:30%;
		margin-right: 0;
	}
	.img_area .text_area{
		float: left;
	}
	.content_area {
		text-align: left;
		width:69%;
	}
	.content_area h1{
		margin-bottom: 0;
	}
	.content_area p
	,.content_area h2{
		font-size: .12rem;
		display: inline-block;
		margin-right: 1em;
	}

	.top_main form input
	,.top_main form button[type="submit"],
	.top_main .geo_search button{
		width: 90%;
		height: 36px;
	}

	.list .top_main form input
	,.list .top_main form button[type="submit"]{
		width: 30%;
		height: 36px;
		display: inline-block;
	}
	.list .top_main .wrap{
		bottom: 0;
	}
	#geo_search
	,.list .top_main form input{
		margin-bottom: 10px;
		padding: .04rem 0.06rem;
		font-size: 20px;
	}
	.list .top_main form input{
		width: 70%;
		display: block;
	}

	/*recruit_detail*/
	#sub_page header{
		margin-bottom: .3rem;
	}
	#sub_page header img{
		width: 50%;
	}
	.recruit_detail .bg_white{
		width: calc(100% - .2rem);
		padding: .3rem .1rem;
	}
	.recruit_detail .bg_white_area .bg_white{
		padding: 0;
		margin-bottom: 1.5em;
	}
	.recruit_detail .bg_white_area .bg_white *{
		line-height: 1;
	}
	.inside .img_area{
		width: 70%;
		margin: 0 auto .1rem;;
		display: block;
	}
	.detail_content h1{
		font-size: .14rem;
		margin-bottom: .1rem;
	}
	.inside .detail{
		width: 100%;
	}
	.recruit_detail p{
		margin-bottom: .05rem;
	}
	.detail .tag{
		margin-bottom: .2rem;
	}
	.bg_white .half{
		width: 100%;
	}
	.bg_white .half_area .half:first-child{
		margin-bottom: 0;
	}
	.bg_white .half_area .half:last-child{
		margin-left: 0;
		width: 100%;
	}
	.recruit_detail .free_area p{
		margin-bottom: .3rem;
	}
	.related.list_area .bg_white_area{
		margin-bottom: .4rem;
	}

	/*step*/
	.step .bg_white{
		width: calc(100% - .2rem);
		padding: .3rem .1rem;
	}
	.sub_bar{
		margin-bottom: .3rem;
	}
	.step .short_area input{
		width: 30%;
	}
	.step .bg_white div{
		margin-bottom: .1rem;
	}
	.step .bg_white label
	,.step .bg_white i{
		margin-bottom: 0;
	}
	.step .bg_white label{
		font-size: .12rem;
	}
	.step .button_area .button{
		margin: 0 .05rem;;
		width: 44%;
	}
	.step .bg_white select{
		width: 100%;
	}
	.step .short_area.salary input{
		width: 34%;
	}
	.step .bg_white input[type="file"]{
		background: none;
		border: none;
	}




	/*step_area*/
	.progressbar li:before{
		width: 36px;
		height: 36px;
		line-height: 36px;
		margin-top: -2px;
	}
	.step_area ul{
		margin-top: 20px!important;
	}
	.step .short_area.salary input{
		font-style: .12rem;
	}

	/*recruit_edit*/
	.recruit_edit .bg_white{
		padding: .3rem .1rem;
	}
	.inside .detail{
		margin-left: 0;
	}
	.recruit_edit .button_area .button{
		font-size: .12rem;
		letter-spacing: 0;
		width: 140px;
		margin-bottom: .3rem;
	}
	.recruit_detail .button.bg_pink{
		margin-bottom: .1rem;
	}

	.keywords_area ul{
		width: 100%;
	}
	.keywords_area li a{
		font-size: .12rem;
	}
	.keywords_area li{
		margin-bottom: 0;
	}
	.title_area img{
		height: 40px;
	}
	.list .top_main{
		height: 30vh;
	}

}
.tag input:checked + label:after {
    content: 'X';
    background: white;
    margin-left: 0.2em;
    color: #000;
    border-radius: 100%;
    width: 20px;
    text-align: center;
    position: absolute;
}

.tag input:checked + label:after {
    content: 'X';
    background: white;
    margin-left: 0.2em;
    color: #000;
    border-radius: 100%;
    width: 20px;
    text-align: center;
    position: absolute;
}

/*popup*/
.recommended_job{
	padding: 1em 0 0;
	margin-bottom: 0 !important;
}
.recommended_job h1{
	margin-bottom: 1em;
	font-size: 16px;
	text-align: center;
}
.recommended_job .list_area{
	width: 49%;
	display: inline-block;
	overflow: hidden;
	margin-bottom: 0;
	padding-bottom: 0;
	vertical-align: top;
}
.recommended_job .img_area .img_box{
	width: 40%;
	height: 100%;
	margin-right: 0;
	margin-bottom: 0.5em;
}
.recommended_job .img_area img {
	border: 1px solid #ddd;
	width: calc(100% - 2px);
}
.recommended_job .img_area .text_area{
	width: calc(59% - 1em);
	padding: 0.5em;
}
.recommended_job .text_area h1{
	font-size: 14px;
	text-align: left;
}

.recommended_job .bg_white_area .bg_white{
	padding: 0 0.25em;
	width:calc(100% - 0.5em);
}
.recommended_job .input_area{
	width: 100px;
	background: #b55481;
	border-radius: 2px;
	color:#fff;
}
.recommended_job .input_area label{
	display: block;
}
.recommended_job .input_area input{
	width: 30px;
	vertical-align: middle;
	display: inline;
}
.recommended_job .input_area span{
	font-weight: bold;
	font-size: .12rem;
}
.recommended_job h1 i.fas{
	font-size: .16rem;
}
@media (max-width: 768px){
	.recommended_job .img_area .img_box {
			width:100%;
	}
	.recommended_job .img_area .text_area{
		width: 100%;
		padding: 0;
		margin-bottom: 0;
	}
	.recommended_job .img_area .text_area h1{
		margin-bottom: 0;
		font-size: 14px;
	}
	.recommended_job .content_area p{
		margin: 0;
		line-height: 1;
	}

	.recommended_job .img_area img {
	    float: none;
			height: auto;
			width:100%;
	}
}

/* animation */
@keyframes korokoro {
	0%   { transform: translate(0%, 0%); }
	3%   { transform: translate(10%, 0%) rotate(10deg); }
	12%  { transform: translate(20%, 0%) rotate(20deg); }
	15%  { transform: translate(-10%, 0%) rotate(-10deg); }
	17%  { transform: translate(-15%, 0%) rotate(-15deg); }
	22%  { transform: translate(10%, 0%) rotate(10deg); }
	25%  { transform: translate(15%, 0%) rotate(15deg); }
	30%  { transform: translate(-5%, 0%) rotate(-5deg); }
	32%  { transform: translate(-7%, 0%) rotate(-7deg); }
	37%  { transform: translate(0%, 0%) rotate(0deg); }
	50% { transform: translate(0%, 0%) rotate(0deg); }
	100% { transform: translate(0%, 0%) rotate(0deg); }
}
@keyframes purupuru {
	0%   { transform: scale(1.0, 1.0) translate(0%, 0%); }
	10%  { transform: scale(1.0, 1.06) translate(-5%, -4%) skew(6deg, 0deg); }
	25%  { transform: scale(1.0, 0.94) translate(5%, 4%) skew(-6deg, 0deg); }
	33%  { transform: scale(1.0, 1.03) translate(2%, -2%) skew(-3deg, 0deg); }
	40%  { transform: scale(1.0, 0.97) translate(-2%, 2%) skew(3deg, 0deg); }
	50% { transform: scale(1.0, 1.0) translate(0%, 0%); }
	100% { transform: scale(1.0, 1.0) translate(0%, 0%); }
}

@keyframes poyon {
	0%   { transform: scale(0.8, 1.4) translate(0%, -100%); }
	10%  { transform: scale(0.8, 1.4) translate(0%, -15%); }
	20%  { transform: scale(1.4, 0.6) translate(0%, 30%); }
	30%  { transform: scale(0.9, 1.1) translate(0%, -10%); }
	40%  { transform: scale(0.95, 1.2) translate(0%, -30%); }
	50%  { transform: scale(0.95, 1.2) translate(0%, -10%); }
	60%  { transform: scale(1.1, 0.9) translate(0%, 5%); }
	70%  { transform: scale(1.0, 1.0) translate(0%, 0%); }
	100% { transform: scale(1.0, 1.0) translate(0%, 0%); }
  }
  @keyframes poyooon {
	0%   { transform: scale(1.0, 1.0) translate(0%, 0%); }
	10%  { transform: scale(1.1, 0.9) translate(0%, 5%); }
	40%  { transform: scale(1.2, 0.8) translate(0%, 15%); }
	50%  { transform: scale(1.0, 1.0) translate(0%, 0%); }
	60%  { transform: scale(0.9, 1.2) translate(0%, -100%); }
	75%  { transform: scale(0.9, 1.2) translate(0%, -20%); }
	85%  { transform: scale(1.2, 0.8) translate(0%, 15%); }
	100% { transform: scale(1.0, 1.0) translate(0%, 0%); }
  }
  @keyframes purun {
	0%   { transform: scale(1.0, 1.0) translate(0%, 0%); }
	15%  { transform: scale(0.9, 0.9) translate(0%, 5%); }
	30%  { transform: scale(1.3, 0.8) translate(0%, 10%); }
	50%  { transform: scale(0.8, 1.3) translate(0%, -10%); }
	70%  { transform: scale(1.1, 0.9) translate(0%, 5%); }
	100% { transform: scale(1.0, 1.0) translate(0%, 0%); }
  }