/* ========================================
NEWS
======================================== */

.news-archive{
	position:relative;
	padding:80px 40px 120px;
}

.news-archive-inner{
	width:100%;
	max-width:1100px;
	margin:0 auto;
}


/* ========================================
CATEGORY
======================================== */

.news-category-nav{
	display:flex;
	align-items:center;
	justify-content:center;
	flex-wrap:wrap;
	gap:0;
	margin:0 0 70px;
}

.news-category-nav a{
	position:relative;
	display:flex;
	align-items:center;
	justify-content:center;
	min-width:120px;
	padding:10px 24px;
	color:#444444;
	font-size:15px;
	line-height:1.5;
	text-decoration:none;
	transition:
		color .3s ease,
		opacity .3s ease;
}

.news-category-nav a::after{
	content:"";
	position:absolute;
	right:0;
	top:50%;
	width:1px;
	height:14px;
	background:#c9c5ba;
	transform:translateY(-50%);
}

.news-category-nav a:last-child::after{
	display:none;
}

.news-category-nav a:hover{
	color:#111;
}

.news-category-nav a.is-current{
	color:#111;
}

.news-category-nav a.is-current::before{
	content:"";
	position:absolute;
	left:50%;
	bottom:0;
	width:24px;
	height:1px;
	background:#111;
	transform:translateX(-50%);
}


/* ========================================
LIST
======================================== */

.news-archive-list{
	border-top:1px solid #c9c5ba;
}

.news-archive-item{
	margin:0;
	border-bottom:1px solid #c9c5ba;
}

.news-archive-item>a{
	position:relative;
	display:grid;
	grid-template-columns:180px minmax(0,1fr) 40px;
	gap:35px;
	align-items:center;
	min-height:145px;
	padding:28px 20px;
	color:inherit;
	text-decoration:none;
	transition:background .35s ease;
}

.news-archive-item>a:hover{
	background:rgba(255,255,255,.45);
}


/* ========================================
META
======================================== */

.news-archive-meta{
	display:flex;
	flex-direction:column;
	align-items:flex-start;
	gap:10px;
}

.news-archive-date{
	color:#444;
	font-size:15px;
	line-height:1;
}

.news-archive-category{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	min-width:90px;
	padding:6px 12px;
	border:1px solid #aaa69c;
	color:#444;
	font-size:13px;
	line-height:1.4;
}


/* ========================================
CONTENT
======================================== */

.news-archive-content{
	min-width:0;
}

.news-archive-title{
	margin:0;
	color:#222;
	font-size:18px;
	font-weight:400;
	line-height:1.8;
}

.news-archive-excerpt{
	margin:10px 0 0;
	color:#555;
	font-size:15px;
	line-height:2;
}


/* ========================================
ARROW
======================================== */

.news-archive-arrow{
	position:relative;
	display:block;
	width:30px;
	height:12px;
	justify-self:end;
}

.news-archive-arrow::before{
	content:"";
	position:absolute;
	right:0;
	top:50%;
	width:30px;
	height:1px;
	background:#777;
}

.news-archive-arrow::after{
	content:"";
	position:absolute;
	right:0;
	top:2px;
	width:8px;
	height:8px;
	border-top:1px solid #777;
	border-right:1px solid #777;
	transform:rotate(45deg);
	transform-origin:center;
}

.news-archive-item>a:hover .news-archive-arrow{
	transform:translateX(4px);
	transition:transform .3s ease;
}


/* ========================================
EMPTY
======================================== */

.news-archive-empty{
	padding:80px 20px;
	border-top:1px solid #c9c5ba;
	border-bottom:1px solid #c9c5ba;
	text-align:center;
}

.news-archive-empty p{
	margin:0;
	color:#777;
	font-size:14px;
}


/* ========================================
PAGINATION
======================================== */

.news-pagination{
	display:flex;
	align-items:center;
	justify-content:center;
	gap:30px;
	margin-top:70px;
}

.news-pagination-pages{
	display:flex;
	align-items:center;
	gap:8px;
}

.news-pagination a,
.news-pagination span{
	display:flex;
	align-items:center;
	justify-content:center;
	width:42px;
	height:42px;
	color:#777;
	font-size:12px;
	text-decoration:none;
	transition:.3s ease;
}

.news-pagination-pages a:hover{
	color:#111;
	background:rgba(255,255,255,.6);
}

.news-pagination-pages .is-current{
	background:#222;
	color:#fff;
}

.news-pagination-prev,
.news-pagination-next{
	font-size:16px !important;
}

.news-pagination-prev:hover,
.news-pagination-next:hover{
	color:#111;
}


/* ========================================
NEWS DETAIL
======================================== */

.news-detail{
	position:relative;
	padding:140px 40px 120px;
}

.news-detail-inner{
	width:100%;
	max-width:1100px;
	margin:0 auto;
}


