@charset "utf-8";


/* ==================================================================== */
/* エリアトップバナー
/* ==================================================================== */
#area_top_banner{
	margin-top: -9px;
	margin-bottom:30px;
	padding-top: 30px;
	padding-bottom: 30px;
	position: relative;
}
#area_top_banners:not(.slick-initialized){
	position: relative;
}
#area_top_banners.slick-slider{
}
#area_top_banners:not(.slick-initialized):before{
	content: "";
	display: block;
	padding-top: 40%;
}
#area_top_banners:not(.slick-initialized) > *{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
}
#area_top_banners:not(.slick-initialized) > *:not(img){
	display: block;
}
#area_top_banners:not(.slick-initialized) > *:first-child{
	z-index: 2;
}
#area_top_banners.slick-slider > a,
#area_top_banners.slick-slider a.slick-slide{
	background-color: #FFFFFF;
	color: #000000;
	display: inline-block;
	vertical-align: top;
}
#area_top_banners.slick-slider a.slick-slide{
}
#area_top_banners img{
	width: 100%;
}
#area_top_banner .slick-dots{
	line-height: 1;
	margin-top: 5px;
	position: static;
}
#area_top_banner .slick-prev:before{
	content: "\F050";
	font-family:"Material Design Icons";
}
#area_top_banner .slick-next:before{
	content: "\F057";
	font-family:"Material Design Icons";
}
#area_top_banner .slick-dots li button:before{
	background-color: #E1E1E1;
	opacity: 1;
}
#area_top_banner .slick-dots li.slick-active button:before{
	background-color: #ECCE2E;
	opacity: 1;
}
@media screen and (max-width:767px){
	#area_top_banner{
		padding-left: 10px;
		padding-right: 10px;
	}
	#area_top_banner .slick-prev{
		left: 3%;
		bottom: -10px;
		top: unset;
	}
	#area_top_banner .slick-next{
		right: 3%;
		bottom: -10px;
		top: unset;
	}
}
@media screen and (min-width:768px){
	#area_top_banner{
		margin-top: -1.125em;
	}
	#area_top_banner h2{
		font-size: 175%;
		margin-bottom: 20px;
	}
	#area_top_banners.slick-slider > a{
		margin-top: 20px;
		width: 217px;
	}
	#area_top_banners.slick-slider > a:not(:nth-child(4n+1)){
		margin-left: 4px;
	}
	#area_top_banner .slick-prev{
		left: -3%;
	}
	#area_top_banner .slick-next{
		right: -3%;
	}
}
@media screen and (min-width:1024px){
	#area_top_banners:not(.slick-initialized){
		margin: 0 auto;
		width: 50%;
	}
}