/*
========================
guide-card
========================
*/
.guide_card {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 8px;
    padding: 24px;
    aspect-ratio: 1 / 1;
    border-radius: 20px;
    box-sizing: border-box;
    max-width: 520px;
    text-decoration: none;
    transition: all 0.3s ease;
}

.guide_card_title_box {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
}

.guide_card_accent,
.guide_card_title {
    display: flex;
    padding: 4px 12px;
    box-sizing: border-box;
    background-color: var(--wp--custom--color--gray--50);
    font-size: 16px;
    line-height: 24px;
    font-family: "Noto Sans JP", serif;
    font-weight: 700;
    border-radius: 6px;
    transition: all 0.3s ease;
}

.guide_card_text {
    font-size: 12px;
    line-height: 20px;
    font-weight: 500;
    font-family: "Noto Sans JP", serif;
    color: var(--wp--custom--color--gray--700);
}

/* blue */
.guide_card[data-color="blue"]:hover {
    box-shadow: 0 6px 12px var(--wp--custom--color--blue--400);
}

.guide_card[data-color="blue"] .guide_card_accent,
.guide_card[data-color="blue"] .guide_card_title {
    background-color: var(--wp--custom--color--gray--50);
    color: var(--wp--custom--color--blue--400);
}

.guide_card[data-color="blue"]:hover .guide_card_accent,
.guide_card[data-color="blue"]:hover .guide_card_title {
    background-color: var(--wp--custom--color--blue--400);
    color: var(--wp--custom--color--gray--50);
}

/* orange */
.guide_card[data-color="orange"]:hover {
    box-shadow: 0 6px 12px var(--wp--custom--color--orange--400);
}

.guide_card[data-color="orange"]:hover .guide_card_accent,
.guide_card[data-color="orange"]:hover .guide_card_title {
    background-color: var(--wp--custom--color--orange--400);
    color: var(--wp--custom--color--gray--50);
}

.guide_card[data-color="orange"] .guide_card_accent,
.guide_card[data-color="orange"] .guide_card_title {
    background-color: var(--wp--custom--color--gray--50);
    color: var(--wp--custom--color--orange--400);
}

@media screen and (min-width: 1280px) {
    .guide_card {
        padding: 32px;
    }

    .guide_wrapper {
        flex-direction: row;
        padding: 40px 200px;
    }

    .guide_card {
        border: 40px;
        gap: 16px;
    }

    .guide_card_accent,
    .guide_card_title {
        font-size: 20px;
        line-height: 32px;
    }

    .guide_card_text {
        font-size: 16px;
        line-height: 28px;
    }
}