.first_wrap {
    max-width: 1120px;
    margin: 0 auto;
}

.link_section {
    max-width: 880px;
    margin: 0 auto;
}

.link_list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.link_card {
    display: flex;
    align-items: center;
    gap: 32px;
    padding: 28px 32px;
    background-color: #ffffff;
    outline: 1px solid #cccfd1;
    border-radius: 16px;
    transition: 0.3s;
}

.link_card:hover {
    outline-color: #c50018;
}

/* The card border is drawn with `outline`, which is also what paints the browser's
   keyboard focus ring -- without this the ring is silently replaced by the border. */
.link_card:focus-visible {
    outline: 3px solid #c50018;
    outline-offset: 2px;
}

/* The distributed FLAT35 banner carries width/height attributes, which map to CSS
   height and stretch the image when only width is overridden
   (ERR-2026-08-19-img-height-attr-stretched-stills). Both axes are pinned here. */
.link_card_thumb {
    flex: 0 0 208px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.link_card_thumb img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
}

.link_card_body {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.link_card_name {
    font-family: "IBM Plex Sans JP", sans-serif;
    font-weight: 600;
    font-size: 18px;
    line-height: 28px;
    color: #32373e;
}

.link_card_url {
    font-family: "IBM Plex Sans JP", sans-serif;
    font-weight: 500;
    font-size: 13px;
    line-height: 20px;
    color: #0356cb;
    text-decoration: underline;
    word-break: break-all;
}

.link_card_desc {
    font-family: "IBM Plex Sans JP", sans-serif;
    font-weight: 500;
    font-size: 15px;
    line-height: 26px;
    color: #6b6f75;
}

.link_card::after {
    content: '';
    flex: 0 0 24px;
    width: 24px;
    height: 24px;
    background: url('../images/common/red_circle_white_arrow.png') center / 24px no-repeat;
}





/*-------------------- tablet --------------------*/
/*---------- デザインベースはwidth:1440px ----------*/
@media(max-width:1439px) and (min-width:769px) {
    .first_wrap {
        max-width: 77.778vw;
    }

    .link_section {
        max-width: 61.111vw;
    }

    .link_list {
        gap: 1.667vw;
    }

    .link_card {
        gap: 2.222vw;
        padding: 1.944vw 2.222vw;
        border-radius: 1.111vw;
    }

    .link_card_thumb {
        flex: 0 0 14.444vw;
        height: 5.556vw;
    }

    .link_card_body {
        gap: 0.417vw;
    }

    .link_card_name {
        font-size: 1.25vw;
        line-height: 1.944vw;
    }

    .link_card_url {
        font-size: 0.903vw;
        line-height: 1.389vw;
    }

    .link_card_desc {
        font-size: 1.042vw;
        line-height: 1.806vw;
    }

    .link_card::after {
        flex: 0 0 1.667vw;
        width: 1.667vw;
        height: 1.667vw;
        background-size: 1.667vw;
    }
}





/*-------------------- sp --------------------*/
/*---------- デザインベースはwidth:375px ----------*/
@media(max-width:768px) {
    .first_wrap {
        padding: 0 4.267vw;
    }

    .link_list {
        gap: 4.267vw;
    }

    .link_card {
        flex-direction: column;
        align-items: stretch;
        gap: 4.267vw;
        padding: 5.333vw 4.267vw;
        border-radius: 3.2vw;
    }

    .link_card_thumb {
        flex: 0 0 auto;
        width: 100%;
        height: 18.667vw;
    }

    .link_card_body {
        gap: 1.6vw;
    }

    .link_card_name {
        font-size: 4.267vw;
        line-height: 6.933vw;
    }

    .link_card_url {
        font-size: 3.2vw;
        line-height: 5.333vw;
    }

    .link_card_desc {
        font-size: 3.733vw;
        line-height: 6.4vw;
    }

    .link_card::after {
        flex: 0 0 6.4vw;
        align-self: flex-end;
        width: 6.4vw;
        height: 6.4vw;
        background-size: 6.4vw;
    }
}