.main_bg::before {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-image: url(../img/sc_bg01.png);
    background-size: cover;
    background-position: center;
    mix-blend-mode: multiply;
}

.top_block {
    max-width: 1920px;
    width: 100%;
    position: relative;
    padding: 170px 5% 0;
    margin: 0 auto;
    overflow: hidden;
}

.top_block h1 {
    width: 980px;
    position: relative;
    z-index: 5;
}

.top_block h1 img {
    width: 100%;
}

.top_block h1 img.sp {
    display: none;
}

.top_block .top_img {
    /* max-width: 900px;
    width: 90vw; */
    width: 900px;
    aspect-ratio: 1798/1771;
    position: absolute;
    top: 0;
    right: 0;
    background-image: url(../img/sc_top_img.png);
    background-size: 100%;
    background-position: center;
    z-index: 4;
}

.content_block h2 {
    height: 155px;
}

.content_block h2 img {
    width: auto;
    height: 100%;
    display: block;
    margin: 0 auto;
}

.new_block {
    max-width: 1300px;
    width: 90%;
    margin: 180px auto 0;
}

.new_block .new_list {
    display: flex;
    gap: 40px;
    margin-top: 65px;
    flex-wrap: wrap;
    justify-content: center;
}

.new_block .new_list .new_item {
    /* width: calc(calc(100% - 40px) / 2); */
    width: 630px;
    padding: 50px 30px 50px 55px;
    border-radius: 150px 15px;
    background-color: rgba(255, 255, 255, 0.65);
    overflow: hidden;
    position: relative;
}
.new_block .new_list .new_item::before {
    content: "";
    width: 100%;
    height: 100%;
    background: #ffffff;
    background: linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.32) 0%,
        rgba(138, 163, 212, 0.32) 100%
    );
    display: block;
    position: absolute;
    top: 0;
    left: 0;
}

.new_block .new_item h3 {
    font-size: 35px;
    line-height: 1;
    color: #007260;
    text-align: center;
    position: relative;
}

.new_block .new_item .item_content {
    display: flex;
    gap: 30px;
    margin-top: 45px;
    position: relative;
}

.new_block .new_item .item_content .img_box {
    /* width: 260px; */
    width: 47.8%;
    aspect-ratio: 260/370;
}

.new_block .new_item .item_content .img_box img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(3px 3px 6px rgba(0, 0, 0, 0.16));
}

.new_block .new_item .item_content .text_block {
    width: calc(51.2% - 30px);
}

.new_block .new_item .item_content .text_block h4 {
    font-size: 23px;
    line-height: 30px;
    color: #007260;
    display: flex;
    align-items: flex-start;
    gap: 7px;
}

.new_block .new_item .item_content .text_block h4::before {
    content: "";
    width: 17px;
    min-width: 17px;
    height: 17px;
    background-color: #007260;
    border-radius: 3px;
    margin-top: 6.5px;
}

.new_block .new_item .item_content .text_block .text {
    font-size: 16px;
    line-height: 35px;
    margin-top: 15px;
    min-height: 140px;
}

.new_block .new_item .item_content .text_block .show {
    width: 100%;
    height: 60px;
    border-radius: 30px;
    margin: 15px auto 0;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    background: #009f86;
    background: linear-gradient(
        90deg,
        rgba(0, 159, 134, 1) 0%,
        rgba(0, 114, 96, 1) 50%,
        rgba(0, 159, 134, 1) 100%
    );
    background-position: left center;
    background-size: 200%;
    transition: all 0.3s;
}

.new_block .new_item:hover .item_content .text_block .show {
    background-position: right center;
}

.new_block .new_item .item_content .text_block .show p {
    font-size: 18px;
    line-height: 1;
    color: white;
}

.new_block .new_item .item_content .text_block .show img {
    width: 20px;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 20px;
    margin: auto;
}

.archive_block {
    margin-top: 240px;
    width: 100%;
}

.archive_block .archive {
    width: 100%;
    margin-top: 50px;
    position: relative;
}

.archive_block .archive + .archive {
    margin-top: 65px;
    padding-bottom: 40px;
}

.archive_block .archive + .archive::after {
    content: "";
    width: min(95%, calc(calc(100dvw - (calc(100dvw - 1300px) / 2)) - 40px));
    height: 2px;
    background-color: white;
    position: absolute;
    bottom: 0;
    right: 0;
}

