@charset "shift_jis";

*{
margin: 0;
padding:0;
}
html{
	height:100%;
}

img{
border: none;
}
li{
list-style: none;
}
h1,h2,h3{
font-size: 120%;
}
body{
text-align:center;
font-size:80%;
color:#666;
line-height:1.5;
background:#EDEDED url(../images/bodyBack.jpg) repeat-x;
_height:100%;
}

/* #wrapper
===================================*/
* html div#wrapper{
	height:100%;
}
#wrapper{
margin:0 auto;
width:1048px;
text-align: left;
background:#EDEDED url(../images/wrapperBackB.jpg) repeat-y;
position: relative;
padding:231px 0 0;
	min-height: 100%;

}
body > #wrapper {
        height: auto;
}




/* #header
===================================*/
#header{
position:absolute;
top: 0;
left: 0;
height: 231px;
width:1048px;
background: url(../images/headerBack.jpg) no-repeat right top;
}

#header #subH1{
height: 131px;
line-height: 2;
color: #666;
text-indent:300px;
font-size:100%;
font-weight:normal;
background: url(../images/subH1B.jpg) no-repeat 282px 0;
}
#header #subH2{
line-height: 25px;
height:100px;
font-size:23px;
color:#D35F60;
text-indent:300px;
background:url(../images/subH2.jpg) no-repeat 282px 0;
}
#header p{
margin:-73px 10px 5px 300px;
width:460px;
height:72px;
overflow: auto;
line-height: 17px;
color: #333;
border-top:1px #999 solid;
}

#header h3{
position:absolute;
top: 0;
left:0;
width: 282px;
height:273px;
}
#producer #header h3{background: url(../images/producerH1.jpg) no-repeat;}
#motive #header h3{background: url(../images/motiveH1.jpg) no-repeat;}
#technique #header h3{background: url(../images/techniqueH1.jpg) no-repeat;}
#cost #header h3{background: url(../images/costH1.jpg) no-repeat;}
#management #header h3{background: url(../images/managementH1.jpg) no-repeat;}
#communication #header h3{background: url(../images/communicationH1.jpg) no-repeat;}

#header h3 a{
display:block;
width: 282px;
height:131px;
text-indent:-5000px;
}


/* #container
===================================*/
#container{
margin:0 10px;
width:1028px;
background:url(../images/contentsBack.jpg) repeat-x;
}



/* #contents
===================================*/
#contents{
width:756px;
float:right;
}

#center{
width:514px;
float:left;
}
#producer #center{background: url(../images/producerCenterBack.jpg) repeat-y;}
#motive #center{background: url(../images/motiveCenterBack.jpg) repeat-y;}
#technique #center{background: url(../images/techniqueCenterBack.jpg) repeat-y;}
#cost #center{background: url(../images/costCenterBack.jpg) repeat-y;}
#management #center{background: url(../images/managementCenterBack.jpg) repeat-y;}
#communication #center{background: url(../images/communicationCenterBack.jpg) repeat-y;}


#center .centerBox{
width:514px;
height:308px;
margin-bottom: 50px;
}
#producer #center .centerBox{background: url(../images/producerCateP.jpg) no-repeat 0 120px;}
#motive #center .centerBox{background: url(../images/motiveCateP.jpg) no-repeat 0 120px;}
#technique #center .centerBox{background: url(../images/techniqueCateP.jpg) no-repeat 0 120px;}
#cost #center .centerBox{background: url(../images/costCateP.jpg) no-repeat 0 120px;}
#management #center .centerBox{background: url(../images/managementCateP.jpg) no-repeat 0 120px;}
#communication #center .centerBox{background: url(../images/communicationCateP.jpg) no-repeat 0 120px;}


#wrapper #center div.contentsTop{
height:350px;
background-position:0 162px;
}
#center .centerBox h2{
width:514px;
height:120px;
position: relative;
text-indent: 135px;
font-size: 130%;
}
#center .contentsTop h2{
height: 162px;
}
#center .centerBox h2 a{
width:514px;
height:120px;
position: absolute;
top:0;
left:0;
line-height: 400px;
overflow:hidden;
}
#center .contentsTop h2 a{
height: 162px;
}
#subH2company a{background: url(../images/producerH2company.jpg) no-repeat;}
#subH2designer a{background: url(../images/producerH2designer.jpg) no-repeat;}
#subH2employee a{background: url(../images/producerH2employee.jpg) no-repeat;}

