@import url(superfish/css/superfish.css) screen;
@import url(superfish/css/superfish-vertical.css) screen;
/*ブラウザ対策=サファリ対策*/
/*2011年2月18日。サファリで作家一覧のインクルード部分（div id="artistlist"）のスタイルシートが反応しなっかたので、対応としてインポートして再度読み込み。*/
/*stylesheet.cssとstylesheet2011.cssは設置階層が違うので、superfishまでのパスが異なる*/
/*artistlist.htmlとartistlist_e.htmlのhtml内からsuperfishのcssへのリンク部分に念のため、文字コードshift-jisを指定*/

@charset "utf-8";
/*メンテナンス記録2011年3月20日。
このサイトはhtml（標準モード、テーブルレイアウト、Shift_JIS）とxhtml（標準モード、スタイルシートレイアウト、utf-8）が混在しております。
htmlとxhtmlは文字コードが異なるため、スタイルシートもそれぞれ別に設置してあります。
html用cssはトップ階層の「stylesheet.css」。
xhtml用cssは「2011webparts」フォルダ内の「stylesheet2011.css」です。xhtmlページ用のcssやjsは「2011webparts」フォルダ内にまとめて設置。
html、xhtml各ページの左側50音別ナビdiv id="artistlist"はjQuery使用のインクルード。50音別ナビはソースに表示出来ません。
「e」フォルダ内に英語ページが設置してあります。
和文ページは「artistlist.html」を読み込み、「e」フォルダ内の英語ページは「artistlist_e.html」を読み込みます。
「artistlist.html」は各階層でインクルードされるのでサイトルート相対パスを使用しました、サーバにアップが必要です、ローカル環境では使えません。
作業経緯＝2011年1月から3月にかけて作業を行いました。
元のサイトはhtml4.01(過去互換モード、テーブルレイアウト)でした、これを標準モードにリニューアル。
また、新規追加ページはxhtml（標準モード、スタイルシートレイアウト）で設置。
*/

/*全体の初期化----------始まり。*/
/*画像のリンクの枠を消す*/
a img {
	border: none;
	}
/*見出しと段落の前後のアキをつめる*/
h1, h2, h3, h4, h5, h6, p, address {
	margin-top: 0;
	margin-bottom: 0;
	}
ul,li{
	margin: 0;
	}
/*全体の初期化----------終わり。*/

/*リンクカラーの指定----------始まり。*/
a{
	}
a:link {
	color: #000000;
}
a:visited {
		color:#000000;

}
a:hover {
	color:#999999;
	text-decoration:none;
}
a:active {
		color:#000000;

}
/*リンクカラーの指定----------終わり。*/

/*ナビ内のリンクカラーの指定----------始まり。*/
#sidebar1{}
/*20110119改訂、サイドバー内のナビはインクルードしています。artistlist.htmlのsccに指定してあります。*/
/*ナビ内のリンクカラーの指定----------終わり。*/




/*リンク部の先頭印の指定の始まり-----------------*/
.link_arrow{
	padding:0 0 0.3em 2em;
	background-image:url(img/yajirusi.gif);
	background-repeat:no-repeat;
	/*リンク項目の矢印の表示指定。*/
	/*background-position:0 0.2em;*/
/*	マーカー画像を背景画で指定した時に、
	ie7で画像の下部が切れて表示された。
	（ie8とffでは切れない。）
	対策として、background-positionを止めて、
	paddingのボトムに0.3emを指定。
	これで切れずに表示された。
	しかし、マーカーの縦位置がie7とie8で
	微妙に違う。
	追加処理として、マーカー画像を
	85％縮小。*/
	}
.link_arrow_ex{
	padding:0 0 0.3em 5.5em;
	background-image:url(img/yajirusi_ex.gif);
	background-repeat:no-repeat;
	/*リンク項目の外部リンクの表示指定。*/
	/*background-position:0 0.2em;*/
	}
.link_sankaku{
	padding:0 0 0.3em 1.2em;
	/*background-position:0 4px;*/
	background-image:url(img/sankaku.gif);
	background-repeat:no-repeat;
	/*リンク項目の三角印の表示指定。*/
	}
/*リンク部の先頭印の指定の終わり-----------------*/



