@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;
}
/* 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-color: #ffffff;
  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; }

/* レイアウト */
.container { width:1170px; margin:0 auto; }
.clear { clear:both; }
.png-sp {display: none;}
.png-tab { display: none; }
section { padding:50px 0; }
.clearfix:after {
  content: "";
  display: block;
  clear: both;
}
h2 {
  font-size: 45px;
  font-weight: 900;
  position: relative;
  display: inline-block;
  margin-bottom: 50px;
}
h2:before {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -5px;/*線の上下位置*/
  display: inline-block;
  width: 80px;/*線の長さ*/
  height: 2px;/*線の太さ*/
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);/*位置調整*/
  background-color: black;/*線の色*/
  border-radius: 2px;/*線の丸み*/
}
p {
  line-height: 35px;
}

/* header */
header img { width: 100%;}


.ticker {
	margin:40px auto 40px auto;
	padding: 10px;
	width:80%;
	text-align: left;
	border: #383F58 3px solid;
	position: relative;
	overflow: hidden;
	border-radius:30px;
	background-color:#ffffff;
}
.ticker ul {
	width: 100%;
	position: relative;
}
.ticker ul li {
	width: 100%;
	display: none;
}
.ticker ul li a{
	color:#383F58;
	font-weight:900;
}

/* menu */
#menu {
	background-color:#383F58;
    z-index: 1000000;
    position: relative;
}
#menu ul {
	display:flex;
	border-left:1px solid #ffffff;
}
#menu ul li {
	display:inline-block;
	color:#ffffff;
	width:100%;
	text-align:center;
	padding:20px 10px;
	border-right:1px solid #ffffff;
	font-weight:900;
}
#menu ul li a {
	color:#ffffff;
	display:block;
}
#pdflink {display:block;width:50%;margin:20px auto;background-color:#FC380F;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;}


/* story */
#story {
	background-image: url(images/story_bg.png);
	background-size: cover;
	background-repeat: no-repeat;
	padding-top: 50px;
}
#story h2 {
	display:block;
}
#story > div:nth-of-type(1) {
	text-align: center;
	background-color: rgba(255,255,255,0.5);
	padding: 50px 0;
}
#story > div > p {
	line-height: 50px;
}
#story ruby rt {
	margin-bottom: .3em;
	transform: translateY(.3em);
}


/* schedule */
#schedule {
	background-color: #F4FFFE;
}
#schedule > div:first-of-type {
	text-align: center;
}
#schedule #schedule_table { width:100%; }
#schedule table {
	margin: 20px auto;
	font-weight: bold;
}
#schedule table tr th {
	background-color: #eeeeee;
	border: 1px solid #cbcbcb;
	width: 50%;
	padding: 15px 0;
}
#schedule table tr td {
	border: 1px solid #cbcbcb;
	border-left: none;
	text-align: center;
	padding: 15px 0;
}
#schedule > div:nth-of-type(2) {
	text-align: center;
}
#schedule > div > p:nth-of-type(1) {
	font-size: 150%;
	font-weight: 700;
	padding: 10px 0;
	border: 4px solid #000000;
	margin-bottom: 20px;
	line-height:1.5;
}
#schedule > div > p span {
	font-size:80%;
	font-weight:normal;
}


/* theater */
#theater { background-color: #f7f4ed;}
#theater > div:first-of-type {
  text-align: center;
}
.white_box {
  text-align: center;
  background-color: #ffffff;
  border: 4px solid #000000;
  margin: 10px auto 40px auto;
  padding: 20px 0;
  font-size: 140%;
  font-weight: bold;
  line-height: 42px;
}
#theater > div:nth-of-type(2) {
  display: flex;
  justify-content: space-between;
}
#theater > div:nth-of-type(2) > div {
  padding: 40px 0;
}
#theater > div:nth-of-type(2) > div, #theater > div:nth-of-type(2) > iframe{
  width: 48%;
}
#theater > div:nth-of-type(2) > div > p {
  margin-bottom: 20px;
}
#theater > div:nth-of-type(2) > div > p:nth-of-type(4) {
  margin-bottom: 30px;
}


