@charset "utf-8";
body {
	font: 100%  "メイリオ", "Meiryo", "Osaka", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;

background: #fbe2e8;
	color: #000000;
	margin: 0; /* 複数の異なるブラウザの初期設定値に対応するため、body エレメントのマージンと余白を 0 にすることをお勧めします */
	padding: 0;
	text-align: center; /* これにより、IE 5* ブラウザではコンテナが中央揃えになります。そして、テキストは、#container セレクタの初期設定である左揃えに設定されます */
	background-image: url(../pic/background_bg.png);
	background-repeat: repeat-x;
}


li {
	border: none;
	margin: 0px;
	padding: 0px;
}

a {
	border: none;
	margin: 0px;
	padding: 0px;
}

img {
	border: none;
	border-style: none;
}

#container {
	width: 820px;
	/* 最大幅である 820px より 20px 小さくすることにより、ブラウザクロームの使用が可能となり、水平スクロールバーが表示されなくなります */
	margin: 0 auto; /* 自動マージン（幅と連動）により、ページが中央揃えになります */
	padding-top: 12px;
	border: 0px solid #000000;
	text-align: left; /* この設定は body エレメントの text-align: center より優先されます。 */
}
#header {
	height: 222px;
	background-image:url(../pic/header_bg.png);
	background-repeat: no-repeat;
	padding: 0px;  /* この余白は、その下に表示される div のエレメントの左揃えと一致します。#header でテキストの代わりにイメージが使用される場合は、必要に応じて、余白を削除してください。 */
}


/***************************************
　メニューのCSSスプライト設定
　　52, 65, 67, 75, 
***************************************/
#menu_list {
	background:url("../pic/menu_link.png") no-repeat;
	width: 259px;
	height: 0px;
	padding: 0;
	margin-left: 527px;
}

#menu_list li, #menu_list a {
	height: 36px;
	display: block;
}

#menu_list li {
	margin-top: 22px;
	float: left;
	list-style: none;
	display: inline;
	text-indent: -9999em;
}

#menu_list-01 { width: 52px; }
#menu_list-02 { width: 66px; }
#menu_list-03 { width: 65px; }
#menu_list-04 { width: 75px; }

#menu_list-01 a:hover { background:url("../pic/menu_link.png") 0px no-repeat; }
#menu_list-02 a:hover { background:url("../pic/menu_link.png") -52px no-repeat; }
#menu_list-03 a:hover { background:url("../pic/menu_link.png") -118px no-repeat; }
#menu_list-04 a:hover { background:url("../pic/menu_link.png") -183px no-repeat; }

#menu_list-11 { width: 52px; background:url("../pic/menu_link.png") 0px no-repeat; }
#menu_list-12 { width: 66px; background:url("../pic/menu_link.png") -52px no-repeat; }
#menu_list-13 { width: 65px; background:url("../pic/menu_link.png") -118px no-repeat; }
#menu_list-14 { width: 75px; background:url("../pic/menu_link.png") -183px no-repeat; }





/***************************************
	Top
***************************************/

  /***************************************
	  Recent Works
  ***************************************/

#top_recent_topic
{
	padding-top: 25px;
	margin-left: 10px;
}

#top_recent
{
	margin-top: -7px;
	margin-left: 50px;
	margin-bottom: 40px;
}


#top_recent table
{
	width: 720px;
	font-size: 12px;
	color:#333;
}

#top_recent td
{
	border-bottom-style: dashed;
	border-bottom-width: 1px;
	border-color: #601;
	height:30px; 
}

#top_recent td.recent_date
{
	width: 70px;
	text-align: center;
}

#top_recent td.recent_part
{
	width: 170px;
	text-align: center;
	color:#601;
}

#top_recent td.recent_title
{
	padding-left: 10px;
}
#top_recent td.recent_title b
{
	margin-left: -8px;
	font-size: 14px;
	color:#000;
}
#top_recent td.recent_title l
{
	color:#888;
}

#top_recent td a
{
	padding-left: 5px;
	padding-right: 5px;
	text-decoration: none;
	background-color: #FFF;
	color:#00F;
	font-size: 10px;
}
    /***************************************
		Top_Pickup
    ***************************************/
#top_pickup_topic
{
	margin-left: 10px;
}

#top_pickup
{
	margin-top: 25px;
	margin-left: 50px;
	margin-bottom: 40px;
}

#top_pickup table
{
	border-spacing: 0px;
}

#top_pickup iframe
{
	margin-bottom: 10px;
}


#top_pickup td
{
	width: 217px;
	padding-right: 35px;
}

#top_pickup tr.top_picup_movie td
{
}

