﻿@charset "utf-8";

/* ======================================================== blackboard */

#blackboard {
width: 940px;
height: 274px;
margin: 0 auto;
padding-top: 30px;
background: url("../img/blackboard.gif") left top no-repeat;
}

#blackboard h1 {
width: 430px;
height: 120px;
margin: 0px 0px 0px 30px;
text-indent: -9999px;
text-decoration: none;
background: url("../img/h1.gif") left top no-repeat;
}

#blackboard .point {
width: 360px;
height: 110px;
margin: 0px 0px 0px 200px;
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: 840px;
margin: 0 auto;
padding: 0 50px;
background: url("../img/paper.gif") left top repeat-y;
line-height:100%; /* 画像配置のためリセット */
}

h2 {
width: 840px;
height: 90px;
margin: 0 auto;
text-indent: -9999px;
text-decoration: none;
background: url("../img/h2.gif") left top no-repeat;
}

.lead {
width: 840px;
height: 70px;
margin: 0 auto 53px;
text-indent: -9999px;
text-decoration: none;
background: url("../img/lead.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 {
width: 840px;
height: 1220px;
}

#point1 h3 {
width: 840px;
height: 45px;
margin: 0 0 15px 0;
text-indent: -9999px;
text-decoration: none;
background: url("../img/p1_ttl.gif") left top no-repeat;
}

/* -------------------- point1-1 */
#point1 #box11 {
float:right;
width: 600px;
height: 280px;
}

#point1 #proBox11 {
width: 350px;
z-index: 2;
position: relative;
}

#point1 #proBox11 h4 {
width: 350px;
height: 50px;
text-indent: -9999px;
text-decoration: none;
background: url("../img/p1_01_ttl.gif") left top no-repeat;
}

#point1 #proBox11 #proTxt11 {
width: 350px;
height: 50px;
text-indent: -9999px;
text-decoration: none;
background: url("../img/p1_01_txt.gif") left top no-repeat;
}

#point1 #usecut11 {
float:right;
margin: -128px 0 0 0;
z-index: 1;
position: relative;
}

/* -------------------- point1-2 */
#point1 #box12 {
float:right;
width: 800px;
margin: -505px 0 0 0;
}

#point1 h4 {
width: 460px;
height: 60px;
text-indent: -9999px;
text-decoration: none;
background: url("../img/p1_02_ttl.gif") left top no-repeat;
}

#point1 #proBox121 {
width: 400px;
height: 413px;
z-index: 2;
position: relative;
}

#point1 #proBox121 h5 {
width: 400px;
height: 65px;
text-indent: -9999px;
text-decoration: none;
background: url("../img/p1_02_ttl01.gif") left top no-repeat;
}

#point1 #proBox121 #proTxt121 {
width: 400px;
height: 65px;
text-indent: -9999px;
text-decoration: none;
background: url("../img/p1_02_txt01.gif") left top no-repeat;
}

#point1 #proBox122 {
float:right;
width: 540px;
height: 290px;
margin: -118px 0 0 0;
z-index: 2;
position: relative;
}

#point1 #proBox122 h5 {
width: 340px;
height: 50px;
margin: 127px 0px 0px 0px;
text-indent: -9999px;
text-decoration: none;
background: url("../img/p1_02_ttl02.gif") left top no-repeat;
}

#point1 #proBox122 #proTxt122 {
width: 340px;
height: 65px;
text-indent: -9999px;
text-decoration: none;
background: url("../img/p1_02_txt02.gif") left top no-repeat;
}

#point1 #proBox122 #usecut122 {
float:right;
width: 195px;
}

#neco1 {
float:left;
margin: 40px 0px 0px 30px;
width: 200px;
height: 200px;
}

#house {
clear: both;
float:right;
width: 555px;
height: 505px;
}

/* ==================== point2 */

#paper #point2 {
clear: both;
width: 840px;
height: 668px;
}

#point2 h3 {
width: 620px;
height: 45px;
text-indent: -9999px;
text-decoration: none;
background: url("../img/p2_ttl.gif") left top no-repeat;
}

/* -------------------- point2-1 */
#point2 #box21 {
width: 430px;
height: 480px;
margin: 0 0 0 40px;
}

#point2 #proBox21 {
width: 350px;
z-index: 2;
position: relative;
}

#point2 #proBox21 h4 {
width: 430px;
height: 60px;
text-indent: -9999px;
text-decoration: none;
background: url("../img/p2_01_ttl.gif") left top no-repeat;
}

#point2 #proBox21 #proTxt21 {
width: 430px;
height: 45px;
text-indent: -9999px;
text-decoration: none;
background: url("../img/p2_01_txt.gif") left top no-repeat;
}

#point2 #usecut21 {
margin: -8px 0 0 0;
z-index: 1;
position: relative;
}

/* -------------------- point2-2 */
#point2 #box22 {
float:right;
width: 460px;
height: 650px;
margin: -525px 0 0 0;
}

#point2 #proBox22 {
clear: both;
width: 350px;
z-index: 2;
position: relative;
}

#point2 #proBox22 h4 {
width: 460px;
height: 50px;
text-indent: -9999px;
text-decoration: none;
background: url("../img/p2_02_ttl.gif") left top no-repeat;
}

#point2 #proBox22 #proTxt22 {
width: 460px;
height: 50px;
text-indent: -9999px;
text-decoration: none;
background: url("../img/p2_02_txt.gif") left top no-repeat;
}

#point2 #usecut22 {
margin: -10px 0 0 0;
z-index: 1;
position: relative;
}

#neco2 {
float:right;
width: 220px;
height: 190px;
}

/* ==================== balloon */


#balloon {
width: 760px;
height: 310px;
margin: 0 auto 30px;
text-indent: -9999px;
text-decoration: none;
background: url("../img/balloon.gif") left top no-repeat;
}

#btm_txt {
width: 600px;
height: 50px;
margin: 0 auto;
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;
}


