@charset "utf-8";
#page-kv .inner-kv { padding: 220px 0 38px;}
@media (max-width: 801px) {
	#page-kv .inner-kv { padding: 180px 0 30px;}
}
@media (max-width: 481px) {
	#page-kv .inner-kv { padding: 120px 0 12px;}
}

#pager .inner{ position: relative; width: 90%; max-width: 320px; margin: 0 auto; padding: 50px 36px;}
#pager .prev,
#pager .next { width: 20px; position: absolute; top: 50%; transform: translateY(-50%);}
#pager .prev { left: 0;}
#pager .next { right: 0;}
#pager .prev a,
#pager .next a { position: relative; display: block; width: 100%; padding-top: 100%;}
#pager .prev a svg,
#pager .next a svg { width: 100%; height: auto; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); fill: #000;
 transition: 0.4s ease;
}
#pager ul { font-size: 0; text-align: center;}
#pager ul li { display: inline-block; padding: 6px; font-size: 18px;}
#pager ul li span,
#pager ul li a { display: block; width: 36px; height: 36px; border-radius: 50%; line-height: 34px; color: #fff; font-weight: 700;}
#pager ul li span { background: #ba9d32;}
#pager ul li a { background: #000; text-decoration: none; transition: 0.4s ease;}
#pager ul li a:hover { background: #ba9d32;}
#pager .prev a:hover svg,
#pager .next a:hover svg { fill: #ba9d32;}
@media (max-width: 481px) {
	#pager .inner{ padding: 30px 36px;}
}


#pager .inner-wide { position: relative; width: 92%; max-width: 1200px; margin: 0 auto; padding: 50px 0px;}
#pager .btn-prev,
#pager .btn-next { width: 28%; max-width: 160px; position: absolute; top: 50%; transform: translateY(-50%);}
#pager .btn-back { width: 40%; max-width: 200px; margin: 0 auto;}
#pager .btn-prev { left: 0;}
#pager .btn-next { right: 0;}
#pager .btn-prev a,
#pager .btn-next a,
#pager .btn-back a { position: relative; display: block; width: 100%; padding: 7px 0; border-radius: 50px; overflow: hidden;
 background: linear-gradient(-40deg,#000 40%,#ba9d32 60%); background-size: 500% 500%; background-position: 100% 0%;
 color: #fff; font-size: 20px; font-weight: 700; letter-spacing: 0.2rem; text-decoration: none;
 transition: background 0.4s ease;
}
#pager .btn-prev a { text-align: right;}
#pager .btn-prev a span,
#pager .btn-next a span,
#pager .btn-back a span { position: relative; display: inline-block; z-index: 2;}
#pager .btn-prev a span,
#pager .btn-next a span { padding: 0 24px; transition: 0.4s ease 0.02s;}
#pager .btn-prev a svg,
#pager .btn-next a svg,
#pager .btn-back a svg { width: 18px; fill: #fff; position: absolute; top: 50%; z-index: 2; transition: 0.4s ease 0.1s;}
#pager .btn-prev a svg,
#pager .btn-next a svg { transform: translateY(-50%);}
#pager .btn-prev a svg { left: 24px;}
#pager .btn-next a svg { right: 24px;}

#pager .btn-prev a:hover,
#pager .btn-next a:hover { background-position: 0% 0%;}
#pager .btn-prev a:hover svg { left: 18px;}
#pager .btn-next a:hover svg { right: 18px;}

