@charset "utf-8";
/* CSS Document */

/*==============================*/
/* NEWS・INFORMATION TOPページ */
/*==============================*/
.newsWrap{
	display: flex; display: -webkit-flex;
	justify-content: space-between; -webkit-justify-content: space-between;
}
.newsWrap > div{
	width: calc(50% - 28px);
	padding-left: 36px;
}
    /* ======= TB =======*/
    @media screen and (min-width: 768px) and (max-width: 1024px) {
        .newsWrap > div{
            width: calc(50% - 16px);
            padding-left: 36px;
        }
    }

    /* ======= SP =======*/
    @media (max-width: 767px) {
        .newsWrap{ flex-direction: column; -webkit-flex-direction: column;}
        .newsWrap > div{
            width: 100%;
            padding-left: 0px;
        }
        .newsWrap > div:not(:last-child){ margin-bottom: 48px;}
    }

/*-- タイトル
------------------------- */
div.newsTitle{
	display: flex; display: -webkit-flex;
	align-items: center; -webkit-align-items: center;
	justify-content: space-between; -webkit-justify-content: space-between;
	margin-bottom: 10px;
}
div.newsTitle h2{
	position: relative;
	font-size: 29px;
	font-weight: 600;
    font-family: 'Roboto', sans-serif; letter-spacing: 0.01em;
}
div.newsTitle h2:before{
	position: absolute; top: 14px; left: -36px;
	content: "";
	width: 22px;
	height: 22px;
	background: url("/common/img/share/icon_title.png") no-repeat;
}
div.newsTitle h2 small{
	position: relative; top: -4px;
	margin-left: 12px;
	font-weight: 400;
	font-family: "Noto Sans Japanese"; letter-spacing: -0.01em;
	font-size: 14px;
}

/* ボタン */
div.newsTitle p{
	width: 100%;
	max-width: 128px;
}
div.newsTitle p a{
	position: relative;
	display: block;
	padding: 1px 0 0 28px;
	border: 1px solid #004968;
	color: #004968;
	letter-spacing: -0.02em;
}
div.newsTitle p a:before{
	position: absolute; top: 50%; left: 10px;
	content: "";
	width: 12px;
	height: 12px;
	background: url("/common/img/share/icon_link.png") no-repeat;
	margin-top: -6px;
}
div.newsTitle p a:hover{
	background: #004968;
	color: #fff;
}
div.newsTitle p a:hover:before{ background: url("/common/img/share/icon_link_white.png") no-repeat;}

    /* ======= SP =======*/
    @media (max-width: 767px) {
        div.newsTitle{
            margin-bottom: 10px;
            padding-left: 36px;
        }
        div.newsTitle h2{
            font-size: 26px;
            letter-spacing: -0.03em;
        }
        div.newsTitle h2 small{ display: none;}
        div.newsTitle h2:before{
            position: absolute; top: 9px; left: -36px;
        }

        /* ボタン */
        div.newsTitle p{
            width: 100%;
            max-width: 124px;
        }
        div.newsTitle p a{ padding: 3px 0 1px 28px;}
    }

/*-- コンテンツ
------------------------- */
div.news{
	border-top: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
}
div.news article{
    padding: 18px 0 14px 0;
    border-bottom: 1px dashed #ccc;
}
div.news article:last-child{ border-bottom: none; }
div.news article dl dt{
    margin-bottom: 4px;
    line-height: 1em;
    color: #444;
}
div.news article dl dt span{
    position: relative; top: -2px;
    margin-left: 8px;
    padding: 3px 12px 2px 12px;
    background: #004968;
    color: #fff;
    font-size: 14px;
    font-family: 'Roboto', sans-serif; letter-spacing: 0.05em;
}
div.news.cateTopics article dl dt span{ background: #207F99;}
div.news article dl dd{
    font-size: 14px;
    line-height: 1.5em;
}
div.news article dl dd.news_at_title,
div.news article dl dd p.news_at_title{
	font-size: 15px;
	font-weight: bold;
	margin-bottom: 8px;
}
div.news article dl dd a{
	position: relative; top: -3px;
	margin-bottom: -4px;
}

/*==============================*/
/* 個別ページ */
/*==============================*/
@media (min-width: 768px) {
	#news div.news article,
	#topics div.news article{ padding: 24px 0 20px 0;}
	#news div.news article dl,
	#topics div.news article dl{
		display: flex; display: -webkit-flex;
		justify-content: space-between; -webkit-justify-content: space-between;
	}
	#news div.news article dl dt{
		width: 150px;
		margin-bottom: 0;
	}
	#topics div.news article dl dt{
		width: 160px;
		margin-bottom: 0;
	}
	#news div.news article dl dd{ width: calc(100% - 150px - 20px);}
	#topics div.news article dl dd{ width: calc(100% - 160px - 20px);}
}