@charset "utf-8";

#column-list .inner-sct { padding: 90px 0 150px;}
#column-list .ctn { display: flex; flex-wrap: wrap; width: 92%; max-width: 1240px; margin: 0 auto 80px;}
#column-list .box { width: 33%; padding: 15px 16px;}
#column-list .box a { position: relative; display: block; width: 100%; height: 100%; border: solid 0.5px #969696; text-decoration: none;}
#column-list .box a figure { position: relative; display: block; width: 100%; padding-top: 60%; margin: 0 auto; text-align: center; overflow: hidden;}
#column-list .box a figure img { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); transition: 0.3s ease; width: 100%;}
#column-list .box a figure img.none { width: 72%;}
#column-list .box a dl { position: relative; display: block; width: 100%; padding: 12px 30px;}
#column-list .box a dl dt { margin-bottom: 6px; color: #006e78; font-size: clamp(12px,1.4vw,16px); font-weight: 600; letter-spacing: 0.15rem; line-height: 1;}
#column-list .box a dl dd.tit { width: 100%; min-height: 4.6em; padding-bottom: 10px; font-size: clamp(14px,1.8vw,18px); letter-spacing: 0.15rem; line-height: 1.4; text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px;}
#column-list .box a dl dd.aside { font-size: 12px; line-height: 1; text-align: right;}
#column-list .box a dl dd.aside span { display: inline-block; padding-right: 10px; border-right: solid 0.8px #969696; font-size: 14px;}
#column-list .box a dl dd.aside time { display: inline-block; padding-left: 10px; font-size: 14px;}
#column-list .box a:hover figure img { transform: translate(-50%,-50%) scale(1.04); opacity: 0.85;}
#column-list .box a:hover dl dd.tit { text-decoration: none;}
@media (max-width: 1281px) {
	#column-list .box { padding: 10px 12px;}
}
@media (max-width: 801px) {
	#column-list .inner-sct { padding: 50px 0px 60px;}
	#column-list .ctn { margin-bottom: 50px;}
	#column-list .box { width: 50%;}
}
@media (max-width: 641px) {
	#column-list .box a dl { padding: 8px 15px;}
}
@media (max-width: 481px) {
	#column-list .inner-sct { padding: 40px 0px 50px;}
	#column-list .ctn { margin-bottom: 40px;}
	#column-list .box { padding: 6px;}
	#column-list .box a dl { padding: 8px 12px;}
	#column-list .box a dl dt { margin-bottom: 4px; font-size: 12px; letter-spacing: 0.05rem;}
	#column-list .box a dl dd.tit { margin-bottom: 6px; font-size: 12px; letter-spacing: 0.05rem;}
	#column-list .box a dl dd.aside { font-size: 10px;}
	#column-list .box a dl dd.aside span { padding-right: 6px; font-size: 11px;}
	#column-list .box a dl dd.aside time { padding-left: 6px; font-size: 11px;}
}




#column .inner-sct { padding: 80px 0 0px;}
#column .article-hd { width: 88%; max-width: 900px; margin: 0 auto;}
#column .article-hd h1 { margin-bottom: 12px; font-size: clamp(24px,3.6vw,36px); letter-spacing: 0.15rem; line-height: 1.4;}
#column .article-hd p { font-size: 18px; letter-spacing: 0.1rem; line-height: 1;}
#column .article-hd p.no { display: block; margin-bottom: 15px; color: #006e78;}
#column .article-hd p span { display: inline-block; padding-right: 10px; border-right: solid 0.8px #969696; font-size: 18px;}
#column .article-hd p time { display: inline-block; padding-left: 10px; font-size: 18px;}

#column .article-ctn { padding: 40px 0 60px;}

#column .main { width: 88%; max-width: 900px; margin: 0 auto 40px;}
#column .main figure { }
#column .main figure img { width: 100%;}
#column .lead { width: 88%; max-width: 900px; margin: 0 auto 40px;}
#column .lead p { font-size: 18px; letter-spacing: 0.1rem; line-height: 1.8;}
#column .ctn { width: 88%; max-width: 900px; margin: 0 auto 60px;}
#column .ctn h2 { position: relative; font-size: clamp(18px,2.4vw,24px); font-weight: 400; letter-spacing: 0.15rem; line-height: 1.25;}
#column .ctn h3 { position: relative; padding: 12px 0; border-bottom: dashed 0.5px #969696;
 font-size: clamp(16px,2.1vw,21px); font-weight: 400; letter-spacing: 0.15rem; line-height: 1.25;
}
#column .ctn p { font-size: 18px; letter-spacing: 0.1rem; line-height: 1.8;}

#column .article-ctn .btn-back { width: 45%; max-width: 300px; margin: 0 auto;}
#column .article-ctn .btn-back a { display: block; border: solid 1px #373737;
 color: #373737; font-size: clamp(15px,1.8vw,21px); letter-spacing: 0.15rem; line-height: 1.4; text-align: center; text-decoration: none; transition: 0.3s ease;
}
#column .article-ctn .btn-back a span { display: block; padding: 12px 0;}
#column .article-ctn .btn-back a:hover{ background: #373737; color: #fff;}

@media (max-width: 1281px) {
	#column .article-hd p { font-size: 16px;}
}
@media (max-width: 801px) {
	#column .inner-sct { padding: 40px 0 0px;}
	#column .article-hd h1 { margin-bottom: 20px;}
	#column .article-hd h1 span { margin-bottom: 12px; font-size: 14px;}
	#column .article-hd p { font-size: 14px;}
	#column .article-hd p.no { margin-bottom: 10px;}
	#column .article-hd p span { font-size: 14px;}
	#column .article-hd p time { font-size: 14px;}


	#column .article-ctn { padding: 20px 0 60px;}
	#column .main { margin-bottom: 20px;}
	#column .lead { margin-bottom: 20px;}
	#column .lead p { font-size: 14px;}
	#column .ctn p { font-size: 14px;}
	#column .article-ctn .btn-back a span { padding: 10px 0;}
}
@media (max-width: 481px) {
/*	#works .inner-sct { padding: 40px 0 0px;}*/
	
	#column .article-hd {}
	#column .article-hd h1 { margin-bottom: 12px; font-size: 18px; letter-spacing: 0.1rem;}
	#column .article-hd h1 span { font-size: 12px;}
	#column .article-hd p { font-size: 13px;}
	#column .article-hd p span { font-size: 12px;}
	#column .article-hd p time { font-size: 12px;}


	#column .article-ctn { padding: 20px 0 40px;}

	#column .lead p { font-size: 13px;}
	#column .ctn h2 { font-size: 16px; letter-spacing: 0.1rem;}
	#column .ctn h3 { padding: 8px 0; font-size: 14px; letter-spacing: 0.1rem;}
	#column .ctn p { font-size: 13px; letter-spacing: 0.05rem;}

	#column .article-ctn .btn-back a { font-size: 13px; letter-spacing: 0.05rem;}
	#column .article-ctn .btn-back a span { padding: 6px 0;}

}