@charset "utf-8";
@import url('https://fonts.googleapis.com/css?family=Oswald:500');
/* CSS Document */



body{
font: 14px/1.6 'Oswald',"Hiragino Kaku Gothic Pro",Osaka,"メイリオ","ＭＳ Ｐゴシック","MS PGothic",Verdana,Arial,sans-serif;
margin:0;
color:#000;
background-image: url("../img/back.jpg");
background-size: cover;
background-attachment: fixed;
background-color: #483127;
	background-position: top center;
/*	
background-position: 50% 50%;
	*/
}
/*
body::before {
  content: "";
  background: url(img/back.jpg) no-repeat center center;
  background-size: cover;
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: -1;
}
*/
body:before{
  content:"";
  display:block;
  position:fixed;
  top:0;
  left:0;
  z-index:-1;
  width:100vw;
  height:100vh;
  background:url(img/back.jpg) center no-repeat;
  background-size:cover;
}

/*
@media only screen and (max-width: 750px){
body::before {
	content: "";
  background: url("../img/back.jpg") no-repeat center center;
  background-size: cover;
	background-attachment: fixed;
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: -1;
	
}
}

body::before {
  content: "";
  background: url("../img/back.jpg") no-repeat center center;
  background-size: cover;
  display: block;
  position: fixed;
  top: 60px;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: -1;


}

background-image: url("../img/back.jpg");
background-size: cover;
background-attachment: fixed;
background-color: #272956;
*/

img{
outline:none;
border-style:none;
}

/*****HEADER*****/
header{
    display: block;
    width:100%;
    overflow: hidden;
	background-color: #000;
	position: fixed;
	top:0;
	z-index: 999;
}
wakumoji{
    font-size:120%;
    color:#313131;
    padding-top: 10px;
    padding-bottom: 10px;
    margin-top: 20px;
    margin-bottom: 20px;
    padding-left: 20px;
    padding-right: 20px;
    border:1px solid #313131;
    border-radius: 5px;/*線の角に丸みを付ける*/
    letter-spacing: 3px;/*文字と文字の間隔をあける*/
    font-weight:400;
    float: left;
}
header p{
    font-size:100%;
    float: left;
}

/*****BRANDING*****/
#branding{
    display: block;
    width: 60%;
    margin-left: 20%;
    overflow: hidden;
    background-color: #313131;
    margin-bottom: 20px;
    letter-spacing: 10px;
    line-height: 300px;
}

/*****NAV*****/
nav{
    width: 100%;
    overflow: hidden;
}
nav ul{
    width: 100%;
}
nav li{
	display: inline-block;
    width: calc(100%/4);
    cursor: pointer;
    text-align: center;
    float: left;
}

nav a{
    display: block; 
    text-decoration: none;
    color:#fff; 
    font-size: 180%; 
    letter-spacing: 2px; 
    font-weight: 400;   /*文字の太さを調整*/
    line-height: 60px;  /*行間の指定（ナビボタンの高さ指定）*/
}

nav a:hover{
    opacity: 0.2;   
    transition: 0.5s;   ホバー時の動きをなめらかにする*/
}

li img{margin-bottom: -6px;}

h1{
	padding: 50px auto 0 auto;
	text-align: center;
}

h2 {text-align: center;
	margin: 50px auto 30px auto;
	font-weight: bold;
	font-size: 500%;
}

h3 {text-align: center;
	margin: 50px auto 0px auto;
	font-weight: bold;
	font-size: 250%;
}

h4 {text-align: center;
	margin: 50px auto 100px auto;
	font-weight: bold;
	font-size: 250%;
}

a{
	text-decoration: none;
}

a:hover{
	text-decoration: none;
    opacity: 0.5;   
    transition: 0.3s;   ホバー時の動きをなめらかにする*/
}

a:visited {
	text-decoration: none;
}

.red{color: red;}

/*****ARTICLE*****/

#wraping {
    margin: 600px auto auto auto;
    padding: 0;
	width:100%;
	min-width:100%;
	max-width: 100%;
	position: relative;
}

#wrap {
    margin: 0px auto auto auto;
    padding: 0;
	width:100%;
	min-width:100%;
	max-width: 100%;
	background-color: rgba(0,0,0,0.5);
	position: relative;
}


section{
    display: block;
    max-width: 90%;
    margin: 0 auto;
    overflow: hidden;
	color: #fff;
}

@media only screen and (min-width: 1200px){
section{ max-width: 80%;}
}
@media only screen and (min-width: 1600px){
section{ max-width: 60%;}
}

article{
    width: 100%;
	border-bottom: dotted 1px #fff;
}

article p{
	margin-right: 15px;
	vertical-align:middle;
}

.yen{
	font-size: 300%;
	font-weight: bold;
	display: block;
	margin: 0 auto;

}
.tt{
	font-size: 250%;
	font-weight: bold;
	min-width: 3em;
	text-align: center;
}

