/* CSS Document */
section{
	margin: 0 auto 20px;
	position: relative;
}

.mainvisual_area{
	box-shadow: inset 0px 4px 4px 0px rgba(50, 50, 50, 0.2);
}

.hd01{
	color: #484848;
	font-size: 50px;
	font-family: 'Roboto', sans-serif;
	font-weight: normal;
	line-height: 1;
	letter-spacing: 2px;
}

.hd01 span{
	font-size: 76px;
}

.hd01+p{
	margin-bottom: 20px;
	font-size: 20px;
}

.hd02{
	
}

.more_btn{
	max-width: 420px;
	margin: 0 auto;
}

	.more_btn a{
		background: #fff;
		border-radius: 30px;
		border: 1px solid #fff;
		display: block;
		padding: 10px;
		color: #dc382c;
		font-weight: bold;
		transition: 0.5s ease;
		font-size: 18px;
	}
	.more_btn a:hover{
		background: #dc382c;
		border: 1px solid #fff;
		display: block;
		padding: 10px;
		color: #fff;
		font-weight: bold;
		text-decoration: none;
	}

.mainvisual_area .inner p{
	color: #fff;
	font-weight: bold;
	font-size: 20px;
}

/*SEARCH*/
.sec01_bg{
	background-color: #f3f3f3;
	position: relative;
}

.sec01{
	padding: 60px 0;
	margin-bottom: 0;
}

.search-area ul{
	display: flex;
	justify-content: space-between;
	margin-bottom: 40px;
}

.search-area ul li{
	background: #fff;
	width: 24%;
	position: relative;
	padding: 40px 25px;
}
.search-area ul li p{
	font-size: 16px;
	margin-top: 20px;
}

