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

/**********************************************************************************

   中ページMV

**********************************************************************************/

.mv_common{
	height: 480px;
	background: url("../img/mv.jpg")center no-repeat;
	position: relative;
}

.mv_common .mv-ttl{
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	margin: 250px 0 0;
	text-align: center;
}

.mv_common h1{
	color: #fff;
	font-size: 28px;
	font-family: "Noto Serif JP", serif;
}

@media screen and (max-width: 1250px) {
	h1{
		width: 80%;
		margin: 0 auto;
	}
	.mv_common{ height: 320px;}
	.mv_common .mv-ttl{ margin: 170px 0 0;}
}

@media screen and (max-width: 768px) {
	.mv_common {height: 280px;}
	.mv_common .mv-ttl{margin: 150px 0 0;}
	.mv_common h1{font-size: 24px;}
	
}


/**********************************************************************************

   contents01

**********************************************************************************/
#contents01{
	width: 1600px;
	margin: 60px auto;
}

/*** ↓ カテゴリ部分 ↓ **/
.category{
	display: flex;
	width: 1200px;
	margin: 0 auto;
	align-items: baseline;
	justify-content: center;
	padding:0 0 45px;
	border-bottom: 1px solid #8500b2;
}

.category .filter-list {
	width: 100%;
	display: flex;
	align-items: baseline;
	justify-content: center;	
	gap:40px;
	margin-top: 70px;
	flex-wrap: wrap;
}
.category .filter-list li span{
	width: 140px;
	text-align: center;
	border: 1px solid #000;
	font-size: 18px;
	color: #000;
	padding: 5px 20px;
	/*背景の色と形状*/
	background: #fff;
	position: relative;
	z-index: 1;
	display: inline-block;
	cursor: pointer;
	font-family: "Noto Serif JP", serif;
	box-sizing: border-box;
}
.category .filter-list li:first-child span{
	border: none;
	font-family: "Noto Serif JP", serif;
	cursor: default;
}

.category .filter-list li:first-child span:hover {
	color: #000;
	border: none;
}
.category .filter-list li.ttl span:hover::after {
	content: '';
	transform: inherit;
}
.category .filter-list li.ttl span:after{background: none;}

.category .filter-list li span:after {
  background: linear-gradient(90deg, rgba(255, 34, 87, 1), rgba(147, 38, 255, 1) 0% 0%, rgba(138, 32, 243, 1) 35%, rgba(89, 0, 178, 1) 75%);
  position: absolute;
  top: 0;
  left: 0;
  content: '';
  width: 100%;
  height: 100%;
  transform: scale(0, 1);
  transform-origin: right top;
  transition: .2s cubic-bezier(0.45, 0, 0.55, 1);
  z-index: -1;
}
.category .filter-list li span:hover {
  color: #fff;
}
.category .filter-list li span:hover::after {
	content: '';
	transform: scale(1, 1);
}

.category .filter-list li.is-active span {
    background: linear-gradient(90deg, rgba(255, 34, 87, 1), rgba(147, 38, 255, 1) 0% 0%, rgba(138, 32, 243, 1) 35%, rgba(89, 0, 178, 1) 75%);
  color: #fff;
}
.category .filter-list li a{
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	color: #000;
}

/*** ↑ カテゴリ部分 ↑　**/

/*** ↓ ニュース記事サムネ部分 ↓　**/
.filter-item{
	display: flex;
	flex-wrap: wrap;
	gap: 100px 23px ;
	margin: 120px auto;
	justify-content: flex-start;
    width: 1546px;
}
.filter-item li{
	/*width: calc(100% / 3 - 46px);*/
	width: 500px;
}
.filter-item li a{
	color: #000;
	display: flex;
	height: 100%;
}
.filter-item li:hover{background: #f5f4f9;transition: 0.3s;}

.filter-item li a .item-img{
	width: 50%;
	height: 100%;
	overflow:hidden;
	position: relative;
}

.filter-item li a .item-img img{
	display: block;
	width: 100%;
	max-height: 250px;
	height: 100%;
	object-fit: cover;
	transition:3s all;
}

.filter-item li a .item-img .date{
	background: #000;
	color: #fff;
	position: absolute;
	z-index:1;
	top: 10px;
	padding: 3px 9px 6px 9px;
	font-size: 17px;
}

.filter-item li a .item-txt{
	width: 50%;
	padding: 15px 20px;
	box-sizing: border-box;
}

.filter-item li a .item-txt .ttl-txt{
	font-size: 18px;
	letter-spacing: -0.1em;
}

.filter-item li a .item-txt span{
	font-family: "Noto Serif JP", serif;	
	padding: 0 5px 5px;
	font-size: 23px;
	line-height: 23px;
	color: #fff;
	display: inline-block;
	margin: 15px 0;
	font-weight: 100;
}
.filter-item li a .item-txt span.news{ background: #4e36ba; }
.filter-item li a .item-txt span.event {background: #666600; }
.filter-item li a .item-txt span.topics {background: #00238c; }

.filter-item li a .item-txt .body-txt{
	font-size: 17px;
	letter-spacing: -0.1em;
}


.filter-item li a:hover{opacity: 1;}
.filter-item li a:hover img{
	transform:scale(1.1,1.1);
	transition:3s all;
}

/*
.filter-item li[data-item="cat1"] {
  background: #F7D1D1;
}
.filter-item li[data-item="cat2"] {
  background: #D1EDF7;
}
.filter-item li[data-item="cat3"] {
  background: #D1F7D8;
}
*/

@media screen and (max-width: 1650px) {
	#contents01{width: 100%;margin: 60px auto ;}
	.box{width: 95%; margin: 0 auto;}
	.filter-item{width: 100%;}
	.filter-item li{width: calc(100% / 3 - 16px);}
	.filter-item li a .item-img img{min-height: 100%;}
}

@media screen and (max-width: 1260px) {
	.category{width: 95%;}
    .filter-item li {
        width: calc(100% / 2 - 16px);
    }	
}

@media screen and (max-width: 768px) {
	#contents01{margin: 60px auto 0px;}
	.box{padding: 30px 0;width: 90%;}
	.category .filter-list{gap:10px; margin: 0;}
	.category .filter-list li.ttl{  width: 100%; text-align: center;}
	.category .filter-list li span { width: 120px;}
    
	.filter-item{margin: 60px auto 0; gap:15px;width: 100%!important; }
	.filter-item li { width: 100%; }
	.filter-item li a .item-txt .ttl-txt{ font-size: 16px;}
	.filter-item li a .item-txt .body-txt{ font-size: 14px;}
	.filter-item li a .item-txt span{font-size: 18px;}
	.filter-item li a .item-img .date{font-size: 15px;}
}