@charset "utf-8";

@import url(default.css);
@import url(base.css);


	#contentheader{margin-bottom:26px;}
	#index #contentheader{margin-bottom:40px;}

		#contentheader h1{width:345px;}
		.flexible #contentheader h1{width:259px;}
		.active-sp #contentheader h1{width:172px;}

		#contentheader ul{width:303px;}
		
		.flexible #contentheader h1 img{width:259px;}
		.active-sp #contentheader h1 img{width:172px;}


	#contents-list{padding:0 0 25px 15px;}
	.active-sp #contents-list{padding:0 0 25px;}
	

		#ourservice .contentlink-square{
			background:url(../shared/link_to-page-yellow.png);
			background-size:100% auto;
		}

		#voices .contentlink-square{
			background:url(../shared/link_to-page-blue.png);
			background-size:100% auto;
		}

			#ourservice a:hover .contentlink-square,
			#voices a:hover .contentlink-square{
				background:url(../shared/link_to-page-r.png);
				background-size:100% auto;
			}


	#index #service-main{
		width:950px;
		margin:0 auto;
		padding-bottom:45px;
	}
	.flexible#index #service-main{width:100%;}
	.active-sp2#index #service-main{padding-bottom:25px;}
	

		#index #catmain{
			width:100%;
			height:80px;
			text-align:center;
		}
		#index #catmain img{width:80%;}
		.active-sp2#index  #catmain img{width:90%;}

		.flexible#index #catmain{padding-top:10px;height:70px;}
		.active-sp#index #catmain{height:50px;}
		.active-sp2#index #catmain{height:30px;}
		
		
	#index #image-main{
		width:378px;
		float:left;
	}
	.flexible#index #image-main{display:none;}

		#index #main-right{
			width:530px;
			float:right;
		}
		.flexible#index #main-right{
			margin:0 auto;
			float:none;			
		}
		.active-sp#index #main-right{width:80%;}
		.active-sp2#index #main-right{width:90%;}
		
		#index #main-right p{
			color:#0c308e;
			margin:0 0 20px 10px;
			font-weight:bold;
		}

		#index #service-point{
			padding:10px 0 4px 18px;
			background:#fff;
			-moz-border-radius:10px;
			-webkit-border-radius:10px;
			border-radius:10px;
			-moz-box-shadow:0px 1px 3px 0px #aaa;
			-webkit-box-shadow:0px 1px 3px 0px #aaa;
			box-shadow:0px 1px 3px 0px #aaa;
		}

		.active-sp#index #service-point{padding:5px 0 0 10px;}
		.active-sp#index #service-point img{width:90%;}		
		
		.active-sp2#index #service-point img{width:95%;}


	#image-family img{width:360px;}
	.active-sp #image-family img{width:300px;}
	.active-sp2 #image-family img{width:75%;}

	.flexible #image-family{
		width:100%;
		float:none;
		top:30px;
		margin-bottom:30px;
	}


	/* 私たちのサービス1 */

	.ourservice #main,.ourservice #main2{padding:40px 0 50px;}
	/*#ourservice1 #main{background:url(../service/images/bg_ourservice1.png) no-repeat #fff;}
	#ourservice2 #main{background:url(../service/images/bg_ourservice2.png) no-repeat #fff;}*/
	#ourservice1 #main{background:url(../service/images/bg_ourservice2.png) no-repeat #fff;}
	#ourservice1 #main2{background:url(../service/images/bg_ourservice1.png) no-repeat #fff;}

	.ourservice .maincat{
		width:100%;
		text-align:center;
		margin:0 0 35px;
	}
	.flexible.ourservice .maincat img{width:80%;}
	.active-sp.ourservice .maincat img{width:92%;}

		/* 私たちのサービス1 */

		#ourservice1 #content #main2 h3{
			max-width:720px;
			width:calc(90% - 40px);
			min-height: 30px;
			margin:30px auto 14px;
			padding-left: 40px;
			color:#c30;
			font-size:2.0em;
			font-family: 'Sawarabi Mincho', Helvetica, Arial, sans-serif;
			background-image: url("../service/images/ico_check.png");
			background-repeat: no-repeat;
			background-position: 0 0;
			line-height: 1.3em;
		}

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

		#ourservice1 #content #main2 h3{
			margin:30px auto 14px;
			min-height: 30px;
		}

	}

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

		#ourservice1 #content #main2 h3{
			width:calc(90% - 30px);
			min-height: 23px;
			padding-left: 30px;
			color:#c30;
			font-size:1.5em;
			background-size: 30px auto;
		}

	}

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

		#ourservice1 #content #main2 h3{
			min-height: 23px;
			color:#c30;
			font-size:1.5em;
			background-size: 30px auto;
		}

	}
		
		
		
		.active#ourservice1 #content #main2 h3{
			width:92%;
			margin:20px auto 10px;
		}
		.active#ourservice1 #content #main2 h3 img{width:100%;}

		/*#ourservice1 #content .stdtext{
			width:640px;
			margin:0 auto;
		}
		.active#ourservice1 #content .stdtext{
			width:85%;
			margin:0 0 0 10%;
		}*/
		.ourservice #content .bluetext{
			max-width:760px;
			width:90%;
			color:#0c308e;
			font-size:120%;
			font-weight:bold;
			margin:30px auto 0;
		}
		/*  */


		/* 私たちのサービス2 */

		#ourservice1 #content #main h3{
			width:740px;
			margin:30px auto 14px;
		}
		.flexible#ourservice1 #content #main h3{margin:30px 0 14px 50px}
		.active#ourservice1 #content #main h3{
			width:90%;
			margin:20px auto 10px;
		}
		.active-sp#ourservice1 #content #main h3{
			margin:20px 3% 10px;
		}

		.active#ourservice1 #content h3 img{width:75%;}
		.active-sp#ourservice1 #content h3 img{width:90%;}
		.active-sp2#ourservice1 #content h3 img{width:100%;}
		.active-sp#ourservice1 #content h3{width:85%;}
		.active-sp2#ourservice1 #content h3{width:92%;}
		

			#ourservice1 #content h4{
				width:690px;
				margin:20px auto 0;
				padding:0 0 10px 50px;
				color:#c30;
				font-size:130%;
				font-weight:bold;
				background:url(../shared/dot_circle-pink.png) no-repeat 28px 4px;
			}
			.flexible#ourservice1 #content h4{
				margin:20px 0 0 90px;
				padding:0 0 10px 20px;
				background:url(../shared/dot_circle-pink.png) no-repeat 0 4px;
			}
			.active#ourservice1 #content h4{
				margin:20px auto 0;
				width:85%;
				font-size:120%;
			}
			.active-sp#ourservice1 #content h4{
				width:85%;
				font-size:100%;
			}

		#ourservice1 #content .stdtext{
			max-width:690px;
			width:calc(100% - 70px);
			margin:0 auto;
			padding:0 30px 0 40px;
		}
		
			#ourservice1 #content .stdtext ul{margin-left:20px;}
			#ourservice1 #content .stdtext li{margin-bottom:10px;}
		
		/*  */

		#ourservice2-1{background:url(../service/images/bg_ourservice2_1.png) no-repeat 100% 0;}
		#ourservice2-2{background:url(../service/images/bg_ourservice2_2.jpg) no-repeat 100% 0;}
		#ourservice2-3{background:url(../service/images/bg_ourservice2_3.jpg) no-repeat 100% 100%;}

		.active #ourservice2-1,
		.active #ourservice2-2,
		.active #ourservice2-3{background:none;}



		#link-to2,
		#link-to1{
			width:980px;
			margin:0 auto;
			position:fixed;
			top:380px;
		}

		#link-to2.link-active,
		#link-to1.link-active{
			margin:0 auto;
			position:relative;
			top:auto;
			bottom:220px;
		}

		.flexible #link-to2,
		.flexible #link-to1{
			width:100%;
			margin:30px 0 0;
			position:static;
		}

			#link-to2 a,
			#link-to1 a{
				display:block;
				width:150px;
				height:170px;
				margin:0 0 -180px;
				padding-top:10px;
				text-align:center;
				background:#f5e6e1;
				float:right;
			}
	
			#link-to1 a{float:left;}
	
			.flexible #link-to2 a,
			.flexible #link-to1 a{
				width:100%;
			}
			
			#link-to1 a{background:#e3efe3;}
			.flexible #link-to1 a{float:left;}
	
			#link-to2 a:hover{background:#fcc97e;}
			#link-to1 a:hover{background:#7ac77d;}
			
	
			#link-to2 img,
			#link-to1 img{margin:12px 0 0;}
			
			.flexible #link-to2 br,
			.flexible #link-to1 br{display:none;}
			.flexible #link-to2 .yajirushi,
			.flexible #link-to1 .yajirushi{float:right;}
			.flexible #link-to2 .link-label,
			.flexible #link-to1 .link-label{margin-left:20px;}



	/* お客様の声 */
		
		#voices #main{padding-top:40px;}
		
		.voice{
			padding-bottom:50px;
		}
		
		.voice header{
			background:#006acc;
			width:860px;
			height:28px;
			margin:0 auto 30px;
			padding:8px 20px 0; 
			color:#fff;
			font-size:110%;
			font-weight:bold;
			-moz-border-radius:5px;
			-webkit-border-radius:5px;
			border-radius:5px;
			-moz-box-shadow:0px 0px 3px 0px #aaa;
			-webkit-box-shadow:0px 0px 3px 0px #aaa;
			box-shadow:0px 0px 3px 0px #aaa;
		}
		.flexible .voice header{
			margin:0 2% 30px;
			width:90%;
			padding:8px 3% 0;
		}
		.active-sp2 .voice header{font-size:90%;}
			
		
			.voice header h1{
				width:auto;
				margin-right:20px;
				font-weight:bold;
				float:left;
			}
		
			.voice header p{
				margin:0;
			}
				
			.voicenote li{
				list-style:none;
			}
					
			.voicenote li{
				list-style:none;
			}
					
				.voicenote li h1{
					width:860px;
					margin:20px auto 0;
					padding:0 0 10px 20px;
					color:#c30;
					font-size:130%;
					font-weight:bold;
					background:url(../shared/dot_circle-pink.png) no-repeat 0 4px;
				}
				.flexible .voicenote li h1{
					margin:20px 0 0 20px;
					padding:0 0 10px 20px;
					background:url(../shared/dot_circle-pink.png) no-repeat 0 4px;
				}
				.active .voicenote li h1{
					margin:20px auto 0;
					width:92%;
					font-size:120%;
				}
				.active-sp .voicenote li h1{
					width:92%;
					font-size:100%;
				}

				.voicenote li p{
					margin:0;
					padding:0 50px 0 70px;
				}

				.flexible .voicenote li p{
					margin:0;
					padding:0 50px 0 40px;
				}
				.active .voicenote li p{
					width:90%;
					margin:0 0 0 5%;
					padding:0;
				}


				.voiceimage{
					width:220px;
					margin:0 70px 0 45px;
					padding-bottom:5px;
					float:right;
					background:url(../shared/shadow_naname.png) no-repeat 100% 100%;
				}
				.active-sp .voiceimage{
					margin:0 auto;
					float:none;
					text-align:center;
				}

				.voiceimage img{
					overflow:hidden;
					-moz-box-shadow:0px 0px 3px 0px #aaa;
					-webkit-box-shadow:0px 0px 3px 0px #aaa;
					box-shadow:0px 0px 3px 0px #aaa;
				}


		.flexible #voice2 .wrapp{
			width:760px;
			margin:0 auto;
		}
		.active #voice2 .wrapp{
			width:600px;
			margin:0 auto;
		}
		.active-sp #voice2 .wrapp{
			width:100%;
			margin:0;
		}


		.left-floatimage{
			width:340px;
			margin:20px 0 0 50px;
			float:left;
			-moz-box-shadow:0px 0px 3px 0px #aaa;
			-webkit-box-shadow:0px 0px 3px 0px #aaa;
			box-shadow:0px 0px 3px 0px #aaa;
		}
		.flexible .left-floatimage{margin:20px 0 0;}

		.active .left-floatimage{width:280px;}
		.active .left-floatimage img{width:280px;}

		.active-sp .left-floatimage{
			width:60%;
			margin:20px auto;
			float:none;
		}
		.active-sp .left-floatimage img{width:100%;}

		.chart-epowerselling{
			width:460px;
			margin:20px 70px 0 0;
			float:right;
		}
		.flexible .chart-epowerselling{
			width:360px;
			margin:20px 0 0;
		}
		.active .chart-epowerselling{width:290px;}
		.active-sp .chart-epowerselling{
			float:none;
			width:80%;
			margin:0 auto;
		}

			.chart-epowerselling table{
				width:100%;
				border-collapse:collapse;
			}
			.active .chart-epowerselling table{font-size:90%;}

			.chart-epowerselling th,
			.chart-epowerselling td{
				border-top:1px solid #ccc;
				border-bottom:1px solid #ccc;
			}

			.chart-epowerselling th{
				padding:5px 0 3px;
				font-weight:normal;
			}

			.chart-epowerselling td{
				color:#0d318f;
				text-align:right;
				padding:5px 30px 3px 0;
			}
			.chart-epowerselling td:last-child{
				color:#006acc;
				font-weight:bold;
			}
			.chart-epowerselling td.red{color:#c00;}

			.chart-epowerselling .tableheader th{
				padding:1px 0 0;
				background:#eee;
				color:#0c308e;
			}

	/* 自社発電 */

		#powerplant #capmain{
			margin:30px 0 0;
			text-align:center;
			color:#f60;
			font-size:150%;
			font-weight:bold;
		}
		#powerplant.active-sp #capmain{
			margin:15px 0 0;
			font-size:120%;
		}
		#powerplant.active-sp2 #capmain{font-size:100%;}

		#powerplant #item-list{
			clear:both;
			width:960px;
			margin:25px auto 0;
			padding-left:20px;
		}
		#powerplant.flexible #item-list{
			width:640px;			
		}
		#powerplant.active-sp #item-list{
			width:300px;
			margin:15px auto 0;
			padding:0;
		}
		#powerplant.active-sp2 #item-list{
			width:310px;
			padding-left:5px;
		}
		
			#powerplant #item-list li{
				width:300px;
				margin:0 20px 10px 0;
				padding-bottom:10px;
				float:left;
				list-style:none;
				background:url(../service/images/bg_shadow.png) no-repeat 100% 100%;
			}
			#powerplant.flexible #item-list li{
			}
			#powerplant.active-sp #item-list li{
				margin:0 5px 5px 0;
			}
			#powerplant.active-sp2 #item-list li{
			}
			
				#powerplant .item-inner{
					width:280px;
					padding:10px;
					background:#fff;
						-moz-box-shadow:0px 0px 3px 0px #ccc;
						-webkit-box-shadow:0px 0px 3px 0px #ccc;
						box-shadow:0px 0px 3px 0px #ccc;
				}
	
					#powerplant .item-inner h1{
						margin-top:5px;
						color:#0d318f;
						font-size:120%;
						font-weight:bold;
					}
	
					#powerplant .item-inner p{
						margin:7px 0 5px 20px;
					}

					#powerplant.active-sp .item-inner img{
					}