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

.sp_only{
	display:none !important;
}

#modal_box{
	position:relative;
}

.modal_close{
	position: absolute;
	width:53px;
	height:53px;
	right: 73px;
	top: 73px;
	cursor:pointer;
	z-index:10;
}

.modal_close img{
	position:absolute;
	left:0;
	top:0;
}

.modal_close:hover .close_1{
	-webkit-animation:close1 0.5s ease-out;
	animation:close1 0.5s ease-out;
}

.modal_close:hover .close_2{
	-webkit-animation:close2 0.5s ease-out;
	animation:close2 0.5s ease-out;
}

@-webkit-keyframes close1{
	0%{-webkit-transform: rotate(0deg);}
 50%{-webkit-transform: rotate(45deg);}
100%{-webkit-transform: rotate(0deg);}
}

@keyframes close1{
	0%{transform: rotate(0deg);}
 50%{transform: rotate(45deg);}
100%{transform: rotate(0deg);}
}

@-webkit-keyframes close2{
	0%{-webkit-transform: rotate(0deg);}
 50%{-webkit-transform: rotate(-45deg);}
100%{-webkit-transform: rotate(0deg);}
}

@keyframes close2{
	0%{transform: rotate(0deg);}
 50%{transform: rotate(-45deg);}
100%{transform: rotate(0deg);}
}

#modal #modal_box .left_area{
	float:left;
	max-width:654px;
	width:65.4%;
	background-repeat:no-repeat;
	background-size:cover;
	box-sizing:border-box;
}

#modal.job_1 #modal_box .left_area{
	max-height: 479px;
	height: 479px;
	background-image:url(../images/index/modal_fuki1.png);
	padding: 2.3em 6.7% 0 4.5%;
}

#modal.job_2 #modal_box .left_area{
	max-height: 350px;
	height: 350px;
	background-image:url(../images/index/modal_fuki2.png);
	padding: 2.3em 6.7% 0 4.5%;
	margin-top: 59px;
}

#modal.job_3 #modal_box .left_area{
	max-height: 350px;
	height: 350px;
	background-image:url(../images/index/modal_fuki3.png);
	padding: 2.3em 6.7% 0 4.5%;
	margin-top: 72px;
}

#modal.job_4 #modal_box .left_area{
	max-height: 323px;
	height: 323px;
	background-image:url(../images/index/modal_fuki4.png);
	padding: 2.3em 6.7% 0 4.5%;
	margin-top: 83px;
}

#modal.job_5 #modal_box .left_area{
	max-height: 377px;
	height: 377px;
	background-image:url(../images/index/modal_fuki5.png);
	padding: 2.3em 6.7% 0 4.5%;
	margin-top: 60px;
}

#modal.member_1 #modal_box .left_area,
#modal.member_2 #modal_box .left_area,
#modal.member_3 #modal_box .left_area,
#modal.member_4 #modal_box .left_area,
#modal.member_5 #modal_box .left_area,
#modal.member_6 #modal_box .left_area{
	max-width:500px;
	width:50%;
	margin-left: 6%;
}

#modal_box h4{
	font-size:1.24em;
	font-weight:normal;
	margin-bottom: 1.5em;
}

#modal_box h4.member{
	font-size:1.5em;
	font-weight:bold;
	color:#000;
	line-height: 2;
	margin-bottom: 2.5em;
}

#modal.member_2 #modal_box h4.member,
#modal.member_5 #modal_box h4.member{
	line-height: 1.5;
	margin-bottom: 2.1em;
}

#modal.job_1 #modal_box h4{
	color:#95c855;
}

#modal.job_2 #modal_box h4{
	color:#f39c39;
}

#modal.job_3 #modal_box h4{
	color:#00b8ee;
}

#modal.job_4 #modal_box h4{
	color:#bc97c4;
}

#modal.job_5 #modal_box h4{
	color:#f19ca6;
}

#modal_box h4 img{
	max-width:67px;
	width:100%;
	height:auto;
	margin-right: 1.24em;
}

