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

/* ************************************************ 
 *	
 *	transition
 *	
 * ************************************************ */

@media ( min-width : 896px ) {
	.page_contents a img,
	#post_css a img,
	.fade{
		-webkit-transition: all 0.5s;
		-moz-transition: all 0.5s;
		-ms-transition: all 0.5s;
		-o-transition: all 0.5s;
		transition: all 0.5s;
		opacity: 1;
	}
	.page_contents a img:hover,
	#post_css a img:hover,
	.fade:hover{
		opacity: 0.6;
	}
/* ------------------------------------------------------------------- */
	.fadeup{
	    -webkit-transition: 0.3s ease-in-out;  
	       -moz-transition: 0.3s ease-in-out;  
	         -o-transition: 0.3s ease-in-out;  
	            transition: 0.3s ease-in-out;  

		position:relative;
		opacity: 1;
	}
	.fadeup:hover{
		position:relative;
		top:-1em;
		opacity: 1;
	}


/* ------------------------------------------------------------------- */
	.mouseover_image01 {
		width:			100%;
		height:			100%;
		overflow:		hidden;
		position:		relative;
	}
	.mouseover_image01 .caption {
		font-size:		130%;
		color:			#fff;
		padding-top:		50%;
		margin-top:-2em;
		padding-left:		-5%;
		width:80%;
		line-height:200%;
		text-align:center;
	}
	.mouseover_image01 .mask {
		width:			100%;
		height:			100%;
		position:		absolute;
		top:			0;
		left:			0;
		opacity:		0;	/* マスクを表示しない */
		background-color:	rgba(0,0,0,0.4);
		-webkit-transition:	all 0.5s ease;
		transition:		all 0.5s ease;
	}
	.mouseover_image01:hover .mask {
		opacity:		1;	/* マスクを表示する */
		padding-left:		10%;	/* 右にずらす */
	}



.animation01,
.animation02{visibility:hidden;}
	.fadeInDown {
		-webkit-animation-fill-mode:both;
		-ms-animation-fill-mode:both;
		animation-fill-mode:both;
		-webkit-animation-duration:1s;
		-ms-animation-duration:1s;
		animation-duration:1s;
		-webkit-animation-name: fadeInDown;
		animation-name: fadeInDown;
		visibility: visible !important;
	}
	@-webkit-keyframes fadeInDown {
	 0% { opacity: 0; -webkit-transform: translateY(-20px); }
	 100% { opacity: 1; -webkit-transform: translateY(0); }
	}
	@keyframes fadeInDown {
	 0% { opacity: 0; -webkit-transform: translateY(-20px); -ms-transform: translateY(-20px); transform: translateY(-20px); }
	 100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); }
	}


	.fadeInright {
		-webkit-animation-fill-mode:both;
		-ms-animation-fill-mode:both;
		animation-fill-mode:both;
		-webkit-animation-duration:1s;
		-ms-animation-duration:1s;
		animation-duration:1s;
		-webkit-animation-name: fadeInright;
		animation-name: fadeInright;
		visibility: visible !important;
	}
	@-webkit-keyframes fadeInright {
	 0% { opacity: 0; -webkit-transform: translateX(-20px); }
	 100% { opacity: 1; -webkit-transform: translateX(0); }
	}
	@keyframes fadeInright {
	 0% { opacity: 0; -webkit-transform: translateX(-20px); -ms-transform: translateX(-20px); transform: translateX(-20px); }
	 100% { opacity: 1; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); }
	}





}

/* ------------------------------------------------------------------- */
@media ( max-width : 896px ) {
	.mouseover_image01 .caption {
		display:none;
	}
	.mouseover_image01 .mask {
		display:none;
	}

}