@charset "utf-8";


#news{
	position:relative;
	z-index:2;
	padding:30px 0;
	box-shadow:0 -30px 60px rgba(0,0,0,0.08);
}

/* タイトルアイコン */
.title-news{
	display:block;
	width:100px;
	height:70px;
	margin:10px auto;
	background:url("../image/icon_pen1.png") no-repeat center/contain;
	opacity:0.9;
}

.news-title{
	font-size:1.2rem;
	letter-spacing:0.15em;
	line-height:1.35;
	color: #133b56;
	padding:30px 0;
}

.news-detail-title{
	font-size: 13px;
	letter-spacing:0.15em;
}
.news-list{
	max-width:560px;
	margin:0 auto;
	border-top:1px solid #d8d2c8;
}
.news-list li{
	display:flex;
	align-items: center;
	gap:28px;
	padding:14px 0;
	border-bottom:1px solid #d8d2c8;
	font-size:11px;
}
/* 日付カラム固定 */
.news-list .date{
	width:110px;
	flex-shrink:0;
	text-align:left;
	color:#8f887c;
	letter-spacing:0.08em;
	font-size: 10px;
}
/* タイトルカラム固定 */
.news-list .title{
	width:320px;
	text-align:left;
}
.news-list .title a{
	color:#3a3a3a;
	text-decoration:none;
	display:block;
	transition:all .35s ease;
}
/* hover */
.news-list .title a:hover{
	opacity:0.5;
}


.news-more a{
	color:#3a3a3a;
	font-size:11px;
	letter-spacing:0.15em;
	padding-bottom:3px;
	text-decoration:none;
	position:relative;
	display:inline-block;
	margin:25px 0;
}

/* 下線本体 */
.news-more a::after{
	content:"";
	position:absolute;
	left:0;
	bottom:-3px;
	width:0;
	height:1px;
	background:#2b2b2b;
	transition:width .6s ease;
}
/* ホバー時 */
.news-more a:hover{
	opacity:0.6;
}
.news-more a:hover::after{
	width:100%;
}


/* 記事 */
.news-article{
	max-width:700px;
	margin:0 auto;
	padding-top:70px;
	padding-bottom:40px;
	text-align:center;
}

/* 日付＋タイトル */
.news-meta{
	line-height:1.4;
	text-align:center;
	margin-bottom:12px;
}
.news-meta h1,.news-meta h2{
	margin:0;
}

.news-date{
	font-size: 10px;
	color:#3a3a3a;
	letter-spacing:0.12em;
	display:block;
}

.news-heading{
	font-size: 11px;
	color:#3a3a3a;
	letter-spacing:0.06em;
	line-height:1.4;
	margin:0;
}

/* 画像 */
.news-img{
	margin:22px 0 26px;
	text-align:center;
}

.news-img img{
	max-width:520px;
	width:100%;
	height:auto;
}

/* 本文 */
.news-text{
	font-size: 11px;
	color:#2b2b2b;
	text-align:left;
	max-width:520px;
	margin:0 auto;
}

.news-text a{
	color:#bfa37e;
	text-decoration:none;
	position:relative;
	transition:opacity .6s ease;
}

/* アンダーライン */
.news-text a::after{
	content:"";
	position:absolute;
	left:0;
	bottom:-4px;
	width:0;
	height:1px;
	background:#bfa37e;
	transition:width .6s ease;
}

/* hover */
.news-text a:hover{
	opacity:0.6;
}

.news-text a:hover::after{
	width:100%;
}


/* ページャー */
.pager{
	margin-top:40px;
	display:flex;
	justify-content:center;
	align-items:center;
	gap:30px;
	font-size: 11px;
	letter-spacing:0.15em;
}

.pager a{
	color:#133b56;
	text-decoration:none;
}

.pager a:hover{
	opacity:0.5;
}

.pager .current{
	border-bottom:1px solid #133b56;
	padding-bottom:2px;
}

.pager .disabled{
	opacity:0.2;
	pointer-events:none;
}

.pager-num{
	display:flex;
	gap:18px;
}

/* ニュースバック */
.news-back{
	text-align:center;
	margin:60px 20px 20px;
	font-size:12px;
	padding-bottom:20px;
}

.news-back a{
	color:#2b2b2b;
	text-decoration:none;
	position:relative;
	transition:opacity .6s ease;
}

/* underline */
.news-back a::after{
	content:"";
	position:absolute;
	left:0;
	bottom:-3px;
	width:0;
	height:1px;
	background:#2b2b2b;
	transition:width .6s ease;
}

.news-back a:hover{
	opacity:0.6;
}

.news-back a:hover::after{
	width:100%;
}

/* スマホ */
@media(max-width: 769px){
	#news{
		padding:20px;
	}
	.news-title{
		font-size:100%;
    }
	.news-list li,
	.pager{
		font-size:10px;
	}
	.news-list .date{
		font-size:9.5px;
	}
	/* ★追加 */
	.news-article{
		padding-left: 20px;
		padding-right: 20px;
		box-sizing: border-box;
	}
	.news-text p,
	.news-date,
	.news-heading{
		font-size: 10px;
	}
	.news-date{
		font-size:9px;
	}
	.news-detail-title{
		font-size:11px;
	}
	.news-meta {
		padding-top:20px;
	}
}