@charset "utf-8";


.media_box {
	clear: both;
	padding-right: 60px;
	padding-left: 60px;
	margin-bottom: 60px;
}

.madia_lead {
	font-size: 15px;
	text-align: left;
	line-height: 1;
	margin-bottom: 30px;
}
#sort {
	margin-bottom: 20px;
}

li  {
	display: inline;
	position: relative;
	margin-right: 40px;
	padding-left: 13px;
	font-size: 15px;
	line-height: 1;
}

li:hover{
	cursor: pointer;
}

#sort li:before{
	counter-increment: list;
	content: "";
	display: block;
	position: absolute;
	left: 0px;
	height: 0;
	width: 0;
	border-top: 4px solid transparent;
	border-bottom: 4px solid transparent;
	border-left: 7px solid #9E9E9E;
	top: 50%;
	-moz-transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
	-o-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
}

.media_table td {
	vertical-align: middle;
	padding-top: 15px;
	padding-bottom: 15px;

}



.media_table tr {
	border-top: 1px solid #CCCCCC;
}
.media_table tr:last-of-type {
	border-bottom: 1px solid #CCCCCC;
}


.media_date {
	font-family: humnst777_cn_btregular, sans-serif;
	font-size: 15px;
	width: 70px;
}

.media_img {
	width: 160px;
	text-align: center;
}
.media_img img {
	width: auto;
	object-fit: cover;
	height: 100px;
	max-width: 70%;
}
.madia_txt {
	text-align: left;
	width: auto;
}



.media_name {
	margin: 0;	/* デフォルトCSS打ち消し */
	position: relative;
	margin-bottom: 20px;
	font-size: 15px;
	text-align: left;
	line-height: 1;
}

.media_name:before {
    content:  '';
    width: 30px;
    height: 1px;
    background-color: #000;
    display:  block;
    position:  absolute;
    left:  0;
    bottom: -12px;
}

.media_title {
	font-size: 14px;
	line-height: 1.5;
	text-align: left;
	color: #9F8D33;
}
.img_border {
	border: 1px solid #CCCCCC;
}



.画像の拡大-----------{}

/* 親要素をrelativeに */


#zoomback {

/* 絶対位置に配置 */
position:fixed;
top:0px;
left;0px;

/* 画面いっぱいに */
width:100vw;
height:100vh;

/* 背景を少し透過 */
background-color:rgba(0,0,0,0.8);

/* 中のimgを中央揃え */
display:flex;
justify-content:center;
align-items:center;
	
	z-index: 5;
	display:none;

}

.img_zoom:hover{
	cursor: pointer;
}

/* 拡大画像のサイズを調整 */
#zoomimg {
	max-height: 90%;
}


/* 動き */

.deka {

animation:deka 0.3s ease-out;
}

@keyframes deka {

from {

transform:scale(0);
}

}