@charset "UTF-8";

body {
	background-image:url(/earthsaver/img/bg_01.png);
	background-size:100 auto;
	background-attachment:fixed;
	color:lightgray;
}
#main_img {
	width:100%;
	float:left;
	background-size:cover;
	background-image:url(/earthsaver/img/mainvisual.jpg);
	background-repeat:no-repeat;
}
#main_side1 {
	width:28%;
	float:left;
	margin:40% 0 2% 8%;
	background-image:url(/earthsaver/img/bannerflame2.png);
	background-size:cover;
	background-repeat:no-repeat;
}
#main_side1 img {
	margin:10% 0 10% 0;
}
#main_side2 {
	width:28%;
	float:right;
	margin:40% 8% 0;
	background-image:url(/earthsaver/img/bannerflame.png);
	background-size:cover;
	background-repeat:no-repeat;
}
#main_side2 img {
	margin:10% 0 10% 0;
}
.spec {
	width:100%;
	height: 100%;
	margin: 0 auto;
	max-height: 150px;
	max-width: 1232px;
	display:inline-block;
}
.gaiyou {
	border: 2px solid #000;
	border-collapse: collapse;
	font-size: 12px;
	text-align: center;
	width:100%;
}
.gaiyou_tb {
	font-size:1em;
	width: 100%;
	margin: 1em 0;
	background-color: rgba(0,0,0,0.80);
}
.gaiyou_th {
	font-size:0.7em;
	color:white;
	background:rgba(200,200,200,0.60);
	margin: 0.4em;
	padding:0.4em;
	text-align:center;
}
.gaiyou_td {
	text-align: center;
	width:auto;
	font-weight:bold;
	background:rgba(230,230,200,0.80);
	vertical-align: central;
	margin: 0.4em;
	color:black;
	font-size: 0.7em;
	padding:1em 0.4em;
}
.title1 {
	width:100%;
	float:left;
	margin:4% 0;
}
#outline_content {
	background-image:url(/earthsaver/img/mainvisual2.jpg);
	width:100%;
	float:left;
	background-size:cover;
	background-repeat:no-repeat;
}
#outline_side1 {
	width:100%;
	margin:5% auto 0;
	background-size:cover;
}
#outline_side2 {
	width:100%;
	margin:5% auto;
	background-size:cover;
}
#prologue {
	width:85%;
	text-align:center;
	background-image:url(/earthsaver/img/table_bg.png);
	color: #fff;
	margin:5% auto;
}
#prologue h1 {
	border-top: 0 solid #36c;
	clear: both;
	color: #fff;
	font-size: 150%;
	font-weight: bold;
	margin: 0 0 8px;
	padding: 0;
}
#play_content {
	background-image:url(/earthsaver/img/mainvisual2.jpg);
	width:100%;
	float:left;
	background-size:cover;
	background-repeat:no-repeat;
}
#play_box1 {
	width:100%;
	background-size:cover;
	margin:5% auto;
}
#play_box2 {
	width:100%;
	background-size:cover;
	margin:5% auto;
}
#play_box3 {
	width:100%;
	background-size:cover;
	margin:5% auto;
}
#technique_content {
	background-image:url(/earthsaver/img/mainvisual2.jpg);
	width:100%;
	float:left;
	background-size:cover;
	background-repeat:no-repeat;
}
#tech_side1 {
	width:70%;
	display:inline-block;
	margin:5% 0;
	background-size:contain;
	background: #a80329; /* Old browsers */
	background: -moz-linear-gradient(top, #a80329 0%, #940224 49%, #7b011d 66%, #70001a 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #a80329), color-stop(49%, #940224), color-stop(66%, #7b011d), color-stop(100%, #70001a)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, #a80329 0%, #940224 49%, #7b011d 66%, #70001a 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, #a80329 0%, #940224 49%, #7b011d 66%, #70001a 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top, #a80329 0%, #940224 49%, #7b011d 66%, #70001a 100%); /* IE10+ */
	background: linear-gradient(to bottom, #a80329 0%, #940224 49%, #7b011d 66%, #70001a 100%); /* W3C */
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a80329', endColorstr='#70001a', GradientType=0 ); /* IE6-9 */
	-webkit-border-radius: 11px;
	-moz-border-radius: 11px;
	border-radius: 11px;
	border:solid 2px #dbb841;
	background-repeat:no-repeat;
}
ul.tech_img {
	width:100%;
	float:left;
	margin:0;
	display:block;
	padding:0;
}
ul.tech_img li {
	width:100%;
	float:left;
	margin:8% 0;
	background-size:contain;
	list-style:none;
}
#questionnaire_content {
	background-image:url(/earthsaver/img/mainvisual2.jpg);
	width:100%;
	float:left;
	background-size:cover;
	background-repeat:no-repeat;
}
#question {
	width:80%;
	background-image:url(/earthsaver/img/table_bg.png);
	margin:12% auto 0;
	display:block;
	color: #fff;
}
#question h1 {
	border-top: 0 solid #36c;
	clear: both;
	color: #fff;
	font-size: 150%;
	font-weight: bold;
	margin: 0 0 8px;
	padding: 0;
}
#question_btn {
	text-align:center;
	margin:5% 0;
	padding:0 0 5% 0;
}
.redBack {
	background:rgba(140,0,20,0.80);
	border:rgba(239,202,0,0.60) inset 5px;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	padding:1em
}
#Copyright {
	margin:2em auto;
	text-align:center;
	color:white;
	font-weight:bold
}
.button {
	width:80%;
	background: rgba(255,255,255,0.26);
	margin:2em auto;
	padding:1em 0;
	font-weight:bold;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
}
.button a {
	display:block;
	text-decoration:none;
	color:lightgray;
}
.button a:hover {
	color:white;
}
@media only screen and (min-width: 769px) {
#About img {
	width:40%
}
#outline_side1 {
	width:48%;
	float:left;
	margin:5% 0 0 5%;
	background-size:cover;
}
#outline_side2 {
	width:35%;
	float:left;
	margin:5% 0 0 0;
	background-size:cover;
}
#prologue {
	width:85%;
	float:left;
	text-align:center;
	background-image:url(/earthsaver/img/table_bg.png);
	color: #fff;
	margin:5% 0;
}
#play_box1 {
	width:28%;
	background-size:cover;
	float:left;
	margin:4% 2% 0 3%;
}
#play_box2 {
	width:28%;
	background-size:cover;
	float:left;
	margin:4% 2% 0 3%;
}
#play_box3 {
	width:28%;
	background-size:contain;
	float:left;
	margin:4% 2%;
}
#tech_side1, #tech_side2 {
	width:48%;
	float:left;
	margin:5% 0 0 5%;
	background-size:contain;
	background-image:url(/earthsaver/img/techbg.png);
	background-repeat:no-repeat;
	border:none;
}
.tech_title {
	padding:3% 0 0 0;
}
ul.tech_img {
	margin: 0 5% 6%;
	width: 85%;
	display:block;
	float:left;
}
ul.tech_img li {
	width:40%;
	float:left;
	margin:5% 0 0 5%;
	background-size:contain;
	list-style:none;
}
}