@charset "UTF-8";


/*************************
トップページ共通
**************************/
.topttl{
margin:0 auto 20px auto;
}


.ttlmore{
display:block;
position:absolute;
width:105px;
height:24px;
background-color:#FFFFFF;
top:15px;
right:0;
}

.toplead{
font-size:14px;
margin-bottom:20px;	
}

/*************************
サービスラインナップ
**************************/

.topThreeline{}

.topThreeline:after {
content: "."; 
display: block; 
height: 0; 
font-size:0;
clear: both; 
visibility:hidden;
}

.topThreeline .Oneline{
display:block;
width:313px;
float:left;
margin-right:20px;	
}

.topThreeline .Oneline.last{
float:right;
margin-right:0;	
}


.topThreeline .Oneline p.panel{
width:313px;
height:237px;
background-position:left top;
background-repeat:no-repeat;
overflow:hidden;	
}

.topThreeline .Oneline p.panel.compact{background-image:url(../../img/top/img_top_service_01_bg.jpg);}
.topThreeline .Oneline p.panel.yourbrand{background-image:url(../../img/top/img_top_service_02_bg.jpg);}
.topThreeline .Oneline p.panel.syokizero{background-image:url(../../img/top/img_top_service_03_bg.jpg);}

#base .topThreeline .Oneline p.panel a:hover img.BtnImg{
filter: alpha(opacity=30);
-moz-opacity: 0.30;
opacity: 0.30;
}

.topThreeline .Oneline p.txt{}

.topThreeline .Oneline p.txt a{
display:block;
width:260px;
height:42px;
margin:0;
padding:6px 0 0 53px;
background-image:url(../../img/top/bg_top_service_under.gif);
background-repeat:no-repeat;
color:#65686a;
text-decoration:none;
text-align:left;
font-size:14px;
line-height:18px;
}



/*************************
商品ラインナップ
**************************/

.topfourline{}

.topfourline:after {
content: "."; 
display: block; 
height: 0; 
font-size:0;
clear: both; 
visibility:hidden;
}


.topfourline .Oneline{
display:block;
width:230px;
float:left;
margin-right:20px;
margin-bottom:20px;
}

.topfourline .Oneline.last{margin-right:0;}


.topfourline .Oneline .panel{
width:230px;
height:198px;
overflow:hidden;
}

.topfourline .Oneline .txt{
display:block;
height:32px;
text-align:left;
}

.topfourline .Oneline .txt a{
display:block;
height:25px;
text-align:left;
font-size:12px;
color:#FFFFFF;
text-decoration:none;
padding-left:28px;
padding-top:7px;
background-image:url(../../img/common/icon_arrow_small.png);
background-repeat:no-repeat;
background-position:10px 10px;
}

