@charset "utf-8";
/* ------------------------------
   Browser Reset
------------------------------ */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	vertical-align: baseline;
	font-family: inherit;
	font-style: inherit;
	font-weight: inherit;
}
html {
	-webkit-text-size-adjust: none;
}

img {
	vertical-align: bottom;
}

a {
	-webkit-tap-highlight-color: transparent;
}

strong {
	font-weight: bold;
}

ol, ul {
	list-style: none;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}

caption, th, td {
	font-weight: normal;
	text-align: left;
	vertical-align: top;
}

blockquote:before, blockquote:after,
q:before, q:after {
	content: "";
}

blockquote, q {
	quotes: "" "";
}

a:focus {
/*\*/
	overflow: hidden;
/**/
}

option {
	padding-right: 10px;
}

/* HTML5 ELEMENTS
------------------------------ */
header,article,aside,section,footer,
nav,menu,details,hgroup,summary {
	display: block;
}

/* ------------------------------
   COMMON ELEMENTS
------------------------------ */
body {
	font-size: 14px;
	line-height: 1.6em;
	font-family: "メイリオ", "Meiryo", "游ゴシック",YuGothic,"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Osaka", "ＭＳ Ｐゴシック", "MS P Gothic", Verdana, Arial, Helvetica, sans-serif;
	color: #000;
	text-align: center;
	//background: #fff;
	background-image: url(http://fukaya-phil.com/img/background.gif);
}

#wrapper {
	text-align: center;
}

.heading {
	margin-top: 5px;
	margin-bottom: 10px;
	font-size: 1.4em;
	font-weight: bold;
}

li {
	line-height: 1.8em;
}

span.alert {
	font-weight : bold;
	color : red;
}

/* ------------------------------
   baseHeader
------------------------------ */
.baseHeader {
	text-align: center;
	background: #000;
}

.baseHeader div {
	margin: 0 auto;
	width: 840px;
	text-align: left;
	position: relative;
	padding-top: 50px;
}

.baseHeader div h1 {
	height: 30px;
	font-size: 1.2em;
	line-height: 30px;
	color: #fff;
	font-weight: bold;
}

div.resizeimage img {
	width: 100vw;
	padding: 0px;
	margin: 0px;
	box-shadow: 0px 10px 10px rgba(0,0,0,0.4);
}

div.concept img {
	width: 90vw;
	padding: 0px;
	margin: 10px;
	box-shadow: 0px 10px 10px rgba(0,0,0,0.4);
}

/* ------------------------------
   baseFooter
------------------------------ */
.baseFooter {
	padding: 15px 0;
        width: 90%
	text-align: right;
	border-top: #bbb 1px solid;
}

.baseFooter small {
	color: #333333;
	font-size: 0.8em;
}

/* ------------------------------
   DESIGN/LAYOUT ELEMENTS
------------------------------ */
a:link,a:visited,a:active,a:hover { text-decoration: none; color: #000;}

div .main a:active,a:hover { color: #f00;}

a.mslink {
	text-decoration: underline;
	color: #00f;
	fint-size: 18px!important;
}

div#contents table tr.bd td {
	background-color: white;
}

div#contents table tr.hd td {
	text-align: center;
	background-color: #FFCC66;
}

div#contents table tr.ft td {
	background-color: #FFCC66;
}

div#contents table tr td.num {
	text-align: right;
}

div#contents table tr td.title {
	text-align: center;
}

table.memberList {
        border-collapse: separate;
	border-spacing: 1px;
}

table.memberList tr.mem_hd td {
        border : 0px;
        padding : 5px;
	background-color: #ed3;
	border-right: #641 1px solid;
	border-bottom: #641 1px solid;
	text-align: center;
	vertical-align: middle;
	font-weight: bold;
        font-size: 0.9em;
}

table.memberList tr.mem_bd td {
        border : 0px;
        padding : 5px;
	background-color: #fff;
	border-right: #bbb 1px solid;
	border-bottom: #bbb 1px solid;
	text-align: left;
	vertical-align: top;
        font-size: 0.9em;
}

table.memberList tr.mem_ft td {
        border : 0px;
        padding : 2px;
	background-color: #ed3;
	border-right: #641 1px solid;
	border-bottom: #641 1px solid;
	text-align: center;
	vertical-align: middle;
	font-weight: bold;
        font-size: 0.9em;
}

table.memberList tr td.male {
	background-color: #adf;
}

table.memberList tr td.female {
	background-color: #fba;
}

table.memberList tr td.normal{
	color: #000;
	background-color: #fff;
}

table.memberList tr td.welcome {
    background-color: #fff;
}

table.memberList tr td.ng {
    background-color: #ddd;
    color: #666;
}

table.schedule {
        border-collapse: separate;
	border-spacing: 1px;
}

table.schedule tbody th {
        border : 0px;
        padding : 2px;
	background: #db6;
	border-right: #641 2px solid;
	border-bottom: #641 1px solid;
	text-align: center;
	vertical-align: middle;
	font-weight: bold;
        font-size: 0.9em;
}

