@charset "utf-8";

:root {
    --easeInOutQuart: cubic-bezier(0.77, 0, 0.175, 1);
}

.header {
    margin-bottom: 8%;
}

.p-fv {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    aspect-ratio: 1417/437;
    z-index: 1;
}

.p-fv .img {
    position: absolute;
    top: 0;
    right: 0;
    aspect-ratio: 1417/437;
    width: 75%;
    max-width: 1417px;
}

.p-fv img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.breadlist {
    margin-top: 8px;
    justify-content: flex-end;
    display: flex;
    align-items: center;
    gap: .5em;
    font-weight: 400;
    font-size: clamp(0.75rem, 0.72rem + 0.13vw, 0.875rem);
    margin-right: 5%;
    color: #000;
}

.p-fv .site-tit {
    font-weight: 400;
    font-size: clamp(1.5rem, 1.257rem + 1.04vw, 2.5rem);
    color: #000;
}

.p-fv .site-tit.js-anim {
    clip-path: inset(0 100% 0 0);
}

.p-fv .site-tit.is-active {
    clip-path: inset(0 0 0 0);
    transition: clip-path 1.5s var(--easeInOutQuart);
}

.s_blog .list {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
}

.s_blog .webgene-blog {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 36px;
}

.s_blog .inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-bottom: 120px;
    gap: 50px;
}





@media (max-width: 1023px) {
    .header {
        margin-bottom: 0;
    }

    .header .h_menu {
        display: none;
    }

    .breadlist {
        margin-top: 0;
    }

    .p-fv,
    .p-fv .img {
        position: relative;
    }

    .p-fv .img {
        width: 100%;
        height: auto;
        display: flex;
        flex-direction: column;
        gap: 4px;
    }

    .p-fv .site-tit {
        margin-left: 5%;
    }

    .s_blog .webgene-blog {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 767px) {
    .s_blog .webgene-blog {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .s_blog .inner {
        gap: 40px;
    }

    .s_blog .list {
        width: 90%;
        margin: 0 auto;
        gap: 32px;
    }
}

.gjs-dashed .p-fv {
    position: relative;
}

.gjs-dashed .site-tit.js-anim {
    clip-path: inset(0 0 0 0);
}