@charset "UTF-8";
/*
 * top_layout.css
 *
 */

/* !mainvisual
---------------------------------------------------------- */
.topMainWrap {
	width:auto;
	margin:0 50px 90px 50px;
}
.topMainWrap img.hapLogo {
	display:block;
	width:230px;
	margin:0 auto;
}
.topMain {
	width:auto;
	max-width:1200px;
	height:600px;
	margin:0 auto;
	background-repeat:no-repeat;
	background-position:50% 50%;
	background-size: cover;
	position: relative;
	overflow: hidden;
	top:10px;
}
	.topMain:before {
		background: #FFF;
		content: '';
		display: inline-block;
		width:100%;
		height:100%;
		position: absolute;
		transform: translateX(0%);
		transition:all 1.4s .5s ease; 
		width: 100%;
		z-index: 3;
}
	.topMain h2 {
		font-family: 游明朝,"Yu Mincho",YuMincho,"Hiragino Mincho ProN","Hiragino Mincho Pro",HGS明朝E, "游ゴシック", YuGothic,メイリオ,Meiryo,serif;
		font-weight:bold;
		font-size:40px;
		color:#FFF;
		line-height:1.5;
		text-align:center;
		letter-spacing:0.06em;
		text-shadow: rgba(0,0,0,0.5) 2px 2px 2px;
		padding-top:220px;
		margin-bottom:30px;
		-webkit-animation: copy1 3.5s 1 ease;
		-moz-animation: copy1 3.5s 1 ease;
		animation: copy1 3.5s 1 ease ;
	}
	.topMain p {
		width:490px;
		height:40px;
		background-color:rgba(66,158,59,1);
		font-family: 游明朝,"Yu Mincho",YuMincho,"Hiragino Mincho ProN","Hiragino Mincho Pro",HGS明朝E, "游ゴシック", YuGothic,メイリオ,Meiryo,serif;
		font-weight:bold;
		font-size:20px;
		color:#FFF;
		line-height:40px;
		text-align:center;
		letter-spacing:0.04em;
		border-radius:20px;
		margin:0 auto;
		-webkit-animation: copy2 3.8s 1 ease;
		-moz-animation: copy2 3.8s 1 ease;
		animation: copy2 3.8s 1 ease ;
	}
	.topMain img.kadomaru1{
		position:absolute;
		display:block;
		width:50px;
		height:50px;
		top:0;
		left:0;
	}
	.topMain img.kadomaru2{
		position:absolute;
		display:block;
		width:50px;
		height:50px;
		bottom:0;
		right:0;
	}
	.topMain img.hapLogo {
		position:absolute;
		display:block;
		width:140px;
		top:20px;
		right:20px;
	}
		
/*アニメーションするプロパティを設定*/
.topMain.active{
	opacity: 1;
}
.topMain.active:before{
    transform: translateX(100%);
}

@-webkit-keyframes copy1 {
    0% {
        opacity: 0;
		transform: translateY(50px);
    }
	50% {
        opacity: 0;
        transform: translateY(50px);
    }
	100% {
        opacity: 1;
        transform: translateX(0);
    }
}
@-moz-keyframes copy1 {
    0% {
        opacity: 0;
		transform: translateY(50px);
    }
	50% {
        opacity: 0;
        transform: translateY(50px);
    }
	100% {
        opacity: 1;
        transform: translateX(0);
    }
}
@keyframes copy1 {
    0% {
        opacity: 0;
		transform: translateY(50px);
    }
	50% {
        opacity: 0;
        transform: translateY(50px);
    }
	100% {
        opacity: 1;
        transform: translateX(0);
    }
}

@-webkit-keyframes copy2 {
    0% {
        opacity: 0;
		transform: translateY(50px);
    }
	60% {
        opacity: 0;
        transform: translateY(50px);
    }
	100% {
        opacity: 1;
        transform: translateX(0);
    }
}
@-moz-keyframes copy2 {
    0% {
        opacity: 0;
		transform: translateY(50px);
    }
	60% {
        opacity: 0;
        transform: translateY(50px);
    }
	100% {
        opacity: 1;
        transform: translateX(0);
    }
}
@keyframes copy2 {
    0% {
        opacity: 0;
		transform: translateY(50px);
    }
	60% {
        opacity: 0;
        transform: translateY(50px);
    }
	100% {
        opacity: 1;
        transform: translateX(0);
    }
}

