@charset "Shift_JIS";

/********************************************************************
 * initialize
 * 
 *******************************************************************/
* {
	padding : 0px;
	margin : 0px;
	text-indent : 0px;
	line-height : 100%;
	font-size:12px;
	font-family: "MS P Gothic",Osaka,Verdana,Chicago,sans-serif;
	color:#333333;
}

hr {
	display : none;
}

a{
	color: #2A7E86;
	font-size:inherit
}

a:hover{color: #8FC08D;text-decoration:none;}

p{
	line-height:140%;
	font-size:12px;
}

img{
	vertical-align:top;
	border:0;
}


a.link{
	background: url(../img/common/icon_arrow_red.gif) no-repeat 0px 2px;
	padding-left:10px;
	vertical-align:top;
	margin-top:5px;
	line-height:140%;
}

p.link{
	margin-top:10px;
}

p span.mark{
	color:#FF3300;
	line-height:inherit;
}

img.button{
	text-align:right;	
}

/********************************************************************
 * common tools
 * 
 *******************************************************************/

.clearboth {
	font-size : 0px;
	height : 0px;
	line-height : 1%;
	clear : both;
}

/********************************************************************
 * page layout
 * 
 *******************************************************************/
 
body {
	margin:0 auto;
	width : 830px;
	text-align:center;
	background: url(../img/common/bg_body.jpg) repeat-y center 0;
	background-color:#F8F1E3;
}

#back_bg
    {
	}


#container{
	text-align:left;
	padding:0 25px;
}


#header{
	width : 100%; 
	height : 25px;
	border-bottom:5px solid #330000;
	background-color:#FFFFFF;
}

#wrapper{
	width : 100% ;
	height:100%;
}

#sidemenu{
	width : 170px ;
	float:left;
	height:100%;
	min-height:800px;
	overflow:visible;
}

#main{
	width : 610px ;
	float:left;
}

#footer{
	width : 100% ; ;
	height : 100px;
	clear : both ; 
}




/********************************************************************
 * header layout
 * 
 *******************************************************************/
#header{
	position: relative;
}

/* logo and comment
----------------------------------------------- */

/* logotitle */
#header h1 { 
	position: absolute;
	width: 134px;
	height: 15px;
	top:5px;
	left:10px;
}

/* headcomment */	
#header p { 
	position: absolute;
	top: 5px;
	right: 10px;
	font-size:80%;
}


/********************************************************************
 * sidemenu layout
 * 
 *******************************************************************/


/* mainmenu
----------------------------------------------- */
#sidemenu{
}


#sidemenu dl.mainmenu{
}

#sidemenu dl.mainmenu dt{
	width:100%;
	height:32px;
}


/* menu eachparts */
#sidemenu dl.mainmenu dd ul{
	list-style:none;
	width:100%;
}

#sidemenu dl.mainmenu dd ul.profile{
	margin-bottom:15px;
}

#sidemenu dl.mainmenu dd ul li{
}

#sidemenu dl.mainmenu dd ul a{
	display:block;
	width:100%;
	height:30px;
	text-indent:-500px;
	overflow:hidden;
}

#sidemenu dl.mainmenu dd ul.webdesign a{
	background-image:url(../img/sidemenu/menu_sub_webdesign.gif);
}

#sidemenu dl.mainmenu dd ul.illust a{
	background-image:url(../img/sidemenu/menu_sub_illust.gif);
}

#sidemenu dl.mainmenu dd ul.cmsd a{
	background-image:url(../img/sidemenu/menu_sub_cmsd.gif);
}

#sidemenu dl.mainmenu dd ul.info a{
	background-image:url(../img/sidemenu/menu_sub_info.gif);
}

#sidemenu dl.mainmenu dd ul.profile a{
	background-image:url(../img/sidemenu/menu_sub_profile.gif);
}


/* rollover */
dl.mainmenu dd ul li.menu01 a{background-position:0px 0px;}
dl.mainmenu dd ul li.menu01 a:hover{ background-position:-181px 0px;}

dl.mainmenu dd ul li.menu02 a{background-position:0px -30px;}
dl.mainmenu dd ul li.menu02 a:hover{ background-position:-181px -30px;}

dl.mainmenu dd ul li.menu03 a{background-position:0px -60px;}
dl.mainmenu dd ul li.menu03 a:hover{ background-position:-181px -60px;}

