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

#container {
    	width: 1020px;
		margin:auto;
    }

 .item {
	  width: auto;
	  height: auto;
	  margin: 1px 4px 1px 0px;
	  float: left;
    }

.switch {
    visibility: hidden;
}

#container2 {
    	width: 1020px;
		margin: auto;
		padding-top: 20px;
		padding-bottom: 20px;
    }
#container2 p {
		padding: 10px;
		color: red;
		background-color: #FFED91;
    	text-align: center;
    }
@media only screen and (max-width: 768px) {
	#container,
	#container2{
		width: 100%;
	}
	
	.item{
		width: 100%;
		height: 100%;
		margin: 1px 4px 1px 0px;
		float: none;
	}
}


/*---------------------------------------------------------
  フルードイメージ記述(可変による画像の拡大縮小)
---------------------------------------------------------*/

img{
	max-width : 100%;
	}
	
/*---------------------------------------------------------
  #container内の画像移動モーション設定
---------------------------------------------------------*/

#container,
    .item {
        -webkit-transition-duration: 0.7s;
        -moz-transition-duration: 0.7s;
        -ms-transition-duration: 0.7s;
        -o-transition-duration: 0.7s;
        transition-duration: 0.7s;
    }
    #container {
        -webkit-transition-property: height, width;
        -moz-transition-property: height, width;
        -ms-transition-property: height, width;
        -o-transition-property: height, width;
        transition-property: height, width;
    }
    .item {
        -webkit-transition-property: left, right, top;
        -moz-transition-property: left, right, top;
        -ms-transition-property: left, right, top;
        -o-transition-property: left, right, top;
        transition-property: left, right, top;
    }


/*---------------------------------------------------------
  リンク画像　オンマウスでキャプション表示
---------------------------------------------------------*/
figure {
	position: relative;
	overflow: hidden;
	margin: 0px;
}
figcaption {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,.6);
	-webkit-transition: .3s;
	transition: .3s;
	opacity: 0;
}
figcaption h3{
	position: absolute;
	left: -100%;
	width: 260px;
	-webkit-transition: .3s;
	transition: .3s;
	color: #FFFFFF;	
}
figcaption h3 {
	top: 20%;
}

figure:hover figcaption {
	opacity: 1;
}
figure:hover figcaption h3{
	left: 20px;
}
figure:hover figcaption h3 {
	-webkit-transition-delay: .2s;
	transition-delay: .2s;
}
/* end */