@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;
background: url(../images/centerBack.jpg) repeat-y;
}

#center h1{
width:514px;
height:195px;
position: relative;
}
#center h1 strong{
width:514px;
height:195px;
position: absolute;
left:0;top:0;
line-height: 500px;
overflow: hidden;
}

#h1company strong{background: url(../images/companyH1.jpg) no-repeat;}
#h1designer strong{background: url(../images/designerH1.jpg) no-repeat;}
#h1employee strong{background: url(../images/employeeH1.jpg) no-repeat;}

#h1cool strong{background: url(../images/coolH1.jpg) no-repeat;}
#h1being strong{background: url(../images/beingH1.jpg) no-repeat;}
#h1web strong{background: url(../images/webH1.jpg) no-repeat;}
#h1success strong{background: url(../images/successH1.jpg) no-repeat;}

#h1seo strong{background: url(../images/seoH1.jpg) no-repeat;}
#h1cms strong{background: url(../images/cmsH1.jpg) no-repeat;}
#h1ajax strong{background: url(../images/ajaxH1.jpg) no-repeat;}
#h1blog strong{background: url(../images/blogH1.jpg) no-repeat;}
#h1all strong{background: url(../images/allH1.jpg) no-repeat;}

#h1listing strong{background: url(../images/listingH1.jpg) no-repeat;}
#h1seocompany strong{background: url(../images/seocompanyH1.jpg) no-repeat;}
#h1webcompany strong{background: url(../images/webcompanyH1.jpg) no-repeat;}
#h1bargain strong{background: url(../images/bargainH1.jpg) no-repeat;}

#h1webcom strong{background: url(../images/webcomH1.jpg) no-repeat;}
#h1staff strong{background: url(../images/staffH1.jpg) no-repeat;}
#h1coupon strong{background: url(../images/couponH1.jpg) no-repeat;}
#h1mall strong{background: url(../images/mallH1.jpg) no-repeat;}

#h1image strong{background: url(../images/imageH1.jpg) no-repeat;}
#h1instruct strong{background: url(../images/instructH1.jpg) no-repeat;}
#h1user strong{background: url(../images/userH1.jpg) no-repeat;}

#center #h1Box{
width:514px;
height:358px;
position:relative;
}
.producer #center #h1Box{background: url(../images/producerH1Box.jpg) no-repeat 0 0;}
.motive #center #h1Box{background: url(../images/motiveH1Box.jpg) no-repeat 0 0;}
.technique #center #h1Box{background: url(../images/techniqueH1Box.jpg) no-repeat 0 0;}
.cost #center #h1Box{background: url(../images/costH1Box.jpg) no-repeat 0 0;}
.management #center #h1Box{background: url(../images/managementH1Box.jpg) no-repeat 0 0;}
.communication #center #h1Box{background: url(../images/communicationH1Box.jpg) no-repeat 0 0;}


#center #h1Box p{
position:absolute;
top: 35px;
left: 38px;
width:305px;
height:300px;
overflow: auto;
text-indent:1em;
line-height:20px;
}
#center #h1Box p strong{
display:block;
font-size: 130%;
color:#D2554F;
background:#F7EFEC;
text-indent:0.5em;
margin-bottom: 5px;
}
#center .centerBox h2{
padding-right:30px;
height:150px;
position: relative;
overflow: hidden;
line-height: 240px;
text-indent: 135px;
font-size: 16px;
}
#center .centerBox h2 span{
display:none;
}
.producer #subH2a{background: url(../images/producerH2a.jpg) no-repeat;}
.motive #subH2a{background: url(../images/motiveH2a.jpg) no-repeat;}
.technique #subH2a{background: url(../images/techniqueH2a.jpg) no-repeat;}
.cost #subH2a{background: url(../images/costH2a.jpg) no-repeat;}
.management #subH2a{background: url(../images/managementH2a.jpg) no-repeat;}
.communication #subH2a{background: url(../images/communicationH2a.jpg) no-repeat;}

.producer #subH2b{background: url(../images/producerH2b.jpg) no-repeat;}
.motive #subH2b{background: url(../images/motiveH2b.jpg) no-repeat;}
.technique #subH2b{background: url(../images/techniqueH2b.jpg) no-repeat;}
.cost #subH2b{background: url(../images/costH2b.jpg) no-repeat;}
.management #subH2b{background: url(../images/managementH2b.jpg) no-repeat;}
.communication #subH2b{background: url(../images/communicationH2b.jpg) no-repeat;}

.producer #subH2c{background: url(../images/producerH2c.jpg) no-repeat;}
.motive #subH2c{background: url(../images/motiveH2c.jpg) no-repeat;}
.technique #subH2c{background: url(../images/techniqueH2c.jpg) no-repeat;}
.cost #subH2c{background: url(../images/costH2c.jpg) no-repeat;}
.management #subH2c{background: url(../images/managementH2c.jpg) no-repeat;}
.communication #subH2c{background: url(../images/communicationH2c.jpg) no-repeat;}

.producer #subH2d{background: url(../images/producerH2d.jpg) no-repeat;}
.motive #subH2d{background: url(../images/motiveH2d.jpg) no-repeat;}
.technique #subH2d{background: url(../images/techniqueH2d.jpg) no-repeat;}
.cost #subH2d{background: url(../images/costH2d.jpg) no-repeat;}
.management #subH2d{background: url(../images/managementH2d.jpg) no-repeat;}
.communication #subH2d{background: url(../images/communicationH2d.jpg) no-repeat;}