.topfourline .Oneline.solar .txt a{background-color:#1668a3;}
.topfourline .Oneline.monitor .txt a{background-color:#196a11;}
.topfourline .Oneline.optimizer .txt a{background-color:#ce510d; letter-spacing:-0.04em;}
.topfourline .Oneline.battery .txt a{background-color:#bc2d06;}



/*************************
保証・アフターメンテナンス
**************************/

.topWrranty{
display:block;
background-color:#f0f5ff;
padding:10px;
}

.topWrranty:after {
content: "."; 
display: block; 
height: 0; 
font-size:0;
clear: both; 
visibility:hidden;
}

.topWrranty ul{
display:block;
width:320px;
float:left;
}

.topWrranty ul li.img{
display:block;
width:96px;
float:left;
}

.topWrranty ul li.txt{
display:block;
width:209px;
padding-top:20px;
float:right;
text-align:left;
font-size:26px;
}

.topWrranty ul li.txt span{font-size:14px;}


/*************************
お知らせ
**************************/
.infoBox{}

.infoBox:after {
content: "."; 
display: block; 
height: 0; 
font-size:0;
clear: both; 
visibility:hidden;
}

.infoBox dl{
display:block;
font-size:14px;
line-height:23px;
padding:10px 0;
border-bottom:1px solid #efefef;	
}

.infoBox dl:after {
content: "."; 
display: block; 
height: 0; 
font-size:0;
clear: both; 
visibility:hidden;
}

.infoBox dl dt{
display:block;
width:105px;
float:left;
text-align:left;
}

.infoBox dl dd{
display:block;
float:right;
width:747px;
text-align:left;
}

.infoBox dl dd a{
color:#65686a;
text-decoration:none;
}

.infoBox dl dd a:hover{color:#FF0000;}

.infoBox dl dd.wappen{
display:block;
float:left;
width:120px;
text-align:left;
}

.infoBox dl dd.wappen.pdf{
background-image: url("../../img/info/pdf.gif");
background-position:right center;
background-repeat: no-repeat;
}

/*************************
会社情報
**************************/
.companyinfoBox{
	width:100%;
	height:377px;
	background-image:url(../../img/top/bg_top_company.gif);
	background-position:center top;
	margin-bottom:30px;
}

.companyinfoBox .inner{
	width:980px;
	margin:0 auto;	
}


.companyinfoBox .inner:after {
content: "."; 
display: block; 
height: 0; 
font-size:0;
clear: both; 
visibility:hidden;
}


.companyinfoBox .Left{
width:666px;
float:left;	
}

.companyinfoBox .Left:after {
content: "."; 
display: block; 
height: 0; 
font-size:0;
clear: both; 
visibility:hidden;
}


.companyinfoBox .Left .img{
display:block;
float:left;
width:230px;
overflow:hidden;
}

.companyinfoBox .Left .txt{
display:block;
float:right;
width:396px;
padding:30px 20px 20px 0;
text-align:left;
}

.companyinfoBox .Left .txt h2{ margin-bottom:20px;}
.companyinfoBox .Left .txt p{ margin-bottom:20px;}
.companyinfoBox .Left .txt p.more{
margin-bottom:0;
width:105px;
height:27px;
background-color:#FFFFFF;	
}

.companyinfoBox .Right{
width:314px;
float:right;
}

.companyinfoBox .Right dl{display:block; padding:30px 0 0 24px;}

.companyinfoBox .Right dl dt{
display:block;
text-align:left;
margin-bottom:20px;
}

.companyinfoBox .Right dl dd{
display:block;
margin-bottom:10px;
}



/*************************
メインパネル
**************************/

.MegaSolarListBox{
width:1000px;
margin:0 -20px 0 0;
padding:0;
text-align:left;
position:relative;	
}

.MegaSolarListBox:after{
content: "."; 
display: block; 
height: 0; 
font-size:0;	
clear: both; 
visibility:hidden;	
}

.MegaSolarListBox ul{display:block;}

.MegaSolarListBox ul:after{
content: "."; 
display: block; 
height: 0; 
font-size:0;	
clear: both; 
visibility:hidden;	
}

.MegaSolarListBox ul li{
display:block;
float:left;
width:224px;
height:162px;
border:1px solid #CCCCCC;
padding:2px;
margin-right:20px;
margin-bottom:20px;
}

.MegaSolarListBox ul li a img{
width:224px;
height:162px;	
}

.MegaSolarListBox ul li a{
display:block;
width:224px;
height:162px;
overflow:hidden;
position:relative;
}

.MegaSolarListBox ul li a:hover{
filter: alpha(opacity=70);
-moz-opacity: 0.70;
opacity: 0.70;
}

.MegaSolarListBox ul li a img,
.MegaSolarListBox ul li a span{display:block;}

.MegaSolarListBox ul li a span{position:absolute;}

.MegaSolarListBox ul li a span.Pltxt{
display:block;
height:20px;
padding-top:4px;
width:224px;
font-size:12px;
font-weight:normal;
color:#FFFFFF;
background-image:url(../../img/megasolar/bg_megasolar_listtxt.png);
background-repeat:repeat;
text-align:center;
bottom:0;
left:0;
letter-spacing:-0.03em;
}


.MegaSolarListBox ul li a span.Pltxt.txtover{
font-size:10px;
padding-top:6px;
}


/*************************
バナーエリア
**************************/
.topfourline ul{
display:block;
width:1000px;
margin-right:-20px;
}

.topfourline ul:after{
content: "."; 
display: block; 
height: 0; 
font-size:0;	
clear: both; 
visibility:hidden;	
}

.topfourline ul.twoline{
width:500px;
margin:0 0 0 250px;
}


.topfourline ul li{
display:block;
float:left;
width:230px;
margin:0 20px 20px 0;
}


/*************************
ダウンロード
**************************/
.topTwoline ul{
display:block;
}

.topTwoline ul{
display:block;
width:1000px;
margin-right:-20px;
}

.topTwoline ul:after{
content: "."; 
display: block; 
height: 0; 
font-size:0;	
clear: both; 
visibility:hidden;	
}


.topTwoline ul li{
display:block;
float:left;
width:480px;
margin:0 20px 20px 0;
}



/*************************
メインパネル
**************************/
#topmainpane{
	position:relative;
	padding:10px 0 35px 0;
}

.bx-wrapper{
	width: 100% !important;
	overflow: hidden;
	position: relative !important;
}
.bx-window{
	width:1050px; !important;
	margin: 0 auto !important;
	overflow: visible !important;
	height: 430px;
}

#slider div{
width:1050px;
text-align:center;
}

#slider div a{
display:block;
width:980px;
height: 430px;
margin:0 auto;
}


/* prev next */
.prev-next{
	width: 1120px;
	margin: 0 auto;
	position: relative;
}

.prev-next a{text-decoration:none;}
	.bx-prev,
	.bx-next{
		display: block;
		text-align: center;
		width: 70px;
		height: 430px;
		position: absolute;
		top:-430px;
		text-decoration: none;
		overflow:hidden;
		background-repeat:no-repeat;
		background-position:center;
	}
		.bx-prev {left: 0; background-image:url(../../img/top/btn_panel_left.png);}
		.bx-next {right:0; background-image:url(../../img/top/btn_panel_right.png);}
		.bx-prev:hover,
		.bx-next:hover{
				filter: alpha(opacity=70);
				-moz-opacity: 0.70;
				opacity: 0.70;
		}

		

/* frame */

#base{
	overflow-x: hidden;
}

#frame{
width:980px;
margin:0 auto;
position:relative;
}

#slider-frame-left a{
	display:block;
	height: 430px;
	position: absolute;
	width: 980px;
	top:-430px;
	right:1050px;
	background:url(../../img/top/frame_bg.png);
}


#slider-frame-right a{
	display:block;
	height: 430px;
	position: absolute;
	width: 980px;
	top:-430px;
	left:1050px;
	background:url(../../img/top/frame_bg.png);
}


@media only screen and (max-device-width: 1050px), only screen and (max-width: 1050px) {
.bx-window{width: 980px; !important;}
#slider div{width:980px;}
.prev-next{width:980px;}
#slider-frame-left a{right:980px;}
#slider-frame-right a{left:980px;}
}