/*==================================================================================================
 demo.css
===================================================================================================*/

/*----------------------------------------------------------------
 宣言
----------------------------------------------------------------*/

@charset "utf-8";

/*----------------------------------------------------------------------
 demo
-----------------------------------------------------------------------*/

	* {
		box-sizing: border-box;
		-webkit-box-sizing: border-box;
		-o-box-sizing: border-box;
		-ms-box-sizing: border-box;
		-moz-box-sizing: border-box;
		font-family: Meiryo;
	}

	html {
		background-color: #ffffff;
		-webkit-background-size: 25px 25px;
		-moz-background-size: 25px 25px;
		background-size: 25px 25px;
		background-position: 0 0, 12.5px 12.5px, 0 0, 12.5px 12.5px, 0 0;
		background-image: -webkit-linear-gradient(45deg,  #ecfbe8 25%, #ecfbe8 25%, transparent 25%, transparent 100%),
			-webkit-linear-gradient(-135deg, #ecfbe8 25%, #ecfbe8 25%, transparent 25%, transparent 100%),
			-webkit-linear-gradient(-135deg, #ffffff 25%, #ffffff 25%, transparent 25%, transparent 100%),
			-webkit-linear-gradient(45deg, #ffffff 25%, #ffffff 25%, transparent 25%, transparent 100%),
			-webkit-linear-gradient(45deg, #ecfbe8 0%, #ecfbe8 6%, transparent 6%, transparent 11%, #ecfbe8 11%, #ecfbe8 17%, transparent 17%, transparent 22%, #ecfbe8 22%, #ecfbe8 28%, transparent 28%, transparent 33%, #ecfbe8 33%, #ecfbe8 39%, transparent 39%, transparent 44%, #ecfbe8 44%, #ecfbe8 50%, transparent 50%, transparent 55%, #ecfbe8 55%, #ecfbe8 61%, transparent 61%, transparent 66%, #ecfbe8 66%, #ecfbe8 72%, transparent 72%, transparent 77%, #ecfbe8 77%, #ecfbe8 83%, transparent 83%, transparent 88%, #ecfbe8 88%, #ecfbe8 94%, transparent 94%, transparent 100%);
		background-image: -moz-linear-gradient(45deg,  #ecfbe8 25%, #ecfbe8 25%, transparent 25%, transparent 100%),
			-moz-linear-gradient(-135deg, #ecfbe8 25%, #ecfbe8 25%, transparent 25%, transparent 100%),
			-moz-linear-gradient(-135deg, #ffffff 25%, #ffffff 25%, transparent 25%, transparent 100%),
			-moz-linear-gradient(45deg, #ffffff 25%, #ffffff 25%, transparent 25%, transparent 100%),
			-moz-linear-gradient(45deg, #ecfbe8 0%, #ecfbe8 6%, transparent 6%, transparent 11%, #ecfbe8 11%, #ecfbe8 17%, transparent 17%, transparent 22%, #ecfbe8 22%, #ecfbe8 28%, transparent 28%, transparent 33%, #ecfbe8 33%, #ecfbe8 39%, transparent 39%, transparent 44%, #ecfbe8 44%, #ecfbe8 50%, transparent 50%, transparent 55%, #ecfbe8 55%, #ecfbe8 61%, transparent 61%, transparent 66%, #ecfbe8 66%, #ecfbe8 72%, transparent 72%, transparent 77%, #ecfbe8 77%, #ecfbe8 83%, transparent 83%, transparent 88%, #ecfbe8 88%, #ecfbe8 94%, transparent 94%, transparent 100%);
		background-image: -ms-linear-gradient(45deg,  #ecfbe8 25%, #ecfbe8 25%, transparent 25%, transparent 100%),
			-ms-linear-gradient(-135deg, #ecfbe8 25%, #ecfbe8 25%, transparent 25%, transparent 100%),
			-ms-linear-gradient(-135deg, #ffffff 25%, #ffffff 25%, transparent 25%, transparent 100%),
			-ms-linear-gradient(45deg, #ffffff 25%, #ffffff 25%, transparent 25%, transparent 100%),
			-ms-linear-gradient(45deg, #ecfbe8 0%, #ecfbe8 6%, transparent 6%, transparent 11%, #ecfbe8 11%, #ecfbe8 17%, transparent 17%, transparent 22%, #ecfbe8 22%, #ecfbe8 28%, transparent 28%, transparent 33%, #ecfbe8 33%, #ecfbe8 39%, transparent 39%, transparent 44%, #ecfbe8 44%, #ecfbe8 50%, transparent 50%, transparent 55%, #ecfbe8 55%, #ecfbe8 61%, transparent 61%, transparent 66%, #ecfbe8 66%, #ecfbe8 72%, transparent 72%, transparent 77%, #ecfbe8 77%, #ecfbe8 83%, transparent 83%, transparent 88%, #ecfbe8 88%, #ecfbe8 94%, transparent 94%, transparent 100%);
		background-image: -o-linear-gradient(45deg,  #ecfbe8 25%, #ecfbe8 25%, transparent 25%, transparent 100%),
			-o-linear-gradient(-135deg, #ecfbe8 25%, #ecfbe8 25%, transparent 25%, transparent 100%),
			-o-linear-gradient(-135deg, #ffffff 25%, #ffffff 25%, transparent 25%, transparent 100%),
			-o-linear-gradient(45deg, #ffffff 25%, #ffffff 25%, transparent 25%, transparent 100%),
			-o-linear-gradient(45deg, #ecfbe8 0%, #ecfbe8 6%, transparent 6%, transparent 11%, #ecfbe8 11%, #ecfbe8 17%, transparent 17%, transparent 22%, #ecfbe8 22%, #ecfbe8 28%, transparent 28%, transparent 33%, #ecfbe8 33%, #ecfbe8 39%, transparent 39%, transparent 44%, #ecfbe8 44%, #ecfbe8 50%, transparent 50%, transparent 55%, #ecfbe8 55%, #ecfbe8 61%, transparent 61%, transparent 66%, #ecfbe8 66%, #ecfbe8 72%, transparent 72%, transparent 77%, #ecfbe8 77%, #ecfbe8 83%, transparent 83%, transparent 88%, #ecfbe8 88%, #ecfbe8 94%, transparent 94%, transparent 100%);
		background-image: linear-gradient(45deg,  #ecfbe8 25%, #ecfbe8 25%, transparent 25%, transparent 100%),
			linear-gradient(-135deg, #ecfbe8 25%, #ecfbe8 25%, transparent 25%, transparent 100%),
			linear-gradient(-135deg, #ffffff 25%, #ffffff 25%, transparent 25%, transparent 100%),
			linear-gradient(45deg, #ffffff 25%, #ffffff 25%, transparent 25%, transparent 100%),
			linear-gradient(45deg, #ecfbe8 0%, #ecfbe8 6%, transparent 6%, transparent 11%, #ecfbe8 11%, #ecfbe8 17%, transparent 17%, transparent 22%, #ecfbe8 22%, #ecfbe8 28%, transparent 28%, transparent 33%, #ecfbe8 33%, #ecfbe8 39%, transparent 39%, transparent 44%, #ecfbe8 44%, #ecfbe8 50%, transparent 50%, transparent 55%, #ecfbe8 55%, #ecfbe8 61%, transparent 61%, transparent 66%, #ecfbe8 66%, #ecfbe8 72%, transparent 72%, transparent 77%, #ecfbe8 77%, #ecfbe8 83%, transparent 83%, transparent 88%, #ecfbe8 88%, #ecfbe8 94%, transparent 94%, transparent 100%);
	}

	/* ヘッダー */

		header {
			background-color: #f7fbfa;
			color: #76933c;
			width: 100%;
			min-width: 1400px;
			overflow: hidden;
			height: 50px;
			font-size: 100%;
		}

			header p {
			color: #76933c;
			}

		.headerTop {
			position: fixed;
			float: left;
			width:150px;
		}

		.headerTitle {
			color: #588f3a;
			font-size: 80%;
			text-align: left;
			float: left;
			margin-top: 5px;
		}

		.headerTextTop {
			margin-bottom: 5px; 
			margin-left: 10px;
			font-size:  0.8em;
		}

		.headerTextLast {
			margin-left: 2em;
		}

		.headerLogo {
			height: 40px;
			margin-left: 10px;
			margin-top: -7px;
			opacity: 0.8;
		}

	/* ヘッダリンク */

		nav.headnav {
			float: right;
		}

		.headerBox {
			width: 150px;
		}

		nav ul {
			list-style-type: none;
			list-style-position: inside;
		}

		nav.headnav li {
			border-left: 1px solid #429a91;
			display: table-cell;
			width: 150px;
			height: 50px;
			text-align: center;
			vertical-align: middle;

		}

		nav.headnav ul a {
			float: left;
			display: block; 
		}

		a.headerBox:link {
			color: #76933c;
			text-decoration: none;
		} 

		a.headerBox:visited {
			color: #76933c;
			text-decoration: none;
		}

		a.headerBox:hover {
			text-decoration: none;
			background-color: #8ccec7;
			color: #ffffff;
		}

		.navSubText {
			color: #429a91;
			font-size: 100%;
		}

	/* フッター */

		footer {
			background-color: #f7fbfa;
			color: #429a91;
			width: 100%;
			min-width: 1400px;
			height: 50px;
			margin: 5px auto 0;
			overflow: hidden;
			position: relative;
			text-align: center;
			vertical-align: bottom;
		}

	/* ページトップボタン */

		#pageTop {
			border: 2px solid #429a91;
			border-radius: 18px;
			width: 35px;
			height: 35px;
			background-color: #f7fbfa;
			color: #429a91;
			text-align: center;
		}

		#pageTop:hover {
			text-decoration: none;
			opacity: 0.5;
			cursor: pointer;
		}

		.pageTopMark {
			position: relative;
			display: inline-block;
			top: 2px;
			left: 0px;
			width: 10px;
			height: 10px;
			border-top: 5px solid #429a91;
			border-right: 5px solid #429a91;
			transform: rotate(-45deg);
		}

		.pageTopBox {
			display: table;
			position: absolute;
			top: 11px;
			right: 30px;
			line-height: 1.0em;
		}

		.pageTopBtn {
			display: table;
			position: fixed;
			right: 0;
			line-height: 1.0em;
			bottom: 8px;
		}

		.pageTopCell {
			display: table-cell;
			vertical-align: middle;
		}

		.pageTopTitle {
			height: 35px;
			padding: 0 10px;
		}

		.copyBox {
			display: table;
			position: absolute;
			top: 30px;
			width: 100%;
			line-height: 1.0em;
			text-align: center;
			vertical-align: middle;
		}

	/* フッタリンク */

		.foot{
			font-size: 80%;
			color: #429a91;
		}

		.foot:link {
			color: #429a91;
			text-decoration: none;
			vertical-align: middle;
		} 

		.foot:visited {
			color: #429a91;
			text-decoration: none;
		}

		.foot:hover {
			text-decoration: none;
			background-color: #8ccec7;
			color: #ffffff;
		}

		nav.footnav li{
			display: inline-block;
			text-align: center;
			padding: 8px 20px 30px;
		}

	/* body */

		h1 {
			line-height: 1em;
			margin:1em 1em;
			text-align: center;
			font-size: 1.5em;
			color: #588f3a;
		}

		h2 {
			margin: 0.5em 0.5em;
			text-align: left;
			font-size: 1em;
			color: #588f3a;
		}

		#title {
			width: 1450px;
			height: 100px;
		}

		#one {
			width: 1450px;
			height: 600px;
		}

		#two {
			width: 1450px;
			height: 100px;
	
		}
		
			#two p {
				text-align: center;;
				line-height: 0.5em;
				margin: 1em 1.5em;
				font-size: 0.8em;
				color: #588f3a;
			}

		.box {
			display: table-cell;
			height: 300px;
			margin: 10px 10px;
			padding: 10px 15px;
			text-align: center;
			color: #000000;
			background-color: #ecfebb;
		}

			.box img {
				width:	420px;
				height: 220px;
				text-align: center;
				background-color: #ffffff;
			}

		.textcontainer {
			display: table-cell;
			width:	420px;
			height: 220px;
			background-color: #ffffff;
		}

			.textcontainer p {
				text-align: left;
				line-height: 0.5em;
				margin: 1em 1.5em;
				font-size: 0.8em;
				color: #588f3a;
			}

/* リンクボタン デモを体験 */

		input[type="submit"].link_button_green,
		input[type="reset"].link_button_green,
		input[type="button"].link_button_green,
		button.link_button_green,
		.button.link_button_green {
			display: block;
			border-radius: 10px;
			background-color: #ffffff;
			border: 2px solid #9cc49e;
			text-decoration: none;
			text-align: center;
			font-size: 1em;
			box-shadow: none;
			color: #588f3a; !important;
			margin: 0px auto;
			margin-top: 30px;
			padding: 0.5em 3.5em;
			cursor: pointer;
		}

			input[type="submit"].link_button_green:hover,
			input[type="reset"].link_button_green:hover,
			input[type="button"].link_button_green:hover,
			button.link_button_blue:hover,
			.button.link_button_blue:hover {
				border: 2px solid #9cc49e;
				background-color: #ecfebb;
				color: #588f3a !important;
			}

/* application 試用のお申込み */

		.application {
			width: 100%;
			min-width: 1450px;
			background-color: #ecfebb;
			padding: 1px;
			margin: 20px auto;
			display: block;
		}

/* リンクボタン 試用のお申込み */

		input[type="submit"].link_button_orange,
		input[type="reset"].link_button_orange,
		input[type="button"].link_button_orange,
		button.link_button_orange,
		.button.link_button_orange {
			width: 300px;
			display: block;
			border-radius: 10px;
			background-color: #ffffff;
			border: 2px solid #f79646;
			text-decoration: none;
			text-align: center;
			font-size: 1em;
			box-shadow: none;
			color: #f79646; !important;
			margin: 20px auto;
			padding: 0.3em 3.5em;
			cursor: pointer;
		}

			input[type="submit"].link_button_orange:hover,
			input[type="reset"].link_button_orange:hover,
			input[type="button"].link_button_orange:hover,
			button.link_button_blue:hover,
			.button.link_button_blue:hover {
				border: 2px solid #f79646;
				background-color: #fac979;
				color: #c46323;
			}