html {
	height: 100%;
	scroll-behavior: smooth;
}
body {
	height: 100%;
	margin: 0;
	color: #07294b;
	background-color:#000000;
}
#main{
background-image:url(../../images/bg_w.jpg);
	width:100%;
	background-color:#000000;
}
.contents{

	width:80%;
	margin-left:auto;
	margin-right:auto;
}
.title{
	margin-top:50px;
}
.title img{
	width:100%;
}
.title_gold_s_text{
	font-family: "Hina Mincho", serif;
	font-size:3em;
	text-align:center;
	line-height:1.2em;
	font-weight:bold;
	color: transparent;
	/*background: linear-gradient(0deg, #B67B03 0%, #DAAF08 45%, #FEE9A0 70%, #DAAF08 85%, #B67B03 90% 100%); 
	-webkit-background-clip: text;*/
	background-image: url(../../images/23064091.jpg);
	background-clip: text;/*画像を切り抜く指定*/
	-webkit-background-clip: text;/*画像の位置を決める　ベンダープレフィックスもいれておきます*/
	color: transparent;/*テキスト透過*/
	font-weight: bold;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;/*画像の位置を決める*/
	/* background-image: linear-gradient(
	70deg,
	rgb(211, 209, 209, 0.3)  45%, 
	#fff 50%,
	rgb(211, 209, 209, 0.3) 55% 
	);
	background-size: 500% 100%;
	background-clip: text;
	-webkit-background-clip: text;
	color: transparent;
	animation: shine 5s infinite;
}

@keyframes shine {
	0% {
	background-position: 100% 50%;
	}
	100% {
	background-position: 0% 50%;
	}*/
}

.title_gold_l_text{
	font-family: "Hina Mincho", serif;
	font-size:6em;
	text-align:center;
	line-height:1.0em;
	font-weight:bold;
	color: transparent;
	/*background: linear-gradient(0deg, #B67B03 0%, #DAAF08 45%, #FEE9A0 70%, #DAAF08 85%, #B67B03 90% 100%); 
	-webkit-background-clip: text;*/
	background-image: url(../../images/23064091_low.jpg);
	background-clip: text;/*画像を切り抜く指定*/
	-webkit-background-clip: text;/*画像の位置を決める　ベンダープレフィックスもいれておきます*/
	color: transparent;/*テキスト透過*/
	font-weight: bold;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;/*画像の位置を決める*/
}
.ticket_b{
 	line-height: 200%;
	font-family: "Zen Maru Gothic", serif;
	font-size: 16px;
	width:70%;
	margin-left:auto;
	margin-right:auto;
	background-color:#000000;
}
#navi{
	padding-top: 20px;
}
#navi ul li {
	display: inline;
	padding: 0 1px;
	margin-right: -1px;

}
.menu p {
	text-align: center;
	width: 200px;
	display: inline-block;
}
.menu_txt_ja {
	font-size: 15px;
	font-family: "Noto Sans JP", sans-serif;
	color:#666666;
}
#navi a{
	text-decoration: none;
}

.menu_txt_en {
	color:#666666;
	font-weight: 600;
	font-size: 30px;
	font-family: "Italianno", cursive;
	display: inline-block;
	line-height: 1em;
}

.fadeIn {
	animation: fadeIn 0.7s ease 0s 1 normal;
	animation: reveal-image linear both; /* アニメーションを指定。イージングはlinear。animation-fill-modeはboth */
	animation-timeline: view();
	animation-range: contain 0% contain 50%; /* 開始: 要素がビューポートに完全に入った時、終了: ビューポートの真ん中 */
}

/* fadeIn */
@keyframes fadeIn {
  	0% {
		opacity: 0;
		transform: translateY(100px);
	}
	100% {
		opacity: 1;
	}
}

.box {
	line-height: 50px;
	opacity: 0;
	transform: translateY(50px);
	transition: all 0.5s ease;
}