/*見出し文字の指定----------始まり。*/
h1,h2,h3,h4{
	color:#000000;
	font-size:100%;
	font-weight:normal;
	}
h1,h2{
	font-size:140%;
	}
h3{
font-size:120%;
font-weight:bold;
	}


/*見出し文字の指定----------終わり。*/

/*色付きの文字（青色-Wロゴの色）*/
.textcolor_blue{
	color:#5976ba;
	}
/*色付きの文字（青色-Wロゴの色）*/
.textcolor_blue{
	color:#5976ba;
	}
/*色付きの文字（赤色）*/
.textcolor_red{
	color:#C00;/*少し暗い赤*/
	}
/*色付きの文字（茶色）*/
.textcolor_brown{
	color:#946f46;
	}
/*文字の太字*/
.text_bold{
	font-weight:bold;
	}
/*文字の拡大*/
.text120{
	font-size:120%;
	}
/*文字の縮小*/
.text90{
	font-size:90%;
	}
.text80{
	font-size:80%;
	}
.text50{
	font-size:50%;
	}
/*背景色（薄いミドリ）*/
.bg_color{
	background-color:#c2f1ce;
	}
/*背景色（薄いグレー）*/
.bg_color_eee{
	background-color:#eeeeee;
	}
.bg_color_eee_j_top{
	background-color:#eeeeee;
	padding:1em;
	font-size:75%;
	line-height:1.2em;
	}
.bg_color_eee_j_top h3{
	font-size:150%;
	/*bg_color_eee_j_topの中の文字は縮小された分、h3を拡大しました。*/
	}
/*キャプション指定*/
p.cap{
	font-size:x-small;
	font-size:small;/*フォント拡大20110402*/
	line-height:1.5em;
	margin-bottom:10px;
	}
	

	
/*共通パーツの始まり。----------*/
.border_hr{
	height:1px;
    font-size: 1px;
    line-height: 0px;
	margin:10px 0 10px 0;
	border-top:#000000 solid 1px;
	/*水平区切り線。黒色。*/
	}
.border_hr_top{
	height:1px;
    font-size: 1px;
    line-height: 0px;
	margin:0 0 10px 0;
	border-top:#000000 solid 1px;
	/*一番上部用の水平区切り線。マージントップがゼロ。*/
	
	}
.p_top{
	margin-top:20px;
	font-size:xx-small;
	font-size:small;/*フォント拡大20110402*/
	text-align:right;
	clear:both;
	/*ページ下部から上部へのジャンプの指定。*/
	}
	
/*共通パーツの終わり。----------*/	
	
	
/*テスト用パーツの始まり。----------*/
/*border: 1px solid #000000;*/
/*テスト用パーツの終わり。----------*/

body  {
	font: 100% "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS P Gothic", sans-serif;
	font-size:112%;/*フォント拡大20110402*/
	background: #ffffff;
	margin: 0; /* 複数の異なるブラウザの初期設定値に対応するため、body エレメントのマージンと余白を 0 にすることをお勧めします */
	padding: 0;
	text-align: center; /* これにより、IE 5* ブラウザではコンテナが中央揃えになります。そして、テキストは、#container セレクタの初期設定である左揃えに設定されます */
	color: #000000;
}
#container { 
	width: 760px;  /* 最大幅である 800px より 40px 小さくすることにより、ブラウザクロームの使用が可能となり、水平スクロールバーが表示されなくなります */
	background: #ffffff;
	margin: 0 auto; /* 自動マージン（幅と連動）により、ページが中央揃えになります */
	padding:0;

	text-align: left; /* この設定は body エレメントの text-align: center より優先されます。 */
} 
#header { 
	background: #ffffff;
	margin:0 0 15px 0;
	padding: 0;  /* この余白は、その下に表示される div のエレメントの左揃えと一致します。#header でテキストの代わりにイメージが使用される場合は、必要に応じて、余白を削除してください。 */
} 
#header h1 {
	margin: 0; /* #header div の最後のエレメントのマージンを 0 に設定することにより、マージンの相殺（div 間の原因不明のスペース）が回避されます。div の周囲に境界線が適用されている場合は、境界線によってマージンの相殺が回避されるため、この操作は不要です */
	padding: 0; /* マージンの代わりに余白を使用して、エレメントを div の端に接触しない位置に維持することができます */
}
/*#header object{vertical-align:bottom;}*/
/*↑ファイヤーフォックスの隙間対策。SWFobjectと直下の#tabの間の隙間を解消します。*/