#subH2cool a{background: url(../images/motiveH2cool.jpg) no-repeat;}
#subH2being a{background: url(../images/motiveH2being.jpg) no-repeat;}
#subH2web a{background: url(../images/motiveH2web.jpg) no-repeat;}
#subH2success a{background: url(../images/motiveH2success.jpg) no-repeat;}

#subH2seo a{background: url(../images/techniqueH2seo.jpg) no-repeat;}
#subH2cms a{background: url(../images/techniqueH2cms.jpg) no-repeat;}
#subH2ajax a{background: url(../images/techniqueH2ajax.jpg) no-repeat;}
#subH2blog a{background: url(../images/techniqueH2blog.jpg) no-repeat;}
#subH2all a{background: url(../images/techniqueH2all.jpg) no-repeat;}

#subH2listing a{background: url(../images/costH2listing.jpg) no-repeat;}
#subH2seocompany a{background: url(../images/costH2seocompany.jpg) no-repeat;}
#subH2webcompany a{background: url(../images/costH2webcompany.jpg) no-repeat;}
#subH2bargain a{background: url(../images/costH2bargain.jpg) no-repeat;}

#subH2webcom a{background: url(../images/managementH2webcom.jpg) no-repeat;}
#subH2staff a{background: url(../images/managementH2staff.jpg) no-repeat;}
#subH2coupon a{background: url(../images/managementH2coupon.jpg) no-repeat;}
#subH2mall a{background: url(../images/managementH2mall.jpg) no-repeat;}

#subH2image a{background: url(../images/communicationH2image.jpg) no-repeat;}
#subH2instruct a{background: url(../images/communicationH2instruct.jpg) no-repeat;}
#subH2user a{background: url(../images/communicationH2user.jpg) no-repeat;}


#center .centerBox p{
width:314px;
height:145px;
text-indent:1em;
margin:25px 0 0 33px;
line-height:20px;
overflow:auto;
}
#center .centerBox p strong{
display:block;
font-size: 120%;
margin:0 0 5px;
border-left:4px #C86466 solid;
border-bottom:1px #C86466 solid;
text-indent:5px;
color:#444;
}
#center .centerBox p span{
display: block;
}


#NEXT{
width:514px;
height:78px;
}
#producer #NEXT{background: url(../images/producerCenterBottom.jpg) no-repeat;}
#motive #NEXT{background: url(../images/motiveCenterBottom.jpg) no-repeat;}
#technique #NEXT{background: url(../images/techniqueCenterBottom.jpg) no-repeat;}
#cost #NEXT{background: url(../images/costCenterBottom.jpg) no-repeat;}
#management #NEXT{background: url(../images/managementCenterBottom.jpg) no-repeat;}
#communication #NEXT{background: url(../images/communicationCenterBottom.jpg) no-repeat;}

#NEXT a{
display:block;
width:88px;
height:78px;
margin-left: 411px;
text-indent:-5000px;
}
#producer #NEXT a{background:url(../images/producerNextButton.jpg) no-repeat -88px 0;}
#motive #NEXT a{background:url(../images/motiveNextButton.jpg) no-repeat -88px 0;}
#technique #NEXT a{background:url(../images/techniqueNextButton.jpg) no-repeat -88px 0;}
#cost #NEXT a{background:url(../images/costNextButton.jpg) no-repeat -88px 0;}
#management #NEXT a{background:url(../images/managementNextButton.jpg) no-repeat -88px 0;}
#communication #NEXT a{background:url(../images/communicationNextButton.jpg) no-repeat -88px 0;}


#NEXT a:hover{
background-position:0 0;
}


/* .floatBox
===================================*/

#subH2New{
width:242px;
height:111px;
background: url(../images/subH2NewB.jpg) no-repeat;
line-height:500px;
overflow:hidden;
margin:42px 0 20px;
float:right;
}


.floatBox{
width:242px;
float:right;
margin: 0 0 20px 0;
}
.floatBox h2{
width:212px;
height: 111px;
position:relative;
}
.floatBox h2 a{
display: block;
width:212px;
height: 111px;
position:absolute;
left:0;top:0;
line-height: 300px;
overflow: hidden;
}

