/*--------------------------------------------------------------
Copyright WEB MAGIC.
http://www.webamgic.jp/
---------------------------------------------------------------*/


body {
text-align: center;
background-color:#f4eaec;/*全体の背景色-----------------*/
font-family: Osaka,Verdana,Arial,Helvetica,sans-serif;
font-size:12px;/*基本の文字サイズ-----------------*/
line-height:170%;
color:#444444;;/*基本の文字色-----------------*/
margin-top:0px;/*コンテンツボックスを上から少し離しています-----------------*/
margin-bottom:20px;
margin-left:0;
margin-right:0;
}


h1,h2,h3,h4,h5{
margin:0px;
padding:0px;
font-weight:normal;
}


/*pタグ空白消去*/
p {
margin:0px;
padding:0px;
}


/*IMGボーダー非表示*/
img  {
border: none;
vertical-align:top;
}



/*TABLEボーダー非表示*/
table  {
border:none;
}

td p{
padding:4px 4px 15px 4px;

}


/*IE--BRバグ回避*/
br  {
letter-spacing:normal;
}



/*リスト空白消去*/
ul,ol,li  {
margin:0px;
padding:0px;
list-style:none;
}




/*コンテンツ全体のボックス---------------------------------------*/
#container{
width:843px;
margin:0 auto;
padding:0;
border:#999999 solid 1px;
text-align:left;
background-color:#FFFFFF;/*背景色*/
}



/*ヘッダー部分のボックス---------------------------------------*/
#header{
padding:60px 20px 20px 20px;
width:803px;
height:90px;
margin:0px;
border-bottom:#9d9d9d solid 1px;
background-image:url(images/photo_header1.jpg);/*ヘッダー部分背景画像指定*/
background-repeat:no-repeat;
}




/*ヘッダータイトル文字----------------------------------*/
h1{
font-size:28px;/*文字サイズ*/
color:#444444;/*文字色*/
line-height:140%;
font-family: Osaka,Verdana,Arial,Helvetica,sans-serif;
font-weight:bold ;
margin:0;
padding:0;
}



/*ヘッダータイトル下説明文----------------------------------*/
h2{
font-size:12px; /* 文字サイズ*/
color:#444444; /* 文字色*/
line-height:140%;
font-family:Osaka,Verdana,Arial,Helvetica,sans-serif;
font-weight:normal;
margin:0;
padding:0;
}





/*ヘッダー下のリンクスペース----------------------------------*/
#navi{
background-color:#EEEEEE;/*背景色*/
padding:8px;
margin:0px;
text-align:right;/*テキスト右寄せ*/
border-bottom:#9d9d9d solid 1px;
width:827px;
}





