.grid {



	position: relative;



	list-style: none; overflow:hidden; 



	text-align: center;



}







/* Common style */



.grid figure {



	position: relative;margin-bottom:31px;



	overflow: hidden;



	min-width: 100%;



	max-width: 100%;



	width:100%;



	height: 100%; min-height:100%;



	background: #3085a3;



	text-align: center;



	cursor: pointer;



}







.grid figure img {



	position: relative;



	display: block;



	min-height: 100%;



	max-width: 100%;



	opacity: 0.8;



}







.grid figure figcaption {



	padding:0;



	color: #fff;



	text-transform: uppercase;



	font-size: 1.25em;



	-webkit-backface-visibility: hidden;



	backface-visibility: hidden;



	line-height:100%;



}



.grid figure figcaption header a{}



.grid figure figcaption::before,



.grid figure figcaption::after {



	pointer-events: none;



}







.grid figure figcaption,



.grid figure figcaption > a {



	position: absolute;



	top: 0;



	left: 0;



	width: 100%;



	height: 100%;



}







/* Anchor will cover the whole item by default */



/* For some effects it will show as a button */



.grid figure figcaption > a {



	z-index: 1000;



	text-indent: 200%;



	white-space: nowrap;



	font-size: 0;



	opacity: 0;



}







.grid figure h2 {



	word-spacing: -0.15em;



	font-weight:400; color:#FFF;



}







.grid figure h2 span {



	font-weight: 800;



}







.grid figure h2,



.grid figure p {



	margin: 0;



}







.grid figure p {



	letter-spacing: 1px;



	font-size:16px; line-height:22px;



}











/* Individual effects */









/*---------------*/



/***** Oscar *****/



/*---------------*/







figure.effect-oscar {



	/*background: -webkit-linear-gradient(45deg, #22682a 0%, #9b4a1b 40%, #3a342a 100%);



	background: linear-gradient(45deg, #22682a 0%,#9b4a1b 40%,#3a342a 100%);*/



	background-color:#000;

/*ホバーエフェクトの色*/

}







figure.effect-oscar img {



	opacity: 1;



	-webkit-transition: opacity 0.35s;



	transition: opacity 0.35s;



}







figure.effect-oscar figcaption {



	padding: 4em;



	background-color: rgba(58,52,42,0);



	-webkit-transition: background-color 0.35s;



	transition: background-color 0.35s;



}







figure.effect-oscar figcaption::before {



	position: absolute;



	top: 30px;



	right: 30px;



	bottom: 30px;



	left: 30px;



	border: 1px solid #fff;



	content: '';



}







figure.effect-oscar h2 {



 font-size:18px ; font-family: ro-san-std, sans-serif;

font-weight: 400;

font-style: normal;	margin: 20% 0 10px 0;



	-webkit-transition: -webkit-transform 0.35s;



	transition: transform 0.35s;



	-webkit-transform: translate3d(0,100%,0);



	transform: translate3d(0,100%,0);



}



figure.effect-oscar h2 span{



	font-size:32px ;font-family: fot-tsukubrdgothic-std, sans-serif;

font-weight: 700;

font-style: normal;



}



figure.effect-oscar figcaption::before,



figure.effect-oscar p {



	font-family: fot-tsukubrdgothic-std, sans-serif;

font-weight: 400;

font-style: normal;

	font-size:16px ;



	opacity: 0;



	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;



	transition: opacity 0.35s, transform 0.35s;



	-webkit-transform: scale(0);



	transform: scale(0);



}







figure.effect-oscar:hover h2 {



	-webkit-transform: translate3d(0,0,0);



	transform: translate3d(0,0,0);



}







figure.effect-oscar:hover figcaption::before,



figure.effect-oscar:hover p {



	opacity: 1;



	-webkit-transform: scale(1);



	transform: scale(1);



}







figure.effect-oscar:hover figcaption {



	background-color: rgba(58,52,42,0);



}







figure.effect-oscar:hover img {



	opacity: 0.4;



}







@media screen and (max-width: 50em) {



	.content {



		padding: 0 10px;



		text-align: center;



	}



	.grid figure {



		display: inline-block;



		float: none;



		margin: 10px auto;



		width: 100%;



	}



}



@media (min-width: 768px) and (max-width: 991px) {



	figure.effect-oscar figcaption::before{ left:10px; right:10px; top:10px; bottom:10px;}



	figure.effect-oscar figcaption{ padding:0em}



	figure.effect-oscar h2{ font-size:20px;}



	figure.effect-oscar p{ font-size:13px;  padding:2%; display:block; width:90%; margin:0 auto;}



}







@media (max-width: 767px) {



	figure.effect-oscar figcaption::before{ left:10px; right:10px; top:10px; bottom:10px;}



	figure.effect-oscar figcaption{ padding:0em}



	figure.effect-oscar h2{ font-size:15px;}



	figure.effect-oscar p{ font-size:13px;  padding:2%; display:block; width:90%; margin:0 auto;}



}