#modal.member_2 #modal_box h4 img,
#modal.member_5 #modal_box h4 img{
	margin-top: 0.7em;
	float: left;
}

#modal_box h5{
	font-size:1.25em;
	color:#000;
	border-bottom: 3px solid #000;
	padding-bottom: 1.3em;
	margin-bottom: 1em;
}

#modal_box p{
	font-size: 0.875em;
	line-height: 1.8;
	margin-bottom: 2em;
}

#modal.member_1 #modal_box p,
#modal.member_2 #modal_box p,
#modal.member_3 #modal_box p,
#modal.member_4 #modal_box p,
#modal.member_5 #modal_box p,
#modal.member_6 #modal_box p{
	font-size: 1.12em;
	color: #000;
	line-height: 2.1;
}

#modal_box .pdf_link{
	background-image:url(../images/index/modal_link_arrow.png);
	background-position:left center;
	background-repeat:no-repeat;
	padding-left: 2em;
	background-size: 4%;
	line-height: 2em;
}

#modal_box .pdf_link img{
	max-width:23px;
	width:100%;
	height:auto;
	margin-left: 0.7em;
}

#modal_box .pdf_link a,
#modal_box .pdf_link a:link,
#modal_box .pdf_link a:visited{
	font-size:0.875em;
	text-decoration:underline;
}

#modal.job_1 #modal_box .pdf_link a,
#modal.job_1 #modal_box .pdf_link a:link,
#modal.job_1 #modal_box .pdf_link a:visited{
	color:#95c855;
}

#modal.job_2 #modal_box .pdf_link a,
#modal.job_2 #modal_box .pdf_link a:link,
#modal.job_2 #modal_box .pdf_link a:visited{
	color:#f39c39;
}

#modal.job_3 #modal_box .pdf_link a,
#modal.job_3 #modal_box .pdf_link a:link,
#modal.job_3 #modal_box .pdf_link a:visited{
	color:#00b8ee;
}

#modal.job_4 #modal_box .pdf_link a,
#modal.job_4 #modal_box .pdf_link a:link,
#modal.job_4 #modal_box .pdf_link a:visited{
	color:#bc97c4;
}

#modal.job_5 #modal_box .pdf_link a,
#modal.job_5 #modal_box .pdf_link a:link,
#modal.job_5 #modal_box .pdf_link a:visited{
	color:#f19ca6;
}

#modal_box .right_area{
	float:right;
}

#modal.job_1 #modal_box .right_area{
	max-width:250px;
	width:25%;
}

#modal.job_2 #modal_box .right_area{
	max-width:241px;
	width:24.1%;
}

#modal.job_3 #modal_box .right_area{
	max-width:237px;
	width:23.7%;
}

#modal.job_4 #modal_box .right_area{
	max-width:250px;
	width:25%;
}

#modal.job_5 #modal_box .right_area{
	max-width:241px;
	width:24.1%;
}


#modal.member_3 #modal_box .right_area,
#modal.member_4 #modal_box .right_area,
#modal.member_5 #modal_box .right_area{
	max-width:360px;
	width:35%;
}
/*横長のイラスト*/
#modal.member_1 #modal_box .right_area,
#modal.member_2 #modal_box .right_area,
#modal.member_6 #modal_box .right_area{
	max-width:360px;
	width:40%;
}

