@charset "utf-8";


/*	top
------------------------------------------*/

#top{
	position:relative;
	width:100%;
	margin:0 auto 100px;
}


#main_img{
	position:relative;
	width:100%;
	text-align:center;
}
#main_img_logo{
	position:absolute;
	display:block;
	left:0;
	top:0;
	right:0;
	bottom:0;
	margin:auto;
}
#main_img_container{
	display:block;
	width:100%;
	height:calc(100vw * .56);
	font-size:0;
	line-height:0;
	background:rgba(23,99,132,.1);
}
#main_img_container:after{
	position:absolute;
	display:block;
	content:'';
	left:0;
	top:0;
	width:100%;
	height:100%;
	opacity:.7;
	z-index:1;
	background-image:url(/top/ptn_dot.png);
	background-repeat:repeat;
	background-size:64px 64px;
	background-position:left top;
}


#top_menu{
	position:relative;
	display:flex;
	flex-wrap:wrap;
	justify-content:space-between;
	width:96%;
	margin:-50px auto 0;
	z-index:2;
	transition: .3s;
}	
	#top_menu .unit{
		position:relative;
		width:20%;
		max-width:274px;
		padding:0 0 10px;
		background:rgba(255,255,255);
		border-radius:6px;
		overflow:hidden;
		margin:0 .7rem 2rem;
		box-sizing:border-box;
		transition: .3s;
	}
	#top_menu .unit:hover{
		-ms-transform:scale(.96,.96);
		-webkit-transform:scale(.96,.96);
		transform:scale(.96,.96);
	}
	#top_menu .unit a *{
		display:block;
		color:#000;
	}
	#top_menu .unit img{
		display:block;
		width:100%;
		height:auto;
		margin:0 0 20px;
	}
	#top_menu .unit p.ttl{
		position:absolute;
		left:.5rem;
		top:.5rem;
		width:2.2rem;
		text-align:center;
		color:#fff;
		font-size:2.2rem;
		font-weight:bold;
		line-height:1;
		text-shadow:0 0 7px rgb(30,75,158);
		z-index:1;
	}
	#top_menu .unit p.desc{
		width:100%;
		font-size:.928rem;
		font-weight:bold;
		-webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box;
		margin: auto;
	}
	#top_menu .unit.unit_blog p.ttl{
		position:relative;
		left:inherit;
		top:inherit;
		width:auto;
		text-align:left;
		color:#000;
		font-size:1.14rem;
		line-height:1.2;
		text-shadow:none;
		margin:0 0 5px;
	}
	#top_menu .unit.unit_blog .date{
		font-size:.85rem;
	}

@media screen and (max-width:1220px) {
	#top_menu .unit{
		width:25%;
	}
}
@media screen and (max-width:890px) {
	#top_menu .unit{
		width:30%;
	}
	#top_menu .unit p.ttl{
		width:2rem;
		font-size:2rem;
	}
}
@media screen and (max-width:740px) {
	#top_menu .unit{
		width:39%;
	}
}
@media screen and (max-width:576px) {
	#top_menu .unit p.ttl{
		width:1.8rem;
		font-size:1.4rem;
	}
}
@media screen and (max-width:413px) {
	#top_menu .unit p.ttl{
		width:1.4rem;
		font-size:1.4rem;
	}
}