/*＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊*/
/*基本設定（滅多に変更しない）*/
/*＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊*/
body {
   background-image: url("../img/back.png");
   background-repeat:repeat;
   color:#fff;
	font-family: 'Roboto','Noto Sans JP',游ゴシック体, 'Yu Gothic', YuGothic, 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
	animation: bodyFadeIn 2s ease 0s 1 normal;
	-webkit-animation: bodyFadeIn 2s ease 0s 1 normal;
	letter-spacing:1.2px;
  }
  @keyframes bodyFadeIn {
	0% {opacity: 0}
	100% {opacity: 1}
}
 
@-webkit-keyframes bodyFadeIn {
	0% {opacity: 0}
	100% {opacity: 1}
}

/*見出し系
---------------------------------------------------------------------------*/
.midashi{
	text-align: center;
	position: relative;
	margin: 1em 0 1em 0;
	font-size:2.8em;
	font-weight:700;
	color:#49D99A;
	font-family: 'Expletus Sans';
	letter-spacing:5px;
}


@media screen and (min-width: 769px){

a {
  color: #49D99A;
  transition: 0.3s;
}

a:hover {
  color: #fff;
  transition: 0.3s;
  text-decoration: underline;
}

::selection {
    background: #F7EBE3;
    }
    
.pcnone{
	display:none;
}

/*スマホで見ると綺麗に改行されているように見えるシステム*/
.clear {
  display: none;
}
.sp{
    display:none;
}

/*フェードインの処理*/
.fadein {
    opacity : 0;
    transform : translate(0, 100px);
    transition : all 800ms;
    }
 
/* 画面内に入った状態 */
.fadein.scrollin {
    opacity : 1;
    transform : translate(0, 0);
    }

/*＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊*/
/*主なdiv設定（必要に応じて変更するところ）*/
/*＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊*/

/*メニュー周辺*/
#menu_box {
	z-index: 11;
	height: 70px;
	font-size: 18px;
	text-align: center;
	border-bottom:1px solid #B0B1B1;
	width: 100%;
	box-shadow: 0px 3px 15px rgba(0,0,0,0.2);
	font-weight: 900;
	color:#49D99A;
	background-color: rgba(0,0,0,0.7);
	letter-spacing:3px;
}

#menu_box  a{
	position: relative;
	display: inline-block;
	text-decoration: none;
	color:#49D99A;
}
#menu_box a::after {
	position: absolute;
	bottom: -1px;
	left: 0;
	content: '';
	width: 100%;
	height: 2px;
	background:#49D99A;
	transform: scale(0, 1);
	transform-origin: center top;
	transition: transform .3s;
}

#menu_box a:hover::after {
	transform: scale(1, 1);
}
	
nav ul li {
  display: inline-block;
  margin: 20px 15px;
  font-weight: 900;
}

.sla {
    font-size:12px;
}

.navToggle {
  display: none;
}

#manu{
	display:none;
}
	
/*メニューオンマウスで変化*/
	
	
. {
    background: url("/img/btn_sample_out.png") no-repeat; /* ロールオーバー時のチラつき防止 */
}


/*追従メニューとトップへ戻るボタンの設定*/
  .fixed {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
  }

  #page-top {
      background:#373635;
      position: fixed;
       z-index: 10;
      bottom: 20px;
      right: 0px;
      width: 65px;
  }

  #page-top a {
      text-decoration: none;
      padding: 20px 0;
      display: block;
  }

  #page-top img {
    width: 70px;
  }
  
  #page-top a:hover img {
  opacity: 0.5;   /*透明度の指定*/
  transition: 0.3s;  
}

.clearfix {
    margin: 0 auto;
  }

.top {
	width: 100%;
	margin: 0;
	text-align: center;
	animation: bodyFadeIn 2s ease 0s 1 normal;
	-webkit-animation: bodyFadeIn 2s ease 0s 1 normal;
}
.top img{
	margin:0;
	width:100%;
	height: auto;
	filter:drop-shadow(0 0 50px rgba(0,0,0,1));
}

.top-wrap{
	display:flex;
	width:100%;
}    

.top-left{
	float:left;
	width:55%;
	margin:0 auto;
}

.top-left img{
	width:100%;
}

.top-right{
	width:45%;
	position: relative;
}

.top-right img{
	width:100%;
}

.cou-img{
	position: absolute;
	width:70%;
	top: 13%;
    left: 14%;
    margin-right: -50%;
    transform: translate(-50%, -50%) 
     max-width:350px;
}	
.cou-img a:hover{
	opacity:.8;
}	

