@charset "utf-8";

.ttl h2 { margin-bottom: 20px; font-size: clamp(24px,4.0vw,40px); line-height: 1;}

.pager-no .inner { position: relative; width: 88%; max-width: 1200px; margin: 0 auto;}
.pager-no ul { font-size: 0; text-align: center;}
.pager-no ul li { display: inline-block; width: 40px; font-size: 20px; vertical-align: middle;}
.pager-no ul li span,
.pager-no ul li a { position: relative; display: block; width: 32px; height: 32px; margin: 0 auto; text-decoration: none; line-height: 28px;}
.pager-no ul li span { border: solid 1px #b9cbe2; background: #b9cbe2; color: #173762;}
.pager-no ul li a { border: solid 1px #b9cbe2; color: #173762; transition: 0.3s ease;}
.pager-no ul li a:hover { background: #173762; border-color: #173762; color: #fff;}

.pager-no ul li.prev a:before,
.pager-no ul li.prev a:after { content: ''; display: block; width: 15px; height: 15px; position: absolute; left: 8px; top: 50%;
 background-repeat: no-repeat; background-position: 50% 50%; background-size: 100% auto; transition: 0.2s ease;
}
.pager-no ul li.prev a:before{
 background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 20 18"><polygon points="20 8 12 0 10.9 1.1 17.9 8 0 8 0 9.5 17.9 9.5 10.9 16.5 12 17.6 20 9.5 20 8" fill="%23173762"/></svg>');
}
.pager-no ul li.prev a:after {
 background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 20 18"><polygon points="20 8 12 0 10.9 1.1 17.9 8 0 8 0 9.5 17.9 9.5 10.9 16.5 12 17.6 20 9.5 20 8" fill="%23fff"/></svg>');
}
.pager-no ul li.prev a:before{ transform: translate(0,-50%) rotate(180deg) scale(1);}
.pager-no ul li.prev a:after { transition-delay: 0.1s; transform: translate(10px,-50%) rotate(180deg) scale(0); }
.pager-no ul li.prev a:hover:before{ transform: translate(-10px,-50%) rotate(180deg) scale(0);}
.pager-no ul li.prev a:hover:after { transform: translate(0,-50%) rotate(180deg) scale(1); fill: #fff;}

.pager-no ul li.next a:before,
.pager-no ul li.next a:after { content: ''; display: block; width: 15px; height: 15px; position: absolute; left: 8px; top: 50%;
 background-repeat: no-repeat; background-position: 50% 50%; background-size: 100% auto; transition: 0.2s ease;
}
.pager-no ul li.next a:before{
 background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 20 18"><polygon points="20 8 12 0 10.9 1.1 17.9 8 0 8 0 9.5 17.9 9.5 10.9 16.5 12 17.6 20 9.5 20 8" fill="%23173762"/></svg>');
}
.pager-no ul li.next a:after {
 background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 20 18"><polygon points="20 8 12 0 10.9 1.1 17.9 8 0 8 0 9.5 17.9 9.5 10.9 16.5 12 17.6 20 9.5 20 8" fill="%23fff"/></svg>');
}
.pager-no ul li.next a:before{ transform: translate(0,-50%) scale(1);}
.pager-no ul li.next a:after { transition-delay: 0.1s; transform: translate(-10px,-50%) scale(0); }
.pager-no ul li.next a:hover:before{ transform: translate(10px,-50%) scale(0);}
.pager-no ul li.next a:hover:after { transform: translate(0,-50%) scale(1); fill: #fff;}


#news .inner-sct { position: relative; padding: 60px 0 120px;}
#news .ctn { position: relative; width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 50px;}
#news .ttl { margin-bottom: 20px;}
#news ul.newslist { margin-bottom: 40px; font-size: 0;}
#news ul.newslist li { position: relative; padding: 20px; padding-left: 180px; border-bottom: solid 1px #173762; font-size: 18px;}
#news ul.newslist li:last-child { border-bottom: none;}
#news ul.newslist li time { position: absolute; left: 25px; top: 22px; color: #173762; font-size: 20px; letter-spacing: 0.05rem;}
#news ul.newslist li span { position: relative; display: block; padding: 5px; padding-right: 40px; color: #000; text-decoration: none;}
#news ul.newslist li a { position: relative; display: block; padding: 5px; padding-right: 40px; color: #000; text-decoration: none;}
#news ul.newslist li a:hover { text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px;}

@media (max-width: 801px) {
	#news .inner { padding-left: 160px;}
	#news ul.newslist li { padding: 12px; padding-left: 120px; font-size: 16px;}
	#news ul.newslist li time { left: 15px; top: 16px; font-size: 18px;}
}
@media (max-width: 641px) {
	#news .inner-sct { position: relative; padding: 40px 0;}
	#news .ctn { padding: 0 24px;}
	#news .ttl { position: relative; left: auto; top: auto; margin-bottom: 20px;}
	#news .inner { padding-left: 0px;}
	
	#news ul.newslist li { padding: 8px 4px 10px; font-size: 13px;}
	#news ul.newslist li time { position: relative; left: auto; top: auto; font-size: 14px;}
	#news ul.newslist li a { padding: 0; padding-right: 40px;}
	#news ul.newslist li a:before,
	#news ul.newslist li a:after { top: calc(50% - 8px);}
}