/*
Newpost Catch StyleSheet

With the version up of the plug-in, so will be overwritten "style.css" file each time,
I think how to directly edit the "style.css" file and how would you or declined.
If you wish to apply a CSS style on its own,
In the "/wp-content/themes/theme directory/css/" as you please create a "newpost-catch.css".
Please the name of the file to create and "newpost-catch.css". The other is the file name, does not apply.

*/
#npcatch {
	margin: 0;
	padding: 0;
	width: 100%;
}


#npcatch li{
	overflow:hidden;
	clear:both;
	width:calc(100%-20px);
	-webkit-border-radius: 10px;
}

#npcatch img{
	float:left;
	padding:0px ;
	-webkit-border-top-left-radius: 10px;
	-webkit-border-bottom-left-radius: 10px;
}

#npcatch .title{
	width:calc(100% - 150px) ;
	float:left;
	padding:0px;
}

#npcatch li:hover{
}

#npcatch li:hover .title{
}

#npcatch li:hover .title a{
}

#npcatch li:hover .date{
}
.event_info_span {
	background-image: linear-gradient(0deg, #FFC107 0%, #ff8b5f 100%);
}
.check_info_span {
	background-image: linear-gradient(180deg, #005FFF 0%, #2C7CFF 100%);
}
.otayori_span {
	background-image: linear-gradient(180deg, #4b0082 0%, #0050be 100%);
}

@media screen and (max-width: 1100px) {
	#npcatch .title{
		font-size:14px;
	}
}
@media screen and (max-width: 1000px) {
	#npcatch .title{
		font-size:13px;
	}
}
@media screen and (max-width: 950px) {
	#npcatch .title{
		font-size:11px;
	}
}
@media screen and (max-width: 900px) {
	#npcatch .title{
		font-size:10px;
	}
@media screen and (max-width: 850px) {
	#npcatch .title{
		font-size:8px;
	}
}
@media screen and (max-width: 800px) {
	#npcatch .title{
		font-size:20px;
	}
}
@media screen and (max-width: 500px) {
	#npcatch .title{
		font-size:18px;
	}
}
@media screen and (max-width: 450px) {
	#npcatch .title{
		font-size:17px;
	}
}
@media screen and (max-width: 400px) {
	#npcatch .title{
		font-size:16px;
	}
}
@media screen and (max-width: 350px) {
	#npcatch .title{
		font-size:14px;
	}
}