/*=========================================================================
 *
 *  スタイルネーム : 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 {
	font-weight: normal;
	font-size: 100%;
}

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

abbr, acronym {
	border: 0;
}


/* ----- common
-------------------------------*/
body {
	margin: auto;
	width: 800PX;
	color:#808080;
	background-color:#F5F5F5 ;
	font-family: "ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3";
	font-size:100%;
	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;
    
    margin-top: 10px;
	text-align: left:
}
div#mainarea:after {
    display:block;
    content:"";
    height:1px;
    margin:-1px;
    clear:both;
}
div#mainarea .gmenu{
	text-align: left;
	margin-left: 10px;
}
div#comment{
    width: 750px;
    height: 25px;
    margin: 10px 0 10px 10px;
    border-left: 25px solid;
    border-bottom: 3px solid;
    border-color: #021473;
}
div#comment p{
    float: left;
	font-size: 150%;
	font-weight: bold;
	margin: 0 0 0 10px;
}
div#comment img{
	float: right;
}
div#pick1{
    width: 260px;
    margin: 10px 0 10px 10px;
    float: left;
}
div#pick1:after {
    display:block;
    content:"";
    height:1px;
    margin:-1px;
    clear:both;
}
div#pick1 img{
   width: 450px;
   height: 320px;
}
div#pick2{
    width: 320px;
    height: 320px;
    float: right;
    margin-right: 3px;
}
div#pick2:after {
    display:block;
    content:"";
    height:1px;
    margin:-1px;
    clear:both;
}
div#pick2 img{
    width: 100px;
    height:100px;
    margin-bottom: 4px;
    margin-right: 3px;
}

/* ----- #middlemenu
-------------------------------*/
div#middlemenu{
    width: 800px;
    height: 42px;
    border-bottom: 1px solid;
    border-top: 1px solid;
    margin-bottom: 10px;
    float: left;
}
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#commentleft{
	width: 380px;
	margin: 10px 0 10px 15px;
	float: left;
}
div#commentleft table {
	border: 1px solid #CCCCCC;
	border-collapse: separate;
	border-spacing: 1px;
	width: 360px;
	margin-bottom: 30px;
	font-size: 100%;
	color: #666666;
}
div#commentleft th {
	padding: 5px;
	border-right: 1px solid #CCCCCC;
	border-bottom: 1px solid #CCCCCC;
	background-color: #E1E2E6;
}
div#commentleft td {
	padding: 5px;
	border-right: 1px solid #CCCCCC;
	border-bottom: 1px solid #CCCCCC;
	background-color: #EFF2F3;
}

div#commentright{
	width: 360px;
	margin: 10px 0 10px 10px;
	float: left;
}
.popup a{
	position:relative;
	display:block;
	}
.popup a span{
	position:absolute;
	top:-200px;
	left:0px;
	width:350px;
	height:350px;
	padding:5px;
	visibility:hidden;
	background:url(http://www.atelier-bonsens.com/img/st.jpg) no-repeat;
	color:#333;
	}

.popup a:hover,.popup a:hover span{visibility:visible;}	

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