@charset "utf-8";

/*=====================================================================================
	
	Document    : style.css
	Description : PC用（幅900px以上）
 
=====================================================================================*/

/*---------------------------------------------------------------------------

   ページナビ

---------------------------------------------------------------------------*/

#hems .pnav {
	list-style:none;
	max-width:1100px;
	margin-left:auto;
	margin-right:auto;
	padding-top:2%;
}

#hems .pnav li {
	float:left;
	text-align:center;
	width:49.0909%;
	
}

#hems .pnav li:nth-child(2n) {
	margin-left:1.81818%;
	display:inline;
}


@media screen and (max-width:1120px) {
	#hems .pnav {
		margin-left:2%;
		margin-right:2.2%;
	}
}


/*---------------------------------------------------------------------------

   『HEMS』ってなあに？

---------------------------------------------------------------------------*/

#hems .block02 {
	max-width:1100px;
	margin-left:auto;
	margin-right:auto;
	margin-top:4%;
	text-align:center;
}

@media screen and (max-width:1120px) {
	#hems .block02 {
		margin-left:2.7%;
		margin-right:2.7%;
	}
}

#hems .block02 ul {
	list-style:none;
	width:100%;
	padding-top:5%;
}

#hems .block02 li {
	width:48.18181%;
	background-color:#ffedf4;
	float:left;
}

#hems .block02 li:nth-child(2n) {
	margin-left:3.63636%;
	display:inline;
}

#hems .block02 li > .smd {
	margin-top:-4%;
}

#hems .block02 li p {
	text-align:left;
	padding:0 5% 3% 5%;
}


/*---------------------------------------------------------------------------

   なぜ今『HEMS』が必要？

---------------------------------------------------------------------------*/

#hems .block03 {
	max-width:1100px;
	margin-left:auto;
	margin-right:auto;
	margin-top:3%;
	text-align:center;
}

@media screen and (max-width:1120px) {
	#hems .block03 {
		margin-left:2.7%;
		margin-right:2.7%;
	}
}


/*---------------------------------------------------------------------------

   『HEMS』の将来

---------------------------------------------------------------------------*/

#hems .block04 {
	max-width:1100px;
	margin-left:auto;
	margin-right:auto;
	margin-top:3%;
	text-align:center;
}

@media screen and (max-width:1120px) {
	#hems .block04 {
		margin-left:2.7%;
		margin-right:2.7%;
	}
}


/*---------------------------------------------------------------------------

   『HEMS』とスマートメーター

---------------------------------------------------------------------------*/

#hems .block05 {
	max-width:1100px;
	margin-left:auto;
	margin-right:auto;
	margin-top:3%;
	text-align:center;
}

@media screen and (max-width:1120px) {
	#hems .block05 {
		margin-left:2.7%;
		margin-right:2.7%;
	}
}


/*---------------------------------------------------------------------------

   『HEMS』の役割

---------------------------------------------------------------------------*/

#hems .block06 {
	max-width:1100px;
	margin-left:auto;
	margin-right:auto;
	margin-top:3%;
	text-align:center;
}

@media screen and (max-width:1120px) {
	#hems .block06 {
		margin-left:2.7%;
		margin-right:2.7%;
	}
}

#hems .block06 #imgContainer {
	height:678px;
}


/*---------------------------------------------------------------------------

   どんなメリットがあるの？

---------------------------------------------------------------------------*/

#hems .block07 {
	max-width:1100px;
	margin-left:auto;
	margin-right:auto;
	text-align:center;
}

@media screen and (max-width:1120px) {
	#hems .block07 > .inner01 {
		margin-left:2.7%;
		margin-right:2.7%;
	}
}


/*---------------------------------------------------------------------------

   シェアNo.1 パナソニックのHEMS

---------------------------------------------------------------------------*/

#hems .block08 {
	max-width:1100px;
	margin-left:auto;
	margin-right:auto;
	margin-top:3%;
	text-align:center;
}

@media screen and (max-width:1120px) {
	#hems .block08 {
		margin-left:2.7%;
		margin-right:2.7%;
	}
}

#hems .block08 > .inner01 > .box,
#hems .block08 > .inner01 > .clm01 > .box {
	border:2px dashed #59b7e6;
	background-color:#e9f7fe;
	-moz-border-radius:3px;
    -webkit-border-radius:3px;
    border-radius:3px;
	text-align:left;
	margin-top:4%;
}

#hems .block08 > .inner01 > .clm01 > .box {
	margin-top:2%;
}