.archive_block .archive h3 {
    font-size: 35px;
    line-height: 1;
    color: white;
    max-width: 1300px;
    width: 90%;
    margin: 0 auto;
}

.archive .archive_list {
    margin-top: 25px;
}

.archive .archive_list .spacer {
    width: max(calc(calc(calc(100dvw - 1300px) / 2) - 20px), calc(5dvw - 20px));
    min-width: max(
        calc(calc(calc(100dvw - 1300px) / 2) - 20px),
        calc(5dvw - 20px)
    );
    pointer-events: none;
}

.archive .archive_list a {
    width: 330px;
    min-width: 330px;
    height: 440px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 15px;
    overflow: hidden;
    position: relative;
    background-color: rgba(255, 255, 255, 0.32);
    padding: 35px;
}

.archive .archive_list a::before {
    content: "";
    width: 100%;
    height: 100%;
    background: #ffffff;
    background: linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.32) 0%,
        rgba(138, 163, 212, 0.32) 100%
    );
    display: block;
    position: absolute;
    top: 0;
    left: 0;
}

.archive .archive_list a img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    position: relative;
}

@media screen and (max-width: 1800px) {
    .top_block h1 {
        width: 51%;
    }

    .top_block .top_img {
        width: 46.875%;
    }
}

@media screen and (max-width: 1520px) {
    .top_block h1 {
        max-width: 700px;
        width: 100%;
    }

    .top_block .top_img {
        top: -50px;
    }
}

@media screen and (max-width: 1200px) {
    .top_block {
        padding-top: 350px;
    }
    .top_block .top_img {
        width: 500px;
        height: 350px;
        aspect-ratio: auto;
        top: 0;
        bottom: 0;
        /* background-image: url(../img/sc_top_img_sp.png);
        background-size: 360px; */
        background-size: 550px;
        background-position: bottom left;
    }
}

@media screen and (max-width: 700px) {
    .top_block {
        padding-top: 325px;
    }

    .top_block .top_img {
        width: 80%;
        height: 505px;
        background-image: url(../img/sc_top_img_sp.png);
        background-size: 107.46%;
    }

    .top_block h1 {
        max-width: 450px;
        width: 100%;
    }
    .top_block h1 img {
        display: none;
    }
    .top_block h1 img.sp {
        display: block;
    }

    .content_block h2 {
        height: 97px;
    }

    .new_block {
        margin-top: 75px;
    }

    .new_block .new_list {
        margin-top: 35px;
        gap: 50px;
    }

    .new_block .new_list .new_item {
        padding: 35px 55px 45px;
        border-radius: 100px 15px;
        max-width: 400px;
    }

    .new_block .new_item h3 {
        font-size: 20px;
    }

    .new_block .new_item .item_content {
        flex-wrap: wrap;
        justify-content: center;
        margin-top: 20px;
    }

    .new_block .new_item .item_content .img_box {
        width: 77%;
        max-width: 220px;
    }

    .new_block .new_item .item_content .text_block h4 {
        font-size: 20px;
        line-height: 28px;
    }

    .new_block .new_item .item_content .text_block {
        width: 100%;
    }

    .new_block .new_item .item_content .text_block .text,
    .new_block .new_item .item_content .text_block .show {
        display: none;
    }

    .archive_block {
        margin-top: 130px;
    }

    .archive_block .archive h3 {
        font-size: 20px;
    }

    .archive_block .archive,
    .archive_block .archive + .archive {
        padding-bottom: 30px;
    }

    .archive_block .archive::after {
        content: "";
        width: min(
            95%,
            calc(calc(100dvw - (calc(100dvw - 1300px) / 2)) - 40px)
        );
        height: 2px;
        background-color: white;
        position: absolute;
        bottom: 0;
        right: 0;
    }

    .archive .archive_list a {
        width: 240px;
        min-width: 240px;
        height: 340px;
        border-radius: 8px;
        padding: 25px;
    }

    .archive .archive_list .spacer {
        width: calc(calc(calc(100dvw - 240px) / 2) - 20px);
        min-width: calc(calc(calc(100dvw - 240px) / 2) - 20px);
    }
}