@charset "UTF-8";

/* ==================================================
common-style
================================================== */
body {
	background:url(../images/com/bg-loop.jpg) repeat;
	line-height:1.8em;
}
h1 {
	height:78px;
	overflow:hidden;
	background:url(../images/com/logo-bg.png) no-repeat;
}
h1 a {
	width:193px;
	height:84px;
	display:block;
	overflow:hidden;
	position:relative;
	z-index:100;
}


/* header-style
====================== */
div#header {
    overflow: hidden;
}

/* navi-style
====================== */
.global-wrap {
}
.global {
	width:960px;
	height:78px;
	margin:0 auto;
	position:relative;
	z-index:10;
}
.global ul {
	position:absolute;
	top:30px;
	right:9px;
}
.global li {
	width:192px;
	height:48px;
	float:left;
}
.global li a {
	width:192px;
	height:48px;
	display:block;
}



/* totop-style
====================== */
#page_top {
	position: fixed;
	bottom: 20px;
	right: 30px;
	font-size: 77%;
}
#page_top a {
	background: #666;
	text-decoration: none;
	color: #fff;
	width: 45px;
	padding: 10px 0;
	text-align: center;
	display: block;
	border-radius: 5px;
}
#page_top a:hover {
	text-decoration: none;
	background: #888;
}

/* footer-style
====================== */
.footer-content-wrap {
	width:960px;
	height:96px;
	margin:0 auto;
	position:relative;
}
.footer-content-wrap p {
	text-align:right;
	margin-top:20px;
}


/* content-common-style
====================== */
.content {
	width:960px;
	margin:0 auto;
}
.side {
	width:192px;
	height:386px;
	float:left;
}
.side h2 {
	width:192px;
	height:0;
	padding-top:288px;
	overflow:hidden;
	display:block;
}
#page0 .side h2 { background:url(../images/com/side-01.png) no-repeat;}
#page1 .side h2 { background:url(../images/page1/side-01.png) no-repeat;}
#page2 .side h2 { background:url(../images/page2/side-01.png) no-repeat;}
#page3 .side h2 { background:url(../images/page3/side-01.png) no-repeat;}
#page4 .side h2 { background:url(../images/page4/side-01.png) no-repeat;}

.main {
	width:768px;
	float:right;
}
.head {
}
.sub .inner { padding:20px 20px 30px;}
.sub .inner-fit { margin:0 0 20px;}
.sub h3 {
	font-size:18px;
	font-weight:bold;
	color:#54883F;
	margin-bottom:10px;
}

.half-l {
	width:384px;
	float:left;
}
.half-r {
	width:384px;
	float:right;
}
.green-box {
	padding:10px 5px;
	background:#D9E1D6;
	border-radius: 6px;        /* CSS3草案 */  
    -webkit-border-radius: 6px;    /* Safari,Google Chrome用 */  
    -moz-border-radius: 6px;   /* Firefox用 */  
}
.green-box li {
	font-size:0.85em;
	line-height:1.8em;
	text-indent:-1em;
	padding-left:1em;
}
#page2 .green-box {
	background:url(../images/com/green-box2.png) no-repeat;
	height:90px;
	padding:20px;
}

#page3 .green-box {
	background:url(../images/com/green-box3.png) no-repeat;
	height:140px;
	padding:20px;
}

#page4 .green-box {
	background:url(../images/com/green-box4.png) no-repeat;
	height:80px;
	padding:20px;
}



.right-img img {
	float:right;
	margin-left:20px;
}
.right-img p span { font-size:11px; color:#333;}

.trivia {
	background:url(../images/page1/content-03.png) no-repeat;
}
.trivia h4 {
	height:0;
	overflow:hidden;
}

.page div.arrow-right {
    position: absolute;
    bottom: 10px;
    right: 20px;
    width: 80px;
    height: 60px;
    cursor: pointer;
}

/* ==================================================
index-style
================================================== */
.index-head {
	width:100%;
	height:384px;
	background:url(../images/com/bg-loop-in.png) center top no-repeat;
}
.index-head p {
	width:960px;
	height:0;
	padding-top:384px;
	margin:0 auto;
	overflow:hidden;
	background:url(../images/index/h1.png) no-repeat;
}
.intro {
	width:768px;
	height:570px;
	overflow:hidden;
	background:url(../images/index/intro-bg.png) no-repeat;
}
.intro h3 { margin-top:10px;}
.intro p {
	padding:10px 0 0 10px;
	width:308px;
	font-size:0.9em;
	line-height:2em;
}

.point3 li {
	width:256px;
	height:295px;
	float:left;
	position:relative;
}

.point3 .pt1 { background:url(../images/index/point-01.png) no-repeat;}
.point3 .pt2 { background:url(../images/index/point-02.png) no-repeat;}
.point3 .pt3 { background:url(../images/index/point-03.png) no-repeat;}
.point3  li p {
	position:absolute;
	top:125px;
	left:15px;
	width:160px;
	font-size:12px;
}
.point3 li.pt3 p { width:135px;}
.point3 a {
	width:110px;
	height:20px;
	position:absolute;
	bottom:15px;
	left:73px;
}

.katachi { margin:0 0 30px 0;}
.katachi li {
	width:192px;
	height:236px;
	float:left;
}

.lineup-wrap {
	padding:10px 0;
	width:100%;
	background-color:#728C2A;
}
.lineup {
	width:940px;
	margin:0 auto;
	padding:10px;
	background:#fff;
	border-radius: 4px;        /* CSS3草案 */  
    -webkit-border-radius: 4px;    /* Safari,Google Chrome用 */  
    -moz-border-radius: 4px;   /* Firefox用 */  
}
.lineup li { float:left;}


/* ==================================================
創エネ-style
================================================== */
#page1 .inner .box-l {
	float:left;
	width:460px;
}
#page1 .inner .box-l p { margin-bottom:10px;}
#page1 .inner .box-l p span { font-size:11px; color:#333;}