#header form{
	width:290px;/*ie6は幅が290px必要*/
	margin:6px 0 0 0;
	float:right;
	/*ヘッター内の検索フォームの指定*/
	}
#header form input,
#header form textarea, 
#header form select { font-size: 0.8em; 
	/*ヘッター内の検索フォームの文字サイズ指定*/
	}

#sidebar1 {
	float: left; /* このエレメントはフローティングエレメントであるため、幅が設定されている必要があります */
	width: 140px; /* 標準に準拠したブラウザまたは Internet Explorer の標準モードでは、この div の実際の幅には、幅に加えて余白と境界線も含まれます */
	background: #ffffff; /* 背景色は、列内のコンテンツの長さにわたって表示されます */
	padding: 0;
	margin:0;
	/*font-size:75%;*/
}

/*サイドバー内のナビゲーションの始まり*/ 
#sidebar1 ul.nav{
	width:140px;
    margin:0;
	padding:0;  
    background-color: #ccc;
	list-style:none;
	border-bottom:1px solid #999999;
	} 
#sidebar1 ul.nav li{
	border-top:1px solid #999999;
	}
#sidebar1 ul.nav li a{
	display:block;
    padding:5px 5px; 
	background-color: #ccc; 
    text-decoration:none;  
    color:#000; 
} 
#sidebar1 ul.nav li a:hover{  
    background-color: #ffeeff; 
    color: #ff6666; 
} 
/*サイドバー内のナビゲーションの終わり*/ 
	

#mainContent { 
	margin: 0 0 0 160px; /* この div エレメントの左マージンにより、ページの左側に #sidebar1 div が設定されます。#sidebar1 div に含まれるコンテンツの量に関係なく、#sidebar1 div のスペースは維持されます。#sidebar1 のコンテンツが終了した後のスペースに #mainContent div のテキストを挿入するには、このマージンを削除します。 */
	padding: 0; /* 余白は div ボックスの内側のスペース、マージンは div ボックスの外側のスペースです */
	font-size:86%;
	line-height:1.5em;
    text-align: left;
    text-justify: distribute; 
    /*メインコンテナ内の本文。文章の両端揃え、IE専用。*/
}
.fontsize86{
	font-size:86%;
/*#mainContent内の文字にはfont-size:86%が指定してありますが、テーブルの内部に命令が効かない。対策としてテーブル内に再度指定。*/
}

	/*IE6のカラム落ち対策のスターハック。始まり。----------------------------*/
* html #mainContent { 
	margin: 0 0 0 150px;/* 左マージンを10px減らして、右のコンテナ部分10px増。 */
	}
* html #container { 
	width: 770px;  /* 760px→770pxで10px増。 */
}
/*IE6のカラム落ち対策のスターハック。終わり。----------------------------*/


#e #mainContent{
	/*padding-top:15px;*/
	/*英語ページのmainContentの上部に空間を作り、サイドバー内のナビと頭の位置を揃える*/}



/*mainContent内の段割り用横幅指定の始まり*/
#mainContent .box290px{
	width:290px;
	}
#mainContent .box326px{
	width:326px;
	}
#mainContent .box253px{
	width:253px;
	}
#mainContent .box130px{
	width:130px;
	}

/*mainContent内の段割り用横幅指定の終わり*/

	
/*h項目（見出し）のマージンボトムの指定*/	
#mainContent h1,
#mainContent h2,
#mainContent h3{
	margin-bottom:10px;
	}
	
/*p項目（段落）のマージンボトムの指定*/
#mainContent p{
	margin-bottom:10px;
	}
	
	
#mainContent .j_top_right_box,
#mainContent .e_top_right_box{
	padding:0 6px 6px 6px;
	border-top:solid 1px #fff;
	border-right:solid 1px #000;
	border-bottom:solid 1px #fff;
	border-left:solid 1px #000;
	/*日本語トップページの右側のボックスの囲みケイの指定。上下は白線にして見せない。*/
	}




