/* CSS Document */

section#news dl{
	display: flex;
	align-items: center;
	font-size: 16px;
	margin: 20px auto;
	border-bottom: 1px solid #ddd;
	padding-bottom: 20px;
}
section#news dl dt{
	width: 19%;
}
section#news dl dd{
	width: 100%;
}

section#news dl span{
	color: #fff;
	display: inline-block;
	padding: 2px;
	font-size: 14px;
	max-width: 95px;
	width: 100%;
	text-align: center;
}

section#news dl .event span{
	background: #e09600;
}
section#news dl .product span{
	background: #1d5999;
}
section#news dl .company span{
	background: #23abe8;
}
section#news dl .recruit span{
	background: #4d9436;
}

ul.pageNav01 {
	margin		: 15px 0 10px;
	padding		: 10px 10px 5px;
	background	: #fff;
	text-align	: center;
}

	ul.pageNav01 li {
		display	: inline;
		margin	: 0 2px;
		padding	: 0;
	}
	
		ul.pageNav01 li span,
		ul.pageNav01 li a {
			display			: inline-block;
			margin-bottom	: 5px;
			padding			: 5px 13px;
			background		: #eeeff7;
			text-decoration	: none;
			vertical-align	: middle;
		}
		
		ul.pageNav01 li a:hover {
			color			: #000;
			background		: #ccf;
			border-color	: #00f;
		}

/*詳細ページ*/
#news_box{
	margin: 20px auto;
}

#date{
	margin-bottom: 10px;
}

em{
	color: #fff;
	display: inline-block;
	padding: 2px;
	font-size: 14px;
	max-width: 95px;
	width: 100%;
	text-align: center;
}

em#event{
	background: #e09600;
}
em#product{
	background: #1d5999;
}
em#company{
	background: #23abe8;
}
em#recruit{
	background: #4d9436;
}

.news_entry{
	padding: 15px;
	font-size: 16px;
}

.news_entry p{
	margin-bottom: 10px;
	line-height: 1.8;
}

.flex{
	display: flex;
	justify-content: space-between;
}

.flex > div:first-child{
	width: 41%;
}

.flex > div.thumbs{
	width: 55%;
	max-width: 100%;
}


.thumbs{
	max-width	: 400px;
	width	: 100%;
}

	.thumbs video{
		border-top		: 1px solid #69696a;
		border-bottom	: 1px solid #69696a;
		max-width: 350px;
		width: 100%;
	}
	.video {
		position: relative;
		width: 100%;
		padding-top: 56.25%;
	}

	.video iframe {
		position: absolute;
		top: 0;
		right: 0;
		width: 100%;
		height: 100%;
	}
@media screen and (max-width: 768px) {
	section#news dl{
		display: block;
	}
	
	section#news dl dt,
	section#news dl dd{
		width: 100%;
	}
	
	section#news dl dt{
		margin-bottom: 10px;
	}
	
	section#news dl span{
		margin-left: 10px;
	}
	
	.news_entry table td{
		display: block;
	}
	
	.flex{
		display: block;
	}
	
	.flex > div:first-child,
	.flex > div.thumbs{
		width: 100%;
	}
}

@media screen and (max-width: 478px) {
}