@charset "utf-8";

body{min-width: 1200px;
	overflow-y: scroll;}

.font-goth1{font-family: vdl-v7gothic, sans-serif;
font-weight: 300;
font-style: normal;}

.font-goth2{font-family: vdl-v7gothic, sans-serif;
font-weight: 500;
font-style: normal;}

.font-goth3{font-family: vdl-v7gothic, sans-serif;
font-weight: 700;
font-style: normal;}

.font-goth4{font-family: vdl-v7gothic, sans-serif;
font-weight: 800;
font-style: normal;}

.font-goth5{font-family: tbudgothic-std,sans-serif;
font-weight: 400;
font-style: normal;}

.font-min1{font-family: kozuka-mincho-pr6n, serif;
font-weight: 700;
font-style: normal;}

.font-min2{font-family: kozuka-mincho-pr6n, serif;
font-weight: 900;
font-style: normal;}

.start_filter{width: 100%;
	height: 100vh;
	position: fixed; top: 0; left: 0;
	background:rgba(0,0,0,1.00);
	z-index: 999;}

.loading_block{width: 200px;
	height: 95px;
	text-align: center;
	position: fixed; top: 50%; left: 50%;
	margin: -50px 0 0 -100px;}

.loading_img{height: 100px;
	-webkit-animation:blink 2s linear infinite;
	-moz-animation:blink 2s linear infinite;
	-ms-animation:blink 2s linear infinite;
	-o-animation:blink 2s linear infinite;
	animation:blink 2s linear infinite;}

@-webkit-keyframes blink {
	0% {opacity:0;}
	40% {opacity:1.0;}
	60% {opacity:1.0;}
	100% {opacity:0;}
}
@-moz-keyframes blink {
	0% {opacity:0;}
	40% {opacity:1.0;}
	60% {opacity:1.0;}
	100% {opacity:0;}
}
@-ms-keyframes blink {
	0% {opacity:0;}
	40% {opacity:1.0;}
	60% {opacity:1.0;}
	100% {opacity:0;}
}
@-o-keyframes blink {
	0% {opacity:0;}
	40% {opacity:1.0;}
	60% {opacity:1.0;}
	100% {opacity:0;}
}
@keyframes blink {
	0% {opacity:0;}
	40% {opacity:1.0;}
	60% {opacity:1.0;}
	100% {opacity:0;}
}

.loading_img img{height: 100%;}

.bg_box{width: 100%;
	height: 100vh;
	position: fixed; top: 0; left: 0;
	background: url("../img/bg1.jpg");
	background-size: cover;
	background-position: center bottom;
	z-index: 0;}

#container{width: 100%;
	position: relative;}

header{width: 100%;
	height: 40px;
	background: rgba(174,7,50,1.00);
	position: fixed; top: 0; left: 0; 
	z-index: 9;}
	
.header_text{padding: 0 10px;
	line-height: 40px;
	font-size: 14px;
	color: rgba(255,255,255,1.00);}
	
.pc_menu{height: 100%;
	position: fixed; top: 40px; left: 30px;
	overflow: hidden;
	z-index: 8;}
	
.pc_menu_bar{width: 3px;
	height: 100%;
	background:url("../img/bar4.jpg");
	background-size: 100% 100%;
	float: left;}
	
.pc_menu_btn_box{padding-left: 10px;
	float: left;}
	
.pc_menu_btn1{padding-left: 5px;
	border-left: rgba(0,0,0,0.00) solid 2px;}
	
.pc_menu_btn1 a{display: block;
	font-size: 1.4vw;
	line-height: 120%;
	color: rgba(255,255,255,1.00);}

.pc_menu_btn1:hover{border-left: rgba(174,7,50,1.00) solid 2px;}

a .pc_menu_btn_sub{padding-left: 3px;
	font-size: 0.7vw;
	line-height: 100%;}

@media screen and ( max-width:1500px )
{
.pc_menu_btn1 a{font-size: 20px;}

a .pc_menu_btn_sub{font-size: 10px;}
}

.main_img{width: 100%;
	min-width: 800px;
	min-height: 600px;
	height: 100vh;
	margin: 0 auto;
	position: relative;}
	
.main_img_spacer,.main_img_spacer img{width: 100%;
	position: absolute; top: 0; left: 0;}
	
.main_img_logo{width: 100%;
	margin: 5% auto 0;
	text-align: center;}

.main_img_logo img{width: 55%;}

.main_img_text1{width: 100%;
	margin-top: 2%;}
	
