@charset "UTF-8";

@import url("tooltip.css");

/* /////////////////////////////////////////////////////////////////////////// BaseSet */

* {
margin:0;
padding:0;
}

body {
color:#555555;
background:url(../img/bg.jpg) repeat;
font-family:Tahoma;
}

.fl {
float:left;
}

.fr {
float:right;
}

img {
border:none;
}

sub {
font-size:10px;
}

/* ///////////////////////////////////////// anchor */

a {
color:#0030d2;
text-decoration:underliine;
}

a:visited,
a:focus,
a:active {
color:#0030d2;
text-decoration:underliine;
}

a:hover {
color:#0030d2;
text-decoration:underliine;
}

/* ///////////////////////////////////////// png for IE6 */

img,
div {
behavior:url(/ecokids/common/css/iepngfix.htc);
}

/* //////////////////////////////////////////////////////////////////////////////////////////////////////////////////// book */

#book {

/**/
position:absolute;
top:50%;
left:50%;
margin-top:-400px;
margin-left:-491px;
/**/

height:800px;
width:982px;
}

#header {
height:140px;
width:982px;
background:url(../img/header_bg.png) no-repeat;
}

/*ロゴ*/
#header .fl {
margin-top:54px;
}

/*しおり*/
#header .fr {
height:140px;
width:142px;
background:url(../img/bookmark_bg.png) no-repeat;
margin-right:42px;
}

#header .fr a {
display:block;
height:140px;
width:142px;
}

/*トップは背景なし*/
#index #header .fr {
background:none;
}

#body {
height:520px;
width:982px;
background:url(../img/book.png) repeat-y;
}

#footer {
height:140px;
width:982px;
background:url(../img/footer_bg.png) no-repeat top;
}

/*コピーライト*/
#footer {
padding-top:34px;
}

/* //////////////////////////////////////////////////////////////////////////////////////////////////////////////////// navi */

#navi {
position:absolute;
margin:-69px 0 0 747px;
width:223px;
}

#navi #prev {
width:105px;
height:43px;
background:url(../img/btn_prev_bg.png) no-repeat;
padding-top:53px;
margin-top:7px;
float:left;
}

#navi #next {
width:105px;
height:43px;
padding-top:60px;
background:url(../img/btn_next_bg.png) no-repeat;
float:right;
}

/* //////////////////////////////////////////////////////////////////////////////////////////////////////////////////// body */

#body #ttl {
padding:21px 0 0 56px;/*background-color:#666666;*/
}

#body #contentsBox {
margin:0 53px 0 56px;
margin-top:18px;
/*overflow:auto;*/
}

#body #contentsBox h2 {
color:#ff8200;
font-size:18px;
line-height:100%;
font-weight:bold;
margin-bottom:10px;
width:415px;
}

#body #contentsBox h3 {
color:#8bba00;
font-size:18px;
line-height:100%;
font-weight:bold;
padding-top:13px;
}

#body #contentsBox p {
color:#785c40;
font-size:12px;
line-height:2.2;
background:url(../img/underline.gif) repeat-y;
}

#body #contentsLeft {
width:415px;
}

#body #contentsRight {
width:415px;
}

/* ///////////////////////////////////////// index */

/*インデックスは背景を隠す*/
#index #body {
background:none;
}

#index #glossary,
#index #story01,
#index #story02,
#index #story03,
#index #story04 {
position:absolute;
}

#index #story01 {
margin:28px 0 0 61px;
}

#index #story02 {
margin:169px 0 0 33px;
}

#index #story03 {
margin:43px 0 0 471px;
}

#index #story04 {
margin:242px 0 0 297px;
}

#index #glossary {
margin:333px 0 0 27px;
}

/* //////////////////////////////////////////////////////////////////////////////////////////////////////////////////// story */

#return {
margin-bottom:34px;
}

#story01 #body #contentsBox p,
#story02 #body #contentsBox p,
#story03 #body #contentsBox p,
#story04 #body #contentsBox p {
color:#785c40;
font-size:16px;
line-height:175%;
background:url(../img/underline02.gif) repeat-y;
margin-bottom:21px;
}

#story01 #body #contentsBox p img.fl,
#story02 #body #contentsBox p img.fl,
#story03 #body #contentsBox p img.fl,
#story04 #body #contentsBox p img.fl {
float:left;
}

#story01 #body #contentsBox p img.fr,
#story02 #body #contentsBox p img.fr,
#story03 #body #contentsBox p img.fr,
#story04 #body #contentsBox p img.fr {
float:right;
}

#story01 #bg01 {
height:520px;
background:url(../../scene01/img/bg01.gif) 608px bottom no-repeat;
}

#story01 #bg02 {
height:520px;
background:url(../../scene01/img/bg02.gif) right bottom no-repeat;
}

#story01 #bg03 {
height:520px;
background:url(../../scene01/img/bg03.gif) right bottom no-repeat;
}

#story01 #bg04 {
height:520px;
background:url(../../scene01/img/bg04.gif) 508px bottom no-repeat;
}

