@charset "utf-8";

/* ======================================================== blackboard */

#blackboard {
width: 940px;
height: 272px;
margin: 0 auto;
padding-top: 32px;
background: url("../img/blackboard.gif") left top no-repeat;
}

#blackboard h1 {
width: 399px;
height: 116px;
margin: 0px 0px 0px 33px;
text-indent: -9999px;
text-decoration: none;
background: url("../img/h1.gif") left top no-repeat;
}

#blackboard .point {
width: 292px;
height: 96px;
margin: 3px 0px 0px 209px;
text-indent: -9999px;
text-decoration: none;
background: url("../img/point.gif") left top no-repeat;
}

/* ======================================================== paper */

#paperTop {
width: 900px;
height: 59px;
margin: 0 auto;
padding: 24px 0px 0px 40px;
background: url("../img/paper_top.gif") left top no-repeat;
}

#paperTop a {
display:block;
width: 188px;
height: 45px;
text-indent: -9999px;
text-decoration: none;
}

#paperTop a:link, #paperTop a:visited {
background:url("../img/btn_return.gif") left top no-repeat;
}

#paperTop a:hover, #paperTop a:active {
background:url("../img/btn_return.gif") -200px top no-repeat;
}

#paper {
width: 940px;
height:2200px;
margin: 0 auto;
background: url("../img/paper.gif") left top repeat-y;
position: relative;
line-height:100%; /* 画像配置のためリセット */
}

h2 {
width: 940px;
height: 74px;
margin: 0 auto;
text-indent: -9999px;
text-decoration: none;
background: url("../img/h2.gif") left top no-repeat;
}

/* ==================== point1～5 共通 */

#paper p.proBtn a {
display:block;
width: 124px;
height: 28px;
margin: 0 0 0 20px;
text-indent: -9999px;
text-decoration: none;
}

#paper p.proBtn a:link, #paper p.proBtn a:visited {
background:url("../img/btn_pro.gif") 0 0 no-repeat;
}

#paper p.proBtn a:hover, #paper p.proBtn a:active {
background:url("../img/btn_pro.gif") -124px 0 no-repeat;
}

/* ==================== point1 */

#paper #point1 {
position: absolute;
top: 113px;
left: 40px;
width: 522px;
height: 375px;
}

#point1 h3 {
width: 522px;
height: 79px;
text-indent: -9999px;
text-decoration: none;
background: url("../img/h3_1.gif") left top no-repeat;
}

#point1 #proBox1 {
width: 262px;
margin: 0px 0px 0px 260px;
z-index: 2;
position: relative;
}

#point1 #proBox1 h4 {
width: 262px;
height: 19px;
margin:0px;
padding:0px;
text-indent: -9999px;
text-decoration: none;
background: url("../img/h4_1.gif") left top no-repeat;
}

#point1 #proBox1 #proTxt1 {
width: 262px;
height: 48px;
text-indent: -9999px;
text-decoration: none;
background: url("../img/text1.gif") left top no-repeat;	
}

#point1 #usecut1 {
margin: -78px 0 0 27px;
z-index: 1;
position: relative; 
}

#neco1 {
float:right;
margin:101px 130px 0px 0px;
width: 167px;
height: 170px;
}

/* ==================== point2 */

#paper #point2 {
position: absolute;
top: 451px;
left: 444px;
width: 469px;
height: 363px;
}

#point2 h3 {
width: 424px;
height: 73px;
margin-left:60px;
text-indent: -9999px;
text-decoration: none;
background: url("../img/h3_2.gif") left top no-repeat;
}

#point2 #proBox2 {
width: 170px;
margin-left:60px;
z-index: 2;
position: relative;
}

#point2 #proBox2 h4 {
width: 170px;
height: 19px;
margin:0px;
padding:0px;
text-indent: -9999px;
text-decoration: none;
background: url("../img/h4_2.gif") left top no-repeat;
}

