/************************COMMON************************************/
@charset "utf-8";
body {
	font-family:"メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", Arial, Helvetica, Osaka, "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", sans-serif;
	background-color: whitesmoke;
	margin: 0;
	padding: 0;
	color: black;
}

#container {
	width: 950px;
	max-width: 800px;
	min-width: 780px;
	background-color: white;
	margin: 0 auto; /* 幅に加え、両側を自動値とすることで、レイアウトが中央に揃います。.container の幅を 100% に設定した場合、これは必要ありません。 */
}

/* ~~ ヘッダーには幅は指定されません。ヘッダーはレイアウトの幅全体まで広がります*/
#header {
	width: 960px;
	height: 80px;
	background-image:url("../parts/top-logo-gray.png") ;
	background-repeat: no-repeat; 
}

/*----------------------------------------------------------------------------------------------------- */
ul, ol, dl { /* ブラウザー間の相違により、リストの余白とマージンをゼロにすることをお勧めします。一貫性を保つために、量をここで指定するか、リストに含まれるリスト項目 (LI、DT、DD) で指定できます。より詳細なセレクターを記述しない限り、ここで指定する内容が .nav リストにも適用されることに注意してください。 */
	padding: 0;
	margin: 0;
}

h1, h2, h3, h4, h5, h6, p, li {
	font-family:"メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", Arial, Helvetica, Osaka, "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", sans-serif;
	margin-top: 0;	 /* 上マージンを削除すると、マージンを含む div からマージンがはみ出す場合があるという問題を回避できます。残った下マージンにより、後続のエレメントからは離されます。 */
	padding-right: 15px;
	padding-left: 15px; /* div 自体ではなく div 内でエレメントの両側に余白を追加すると、ボックスモデル計算が不要になります。代わりに、両側に余白を指定した div をネストして使用することもできます。 */
}

 
h1 {
	background-image:url(../parts/bg-itemtitle-darkblue.png);
	background-repeat:no-repeat;
	font-size: 12pt;
	height: 50px;
	width: 450px;
	color: black;
	padding-top:10px;
	padding-left:20px;
	margin-left: 5px;
}
 
h2 {
	font-size: 11pt;
	font-weight: 900;
	color: darkblue;
	margin-top: 10px;
	margin-bottom: 5px;
	padding-bottom: 0;
}

h3 {
	font-size: 10pt;
	font-weight: 900;
	color: #990033;
	margin-bottom: 5px;
	padding-bottom: 0;
}

p {
	font-size: 9pt;
	color: black;
	line-height: 160%;
	margin-bottom: 5px;
}

.noBorder {
	border: 0;
}

.noMargin {
	margin: 0; padding: 0;
}

.noPadding {
	padding: 0;
}

.indent {
	margin-left: 2em;
}

/******************* SUBHEADER ***************************************** */
#subheader {
	width: 800px;
	background-color: darkslategray;
	height: 20px;
	margin-top: 1px;
}


/*
#subheader {
	width: 800px;
 	background: -webkit-linear-gradient(left, white, darkslategray 10%, darkslategray 90%, white 100%); 
 	background: -o-linear-gradient(left, white, darkslategray 10%, darkslategray 90%, white 100%); 
 	background: -ms-linear-gradient(left, white, darkslategray 10%, darkslategray 90%, white 100%); 
 	background: -moz-linear-gradient(left, white, darkslategray 10%, darkslategray 90%, white 100%); 
	background-color: #010101;
	height: 20px;
	margin-top: 1px;
}
*/

#subheader p {
	color: white;
	font-size: 8pt;
	padding-top: 2px;
    float: left;
}

#subheader .link {
	float: right;
	font-size: 11px;
	color: white;
}

#subheader a.modLink:link,  #subheader a.modLink:visited, #subheader a.modLink:active, #subheader a.modLink:focus {
	color:lightgray;
	text-decoration : none;
}

#subheader a.modLink:hover{
	color: white;
	text-decoration : none;
}


/*******************COMMON***************************************** */
#content {
	padding: 0;
	margin: 0;
	width: 800px;
	background-color: white;
    clear: both; /*直線のsubheaderにfloatがあるのでこれを入れないとずれる*/
/* 	float: left; */
}

#content ul, #content ol { 
 	padding: 0 15px 15px 40px;  
 	font-size:9pt;
 	list-style:none;
 	line-hegint:20px;
}

