@charset "utf-8";

@import "/css/common.css";


/*---------------------------------------
.tabMainBox
(Tab after <h1>)
----------------------------------------*/
#contentsInner ul.tabMainBox{
	position:relative;
	overflow:hidden;
	width:625px;
}

/*--- Width  ---*/
#contentsInner ul.tabMainBox li.tabPrice {
	float:left;
	width:313px;
}

#contentsInner ul.tabMainBox li.tabOther {
	float:left;
	width:312px;
}

body#ranking #contentsInner ul.tabMainBox li {
	float:left;
	width:125px;
}


/*-- center --*/
#contentsInner ul.tabMainBox li.tabElectric a,
#contentsInner ul.tabMainBox li.tabSort a,
#contentsInner ul.tabMainBox li.tabHousehold a {
	padding:5px 0;
	border-right:1px solid #C7D6D6;
	float:left;
	display:block;
	background:#FFF url(/images/tab_main_bg.gif) no-repeat center bottom;
	text-align:center;
}


/*-- leftmost --*/
#contentsInner ul.tabMainBox li.tabPrice a,
#contentsInner ul.tabMainBox li.tabCharge a {
	padding:5px 0;
	border-right:1px solid #C7D6D6;
	float:left;
	display:block;
	background:#FFF url(/images/tab_main_bg.gif) no-repeat left bottom;
	text-align:center;
}


/*-- rightmost --*/
#contentsInner ul.tabMainBox li.tabOther a,
#contentsInner ul.tabMainBox li.tabCompany a {
	padding:5px 0;
	float:left;
	display:block;
	background:#FFF url(/images/tab_main_bg.gif) no-repeat right bottom;
	text-align:center;
}


/*--- the last has no border ---*/
#contentsInner ul.tabMainBox li.tabOther a,
#contentsInner ul.tabMainBox li.tabCompany a {
	border:0;
}

/*--- Width a ---*/
#contentsInner ul.tabMainBox li.tabPrice a,
#contentsInner ul.tabMainBox li.tabOther a {
	width:312px;
}

#contentsInner ul.tabMainBox li.tabCharge a,
#contentsInner ul.tabMainBox li.tabElectric a,
#contentsInner ul.tabMainBox li.tabSort a,
#contentsInner ul.tabMainBox li.tabHousehold a {
	width:124px;
}

#contentsInner ul.tabMainBox li.tabCompany a {
	width:125px;
}



/*----- stay -----*/
/*-- center --*/
body.electric #contentsInner ul.tabMainBox li.tabElectric a,
body.sort #contentsInner ul.tabMainBox li.tabSort a,
body.household #contentsInner ul.tabMainBox li.tabHousehold a {
	background:#E6F5FF url(/images/tab_main.gif) no-repeat center bottom;
	color:#444;
	font-weight:bold;
	text-decoration:none;
}


/*-- leftmost --*/
body#comPrice #contentsInner ul.tabMainBox li.tabPrice a,
body#comPopup #contentsInner ul.tabMainBox li.tabPrice a,
body.charge #contentsInner ul.tabMainBox li.tabCharge a {
	background:#E6F5FF url(/images/tab_main.gif) no-repeat left bottom;
	color:#444;
	font-weight:bold;
	text-decoration:none;
}

/*-- rightmost --*/
body#comOther #contentsInner ul.tabMainBox li.tabOther a,
body#comPopupOther #contentsInner ul.tabMainBox li.tabOther a,
body.company #contentsInner ul.tabMainBox li.tabCompany a {
	background:#E6F5FF url(/images/tab_main.gif) no-repeat right bottom;
	color:#444;
	font-weight:bold;
	text-decoration:none;
}

/*----- hover -----*/
/*-- center --*/
#contentsInner ul.tabMainBox li.tabElectric a:hover,
#contentsInner ul.tabMainBox li.tabSort a:hover,
#contentsInner ul.tabMainBox li.tabHousehold a:hover {
	background:#E6F5FF url(/images/tab_main.gif) no-repeat center bottom;
}


