@charset "utf-8";

.ttl {}
.ttl h2 { position: relative; font-size: 16px; font-weight: 900; line-height: 1;}
.ttl h2 span { position: relative; display: inline-block; vertical-align: middle;}
.ttl h2 span.eng { margin-right: 25px; font-size: 36px; letter-spacing: 0.1rem;}
.ttl h2 span.jp { padding-left: 26px; letter-spacing: 0.2rem;}
.ttl h2 span.jp:before { content: ''; display: block; width: 12px; height: 12px; background: #ba9d32; border-radius: 50%;
 position: absolute; left: 0; top: 50%; transform: translateY(-45%);
}
@media (max-width: 1281px) {
	.ttl h2 span.eng { font-size: 3.6vw;}
}
@media (max-width: 801px) {
	.ttl h2 { font-size: 14px;}
	.ttl h2 span.eng { font-size: 5.2vw;}
	.ttl h2 span.jp { padding-left: 20px; letter-spacing: 0.1rem;}
}
@media (max-width: 481px) {
	.ttl h2 { font-size: 12px;}
	.ttl h2 span.eng { margin-right: 10px; font-size: 21px; letter-spacing: 0.075rem;}
	.ttl h2 span.jp { padding-left: 12px; letter-spacing: 0.02rem;}
	.ttl h2 span.jp:before { width: 6px; height: 6px;}
}



#kv { margin-bottom: 40px;}
#kv .inner-kv {}
#kv .kv-slider a { display: block; width: calc(100% - 20px); margin: 0 auto;}
#kv .kv-slider a img { width: 100%; transition: 0.3s ease;}
#kv .kv-slider a:hover img { opacity: 0.8;}
@media (max-width: 1201px) {
	#kv { margin-bottom: 30px;}
}
@media (max-width: 1001px) {
	#kv { margin-bottom: 20px;}
}
@media (max-width: 801px) {
	#kv .kv-slider a { width: 100%;}
}
@media (max-width: 481px) {
}



#news {}
#news .inner-sct { position: relative; width: 88%; max-width: 1200px; margin: 0 auto; padding: 40px 0;}
#news .ttl { margin-bottom: 20px;}
#news .ctn { width: 100%; margin: 0 auto 60px;}
#news .ctn ul { font-size: 0; }
#news .ctn ul li { display: inline-block; width: 25%; padding: 0 4px; font-size: 16px;}
#news .ctn ul li a { display: block; width: 100%; max-width: 280px; color: #000; text-decoration: none; transition: 0.3s linear;}
#news .ctn ul li a dl dt { position: relative; width: 100%; padding-top: 52.5%; margin-bottom: 10px; overflow: hidden; background: #ededed;}
#news .ctn ul li a dl dt img { position: absolute; left: 50%; top: 50%; width: 100%; transform: translate(-50%,-50%); transition: 0.4s ease;}
#news .ctn ul li a dl dd { letter-spacing: 0.1rem;}
#news .ctn ul li a dl dd.tit { margin-bottom: 8px; line-height: 1.5;}
#news .ctn ul li a dl dd.tit time { display: block; margin-bottom: 4px; color: #979797; font-weight: 700; vertical-align: middle;}
#news .ctn ul li a dl dd.cate span { display: inline-block; width: auto; margin-right: 8px; background: #000; padding: 1px 10px 3px; background: #000; border-radius: 50px; color: #fff; font-size: 15px; line-height: 1.2; vertical-align: middle;}
#news .ctn ul li a:hover { opacity: 0.8;}
#news .ctn ul li a:hover dl dt img { transform: translate(-50%,-50%) scale(1.05);}
#news .btn { max-width: 200px;}
@media (max-width: 1025px) {
	#news .inner-sct { padding: 40px 0;}
	#news .ttl { margin-bottom: 0px;}
	#news .ctn { margin-bottom: 40px;}
	#news .ctn ul { flex-wrap: wrap;}
	#news .ctn ul li { width: 48.5%; padding: 18px 0;}
}
@media (max-width: 481px) {
	#news .inner-sct { padding: 20px 0;}
	#news .ctn { margin-bottom: 20px;}
	#news .ctn ul li { padding: 12px 0;}
	#news .ctn ul li a dl dt { margin-bottom: 8px;}
	#news .ctn ul li a dl dd { font-size: 12px; letter-spacing: 0.05rem;}
	#news .ctn ul li a dl dd.tit time { margin-bottom: 2px;}
	#news .ctn ul li a dl dd.cate span { padding: 1px 6px 2px; font-size: 10px; letter-spacing: 0.05rem;}
	#news .btn { max-width: 140px;}
}



#collabo .inner-sct { position: relative; width: 88%; max-width: 1200px; margin: 0 auto; padding: 80px 0;}
#collabo .ttl { margin-bottom: 20px;}
#collabo .ctn { width: 100%; margin: 0 auto 30px;}
#collabo .ctn ul { display: flex; justify-content: space-between; flex-wrap: wrap; font-size: 0; text-align: center;}
#collabo .ctn ul li { width: 32%; padding: 20px 0; font-size: 20px;}
#collabo .ctn ul li a { display: block; color: #000; text-decoration: none; transition: 0.3s ease;}
#collabo .ctn ul li a span { position: relative; display: block;}
#collabo .ctn ul li a span.img { width: 100%; padding-top: 100%; overflow: hidden;}
#collabo .ctn ul li a span.img img { width: 100%; position: absolute; left: 50%; top: 50%; transition: 0.3s ease; transform: translate(-50%,-50%);}
#collabo .ctn ul li a span.txt { padding-top: 18px;}

