@charset "UTF-8";

/*============================
voice-coontents
============================*/

.vct__archives {
    width: 102%;
    margin-left: -1%;
}

.vcta__atc {
    width: 31.33%;
    margin: 0 1% 50px;

    position: relative;

    & a {
        display: block;
        width: 100%;
        height: 100%;
        padding-bottom: 50px;
        position: relative;

        &:hover {
            opacity: .9;

            .vcta__img {
                &::before {
                    opacity: .2;
                }
            }
        }
    }
}

.vcta__img {
    border-radius: 20px;
    overflow: hidden;
    position: relative;

    &::before {
        content: "";
        position: absolute;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, #E2496E, #BD3B5F);
        top: 0;
        left: 0;
        opacity: 0;
        transition: .3s;
    }

    & img {
        width: 100%;
        object-fit: cover;
        height: 100%;
        aspect-ratio: 410/274;

    }
}

.vcta__info {
    display: flex;
    align-items: center;
    margin: 1em 0;
    white-space: nowrap;
}

.vcta__cat01 {
    width: fit-content;
    padding: 0 1em;
    border-radius: 1em;
    line-height: 2;
    min-width: 8em;
    text-align: center;
    background: linear-gradient(90deg, #E2496E, #BD3B5F);
    color: #fff;
    white-space: nowrap;
    margin-right: 1em;
    font-family: "Noto Sans JP", "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'メイリオ', 'Meiryo', 'MS Ｐゴシック', 'MS PGothic', sans-serif;
}

.vcta__cat02{
    color: #8A6565;
    font-weight: 600;
}
.vcta__h3 {
    line-height: 2;
    overflow: hidden;
    display: -webkit-box;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
}

.vcta__btn {
    position: absolute;
    bottom: 0;
    right: 0;
    display: flex;
    align-items: center;
    border-bottom: solid 1px #BD3B5F;
    padding-bottom: .3em;
font-weight:700;
    & img {
        width: 20px;
        margin-left: 1em;
    }

}

@media screen and (max-width:1024px) {
    .vct__archives {
        width: 102%;
        margin-left: -1%;
    }

    .vcta__atc {
        width: 31.33%;
        margin: 0 1% 40px;


        & a {
            padding-bottom: 40px;
            position: relative;
        }
    }

    .vcta__img {
        border-radius: 16px;


    }

    .vcta__info {
        margin: 1em 0;
    }

    .vcta__cat01 {
        padding: 0 1em;
        border-radius: 1em;
        margin-right: 1em;
    }

    .vcta__btn {
        padding-bottom: .3em;

        & img {
            width: 16px;
            margin-left: 1em;
        }

    }
}

@media screen and (max-width:767px) {
    .vct__archives {
        width: 100%;
        margin-left: 0;
    }

    .vcta__atc {
        width: 100%;
        margin: 0 auto 40px;


        & a {
            padding-bottom: 40px;
        }
    }

    .vcta__img {
        img {
            border-radius: 16px;
        }
    }

    .vcta__info {
        margin: 1em 0;
    }

    .vcta__cat01 {
        padding: 0 1em;
        border-radius: 1em;
        margin-right: 1em;
    }



    .vcta__btn {
        padding-bottom: .3em;

        & img {
            width: 16px;
            margin-left: 1em;
        }

    }

}

/* voice-detail */
/*============================
 voice__top
============================*/
.voice__top {
    padding: 250px 0 150px;

    .inner__large {
        max-width: 1400px;
    }
}

.vt__left {
    width: 50%;
}

.vt__thumbnail {
    width: 45%;

    & img {
        width: 100%;
        height: 100%;
        border-radius: 20px;
		object-fit:cover;
        aspect-ratio: 583/390;
    }
}

.vt__h1 {
    line-height: 1.5;
}

.vt__cat {
    margin-right: 1em;
    font-weight: 700;
}

@media screen and (max-width:1024px) {
    .voice__top {
        padding: 150px 0 100px;
    }

    .vt__left {
        width: 50%;
    }

    .vt__thumbnail {
        width: 45%;

        & img {
            border-radius: 16px;
        }
    }

}


@media screen and (max-width:767px) {
    .voice__top {
        padding: 150px 0 100px;
    }

    .vt__left {
        width: 100%;
        margin-bottom: 30px;
    }

    .vt__thumbnail {
        width: 100%;
        margin: 0 auto;

        & img {
            border-radius: 16px;
        }
    }
}

/*============================
 voice__before
============================*/

.vba__box {
    background-color: #fff;
    border-radius: 20px;
    box-shadow: 0 4px 30px rgba(32, 32, 32, .1);
    padding: 60px 4%;
}

.vba__imgwrap {
    width: 52%;
    display: flex;
    border-radius: 20px;
    overflow: hidden;

}

.vba__img {
    width: 50%;
    position: relative;

    .img {
        object-fit: cover;
        width: 100%;
        height: 100%;
        aspect-ratio: 318/426;
    }

    .tag {
        left: 0;
        top: 12%;
        transform: translate(0, -50%);
        max-width: 148px;
        width: calc((148/318)*100%);

    }
}

.vba__txtwarp {
    width: 43%;
}

.vba__info {
    white-space: nowrap;
    margin: .25em 1em .25em 0;

    .box {
        width: fit-content;
        padding: 0 1em;
        border: solid 1px #BD3B5F;
        border-radius: 1em;
        margin-right: .5em;
    }
}

@media screen and (max-width:1024px) {
    .vba__box {
        border-radius: 20px;
        padding: 40px 4%;
    }

    .vba__imgwrap {
        width: 52%;

    }

    .vba__img {
        width: 50%;


        .tag {
            left: 0;
            top: 12%;
            width: calc((148/318)*100%);

        }
    }

    .vba__txtwarp {
        width: 43%;
    }

    .vba__infos {
        margin-bottom: 20px;
    }

    .vba__info {
        margin: .25em 1em .25em 0;

        .box {
            margin-right: .5em;
        }
    }

}

@media screen and (max-width:767px) {
    .vba__box {
        border-radius: 16px;
        padding: 30px 5%;
    }

    .vba__imgwrap {
        width: 100%;
        margin-bottom: 30px;

    }

    .vba__img {
        width: 50%;


        .tag {
            top: 15%;
            width: calc((148/318)*150%);

        }
    }

    .vba__txtwarp {
        width: 100%;
    }

    .vba__infos {
        display: flex;
        margin-bottom: 10px;
    }

    .vba__info {
        margin: .25em 1em .25em 0;

        .box {
            margin-right: .5em;
        }
    }

}

/*============================
 voice__staff
============================*/
.voice__staff {
    padding-bottom: 200px;
}

.vs__ico {
    max-width: 346px;
    width: 30%;
    padding-bottom: 30%;
    border-radius: 50%;
    overflow: hidden;
    position: relative;

    & img {
        position: absolute;
        width: 100%;
        height: auto;
        object-fit: cover;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

}

.vs__txtwrap {
    width: 65%;
    padding: 30px 0;
    border-top: solid 1px #A28245;
    border-bottom: solid 1px #A28245;
}

.vs__ttl {
    display: flex;
    align-items: center;

    .fs-24 {
        margin-left: 1em;
    }
}

.vs__btn {
    margin: 0 1%;
    max-width: 48%;
    width: 510px;
    font-size: 2rem;
}

@media screen and (max-width:1024px) {
    .voice__staff {
        padding-bottom: 120px;
    }

    .vs__ico {
        width: 30%;

    }

    .vs__txtwrap {
        width: 65%;
        padding: 20px 0;
    }

    .vs__ttl {

        .fs-24 {
            margin-left: 1em;
        }
    }

    .vs__btn {
        margin: 0 1%;
        max-width: 48%;
        width: 400px;
        font-size: 1.6rem;
    }
}

@media screen and (max-width:767px) {
    .voice__staff {
        padding-bottom: 120px;
    }

    .vs__ico {
        width: 50%;
        padding-bottom: 50%;
        margin: 0 auto 30px;

    }

    .vs__txtwrap {
        width: 100%;
        padding: 20px 0;
    }

    .vs__ttl {

        .fs-24 {
            margin-left: 1em;
        }
    }

    .vs__btn {
        margin: 0 auto 15px;
        max-width: 100%;
        width: 300px;
        font-size: 1.6rem;

        &:last-child {
            margin-bottom: 0;
        }
    }
}