@charset "UTF-8";
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, 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, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video{
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	vertical-align: baseline;
	box-sizing: border-box;
}
html{
	line-height: 1;
}
.clearfix:after{
	content: "";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}
.clearfix{
	display: inline-table;
}
/* Hides from IE-mac \*/
* html .clearfix{
	height: 1%;
}
.clearfix{
	display: block;
}
/* End hide from IE-mac */
ol, ul{
	list-style: none;
}
table{
	border-collapse: collapse;
	border-spacing: 0;
}
.clear {
	clear: both;
}
em.red{
	color: #d4145a;
}
caption, th, td{
	text-align: left;
	font-weight: normal;
	vertical-align: middle;
}
q, blockquote{
	quotes: none;
}
q:before, q:after, blockquote:before, blockquote:after{
	content: "";
	content: none;
}
a img {
	border: none;
}
article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary{
	display: block;
}
*, :after, :before {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
body{
	color: #000;
	font-family: sans-serif;
	line-height: 1.5;
	-webkit-text-size-adjust: 100%;
}
img{
	height: auto;
	max-width: 100%;
}
a{
	text-decoration: none;
}
@media screen and (max-width: 768px) {
	.hidden-sp{
		display: none !important;
	}
}
@media screen and (min-width: 769px) {
	.hidden-pc{
		display: none !important;
	}
}
@media screen and (min-width: 1601px) {
	.hidden-pc_1601{
		display: none !important;
	}
}

/*------------------------------------------
  サービス別レスポンシブ
------------------------------------------*/
/*youtube*/
.youtubeWrapper{
	position: relative;
	width: 100%;
	padding-top: 56.25%;
}
.youtubeWrapper iframe {
	position: absolute;
	top: 0;
	right: 0;
	width: 100% !important;
	height: 100% !important;
}
/*googlemap*/
.ggmapWrapper{
	position: relative;
	/*padding-bottom: 56.25%;*/
	height: 390px;
	overflow: hidden;
}
.ggmapWrapper iframe,
.ggmapWrapper object,
.ggmapWrapper embed{
	position: absolute;
	top: -200px;
	left: 0;
	width: 100%;
	height: 600px;
}
.ggmapWrapper iframe{
	height: 800px;
}


/*------------------------------------------
  cmn
------------------------------------------*/
img{
	vertical-align: top;
}
.hoverBtn{
	-webkit-transition: 0.3s;
	-moz-transition: 0.3s;
	-o-transition: 0.3s;
	transition: 0.3s;
}
.hoverBtn:hover{
}

@media screen and (max-width: 768px) {
	img{
		width: 100%;
	}
}

/*------------------------------------------
  body
------------------------------------------*/
body{
	font-family: 'Noto Sans JP', sans-serif;
	line-height: 1.5;
	-webkit-text-size-adjust: 100%;
}
@media screen and (max-width: 768px) {
}



/*------------------------------------------
  header
------------------------------------------*/
@media screen and (min-width: 769px) {
	header{
		width: 100%;
		height: 148px;
		position: fixed;
		background: url("../img/bg_header.png") no-repeat center top / 100% 148px;
		z-index: 1002;
		.innerBox{
			width: 960px;
			margin: 0 auto;
			position: relative;
		}
		.logoBox{
			padding: 15px 0 0 15px;
			float: left;
		}
		nav{
			ul{
				float: right;
				padding: 35px 0 0 0;
				li{
					float: left;
					margin-right: 40px;
					&:last-child{
						margin-right: 0;
					}
					a{
						font-size: 16px;
						font-weight: bold;
						color: #3c3c3c;
					}
				}
			}
		}
		.btnEntry{
			width: 144px;
			position: absolute;
			top: 55px;
			left: 50%;
			-webkit-transform: translate(500px, 0px);
			transform: translate(500px, 0px);
			-webkit-transition: 0.3s;
			-moz-transition: 0.3s;
			-o-transition: 0.3s;
			transition: 0.3s;
		}
		&.small{
			.btnEntry{
				width: 100px;
				position: absolute;
				top: 30px;
				left: 50%;
				-webkit-transform: translate(500px, 0px);
				transform: translate(500px, 0px);
			}
		}
	}
}
@media screen and (max-width: 768px) {
	header{
	}
}


/*------------------------------------------
  nav
------------------------------------------*/
@media screen and (min-width: 769px) {
}
@media screen and (max-width: 768px) {
	nav .menuBtn{
		width: 40px;
		float: inherit;
		position: fixed;
		right: 5%;
		top: 16px;
		z-index: 901;
	}
	nav .menuBtn img.close{
		display: none;
	}
	nav .menuBtn.active img.open{
		display: none;
	}
	nav .menuBtn.active img.close{
		display: inline-block;
	}
	nav .navInner{
		width: 100%;
		padding: 30px 0 0 0;
		display: none;
		background: rgba(255,255,255,0.9);
		position: absolute;
		left: 0;
		top: 60px;
		z-index: 10;
	}
	nav .boxR{
		display: none;
		background: #f2f7fa;
		position: fixed;
		top: 140px;
		padding: 0;
		width: 100%;
		z-index: 1000;
		border-top: 2px solid #CCC;
		border-bottom: 2px solid #CCC;
	}
	nav ul li{
		height: inherit;
		float: inherit;
		padding: 20px 0;
		text-align: left;
		display: block;
		background: url("../img/dot_03.png") repeat-x left bottom / 6px;
		&:last-child{
			background: none;
		}
	}
	nav ul li img{
		width: 100px;
	}
	nav ul li span{
		display: block;
	}
	nav ul li:last-child{
		margin-right: 0;
	}
	nav ul li a{
		padding: 0 0 0 10%;
		text-decoration: none;
		font-size: 16px;
		font-weight: bold;
		color: #333;
		display: block;
	}
	nav ul li a:hover{
		text-decoration: underline;
	}
	header{
		position: fixed;
		height: 110px;
		background: url("../img/bg_header_sp.png") no-repeat center top / 100% 110px;
		top: 0;
		left: 0;
		width: 100%;
		z-index: 1010;
	}
	header .logoBox{
		padding: 10px 0 0 10px;
		float: left;
	}
	header .logoBox img{
		width: 130px;
		position: relative;
		z-index: 2;
	}
	header .btnEntry{
		position: fixed;
		width: 100px;
		bottom: 10px;
		right: 5%;
	}
	body{
		height: 100%;
	}
	.spMenuBg{
		display: none;
		height: 100%;
		width: 100%;
		background: #d5ebf8;
		position: absolute;
		left: 0;
		top: 0;
		z-index: 1008;
	}
}



/*------------------------------------------
  footer
------------------------------------------*/
footer{
	height: 251px;
	padding: 15px 100px;
	background: url("../img/bg_footer.png") no-repeat center top / 100% 251px;
	box-sizing: border-box !important;
}
footer *{
	line-height: 1.5 !important;
	font-family: sans-serif !important;
	box-sizing: border-box !important;
	letter-spacing: 1px !important;
}
footer .innerBox{
	width: 930px;
	margin: 0 auto;
}
footer #links{
	padding: 100px 0 0 0;
	float: left;
	font-size: 12px;
	color: #FFF;
}
footer #links *{
	color: #FFF;
	text-decoration: none;
	font-size: 12px;
}
footer #links a:hover{
	text-decoration: underline;
	opacity: 0.8;
}
footer #copy{
	padding: 115px 0 0 0;
	float: right;
	text-align: right;
}
footer #copy span a{
	font-size: 12px;
	color: #FFF;
}
footer #copy small{
	font-size: 12px;
	color: #FFF;
}
@media screen and (max-width: 768px) {
	footer{
		width: 100%;
		padding: 5%;
		margin: 0 auto;
		text-align: center;
		background: url("../img/bg_footer_sp.png") no-repeat center top / 100% 400px;
	}
	footer .innerBox{
		width: 100%;
	}
	footer #links{
		padding: 50px 0 0 0;
		float: inherit;
		padding-bottom: 1%;
	}
	footer #links,
	footer #links *{
		font-size: 12px;
	}
	footer #copy{
		padding: 40px 0 0 0;
		float: inherit;
		font-size: 12px;
		text-align: center;
	}
	footer #copy span{
		display: inline-block;
		margin-bottom: 5px;
	}
	footer #copy small{
		font-size: 12px;
	}
}


