@charset "UTF-8";

html{
	/*
	background: url(../images/main.png) no-repeat bottom center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
*/
}

body {
	font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-size: 14px;
	line-height: 1.5;
	background-color: #211101;
}

a {
	-webkit-transition:all 0.5s;
	-moz-transition:all 0.5s;
	-ms-transition:all 0.5s;
	-o-transition:all 0.5s;
	transition:all 0.5s;
	opacity:1;
	text-decoration: none;
}

a:hover {
	-webkit-transition:all 0.5s;
	-moz-transition:all 0.5s;
	-ms-transition:all 0.5s;
	-o-transition:all 0.5s;
	transition:all 0.5s;
	opacity:0.7;
}

img {
	max-width:100%;
	height:auto;
}

/*h2{
	font-size:3em;
	line-height: 1.3333;
	margin-bottom: 0.6667em;
	position: relative;
	text-align: center;
}

h2 span {
	position: relative;
	z-index: 2;
	display: inline-block;
	margin: 0 2.5em;
	padding: 0 1em;
	background-color: #fffdf3;
	text-align: left;
  color: #01075a;
}
h2::before {
	position: absolute;
	top: 50%;
	z-index: 1;
	content: '';
	display: block;
	width: 100%;
	height: 10px;
	background-color: #211101;
}*/

h2{
	font-size:2.5em;
	margin-bottom: 15px;
	position: relative;
	text-align: center;
}
h2:before {
    content: "";
    display: block;
    border-top: solid 8px #211101;
    width: 100%;
    height: 8px;
    position: absolute;
    top: 45%;
    z-index: 1;
}
h2 span {
    background: #fffdf3;
    padding: 0 20px;
    position: relative;
    z-index: 5;
}

h3 {
	font-size: 2em;
	margin-bottom: 0.6667em;
	color: #01075a;
}
section .content{
	width: 86%;
	margin: 0 auto;
	padding-bottom: 0.6667em;
}

p{
	font-size: 1.4em;
	margin-bottom: 0.6667em;
}

#wrapper {
	width:60%;
	margin: 0 auto;
	height:auto;
  background-color: #fffdf3;
}

.inner {
  /*width: 980px;*/
  width: 100%;
  margin: 0 auto;
}
.inner:after {
    content: "";
    clear: both;
    display: block;
}
.logo img{
		/*max-width: 80%;*/
		max-width: 40%;
}
/* header */
#top-head {
	top: -100px;
	position: absolute;
	width: 60%;
	margin: 100px auto 0;
	padding: 14px 0;
	line-height: 1;
	z-index: 999;
}

#top-head {
	background-color: rgba(234, 234, 234, 0.8);
}
#top-head a{
	color: #181818;
	text-decoration: none;
}

#top-head .inner {
  /*position: relative;*/
}
#top-head .logo {
    /*float: left;*/
    margin: 0 0 14px 14px;
}
#global-nav ul {
		float: right;
    list-style: none;
/*    position: absolute;
    right: 0;
		bottom: 5px;*/
    font-size: 1.5em;
    font-weight: bold;
}
#global-nav ul li {
    float: left;
}
#global-nav ul li a {
    padding: 0 20px;
}

/* Fixed */
#top-head.fixed {
    margin-top: 0;
    top: 0;
    position: fixed;
    padding: 14px 0;
    /*height: 55px;*/
    background: #fff;
    background: rgba(255,255,255,.7);
    transition: top 0.65s ease-in;
    -webkit-transition: top 0.65s ease-in;
    -moz-transition: top 0.65s ease-in;
}
#top-head.fixed .logo {
    font-size: 24px;
    margin: 0 0 14px 14px;
    color: #333;
}
#top-head.fixed #global-nav ul li a {
    color: #333;
    padding: 0 20px;
}