/* cast */
#cast > div:first-of-type {
  text-align: center;
}
#cast > div > div {
  text-align: center;
}
#cast > div > p {
  text-align: center;
  margin-bottom: 60px;
}
#cast > div > div:first-of-type {
  display: flex;
  justify-content: space-evenly;
}
#cast > div > div > div {
  width: 22%;
  display: inline-block;
}
#cast > div > div:nth-of-type(n+2) > div {
  vertical-align: top;
}
#cast > div > div:first-of-type > div:nth-of-type(2) {
  margin: 0 7%;
}
#cast > div > div:first-of-type > div:nth-of-type(1), #cast > div > div:first-of-type > div:nth-of-type(3) {
  margin-top: 82px;
}
#cast > div > div:nth-of-type(3) > div:nth-of-type(1) {
  margin-right: 5%;
}
#cast > div > div:nth-of-type(3) > div:nth-of-type(2) {
  margin-left: 5%;
}
#cast > div > div:nth-of-type(4) > div:nth-of-type(2) {
  margin: 0 0.5%;
}
#cast > div > div:nth-of-type(5) {
  border-bottom: dashed 1px #000000;
  margin-bottom: 100px;
}
#cast > div > div:nth-of-type(5) > div:nth-of-type(2) {
  margin: 0 3.5% 0 0.5%;
}
#cast > div > div:nth-of-type(5) > div:nth-of-type(3) {
  margin: 0 0.5% 0 3.5%;
}
#cast > div > div:nth-of-type(6) > div:nth-of-type(1) {
  margin-right: 14%;
}
#cast > div > div:nth-of-type(6) > div:nth-of-type(2) {
  margin-left: 14%;
}
.one-line {
  margin-bottom: 100px;
}
.two-line {
  margin-bottom: 80px;
}
#cast > div > div > div:nth-of-type(n + 13) {
  margin-bottom: 0;
}
#cast > div > div > div:nth-of-type(4n) {
  margin-right: 0;
}
#cast > div > div > div > img {
  width: 100%;
}
#cast > div > div > div > p {
  text-align: center;
  padding-top: 10px;
  line-height: 26px;
}
#cast .note {
  font-size: 80%;
}
#tsujimoto {
  width: 28% !important;
}
#sano,#juri {
  width: 25% !important;
}


/* staff */
#staff {
	border-top:1px solid #cccccc;
}
#staff > div:first-of-type {
	text-align: center;
}
#staff th {
	border-bottom: 2px solid #1f181d;
	text-align: left;
	padding: 15px 3%;
	width: 25%;
	font-weight: bold;
}
#staff td {
	border-bottom: 2px solid #dddddd;
	text-align: left;
	padding: 15px 3%;
}

/* contact */
#contact { background-color:#f5f5f5; }


/* ticket */
#ticket { background-color: #F2FFFA;}
#ticket > div {
  text-align: center;
}
#ticket > div > a {
  padding: 20px 10px;
  display:block;
  background-color:#00B0F0;
  color: #ffffff;
  font-weight:800;
  border:4px solid #ffffff;
  font-size:130%;
}
#ticket #attention {
	text-align:left;
	font-size:70%;
	margin-top:40px;
}
#ticket #attention h3 { font-size:120%;font-weight:bold;margin-bottom:10px; }
#ticket #attention p{ line-height:2; }

/* twitter */
#twitter {
}
#twitter > div:first-of-type { text-align: center;}


/* contact */
#contact > div {
	text-align: center;
}
#contact > p {
	text-align: center;
	margin-bottom: 30px;
}
#contact > p > a {
	padding: 5px;
	border-bottom: 1px solid;
}