/*トップページ内の指定の始まり------------*/
/*ライトボックスの小画像の始まり*/
#mainContent .toppagethumbnail img{
	margin:0 0 4px 4px;
	}
/*ライトボックスの小画像の終わり*/




/*角丸の指定の始まり*/
/*角丸のボックスはスクリプトで表現しています。複数のボックスが存在して、背景色など変える場合は、外側をdivで包み、クラスネームを付けて振り分けます。内容のテキスト変更がある場合、角丸の画像化より修正が容易です。*/
/*角丸の指定の終わり*/
/*トップページ内の指定の終わり------------*/


/*ボディid名によるページ分けの始まり*/
/*ボディid名によるページ分けの終わり*/


/*フッター基本の始まり-----------------*/
#footer { 
	padding: 0; /* この余白は、その上に表示される div のエレメントの左揃えと一致します。 */

} 
#footer p#footer_address{
	margin: 0 auto; /* フッターの最初のエレメントのマージンを 0 に設定することにより、マージンの相殺（div 間のスペース）が回避されます */
	padding: 10px ; /* このエレメントの余白により、マージンの相殺を発生させることなく、マージンの効果とまったく同じように、スペースが設定されます */
	text-align:center;
	font-size:70%;
}
#footer p#copyr{
	margin: 0 auto; /* フッターの最初のエレメントのマージンを 0 に設定することにより、マージンの相殺（div 間のスペース）が回避されます */
	padding: 10px ; /* このエレメントの余白により、マージンの相殺を発生させることなく、マージンの効果とまったく同じように、スペースが設定されます */
	text-align:center;
	font-size:70%;
}


#e #footer p#footer_address,
#e #footer p#copyr{
	font-size:100%;
	/*英語ページのフッター内のアドレスとコピーの指定*/}

/*フッター内ナビの始まり*/
/*2011年3月時点ではサイト内でフッター内ナビは、使用していません。見本として、2011webparts/kihon.htmlのfooter内に設置してあります。*/
/*フッター内ナビのセンタリングのハック*/
#footer #footer_nav{
	margin:10px auto 0 auto;
	list-style:none outside;
	text-align:center;
}

#footer #footer_nav li{
	font-size:70%;
	margin-right:1em;
	padding:0 0 0.7em 1.3em;
	background-position:0 0;
	background-image:url(img/sankaku.gif);
	background-repeat:no-repeat;
	}
	
#footer #footer_nav li{   
display: -moz-inline-box;/*for FF2*/  
display: inline-block;/*Modern Browser & FF3*/  
}

/* Windows IE6 only */  
* html #footer #footer_nav li{   
display: inline;     
zoom: 1;   
}

/* Windows IE7 only */  
*+html #footer #footer_nav li{   
display: inline;   
zoom: 1;   
}
/*フッター内ナビの終わり*/
/*フッター基本の終わり-----------------*/

/*フロートパーツの始まり-----------------*/
.fltrt { /* このクラスは、ページ上でフローティングエレメントを右側に配置するのに使用できます。プローティングエレメントは、ページ上でその横に配置されるエレメントの前に配置される必要があります。 */
	float: right;
	margin-left: 8px;
}
.fltlft { /* このクラスは、ページ上でフローティングエレメントを左側に配置するのに使用できます */
	float: left;
	margin-right: 8px;
}

	
.clearfloat { /* このクラスは、div またはブレークエレメントに適用される必要があり、また、フローティングエレメントが完全に含まれているコンテナの末尾の直前にある最後のエレメントである必要があります */
	clear:both;
    height:0;
    font-size: 1px;
    line-height: 0px;
}
/*フロートパーツの終わり-----------------*/

/*ときの忘れもの用20110107-----------------*/
/*水平メニューです。上側と下側共通です。xhtmlファイル内で、古い水平ナビを使用するために、html用スタイルシートから移植しました。*/
.menu {
	width:760px;
	margin: 4px auto;
	padding:4px 0;
	text-align: center;
	font-size: 77%;
	border-top: 1px solid #000;
	border-bottom: 1px solid #000;
}
.menu div {
	margin:3px 0;
	padding:0 4px;
	border-right: 1px solid #000;
	display: inline;
}

