/* Reset style */
* {
  font-family:  "游ゴシック体", "YuGothic","游ゴシック Medium", "Yu Gothic Medium", sans-serif;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  list-style: none;
  text-decoration: none;
  }


body{
    background: #fffff9;
    background-image: url(img/back1.jpg); /* 画像 */
    background-size: cover;               /* 全画面 */
    background-position: center center;
  }

/*==================================================
 メニューボタン
===================================*/


/*==================================================
 ヘッダー
===================================*/
.header_bg {
  color: #fafafa;
  background: #fffff9;
  width: 100%;
  height: 58px;
  position: fixed; /* ウィンドウを基準に画面に固定 */
  top: 0; /* 上下の固定位置を上から0pxにする */
  left: 0; /* 左右の固定位置を左から0pxにする */
  z-index: 1000;
  display: flex; 
}
img.titlesene {
  height: 58px;
  margin-right: auto;
  display: inline-block;
  }
a.titlesene {
  margin-right: auto;
  }
.header_contents {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: flex-end;
  left: 0;
}
.header_nav_lists {
  display: none;
}
.ue {
  height: 70px;
  background: #1F8AC0;
}

/*===================================
 ナビゲーションドロップダウンのためのCSS
  =========================================*/

/*==ナビゲーション全体の設定*/
nav{
	background:#104C91;
	color:#fff;
	text-align: center;
  white-space: nowrap
  
}
/*ナビゲーションを横並びに*/
nav ul{
	list-style: none;
	display: flex;
	justify-content: center;
  font-size: 15px;
  
}
/*2階層目以降は横並びにしない*/
nav ul ul{
	display: block;
}

/*下の階層のulや矢印の基点にするためliにrelativeを指定*/
nav ul li{
	position: relative;
}

/*ナビゲーションのリンク設定*/
nav ul li a{
	display: block;
	text-decoration: none;
	color: #fffff9;
	padding:15px 10px;
	transition:all .3s;
  border: 2px double #1F8AC0;
}

nav ul li li a{
	padding:10px 30px;
}

nav ul li a:hover{
	color:#fffff9;	
}

/*==矢印の設定*/

/*2階層目を持つliの矢印の設定*/
nav ul li.has-child::before{
	content:'';
	position: absolute;
	left:15px;
	top:25px;
	width:6px;
	height:6px;
	border-top: 2px solid #999;
    border-right:2px solid #999;
    transform: rotate(135deg);
}

/*3階層目を持つliの矢印の設定*/
nav ul ul li.has-child::before{
	content:'';
	position: absolute;
	left:6px;
	top:17px;
	width:6px;
	height:6px;
    border-top: 2px solid #fff;
    border-right:2px solid #fff;
    transform: rotate(45deg);
}

/*== 2・3階層目の共通設定 */

/*下の階層を持っているulの指定*/
nav li.has-child ul{
    /*絶対配置で位置を指定*/
	position: absolute;
	left:0;
	top:62px;
	z-index: 4;
    /*形状を指定*/
	background:#456fa0;
	width:160px;
    /*はじめは非表示*/
	visibility: hidden;
	opacity: 0;
    /*アニメーション設定*/
	transition: all .3s;
}

/*hoverしたら表示*/
nav li.has-child:hover > ul,
nav li.has-child ul li:hover > ul,
nav li.has-child:active > ul,
nav li.has-child ul li:active > ul{
  visibility: visible;
  opacity: 1;
}

/*ナビゲーションaタグの形状*/
nav li.has-child ul li a{
	color: #fff;
	border-bottom:solid 1px rgba(255,255,255,0.6);
}

nav li.has-child ul li:last-child a{
	border-bottom:none;
}

nav li.has-child ul li a:hover,
nav li.has-child ul li a:active{
	background:#104C91;
}


/*==3階層目*/

/*3階層目の位置*/
nav li.has-child ul ul{
	top:0;
	left:182px;
	background:#66ADF5;
}

nav li.has-child ul ul li a:hover,
nav li.has-child ul ul li a:active{
	background:#448ED3;
}


/*==================================================
スライダーのためのcss
===================================*/
.slidercover{
  border-top: 70px solid #1F8AC0;
}
.slider {/*横幅95%で左右に余白を持たせて中央寄せ*/
  width:95%;
  margin:0 auto;
}

