@charset "UTF-8";
/* CSS Document */
.main{
}

#news{
 padding: 60px 100px; 
 background: #FFF;
}

#news h3{
 text-align: center;
 margin-bottom: 15px;
}

#news ul{
 overflow: hidden;
}


#news li{
 display: inline-block;
 margin-right: 30px;
 position: relative;
 vertical-align: top;
}

#news li .photo{
 width: 200px;
 height: 200px;
 background-size: cover;
 background-position: center center;
 background-repeat: no-repeat;
 position: relative;
}

#news li .photo:before{
content: '';
background:rgba(255,255,255,1.00);
display: block;
position: absolute;
top:0;
bottom: 0;
left: 0;
right: 0;
opacity: 0;
 transition: .3s;
}

#news li .photo:hover:before{
opacity: .3;
}


#news li .title{
 min-height: 3.5em;
 position: absolute;
 left: 0;
 right: 0;
 bottom: 0;
 background:rgba(255,255,255,.7);
 line-height: 1.2;
 padding: 5px 10px;
 color: #000;
 font-size: 11px;
}

#news li .icon{
 position: absolute;
 display: inline-block;
 background: #000;
 /*border-radius: 3px;*/
 font-size: 10px;
 /*padding: 0;*/
 color: #FFF;
 line-height: 1;
 padding: 5px;
 margin: 0 5px 0 0;
 z-index: 10;
}

#r-logo-top{
position: absolute;
right: 15px;
bottom: 80px;
z-index: 1000;
}

#r-logo-top a{
 transition: .3s;
}

#r-logo-top a:hover{
	opacity: .7;
	color: #000;
}

.logo-area{
	width: 180px;
	position: absolute;
	right: 15px;
	bottom: 80px;
	z-index: 1000;
	line-height: 1;
}

.logo-area a{
	display: block;
	transition: .3s;
}

.logo-area a:hover{
	opacity: .7;
}


.logo-area img{
	width: 100%;
	vertical-align: bottom;
}

.logo-area .anshin{
	background: #fff;
	padding: 5px;
	border-radius: 6px;
	opacity: .8;
	margin-bottom: 10px;
}

.logo-area .renovationoftheyear{
	background:rgba(255,255,255,.8);
	padding: 10px;
	margin-bottom: 10px;
	border-radius: 6px;
	text-align: center;
}
.logo-area .renovationoftheyear .caption{
	color:#333333;
	line-height: 1.2;
	font-size: 10px;
	font-weight: bold;
}


.logo-area .renovationoftheyear img{
	width: 70px;
	margin-bottom: 10px;
}


.bx-wrapper .bx-controls-direction a {
 top: 40%;
 width:25px;
 height:25px;
}

.bx-wrapper .bx-prev {
	left: -35px;
}

.bx-wrapper .bx-next {
	right: -35px;
}

.more .a2{
 margin: 0 auto;
}

@media (max-width: 800px) {
	 #news{
	 padding: 60px 40px; 
	 }

	 #news li .photo{
	 width: 150px;
	 height: 150px;
	 }
	.bx-wrapper .bx-prev {
		left: -30px;
	}

	.bx-wrapper .bx-next {
		right: -30px;
	}

	 #news li .title{
	 padding: 5px;
	 font-size: 10px;
	}
	#r-logo-top{
	bottom: 15px;
	}

.logo-area{
	width: 140px;
	right: 15px;
	bottom: 20px;
}

.logo-area .renovationoftheyear .caption{
	font-size: 9px;
}

.logo-area .renovationoftheyear img{
	width: 50px;
	margin-bottom: 10px;
	}
 
} /*@media (max-width: 800px)*/

@media (max-width: 500px) {
	#news{
	 padding: 80px 30px; 
	 }
	#r-logo-top{
	position: absolute;
	bottom: 30px;
	width: 100px;
	}
	#r-logo-top img{
	width: 100%;
	}
	.logo-area{
		width: 90px;
		right: 8px;
	}

	.logo-area .anshin{
		padding: 5px;
		margin-bottom: 5px;
	}

	.logo-area .renovationoftheyear{
		margin-bottom: 5px;
	}
	.logo-area .renovationoftheyear .caption{
		font-size: 8px;
	}
	.logo-area .renovationoftheyear img{
		width: 40px;
		margin-bottom: 5px;
	}


} /*@media (max-width: 500px)*/


#insta{
	position: relative;
	text-align: center;
}

#insta .swiper-pagination{
	bottom: -5px;
  left: 0;
  width: 100%;
}

#insta .swiper-pagination .swiper-pagination-bullet{
	margin: 5px;
}