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

 
/* !mainvisual
---------------------------------------------------------- */
.main {
	width: 100%;
	height:750px;
	margin-top:70px;
	position:relative;
}
	.main div.intro {
		width: 100%;
		height:750px;
		background:#FFF;
		position:absolute;
		z-index:2;
		top:0;
		left:0;
	}
		.main div.intro div.inner {
			position:absolute;
			display:block;
			width:394px;
			height:500px;
			top:50%;
			left:50%;
			margin-top:-250px;
			margin-left:-197px;
			animation: logo 2.0s 1 ease ;
		}
			main div.intro div.inner img {
				width:100%;
			}

	.main ul {
		width: 100%;
		height:750px;
		position:absolute;
		z-index:1;
		top:0;
		left:0;
	}
		.main ul li {
			width:33.33%;
			float:left;
		}
			.main ul li a {
				position:relative;
				overflow: hidden;
				display:block;
				width:100%;
				height:750px;
			}
				.main ul li a div.bg {
					position:absolute;
					width:100%;
					height:100%;
					background-position:50% 50%;
					background-repeat:no-repeat;
					background-size:cover;
					top:0;
					left:0;
					z-index:50;
					transition: all 1.6s ease-out;
				}
				.main ul li a div.welfare {
					background-image:url(../../img/welfare_img.jpg);
				}
				.main ul li a div.pharmacy {
					background-image:url(../../img/pharmacy_img.jpg);
				}
				.main ul li a div.recruit {
					background-image:url(../../img/recruit_img.jpg);
				}
					.main ul li a:hover div.bg {
						-moz-transform: scale(1.08);
						-webkit-transform: scale(1.08);
						-ms-transform: scale(1.08);
						transform: scale(1.08);
					}
				.main ul li a div.mask {
					position:absolute;
					width:100%;
					height:100%;
					background:rgba(0, 0, 0, .0);
					top:0;
					left:0;
					z-index:51;
					transition: all 1s ease;
				}
					.main ul li a:hover div.mask {
						background:rgba(0, 0, 0, .6);
					}
					.main ul li a div.mask p {
						font-family: 'Arima Madurai', cursive;
						font-size:18px;
						font-weight:700;
						color:#FEC625;
						letter-spacing:0.14em;
						text-align:center;
						margin-top:530px;
						margin-bottom:25px;
						transition: all 1s ease;
						opacity:0;
					}
						.main ul li a:hover div.mask p {
							opacity:1;
							margin-top:480px;
						}
					.main ul li a div.mask h2 {
						width:250px;
						height:46px;
						font-size:20px;
						font-weight:bold;
						color:#FFF;
						line-height:46px;
						letter-spacing:0.14em;
						text-align:center;
						/*border:1px solid #FFF;
						border-radius:25px;*/
						margin:0 auto 0 auto;
						transition: all 1s ease;
						opacity:0;
					}
						.main ul li a:hover div.mask h2 {
							opacity:1;
						}

@keyframes logo {
    0% {
        opacity: 0;
		transform: scale(0.6);
		transform: rotateY(180deg) scale(0.5);
    }
	20% {
        opacity: 0;
		transform: scale(0.6);
		transform: rotateY(180deg) scale(0.5);
    }
	100% {
        opacity: 1;
		transform: scale(1);
		transform: rotateY(0deg) scale(1);
    }
}

