@charset "UTF-8";
html,body{margin:0;padding:0;

}

img {display: block;
	margin: auto
    }

body {
    color: black;
    font-size: 20px;
	}



.shutter{
  position:fixed;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background-color:#1e1e1e;
  z-index:9999;
}
.shutter::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  margin: auto;
  background-color: #fff;
  width: 0;
  height: 1px;
}
.shutter {
  -webkit-animation: byeShutter 2.6s forwards;
          animation: byeShutter 2.6s forwards;
}
.shutter::before {
  -webkit-animation: shutterOpen 2.6s forwards;
          animation: shutterOpen 2.6s forwards;
}
.content {
  -webkit-animation: contentScale 2.6s forwards;
          animation: contentScale 2.6s forwards;
}
@keyframes byeShutter {
  70% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    display: none;
    z-index: -1;
  }
}
@keyframes shutterOpen {
  0% {
    width: 0;
    height: 1px;
  }
  50% {
    width: 100%;
    height: 1px;
  }
  90% {
    width: 100%;
    height: 100%;
  }
  100% {
    width: 100%;
    height: 100%;
  }
}
@keyframes contentScale {
  70% {
    -webkit-transform: perspective(800px) scale(0.9) rotateX(15deg);
            transform: perspective(800px) scale(0.9) rotateX(15deg);
  }
  100% {
    -webkit-transform: perspective(800px) scale(1) rotateX(0);
            transform: perspective(800px) scale(1) rotateX(0);
  }
}


.all{	background-color: rgba(25,160,250,0.7);}

.takuma{text-align: center}


.main{text-align: center;
	font-family: 'Yu Mincho Light','YuMincho','Yu Mincho','游明朝体','ヒラギノ明朝 ProN','Hiragino Mincho ProN','ＭＳ Ｐ明朝','MS PMincho','游明朝体+36ポかな','YuMincho +36p Kana',sans-serif;
	font-size: 120%;
	margin-bottom:10%;
	padding-top: 5%
	
}

.title{font-size:140%;
	padding-top: 2%;
}

.top{margin: 0%;
	padding-top: 5%;
	padding-bottom: 10%;
font-family: 'Hiragino Kaku Gothic ProN','ヒラギノ角ゴ ProN W3',YuGothic,'Yu Gothic','Yu Mincho Light','YuMincho','Yu Mincho','游明朝体',sans-serif;}


/*動かすやつ*/
.fade{
  text-align: center;
  opacity : 0;
  transition: opacity 3s;
}
 
.fade.view{
  opacity: 1;
}


.fade2{
  text-align: center;
  opacity : 0;
  transition: opacity 3s;
}
 
.fade2.view{
  opacity: 1;
}


.top1{clear: both}


.nitizi{text-align: center;
}

.tirasi img{padding-top:5%;
	padding-bottom: 5%;
	max-width: 80%;
	display: block;
	margin: auto


}
	
.dai{font-size:165%;
	padding-left: 3%;
	font-family: 'Copperplate','Impact','Plantagenet Cherokee','Script',sans-serif;
	padding-bottom: 3%;
	text-align: left
}

.date{padding-right:3%;
	text-align: right
}

.date1{font-size: 120%;
	padding-bottom: 4%
}

.date2{
	font-size: 80%
}



.mozi{padding-left: 3%;
	text-align: right}

.kome{font-size: 75%;
text-align: right;
	padding-right: 2%
}

.kome a{color: darkgreen}

.yoyaku{font-size: 95%}

.top1{
	background-color: rgba(25,160,250,0.7);
	padding-top: 5%;
	padding-bottom: 10%;}

.cast{font-size: 130%;
	color: #333;
	text-align: center;
	font-family: 'Yu Mincho Light','YuMincho','Yu Mincho','游明朝体','ヒラギノ明朝 ProN','Hiragino Mincho ProN','klee','游明朝体+36ポかな','YuMincho +36p Kana',sans-serif;
	position: relative;
	display: inline-block;
	  padding: 0 55px;
}

