/*＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊*/
/*基本設定（滅多に変更しない）*/
/*＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊*/
body {
	background: #fff;
	color:#232320;
	font-family:  'Zen Antique', "YuMincho", "Hiragino Mincho ProN", "Yu Mincho", "MS PMincho", serif;
	letter-spacing:1.2px;
	font-size: 14px;
	overflow-x: hidden;
  }

@media screen and (max-width: 600px) {
	a {
		color: #9B893F;
		transition: 0.3s;
	  }
	  a:hover {
		  color: #332B25;
		transition: 0.3s;
	  }
	  ::selection {
		  background: #FFFFFF;
		  color: #232320;
	  }
	  ul{
		  padding: 0;
	  }
		 
	  .spnone{
		  display:none;
	  }
	  hr{
		  margin: 80px;
		  border: none;
	  }
	  h1{
		  text-align: center;
		  margin-bottom: 50px;
	  }
	  h1 img{
		  height: 100px;
	  }
	  .box{
		  width: 90%;
		  padding: 10% 5%;
	  }
	  
	  /*フェードインの処理*/
	  .fadein {
		  opacity : 0;
		  transform : translate(0, 0px);
		  transition :1s;
		  -webkit-transform: scale(1);
				  transform: scale(1);
	  }
	  /* 画面内に入った状態 */
	  .fadein.scrollin {
		  opacity : 1.3;
		  transform : translate(0, 0);
		  transform: translateY(0);
			-webkit-transform: scale(1);
				  transform: scale(1);
		  }
	  .delay-02{
		  animation-delay: .2s;
	  }
	  .delay-04{
		  animation-delay: .4s;
	  }
	  .delay-08{
		  animation-delay: .8s;
	  }
	  .delay-12{
		  animation-delay: 1.2s;
	  }
	  .delay-16{
		  animation-delay: 1.6s;
	  }
	  /*
	  .fadein:nth-of-type(2){
		  -moz-transition-delay:0.2s;
		  -webkit-transition-delay:0.2s;
	  }
	  .fadein:nth-of-type(3){
		  -moz-transition-delay:0.4s;
		  -webkit-transition-delay:0.4s;
	  }  
	  .fadein:nth-of-type(4){
		  -moz-transition-delay:0.6s;
		  -webkit-transition-delay:0.6s;
	  }
	  */
	  
	  
	  /*TOP周辺*/
	  #top{
		  margin: 0 auto;
		  text-align: center;
		  position: relative;
	  }
	  .top-content{
		  position: absolute;
		  bottom: 5%;
		  width: 100%;
	  }
	  .top-content img:first-child{
		  width: 80%;
		  margin: 20px 0;
	  }
	  .size-sm{
		  font-size: 0.8em;
	  }
	  .size-mid{
		  font-size: 1.5em;
	  }
	  .size-lar{
		  font-size: 2.2em;
	  }
	  #top .line{
		  margin: 10px 0;
		  width: 20%;
	  }
	  .top-bottom-content{
		  position: absolute;
		  bottom: -100px;
		  z-index: 1;
	  }
	  .top-bottom-content img{
		  width: 100%;
	  }
	  .inview img {
		  opacity: 0;
		  -moz-transition: -moz-transform 0.5s linear;
		  -webkit-transition: -webkit-transform 0.5s linear;
		  -o-transition: -o-transform 0.5s linear;
		  -ms-transition: -ms-transform 0.5s linear;
		  transition: transform 0.5s linear;
		  -webkit-animation-duration: 1.5s;
		  animation-duration: 2.5s;
		  -webkit-animation-fill-mode: both;
		  animation-fill-mode: both;
		  width: 100%;
		}
		.img-blur {
		  -webkit-animation-name: imageBlur;
		  animation-name: imageBlur;
		  opacity: 1;
		  transition: .8s;
		}
		
		@-webkit-keyframes imageBlur {
		  from {
			opacity: 0;
			-webkit-filter: blur(15px);
			-moz-filter: blur(15px);
			-ms-filter: blur(15px);
			-o-filter: blur(15px);
			filter: blur(15px);
		  }
		
		  to {
			opacity: 1;
			-webkit-filter: blur(0px);
			-moz-filter: blur(0px);
			-ms-filter: blur(0px);
			-o-filter: blur(0px);
			filter: blur(0px);
		  }
		}
		@keyframes imageBlur {
		  from {
			opacity: 0;
			-webkit-filter: blur(15px);
			-moz-filter: blur(15px);
			-ms-filter: blur(15px);
			-o-filter: blur(15px);
			filter: blur(15px);
		  }
		
		  to {
			  opacity: 1;
			-webkit-filter: blur(0px);
			-moz-filter: blur(0px);
			-ms-filter: blur(0px);
			-o-filter: blur(0px);
			filter: blur(0px);
		  }
		}
