@charset "UTF-8";


/*-----------------------------------------------------------
	アイテム
-----------------------------------------------------------*/
.itemBox{
	display:flex;
	flex-wrap: wrap;
	/*justify-content: space-between;*/
	justify-content: flex-start;
}
.itemBox{
	/*width: 1280px;*/
	margin: 0 auto; 
}

@media only screen and (max-width: 1680px) {
.itemBox{
	/*width: 1280px;*/
	margin: 0 auto; 
}
}

@media only screen and (max-width: 1400px) {
.itemBox{
	/*width: 1280px;*/
	margin: 0 auto; 
}
}
@media only screen and (max-width: 1024px) {
.itemBox{
	width: 96%;
	margin: 0 2%; 
	/*display:block;*/
}
}
a.item{
	margin:15px 15px 25px;
	
	display:block;
	/*border:1px solid #eee;*/
	position:relative;
	background-color:#fff;
	border-radius: 6px;
	overflow:hidden;
	box-shadow: 1px 1px 3px 1px rgba(0,0,0,0.1);
	transform:translate(0,0);
	transition:.3s all;
	
}
@media screen and (max-width: 1024px){
a.item{
	margin:15px 15px 25px;
/*	display:flex;
	flex-wrap: wrap;*/
}
}
@media screen and (max-width: 640px){
a.item{
	margin:15px 5px 25px;
/*	display:flex;
	flex-wrap: wrap;*/
}
}
a.item:not(:last-child){
	/*border-right:none;*/
}
a.item.w{
	width: calc((100% / 3) - 30px);
}
@media screen and (max-width: 1024px){
a.item.w{
	width: calc((100% / 2) - 30px);
}
}
@media screen and (max-width: 640px){
a.item.w{
	width: calc((100% / 2) - 10px);
}
}

a.item:hover{
	/*background-color:#fcfcfc;
	border:1px solid #319dd0;*/
	transform:translate(0,-5px);
	box-shadow: 1px 1px 5px 2px rgba(0,0,0,0.4);
}



.item .detail{
	padding:5px 14px 10px;
}
@media only screen and (max-width: 640px) {
.item .detail{
	padding:10px;
}
}



.item h3{
	font-size:90%;
	margin-top: 10px;
	margin-bottom: 5px;
	/*border-bottom: 1px solid #319dd0;*/
	font-weight:bold;
	line-height:1.5;
	/*height:2em;*/
}
/*a.item:hover h3{
	color: #319dd0;
}*/

@media screen and (max-width: 1024px){
.item h3{
	margin-top: 0;
	margin-bottom:0;
	font-size: 80%;
	line-height:1.4;
	/*padding: 0.3em 0.0em;*/
	padding:0;

}
}
@media screen and (max-width: 640px){
.item h3{
	font-size: 70%;

}
}


.item .category{
	position:absolute;
	left:-6px;
	top:-12px;
	font-size:70%;
	/*border:1px solid #ccc;*/
	display:inline-block;
	margin:0;
	padding: .2em .6em .2em 1.8em;
	background-color:#319dd0;
	/*background-color:#333;*/
	color:#fff;
}

.item .category::before{
	font-family: 'Font Awesome 5 Free';
	font-size: 80%;
	font-weight: 900;
	position: absolute;
	top: 50%;
	left: .6em;
	content:"\f07b";
	transform: translateY(-50%);
	color:#fff;
}

.item .category::after{
	content:"";
	position: absolute;
	bottom:-6px;
	left:0;
	border-top: 6px solid #999;
	border-left: 6px solid transparent;
}



.item p.date{
	margin:0;
}
.item time{
	font-size:60%;
	color:#666;
}
.item time.createdDate,
.item time.updatedDate{
	position:relative;
	padding: .5em .6em .5em 1.8em;
}
@media screen and (max-width: 1024px){
.item time.createdDate,
.item time.updatedDate{
	padding:0 0 0 1.8em;

}
}
.item time.createdDate::before,
.item time.updatedDate::before{
	font-family: 'Font Awesome 5 Free';
	font-size: 80%;
	font-weight: 900;
	position: absolute;
	top: 50%;
	left: .6em;
	content:"\f304";
	transform: translateY(-50%);
	color:#319dd0;
}

.item time.createdDate::before{
	content:"\f304";
}
.item time.updatedDate::before{
	content:"\f2ea";
}
.item p.text{
	font-size:70%;
	color:#666;
	margin:5px 0;
	position:relative;
	line-height:1.6;
	/*height:3em;*/
	overflow:hidden;
}
@media only screen and (max-width: 1024px) {
.item p.text{
	display:none;
}
}

.item2 p.text::after{
	content: "";
	background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%, #fff 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, #fff 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	height:1.5em;
	width:100%;
	position:absolute;
	left:0;
	bottom:0;
}


.item p.more{
	background-color:#319dd0;
	border-radius: 10px;
	font-size:10px;
	line-height:14px;
	padding:3px 10px;
	color:#fff;
	margin:5px 0 0;
	display:inline-block;	
}

.itemBtn{
	margin:0 auto 50px;
	float:right;
}
.itemBtn a{
	background-color:#319dd0;
	color:#fff;
	padding:10px;
	border-radius: 10px;
}