/* ===========================
   NEWS Swiper
=========================== */

.latest-swiper-section{
    max-width:1170px;
    margin:40px auto;
}

.latestSwiper{
    position:relative;
    overflow:hidden;
}

.latestSwiper .swiper-slide{
    display:flex;
    height:auto;
}

/* カード */

.latestSwiper .article-card{

    width:100%;

    min-height:190px;

    padding:20px;

    background:#fff;

    border:1px solid #ddd;

    border-bottom:5px solid #124379;

    box-shadow:0 3px 8px rgba(0,0,0,.25);

    display:flex;

    flex-direction:column;

}

/* 本文 */

.latestSwiper .article-content{

    display:flex;

    flex-direction:column;

    flex:1;

}

/* 日付 */

.latestSwiper .article-date{

    display:block;

    margin-bottom:20px;

    font-size:13px;

    color:#999;

}

/* タイトル */

.latestSwiper .article-title{

    margin:0 0 30px;

    height:54px;

    overflow:hidden;

    font-size:1.3em;

    font-weight:500;

    line-height:1.5;

    display:-webkit-box;

    -webkit-line-clamp:2;

    -webkit-box-orient:vertical;

}

/* タイトルリンク */

.latestSwiper .article-title a{

    color:#666;

    text-decoration:none;

    font-family:Helvetica,
                "游ゴシック",
                "Yu Gothic",
                "Hiragino Kaku Gothic ProN",
                "メイリオ",
                sans-serif;

}

.latestSwiper .article-title a:hover{

    color:#124379;

    text-decoration:underline;

}

/* ===========================
   ナビゲーション
=========================== */

.latestSwiper-prev,
.latestSwiper-next{

    width:36px;

    height:36px;

    background:#fff;

    border:1px solid #ccc;

    border-radius:50%;

    position:absolute;

    bottom:20px;

    z-index:20;

    cursor:pointer;

    display:flex;

    align-items:center;

    justify-content:center;

}

.latestSwiper-prev{

    left:15px;

}

.latestSwiper-next{

    right:15px;

}

.latestSwiper-prev::after,
.latestSwiper-next::after{

    font-size:22px;

    color:#333;

    line-height:1;

    transform:translateY(-2px);

}

.latestSwiper-prev::after{

    content:"‹";

}

.latestSwiper-next::after{

    content:"›";

}