@charset "utf-8";
#wrap{opacity: 1;}
footer{background-color: #000000;padding: 0 0 20px 0;}

h1{
	position: absolute;
	top: 5px;
	left: 5px;
	width: 20%;
	max-width: 180px;
	z-index: 10;
}

/* media */
#media{
	position: relative;
	margin: 0 auto;
	padding: 50px 0 60px 0;
}
#media .mediaWrap{
	position: relative;
	margin: 0 auto;
	width: 100%;
}
#media h2{
	position: relative;
	margin: 20px auto 40px auto;
	width: 100%;
	max-width: 640px;
}
#media ul.tab{
	position: relative;
	margin: 0 auto;
	width: calc(100% - 30px);
	max-width: 600px;
	gap: 0 6px;
}
#media ul.tab li{
	position: relative;
	margin: 0;
	width: calc(33.33% - 7px);
	background-color: #544D40;
	cursor: pointer;
	text-align: center;
}
#media ul.tab li.active{background-color: #feb534;color: #000000;}

#media ul.listWrap{
	margin: 20px auto 0 auto;
	width: calc(100% - 30px);
	max-width: 1000px;
}
#media ul.listWrap li{
	position: relative;
	margin: 0 auto;
	padding: 15px 0;
	border-bottom: solid 1px #888888;
	display: none;
}
#media ul.listWrap li.active{
	display:-webkit-box;
	display:-webkit-flex;
	display:-ms-flexbox;
	display:flex;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	gap: 8px 15px;
}
#media ul.listWrap li div{
	position: relative;
	margin: 0;
}
#media ul.listWrap li div.date{width: 6em;}
#media ul.listWrap li div.onair{width: calc(100% - 6em - 15px);}
#media ul.listWrap li div.text{width: 100%;}
#media ul.listWrap li div.text a{text-decoration: underline;}

/* ----- pc ----- */
@media screen and (min-width: 799px) {
	footer{padding: 20px 0 30px 0;}

	/* media */
	#media{padding: 120px 0 80px 0;}
	#media h2{margin: 20px auto 60px auto;}
	#media ul.tab li{padding: 5px 0;font-size: 110%;}
	#media ul.tab li:hover{background-color: #9F7E44;color: #000000;cursor: pointer;transition: all .3s ease-out;}

	#media ul.listWrap{margin: 50px auto 0 auto;}
	#media ul.listWrap li{padding: 30px 10px;}
	#media ul.listWrap li div.date{width: 6em;}
	#media ul.listWrap li div.onair{width:calc(10em - 15px);}
	#media ul.listWrap li div.text{width: calc(100% - 6em - 15px);}
	#media ul.listWrap li.tv div.text{width: calc(100% - 16em - 15px);}

}