/* ========================================
DETAIL HEADER
======================================== */

.news-detail-header{
	width:100%;
	max-width:800px;
	margin:0 auto 60px;
	text-align:center;
}

.news-detail-meta{
	display:flex;
	align-items:center;
	justify-content:center;
	gap:18px;
	margin-bottom:28px;
}

.news-detail-date{
	color:#444;
	font-size:16px;
	line-height:1;
}

.news-detail-category{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	min-width:100px;
	padding:6px 14px;
	border:1px solid #aaa69c;
	color:#444;
	font-size:13px;
	line-height:1.4;
}

.news-detail-title{
	margin:0;
	color:#222;
	font-size:30px;
	font-weight:400;
	line-height:1.7;
}

.news-detail-lead{
	margin:25px auto 0;
	max-width:680px;
	color:#444;
	font-size:16px;
	line-height:2;
}


/* ========================================
EYECATCH
======================================== */

.news-detail-eyecatch{
	width:100%;
	max-width:800px;
	margin:0 auto 80px;
}

.news-detail-eyecatch img{
	display:block;
	width:100%;
	height:auto;
}


/* ========================================
BODY
======================================== */

.news-detail-body{
	width:100%;
	max-width:800px;
	margin:0 auto;
}

.news-block{
	margin:0;
}

.news-block + .news-block{
	margin-top:45px;
}


/* ========================================
HEADING BLOCK
======================================== */

.news-block-heading h2{
	position:relative;
	margin:0;
	padding:0 0 18px;
	color:#222;
	font-size:24px;
	font-weight:400;
	line-height:1.7;
}

.news-block-heading h2::after{
	content:"";
	position:absolute;
	left:0;
	bottom:0;
	width:45px;
	height:1px;
	background:#88847b;
}


/* ========================================
TEXT BLOCK
======================================== */

.news-block-text p{
	margin:0;
	color:#333;
	font-size:17px;
	line-height:2.2;
}


/* ========================================
IMAGE BLOCK
======================================== */

.news-block-image{
	width:100%;
	margin-left:0;
}

.news-block-image img{
	display:block;
	width:100%;
	height:auto;
}

.news-block-image figcaption{
	margin-top:12px;
	color:#666;
	font-size:12px;
	line-height:1.8;
	text-align:center;
}


/* ========================================
IMAGE + TEXT BLOCK
======================================== */

.news-block-image-text{
	display:grid;
	grid-template-columns:1fr 1fr;
	gap:45px;
	align-items:center;
	width:100%;
	margin-left:0;
}

.news-block-image-text figure{
	margin:0;
}

.news-block-image-text figure img{
	display:block;
	width:100%;
	height:auto;
}

.news-block-image-text figcaption{
	margin-top:10px;
	color:#666;
	font-size:12px;
	line-height:1.8;
}

.news-block-image-text-content h2{
	margin:0 0 20px;
	color:#222;
	font-size:22px;
	font-weight:400;
	line-height:1.8;
}

.news-block-image-text-content p{
	margin:0;
	color:#333;
	font-size:16px;
	line-height:2.2;
}

.news-block-image-text.is-image-right figure{
	order:2;
}

.news-block-image-text.is-image-right .news-block-image-text-content{
	order:1;
}


/* ========================================
DIVIDER BLOCK
======================================== */

.news-block-divider{
	width:100%;
	height:1px;
	margin-top:65px !important;
	margin-bottom:65px !important;
	padding:0;
	border:0;
	background:#c9c5ba;
}


/* ========================================
BACK
======================================== */

.news-detail-back{
	display:flex;
	align-items:center;
	justify-content:space-between;
	width:100%;
	max-width:800px;
	margin:40px auto 0;
	padding-top:30px;
	border-top:1px solid #c9c5ba;
}

.news-detail-back a{
	display:inline-flex;
	align-items:center;
	gap:16px;
	color:#333;
	font-size:16px;
	text-decoration:none;
	transition:opacity .3s ease;
}

.news-detail-back a:hover{
	opacity:.55;
}


/* ========================================
NOT FOUND
======================================== */

.news-detail-notfound{
	padding:80px 20px;
	text-align:center;
}

.news-detail-notfound h1{
	margin:0 0 25px;
	color:#222;
	font-size:24px;
	font-weight:400;
	line-height:1.7;
}

.news-detail-notfound p{
	margin:0 0 35px;
	color:#555;
	font-size:15px;
	line-height:2;
}

.news-detail-notfound a{
	display:inline-block;
	padding-bottom:5px;
	border-bottom:1px solid #777;
	color:#333;
	font-size:15px;
	text-decoration:none;
}


/* ========================================
TABLET
======================================== */