@media screen and (max-width:1039px){
.topMainWrap {
	width:auto;
	margin:0 30px 70px 30px;
}
.topMain {
	height:500px;
	top:10px;
}
	.topMain h2 {
		font-size:34px;
		padding-top:180px;
		margin-bottom:25px;
	}
	.topMain p {
		width:450px;
		font-size:18px;
	}
	.topMain img.kadomaru1{
		width:42px;
		height:42px;
	}
	.topMain img.kadomaru2{
		width:42px;
		height:42px;
	}
}

@media screen and (max-width:899px){
.topMainWrap {
	width:auto;
	margin:0 30px 70px 30px;
}
.topMain {
	height:420px;
}
	.topMain h2 {
		font-size:34px;
		padding-top:150px;
		margin-bottom:25px;
	}
	.topMain p {
		width:450px;
		font-size:18px;
	}
	.topMain img.kadomaru1{
		width:42px;
		height:42px;
	}
	.topMain img.kadomaru2{
		width:42px;
		height:42px;
	}
}

@media screen and (max-width:767px){
.topMainWrap {
	width:auto;
	margin:0 20px 70px 20px;
}
.topMainWrap img.hapLogo {
	width:200px;
}
.topMain {
	height:300px;
	top:10px;
}
	.topMain h2 {
		font-size:18px;
		padding-top:105px;
		margin-bottom:15px;
	}
	.topMain p {
		width:240px;
		height:24px;
		font-size:10px;
		line-height:24px;
		margin:0 auto;
	}
	.topMain img.kadomaru1{
		width:26px;
		height:26px;
	}
	.topMain img.kadomaru2{
		width:26px;
		height:26px;
	}
	.topMain img.hapLogo {
		display:none;
	}
}

@media screen and (max-width:567px){
.topMainWrap {
	width:auto;
	margin:0 20px 70px 20px;
}
.topMain {
	height:200px;
	top:10px;
}
	.topMain h2 {
		font-size:18px;
		padding-top:45px;
		margin-bottom:10px;
	}
	.topMain p {
		width:240px;
		height:24px;
		font-size:10px;
		line-height:24px;
		margin:0 auto;
	}
	.topMain img.kadomaru1{
		width:26px;
		height:26px;
	}
	.topMain img.kadomaru2{
		width:26px;
		height:26px;
	}
}

@media screen and (max-width:360px){
	.topMain h2 {
		font-size:16px;
		padding-top:45px;
	}
}

/* !contents
---------------------------------------------------------- */
#contents {
	width:100%;
}

/* !ご案内
---------------------------------------------------------- */
.topMenu {
	width:auto;
	margin:0 50px 50px 50px;
}
	.topMenu ul.menuList {
		width:auto;
		max-width:1200px;
		position:relative;
		margin:0 auto;
	}
		.topMenu ul.menuList li {
			width:31%;
			float:left;
			margin-right:3.5%;
		}
		.topMenu ul.menuList li:last-child {
			margin-right:0;
		}
			.topMenu ul.menuList li img.photo {
				display:block;
				width:100%;
				border-radius:14px;
			}
			.topMenu ul.menuList li div.box {
				width:85%;
				margin:0 auto;
				background:#FFF;
				border:1px solid #EFEFEF;
				border-radius:12px;
				padding:35px 30px 30px 30px;
				position:relative;
				top:-40px;
			}
				.topMenu ul.menuList li div.box h2 {
					font-family: 游明朝,"Yu Mincho",YuMincho,"Hiragino Mincho ProN","Hiragino Mincho Pro",HGS明朝E, "游ゴシック", YuGothic,メイリオ,Meiryo,serif;
					font-size:18px;
					font-weight:bold;
					text-align:center;
					margin-bottom:15px;
				}
				.topMenu ul.menuList li div.box img.icon {
					display:block;
					width:54px;
					margin:0 auto 15px auto;
				}
				.topMenu ul.menuList li div.box ul.linkList {
					margin-bottom:25px;
				}
					.topMenu ul.menuList li div.box ul.linkList li {
						width:100%;
						float:none;
						margin-right:0;
						margin-bottom:5px;
					}
						.topMenu ul.menuList li div.box ul.linkList li a {
							font-size:16px;
							color:#333;
							transition: all 0.6s ease;
							position:relative;
							padding-left:17px;
						}
							.topMenu ul.menuList li div.box ul.linkList li a:before {
								position:absolute;
								display:inline-block;
								content:"";
								width:7px;
								height:12px;
								background:url(../img/arrow01.png) 0 0 no-repeat;
								background-size:7px;
								height:12px;
								transition: all 0.16s ease;
								top:5px;
								left:0;
							}
							.topMenu ul.menuList li div.box ul.linkList li a:hover {
								color:#0073C4;
							}
								.topMenu ul.menuList li div.box ul.linkList li a:hover:before {
									left:4px;
								}
				.topMenu ul.menuList li div.box a.btn {
					display:block;
					width:100%;
					height:40px;
					font-size:16px;
					color:#FFF;
					font-weight:bold;
					text-align:center;
					line-height:40px;
					background:#429E3B;
					border:1px solid #429E3B;
					border-radius:20px;
					transition: all 0.6s ease;
					margin:0 auto;
				}
					.topMenu ul.menuList li div.box a:hover.btn {
						color:#429E3B;
						background:#FFF;
					}