#pager .btn-back a:before,
#pager .btn-back a:after { content: ''; display: block; position: absolute;}
#pager .btn-back a:before{ width: 8px; height: 8px; background: #fff; border-radius: 50%; right: 30px; top: 50%; transform: translate(0,-50%); z-index: 2;
 transition: 0.4s ease;
}
#pager .btn-back a span { padding-left: 30px; transition: 0.4s ease 0.06s;}
#pager .btn-back a svg { left: 30px; transform: translate(-100px,-50%) scale(0);}
#pager .btn-back a:hover { background-position: 0% 0%;}
#pager .btn-back a:hover:before{ height: 2px; transform: translate(50px,-50%);}
#pager .btn-back a:hover:after { transform: translateX(65%);}
#pager .btn-back a:hover span { text-indent: 50px;}
#pager .btn-back a:hover svg { transform: translate(0,-50%) scale(1);}
@media (max-width: 801px) {
	#pager .btn-prev a,
	#pager .btn-next a,
	#pager .btn-back a { font-size: 16px;}
}
@media (max-width: 481px) {
	#pager .inner-wide { padding: 30px 0px;}
	#pager .btn-prev,
	#pager .btn-next { width: 30%;}
	#pager .btn-back { width: 32%;}
	#pager .btn-prev a,
	#pager .btn-next a,
	#pager .btn-back a { font-size: 13px;}
	#pager .btn-back a { padding: 6px 0;}
	#pager .btn-back a:before{ width: 5px; height: 5px; right: 15px;}
	#pager .btn-prev a span,
	#pager .btn-next a span { padding: 0 16px;}
	#pager .btn-back a span { padding-left: 20px;}
	#pager .btn-prev a svg,
	#pager .btn-next a svg,
	#pager .btn-back a svg { width: 12px;}
	#pager .btn-prev a svg { left: 10px;}
	#pager .btn-next a svg { right: 10px;}
	#pager .btn-back a svg { left: 16px;}
	#pager .btn-back a:hover span { text-indent: 20px;}
}



#news-list .inner-sct { width: 90%; margin: 0 auto;}
#news-list .ctn { width: 100%; max-width: 1240px; margin: 0 auto;}
#news-list .ctn ul { display: flex; flex-wrap: wrap; font-size: 14px;}
#news-list .ctn ul li { width: 25%; padding: 30px 10px; font-size: 16px;}
#news-list .ctn ul li a { display: block; width: 100%; max-width: 280px; margin: 0 auto; color: #000; text-decoration: none; transition: 0.3s linear;}
#news-list .ctn ul li a dl dt { position: relative; width: 100%; padding-top: 52.5%; margin-bottom: 15px; border-radius: 20px; background: #ededed; overflow: hidden;}
#news-list .ctn ul li a dl dt img { position: absolute; left: 50%; top: 50%; width: 100%; object-fit: cover; transform: translate(-50%,-50%); transition: 0.4s ease;}
#news-list .ctn ul li a dl dd { letter-spacing: 0.075rem;}
#news-list .ctn ul li a dl dd.tit { min-height: 3.4em; margin-bottom: 12px;}
#news-list .ctn ul li a dl dd time { display: inline-block; margin-right: 16px; color: #979797; font-weight: 700; vertical-align: middle;}
#news-list .ctn ul li a dl dd span.tag { display: inline-block; width: auto; min-width: 60px; background: #000; padding: 1px 8px 3px; background: #000; border-radius: 50px; color: #fff; font-size: 15px; line-height: 1.2; text-align: center; vertical-align: middle;}
#news-list .ctn .btn { max-width: 200px;}
#news-list .ctn ul li a:hover { opacity: 0.8;}
#news-list .ctn ul li a:hover dl dt img { transform: translate(-50%,-50%) scale(1.05);}

@media (max-width: 1025px) {
	#news-list .inner-sct { padding: 80px 0 100px;}
	#news-list .ctn ul { flex-wrap: wrap;}
	#news-list .ctn ul li { width: 33%; padding: 18px 10px;}
}
@media (max-width: 801px) {
	#news-list .ctn ul { justify-content: space-between;}
	#news-list .ctn ul li { width: 48%;}
}
@media (max-width: 481px) {
	#news-list .inner-sct { padding: 8px 0 72px; border-top-left-radius: 20px; border-top-right-radius: 20px;}
	#news-list .ctn ul { margin-bottom: 20px;}
	#news-list .ctn ul li { padding: 18px 0px;}
	#news-list .ctn ul li a dl dt { margin-bottom: 8px; border-radius: 12px;}
	#news-list .ctn ul li a dl dd { font-size: 12px; letter-spacing: 0.05rem;}
	#news-list .ctn ul li a dl dd.tit { margin-bottom: 0px;}
	#news-list .ctn ul li a dl dd time { margin-right: 8px; font-size: 10px;}
	#news-list .ctn ul li a dl dd span.tag { padding: 1px 6px 2px; font-size: 10px;}
}



