@charset "utf-8";

/* -----------------------------------------------------------
CSS Information

 File name:      style.css
 Author:         Chorus Kaze
----------------------------------------------------------- */


/*----------------------------------------------------
	汎用class
----------------------------------------------------*/

.imgR {
	float: right;
	margin: 0 0 10px 10px;
}

.imgL {
	float: left;
	margin: 0 10px 10px 0;
}

.imgC {
	margin: 0px auto;
}

.btn {
	text-align: center;
}

hr.midasiue {
	margin: 20px 0px 2px 0px;
	display: block;
	height: 1px;
}

hr.midasisita {
	margin: 2px 0px 0px 0px;
	display: block;
	height: 1px;
}

/*----------------------------------------------------
	#page
----------------------------------------------------*/

#page {
	text-align: left;
}

#page .area {
	width: 860px;
	margin: 0px auto;
	padding: 0px;
	/*
	position: relative;
	*/
}


/*----------------------------------------------------
	#header
----------------------------------------------------*/

#header {
	height: 150px;
	background: url(../img/header_bg.gif) repeat-x;
	color: #FFF;
	overflow: hidden;
}

.logo {
	float: left;
	margin: 0px;
	padding: 14px 10px 0px 40px;
}

.photo {
	float: left;
	margin: 0px;
	padding: 16px 0px 0px 40px;
}

.swf {
	float: left;
	margin: 16px 0px 0px 40px;
	padding: 0px;
	width: 560px;
	height: 134px;
	background-color: #000000;
}

.msg {
	float: right;
	background: url(../img/header_mark.gif) no-repeat;
	margin: 20px 10px 0px 0px;
	padding: 0px 0px 0px 50px;
}

#header .msg h1 {
	color: #fff;
	font-weight: normal;
	font-size: 10pt;
	line-height: 1.5;
}

/*clearFix*/
#header:after {
	content: ".";
	display: block;
	visibility: hidden;
	height: 0.1px;
	font-size: 0.1em;
	line-height: 0;
	clear: both;
}


/*----------------------------------------------------
	#topnavibar
----------------------------------------------------*/
#topnavibar {
	height: 30px;
	background: url(../img/header_bg_navi.gif) repeat-x;
	color: #FFF;
	border-bottom: 1px solid #FFF;
	overflow: hidden;
}

#topnavibar a {
	color: #FFFFFF;
    text-decoration: none;  
}
#topnavibar a:foover {
    text-decoration: none;  
}

.pagenavi {  
	margin-left: 5px;
	padding-top: 3px;
    line-height: 20px;
    text-align: center; 
}  

.pagenavi li {  
    float: left;  
    list-style-type: none;  
}

.pagenavi li.active {  
    color: #00FF33;  
	margin: 0px;
    padding: 0px 10px;  
    border-top: 1px solid #CCC;  
    border-bottom: 1px solid #CCC;  
}

.pagenavi li a:first-letter {  
    font-weight: bold;
    margin: 0px;
    /*
    padding-right: 3px;
    font-size: 1.1em; 
    */
    color: #3333FF;
}  

.pagenavi li a {
    float: left;  
    /*position: relative;*/
    color: #FFFF;  
	margin: 0px;
    padding: 0px 10px;  
    border-top: 1px solid #CCC;  
    border-bottom: 1px solid #CCC;  
} 

#topnavibar .pagenavi li a:hover  {
    background: #f6fffc;  
    color: #000;  
	margin: 0px;
    padding: 0px 10px;  
}


/*-----------------------------------------------
  onecolumcontainer
-----------------------------------------------*/

#onecolumcontainer {
	margin:0 auto;
	padding: 0px;
	width:860px;
	min-height: 400px;
	position:relative;
}

#onecolumcontainer .gotop {
	width: 25px;
	height: 82px;
	margin: 0px;
	padding: 0px;
	position: absolute;
	bottom: 0px;
	left: 862px;
	z-index: 2;
}

#onecolumcontainer .prof {
	clear: both;
	width: 700px;
	margin: 0px auto;
	padding: 40px;
}
#onecolumcontainer .prof li {  
	display: inline;
    list-style-type: none; 
}

#onecolumcontainer .photo_ab1 {
	margin: 0px;
	padding: 0px;
	position: absolute;
	top: 240px;
	right: 25px;
	z-index: 2;
}

#onecolumcontainer .photo_ab2 {
	margin: 0px;
	padding: 0px;
	position: absolute;
	top: 420px;
	right: 50px;
	z-index: 2;
}

#onecolumcontainer .photo_ab3 {
	margin: 0px;
	padding: 0px;
	position: absolute;
	top: 680px;
	right: 40px;
	z-index: 2;
}

/*-----------------------------------------------
  twocolumcontainer
-----------------------------------------------*/

#twocolumcontainer {
	background: url(../img/contents2_bk.gif) repeat-y right;
	margin:0 auto;
	padding: 0px;
	width:860px;
	position:relative;
}