.img-wrap {
  overflow: hidden;
  position: relative;
}

.img-wrap:before {
  animation: img-wrap 2s cubic-bezier(.4, 0, .2, 1) forwards;
  background-image: url("../img/back.png");
  bottom: 0;
  content: '';
  left: 0;
  pointer-events: none;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 1;
}

@keyframes img-wrap {
  100% {
    transform: translateY(100%);
  }
}

/*見出し系
---------------------------------------------------------------------------*/

hr{
	margin:100px 0;
}
  
.box1{
    width:80%;
    padding: 50px 0;
    margin: 0 auto;
}



/*お知らせ周辺*/
#news {
	width: 90%;
	margin: 0 auto;
}
.newsmidashi {
  height:130px;
  margin: 0 ;
  text-align: center;
  font-size:44px;
}

.newsList {
	padding:50px;
	list-style: none;
	background-color: rgba(0,0,0,0.4);
	border:1px solid #B0B1B1;
}

.newsList li {
	border-bottom: 1px dotted #B0B1B1;
}

.newsList li p{
  margin:10px 5px 20px 30px;
  color:#fff;
  font-size:14px;
}

.date {
  color:#49D99A;
  display:block;
  font-weight:bold;
  margin-top:15px;
 }


/*あらすじ周辺*/
.arasuji {
	width: 80%;
	font-size: 16px;
	margin: 0 auto;
	text-align: center;
	line-height:2.2em;
}

.arasujimidashi {
	text-align: center;
	font-size:30px;
  }
  
.arasujinaiyou {
	text-align: center;
	font-size:18px;
	line-height:2;
}


	
/*キャスト周辺*/
#cast {
  margin-bottom:100px;
}


#staff p{
	font-size:13px;
	text-align:center;
	line-height:25px;
}

.oya {
  display: flex;
  justify-content: center;
}

.castList {
	width:20%;
	max-width:200px;
	text-align:center;
	margin:30px 20px;
}

.castName {
    text-align: center;
    font-size: 24px;
    font-weight:bold;
    margin:0 0 25px 0;
    letter-spacing:2.5px;
}
.charaName {
    text-align: center;
  margin:0;
  font-size: 12px;
}

.castList a img {
	width:100%;
  transition: 0.3s;   /*ゆっくりホバーするための指定（出る時）*/
}

.castList a:hover img {
  opacity: 0.5;   /*透明度の指定*/
  transition: 0.3s;   /*ゆっくりホバーするための指定（入る時）*/
}

.hoka {
   width: 100%;
  text-align: center;
  font-size: 16px;
}

.hoka img{ 
 width: 250px ;
 height; auto ;
  text-align: center;

}


/*公演日程周辺*/
#schedule {
	margin: 0 auto;
	margin-top: -20px;
	padding-top: 20px;
}

#schedule .naiyou{
	font-size:16px;
	line-height:30px;
	margin:50px 0 50px 20px;
}

#schedule .naiyou::before{
	content: '■';
	color:#49d99a;
	margin-left:-20px;
}

.scheBig{
	font-weight:bold;
	font-size:1.4em;
}

table.sche{
	border-collapse:collapse;
	background:rgba(0,0,0,0.4);
	width:100%;
	padding:15px 0;
	text-align:center;
	border-top:3px solid #515B57;
	border-bottom:3px solid #515B57;
	margin:20px 0;
}

table.sche tr{
}

table.sche th{
	padding:15px 0;
	border-top:1px dotted #515B57;
	background:rgba(50,100,90,0.4);
	font-weight:lighter;
}

table.sche td{
	border-top:1px dotted #515B57;
	padding:0 5px;
}

.hoshi::before{
	content:"●";
	font-size:14px;
}

.hoshi2::before{
	content:"★";
	font-size:14px;
}

.day{
	padding-top:10px !important;
}

.week{
	border-style:none !important;
	padding-bottom:10px !important;
}

.sat{
	color:#4D80C3;
}

.sun{
	color:#E35C63;
}

/*チケット情報周辺*/
  #ticket {
    width: 80%;
    margin: 0 auto;
    margin-top: -20px;
    padding-top: 20px;
}

.ticBox{
	background:rgba(0,0,0,0.4);
	border:1px solid #B0B1B1;
	padding:10px 50px;
	font-size:15px;
}

#ticket .naiyou{
	margin-left:40px;
}

