@charset "utf-8";

#works { position: relative; z-index: 4;}
#works .inner-sct { position: relative; padding: 40px 0px 100px; z-index: 2;}
@media (max-width: 481px) {
	#works .inner-sct { padding: 20px 0px 50px;}
}
#works .article-list { position: relative; width: 88%; max-width: 1048px; margin: 0 auto 60px; padding: 20px 0; z-index: 2;}
#works .article-list ul { font-size: 0;}
#works .article-list ul li { display: inline-block; width: 33.33334%; padding: 20px 24px; vertical-align: top;}
#works .article-list ul li a { position: relative; width: 100%; color: #000; text-decoration: none;}
#works .article-list ul li a dl { position: relative; width: 100%;}
#works .article-list ul li a dl dt { position: relative; margin-bottom: 20px; transition: 0.3s linear;}
#works .article-list ul li a dl dt:after { content: ''; display: block; width: 100%; height: 100%; background: #4172c4;
 clip-path: polygon(14% 0, 86% 0%, 100% 20%, 100% 80%, 86% 100%, 14% 100%, 0% 80%, 0% 20%); transition: 0.3s ease;
 position: absolute; left: 8px; top: 8px; z-index: 1;
}
#works .article-list ul li a dl dt span{ position: relative; display: block; width: 100%; background: #c7d2ee;
 clip-path: polygon(14% 0, 86% 0%, 100% 20%, 100% 80%, 86% 100%, 14% 100%, 0% 80%, 0% 20%); overflow: hidden; z-index: 2;
}
#works .article-list ul li a dl dt img { position: relative; width: 100%; transition: 0.3s linear;}
#works .article-list ul li a dl dd { font-size: 16px; letter-spacing: 0.04rem; text-align: left;}
#works .article-list ul li a dl dd.update time { color: #787878; font-size: 18px;}
#works .article-list ul li a dl dd span { display: block; font-size: 24px;}
#works .article-list ul li a:hover dl dt { opacity: 0.8;}
#works .article-list ul li a:hover dl dt:after { left: 4px; top: 4px;}
#works .article-list ul li a:hover dl dt span img { transform: scale(1.08);}

#works .hex1 { width: 180px; right: -60px; top: 5%;}
#works .hex2 { width: 160px; left: -40px; bottom: 18%;}
#works .hex2 .stroke:after { background: #e6edf7;}
@media (max-width: 1281px) {
	#works .hex1 { width: 140px; right: -80px; top: 12%;}
}
@media (max-width: 1001px) {
	#works:before { height: 34vw;}
	#works .article-list ul li { padding: 10px 14px;}
	#works .article-list ul li a dl dt:after { left: 5px; top: 5px;}
	#works .article-list ul li a dl dd { font-size: 14px;}
	#works .article-list ul li a dl dd.update time { font-size: 14px;}
	#works .article-list ul li a dl dd span { font-size: 20px;}
	#works .hex2 { width: 120px; left: -40px;}
}
@media (max-width: 801px) {
	#works:before { height: 42vw;}
	#works .ttl { padding: 4vw 0;}
	#works .article-list ul li { width: 50%; padding: 15px;}
	#works .article-list ul li a dl dt { margin-bottom: 12px;}
	#works .hex1 { display: none; top: 10%;}
}
@media (max-width: 641px) {
	#works .hex1 { width: 120px; right: -40px;}
	#works .hex2 { width: 100px; left: -20px;}
}
@media (max-width: 481px) {
	#works:before { height: 160px;}
	#works .inner-sct { padding: 40px 0px;}
	#works .ttl { margin-bottom: 10px;}
	#works .article-list { width: 92%; margin-bottom: 20px; padding: 0 0 20px;}
	#works .article-list ul li { padding: 6px 10px 18px;}
	#works .article-list ul li a dl dt:after { left: 3px; top: 3px;}
	#works .article-list ul li a dl dd { font-size: 12px;}
	#works .article-list ul li a dl dd.update time { font-size: 12px;}
	#works .article-list ul li a dl dd span { font-size: 16px;}
	#works .hex1 { width: 80px;}
	#works .hex2 { width: 60px; bottom: 40px;}
}


