@charset "utf-8";

#keyVisual{
	background: url("../img/keyvisual_pc.jpg") no-repeat right center / cover;
}

#contentsBlock > section{
    margin-top: 100px;
}

footer{
    margin-top: 170px;
}

@media screen and (max-width: 1600px){
	#keyVisual{
		background-position: 50% center;
	}
}
@media screen and (max-width: 1024px){
	#keyVisual{
		background-position: 72% center;
	}
}
@media screen and (max-width: 768px){
	#keyVisual{
		background: url("../img/keyvisual_sp.jpg") no-repeat right center / cover;
	}
}
@media screen and (max-width: 767px) {
    #contentsBlock > section{
        margin-top: 40px;
    }
    footer{
        margin-top: 100px;
    }
}

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

/*  一覧

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

    .list-report li{
        border-bottom: solid 1px #b4b4b4;
    }
        .list-report li a{
            display: flex;
            justify-content: flex-start;
            align-items: center;
            gap: 35px;
            position: relative;
            padding: 24px 0;
            padding-right: 65px;
            text-align: left;
        }
            .list-report li a::after{
                content: "";
                display: block;
                position: absolute;
                right: 0;
                bottom: 0;
                width: 60px;
                height: 60px;
                background: #4c4398 url("/common/img/icon_arrow.png") no-repeat 24px 31px / 26px 7px;
                color: #fff;
                border-top-left-radius: 100%;
                transition: 0.3s cubic-bezier(0.4, 0, 1, 1);
            }
            .list-report li a:hover:after{
                background-color: #d96297;
            }

            .list-report li figure{
                aspect-ratio: 200/140;
                border-radius: 4px;
                overflow: hidden;
                opacity: 1;
                transition: opacity 0.3s cubic-bezier(0.4, 0, 1, 1);
                max-width: 200px;
                width: 100%;
            }
            .list-report li a:hover figure{
                opacity: 0.8;
            }
                .list-report li figure img{
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                }

            .list-report li .txtBox{
                width: 150%;
            }

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

}
@media screen and (max-width: 767px){
    .list-report li a{
        padding-right: 35px;
        gap: 20px;
    }
    .list-report li a::after{
        width: 45px;
        height: 45px;
        background: #4c4398 url("/common/img/icon_arrow.png") no-repeat 16px 23px / 19px 5px;
    }
}