.menu a {
	vertical-align: middle;
	text-decoration: none;
	color: #000;
}
a.menu01 {
	padding-left: 8px;
	border-left: 1px solid #000;
}
.menu a:hover {
	color: #fff;
	background-color: #666666;
}

.border_kakomi{
	border:solid 1px #000;
	}
.top_table_sakuhin{
	font-size: x-small;
	line-height:1.2;
	
	}
	
/*以下追加2011年1月15日dix-houseメンテナンス------*/

/*20110115暫定措置。過去互換から標準モードに改訂したところcenter内の文字が中央揃えで表示されるので、対策として、該当部にtext-align:left指定ください。*/

/*2010年より古い過去データは、テーブルレイアウトを採用している。
bodyにfont-sizeを指定しても、テーブル内の要素には承継されない問題があります。
body内の該当要素にfont-sizeを指定します。
別の対策方法はemで指定、だだしline-heightに問題あり。*/

#artistlist{
	font-size:medium;
	text-align:left;
/*bodyにフォントサイズが指定してあるためインクルード部分が縮小されるので、対策としてfont-sizeにmediumで初期化してます。*/
/*2010年より古い過去データは、<center>タグが使用されているので、内容がセンター揃えになる。対策として、text-align:left;で初期化*/
	}
#Content_text-align_left { 
	margin:0; /*2010年より古い過去データは、テーブルレイアウトを採用しているので、マージンは0です。*/
	padding: 0; /* 余白は div ボックスの内側のスペース、マージンは div ボックスの外側のスペースです */
	
	font-size:86%;
	line-height:1.5em;
    text-align: justify;
    text-justify: distribute; 
    /*メインコンテナ内の本文。文章の両端揃え、IE専用。*/
}
/*#footer{
	width:760px;
	margin:0 auto;
	font-size:90%;*/
	/*日本語ページのフッターの指定*/
	
	
/*英語ページの振り分け--------------------------*/
body#e{
	font-size:80%;
	font-size:100%;/*フォント拡大20110402*/
	line-height:1.2em;
	/*英語ページはボディにid名を付けて振り分ける*/
	}
/*英語のartistlist_e振り分け------------------*/
#artistlist_e{
	font-size:medium;
	text-align:left;
/*bodyにフォントサイズが指定してあるためインクルード部分が縮小されるので、対策としてfont-sizeにmediumで初期化してます。*/
	}
#e #footer{
	width:760px;
	margin:0 auto;
	font-size:90%;
	/*英語ページのフッターの指定*/
	}

	
.profile p{
	font-size:75%;
	line-height:1.4em;
	text-align: justify;
    text-justify: distribute; 
    /*プロフィール内の本文。文章の両端揃え、IE専用。*/
}
#e .profile p{
	font-size:100%;
	line-height:1.4em;
	text-align:left;
    text-justify:; 
    /*英語ページのプロフィール内の本文。文章の両端揃え、IE専用。*/
}
.profile h3{
	font-size: medium;}
div.profile_phot{
	text-align:center;
	margin:0 auto;
	/*プロフィール写真を中央揃え*/
}
div.picture_phot{
	text-align:center;
	margin:0 auto;
	/*作品写真の縦長は中央揃え*/
}
	

.picture_comment{
	font-size:75%;	
	font-size:86%;/*フォント拡大20110402*/
	/*作品説明の文字の大きさの指定です。html側にdivを追加して、指定範囲を決めています。*/
	line-height:1.2em;
	}
.twitter_follow{
	margin:20px 0 0 0;
	/*日本語トップページ左側のツィッター*/
	}
	
ul#j_top_essaylist{
	margin:0 0 0 1em;
	padding:0;
	font-size:80%;
	font-size:92%;/*フォント拡大20110402*/
	/*日本語エッセイのリスト部分の初期化*/
	}
ul#j_top_essaylist li{
	margin:0 0 0 1em;
	/*リストマーカー分の空間*/
	}
ul.j_updatehistory{
	margin:0;
	padding:0;
	font-size:80%;
	font-size:92%;/*フォント拡大20110402*/
	list-style:none;
	line-height:1.3em;
	/*日本語更新履歴のリスト部分の初期化*/
	}
ul#j_updatehistory li{
	margin:0;
	/*リストマーカー分の空間*/
	}