.end{
	color: #9B893F;
	font-size: 15px;
	letter-spacing: 0.9px;
	line-height: 35px;
	margin-bottom:50px
}		

	  /*あらすじ*/
	  #about{
		background-image: url("../img/story_back_mobile.png");
		background-size: cover;
		font-size: 14px;
		line-height: 30px;
		position: relative;
		padding-top: 150px;
	  }
	  #about::before{
		  position: absolute;
		  top: 0;
		  left: 0;
		  content: "";
		  background-image: url("../img/story_lace_top_pc.png");
		  background-repeat:repeat-x;
		  background-size: auto 150px;
		  height: 150px;
		  width: 100%;
	  }
	  #about::after{
		  position: absolute;
		  left: 0;
		  bottom: 0;
		  content: "";
		  background-image: url("../img/story_lace_bottom_pc.png");
		  background-repeat:repeat-x;
		  background-size: auto 150px;
		  height: 150px;
		  width: 100%;
	  }
	  
	  /*CAST/STAFF*/
	  #cast{
		  background-image: url("../img/cast_staff_back_repeat_pc.png");
		  background-size: auto;
		  font-size: 16px;
		  line-height: 35px;
		  position: relative;
		  text-align: center;
		  padding-top: 100px;
	  }
	  #cast .grid-main div+div{
		padding-top: 50px;
	  }
	  #cast .grid {
		  margin: 0 auto;
		  background: #fff;
		  padding:80px 5%;
		  display: grid;
		  grid-template-columns:100% ;
		  justify-content: space-between;
		  gap: 50px 0;
	  }
	  #cast .grid1{
		margin: 0 auto;
		background: #fff;
		padding: 50px 5%;
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: 50px 5%;
	}
	#cast .grid2{
		margin: 0 auto;
		background: #fff;
		padding: 0% 5% 50px 5%;
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: 40px 5%;
	}
	#cast hr{
		width: 100%;
		display: block;
		margin: 0;
	}
	#cast .grid1 div , #cast .grid2 div{
		width: 45%;
	}
	#cast .grid img , #cast .grid1 img , #cast .grid2 img{
		width: 100%;
	}
	  .chara-name{
		  font-size: 14px;
		  color: #9B893F;
		  line-height: 20px;
	  }
	  .cast-name{
		  font-size: 20px;
		  letter-spacing: 1.8px;
	  }
	  .ensemble{
		background: #ffffff;
		padding:70px 0 10% 0;
	}
	.ensemble span{
		font-size: 20px;
		display: block;
		padding-bottom: 20px;
	}
	  #staff{
		  margin-top: 100px;
		  font-size: 14px;
	  }
	  #staff ul li{
		  display: inline-block;
	  }
	  #staff ul li+li{
		  padding-left: 15px;
	  }
	  #staff ul li strong{
		  font-size:16px
	  }
	  
	  /*SCHEDULE/TICKET*/
	  #schedule{
		  background: #faf9f5;
	  }
	  #schedule::before{
		  content: "";
		  background-image: url("../img/frame_top_mobile.png");
		  background-size: contain;
		  width: 100%;
		  height: 163px;
		  display: block;
		  margin-bottom: -50px;
		  background-position: center center;
		  background-repeat: no-repeat;
	  }
	  #schedule::after{
		  content: "";
		  background-image: url("../img/frame_bottom_mobile.png");
		  background-size: contain;
		  width: 100%;
		  height: 163px;
		  display: block;
		  background-position: center center;
		  background-repeat: no-repeat;
	  }
	  #schedule .size-mid{
		text-align: center;
		letter-spacing: 1.6px;
		margin-bottom: 50px;
		font-size: 18px;
		font-weight: bold;
	}
	  .sche{
		  text-align: center;
	  }
	  .sche img{
		  width: 100%;
	  }
	  
	  #ticket{
		  margin-top: 100px;
		  text-align: left;
		  font-size: 14px;
	  }
	  #ticket ul li{
		  display: block;
		  margin: 30px 0;
		  padding-top: 30px;
		  line-height:25px;
	  }
	  #ticket ul li:first-child{
		padding-top: 0;
	}
	  #ticket ul li+li{
		  border-top: 1px solid #CCCCCC;
	  }
	  #ticket ul li span{
		  color:#9B893F;
		  font-size: 18px;
		  display: block;
		  padding-bottom: 20px;
	  }
	  #ticket ul li a img{
		  width: 300px;
		  margin: 30px 0 10px 0;
		  transition: .3s;
	  }
	  #ticket ul li a:hover img{
		  box-shadow: 0 0 15px rgba(92,89,78,0.5);
		  transition: .3s;
	  }