/*-- leftmost --*/
#contentsInner ul.tabMainBox li.tabPrice a:hover,
#contentsInner ul.tabMainBox li.tabCharge a:hover {
	background:#E6F5FF url(/images/tab_main.gif) no-repeat left bottom;
}

/*-- rightmost --*/
#contentsInner ul.tabMainBox li.tabOther a:hover,
#contentsInner ul.tabMainBox li.tabCompany a:hover {
	background:#E6F5FF url(/images/tab_main.gif) no-repeat right bottom;
}


/*---------------------------------------
.indentBox01
----------------------------------------*/
#contentsInner .indentBox01 {
	margin:17px 15px 30px;
}

/*---------------------------------------
.indentBox02
----------------------------------------*/
#contentsInner .indentBox02 {
	margin-bottom:40px;
	padding:0 14px 13px;
	border-right:#1191D8 solid 1px;
	border-bottom:#1191D8 solid 1px;
	border-left:#1191D8 solid 1px;
}

#contentsInner .indentBox02 .caption {
	padding:20px 0 0 2px;
	color:#003399;
	font-weight:bold;
}


/*---------------------------------------
.indentBox03
----------------------------------------*/
#contentsInner .indentBox03 {
	margin-bottom:42px;
}


/*-------------------------------
h3
-------------------------------*/

#contentsInner .indentBox02 h3 {
	padding-top:20px;
	line-height:1.7em;
	color:#003399;
	font-weight:bold;
	font-size:107%;
	background:url(/images/line_dotted.gif) repeat-x left bottom;
}

/*---------------
p.lead
---------------*/
#contentsInner p.lead {
	padding:10px 2px 0;
}


/*------------------------------------------
.matrix
------------------------------------------*/

#contentsInner table span {
	font-size:85%;
	font-weight:normal;
}

#contentsInner table .total {
	color:#F00;
	font-weight:bold;
}



#contentsInner table.matrix01,
#contentsInner table.matrix02,
#contentsInner table.matrix03,
#contentsInner table.matrix04 {
	width:100%;
}

#contentsInner table.matrix01 th,
#contentsInner table.matrix01 td,
#contentsInner table.matrix02 th,
#contentsInner table.matrix02 td,
#contentsInner table.matrix03 th,
#contentsInner table.matrix03 td {
	padding:5px 9px;
	vertical-align:middle;
	border:#C7D6D6 solid 1px;
}

#contentsInner table.matrix01 tr.itemRow th {
	background:url(/images/matrix_bg.gif) repeat left top;
	font-weight:bold;
	text-align:center;
}

	
#contentsInner table.matrix01 th {
	background-color:#E8F9FF;
	text-align:left;
}

/*------------------------
.matrix02
------------------------*/
#contentsInner table.matrix02 th {
	background-color:#E8F9FF;
	font-weight:bold;
	text-align:left;
}

/*.-----------------------
matrix03
------------------------*/
#contentsInner table.matrix03 th {
	background:url(/images/matrix_bg.gif) repeat left top;
	font-weight:bold;
	text-align:left;
}

/*------------------------
.matrix04
------------------------*/
#contentsInner table.matrix04 td {
	padding:5px 9px;
	border-left:#C7D6D6 solid 1px;
	border-right:#C7D6D6 solid 1px;
	border-bottom:#C7D6D6 solid 1px;
	text-align:left;
}

#contentsInner table.matrix04 td.button {
	margin:0 3px;
	vertical-align:middle;
}

#contentsInner table.matrix04 td .detailButton a {
	display:block;
	width:181px;
	height:31px;
	overflow:hidden;
	background:url(/images/button_03.gif) no-repeat 0 0;
	text-indent:-9999px;
}

#contentsInner table.matrix04 td .detailButton a:hover {
	background-position:0 -31px;
}

#contentsInner table.matrix04 td .link {
	text-align:right;
}

#contentsInner table.matrix04 td .link a {
	padding:2px 0 2px 15px;
	background:url(/images/icon_link_01.gif) no-repeat 0 0.4em;
}


/*---------------------------------------------
body#comPrice
body#comOthe
body#comPopup
body#comPopupOther
---------------------------------------------*/
/*---------------------
.cominfoArea
---------------------*/