@media screen and (max-width:1109px){
			.topMenu ul.menuList li div.box {
				padding:35px 25px 30px 25px;
			}
				.topMenu ul.menuList li div.box h2 {
					font-size:17px;
				}
						.topMenu ul.menuList li div.box ul.linkList li a {
							font-size:15px;
						}
							.topMenu ul.menuList li div.box ul.linkList li a:before {
								top:4px;
							}
}

@media screen and (max-width:1039px){
.topMenu {
	margin:0 30px 40px 30px;
}
		.topMenu ul.menuList li {
			width:47%;
			margin-right:6%;
		}
		.topMenu ul.menuList li:nth-child(even) {
			margin-right:0;
		}
		.topMenu ul.menuList li:last-child {
			margin-right:0;
		}
			.topMenu ul.menuList li div.box {
				padding:40px 30px 30px 30px;
			}
							.topMenu ul.menuList li div.box ul.linkList li a:hover {
								color:#333;
							}
								.topMenu ul.menuList li div.box ul.linkList li a:hover:before {
									left:0;
								}
					.topMenu ul.menuList li div.box a:hover.btn {
						color:#FFF;
						background:#429E3B;
					}
}

@media screen and (max-width:767px){
.topMenu {
	margin:0 20px 40px 20px;
}
	.topMenu ul.menuList {
		max-width:320px;
		margin:0 auto;
	}
		.topMenu ul.menuList li {
			width:100%;
			float:none;
			margin-right:0;
		}
			.topMenu ul.menuList li img.photo {
				border-radius:12px;
			}
			.topMenu ul.menuList li div.box {
				padding:30px 25px 25px 25px;
			}
				.topMenu ul.menuList li div.box h2 {
					font-size:16px;
				}
				.topMenu ul.menuList li div.box img.icon {
					width:50px;
				}
				.topMenu ul.menuList li div.box ul.linkList {
					margin-bottom:25px;
				}
						.topMenu ul.menuList li div.box ul.linkList li a {
							font-size:14px;
							padding-left:15px;
						}
							.topMenu ul.menuList li div.box ul.linkList li a:hover {
								color:#333;
							}
								.topMenu ul.menuList li div.box ul.linkList li a:hover:before {
									left:0;
								}
				.topMenu ul.menuList li div.box a.btn {
					font-size:14px;
				}
}