#news .inner-sct { width: 88%; margin: 0 auto; padding: 160px 0 20px;}
#news .article-ctn { position: relative; width: 100%; max-width: 1200px; margin: 0 auto; padding-top: 40px;}
#news .article-ctn.has-mv{ padding-top: 40px;}
#news .article-ctn:after { content: ''; display: block; width: 100%; height: 100%; border-radius: 50px; background: #ededed;
 position: absolute; left: 0; bottom: 0; z-index: 1;
}
#news .article-ctn.has-mv:after { height: calc( 100% - 220px );}
#news .article-ctn .mv { position: relative; width: 88%; max-width: 950px; margin: 0 auto 50px; z-index: 2;}
#news .article-ctn .mv figure { text-align: center;}
#news .article-ctn .mv figure img { width: auto; max-width: 100%; border-radius: 50px;}
#news .article-ctn .article-hd { position: relative; width: 88%; max-width: 930px; margin: 0 auto 40px; z-index: 2;}
#news .article-ctn .article-hd h2 { margin-bottom: 12px; font-size: 28px; font-weight: 700; letter-spacing: 0.1rem; line-height: 1.4;}
#news .article-ctn .article-hd p { margin-bottom: 20px; line-height: 1;}
#news .article-ctn .article-hd p time { display: inline-block; margin-right: 20px; color: #979797; font-size: 22px; font-weight: 700; letter-spacing: 0.2rem; vertical-align: middle;}
#news .article-ctn .article-hd p span { display: inline-block; min-width: 60px; padding: 4px 20px 6px; background: #000; border-radius: 50px;
 color: #fff; font-size: 18px; font-weight: 700; letter-spacing: 0.1rem; text-align: center; vertical-align: middle;
}
#news .article-ctn .ctn { position: relative; width: 88%; max-width: 930px; margin: 0 auto; padding-bottom: 70px; z-index: 2;}
#news .article-ctn .ctn p { margin-bottom: 20px; font-size: 18px; line-height: 2; letter-spacing: 0.1rem;}
#news .article-ctn .ctn p:last-child { margin-bottom: 0px;}
#news .article-ctn .ctn p a { color: #000; word-wrap:break-word;}
#news .article-ctn .ctn p a:hover { text-decoration: none;}
@media (max-width: 801px) {
	#news .article-ctn { padding-top: 30px;}
	#news .article-ctn.has-mv { padding-top: 0px;}
	#news .article-ctn .mv { margin: 0 auto 30px;}
	#news .article-ctn .article-hd h2 { font-size: 24px;}
	#news .article-ctn .article-hd p time { font-size: 18px;}
	#news .article-ctn .article-hd p span { font-size: 15px;}
	#news .article-ctn .ctn p { font-size: 16px;}
}
@media (max-width: 481px) {
	#news .inner-sct { padding: 80px 0 12px;}
	#news .article-ctn:after { border-radius: 20px;}
	#news .article-ctn.has-mv:after { height: calc( 100% - 80px );}
	#news .article-ctn .mv { margin: 0 auto 20px;}
	#news .article-ctn .mv figure img { border-radius: 20px;}
	#news .article-ctn .article-hd { margin-bottom: 20px;}
	#news .article-ctn .article-hd h2 { margin-bottom: 10px; font-size: 16px;}
	#news .article-ctn .article-hd p time { margin-right: 12px; font-size: 14px; letter-spacing: 0.075rem;}
	#news .article-ctn .article-hd p span { padding: 2px 10px 4px; font-size: 11px; letter-spacing: 0.05rem;}
	#news .article-ctn .ctn { padding-bottom: 40px;}
	#news .article-ctn .ctn p { font-size: 13px; letter-spacing: 0.05rem; line-height: 1.65;}
	#news .article-ctn .wp-block-gallery.is-layout-flex { display: block; width: 80%; margin: 0 auto;}
	#news .article-ctn .wp-block-gallery.has-nested-images figure.wp-block-image:not(#individual-image) { width: 100%; padding: 10px;}
}