#collabo .ctn ul li a:hover span.img img { transform: translate(-50%,-50%) scale(1.08); opacity: 0.8;}
#collabo .btn { max-width: 200px;}
@media (max-width: 801px) {
	#collabo .ttl { margin-bottom: 0px;}
	#collabo .ctn { margin-bottom: 12px;}
	#collabo .ctn ul li { width: 48.5%; font-size: 16px;}
	#collabo .ctn ul li a span.txt { padding-top: 10px;}
}
@media (max-width: 481px) {
	#collabo .inner-sct { padding: 40px 0;}
	#collabo .ctn { margin-bottom: 6px;}
	#collabo .ctn ul li { padding: 10px 0; font-size: 13px;}
	#collabo .ctn ul li a span.txt { padding-top: 6px;}
	#collabo .btn { max-width: 140px;}
}


#category .inner-sct { position: relative; width: 88%; max-width: 1200px; margin: 0 auto; padding: 40px 0 80px;}
#category .ttl { margin-bottom: 20px;}
#category .ctn { width: 100%; margin: 0 auto 30px;}
#category .ctn ul { display: flex; justify-content: space-between; flex-wrap: wrap; font-size: 0; text-align: center;}
#category .ctn ul li { width: 32%; padding: 12px 0; font-size: 22px;}
#category .ctn ul li a { display: block; padding: 20px 0; background: #ededed; color: #000; text-decoration: none;}
#category .ctn ul li a span { position: relative; display: inline-block; vertical-align: middle;}
#category .ctn ul li a span.svg { width: 100px; height: 100px; margin-right: 30px;}
#category .ctn ul li a span.svg svg { max-width: 72%; max-height: 100%; transition: 0.3s ease; line-height: 1;
 position: relative; top: 50%; transform: translateY(-50%);
}
#category .ctn ul li a span.txt { font-weight: 700;}

#category .ctn ul li a:hover { color: #ba9d32; }
#category .ctn ul li a:hover span.svg svg { fill: #ba9d32;}
#category .btn { max-width: 200px;}
@media (max-width: 1281px) {
	#category .ctn ul li { font-size: 16px;}
	#category .ctn ul li a span.svg { width: 72px; height: 72px; margin-right: 10px;}
}
@media (max-width: 801px) {
	#category .ttl { margin-bottom: 12px;}
	#category .ctn { margin-bottom: 20px;}
	#category .ctn ul li { width: 48.5%; font-size: 16px;}
	#category .ctn ul li a span { display: block;}
	#category .ctn ul li a span.svg { width: 100px; height: 100px; margin: 0 auto 10px;}
}
@media (max-width: 481px) {
	#category .inner-sct { padding: 20px 0 40px;}
	#category .ttl { margin-bottom: 6px;}
	#category .ctn { margin-bottom: 16px;}
	#category .ctn ul li { padding: 5px 0; font-size: 14px;}
	#category .ctn ul li a span.svg { width: 60px; height: 60px;}
	#category .btn { max-width: 140px;}
}



#column {}
#column .inner-sct { position: relative; width: 88%; max-width: 1200px; margin: 0 auto; padding: 40px 0 100px;}
#column .ttl { margin-bottom: 20px;}
#column .ctn { width: 100%; margin: 0 auto 60px;}
#column .ctn ul { font-size: 0; }
#column .ctn ul li { display: inline-block; width: 25%; padding: 0 4px; font-size: 16px;}
#column .ctn ul li a { display: block; width: 100%; max-width: 280px; color: #000; text-decoration: none; transition: 0.3s linear;}
#column .ctn ul li a dl dt { position: relative; width: 100%; padding-top: 52.5%; margin-bottom: 10px; overflow: hidden; background: #efefef;}
#column .ctn ul li a dl dt img { position: absolute; left: 50%; top: 50%; width: 100%; transform: translate(-50%,-50%); transition: 0.4s ease;}
#column .ctn ul li a dl dd { font-size: 16px; letter-spacing: 0.1rem;}

#column .ctn ul li a:hover { opacity: 0.8;}
#column .ctn ul li a:hover dl dt img { transform: translate(-50%,-50%) scale(1.05);}
#column .btn { max-width: 200px;}
@media (max-width: 1025px) {
	#column .inner-sct { padding: 40px 0 80px;}
	#column .ctn { margin-bottom: 40px;}
	#column .ctn ul { flex-wrap: wrap;}
	#column .ctn ul li { width: 48.5%; padding: 18px 0;}
}
@media (max-width: 801px) {
	#column .ttl { margin-bottom: 0px;}
}
@media (max-width: 481px) {
	#column .inner-sct { padding: 20px 0 60px;}
	#column .ctn { margin-bottom: 20px;}
	#column .ctn ul li { padding: 12px 0;}
	#column .ctn ul li a dl dt { margin-bottom: 8px;}
	#column .ctn ul li a dl dd { font-size: 12px; letter-spacing: 0.05rem;}
	#column .ctn ul li a dl dd time { margin-right: 8px; font-size: 10px;}
	#column .ctn ul li a dl dd span.tag { padding: 1px 6px 2px; font-size: 10px;}
	#column .btn { max-width: 140px;}
}