@charset "utf-8";
/* v.1.0.0 update.2015.08.03
 * 太陽光発電
 */
 /* header */
.header {
	padding-bottom:30px;
}
.header .title {
	background:#ed6d00;
}
/* main */
.main .center .article {
	padding-bottom:20px;
}
.main .center .article .section{
	margin:30px 10px 0;
	position:relative;
}
/*
.main .center .article .section .fl {
	width:68%;
}
.main .center .article .section .fr {
	padding-top:10px;
	width:29%;
}
*/

.main .center .article .section .title {
	color:#ed6d00;
	font-size:340%;
	line-height:36px;
	font-weight:bold;
}

.main .center .article .section .title .number {
	width:42px;
	padding-right:4px;
}

.main .center .article .section .text{
	font-size:180%;
}
.main .center .article .section .image{
	width:100%;
}
.main .center .article .section.br{
	border:3px solid #ed6d00;
	background:#fff;
	padding:20px 20px 0;
}
.main .center .article .section .box {
	position:relative;
	padding:10px 20px 14px;
	margin-bottom:20px;
	background:#C84A4C;
}

.main .center .article .section .box .text {
	color:#fff;
	font-weight:normal;
}
.main .center .article .section .text .bold {
	font-size:110%;
	font-weight:bold;
	padding:0;
	vertical-align:baseline;
}
.main .center .article .title.fl{
	width:350px;
	text-align:center;
	padding:0 0 20px;
}

.main .center .article .box.fr{
	width:510px;
}


/* intro */
.main .center .article .introduction {

}
.main .center .article .introduction .box {
	background:#fff;
	padding:0;
}
.main .center .article .introduction .box .title {
	font-size:260%;
	line-height:1.2;
}

.main .center .article .introduction .box .text {
	color:#333;
	margin-top:10px;
}

.main .center .article .introduction .box.fr {
	width:580px;
	padding-top:30px;
}

.main .center .article .introduction .box.fr .title {
	font-size:360%;
	line-height:1.3;
}
.main .center .article .introduction .box.fr .text {
	width:63%;
	padding:5px 0 0;
}

.main .center .article .introduction .box.fr .image {
	width:35%;
	text-align:center;
}
.main .center .article .introduction .box2 {
	padding:0 10px;
	margin-top:30px;
}
.main .center .article .introduction .box2 .text {
	font-size:200%;
}
.main .center .article .introduction .box2 .sub {
	margin-top:10px;
	font-size:240%;
	color:#ed6d00;
	font-weight:bold;
}
.main .center .article .introduction .box2 .image {
	text-align:center;
}
.main .center .article .introduction .box2 .image img {
	margin:0 0 0 10px;
}
.main .center .article .introduction .box2 .excuse {
	margin-top:10px;
	font-size:140%;
}
/* feature */
.main .center .article .feature {
/*	margin-top:40px;*/
}

.main .center .article .feature .title.fl{
	text-align:center;
}
.main .center .article .feature .box.fr {
	width:580px;
	padding:30px 0 0;
	background:#fff;
}

.main .center .article .feature .box.fr .title {
	font-size:360%;
	line-height:1.3;
}
.main .center .article .feature .box.fr .title span {
	font-size:130%;
	font-weight:bold;
}
.main .center .article .feature .box.fr .text {
	width:63%;
	padding:5px 0 0;
}

.main .center .article .feature .box.fr .image {
	width:35%;
	text-align:center;
}

.main .center .article .feature .box.br {
	background:#ed6d00;
}
.main .center .article .feature .box.br .title{
	color:#FFF9B0;
}
.main .center .article .feature .box4 .image {
	margin-top:10px;
	text-align:center;
}
.main .center .article .feature .box4 .image img {
	width:48%;
	margin:6px 6px;
}
/* example */
.main .center .article .example {
	padding:0 10px 20px;
}
.main .center .article .example .title {
	padding:0 10px;
}
.main .center .article .example .image {
	text-align:center;
	margin-top:16px;
}
.main .center .article .example .image img {
	width:23%;
	margin-left:8px;
}
/* flow */

.main .center .article .section.flow{
	background:#fff url(../img/flow_back.png) right -4px no-repeat;
}
.main .center .article .flow .box {
	padding-top:18px;
	background:none;
}

.main .center .article .flow .title.fl{
	
}
.main .center .article .flow .box.fr {
	width:580px;
	padding:0;
}
.main .center .article .flow .box.fr .title {
	font-size:180%;
	font-weight:normal;
	line-height:1.4;
	color:#ed6d00;
	padding:0 100px 10px 0;
}
.main .center .article .flow .box.fr .image {
	width:280px;
	text-align:right;
}
.main .center .article .flow .box.fr .image img {
	width:70%;
}
.main .center .article .flow .box.fr .link {
	width:280px;
	text-align:center;
}
.main .center .article .flow .box.fr .link img {
	
}
.main .center .article .flow .box.fl {
	width:290px;
	padding:10px 10px 0;
}
.main .center .article .flow .box .text {
	padding:10px 16px;
	color:#333;
	font-weight:normal;
}
.main .center .article .flow .box .link {
	padding:10px 0 5px;
}
.color1 {
	color:#FFF100;
	font-weight:bold;
}

@media screen and (max-width: 800px){
	.header {
		padding-bottom:20px;
	}
	
	.main .center .article .fl,
	.main .center .article .fr{
		width:auto !important;
		float:none !important;
	}
	.main .center .article .section {
		margin:3% 0 0;
	}
	.main .center .article .section .title.fl {
		width:60% !important;
		padding-top:0;
	}
	.main .center .article .box .fr{
		text-align:center;
	}
	
	.main .center .article .section .title {
		font-size:160% !important;
		line-height:20px;
		padding-top:10px;
	}
	.main .center .article .section .title .number {
		width:22px;
	}
	.main .center .article .section .text{
		font-size:140%;
	}
	.main .center .article .section.title > .title img {
		width:200px;
	}
	
	
	.main .center .article .introduction .box.fr {
		padding-top:0;
	}
	.main .center .article .introduction .box2 {
		padding:0 0 20px;
		margin:0;
	}
	.main .center .article .introduction .box2 .sub{
		font-size:160%;
		line-height:20px;
		padding-bottom:6px;
	}
	.main .center .article .introduction .box2 .text {
		font-size:140%;
	}
	.main .center .article .introduction .box2 .image {
		text-align:center;
	}
	.main .center .article .introduction .box2 .image img {
		width:45%;
	}
	.main .center .article .feature .box.fr {
		padding-top:0;
	}
	.main .center .article .feature .box4 .image img {
		width:100%;
	}
	.main .center .article .example {
		padding:0;
	}
	.main .center .article .example .title {
		padding:0;
		width:50%;
	}
	.main .center .article .example .image img {
		width:90%;
		margin:0 0 10px;
	}
	.main .center .article .flow .box {
		margin-bottom:20px;
		padding-top:11%;
		border-width:4px !important;
	}
	
	.main .center .article .flow .box.fr{
		margin-top:0;
	}
	
	.main .center .article .flow .fr.box .title {
		padding:0 0 2%;
	}
	.main .center .article .flow .fr.box .image {
		text-align:center;
		width:80% !important;
		margin:0 auto;
	}
	.main .center .article .flow .box.fl {
		float:left !important;
		width:45.5% !important;
		padding:2% 2% 0
	}
	
}