.slider img {
  width:35vw;/*スライダー内の画像を35vwにしてレスポンシブ化*/
  height:auto;
}

.slider .slick-slide {
transform: scale(0.7);/*左右の画像のサイズを70%に*/
transition: all .5s;/*拡大や透過のアニメーションを0.5秒で行う*/
opacity: 0.4;/*透過40%*/
}

.slider .slick-slide.slick-center{
transform: scale(1);/*中央の画像のサイズだけ等倍に*/
opacity: 1;/*透過なし*/
}


/*矢印の設定*/

/*戻る、次へ矢印の位置*/
.slick-prev, 
.slick-next {
  position: absolute;/*絶対配置にする*/
  top: 42%;
  cursor: pointer;/*マウスカーソルを指マークに*/
  outline: none;/*クリックをしたら出てくる枠線を消す*/
  border-top: 2px solid #104C91;/*矢印の色*/
  border-right: 2px solid #104C91;/*矢印の色*/
  height: 15px;
  width: 15px;
}

.slick-prev {/*戻る矢印の位置と形状*/
  left: -1.5%;
  transform: rotate(-135deg);
}

.slick-next {/*次へ矢印の位置と形状*/
  right: -1.5%;
  transform: rotate(45deg);
}

/*ドットナビゲーションの設定*/

.slick-dots {
  text-align:center;
margin:20px 0 0 0;
}

.slick-dots li {
  display:inline-block;
margin:0 5px;
}

.slick-dots button {
  color: transparent;
  outline: none;
  width:10px;/*ドットボタンのサイズ*/
  height:10px;/*ドットボタンのサイズ*/
  display:block;
  border-radius:50%;
  background:#1F8AC0;/*ドットボタンの色*/
}

.slick-dots .slick-active button{
  background:#104C91;/*ドットボタンの現在地表示の色*/
}

/*===================
公演
========================*/
h1 {
  font-size: 35px;
  font-weight: bold; 
  line-height: 0.7em;
  color: #06182d;
}
h2 {
  font-size: 30px;
  font-weight: bold; 
}
h3 {
  font-size: 16px;
  font-weight:  normal; }


.kouen { 
   color: #06182d;
  width: 100%;
  border-style: none;
  text-align: center;
  margin-right: auto;
  margin-left: auto;
  transition-duration: 0.5s;
 }


 .kouen img {
  width: 16vw;
  max-width: 450px;
  text-align: center;
  cursor: pointer;
  
   }

   .pc { display: block !important; }
   .sp { display: none !important; }

   .kouen img:hover {
    opacity: 0.6;
    transition-duration: 0.3s;
  }
   .kouen ul {
    display: flex;
    list-style: none;
    justify-content: space-evenly;
  }

  .kouen li{
    padding: 5px;
    display: inline;
  }

  
.tiho{ 
  color: #06182d;
 width: 100%;
 border-style: none;
 text-align: center;
 margin-right: auto;
 margin-left: auto;
 transition-duration: 0.5s;
}