#content li {
	line-height: 1.8;
}

.main {
	float: left;
	width:550px; 
}

.sideimage {
	float : right;
	margin-top: 10px;
	margin-right: 5px;
	/* background-color: ivory; */
}

a img {
	border: none;
	outline: none;  /* 選択時の点線枠を消す*/
}

.clearfix:after{
content: "";
display: block;
clear: both;
visibility:hidden;
}

/**************************** リンク ************************************ */
a:link, a:visited, a.active, a:focus {color: darkslategray; text-decoration: underline; outline: none;  /* 選択時の点線枠を消す*/}
a:hover {color: darkblue;text-decoration: none;}

a.modLink:link, a.modLink:visited, a.modLink:active, a.modLink:focus {color:slategray; text-decoration: none;}
a.modLink:hover  {color: darkblue;text-decoration : none;}

/****************************NAVI************************************ */
#navi{ /*親メニュー枠 */
	list-style-type: none;
	width: 800px;
	height: 40px;
/*   margin: 30px auto 300px; */
	padding: 0;
	background: #111;
/*親メニューの色 */
	background: -webkit-linear-gradient(top, #669999, #010101);   
	background: -moz-linear-gradient(top, #669999, #010101);   
	background: -o-linear-gradient(top, #669999, #010101);   
	background: -ms-linear-gradient(top, #669999, #010101);   
	border-radius: 3px; 
}
#navi li{  /*親メニュー項目 */
	position: relative;
/*    width: 159px;  */
/*    width: 132px;  */
	width: 14.1%;  /* 6分割 → 16.3％ */
	float: left; 
	margin: 0px;
	padding: 0;
	text-align: center;
	border-right: solid 1px white; 
    font-family:"メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", Arial, Helvetica, Osaka, "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", sans-serif;
}
#navi li.current{    /* 現在選択されている親メニュー項目 */
	background: -webkit-linear-gradient(top, darkblue, #000000); 
	background: -moz-linear-gradient(top, darkblue, #000000); 
	background: -o-linear-gradient(top, darkblue, #000000); 
	background: -ms-linear-gradient(top, darkblue, #000000); 
}
#navi li:last-child {
	border-right: none; /* 親メニュー ，右端の項目 */
}
#navi li a{ /*親メニュー内容 */
	display: block; 
	margin: 0;
	padding: 12px 0 11px;
	color: white;
	font-size: 14px;
	font-weight: bold;
	line-height: 1;
	text-decoration: none;
	outline: none;  /* 選択時の点線枠を消す*/
}
#navi li ul{ /*子メニュー枠*/
	list-style: none;
	position: absolute;
	top: 100%;
	left: 0;
	margin: 0;
	padding: 0;
	border-radius: 0 0 5px 5px;
}
#navi li:last-child ul{ /*利用法不明 */
	left: -100%;
	width: 100%;
}
#navi li ul li{ /*子メニュー項目 */
	overflow: hidden;  /* hidden にして tansition 設定のために使う．実際の表示は次項で制御 */
	width: 150%;
	height: 0;
	color: white;
	-moz-transition: .1s;
	-webkit-transition: .1s;
	-o-transition: .1s;
	-ms-transition: .1s;
	transition: .1s;
}
#navi li:hover ul li{ /*子メニュー項目  Hover */
	overflow: visible; /* hoverすると visible になって実際にドロップ表示される */
	height: 38px;
	border-top: 0px solid white;
	border-bottom: 1px solid white;
}

#navi li ul li a{ /*子メュー内容 */
	padding: 13px 15px;
	background: #000040; /* 子メニュー の色 */
	color: white;
	text-align: left;
	font-size: 12px;
	font-weight: normal;
}
#navi li ul li:hover a{ /*子メュー内容 Hover時 */
	background-color: #252525; /* 子メニューHover時の色  */
	color: white;
}


#navi li:hover  a{ /*親メニュー および 子メニュー内容 HOVER */
/*
	background: #111;
	background: -moz-linear-gradient(top, red, #000000);
	background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1, #444));
	color: white; 
*/
}

