@charset "utf-8";

/*===================================================================

	001. common

===================================================================*/
.title{
	background: url(../images/recruit__title.png) no-repeat center center / cover;
	height: 430px;
	justify-content: flex-start;
}

.title__text{
	width: 58.125%;
	height: auto;
}

.title__text img{
	width: 100%;
	display: block;
}

/*===================================================================

	002. about

===================================================================*/

.about__banner-list{
	display: flex;
	justify-content: space-between;
}

.about__banner{
	width: 49%;
	max-width: 540px;
}

.about__banner a{
	display: block;
}

.about__banner a:hover{
	opacity: .5
}

.about__banner img{
	width: 100%;
}



.modal_wrap input{
	display: none;
}

.modal_overlay{
	display: flex;
	justify-content: center;
	overflow: hidden;
	opacity: 1;
}

.modal_trigger{
	position: absolute;
	width: 100%;
	height: 100%;
}

.modal_content{
	position: relative;
	align-self: center;
	width: 100%;
	max-width: 960px;
	height: 90%;
	overflow-y: auto;
	padding: 45px 20px;
	box-sizing: border-box;
	background: #fff;
	line-height: 1.4em;
	transition: .5s;
	margin-top: 40px;
}


.modal_wrap input:checked ~ .modal_overlay{
	opacity: 1;
	transform: scale(1);
	transition: opacity .5s;
}

.modal__open{
	transition: .5s;
	cursor: pointer;
}

.modal__open:hover{
	opacity: .5;
}

.modal__image{
	width: 84.375%;
	max-width: 810px;
	margin: 0 auto 40px;
}

.modal__image img{
	width: 100%;
	display: block;
}

.modal__read{
	font-size: 26px;
	margin-bottom: 1em;
	line-height: 1.4;
}

/*===================================================================

	003. requirements

===================================================================*/

.require{
	width: 60.25%;
	margin: 0 auto 140px;
}

.tab-cont{
	margin-bottom: 120px;
}

.require .tab-menu{
	border: 0;
	margin-bottom: 35px;
}

.tab-list{
	border-bottom-width: 1px;
	position: relative;
	font-size: 16px;
	font-weight: normal;
	min-width: 68px;
	margin: 0 25px;
}

.tab-list.current{
	border-bottom-color: #000;
}

.tab-list.current::before{
	content: "";
	display: block;
	position: absolute;
	bottom: 0;
	margin: 0 auto;
	left: 0;
	right: 0;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 0 10px 10px 10px;
	border-color: transparent transparent #000 transparent;
}

.require__list{
	position: relative;
}

.require__more{
	width: 63.5%;
	margin: 0 auto;
	border: 1px solid #000;
	text-align: center;
	cursor: pointer;
	padding: 10px;
	transition: .5s;
	font-size: 24px;
	position: absolute;
	z-index: 10;
	background: #fff;
	left: 0;
	right: 0;
	top: calc(100% - 10px);
}

.require__more:hover{
	opacity: .5;
}

.require__more:not(.show)::before {
	content: "詳細";
}



.require__more.show::after {
	content: "閉じる";
}


.require__mv{
	width: 100%;
	margin-bottom: 60px;
}

.require__mv img{
	display: block;
	width: 100%;
}

.require__desc{
	/*margin-bottom: 30px;*/
	font-size: 16px;

	display: table-row;
}

.require__title, .require__inner{
	display: table-cell;
	border: 1px solid #000;
	padding: 10px;
}

.require__info{
	line-height: 1.6875;
	position: relative;
	overflow: hidden;
	display: table;
	border-collapse: collapse;
}

/*.require__info.hide{
	height: 585px;
}*/

/*.require__info::before {
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  content: "";
  width: 100%;
  height: 10em;
  background: linear-gradient(to bottom, transparent 0%,rgba(255,255,255,.5) 50%,#fff 100%);
}*/

.tab-inner{
	border: none;
}

.show.require__info::before{
	display: none;
}

