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

.pict-txt-box {
	width:25vw;
	height:auto;
	
	position:absolute;
	overflow-wrap:break-word;
	text-align:left;
	padding:0px;
	margin:0px;
	margin-top:-80px;
	color:#FFF;
	letter-spacing:2px;
	/*
	font-weight:bold;
	*/
	text-shadow: 0 2px 2px #000;
}
.pictBox{
	width:25vw;
	height:auto;
	float:left;
	margin:3vw;
}

.pictBox .pictView{
	width:25vw;
	height:auto;
	overflow: hidden;
	position: relative;
}

.pictBox .pictMask {
/*ロールオーバー時のマスクのアニメーションの設定*/
	width:25vw;
	height:19vw;
	margin:0px;
	padding:0px;
	
	-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
	filter: alpha(opacity=0);
	opacity: 0;
	background-color: rgba(37,71,115, 0.8);
	-webkit-transition: all 0.4s ease-in-out;
	-moz-transition: all 0.4s ease-in-out;
	-o-transition: all 0.4s ease-in-out;
	-ms-transition: all 0.4s ease-in-out;
	transition: all 0.4s ease-in-out;
	behavior: url(PIE.htc);
}

.pictBox img{
/*写真のアニメーションの設定*/
	border:0;
	vertical-align: top;
	display: block;
	position:absolute;
	-webkit-transition: all 0.2s linear;
	-moz-transition: all 0.2s linear;
	-o-transition: all 0.2s linear;
	
}

.pictBox a {
	border:0px;
	outline: none;
	text-decoration:none;
	padding:0px;
	margin:0px;
}

.pictBox a:link,
.pictBox a:visited,
.pictBox a:active{
	color:#7b7b7b;
	text-decoration:none;
}

.pictBox a:hover{
	color:#7b7b7b;
}

.pictBox .pictComment{
	height:auto;
	text-align:left;
}

.pictBox .pictMask img{
/*IE7・8用の写真のアニメーションの設定*/
	display: block;
	position:absolute;
	-ms-transition: all 0.2s linear;
	transition: all 0.2s linear;
	behavior: url(PIE.htc);
}


.pictBox .pictMask p.pictTitle {
	color: #fff;
	text-align: center;
	position: relative;
	padding: 7px;
	top:20px;
	background: #333;
	/*ロールオーバー前のマスク内のタイトルの設定*/
	-webkit-transform: translateY(-100px);
	-moz-transform: translateY(-100px);
	-o-transform: translateY(-100px);
	-ms-transform: translateY(-100px);
	transform: translateY(-100px);
	-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
	filter: alpha(opacity=0);
	opacity: 0;
	-webkit-transition: all 0.2s ease-in-out;
	-moz-transition: all 0.2s ease-in-out;
	-o-transition: all 0.2s ease-in-out;
	-ms-transition: all 0.2s ease-in-out;
	transition: all 0.2s ease-in-out;
	behavior: url(PIE.htc);
}

.pictBox .pictMask p {
/*ロールオーバー前のマスク内のテキストの設定*/

	-webkit-transform: translateY(100px);
	-moz-transform: translateY(100px);
	-o-transform: translateY(100px);
	-ms-transform: translateY(100px);
	transform: translateY(100px);
	-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
	filter: alpha(opacity=0);
	opacity: 0;
	color:#fff;
	*color:#4a4a4a; /*IE7*/
	color:#4a4a4a\9; /*IE8*/
	-webkit-transition: all 0.2s linear;
	-moz-transition: all 0.2s linear;
	-o-transition: all 0.2s linear;
	-ms-transition: all 0.2s linear;
	transition: all 0.2s linear;
	behavior: url(PIE.htc);
	
	font-family:'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'ＭＳ Ｐゴシック',sans-serif;
	line-height:1.6;
	font-size:12px;
	margin:0px;
	padding:0px;
	
	padding-top:30px;
}

:root .pictBox .pictMask p {
/*IE9用のロールオーバー前のマスク内のテキストの設定*/
	color:#fff \0/; /* IE9 */
}

.pictBox:hover img {
/*ロールオーバー時の写真のアニメーションの設定*/
	-webkit-transform: scale(1.1,1.1);
	-moz-transform: scale(1.1,1.1);
	-o-transform: scale(1.1,1.1);
	-ms-transform: scale(1.1,1.1);
	transform: scale(1.1,1.1);
	-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=20)";
	filter: alpha(opacity=30);
	opacity: 0.3;
	behavior: url(PIE.htc);

}

.pictBox:hover .pictMask {
/*ロールオーバー時のマスクのアニメーションの設定*/
	-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
	filter: alpha(opacity=100);
	opacity: 1;
	behavior: url(PIE.htc);
}


/*ロールオーバー時のタイトルとテキストのアニメーションの設定*/
.pictBox:hover .pictMask p.pictTitle,
.pictBox:hover .pictMask p {
	-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
	filter: alpha(opacity=100);
	opacity: 1;
	-webkit-transform: translateY(0px);
	-moz-transform: translateY(0px);
	-o-transform: translateY(0px);
	-ms-transform: translateY(0px);
	transform: translateY(0px);
	-webkit-transition-delay: 0.1s;
	-moz-transition-delay: 0.1s;
	-o-transition-delay: 0.1s;
	-ms-transition-delay: 0.1s;
	transition-delay: 0.1s;
	behavior: url(PIE.htc);
}

.pictMask p.pictTitle {
	font-size:24px;
}
.pictMask p.pictComment {
	font-size:1.2em;
	line-height:1.6em;
	padding-left:10px;
	padding-right:10px;
}
.pict-comment {
	font-size:1.2em;
	line-height:1.6em;
	padding-left:10px;
	padding-right:10px;
	
}