/*------------------------------------------
  mv
------------------------------------------*/
.mv{
	padding-top: 84px;
	position: relative;
	.mvBottom{
		width: 100%;
		position: relative;
		bottom: 0;
		-webkit-transform: translate(0, -55%);
		transform: translate(0, -55%);
		img{
			width: 100%;
		}
	}
}
@media screen and (max-width: 768px) {
	.mv{
		padding: 60px 0 0 0;
	}
}

/*------------------------------------------
  #topContents
------------------------------------------*/
.bg_topContents{
	padding: 180px 0 0 0;
	background: url("../img/bg_top.jpg") no-repeat center top / cover;
}
.topContents{
	h1{
		margin-bottom: 30px;
		text-align: center;
	}
	.txt_01{
		width: 580px;
		padding: 5px 30px;
		margin: 0 auto 50px auto;
		display: block;
		color: #FFF;
		font-size: 22px;
		font-weight: bold;
		background: #007dc0;
		text-align: center;
		letter-spacing: 0.2em;
		strong{
			padding: 0 30px;
			position: relative;
			display: inline-block;
			&:before,
			&:after{
				content: "";
				width: 20px;
				height: 1px;
				display: block;
				background: #FFF;
				position: absolute;
				top: 50%;
				-webkit-transform: translate(0, -50%);
				transform: translate(0, -50%);
			}
			&:before{
				left: 0;
			}
			&:after{
				right: 0;
			}
		}
	}
	.txt_02{
		font-size: 18px;
		font-weight: bold;
		color: #3d3d3d;
		text-align: center;
		line-height: 1.8;
	}
	.bannerBox{
		padding: 100px;
		text-align: center;
		a:hover{
			opacity: 0.8;
		}
	}
}


@media screen and (max-width: 768px) {
	.bg_topContents{
		padding: 100px 0 0 0;
	}
	.topContents{
		padding: 0 5%;
		h1{
			margin-bottom: 20px;
			text-align: center;
		}
		.txt_01{
			width: 100%;
			padding: 5px 20px;
			font-size: 12px;
			letter-spacing: 0.1em;
		}
		.txt_02{
			font-size: 14px;
		}
		.bannerBox{
			padding: 50px 0 100px 0;
		}
	}
}