#fH2a a{background: url(../images/fH2a.jpg) no-repeat;}
#fH2b a{background: url(../images/fH2b.jpg) no-repeat;}
#fH2c a{background: url(../images/fH2c.jpg) no-repeat;}
#fH2d a{background: url(../images/fH2d.jpg) no-repeat;}
#fH2e a{background: url(../images/fH2e.jpg) no-repeat;}
#fH2f a{background: url(../images/fH2f.jpg) no-repeat;}
#fH2g a{background: url(../images/fH2g.jpg) no-repeat;}
#wrapper .floatBox h2 a:hover{
background-position:right top;
}

.floatBox h3{
width:212px;
height:30px;
font-size:90%;
}
.floatBox h3 span{
font-size:80%;
color: #D20202;
background:#fff;
margin:-30px 0 0 0;
display: block;
width:212px;
line-height: 30px;
text-align: right;
	filter:alpha(opacity=70); /*IE*/
	-moz-opacity:0.70; /*FF*/
	opacity:0.70;
}
.floatBox h3 a{
display: block;
width:212px;
height:30px;
line-height:30px;
overflow:hidden;
text-indent: 25px;
background:url(../images/check.jpg) no-repeat;
}
.floatBox h3 a:visited{
background-position: 0 -30px;
color: #6C9BBB;
}

.floatBox h3 a:hover{
background-position: 0 -60px;
color:#F87676;
}
.floatBox p.floatBoxP{
width:212px;
overflow: auto;
font-size: 80%;
}

/* #menu
===================================*/
#menu{
width:272px;
float:left;
margin-top:42px;
background:url(../images/menuBack.jpg) repeat-y 30px 0;
}
#menu h2{
margin: 0 12px 0 30px;
width:230px;
height:42px;
position:relative;
}
#menu h2 strong{
display:block;
width:230px;
height:42px;
position:absolute;
left:0;top:0;
line-height: 200px;
overflow: hidden;
background:url(../images/menuH2.jpg) no-repeat;
}
#menu h3{
margin: 15px 22px 0 37px;
padding:0 0 0 25px;
border-bottom:1px #4D91BC dotted;
font-size:130%;
}
#menu h3#menuH3top{
width:170px;
height:27px;
position: relative;
}
#menu h3#menuH3top a{
display: block;
width:213px;
height:27px;
position: absolute;
top: 0;
left: 0;
line-height: 100px;
overflow: hidden;
}

#menuH3top a{background:url(../images/menuH3top.jpg) no-repeat;}
#menuH3producer{background:url(../images/menuH3a.jpg) no-repeat;}
#menuH3motive{background:url(../images/menuH3b.jpg) no-repeat;}
#menuH3technique{background:url(../images/menuH3c.jpg) no-repeat;}
#menuH3cost{background:url(../images/menuH3d.jpg) no-repeat;}
#menuH3management{background:url(../images/menuH3e.jpg) no-repeat;}
#menuH3communication{background:url(../images/menuH3f.jpg) no-repeat;}

#menu h3 a{
text-decoration: none;
display:block;
color:#555;
}
#producer #menuH3producer a{background-color:#CB7777;color: #fff;text-indent:0.5em;}
#motive #menuH3motive a{background-color:#CB7777;color: #fff;text-indent:0.5em;}
#technique #menuH3technique a{background-color:#CB7777;color: #fff;text-indent:0.5em;}
#cost #menuH3cost a{background-color:#CB7777;color: #fff;text-indent:0.5em;}
#management #menuH3management a{background-color:#CB7777;color: #fff;text-indent:0.5em;}
#communication #menuH3communication a{background-color:#CB7777;color: #fff;text-indent:0.5em;}


#menu ul{
margin: 0 12px 0 30px;
width:230px;
}
#menu li{
line-height: 26px;
height: 26px;
}
#menu li span{
font-size:80%;
color: #D20202;
background:#fff;
margin:-26px 0 0 5px;
display: block;
width:220px;
line-height: 26px;
text-align: right;
	filter:alpha(opacity=70); /*IE*/
	-moz-opacity:0.70; /*FF*/
	opacity:0.70;
}