.tiho img {
 width: 16vw;
 max-width: 450px;
 text-align: center;
 cursor: pointer;
 
  }

  .tiho img:hover {
   opacity: 0.6;
   transition-duration: 0.3s;
 }
  .tiho ul {
   display: flex;
 }

 .tiho li{
   margin-right: auto;
   margin-left: auto;
   display: inline;
 }

  .tokyo{
    font-size: 20px;
    background-image: repeating-linear-gradient(135deg, #232f3e, #232f3e 50px, #37475a 50px, #37475a 100px);
    background-repeat: no-repeat;
    background-size: cover;
    border-bottom: 10px solid #eec9af;
    border-radius:30px;
    color: #febd69;
    padding:  10px 50px 10px 120px;
  }
  .max1000 { width: 95%; max-width: 1000px; margin: auto; }

  .left {
    float: left;
  }
  .left img {
    height: auto;
    width: 30vw;
    max-width: 250px;
 }

.clearfix:after {
	content: "";
	display: block;
	clear: both;
}
 
.clearfix:before {
 content: "";
	display: block;
	clear: both;
}
 
.clearfix {
	display: block;
}

/*===================
動画
========================*/
.video {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
}

.video iframe {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
}
/*===================
ボタン
========================*/
  .button1 {
    font-size: 20px;
    display: block;
    text-align: center;
    text-decoration: none;
    margin: 20px auto 20px;
    padding: 1rem 4rem;
    font-weight: bold;
    border: 2px solid #104C91;
    color: #104C91;
    border-radius: 100vh;
    transition: 0.5s;
    padding: 10px;
  }

  .button1:hover {
    color: #fff;
    background: #104C91;
  }

  .button2 {
    font-size: 20px;
    text-align: center;
    text-decoration: none;
    margin: 20px;
    padding: 1rem 4rem;
    font-weight: bold;
    border: 2px solid #1F8AC0;
    color: #1F8AC0;
    border-radius: 100vh;
    transition: 0.5s;
    padding: 10px;
  }

  .button2:hover {
    color: #fff;
    background: #1F8AC0;
  }
 
.button3{
  /*アニメーションの起点とするためrelativeを指定*/
  position: relative;
overflow: hidden;
  /*ボタンの形状*/
text-decoration: none;
display: inline-block;
  border: 2px solid #104C91;/* ボーダーの色と太さ */
  border-radius: 100vh;
  padding: 10px 30px;
  text-align: center;
  outline: none;
  /*アニメーションの指定*/   
  transition: ease .2s;
  background: #104C91;
  font-size: 50px;
  margin: 20px;
}

/*ボタン内spanの形状*/
.button3 span {
position: relative;
z-index: 3;/*z-indexの数値をあげて文字を背景よりも手前に表示*/
color:rgb(255, 255, 255);
}

.button3:hover span{
color:#104C91;
}

/*== 背景が流れる（左から右） */
.bgleft:before {
content: '';
  /*絶対配置で位置を指定*/
position: absolute;
top: 0;
left: 0;
z-index: 2;
  /*色や形状*/
background:#EFC9AF;/*背景色*/
width: 100%;
height: 100%;
  /*アニメーション*/
transition: transform .6s cubic-bezier(0.8, 0, 0.2, 1) 0s;
transform: scale(0, 1);
transform-origin: right top;
}

/*hoverした際の形状*/
.bgleft:hover:before{
transform-origin:left top;
transform:scale(1, 1);
}

img.youseijo {
  width: 17%;
  margin: 0 2px 0 2px;

  }

hr {
    height: 2px;
    background:  rgb(224, 242, 255);
    background-image: -webkit-linear-gradient(left, rgb(224, 242, 255), rgb(0, 42, 255),rgb(224, 242, 255));
    background-image: -moz-linear-gradient(left, rgb(224, 242, 255), rgb(0, 42, 255),rgb(224, 242, 255));
    background-image: -ms-linear-gradient(left, rgb(224, 242, 255), rgb(0, 42, 255),rgb(224, 242, 255));
    background-image: -o-linear-gradient(left, rgb(224, 242, 255), rgb(0, 42, 255),rgb(224, 242, 255));
  }
/*==================================================
news
===================================*/
.news{
  background-color: rgba(247, 247, 247, 0.3);
  padding: 7px;
}

  news-list{
    list-style: none outside;
    margin: 0;
    padding: 0;
  }
  .news-list .item a{
    display: flex;
    flex-wrap: wrap;
    flex-wrap: nowrap;
    text-decoration: none;
    color: #333;
    border-bottom: 1px solid #CCC;
    padding: 20px 50px;
  }
  .news-list .item:first-child a{
    border-top: 1px solid #CCC;
  }
  .news-list .item .date{
    margin: 0;
    min-width: 120px;
    font-size: 16px;
    color:  #104C91;
    padding: 0 20px 0 0;
  }
  .news-list .item .title2{
    margin: 0;
    width: 100%;
  }
  .news-list .item a:hover .title2{
    text-decoration: underline;
  }

  /* 装飾 */
   
  *{
    box-sizing: border-box;
  }
  a{
    text-decoration: none;
  }


.naiyou {
  color: rgb(255, 255, 255);
  background-position:100% 100%;
  background-size:cover;
  padding: 20px;
  max-width: 1000px;
  margin:0 auto;
}

.syoukai {
  color: rgb(255, 255, 255);
  background-image:url(img/nomonhan2.png);
  background-repeat: no-repeat;
  background-position:100% 0%;
  background-size:cover;
  padding: 20px;
}
.info {
  border-top: 70px solid #1F8AC0;
  color: rgb(0, 0, 0);
  background-repeat: no-repeat;
  background-position:100% 100%;
  background-size:cover;
  padding: 20px;
  width: 95%;
  max-width: 1000px;
  margin:0 auto;
}
.waku{
  background: #fffff9;
  border-radius:30px;
  border:solid 5px  #104C91;
  margin: 10px;
  padding: 10px;
}


.toha {
  background:linear-gradient(transparent 70%, #1F8AC0 0%);
  font-size: 30px;
  }
  

/*==================================================
　5-2-4 MENUがCLOSEに
===================================*/

/*ボタン外側※レイアウトによってpositionや形状は適宜変更してください*/
.openbtn{
    display: none;
  }



/*=============== 
フッター 
===============*/
footer {
  font-size: 13px;
  background:#104C91;
  color:#c7e7f3;
  padding: 10px;
  border-top: 20px solid #1F8AC0;
}

footer a {
  color:#c7e7f3;
   }

footer a:hover {
    text-decoration: underline;
	}
img.footer {
  width: 40px;
  margin: 15px;
  }
  .footer05 {
    color: #c7e7f3;
   }
   .footer05 a {
    color: #dfdbff;
    text-decoration: none;
   }
   .footer05 li a:hover {
    text-decoration: underline;
   }
   .footer05 .wrap {

    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
   }
   .footer05 .wrap h3 {
    margin: 0 0 10px 0;
    padding: 10px;
    border-bottom: 1px #c4c4c4 solid;
   }
   .footer05 .wrap p {
    margin: 0;
    padding: 0 0 20px 0;
   }
   .footer05 .wrap .box {
    width: 22%;
    flex-wrap: wrap;
   }
   .footer05 .wrap .box ul {
    margin: 0;
    padding: 0 0 20px 0;
    list-style: none;
   }
   .footer05 .wrap .copyright {
    width: 100%;
    padding: 20px 0 0 0;
   }
/*========= ナビゲーションのためのCSS ===============*/

#g-nav{
  position: static;
  transform: initial;
  background-color: inherit;
  height: inherit;
  display: flex;
  justify-content: end;
  width: 80%;
  
}

/*アクティブクラスがついたら位置を0に*/
#g-nav.panelactive{
  right: 0;
}




