@charset "utf-8";

#column-list .inner-sct {}
#column-list .ctn { width: 88%; max-width: 1160px; margin: 0 auto;}
#column-list .ctn ul { display: flex; flex-wrap: wrap; font-size: 14px;}
#column-list .ctn ul li { width: 33.33334%; padding: 30px 0px; font-size: 16px;}
#column-list .ctn ul li a { display: block; width: 94%; max-width: 300px; margin: 0 auto; color: #000; text-decoration: none; transition: 0.3s linear;}
#column-list .ctn ul li a dl dt { position: relative; width: 100%; padding-top: 100%; margin-bottom: 15px; overflow: hidden;}
#column-list .ctn ul li a dl dt img { position: absolute; left: 50%; top: 50%; z-index: 1; width: 100%; height: 100%; object-fit: cover;
transform: translate(-50%,-50%); transition: 0.4s ease;}
#column-list .ctn ul li a dl dd { letter-spacing: 0.1rem;}
#column-list .ctn ul li a dl dd span.tit { font-size: 18px; font-weight: 700;}

#column-list .ctn ul li a:hover { opacity: 0.8;}
#column-list .ctn ul li a:hover dl dt img { transform: translate(-50%,-50%) scale(1.05);}

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


#column { border-top: solid 1px #b4b4b4;}
#column .inner-sct { padding: 80px 0;}
#column .article-hd { position: relative; width: 88%; max-width: 1000px; margin: 0 auto 30px;}
#column .article-hd h2 { font-size: 30px; font-weight: 700; letter-spacing: 0.1rem; line-height: 1.4;}
#column .article-ctn { margin: 0 auto 40px;}
#column .article-ctn .mv { position: relative; width: 100%; max-width: 950px; margin: 0 auto 50px; z-index: 2;}
#column .article-ctn .mv figure { text-align: center;}
#column .article-ctn .mv figure img { width: 100%;}
#column .article-ctn .ctn { position: relative; width: 88%; max-width: 930px; margin: 0 auto; padding-bottom: 70px; z-index: 2;}
#column .article-ctn .ctn .txt { margin-bottom: 40px;}
#column .article-ctn .ctn .txt p { font-size: 18px; line-height: 2; letter-spacing: 0.1rem;}
#column .article-ctn .ctn .box { margin: 0 auto; padding: 30px 40px; background: #eee;}
#column .article-ctn .ctn .box h3 { font-size: 21px; font-weight: 700; letter-spacing: 0.1rem;}
#column .article-ctn .ctn .box p { font-size: 18px; line-height: 2; letter-spacing: 0.1rem;}

#column .gallery { width: 90%; max-width: 800px; margin: 0 auto; padding: 40px 0;}
#column .gallery ul { font-size: 0;}
#column .gallery ul li { display: inline-block; width: 25%; padding: 10px; }
#column .gallery ul li span { display: block; width: 100%; padding-top: 100%; position: relative; overflow: hidden;}
#column .gallery ul li span img { width: 100%; height: 100%; object-fit: cover; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);}
#column .gallery h3 { margin-bottom: 20px; font-size: 30px; font-weight: 700; text-align: center;}
@media (max-width: 801px) {
	#column .article-hd h2 { font-size: 20px;}
	#column .article-ctn .mv { margin: 0 auto 30px;}

	#column .article-ctn .ctn .txt p { font-size: 16px;}
	#column .article-ctn .ctn .box h3 { font-size: 18px;}
	#column .article-ctn .ctn .box p { font-size: 16px;}
	#column .gallery ul li { width: 33%; padding: 8px;}
}
@media (max-width: 480px) {
	#column .inner-sct { padding:60px 0;}
	#column .article-hd { margin: 0 auto 12px;}
	#column .article-hd h2 { font-size: 18px;}

	#column .article-ctn .mv { margin: 0 auto 20px;}
	#column .article-ctn .ctn { padding-bottom: 20px;}
	#column .article-ctn .ctn .txt p { font-size: 13px; letter-spacing: 0.05rem; line-height: 1.65;}
	#column .article-ctn .ctn .box { padding: 20px;}
	#column .article-ctn .ctn .box h3 { font-size: 15px;}
	#column .article-ctn .ctn .box p { font-size: 13px; letter-spacing: 0.05rem; line-height: 1.65;}
	#column .gallery { padding: 20px 0;}
	#column .gallery ul li { width: 50%; padding: 4px;}
}

#column-list .ctn { width: 100%; margin: 0 auto;}
#column-list .ctn .creator { position: relative; margin: 10px 0 0 50px;}
#column-list .ctn .creator ul { display: inline-block; width: 50px; font-size: 0; vertical-align: middle;}
#column-list .ctn .creator ul li { display: inline-block; width: 40px; margin-bottom: 0px; margin-right: 8px; padding: 0;}
#column-list .ctn .creator ul li:last-child { margin-right: 0px;}
#column-list .ctn .creator ul li img { width: 100%; border-radius: 50%;}
#column-list .ctn .creator dl { display: inline-block; vertical-align: middle;}
#column-list .ctn .creator dl dt { font-size: 12px; font-weight: 700; letter-spacing: 0.05rem;}
#column-list .ctn .creator dl dd { font-size: 16px; font-weight: 700; letter-spacing: 0.1rem;}