@chaeset "utf-8";
/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

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, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
	font-family: 'Noto Sans JP', sans-serif;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
/* iOSでのデフォルトスタイルをリセット */
input[type="submit"],
input[type="button"] {
  border-radius: 0;
  -webkit-box-sizing: content-box;
  -webkit-appearance: button;
  appearance: button;
  border: none;
  box-sizing: border-box;
  cursor: pointer;
}
input[type="submit"]::-webkit-search-decoration,
input[type="button"]::-webkit-search-decoration {
  display: none;
}
input[type="submit"]::focus,
input[type="button"]::focus {
  outline-offset: -2px;
}

/* ここから */
body {
  margin: 0;
  padding: 0;
  background-size:cover;
  color: #333333;
  font-size: 18px;
  line-height:1.6; 
  font-family: 'Noto Sans JP', sans-serif;
  box-sizing: border-box;
}

p,h1,h2,h3,h4,h5,h6 {
  margin: 0;
}
ul li {
	list-style:none;
}

img {
  vertical-align: bottom;
}

a:hover {
  opacity: 0.8;
}
a { text-decoration:none;color:#333; }

/* レイアウト */
.container { width:1170px; margin:0 auto; }
.clear { clear:both; }
.png-sp {display: none;}
.png-tab { display: none; }
section { padding:20px 0; }
.clearfix:after {
  content: "";
  display: block;
  clear: both;
}
p {line-height: 35px;}
.container{padding:50px 0;}
.sm{font-size:80%;}
.lg{font-size:110%;}

/* header */
header {background-image:url('images/mainvisual_bg.png');background-size:contain;background-repeat:no-repeat;background-position:center;}
header img { width: 60%;}
header div{width:1170px;margin:0 auto;text-align:center;}

/* menu */
#menu {padding: 10px 0;position: fixed;width: 100%;text-align: center;display: block;border-bottom: 1px solid #ddd;background-color: #fff;}
#menu ul {width: 1170px;margin: 0 auto;}
#menu ul li {display: inline-block;margin-right: 15px; vertical-align: middle;}
#menu ul li img{width:100%;}
#pdflink {display:block;width:50%;margin:20px auto;background-color:#55A3CF;color:#fff;padding:10px;text-align:center;border-radius:5px;border:1px solid #fff;font-weight:800;}
#emergency {display:block;width:50%;margin:20px auto;background-color:#fdd35c;color:#fff;padding:10px;text-align:center;border-radius:5px;border:1px solid #fff;font-weight:800;}
#twitcas {display:block;width:50%;margin:20px auto;background-color:#4db56a;color:#fff;padding:10px;text-align:center;border-radius:5px;border:1px solid #fff;font-weight:800;}
#shoplink {display:block;width:50%;margin:20px auto;background-color:#72BED5;color:#fff;padding:10px;text-align:center;border-radius:5px;border:1px solid #fff;font-weight:800;}

/* info */
#info{width:1170px;margin:0 auto;}
#info > div {
	display:inline-block;
	width:45%;
	margin:2%;
	vertical-align:top;
}
#info > div > div{
	border:2px solid #e65798;
	height:330px;
	padding:10px;
	overflow-y:scroll;
}
#info #news li {margin-bottom:10px;}

/* story */
#story {text-align:center;}
#story img{width:100%;}

/* schedule */
#schedule {text-align:center;}
#schedule img{width:100%;}
	
/* cast */
#cast {text-align:center;}
#cast img{width:100%;}

/* staff */
#staff {text-align:center;}
#staff img{width:100%;}
#staff p {text-align:center;margin-top:30px;}
#staff table {margin:0px auto 0 auto;}
#staff table th {width:45%;padding:10px;text-align:right;}
#staff table td:first-of-type {width:1%;text-align:center;}
#staff table td:last-child {width:45%;padding:10px;text-align:left;}

/* contact */
#contact {  }


/* ticket */
#ticket {text-align:center;}
#ticket img{width:100%;}
#ticket .container a img{margin-bottom:30px;}
#ticket #attention {
	text-align:left;
	font-size:70%;
	color:#e65798;
	margin-top:30px;
}
#ticket #attention h3 { font-size:120%;font-weight:bold;margin-bottom:10px; }
#ticket #attention p{ line-height:2; }


/* twitter_link */
#twitter_link {
	position:fixed;
	bottom:10px;
	right:0px;
	width:90px;
	z-index:9999999999999;
}

/* cooperation */
#cooperation {text-align:center;color:#e65798;}

/* goods */
#goods {text-align:center;margin:10px auto;}
#goods img{width:100%;}

/* streaming */
#streaming {text-align:center;margin:10px auto;}
#streaming img{width:100%;}


