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

.fufu_list{
    display: flex;
    flex-wrap: wrap;
}
.fufu_list li{
	width: 50%;
    height: 50vh;
	}	

.fufu_list span{
    position: absolute;
    width: 20vw;
    background-color: rgba(0,0,0,0.3);
    height: 50vh;
    font-size: 0.6rem;
    text-align: center;
    line-height: 2.5;
	display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    justify-content: center;
    -webkit-justify-content: center;	
    	}
		
.pc_back{
	 background-image:none;
	}

/*.fufu_list li:nth-child(n+16)  img{
	display:none;
	}	
.fufu_list li:nth-child(n+16)  span{
	width:50vw;
}
*/
@media screen and (min-width:640px) and (max-width:1024px) {
    /*　画面サイズが768pxから1024pxまではここを読み込む　*/
.fufu_list{
	    display: flex;
    flex-wrap: wrap;
    width: 80%;
    margin-left: 20%;
	}

.fufu_list li {
    width: 25%;
    height: 50vh;
}
.fufu_list li img{
	display:none;

}
.fufu_list span {
    -moz-transition-duration: 0.4s;
    -webkit-transition-duration: 0.4s;
    transition-duration: 0.4s;
	}
		
.move_b:hover{
    padding-right: 2%;
    -moz-transition-duration: 0.4s;
    -webkit-transition-duration: 0.4s;
    transition-duration: 0.4s;
    opacity: 0;
			}
.pc_back1{
	background-image: url(../img/list/top/list1.jpg) ;
	background-size: cover;
	}
.pc_back2{
	background-image: url(../img/list/top/list2.jpg) ;
	background-size: cover;
	}
.pc_back3{
	background-image: url(../img/list/top/list3.jpg) ;
	background-size: cover;
	}
.pc_back4{
	background-image: url(../img/list/top/list4.jpg) ;
	background-size: cover;
	}
.pc_back5{
	background-image: url(../img/list/top/list5.jpg) ;
	background-size: cover;
	}
.pc_back6{
	background-image: url(../img/list/top/list6.jpg) ;
	background-size: cover;
	}
.pc_back7{
	background-image: url(../img/list/top/list7.jpg) ;
	background-size: cover;
	}
.pc_back8{
	background-image: url(../img/list/top/list8.jpg) ;
	background-size: cover;
	}
.pc_back9{
	background-image: url(../img/list/top/list9.jpg) ;
	background-size: cover;
	}
.pc_back10{
	background-image: url(../img/list/top/list10.jpg) ;
	background-size: cover;
	}
.pc_back11{
	background-image: url(../img/list/top/list11.jpg) ;
	background-size: cover;
	}

.pc_back12{
	background-image: url(../img/list/top/list12.jpg) ;
	background-size: cover;
	}

.pc_back13{
	background-image: url(../img/list/top/list13.jpg) ;
	background-size: cover;
	}

.pc_back14{
	background-image: url(../img/list/top/list14.jpg) ;
	background-size: cover;
	}

.pc_back15{
	background-image: url(../img/list/top/list15.jpg) ;
	background-size: cover;
	}

.pc_back16{
	background-image: url(../img/list/top/list16.jpg) ;
	background-size: cover;
	}

/*.fufu_list li:nth-child(n+16)  span{
	width:20vw;
}
*/
}
@media screen and (min-width:1024px) {
    /*　画面サイズが1024pxからはここを読み込む　*/
.fufu_list{
	    display: flex;
    flex-wrap: wrap;
    width: 85%;
    margin-left: 15%;
	}

.fufu_list li {
    width: 25%;
    height: 50vh;
}
.fufu_list li img{
	display:none;

}
.fufu_list span {
    width: 21.3vw;	
    -moz-transition-duration: 0.4s;
    -webkit-transition-duration: 0.4s;
    transition-duration: 0.4s;
	}
		
.move_b:hover{
    padding-right: 2%;
    -moz-transition-duration: 0.4s;
    -webkit-transition-duration: 0.4s;
    transition-duration: 0.4s;
    opacity: 0;		}

.pc_back1{
	background-image: url(../img/list/top/list1.jpg) ;
	background-size: cover;
	}
.pc_back2{
	background-image: url(../img/list/top/list2.jpg) ;
	background-size: cover;
	}
.pc_back3{
	background-image: url(../img/list/top/list3.jpg) ;
	background-size: cover;
	}
.pc_back4{
	background-image: url(../img/list/top/list4.jpg) ;
	background-size: cover;
	}
.pc_back5{
	background-image: url(../img/list/top/list5.jpg) ;
	background-size: cover;
	}
.pc_back6{
	background-image: url(../img/list/top/list6.jpg) ;
	background-size: cover;
	}
.pc_back7{
	background-image: url(../img/list/top/list7.jpg) ;
	background-size: cover;
	}
.pc_back8{
	background-image: url(../img/list/top/list8.jpg) ;
	background-size: cover;
	}
.pc_back9{
	background-image: url(../img/list/top/list9.jpg) ;
	background-size: cover;
	}

.pc_back10{
	background-image: url(../img/list/top/list10.jpg) ;
	background-size: cover;
	}

.pc_back11{
	background-image: url(../img/list/top/list11.jpg) ;
	background-size: cover;
	}

.pc_back12{
	background-image: url(../img/list/top/list12.jpg) ;
	background-size: cover;
	}

.pc_back13{
	background-image: url(../img/list/top/list13.jpg) ;
	background-size: cover;
	}

.pc_back14{
	background-image: url(../img/list/top/list14.jpg) ;
	background-size: cover;
	}
.pc_back15{
	background-image: url(../img/list/top/list15.jpg) ;
	background-size: cover;
	}

.pc_back16{
	background-image: url(../img/list/top/list16.jpg) ;
	background-size: cover;
	}

/*.fufu_list li:nth-child(n+16)  span{
	width:21.3vw;
}
*/}