@media(max-width:900px){

	.news-archive{
		padding:65px 30px 100px;
	}

	.news-category-nav{
		margin-bottom:55px;
	}

	.news-category-nav a{
		min-width:auto;
		padding:10px 20px;
	}

	.news-archive-item>a{
		grid-template-columns:150px minmax(0,1fr) 30px;
		gap:25px;
		min-height:135px;
		padding:25px 10px;
	}

	.news-detail{
		padding:110px 30px 100px;
	}

	.news-detail-header{
		margin-bottom:50px;
	}

	.news-detail-title{
		font-size:26px;
	}

	.news-detail-eyecatch{
		margin-bottom:65px;
	}

	.news-block-image{
		width:100%;
		margin-left:0;
	}

	.news-block-image-text{
		width:100%;
		margin-left:0;
		gap:35px;
	}

}


/* ========================================
MOBILE
======================================== */

@media(max-width:600px){

	.news-archive{
		padding:50px 20px 80px;
	}

	.news-category-nav{
		justify-content:flex-start;
		gap:8px 0;
		margin-bottom:40px;
	}

	.news-category-nav a{
		min-width:auto;
		padding:8px 14px;
		font-size:12px;
	}

	.news-category-nav a::after{
		height:12px;
	}

	.news-archive-item>a{
		display:block;
		min-height:0;
		padding:25px 5px 27px;
	}

	.news-archive-meta{
		flex-direction:row;
		align-items:center;
		gap:12px;
		margin-bottom:14px;
	}

	.news-archive-date{
		font-size:14px;
	}

	.news-archive-category{
		min-width:0;
		padding:4px 10px;
		font-size:12px;
	}

	.news-archive-title{
		padding-right:35px;
		font-size:16px;
		line-height:1.7;
	}

	.news-archive-excerpt{
		padding-right:25px;
		font-size:14px;
		line-height:1.9;
	}

	.news-archive-arrow{
		position:absolute;
		right:5px;
		top:50%;
		width:22px;
		transform:translateY(-50%);
	}

	.news-archive-arrow::before{
		width:22px;
	}

	.news-archive-item>a:hover .news-archive-arrow{
		transform:translate(3px,-50%);
	}

	.news-pagination{
		gap:15px;
		margin-top:50px;
	}

	.news-pagination a,
	.news-pagination span{
		width:38px;
		height:38px;
	}


	/* ========================================
	DETAIL
	======================================== */

	.news-detail{
		padding:90px 20px 80px;
	}

	.news-detail-header{
		margin-bottom:40px;
		text-align:left;
	}

	.news-detail-meta{
		justify-content:flex-start;
		gap:12px;
		margin-bottom:20px;
	}

	.news-detail-date{
		font-size:14px;
	}

	.news-detail-category{
		min-width:0;
		padding:4px 10px;
		font-size:12px;
	}

	.news-detail-title{
		font-size:22px;
		line-height:1.7;
	}

	.news-detail-lead{
		margin-top:18px;
		max-width:none;
		color:#444;
		font-size:15px;
		line-height:2;
	}

	.news-detail-eyecatch{
		margin-bottom:50px;
	}

	.news-block + .news-block{
		margin-top:35px;
	}

	.news-block-heading h2{
		padding-bottom:14px;
		font-size:21px;
	}

	.news-block-text p{
		color:#333;
		font-size:16px;
		line-height:2.1;
	}

	.news-block-image figcaption{
		font-size:11px;
		text-align:left;
	}

	.news-block-image-text{
		display:flex;
		flex-direction:column;
		align-items:stretch;
		gap:25px;
	}

	.news-block-image-text.is-image-right figure,
	.news-block-image-text.is-image-right .news-block-image-text-content{
		order:initial;
	}

	.news-block-image-text-content h2{
		margin-bottom:15px;
		font-size:20px;
	}

	.news-block-image-text-content p{
		color:#333;
		font-size:16px;
		line-height:2.1;
	}

	.news-block-divider{
		margin-top:45px !important;
		margin-bottom:45px !important;
	}

	.news-detail-back{
		margin-top:30px;
		padding-top:25px;
	}

	.news-detail-back a{
		font-size:15px;
	}

	.news-detail-notfound{
		padding:60px 0;
	}

	.news-detail-notfound h1{
		font-size:21px;
	}

	.news-detail-notfound p{
		font-size:14px;
	}

	.news-archive-back{
		margin-top:30px;
		padding-top:25px;
	}

	.news-archive-back a{
		font-size:15px;
	}
	
}

/* ========================================
ARCHIVE BACK
======================================== */

.news-archive-back{
	width:100%;
	margin:40px auto 0;
	padding-top:30px;
	border-top:1px solid #c9c5ba;
	text-align:center;
}

.news-archive-back a{
	display:inline-flex;
	align-items:center;
	gap:16px;
	color:#333;
	font-size:16px;
	text-decoration:none;
	transition:opacity .3s ease;
}

.news-archive-back a:hover{
	opacity:.55;
}