.main_img_text1_inner{width: 55%;
	margin: 0 auto;
	overflow: hidden;}

.main_img_text1_inner table{float: right;
	font-size: 1vw;
	color: rgba(255,255,255,1.00);}

@media screen and ( max-width:1200px )
{
.main_img_text1_inner table{font-size: 12px;}
}

.main_img_text1_td1{vertical-align: middle;
	padding: 0 10px;}
	
.main_img_text1_td2{padding: 0 10px;
	line-height: 150%;
	border-left: rgba(255,255,255,1.00) solid 1px;}

.main_img_text2{width: 100%;
	margin-top: 1%;
	font-size: 1.9vw;
	line-height: 150%;
	text-align: center;
	color: rgba(251,176,59,1.00);}

@media screen and ( max-width:1200px )
{
.main_img_text2{font-size: 24px;}
}

.main_img_text3{width: 100%;
	margin-top: 1%;
	font-size: 1.9vw;
	line-height: 150%;
	text-align: center;
	color: rgba(255,255,255,1.00);}
	
.main_img_text4{width: 100%;
	font-size: 1.3vw;
	line-height: 150%;
	text-align: center;
	color: rgba(255,255,255,1.00);}

.main_img_text5{width: 100%;
	margin-top: 1%;
	font-size: 1.3vw;
	line-height: 150%;
	text-align: center;
	color: rgba(255,255,255,1.00);}

@media screen and ( max-width:1200px )
{
.main_img_text3{font-size: 24px;}

.main_img_text4,.main_img_text5{font-size: 16px;}
}

.con_block1{width: 100%;
	padding: 40px 0;}
	
.con_block_inner1{width: 60%;
	min-width: 800px;
	max-width: 1200px;
	margin: 0 auto;}
	
.con_bar1{width: 100%;
	padding-bottom: 20px;}

.con_bar1 img{width: 100%;}

.news_twitter_box{width: 100%;
	overflow: hidden;}
	
.news_box{width: 60%;
	float: left;}
	
.news_title{font-size: 28px;
	line-height: 150%;
	color: rgba(255,255,255,1.00);}
	
.news_title_sub{font-size: 18px;}
	
.topics_box{width: 100%;
	height: 250px;
	background: rgba(255,255,255,0.70);
	overflow-y: scroll;}

.topic1{padding: 10px;}

.topic_date{font-size: 14px;
	line-height: 150%;
	color:rgba(69,69,69,1.00);}
	
.topic_title{font-size: 18px;
	line-height: 150%;
	color:rgba(0,140,255,1.00);}
	
.topic_text{padding-top: 5px;
	font-size: 16px;
	line-height: 150%;}

.topic_text a{color:rgba(255,142,0,1.00);}

.topic_text a:hover{opacity: 0.7; }

.info_ex{width: 100%;
	margin-top: 5px;
	line-height: 45px;
	font-size: 18px;
	text-align: center;
	background: rgba(255,103,0,1.00);
	border-radius: 5px;}
	
.info_ex a{display: block;
	color: rgba(255,255,255,1.00);}

.info_ex:hover{background: rgba(0,163,255,1.00);}

.twitter_box{width: calc(40% - 10px);
	padding-left: 10px;
	float: left;}
	
.timeline_box{width: 100%;
	height: 300px;
	background: rgba(255,255,255,0.70);}

.text1{padding-top: 20px;
	font-size: 16px;
	line-height: 180%;
	color: rgba(255,255,255,1.00);}

.about_yoake_inner{width: 100%;
	overflow: hidden;}
	
.about_yoake_left{width: 70%;
	padding-right: 5%;
	float: left;}
	
.about_yoake_right{width: 25%;
	float: left;}
	
.about_yoake_right img{width: 100%;}

.mv_old_text{font-size: 14px;
	text-align: center;}

.con_title1{width: 100%;
	position: relative;}
	
.con_title_bar{width: 100%;
	position: absolute; top: 50%; left: 0;
	z-index: 1;}
	
.con_title_bar img{width: 100%;}

.con_title_box{width: 300px;
	height: 50px;
	margin: 0 auto;
	font-size: 30px;
	line-height: 50px;
	text-align: center;
	color: rgba(255,255,255,1.00);
	background: url("../img/box1.png");
	background-size: 100% 100%;
	position: relative;
	z-index: 2;}
	
.con_title_box2{width: 300px;
	height: 50px;
	margin: 0 auto;
	font-size: 30px;
	line-height: 50px;
	text-align: center;
	color: rgba(255,255,255,1.00);
	background: url("../img/box2.png");
	background-size: 100% 100%;
	position: relative;
	z-index: 2;}
	
