@charset "utf-8";

section {
	max-width:1080px;
	margin:0 auto;
}

.category_select { margin: 4em 0 0 0; }

.view_select { margin-top:2em; }
.view_select ul {
	display: flex;
	justify-content: center;
	align-items: center;
	align-content: center;
}

.view_select ul li {
	padding: 10px ;
}

.view_select ul li:not(:last-child) {
	background: url(../images/li_bg.png) calc(100% - 1px) 0px no-repeat;
	background-size: 1px 60px;
}

.view_select ul li img {
	opacity:0.2;
	padding-bottom:7px;
	cursor: pointer;
	margin:0 67px;
	height: 100%;
	max-height: 45px;
	transition: opacity 0.3s;
}

.view_select ul li img:hover,
.view_select ul li img.on {
	opacity:1;
}

.view_wrapper {
	min-height:700px;
	margin-top:4em;
}
.view_wrapper.text { display: none; }
.view_wrapper.text li {
	display: flex;
	padding:20px;
	border-bottom:1px solid #ccc;
}

.view_wrapper.text li h3 {
	width: 210px;
	font-weight: normal;
}
.view_wrapper.text li p {
	width:calc(100% - 210px);
	text-align: left;
}

.grid { /* margin:0 0 0 5px;*/ }
.grid img { width:100%; }
.grid-item {
	width:calc((100% - 20px)/3);
	margin-bottom:10px;
}
.grid-item .info {
	display: none;
	position:absolute;
	left:0;
	top:0;
	width:100%;
	height:100%;
	background:rgba(255,255,255,0.95 );
	border:2px solid #000;
	justify-content: center;
	align-items: center;
	align-content: center;
	flex-direction: column;
	box-shadow: 0 5px 10px #ccc;
}
.grid-item a { text-decoration: none; }

.YT {
	position: relative;
	width: 100%;
	padding-top: 56.25%;
}
.YT iframe {
	position: absolute;
	top: 0;
	right: 0;
	width: 100% !important;
	height: 100% !important;
}
table {
	width: calc(100% - 210px);
	text-align: left;
}
table td { vertical-align: top; }
table td:first-child { width: 5em; }
@media all and (min-width: 0px) and (max-width: 736px) {
	section {
		width:100%;
		margin:0 auto;
	}

	.grid { margin:0 0 0 10px; }
	.grid-item {
		width:calc(50% - 10px);
		margin-bottom:10px;
	}
	.view_wrapper.text li h3 { width: 20%; text-align: left; }
	.view_wrapper.text li p, table { width: 80%; }
}