.require__title{
	/*border-bottom: 1px solid #000;*/
	padding-bottom: 5px;
	padding-bottom: 10px;
	width: 8em;
	background: #F7F7F7;
}

.require__inner{
	width: calc(100% - 8em);
}

.require__subtitle::before{
	content: "■";
}

.require__subtitle{
	font-weight: normal;
	font-size: 14px;
	line-height: 1.6875;
}

.require__text{
	margin-bottom: 1em;
	font-size: 14px;
}

.require__contact{
	display: block;
	width: 57%;
	background: #2871B4;
	color: #fff;
	text-align: center;
	font-size: 30px;
	font-weight: bold;
	padding: 10px;
	margin: 0 auto;
}

.require__contact:hover{
	opacity: .5;
}

/*===================================================================

	004. flow

===================================================================*/

.flow{
	max-width: 1000px;
	width: 62.5%;
	margin: 0 auto 120px;
}

.flow__list{
	display: flex;
}

.flow__left{
	flex-shrink: 0;
	width: 30%;
	max-width: 300px;
	margin-bottom: 45px;
	margin-right: 40px;
}

.flow__right{
	max-height: 70px;
	display: flex;
	align-items: center;
}

.flow__right p{
	margin: 0;
}

.flow__balloon{
	background: #2871B4;
	padding: 20px;
	position: relative;
	font-size: 22px;
	color: #fff;
	text-align: center;
	font-weight: bold;
	max-height: 70px;
}

.flow__list:not(:last-of-type) .flow__balloon::before{
	content: "";
	top: 100%;
	left: 0;
	right: 0;
	margin: 0 auto;
	position: absolute;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 18px 18px 0 18px;
	border-color: #2871b4 transparent transparent transparent;
}

.flow__list:nth-of-type(2) .flow__balloon{
	opacity: .9;
}

.flow__list:nth-of-type(3) .flow__balloon{
	opacity: .8;
}

.flow__list:nth-of-type(4) .flow__balloon{
	opacity: .7;
}

/*===================================================================

	005. message

===================================================================*/

.message__read{
	text-align: center;
	margin-bottom: 100px;
}

.message__copy{
	width: 90%;
	margin: 0 auto 65px;
}

.message__copy img{
	width: 100%;
}

.message__cont{
	border-bottom: 1px solid #000;
	margin-bottom: 55px;
}

.message__list{
	position: relative;
	margin-bottom: 120px;
}

.message__detail{
	position: relative;
	width: 100%;
}

.message__img{
	position: absolute;
	top: -40px;
	left: 0;
	width: 40%;
	max-width: 440px;
}

.message__img img{
	display: block;
	width: 100%;
}

.message__desc{
	border: 1px solid #000;
	padding: 35px 20px 35px 35px;
	margin: 0 0 0 auto;
	width: 61.6%;
	min-height: 460px;
}

.message__title{
	font-size: 24px;
	margin-bottom: 1em;
}

.message__list:nth-of-type(even) .message__img{
	left: auto;
	right: 0;
}

.message__list:nth-of-type(even) .message__desc{
	margin: 0 auto 0 0;
	padding: 35px 35px 35px 20px;
}

/*===================================================================

	006. liquid

===================================================================*/

@media screen and (max-width: 1485px){
	.flow__balloon{
		font-size: 20px;
	}
	.flow .text.read{
		font-size: 16px;
	}
}

@media screen and (max-width: 1375px){
	.flow__balloon{
		font-size: 18px;
	}
}

@media screen and (max-width: 1300px){
	.flow .text.read{
		font-size: 14px;
	}
}

@media screen and (max-width: 1270px){
	.flow, .require{
		width: 80%;
	}
}

@media screen and (max-width: 990px){
	.flow__balloon{
		font-size: 16px;
	}
}

@media screen and (max-width: 905px){
	.flow__balloon{
		font-size: 14px;
	}
	.flow .text.read{
		font-size: 12px;
	}
}