#modal_box .right_area img{
	width:100%;
	height:auto;
}



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

	.sp_only{
		display:block !important;
	}

	.pc_only{
		display:none !important;
	}

	#modal_box{
		top: 0 !important;
		padding-top:20%;
	}

	#modal.member_1 #modal_box,
	#modal.member_2 #modal_box,
	#modal.member_3 #modal_box,
	#modal.member_4 #modal_box,
	#modal.member_5 #modal_box,
	#modal.member_6 #modal_box{
		background-color: #ffe500;
	}

	#modal.show{
		background-color: rgba(255,255,255,0.8);
	}

	.modal_close{
		position:fixed;
		width: 7.5%;
		height: auto;
		right: 10.6%;top:3%;
		z-index:5;
	}

	.modal_close img{
		width:100%;
		height:auto;
	}

	#modal_box h3{
		width: 85.29%;
		margin: 0 auto;
		margin-bottom: 1.8em;
		position: relative;
		font-weight:bold;
	}


	#modal_box h3 p{
		text-align: center;
		position: absolute;
		width: 100%;
		top: 50%;
		-webkit-transform: translateY(-50%);
		-ms-transform: translateY(-50%);
		transform: translateY(-50%);
	}

	#modal_box h3 p span{
		font-size: 0.7em;
	}

	#modal.job_4 #modal_box h3 p{
		line-height: 1.4;
	}

	#modal #modal_box .left_area{
		float: none;
		max-height: inherit;
		height: auto;
		max-width: inherit;
		width: 83.8%;
		margin: 0 auto;
		padding: 0 7.3%;
	}

	#modal.job_1 #modal_box .left_area,
	#modal.job_2 #modal_box .left_area,
	#modal.job_3 #modal_box .left_area,
	#modal.job_4 #modal_box .left_area,
	#modal.job_5 #modal_box .left_area,
	#modal.job_6 #modal_box .left_area{
		max-height:inherit;
		height:auto;
		background-image:none;
		padding: 0;
		margin:0 auto;
	}

	#modal_box .left_area .fuki_top{
		background-image:url(../images/index/sp_modal_bg_top.png);
		background-size: 100%;
		background-repeat:no-repeat;
		line-height:1;
	}

	#modal_box .left_area .fuki_top img{
		width:100%;
		height:auto;
	}

	#modal #modal_box .left_area .fuki{
		padding: 0 7.3%;
		background-image:url(../images/index/sp_modal_bg.png);
		background-size: 100%;
	}

	#modal #modal_box .left_area .yellow p{
		font-size:0.875em;
	}

	#modal_box h4{
		font-weight:bold;
		font-size: 1em;
	}

	#modal_box h4 span{
		font-size: 0.8em;
	}

	#modal_box .pdf_link{
		padding-left: 2em;
		background-size: 8%;
		line-height: 1.2em;
	}

	#modal_box .pdf_link img{
		max-width: inherit;
		width: 8%;
	}

	#modal_box .pdf_link a, #modal_box .pdf_link a:link, #modal_box .pdf_link a:visited{
		font-size: 0.775em;
	}

	#modal_box .left_area .fuki_top{
		display: grid !important;
	}

	#modal.job_1 #modal_box .right_area,
	#modal.job_2 #modal_box .right_area,
	#modal.job_3 #modal_box .right_area,
	#modal.job_4 #modal_box .right_area,
	#modal.job_5 #modal_box .right_area{
		max-width: inherit;
		width: 83.8%;
		margin: 0 auto;
		float: none;
	}

	#modal.member_1 #modal_box .left_area, #modal.member_2 #modal_box .left_area, #modal.member_3 #modal_box .left_area, #modal.member_4 #modal_box .left_area, #modal.member_5 #modal_box .left_area, #modal.member_6 #modal_box .left_area{
		max-width:inherit;
		width: 100%;
		float:none;
		margin:0 auto;
		padding:0 6.6%;

	}

	#modal.member_1 #modal_box .right_area, #modal.member_2 #modal_box .right_area, #modal.member_3 #modal_box .right_area, #modal.member_4 #modal_box .right_area, #modal.member_5 #modal_box .right_area, #modal.member_6 #modal_box .right_area{
		max-width:inherit;
		width: 80%;
		float:none;
		margin:0 auto;
	}

	#modal_box h4.member{
		font-size: 1.05em;
		line-height: 1.8;
		margin-bottom: 2.1em;
	}

	#modal_box h4 img{
		max-width: inherit;
		width: 13.22%;
		margin-right: 0.9em;
	}

	#modal.member_4 #modal_box h4 img{
		margin-top: 0.7em;
		float: left;
	}

	#modal_box h5{
		font-size: 1em;
	}

	.modal_close:hover .close_1{
		-webkit-animation:none;
		animation:none;
	}

	.modal_close:hover .close_2{
		-webkit-animation:none;
		animation:none;
	}


}