.content-container {
    display: flex;
    gap: 125px; /* コンテンツ間を125px開ける */
    justify-content: space-between;
    margin-top: 49px; /* コンテンツ感を49px開ける */
    flex-wrap: wrap; /* 画面サイズに合わせて折り返し表示 */
}

.content-item {
    flex: 1; /* 均等な横幅を持つ */
    max-width: calc(50% - 62.5px); /* コンテンツ間が125pxなので、50% - 62.5px */
    box-sizing: border-box;
    margin-bottom: 49px; /* コンテンツ間の下部のマージン */
    margin-left: 100px; /* 画面左端に100pxの余白 */
    margin-right: 100px; /* 画面右端に100pxの余白 */
}

.content-item img {
    border-radius: 14px;
    height: 300px;
    width: 450px;
}

.content-item h3 {
    font-size: 20px;
    font-weight: 600;
    margin-top: 21px; /* タイトルの上部のマージン */
}

.content-item p {
    font-size: 16px;
    font-weight: 300;
    margin-top: -11px;
    line-height: 27px;
}

.content-item a {
    font-size: 10px;
    font-weight: 300;
    text-align: right; /* テキストを右寄せ */
    color: #004A4C;
    display: block; /* リンクをブロック要素に変更 */
    margin-top: 8px; /* リンクの上部にマージン */
}

@media screen and (max-width: 450px) {
    .content-container {
        gap: 30px; /* コンテンツ間を125px開ける */
        margin-top: 20px; /* コンテンツ感を49px開ける */
    }

    .content-item {
        margin: 0 auto;
        max-width: calc(90% - 62.5px); /* コンテンツ間が125pxなので、50% - 62.5px */
    }
    
    .content-item img {
        border-radius: 14px;
        height: 200px;
        width: 300px;
    } 

    .content-item h3 {
        font-size: 16px;
        font-weight: 600;
        margin-top: 14px; /* タイトルの上部のマージン */
    }

    .content-item p {
        font-size: 12px;
        font-weight: 300;
        margin-top: -11px;
        line-height: 18px;
    }

    .content-item a {
        font-size: 10px;
        font-weight: 300;
        text-align: right; /* テキストを右寄せ */
        color: #004A4C;
        display: block; /* リンクをブロック要素に変更 */
        margin-top: 8px; /* リンクの上部にマージン */
    }
}