.con_title2{font-size: 16px;
	line-height: 140%;
	text-align: center;
	color: rgba(255,255,255,1.00);}
	
.story_text{padding: 40px 0;
	font-size: 1.2vw;
	line-height: 240%;
	text-align: center;
	color: rgba(255,255,255,1.00);}

@media screen and ( max-width:1600px )
{
.story_text{font-size: 16px;}
}

@media screen and ( min-width:2000px )
{
.story_text{font-size: 24px;}
}

.cast_box1{width: 100%;
	overflow: hidden;}
	
.cast_box2{width: 20%;
	margin: 0 auto;
	overflow: hidden;}
	
.cast_block1{width: 20%;
	padding: 0 2.5% 25px;
	float: left;}

.cast_block3{width: 100%;
	padding-bottom: 25px;}

.cast_img{position: relative;}

.cast_img img{width: 100%;}

.zoom{width: 25%;
	position: absolute; left: 5px; bottom: 5px;}

.cast_name{color: rgba(255,255,255,1.00);
	text-align: center;
	overflow: hidden;}

.cast_name_inner1{font-size: 22px;
	line-height: 25px;}

.cast_name_inner2{font-size: 16px;
	line-height: 25px;}
	
.cast_name_inner3{font-size: 14px;
	line-height: 150%;}

.cast_comment{width: 120px;
	padding-top: 5px;
	margin: 0 auto;}
	
.cast_comment img{width: 100%;}

.cast_comment img:hover{opacity: 0.8;}

.cast_block2{padding-top: 20px;
	font-size: 22px;
	line-height: 150%;
	text-align: center;
	color: rgba(255,255,255,1.00);}

.cast_info_box{width: 650px;
	padding: 15px 10px;
	margin: 15px auto 0;
	background: rgba(130,130,130,1.00);}

.cast_info_text1{padding-bottom: 10px;
	font-size: 18px;
	text-align: center;}
	
.cast_info_text2{font-size: 16px;
	line-height: 150%;
	text-align: center;}

.text2{font-size: 22px;
	line-height: 150%;
	text-align: center;
	color: rgba(255,255,255,1.00);}

.timetable{width: 100%;
	padding-top: 30px;}

.timetable table{width: 100%;}

.sche_td1{width: 12.5%;
	font-size: 16px;
	line-height: 50px;
	text-align: center;
	color: rgba(255,255,255,1.00);
	background: rgba(50,50,50,1.00);}
	
.sche_td2{font-size: 16px;
	line-height: 30px;
	text-align: center;
	color: rgba(50,50,50,1.00);
	background: rgba(193,193,193,1.00);}

.sunday{background: rgba(255,62,65,1.00);
	color: rgba(255,255,255,1.00);}
	
.saturday{background: rgba(20,127,255,1.00);
	color: rgba(255,255,255,1.00);}
	
.sche_td3{font-size: 16px;
	line-height: 40px;
	text-align: center;
	color: rgba(0,0,0,1.00);
	background: rgba(255,255,255,1.00);
	vertical-align: middle;}

.caution1{font-size: 14px;
	line-height: 150%;
	color: rgba(255,255,255,1.00);}

.text3{font-size: 18px;
	line-height: 150%;
	text-align: center;
	color: rgba(255,255,255,1.00);}

.theater_map{width: 100%;
	height: 300px;
	padding: 10px 0;}
	
.theater_map iframe{width: 100%;
	height: 100%;}

.ticket_table{width: 800px;
	margin: 0 auto;}
	
.ticket_table table{width: 100%;
	padding-top: 10px;}

.ticket_td1{padding: 5px 10px;
	text-align: left;
	color: rgba(255,255,255,1.00);
	vertical-align: middle;
	background: rgba(50,50,50,1.00);}
	
.ticket_td2{padding: 5px 10px;
	text-align: left;
	color:rgba(0,0,0,1.00);
	vertical-align: middle;
	background:rgba(255,255,255,1.00);}

.ticket_td3{width: calc(100% - 140px);
	padding: 5px 10px;
	text-align: left;
	vertical-align: middle;
	color: rgba(0,0,0,1.00);
	background: rgba(255,255,255,1.00);}

.ticket_td4{width: 150px;
	padding: 5px 0;
	font-size: 14px;
	line-height: 150%;
	text-align: center;
	vertical-align: middle;
	/*background: rgba(80,80,80,1.00);*/
	background:rgba(255,103,0,1.00);}