/* organizer */
#organizer {
	background-color:#f5f5f5;
}
#organizer > div {
	text-align: center;
}
#organizer table {
	line-height: 35px;
}
#organizer th {
	border-bottom: 2px solid #1f181d;
	text-align: left;
	padding: 15px 3%;
	width:25%;
	font-weight: bold;
}
#organizer td {
	border-bottom: 2px solid #dddddd;
	text-align: left;
	padding: 15px 0%;
}
#organizer .note {
	font-size: 70%;
}
#organizer .sm_font {
	transform: scale(1.0);
}

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


/* footer */
footer {
  background-color: #1f181d;
  color: #ffffff;
  font-size: 50%;
  text-align: center;
  padding: 10px;
}
footer a {
	color:#FFFFFF;
	text-decoration:underline;
}

@media screen and (max-width:767px) {
  /* 画面サイズが 767px以下の場合に適用 */
  
	body {
		font-size:14px;
		line-height: 30px;
	}
	.container { width:100%; }
	section { padding:50px 0; }
	.png { display: none; }
	.png-sp { display: block; width: 100%; }
	.png-tab { display: none; }
	.space { display: none;}
	h2 {
		margin-bottom: 30px;
		line-height: 70px;
		font-size:32px;
	}
	
	/* header */
	.ticker {
		width: 90%;
		margin:20px auto 20px auto;
		border-radius:10px;
		height:30px;
		font-size:95%;
	}
	
	/* menu */
	#menu ul {
		display:block;
		width:100%;
		margin: 0;
		border-left:0px;
	}
	#menu ul li {
		width:33.1%;
		padding:10px 0;
		border-bottom:1px solid #ffffff;
	}
	#menu ul li:nth-of-type(1){width:100%;display:block;border-right:0px;}
	#menu ul li:nth-of-type(4),#menu ul li:nth-of-type(7) {
		border-right:0px;
	}
	#pdflink { width:90%;font-size:80%; }
	#emergency { width:90%;font-size:100%; }
	#twitcas { width:90%;font-size:100%; }
	#shoplink { width:90%;font-size:100%; }
	
	/* twitter */
	#twitter {
		width: 100%;
	}
	#twitter #twitter-widget-0 {
		height: 300px !important;
	}
	
	/* story */
	#story {
		padding-top:10px;
		padding-bottom:10px;
	}
	#story > div:nth-of-type(1) {
		width: 95%;
		padding:10px 0;
	}
	#story > div:nth-of-type(1) > p {
		line-height: 35px;
	}
	#story > div > p {
		padding: 3%;
		text-align: left;
	}
	#story p.png-sp {
		width: 94%;
	}


	/* schedule */
	#schedule table {
		width: 95%;
	}
	#schedule table tr:nth-of-type(7) th {
		font-size: 90%;
	}
	#schedule > div > p:nth-of-type(1) {
		font-size: 105%;
		width: 95%;
		margin: 0 auto 20px auto;
	}
	#schedule #note {
		width: 95%;
		margin: 0 10px;
	}


	/* theater */
	#theater .white_box {
		width: 80%;
		margin: 10px auto 20px auto;
	}
	#theater > div:nth-of-type(2) {
		display: block;
	}
	#theater > div:nth-of-type(2) > div {
		width: 95%;
		margin: 0 auto;
		padding: 20px 0;
	}
	#theater > div:nth-of-type(2) > iframe {
		width: 100%;
	}


	/* cast */
	#cast p {
		font-size: 10px;
	}
	#cast h2 { margin-bottom: 50px;}
	#cast > div:nth-of-type(2) {
		width: 95%;
	}
	.one-line {
		margin-bottom: 70px;
	}
	.two-line {
		margin-bottom: 50px;
	}
	#cast > div > div:nth-of-type(4) {
		margin-bottom: 0px;
	}
	#cast > div > div:nth-of-type(6) {
		margin-bottom: 0px;
	}
	#cast > div > div:nth-of-type(12) {
		margin-bottom: 63px;
	}
	#cast > div > div:nth-of-type(3n) {
	margin-right: 0;	
	}
	#cast > div > div > div > p {
		padding-top: 7px;
		line-height: 20px;
		font-size:14px;
	}
	#cast .note {
		font-size: 85%;
	}
	#sano > p {
		padding-top: 5px !important;
	}
	#sano > p > span {
		font-size:10px;
		transform:scale(0.8);
		display: inline-block;
		white-space: nowrap;
		margin-left: -2.0em;
	}
	.sm_font, .voyz {
		font-size:10px;
		transform:scale(0.8);
		display: inline-block;
		white-space: nowrap;
	}
	#cast > div > div:first-of-type > div:nth-of-type(1), #cast > div > div:first-of-type > div:nth-of-type(3) {
		margin-top: 25px;
	}
	#cast > div > div:nth-of-type(4) .sm_font, #cast > div > div:nth-of-type(5) .sm_font {
		margin-left: -0.8em;
	}
	#cast > div > div:nth-of-type(5) > div:nth-of-type(4) {
		margin-bottom: 60px;
	}
	#cast > div > div:nth-of-type(5) {
		margin-bottom: 50px;
	}
	#cast > div > div:nth-of-type(5) > div:nth-of-type(2) {
		margin: 0 2% 0 1%;
	}
	#cast > div > div:nth-of-type(5) > div:nth-of-type(3) {
		margin: 0 1% 0 2%;
	}

	/* staff */
	#staff th {
		width: 33%;
	}

	/* organizer */
	#organizer th {
		width: 16%;
	}
  

	/* ticket */
	#ticket {padding-top: 20px;}
	#ticket .white_box {width: 90%;font-size:120%;margin-bottom: 20px;}
	#ticket a{width:85%;margin:0 auto; }
	#ticket #attention { width:95%;margin-top:20px; }

	/* contact */
	#contact table {
		width: 95%;
	}
	#contact th {
		width: 20%;
	}
	.sm_font_sp {
		font-size: 80%;
	}

	/* footer */
	footer {
		width:98%;
		padding:1%;
	}

}