table.schedule tbody td {
        border : 0px;
        padding : 2px;
	background: #fff;
	border-right: #bbb 1px solid;
	border-bottom: #bbb 1px solid;
	text-align: left;
	vertical-align: top;
        font-size: 0.9em;
}

table.schedule tr th.date {
        width : 80px;
        min-width : 80px;
}

table.schedule tr th.place{
        width : 260px;
        min-width : 260px;
}

table.schedule tr th.conductor{
        width : 150px;
        min-width : 150px;
}

table.schedule tr th.edit{
        width : 60px;
        min-width : 60px;
}

table.schedule tr td{
	background: #fff;
        color: #000;
}

table.schedule tr:nth-child(even) td{
	background: #def;
        color: #000;
}

table.schedule tr.workshop td{
	background: #afa;
        color: #080;
}

table.schedule tr.rehearsal td{
	background: #ff8;
        color: #440;
}

table.schedule tr.concert td{
	background: #faa;
        color: #800;
}

table.schedule tr.delete td{
	background: #aaa;
        color: #000;
}

div.schedule p.normal {
	border: 0px;
}

div.schedule p.workshop {
	border-left: #4f4 5px solid;
}

div.schedule p.rehearsal {
	border-left: #ff4 5px solid;
}

div.schedule p.concert {
	border-left: #f44 5px solid;
}

div.schedule p.delete {
	border-left: #aaa 5px solid;
}

li.top {
    margin-top: 10px;
}

li.bottom {
    margin-bottom: 20px;
}

div.concert {
	margin-bottom: 20px;
}

div.concert div.detail {
	display: block;
	margin-bottom: 10px;
}

div.concert div.detail div {
	display: inline-block;
}

div.concert div.detail div.label {
	text-align: right;
	vertical-align: top;
	font-weight: bold;
	min-width: 70px;
}

div.concert div.detail div.value{
	text-align: left;
	vertical-align: top;
}



/* ------------------------------
 *  MENU
 *------------------------------*/
#mddNav {
	top: 0;
	width: 100%;
	height: 45px;
	background: #66ff99;
	background: linear-gradient(to bottom,  #ffff99 20%,#ffcc66 80%);
	position: fixed;
	z-index: 199;
	display: block;
	border-bottom: #886622 2px solid;
}

#mddNav > ul {
	margin: 0 auto;
	width: 840px;
	height: 45px;
	text-align: left;
}

#mddNav > ul > li {
	width: 120px;
	height: 45px;
	float: left;
	border-left: #cc9933 1px solid;
	box-sizing: border-box;
}

#mddNav > ul > li:last-child {
	border-right: #cc9933 1px solid;
}

#mddNav > ul > li > a {
	height: 45px;
	font-weight: bold;
	color: #330000;
	line-height: 45px;
	display: block;
	text-align: center;
}

#mddNav > ul > li:hover > a {
	color: #330000;
	background: #ffffcc;
}

#mddNav .mddWrap {
	top: 45px;
	left: 0;
	width: 100%;
	height: 0;
	text-align: center;
	background: #ffffcc;
	background: linear-gradient(to bottom,  #ffffcc 20%,#ffdd66 80%);
	border-bottom: #886611 1px solid;
	position: absolute;
	z-index: 10;
	overflow: hidden;
	display: none;
}

#mddNav .mddWrap .mddInner {
	margin: 0 auto;
	padding-top: 30px;
	width: 840px;
	height: 250px;
	line-height: 1.5em;
	text-align: left;
}

#mddNav .mddWrap .mddInner > div {
	margin-right: 20px;
	width: 350px;
	float: left;
	border-right: #cc9933	 1px solid;
}

#mddNav .mddWrap .mddInner > div:last-child {
	margin-right: 0;
	border-right: none;
}

#mddNav .mddWrap .mddInner > div > ul > li {
	font-size: 1em;
	line-height: 1.5em;
}

#mddNav .mddWrap .mddInner > div > ul > li a:link {
	text-decoration: underline;
}

#mddNav .mddWrap .mddInner > div > ul > li a:hover {
	text-decoration: none;
}

#mddNav .mddWrap .mddInner p {
	margin-bottom: 20px;
	padding-left: 10px;
	line-height: 1.6em;
	border-left: #cc9933 5px solid;
}

#mddNav .mddWrap .mddInner p strong {
	font-size: 1.1em;
	display: block;
}

#mddNav .mddWrap .mddInner > div span {
	margin-bottom: 5px;
	font-weight: bold;
}

#contents {
	margin: 0 auto;
	padding: 40px 0;
	width: 800px;
	text-align: left;
}

#contents .title {
	margin-bottom: 5px;
	padding-left: 10px;
	line-height: 1.6em;
	width: 80%;
	border-left: #cc9933 5px solid;
	border-bottom: #cc9933 1px solid;
}

#contents .title .main {
	font-weight: bold;
	font-size: 1.2em;
}

#contents .title .sub {
	font-size: 0.7em;
}

