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

/*==============================*/
/* ニュース一覧 */
/*==============================*/
div.news article{
	border-bottom: 1px solid #eee;
}
div.news article:first-child{
	border-top: 1px solid #eee;
}
div.news article a{
	position: relative;
	display: block;
	padding: 18px 32px 18px 20px;
}
div.news article a:hover{ background: #EFFAFD;}
div.news article a:hover::before{
	position: absolute; top: 50%; right: 10px;
	content: "";
	width: 28px;
	height: 28px;
	background: #A9EAFD;
	border-radius: 50%;
	margin-top: -14px;
}
div.news article a:hover::after{
	position: absolute; top: 50%; right: 22px;
	content: "";
	width: 8px;
	height: 8px;
	border-top: 2px solid #fff;
	border-right: 2px solid #fff;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
	margin-top: -4px;
}

div.news article a dl{ display: flex;}
div.news article a dl dt{
	display: flex;
	align-items: center;
	width: 296px;
	color: #00abdc;
	font-size: 16px;
	font-family: 'Roboto', sans-serif;
}
div.news article a dl dt span{
	flex: 1;
	display: inline-block;
	margin-left: 16px;
	padding: 5px 0 4px 0;
	background: #CBF3FF;
	border-radius: 200px;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.3em;
	text-align: center;
}
div.news article a dl dd{
	flex: 1;
	margin-left: 16px;
	font-size: 15px;
	line-height: 1.618em;
}

	/* ======= TB =======*/
	@media screen and (min-width: 768px) and (max-width: 1024px) {
		div.news article a dl dt{ width: 232px;}
		div.news article a dl dt span{
			margin-left: 12px;
			padding: 4px 0 3px 0;
		}
		div.news article a dl dd{ margin-left: 12px;}
	}
	/* ======= SP =======*/
	@media (max-width: 767px) {
		div.news article a{ padding: 19px 16px 19px 16px;}
		div.news article a dl{ flex-direction: column;}
		div.news article a dl dt{
			width: 228px;
			margin-bottom: 6px;
		}
		div.news article a dl dt span{
			margin-left: 10px;
			padding: 4px 0 2px 0;
			font-size: 13px;
		}
		div.news article a dl dd{ margin-left: 0px;}
	}


/*---------------------------------
   ページャー
---------------------------------*/
div.nav-links {
	display: flex;
	justify-content: center;
	gap: 20px;
}

div.nav-links span.dots,
div.nav-links a{ color: #cdd6dd;}

div.nav-links span.current,
div.nav-links a:hover{
	color: #00abdc;
	font-weight: 600;
}


/*---------------------------------
   カテゴリーナビ
---------------------------------*/
ul.news-categoryNavi{
	display: flex;
	flex-wrap: wrap;
	gap: 12px 8px;
	width: min(800px,100%);
	margin: 0 auto;
}
ul.news-categoryNavi li{ width: calc(calc(100% - 8px * 2) / 3);}
ul.news-categoryNavi li a{
	display: block;
	padding: 4px 0;
	background: #EFFAFD;
	border-radius: 200px;
	text-align: center;
	color: var(--themecolor);
	font-size: 14px;
	font-weight: 400;
}
ul.news-categoryNavi li a:hover,
ul.news-categoryNavi li.active a{
	background: var(--themecolor);
	color: #fff;	
}
	/* ======= TB =======*/
	@media screen and (min-width: 768px) and (max-width: 1024px) {
		ul.news-categoryNavi{ gap: 10px 8px;}
		ul.news-categoryNavi li{ width: calc(calc(100% - 8px * 2) / 3);}
	}
	/* ======= SP =======*/
	@media (max-width: 767px) {
		ul.news-categoryNavi{ gap: 10px 6px;}
		ul.news-categoryNavi li{ width: calc(calc(100% - 6px * 1) / 2);}
		ul.news-categoryNavi li a{
			padding: 6px 0;
			font-size: 13px;
		}
	}



/*---------------------------------
   
---------------------------------*/
.newsList-title{
	margin-bottom: 32px;
	text-align: center;
	color: #000;
	font-size: 28px;
	font-weight: 600;
	line-height: 1.3em;
}


/*==============================*/
/* ニュースコンテンツ */
/*==============================*/
div.newsContent-wrap{
	width: min(960px,100%);
	margin: 0 auto;
}


/*---------------------------------
   title
---------------------------------*/
div.newsContent-title{
	margin-bottom: 40px;
}
	/* ======= TB =======*/
	@media screen and (min-width: 768px) and (max-width: 1024px) {
	}
	/* ======= SP =======*/
	@media (max-width: 767px) {
	}

/*-- シェアボタン
------------------------- */
div.newsContent-title ul.shareBtn{
	display: flex;
	justify-content: flex-end;
	gap: 8px;
	width: min(392px,100%);
	margin-left: auto;
	margin-bottom: 16px;
}
div.newsContent-title  ul.shareBtn li{
	width: calc(calc(100% - 8px * 2) / 3);
	text-align: center;
}
div.newsContent-title ul.shareBtn li a,
div.newsContent-title ul.shareBtn li button{
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	padding: 4px 0 6px 0;
	text-align: center;
	color: #fff;
	font-size: 13px;
	font-weight: 400;
	border-radius: 3px;
	line-height: 1.3em;
	gap: 4px;
}
div.newsContent-title ul.shareBtn li button span{
	display: inline-block;
	font-size: 13px;
	line-height: 1.3em;
	margin-right: -6px;
}

div.newsContent-title ul.shareBtn li:nth-child(1) a{ background: #1876F7;}
div.newsContent-title ul.shareBtn li:nth-child(2) a{ background: #000;}

div.newsContent-title ul.shareBtn li a:hover,
div.newsContent-title ul.shareBtn li button:hover{ opacity: 0.7;}

div.newsContent-title ul.shareBtn li button{
	width: 100%;
	background: #7E7E7E;
	cursor: pointer;
}
	/* ======= TB =======*/
	@media screen and (min-width: 768px) and (max-width: 1024px) {
	}
	/* ======= SP =======*/
	@media (max-width: 767px) {
		div.newsContent-title ul.shareBtn li button span{ display: none;}
	}

/*-- タイトル
------------------------- */
div.newsContent-title h2{
	margin-bottom: 20px;
	padding: 22px 40px;
	background: #7E7E7E;
    color: #fff;
    font-size: 28px;
    font-weight: 600;
    line-height: 1.5em;
}
	/* ======= TB =======*/
	@media screen and (min-width: 768px) and (max-width: 1024px) {
		div.newsContent-title h2{
			padding: 22px 24px;
			font-size: 26px;
		}
	}
	/* ======= SP =======*/
	@media (max-width: 767px) {
		div.newsContent-title h2{
			padding: 20px;
			font-size: 24px;
		}
	}


/*-- カテゴリ
------------------------- */
div.newsContent-title ul.newsCategory li{
	width: min(200px,100%);
}
div.newsContent-title ul.newsCategory li a{
	display: block;
	padding: 4px 0;
	background: #EFFAFD;
	border-radius: 200px;
	text-align: center;
	color: var(--themecolor);
	font-size: 14px;
	font-weight: 400;
}
div.newsContent-title ul.newsCategory li a:hover{
	background: var(--themecolor);
	color: #fff;	
}
	/* ======= TB =======*/
	@media screen and (min-width: 768px) and (max-width: 1024px) {
	}
	/* ======= SP =======*/
	@media (max-width: 767px) {
	}




/*---------------------------------
   Content
---------------------------------*/


/*-- タイトル
------------------------- */

/*--  -- */
div.newsContent h2{
	position: relative;
	margin-bottom: 20px;
	padding: 4px 0 4px 24px;
	color: #00ABDC;
	font-size: 26px;
	font-weight: 600;
	line-height: 1.414em;
}
div.newsContent h2 strong{
	display: block;
	color: #00ABDC;
	font-size: 26px;
	font-weight: 600;
	line-height: 1.414em;
}
div.newsContent h2::before{
	position: absolute; top: 0; left: 0;
	content: "";
	width: 4px;
	height: 100%;
	background: #69d6f5;
}

/*--  -- */
div.newsContent h3 strong,
div.newsContent h3 span strong,
div.newsContent h3 strong span{
	display: inline-block;
	font-weight: 600;
	line-height: 1.414em;
}

	/* ======= TB =======*/
	@media screen and (min-width: 768px) and (max-width: 1024px) {
	}
	/* ======= SP =======*/
	@media (max-width: 767px) {
		/*--  -- */
		div.newsContent h2{
			margin-bottom: 20px;
			font-size: 22px;
		}
		div.newsContent h2 strong{
			font-size: 22px;
		}

	}



/*-- 通常テキスト
------------------------- */
div.newsContent p{
	margin-bottom: 40px;
}
/* ======= TB =======*/
	@media screen and (min-width: 768px) and (max-width: 1024px) {
	}
	/* ======= SP =======*/
	@media (max-width: 767px) {
		div.newsContent p{
			margin-bottom: 32px;
		}
	}


/*-- 太字
------------------------- */
div.newsContent p b,
div.newsContent p strong{
	color: #000;
	font-weight: bold;
}
div.newsContent p strong b{ vertical-align: baseline; }

	/* ======= TB =======*/
	@media screen and (min-width: 768px) and (max-width: 1024px) {
	}
	/* ======= SP =======*/
	@media (max-width: 767px) {
	}


/*-- 
------------------------- */
div.newsContent p span span{ vertical-align: baseline;}
div.newsContent p span a{ vertical-align: baseline;}

	/* ======= TB =======*/
	@media screen and (min-width: 768px) and (max-width: 1024px) {
	}
	/* ======= SP =======*/
	@media (max-width: 767px) {
	}