@media screen and (max-width: 1024px) and (min-width:768px) {
	.container,.png { width:100%; }
	.png-tab { display: block;}
	.space { display: none;}

	/* twitter */
	#twitter {
		width: 100%;
		margin-bottom: 40px;
	}
	
	/* story */
	#story > div:nth-of-type(1) {
		width: 95%;
	}


	/* schedule */
	#schedule table {
		width: 95%;
	}
	#schedule > div > p:nth-of-type(1) {
		width: 95%;
		margin: 0 auto 20px auto;
	}


	/* theater */
	.white_box {
		width: 95%;
	}
	#theater > div:nth-of-type(2) {
		display: block;
	}
	#theater > div:nth-of-type(2) > div {
		width: 95%;
		margin: 0 auto;
		padding: 20px 0;
	}
	#theater > div:nth-of-type(2) > iframe {
		width: 100%;
	}
	#theater .white_box {
		margin: 10px auto 20px auto;
	}


	/* cast */
	#cast > div:nth-of-type(2) {
		width: 95%;
	}
	#cast > div > div > div > p {
		padding-top: 5px;
		font-size: 95%;
		line-height: 30px;
	}
	.sm_font {
		font-size: 80%;
	}
	#cast > div > div:first-of-type > div:nth-of-type(1), #cast > div > div:first-of-type > div:nth-of-type(3) {
		margin-top: 50px;
	}
	/* ticket */
	#ticket .white_box {width: 90%;margin: 10px auto 40px auto;font-size:120%;}
	#ticket a{width:90%;margin:0 auto; }
	#ticket #attention { width:95%; }


	/* staff */
	#staff table {
		width: 95%;
	}


	/* contact */
	#contact table {
		width: 95%;
	}
	#contact th {
		width: 20%;
	}

}