.box.show {
	opacity: 1; 
	transform: translateY(0); 
}
.s_text{
	font-size:0.5em;
}
.cast{
	margin-top:20px;
}
.photo_waku{
	width: 310px;
	height:400px;
	margin-left:40px;
	margin-top: 50px;
	margin-bottom: 100px;
}
.photo_image{
	z-index:10;
	position: absolute;
}
/*.pe_photo{
	position: relative;
	top: 70px;
	left: 50px;
}
*/
.photo_box1{
	display:flex;
	justify-content: center;
	flex-wrap:wrap;
}
.photo_box2{
	display:flex;
	justify-content: center;
	flex-wrap:wrap;
}
.photo_box::after {
	content:'';
	display: block; 
	clear:both;
}
.name_text{
	font-family: "Hina Mincho", serif;
	font-size:1.4em;
	top: 10px;
	position: relative;
/*	width: 400px;*/
	text-align: center;
}
/*.cast .box{
 	text-align:center;
	font-family: "Hina Mincho", serif;
	font-size:2em;
	padding: 0.8rem 0;
	color: #e5dc56;
	background: linear-gradient(90deg, #dcd249 0%, #a98908 0%, #fbfbfb 100%);
	background-repeat: no-repeat;
	background-size: 100% 5px;
	background-position: bottom;
	font-weight: bold;
}*/
.theater .box,.ticket .box,.cast .box,.schedule .box,.flyer .box,.sns .box,.teaser .box,.staff .box{
	text-align:center;
	font-family: "Hina Mincho", serif;
	font-size:2.5em;
	padding: 0.8rem 0;
/*	color: #e5dc56;*/
	color: #49719aff;
	background: linear-gradient(90deg, #07294b 0%, #07294b 0%, #49719a 100%);
	background-repeat: no-repeat;
	background-size: 100% 5px;
	background-position: bottom;
	font-weight: bold;
	margin-bottom: 2rem;
	margin-top:40px;
}
.comment{
	color:#ffffff;
	line-height: 1.5em;
	font-size:0.8em;
	background-color:#4f4f4f;
	border-radius: 10px;
	padding:10px;
}
.text_s{
	font-size:0.8em;
}
.text_ss {
  font-size: 0.6em;
  line-height: 0.5em;
}


.caption{
/*	font-family: "Hina Mincho", serif;*/
	font-family: "M PLUS 1p", sans-serif;
	text-align:center;
	margin-top:100px;
	margin-bottom:80px;
}
.caption_l_text{
	letter-spacing: 0.1em;
	font-weight: 900;
	font-size:3em;
}
.caption_s_text{
letter-spacing: 0.05em;
	font-weight: 600;
	font-size:1.5em;
    	margin-top: 20px;
}
.schedule_text{
font-weight: 600;
    line-height: 1.2em;
    font-family: serif;
    font-size: 1.8em;
}



.modalArea {
  display: none;
  position: fixed;
  z-index: 99;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

}

.modalBg {
  width: 100%;
  height: 100%;
  background-color: rgba(30,30,30,0.9);
}
.modalWrapper h1{
	font-weight: 800;
	font-size: 1.3em;
}
.modalWrapper {
line-height: 2em;
  font-size: 0.9em;
  position: absolute;
  top: 50%;
  left: 50%;
  transform:translate(-50%,-50%);
  width: 70%;
  max-width: 500px;
  padding: 35px 45px;
  background-color: #4f4f4f;

}
.modalContents{
	color:#ffffff;
	overflow: auto;
	padding-right: 5px;
	padding-left: 5px;
	height: auto;
	max-height: 70vh;
}
.closeModal {
	color:#ffffff;
	position: absolute;
	top: 0.5rem;
	right: 1rem;
	cursor: pointer;
}

.preModal button{
    padding-left: 2px;
border-radius:5px;
border: solid 1px;
color:#ffffff;
background-color: #4f4f4f;
	font-size: 0.8em;
  position: absolute;
  top: 50%;
  left: 1em;
  cursor: pointer;
}
.nextModal button{
padding-right: 4px;
color:#ffffff;
border-radius:5px;
border: solid 1px;
background-color: #4f4f4f;
	font-size: 0.8em;
  position: absolute;
  top: 50%;
  right: 1em;
  cursor: pointer;
}

.come_btn  {
  font-family: "Noto Sans JP", sans-serif;
padding-left: 10px;
  padding-right: 10px;
  padding-top: 3px;
  padding-bottom: 3px;
color:#000000;
  background-color: #e5dc56;
  border: 1px solid #282828;
  border-radius: 2px;
  cursor: pointer;
  position: relative;
  top: 35px;
  left: 50%;
  transform:translate(-50%,-50%);
}
.ticket_item{
	padding:10px;
	background-color:#49719a;
	border-radius:5px;
	display: flex;
	margin-bottom:15px;
}
.ticket_name{
	color:#ffffff;
	background-color: #e20606;
	height:100%;
	display: grid;
	place-items: center;
	font-weight: 800;
	width: 160px;
	text-align: center;
}
.ticket_day{
	color:#ffffff;
	margin-left:5px;
	font-weight: 800;
	line-height: 2em;
}
.ticket_url{
	color:#ffffff;
	margin-top:15px;
	margin-left: 5px;
	margin-bottom: 5px;
	font-weight: 800;
	word-break: break-all;
	line-height: 2em;
}
.ticket_bg{
	padding:5px;
	background-color:#282828;
	border-radius:5px;
	color:#ffffff;
	margin:5px;
	font-weight: 800;
}
.ticket_item::after {
	content:'';
	display: block; 
	clear:both;
}
.teaser_video_group{
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
	width:100%;
}
.teaser_video_item{
	width:40%;
	margin-right:20px;
}
.teaser_video_item img{
width:100%;
}
.theater_item_group{
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}
.theater_item{
	color: #ffffff;
	padding: 15px;
	margin-top: 20px;
	margin-right: 20px;
	background-color: #49719a;
	width:40%;
}
.theater_item_name{
	font-weight:800;
}
.theater_item iframe{
	width:100%;
	height:300px;
}
.sns_item {
    background-color: #49719a;
    color: #f2f256;
    padding: 10px;
    margin: 10px;
    width: 290px;
    height: 90px;
    border: 1px solid #49719a;
    position: relative;
}

.schedule{
	margin-top:0px;
}
.schedule table{
	border-collapse: separate;
	border-spacing: 1px;
	margin-top:20px;
}
.schedule .time{
	color:#ffffff;
	font-size: 0.8em;
	background-color: #07294b;
	padding: 5px;
}
.schedule .day{
	color:#ffffff;
	font-size: 0.8em;
	background-color: #07294b;
	padding: 5px;
	text-align: center;
}
.schedule .item{
	color:#ffffff;
	text-align: center;
	font-size: 1.2em;
	background-color: #49719a;
	padding: 5px;
}
.theater_text{
	font-size:1.3em;
}

.script_direction{
	font-size:1.2em;
	margin-top:20px;
}
.flyer{
	text-align:center;
}
.teaser{
	text-align:center;
}

.theater{
	margin-top: 40px;
}
.footer{
	margin-top:200px;
	padding-bottom:20px;
	font-size: 12px;
	text-align:center;
}
.br-sp {
	display: none;
}

/*
#07294bff
#49719aff
*/