#twocolumcontainer .gotop {
	width: 25px;
	height: 82px;
	margin: 0px;
	padding: 0px;
	position: absolute;
	bottom: 0px;
	left: 862px;
	z-index: 2;
}

#twocolumcontainer .counter {
	margin: 0px;
	padding: 0px;
	position: absolute;
	top: 10px;
	right: 10px;
	z-index: 2;
}

/*----------------------------------------------------
	ページ表題
----------------------------------------------------*/
#hyodai {
	margin-left: 40px;
	padding: 30px 0px 10px 0px;
	overflow: hidden;
}

#hyodai .page_hyodai {
	float: left;
	background: url(../img/header_mark.gif) no-repeat right top;
	float: left;
	margin: 0px;
	padding: 10px 50px 30px 0px;
	vertical-align: middle;
	color: #006699;
	font-size: 12pt;
	font-family: "ＭＳ Ｐ明朝","ＭＳ 明朝","平成明朝","細明朝体";
	letter-spacing: 3px;
}
#hyodai .rightbox {
	float: right;
	padding: 20px 40px 0px 0px;
	vertical-align: baseline;
	color: #009966;
}
#hyodai .page_hyodai strong {
	background: url(../img/header_mark.gif) no-repeat left top;
	padding: 10px 0px 30px 50px;
}
#hyodai:after {
	content: ".";
	display: block;
	visibility: hidden;
	height: 0.1px;
	font-size: 0.1em;
	line-height: 0;
	clear: both;
}


/*----------------------------------------------------
	#memberinner
----------------------------------------------------*/
#memberinner {
	width: 640px;
	margin: 0px auto;
	padding: 10px 10px 60px 10px;
	overflow: hidden;
}
#memberinner .imgL {
	float: left;
	margin: 10px 30px 10px 0;
}

/*----------------------------------------------------
	#demoinner
----------------------------------------------------*/
#demoinner {
	width: 640px;
	margin: 0px auto;
	padding: 20px;
	overflow: hidden;
}
#demoinner img {
	margin: 10px 30px 10px 30px;
}
#demoinner .kyokulist {
	float: left;
	width: 280px;
	margin: 20px;
}

/*----------------------------------------------------
	#gestbookinner
----------------------------------------------------*/
#gestbookinner {
	width: 800px;
	min-height: 460px;
	height: auto !important;
	height: 460px;
	margin: 0px auto;
	padding: 5px;
	overflow: visible;
}

/*----------------------------------------------------
	.daninkoe　団員の声
----------------------------------------------------*/
.daninkoe {
	width: 600px;
	margin: 0px auto;
	margin-bottom: 30px;
	padding: 10px;
	border: 1px gray solid;
}

/*----------------------------------------------------
	#見出しのBackground
----------------------------------------------------*/
div.midasitop {
	background: url(../img/submidasibg-l.gif) no-repeat left top;
	height: 30px;
	margin-left: 0px;
	padding: 0px;
}

div.midasi {
	background: url(../img/submidasibg-c.gif) repeat-x;
	margin: 0px 20px 0px 40px;
	padding: 6px 0px 0px 4px;
	height: 30px;
	white-space: normal;
	font-weight: bold;
}

div.midasiend {
	background: url(../img/submidasibg-r.gif) no-repeat right top;
	position: relative;
	margin: 10px 0px 5px 0px;
	padding: 0px 0px 0px 0px;
	height: 30px;
	white-space: normal;
	overflow: hidden;
}

div.midasiend:after {
	content: ".";
	display: block;
	visibility: hidden;
	height: 0.1px;
	font-size: 0.1em;
	line-height: 0;
	clear: both;
}


/*----------------------------------------------------
	#main　2段の場合の左側
----------------------------------------------------*/

#main {
	float: left;
	width: 530px;
	margin: 0px;
	padding: 10px 20px;
	/*border: 1px solid red;*/
}

#main .toperea {
	width: 530px;
	height: 354px;
	background: url(../img/topbg.jpg) no-repeat;
}
#main .toperea p {
	text-align: right;
	color: white;
	margin: 0px;
	padding: 5px 20px;
}

#main .prog {
	clear: left;
	letter-spacing: 1em;
	text-align: center;
	margin: 30px 0px 0px 0px;
	border-top: 4px dashed gray;
	border-bottom: 4px dashed gray;
}
#main .interval {
	clear: left;
	width: 140px;
	letter-spacing: 1em;
	text-align: center;
	margin: 0px auto 10px;
	border-top: 1px dashed gray;
	border-bottom: 1px dashed gray;
}

#main .stage {
	clear: left;
	margin: 0px;
	padding: 5px 0px 5px 30px;
}

#main .kyoku1 {
	float: left;
	width: 150px;
	margin: 0px;
	padding: 0px 0px 5px 70px;
}
#main .kyoku2 {
	float: left;
	width: 260px;
	margin: 0px;
	padding: 0px 0px 0px 5px;
}