/*------------------------------------------
  #links_01
------------------------------------------*/
h2{
	margin-bottom: 100px;
	text-align: center;
}
.sttlBox{
	h3{
		margin-bottom: 80px;
		font-size: 26px;
		font-weight: bold;
		position: relative;
		color: #4d4d4d;
		text-align: center;
		strong{
			font-size: 32px;
			font-weight: bold;
		}
		&:before,
		&:after{
			content: "";
			width: 360px;
			height: 3px;
			display: block;
			background: #3d3d3d;
			position: absolute;
			left: 0;
			top: 50%;
		}
		&:after{
			left: inherit;
			right: 0;
		}
	}
}
#links_01{
	width: 960px;
	padding: 100px 0 150px 0;
	margin: 0 auto;
	.box_01{
		padding-bottom: 150px;
		li{
			float: left;
			margin: 0 45px 45px 0;
			position: relative;
			&:nth-child(2),
			&:nth-child(5),
			&:nth-child(8),
			&:nth-child(11),
			&:nth-child(14),
			&:nth-child(17){
				bottom: -40px;
			}
			&:nth-child(3n){
				margin-right: 0;
			}
			a:hover{
				opacity: 0.8;
			}
		}
	}
}
#client.recruit .wrap_form_area{
	background: #cbc7bb;
	border-radius: 10px;
}
.form_area input[type="text"]{
	width: 525px;
	height: 32px;
	border: none;
	border-radius: 0;
}
.form_area button[type="submit"]{
	background: none;
	height: 32px;
}
.body__search{
	border: 1px solid #CCC;
	border-radius: 20px;
}
#client.recruit .box_map{
	margin-top: -80px;
}
#client.recruit .box_map_inner{
	margin-bottom: 0;
}
#client.recruit .form_area label{
	color: #e97a2a;
}

@media screen and (max-width: 768px) {
	.bgWrapper{
		padding: 60px 0 0 0;
		background: url("../img/bg_search.jpg") no-repeat center top / cover;
		position: relative;
		&:before{
			content: none;
		}
		&:after{
			content: none;
		}
		.imgAnimal_01{
			display: none;
		}
		.imgAnimal_02{
			display: none;
		}
	}
	h2{
		margin-bottom: 40px;
		text-align: center;
	}
	#client.recruit .wrap_form_area{
		background: #cbc7bb;
		border-radius: 10px;
	}
	.form_area input[type="text"]{
		width: 525px;
		height: 32px;
		border: none;
		border-radius: 0;
	}
	.form_area button[type="submit"]{
		background: #d47343;
		height: 32px;
		img{
			width: 100px;
		}
	}
	.sttlBox{
		h3{
			margin-bottom: 40px;
			font-size: 18px;
			strong{
				font-size: 24px;
				font-weight: bold;
			}
			&:before,
			&:after{
				width: 20%;
			}
		}
	}
	#links_01{
		width: 100%;
		padding: 100px 5% 50px 5%;
		margin: 0 auto;
		.box_01{
			padding-bottom: 50px;
			li{
				width: 80%;
				float: inherit;
				margin: 0 auto 45px auto;
				position: relative;
				&:nth-child(2),
				&:nth-child(5),
				&:nth-child(8),
				&:nth-child(11),
				&:nth-child(14),
				&:nth-child(17){
					bottom: inherit;
				}
				&:nth-child(3n){
					margin-right: auto;
				}
			}
		}
	}
	#client.recruit .wrap_form_area{
		border-radius: 0;
	}
	.form_area input[type="text"]{
		width: 525px;
		height: 32px;
		border: none;
		border-radius: 0;
	}
	.form_area button[type="submit"]{
		background: none;
		height: 32px;
		background: #d47343;
	}
	.body__search{
		border: none;
	}
	#client.recruit .box_map{
		margin-top: 0;
		padding: 10px;
		border: 1px solid #CCC;
		border-radius: 20px;
	}
	#client.recruit .box_map_inner{
		margin-bottom: 0;
	}
}

/*------------------------------------------
  #links_02
------------------------------------------*/
.bg_links_02{
	background: url("../img/bg_dot_blue.png") repeat center / 17px;
	position: relative;
	&:before,
	&:after{
		width: 100%;
		height: 47px;
		content: "";
		position: absolute;
		display: block;
	}
	&:before{
		background: url("../img/bg_dot_top.png") no-repeat center top / 100% 47px;
		top: 0;
	}
	&:after{
		background: url("../img/bg_dot_bottom_01.png") no-repeat center bottom / 100% 47px;
		bottom: 0;
	}
}
#links_02{
	width: 960px;
	margin: 0 auto;
	padding: 100px 0 150px 0;
}
@media screen and (min-width: 769px) {
	#links_02{
		width: 960px;
		margin: 0 auto;
		padding: 100px 0 150px 0;
		ul{
			li{
				float: left;
				margin: 0 30px 30px 0;
				&:nth-child(3n){
					margin-right: 0;
				}
				a:hover{
					opacity: 0.8;
				}
			}
		}
	}
}
@media screen and (max-width: 768px) {
	.bg_links_02{
		background: url("../img/bg_dot_blue.png") repeat center / 10px;
		&:before,
		&:after{
			height: 15px;
		}
		&:before{
			background: url("../img/bg_dot_top.png") no-repeat center top / 100% 15px;
		}
		&:after{
			background: url("../img/bg_dot_bottom_01.png") no-repeat center bottom / 100% 15px;
		}
	}
	#links_02{
		width: 100%;
		margin: 0 auto;
		padding: 100px 0 150px 0;
		ul{
			li{
				padding: 0 15px;
			}
		}
		.slick-dots{
			bottom: -65px;
		}
		.slick-prev{
			left: 5px;
			z-index: 100;
			width: 35px;
			height: 75px;
			&:before{
				content: "";
				width: 35px;
				height: 75px;
				background: url("../img/arrow_l.png") no-repeat left center / cover;
				z-index: 100;
				display: block;
				opacity: 1;
			}
		}
		.slick-next{
			right: 5px;
			z-index: 100;
			width: 35px;
			height: 75px;
			&:before{
				content: "";
				width: 35px;
				height: 75px;
				background: url("../img/arrow_r.png") no-repeat left center / cover;
				z-index: 100;
				display: block;
				opacity: 1;
			}
		}
		.slick-dots{
			li{
				padding: 0 5px;
				button:before{
					width: 16px;
					height: 16px;
					border-radius: 10px;
					background: #FFF;
					border: 3px solid #007dc0;
					text-indent: -999px;
					opacity: 1;
				}
				&.slick-active{
						button:before{
						background: #007dc0;
					}
				}
			}
		}
	}
}