/* !topService
---------------------------------------------------------- */
.topInfo {
	width:auto;
	padding:0px 50px 0 50px;
	margin-bottom:100px;
}
	.topInfo div.inner {
		width:auto;
		max-width:1000px;
		margin:0 auto;
		background:#EAF1F4;
		padding:60px 60px 60px 0;
		border-radius:18px;
	}
		.topInfo div.inner div.left {
			width:35%;
			float:left;
		}
			.topInfo div.inner div.left h2 {
				font-family: 游明朝,"Yu Mincho",YuMincho,"Hiragino Mincho ProN","Hiragino Mincho Pro",HGS明朝E, "游ゴシック", YuGothic,メイリオ,Meiryo,serif;
				font-size:24px;
				font-weight:bold;
				text-align:center;
				line-height:1.6;
				color:#0072C4;
				letter-spacing:0.08em;
				margin-bottom:30px;
			}
				.topInfo div.inner div.left h2 span {
					display:block;
					font-size:14px;
					letter-spacing:0.08em;
				}
			.topInfo div.inner div.left a.btn {
				display:block;
				width:100px;
				height:100px;
				font-size:14px;
				text-align:center;
				color:#0072C4;
				line-height:100px;
				background:#FFF;
				border:1px dashed #0072C4;
				border-radius:50%;
				margin:0 auto;
				position:relative;
				transition: all 0.4s ease;
			}
				.topInfo div.inner div.left a:hover.btn {
					border:1px dashed #FFF;
				}
				.topInfo div.inner div.left a.btn:after {
					position:absolute;
					content:"";
					display:inline-block;
					width:20px;
					height:4px;
					border-bottom: 1px solid #0072C4;
					border-right: 1px solid #0072C4;
					transform: skew(45deg);
					top:72px;
					left:50%;
					margin-left:-10px;
					transition: all 0.3s ease;
				}
					.topInfo div.inner div.left a:hover.btn:after {
						width:30px;
						
						margin-left:-10px;
					}
		.topInfo div.inner div.right {
			width:65%;
			float:right;
			border-top:1px solid #CFDFE7;
		}
			.topInfo div.inner div.right dl {
				width:100%;
				padding:1em 1em;
				line-height:1.8;
			}
				.topInfo div.inner div.right dl dt {
					width:25%;
					float:left;
				}
				.topInfo div.inner div.right dl dd {
					width:75%;
					float:left;
				}
				.topInfo div.inner div.right a dl {
					transition: all 0.5s ease;
					border-bottom:1px solid #CFDFE7;
				}
					.topInfo div.inner div.right a dl dt {
						color:#333;
					}
					.topInfo div.inner div.right a dl dd {
						color:#333;
					}
					.topInfo div.inner div.right a:hover dl {
						background:#DBE7EC;
					}
			

@media screen and (max-width:1039px){
.topInfo {
	padding:0px 30px 0 30px;
	margin-bottom:80px;
}
	.topInfo div.inner {
		padding:40px 40px 40px 0;
		border-radius:16px;
	}
		.topInfo div.inner div.left {
			width:32%;
		}
			.topInfo div.inner div.left h2 {
				font-size:22px;
				margin-bottom:20px;
			}
				.topInfo div.inner div.left h2 span {
					font-size:12px;
				}
				.topInfo div.inner div.left a:hover.btn {
					border:1px dashed #0072C4;
				}
					.topInfo div.inner div.left a:hover.btn:after {
						width:20px;
					}
		.topInfo div.inner div.right {
			width:68%;
			float:right;
			border-top:1px solid #CFDFE7;
		}
			.topInfo div.inner div.right dl {
				padding:1em 0;
			}
					.topInfo div.inner div.right a:hover dl {
						background:none;
					}
}
	
@media screen and (max-width:767px){
.topInfo {
	padding:0px 20px 0 20px;
	margin-bottom:70px;
}
	.topInfo div.inner {
		padding:35px 20px 30px 20px;
		border-radius:14px;
	}
		.topInfo div.inner div.left {
			width:100%;
			float:none;
			margin-bottom:30px;
		}
			.topInfo div.inner div.left h2 {
				font-size:20px;
			}
		.topInfo div.inner div.right {
			width:100%;
			float:none;
			border-top:1px solid #CFDFE7;
		}
				.topInfo div.inner div.right dl dt {
					width:100%;
					float:none;
					margin-bottom:5px;
				}
				.topInfo div.inner div.right dl dd {
					width:100%;
					float:none;
				}
}