#main hr {
	clear: left;
	margin: 0px;
	display: block;
	height: 1px;
}


/*----------------------------------------------------
	#sub　2段の場合の右側
----------------------------------------------------*/

#sub {
	float: right;
	width: 270px;
	margin: 0px;
	padding: 10px;
	/*border: 1px solid red;*/
}

#sub p.midasi {
	margin: 0px;
	padding: 4px 0 4px 0px;
	font-size: 10pt;
	font-weight: bold;
	border-top: 1px dashed gray;
	border-bottom: 1px dashed gray;
	vertical-align: middle;
	height:20px;
}

#sub .iframearea {
	float: left;
	width: 250px;
	height: 120px;
	display: inline;
	margin: 4px 5px 20px 5px;
	padding: 2px;
	text-align: left;
	font-style: normal;
	font-weight: normal;
	border: 1px solid #33644c;
	font-size: 10px;
	overflow-y: auto;
}

#sub .framearea {
	float: left;
	width: 242px;
	height: 120px;
	display: inline;
	margin: 4px 5px 20px 5px;
	padding: 6px;
	text-align: left;
	font-style: normal;
	font-weight: normal;
	border: 1px solid #33644c;
	font-size: 10px;
	overflow-y: auto;
	color:#000000;
}

#sub:after {
	content: ".";
	display: block;
	visibility: hidden;
	height: 0.1px;
	font-size: 0.1em;
	line-height: 0;
	clear: both;
}

#sub hr {
	clear: left;
	margin: 0px;
	padding: 0px;
	display: block;
	height: 1px;
}

/*----------------------------------------------------
	#footer
----------------------------------------------------*/

#footer {
	clear: both;
	height: 120px;
	width: 100%;
	background: url(../img/share/bg_footer.gif) repeat-x;
	color: #FFF;
	padding-top: 10px;
	border-top: 1px solid #FFF;
	border-bottom: 1px solid #FFF;
}


#footer a {
	text-decoration: none;
	color: #CCF;
}
#footer a:hover {
	text-decoration: underline;
}

#footer ul {
	text-align: center;
}

#footer li {  
	display: inline;
    height: 1.4em;  
    list-style-type: none;  
    margin: 0px;
    padding: 2px 10px;  
}

#footer li + li {
    border-left: 1px solid #FFF;
    /*background: url(../img/header_mark.gif) no-repeat left center;*/
}
#footer p.copy {
	margin-top: 12px;
	text-align: center;
}


/*----------------------------------------------------
	table とおりみち
----------------------------------------------------*/


#table_path {
	clear: both;
	width: 640px;
	margin: 0px auto;
	padding: 0px;
}

#table_path .year {
	float: left;
	width: 60px;
	margin: 0px;
	padding: 10px 0px;
}

#table_path .month {
	float: left;
	width: 40px;
	margin: 0px;
	padding: 10px 0px;
	text-align: right;
}

#table_path .coment {
	float: left;
	width: 480px;
	margin-left: 30px;
	padding: 10px 0px;
}

#table_path .coment:after {
	content: ".";
	display: block;
	visibility: hidden;
	height: 0.1px;
	font-size: 0.1em;
	line-height: 0;
	clear: both;
}

/*----------------------------------------------------
	table 演奏会歴史
----------------------------------------------------*/

#table_con {
	width: 800px;
	margin: 0px auto;
	padding: 0px;
}

#table_con hr.solid {
	content: ".";
	display: block;
	height: 1px;
	font-size: 0.1em;
	line-height: 0;
	clear: both;
}

#table_con .dif {
	float: left;
	width: 190px;
	margin: 0px;
	padding: 5px;
}
#table_con .image {
	float: left;
	width: 140px;
	margin: 0px;
	padding: 5px 0px;
	vertical-align: middle;
}
#table_con .com1 {
	float: left;
	width: 220px;
	margin: 0px;
	padding: 5px 0px 5px 10px;
}
#table_con .com2 {
	float: left;
	width: 220px;
	margin: 0px;
	padding: 5px 0px 5px 10px;
}
#table_con .futoji {
	font-style: normal;
	font-weight: bold;
	font-size: 10pt;
	margin: 0px;
	padding: 0px;
}
#table_con .futuu {
	font-style: normal;
	font-weight: normal;
	font-size: 10pt;
	margin: 0px;
	padding-left: 16px;
}
#table_con .syoumoji {
	font-weight: normal;
	font-style: normal;
	font-size: 7pt;
	margin: 0px;
	padding: 0px;
}
#table_con .small {
	font-style: normal;
	font-weight: normal;
	font-size: 7pt;
}

/*----------------------------------------------------
	Image Cross Fader Redux
----------------------------------------------------*/
#imageContainer {
	position:relative;
	margin:auto;
	width:640px;
	border:1px solid #000;
}

#imageContainer {
	height:480px;
}

#imageContainer img {
	display:none;
	position:absolute;
	top:0; left:0;
}