@import url('sns_modal.css');

.sns_wrap{padding-bottom:100px;padding-top:50px}
.sns_tab{padding-bottom:60px}
.sns_tab li{position:relative;margin-right:60px}
.sns_tab li:last-child{margin-right:0}
.sns_tab li a{display:block;font-weight:400;font-size:20px;color:#fff}
.sns_tab li::before{content:'';display:block;position:absolute;top:0;right:-30px;width:1px;height:20px;background-color:#e00c43}
.sns_tab li:last-child::before{display:none}
.sns_tab li.on a, .sns_tab li:hover a{font-weight:700;color:#e00c43}

.sns_list{max-width:1180px;margin:0 auto}
.sns_list li{position:relative;width:280px;margin-right:20px;margin-bottom:20px}
.sns_list li.yt{width:360px;margin-right:40px;margin-bottom:40px}
.sns_list li.ig:nth-child(4n){margin-right:0}
.sns_list li.blog:nth-child(4n){margin-right:0}
.sns_list li.yt:nth-child(3n){margin-right:0}
.sns_list li a{display:block}
.sns_list li a:before{content:'';display:block;width:100%;padding-top:100%}
.sns_list li.yt a:before{content:'';display:block;width:100%;padding-top:56.25%}
.sns_list .list_img{position:absolute;top:0;left:0;width:100%;height:100%;background-color:#999}
.sns_list .text_wrap{opacity:0;position:absolute;top:0;left:0;width:100%;height:100%;padding:130px 30px 0;box-sizing:border-box;transition:0.5s}
.sns_list li:hover .text_wrap{opacity:1}
.sns_list .text_wrap.ig_bg{background-image:url('../img/sns_insta_bg.png')}
.sns_list .text_wrap.blog_bg{background-image:url('../img/sns_blog_bg.png')}
.sns_list .list_ttl{display:block;width:100%;padding-bottom:8px;font-weight:500;font-size:18px;letter-spacing:-0.025em;line-height:156%;color:#fff}
.sns_list .list_text{display:block;height:76px;font-size:16px;letter-spacing:-0.025em;line-height:162%;color:#fff;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
word-wrap:break-word;
}
.sns_list .sns_ico{position:absolute;top:40px;left:30px}

.load_more{display:block;width:200px;height:70px;margin:20px auto 0;background:#e00c43;line-height:70px;font-weight:700;font-size:1.0625rem;letter-spacing:0.03em;color:#fff;text-align:center}

@media screen and (max-width:1260px){
	.sns_list .img{height:280px}
}
@media screen and (max-width:900px){
	.sns_list{width:94%}
	.sns_list > li{width:47.9%;margin-bottom:20px}
}
@media screen and (max-width:640px){
	.sns_list .img{height:180px}
	.sns_title{padding-bottom:17px;font-size:1rem}
	.blog_title{padding-bottom:17px}
	.sns_ico img{width:35px}

	.load_more{width:180px;height:50px;line-height:50px;font-size:0.875rem}
}
@media screen and (max-width:500px){
	.sns_list > li{width:100%;margin:0 0 20px}
	.sns_list .img{height:300px}
}