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

	body {
		width: 100%;
		line-height: 1.2em;
		background-image: url('../img/bg.jpg');
		background-size: 100% auto;
		background-position: 0 100%;
		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;
	}

/******** Components ********/

	/**** Form ****/

		#form {
			padding: 0;
			margin: 0;
		}

	/**** Field ****/

		.field {
			float: left;
			width: 100%;
			height: auto;
			box-sizing: border-box;
			margin-bottom: 20px;
		}

		.field label {
			float: left;
			margin-bottom: 5px;
		}

		.field input {
			float: left;
			clear: left;
			width: 100%;
			max-width: 300px;
			height: 30px;
		}

	/**** Submit ****/

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

	/**** Button ****/

		.main-btn {
			display: block;
			width: auto;
			min-width: 100px;
			height: 40px;
			line-height: 36px;
			border: none;
			border-radius: 3px;
			font-size: 14px;
			color: #fff;
			text-decoration: none;
			text-align: center;
		}

		.sub-btn {
			display: block;
			width: auto;
			min-width: 80px;
			height: 30px;
			line-height: 26px;
			border: none;
			border-radius: 3px;
			font-size: 12px;
			color: #fff;
			text-decoration: none;
			text-align: center;
		}

/******** Area ********/

	/**** Container ****/

		#container {
			float: left;
			width: 100%;
			height: auto;
			box-sizing: border-box;
			margin: 0;
		}

	/**** Header ****/

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

		#site-title {
			float: left;
			width: auto;
			margin: 10px 0 15px 0;
		}

		#site-title a {
			font-size: 62px;
			color: #1e90ff;
			text-decoration: none;
		}

		#site-description {
			float: left;
			clear: left;
			width: auto;
			margin: 0;
			font-size: 12px;
			color: #1e90ff;
			text-align: center;
		}

	/**** Global Navigation ****/

		#navigation,
		#navigation ul {
			float: left;
			width: 100%;
			height: auto;
			box-sizing: border-box;
		}

		#navigation {
			padding: 0;
		}

		#navigation ul {
			border-bottom: 1px solid #ccc;
			padding: 0 0 0 20px;
			margin: 0;
		}

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

		#navigation li a {
			display: block;
			float: left;
			width: 160px;
			height: 40px;
			line-height: 40px;
			box-sizing: border-box;
			border: 1px solid #ccc;
			border-radius: 5px 5px 0 0;
			background-color: #eee;
			padding-right: 10px;
			font-size: 16px;
			color: #333;
			text-decoration: none;
			text-align: center;
		}
		#navigation li a:hover {
			background-color: rgba(0,0,0,0.1);
		}
		#navigation li a:active {
			background-color: rgba(0,0,0,0.2);
		}

		#navigation li a span {
			padding-left: 10px;
			font-size: 10px;
			color: #666;
		}

	/**** Contents ****/

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

		#page-title {
			float: left;
			margin: 0 0 40px 0;
		}

		#page-description {
			float: left;
			clear: left;
			margin: 0 0 40px 0;
		}

		.contents {
			float: left;
			height: auto;
			box-sizing: border-box;
			border-left: 10px solid #1e90ff;
			padding: 10px 0 0 20px;
			margin: 0 0 40px 0;
		}

		.about,
		.services {
			width: 100%;
		}

		.contact {
			width: 600px;
		}

		.contents h3 {
			float: left;
			margin: 0 0 20px 0;
			font-size: 20px;
			color: #1e90ff;
		}

		.contents p {
			float: left;
			width: auto;
			margin: 0;
		}

		.contents ul {
			float: left;
			clear: left;
			box-sizing: border-box;
		}

		.contents li {
			float: left;
			clear: left;
			margin-bottom: 10px;
		}

		.about h4 {
			float: left;
			width: 90px;
			margin: 0 20px 0 0;
			font-size: 16px;
			color: #ff8c00;
			text-align: right;
		}

		.about p {
			float: left;
			width: auto;
			margin: 0;
			font-size: 16px;
		}

		.services h4 {
			float: left;
			width: auto;
			margin: 0 20px 20px 0;
			font-size: 16px;
			color: #ff8c00;
			text-align: left;
		}

		.services h5 {
			float: left;
			width: auto;
			margin: 0 20px 10px 0;
			font-size: 14px;
			color: #2e8b57;
			text-align: left;
		}

		.services p {
			float: left;
			clear: left;
			padding-left: 20px;
			margin: 0;
			font-size: 14px;
		}

		.services ul {
			padding-left: 20px;
		}

		.services li li {
			margin-bottom: 20px;
		}

		.contact {
			float: left;
		}

	/**** Footer ****/

		#footer {
			float: left;
			width: 100%;
			height: auto;
			border-top: 1px solid #ccc;
			box-sizing: border-box;
			padding: 10px;
		}

		#copyright {
			margin: 0;
			font-size: 14px;
			color: #666;
			text-align: center;
		}


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

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

		#header {
			padding: 20px 20px 0 20px;
		}

		#page {
			padding: 20px;
		}

		.about li {
			margin-bottom: 20px;
		}

		.about h4 {
			width: auto;
			margin: 0 0 10px 0;
			font-size: 16px;
			text-align: left;
		}

		.about p {
			clear: left;
		}

		.services ul {
			padding: 0 0 0 10px;
		}

		.contact {
			width: 100%;
		}

		.formmailer-embed iframe {
			border: 1px solid #ccc;
		}

		.br {
			display: block;
		}
	}