#navi > li:hover > a{ /*親メニュー内容 HOVER */
/*  border-radius: 10px 10px 0 0;  */
/*   color: #eff7b1;  */
	background: #111;
 /* 親メニュー Hover時の色 */
	background: -webkit-linear-gradient(top, royalblue, #000000);
	background: -o-linear-gradient(top, royalblue, #000000);  
	background: -ms-linear-gradient(top, royalblue, #000000);
	background: -moz-linear-gradient(top, royalblue, #000000);
	color: white;
}

#navi li:hover ul li:first-child{  /*これがないと最下段に余分な線がはいる */
	border-top: 0px;
	border-right: 0px;
}
#navi li:hover ul li:last-child{ /*これがないと最下段にradiusがきかない */
	border-bottom: 0px;
}
#navi li:hover ul li:last-child a{  /*子メニュー最下段 */
	border-radius: 0 0 10px 10px;
}


/*************************************** */
section.article:nth-child(odd){
	background: seashell;
}

section.article:nth-child(even){
 	background:white; 
}

section{
	background: white;
	font-family:"メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", Arial, Helvetica, Osaka, "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", sans-serif;
	 /* Edge, IEではなぜか body にfont-familyをしてもそれが section に及ばないのであらためて指定．あるいはsection 内にfont-familyを指定してある <p> を指定してもよい．*/
}

/*************************************** */

.caption {
	font-size: 8pt;
	margin-left: -2em;
}


.caption-small {
	font-size: 7pt;
	margin-left: -1em;
}


em {
	font-weight: 900;
	color: firebrick;
	font-style: normal;
}


.bold {
	font-weight: 900;
	color: darkblue;
}


.italic {
	font-style: italic;
}

.italic-blue {
	font-style: italic;
	color: darkblue;
}

.bullet {
	height: 12px;
	margin-right: 10px;
}

.playbutton {
	font-size: 12pt;
	text-align: center;
}

.movie-composer {
    font-weight: 900;
}

.movie-title {
    color: firebrick;
}
/******************** PROFILE ***************************************/
.profile-title {
	font-size: 10pt;
	font-weight: 900;
	color: #bb0033;
}

.profile-pieces {
	font-size: 9pt;
	line-height: 140%;
	margin-left: 20px;
}

.profile-image {
	width: 200px;
	border: solid 1px #cccccc;
}

p.critique-provenance {
	color: darkgreen;
	font-size: 9pt;
	font-style: normal;
	float: right;
	margin-top: -5px;
}

/******************** DISCOGRAPHY**************************/
object.playbutton {
	padding-top: 5px;  /* mp3 playerのボタンを行に揃えるため */
	outline:none;        /* プレイボタンを押したときに表示される枠を消す*/
}


/******************** LINK **********************************/
table.link-table {
	width: 700px;
 	border-spacing: 15px 20px;
 	margin-top: -20px;
	background-color: #f8f8f8; 
	width:800px;
}

td.link-table {
 	font-size: 8pt;
 	width: 200px;
 }

/* not in use */
a.specialLink:link {color: Black; text-decoration: none;}
a.specialLink:visited {color: Black; text-decoration: none;}
a.specialLink:hover {color: DeepSkyBlue; text-decoration: none;}
a.specialLink:active {color: DeepSkyBlue; text-decoration: none;}

 
/******************** FOOTER **********************************/
#footer {
	height: 15px;
	padding: 10px 0;
	background-color: darkslategray;
	clear: both; /* この clear プロパティにより .container は、カラムの範囲がどこまでかを認識してその範囲を含めるようになります。 */
}

#footer .update {
	float: left;
	font-size: 11px;
	color: lightgray;
}

#footer .link {
	float: right;
	font-size: 11px;
	color: white;
}

#footer a.modLink:link,  #footer a.modLink:visited, #footer a.modLink:active, #footer a.modLink:focus {
	color: lightgray;
	text-decoration : none;
}

#footer a.modLink:hover{
	color: white;
	text-decoration : none;
}


/******************** AUDIO **********************************/
.samplecd {
  width:250px;
  margin-left: 50px;
  margin-top:10px;
  height:15px;
}

/******************** BG-COLOR  **************************/
.bg-color-blue {
  background-color: rgba(233, 244, 251, 0.7);
}
.bg-color-green {
  background-color: rgba(249, 255, 246, 0.99);
}
.bg-color-red {
  background-color: rgba(255, 245, 233, 1.00);
}
.bg-color-yellow {
  background-color: rgba(255, 250, 234, 1.00);
}