dl.mainmenu dd ul li.menu04 a{background-position:0px -90px;}
dl.mainmenu dd ul li.menu04 a:hover{ background-position:-181px -90px;}


/* sub menu
----------------------------------------------- */
#sidemenu dl.mainmenu dd ul a.selected{ /* sub menu category selected*/
	text-indent:0px;
	background-image:none;
}

#sidemenu dl.mainmenu dd ul li.submenu ul{
	list-style-position:outside;
	width:100%;
}

#sidemenu dl.mainmenu dd ul li.submenu ul li{
	height:20px;
	padding:5px 10px 0 26px;
	border-bottom:1px solid #CCCCCC;
}

#sidemenu dl.mainmenu dd ul li.submenu ul li.selected{
	height:18px;
	background-color:#D4D0C8;
	color:#666666;
	font-size:12px;
	margin:0 1px;
	padding:7px 10px 0 25px;
}

#sidemenu dl.mainmenu dd ul li.submenu ul a{
	font-size:12px;
	background-image:none;
	display:inline;
	width:100%;
	text-indent:0px;
	overflow:auto;
}


/* bannar menu
----------------------------------------------- */
ul.bannar{
	list-style-type:none;
}

ul.bannar li{
}

ul.bannar li.end{
	margin-bottom:10px;
}


/* address
----------------------------------------------- */
#sidemenu div.address{
	text-algin:left;
	padding:5px;
	margin:10px;
	border:1px solid #BCAB87;
	background:#FFFFFF;
}

#sidemenu div.address p.title{
	font-weight:bold;
	font-size:80%;
}

#sidemenu div.address p{
	font-size:80%;
	line-height:110%;
	padding-bottom:5px;
}



/********************************************************************
 * maincontents layout
 * 
 *******************************************************************/

/* layout
----------------------------------------------- */

#main #main_pd{
	padding:10px;
	margin-bottom:20px;
}

/* contents title*/
#main #contents_title{ 
	height:120px;
	border-bottom:1px solid #BCAB87;
}

/* bread navigation*/
#main #main_pd #bread_navi{ 
	padding-bottom:15px;
}

#main #main_pd #bread_navi p{
	line-height:100%;
	font-size:10px;
	background:#E7E7E7;
	padding:3px 5px;
}

/* pagetitle */
#main h2.title{ 
	padding-bottom:10px;
	background: url(../img/common/title_indent.gif) no-repeat 0 0;
	height:40px;
	
	font-size:15px;
	font-weight:bold;
	padding:12px 0 0 20px;
	line-height:110%;
}

#main h2.title img.rss{ /*rss in pagetitle */
	vertical-align:middle;
	margin-left:5px;
}

#main div.plancat{ /* plan category in pagetitle */
	font-size:10px;
	font-weight:normal;
	padding:2px 0 2px 12px;
	border-bottom:1px solid #BCAB87;
	border-left:10px solid #BCAB87;
	line-height:120%;
}

#main div.title_comment{
	height:100%;
	overflow:auto;
	margin-bottom:20px;
}

#main div.title_comment p{
}

/* paragraph title */
#main h3{
	font-size :13px;
	line-height :120%;
	margin-bottom :15px;
	padding :0 0 3px 15px;
	border-bottom :1px solid #cccccc;
	background:url(../img/common/icon_circle01.gif) no-repeat left 2px;
}

/* paragraph */
#main div.prg{
	margin-bottom:30px;
	padding:0 15px 10px 15px;
	text-align:left;
	clear:both;
}

#main div.prg h4{
	margin-bottom:5px;
	color:#666666;
	font-size:12px;
}

#main div.prg p{
	line-height:150%;
}

#main div.prg p.pd,#main p.pd{
	margin-bottom:10px;
}

#main div.prg strong.mark{
	display:block;
	padding:10px 0;
	line-height:130%;
}


/* paragraph appendix */
#main div.prg div.appendix,#main div.appendix{
	padding :10px;
	border :1px solid #BCAB87;
	background-color :#F5F5DC;
	margin:10px 0 0 0;
}

#main div.prg div.appendix span.title{
	font-weight:bold;
	font-size:12px;
	display:block;
	padding-bottom:5px;
	border-bottom :1px solid #FF4500;
	margin-bottom:5px;
	color :#FF4500;
}

#main div.appendix ul{ /* list01 */
	list-style-position:outside;
	padding-left:17px;
	margin-left:2px;
}


