@charset "UTF-8";

.works-area {
	position: relative;
	z-index: 1;
	padding: 80px 0 160px;
}

.works-area::before {
	content: "";
	display: block;
	position: absolute;
	z-index: -1;
	left: 0;
	top: 0;
	width: 95.833%;
	height: 390px;
	border-radius: 0 var(--border-radius) var(--border-radius) 0;
	background: 50% 0 no-repeat;
	background-size: cover;
}

.works-area#area01::before {
    background-image: url("../image/head_bg_01.jpg");
}

.works-area#area02::before {
    background-image: url("../image/head_bg_02.jpg");
}

.works-area__cont {
    padding: 50px;
    border-radius: var(--border-radius);
    background: #fff;
}

.works-area__cont .th01 {
    width: 40%;
}

.works-area__cont .th02,
.works-area__cont .th03 {
    width: 30%;
}

#area01 {
    position: relative;
    z-index: 1;
}

#area01::after {
    content: "";
    display: block;
    position: absolute;
    z-index: -2;
    left: 0;
    top: 178px;
    width: 100%;
    height: 100%;
    background: var(--bg-blue);
}


@media screen and (max-width: 899px) {

    .works-area {
        padding: 60px 0 85px;
    }
    
    .works-area__cont {
        padding: 8%;
    }

}