/*=====================================
こどもエコクラブ　トップスタイルシート
=====================================*/

@import "common.css";


/*-- パーツ
---------------------------------*/
#WRAPPER{}

/*-- FLASH
---------------------------------*/
#TOP-FLASH{width:960px;height:300px;margin:20px auto;overflow:hidden;#margin-bottom:30px;}
#TOPFLASH{float:left;}
#TOP-LIST{width:205px;float:right;margin:0 2px 0 0;}
#TOP-LIST li{margin-bottom:10px;list-style:none;}
#TOP-LIST li a{display:block;width:205px;text-indent:-9999px;}
#TOP-LIST li#TOP-LIST01 a{height:90px;background:url("../img/top/btn-sp.jpg") no-repeat 0 -200px;}
#TOP-LIST li#TOP-LIST02 a{height:60px;background:url("../img/top/btn-cp.jpg") no-repeat 0 -100px;}
#TOP-LIST li#TOP-LIST03 a{height:60px;background:url("../img/top/btn-cn.jpg") no-repeat 0 -100px;}
#TOP-LIST li#TOP-LIST04 a{height:60px;background:url("../img/top/btn-gd.jpg") no-repeat 0 -100px;}
#TOP-LIST li#TOP-LIST01 a:hover{background-position:0 0;}
#TOP-LIST li#TOP-LIST02 a:hover,#TOP-LIST li#TOP-LIST03 a:hover,#TOP-LIST li#TOP-LIST04 a:hover{background-position:0 0;}

/*-- #MAIN
--------------------*/
#MAIN{margin-bottom:20px;display:inline-block;width:960px;padding:0;clear:both;height:auto;}

#MAIN-L{width:527px;float:left;}
#MAIN-L h2{width:527px;height:45px;text-indent:-9000px;background:url('../img/top/h2-MAIN2.gif') left top;margin:0 auto;}
#MAIN-L h2#ACTION{width:527px;height:71px;text-indent:-9000px;background:url('../img/top/h2-MAIN.gif') left top;margin:0 auto;}
#MAIN-L h2#ACTION a{width:527px;height:71px;text-indent:-9000px;background:url('../img/top/h2-MAIN.gif') left top;margin:0 auto;display:block;}
#MAIN-L h2#ACTION a:hover{background-position:0 -71px;}
.l-wrap{padding:15px 15px 15px 20px;background:url('../img/top/l-wrap-bg.gif') left bottom no-repeat;}



/*--活動報告--*/
#ECOREPORT{width:527px;margin-bottom:10px;}
#ECOREPORT .repo-1, #ECOREPORT .repo-2{float:left;margin-bottom:15px;width:240px;}
#ECOREPORT .repo-1{clear:left;}
#ECOREPORT .repo-2{margin-left:10px;}
#ECOREPORT .repo-ttl {font-weight: bold;margin: 0 0 0 105px;}
#ECOREPORT .repo-img {float: left;height: 75px;text-align: center;width:100px;}
#ECOREPORT .repo-club { font-size: 85%;font-weight: normal;}

#BTN{margin-bottom:15px;}
p.btn-repo1{margin:0 0 0 10px;float:left;}
p.btn-repo1 a{display:block;width:158px;height:33px;text-indent:-9000px;background:url('../img/top/btn_repo1.gif') left top no-repeat;}
p.btn-repo1 a:hover{background:url('../img/top/btn_repo1.gif') left top;background-position:0 -50px;}
p.btn-club1{margin:0 0 0 82px;float:left;}
p.btn-club1 a{display:block;width:158px;height:33px;text-indent:-9000px;background:url('../img/top/btn_club1.gif') left top;}
p.btn-club1 a:hover{background:url('../img/top/btn_club1.gif') left top;background-position:0 -50px;}


/*--イベント・お知らせ・ニュース--*/
#MAIN-R{width:425px;float:right;}
#MAIN-R .l-wrap{width:210px;background:url('../img/top/r-wrap-bg.gif') left bottom;padding:0;padding-bottom:15px;margin-bottom:10px;float:left;height:210px;}
#MAIN-R .r-wrap{width:210px;background:url('../img/top/r-wrap-bg.gif') left bottom;padding-bottom:15px;margin-bottom:10px;float:right;height:205px;}
#MAIN-R .r-wrap h3,#MAIN-R .l-wrap h3{width:170px;#width:264px;background:url('../img/top/h3-bg.gif') left top;position:relative;padding:10px 10px 0 20px;color:#666666;}
#MAIN-R .r-wrap h3 a{text-indent:-9000px;width:210px;height:38px;display:block;background:url('../img/top/h3-event.gif') left top no-repeat; position:absolute;left:-1px;bottom:0;}
#MAIN-R .r-wrap h3#EVENT{height:46px;padding:0;width:210px;}
#MAIN-R .r-wrap h3 a:hover,#MAIN-R .l-wrap h3 a:hover{background-position:0 -49px;}
#MAIN-R .l-wrap h3 a{text-indent:-9000px;width:210px;height:38px;display:block;background:url('../img/top/h3-info.gif') left top no-repeat; position:absolute;left:-1px;bottom:0;}
#MAIN-R .l-wrap h3#TOPICS{height:46px;padding:0;width:210px;}