#center .centerBox{
width:514px;
}
.producer #center .centerBox{background: url(../images/producerPBack.jpg) repeat-y;}
.motive #center .centerBox{background: url(../images/motivePBack.jpg) repeat-y;}
.technique #center .centerBox{background: url(../images/techniquePBack.jpg) repeat-y;}
.cost #center .centerBox{background: url(../images/costPBack.jpg) repeat-y;}
.management #center .centerBox{background: url(../images/managementPBack.jpg) repeat-y;}
.communication #center .centerBox{background: url(../images/communicationPBack.jpg) repeat-y;}

#center .centerBox p{
padding: 0 50px 30px 38px;
text-indent:1em;
}
.producer #center .centerBox p{background: url(../images/producerPBottom.jpg) no-repeat left bottom;}
.motive #center .centerBox p{background: url(../images/motivePBottom.jpg) no-repeat left bottom;}
.technique #center .centerBox p{background: url(../images/techniquePBottom.jpg) no-repeat left bottom;}
.cost #center .centerBox p{background: url(../images/costPBottom.jpg) no-repeat left bottom;}
.management #center .centerBox p{background: url(../images/managementPBottom.jpg) no-repeat left bottom;}
.communication #center .centerBox p{background: url(../images/communicationPBottom.jpg) no-repeat left bottom;}


#center .centerBox p strong{
display:block;
font-size: 120%;
margin:10px 0 5px;
border-left:4px #C86466 solid;
border-bottom:1px #C86466 solid;
text-indent:5px;
color:#444;
}


#successBox{
display:block;
position:relative;
}
#successBox #ready{
display:none;
margin:20px;
padding: 10px;
border: 1px #999 dotted;
}
#checkMail{
display: block;
}
#merumagaButton{
display: block;
margin: 5px 0 5px 120px ;
}
#sameCateLink{
margin-top: -20px;
}
#sameCateLink h3{
padding:20px 30px 0 60px;
}
#sameCateLink p span{
display:block;
text-indent:0;
margin: 0 20px 0;
padding:10px;
border:1px #ccc dashed;
}
#sameCateLink p span a,#sameCateLink p span em{
font-style: normal;
display:block;
height:30px;
line-height:30px;
font-size:90%;
}
#sameCateLink p span a span{
font-size:80%;
color: #D20202;
background:#fff;
margin:-30px 0 0 0;
padding:0;
border: none;
text-decoration:none;
display: block;
width:212px;
line-height: 30px;
text-align:right;
	filter:alpha(opacity=70); /*IE*/
	-moz-opacity:0.70; /*FF*/
	opacity:0.70;
}
#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;
overflow: auto;
}
.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;
font-size: 80%;
}

/* #menu
===================================*/
#menu{
width:272px;
float:left;
background:url(../images/menuBack.jpg) repeat-y 30px 0;
margin-top: 42px;
}
#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 5px 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;
color:#555;
}


#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;
}
#menuEnd p{
padding:10px 0;
border-top:1px #666 dotted;
}

#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;
}

#company #menu li a#companyMenu{background-position: 0 -52px; color: #fff;}
#designer #menu li a#designerMenu{background-position: 0 -52px; color: #fff;}
#employee #menu li a#employeeMenu{background-position: 0 -52px; color: #fff;}

#cool #menu li a#coolMenu{background-position: 0 -52px; color: #fff;}
#being #menu li a#beingMenu{background-position: 0 -52px; color: #fff;}
#web #menu li a#webMenu{background-position: 0 -52px; color: #fff;}
#success #menu li a#successMenu{background-position: 0 -52px; color: #fff;}

#seo #menu li a#seoMenu{background-position: 0 -52px; color: #fff;}
#cms #menu li a#Menu{background-position: 0 -52px; color: #fff;}
#ajax #menu li a#cmsMenu{background-position: 0 -52px; color: #fff;}
#blog #menu li a#blogMenu{background-position: 0 -52px; color: #fff;}
#all #menu li a#allMenu{background-position: 0 -52px; color: #fff;}

#seocompany #menu li a#seocompanyMenu{background-position: 0 -52px; color: #fff;}
#webcompany #menu li a#webcompanyMenu{background-position: 0 -52px; color: #fff;}
#bargain #menu li a#bargainMenu{background-position: 0 -52px; color: #fff;}
#listing #menu li a#listingMenu{background-position: 0 -52px; color: #fff;}

#company #menu li a#companyMenu{background-position: 0 -52px; color: #fff;}
#staff #menu li a#staffMenu{background-position: 0 -52px; color: #fff;}
#sameone #menu li a#sameoneMenu{background-position: 0 -52px; color: #fff;}

#image #menu li a#imageMenu{background-position: 0 -52px; color: #fff;}
#instruct #menu li a#instructMenu{background-position: 0 -52px; color: #fff;}
#user #menu li a#userMenu{background-position: 0 -52px; color: #fff;}













/* #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;
}


/*
#page{
width: 30px;
height:201px;
background: url(../images/pageBack.jpg) no-repeat 0 75px;
position:absolute;
top: 517px;
left:-30px;
}
#page li{
width: 30px;
height: 75px;
text-indent: -5000px;
background:url(../images/pageTop.jpg) no-repeat;
}
#page li:hover{
background-position:-30px 0;
}
*/






/* #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は非適用 */