/* 団体カード（card_ptn_1）。横に並んだカードのボタンの高さがそろうよう、本文（.txt）が余りを受ける */
.card_ptn_1 {
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    background: var(--color-white);
    border: 1px solid var(--color-line);
    border-radius: 12px;

    @media (max-width: 600px) {
        padding: 20px;
    }
    &[hidden] {
        display: none;
    }
    .head {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 8px;
        color: var(--color-sub);
        font-size: 12px;
        line-height: 1.5em;
    }
    .major {
        padding: 2px 8px;
        background: var(--color-main);
        color: var(--color-white);
        font-weight: 700;
        border-radius: 4px;
    }
    .type {
        padding: 1px 8px;
        color: var(--color-main-dark);
        border: 1px solid var(--color-main);
        border-radius: 4px;
    }
    .name {
        font-size: 18px;
        font-weight: 700;
        line-height: 1.5em;

        @media (max-width: 600px) {
            font-size: 16px;
        }
    }
    .cats {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
    }
    .txt {
        flex-grow: 1;
        display: -webkit-box;
        color: var(--color-sub);
        font-size: 14px;
        line-height: 1.8em;
        overflow: hidden;
        -webkit-line-clamp: 4;
        -webkit-box-orient: vertical;
    }
    .campaign {
        padding: 12px 14px;
        display: flex;
        flex-direction: column;
        gap: 4px;
        background: var(--color-accent-pale);
        border-radius: 8px;

        .label {
            color: var(--color-accent);
            font-size: 12px;
            font-weight: 700;
            line-height: 1.5em;
        }
        .title {
            display: -webkit-box;
            color: var(--color-text);
            font-size: 14px;
            line-height: 1.6em;
            overflow: hidden;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
        }
        @media (hover: hover) {
            &:hover .title {
                text-decoration: underline;
            }
        }
    }
    .gpay {
        padding-top: 12px;
        color: var(--color-main-dark);
        font-size: 12px;
        font-weight: 700;
        line-height: 1.5em;
        border-top: 1px dashed var(--color-line);
    }
    .btns {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;

        .btn_ptn_1 {
            flex: 1 1 100%;
        }
        .btn_ptn_2 {
            flex: 1 1 0;
            white-space: nowrap;
        }
    }
}