/*アコーディオン全体　これはつかってない*/
.accordion-area{
  list-style: none;
  width: 96%;
  max-width: 900px;
  margin:0 auto;

}

.accordion-area li{
  margin: 10px 0;
  
}

.accordion-area section {
border: 3px solid rgb(10, 0, 49);
}


/*ナビゲーションの縦スクロール*/
#g-nav.panelactive #g-nav-list{
  /*ナビの数が増えた場合縦スクロール*/
  position: fixed;
  z-index: 999; 
  width: 100%;
  height: 100vh;/*表示する高さ*/

  -webkit-overflow-scrolling: touch;
  
}


/*========= ローディング ===============*/
@keyframes fadeOut {\
    from {
        opacity: 1;
    }
    
    to {
        display: none;
        opacity: 0;
        z-index: -1;
    }
}

/*========= 劇団員紹介 ===============*/

.gekidanin { 
 width: 75%;
 border-style: none;
 text-align: center;
 margin-right: auto;
 margin-left: auto;
 transition-duration: 0.5s;
}

.hito {
  float: left;
  height: 25vw;
  max-height: 320px;
  cursor: pointer;
  margin: 10px;
  }

.gekidanin span {
  background:linear-gradient(transparent 60%, #a7d9dd 60%);
   
  }

table {
  margin-right:auto; margin-left:auto;
 }

table th,td{
  text-align: left;
vertical-align: top;
padding: 1px;

  }

.butai {
    width: 25vw;
    max-width: 320px;
    cursor: pointer;
    margin: 3px;
    }

ul {
list-style:none;
   }
     
span.title {
 float:left;
  }
      
span.dan2 {
 display: block;
 margin-left: 110px;
   }