/*GOODS*/
#goods{
	background-image: url("../img/cast_staff_back_repeat_pc.png");
	background-size: auto;
	font-size: 14px;
	line-height: 25px;
	position: relative;
	text-align: left;
}
#goods .goods-box{
	border-bottom:1px solid #CCCCCC;
	padding-bottom:30px;
	margin-bottom:50px;
}
#goods .goods-title{
	color: #9B893F;
	font-size: 22px;
	margin: 20px 0;
}
#goods .goods-img{
	width:100%;
	margin:15px 0;	
}
#goods .white-box{
	background: #ffffff;
	margin: 0 auto;
	width: 90%;
	background: #fff;
	padding: 10% 5%;
}
.dvd img{
	width: 49%;
}
.dvd p{
	padding: 20px 0;
}
.dvd-streaming-midashi{
	color: #9B893F;
	font-size: 26px;
	text-align: center;
	margin: 20px 0;
}
.dvd-btn{
	width: 100% !important;
}
	  
	  /*QA*/
	  #qa{
		padding-bottom: 200px;
		background: #faf9f5;
	}	  
	  dl.accordion {
		  margin:0 auto;
		  text-align: left;
		}
	  
	  dl.accordion dt {
		  border-bottom: 2px dotted #999;
		  line-height:40px;
		  cursor:pointer;
	  }
	  
	  dl.accordion dd {
		  padding:10px;
		  margin: 0;
		  line-height:1.6;
		  display:none;
	  }
	  
	  /*COUTION*/
	  .coution{
		  text-align: center;
	  }
	  .coution a img{
		  width: 300px;
		  transition: .5s;
	  }
	  .coution a img:hover{
		  opacity: .8;
		  transition: .5s;
	  }
	  .cou-midashi{
		  font-size: 20px !important;
		  font-weight: bold;
		  margin:30px 0;
	  }
	  #coution p{
		  font-size: 14px;
	  }
	  .cou-sub-midashi{
		  color: #fafafa;
		  margin:30px 0 10px 0;
	  }
	  
	  /*PAGE-TOP*/
	  .scroll-up {
		  position: absolute;
		  top: -140px;
		  right: 0px;
		  left: 0;
		  margin: 0 auto;
		  z-index: 1;
		  width: 120px;
		}
	  .scroll-up .scroll-text {
		  width: 100%;
		  position: relative;
	  }
	  .scroll-up .scroll-icon {
		  width: 100px;
		  position: absolute;
		  top: 50%;
		  left: 50%;
		  line-height: 1;
		  transform: translate(-50%, -50%);
		  
	  }
	  .scroll-icon img{
		  width: 100px;
	  }
	  .scroll-up .scroll-icon a img{
		  transition: .5s;
	  }
	  .scroll-up .scroll-icon a img:hover {
		  transform: scale(1.1);
		  transition: .5s;
	  }
	  .scroll-up .scroll-text img {
		  width: 100%;
		  animation: rotate-anime 10s linear infinite;
	  }
	  @keyframes rotate-anime {
		0%  {transform: rotate(0);}
		100%  {transform: rotate(360deg);}
	  }
	  
	  /*footer*/
	  #footer{
		  position: relative;
		  text-align: center;
		  padding: 15px 0;
		  background: #9B893F;
		  color: #fff;
		  font-size: 11px;
	  }
	  