/*------------------------------------------
  #links_03
------------------------------------------*/
#links_03{
	width: 960px;
	padding: 50px 0 0 0;
	margin: 0 auto;
	>ul{
		font-size: 0;
		text-align: center;
		li{
			width: 290px;
			margin: 0 30px 100px 0;
			display: inline-block;
			font-size: 20px;
			&:nth-child(3),
			&:last-child{
				margin-right: 0;
			}
			a{
				display: block;
			}
			dl{
				dt{
					padding: 15px 50px;
					margin-bottom: 20px;
					display: inline-block;
					position: relative;
					background: #009b6f;
					border-radius: 12px;
					color: #FFF;
					font-weight: bold;
					&:after{
						content: "";
						width: 20px;
						height: 20px;
						background: url("../img/sttl_arrow_green.png") no-repeat center top / 20px;
						position: absolute;
						right: 20%;
						bottom: -20px;
					}
				}
				dd{
					.imgBox{
						position: relative;
						span{
							position: absolute;
							right: 10px;
							bottom: 20px;
							opacity: 0;
							-webkit-transition: 0.3s;
							-moz-transition: 0.3s;
							-o-transition: 0.3s;
							transition: 0.3s;
						}
					}
					>a:hover{
						.imgBox span{
							opacity: 1;
						}
					}
					.btn{
						width: 190px;
						height: 60px;
						margin: 0 auto;
						display: table;
						border: 5px solid #ea2213;
						border-radius: 15px;
						background: #FFF;
						>span{
							padding: 3px;
							display: table-cell;
							text-align: center;
							vertical-align: middle;
							>span{
								padding: 9px 0;
								display: block;
								background: #ea2213;
								border-radius: 7px;
								color: #FFF;
								font-weight: bold;
							}
						}
						&:hover{
							opacity: 0.8;
						}
					}
				}
			}
		}
	}
	.box_01{
		padding: 0 15px;
		dl{
			padding: 40px;
			background: url("../img/bg_dot_green.png") repeat center / 17px;
			border-radius: 20px;
			dt{
				padding: 0 0 20px 0;
				margin: 0 0 20px 0;
				font-size: 24px;
				font-weight: bold;
				color: #4d4d4d;
				text-align: center;
				position: relative;
				&:after{
					content: "";
					width: 270px;
					height: 3px;
					display: block;
					background: url("../img/dot_01.png") repeat-x left bottom / 6px;
					position: absolute;
					bottom: 0;
					left: 50%;
					-webkit-transform: translate(-50%, -50%);
					transform: translate(-50%, -50%);
				}
			}
			dd{
				p{
					font-size: 16px;
					line-height: 2;
					color: #4d4d4d;
				}
				ul{
					padding: 40px 15px 0 15px;
					li{
						float: left;
						margin-right: 20px;
						&:last-child{
							margin-right: 0;
						}
					}
				}
			}
		}
		.topBox{
			padding: 0 50px 30px 50px;
		}
		.boxLR{
			padding-bottom: 130px;
			dl{
				width: 450px;
				float: left;
				&:nth-child(2){
					float: right;
				}
			}
		}
	}
}
@media screen and (max-width: 768px) {
	#links_03{
		width: 100%;
		padding: 50px 5% 0 5%;
		>ul{
			font-size: 0;
			padding-bottom: 30px;
			text-align: center;
			li{
				width: 50%;
				padding: 0 2%;
				margin: 0 0 50px 0;
				float: inherit;
				display: inline-block;
				font-size: 20px;
				&:nth-child(3),
				&:last-child{
					margin-right: auto;
				}
				dl{
					dt{
						min-width: 100px;
						padding: 12px 20px;
						margin-bottom: 20px;
						display: inline-block;
						position: relative;
						font-size: 16px;
						&:after{
							content: "";
							width: 20px;
							height: 20px;
							background: url("../img/sttl_arrow_green.png") no-repeat center top / 20px;
							position: absolute;
							right: 20%;
							bottom: -20px;
						}
					}
					dd{
						.imgBox{
							position: relative;
							span{
								width: 55px;
								position: absolute;
								right: 0;
								bottom: 10px;
								opacity: 1;
							}
						}
						.btn{
							width: 100%;
							height: 30px;
							border: 4px solid #ea2213;
							>span{
								>span{
									padding: 5px 0;
									font-size: 14px;
								}
							}
							&:hover{
								opacity: 0.8;
							}
						}
					}
				}
			}
		}
		.box_01{
			padding: 0;
			dl{
				padding: 40px 5%;
				background: url("../img/bg_dot_green.png") repeat center / 10px;
				dt{
					padding: 0 0 20px 0;
					margin: 0 0 20px 0;
					font-size: 20px;
					&:after{
						content: "";
						width: 240px;
					}
				}
				dd{
					p{
						font-size: 14px;
					}
					ul{
						padding: 40px 0 0 0;
						font-size: 0;
						text-align: center;
						li{
							margin: 0 0 20px 0;
							padding: 0 2%;
							float: inherit;
							width: 50%;
							display: inline-block;
						}
					}
				}
			}
			.topBox{
				padding: 0 0 30px 0;
				dl{
					padding-bottom: 10px;
				}
			}
			.boxLR{
				padding-bottom: 130px;
				dl{
					width: 100%;
					margin-bottom: 30px;
					float: inherit;
					&:nth-child(2){
						float: inherit;
					}
					&:last-child{
						margin-bottom: 0;
					}
				}
			}
		}
	}
}


