@charset "utf-8";

/*---------------------------------------------------
 news
----------------------------------------------------*/
.news {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	max-width: 1480px;
	width: 90%;
	margin: 160px auto;
}
.news .archives {
	width: calc( 92% - 256px );
}
.news aside {
	width: 256px;
}
.news .archives h3 {
	font-size: var(--fsize-40);
	color: var(--color-blue);
	margin-block-end: 1em;
}
.news .archives .list li {
	display: flex;
	align-items: center;
	line-height: 1.5;
	padding-block: 1.5em;
	border-bottom: 1px solid var(--color-blue);
}
.news .archives .list li:first-child {
	border-top: 1px solid var(--color-blue);
}
.news .archives .list li time {
	font-weight: 300;
	font-size: 1rem;
	width: 6em;
	margin-inline-end: 2em;
}
.news .archives .list li span {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 150px;
	height: 40px;
	border-radius: 20px;
	border: 1px solid #ff8f6a;
	background-color: #FFF;
	color: #2b3234;
	font-weight: 300;
	font-size: 1rem;
	letter-spacing: .04em;
	margin-inline-end: 2.5em;
}
.news .archives .list a {
	display: block;
	width: calc( 100% - 6em - 150px - 4.5em );
	color: #2b3234;
	letter-spacing: .04em;
}
.news .archives .list a:hover {
	color: var(--color-or);
}
.news aside h3 {
	font-family: var(--font-base);
	font-weight: 400;
	font-size: var(--fsize-26);
	line-height: 1.8;
	letter-spacing: .04em;
	border-bottom: 2px solid #ff8f6a;
	margin-block: 0 .75em;
}
.news aside ul {
	margin-block-end: 120px;
}
.news aside ul:last-of-type {
	margin-block-end: 0;
}
.news aside ul li {
	margin-bottom: 20px;
}
.news aside ul li:last-child {
	margin-block-end: 0;
}
.news aside ul a {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 50px;
	border-radius: 25px;
	border: 1px solid #ff8f6a;
	color: #2b3234;
	line-height: 1;
	letter-spacing: .04em;
}
.news aside ul a:hover {
	background-color: #ff8f6a;
}
.news aside ul .active a {
	background-color: #ff8f6a;
}
/*------------------------------ responsive */
@media screen and (max-width: 1200px) {
	.news {
		margin-block: 120px;
	}
	.news .archives {
		width: 100%;
		margin-block-end: 80px;
	}
	.news .archives .list li time {
		font-size: var(--fsize-15);
	}
	.news .archives .list li span {
		font-size: var(--fsize-15);
	}
	.news aside {
		width: 100%;
	}
	.news aside ul {
		display: grid;
		grid-template-columns: repeat(3,1fr);
		gap: 20px;
		margin-block-end: 60px;
	}
	.news aside ul li {
		margin-block-end: 0;
	}
}
@media screen and (max-width: 800px) {
	.news {
		margin-block: 80px;
	}
}
@media screen and (max-width: 700px) {
	.news .archives h3 {
		font-size: var(--fsize-30);
	}
	.news .archives .list li {
		flex-wrap: wrap;
	}
	.news .archives .list li a {
		width: 100%;
		margin-block-start: 1em;
	}
	.news aside ul {
		grid-template-columns: repeat(2,1fr);
	}
}
@media screen and (max-width: 480px) {
	
}

.content-wrap {
	max-width: 1150px;
	width: 90%;
	margin: 160px auto;
}
#news .content-wrap {
	font-size: var(--fsize-22);
	letter-spacing: .02em;
}
#news .content-wrap p {
	margin-block-end: 2em;
}
#news .content-wrap img {
	display: inline-block;
	border-radius: 20px;
	overflow: hidden;
}
#news .content-wrap .btn {
	margin: 50px auto 0;
}
#news .title {
	margin-block-end: 50px;
}
#news .title span {
	display: inline-block;
	height: 45px;
	padding-inline: 2.5em;
	margin-block-end: 1em;
	border: 1px solid #ff8f6a;
	border-radius: 25px;
	background-color: #fdfdfd;
	font-size: var(--fsize-18);
	line-height: 45px;
	letter-spacing: .04em;
}
#news .title h3 {
	font-family: var(--font-base);
	font-weight: 500;
	font-size: var(--fsize-40);
	line-height: 1.5;
	letter-spacing: .04em;
	color: var(--color-blue);
	text-align: center;
	margin-block-end: 1em;
}
#news .title .date {
	font-size: var(--fsize-18);
	line-height: 1.5;
	letter-spacing: .02em;
	text-align: right;
}
#news .title .date span {
	display: inline-block;
	margin-inline-end: 1em;
}
/*------------------------------ responsive */
@media screen and (max-width: 1200px) {
	.content-wrap {
		margin-block: 120px
	}
	#news .content-wrap {
		font-size: var(--fsize-20);
	}
	#news .title span {
		font-size: 1rem;
	}
	#news .title h3 {
		font-size: var(--fsize-36);
	}
	#news .title .date {
		font-size: 1rem;
	}
}
@media screen and (max-width: 700px) {
	.content-wrap {
		margin-block: 80px;
	}
}
@media screen and (max-width: 480px) {
	.content-wrap {
		margin-block: 80px;
	}
	#news .content-wrap {
		font-size: var(--fsize-18);
	}
	#news .title span {
		font-size: var(--fsize-15);
	}
	#news .title h3 {
		font-size: var(--fsize-30);
	}
	#news .title .date {
		font-size: var(--fsize-15);
	}
}