#contentsInner .cominfoArea {
	margin:15px 2px 7px;
	height:100%;
	overflow:hidden;
}

#contentsInner .cominfoArea img.logo {
	float:left;
	width:145px;
	border:#EEEEEE solid 1px;
}

#contentsInner .cominfoArea .comCatch {
	padding:0 9px 0 12px;
	float:right;
	width:453px;
}

#contentsInner .cominfoArea .comCatch .prText {
	padding:7px 5px 5px 11px;
	margin-bottom:15px;
	border:#C7D6D6 solid 1px;
	width:435px;
}

#contentsInner .cominfoArea .comCatch .prText p {
	padding-bottom:5px;
	font-size:85%;
}

#contentsInner .cominfoArea .comCatch .prText .prTextLink {
	margin:5px 5px 0 0;
	text-align:right;
}

#contentsInner .cominfoArea .comCatch .prText .prTextLink a {
	padding:2px 0 2px 15px;
	background:url(/images/icon_link_01.gif) no-repeat 0 0.4em;
}

#contentsInner .cominfoArea .detailButton {
	margin:0 auto;
	clear:both;
	width:272px;
}

#contentsInner .cominfoArea .detailButton a {
	display:block;
	width:272px;
	height:47px;
	overflow:hidden;
	background:url(/images/button_01.gif) no-repeat 0 0;
	text-indent:-9999px;
}

#contentsInner .cominfoArea .detailButton a:hover {
	background-position:0px -47px;
}


/*---------------------
p.leadText
---------------------*/
#contentsInner p.leadText {
	padding:15px 0 10px;
}

/*---------------------
p.addition
---------------------*/
#contentsInner p.addition {
	margin-top:5px;
	font-size:85%;
}

/*---------------------
div.additionBox
---------------------*/
#contentsInner div.additionBox {
	margin-top:5px;
	font-size:85%;
}

#contentsInner div.additionBox dt {
	margin-top:10px;
}

#contentsInner div.additionBox dd {
	margin-left:1em;
}

#contentsInner div.additionBox ul li {
	margin-left:1em;
	text-indent:-1em;
}


/*---------------------------------
body#comOther.html
body#comPopupOther
---------------------------------*/
/*--------------------
 .cominfoArea02
--------------------*/
#contentsInner .cominfoArea02 {
	margin-top:10px;
	overflow:hidden;
	height:100%;
}

#contentsInner .cominfoArea02 .infoTextArea {
	float:left;
	width:385px;
}

#contentsInner .cominfoArea02 .infoTextArea .read01 {
	margin-bottom:33px;
}


#contentsInner .cominfoArea02 .infoTextArea .readBox01 ul li {
	margin-left:0.8em;
	text-indent:-0.8em;
}


#contentsInner .cominfoArea02 .infoTextArea .read02,
#contentsInner .cominfoArea02 .infoTextArea div.read02Box {
	font-size:85%;
}	

#contentsInner .cominfoArea02 img.photo {
	float:right;
}

/*--------------------
div.read02Box
--------------------*/
#contentsInner .cominfoArea02 .infoTextArea div.read02Box h4 {
	font-weight:bold;
}

#contentsInner .cominfoArea02 .infoTextArea div.read02Box dl,
#contentsInner .cominfoArea02 .infoTextArea div.read02Box ul {
	margin-bottom:10px;
}

#contentsInner .cominfoArea02 .infoTextArea div.read02Box dd {
	padding-left:1em;
}


/*--------------------------------------
#formComBlock
--------------------------------------*/

#formComBlock {
	padding-bottom:8px;
	margin:9px 0 33px;
	width:595px;
	background:url(/images/form_com_bottom.gif) no-repeat left bottom;
}

#formComBlock .formComBox {
	padding-top:7px;
	width:595px;
	background:url(/images/form_com_top.gif) no-repeat left top;
}

#formComBlock .formComBox .comName {
	padding-bottom:5px;
	color:#FFF;
	background-color:#F00;
	font-weight:bold;
	font-size:189%;
	text-align:center;
}