#main div.appendix ul li ul{ /* list02 */
	padding:5px 0 5px 0;
	margin:5px 10px 0 13px;;
	border-top:2px solid #CCCCCC;
	list-style-type:none;
	list-style-position:outside;
}

#main div.appendix ul li ul li p{ /* list02 */
	line-height:130%;
}


/* photo block */
#main div.prg div.photoblock{
	margin-bottom:15px;
	clear:both;
	height:100%;
	overflow:hidden
}

div.photo_right{
	float:right;
	margin:0 0 0 10px;
}

div.photo_left{
	float:left;
	margin:0 10px 0 0;
}


div.photo_right img, div.photo_left img{
	border:1px solid #cccccc;
	display:block;
}

div.photo_right img.b_pd, div.photo_left img.b_pd{
	margin-bottom:10px;
}

div.photo_right span, div.photo_left span{
	font-size:80%;
}


/* bottom_line */
#main div.bottom_line{
	text-align:right;
	font-size:10px;
	padding-top:5px;
	border-top:1px solid #E7E7E7;
}

/* bottom_line prg*/
#main div.prg div.bottom_line{
	padding-top:10px;
	border-top:none;
}



/* web design
----------------------------------------------- */

/* flow*/
#main div.webflow_arrow{
	margin-bottom:20px;
	text-align:center;
}

/* plan block (included top csontents)*/
#planblock {
	margin-bottom:20px;
	overflow:hidden;
}

#planblock dl{
	margin-right:10px;
	width:190px; 
	background-color:#F2EFE8;
	float:left;
}

#planblock dl.end{
	margin-right:0px;
}

#planblock dl dt{
	
}

#planblock dl dd{
	padding:5px 10px 10px 10px;
	border:1px solid #BCAB87;
	border-top:none;
	height:193px;
	overflow:hidden;
}

#planblock dl dd.cms{
	background: url(../img/top/plan_bg_cms.gif) no-repeat left bottom;
}

#planblock dl dd.standard{
	background: url(../img/top/plan_bg_standard.gif) no-repeat left bottom;
}

#planblock dl dd.right{
	background: url(../img/top/plan_bg_right.gif) no-repeat left bottom;
}


#planblock dl dd p{
	line-height:130%;
	padding-top:5px;
}

#planblock dl dd p strong{
	line-height:130%;
	font-weight:normal;
	color:#FF3300;
}

#planblock dl dd p.button{
	text-align:right;
}

/* plan detail */

#main div.prg h4.plan_detail{
	background:#E7E7E7;
	padding:4px 3px 1px 4px;
	margin-bottom:5px;
	border-bottom:1px solid #CCCCCC;
}

#main div.prg div.plan_detail_box{
	margin-bottom:15px;
}


/* plan price box */
#main div.prg div.plan_price_box{
	height:100%;
	margin:15px 0 10px 0;
	background: url(../img/top/infromation_bg.jpg) no-repeat left bottom;
	padding:5px 5px;
	border:1px solid #CCCCCC;
}

#main div.prg div.plan_price_box table{
}

#main div.prg div.plan_price_box table th{
	font-weight:bold;
	padding:5px;
	margin-right:5px;
	background:#D4D0C8;
	color:#666666;
	width:60px;
}

#main div.prg div.plan_price_box table td{
	padding:5px;
}

#main div.prg div.plan_price_box span.title{
	font-weight:bold;
	font-size:14px;
	display:block;
	padding-bottom:5px;
	border-bottom :1px solid #FF4500;
	margin-bottom:5px;
	color :#FF4500;
}


#main div.prg div.plan_price_box span.price{
	color:#2A7E86;
	font-size:16px;
	font-weight:bold;
	padding-bottom:5px;
}

#main div.prg div.plan_price_box p{
	line-height:130%;
}


/* plan sample box */
#main div.prg div.plan_sample_box{
	margin-bottom:20px;
	height:100%;
	border:1px solid #CCCCCC;
	padding:5px 10px;
	overflow:auto;
}

#main div.prg div.plan_sample_box p{
	line-height:140%;
	color:#444444;
}

#main div.prg div.plan_sample_box p.price{
	margin-bottom:5px;
}

#main div.prg div.plan_sample_box p.price span{
	font-weight:bold;
	background:#E7E7E7;
	padding:3px 2px;
	color:#666666;
}


/* works
----------------------------------------------- */

#main div.prg div.works_box{
}

#main div.prg div.works_box ul{
	width:100%;
}

