@charset "utf-8";
/* CSS Document */

a img{
	border-style:none;
}
html{
	/*height: 100%;*/
}
ul{
	list-style-type: none;
}
/*背景色*/
#body{
	position: relative;
	background-color: #ffffff;
	font-family:'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','Meiryo UI','メイリオ',Verdana,'ＭＳ Ｐゴシック',sans-serif;
	/*width: 100%;*/
}
#top_menu{
	position: absolute;
}

/*サイトロゴ*/
#site_logo{
	position: absolute;
	left: 0px;
	top: 20px;
	float: left;
}

/*ナビゲーター*/
#nav_area{
    position: fixed;
    background: #e9e9e9;  
    padding: 10px;  
    top: 0px;  
    width: 170px;  
    height: 100%;
    z-index: 20;
}
.nav{
	
}
#nav_illust{
	position: absolute;
 	left: 135px;
	top: 230px;
 	font-size: 12px;
    color: #444444;
 	text-decoration: none;
 	 width: 45px;
 	 height: 25px;
 	line-height: 25px; /*上下に中央寄せ*/
}
#nav_illust:hover{
	color: #888888;
}

#nav_about{
	 position: absolute;
	 left: 135px;
	 top: 140px;
	 font-size: 12px;
     color: #444444;
	 text-decoration: none;
	  width: 45px;
	  height: 25px;
	 line-height: 25px;
}
#nav_about:hover{
	color: #888888;
}

#nav_work{
	 position: absolute;
	 left: 135px;
	 top: 170px;
	 font-size: 12px;
     color: #444444;
	 text-decoration: none;
	 width: 45px;
	height: 25px;
	line-height: 25px;

}
#nav_work:hover{
	color: #888888;
}

#nav_shop{
	 position: absolute;
	 left: 135px;
	 top: 200px;
	 font-size: 12px;
     color: #444444;
	 text-decoration: none;
	 width: 45px;
	height: 25px;
	line-height: 25px;

}
#nav_shop:hover{
	color: #888888;
}

/*********** illust 作成年について **********/
.nav_illust_year_area{
	position: absolute;
	top: 245px;
	left: 105px;
}
.nav_illust_year{
	position: absolute;
	font-size: 11px;
    color: #444444;
	text-decoration: none;
	cursor: pointer;
	width: 35px;
	height: 20px;
	line-height: 20px;
}
#year_all{
	top: 0px;
}
#year_2015{
	top: 26px
}
#year_2014{
	top: 48px
}
#year_2013{
	top: 70px
}
#year_2012{
	top: 92px
}
#year_2011{
	top: 114px
}
#year_2010{
	top: 136px
}
.nav_illust_year:hover{
	color: #888888;
}


/*********** illust　詳細表示用の非表示領域 **********/
#illust_tmp{
	position: absolute;
	/*top: 500px;*/
	/*left: 300px;*/
	display: none;
}

/************* illust関連 ****************/

/*イラストの描画エリア*/
#illust_area{
	position: relative;
	top: 30px;
	margin-left: 250px;
}

/*イラストを管理する基本要素*/
.illust_ele{
	position: absolute;
	background-color: #ffffff;
	height: 280px;
	border: 1px solid #cccccc;
	cursor: pointer;
	/*-webkit-box-shadow: 2px 2px 3px 0px #aaaaaa; /* Safari, Chrome用 */
	/*-moz-box-shadow: 2px 2px 3px 0px #aaaaaa; /* Firefox用 */
	/*box-shadow: 2px 2px 3px 0px #aaaaaa; /* CSS3 */
	opacity: 0;
	display:block;
}


/**/
.illust_img:hover{
	opacity:0.8;
	filter: alpha(opacity=80);
	-ms-filter: "alpha( opacity=80 )";
	background: #fff;
}

/*イラストのタイトル*/
.illust_title{
	position: relative;
	top: 10px;
	left: 10px;
	width: 230px;
	color: #333333;
	font-size: 12px;
}
/*イラスト作成日*/
.illust_date{
	position: relative;
	color: #aaaaaa;
	font-size: 11px;
	left: 210px;
	top: 16px;
	width: 70px
}

a{
	text-decoration: none;
}

/*ページ遷移ボタンの表示領域*/
#page_area{
	position: absolute;
}
.button{
	width: 30px;
	height: 30px;
	border: 1px solid #bbbbbb;
	color: #555555;
	background-color: #e9e9e9;
	font-size: 11px;
	cursor: pointer;
	text-align: center;
	padding-top: auto;
	line-height: 29px; /*縦方向に中央寄せ。29pxとした見栄えがよかった*/
}

.button:hover{
	/*color: #888888;*/
	border: 1px solid #888888;
	/*background-color: #dddddd;*/
	
}


/************イラスト詳細表示************/
.note_area{
	position: absolute;
}
.note_img{
	float: left;
}
.note_item_caption{
	margin-left: -50px;
	width: 80px;
	font-size: 12px;
	color: #444444;
	float: left; /*要素を横並びにしたいときに指定*/
}
.note_description{
	font-size: 12px;
	color: #444444;
	margin-left: 30px;
}
.note_description_area{
	border-left: 1px solid #cccccc;
	visibility: visible; /*ie*/
	padding-left: 10px;
	padding-right: 30px;
	margin-left: 70px;
	margin-top: 20px;
	width: 400px;
}
.note_description_right_area{

}