#story02 #bg01 {
height:520px;
background:url(../../scene02/img/bg01.gif) 747px bottom no-repeat;
}

#story02 #bg02 {
height:520px;
background:url(../../scene02/img/bg02.gif) 747px bottom no-repeat;
}

#story02 #bg03 {
height:520px;
background:url(../../scene02/img/bg03.gif) 547px bottom no-repeat;
}

#story03 #bg01 {
height:520px;
background:url(../../scene03/img/bg01.gif) right bottom no-repeat;
}

#story03 #bg02 {
height:520px;
background:url(../../scene03/img/bg02.gif) right bottom no-repeat;
}

#story04 #bg01 {
height:520px;
background:url(../../scene04/img/bg01.gif) 554px bottom no-repeat;
}

#story04 #bg02 {
height:520px;
background:url(../../scene04/img/bg02.gif) 530px bottom no-repeat;
}

#story04 #bg03 {
height:520px;
background:url(../../scene04/img/bg03.gif) 513px bottom no-repeat;
}

/*story01*/
#story01 #body #contentsBox p strong.journey {
color:#ff8200;
font-weight:bold;
}

#story01 #body #contentsBox p em.journey {
color:#ff8200;
font-style:normal;
}

#story01 #body #contentsBox p strong.wise {
color:#712e0c;
font-weight:bold;
}

#story01 #body #contentsBox p em.wise {
color:#712e0c;
font-style:normal;
}

/*story02*/
#story02 #body #contentsBox p strong.robby {
color:#18aea1;
font-weight:bold;
}

#story02 #body #contentsBox p em.robby {
color:#18aea1;
font-style:normal;
}

#story02 #body #contentsBox p strong.people {
color:#712e0c;
font-weight:bold;
}

#story02 #body #contentsBox p em.people {
color:#712e0c;
font-style:normal;
}

/*story03*/
#story03 #body #contentsBox p strong.listen {
color:#709210;
font-weight:bold;
}

#story03 #body #contentsBox p em.listen {
color:#709210;
font-style:normal;
}

#story03 #body #contentsBox p strong.kuma {
color:#712e0c;
font-weight:bold;
}

#story03 #body #contentsBox p em.kuma {
color:#712e0c;
font-style:normal;
}

/*story04*/
#story04 #body #contentsBox p strong.ken {
color:#2458b6;
font-weight:bold;
}

#story04 #body #contentsBox p em.ken {
color:#2458b6;
font-style:normal;
}

#story04 #body #contentsBox p strong.karen {
color:#ff5a7f;
font-weight:bold;
}

#story04 #body #contentsBox p em.karen {
color:#ff5a7f;
font-style:normal;
}

#story04 #body #contentsBox p strong.animal {
color:#712e0c;
font-weight:bold;
}

#story04 #body #contentsBox p em.animal {
color:#712e0c;
font-style:normal;
}

/* //////////////////////////////////////////////////////////////////////////////////////////////////////////////////// eco */

body#eco {
background:url(../img/bg02.jpg) repeat;
}

/*取り組みのタイトルは長いので、ここだけ特別*/
#eco #contentsBox h2 {
line-height:130%;
}

#eco #contentsBox p {
margin-bottom:21px;
}

#eco #body #graph01_01_01,
#eco #body #graph01_01_02,
#eco #body #graph01_02,
#eco #body #graph01_03,
#eco #body #graph01_04_01,
#eco #body #graph01_04_02,
#eco #body #graph01_05,
#eco #body #graph01_06_01,
#eco #body #graph01_06_02,
#eco #body #graph02_01,
#eco #body #graph02_01_02,
#eco #body #graph02_02,
#eco #body #graph02_03,
#eco #body #graph03_01_01,
#eco #body #graph03_01_02,
#eco #body #graph03_02_01,
#eco #body #graph03_02_02,
#eco #body #graph03_03,
#eco #body #graph03_04_01,
#eco #body #graph03_04_02,
#eco #body #graph04_01,
#eco #body #graph04_02_01,
#eco #body #graph04_02_02,
#eco #body #graph04_03,
#eco #body #graph04_04_01,
#eco #body #graph04_04_02,
#eco #body #graph04_05_01,
#eco #body #graph04_05_02 {
height:520px;
}

#eco #body #graph01_01_01 {
background:url(../../scene01/img/graph01_01.gif) no-repeat 511px 21px;
}

#eco #body #graph01_01_02 {
background:url(../../scene01/img/bg01.gif) 608px bottom no-repeat;
}

#eco #body #graph01_02 {
background:url(../../scene01/img/graph01_02.gif) no-repeat 511px 21px;
}

#eco #body #graph01_03 {
background:url(../../scene01/img/graph01_03.gif) no-repeat 511px 21px;
}

#eco #body #graph01_04_01 {
background:url(../../scene01/img/bg02.gif) right bottom no-repeat;
}

#eco #body #graph01_04_02 {
background:url(../../scene01/img/graph01_04.gif) no-repeat 54px 104px;
}

#eco #body #graph01_05 {
background:url(../../scene01/img/graph01_05.gif) no-repeat 511px 21px;
}

