.top_mainimg01{


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

    }

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

    @media only screen and (max-width: 480px) {
    }

}
.c-top-mv-item{
    position: relative;
    color: #000;
    &:visited,
    &:active,
    &:hover{
        color: #000;
    }

    .c-top-mv-item__picture{
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

    .c-top-mv-item__img{
        position: absolute;
        object-fit: cover;
        width: 100%;
        height: 100%;
    }

    .c-top-mv-item__content{
        position: absolute;
        display: grid;
        grid-template-columns: 1fr;
        gap: 32px;
        top: 50%;
        left: 12%;
        transform: translateY(-50%);

        @media only screen and (max-width: 768px) {
            left: 10%;
            gap: 16px;
            top: auto;
            bottom: 10%;
            transform: inherit;
        }

        &.--type-2{
            width: calc(100% - 12% - 12%);
            display: grid;
            grid-template-columns: 1.15fr 0.85fr;

            @media only screen and (max-width: 768px) {
                display: grid;
                grid-template-columns: 1fr;
                width: 100%;
                height: 100%;
                align-items: end;
                bottom:0;
            }
        }
    }

    .c-top-mv-item__left{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        gap: 30px;
        position: relative;
        z-index: 1;

        @media only screen and (max-width: 768px) {
            gap: 16px;
            margin-bottom: 24px;
        }

        &.--type-2{
            @media only screen and (max-width: 768px) {
                align-self: center;
                margin-bottom: 0;
            }
        }
    }

    .c-top-mv-item__right{
        @media only screen and (max-width: 768px) {
            position: absolute;
            right: 0;
            bottom: 0;
            width: 70%;
            height: 70%;
        }

        &.--type-2{
            @media only screen and (max-width: 768px) {
                margin-bottom: 24px;
            }
        }
    }

    .c-top-mv-item__title{
        font-size: clamp(48px, 8vw, 120px);
        line-height: 1.2;
        font-family: "Roboto", sans-serif;
        font-optical-sizing: auto;
        font-weight: 400;
        text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.9), -1px -1px 2px
        rgba(255, 255, 255, 0.9), -1px 1px 2px rgba(255, 255, 255, 0.9), 1px
        -1px 2px rgba(255, 255, 255, 0.9), 0 0 8px rgba(255, 255, 255, 0.5);

        &.--type-2{
            font-size: clamp(24px, 3.6vw, 50px);
            line-height: 1.2;
            font-family: 'Noto Sans CJK JP',游ゴシック体, "Yu Gothic", YuGothic, "ヒラギノ角ゴシック Pro", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
            font-optical-sizing: auto;
            font-weight: 500;
        }
    }

    .c-top-mv-item__description{
        font-size: clamp(14px, 1.25vw, 22px);
        text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.9), -1px -1px 2px
        rgba(255, 255, 255, 0.9), -1px 1px 2px rgba(255, 255, 255, 0.9), 1px
        -1px 2px rgba(255, 255, 255, 0.9), 0 0 8px rgba(255, 255, 255, 0.5);
    }

    .c-top-mv-item__content-picture{
        width: 100%;
        height: 100%;
        aspect-ratio: 724/493;
        position: relative;
        display: block;
    }
    .c-top-mv-item__content-img{
        position: absolute;
        object-fit: contain;
        width: 100%;
        height: 100%;
    }

}