/*普通のテキストリンク-----------------*/
a:link    {text-decoration:underline;color:#333399;}  /*テキストリンクの色*/
a:visited {text-decoration:underline;color:#333399;}  /*訪問済みのリンクの色*/ 
a:active  {text-decoration:underline;color:#333399;}   /*クリック時のリンクの色*/
a:hover   {text-decoration:underline;color:#333399;}  /*マウスの上にカーソルがあるときのリンクの色*/



/*ページのタイトル部分のみのテキストリンク-----------------*/
h1 a:link       {color:#444444;text-decoration:none;}  /*メニュー・テキストリンクの色*/
h1 a:visited    {color:#444444;text-decoration:none;}   /*メニュー・訪問済みのリンクの色*/
h1 a:active     {color:#444444;text-decoration:none;}   /*メニュー・クリック時のリンクの色*/
h1 a:hover      {color:#444444;text-decoration:none;}   /*メニュー・マウスの上にカーソルがあるときのリンクの色*/





/*トップお知らせや各ページタイトル部分----------------------------------*/
h3 {
	background-color:#E1C8CD; /*背景色*/
	padding:6px;
	margin-bottom:12px;
	width:575px;
	font-size:14px; /*文字サイズ*/
	font-weight:bold; /*太文字*/
}

 
/*上演に関するもの----------------------------------*/

/*上演名----------------------------------*/
h3 {
	background-color:#E1C8CD; /*背景色*/
	padding:6px;
	margin-bottom:12px;
	width:575px;
	font-size:14px; /*文字サイズ*/
	font-weight:bold; /*太文字*/
} 

/*バザー----------------------------------*/
.ba {
	background-color:#FFD5EC; /*背景色*/
	padding:5px;
	margin-bottom:13px;
	width:300px;
	font-size:15px; /*文字サイズ*/
	font-weight:bold; /*太文字*/
} 

.cell_ba{
		background-color:#f4eaec;
		width: 60px;
		padding: 20px;
}

.k_box_ba{
		padding-left:60px;
		background-color:#fff;
		border:#bbbbbb solid 1px;
		margin-bottom:20px;
		margin-right:10px;
}



/*有志----------------------------------*/
h4 {
	background-color:#FFD5EC; /*背景色*/
	padding:15px;
	margin-bottom:13px;
	width:575px;
	font-size:25px; /*文字サイズ*/
	font-weight:bold; /*太文字*/
} 


.k_box_ban{
		background-color:#f5f5f5;
		border:#bbbbbb solid 1px;
		margin-bottom:20px;
		margin-right:10px;


}
.k_box_ban img{
	padding-left:20px;
	padding-top:20px;
}


h6 {
	background-color:#FFD5EC; /*背景色*/
	padding:15px;
	margin-bottom:13px;
	width:575px;
	font-size:25px; /*文字サイズ*/
	font-weight:bold; /*太文字*/
} 


/*グループ名----------------------------------*/
h5 {
	background-color:#FFDBC9; /*背景色*/
	padding:6px;	
	font-size:16px; /*文字サイズ*/
	font-weight:bold; /*太文字*/
} 


/*左メニュー◆の文字----------------------------------*/
.mark{
font-size:12px; /*文字サイズ*/
color:#CA8F9A; /*文字色*/
}





/*左メニュー-------------------------------------------*/

.menu{
border:#bbbbbb 1px solid; /*枠線の設定*/
padding-bottom:6px;
margin-bottom:10px;
}

.menu ul{
margin:12px;
}

.menu li{
padding-bottom:10px;
border-bottom:#999999 dotted 1px; /*下線の指定*/
margin-bottom:10px;
}
/*----------------------------------------------------*/





/*更新情報欄-------------------------------------------*/

/*「更新情報」と書かれた部分*/
h4{
	border-bottom:#E1C8CD solid 4px;/*「更新情報」下線　左から「色」「種類」「太さ」*/
	margin-bottom:10px;
	padding:4px 4px 2px 4px;
	font-size:14px;/*文字サイズ*/
	font-weight:bold;/*太文字*/
}


.area{
margin-bottom:20px;
}



/*「更新情報」内容*/
.area li{
padding:0px 2px 8px 2px;
border-bottom:#999999 dotted 1px;/*下線左から「色」「点線指定」「太さ」*/
margin-bottom:8px;
}




/*トップページ右に並んだボックス----------------------------------*/
.waku {
border:#bbbbbb 1px solid; /*枠線指定左から「色」「太さ」「線の種類」*/
} 



.box{
padding:10px;
}


.box1{
background-color:#CCC8E1; /*薄紫色見出し背景色*/
padding:6px;
text-align:center; /*見出しテキスト中央寄せ*/
}


.box2{
background-color:#E1C8CD; /*ピンクの見出し背景色*/
padding:6px;
text-align:center; /*見出しテキスト中央寄せ*/
}


/*ボックス内にリンクリストをつけたとき--------------*/
.box li{
margin-bottom:6px;
padding-bottom:4px;
border-bottom:#999999 dotted 1px; /*下線指定左から「色」「点線指定」「太さ」*/
}




/*テーブル背景色指定--------------*/
.cell_waku{
background-color:#bbbbbb;
}

.cell_item{
background-color:#f4eaec;
width: 100px;
padding: 20px;
}

.cell{
background-color:#ffffff;
}

.gazou{
padding-left: 20px;
}


/*下層のボックスその1--------------*/
.k_box_a{
padding:8px;
background-color:#f3f3f3;
border:#bbbbbb solid 1px;
margin-bottom:10px
}


/*下層のボックスその2--------------*/
.k_box_b{
padding:8px;
background-color:#ffffff;
border:#bbbbbb solid 1px;
margin-bottom:10px
}


/*コピーライト部分----------------------------------*/
#copyright{
margin:0 auto;
width:839px;
font-size:10px;
text-align:right;
padding:2px;
}





.space15{
width:15px;
}


.space20{
margin-bottom:20px;
}





#copyright a:link {color:#444444;}
#copyright a:visited  {color:#444444;}
#copyright a:hover {color:#444444;}
#copyright a:active  {color:#444444;}




/*マウスオーバー----------------------------------*/

a:hover{color:#007bbb;} 



#copyright a:link {color:#444444;}
#copyright a:visited  {color:#444444;}
#copyright a:hover {color:#444444;}
#copyright a:active  {color:#444444;}



/*クラスページ　1年2年ボタン----------------------------------*/



.button	{
display: inline-block;
	padding: .5em 4em;
	border: 2px solid #aaa;
	color: #aaa;
	margin-left :0px; 
	margin-right :97px;
	text-align: center;
	text-decoration: none;
	outline: none;
	overflow: hidden;
}



.button span {
	display: inline-block;
	transform: translate3d(0,-10px,0);
	transition: transform .4s, opacity .4s;
	transition-timing-function: cubic-bezier(.75,0,.125,1);
	opacity: 0;
	text-align: center;
}
.button::before {
	position: absolute;
	top: 235px;
	content: attr(data-hover);
	transition: transform .4s, opacity .4s;
	transition-timing-function: cubic-bezier(.75,0,.125,1);
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}
.button:hover::before {
	transform: translate3d(0,50%,0);
	opacity: 0;
}
.button:hover span {
	transform: translate3d(0,0,0);
	opacity: 1;
}
.button:hover span:nth-child(1) {
	transition-delay: .08s;
	text-align: center;
}
.button:hover span:nth-child(2) {
	transition-delay: .16s;
}
.button:hover span:nth-child(3) {
	transition-delay: .24s;
}


.button:hover span:nth-child(1) {
	transition-delay: .08s;
}
.button:hover span:nth-child(2) {
	transition-delay: .16s;
}
.button:hover span:nth-child(3) {
	transition-delay: .24s;
}
.button:hover span:nth-child(4) {
	transition-delay: .32s;
}
.button:hover span:nth-child(5) {
	transition-delay: .40s;
}

.button:hover span:nth-child(6) {
	transition-delay: .48s;
}
.button:hover span:nth-child(7) {
	transition-delay: .56s;
}
.button:hover span:nth-child(8) {
	transition-delay: .64s;
}



/*クラスページ　3年ボタン----------------------------------*/


.abutton	{
display: inline-block;
	padding: .5em 4em;
	border: 2px solid #aaa;
	color: #aaa;
	margin-left :0px; 
	margin-right :0px;
	text-align: center;
	text-decoration: none;
	outline: none;
	overflow: hidden;
}



.abutton span {
	display: inline-block;
	transform: translate3d(0,-10px,0);
	transition: transform .4s, opacity .4s;
	transition-timing-function: cubic-bezier(.75,0,.125,1);
	opacity: 0;
	text-align: center;
}
.abutton::before {
	position: absolute;
	top: 235px;
	content: attr(data-hover);
	transition: transform .4s, opacity .4s;
	transition-timing-function: cubic-bezier(.75,0,.125,1);
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}
.abutton:hover::before {
	transform: translate3d(0,50%,0);
	opacity: 0;
}
.abutton:hover span {
	transform: translate3d(0,0,0);
	opacity: 1;
}
.abutton:hover span:nth-child(1) {
	transition-delay: .08s;
	text-align: center;
}
.abutton:hover span:nth-child(2) {
	transition-delay: .16s;
}
.abutton:hover span:nth-child(3) {
	transition-delay: .24s;
}


.abutton:hover span:nth-child(1) {
	transition-delay: .08s;
}
.abutton:hover span:nth-child(2) {
	transition-delay: .16s;
}
.abutton:hover span:nth-child(3) {
	transition-delay: .24s;
}
.abutton:hover span:nth-child(4) {
	transition-delay: .32s;
}
.abutton:hover span:nth-child(5) {
	transition-delay: .40s;
}

.abutton:hover span:nth-child(6) {
	transition-delay: .48s;
}
.abutton:hover span:nth-child(7) {
	transition-delay: .56s;
}
.abutton:hover span:nth-child(8) {
	transition-delay: .64s;
}