.ticket_td4:hover{background: rgba(0,163,255,1.00);}

.ticket_td4 a{display: block;
	color: rgba(255,255,255,1.00);}

.ticket_sale_block{width: 100%;
	margin-bottom: 5px;}
	
.ticket_block_name{padding: 5px 0;
	margin-bottom: 1px;
	text-align: center;
	background: rgba(50,50,50,1.00)}

.ticket_block_date{padding: 5px 0;
	text-align: center;
	color: rgba(0,0,0,1.00);
	background: rgba(255,255,255,1.00);}

.bg_black{background: rgba(0,0,0,0.70);}

.staff_text1{padding-top: 20px;
	font-size: 16px;
	line-height: 120%;
	text-align: center;
	color: rgba(255,255,255,0.80);}

.staff_text2{padding-top: 5px;
	font-size: 18px;
	line-height: 130%;
	text-align: center;
	color: rgba(255,255,255,1.00);}

.staff_text3{font-size: 14px;
	line-height: 120%;
	text-align: center;
	color: rgba(255,255,255,1.00);}

footer{width: 100%;
	padding: 20px 0 20px;
	text-align: center;
	color: rgba(255,255,255,1.00);
	background: rgba(174,7,50,1.00);
	position: relative;
	z-index: 7;}

.footer_text1{font-size: 24px;
	text-align: center;
	color: rgba(255,255,255,1.00);}

.footer_text2{padding-top: 15px;
	font-size: 16px;
	line-height: 120%;}
	
.footer_text3{font-size: 18px;
	line-height: 120%;}

.copyright{font-size: 16px;}

ul.listmarker1 {
	list-style-type: none;
	margin-left:14px;
	font-size: 14px;
	text-align: left;
}
ul.listmarker1 li:before {
	content: '※'; 
	margin-left:-14px; 
}

ul.listmarker2 {
	list-style-type: none;
	margin-left:16px;
}
ul.listmarker2 li:before {
	content: '◇'; 
	margin-left:-16px; 
}


#page-top{width: 60px;
	height: 60px;
	position: fixed; bottom: 10px; right: 10px;
	z-index: 8;}
	
#page-top img{width: 100%;
	height: 100%;}












