@charset "utf-8";

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


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

		#contentheader h1{width:291px;}
		.flexible #contentheader h1{width:218px;}
		.active-sp #contentheader h1{width:145px;}

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


	#index #wrapper{
		background:url(../sittoku/images/bg_sky.jpg) no-repeat 0 125px;
		/*background-size:cover;*/
	}
	.flexible#index #wrapper{
		/*background:url(../sittoku/images/bg_sky.jpg) no-repeat 50% 65px;*/
		background:url(../sittoku/images/bg_sky.jpg) no-repeat 50% 105px;
	}
	.active-sp#index #wrapper{
		/*background:url(../sittoku/images/bg_sky.jpg) no-repeat 50% 90px;*/
		background:url(../sittoku/images/bg_sky.jpg) no-repeat 50% 130px;
		background-size:100% auto;
	}
	.active-sp2#index #wrapper{
		/*background:url(../sittoku/images/bg_sky.jpg) no-repeat 50% 90px;*/
		background:url(../sittoku/images/bg_sky.jpg) no-repeat 50% 130px;
		background-size:100% auto;
	}

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

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

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

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

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


	#catmain{
		width:55%;
		padding-top:10px;
		float:left;
		text-align:center;
	}
	.flexible #catmain{display:none;}

	#image-family{
		position:relative;
		width:45%;
		float:left;
		text-align:center;
		top:-20px;
		margin-bottom:-20px;
	}
	
	#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;
	}


	/* オール電化 */
		.active#all-denka #main{width:100%;}
		
		#all-denka #main-inner{
			width:700px;
			margin:0 auto;		
		}
		.active#all-denka  #main-inner{width:600px;}
		.active-sp#all-denka  #main-inner{width:420px;}
		.active-sp2#all-denka  #main-inner{width:300px;}

		#all-denka #main img{width:100%;}


	/* HEMS */

#hems #wrapper{
	width:100%;
	margin:0;
	padding-top:90px;
}

	#subcontent{
		width:957px;
		margin:0 auto;
	}
	.flexible #subcontent{width:auto;}


