.body{
	margin: 5;
	background-color: #BBBBBB;
	
}


.sticky {
  position: -webkit-sticky;
  position: sticky;
  top: 0px;
}


.center{
	position:relative;
	
}

.main-text{
	color:#000000;
	font-family: Helvetica, Verdana, Geneva, "sans-serif";
	letter-spacing: 2px
}

.sub-text{
	color:#000000;
	font-family: Helvetica, Verdana, Geneva, "sans-serif";
	letter-spacing: 1px;
	line-height: 50%;
}

.info-box{
	position: relative;
	bottom: 20px;
}

.bottom-text {
	
    bottom: 20px;
      }



.Pics {
    float: left;
	position: relative;
		
    width: 50%;
    height: auto;  /* ←縦横比を維持する高さを自動計算 */
	margin: 0px;
	overflow: hidden;
	
	line-height: 0;
	
}

.Pics img:hover{
	opacity: 0.6;
	transition:all 0.3s ease;
}

.Pics:hover .PicsTx{
	opacity: 1;
	transition:all 1s ease;
}

/*-------黒文字用----*/

.PicsBLK {
	float: left;
	position: relative;
		
    width: 50%;
    height: auto;  /* ←縦横比を維持する高さを自動計算 */
	margin: 0px;
	overflow: hidden;
	
	line-height: 0;	
}

.PicsBLK img:hover{
	opacity: 0.6;
	transition:all 0.3s ease;
}

.PicsBLK:hover .PicsTxBLK{
	opacity: 0.6;
	transition:all 1s ease;
}



.PicsTx{
	position: absolute;
    bottom: 10px;
    left: 10px;
    color: whitesmoke;
	font-family: Helvetica, Verdana, Geneva, "sans-serif";
	letter-spacing: 1px;

    font-size: 12px;
    line-height: 130%;
	opacity: 0;
}

.PicsTxBLK{
	position: absolute;
    bottom: 10px;
    left: 10px;
    color: black;
	font-family: Helvetica, Verdana, Geneva, "sans-serif";
	letter-spacing: 1px;

    font-size: 12px;
    line-height: 130%;
	opacity: 0;
}


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

.content-top{margin: 50px 30px;}
.content1{margin: 0px 50px 20px;
          font-size: small;
	      color: #888888;
}
.content2{margin: 0px 50px 10px;
	      font-size: x-small;
	      color: #888888;
}

.content3{margin: 0px 50px 0px;
          font-size: x-small;
	      color: #888888;
}
	

.titles{letter-spacing: 0px;
	font-family: Helvetica, Verdana, Geneva, "sans-serif";
}

.img_a img {
    width: 60%;
    height: auto;  /* ←縦横比を維持する高さを自動計算 */
}


.img_b img {
    width: 50%;
    height: auto;  /* ←縦横比を維持する高さを自動計算 */
}

.img_c img {

	float: left;
	display: block;
	
	flex-direction: row;
	justify-content: flex-start;
	align-items: flex-start;
	align-content: flex-start;
	
    width: 50%;
    height: auto;  /* ←縦横比を維持する高さを自動計算 */
	margin: 0px;
}


/*マウスオーバーで拡大する*/
.imgWrap{
	overflow: hidden;
	/*width: 100%;
    height: auto; 	   */ 
}

	
.imgWrap img {

	display: block;
	transition-duration: 0.3s;	/*変化に掛かる時間*/
}
.imgWrap img:hover {

	/*transform: scale(1.02);	/*画像の拡大率*/
	/*transition-duration: 0.5s;	/*変化に掛かる時間*/
	opacity: 0.7;
}



.layout{
	float: left;
	display: block;
	
	flex-direction: row;
	justify-content: flex-start;
	align-items: flex-start;
	align-content: flex-start;
}