/*------------------------------------------
  #links_04
------------------------------------------*/
.bg_links_04{
	background: url("../img/bg_dot_blue.png") repeat center / 17px;
	position: relative;
	&:before,
	&:after{
		width: 100%;
		height: 47px;
		content: "";
		position: absolute;
		display: block;
	}
	&:before{
		background: url("../img/bg_dot_top.png") no-repeat center top / 100% 47px;
		top: 0;
	}
	&:after{
		background: url("../img/bg_dot_bottom_01.png") no-repeat center bottom / 100% 47px;
		bottom: 0;
	}
}
#links_04{
	padding: 100px 0 100px 0;
	ul{
		width: 830px;
		padding: 0 0 100px 0;
		margin: 0 auto;
		li{
			padding: 25px 0;
			margin-bottom: 30px;
			border-radius: 15px;
			&:last-child{
				margin-bottom: 0;
			}
			&:nth-child(1){
				background: url("../img/step_01.png") no-repeat left 30px center / 49px #FFF;
			}
			&:nth-child(2){
				background: url("../img/step_02.png") no-repeat left 30px center / 49px #FFF;
			}
			&:nth-child(3){
				background: url("../img/step_03.png") no-repeat left 30px center / 49px #FFF;
			}
			&:nth-child(4){
				background: url("../img/step_04.png") no-repeat left 30px center / 49px #FFF;
			}
			dl{
				width: 100%;
				display: table;
				color: #4d4d4d;
				dt{
					display: table-cell;
					width: 320px;
					padding: 0 0 0 110px;
					font-size: 20px;
					font-weight: bold;
					vertical-align: middle;
				}
				dd{
					display: table-cell;
					padding: 0 30px 0 0;
					font-size: 16px;
					vertical-align: middle;
				}
			}
		}
	}
}
@media screen and (max-width: 768px) {
	.bg_links_04{
		background: url("../img/bg_dot_blue.png") repeat center / 10px;
		&:before,
		&:after{
			height: 15px;
		}
		&:before{
			background: url("../img/bg_dot_top.png") no-repeat center top / 100% 15px;
		}
		&:after{
			background: url("../img/bg_dot_bottom_01.png") no-repeat center bottom / 100% 15px;
		}
	}
	#links_04{
		padding: 80px 5% 60px 5%;
		ul{
			width: 100%;
			padding: 0 0 50px 0;
			li{
				padding: 25px 0;
				margin-bottom: 5%;
				border-radius: 15px;
				background: #FFF !important;
				&:last-child{
					margin-bottom: 0;
				}
				&:nth-child(1),
				&:nth-child(2),
				&:nth-child(3),
				&:nth-child(4){
					background: none;
				}
				&:nth-child(1) dl dt{
					background: url("../img/step_01.png") no-repeat left 10% center / 40px;
				}
				&:nth-child(2) dl dt{
					background: url("../img/step_02.png") no-repeat left 10% center / 40px;
				}
				&:nth-child(3) dl dt{
					background: url("../img/step_03.png") no-repeat left 10% center / 40px;
				}
				&:nth-child(4) dl dt{
					background: url("../img/step_04.png") no-repeat left 10% center / 40px;
				}
				dl{
					width: 100%;
					display: block;
					color: #4d4d4d;
					dt{
						display: block;
						width: 100%;
						padding: 15px 0 15px 90px;
						margin-bottom: 10px;
						font-size: 18px;
						font-weight: bold;
						vertical-align: middle;
					}
					dd{
						display: block;
						padding: 0 10% 0 10%;
						font-size: 14px;
						vertical-align: middle;
						line-height: 1.8;
					}
				}
			}
		}
	}
}



/*------------------------------------------
  #links_05
------------------------------------------*/
#links_05{
	width: 930px;
	padding: 50px 0 130px 0;
	margin: 0 auto;
	dl{
		padding-bottom: 30px;
		margin-bottom: 30px;
		background: url("../img/dot_01.png") repeat-x left bottom / 6px;
		dt{
			padding: 10px 80px 10px 100px;
			margin-bottom: 10px;
			position: relative;
			font-size: 20px;
			font-weight: bold;
			color: #007dc0;
			background: url("../img/icon_open.png") no-repeat right 30px center / 30px;
			cursor: pointer;
			&.active{
				background: url("../img/icon_close.png") no-repeat right 30px center / 30px;
			}
			&:before{
				content: "";
				width: 32px;
				height: 34px;
				background: url("../img/icon_q.png") no-repeat left center / 32px;
				position: absolute;
				left: 50px;
				display: block;
			}
		}
		dd{
			display: none;
			width: 780px;
			margin: 0 auto 30px auto;
			padding: 33px;
			background: #ededed;
			position: relative;
			font-size: 18px;
			color: #4d4d4d;
			border-radius: 20px;
			&:after{
				content: "";
				width: 32px;
				height: 32px;
				display: block;
				background: url("../img/sttl_arrow_gray.png") no-repeat center / 32px;
				position: absolute;
				right: 45px;
				bottom: -32px;
				opacity: 1;
			}
		}
	}
}