/* なぜ、スマートハウスがいいの？ */

	#hems1{
		width:980px;
		margin:0 auto;
		padding-bottom:20px;
	}
	.flexible #hems1{width:100%;}

		#hems1 h1,
		#hems2 h1,
		#hems3 h1,
		#hems4 h1{
			margin:15px 0;
			width:728px;
		}
		.flexible #hems1 h1,
		.flexible #hems2 h1,
		.flexible #hems3 h1,
		.flexible #hems4 h1{
			margin:15px 0 10px 3%;
			width:600px;
		}
		.active #hems1 h1,
		.active #hems2 h1,
		.active #hems3 h1,
		.active #hems4 h1{width:480px;}
		.active-sp #hems1 h1,
		.active-sp #hems2 h1,
		.active-sp #hems3 h1,
		.active-sp #hems4 h1{width:440px;}
		.active-sp2 #hems1 h1,
		.active-sp2 #hems2 h1,
		.active-sp2 #hems3 h1,
		.active-sp2 #hems4 h1{width:340px;}
		.active-sp3 #hems1 h1,
		.active-sp3 #hems2 h1,
		.active-sp3 #hems3 h1,
		.active-sp3 #hems4 h1{width:280px;}

			#hems1 h1 img,
			#hems2 h1 img,
			#hems3 h1 img,
			#hems4 h1 img{width:100%;}

			.flexible #hems1 ol{
				width:94%;
				margin:0 auto;
			}

			#hems1 ol li{
				margin-bottom:15px;
				padding:25px 0 25px 155px;
				list-style:none;
				background-color:#fff2f2;
				background-repeat:no-repeat;
				background-position:48px 22px;
			}
			.flexible #hems1 ol li{				
				padding:20px 0 20px 90px;
				background-size:40px auto;
				background-position:25px 22px;
			}
			.active #hems1 ol li{padding:20px 4% 20px;}			
			.active-sp #hems1 ol li{background-size:30px auto;}			
			.active-sp2 #hems1 ol li{
				background-position:12px 22px;
				background-size:16px auto;
			}			
			.active-sp3 #hems1 ol li{
				background-position:10px 22px;
				background-size:15px auto;
			}			

			#hems1 ol li#num1{background-image:url(../sittoku/images/num1.png);}
			#hems1 ol li#num2{background-image:url(../sittoku/images/num2.png);}
			#hems1 ol li#num3{background-image:url(../sittoku/images/num3.png);}

				#hems1 ol li h2{
					margin:0 0 15px;
					color:#0c308e;
					font-size:180%;
					font-weight:bold;
					line-height:132%;
				}
				.flexible #hems1 ol li h2{
					font-size:160%;
				}
				.active #hems1 ol li h2{
					margin:20px 0 25px 60px;
					font-size:140%;
				}
				.active-sp #hems1 ol li h2{
					margin:10px 0 25px 55px;
					font-size:120%;
				}
				.active-sp2 #hems1 ol li h2{
					margin:5px 0 15px 27px;
					font-size:100%;
				}

				.active #num2 h3{
					padding:0 4%;
					text-align:center;
				}
				.active #num2 h3 img{width:100%;}

			#hemsgraph{margin-left:70px;}
			.flexible #hemsgraph{
				margin-left:0;
			}
			.active #hemsgraph{
				padding-right:0;
				text-align:center;
			}
			.active-sp #hemsgraph img{width:100%;}

			#hemsgraphnote{
				width:500px;
				margin-left:95px;
				color:#0c308e;
			}
			.flexible #hemsgraphnote{
				margin-left:20px;
			}
			.active #hemsgraphnote{
				width:94%;
				margin-left:auto;
				margin-right:auto;
			}

			.flexible #num3 p{
				width:90%;
				margin-left:0;
			}
			.active #num3 p{
				margin-left:auto;
				margin-right:auto;
			}
			.active-sp #num3 p{width:100%;}

			.flexible #num3 h3 img{width:90%;}
			.active #num3 h3 img{width:100%;}

			.flexible #num3 p img{width:100%;}



/* スマートハウスの仕組み */

	#hems2-wrapper{background:#f0f7ff;}

	#hems2{
		width:980px;
		margin:0 auto;
		padding:5px 0 40px;
	}
	.flexible #hems2{width:100%;}

			#hems2 h1 img{height:100%;}


		#shikumi1{
			width:764px;
			margin:20px auto 40px;
		}
		.active #shikumi1{
			width:96%;
		}

			#shikumi1 h2{
				margin:0 0 15px 2%;
			}
			.active-sp #shikumi1 h2 img{height:14px;}
		
				.active #shikumi1image img{
					margin-top:10px;
					width:100%;
				}
		
		#point1,
		#point2,
		#point3,
		#point4{position:relative;}
			
		#point1{
			height:38px;
			margin-bottom:-38px;
			top:40px;
		}
		#point2{
			height:77px;
			margin-bottom:-77px;
			top:93px;
		}
		#point3{
			height:96px;
			margin-bottom:-96px;
			top:570px;
		}
		#point4{
			height:96px;
			margin-bottom:-96px;
		}

		#point1 p,
		#point2 p,
		#point3 p,
		#point4 p{
			margin:0;
			position:absolute;
			padding:10px 15px;
			background:#c30;
			color:#fff;
			line-height:140%;		
			-moz-box-shadow:0px 1px 1px 0px #aaa;
			-webkit-box-shadow:0px 1px 1px 0px #aaa;
			box-shadow:0px 1px 1px 0px #aaa;
			border-radius:5px;
			-moz-border-radius:5px;
			-webkit-border-radius:5px;
			opacity:0;
		}

		#point1 p{
			width:210px;
			left:-20px;
		}
		#point2 p{
			width:210px;
			left:-20px;
		}
		#point3 p{
			width:380px;
			left:374px;
		}



		#shikumi2{
			width:764px;
			margin:0 auto;
		}
		
			.active #shikumi2{
				width:96%;
			}

			#shikumi2 h2{
				margin:0 0 15px 2%;
			}

			.active-sp #shikumi2 h2 img{height:14px;}
		
		.active #shikumi2image{
			text-align:center;
		}
		.active #shikumi2image img{
			margin-top:20px;
			width:70%;
		}
		.active-sp #shikumi2image img{
			margin-top:10px;
			width:80%;
		}
		.active-sp2 #shikumi2image img{
			margin-top:10px;
			width:90%;
		}


		#shikumi2image{
			text-align:right;
			margin-top:20px;
		}

		#point4 p{
			width:230px;
			top:21px;
			left:-20px;
		}

		#hems2-footernote{
			width:764px;
			margin:20px auto 0;
			color:#0c308e;
			font-size:200%;
			font-weight:bold;
			line-height:130%;
		}
		.active #hems2-footernote{
			width:94%;
			font-size:110%;
		}


		.active #point1,
		.active #point2,
		.active #point3,
		.active #point4{
			position:static;
			width:100%;
			height:auto;
			margin:0 auto 10px;
		}

		.active #point1 p,
		.active #point2 p,
		.active #point3 p,
		.active #point4 p{
			width:92%;
			margin:0 auto;
			position:static;
			padding:10px 3%;
			background:#c30;
			color:#fff;
			line-height:140%;	
			opacity:1;
		}


