@charset "utf-8";

/* 4リスト（背景画像）
------------------------------------------ */
.unitArea.list-4{
	margin-top: 70px;
	margin-bottom: 120px;
}
.unitArea.list-4>.unitInner{
	width: 1000px;
	margin: 0 auto;
}
.unitArea.list-4>.unitInner>ul{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}
.unitArea.list-4>.unitInner>ul>li{
	width: 220px;
	margin-right: 40px;
	margin-bottom: 40px;
}
.unitArea.list-4>.unitInner>ul>li:nth-of-type(4n){
	margin-right: 0;
}
.unitArea.list-4>.unitInner>ul>li .wrapper{
	max-width: 220px;
    margin: 0 auto;
    position: relative;
	padding-top: 120%;
}
.unitArea.list-4>.unitInner>ul>li .image{
	width: 100%;
	position: absolute;
    left: 0;
    top: 0;
}
.unitArea.list-4>.unitInner>ul>li .image img{
	width: 100%;
}
.unitArea.list-4>.unitInner>ul>li .back{
	width: 100%;
	position: absolute;
	left: 0;
    top: 0;
	z-index: 2;
    background: rgba(0,0,0,0.2);
	padding-top: 120%;
}
.unitArea.list-4>.unitInner>ul>li .text{
	position: absolute;
    z-index: 2;
    top: 50%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
    color: rgba(255,255,255,0.75);
    text-align: center;
	white-space: nowrap;
}
@media screen and (max-width: 750px) {
.unitArea.list-4{
	margin-top: 50px;
	margin-bottom: 40px;
	font-size: 11px;
}
.unitArea.list-4>.unitInner{
	max-width: calc(100% - 30px);
}
.unitArea.list-4>.unitInner>ul>li{
	width: calc((100% - 10px) / 2);
	margin-right: 10px;
	margin-bottom: 10px;
}
.unitArea.list-4>.unitInner>ul>li:nth-of-type(4n){
	margin-right: auto;
}
.unitArea.list-4>.unitInner>ul>li:nth-of-type(2n){
	margin-right: 0;
}
}
/* coordinate用 */
@media screen and (max-width: 750px) {
.unitArea.list-4.coordinate>.unitInner>ul>li{
	width: calc((100% - 3px * 2) / 3);
	margin-right: 3px;
	margin-bottom: 3px;
}
.unitArea.list-4.coordinate>.unitInner>ul>li:nth-of-type(3n){
	margin-right: 0;
}
}
/* ページストック用 */
.unitArea.list-4.pagestock>.unitInner>ul>li .wrapper{
	max-width: 220px;
    margin: 0 auto;
    position: relative;
	padding-top: 65%;
}
.unitArea.list-4.pagestock>.unitInner>ul>li .back{
	width: 100%;
	position: absolute;
	left: 0;
    top: 0;
	z-index: 2;
    background: rgba(0,0,0,0.2);
	padding-top: 65%;
}