@media screen and (max-width: 820px){
	.flow, .require{
		width: 90%;
	}
}

/*===================================================================

	007. responsive

===================================================================*/

@media screen and (max-width: 768px){

	.title{
		background: url(../images/recruit__title--sp.png) no-repeat center center / cover;
		height: 44vw;
	}

	.page-menu{
		justify-content: flex-start;
	}
	/*=======================================

		002. about

	=======================================*/

	.about .text.read{
		font-size: 12px;
	}

	.about__banner-list{
		flex-wrap: wrap;
	}

	.about__banner{
		width: 100%;
		max-width: initial;
		margin-bottom: 1em;
		text-align: center;
	}

	.modal_content{
		width: 95%;
		padding: 0;
		box-sizing: border-box;
	}

	.modal__close{
		right: 2.5%;
	}

	.modal__image{
		width: 100%;
		max-width: 810px;
		margin: 0 auto 40px;
	}

	.modal__read{
		font-size: 18px;
		text-align: center;
		line-height: 1.4;
	}

	.modal__desc{
		padding: 0 10px 10px;
	}

	/*=======================================

		003. requirements

	=======================================*/

	.require{
		width: 100%;
		margin: 0 auto 80px;
	}

	.tab-cont{
		margin-bottom: 70px;
	}

	.require .tab-menu{
		margin-bottom: 20px;
	}

	.require__more{
		width: 90%;
		font-size: 18px;
		margin: 0 auto 30px;
	}



	.require__mv{
		margin-bottom: 45px;
	}

	.require__info{
		width: 90%;
		margin: 0 auto;
	}

	.require__desc{
		margin-bottom: 30px;
		font-size: 12px;
	}

	.require__info.hide{
		height: 100vh;
	}

	.require__subtitle{
		font-size: 12px;
	}

	.require__text {
		font-size: 12px;
	}

	.require__contact{
		width: 90%;
		margin: 0 auto;
		font-size: 18px;
	}

	/*=======================================

		004. flow

	=======================================*/

	.flow{
		max-width: 1000px;
		width: 90%;
		margin: 0 auto 120px;
	}

	.flow__list{
		display: flex;
		flex-wrap: wrap;
	}

	.flow__left{
		flex-shrink: 0;
		width: 100%;
		max-width: initial;
		margin: 0 0 30px;
	}

	.flow__list{
		margin-bottom: 2em;
	}


	/*=======================================

		005. message

	=======================================*/

	.message__read{
		text-align: center;
		margin-bottom: 100px;
	}

	.message__copy{
		font-size: 32px;
		margin-bottom: 30px;
	}

	.message .text.read{
		font-size: 12px;
	}

	.message__cont{
		border-bottom: none;
		margin-bottom: 55px;
	}

	.message__list{
		position: relative;
		margin-bottom: 40px;
	}

	.message__detail{
		position: relative;
		width: 100%;
	}

	.message__img{
		position: static;
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 20px;
	}

	.message__img img{
		display: block;
		width: 40%;
		height: 40%;
	}

	.message__img *:not(img){
		min-width: 60%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		text-align: center;
		line-height: 1.4;
		flex-shrink: 0;
	}

	.message__desc{
		border: none;
		padding: 0;
		margin: 0;
		width: 100%;
		min-height: initial;
	}

	.message__title{
		font-size: 20px;
		margin-bottom: 0;
	}

	.message__list:nth-of-type(even) .message__img{
		left: auto;
		right: 0;
	}

	.message__list:nth-of-type(even) .message__desc{
		margin: 0;
		padding: 0;
	}
}

/* 22.4.22 */
.tab-menu ul {
	width: 100%;
}
.tab-list {
	font-size: 14px;
}
@media screen and (max-width: 768px) {
	.tab-menu {
		height: 104px;
	}
	.tab-menu ul {
		flex-wrap: wrap;
	}
	.tab-list {
		font-size: 12px;
		margin: 0 5px;
		height: 52px;
		width: calc((100% - 20px) / 2);
	}
}