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

.news_detail .titleitem{
	gap: 20px 50px;
}

.cate-wrap {
	background-color: #fff;
	padding: 3%;
}
.cate-wrap .webgene-blog {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-box;
  display: -webkit-flexbox;
  display: -moz-flexbox;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: flex;
  -webkit-box-lines: multiple;
  -moz-box-lines: multiple;
  -webkit-flex-wrap: wrap;
  -moz-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  gap: 20px;
}
.cate-wrap .webgene-blog .webgene-item a {
  border: 1px solid #CACACA;
  padding: 5px 15px 2px;
  border-radius: 100px;
  font-weight: 500;
}
.cate-wrap .webgene-blog .webgene-item a.on {
  background-color: #E0AAC3;
  border-color: transparent;
}
.cate-wrap .webgene-blog .webgene-item a.on p {
  color: #fff;
}
.cate-wrap .webgene-blog .webgene-item a p {
  font-weight: 300;
  color: #07111B;
}
@media screen and (max-width: 576px) {
  .cate-wrap .webgene-blog .webgene-item a {
    padding: 3px 12px;
  }
}

.news_list .webgene-blog .webgene-item{
	margin-bottom: 30px;
	padding-bottom: 30px;
	border-bottom: 1px solid #BBBBBB;
}
.news_list .webgene-blog .webgene-item a{
	width: 100%;
}
.news_list .webgene-blog .webgene-item a .imgbox{
	width: 200px;
}
.news_list .webgene-blog .webgene-item a .txtbox{
	width: calc(100% - 200px);
	flex-wrap: nowrap;
	justify-content: flex-start;
}
.news_list .webgene-blog .webgene-item a .txtbox img{
	width: 30px;
}
.news_list .webgene-blog .webgene-item a .txtbox .date,.news_list .webgene-blog .webgene-item a .txtbox .catename{
	padding: 3px 20px;
	border-right: 1px solid #BBBBBB;
	white-space: nowrap;
}
.news_list .webgene-blog .webgene-item a .txtbox .catename{
	border-left: 1px solid #BBBBBB;
	margin-right: 20px;
}
.news_list .webgene-blog .webgene-item a .txtbox h2{
	padding: 0 15px;
}

.webgene-pagination ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  flex-direction: row;
  gap: 20px;
}
/* item */
.webgene-pagination ul .number {
  position: relative; /* 下線用 */
}
/* link */
.webgene-pagination ul a {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  text-align: center;
 border: 1px solid #C9C9C9;
  width: 50px;
  aspect-ratio: 1 / 1;
	border-radius: 50%;
  font-size: clamp(15px, 2.0vw, 20px);
  line-height: 0;
}
.webgene-pagination ul a:hover {}
/* selected text */
.webgene-pagination ul .selected a {
	background-color: #E0AAC3;
	color:  #fff;
	border: none;
}
/* ---------- IEのみ ---------- */
@media all and (-ms-high-contrast: none) {
}
/* ---------- 1280px ~ ---------- */
@media screen and (max-width: 1280px){
}
/* ---------- 1080px ~ ---------- */
@media screen and (max-width: 1080px){
}
/* ---------- 768px ~ ---------- */
@media screen and (max-width: 768px){
	.news_list .webgene-blog .webgene-item a .imgbox{
		width: 150px;
	}
	.news_list .webgene-blog .webgene-item a .txtbox{
		width: calc(100% - 150px);
		flex-wrap: nowrap;
	}
}
/* ---------- 576px ~ ---------- */
@media screen and (max-width: 576px){
	.news_list .webgene-blog .webgene-item a .imgbox{
		width: 100%;
		margin-bottom: 15px;
	}
	.news_list .webgene-blog .webgene-item a .txtbox{
		width: 100%;
		flex-wrap: wrap;
		flex-direction:column;
		gap: 8px;
	}
	.news_list .webgene-blog .webgene-item a .txtbox .date,.news_list .webgene-blog .webgene-item a .txtbox .catename{
		padding: 0;
		border-right: none;
		white-space: nowrap;
	}
	.news_list .webgene-blog .webgene-item a .txtbox .catename{
		border-right: none;
		border-left: none;
		margin-right: 0px;
	}
	.news_list .webgene-blog .webgene-item a .txtbox h2{
		padding: 0;
		width: 100%;
	}
	.news_list .webgene-blog .webgene-item a .txtbox img{
		width: 24px;
	}
	.webgene-pagination ul{
		justify-content: center;
		gap: 15px;
	}
	.webgene-pagination ul a{
		width: 36px;
	}
.news_detail .titleitem{
	gap: 15px 30px;
}
}

/* ---------- 350px ~ ---------- */
@media screen and (max-width: 350px){
}