@charset "UTF-8";

/**
 * CSS Structure
 * 
 *    作成：ryo-as
 *    更新：2010/10/09
 *    備考：エンコーディングはUTF-8です。
 *          ここには、CSS構造を書きます。
 * 
---------------------------------------- */
body{
  background: url(/sp/2010/earth-cop10/images/bg.gif) repeat-x top #f6f6f6 !important;
}



.CONTAINER{
  position: relative;
  width: 995px;
  margin: 0 auto;
  padding: 0 9px 0 10px;;
  background: url(/sp/common/images/structure/container_bg.png) repeat-y center;
}




/**
 *  HEADER
 */
.HEADER{
  position: relative;
  height: 160px;
}
.HEADER .logo,
.HEADER .title,
.HEADER .bg,
.HEADER .social_button{
  position: absolute;
}
.HEADER .logo{
  top: 10px;
  left: 10px;
  z-index: 5;
}
.HEADER .title{
  top: 20px;
  left: 140px;
  z-index: 5;
}
.HEADER .bg{
  top: 0;
  left: 0;
  z-index: 0;
}
.HEADER .social_button{
  bottom: 15px;
  right: 80px;
  line-height: 16px;
  vertical-align: middle;
  z-index: 5;
}




/**
 *  FOOTER
 */
.FOOTER{
  position: relative;
  height: 60px;
  background: url( /sp/2010/earth-cop10/images/footer_line.gif) repeat-x top #fff;
}
.FOOTER address{
  line-height: 60px;
  letter-spacing: 0.1em;
}



/**
 *  CONTENTS
 */
.CONTENTS{
  margin: 20px 0;
  background: url(/sp/common/images/structure/dotted_gray.gif) repeat-y 715px; 
}
.CONTENTS .MAIN{
  width: 645px;
  padding: 0 45px;
}
.CONTENTS .NAVI{
  width: 240px;
  padding-right: 20px;
}


/*---------- custom class ----------*/



/**
 *  template paragraph
 */
.tpl-block1 .tpl-title{
  padding: 5px 5px 10px;;
  background: url( /sp/2010/earth-cop10/images/contents1_title_bg.gif) repeat-x #fff left bottom;
  color: #2e8043;
}
.tpl-block1 .tpl-img img{
  padding: 10px;
  border: 1px solid #ccc;
  padding: 5px;
}
.tpl-block1 .inner-block1{
  border-top: 3px solid #f6f6f6;
  padding: 10px 20px;
}
.tpl-block1 .introduction{
  border: 2px solid #2e8043;
  padding: 1px;
}
.tpl-block1 .introduction .wrap{
  border: 1px solid #8fd160;
}
.tpl-block1 .introduction .information{
  padding-left: 12px;
  border-left: 5px solid #e3e1ba;
  line-height: 1.6em;
}
.tpl-block1 .introduction .discription{
  width: 380px;
}
.tpl-block1 .gloss{
  padding: 10px 25px;
  background: url( /sp/2010/earth-cop10/images/gloss_bg.gif) repeat-y center
}
.tpl-block1 .gloss .right{
  width: 360px;
  line-height: 1.4em;
}


.tpl-block2 .tpl-title{
  height: 41px;
  line-height: 41px;
  padding-left: 48px;
  margin-left: -5px;
  background: url( /sp/2010/earth-cop10/images/tpl-block2-title.jpg) no-repeat;
  color: #fff;
  font-size: 18px;
}
.tpl-block2 .tpl-body{
  padding: 10px 0 10px 25px
}
.tpl-block2 .select_list .item{
  position: relative;
  background: url( /sp/2010/earth-cop10/images/select_list_md.gif) repeat-y center;
  zoom:1;
}
.tpl-block2 .select_list .item .wrap{
  padding-bottom: 30px;
  background: url( /sp/2010/earth-cop10/images/select_list_btm.gif) no-repeat center bottom;
}
.tpl-block2 .select_list .item .discription{
  padding: 15px 15px 0 105px;
  background: url( /sp/2010/earth-cop10/images/select_list_top.gif) no-repeat center top;  
}
.tpl-block2 .select_list .item .title{
  border-bottom: 1px solid #ccc;
  color: #0099ff;
}
.tpl-block2 .select_list .item .pop-image{
  position: absolute;
  width: 55px;
  top: 15px;
  left: 25px;
  cursor: pointer;
  z-index: 10;
}
.btn_open{
  position: absolute;
  bottom: -20px;
  right: 0;
  cursor: pointer;
}
.btn_close{
  position: absolute;
  bottom: 0;
  right: -1px;
  cursor: pointer;
}

/**
 *  icon
 */
.icon.earth-green{
  line-height: 19px;
  padding-left: 30px;
  background: url( /sp/2010/earth-cop10/images/icon_earthgreen.gif) no-repeat left;
}
.icon.earth-blue{
  line-height: 19px;
  padding-left: 30px;
  background: url( /sp/2010/earth-cop10/images/icon_earthblue.gif) no-repeat left;
}
.icon.title-arrow{
  padding-left: 22px;
  background: url( /sp/2010/earth-cop10/images/icon_arrow01.gif) no-repeat left;
}
.icon.book1{
  padding-left: 24px;
  background: url( /sp/common/images/icon/icon_book.gif) no-repeat left;
}


.pop-image{
  position: relative;
  cursor: pointer;
}
.pop-image .orign{
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
}