/* !topAceess
---------------------------------------------------------- */
.topAccess {
	width:auto;
	padding:80px 50px 120px 50px;
	background:url(../../img/access_bg.jpg) 50% 50% no-repeat;
	background-size:cover;
}
	.topAccess div.inner {
		width:auto;
		max-width:1200px;
		margin:0 auto;
		background:#FFF;
		padding:50px;
		border-radius:18px;
	}
		.topAccess div.inner div.left {
			width:57%;
			float:left;
		}
			.topAccess div.inner div.left h2 {
				font-family: 游明朝,"Yu Mincho",YuMincho,"Hiragino Mincho ProN","Hiragino Mincho Pro",HGS明朝E, "游ゴシック", YuGothic,メイリオ,Meiryo,serif;
				font-size:20px;
				font-weight:bold;
				text-align:center;
				line-height:1.6;
				color:#0072C4;
				letter-spacing:0.08em;
				margin-bottom:30px;
			}
				.topAccess div.inner div.left h2 span {
					display:inline-block;
					position:relative;
					padding:0 20px;
				}
					.topAccess div.inner div.left h2 span:before {
						position:absolute;
						display:inline-block;
						content:"";
						width:6px;
						height:6px;
						background:#0072C4;
						border-radius:50%;
						top:12px;
						left:0;
					}
					.topAccess div.inner div.left h2 span:after {
						position:absolute;
						display:inline-block;
						content:"";
						width:6px;
						height:6px;
						background:#0072C4;
						border-radius:50%;
						top:12px;
						right:0;
					}
		.topAccess div.inner div.left iframe {
			margin-bottom:20px;
		}
		.topAccess div.inner div.left dl {
			width:100%;
		}
			.topAccess div.inner div.left dl dt {
				width:27%;
				float:left;
			}
				.topAccess div.inner div.left dl dt span {
					display:inline-block;
					color:#419E3A;
					line-height:1;
					padding:0.4em 0.6em;
					border:1px solid #419E3A;
					border-radius:6px;
				}
			.topAccess div.inner div.left dl dd {
				margin-left:27%;
				margin-bottom:15px;
			}
		.topAccess div.inner div.right {
			width:38%;
			margin-left:62%;
		}
			.topAccess div.inner div.right h2 {
				font-family: 游明朝,"Yu Mincho",YuMincho,"Hiragino Mincho ProN","Hiragino Mincho Pro",HGS明朝E, "游ゴシック", YuGothic,メイリオ,Meiryo,serif;
				font-size:20px;
				font-weight:bold;
				text-align:center;
				line-height:1.6;
				color:#0072C4;
				letter-spacing:0.08em;
				margin-bottom:30px;
			}
				.topAccess div.inner div.right h2 span {
					display:inline-block;
					position:relative;
					padding:0 20px;
				}
					.topAccess div.inner div.right h2 span:before {
						position:absolute;
						display:inline-block;
						content:"";
						width:6px;
						height:6px;
						background:#0072C4;
						border-radius:50%;
						top:12px;
						left:0;
					}
					.topAccess div.inner div.right h2 span:after {
						position:absolute;
						display:inline-block;
						content:"";
						width:6px;
						height:6px;
						background:#0072C4;
						border-radius:50%;
						top:12px;
						right:0;
					}
		.topAccess div.inner div.right dl {
			display:inline-block;
			width:100%;
			border-bottom:1px solid #CFDFE7;
		}
			.topAccess div.inner div.right dl dt {
				width:40%;
				float:left;
			}
				.topAccess div.inner div.right dl dt span {
					display:inline-block;
					color:#419E3A;
					line-height:1;
					padding:0.4em 0.6em;
					border:1px solid #419E3A;
					border-radius:6px;
				}
			.topAccess div.inner div.right dl dd {
				margin-left:40%;
				margin-bottom:15px;
			}
		.topAccess div.inner div.right a.btn {
			display:block;
			width:220px;
			height:40px;
			color:#FFF;
			text-align:center;
			font-weight:bold;
			line-height:40px;
			background:#429E3B;
			border:1px solid #429E3B;
			border-radius:20px;
			margin:0 auto;
			transition: all 0.6s ease;
		}
			.topAccess div.inner div.right a:hover.btn {
				color:#429E3B;
				background:#FFF;
			}
			
@media screen and (max-width:1039px){
.topAccess {
	padding:70px 30px 100px 30px;
}
	.topAccess div.inner {
		max-width:800px;
		padding:40px;
	}
		.topAccess div.inner div.left {
			width:100%;
			float:none;
			margin-bottom:40px;
		}
		.topAccess div.inner div.left dl {
			border-bottom:1px solid #CFDFE7;
		}
			.topAccess div.inner div.left dl dt {
				width:24%;
			}
			.topAccess div.inner div.left dl dd {
				margin-left:24%;
			}
		.topAccess div.inner div.right {
			width:100%;
			margin-left:0;
		}
			.topAccess div.inner div.right dl dt {
				width:24%;
			}
			.topAccess div.inner div.right dl dd {
				margin-left:24%;
			}
			.topAccess div.inner div.right a:hover.btn {
				color:#FFF;
				background:#429E3B;
			}
}
	
