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


/* COMMON --------------------*/
html,
body{
  width: 100%;
  height: 100%;
	margin:0;
	padding:0;
}

.effect-fade {
opacity : 0;
transform : translate(0, 45px);
transition : all 1200ms;
}

.effect-fade.effect-scroll {
opacity : 1;
transform : translate(0, 0);
}	
		
a{
	display: block;
	width: 100%;
	height: 100%;
	text-indent: -9999px;
}

/* LOGO --------------------*/

.logo_l{
	width: auto;
	height: 60px;
	display: block;
	background: #fff;
	margin:auto;
}	
	
@media (min-width: 768px) {	
	.logo_l{
		width: 300px;
		height: auto;
		position: absolute;
		top:0;
		left:50%;
		margin-left: -150px;
		z-index: 9999;
	}	
}

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

.item {
	height: 47vh;
	width: 100%;
	opacity: 1;
}			
.item-1 { 
	background: url(../imgs/catch01.png) no-repeat center , url(../imgs/01.jpg) no-repeat left center;
}
.item-2 { 
	background: url(../imgs/catch02.png) no-repeat center , url(../imgs/02.jpg) no-repeat left center;
	box-shadow:-5px 0px 35px 0px rgba(0,0,0,0.3);
}
.item-1:hover{
	background: url(../imgs/catch01_over.png) no-repeat center , url(../imgs/01_over.jpg) no-repeat left center;
}	
.item-2:hover{ 
	background: url(../imgs/catch02_over.png) no-repeat center , url(../imgs/02_over.jpg) no-repeat left center;
}	
.item-1,
.item-2,
.item-1:hover,
.item-2:hover{
	background-size: 200px , cover;
}		


@media (min-width: 480px) {	
	.item {
		height: 500px;
	}	
	.item-1,
	.item-2,
	.item-1:hover,
	.item-2:hover{
		background-size: 320px , cover;
	}
}	

	
@media (min-width: 768px) {
	body{
		overflow-y:hidden;
	}	
	.gallery-wrap {
		display: flex;
		flex-direction: row;
		width: 100%;
		height: 100vh;
		background: #fff;
	}
	.item {
		flex: 1;
		height: 100vh;
		width: 50%;
		background-position: center;
		background-size: cover;
		background-repeat: none;
		transition: flex 1s cubic-bezier(0.645, 0.045, 0.355, 1);
		opacity: 1;
	}
	.item:hover{
		flex: 4;
		opacity: 1;
	}
	.item-1,
	.item-2,
	.item-1:hover,
	.item-2:hover{
		background-size: 350px , auto;
	}
}


@media (min-width: 1024px) {
	.item-1,
	.item-2,
	.item-1:hover,
	.item-2:hover{
		background-size: 400px , auto;
	}	
}
	
/* .item.item-1:hover{
   border: 5px solid #0D46A6;
	 box-sizing: border-box;
  }	
 .item.item-2:hover{
   border: 5px solid #FE7929;
	 box-sizing: border-box;
  }	*/