/************about関連************/

#about_area{
	position: absolute;
	background-color: #ffffff;
	top: 30px;
	/*padding-left: 15%;*/
	left: 350px;
	height: 100%;
	width: 500px;
	display:block;
	
	-ms-filter: "alpha( opacity=0 )";
	filter: alpha( opacity=0 );
	opacity: 0;
	visibility: hidden; /*ie*/
}

#logo{
	
}
/*aboutと表記*/
.caption{
	font-size: 13px;
	color: #444444;
	float: left;
	padding-top: 10px;
}
.description_area{
	position: absolute;
	border-left: 1px solid #cccccc;
	top: 50px;
	padding-left: 0px;
	margin-left: 20%;
	height: auto;
	visibility: visible; /*ie*/
}
#banner{
	margin-left: 50px;
}

.item_caption{
	margin-left: -90px;
	width: 80px;
	font-size: 13px;
	color: #444444;
	float: left; /*要素を横並びにしたいときに指定*/
}
.description{
	font-size: 13px;
	color: #444444;
	margin-left: 50px;
	width: 500px;
}
/*店名*/
.description_shopname{
	font-size: 16px;
	color: #444444;
	margin-left: 50px;
	width: 500px;
}
.social{
	color: #444444;
	text-decoration: none;
}
.social:hover{
	color: #888888;
}


/************work関連************/
#work_area{
	position: absolute;
	background-color: #ffffff;
	top: 30px;
	/*padding-left: 15%;*/
	left: 170px;
	height: 100%;
	width: 1200px;
	display:block;
	
	-ms-filter: "alpha( opacity=0 )";
	filter: alpha( opacity=0 );
	opacity: 0;
	visibility: hidden; /*ie*/
}

/*年代分け*/
.work_year{
	position: absolute;
	border-right: 1px solid #cccccc;
	font-size: 18px;
	color: #444444;
	margin-left: 100px;
	padding-right: 10px;
}


/*workを管理する基本要素*/
.work_ele{
	/*position: absolute;*/
	/*float: left;*/
	background-color: #ffffff;
	height: 120px;
	/*border: 1px solid #cccccc;*/
	/*-webkit-box-shadow: 2px 2px 3px 0px #aaaaaa; /* Safari, Chrome用 */
	/*-moz-box-shadow: 2px 2px 3px 0px #aaaaaa; /* Firefox用 */
	/*box-shadow: 2px 2px 3px 0px #aaaaaa; /* CSS3 */
	opacity: 0;
	display:block;
}
/*workの画像*/
.work_img:hover{
	/*float: left;*/
	opacity:0.8;
	cursor: pointer;
	filter: alpha(opacity=80);
	-ms-filter: "alpha( opacity=80 )";
	background: #fff;
}
.work_description_area{
	border-left: 1px solid #cccccc;
	visibility: visible; /*ie*/
	margin-top: 28px;
	margin-left: 80px;
	padding-left: 10px;
}
/*workのタイトル(仕事名)*/
.work_title{
	margin-left: 30px;
	margin-bottom: 5px;
	font-size: 14px;
	color: #444444;
	float: left; /*要素を横並びにしたいときに指定*/
}
/*workのキャプション*/
.work_caption{
	margin-left: -60px;
	margin-bottom: 5px;
	font-size: 12px;
	color: #444444;
	float: left; /*要素を横並びにしたいときに指定*/
}
/*workの説明文*/
.work_description{
	margin-left: 20px;
	margin-bottom:5px;
	font-size: 12px;
	width: 180px;
	color: #444444;
}


/************shop関連************/
#shop_area{
	position: absolute;
	background-color: #ffffff;
	top: 30px;
	/*padding-left: 15%;*/
	left: 140px;
	height: 100%;
	width: 1000px;
	display:block;
	
	-ms-filter: "alpha( opacity=0 )";
	filter: alpha( opacity=0 );
	opacity: 0;
	visibility: hidden; /*ie*/
}

/*ie, opera用の余白*/
#blank_space{
	position: absolute;
	top: 80px;
	height: 90%;
	width: 95%;
	background-color: #f2f2f2;
}

/************copyright表記*******************/
#copy_right{
	position: absolute;
	font-size: 10px;
	color: #999999;
	-ms-filter: "alpha( opacity=0 )";
	filter: alpha( opacity=0 );
	opacity: 0;
	visibility: hidden; /*ie*/
}

/***************広告の設定**********************/
.tdftad{
	position: absolute;
	-ms-filter: "alpha( opacity=0 )";
	filter: alpha( opacity=0 );
	opacity: 0;
	visibility: hidden; /*ie*/
}
.tdftad a{
	font-size: 10px;
	color: #aaaaaa;
}

/***************カウンタの設定**********************/
.counter{
	position: absolute;
	left: 98%;
}