@media screen and (max-width:767px){
.topAccess {
	padding:60px 20px 70px 20px;
}
	.topAccess div.inner {
		padding:30px 20px;
		border-radius:18px;
	}
		.topAccess div.inner div.left {
			width:100%;
			float:none;
			margin-bottom:40px;
		}
			.topAccess div.inner div.left h2 {
				font-size:18px;
				margin-bottom:25px;
			}
					.topAccess div.inner div.left h2 span:before {
						top:10px;
					}
					.topAccess div.inner div.left h2 span:after {
						top:10px;
					}
			.topAccess div.inner div.left dl dt {
				width:100%;
				float:none;
				margin-bottom:5px;
			}
			.topAccess div.inner div.left dl dd {
				margin-left:0;
			}
		.topAccess div.inner div.right {
			width:100%;
			margin-left:0;
		}
			.topAccess div.inner div.right h2 {
				font-size:18px;
				margin-bottom:25px;
			}
					.topAccess div.inner div.right h2 span:before {
						top:10px;
					}
					.topAccess div.inner div.right h2 span:after {
						top:10px;
					}
			.topAccess div.inner div.right dl dt {
				width:100%;
				float:none;
				margin-bottom:5px;
			}
			.topAccess div.inner div.right dl dd {
				margin-left:0;
			}
		.topAccess div.inner div.right a {
			width:200px;
		}
}

/* !topRecruit
---------------------------------------------------------- */
.topRecruit {
	width:auto;
	padding:100px 50px 100px 50px;
	background:#EAF1F4;
}
	.topRecruit a div.inner {
		display:block;
		width:auto;
		max-width:1200px;
		margin:0 auto;
		background:#FFF;
		border-radius:18px;
		transition: all 0.6s ease;
	}
		.topRecruit a:hover div.inner {
			background:#BBD8EA;
		}
		.topRecruit a div.inner div.left {
			display:block;
			width:50%;
			height:300px;
			float:left;
			background:url(../../img/recruit_img.jpg) 50% 50% no-repeat;
			background-size:cover;
			border-radius:18px 0 0 18px;
			transition: all 0.6s ease;
		}
			.topRecruit a:hover div.inner div.left {
				opacity:.7;
			}
		.topRecruit a div.inner div.right {
			width:50%;
			float:left;
			padding:50px;
			position:relative;
			transition: all 0.6s ease;
			position:relative;
		}
			.topRecruit a div.inner div.right:after {
				position:absolute;
				content:"";
				display:inline-block;
				width:40px;
				height:10px;
				border-bottom: 1px solid #0072C4;
				border-right: 1px solid #0072C4;
				transform: skew(45deg);
				bottom:10px;
				right:50px;
				transition: all 0.3s ease;
			}
				.topRecruit a:hover div.inner div.right:after {
					width:55px;
					margin-right:-15px;
				}
			.topRecruit a div.inner div.right h2 {
				font-family: 游明朝,"Yu Mincho",YuMincho,"Hiragino Mincho ProN","Hiragino Mincho Pro",HGS明朝E, "游ゴシック", YuGothic,メイリオ,Meiryo,serif;
				font-size:28px;
				font-weight:bold;
				line-height:1.6;
				color:#0072C4;
				letter-spacing:0.08em;
				margin-bottom:35px;
			}
				.topRecruit a div.inner div.right h2 span {
					display:block;
					font-size:14px;
					letter-spacing:0.08em;
				}
				
@media screen and (max-width:1039px){
.topRecruit {
	padding:80px 30px 80px 30px;
}
		.topRecruit a:hover div.inner {
			background:#FFF;
		}
			.topRecruit a:hover div.inner div.left {
				opacity:1;
			}
		.topRecruit a div.inner div.right {
			padding:40px;
		}
			.topRecruit a div.inner div.right:after {
				bottom:0;
				right:40px;
			}
				.topRecruit a:hover div.inner div.right:after {
					width:40px;
					margin-right:0;
				}
			.topRecruit a div.inner div.right h2 {
				font-size:24px;
			}
}

@media screen and (max-width:767px){
.topRecruit {
	padding:60px 20px 60px 20px;
	background:#EAF1F4;
}
	.topRecruit a {
		display:block;
		max-width:320px;
		margin:0 auto;
	}
	.topRecruit a div.inner {
		display:block;
		max-width:320px;
		margin:0 auto;
	}
		.topRecruit a div.inner div.left {
			width:100%;
			height:160px;
			float:none;
			border-radius:16px 16px 0 0;
		}
		.topRecruit a div.inner div.right {
			width:100%;
			float:none;
			padding:30px 25px;
		}
			.topRecruit a div.inner div.right:after {
				width:40px;
				height:10px;
				bottom:30px;
				right:30px;
			}
				.topRecruit a:hover div.inner div.right:after {
					width:40px;
					margin-right:0;
				}
			.topRecruit a div.inner div.right h2 {
				font-size:20px;
				text-align:center;
				margin-bottom:30px;
			}
				.topRecruit a div.inner div.right h2 span {
					font-size:12px;
				}
			.topRecruit a div.inner div.right p.read {
				margin-bottom:20px;
			}
}