#formComBlock .formComBox .apply {
	width:595px;
	background:url(/images/form_com_bg.gif) repeat-y left top;
}

#formComBlock .formComBox .apply .detailButton {
	padding:6px 161px 3px;
	width:272px;
}

#formComBlock .formComBox .apply .detailButton a {
	display:block;
	width:272px;
	height:47px;
	overflow:hidden;
	background:url(/images/button_form_01.gif) no-repeat 0 0;
	text-indent:-9999px;
}

#formComBlock .formComBox .apply .detailButton a:hover {
	background-position:0 -47px;
}



/*-----------------------------
body#hikaku

.chartArea
-----------------------------*/
#contentsInner .chartArea {
	margin-bottom:30px;
}

/*--- .comName ---*/
#contentsInner .chartArea .comName {
	padding:4px 0;
}

/*--- .comLogo ---*/
#contentsInner .chartArea .comName img {
	border:#EEEEEE solid 1px;
	vertical-align:middle;
}

#contentsInner .chartArea .comName a.brand {
	margin-left:5px;
	font-weight:bold;
	font-size:152%;
	zoom:1;
}

/*--------------------------
body#merit h2
body#howto h2
--------------------------*/

body#merit #contentsInner h2,
body#howto #contentsInner h2{
	margin-bottom:14px;
	padding:4px 0 0 89px;
	border-bottom:#1191D8 solid 2px;
	vertical-align:middle;
	color:#003399;
	min-height:28px;
	height:auto !important;
	height:28px;
	font-weight:bold;
	font-size:122%;
}

#contentsInner h2.merit01 {
	background:#FFF url(/images/merit/merit_01.gif) no-repeat left center;
}

#contentsInner h2.merit02 {
	background:#FFF url(/images/merit/merit_02.gif) no-repeat left center;
}

#contentsInner h2.merit03 {
	background:#FFF url(/images/merit/merit_03.gif) no-repeat left center;
}

#contentsInner h2.merit04 {
	background:#FFF url(/images/merit/merit_04.gif) no-repeat left center;
}

#contentsInner h2.merit05 {
	background:#FFF url(/images/merit/merit_05.gif) no-repeat left center;
}

#contentsInner h2.merit06 {
	background:#FFF url(/images/merit/merit_06.gif) no-repeat left center;
}


#contentsInner h2.howto01 {
	background:#FFF url(/images/howto/howto_01.gif) no-repeat left center;
}

#contentsInner h2.howto02 {
	background:#FFF url(/images/howto/howto_02.gif) no-repeat left center;
}

#contentsInner h2.howto03 {
	background:#FFF url(/images/howto/howto_03.gif) no-repeat left center;
}

#contentsInner h2.howto04 {
	background:#FFF url(/images/howto/howto_04.gif) no-repeat left center;
}

#contentsInner h2.howto05 {
	background:#FFF url(/images/howto/howto_05.gif) no-repeat left center;
}

#contentsInner h2.howto06 {
	background:#FFF url(/images/howto/howto_06.gif) no-repeat left center;
}

#contentsInner h2.howto07 {
	background:#FFF url(/images/howto/howto_07.gif) no-repeat left center;
}


/*----------------------------------
body#merit
body#difference
----------------------------------*/

#contentsInner .explainBox {
	margin-bottom:20px;
	min-height:100px;
	height:auto !important;
	height:100px;
}

#contentsInner .explainBox p {
	margin-top:-100px;
	width:415px;
}

#contentsInner .explainBox img {
	margin-left:425px;
}

#contentsInner .explainBox span.pageLink {
	padding:2px 0 2px 15px;
	background:url(/images/icon_link_01.gif) no-repeat 0 0.4em;
}

#contentsInner .differLeadBox,
#contentsInner .differLeadBox02{
	margin-top:11px;
	min-height:100px;
	height:auto !important;
	height:100px;
}
	
#contentsInner .differLeadBox p {
	margin:-100px 0 0 136px;
}

#contentsInner .differLeadBox02 p {
	margin-top:-100px;
	width:430px;
}

#contentsInner .differLeadBox02 img {
	margin-left:442px;
}

