/* ==========================================
   カード共通
========================================== */

.card-grid{

    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:28px;

}

.card{

    background:#fff;
    border:1px solid #edf2f7;
    border-radius:18px;

    padding:28px;

    min-height:270px;

    display:flex;
    flex-direction:column;

    position:relative;

    transition:.25s;

    box-shadow:0 8px 25px rgba(20,40,80,.05);

}

.card:hover{

    transform:translateY(-6px);

    box-shadow:0 20px 45px rgba(20,40,80,.12);

}

/* ==========================================
   セクション
========================================== */

.section{

    max-width:1280px;

    margin:70px auto;

    padding:0 20px;

}

.section-title{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:32px;

}

.section-title h2{

    font-size:2rem;

    font-weight:700;

}

.section-title a{

    color:#1565c0;

    text-decoration:none;

    font-weight:700;

}

.section-title a:hover{

    text-decoration:underline;

}

/* ==========================================
   アイコン
========================================== */

.card-icon{

   width:72px;

    height:72px;

    border-radius:50%;

    background:#eef4ff;

    display:flex;

    justify-content:center;

    align-items:center;

    overflow:hidden;

    flex-shrink:0;

    margin-bottom:20px;

}


.card-icon img{

    width:48px;

    height:48px;

    object-fit:contain;

    display:block;

}

/* ==========================================
   タイトル
========================================== */

.card h3{

    font-size:1.45rem;

    font-weight:700;

    line-height:1.5;

    margin-bottom:16px;

}

/* ==========================================
   説明
========================================== */

.card p{

    flex:1;

    color:#666;

    line-height:1.9;

    margin-bottom:20px;

}

/* ==========================================
   リンク
========================================== */

.card a{

    color:#1565c0;

    text-decoration:none;

    font-weight:700;

}

.card a:hover{

    text-decoration:underline;

}

/* ==========================================
   カテゴリー
========================================== */

.category{

    display:inline-flex;

    justify-content:center;

    align-items:center;

    height:32px;

    padding:0 16px;

    background:#1565c0;

    color:#fff;

    border-radius:999px;

    font-size:.8rem;

    font-weight:600;

}

/* ==========================================
   準備中バッジ
========================================== */

.badge{

    position:absolute;

    top:20px;

    right:20px;

    background:#ff9800;

    color:#fff;

    padding:6px 12px;

    border-radius:999px;

    font-size:.75rem;

    font-weight:700;

}

/* ==========================================
   新着記事
========================================== */

.article-list{

    background:#fff;

    border:1px solid #edf2f7;

    border-radius:18px;

    overflow:hidden;

}

.article-item{

    display:grid;

    grid-template-columns:100px 260px 1fr 120px;

    align-items:center;

    gap:24px;

    min-height:90px;

    padding:18px 28px;

    text-decoration:none;

    color:#222;

    border-bottom:1px solid #edf2f7;

    transition:.2s;

}

.article-item:last-child{

    border-bottom:none;

}

.article-item:hover{

    background:#f8fbff;

}

.article-left{

    display:flex;

    flex-direction:column;

    justify-content:center;

}

.article-left h3{

    font-size:1.15rem;

    font-weight:700;

    margin:0 0 6px;

}

.article-left p{

    margin:0;
    color:#777;
    font-size:.95rem;
    line-height:1.5;
    overflow:hidden;
    white-space:nowrap;

}

.article-date{

    text-align:right;

    color:#999;

    font-size:.9rem;

}

/* ==========================================
   レスポンシブ
========================================== */

@media(max-width:1200px){

    .card-grid{

        grid-template-columns:repeat(2,1fr);

    }

    .article-item{

        grid-template-columns:90px 1fr 100px;

    }

    .article-left p{

        display:none;

    }

}

@media(max-width:768px){

    .card-grid{

        grid-template-columns:1fr;

    }

    .card{

        min-height:auto;

        padding:24px;

    }

    .section{

        margin:50px auto;

        padding:0 16px;

    }

    .section-title{

        flex-direction:column;

        align-items:flex-start;

        gap:10px;

    }

    .section-title h2{

        font-size:1.7rem;

    }

    .article-item{

        grid-template-columns:1fr;

        gap:10px;

        padding:18px;

    }

    .category{

        width:max-content;

    }

    .article-left h3{

        font-size:1.05rem;

    }

    .article-date{

        text-align:left;

        font-size:.85rem;

    }

}

/* ==========================================
   アニメーション
========================================== */

.card,
.article-item{

    transition:

        transform .25s ease,

        box-shadow .25s ease,

        background-color .25s ease;

}

.card:hover{

    transform:translateY(-4px);

}

.article-item:hover{

    transform:translateX(4px);

}

/* ==========================================
   共通リンク
========================================== */

a{

    transition:.2s;

}

a:hover{

    opacity:.9;

}