#works .ctn-flex { display: flex; justify-content: space-between; width: 90%; max-width: 1120px; margin: 0 auto; padding: 40px 0;}
#works .article-ctn { width: 66%;}
#works .side-ctn { width: 28%;}
#works .article-hd { padding-bottom: 20px; border-bottom: solid 2px #4072c3; font-weight: 700; line-height: 1.4;}
#works .article-hd p { color: #787878; font-size: 18px;}
#works .article-hd h2 { font-size: 26px;}
#works article { }
#works article figure {padding-top: 30px;}
#works article figure img { max-width: 100%;}
#works article .txt { padding: 30px 0 40px;}
#works article .txt p { font-size: 18px; letter-spacing: 0.1rem;}

#works .side-ctn h4 { position: relative; margin-bottom: 20px; color: #4072c3; font-size: 28px; font-weight: 700; letter-spacing: 0.1rem; line-height: 1; text-align: center;}
#works .side-ctn h4:after { content: ''; display: block; width: 100%; height: 2px; background: #4072c3;
 position: absolute; left: 0; top: 50%;
}
#works .side-ctn h4 span { position: relative; display: inline-block; padding: 0 10px; background: #fff; z-index: 2;}
#works .side-ctn ul { width: 100%; max-width: 300px; margin: 0 auto;}
#works .side-ctn ul li { margin-bottom: 30px;}
#works .side-ctn ul li:last-child { margin-bottom: 0px;}
#works .side-ctn ul li a { position: relative; width: 100%; color: #000; text-decoration: none;}
#works .side-ctn ul li a dl { position: relative; width: 100%;}
#works .side-ctn ul li a dl dt { position: relative; margin-bottom: 20px; transition: 0.3s linear;}
#works .side-ctn ul li a dl dt:after { content: ''; display: block; width: 100%; height: 100%; background: #4172c4;
 clip-path: polygon(14% 0, 86% 0%, 100% 20%, 100% 80%, 86% 100%, 14% 100%, 0% 80%, 0% 20%); transition: 0.3s ease;
 position: absolute; left: 8px; top: 8px; z-index: 1;
}
#works .side-ctn ul li a dl dt span{ position: relative; display: block; width: 100%; background: #c7d2ee;
 clip-path: polygon(14% 0, 86% 0%, 100% 20%, 100% 80%, 86% 100%, 14% 100%, 0% 80%, 0% 20%); overflow: hidden; z-index: 2;
}
#works .side-ctn ul li a dl dt img { position: relative; width: 100%; transition: 0.3s linear;}
#works .side-ctn ul li a dl dd { font-size: 16px; letter-spacing: 0.04rem; line-height: 1.4; text-align: left;}
#works .side-ctn ul li a dl dd.update time { color: #787878; font-size: 16px;}
#works .side-ctn ul li a dl dd span { display: block; font-size: 20px;}
#works .side-ctn ul li a:hover dl dt { opacity: 0.8;}
#works .side-ctn ul li a:hover dl dt:after { left: 4px; top: 4px;}
#works .side-ctn ul li a:hover dl dt span img { transform: scale(1.08);}
@media (max-width: 1001px) {
	#works article .txt p { font-size: 16px;}
	#works .side-ctn ul li a dl dd.update time { font-size: 14px;}
	#works .side-ctn ul li a dl dd span { font-size: 18px;}
}
@media (max-width: 801px) {
	#works .ctn-flex { display: block; padding: 20px 0;}
	#works .article-ctn { width: 100%; margin: 0 auto 50px;}
	#works .side-ctn { width: 100%;}
	#works article .txt p { font-size: 14px;}
}
@media (max-width: 481px) {
	#works .ctn-flex { padding: 0 0 20px;}
	#works .article-ctn { margin: 0 auto 120px;}
	#works .article-hd { padding-bottom: 12px;}
	#works .article-hd h2 { font-size: 21px;}
	#works .article-hd p { font-size: 13px;}
	#works .article-hd p time { font-size: 13px; letter-spacing: 0.05rem;}
	#works article figure {padding-top: 20px;}
	#works article .txt { padding: 20px 0px 30px;}
	#works article .txt p { font-size: 13px; letter-spacing: 0.05rem; text-align: justify;}
	#works .side-ctn h4 { font-size: 20px;}
	#works .side-ctn h4:after { max-width: 250px; height: 1px; left: 50%; transform: translateX(-50%);}
	#works .side-ctn ul { max-width: 250px;}
	#works .side-ctn ul li a dl dt { margin-bottom: 12px;}
	#works .side-ctn ul li a dl dt:after { left: 4px; top: 4px;}
	#works .side-ctn ul li a dl dd { font-size: 13px;}
	#works .side-ctn ul li a dl dd span { font-size: 14px;}
	#works .side-ctn ul li a dl dd.update time { font-size: 12px;}
}