#MAIN-R .r-wrap ul,#MAIN-R .l-wrap ul{margin:0 5px 0 15px;overflow:auto;height:155px;}
#MAIN-R .r-wrap ul.arr01 li,#MAIN-R .l-wrap ul.arr01 li{list-style:none;padding-left:10px;background:url('../img/icon-arr01.gif') top left no-repeat;margin-bottom:1em;}
#MAIN-R .r-wrap ul.arr01 li.last,#MAIN-R .l-wrap ul.arr01 li.last{margin-bottom:0;}
#MAIN-R .r-wrap h3 span,#MAIN-R .l-wrap h3 span{background:url("../img/top/h3-member.gif") no-repeat left top;padding-left:15px;}
.day{font-size:85%;text-align:right;margin:10px 0 0 0;padding:0 10px;float:left;clear:left;}
#MAIN-R .r-wrap p,#MAIN-R .l-wrap p{margin: 0 5px 0 15px;overflow: auto;}

#MAIN-R .b-wrap{clear:both;background:url("../img/top/b-wrap-bg.gif") no-repeat left top;width:395px;position:relative;padding:15px;}
*html #MAIN-R .b-wrap{width:425px;}
#MAIN-R .b-wrap .cont-btm{background:url("../img/top/b-wrap-btm.gif") no-repeat left bottom;width:425px;height:15px;position:absolute;bottom:0;left:0;}
#MAIN-R .b-wrap h3{background:url("../img/top/h3-member.gif") no-repeat left bottom; padding-left:10px;}

#BTN-CLUB{text-indent:-9999px;text-align:center;display:inline-block;width:100%;margin:-1em 0 20px 15px;}
#BTN-CLUB a{display:block;width:280px;height:79px;text-indent:-9000px;background:url('../img/top/btn_club.gif') left top;margin:0 auto;}
#BTN-CLUB a:hover{background:url('../img/top/btn_club.gif') left -100px;}

#banner-box {display:inline-block;width:395px;}
#banner-box p{margin-bottom:0;}
#banner-box .r-box{width:190px;float:right;display:block;}
#banner-box .l-box{width:200px;float:left;}
/*-- ソーシャル部分右に配置の場合
#banner-box ul.follow{margin:10px 0 0 0;padding-left:55px;width:135px;height:70px;background: url("../img/top/follow_bg.gif") no-repeat top left;}
*html #banner-box ul.follow{width:190px;}
#banner-box ul.follow li{list-style:none;text-indent:-9999px;width:50px;padding-top:13px;float:left;display:inline-block;margin-right:15px;}
#banner-box ul.follow li a.youtube{width:50px;height:46px;background: url("../img/icon_youtube.jpg") no-repeat top left;display:block;}
#banner-box ul.follow li a.fb{width:50px;height:46px;background: url("../img/icon_fb.jpg") no-repeat top left;display:block;}---------------------------------*/
/*-- ソーシャル部分左に配置の場合---------------------------------*/
#banner-box ul.follow{margin:5px 0 0 0;padding-left:55px;width:145px;height:70px;background: url("../img/top/follow_bg2.gif") no-repeat top left;}
*html #banner-box ul.follow{width:200px;}
#banner-box ul.follow li{list-style:none;text-indent:-9999px;width:50px;padding-top:13px;float:left;display:inline-block;margin-right:15px;}
#banner-box ul.follow li a.youtube{width:50px;height:46px;background: url("../img/icon_youtube.jpg") no-repeat top left;display:block;}
#banner-box ul.follow li a.fb{width:50px;height:46px;background: url("../img/icon_fb.jpg") no-repeat top left;display:block;}

#banner-box .prg {margin:0;}
#banner-box .prg a{width:200px;height:77px;text-indent:-9999px;background: url("../img/banner_prg.jpg") no-repeat top left;display:block;margin:0;}
#banner-box .prg a:hover{background-position:0 -77px;}

#banner-box .hiroba a{margin-left:30px;text-indent:-5000px;display:block;background:url("../img/top/ecomaru_hiroba.gif") no-repeat left top;width:120px;height:129px;}
#banner-box .hiroba a:hover{background-position:0 -166px;}

/*--検索（20130215追加）--*/
#TOP-SEARCH .labelimg{float:left;vertical-align:middle;}
#TOP-SEARCH .searchtxt{display:inline; vertical-align:middle; width:210px; height:26px;}
#TOP-SEARCH .searchbtn{display:inline;vertical-align:middle;}



/*--テキストボタン
--------------------*/
.btn {background: none repeat scroll 0 0 #FF6600;border: 3px double #FFFFFF;margin:0 0 15px 0;padding: 0 5px;display:inline-block;}
*html .btn{border:3px double #FF9900;}
.btn a {background: url("../img/icon_btn.gif") no-repeat scroll left center transparent;color: #FFFFFF;font-size:90%;padding-left: 13px; text-decoration: none;color:#FFFFFF;}
.btn a:hover{text-decoration:underline;}

/*-- #BANNER 
--------------------*/
#BANNER{margin:0 auto 20px auto;width:960px;text-align:left;display:inline-block;}

#BANNER ul{margin:0;}
#BANNER ul li{list-style:none;float:left;}
#BANNER ul img{margin-right:5px;}

/*-- #FOOTER 
--------------------*/
#FOOTER{width:960px;}



/*===============================*/