/* Toggle Button */
#nav-toggle {
    display: none;
    position: absolute;
    right: 12px;
    top: 14px;
    width: 34px;
    height: 36px;
    cursor: pointer;
    z-index: 101;
}
#nav-toggle div {
    position: relative;
}
#nav-toggle span {
    display: block;
    position: absolute;
    height: 4px;
    width: 100%;
    background: #666;
    left: 0;
    -webkit-transition: .35s ease-in-out;
    -moz-transition: .35s ease-in-out;
    transition: .35s ease-in-out;
}
#nav-toggle span:nth-child(1) {
    top: 0;
}
#nav-toggle span:nth-child(2) {
    top: 11px;
}
#nav-toggle span:nth-child(3) {
    top: 22px;
}

/*-------------------------------------
   comingsoon
--------------------------------------*/



/*-------------------------------------
   header
--------------------------------------*/
#header {
}
main{
	text-align: center;
	margin-bottom: 1.3334em;
}
#news{
	margin-top: -100px;
	padding-top: 100px;
	margin-bottom: 1.4em;
}
#event{
	margin-top: -100px;
	padding-top: 100px;
}
#artist{
	margin-top: -100px;
	padding-top: 100px;
}
#live{
	margin-top: -100px;
	padding-top: 100px;
}
#access{
	margin-top: -100px;
	padding-top: 100px;
}
#contact{
	margin-top: -100px;
	padding-top: 100px;
}

#news .content h3 {
	font-size: 1.6em;
}
#news .content .date {
	text-align: right;
	font-size: 1em;
}
#news .content .exp {
	text-align: left;
	font-size: 1.2em;
	margin-bottom: 16px;
}
#news .content .outline {
	text-align: left;
	padding: 14px;
	border: 1px solid #ccc;
	font-size: 1.2em;	
}
#news .content .outline:after {
    content:" ";
    display:block;
    clear:both;
}
#news .content .outline dl {
	text-align: left;
}
#news .content .outline dt {
  float:left;
  clear:left;
  width: 26%;
}
#news .content .outline dd {
  float:left;
  width: 74%;
}

#live .content .outline {
	text-align: left;
	padding: 14px;
	border: 1px solid #ccc;
	font-size: 1.4em;	
}
#live .content .outline:after {
    content:" ";
    display:block;
    clear:both;
}
#live .content .outline dl {
	text-align: left;
}
#live .content .outline dt {
  float:left;
  clear:left;
  width: 12%;
}
#live .content .outline dd {
  float:left;
  width: 88%;
}

#access iframe {
	width: 600px;
	height: 400px;
}

.schedule{
	padding-top: 0.6667em;
	border-top: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
	margin-bottom: 1.3334em;
}
span.free {
    font-size: 1.4em;
    font-weight: bold;
    color: #01075a;
}
span.live {
    display: block;
    font-size: 75%;
    color: #ff6a57;
}

span.sub {
    display: block;
    font-size: 80%;
}

p.placeName{
	font-weight: bold;
	color: #01075a;
	font-size: 1.6em;
}

address {
    font-style: normal;
    font-size: 90%;
}
#sns {
	width: 90%;
	margin: 0 auto;
	overflow: hidden;
	margin-bottom: 1.3334em;
}
.sound {
    float: left;
    width: 30%;
    padding-right: 5%;
}
.fb-page{
	float: left;
	width: 30%;
  padding-right: 5%;
}

.sound iframe {
    width: 100%;
    height: 200px;
}
.sound p{
	font-size: 1em;
}

.line{
	float: left;
	width: 30%;
}


/*-------------------------------------
   footer
--------------------------------------*/
footer {
    text-align: center;
    border-top: solid 1px #211101;
}

small {
    font-size: 55%;
}

@media screen and (max-width:1024px) {
/*-------------------------------------
   comingsoon
--------------------------------------*/
#wrapper {
    width: 100%;
}
#top-head,
.inner {
  width: 100%;
  padding: 0;
}
}
#top-head {
	padding: 14px 0;
}