@media screen and (max-width: 768px) {
	#links_05{
		width: 100%;
		padding: 50px 5% 80px 5%;
		margin: 0 auto;
		dl{
			padding-bottom: 20px;
			margin-bottom: 20px;
			background: url("../img/dot_01.png") repeat-x left bottom / 6px;
			dt{
				padding: 10px 30px 10px 35px;
				margin-bottom: 10px;
				position: relative;
				font-size: 15px;
				font-weight: bold;
				color: #007dc0;
				background: url("../img/icon_open.png") no-repeat right center / 23px;
				cursor: pointer;
				&.active{
					background: url("../img/icon_close.png") no-repeat right center / 23px;
				}
				&:before{
					content: "";
					width: 32px;
					height: 34px;
					background: url("../img/icon_q.png") no-repeat left center / 23px;
					position: absolute;
					left: 0;
					top: 4px;
					display: block;
				}
			}
			dd{
				display: none;
				width: 100%;
				margin: 0 auto 30px auto;
				padding: 30px;
				background: #ededed;
				position: relative;
				font-size: 14px;
				color: #4d4d4d;
				border-radius: 20px;
				line-height: 1.8;
				&:after{
					content: "";
					width: 22px;
					height: 22px;
					display: block;
					background: url("../img/sttl_arrow_gray.png") no-repeat center / 22px;
					position: absolute;
					bottom: -22px;
					right: 35px;
				}
			}
		}
	}
}



/*------------------------------------------
  #links_06
------------------------------------------*/
.bg_links_06{
	background: url("../img/bg_dot_orange.png") repeat center / 17px;
	position: relative;
	&:before,
	&:after{
		width: 100%;
		height: 47px;
		content: "";
		position: absolute;
		display: block;
	}
	&:before{
		background: url("../img/bg_dot_top.png") no-repeat center top / 100% 47px;
		top: 0;
	}
	&:after{
		height: 90px;
		background: url("../img/bg_dot_bottom_02.png") no-repeat center bottom / 100% 90px;
		bottom: 0;
	}
}
#links_06{
	width: 770px;
	margin: 0 auto;
	color: #4d4d4d;
	padding: 150px 0 150px 0;
	h2{
		margin-bottom: 50px;
	}
	.imgBox{
		text-align: center;
		margin-bottom: 45px;
	}
	h3{
		margin-bottom: 15px;
		font-size: 27px;
		font-weight: bold;
		text-align: center;
	}
	p{
		padding: 50px;
		background: #FFF;
		border-radius: 20px;
		font-size: 16px;
		line-height: 2;
	}
}
@media screen and (max-width: 768px) {
	.bg_links_06{
		background: url("../img/bg_dot_orange.png") repeat center / 10px;
		&:before,
		&:after{
			height: 15px;
		}
		&:before{
			background: url("../img/bg_dot_top.png") no-repeat center top / 100% 15px;
		}
		&:after{
			background: url("../img/bg_dot_bottom_02.png") no-repeat center bottom / 100% 15px;
		}
	}
	#links_06{
		width: 100%;
		padding: 80px 5% 100px 5%;
		h2{
			margin-bottom: 50px;
		}
		h3{
			font-size: 20px;
		}
		p{
			padding: 10%;
			font-size: 14px;
			line-height: 1.8;
		}
	}
}


/* ------------------------------
   bottomBtn
------------------------------ */
.bottomBtn{
	padding: 70px 0;
	text-align: center;
	a:hover{
		opacity: 0.8;
	}
}
@media screen and (max-width: 768px) {
	.bottomBtn{
		padding: 70px 5%;
	}
}


/* ------------------------------
   トップへ戻る
------------------------------ */
#toTop{
	position: fixed;
	right: 5%;
	bottom: 5%;
	display: none;
	z-index: 4;
}
#toTop a{
	-webkit-transition: 0.3s;
	-moz-transition: 0.3s;
	-o-transition: 0.3s;
	transition: 0.3s;
}
#toTop a:hover{
	opacity: 0.8;
}
@media screen and (max-width: 768px) {
	#toTop{
		display: none;
	}
}



/*------------------------------------------
  #モーダル
------------------------------------------*/
.modalContents{
	display: none;
}
.modaal-wrapper{
	z-index: 1001;
}
.modaal-container{
	max-width: inherit;
	padding: 0;
	background: #FFF;
	>button{
		display: none;
	}
}
.modaal-inner-wrapper{
	padding: 0;
}
.modaal-content-container{
	padding: 0;
}
.modalData{
	position: relative;
}
.modaal-close{
	transition: inherit !important;
}
@media screen and (min-width: 769px) {
	.modaal-close{
		position: fixed !important;
		left: 50px !important;
		top: 150px !important;
		z-index: 10000;
		display: none;
		&:before,&:after{
			content: none;
		}
	}
}
@media screen and (max-width: 768px) {
	.modaal-close.typeSP{
		position: fixed !important;
		left: 20px !important;
		top: 130px !important;
		z-index: 1007;
		display: none;
		&:before,&:after{
			content: none;
		}
	}
	.modalBox{
		.modaal-close{
			display: none;
		}
	}
}
.modaal-close:focus, .modaal-close:hover{
	background: none;
}
.modaal-overlay{
	z-index: 1000;
	background: #FFF !important;
	opacity: 1 !important;
}