#point2 #proBox2 #proTxt2 {
width: 170px;
height: 43px;
text-indent: -9999px;
text-decoration: none;
background: url("../img/text2.gif") left top no-repeat;	
}

#point2 #usecut2 {
margin: -73px 0 0 0px;
z-index: 1;
position: relative; 
}

#neco2 {
float:left;
margin:208px 0px 0px 106px;
width: 173px;
height: 178px;
}

/* ==================== point2_2 */

#paper #point2_2 {
position: absolute;
top: 767px;
left: 86px;
width: 427px;
height: 330px;
}

#point2_2 #proBox2_2 {
width: 194px;
margin-left:233px;
z-index: 3;
position: relative;
}

#point2_2 #proBox2_2 h4 {
width: 194px;
height: 33px;
margin:0px;
padding:0px;
text-indent: -9999px;
text-decoration: none;
background: url("../img/h4_3.gif") left top no-repeat;
}

#point2_2 #proBox2_2 #proTxt2_2 {
width: 194px;
height: 43px;
text-indent: -9999px;
text-decoration: none;
background: url("../img/text3.gif") left top no-repeat;	
}

#point2_2 #usecut3 {
margin: -87px 0 0 0px;
z-index: 2;
position: relative; 
}

#point2_2 #usecut4 {
margin: -170px 0 0 271px;
z-index: 1;
position: relative; 
}

/* ==================== point3 */

#paper #point3 {
position: absolute;
top: 1098px;
left: 40px;
width: 880px;
height: 352px;
}

#point3 h3 {
width: 510px;
height: 82px;
text-indent: -9999px;
text-decoration: none;
background: url("../img/h3_3.gif") left top no-repeat;
}

#point3 #proBox3 {
width: 468px;
margin-left:412px;
z-index: 2;
position: relative;
}

#point3 #proBox3 h4 {
width: 468px;
height: 61px;
margin:0px;
padding:0px;
text-indent: -9999px;
text-decoration: none;
background: url("../img/h4_4.gif") left top no-repeat;
}

#point3 #proBox3 #proTxt3 {
width: 468px;
height: 51px;
text-indent: -9999px;
text-decoration: none;
background: url("../img/text4.gif") left top no-repeat;	
}

#point3 #usecut5 {
margin: -122px 0 0 0px;
z-index: 1;
position: relative; 
}

/* ==================== point3_3 */

#paper #point3_2 {
position: absolute;
top: 1481px;
left: 335px;
width: 528px;
height: 296px;
}

#point3_2 #proBox3_2 {
width: 222px;
margin-left:0px;
z-index: 2;
position: relative;
}

#point3_2 #proBox3_2 h4 {
width: 222px;
height: 19px;
margin:0px;
padding:0px;
text-indent: -9999px;
text-decoration: none;
background: url("../img/h4_5.gif") left top no-repeat;
}

#point3_2 #proBox3_2 #proTxt3_2 {
width: 222px;
height: 43px;
text-indent: -9999px;
text-decoration: none;
background: url("../img/text5.gif") left top no-repeat;	
}

#point3_2 #usecut6 {
margin: -97px 0 0 222px;
z-index: 1;
position: relative; 
}

#neco3 {
float:left;
margin:750px 0px 0px 106px;
width: 183px;
height: 187px;
}


/* ==================== balloon */


#balloon {
position: absolute;
top: 1741px;
left: 40px;
width: 772px;
height: 340px;
margin: 11px auto 0px;
text-indent: -9999px;
text-decoration: none;
background: url("../img/balloon.gif") left top no-repeat;
}

#btm_txt {
position: absolute;
top: 2110px;
left: 40px;
width: 600px;
height: 50px;
margin: 0 0 0 140px;
text-indent: -9999px;
text-decoration: none;
background: url("../img/btm_txt.gif") left top no-repeat;
}


/* ==================== paperBtm */


#paperBtm {
width: 940px;
height: 18px;
text-indent: -9999px;
text-decoration: none;
background: url("../img/paper_btm.gif") left top no-repeat;
}