#ticket .naiyou::before{
	content: '■';
	color:#49d99a;
	margin:0 5px 0 -20px;
}

#ticket .name{
	color:#49d99a;
	font-size:1.5em;
	font-weight:bold;
}

.senkou{
	border-bottom:1px dotted #B0B1B1;
	padding:40px 0;
}

.senkouLast{
	border-style:none;
	padding:40px 0;
}

#ticket .btn{
	margin:20px 0 20px 20px;
	display:inline-block;
	font-size:13px;
}

#ticket .btn a{
	padding:15px 30px;
	background:#49d99a;
	color:#1E1E1E;
	transition:.5s;
	text-decoration:none;
	border:2px solid #49d99a;
}

#ticket .btn a:hover{
	color:#49d99a;
	background:#1E1E1E;
	transition:.5s;
	border:2px solid #49d99a;
}

.seat{
	font-size:20px;
	font-weight:bold;
}

.seatName{
	background:#b89928;
	padding:8px;
	font-size:14px;
	color:#fff;
	font-weight:normal;
	margin-right:10px;
}

.seatComment{
	font-weight:normal;
	font-size:13px;
	margin-left:10px;
}

.ticket-content {
	margin:0 0 0 15px;
}

.ticket-content::before{
	content: '※';
	margin:0 0 0 -20px;
}

/*公演について周辺*/

#coution{
	font-size:14px;
}

#coution .naiyou{
	margin-left:20px;
	color:#49d99a;
	font-weight:bold;
}

#coution .naiyou::before{
	content: '<<';
	color:#49d99a;
	margin:0 5px 0 -20px;
}

#coution .naiyou::after{
	content: '>>';
	color:#49d99a;
	margin-left:5px;
}

#coution .p{
	margin:0 0 0 20px;
}

#coution .p::before{
	content: '●';
	margin:0 5px 0 -20px;
}

.cou-midashi {
	position: relative;
	padding: 1rem 2rem;
	border: 4px solid #b89928;
	text-align:center;
	font-size:16px;
}

.cou-midashi:before {
	position: absolute;
	top: 4px;
	left: 4px;
	width: calc(100% - 12px);
	height: calc(100% - 12px);
	content: '';
	border: 2px solid #b89928;
}
 
/*Goods周辺*/

.parent{
	display:flex;
	margin-bottom:20px;
}

.child{
	float:left;
	width:31%;
	margin-right:2%;
	vertical-align:top;
}

.child img{
	width:100%;
}


.child2{
	float:left;
	width:23%;
	margin-right:2%;
	vertical-align:top;
}

.child2 img{
	width:100%;
}

.g-midashi{
	font-weight:bold;
	color:#b89928;
	font-size:16px;
	margin:0 0 10px 5px;
}

.g-price{
	font-weight:bold;
	color:#808080;
	font-size:15px;
	margin:0 auto;
}

.g-content{
	border-top:solid 1px #fff;
	font-size:13px;
	margin-top:5px;
	padding-top:5px;
}

.goodsList a img {
    transition: 0.3s;   /*ゆっくりホバーするための指定（出る時）*/
  }

  .goodsList a:hover img {
    opacity: 0.5;   /*透明度の指定*/
    transition: 0.3s;   /*ゆっくりホバーするための指定（入る時）*/
  }



  /*Q＆A周辺*/
  #qa {
     margin: 0 auto;
    text-align: left;
  }

  dl.accordion {
    margin:0 auto;
    padding:0 40px;
  }

  dl.accordion dt {
      border-bottom: 2px dotted #999;
      height:40px;
      text-indent:10px;
      line-height:40px;
      cursor:pointer;
  }

  dl.accordion dd {
    padding:10px 40px 10px 10px;
    line-height:1.5;
    display:none;
  }
  

/*ヘッダーバナー周辺*/

.copy {
	background-color: rgba(0,0,0,0.4);
	border-top:1px solid #B0B1B1;
	padding:40px 0;
	color:#fff;
	text-align:center;
	font-size:12px;
	line-height:25px;
}

.banner p {
      background: #B4B7B9;
  color: #fff;
  height: 70px;
  width: auto;
}

.banner a img {
  transition: 0.3s;   /*ゆっくりホバーするための指定（出る時）*/
  height: 50px;
  width: auto;
  margin: 10px;
}

.banner a:hover img {
  opacity: 0.5;   /*透明度の指定*/
  transition: 0.3s;   /*ゆっくりホバーするための指定（入る時）*/
}

}