.kankyoBox_01{
	.topImg{
		min-height: 920px;
		position: relative;
		.imgBox_01{
			width: 100%;
			height: 920px;
			position: absolute;
			z-index: 2;
			top: 0;
			left: 50%;
			-webkit-transform: translate(-50%, 0);
			transform: translate(-50%, 0);
			background: url("../img/img_modal_kankyo_top.png") no-repeat center top 50px / 1600px;
		}
		.imgBox_02{
			width: 835px;
			position: absolute;
			top: 50%;
			left: 50%;
			-webkit-transform: translate(-95%, -55%);
			transform: translate(-95%, -55%);
			img{
				width: 835px;
			}
		}
		.txtBox{
			width: 410px;
			position: absolute;
			top: 200px;
			left: 50%;
			-webkit-transform: translate(20%, 0);
			transform: translate(20%, 0);
			z-index: 2;
			dl{
				width: 410px;
				padding: 40px;
				position: absolute;
				background: #ededed;
				border-radius: 15px;
				color: #4d4d4d;
				right: 0;
				top: 200px;
				dt{
					padding-bottom: 20px;
					margin-bottom: 20px;
					background: url("../img/dot_01.png") repeat-x left bottom / 6px;
					font-size: 20px;
					font-weight: bold;
					strong{
						font-size: 28px;
						color: #007dc0;
					}
				}
				dd{
					padding-bottom: 20px;
					font-size: 16px;
					line-height: 1.8;
					position: relative;
					.imgBox{
						position: absolute;
						&.type_01{
							right: -70px;
							bottom: -200px;
						}
						&.type_02{
							right: -50px;
							bottom: -120px;
						}
						&.type_03{
							right: -75px;
							bottom: -170px;
						}
						&.type_04{
							right: -90px;
							bottom: -190px;
						}
						&.type_05{
							right: -70px;
							bottom: -190px;
						}
					}
				}
			}
		}
	}
	.bgDots{
		background: url("../img/bg_dot_blue.png") repeat center / 17px;
		position: relative;
		&:before,
		&:after{
			width: 100%;
			height: 47px;
			content: "";
			position: absolute;
			display: block;
		}
		&:before{
			background: url("../img/bg_dot_top.png") no-repeat center top / 100% 47px;
			top: 0;
		}
		&:after{
			background: url("../img/bg_dot_bottom_01.png") no-repeat center bottom / 100% 47px;
			bottom: 0;
		}
		ul{
			width: 930px;
			padding: 150px 0 80px 0;
			margin: 0 auto;
			text-align: center;
			li{
				width: 460px;
				margin-bottom: 50px;
				display: inline-block;
				font-size: 0;
				vertical-align: top;
				dl{
					width: 400px;
					margin: 0 auto;
					color: #4d4d4d;
					dt{
						margin-bottom: 35px;
						padding: 20px 10px;
						font-size: 20px;
						font-weight: bold;
						background: #FFF;
						border-radius: 15px;
						text-align: center;
						position: relative;
						&:after{
							content: "";
							width: 20px;
							height: 20px;
							display: block;
							background: url("../img/sttl_arrow_white.png") no-repeat center / 20px;
							position: absolute;
							right: 49%;
							bottom: -20px;
						}
					}
					dd{
						padding: 0 15px;
						font-size: 16px;
						text-align: left;
					}
				}
			}
		}
	}
	.timelineBox{
		width: 930px;
		padding: 50px 0 100px 0;
		margin: 0 auto;
		h3{
			padding: 20px 0;
			margin-bottom: 30px;
			border-top: 3px solid #009b6f;
			font-size: 26px;
			font-weight: bold;
			color: #009b6f;
			background: url("../img/dot_02.png") repeat-x left bottom / 6px;
		}
		.sMargin{
			margin-bottom: 60px;
		}
		.imgBox{
			margin-bottom: 50px;
		}
	}
}

.interviewBox_01{
	background: url("../img/bg_dot_blue.png") repeat center top / 17px;
	.topImg{
		width: 930px;
		padding: 50px 0 80px 0;
		margin: 0 auto;
		position: relative;
		.imgBox_01{
			position: relative;
			z-index: 1;
			float: right;
		}
		.imgBox_02{
			position: absolute;
			top: 50%;
			left: 50%;
			-webkit-transform: translate(-100%, -32%);
			transform: translate(-100%, -32%);
			z-index: 2;
		}
	}
	.profileData{
		width: 860px;
		margin: 0 auto;
		h3{
			margin-bottom: 10px;
			font-size: 30px;
			font-weight: bold;
			color: #FFF;
		}
		dl{
			padding: 25px 40px;
			margin-bottom: 100px;
			background: #FFF;
			border-radius:  15px;
			color: #4d4d4d;
			dt{
				margin-bottom: 15px;
				font-size: 22px;
				font-weight: bold;
				span{
					padding: 3px 15px;
					margin-right: 20px;
					font-size: 14px;
					color: #FFF;
					display: inline-block;
					&.green{
						background: #009b6f;
					}
					&.orange{
						background: #f7a901;
					}
					&.blue{
						background: #007dc0;
					}
				}
			}
		}
	}
	.interviewData{
		padding-bottom: 50px;
		dl{
			width: 960px;
			margin: 0 auto 50px auto;
			dt{
				width: 600px;
				padding: 25px 0 25px 15px;
				margin-bottom: 35px;
				font-size: 26px;
				font-weight: bold;
				letter-spacing: 0.1em;
				color: #009b6f;
				position: relative;
				&:before,
				&:after{
					content: "";
					width: 100%;
					height: 3px;
					display: block;
					background: url("../img/dot_02.png") repeat-x left top / 6px;
					position: absolute;
					left: 0;
				}
				&:before{
					top: 0;
				}
				&:after{
					bottom: 0;
				}
			}
			dd{
				p{
					margin-bottom: 1em;
					color: #4d4d4d;
					line-height: 1.8;
				}
				.imgBox{
					padding-top: 40px;
				}
			}
		}
	}
}