#main div.prg div.works_box ul{
	clear:both;
	height:100%;
	list-style:none;
}

#main div.prg div.works_box ul li{
	width:175px;
	margin-right:10px;
	margin-bottom:25px;
	float:left;
	text-align:center;
	list-style:none;
}

#main div.prg div.works_box ul li div.box{
	height:235px;
	min-height:220px;
}

#main div.prg div.works_box ul li img{
	margin-bottom:8px;
	border:1px solid #CCCCCC;
}

#main div.prg div.works_box ul li p{
	line-height:130%;
	font-size:10px;
}

#main div.prg div.works_box ul li p span.title{
	font-weight:bold;
	padding-bottom:3px;
	display:block;
	font-size:12px;
}


#main div.prg div.works_box ul li.end{
	margin-right:0px;
}

/* for all list page
----------------------------------------------- */

/* cat for collum title */
#main div.cat{
	margin-bottom:7px;
}

#main div.cat span{
	background:#E7E7E7;
	font-size :10px;
	font-weight:normal;
	padding:3px 3px;
}

#main div.cat span a{
	font-size :10px;
}

/* ul for listpage */
#main ul.list{ /* list */
	list-style:none;
}

#main ul.list li{
	padding:5px 0 10px 0;
	list-style:none;
	border-bottom:1px solid #CCCCCC;
	margin-bottom:5px;
}

#main ul.list li p.title{
	font-weight:bold;
	margin-bottom:10px;
	color:#666666;
	line-height:120%;
}

#main ul.list li span.date{
	padding:0 0 3px 5px;
	color:#999999;
	font-size:80%;
}

#main ul.list li p.contents{
	line-height:130%;
}

#main ul.list li p.contents span.link{
	padding-left:10px;
}

/* page navigation for list*/
#main ul li.link_tolist {
	font-size :10px;
	border-bottom:none;
	clear:both;
}


/* page navigation for article*/
#main div.link_tolist {
	font-size :10px;
	margin-bottom:15px;
}


/* table set
----------------------------------------------- */
table.list {
	border :1px solid #CCCCCC;
	width:560px;
}

table.list p{
	font-size:12px;
	lie-height:130%;
}

table.list th {
	font-weight :bold ;
	text-align :left;
	padding :5px;
	background-color :#E7E7E7;
	border-right :1px solid #CCCCCC;
	border-bottom :1px solid #CCCCCC;
	border-left :1px solid #FFFFFF;
	border-top :1px solid #FFFFFF;
	vertical-align:top;
}

table.list td {
	padding-right :10px;
	padding-left :10px;
	padding-top :5px;
	padding-bottom :5px;
	border-right :1px solid #FFFFFF;
	border-bottom :1px solid #CCCCCC;
	border-left :1px solid #FFFFFF;
	border-top :1px solid #FFFFFF;
	line-height :120%;
}


/* form parts
----------------------------------------------- */
/* main contents only sidemenu none */
#main.wide{
	width:100%;
}

#wrapper_wide{
	width : 100% ;
	height:100%;
	overflow:auto;
	background:#FFFFFF;
}


/* colum category */
form.cat_menu{
}

select#collum_cat{
	margin-bottom:10px;
}

input.cat_button{
	vertical-align:top;
	line-height:100%;
	padding:2px 0 0 0;
	font-size:12px;
}

/* contact form */
form select{
	width:100px;
}

form textarea,form input{
	padding:3px;
}

input.button_submit{
	font-weight:bold;
	padding:5px;
}

input.button_reset{
	padding:5px;
}

/* contact form config page*/

div.wide#main div.prg#form{
	text-align:center;
	height:500px;
	min-height:500px;
	overflow:visible;
}

span.copy a{
	font-size:9px;
	text-align:center;
}

/********************************************************************
 * footer
 * 
 *******************************************************************/

#footer{
}

/* footer navi
----------------------------------------------- */
#footer #footnavi{
	height:55px;
	text-align:center;
	background:#FFFFE0;
	border-top:1px solid #BCAB87;
	margin:0 1px;
	
}

#footer #footnavi p{
	font-size:10px;
	padding-top:5px;
}



/* copyright
----------------------------------------------- */
#footer #copyright{
	background: url(../img/common/footer.gif) no-repeat 0 0px;
	height:45px;
}

#footer #copyright p{
	font-size:10px;
	line-height:110%;
	color:#333333;
	text-align:right;
	padding:15px 15px 0 0;
}