/*メニュー+トグル周りの設定*/

nav.globalMenuSp {
    position: fixed;
    z-index: 3;
    top: 0;
    left: 0;
    color: #fff;
    text-align: left;
    transform: translateX(100%);
    transition: all 0.6s;
    width: 100%;
    opacity: 0.9;
    height:100%;
}
 
nav.globalMenuSp ul {
    background: #9B893F;
    margin: 0 auto;
    padding: 0;
    width: 100%;
    z-index: 1;
	height: 100%;
    }
 
nav.globalMenuSp ul li {
    font-size: 1.4em;
    list-style-type: none;
    padding: 20px 0 20px 20px;
    width: 100%;
}
nav.globalMenuSp ul li:first-child {
	padding-top: 50px;
}
 
nav.globalMenuSp ul li a {
    display: block;
    color: #fff;
    width: 100%;
}
 
nav.globalMenuSp.active {
    transform: translateX(30%);
}
.navToggle {
    display: block;
    position: fixed;   
    right: 8px;
    top: 8px;
    width: 42px;
    height: 51px;
    cursor: pointer;
    z-index: 10;
    text-align: center;
    background: #9B893F;
}
 
.navToggle span {
    display: block;
    position: absolute;   
    width: 30px;
    border-bottom: solid 3px #eee;
    -webkit-transition: .35s ease-in-out;
    -moz-transition: .35s ease-in-out;
    transition: .35s ease-in-out;
    left: 6px;
}
 
.navToggle span:nth-child(1) {
    top: 9px;
}
 
.navToggle span:nth-child(2) {
    top: 18px;
}
 
.navToggle span:nth-child(3) {
    top: 27px;
}
 
.navToggle span:nth-child(4) {
    border: none;
    color: #eee;
    font-size: 9px;
    font-weight: bold;
    top: 34px;
}
.navToggle.active span:nth-child(1) {
    top: 18px;
    left: 6px;
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

.navToggle.active span:nth-child(2),
.navToggle.active span:nth-child(3) {
    top: 18px;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    transform: rotate(45deg);
}

/*ローディング画面*/

.loading {
	position: fixed;
	z-index: 1000;
	width: 100%;
	height: 100vh;
	margin: -20px 0 0 0 ;
	padding: 0 0 20px 0;
	background: #faf9f5;
  }
  .loading.hide {
	opacity: 0;
	pointer-events: none;
	transition: opacity 800ms;
  }
  .loading .circle {
	display: block;
	position: relative;
	top: calc( 50% - 150px );
	width: 200px;
	height: 200px;
	margin: 0 auto;
	animation: loading 10s linear infinite;
  }
  .loading .circle img{
	width: 200px;
  }
  @keyframes loading {
	0%  {transform: rotate(0);}
  100%  {transform: rotate(360deg);}
  }


  }