#page1 .inner .box-r {
	width:250px;
	float:right;
}
#page1 .inner .box-r p { font-size:11px; margin-top:5px;}

#page1 .next-page {
	width:768px;
	height:0;
	padding-top:250px;
	overflow:hidden;
	background:url(../images/page1/content-05.png) no-repeat;
	position:relative;
}
#page1 .trivia .txt1 {
	font-weight:bold;
	margin:35px 0 10px 110px;
}
#page1 .trivia .txt2 {
	font-size:0.9em;
}
#page1 .trivia li {
	font-size:0.9em;
	text-indent:-1em;
	padding-left:1em;
	line-height:1.6em;
}


/* ==================================================
見える化-style
================================================== */
#page2 .inner .box-l {
	float:left;
	width:460px;
}
#page2 .inner .box-l p { margin-bottom:10px;}

#page2 .inner .box-r {
	width:250px;
	float:right;
}
#page2 .inner .box-r p { font-size:11px; margin-top:5px;}

#page2 .next-page {
	width:768px;
	height:0;
	padding-top:260px;
	overflow:hidden;
	background:url(../images/page2/content-05.png) no-repeat;
	position:relative;
}
#page2 .trivia p {
	font-weight:bold;
	margin:35px 0 10px 110px;
}
#page2 .trivia p span { color:#FF0000;}
#page2 .trivia li {
	font-size:0.8em;
	text-indent:-1em;
	padding-left:1em;
	line-height:1.3em;
	margin:0 0 0 110px;
}


/* ==================================================
蓄エネ-style
================================================== */
#page3 .inner .box-l {
	float:left;
	width:460px;
}
#page3 .inner .box-l p { margin-bottom:10px;}

#page3 .inner .box-r {
	width:250px;
	float:right;
}
#page3 .inner .box-r p { font-size:11px; margin-top:5px;}

#page3 .right-img {
	line-height:1.8em;
}

#page3 .check {
	width:728px;
	height:0;
	padding-top:330px;
	margin:-10px auto 0;
	overflow:hidden;
	background:url(../images/page3/content-04.png) no-repeat;
}


#page3 .check2 {
	width:7628px;
	height:0;
	padding-top:360px;
	margin:20px auto 0;
	overflow:hidden;
	background:url(../images/page3/content-05.png) no-repeat;
	position:relative;
}

#page3 .check2 p.green {
	font-size:0.9em;
	padding:10px;
	background:#DDE1DC;
	border-radius: 6px;        /* CSS3草案 */  
    -webkit-border-radius: 6px;    /* Safari,Google Chrome用 */  
    -moz-border-radius: 6px;   /* Firefox用 */
	position:absolute;
	top: 20px;
	left: 155px;
	width: 270px;
}

#page3 .graph-list h3 {
	border-left:5px solid #E48000;
	padding-left:10px;
	color:#E48000;
}

#page3 .graph-list { padding:30px 20px 10px;}
#page3 .graph-list ul { margin-bottom:10px;}
#page3 .graph-list li {
	float:left;
	width:354px;
	text-align:center;
}
#page3 .graph-list li:first-child { margin-right:20px;}
#page3 .graph-list li img { margin:5px 0;}
#page3 .graph-list p { text-align:left;}


#page3 .next-page {
	width:768px;
	height:400px;
	overflow:hidden;
	position:relative;
}
#page3 .next-page h3 {
	border-left:5px solid #E48000;
	padding-left:10px;
	color:#E48000;
}
#page3 .next-page .example {
	width:728px;
	margin:0 auto;
}

#page3 .next-page p {
	text-align:right;
	font-size:0.8em;
}




/* ==================================================
省エネ-style
================================================== */
#page4 .right-img img {
	float:right;
	margin-left:15px;
}
#page4 .right-img .left-txt {
	width:460px;
}
#page4 .right-img .left-txt p { margin-bottom:10px;}

#page4 .car {
	width:455px;
	height:130px;
	margin-top:20px;
	overflow:hidden;
	background:url(../images/page4/content-05.png) no-repeat;
}

.graph {
	width:768px;
	height:480px;
	margin-bottom:30px;
	position:relative;
	background:url(../images/page4/content-04.png) 0 bottom no-repeat;
}

.mama, .papa {
	height:0px;
	display:block;
	overflow:hidden;
}
.mama {
	width:325px;
	padding-top:280px;
	background:url(../images/page4/content-02.png) no-repeat;
	position:absolute;
	top:-40px;
	left:20px;
}
.papa {
	width:360px;
	padding-top:270px;
	background:url(../images/page4/content-03.png) no-repeat;
	position:absolute;
	top:0px;
	right:20px;
}
#page4 .trivia p {
	font-weight:bold;
	margin:35px 0 10px 110px;
	width:230px;
}