@charset "utf-8";

#sekoutop{
	display:flex;
	flex-wrap:wrap;
	max-width:1200px;
	margin:0 auto;
}

.tile{
	width: 30%;
	margin: 0 1.6% calc(20px + 1vw);
	display:none;
}
.tile a{
	display:inline-block;
	width:100%;
	height: calc(70px + 20vw);
	max-height: 315px;
}
.tile img{
	width:100%;
	/* border:1px solid #ddd; */
}
.black{
	color:#333;
}
#eventtop .tile{
	width: 28%;
	margin: 20px 2.5% 20px;
	float:left;
}

/*6つずつ出す関係*/
/*
.tile:nth-child(n+7){
	display:none;
}
*/


.event_status,.event_caption{
	text-align:center;
}
.event_caption{
	margin-bottom:10px
}

.sekou_caption,.event_caption{
	display:block;
	text-align:left;
	font-size: 85%;
	/* height:3em; */
	line-height: 140%;
	overflow:hidden;
	margin:0;
	padding:4px 0 0;
}
#eventtop .imgbox{
	width:100%;
	height:225px;
	overflow: hidden;
	position: relative;
	background-color:#eee;
	border-radius:4px;
}
#voicetop .imgbox{
	width:100%;
	height: 20vw;
	max-height: 290px;
	overflow: hidden;
	position: relative;
	background-color:#eee;
	border-radius:4px;
}
#sekoutop .imgbox{
	width:100%;
	height: 225px;
	overflow: hidden;
	position: relative;
	background-color:#eee;
	border-radius:4px;
}
#r_sekoutop .imgbox{
	width:100%;
	height:180px;
	overflow: hidden;
	position: relative;
	background-color:#eee;
	border-radius:4px;
}
.imgbox img{
  position: absolute;
  width: auto;
  height: auto;
  max-width: 96%;
  max-height: 96%;
  left: 50%;
  top: 50%;
  -webkit-transform: translate3d(-50%, -50%, 0);
          transform: translate3d(-50%, -50%, 0);
}
.event_status{
	margin-top:7px;
	font-size:80%
}

.ukok,.ukno{
	display:inline-block;
	padding:3px 10px 2px;
	margin-right:10px;
}
.ukok{
	color:#f8b;
	background-color:#fff;
	border:1px solid #f8b;
}
.ukno{
	color:#fff;
	background-color:#999;
}
.ukok:hover{
	background-color:#f8b;
	color:#fff;
}

.event_caption span:first-child{
	margin-right:10px;
}

.thisweekend{
	display:inline-block;
	color:#fff;
	font-size:85%;
	font-weight:bold;
	letter-spacing:1px;
	padding:2px 6px 0;
	margin: 0;
	border-radius:3px;
	background-color:#f8b;
}
.sekou_img_tags{
	max-width:1150px;
	margin:0 auto;
}
.sekou_img_tags a{
	display:inline-block;
	background-color:#555;
	color:#fff;
	font-size:calc(10px + 0.5vw);
	border-radius:3px;
	padding: 4px 20px 0;
	height:calc(24px + 0.7vw);
	border: none;
	margin:0 0.4em 0.5em 0;
}
.tag_search{
	display:inline-block;
	vertical-align:0.1em;
}
.tag_input{
	height:calc(24px + 0.7vw);
	border:2px solid #555;
	border-radius:3px 0 0 3px;
	padding-left:4px;
}
.tag_image{
	height:calc(24px + 0.7vw);
	vertical-align:bottom;
	border-radius:0 3px 3px 0;
}

@media only screen and (max-width: 650px) {
	.tile{
		width:46%;
		margin:5px 1.5%;
		float:left;
	}
	#sekoutop{
		display:flex;
		flex-wrap:wrap;
	}
	#sekoutop .tile{
		width:49%;
		margin: 0 2% 30px 0;
	}
	#sekoutop .tile:NTH-CHILD(2N){
		margin: 0 0 30px 0;
	}

	
	#sekoutop .tile img{
		width:100%;
	}
	.title{
		font-size:70%;
	}
	.sekou_caption{
		font-size:80%;
		padding:0 6px;
	}
	.imgbox{
		width:100%;
		height:100px;
		overflow: hidden;
		position: relative;
		background-color:#eee;
		border-radius:4px;
	}
	#voicetop .imgbox{
		background:none;
		height: 66vw;
	}
	#eventtop .tile{
		display:flex;
		width: 98%;
		float:left;
		margin:0 2.5% 30px;
		/* text-align:center; */
	}
	#eventtop .tile:last-child{
		margin:0 2.5% 12px;
	}
	#eventtop .tile > div{
	    width:50%;
	    padding-right: 3%;
	}
	.tile img{
		/* width: 46%; */
		margin-right:12px;
		float:left;
	}
	.event_status,.event_caption{
		text-align:left;
	}
	.event_status{
		font-size: 75%;
	}
	.event_status span{
		font-size:120%
	}
	.event_caption{
		margin: 6px 0 10px;
		font-weight:bold;
		/* font-size:90%; */
	}
	.tile a{
		height: 60vw;
	}
}