/* スマートハウス構成機器 */

	#hems3{
		width:980px;
		margin:0 auto -10px;
		padding-bottom:20px;
	}
	.flexible #hems3{width:100%;}

		#hems3 h1{margin:0;}
		.flexible #hems3 h1{margin:0 0 0 3%;}

		#hems3 .wrapper-image{
			margin-top:-20px;
			padding:15px 0 30px;
			text-align:center;			
			background:#637930;
		}
		.active-sp #hems3 .wrapper-image{
			margin:-10px 0;
		}
			
			#hems3 .wrapper-image h2{
				margin-bottom:10px;
				color:#fff;
				font-size:100%;
				font-weight:bold;
			}

			.active #hems3 .wrapper-image #hems3_1{width:90%;}

			#hems3_2{
				position:relative;
				width:740px;
				margin:0 auto -175px;
				text-align:right;
				top:-175px;
			}

			.active  #hems3_2{
				width:90%;
				top:-160px;				
				margin-bottom:-160px;
			}
			.active-sp  #hems3_2{
				top:-120px;
				margin-bottom:-120px;
			}
			.active-sp2  #hems3_2{
				top:-100px;
				margin-bottom:-100px;
			}

			#hems3_2 img{width:48%;}



/* スマートハウス診断 */

	#hems4-wrapper{background:#eee;}

	#hems4{
		width:980px;
		margin:0 auto;
		padding-bottom:20px;
	}
	.flexible #hems4{width:100%;}

		#hems4 h1{margin:0 0 -15px;}
		.flexible #hems4 h1{margin:0 0 -15px 3%;}
		.active-sp #hems4 h1{margin-bottom:-10px;}

		#hems4cap{
			margin:0;
			color:#c30;
			font-size:140%;
			font-weight:bold;
			line-height:140%;
		}
		.flexible #hems4cap{margin:0 3%;}
		.active-sp #hems4cap{font-size:120%;
		}
		.active-sp2 #hems4cap{font-size:100%;}
		
		#hems4note{
			margin-bottom:30px;
			color:#0c308e;
		}
		.flexible #hems4note{
			margin-left:3%;
			margin-right:3%;
		}


			.flexible #hems4 ol{
				width:94%;
				margin:0 auto;
			}

			#hems4 ol li{
				margin-bottom:15px;
				padding:25px 0 25px 155px;
				list-style:none;
				background-color:#fff;
				background-repeat:no-repeat;
				background-position:48px 22px;
			}
			.flexible #hems4 ol li{				
				padding:20px 0 20px 90px;
				background-size:40px auto;
				background-position:25px 22px;
			}
			.active #hems4 ol li{padding:20px 4% 20px;}			
			.active-sp #hems4 ol li{background-size:30px auto;}			
			.active-sp2 #hems4 ol li{
				background-position:12px 22px;
				background-size:16px auto;
			}			
			.active-sp3 #hems4 ol li{
				background-position:10px 22px;
				background-size:15px auto;
			}			

			#hems4 ol li#shindan1{background-image:url(../sittoku/images/num1.png);}
			#hems4 ol li#shindan2{background-image:url(../sittoku/images/num2.png);}
			#hems4 ol li#shindan3{background-image:url(../sittoku/images/num3.png);}

				#hems4 ol li h2{
					margin:0 0 15px;
					color:#0c308e;
					font-size:180%;
					font-weight:bold;
					line-height:132%;
				}
				.flexible #hems4 ol li h2{
					font-size:160%;
				}
				.active #hems4 ol li h2{
					margin:20px 0 25px 60px;
					font-size:140%;
				}
				.active-sp #hems4 ol li h2{
					margin:10px 0 25px 55px;
					font-size:120%;
				}
				.active-sp2 #hems4 ol li h2{
					margin:0 0 15px 27px;
					font-size:100%;
				}

				.active-sp #hems4 ol li h2 img{height:17px;}
				.active-sp2 #hems4 ol li h2 img{height:15px;}
				.active-sp3 #hems4 ol li h2 img{height:12.5px;}


			.flexible #hems4 ol li p img{width:98%;}
			.active #hems4 ol li p img{width:100%;}

		#contactus{
			width:740px;
			margin:30px auto 5px;
		}
		.active #contactus{
			width:100%;
		}
		.active-sp #contactus{margin:20px auto 0;}

			#contactus1{
				width:243px;
				margin:0 20px 0 0;
				float:left;
			}
			.active #contactus1{
				margin:0 auto 10px;
				float:none;
			}
			.active-sp #contactus1{
				width:38%;
			}
			.active-sp #contactus1{margin:0 auto 5px;}

			#contactus2{
				margin:0 auto;
				width:477px;
				float:left;
			}
			.active #contactus2{float:none;}
			.active-sp #contactus2{
				width:70%;
			}
			
			#contactus1 img,
			#contactus2 img{width:100%;}



	/* 知っておきたい蓄電池の基礎知識 */

	body#chikudenchi{background:none;}
	
	#chikudenchi #wrapper{width:100%;}

		#chikudenchi #main{background:none;}

			#chikudenchi .item{
				max-width:980px;
				width:100%;
				margin:45px auto 0;
			}
	
				#chikudenchi .item h3{
					color:#0d318f;
					margin-bottom:20px;
					padding-left:25px;
					font-size:170%;
					font-weight:bold;
					background:url(../shared/dot_circle-pink2.png) no-repeat 0 1px;
				}
	
				#chikudenchi .item-inner{
					padding:25px 30px;
					background:#fff2f2;
				}
				
				#chikudenchi .item-inner:after{
					content: "";
					display: block;
					visibility: hidden;
					clear: both;
					height: 0px;
				}
				* html #chikudenchi .item-inner{display: inline-table;}
				/* no ie mac \*/
				* html #chikudenchi .item-inner{height:1%;}
				#chikudenchi .item-inner{display: block; min-height:0;}
				/* */


					#chikudenchi .item-inner .left-image{
						float:left;
						margin-right:50px;
					}

					#chikudenchi .item-inner .right-image{
						float:right;
						margin-left:30px;
					}
					#chikudenchi .item-inner .left-image img,
					#chikudenchi .item-inner .right-image img{
						-moz-box-shadow:1px 1px 1px 0px #ccc;
						-webkit-box-shadow:1px 1px 1px 0px #ccc;
						box-shadow:1px 1px 1px 0px #ccc;
					}

						#chikudenchi .item-inner h4{
							color:#0d318f;
							margin-bottom:15px;
							font-size:150%;
							font-weight:bold;
						}
	
						#chikudenchi .item-inner ul{
							padding-left:20px;
						}
						
							#chikudenchi .item-inner li{
								margin-bottom:5px;
							}
							
						#chikudenchi .item-inner p{
						}


						#chikudenchi .item-inner h5{
							color:#f60;
							margin:20px 0 15px;
							font-size:140%;
							font-weight:bold;
						}

				#chikudenchi .item#oshiage h3{
					margin-bottom:10px;
				}
				
					#chikudenchi .item#oshiage .item-inner .right-image{
						position:relative;
						margin:0 0 -40px;
						top:-40px;
					}
					
					.priority{
						max-width:390px;
						width:100%;
					}
					
					.priority img{
						width:100%;
					}


				#oshiagenote{
					max-width:980px;
					width:94%;
					margin:35px auto 50px;
				}

					#oshiagenote h4{
						position:relative;
						color:#c30;
						font-size:140%;
						font-weight:bold;
						left:-11px;
					}

						#oshiagenote h5{
							color:#0d318f;
							margin:20px 0 15px;
							font-size:150%;
							font-weight:bold;
						}
						
						#oshiagenote table{
							border-collapse:collapse;
							width:100%;
						}
						
						#oshiagenote th{
							width:30%;
							padding:10px 0;
							font-weight:normal;
							background:#ffd9d9;
							border:1px solid #fff;
						}

						#oshiagenote td{
							width:14%;
							padding:10px 0;
							text-align:center;
							background:#ffd9d9;
							border:1px solid #fff;
						}
						
						#oshiagenote .tableheader th{
							width:auto;
							padding:5px 0;
							color:#fff;
							background:#ff8080;
						}


				#chikudenchi #chart p{
					max-width:980px;
					width:94%;
					margin:0 auto;
				}

					#chikudenchi #chart p img{width:100%;}

	
				
				#chikudenchi .item#chart,
				#chikudenchi .item#lineup{
					max-width:100%;
					width:100%;
					margin:0;
					padding:35px 0;
					background:#f0f7ff;
				}
				
				#chikudenchi .item#lineup{background:#eee;}
				
					#chikudenchi .item-inner2{
						max-width:980px;
						width:100%;
						margin:0 auto;
					}
					
					#chikudenchi .item#lineup ul{
						max-width:960px;
						width:100%;
						margin:0 auto;
					}
					
						#chikudenchi .item#lineup li{
							float:left;
							width:230px;
							height:450px;
							margin:5px;
							background:#fff;
							list-style:none;
						}
					
							#chikudenchi .item#lineup li h4{
								text-align:center;
							}
					
							#chikudenchi .item#lineup li table{
								width:90%;
								margin:0 auto;
								border-collapse:collapse;
							}
					
							#chikudenchi .item#lineup li th,
							#chikudenchi .item#lineup li td{
								padding:7px 0;
								text-align:center;
								font-size:90%;
								line-height:130%;
							}
					
							#chikudenchi .item#lineup li th{
								width:50%;
								font-weight:normal;
								background:#ff8080;
								color:#fff;
								border:1px solid #fff;
							}
				
							#chikudenchi .item#lineup li td{
								background:#fff2f2;
								border-bottom:1px solid #ffd9d9;
							}
							#chikudenchi .item#lineup li tr:last-child td{border:none;}
				


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

			#chikudenchi .item{margin-top:25px;}
			
				#chikudenchi .item h3{
					color:#0d318f;
					margin-left:3%;
					margin-bottom:10px;
					padding-left:25px;
					font-size:130%;
				}

					#chikudenchi .item-inner .left-image,
					#chikudenchi .item-inner .right-image{
						float:none;
						margin:0;
						text-align:center;
					}

					#chikudenchi .item-inner .left-image img,
					#chikudenchi .item-inner .right-image img{
						max-width:500px;
						width:100%;
						margin-bottom:10px;

					}
					
					#chikudenchi .item#oshiage .item-inner .right-image{
						margin:0;
						top:0;
					}
					
					.priority{
						margin: 0 auto 30px;
						max-width:390px;
						width:100%;
					}
					
					#chikudenchi .item#lineup ul{max-width:720px;}
		}


		@media screen and (max-width: 740px) {
					
					#chikudenchi .item#lineup ul{max-width:480px;}
		}

		@media screen and (max-width: 510px) {
					
						#chikudenchi .item#lineup li{
							float:none;
							width:94%;
						}

		}