#contents .article {
	padding-left: 20px;
	padding-bottom: 40px;
	line-height: 1.4em;
	font-size: 0.9em;
}

#contents .article p{
	padding: 10px;
	line-height: 1.4em;
	font-size: 1em;
}

#contents .img {
	margin: 10px;
}

#contents .portrait {
	margin-left: 20px;
	margin-bottom: 10px;
	border: #333 1px solid;
	border-radius: 10px;
	box-shadow: 5px 5px 5px rgba(0,0,0,0.4);
}

#contents .poster {
	margin-left: 10px;
	margin-bottom: 10px;
	border: #333 1px solid;
	box-shadow: 5px 5px 5px rgba(0,0,0,0.4);
}

#contents p {
	padding-bottom: 2em;
	font-size: 0.9em;
	line-height: 1.8em;
}

#contents .article div.img,div.text{
	display: inline-block;
        border : 0px;
	box-shadow: 0px;
	text-align: left;
	vertical-align: top;
}

#mddNav > ul:before,
#mddNav > ul:after {
	content: " ";
	display: table;
}
#mddNav > ul:after {clear: both;}
#mddNav > ul {*zoom: 1;}

/* ------------------------------
   CHAPTER ELEMENTS
------------------------------ */
.ticker {
	margin: 0 auto;
	padding: 10px 20px;
	width: 500px;
	text-align: left;
	background: #fff;
	background: linear-gradient(to bottom,  #fff 50%,#efefef 100%);
	border: #ccc 2px solid;
	border-radius: 15px;
	position: relative;
	overflow: hidden;
}

.ticker ul {
	width: 100%;
	height: 20px;
	position: relative;
}

.ticker ul li {
	top: 0;
	left: 0;
	width: 100%;
	height: 20px;
	line-height: 20px;
	display: none;
	position: absolute;
}




@media only screen and (max-width: 499px) {
	table.schedule {
		display:none;
	}
	div.schedule {
	    display:display;
	}
}
@media only screen and (min-width: 500px) {
	table.schedule {
	    display:display;
	}
	div.schedule {
		display:none;
	}
}

/* ------------------------------
   MEDIAQUERIES LAYOUT
@media only screen and (max-width: 840px) {
	.baseHeader div {
		width: 96%;
		transition: all 0.3s ease-in-out;
		padding-top: 5px;
	}

	#mddNav ul {
		width: 100%;
	}

	#mddNav ul li {
		width: 20%;
	}
}
------------------------------ */



/* ------------------------------
   MEDIAQUERIES[SP]LAYOUT
------------------------------ */
@media only screen and (max-width: 808px) {
	body {
		min-width: 320px;
	}

	#wrapper {
		margin: 0 auto;
	}

	/* ------------------------------
	   baseHeader
	------------------------------ */
	.baseHeader div {
		padding: 15px 0;
		width: 100%;
		text-align: center;
	}

	.baseHeader div h1 {
		height: 20px;
		font-size: 1em;
		line-height: 20px;
	}

	.baseHeader div a {
		margin: 0 auto;
		top: auto;
		right: auto;
		width: 60%;
		position: relative;
	}

	.baseHeader div a:link,.baseHeader div a:visited,.baseHeader div a:active {
		text-decoration: none;
		color: #fff;
	}

	.baseHeader div a:hover {
		color: #fff!important;
		background: #000!important;
		text-decoration: none!important;
	}

	/* ------------------------------
	   baseFooter
	------------------------------ */
	.baseFooter {
		padding: 15px;
	}

	#mddNav {
		display: none;
	}

	#rwdMenuWrap {
		width: 100%;
		border-bottom: #aaa 1px solid;
	}

	#rwdMenuWrap #switchBtnArea {
		width: 100%;
		height: 60px;
		background: #3c3c3c;
		position: relative;
	}

	#rwdMenuWrap #switchBtnArea #switchBtn {
		top: 10px;
		right: 10px;
		width: 40px;
		height: 40px;
		background: #a7a7a7 url(../img/btnOpen.png) no-repeat center center;
		border-radius: 5px;
		position: absolute;
	}

	#rwdMenuWrap #switchBtnArea #switchBtn.btnClose {
		background-image: url(../img/btnClose.png);
	}

	#rwdMenuWrap ul {
		width: 100%;
		display: none;
	}

	#rwdMenuWrap ul li {
		width: 100%;
		border-bottom: #aaa 1px solid;
	}

	#rwdMenuWrap ul li a {
		padding: 15px 20px;
		text-align: left;
		background: #ebebeb url(../img/linkarw.png) no-repeat right center;
		display: block;
	}

	#contents {
		width: 100%;
	}

	#contents p {
		padding: 0 20px 2em 20px;
	}
}

/* ------------------------------
   CLEARFIX ELEMENTS
------------------------------ */
#mddNav > ul:before,
#mddNav > ul:after {
	content: " ";
	display: table;
}
#mddNav > ul:after {clear: both;}
#mddNav > ul {*zoom: 1;}