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

/*==============================*/
/* NEWS一覧 */
/*==============================*/
div.newsBox-wrap{
	display: flex;
	flex-wrap: wrap;
	gap: 48px 40px;
}

div.newsBox{
	position: relative;
	width: calc(calc(100% - 40px * 2) / 3);
	padding-bottom: 48px;
}


div.newsBox:nth-child(3n)::after,
div.newsBox:last-child:nth-child(3n + 1)::after,
div.newsBox:last-child:nth-child(3n + 2)::after{
	content: "";
	height: 3px;
	background: #f3f4f6;
}

/* 3件揃っている行 */
div.newsBox:nth-child(3n)::after{
	position: absolute; bottom: 0; left: calc(-200% - 80px);
	width: calc(300% + 80px);
}

/* 最後の行が1件のとき */
div.newsBox:last-child:nth-child(3n + 1)::after{
	position: absolute; bottom: 0; left: 0; 
	width: calc(300% + 80px);
}

/* 最後の行が2件のとき */
div.newsBox:last-child:nth-child(3n + 2)::after{
	position: absolute; bottom: 0; left: calc(-100% - 40px); 
	width: calc(300% + 80px);
}


/*---------------------------------
   
---------------------------------*/
div.newsBox figure{
	margin-bottom: 20px;
}
div.newsBox figure img{ width: 100%;}


/*---------------------------------
   
---------------------------------*/

/*-- 
------------------------- */
div.newsBox div h2{
	color: #000;
	font-size: 16px;
	font-weight: 500;
	line-height: 1.55em;
	letter-spacing: 0.02em;
}

/*-- 
------------------------- */
div.newsBox div.newsBox-info{
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 8px;
}
div.newsBox div.newsBox-info p.category{
    width: 96px;
	padding: 1px 0 2px 0;
    background: #00abdc;
    color: #fff;
    font-size: 12px;
    line-height: 1.414em;
    text-align: center;
}
div.newsBox div.newsBox-info p.date{
	padding-top: 2px;
	color: #b8b8b8;
	font-family: 'Roboto', sans-serif;
	letter-spacing: 0.01em;
	line-height: 1.414em;
	font-size: 15px;
}

/*-- 中見出し
------------------------- */

/*-- 小見出し -- */




/*==============================*/
/* NEWS詳細 */
/*==============================*/
div.newsDetail{
	width: min(960px,100%);
	margin: 0 auto;
}


/*---------------------------------
   ページビジュアル
---------------------------------*/
div.newsDetail p.newsVisual{
	margin-bottom: 64px;
	border: 1px solid #efefef;
}


/*---------------------------------
   ページタイトル
---------------------------------*/
div.newsDetail div.news-titleBlock{
	width: min(720px,100%);
	margin: 0 auto 32px auto;
}

/*-- Title
------------------------- */
div.newsDetail div.news-titleBlock h1{
	font-size: 32px;
	font-weight: 600;
	line-height: 1.414em;
	letter-spacing: 0.02em;
}

/*-- Categry
------------------------- */
div.newsDetail div.news-titleBlock div{
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 10px;
}
div.newsDetail div.news-titleBlock div time{
	color: #b8b8b8;
	font-size: 17px;
	font-family: 'Roboto', sans-serif;
	letter-spacing: -0.01em;
}
div.newsDetail div.news-titleBlock div p.category{
	padding: 4px 10px;
	background: #00abdc;
	color: #fff;
	font-size: 13px;
	line-height: 1.3em;
	letter-spacing: 0.02em;
}


/*---------------------------------
   ボタン
---------------------------------*/
div.newsDetail div.news-btnBlock p{
	width: min(336px,100%);
	margin: 0 auto;
}
div.newsDetail div.news-btnBlock p a{
	position: relative;
	display: block;
	padding: 12px 0 14px 6px;
	border: 1px solid #959595;
	border-radius: 200px;
	color: #00abdc;
    text-decoration: underline;
	text-align: center;
}

div.newsDetail div.news-btnBlock p a::before{
	position: absolute; top: 50%; left: 20px;
    content: "";
    width: 8px;
    height: 8px;
    border-top: 1px solid #0FAAD8;
    border-left: 1px solid #0FAAD8;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    margin-top: -4px;
}



/*==============================*/
/* 詳細コンテンツ */
/*==============================*/
div.newsDetail div.news-contentBlock{
	width: min(720px,100%);
	margin: 0 auto 56px auto;
}

/*---------------------------------
   
---------------------------------*/
div.news-contentBlock div.news-section:not(:last-child){
	margin-bottom: 56px;
}


/*---------------------------------
   タイトル
---------------------------------*/
/*-- 
------------------------- */
div.news-contentBlock .news-mainTitle{
	margin-bottom: 20px;
	font-size: 32px;
	font-weight: 600;
	line-height: 1.5em;
	letter-spacing: 0.02em;
}

/*-- 
------------------------- */
div.news-contentBlock .news-subTitle{
	margin-bottom: 20px;
	font-size: 22px;
	font-weight: 600;
	line-height: 1.5em;
	letter-spacing: 0.02em;
}



/*---------------------------------
   Link
---------------------------------*/
div.news-contentBlock .news-textLink a,
div.news-contentBlock a.news-textLink {
	text-decoration: underline; color: #009DD5;
}


/*---------------------------------
   Link
---------------------------------*/
div.news-contentBlock div.news-dl-listBox dl{
	display: flex;
	gap: 14px;
}
div.news-contentBlock div.news-dl-listBox dl:not(:last-child){ margin-bottom: 11px;}
div.news-contentBlock div.news-dl-listBox dl dt{
	flex: 0 0 104px;
	padding: 3px 0;
	background: #F3F4F6;
	border-radius: 2px;
	font-size: 15px;
	text-align: center;
	letter-spacing: 0.02em;
}
div.news-contentBlock div.news-dl-listBox dl dd{
	flex: 1;
	min-width: 0;
	padding-top: 2px;
	font-size: 15px;
}