.ttt{
	font-size: 370%;
	font-weight: bold;
	min-width: 3.4em;
}

.pt{
	padding-bottom:1em;
	width: 50%;
}

.ts{
	font-size: 130%;
	font-weight: bold;	
}

.t{
	font-size: 180%;
	font-weight: bold;	
}
.s{font-size: 60%;}
.b{font-weight: bold;}


.text-box{
	margin: 30px auto;
	padding: 30px;
	border: dotted 1px #fff;
}

.cp_box *, .cp_box *:before, .cp_box *:after {
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}
.cp_box {
	width: auto;
	margin: 2em auto;
	position: relative;
}
.cp_box label {
	clear: none;
	font-weight: bold;
	font-size:170%;
	margin: auto;
	text-align: center;
	border: dotted 1px #fff;
	text-decoration: none;
	width: 10%;
	height: 70px;
	line-height: 60px;
	vertical-align: middle;
	display: block;
	cursor: pointer;
	transition: all 0.3s;
}

@media only screen and (max-width: 750px){
.cp_box label {width: 100%;height: 40px;line-height: 30px;}
}

.cp_box label:hover {
	transition: all 0.3s;
	background: rgba(255, 255, 255, 0.9);
	
}
.cp_box label::after {
	font-family: 'Font Awesome 5 Free';
	content: ' \f067';
	color: #fff;
}
.cp_box label:hover::after {
	color: #0c0c2d;
}

.cp_box input {
	display: none;
}

.inbox{
 display: -webkit-flex;
 display: flex;
 -webkit-align-items: center; /* 縦方向中央揃え（Safari用） */
 align-items: center; /* 縦方向中央揃え */
}

.inbox02{
		display: block;
		text-align: center;
}
.inbox02 img{
	width: 100%;

}
@media only screen and (max-width: 750px){

	.pt{
		width: 100%;
	}
	.ct{vertical-align: middle;}
	.inbox{
		display: block;
		text-align: center;
}
	.cp_box label {
		right:3px;
		bottom: 3px;
	}

}
/*中身を非表示にしておく*/
.cp_box .accshow {
	clear: both;
    height: 0;
    padding: 0;
    overflow: hidden;
    opacity: 0;
    transition: 0.3s;
}

/*クリックで中身表示*/
.cssacc:checked + .accshow {
    height: auto;
    padding: 1.5em;
    background: rgba(0, 0, 0, 0.5);
    opacity: 1;
	clear: both;
}

.cp_box a{
	color: #d7aa45;
}

a{
	color: #d7aa45;
}


footer{
    font-size: 80%;
    width: 100%;
    text-align: center;
    padding-top: 10px;
    padding-bottom: 10px;
    background-color: #fff;
}
footer address{
    color: #000;
    letter-spacing: 5px;
}

#SCHEDULE{margin-top:-63px; padding-top:63px;}
#TICKET{margin-top:-63px; padding-top:63px;}
#GOODS{margin-top:-63px; padding-top:63px;}


.pagetop {
    display: none;
    position: fixed;
    bottom: 30px;
    right: 15px;
}
.pagetop a {
    display: block;
    text-align: center;
    color: #fff;
    font-size: 240%;
    text-decoration: none;
	border: dotted 1px;
	border-color: #fff;
    padding: 5px 15px;
	filter:alpha(opacity=70);
    -moz-opacity: 0.7;
    opacity: 0.7;
}
.pagetop a:hover {
    display: block;
    background-color: #fff;
    text-align: center;
    color: #222;
    font-size: 240%;
    text-decoration: none;
    padding:5px 15px;
	filter:alpha(opacity=90);
    -moz-opacity: 0.9;
    opacity: 0.9;
}






.shareList {
	list-style:none;
	display: flex;
	flex-wrap:wrap;
	padding:0;
	margin: 0 auto;
	width: 200px;
}

.shareList a{
	color: #fff;
}

.shareList__item {
	height:50px;
	line-height:50px;
	text-align:center;
	margin:9px 0 0 5px;
}
.shareList__link {
	display:block;
	color:#ffffff;
	padding:0 20px;
	text-decoration: none;
	transition: .2s;
	border-radius: 2px;
}
.shareList__link::before{
	font-size:16px;
}
.shareList__link::after{
	content:attr(title);
	font-size:14px;
	font-weight:700;
	vertical-align: top;
	margin-left:5px;
	filter:alpha(opacity=100);
    -moz-opacity: 1;
    opacity: 1;
}
 
 
.shareList__link.icon-twitter{background:#55acee;}
.shareList__link.icon-twitter:hover{color:#55acee; background:#ffffff; border-color:#55acee;}
 
.shareList__link.icon-facebook{background:#3B5998;}
.shareList__link.icon-facebook:hover{color:#3B5998; background:#ffffff; border-color:#3B5998;}