/******** Initialize ********/

	body {
		width: 100%;
		line-height: 1.2em;
		padding: 0;
		margin: 0;
		font-family: -apple-system, BlinkMacSystemFont, Roboto, "Segoe UI", "Helvetica Neue", HelveticaNeue, YuGothic, "Yu Gothic Medium", "Yu Gothic", Verdana, Meiryo, sans-serif;
		font-size: 16px;
	}

	ul {
		list-style: none;
		padding: 0;
		margin: 0;
	}

	.clickable:hover {
		opacity: 0.8;
	}
	.clickable:active {
		opacity: 0.6;
	}

	.br {
		display: none;
	}

/******** Structures ********/

	#container {
		max-width: 600px;
		height: auto;
		box-sizing: border-box;
		padding: 0;
		margin: 0 auto;
	}

	#header {
		float: left;
		width: 100%;
		height: auto;
		box-sizing: border-box;
		padding: 20px 20px 0 20px;
		margin: 0;
	}



	#navigation {
		float: left;
		width: 100%;
		height: auto;
		box-sizing: border-box;
		padding: 20px 20px 0 20px;
		margin: 0;
	}

	#navigation ul {
		float: left;
		width: 100%;
		height: auto;
		box-sizing: border-box;
		list-style: none;
		padding: 0;
		margin: 0;
	}

	#navigation li {
		float: left;
		width: 23%;
		height: auto;
		box-sizing: border-box;
		margin: 0 1%;
	}

	#navigation li a {
		display: block;
		float: left;
		width: 100%;
		height: 40px;
		line-height: 40px;
		box-sizing: border-box;
		border-radius: 5px;
		background-color: #008cc8;
		font-size: 12px;
		color: #fff;
		text-decoration: none;
		text-align: center;
	}

	#contents {
		float: left;
		width: 100%;
		height: auto;
		box-sizing: border-box;
		padding: 20px 20px 0 20px;
		margin: 0;
	}

	#page {
		float: left;
		width: 100%;
		height: auto;
		box-sizing: border-box;
		padding: 0;
		margin: 20px 0 0 0;
	}

	#page-title {
		float: left;
		width: 100%;
		border-bottom: 2px solid #008cc8;
		padding: 0 0 10px 0;
		margin: 0;
		font-size: 24px;
		color: #008cc8;
	}

	#page section {
		float: left;
		width: 100%;
		box-sizing: border-box;
		padding: 20px 0 0 0;
		margin: 0;
	}

	#page section iframe {
		float: left;
		clear: left;
		width: 100%;
		height: 500px;
		box-sizing: border-box;
		padding: 0;
		margin: 0;
	}

	.contents-title {
		float: left;
		margin: 0;
		padding: 0;
		margin: 0 0 10px 0;
		font-size: 18px;
		color: #f60;
	}

	.sub-contents {
		float: left;
		clear: left;
		width: 100%;
		height: auto;
		box-sizing: border-box;
		padding: 0 0 0 10px;
	}

	.sub-contents-title {
		float: left;
		clear: left;
		margin: 10px 0 0 20px;
		padding: 0;
		margin: 0 0 10px 0;
		font-size: 14px;
		color: #3cb371;
	}

	.contents-description {
		float: left;
		clear: left;
		margin: 0 0 10px 0;
	}

	#calender {
		float: left;
	}

	#webcam {
		float: left;
		width: 100%;
		height: 300px;
		box-sizing: border-box;
		background-color: #000;
		padding: 20px 0 0 0;
		margin: 0 0 20px 0;
	}

	#webcam p {
		float: left;
		width: 100%;
		margin: 115px 0 0 0;
		color: #fff;
		text-align: center;
	}

	#profile-detail label {
		float: fleft;
		font-weight: bold;
		color: #008cc8;
	}

	#interior img {
		float: left;
		width: 100%;
		height: auto;
	}

	.menu-list {
		float: left;
		clear: left;
		box-sizing: border-box;
		padding: 0 0 0 10px;
		margin: 0 0 10px 0;
	}

	.menu-list p {
		margin: 0;
	}

	#footer {
		float: left;
		width: 100%;
		height: auto;
		box-sizing: border-box;
		border-top: 2px solid #ddd;
		padding: 10px;
		margin: 20px 0 0 0;
	}

	#copyright {
		float: left;
		margin: 0;
	}

	#schedule a {
		float: left;
		clear: left;
		width: 100%;
		height: auto;
		box-sizing: border-box;
	}

	#schedule a img {
		float: left;
		width: 100%;
		height: auto;
	}

/******** Media Queries ********/

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

		#navigation li a {
			font-size: 10px;
		}
	}