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

/*-----------------------------------------------
#A88D00
-----------------------------------------------*/

/*-----------------------------------------------
  title
-----------------------------------------------*/
.__title {
margin-top: 60px;
padding: 0 4%;
}
.__title .grid {
display: flex;
justify-content: space-between;
align-items: center;
max-width: 1000px;
margin: auto;
}
.__title .text {
width: 200px;
font-size: 1.5rem;
line-height: 1.2;
}
.__title .text::before {
content: "TOPICS";
display: block;
width: fit-content;
margin-bottom: 0.05em;
font-family: "Alumni Sans", sans-serif;
font-size: 5.5rem;
font-weight: 700;
line-height: 0.6;
border-bottom: 4px solid #A88D00;
}
@media screen and (max-width: 800px) {
	.__title {
	margin: 0;
	padding: 0;
	}
	.__title .grid {
	display: block;
	}
	.__title .text {
	width: auto;
	padding: 2rem;
	font-size: 1.125rem;
	text-align: center;
	background: #EEE8CC;
	}
	.__title .text::before {
	margin: auto;
	font-size: 3rem;
	}
}

/* menu */
.__title .menu {
display: flex;
justify-content: center;
width: calc(100% - 240px);
padding: 1em;
background: #F4F1E8;
border-radius: 5em;
}
.__title .menu li {
width: 8em;
}
.__title .menu li:not(:first-child) {
margin-left: 1em;
}
.__title .menu a {
display: block;
padding: 0.4em;
text-align: center;
border: 1px solid #000;
border-radius: 3em;
transition: 0.2s;
}
.__title .menu a.active,
.__title .menu a:hover {
color: #FFF;
background: #656565;
}
@media screen and (max-width: 800px) {
	.__title .menu {
	flex-wrap: wrap;
	width: 92%;
	margin: auto;
	margin-top: 8%;
	padding: 0.5em;
	border-radius: 0;
	}
	.__title .menu li {
	width: auto;
	margin: 0.25rem;
	}
	.__title .menu li:not(:first-child) {
	margin: 0.25rem;
	}
	.__title .menu a {
	padding: 0.4em 1em;
	}
}

/*-----------------------------------------------
  list
-----------------------------------------------*/
.__list .content > div {
display: none;
}
.__list .content .active {
display: block;
}
.__list .list {
display: flex;
flex-wrap: wrap;
}
.__list .list li {
width: 22%;
margin-top: 40px;
margin-left: 4%;
}
.__list .list li:nth-child(4n + 1) {
margin-left: 0;
}
.__list .list .photo {
aspect-ratio: 1 / 0.6;
object-fit: cover;
border-radius: 10px;
}
.__list .list .head {
margin-top: 0.5em;
}
.__list .list .date {
margin-top: 0.25em;
font-size: 0.875rem;
}
.__list .list .category {
width: fit-content;
margin-top: 0.5em;
padding: 0 0.5em;
font-size: 0.875rem;
border: 1px solid #000;
border-radius: 3em;
}
.__list .none {
margin-top: 60px;
text-align: center;
}
@media screen and (max-width: 800px) {
	.__list .list {
	display: block;
	padding: 0 2%;
	}
	.__list .list li {
	width: 100%;
	margin-top: 8%;
	margin-left: 0;
	}
	.__list .none {
	margin-top: 16%;
	}
}