.search-area ul li .search_img{
	border-radius: 100%;
	display: inline-block;
	height: 20rem;
	width: 20rem;
	position: relative;
	background: rgb(30,87,153); /* Old browsers */
	background: -moz-linear-gradient(-45deg,  rgba(30,87,153,1) 0%, rgba(46,138,229,1) 0%, rgba(46,174,229,1) 25%, rgba(46,211,229,1) 50%, rgba(46,229,211,1) 75%, rgba(46,229,174,1) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(-45deg,  rgba(30,87,153,1) 0%,rgba(46,138,229,1) 0%,rgba(46,174,229,1) 25%,rgba(46,211,229,1) 50%,rgba(46,229,211,1) 75%,rgba(46,229,174,1) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(135deg,  rgba(30,87,153,1) 0%,rgba(46,138,229,1) 0%,rgba(46,174,229,1) 25%,rgba(46,211,229,1) 50%,rgba(46,229,211,1) 75%,rgba(46,229,174,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#2ee5ae',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}
	.search-area ul li .search_img img{
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		margin: auto;
	}

.search-lead{
	font-size: 20px;
	margin-bottom: 20px;
}

.search-area ul li .search_img.kiran {
  opacity: 1;
  overflow: hidden;
  position: relative;
}
.search-area ul li .search_img.kiran::before {
  background-color: #fff;
  content: "";
  display: block;
  position: absolute;
  top: -100px;
  left: 0;
  width: 30px;
  height: 100%;
  opacity: 0;
  transition: cubic-bezier(0.32, 0, 0.67, 0);
}
.search-area ul li .search_img.kiran:hover::before {
  animation: kiran 0.6s linear 1;
}

@keyframes kiran {
  0% {
    transform: scale(2) rotate(45deg);
    opacity: 0;
  }
  20% {
    transform: scale(20) rotate(45deg);
    opacity: 0.6;
  }
  40% {
    transform: scale(30) rotate(45deg);
    opacity: 0.4;
  }
  80% {
    transform: scale(45) rotate(45deg);
    opacity: 0.2;
  }
  100% {
    transform: scale(50) rotate(45deg);
    opacity: 0;
  }
}

/*共通ボタン*/
.more_btn02{
	max-width: 400px;
	margin: 0 auto;
}
	.more_btn02 a{
		border: 1px solid #dc382c;
		background: #dc382c;
		border-radius: 40px;
		font-size: 18px;
		display: block;
		padding: 10px;
		color: #fff;
		transition: 0.5s ease;
		position: relative;
	}
	
	.more_btn02 a:after{
		content: "\f105";
		font-family: 'FontAwesome';
		font-weight: bold;
		font-size: 26px;
		position: absolute;
		top: 50%;
		-webkit-transform: translateY(-50%);
		-ms-transform: translateY(-50%);
		transform: translateY(-50%);
		right: 20px;
	}
	
	.more_btn02.large{
		margin: 40px auto;
	}
	.more_btn02.large a{
		padding: 10px;
		border-radius: 50px;
		line-height: 1.4;
	}
	
	.more_btn02 a:hover{
		color: #dc382c;
		border: 1px solid #dc382c;
		background: #fff;
		text-decoration: none;
	}
	

/*REASON*/
.sec02{
	padding: 60px 0 0;
	margin-bottom: 0;
}
.results_list {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	align-items: stretch;
}
.results_list li {
	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#48b7ff+0,1d75ca+100 */
	background: rgb(72,183,255); /* Old browsers */
	background: -moz-linear-gradient(top,  rgba(72,183,255,1) 0%, rgba(29,117,202,1) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top,  rgba(72,183,255,1) 0%,rgba(29,117,202,1) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom,  rgba(72,183,255,1) 0%,rgba(29,117,202,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#48b7ff', endColorstr='#1d75ca',GradientType=0 ); /* IE6-9 */
	color: #fff;
	padding: 3.5rem 2rem;
	width: 33.33%;
	position: relative;
}

.results_list li:first-child:before{
	content:"01";
}
.results_list li:nth-child(2):before{
	content:"02";
}
.results_list li:last-child:before{
	content:"03";
}

.results_list li:before{
	background: #023894;
	border-radius: 0 0 100%;
	color: #fff;
	font-size: 2.4rem;
	line-height: 2;
	text-indent: -1rem;
	height: 6rem;
	width: 6rem;
	position: absolute;
	left: 0;
	top: 0;
}
.results_list li:nth-child(2) {
	border-left: 1px solid #fff;
	border-right: 1px solid #fff;
}
.results_list_top {
	font-size: 1.2rem;
	letter-spacing: .2rem;
	display: block;
}
.results_list_top::after {
	border-bottom: 3px solid #fff;
	content: "";
	display: block;
	height: 0;
	margin: 0 auto;
	padding: 0 0 .5rem;
	width: 3rem;
}
.results_list_num {
	font-size: 3.6rem;
}
.results_list_img {
	height: 20rem;
	position: relative;
}

.results_list_img:before{
	content: "";
	position: absolute;
	box-shadow: 0 0 0 1px rgba(255,255,255,1);
	padding: 0;
	border-radius: 100%;
    width: 19rem;
    height: 19rem;
    top: 50%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
    -webkit- transform: translateY(-50%) translateX(-50%);
}

.results_list_img_inner {
	background-position: center center;
	background-repeat: no-repeat;
	background-size: 120% 120%;
	border-radius: 100%;
	overflow: hidden;
	display: inline-block;
	text-indent: -9999px;
	width: 18rem;
	height: 18rem;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
	-webkit-transition: all .2s ease-out;
	-moz-transition: all .2s ease-out;
	-ms-transition: all .2s ease-out;
	-o-transition: all .2s ease-out;
	transition: all .2s ease-out;
}
.results_list_img_inner.results_img1 {
	background-image: url('../img/reason_img01.jpg');
}
.results_list_img_inner.results_img2 {
	background-image: url('../img/reason_img02.jpg');
}
.results_list_img_inner.results_img3 {
	background-image: url('../img/reason_img03.jpg');
}
.results_list li:hover .results_list_img_inner {
	width: 20rem;
	height: 20rem;
	background-size: 100% 100%;
}
.results_list_title {
	font-size: 2rem;
	font-weight: normal;
	margin-top: 10px;
}

/*安心の福利厚生*/
.sec03{
	background: url("../img/bg_welfare.gif") repeat top left;
	padding: 60px 0;
	margin-bottom: 0;
}

.sec03 .inner{
	max-width: 950px;
	margin: 0 auto;
}

.sec03 .inner ul.reason_list{
	display: flex;
	flex-wrap: wrap;
	margin: 40px auto 0;
}
	.sec03 .inner ul.reason_list li{
		width: 33%;
		margin-bottom: 20px;
		transition: 0.5s ease;
	}

	.reason_list_img{
		box-shadow: 0 0 0 4px #023894;
		border-radius: 100%;
		display: inline-block;
		width: 15rem;
		height: 15rem;
		margin-bottom: 1rem;
		position: relative;
		transition: 0.5s ease;
		transform: rotateY(0deg);
	}
	.reason_list_img img{
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		margin: auto;
		width: 50%;
	}
	/*.reason_list_img::after {
		border-radius: 50%;
		box-sizing: content-box;
		content: "";
		height: 100%;
		pointer-events: none;
		position: absolute;
		width: 100%;
		box-shadow: 0 0 0 4px rgba(2,56,148,1);
		left: 0;
		padding: 0;
		top: 0;
	}
	.reason_list li:hover .reason_list_img{
		box-shadow: 0 0 0 10px rgba(2,56,148, 1);
		color: #fff;
	}
	.reason_list li:hover .reason_list_img::after {
		opacity: 0.8;
		transform: scale(0.85);
	}
	.reason_list li:hover .reason_list_img::after {
		opacity: 0.8;
		transform: scale(0.85);
	}
	*/
	.sec03 .inner ul li span{
		display: block;
	}

.reason_list li .reason_list_img:hover{
	transform: rotateY(360deg);
}

.bnr_area{
	display: flex;
	justify-content: space-between;
	margin: 40px auto;
}

.bnr_area li{
		width: 48%;
	}

.fadein{
	opacity : 0;
	transform: translateY(60px);
	transition: all 2s;
}

/*安心の福利厚生*/
.sec04{
	background:#f3f3f3;
	padding: 60px 0;
	margin: 0 auto;
}

.sec04 .inner{
	max-width: 950px;
	margin: 0 auto;
}

.sec04 .inner ul{
	display: flex;
	justify-content: center;
}
	.sec04 .inner ul li{
		margin: 20px 20px 40px;
	}

/*QUESTION*/
.sec05{
	padding: 60px 0;
	margin: 0 auto;
}

.sec05 .inner{
	max-width: 950px;
	margin: 0 auto;
}

.qa-ttl{
	font-size: 24px;
	font-weight: bold;
	margin-bottom: 10px;
}

.slick{
	border:1px solid #cccccc;
	border-radius: 5px;
	padding: 15px;
	margin-bottom: 40px;
}

.slick-prev{
	top:30px !important;
	left:30px !important;
	z-index: 999;
}

.slick-next{
	top:30px !important;
	right: 30px !important;
}

.slick-prev::before {
    content: '\f104' !important;
    font-family: 'FontAwesome' !important;
    color: #333 !important;
    font-size: 27px !important;
}
.slick-next::before {
    content: '\f105' !important;
    font-family: 'FontAwesome' !important;
    color: #333 !important;
    font-size: 27px !important;
}


.questionBox .toggle{
	cursor: pointer;
	font-size: 20px;
	display: flex;
	align-items: center;
	justify-content: center;
	line-height: 1.6;
	margin-bottom: 20px;
}

.questionBox .toggle.long{
	align-items: flex-start;
}

.questionBox .toggle:hover{
	text-decoration: none;
}

.questionBox .toggle:before{
	content: "";
	background: url("../img/q_icon.png") no-repeat top center;
	width: 25px;
	height: 25px;
	background-size: contain;
	display: inline-block;
	vertical-align: middle;
	margin-right: 10px;
}

.questionBox .child{
	background: #39f;
	border-radius: 10px;
	color: #fff;
	padding: 20px;
	text-align: left;
	position: relative;
}

.questionBox .child:before{
	content: "";
	position: absolute;
	top: -28px;
	left: 50%;
	-webkit-transform: translateX(-50%);
	-ms-transform: translateX(-50%);
	transform: translateX(-50%);
	border: 15px solid transparent;
	border-bottom-color: transparent;
	border-bottom-style: solid;
	border-bottom-width: 15px;
	border-bottom: 15px solid #39f;
}

.questionBox .child p{
	display: flex;
}

.questionBox .child p > span{
	display: block;
	width: 96%;
}

.questionBox .child p:before{
	content: "";
	background: url("../img/a_icon.png") no-repeat top center;
	width: 25px;
	height: 25px;
	background-size: contain;
	display: block;
	vertical-align: middle;
	margin-right: 10px;
}

/*JOB INFORMATION*/
#jobinfo{
	padding: 60px 0;
}

/*追従ナビ*/
.stickynav_inner{
	justify-content: space-between;
	background: rgba(0, 0, 0, 0.6);
	position: fixed;
	top: 225px;
	right: 0;
	z-index: 999;
	padding: 10px;
}
	
	.stickynav_inner li{
		background: #39f;
		border-radius: 5px;
		writing-mode: vertical-rl;
		-ms-writing-mode: tb-rl;
		text-orientation: upright;
		height: 14em;
		width: 60px;
		margin-bottom: 10px;
	}
	.stickynav_inner li:last-child{
		margin-bottom: 0;
	}
	
	.stickynav_inner li a{
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 20px 10px;
		width: 100%;
		height: 100%;
		font-size: 17px;
		text-decoration: none;
		text-align: left;
		color: #fff;
		font-weight: bold;
	}
	
	.stickynav_inner li a:hover{
		opacity: 0.8;
	}

	.stickynav_inner li a:before{
		font-family: 'FontAwesome';
		content: "\f002";
		display: inline-block;
		padding-bottom: 5px;
		font-size: 16px;
	}
	
	.stickynav_inner li:nth-child(2){
		border-left: 0;
		background: #fa7e19;
		line-height: 1.2;
	}
	.stickynav_inner li:nth-child(2) a:before{
		font-family: 'FontAwesome';
		content: "\f10b";
		display: inline-block;
		padding-bottom: 7px;
		font-size: 32px;
		line-height: 1;
	}


@media screen and (max-width: 1000px) {
	.search-area ul li .search_img{
		height: 16vw;
		width: 16vw;
	}
	
	.search-area ul li .search_img img{
		width: 50%;
	}
	
}

@media screen and (max-width: 950px) {
	.contentsBlock{
		padding: 0 20px;
	}
	
	.mainvisual_area .inner{
		background-size: 35%;
		position: relative;
		min-height: 490px;
	}
	
	.more_btn{
		width: 100%;
		position: absolute;
		bottom: 16px;
		left: 50%;
		-webkit-transform: translateY(-50%);
		-ms-transform: translateY(-50%);
		transform: translateX(-50%);
	}
	
	
	.reason_list_img{
		width: 20vw;
		height: 20vw;
	}
	
	.sec03{
		padding: 60px 20px;
	}
	
	.sec04,
	.sec05{
		padding: 60px 20px;
	}
}

@media screen and (max-width: 768px) {
	.mainvisual_area img{
		width: 100%;
	}
	
	.sec01 .flex{
		margin-bottom: 60px;
	}
	
	.hd02{
		font-size: 28px;
	}
	
	.stickynav_inner{
		display: flex !important;
		justify-content: space-between;
		background: rgba(0, 0, 0, 0.6);
		position: fixed;
		top: inherit;
		bottom: 0;
		width: 100%;
		z-index: 999;
		padding: 10px;
	}
	
	.stickynav_inner li{
		width: 49%;
		height: auto;
		background: #39f;
		border-radius: 5px;
		writing-mode: inherit;
		text-orientation: inherit;
		margin-bottom: 0;
	}
	
	.stickynav_inner li a{
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 10px;
		height: 100%;
		font-size: 17px;
		text-decoration: none;
		text-align: left;
		color: #fff;
		font-weight: bold;
	}
	
	.stickynav_inner li a:before{
		font-family: 'FontAwesome';
		content: "\f002";
		display: inline-block;
		padding-right: 5px;
		font-size: 16px;
	}
	
	.stickynav_inner li:nth-child(2){
		border-left: 0;
		background: #fa7e19;
		line-height: 1.2;
	}
	.stickynav_inner li:nth-child(2) a:before{
		font-family: 'FontAwesome';
		content: "\f10b";
		display: inline-block;
		padding-right: 7px;
		font-size: 32px;
		line-height: 1;
	}
}

@media screen and (max-width: 580px) {
	.sec01 .subttl{
		font-size: 18px;
	}
	
	.hd02{
		font-size: 24px;
		margin-bottom: 20px;
	}
	
	.hd02 span{
		font-size: 38px;
	}
	
	.hd01 + p{
		font-size: 16px;
	}
	
	.results_list{
		display: block;
	}
		.results_list li{
			width: 100%;
			border-bottom: 1px solid #fff;
		}
	
	.results_list li:nth-child(2){
		border-left: none;
		border-right: none;
		border-bottom: 1px solid #fff;
	}
	
	.search-area ul{
		flex-wrap: wrap;
		margin-bottom: 20px;
	}
		.search-area ul li{
			width: 48%;
			margin-bottom: 20px;
			padding: 20px;
		}
	
	.search-area ul li .search_img{
		height: 30vw;
		width: 30vw;
	}
	
	.search-lead{
		line-height: 1.4;
		margin-bottom: 40px;
	}
	
	.reason_list_img{
		box-shadow: 0 0 0 2px #023894;
	}
	
	.reason_list_img::after{
		box-shadow: 0 0 0 2px rgba(2,56,148,1);
	}

	.bnr_area{
		display: block;
		margin-top: 0;
	}
	
		.bnr_area li{
			width: 100%;
			margin-bottom: 20px;
		}
	
	.sec04 .inner ul li {
		margin: 20px 5px;
	}
	
	.questionBox .toggle{
		font-size: 16px;
		text-align: left;
	}
	
	.more_btn02 a,
	.more_btn03 a{
		font-size: 15px;
	}
	
	.hd03{
		font-size: 24px;
	}
}

@media screen and (max-width: 478px) {
	.sec01_bg .bg01{
		position: absolute;
		top: 10%;
		left: 2%;
	}
	
	.sec01_bg .bg02{
		width: 37%;
		right: 0;
	}
	
	.sec01_bg .bg03{
		width: 27%;
		bottom: 51%;
		left: 6%;
	}
	
	.sec01_bg .bg04{
		bottom: 27%;
		left: 6%;
	}
	
	.hd01{
		font-size: 30px;
		margin-bottom: 10px;
	}
		.hd01 span {
			font-size: 50px;
		}
	
	.more_btn{
		width: 88%;
	}
		.more_btn a{
			font-size: 15px;
		}
	
	.sec01{
		padding: 20px 0;
	}
	
	.sec02{
		padding: 20px 0 0;
	}
	
	.sec03{
		padding: 20px 20px 40px;
	}
	
	.sec04,
	.sec05{
		padding: 20px 20px 40px;
	}
	
	.sec01 .subttl{
		font-size: 16px;
		letter-spacing: -0.6px;
		line-height: 1.6;
		margin-bottom: 20px;
	}
	
	.sec01 .subttl span{
		font-size: 22px;
	}
	
	.hd02{
		font-size: 22px;
		line-height: 1.4;
	}
	
	.hd02 span{
		font-size: 40px;
	}
	
	.sec01 .flex figure{
		width: 70%;
		margin: 0 auto;
	}
	
	.sec04 .inner ul{
		margin-bottom: 20px;
	}
	
	.reason_list li .reason_list_img:hover{
		transform: none;
	}
	
	.sp-fadein {
		opacity : 0;
		transform: translateY(60px);
		transition: all 3s;
	}
}

@media screen and (max-width: 353px) {
	.more_btn a,
	.more_btn02 a,
	.more_btn03 a{
		font-size: 13px;
	}
	
	.stickynav_inner li a{
		font-size: 14px;
	}
	
	.hd01 + p{
		font-size:14px;
	}
	
	.sec04 p{
		font-size:14px;
	}
	
	.questionBox .toggle{
		align-items: flex-start;
	}
	
	.questionBox .toggle::before{
		min-width: 25px;
	}
}