/*=========================================================================
 *
 *  スタイルネーム : AtelierBONSENS様
 *  作成者         : BARANCe Komatsu
 *  初版           : 2007-11-11
 *  最終更新       : 
 *
/*=======================================================================*/

@charset "utf-8"; 



/* ----- stylreset
-------------------------------*/
body, a, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td {
	margin: 0;
	padding: 0;
	text-decoration: none;
	text-transform: none;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}

fieldset, img, input { 
	border: 0;
}

address, caption, cite, code, dfn, em, strong, th, var {
	font-style: normal;
	font-weight: normal;
}

ul, ol {
	list-style: none;
}

caption, th{
	text-align: left;
}

h1, h2, h3, h4, h5, h6 ,title {
	font-weight: normal;
	font-size: 80%;
}

q:before, q:after {
	content:  '';
}

abbr, acronym {
	border: 0;
}

.red {
	color: #752A22;
	font-weight: bold;
	}

/* ----- common
-------------------------------*/
body {
	margin: auto;
	width: 800PX;
	color:#808080;
	background-color:#F5F5F5 ;
	font-family: "ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3";
	font-size:80%;
	text-align: center;
}
html > body {
	font-family: "ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3";
}


a {
	color:#808080;
	font-weight:bold;
	text-decoration: none;
}
a:hover {
	color:#191970;
}

ul {
	list-style-type: none;
}

p{
    font-size: 80%;
}

div#whole
{
    width:800px;
    height: auto;
    margin:0 auto;
    padding: 5px 0 0 0;
    text-align:left;
    font-weight:normal;
    font-size:12px;
    border-left: 1px solid;
    border-right: 1px solid;
    background-color: #ffffff;
}
div#whole:after{
    display:block;
    content:"";
    height:1px;
    margin:-1px;
    clear:both;
}
div#whole .comm{
    font-size: 120%;
    margin-left: 10px;
    margin-bottom: 10px;
}
/* ----- #headwrapper
-------------------------------*/
div#headwrapper {
    width: 800px;
    height: 80px;
    border-bottom:  1px solid;
}
div#headwrapper:after {
    display:block;
    content:"";
    height:1px;
    margin:-1px;
    clear:both;
}

div#headwrapper h1 a {
	display: block;
}

div#headwrapper p {
	font-size: 100%;
}
div#headwrapper .logo {
	float: left;
	margin-left: 25px;
}
/* ----- #mainearea
-------------------------------*/

div#mainarea{
   	clear: both;
    width: 800px;
    padding-top: 10px;
	text-align: left:
}
div#mainarea:after {
    display:block;
    content:"";
    height:1px;
    margin:-1px;
    clear:both;
}

div#pick1{
    width: 260px;
    margin: 0 5px 5px 8px;
    float: left;
}
div#pick1:after {
    display:block;
    content:"";
    height:1px;
    margin:-1px;
    clear:both;
}
div#pick1 img{
   width: 260px;
   height: 320px;
}
div#pick2{
    width: 260px;
    margin: 0 5px 5px 5px;
    float: left;
}
div#pick2:after {
    display:block;
    content:"";
    height:1px;
    margin:-1px;
    clear:both;
}
div#pick2 img{
   width: 260px;
   height: 320px;
}
div#pick3{
    width: 240px;
    height: 320px;
    float: right;
    margin-right: 3px;
    background-image:url(../img/mainbg.gif);
    background-repeat:no-repeat;

}
div#pick3:after {
    display:block;
    content:"";
    height:1px;
    margin:-1px;
    clear:both;
}
div#pick3 img{
    width: 110px;
    height:110px;
    margin-right: 5px;
}
div#pick3 p{
	width: 235px;
	height: auto;
	font-size: 12px;
	line-height: 110%;
	margin-top: 10px;
}

/* ----- #middlemenu
-------------------------------*/
div#middlemenu{
    width: 800px;
    height: 42px;
    border-bottom: 1px solid;
    border-top: 1px solid;
    margin-bottom: 10px;
}
div#middlemenu img{
    width: 197px;
    height:42px;
}
div#middlemenu li{
	list-style-type:none;
	width:197px;
	height:42px;
	float:left;
	padding: 0px;
	margin: 0px;
}
#middlemenu ul {
	margin: 0px;
	padding: 0px;
	}
div#middlemenu li img{
	border:0;
}
div#middlemenu li.ajaBtn{
	background-image:url(../img/g_menu01on.gif);
}
div#middlemenu li.amaBtn{
	background-image:url(../img/g_menu02on.gif);
}
div#middlemenu li.cssBtn{
	background-image:url(../img/g_menu03on.gif);
}
div#middlemenu li.htmBtn{
	background-image:url(../img/g_menu04on.gif);
}
div#middlemenu li a{
	display:block;
	width:197x;
	height:42px;
}
div#middlemenu li a:hover {
	background-color:transparent;
}
div#middlemenu li a:hover img{
	visibility:hidden;
}
/* ----- #middlearea
-------------------------------*/
div#whatsnew{
    width: 360px;
    min-height: 820px;
    float: left;
    }
div#whatsnew a{
        text-decoration: underline;
}

div#whatsnew:after {
    display:block;
    content:"";
    height:1px;
    margin:-1px;
    clear:both;
}
div.sizebox {
	margin: 0 10px;
	}
	
div.sizebox ul{
    margin: 5px 10px 0 15px;
    padding: 0px;
    }

div.sizebox li{
    list-style-type:decimal;
    margin: 10px 0 0 15px;
    padding: 0px
    }
div.sizebox img {
	float: right;
	margin-bottom: 5px;
	margin: 0 0 5px 10px;
	}
div.sizebox2 img {
	float: left;
	margin-bottom: 5px;
	margin: 0 10px 5px 0;
	}
div.sizebox:after,
div.sizebox2:after {
    display:block;
    content:"";
    height:1px;
    margin:-1px;
    clear:both;
}

div#contents{
    width: 380px;
    float: right;
    margin-right: 10px;
}
div#contents:after {
    display:block;
    content:"";
    height:1px;
    margin:-1px;
    clear:both;
}
div#contents img{
    width: 380px;
    height: 200px;
    margin: 5px 0 5px 0;
    border: 1px solid #999999;
}
div#contents:after {
    display:block;
    content:"";
    height:1px;
    margin:-1px;
    clear:both;
}

/* ----- #footwrapper
-------------------------------*/
.up{
	width: 700px;
	text-align:right;
	font-size :8pt;
	margin-top:10px;
}

div#footwrapper{
   	clear: both;
    width: 800px;
    height: 15px;
    padding-top: 10px;
   	text-align:center;
    background-color: #C0C0C0;
}
div#footwrapper p{
    color: #ffffff;
    }
div#footwrapper a{
	color:#E0FFFF;
	font-weight:bold;
	text-decoration: none;
}
div#footwrapper a:hover {
	color:#191970;
}