.cast:before,.cast:after{
	content: '';
  position: absolute;
  top: 50%;
  display: inline-block;
  width: 45px;
  height: 2px;
  border-top: solid 1px black;
  border-bottom: solid 1px black;

}

.cast:before {
  left:0;
}
.cast:after {
  right:0;
}
.c{text-align: center}

.top1{font-family: 'Yu Mincho Light','YuMincho','Yu Mincho','游明朝体','ヒラギノ明朝 ProN','Hiragino Mincho ProN','klee','游明朝体+36ポかな','YuMincho +36p Kana',sans-serif;

}


.top1 img{display: inline-block;
		width: 100%;
}
.top1 li{list-style-type: none;
	padding-bottom: 3%;
	text-align:left;
	padding-bottom: 15%;
	width: 45%;
	display: inline-block;
	padding-right: 3%;
	font-size: 90%;
	text-align: center;
}
.top1 ul{padding-left: 5%}


/*ポップアップ*/
/*popup表示させたいコンテンツのレイアウトと位置*/
#popup{
  width:100%;
  background:rgba(14,20,38,1);
  padding:4%;
  box-sizing:border-box;
  display:none;
  position:fixed;
  top:50%;
  left:50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
	font-size: 70%;
	text-align: left;
	padding: 10%
}
img{
  width:100%;
}
label{
  display:block;
}
/*ボタンの装飾*/
label span{
  display:block;
  line-height:40px;
  border-radius:4px;

}
label span:hover{
  cursor:pointer;
}
input[type="checkbox"]{
  display:none;
}
/*checkboxがチェックの状態になったらpopupを表示させる*/
input[type="checkbox"]:checked + #popup{
  display:block;
}



.close_btn {
  position: absolute;
  top: 14px;
  right: 16px;
  font-size: 30px;
  cursor: pointer;
	color: white;
	margin: 0
}



.staff{text-align: center;
	font-size: 120%
}
.s{display: inline-block;
     width:25%;
	vertical-align: top;
	padding-right: 3%
}
.su{display: inline-block;
	width: 55%}

.top3{background-color: rgba(25,160,250,0.7);
	font-family: 'Yu Mincho Light','YuMincho','Yu Mincho','游明朝体','ヒラギノ明朝 ProN','Hiragino Mincho ProN','klee','游明朝体+36ポかな','YuMincho +36p Kana',sans-serif;
}
.cre{font-size: 70%;
	padding-left: 15%;
	padding-bottom: 7%

}

.bun{color: white;
	font-size: 80%
}
.top4{font-size: 60%;
	text-align: center;
	padding:6%;
	margin-bottom: 3%;
}


/*フッター*/
footer{background-color:rgba(210,220,0,1);
	width: 100%;
	height: 200px;
	padding-top: 1%;
}
.waku ul{list-style-type: none;
		text-align: center;	
		padding: 0px;}

.waku ul li{display: inline-block;
	width: 30%;
	padding: 8px;
	margin-top: 19px;
	margin-left: 15px;
	border: solid;
	font-size: 80%;
	color:white
}

.bottom{font-size: 12px;
		margin-right: 20px;
}
.waku1 a{color: white;
		text-decoration: none
}

.mu ul{list-style-type: none;
		text-align: center;	
		padding: 0px;}
.mu ul li{display: inline-block;
	margin-bottom: 10px;
}

.mu a{color: white;
	font-size: 75%
}

@media screen and (min-width:780px){
	.main{font-size: 140%;
		padding: 0;
		text-align: 
	}
	.dai{padding-left: 9%;
		font-size: 200%;
		padding-bottom: 0
	}
	.cast{font-size: 200%}
	
	.top1 ul li img{width: 90%}
	.top1 ul li {font-size: 130%;
				padding-bottom:3%;
		}
	#popup{
  width:50%;
	padding: 5%;
	margin: 2%;
	padding-top: 0
	}
	
	.top3{font-size: 130%}
	
	footer{height: 200px}
	.waku ul li{font-size: 100%}
	.mu ul li{font-size: 120%}
}