@media screen and (max-width: 640px) {
/*-------------------------------------
   comingsoon
--------------------------------------*/
#wrapper {
    width: 100%;
    margin: 0 auto;
    height: auto;
}
#comingsoon div {
	float:none;
}
#comingsoon .cs01 {
	width:98%;
	margin:0 1%;
}
#comingsoon .cs02 {
	width:100%;
	margin-top:-30px;
}
#top-head,
.inner {
  width: 100%;
  padding: 0;
}
#top-head {
  top: 0;
  position: fixed;
  margin-top: 0;
}
/* Fixed reset */
#top-head.fixed {
  padding-top: 0;
  background: transparent;
}
#mobile-head {
	background-color: rgba(234, 234, 234, 0.7);
  width: 100%;
  /*height: 56px;*/
  z-index: 999;
  position: relative;
}
#top-head.fixed .logo,
#top-head .logo {
  /*position: absolute;
  left: 13px;
  top: 7px;*/
  margin:0;
  padding:12px 0 12px 12px;
  color: #333;
  font-size: 26px;
}
#top-head .logo img {
	max-width: 76%;
}
 
#global-nav {
  position: absolute;
  /* 開いてないときは画面外に配置 */
  top: -500px;
  background: #333;
  width: 100%;
  text-align: center;
  padding: 10px 0;
  -webkit-transition: .5s ease-in-out;
  -moz-transition: .5s ease-in-out;
  transition: .5s ease-in-out;
}
#global-nav ul {
  list-style: none;
  position: static;
  right: 0;
  bottom: 0;
  font-size: 14px;
}
#global-nav ul li {
  float: none;
  position: static;
}
#top-head #global-nav ul li a,
#top-head.fixed #global-nav ul li a {
  width: 100%;
  display: block;
  color: #fff;
  padding: 18px 0;
}
#nav-toggle {
  display: block;
}
/* #nav-toggle 切り替えアニメーション */
.open #nav-toggle span:nth-child(1) {
  top: 11px;
  -webkit-transform: rotate(315deg);
  -moz-transform: rotate(315deg);
  transform: rotate(315deg);
}
.open #nav-toggle span:nth-child(2) {
  width: 0;
  left: 50%;
}
.open #nav-toggle span:nth-child(3) {
  top: 11px;
  -webkit-transform: rotate(-315deg);
  -moz-transform: rotate(-315deg);
  transform: rotate(-315deg);
}
/* #global-nav スライドアニメーション */
.open #global-nav {
  /* #global-nav top + #mobile-head height */
  -moz-transform: translateY(556px);
  -webkit-transform: translateY(556px);
  transform: translateY(556px);
}

main {
    /*margin-top: 15%;*/
    text-align: left;
}

p { font-size: 1.2em; }

section .content {
    width: 90%;
    margin: 0 auto;
    padding-bottom: 0.6667em;
}

/*h2 {
    font-size: 3em;
    line-height: 1.3333;
    margin-bottom: 0.6667em;
    position: static;
    text-align: left;
}
h2 span {
    position: static;
    display: block;
    margin: 0;
    padding: 0 0.3em;
    background-color: #fffdf3;
    text-align: left;
    color: #01075a;
}
h2::before {
    display: none;
}*/
#news .content h3 {
	font-size: 1.4em;
}
#news .content .date {
	text-align: right;
	font-size: 0.8em;
}
#news .content .exp {
	font-size: 1em;
}
#news .content .outline {
	font-size: 1em;	
}
#news .content .outline dt,
#news .content .outline dd {
	width:100%;
	float:none;
}
#news .content .outline dd {
	margin-bottom: 8px;
}

#live .content .outline {
	font-size: 1.2em;	
}
#live .content .outline dt,
#live .content .outline dd {
	width:100%;
	float:none;
}
#live .content .outline dd {
	margin-bottom: 8px;
}

#access iframe {
	width: 100%;
	height: 300px;
}
 
#sns{
	width: 90%;
	margin: 0 auto;
}
.sound{
	margin-bottom: 0.6667em;
	float: none;
	padding: 0;
	width: 100%;
}
.sound iframe{
	width:100%;
}
.fb-page{
	float: none;
	margin-bottom: 0.6667em;
	padding: 0;
	width: 100%;
}
.line{
	float: none;
	width: 100%;
	margin: 0.6667em 0;
}
footer p{
	font-size: 0.5em;
}

}