@charset "utf-8";
/* CSS Document */

@import url("../../css/style.css");

.fair {
	display: inline-block;
	text-align:center;
	width: 100%;
	height: 300px;
	line-height: 300px;
	background-size: cover;
	background-repeat: no-repat;
	background-position: center center;
	position: relative;
	z-index: 0;
	overflow: hidden;
}
.fair a {
	width: 100%;
	height: 100%;
}
/*:beforeにぼかし効果を設定する*/
.fair:before{
  content: '';
  background: inherit;/*.bgImageで設定した背景画像を継承する*/
  -webkit-filter: blur(4px);
  -moz-filter: blur(4px);
  -o-filter: blur(4px);
  -ms-filter: blur(4px);
  filter: blur(4px);
  position: absolute;
  /*ブラー効果で画像の端がボヤけた分だけ位置を調整*/
  top: -4px;
  left: -4px;
  right: -4px;
  bottom: -4px;
  z-index: -1;/*重なり順序を一番下にしておく*/
  transition: all 0.5s ease-out;
  transform: matrix3d(
        1, 0, 0, 0,
        0, 1, 0, 0,
        0, 0, 1, 0,
        0, 0, 0, 1
    );
    will-change: transform;
}
.fair:hover:before{
  -webkit-filter: blur(0px);
  -moz-filter: blur(0px);
  -o-filter: blur(0px);
  -ms-filter: blur(0px);
  filter: blur(0px);
  transform: matrix3d(
        1, 0, 0, 0,
        0, 1, 0, 0,
        0, 0, 1, 0,
        0, 0, 0, 0.95
    );
}
.bg_black {
	width: 100%;
	height: 100%;
	background-color: #000;
	-webkit-transition: 0.6s ;
	transition: 0.6s ;
	filter: alpha(opacity=60);
	-moz-opacity:0.4;
	opacity:0.4;
}
.bg_black:hover {
	filter: alpha(opacity=30);
	-moz-opacity:0.3;
	opacity:0.3;
}
.bg_black h1 {
	font-size: 1.5em;
	font-weight: bold;
}