@media screen and (max-width: 768px) {
	.modalBox{
		.modaal-close{
			position: fixed !important;
			left: 20px !important;
			top: 120px !important;
		}
	}
	.kankyoBox_01{
		.topImg{
			min-height: inherit;
			position: inherit;
			padding: 0;
			.imgBox_01{
				width: 85px;
				height: 85px;
				position: relative;
				z-index: 2;
				top: inherit;
				bottom: 0;
				left: 50%;
				-webkit-transform: translate(-160%, -40%);
				transform: translate(-160%, -40%);
				background: url("../img/img_modal_kankyo_top_sp.png") no-repeat center top / cover;
			}
			.imgBox_02{
				width: 100%;
				padding: 70px 5% 0 5%;
				margin-bottom: -20px;
				position: relative;
				top: inherit;
				left: inherit;
				-webkit-transform: inherit;
				transform: inherit;
				img{
					width: 100%;
				}
			}
			.txtBox{
				width: 100%;
				position: inherit;
				top: inherit;
				left: inherit;
				-webkit-transform:inherit;
				transform: inherit;
				z-index: 2;
				margin-bottom: 50px;
				dl{
					width: 90%;
					padding: 40px 5%;
					margin: 0 auto;
					position: inherit;
					background: #ededed;
					border-radius: 15px;
					color: #4d4d4d;
					right: inherit;
					top: inherit;
					dt{
						padding-bottom: 20px;
						margin-bottom: 20px;
						background: url("../img/dot_01.png") repeat-x left bottom / 6px;
						font-size: 16px;
						font-weight: bold;
						strong{
							font-size: 22px;
							color: #007dc0;
						}
					}
					dd{
						padding-bottom: 20px;
						font-size: 14px;
						line-height: 1.8;
						position: relative;
					}
				}
				.imgBox{
					padding: 0 5% 0 50%;
					position: relative;
					&.type_01{
						right: 0;
						top: -60px;
						margin-bottom: -80px;
					}
					&.type_02{
						right: 0;
						top: -90px;
						margin-bottom: -110px;
					}
					&.type_03{
						right: 0;
						top: -60px;
						margin-bottom: -80px;
					}
					&.type_04{
						right: 0;
						top: -60px;
						margin-bottom: -80px;
					}
					&.type_05{
						right: 0;
						top: -60px;
						margin-bottom: -80px;
					}
				}
			}
		}
		.bgDots{
			background: url("../img/bg_dot_blue.png") repeat center / 17px;
			position: relative;
			&:before,
			&:after{
				width: 100%;
				height: 47px;
				content: "";
				position: absolute;
				display: block;
			}
			&:before,
			&:after{
				height: 15px;
			}
			&:before{
				background: url("../img/bg_dot_top.png") no-repeat center top / 100% 15px;
			}
			&:after{
				background: url("../img/bg_dot_bottom_01.png") no-repeat center bottom / 100% 15px;
			}
			ul{
				width: 90%;
				padding: 100px 0 60px 0;
				margin: 0 auto;
				text-align: center;
				li{
					width: 100%;
					margin-bottom: 50px;
					display: inline-block;
					font-size: 0;
					dl{
						width: 100%;
						margin: 0 auto;
						color: #4d4d4d;
						dt{
							margin-bottom: 35px;
							padding: 20px 10px;
							font-size: 17px;
							font-weight: bold;
							background: #FFF;
							border-radius: 15px;
							text-align: center;
							position: relative;
							&:after{
								content: "";
								width: 20px;
								height: 20px;
								display: block;
								background: url("../img/sttl_arrow_white.png") no-repeat center / 20px;
								position: absolute;
								right: 49%;
								bottom: -20px;
							}
						}
						dd{
							padding: 0 15px;
							font-size: 14px;
							text-align: left;
							line-height: 1.8;
						}
					}
				}
			}
		}
		.timelineBox{
			width: 100%;
			padding: 50px 0 100px 0;
			margin: 0 auto;
			h3{
				margin: 0 5% 22px 5%;
				padding-left: 15px;
				font-size: 20px;
			}
			.sMargin{
				margin-bottom: 60px;
			}
			.imgBox{
				margin-bottom: 50px;
			}
		}
	}

	.interviewBox_01{
		background: url("../img/bg_dot_blue.png") repeat center top / 17px;
		.topImg{
			width: 100%;
			padding: 60px 5% 0 10%;
			margin: 0 auto;
			position: relative;
			.imgBox_01{
				position: relative;
				z-index: 1;
				float: right;
			}
			.imgBox_02{
				width: 95%;
				padding-left: 5%;
				position: relative;
				top: -40px;
				left: -40px;
				-webkit-transform: inherit;
				transform: inherit;
				z-index: 2;
			}
		}
		.profileData{
			width: 90%;
			margin: 0 auto;
			h3{
				margin-bottom: 10px;
				font-size: 22px;
				font-weight: bold;
				color: #FFF;
			}
			dl{
				padding: 25px 30px;
				margin-bottom: 50px;
				background: #FFF;
				border-radius:  15px;
				color: #4d4d4d;
				dt{
					margin-bottom: 15px;
					font-size: 22px;
					font-weight: bold;
					span{
						padding: 3px 15px;
						margin-right: 20px;
						font-size: 14px;
						color: #FFF;
						display: inline-block;
						&.green{
							background: #009b6f;
						}
						&.orange{
							background: #f7a901;
						}
						&.blue{
							background: #007dc0;
						}
					}
				}
				dd{
					font-size: 14px;
				}
			}
		}
		.interviewData{
			padding-bottom: 50px;
			dl{
				width: 90%;
				margin: 0 auto 50px auto;
				dt{
					width: 100%;
					padding: 25px 0 25px 15px;
					margin-bottom: 35px;
					font-size: 20px;
					font-weight: bold;
					letter-spacing: 0.1em;
					color: #009b6f;
					position: relative;
					&:before,
					&:after{
						content: "";
						width: 100%;
						height: 3px;
						display: block;
						background: url("../img/dot_02.png") repeat-x left top / 6px;
						position: absolute;
						left: 0;
					}
					&:before{
						top: 0;
					}
					&:after{
						bottom: 0;
					}
				}
				dd{
					p{
						margin-bottom: 1em;
						color: #4d4d4d;
						line-height: 1.8;
						font-size: 14px;
					}
					.imgBox{
						padding-top: 40px;
					}
				}
			}
		}
	}
}