@media screen and ( max-width:736px )
{
body{min-width: 320px;}

.bg_box{min-width: 320px;
	background: url("../img/bg_sp1.jpg");
	background-size: cover;
	background-position: bottom center;}

header{height: 30px;}
	
.header_text{line-height: 30px;
	font-size: 10px;}

/*.main_img{width: 90%;
	min-width: 0;
	min-height: 480px;
	height: 100vh;
	margin: 0 auto;
	position: relative;}
	
	
.main_img_logo{width: 100%;
	margin: 0 auto;
	text-align: center;}

.main_img_logo img{width: 100%;
	padding-top: 30%;}

.main_img_text1{width: 100%;
	margin-top: 0;}
	
.main_img_text1_inner{width: 55%;
	margin: 5% auto;
	overflow: hidden;}

.main_img_text1_inner table{float: right;
	font-size: 2vw;
	color: rgba(255,255,255,1.00);}

.main_img_text1_td1{vertical-align: middle;
	padding: 0 10px;}
	
.main_img_text1_td2{padding: 0 10px;
	line-height: 150%;
	border-left: rgba(255,255,255,1.00) solid 1px;}

.main_img_text2{margin-top: 1%;
	font-size: 3.2vw;}

.main_img_text3{margin-top: 4%;
	font-size: 4vw;
	line-height: 150%;}
	
.main_img_text4{width: 100%;
	font-size: 3vw;
	line-height: 150%;
	text-align: center;
	color: rgba(255,255,255,1.00);}

.main_img_text5{width: 100%;
	margin-top: 3%;
	font-size: 3vw;
	line-height: 150%;
	text-align: center;
	color: rgba(255,255,255,1.00);}*/

.main_img_sp{width: 90%;
	min-height: 100vh;
	margin: 0 auto;}
	
.main_img_sp img{width: 100%;}

.con_block1{width: 100%;
	padding: 40px 0;}
	
.con_block_inner1{width: 92%;
	min-width: 320px;
	max-width: 480px;
	margin: 0 auto;}

.news_twitter_box{width: 100%;
	overflow: hidden;}
	
.news_box{width: 90%;
	margin: 0 auto;
	float: none;}
	
.news_title{font-size: 16px;}
	
.news_title_sub{font-size: 12px;}
	
.topics_box{width: 100%;
	height: 250px;}

.topic_date{font-size: 10px;}
	
.topic_title{font-size: 14px;}
	
.topic_text{font-size: 12px;}

.topic_text a:hover{opacity: 1.0; }

.info_ex{margin-top: 5px;
	line-height: 40px;
	font-size: 12px;}
	
.info_ex:hover{background: rgba(255,103,0,1.00);}

.twitter_box{width: 90%;
	margin: 20px auto 0;
	padding-left: 0;
	float: none;}
	
.timeline_box{width: 100%;
	height: 300px;
	background: rgba(255,255,255,0.70);}

.text1{font-size: 12px;}

	
.about_yoake_left{width: 100%;
	padding-right: 0;
	float: none;}
	
.about_yoake_right{width: 50%;
	margin: 20px auto 0;
	float: none;}

.mv_old_text{font-size: 10px;}
		
.con_title_box,.con_title_box2{width: 200px;
	height: 40px;
	font-size: 22px;
	line-height: 40px;}
		
.con_title2{font-size: 12px;}

.story_text{padding: 20px 0;
	font-size: 12px;}
	
.cast_box1{width: 100%;
	overflow: hidden;}
	
.cast_box2{width: 45%;
	margin: 0 auto;
	overflow: hidden;}
	
.cast_block1{width: 45%;
	padding: 0 2.5% 25px;
	float: left;}

.cast_block3{width: 100%;
	padding-bottom: 25px;}

.cast_img img{width: 100%;}

.cast_name{color: rgba(255,255,255,1.00);
	text-align: center;
	overflow: hidden;}

.cast_name_inner1{font-size: 18px;
	line-height: 25px;}

.cast_name_inner2{padding-top: 5px;
	font-size: 14px;
	line-height: 20px;}
	
.cast_name_inner3{font-size: 12px;
	line-height: 150%;}

.cast_comment{width: 100px;
	padding-top: 5px;
	margin: 0 auto;}
	
.cast_comment img:hover{opacity: 1.0;}

.cast_block2{padding-top: 20px;
	font-size: 17px;
	line-height: 150%;
	text-align: center;
	color: rgba(255,255,255,1.00);}

.cast_info_box{width: calc(100% - 20px);
	padding: 15px 10px;
	margin: 15px auto 0;
	background: rgba(130,130,130,1.00);}

.cast_info_text1{padding-bottom: 10px;
	font-size: 14px;
	text-align: center;}
	
.cast_info_text2{font-size: 12px;
	line-height: 150%;
	text-align: left;}

.text2{font-size: 22px;
	line-height: 150%;
	text-align: center;
	color: rgba(255,255,255,1.00);}

.text2{font-size: 16px;}

.timetable{width: 100%;
	padding-top: 10px;
	overflow-x: scroll;}

.timetable table{width: 200%;}

.sche_td1{width: 12.5%;
	font-size: 14px;
	line-height: 40px;}
	
.sche_td2{font-size: 12px;
	line-height: 25px;}
	
.sche_td3{font-size: 14px;
	line-height: 30px;}

.caution1{font-size: 10px;}

.text3{font-size: 12px;}

.theater_map{width: 100%;
	height: 270px;
	padding: 10px 0;}
	
.ticket_table{width: 100%;
	margin: 0 auto;}
	
.ticket_td1{min-width: 80px;}
	
.ticket_td3{width: calc(100% - 120px);}

.ticket_td4{width: 100px;
	font-size: 12px;}

/*.ticket_td4:hover{background:rgba(255,103,0,1.00);}*/

.staff_text1{padding-top: 20px;
	font-size: 12px;}

.staff_text2{padding-top: 5px;
	font-size: 13px;}

.staff_text3{font-size: 10px;}

footer{width: 100%;
	padding: 20px 0 20px;
	text-align: center;
	color: rgba(255,255,255,1.00);
	background: rgba(174,7,50,1.00);
	position: relative;
	z-index: 7;}

.footer_text1{font-size: 16px;
	text-align: center;
	color: rgba(255,255,255,1.00);}

.footer_text2{padding-top: 15px;
	font-size: 10px;
	line-height: 120%;}
	
.footer_text3{font-size: 12px;
	line-height: 120%;}

.copyright{font-size: 12px;}




ul.listmarker1 {list-style-type: none;
	margin-left:10px;
	font-size: 10px;}
	
ul.listmarker1 li:before {content: '※'; 
	margin-left:-10px;}

ul.listmarker2 {
	list-style-type: none;
	margin-left:12px;
}
ul.listmarker2 li:before {
	content: '◇'; 
	margin-left:-12px; 
}



}