@charset "utf-8";
/* CSS Document */

/*================================
共通
================================*/
/*テーブル
================================*/
.guide_table{
	border-color: #e4e4e4;
	border-top-width: 1px;
	border-top-style: solid;
	margin-bottom: 0;
}
.guide_table th{ font-weight: normal;}
.guide_table td ul,
.guide_table td dl,
.guide_table td p{ margin-bottom: .5rem;}
.guide_table td dl dd{ margin-bottom: .25rem;}
.guide_table td ul:last-child,
.guide_table td dl:last-child,
.guide_table td p:last-child{ margin-bottom: 0;}
.guide_table td .disc_list{ padding-left: 1.5rem;}
.guide_table td .indent_list{
	list-style: none;
	padding-left: 1rem;
	text-indent: -1rem;
}
@media (min-width: 768px){
	.guide_table > :not(caption) > * > *{ padding: 1rem;}
	.guide_table th{ width: 180px;}
}
@media (max-width: 767px){
	.guide_table > :not(caption) > * > *{ padding: .75rem .5rem;}
	.guide_table th,
	.guide_table td{
		width: 100%;
		display: block;
	}
	.guide_table th{ background-color: rgba(240, 181, 163, .1);}
}

/*================================
募集要項 TOP
================================*/
#requirements .card{
	position: relative;
	border-radius: 0;
	border:none;
	color: #000;
}
#requirements .card .card-header{
	position: relative;
	padding: 0;
	background-color: transparent;
	border: none;
	border-radius: 10px;
	overflow: hidden;
}
#requirements .card .card-header::before{
	content: '';
	display: inline-block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(191, 172, 224, .5);
}
#requirements .card .card-header::after{
	content: 'VIEW MORE';
	display: inline-block;
	position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translateY(-50%) translateX(-50%);
  transform: translateY(-50%) translateX(-50%);
	color: #fff;
}
#requirements .card .card-header::before,
#requirements .card .card-header::after{
	transition: .3s;
	opacity: 0;
	z-index: 1;
}
#requirements .card:hover .card-header::before,
#requirements .card:hover .card-header::after{ opacity: 1;}
#requirements .card .card-header img{
	transition: .3s;
	position: relative;
	z-index: 0;
}
#requirements .card:hover .card-header img{ transform: scale(1.05, 1.05);}
#requirements .card .card-body{
	position: absolute;
	left: 0;
	width: 100%;
	z-index: 2;
}
#requirements .card .card-body p{
	position: relative;
	background-color: #fff;
	filter: drop-shadow(0 0 5px rgba(178, 178, 178, .3));
	margin-bottom: 0;
}
#requirements .card .card-body p .arrow{
	width: 24px;
	height: 24px;
	background: linear-gradient(to right, #f18c8e, #f0b5a3);
	border-radius: 50%;
	position: absolute;
	top: 50%;
  -webkit-transform: translateY(-50%);
	transform: translateY(-50%);
}
#requirements .card .card-body p .arrow::before,
#requirements .card .card-body p .arrow::after{
	content: '';
  position: absolute;
  background-color:#fff;
  transition: .3s;
}
#requirements .card .card-body p .arrow::before{
	top: 50%;
	left: 50%;
  -webkit-transform: translateY(-50%) translateX(-50%);
	transform: translateY(-50%) translateX(-50%);
  width: 9px;
  height: 1px;
}
#requirements .card .card-body p .arrow::after{
	top: 50%;
	right: 6px;
  -webkit-transform: translateY(-50%) rotate(40deg);
	transform: translateY(-50%) rotate(40deg);
  width: 5px;
  height:1px;
	margin-top: -1px;
}

@media (min-width: 992px){
	#requirements .card{ margin-bottom: 2rem;}
	#requirements .card .card-body{ bottom: -2rem;}
	#requirements .card .card-body p{ padding: .75rem 3rem .75rem 1rem;}
	#requirements .card .card-body p .arrow{ right: 1rem;}
}
@media (min-width: 768px) and (max-width: 992px){
	#requirements .card{ margin-bottom: 1.5rem;}
	#requirements .card .card-body p .arrow{ right: .5rem;}
}
@media (min-width: 768px){
	#requirements .card .card-body{
		padding: 0 4%;
	}
}
@media (max-width: 991px){
	#requirements .card .card-body{ bottom: -1.5rem;}
	#requirements .card .card-body p{
		font-size: .85rem;
		padding: .5rem 2rem .5rem .5rem;
	}
}
@media (max-width: 767px){
	#requirements .card{
		max-width: 300px;
		margin: 0 auto 4rem;
	}
	#requirements .card .card-body{ padding: 0 .5rem;}
	#requirements .card .card-body p .arrow{ right: .5rem;}
}

/*オープニングスタッフ
================================*/
.attention_ttl{ text-align: center;}
.attention_ttl h3{
	position: relative;
	font-weight: normal;
	display: inline-block;
	margin-bottom: 2rem;
	font-size: calc(1.1rem + 0.6vw);
}
.attention_ttl h3::before,
.attention_ttl h3::after{
	content: '';
	display: inline-block;
	background-image: url("../img/guideline/attention.png");
	background-size: contain;
	position: absolute;
	width: 20px;
  height: 24px;
	bottom: 5px;
}
.attention_ttl h3::before{ left: -10px;}
.attention_ttl h3::after{
	right: -10px;
	transform: scaleX(-1);
}
.attention_ttl h3 span{
	font-weight: bold;
	display: block;
	margin-top: .25rem;
}
@media (min-width: 768px){
	#opening_staff{ margin-top: 3rem;}
	.attention_ttl h3{ padding: 0 30px;}
}
@media (max-width: 767px){
	#opening_staff{ margin-top: 2rem;}
	.attention_ttl h3{ padding: 0 15px;}
}


/*採用フロー
================================*/
.flow_list{
	padding-left: 0;
	margin: 0 auto;
	list-style: none;
	max-width: 750px;
}
.flow_list li{
	position: relative;
	background: linear-gradient(to right, #e5def3, #f9ede1);
	text-align: center;
	z-index: 0;
}
.flow_list li:not(:last-child){ margin-bottom: 45px;}
.flow_list li:last-child{ font-weight: bold;}
.flow_list li::before,
.flow_list li::after{
	content: '';
	display: inline-block;
	position: absolute;
	z-index: -1;
}
.flow_list li::before{
	top: 1px;
	right: 1px;
	bottom: 1px;
	left: 1px;
	background-color: #fff;
}
.flow_list li::after{
	left: 50%;
  -webkit-transform: translateX(-50%);
	transform: translateX(-50%);
	bottom: -30px;
	width: 22px;
	height: 16px;
	background-image: url("../img/guideline/flow_arrow.png");
}
.flow_list li:last-child::before,
.flow_list li:last-child::after{ display: none;}
.flow_list li span{ display: block;}
@media (min-width: 768px){
	.flow_list li{
		font-size: 1.3rem;
		padding: 1.5rem;
	}
	.flow_list li span{ font-size: 1rem;}
}
@media (max-width: 767px){
	.flow_list li{
		font-size: 1.1rem;
		padding: 1rem .75rem;
	}
	.flow_list li span{ font-size: .85rem;}
}

/*================================
募集要項 職種別ページ
================================*/
#work .btn{
	color: #fff;
	background-color: #000;
	border-radius: 0;
	font-size: 1.2rem;
	font-weight: bold;
	width: 100%;
	max-width: 320px;
	display: block;
	margin: 3rem auto 0;
	padding: 1rem;
}
#work .btn:hover{
	background-color: #f18c8e;
}