#top_pickup tr.top_pickup_hint td
{
	height: 25px;
	font-size: 11px;
	color: #888;
}

#top_pickup tr.top_pickup_hint td lb
{
	color: #000;
	margin-left: -6px;
	font-size: 12px;
}


	/***************************************
		Twitter
	***************************************/

#twitter_topic
{
	margin-left: 10px;
}

#twitter_link
{
	padding-top: 30px;
	padding-left: 50px;
	padding-bottom: 40px;
}





/***************************************
	アバウト
***************************************/

  /***************************************
	  What is 77 works
  ***************************************/
#whatis_topic
{
	padding-top: 25px;
	margin-left: 10px;
}

#whatis
{
	margin-top: 25px;
	margin-left: 10px;
	margin-bottom: 40px;
}


#whatis table
{
	font-size: 12px;
}

#whatis td.img
{
	width:290px;
}

#whatis td.text
{
	width:460px;
	color:#222;
}

#whatis td b
{
	font-size: 15px;
	color:#000;
	line-height: 24px;
}



    /***************************************
		Profile
    ***************************************/
#profile_topic
{
	margin-left: 10px;
}

#profile
{
	margin-top: 25px;
	margin-left: 50px;
	padding-bottom: 40px;
}


#profile table
{
	font-size: 12px;
}

#profile td.text
{
	width:490px;
	color:#222;
}

#profile td.img
{
	padding-left: 20px;
	vertical-align: bottom;
}

#profile td b
{
	font-size: 14px;
	color:#000;
	line-height: 24px;
}






/***************************************
	Works
***************************************/

  /***************************************
	  Career
  ***************************************/


#career_space
{
	padding-top: 25px;
}

#career
{
	float: left;
	width: 500px;
}

#career topic
{
	margin-left: 10px;
}

#career table
{
	width: 480px;
	margin-left: 36px;
	padding-bottom: 40px;
	font-size: 11px;
	color:#333;
}

#career td
{
	border-bottom-style: dashed;
	border-bottom-width: 1px;
	border-color: #601;
	height: 24px; 
}

#career td.career_date
{
	width: 70px;
	text-align: center;
}

#career td.career_part
{
	width: 160px;
	text-align: center;
	color:#601;
}

#career td.career_title
{
}

#career td.career_title b
{
	margin-left: -8px;
	font-size: 13px;
	color:#000;
}
#career td.career_title l
{
	color:#888;
}

#career_endspace
{
	padding-top: -1px;
}
    /***************************************
		works_Pickup
    ***************************************/

#works_pickup
{
	width: 217px;
	margin-left: 535px;
}


#works_pickup topic
{
}

#works_pickup table
{
	margin-left: 20px;
	margin-top: 25px;
	margin-bottom: 40px;
}

#works_pickup iframe
{
	margin-bottom: 10px;
}


#works_pickup td
{
}

#works_pickup tr.works_picup_movie td
{
}

#works_pickup tr.works_pickup_hint td
{
	font-size: 11px;
	color: #888;
}

#works_pickup tr.works_pickup_hint td lb
{
	margin-left: -6px;
	color: #000;
	font-size: 12px;
}






/***************************************
	Contact
***************************************/

  /***************************************
		Contact
  ***************************************/
#Contact_topic
{
	padding-top: 25px;
	margin-left: 10px;
}

#Contact
{
	margin-top: 25px;
	margin-left: 50px;
	padding-bottom: 40px;
	line-height: 20px;
}


#Contact table
{
	font-size: 12px;
}

#Contact td.img
{
	width:310px;
}

#Contact td.text
{
	width:400px;
}


#Contact td l
{
	font-size: 11px;
	color:#333;
}





/***************************************
　コンテンツ
***************************************/

#mainContent
{
	clear: both;
	padding: 0px; /* 余白は div ボックスの内側のスペース、マージンは div ボックスの外側のスペースです */
	background-image: url(../pic/body_bg.png);
	background-repeat: repeat;
}






/***************************************
	フッター
***************************************/

#footer {
	height: 75px;
	padding: 0px; /* この余白は、その上に表示される div のエレメントの左揃えと一致します。 */
	background-image:url(../pic/footer_bg.png);
	background-repeat: repeat-x;
}
#footer p {
	font-size: 12px;
	color: #ffffff;
	text-align: right;
	margin: 0px; /* フッターの最初のエレメントのマージンを 0 に設定することにより、マージンの相殺（div 間のスペース）が回避されます */
	padding: 9px 0; /* このエレメントの余白により、マージンの相殺を発生させることなく、マージンの効果とまったく同じように、スペースが設定されます */
	padding-right: 34px;
}