/* footer */
footer {
  font-size: 50%;
  text-align: center;
  padding: 10px;
}

@media screen and (max-width:767px) {
  /* 画面サイズが 767px以下の場合に適用 */
  
	body {font-size:14px;line-height: 30px;}
	.container { width:100%;padding:0px 0;}
	.png { display: none; }
	.png-sp { display: block; width: 100%; }
	.png-tab { display: none; }
	.space { display: none;}
	.h2 img {width:95%;}
	header div{width:100%;}
	
	/* menu */
	#menu{display:none;}
	#pdflink { width:90%;font-size:80%; }
	#emergency { width:90%;font-size:100%; }
	#twitcas { width:90%;font-size:100%; }
	#shoplink { width:90%;font-size:100%; }
	.nav_toggle {display: block;position: fixed;width: 1.75rem;top:10px;right:0px;height: 1.5rem;margin-right: 10px; z-index: 2;  }
	.nav_toggle i {display: block;width: 100%;height: 2px;background-color: #333;position: absolute;transition: transform 0.5s, opacity 0.5s;}
	.nav_toggle i:nth-child(1) {top: 0;}
	.nav_toggle i:nth-child(2) {top: 0;bottom: 0;margin: auto;}
	.nav_toggle i:nth-child(3) {bottom: 0;  }
	.nav_toggle.show i:nth-child(1) {transform: translateY(10px) rotate(-45deg);}
	.nav_toggle.show i:nth-child(2) {opacity: 0;}
	.nav_toggle.show i:nth-child(3) {transform: translateY(-12px) rotate(45deg);}
	.nav {display: flex;position: fixed;align-items: center;justify-content: center;top: 0;left: 0;right: 0;bottom: 0;opacity: 0;visibility: hidden;transition: opacity 0.5s, visibility 0.5s;background-color: #fff;z-index: 1;}
	.nav_menu_li {margin-bottom: 30px;}
	.nav_menu_li a {color: #ee6557; text-decoration: none;}
	.nav.show {opacity: 1;visibility: visible;  }
	
	/* info */
	#info {width:auto;padding-top:0px;}
	#info > div {display: block;width: 90%;margin: 5%;}
	#twitter {width: 100%;}
	#twitter #twitter-widget-0 {height: 300px !important;}
	
	/* story */
	#story img {width:98%;margin:0 auto;}
	
	/* schedule */
	#schedule img {width:98%;margin:0 auto;}
	
	/* cast */
	#cast img {width:98%;margin:0 auto;}
	
	/* staff */
	#staff img {width:98%;margin:0 auto;}

	
	/* ticket */
	#ticket img {width:98%;margin:30px auto 10px auto;}
	#ticket #attention {width:95%;margin:0 auto;}
	
	/* footer */
	footer {width:98%;padding:1%;}
	
	/* goods */
	#goods {width:95%;margin:10px auto;}
	
	/* streaming */
	#streaming {width:95%;margin:10px auto;}

}

@media screen and (max-width: 1024px) and (min-width:768px) {
	.container,.png { width:100%; }
	.png-tab { display: block;}
	.space { display: none;}
	header div{width:100%;}
	.nav_toggle {display: block;position: fixed;width: 1.75rem;top:10px;right:0px;height: 1.5rem;margin-right: 10px; z-index: 2;  }
	.nav_toggle i {display: block;width: 100%;height: 2px;background-color: #333;position: absolute;transition: transform 0.5s, opacity 0.5s;}
	.nav_toggle i:nth-child(1) {top: 0;}
	.nav_toggle i:nth-child(2) {top: 0;bottom: 0;margin: auto;}
	.nav_toggle i:nth-child(3) {bottom: 0;  }
	.nav_toggle.show i:nth-child(1) {transform: translateY(10px) rotate(-45deg);}
	.nav_toggle.show i:nth-child(2) {opacity: 0;}
	.nav_toggle.show i:nth-child(3) {transform: translateY(-12px) rotate(45deg);}
	.nav {display: flex;position: fixed;align-items: center;justify-content: center;top: 0;left: 0;right: 0;bottom: 0;opacity: 0;visibility: hidden;transition: opacity 0.5s, visibility 0.5s;background-color: #fff;z-index: 1;}
	.nav_menu_li {margin-bottom: 30px;}
	.nav_menu_li a {color: #ee6557; text-decoration: none;}
	.nav.show {opacity: 1;visibility: visible;  }
	
	/* menu */
	#menu{display:none;}

	/* info */
	#info {width:100%;}
	
	/* ticket */
	#ticket img {width:98%;margin:30px auto 10px auto;}
	#ticket #attention { width:95%;margin:20px 2%; }

}