html,
body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    font-family: "Noto Sans JP", serif;
}

body {
    overflow: hidden;
}

.workscontent {
    position: relative;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
}

.worksbackground {
    position: absolute;
    top: -20px;
    left: -20px;

    width: calc(100% + 40px);
    height: calc(100% + 40px);

    background-image: url("../../images/utamtokyo_001.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    filter: blur(12px);
    transform: scale(1.05);
}

.worksscroll {
    position: relative;

    width: 100%;
    height: 100%;

    overflow-y: auto;
    overflow-x: hidden;
}

.workscover {
    width: min(1300px, calc(100% - 40px));

    margin: 400px auto 0px;

    padding: 50px 40px;

    box-sizing: border-box;

    background: rgba(255, 255, 255, 0.75);
}

.worksheroimg {
    width: 70%;
    max-width: 900px;
    margin: -300px auto 0;
}

.worksheroimg img {
    display: block;

    width: 100%;
    height: auto;

    box-shadow:
        0 15px 40px rgba(0, 0, 0, 0.18);
}

.worksbody {
    margin-top: 80px;
}