#front_gensen{
    min-height:300px;
    width:100%;
    background-color:#eceded;
}
#front_gensen_inr{
    width:100%;
    max-width:1080px;
    padding:20px;
    box-sizing:border-box;
    margin: 0% auto;
}
.front_gensen_header{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
}
.front_gensen_logo{
padding:20px 30px;
box-sizing:border-box;
border:solid 1px #8e0013;
width:240px;
color:#8e0013;
}
.front_gensen_sitename{
display:block;
}
.front_gensen_select{
display:block;
    font-size:40px;
    font-weight:700;
}
.front_gensen_title{
box-sizing:border-box;
width: calc(100% - 240px);
    font-size:36px;
        font-weight:700;
text-align: justify;
letter-spacing:0.4em;
text-align:center;
}
.front-gensen-slide-inr{
    padding:10px;
    box-sizing:border-box;
    position:relative;
}
.front-gensen-slide-inr figure{
    position:relative;
    background-sizing:cover;
    background-position:center center;
    background-repeat:no-repeat;
}
.front-gensen-slide-inr figure:before{
    content:"";
    display:block;
    width:100%;
    height:auto;
    padding-top:75%;
    position:relative;
    z-index:1;

}
.front-gensen-slide-inr figure img{
    max-width:100%;
    max-height:100%;
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    object-fit:contain;
    display:block;
    opacity:0;
}

.front-gensen-slide-inr span{
    display:block;
}







#front_resort{
    min-height:300px;
    width:100%;
}
#front_resort_inr{
    width:100%;
    max-width:1080px;
    padding:20px;
    box-sizing:border-box;
    margin: 0% auto;
}
#front_resort_inr h2{
    font-size:26px;
    text-align:center;
    background-color:#2ea7e0;
    color:#FFFFFF;
    padding:8px;
}
#front_resort_block{
    display:flex;
    flex-wrap:wrap;
    padding-top:20px;
    position:relative;
}
.resortblock{
    width:25%;
    position:relative;
    box-sizing:border-box;
}
.resortblock:before{
    content:"";
    padding-top:100%;
    display:block;
    height:100%;
    box-sizing:border-box;
    width:100%;
    position:relative;
    z-index:0;

}
.resortblock a{
    display:block;
    height:90%;
    box-sizing:border-box;
    width:90%;
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    z-index:2;
}







#front_type{
    min-height:300px;
    width:100%;
}
#front_type_inr{
    width:100%;
    max-width:1080px;
    padding:20px;
    box-sizing:border-box;
    margin: 0% auto;
}
#front_type_inr h2{
    font-size:26px;
    font-weight:400;
    text-align:center;
    background-color:#b6c04e;
    color:#FFFFFF;
    padding:8px;    
}




#front_type_block{
    display:flex;
    flex-wrap:wrap;
    padding-top:20px;
}
.typeblock{
    width:33%;
    position:relative;
    box-sizing:border-box;
}
.typeblock:before{
    content:"";
    padding-top:56.25%;
    display:block;
    height:100%;
    box-sizing:border-box;
    width:100%;

}
.typeblock a{
    display:block;
    height:87%;
    box-sizing:border-box;
    width:87%;
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    overflow:hidden;
    border-radius:10px;
}
.typeblock a img{
object-fit: cover;
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
z-index:1;
height:100%;
}
.typeblock a:before{
    content:"";
    display:block;
    width:100%;
    height:100%;
    background-color:rgba(0,0,0,0.5);
    z-index:2;
    position:relative;
}

.typeblock a span.typeblock_title_post{
object-fit: cover;
text-align:center;
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
color:#FFFFFF;
z-index:10;
font-size:28px;
display:block;
width:100%;

        
}



#front_area{
    min-height:300px;
    width:100%;
}
#front_area_inr{
    width:100%;
    max-width:1080px;
    padding:20px;
    box-sizing:border-box;
    margin: 0% auto;
}
#front_area_inr h2{
    font-size:26px;
    font-weight:400;
    text-align:center;
    background-color:#A43B49;
    color:#FFFFFF;
    padding:8px; 
}
#front_area_block{
    display:flex;
    flex-wrap:wrap;
    padding-top:20px;
}
.areablock{
    width:33.3%;
    position:relative;
    box-sizing:border-box;
}
.areablock:before{
    content:"";
    padding-top:75%;
    display:block;
    height:100%;
    box-sizing:border-box;
    width:100%;

}
.areablock a{
    display:block;
    height:87%;
    box-sizing:border-box;
    width:87%;
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    overflow:hidden;
    border-radius:10px;
}
.areablock a img{
object-fit: cover;
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
z-index:1;
height:100%;
}
.areablock a:before{
    content:"";
    display:block;
    width:100%;
    height:100%;
    background-color:rgba(0,0,0,0.3);
    z-index:2;
    position:relative;
}
.areablock a span.areablock_title_post{
object-fit: cover;
text-align:center;
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
color:#FFFFFF;
z-index:10;
font-size:40px;
display:block;
width:100%;

}
.areablock a span.areablock_title_post span.jp{
display:block;
width:100%;
}
.areablock a span.areablock_title_post span.en{
    font-size:50%;
    line-height:100%;
display:block;
width:100%;
}

@media screen and (max-width: 770px) {
    #front_area_inr{
        padding:3.5vw;
    }
    #front_area_inr h2{
        font-size:6vw;
    }
    .areablock{
        width:50%;   
        position:relative;
    }
    .areablock a span.areablock_title_post{
        font-size:9vw;   
    }
    
    .areablock:nth-child(odd) a{
	    height:93%;
	    width:97.5%;
	    top:50%;
	    left:0%;
	    transform:translate(0%,-50%);
	
	}
.areablock:nth-child(even) a{
    height:93%;
    width:97.5%;
    top:50%;
    left:auto;
    right:0%;
    transform:translate(0%,-50%);
}


    
    #front_type_inr h2{
        font-size:6vw;
    }
     #front_type_inr{
      padding:2vw;
     }
	#front_type_block{
	    padding-top:4vw;
	    padding-bottom:25vw;
	    padding-left:0vw;
	    padding-right:0vw;
	    position:relative;
	}
    .typeblock{
        width:50%;
    }
	.typeblock a.typeblock_title{
	    height:10vw;
	    padding:3vw;
	    border-radius:7px;
	}
    .typeblock a span.typeblock_title_post{
        font-size:4vw;    
    }
    
    #front_resort_inr h2{
    	font-size:6vw;
    	text-align:center;
	}
	    
	#front_resort_inr{
	    width:100%;
	    max-width:1080px;
	    padding:2vw;
	    box-sizing:border-box;
	    margin: 0% auto;
	}
	
	#front_resort_block{
	    padding-left:0vw;
	    padding-right:0vw;
	    padding-top:4vw;
	    padding-bottom:25vw;
	}
	.resortblock{
	    width:50%;
	}
	.resortblock a.resortblock_title{
	    height:10vw;
	    padding:3vw;
	    border-radius:7px;
	}
	.front_gensen_header{
		display:block;
	}
	.front_gensen_logo{
		display:none;
	}
	.front_gensen_title{
		width:100%;
		font-size:6vw;
		letter-spacing:0em;
	}
}