@charset "UTF-8";

.mb5{margin-bottom: 5px;}
.mb10{margin-bottom: 10px;}


.loadingicon2{
	position: absolute;
	width: 140px;
	margin-top: -10px;
	margin-left: -70px;
	top: 50%;
	left: 50%;
	z-index: 0;
	-webkit-transition: all 0.5s;
	-moz-transition: all 0.5s;
	-ms-transition: all 0.5s;
	-o-transition: all 0.5s;
	transition: all 0.5s;
	opacity: 0;
	display: none;
	
}

.loadingicon2 img{
width:100%;	
}




.pagebase{
	background-color: #000000;
	background-image: url(../img/sp_base.jpg);
	background-position: center top;
	background-size: 100% auto;
	background-attachment: fixed;
	background-repeat: repeat-y;
}

.wrapper {
/*	background-image: url(../img/sp_base.png);
	background-repeat: repeat-y;
	background-size: 100% auto;*/
	overflow: hidden;
	background-attachment: fixed;
   }

.header{
	position: fixed;
	z-index: 1000;
	background-image: url(../img/menubase.png);
	height: 80px;
	width: 100%;
	top: 0;
	background-size: 100% 100% ;
	background-repeat: no-repeat;
}

.logoImg{
	position: fixed;
	width:160px;
	top:10px;
	left:10px;

}

.logoImg img{
	width:100%;
}


.introstorySlick .slick-slide {
  margin: 0px 4px;  /* ガター */
}


.wrapper.about{
margin-top:60px;
position: relative;	
	

   }


.aboutSection{
	overflow: hidden;
	padding: 0px 0 0px 0;
	color: hsla(0,0%,100%,1.00);
	
	/*background-image: url(../img/introstory_baseslide_01.png);*/
	background-position: center top;
	background-repeat: no-repeat;
	background-size: contain;
	
	position: relative;
	

	z-index: 2;
}

.aboutSection.character{
	background-image: url(../img/character_base.png);
background-size: cover;	
}

.aboutSection.keywods{
	background-image: url(../img/keywords_base.png);
background-size: cover;	
}

.aboutSection.comment{
	background-image: url(../img/comment_baseslide_01.png);
}

.aboutSection.gallery{
	min-height:100vh;
	margin-bottom: 50px;
}


.cornerTitle-trance{
	width: 100%;
	margin:30px 0 0 10px;
	color: #F7F7D5;
}

.cornerTitle-trance.gallery{
	margin: 30px 0 0 10px;
	position: absolute;
	z-index: 500;
	pointer-events: none;
}



.textArea{
	line-height: 1.8em;
	
	padding: 10px 10px 10px 10px;
/*	font-weight: 800;*/
	font-size: 95%;	
}

.comment.textArea{
	margin-top: 30%;
	
}



.scrollBox-pronote {
	/*height: 600px;*/
	width: 100%;
	box-sizing: border-box;
	padding: 20px 20px;
	background-color: hsla(0,0%,0%,0.7);
	border: 1px solid hsla(359,96%,21%,1.00);
	margin-bottom:20px;
}


.pronote.textArea{
	margin-top: 10%;
	/*display: block;
	position: relative;
	overflow: hidden;*/	
}



.pronoteImg{
	
	
}

.pronoteImg img{
	width:100%;
	
}

.panel-pronote { 
	display: none;
}

.openButton2{
	cursor: pointer;
	/*position: relative;
	display: block;*/
}

.pronoteSet{
	margin-bottom:20px;
	
}



.question{
	margin-bottom: 1em !important;
	color: hsla(0,0%,65%,1.00);
}



.introstoryCopy{
margin:55% 0 5% 0;
	
}


.introstorySlick{

	padding:0;
	width: 100%;

		/*background-color: hsla(0,0%,100%,0.8);	*/
}

.characterSlick{

	padding:0;
	width: 100%;
		/*background-color: hsla(0,0%,100%,0.8);	*/
}


/*character*/

.characterTitle{
	
	width:250px;
	margin:auto;
	margin: 10px auto;
	
}



.characterSlick .slick-slide {
  margin: 0px 0px;  /* ガター */
}

.slick-dots {
	position: static;
	bottom: 0px;
	display: block;
	width: 100%;
	padding: 0;
	margin: 0;
	list-style: none;
	text-align: center;
	z-index: 999;
	margin-top: 20px;
}





.footerMenuArea{
	margin-top: 50px;
	
}



/*cast staff*/

.caststaffSlick{
margin-top:10px;
	padding:0;
	width: 100%;
margin-bottom: 50px !important;
		/*background-color: hsla(0,0%,100%,0.8);	*/
}

.caststaffSlick .slick-slide {
  margin: 0px 0px;  /* ガター */
}


.profile{
	font-family: "brothers",sans-serif;
	/*font-family: "paralucent-condensed",sans-serif;*/
	font-weight: 400;
	font-size: 1.8rem;
	line-height: 1em;
	color: hsla(60,69%,90%,0.9);
	margin-top:2rem;
}

.profileText{
	font-size: 1.2rem;
	line-height: 2rem;
	color: hsla(0,0%,75%,1.00);	
}




/* toggle-panel */

.openButton{
	line-height: 40px;
	display: block;
	width: 100%;
	background-color: hsla(0,0%,13%,1);
	position: relative;
	height: 40px;
}

.panel-btn {
left:0;
}

.panel-btn-icon { display: block; position: absolute; top: 50%; right: 20px; width: 14px; height: 2px; margin: -1px 0 0 -7px; background: #F7F7D3; transition: .2s; }
.panel-btn-icon:before, .panel-btn-icon:after { display: block; content: ""; position: absolute; top: 50%; left: 50%; width: 14px; height: 2px; margin-left: -7px; background: #F7F7D3; transition: .3s; }
.panel-btn-icon:before { margin-top: -6px; }
.panel-btn-icon:after { margin-top: 4px; }

.panel-btn .close { background: transparent; }
.panel-btn .close:before, .panel-btn .close:after { margin-top: 0; }
.panel-btn .close:before { transform: rotate(-45deg); -webkit-transform: rotate(-45deg); }
.panel-btn .close:after { transform: rotate(-135deg); -webkit-transform: rotate(-135deg); }

.panel { display: none; width: 100%; margin: 0; padding: 0 0 3rem 0;  }

.btnText{
	left: 10px;
	position: relative;
	font-family: "brothers",sans-serif;
	/*font-family: "paralucent-condensed",sans-serif;*/
	font-weight: 400;
	font-size: 1.8rem;
	line-height: 1em;
	color: #F7F7D3;
	margin-top: 2rem;
}


.slick-dots li {
    position: relative;
    display: inline-block;
    width: 10px;
    height: 10px;
    margin: 0 3px;
    padding: 0;
    cursor: pointer;
}

.slick-dots li button {
    font-size: 0;
    line-height: 0;
    display: block;
    width: 10px;
    height: 10px;
    padding: 3px;
    cursor: pointer;
    color: transparent;
    border: 0;
    outline: none;
    background: transparent;
}