@charset "UTF-8";

/* ======================================
article header
=========================================*/
.voiceSample{
    margin-top: 40px;
    padding: var(--contentPaddingSP);
    padding-top: 12px;
    overflow: hidden;
}

.topic__txt{
    margin-top: 44px;
}

.audio{
    margin-top: 22px;
    position: relative;
}

audio{
    width: 100%;
}

.audio__item{
    margin: 32px auto;
    /* text-align: center; */
}

.audio__item p{
    margin-top: 10px;
    font-size: 1.6rem;
    text-align: center;
}

.audio::before{
    content: '';
    background-image: url(../image/voiceSample_1.jpg);
    background-size: cover;
    width: 150px;
    height: 225px;
    position: absolute;
    top: 40px;
    right: -51px;
    z-index: -10;
}
.audio::after{
    content: '';
    background-image: url(../image/voiceSample_2.jpg);
    background-size: cover;
    width: 150px;
    height: 225px;
    position: absolute;
    bottom: -44px;
    left: -51px;
    z-index: -10;
}

@media screen and (min-width: 769px) {
    .audio{
        display: flex;
        flex-wrap: wrap;
        padding-right: 0;
        gap: 0 40px;
        justify-content: flex-start;
        flex-direction: row;
    }

    .audio__item{
    width: 45%;
    min-width: 280px;
    height: 60px;
    margin: 40px 0;
    }
}/* 769px PC */

@media screen and (min-width: 1025px) {
    .voiceSample{
        padding: var(--contentPaddingPC);
        margin-top: 136px;
        padding-top: 20px;
    }
}/* 769px PC */

/* header PC */
@media screen and (min-width: 1281px) {

    .audio{
        padding-right: 440px;
    }

    .audio::before{
        content: '';
        width: 240px;
        height: 360px;
        top: 0px;
        right: 0px;
    }
    .audio::after{
        content: '';
        width: 240px;
        height: 360px;
        bottom: 0px;
        right: 200px;
        left: auto;
    }
}/* 1281px PC */