@charset "utf-8";

/* ------------------------------
 interview
------------------------------ */

.interview {
    background-color: var(--c-main-pale);
}

.interview-slider {
    margin: -2rem 0; /* .swiper の上下 padding（影の逃げ）を打ち消す */
}

.interview-item {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: 3rem;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    width: 637px;
    padding: 4rem;
    text-align: left;
    background-color: var(--c-white);
    border: 3px solid var(--c-main);
    border-radius: 2rem;
    -webkit-box-shadow: var(--shadow-default);
            box-shadow: var(--shadow-default);
}

.interview-item-body {
    flex: 1 1 auto;
    min-width: 0;
}

.interview-item-name {
    display: block;
    padding: .4rem 2rem;
    color: var(--c-main);
    font-family: var(--ff-heading);
    font-size: 1.8rem;
    font-weight: 700;
    text-align: center;
    background-color: var(--c-main-pale);
    border-radius: var(--radius-pill);
}

.interview-item-plan {
    display: block;
    margin-top: .6rem;
    font-family: var(--ff-heading);
    font-size: 1.8rem;
    font-weight: 700;
    text-align: center;
}

.interview-item-title {
    margin-top: 1rem;
    color: var(--c-main);
    font-family: var(--ff-heading);
    font-size: 2rem;
}

.interview-item-text {
    margin-top: 1rem;
    font-weight: 400;
    line-height: 1.8;
}

.interview-item-video {
    flex-shrink: 0;
    width: 187px;
    aspect-ratio: 9 / 16;
}

.interview-slider .slider-prev {
    top: 19.4rem;
    left: calc(50% - 35.2rem);
}

.interview-slider .slider-next {
    top: 19.4rem;
    right: calc(50% - 35.2rem);
}

/* ------------------------------
 voice
------------------------------ */

.voice-filter {
    margin-bottom: 4rem;
}

.filter-list {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    gap: 1rem;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
}

.filter-item {
    display: block;
    padding: .6rem 2rem;
    color: var(--c-main);
    font-family: var(--ff-heading);
    font-weight: 700;
    background-color: var(--c-white);
    border: 2px solid var(--c-main);
    border-radius: var(--radius-pill);
}

.filter-item.is-active {
    color: var(--c-white);
    background-color: var(--c-main);
}

.filter-area.is-loading {
    pointer-events: none;
    opacity: .6;
}

.voice-card {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: 4rem;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    padding: 4rem;
    text-align: left;
    background-color: var(--c-white);
    border: 3px solid var(--c-main);
    border-radius: 2rem;
    -webkit-box-shadow: var(--shadow-default);
            box-shadow: var(--shadow-default);
}

.voice-card + .voice-card {
    margin-top: 4rem;
}

.voice-card-profile {
    flex-shrink: 0;
    font-family: var(--ff-heading);
    font-size: 1.8rem;
    font-weight: 700;
    text-align: center;
}

.voice-card-icon {
    display: block;
    width: 112px;
    height: 112px;
    margin: 0 auto;
}

.voice-card-profile-text {
    margin-top: 2rem;
}

.voice-card-name {
    display: inline-block;
    padding: .4rem 2rem;
    color: var(--c-main);
    background-color: var(--c-main-pale);
    border-radius: var(--radius-pill);
}

.voice-card-plan {
    display: block;
    margin-top: .6rem;
}

.voice-card-body {
    flex: 1 1 auto;
    min-width: 0;
}

.voice-card-title {
    color: var(--c-main);
    font-family: var(--ff-heading);
    font-size: 2rem;
}

.voice-card-text {
    margin-top: 1rem;
    font-weight: 400;
    line-height: 1.8;
}

.voice-note {
    margin-top: 4rem;
    font-weight: 400;
    line-height: 1.8;
    text-align: right;
}

.voice-button {
    margin-top: 4rem;
}

/* ------ max-width:767px ------ */
@media (max-width:767px) {
    /* interview */
    .interview-slider {
        margin-top: 0;
    }

    .interview-item {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
        gap: 1rem;
        width: 280px;
        padding: 2rem;
    }

    .interview-item-body {
        width: 100%;
    }

    .interview-item-name {
        padding: .2rem 1rem;
        font-size: 1.4rem;
    }

    .interview-item-plan {
        font-size: 1.4rem;
    }

    .interview-item-title {
        font-size: 1.6rem;
    }

    .interview-item-text {
        font-size: 1.4rem;
    }

    .interview-item-video {
        order: -1;
        width: 117px;
    }

    .interview-slider .slider-prev {
        top: 21.2rem;
        left: calc(50% - 17.5rem);
    }

    .interview-slider .slider-next {
        top: 21.2rem;
        right: calc(50% - 17.5rem);
    }

    /* voice */
    .voice-filter {
        margin-bottom: 2rem;
    }

    .filter-list {
        gap: .4rem;
    }

    .filter-item {
        padding: .4rem 1.6rem;
        font-size: 1.4rem;
    }

    .voice-card {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
        gap: 1rem;
        -webkit-box-align: start;
            -ms-flex-align: start;
                align-items: flex-start;
        padding: 2rem;
    }

    .voice-card + .voice-card {
        margin-top: 2rem;
    }

    .voice-card-profile {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        gap: 1rem;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        font-size: 1.4rem;
    }

    .voice-card-icon {
        width: 68px;
        height: 68px;
    }

    .voice-card-profile-text {
        margin-top: 0;
    }

    .voice-card-body {
        width: 100%;
    }

    .voice-card-title {
        font-size: 1.6rem;
    }

    .voice-note {
        margin-top: 2rem;
        text-align: left;
    }

    .voice-button {
        margin-top: 2rem;
    }
}