#menu li a{
display:block;
height: 26px;
padding-left:30px;
background: url(../images/menuLink.jpg) no-repeat;
}
#menu li a:visited{
background-position: 0 -26px;
color: #6C9BBB;
}

#menu li a:hover{
background-position: 0 -78px;
color:#fff;
}

#menuEnd{
margin: 0 12px 0 30px;
padding: 20px 10px;
background: url(../images/menuBottom.jpg) no-repeat left bottom;
}

#form1{
display:none;
position:relative;
background:#fff;
border:1px #ddd solid;
border-bottom:1px #999 solid;
border-right:1px #999 solid;
padding-bottom:10px;
}
#form1 dl{
margin:20px 0 0 0;
padding:10px 5px 5px;

}
#form1 input{
width:190px;
}
#form1 textarea{
width:190px;
}
#form1 .p2{
display:block;
text-align:center;
}
#form1 .small{
width:80px;
}
#form1 #closeButton{
position:absolute;
top:5px;
left:180px;
}















/* #footer
===================================*/
#footer{
height:211px;
background: url(../images/footer.jpg) no-repeat;
clear: both;
}
#footer ul{
padding:180px 20px 0 0;
text-align:right;
}
#footer li.noBorder{
border:none;
}
#footer li{
display:inline;
padding:0 5px 0 8px;
border-right:1px #666 solid;
}
#footer li a{
text-decoration: none;
}




/* #topMenu
===================================*/
#topMenu{
position: absolute;
top:5px;
right: 20px;
width:600px;
text-align: right;
}
#topMenu li#noBorder{
border:none;
}
#topMenu li{
display:inline;
padding:0 5px 0 8px;
border-right:1px #666 solid;
}
#topMenu li a{
text-decoration: none;
}

/* #pan
===================================*/
#pan{
position: absolute;
top:250px;
left:300px;
width:450px;
font-size:90%;
}
#pan li{
display:inline;
color: #eed;
}
#pan li a{
color: #fff;
}
#pan li a:hover{
color: #ccf;
}

/* #font
===================================*/
#font{
width:30px;
height: 240px;
background:url(../images/fontBack.jpg) no-repeat 0 90px;
position:absolute;
top: 273px;
left:-30px;
}
#font li{
width: 30px;
height: 30px;
text-indent: -5000px;
cursor: pointer;
}
#font li:hover{
background-position:-30px 0;
}
#fontL{background:url(../images/fontL.jpg) no-repeat;}
#fontM{background:url(../images/fontM.jpg) no-repeat;}
#fontS{background:url(../images/fontS.jpg) no-repeat;}



/* #page
===================================*/
#page{
    position:fixed;
	_position:absolute;
    bottom:0px;
    height:53px;
    width:360px;
    overflow: hidden;
}
#page ul{

width:360px;
height:147px;
   background: url(../images/pageBack.jpg) repeat-y;
}
#page #pageH2{
width: 198px;
height:28px;
background:url(../images/pageH2.jpg) no-repeat;
text-indent:-5000px;
cursor: pointer;
}
#page #pageTop{
width: 360px;
height:25px;
padding:0;
background:url(../images/pageTop.jpg) no-repeat;
text-indent:-5000px;
cursor: pointer;
}
#page li{
margin:0 5px 2px 0;
padding-left:25px;
height:20px;
line-height: 20px;
overflow: hidden;
background: url(../images/pageIcon.jpg) no-repeat left center;
}





/* #bookmark
===================================*/
#bookmark{
position:absolute;
top:212px;
right:20px;
width: 96px;
}

#RSS{
position:absolute;
top:212px;
right:120px;
width: 80px;
}
#RSS img,
#bookmark img{
border: none;
display: block;
cursor: pointer;
}
#RSSaddress{
display:none;
position:absolute;
top:16px;
left:-70px;
width:240px;
padding:0 3px;
background: #fff;
border: 1px #666 dotted;
}







/* #clearFix
===================================*/

#contents:after{
	content: ".";
	display: block;
	height: 1px;
	clear: both;
	visibility: hidden;
}

#contents{
    display:inline-block;  /* MAC IE用　*/
    min-height:1%;  /* IE 7用 */
}

/*--MAC IEは非適用→ \*/

* html #contents{height: 1%;}

#contents{display: block;}
/*--ここまでMAC IEは非適用 */