html,body{
	font-family: m-plus-1p, sans-serif;
	font-weight: 400;
	font-style: normal;
	margin:0;
	padding:0;
}
body{
	background:#548687;
}

img{
	max-width:100%;
	width:auto;
	vertical-align:bottom;
}
header{
	position:relative;
	background:#000;
	width:100%;
	padding:10px 0;
}
	header .contents{
		display:flex;
		flex-wrap: wrap;
		justify-content: space-between;	
		align-items: center;
		max-width:1200px;
		width:100%;
		margin:auto;
	}
		header img{
			max-height:50px;
		}
		header .contents p{
			font-size:26px;
		}
			header .contents p a{
				text-decoration:none;
				color:#C5E99B;
			}
nav{
	background:#8FBC94;
	padding:5px 0;
}
nav ul{
	display:flex;
	flex-wrap:wrap;
	justify-content: center;
	align-items:center;
	list-style:none;
}
	nav ul li{
		color:#FFF;
	}
		nav ul li a{
			color:#FFF;
		}
		nav ul li:after{
			content:"/";
			margin:0 20px;
		}
		nav ul li:last-child:after{
			content:"";
			margin:0 20px;
		}
main{
	max-width:1200px;
	width:100%;
	margin:auto;
	padding:0;
}
	main .mainimage{
		background:rgba(255,255,255,0.5);
	}
	main .contents{
		border:#8FBC94 1px solid;
		position:relative;
		display:flex;
		justify-content: space-between;
	}
		main .sidebar{
			background:#000;
			width:30%;
		}
			main .sidebar ul{
				display:flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				list-style: none;
				padding:30px 0 30px 0;
			}
				main .sidebar ul li,main .sidebar ul li a{
					text-decoration: none;
					color:#FFF;
				}
				main .sidebar ul li{
					border-bottom:#FBFFB9 1px solid;
					text-align:center;
					width:50%;
					padding:10px 0;
				}
		main .maincontents{
			background:#FFFFFF;
			width:70%;
			padding:40px 0 80px 0;
		}
			main .maincontents h2{
				color:#8FBC94;
				font-size:28px;
				text-align:center;
			}
				main .maincontents h2 span{
					display:block;
					font-size:12px;
					font-weight:normal;
					color:#795524;
				}
			main .maincontents h3{
				text-decoration:underline;
			}
			main .maincontents h3 span{
				font-size:.8em;
				color:#fa6f8e;
			}
			main .maincontents .news{
				background:#FFF;
				border:#8FBC94 1px solid;
				text-align:center;
				width:75%;
				height:100%;
				margin:auto;
			}
				main .maincontents .news hr{
					border:none;
					border-bottom:#8FBC94 1px solid;
					width:90%;
				}
				main .maincontents .news p.table{
					position:relative;
					border-left: 3px solid #8FBC94;
					border-right: 3px solid #958fb6;
					width:90%;
					margin:20px auto;
					padding:10px;
				}
				main .maincontents .news p span{
					font-size:1.2em;
					color:#8FBC94;
				}
				main .maincontents .news p.table span{
					display:block;
					font-size:28px;
					font-weight:bold;
					color:#000;
				}
					main .maincontents .news p.table:before,main .maincontents .news p.table:after{
						content:"";
						position:absolute;
						top:0;
						left:0;
						background: -webkit-gradient(linear, left top, right bottom, from(#8FBC94), to(#958fb6));
						width:100%;
						height:3px;
					}
						main .maincontents .news p.table:after{
							top:auto;
							bottom:0;
						}
			main .maincontents .member{
				text-align:center;
				width:75%;
				height:100%;
				margin:auto;
			}
				main .maincontents .member ul{
					display:flex;
					flex-wrap: wrap;
					flex-direction: row;
					justify-content: space-between;
					list-style:none;
					padding:0 20px;
				}
				main .maincontents .member ul li{
					width:calc(100%/3 - 20px);
					margin:0 10px;
				}
				main .maincontents .member ul li img{
					width:100%;
					height:240px;
					object-fit: cover;
				}
			main .maincontents .access{
				text-align:center;
				width:75%;
				height:100%;
				margin:auto;
			}
				main .maincontents .access ul{
					display:flex;
					flex-wrap: wrap;
					flex-direction: row;
					justify-content: space-between;
					list-style:none;
					padding:0 20px;
				}
			main .maincontents .menu{
				text-align:center;
				width:75%;
				height:100%;
				margin:auto;
			}
			main .maincontents .menu h3{
				background:#f3aed6;
				color:#FFF;
				font-size:22px;
				text-align:center;
				text-decoration: none;
				padding:10px 0;
			}
				main .maincontents .menu ul{
					list-style:none;
					display:flex;
					flex-wrap:wrap;
					padding:0;
				}
					main .maincontents .menu ul li{
						width:calc(50% - 20px);
						padding:10px;
					}
						main .maincontents .menu ul li h4{
							border-bottom:#f3aed6 2px solid;
							text-decoration: none;
							color:#f3aed6;
						}
						main .maincontents .menu ul li img{
							width:100%;
							height:240px;
							object-fit: cover;
						}
						main .maincontents .menu ul li p{
							text-align:right;
							margin:0;
						}
						main .maincontents .menu ul li p.ex{
							text-align:left;
							color:#888;
							font-size:12px;
						}


footer{
	background:#000;
	text-align:center;
	color:#FFF;
	font-size:.9em;
	margin-top:40px;
	padding:10px 0;
}

@media screen and (max-width:750px){
	header .contents{
		justify-content: center;	
	}
	header .contents img{
		width:75%;
		margin:auto;
	}
	header .contents a img{
		width:100%;
		margin:auto;
	}
		main .sidebar{
			display:none;
		}
		main .maincontents{
			width:100%;
			padding:40px 0 80px 0;
		}
			main .maincontents .news,main .maincontents .member,main .maincontents .menu,main .maincontents .access{
				width:95%;
			}

				main .maincontents .member ul li{
					width:calc(100%/2 - 20px);
					margin:0 10px;
				}
	main .maincontents .member ul{
		padding:0;
	}
	main .maincontents .menu ul li img{
		height:180px;
	}

}