@media screen and (max-width:1039px){
.main {
	height:600px;
	margin-top:60px;
}
	.main div.intro {
		width: 100%;
		height:600px;
		background:#FFF;
		position:absolute;
		z-index:2;
		top:0;
		left:0;
	}
		.main div.intro div.inner {
			position:absolute;
			display:block;
			width:354px;
			height:450px;
			top:50%;
			left:50%;
			margin-top:-225px;
			margin-left:-177px;
			animation: logo 2.0s 1 ease ;
		}
			main div.intro div.inner img {
				width:100%;
			}
	.main ul {
		height:600px;
	}
			.main ul li a {
				height:600px;
			}
					.main ul li a:hover div.bg {
						-moz-transform: none;
						-webkit-transform: none;
						-ms-transform: none;
						transform: none;
					}
					.main ul li a div.mask {
						background:rgba(0, 0, 0, .5);
					}
					.main ul li a:hover div.mask {
						background:rgba(0, 0, 0, .5);
					}
					.main ul li a div.mask p {
						font-size:16px;
						margin-top:400px;
						opacity:1;
					}
						.main ul li a:hover div.mask p {
							opacity:1;
							margin-top:400px;
						}
					.main ul li a div.mask h2 {
						width:150px;
						height:44px;
						font-size:18px;
						line-height:44px;
						opacity:1;
					}
						.main ul li a:hover div.mask h2 {
							background:none;
							/*border:1px solid #FFF;*/
						}
	
}

@media screen and (max-width:767px){
.main {
	height:900px;
	margin-top:60px;
}
	.main div.intro {
		display:none;
	}
	.main ul {
		height:900px;
	}
		.main ul li {
			width:100%;
			float:none;
			border-right:0;
		}
		.main ul li:last-child {
			border-right:0;
		}
			.main ul li a {
				height:300px;
			}
				.main ul li a div.bg {
					position:absolute;
					width:100%;
					height:100%;
					background-position:50% 50%;
					background-repeat:no-repeat;
					background-size:cover;
					top:0;
					left:0;
					z-index:50;
					transition: all 1s ease-out;
				}
				.main ul li a div.welfare {
					background-image:url(../../img/welfare_sp_img.jpg);
				}
				.main ul li a div.pharmacy {
					background-image:url(../../img/pharmacy_sp_img.jpg);
				}
				.main ul li a div.recruit {
					background-image:url(../../img/recruit_sp_img.jpg);
				}
					.main ul li a div.mask p {
						font-size:16px;
						margin-top:160px;
						margin-bottom:20px;
					}
						.main ul li a:hover div.mask p {
							margin-top:160px;
						}
					.main ul li a div.mask h2 {
						width:140px;
						height:40px;
						font-size:16px;
						line-height:40px;
					}
}

@media screen and (max-width:480px){
.main {
	height:750px;
}
	.main ul {
		height:750px;
	}
			.main ul li a {
				height:250px;
			}
					.main ul li a div.mask p {
						margin-top:120px;
					}
						.main ul li a:hover div.mask p {
							margin-top:120px;
						}
}

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

.blogList {
	width:auto;
	margin:0 50px;
	padding:60px 0;
}
	.blogList div.blogListInner {
		width:auto;
		max-width:1000px;
		margin-left:auto;
		margin-right:auto;
	}
		.blogList div.blogListInner h2 {
			font-size:18px;
			font-weight:bold;
			color:#EE7700;
			margin-bottom:15px;
			padding-left:1.3em;
			position:relative;
		}
			.blogList div.blogListInner h2:before {
				position:absolute;
				content:"";
				width:7px;
				height:7px;
				border:3px solid #EF7563;
				border-radius:50%;
				top:12px;
				left:0;
			}
		.blogList div.blogListInner ul li {
			color:#555;
		}
			.blogList div.blogListInner ul li a {
				display:inline-block;
				width:auto;
				color:#555;
				padding:.4em .8em;
				transition:.6s;
			}
				.blogList div.blogListInner ul li a:hover {
					color:#EE7700;
				}

@media screen and (max-width:1039px){
.blogList {
	margin:0 30px;
	padding:50px 0;
}
			.blogList div.blogListInner ul li a {
				padding:.4em .8em;
				color:#EE7700;
			}
}

@media screen and (max-width:767px){
.blogList {
	margin:0 20px;
	padding:40px 0;
}
		.blogList div.blogListInner ul li {
			margin-bottom:10px;
		}
		.blogList div.blogListInner ul li:last-child {
			margin-bottom:0;
		}
			.blogList div.blogListInner ul li a {
				display:block;
				padding:0 0 .4em 0;
			}
}