.j_top_p{
	font-size:70%;
	font-size:86%;/*フォント拡大20110402*/
	line-height:1.3em;
	/*日本語トップページの文字縮小部分。テーブルの中で縮小が効かない場合に、テーブル内にpやdivを設定。*/}
ul#essay_bk_list{
	margin:10px 0;
	padding:0;
	font-size:100%;
	list-style:none;
	line-height:1.3em;
	/*エッセイバックナンバーリストの指定*/
	}
ul#essay_bk_list li{
	margin:0 0 15px 0;
	/*リストマーカー分の空間*/
	}
#essay_box{
	margin:0 0 0 1em;
	padding:1em;
	border:#000 solid 1px;
	/*エッセイページ内の囲みのケイ線の指定*/}



/*エッセイページの振り分け----------------*/
body#essay{}
body#essay #essay_container{
	margin:0;
	padding:0;
	width:760px;
	border-right:#000 solid 1px;
	}
body#essay #essay_text{
	width:500px;
	border-right:#000 solid 1px;
	margin:0;
	padding:0 20px 0 0;
	float:left;
	font-size:86%;
	line-height:1.5em;
    text-align: justify;
    text-justify: distribute; 
    /*エッセイの本文。文章の両端揃え、IE専用。*/
	}
body#essay #essay_note{
	margin:0 0 0 540px;
	padding:0 10px 0 0;
	width:210px;
	font-size:75%;
	line-height:1.4em;
	text-align: justify;
    text-justify: distribute; 
    /*プロフィール内の本文。文章の両端揃え、IE専用。*/
	}
/*エッセイページの振り分け。終わり。----------------*/	
	
	
	
	
.h1_bg_ccc{
	margin:0 0 10px 0;
	padding:0.2em;
	color:#000;
	background:#CCC;
	border-right:#900 solid 1.8em;
	font-size:medium;
	/*h1の装飾指定。背景色グレイ、右に赤。*/
	}

/*英語ページアーティスト一覧のリンク指定の始まり*/
#e #e_artists_list a.e{
	background-color: #ccf;
	/*英語ページの全作家リスト内のリンク表示。全部の名前の数が多く、リンクしている名前が少ないので、目立たせる指定。*/
	}
#e #e_artists_list a:link {
	color: #000000;
}
#e #e_artists_list a:visited {
		color:#000000;

}
#e #e_artists_list a:hover {
	color:#999999;
	background-color:#FFF;
	text-decoration:none;
}
#e #e_artists_list a:active {
		color:#000000;
}
/*英語ページアーティスト一覧のリンク指定の終わり*/

ul.nav-rescue{
	margin:5px 0;
	padding:4px 0;
	font-size:100%;
	list-style:none;
	line-height:1em;
	border-bottom:#000 solid 1px;
	text-align:center;
	/*index_j.htmlページ最下部の追加ナビゲーション。
	解説＝各ページの左側の50音ナビ（div id="artistlist"）は、ジャバスクリプトのインクルードのため、htmlソースに表示されません。そのためSEO的に不利です。それを補うためのリンクリストです。*/
	}
ul.nav-rescue li{
	display:inline;
	border-left:#000 solid 1px;
	margin:0 0 0 4px;
	padding:0 0 0 4px;
	font-size:x-small;
	font-size:small;/*フォント拡大20110402*/
	/*index_j.htmlページ最下部の追加ナビゲーション。*/
	}
ul.nav-rescue li:last-child{
	border-right:#000 solid 1px;
	padding-right:4px;
	/*index_j.htmlページ最下部の追加ナビゲーション。*/
	}
.top_blog_in{
	width:130px;
	margin:0 auto;
	/*トップページのブログ入口画像を中央表示*/
	}
	
	/*サイトマップ内のリスト*/
body#sitemap ul#sitemaplist{
	margin:0;
	padding:0;
	font-size:100%;
	list-style:none;
	line-height:1.8em;
	}
body#sitemap ul#sitemaplist li.headline{
	margin:20px 0 0 0;
	border-top: #000 dotted 2px;
	color:#5976ba;
	font-weight:bold;
	list-style:disc inside;
	}

.profile_text {
    column-count: 2;
	/*作家略歴の自動コラム分割*/
    }