#hems .block08 > .inner01 > .clm01 > .box01,
#hems .block08 > .inner01 > .clm01 > .box02 {
	width:48.18181%;
}

#hems .block08 > .inner01 > .clm01 > .box01 {
	float:left;
}

#hems .block08 > .inner01 > .clm01 > .box02 {
	float:right;
}

#hems .block08 > .inner01 > .box p {
	padding:1% 2.5% 2.5% 2.5%;
}

#hems .block08 > .inner01 > .clm01 > .box p {
	padding:1% 5% 5% 5%;
}

#hems .block08 > .inner01 > .box > .smd  {
	margin-top:-1.5%;
	margin-left:1.5%;
}

#hems .block08 > .inner01 > .clm01 > .box > .smd {
	margin-top:-3.8%;
	margin-left:4%;
}

#hems .block08 > .inner01 > .box03 {
	position:relative;
}

#hems .block08 > .inner01 > .box03 p {
	margin-right:49.0909%;
}

#hems .block08 > .inner01 > .box03 .bt {
	width:48%;
	position:absolute;
	right:1.5%;
	top:12%;
}

#hems .block08 > .inner01 > .box04 p .blk {
	float:right;
	margin-left:3%;
}


@media screen and (max-width:1120px) {
	#hems .block08 > .inner01 > .box p {
		padding:2% 3% 3% 3%;
	}

	#hems .block08 > .inner01 > .clm01 > .box p {
		padding:2% 6% 6% 6%;
	}

	#hems .block08 > .inner01 > .box03 p {
		margin-right:0
	}
	
	#hems .block08 > .inner01 > .box03 .bt {
		width:inherit;
		position:relative;
		right:auto;
		top:auto;
		display:block;
		text-align:center;
		padding:0 3% 3% 3%;
	}
}

@media screen and (max-width:800px) {
	#hems .block08 > .inner01 > .box04 p .blk {
		float:none;
		display:block;
		text-align:center;
		margin-left:0;
		padding:1% 0 3% 0;
	}
}

#hems .block08 > .inner02 {
	padding-top:4%;
}


/*---------------------------------------------------------------------------

   補助金を活用できます！

---------------------------------------------------------------------------*/

#hems .block09 {
	max-width:1100px;
	margin-left:auto;
	margin-right:auto;
	text-align:center;
	margin-top:3%;
}

#hems .block09 > .inner01 p {
	padding:1% 0 2% 0;
}

@media screen and (max-width:1120px) {
	#hems .block09 > .inner01 {
		margin-left:2.7%;
		margin-right:2.7%;
	}
}


/*-------------------------------------------------------
   実績
-------------------------------------------------------*/

#hems .block09 > .inner02 {
	background-color:#d8f0fc;
	margin-top:3%;
	padding-bottom:3%;
}

#hems .block09 > .inner02 > .slide {
	position:relative;
	padding:0 5.54545%;
	margin-top:3%;
}

#hems .block09 > .inner02 > .slide ul {
	list-style:none;
}

#hems .block09 > .inner02 > .slide li {
	float:left;
	display:block;
	margin:0 13px;
}

#hems .block09 > .inner02 > .slide li img {
	width:100%;
	height:auto;
}

#hems .block09 > .inner02 > .slide .prev {
	position:absolute;
	left:0;
	top:0;
	width:4.54545%;
}

#hems .block09 > .inner02 > .slide .prev span {
	height:100%;
	display:block;
	position:relative;
}

#hems .block09 > .inner02 > .slide .prev a {
	width:100%;
	position:absolute;
	top:50%;
	left:0;
}

#hems .block09 > .inner02 > .slide .prev a img {
	margin-top:-75%;
}

#hems .block09 > .inner02 > .slide .next {
	position:absolute;
	right:0;
	top:0;
	width:4.54545%;
}

#hems .block09 > .inner02 > .slide .next span {
	height:100%;
	display:block;
	position:relative;
}

#hems .block09 > .inner02 > .slide .next a {
	width:100%;
	position:absolute;
	top:50%;
	right:0;
}

#hems .block09 > .inner02 > .slide .next a img {
	margin-top:-75%;
}


/*-------------------------------------------------------
   バナー
-------------------------------------------------------*/

#hems .block09 > .bn {
	list-style:none;
	padding-top:3%;
}

@media screen and (max-width:1120px) {
	#hems .block09 > .bn {
		margin-left:2.7%;
		margin-right:2.7%;
	}
}