#eco #body #graph01_06_01 {
background:url(../../scene01/img/graph01_06_01.gif) no-repeat 511px 51px;
}

#eco #body #graph01_06_02 {
background:url(../../scene01/img/graph01_06_02.gif) no-repeat 511px bottom;
}

#eco #body #graph02_01 {
background:url(../../scene02/img/graph02_01.gif) no-repeat 511px 21px;
}

#eco #body #graph02_01_02 {
background:url(../../scene02/img/graph02_01_02.gif) no-repeat 511px 21px;
}

#eco #body #graph02_02 {
background:url(../../scene02/img/graph02_02.gif) no-repeat 511px 21px;
}

#eco #body #graph02_03 {
background:url(../../scene02/img/graph02_03.jpg) no-repeat 511px 21px;
}

#eco #body #graph03_01_01 {
background:url(../../scene03/img/graph03_01.jpg) no-repeat 511px 21px;
}

#eco #body #graph03_01_02 {
background:url(../../scene03/img/bg01.gif) right bottom no-repeat;
}

#eco #body #graph03_02_01 {
background:url(../../scene03/img/graph03_02_01.gif) no-repeat 511px 21px;
}

#eco #body #graph03_02_02 {
background:url(../../scene03/img/graph03_02_02.gif) 631px bottom no-repeat;
}

#eco #body #graph03_03 {
background:url(../../scene03/img/graph03_03_01.gif) no-repeat 511px 21px;
}

#eco #body #graph03_04_01 {
background:url(../../scene03/img/graph03_04_01.jpg) no-repeat 511px 21px;
}

#eco #body #graph03_04_02 {
background:url(../../scene03/img/graph03_04_02.gif) no-repeat 511px 21px;
}

#eco #body #graph04_01 {
background:url(../../scene04/img/graph04_01.gif) no-repeat 544px 21px;
}

#eco #body #graph04_02_01 {
background:url(../../scene04/img/graph04_02_01.jpg) no-repeat 511px 21px;
}

#eco #body #graph04_02_02 {
background:url(../../scene04/img/bg01.gif) 554px bottom no-repeat;
}

#eco #body #graph04_03 {
background:url(../../scene04/img/graph04_03.gif) no-repeat 544px bottom;
}

#eco #body #graph04_04_01 {
background:url(../../scene04/img/graph04_04_01.jpg) no-repeat 511px 21px;
}

#eco #body #graph04_04_02 {
background:url(../../scene04/img/graph04_04_02.gif) no-repeat 543px 21px;
}

#eco #body #graph04_05_01 {
background:url(../../scene04/img/graph04_05_01.jpg) no-repeat 511px 21px;
}

#eco #body #graph04_05_02 {
background:url(../../scene04/img/graph04_05_02.gif) no-repeat 544px bottom;
}

/* //////////////////////////////////////////////////////////////////////////////////////////////////////////////////// 特別*/

#eco #body #graph01_03 #contentsBox p,
#eco #body #graph01_05 #contentsBox p,
#eco #body #graph03_01_01 #contentsBox p,
#eco #body #graph03_03 #contentsBox p {
margin-bottom:10px;
}

#eco #body #graph04_04_01 #contentsBox #contentsLeft,
#eco #body #graph03_01_01 #contentsBox #contentsLeft {
width:423px;
}

#eco #body #graph01_04_02 #contentsBox h2 {
width:auto;
}

#eco #body #graph02_02 #contentsRight {
padding-top:284px;
}

#eco #body #graph02_03 #contentsRight {
padding-top:303px;
}

#eco #body #graph03_02_01 #contentsRight {
padding-top:94px;
}

#story03 #contentsBox #contentsRight p {
margin-bottom:16px;
}

#eco #graph03_03 #contentsBox p {
line-height:2;
}
/* //////////////////////////////////////////////////////////////////////////////////////////////////////////////////// about */

#about #body #bg {
height:520px;
background:url(../../about/img/bg.gif) no-repeat 704px 436px;
}

#about #body #contentsBox h3 img {
vertical-align:middle;
padding-right:8px;
}

/* //////////////////////////////////////////////////////////////////////////////////////////////////////////////////// glossary */

#glossary #body #contentsBox p img {
margin-top:10px;
vertical-align:top;
margin-bottom:5px;
}

#glossary #body #contentsBox p {
margin-bottom:5px;
}

#glossary #bg01 {
height:520px;
background:url(../../glossary/img/bg01.gif) right bottom no-repeat;
}

#glossary #bg02 {
height:520px;
background:url(../../glossary/img/bg02.gif) 558px bottom no-repeat;
}

#glossary #bg03 {
height:520px;
background:url(../../glossary/img/bg03.gif) right bottom no-repeat;
}

#glossary #bg04 {
height:520px;
background:url(../../glossary/img/bg04.gif) right bottom no-repeat;
}

#glossary #bg05 {
height:520px;
background:url(../../glossary/img/bg05.gif) 545px bottom no-repeat;
}

/* //////////////////////////////////////////////////////////////////////////////////////////////////////////////////// open */

#open {
width:992px;
margin:21px auto 21px auto;
}