@charset "utf-8";

/* --------------
 base
-------------- */
.ifsp {display: none!important;}

/* --------------
 modules css
-------------- */
/* ---------- float */
.fll { float: left;}
.flr { float: right;}

/* ---------- align */
.vlt { vertical-align:top !important;}

/* ---------- width */
.wd5 {width: 5% !important;}
.wd10 {width: 10% !important;}
.wd15 {width: 15% !important;}
.wd20 {width: 20% !important;}
.wd25 {width: 25% !important;}
.wd30 {width: 30% !important;}
.wd33 {width: 33% !important;}
.wd35 {width: 35% !important;}
.wd40 {width: 40% !important;}
.wd45 {width: 45% !important;}
.wd49 {width: 49% !important;}
.wd495 {width: 49.5% !important;}
.wd50 {width: 50% !important;}
.wd55 {width: 55% !important;}
.wd60 {width: 60% !important;}
.wd65 {width: 65% !important;}
.wd70 {width: 70% !important;}
.wd75 {width: 75% !important;}
.wd80 {width: 80% !important;}
.wd85 {width: 85% !important;}
.wd90 {width: 90% !important;}
.wd95 {width: 95% !important;}
.wd100 {width: 100% !important;}


.wd500px { max-width: 500px !important;}
.wd540px { max-width: 540px !important;}
.wd600px { max-width: 600px !important;}
.wd640px { max-width: 640px !important;}
.wd800px { max-width: 800px !important;}
.wd1000px { max-width: 1000px !important;}

/* ----- images */
.imgL {
	float: left;
	margin-right: 10px;
	margin-bottom: 10px;
}
.imgR {
	float: right;
	margin-left: 10px;
	margin-bottom: 10px;
}



.ifpcmt43 {
	margin-top: 43px;
}


.btnNews a {
	font-size: 1.5em;
}

.btnNews a:before {
	border-width: 10px;
}

/* =base
---------------------------------------------------- */
.in{
	max-width: 1200px;
	margin-left: auto;
	margin-right: auto;
}

/* =contents
---------------------------------------------------- */

.clm2, .clm3, .clm4, .clm5, .clm6,
.clm1-2 {
	display: flex;
	flex-flow: row wrap;
	align-items: stretch;
	margin-left: -30px;
}
.clm2 > * {
	width: calc((100% / 2) - 30px );
}
*::-ms-backdrop, .clm2 > * {
  width: calc(50% - 30px); /* IE11 */
}
.clm3 > * {
	width: calc((100% / 3) - 30px );
}
*::-ms-backdrop, .clm3 > * {
  width: calc(33.33% - 30px); /* IE11 */
}
.clm4 > * {
	width: calc((100% / 4) - 30px );
}
*::-ms-backdrop, .clm4 > * {
  width: calc(25% - 30px); /* IE11 */
}
.clm5 > * {
	width: calc((100% / 5) - 30px );
}
*::-ms-backdrop, .clm5 > * {
  width: calc(20% - 30px); /* IE11 */
}
.clm6 > * {
	width: calc((100% / 6) - 30px );
}
*::-ms-backdrop, .clm6 > * {
  width: calc(16.66% - 30px); /* IE11 */
}

.clm1-2 > *:nth-child(odd) {
	width: calc((100% / 3) - 30px );
}
*::-ms-backdrop, .clm1-2 > *:nth-child(odd) {
  width: calc(33.33% - 30px); /* IE11 */
}
.clm1-2 > *:nth-child(even) {
	width: calc((100% / 3) * 2 - 30px );
}
*::-ms-backdrop, .clm1-2 > *:nth-child(even) {
  width: calc(66.66% - 30px); /* IE11 */
}



.clm2 > *, .clm3 > *, .clm4 > *, .clm5 > *, .clm6 > *,
.clm1-2 > *{
	margin-left: 30px;
}

.clm2 > * >a, .clm3 > * >a, .clm4 > * >a, .clm5 > * >a, .clm6 > * >a,
.clm1-2 > * >a{
	position: relative;
	display: block;
	height: 100%;
}


/* --------------
 page contents
-------------- */
#wrapper .maincont {
 position: relative; 
}

.nlist {
  display: none;
}

#header-aside {
	/*background: rgba(255,255,255,.15);*/
	position: absolute;
	top: 0;
	left: -300px;
	/* z-index: -5; */
	width: 300px;
	padding-top: 30px;
	box-sizing: border-box;
	/*height: calc(100vh - 100px);*/
	height: 100%;
	display: inline-block;
}

#subpage #header-aside {
  /*height: calc(100vh - 100px);*/
  height: 100%;
}

#header-aside .title {
  margin-bottom: 20px;
}

.globalNav {
	font-size: 1.3em;
  text-align: center;
  margin-bottom: 20px;
}
.globalNav li {
  margin-bottom: 10px;
  line-height: 1.2;
}
.globalNav li span {
  font-size: .6em;
}

.langNav {
	margin: .5rem 0;
}

#visual {
  margin-left: 300px;
  background-color: #000;
  text-align: center;
  /* height: calc(100vh - 100px); */
}
#visual h1 img{
  /* max-height: calc(100vh - 100px); */
  /*min-height: 700px;*/
}

#chara {
  min-height: calc(100vh - 100px);
  margin-left: 5px;
}

@media screen and (max-width:1150px) {
  #header-aside {
    width: 150px;
    font-size: .9em;
    padding: 5px;
  }
  #header-aside p.mb20 {
    margin-bottom: 0!important;
  }
  #header-aside p.fs12 {
    font-size: .9em!important;
  }
  .globalNav {
    margin-bottom: 0px;
    font-size: .9em;
  }
  .globalNav li {
    margin-bottom: 0;
  }
  .langNav {
    font-size: .8em;
    margin: 0;
  }
  #visual {
    margin-left: 150px;
  }
  #chara {
    margin-left: 175px
  }
}

.introDl dt {
	clear: both;
	float: left;
	width: 11em;
	margin-right: 1em;
	padding-right: 1em;
	text-align: right;
	border-right: #333 solid 1px;
}
.introDl dd {
	margin-left: 12em;
}




.popup-chara-wrap {
	display: flex;
	justify-content: space-between;
}
.popup-chara-wrap:after {
	display: none;
}
.popup-chara-wrap .popup-chara-txt {
	width: 55%;
}

.popup-pv .popup-inner {
  width: auto;
}

#story li{
	margin-bottom: 70px;
}

@media screen and (max-width: 1200px) { /*以下の時*/
	#story li{
	margin-bottom: 5vw;
	}
}

.fade-in-left {
   opacity: 0;
   animation-name: fadein-left;
   animation-duration: 0.5s;
   animation-timing-function: ease-out;
   animation-fill-mode: forwards;
}
@keyframes fadein-left {
   0% {
      opacity: 0;
      transform: translateX(-300px);
   }
   100% {
      opacity: 1;
      transform: translateX(0);
   }
}

footer {
  /*position: -webkit-sticky;*/
  position: initial;
  bottom: 0;
  z-index: 5;
}

#teaser-sns {
  margin-top: 0;
}


.WacthBnr {
   top: 35px;
    right: 30px;
    font-size: 1.3em;
}


		@media screen and (min-width: 768px) {
			
			#visual .MVcont {
				/* margin-bottom: 20px; */
				position: relative;
			}
			
			#visual .MVcont,#visual h1,#visual h1 img {
				/* max-height: calc(100vh - 100px); */
			}
			
			#visual h1 img {
				/* height: 100%; */
			}
			
			#visual .bnrArea {
				width: 100%;
				margin: auto;
				padding: 0 5px;
				display: flex;
				justify-content: space-between;
				flex-direction: row;
				align-items: center;
				position: absolute;
				bottom: 5%;
			}
			
			#visual .bnrArea::after {
				display: none;
			}
			
			#visual .bnrArea>div {
				/*padding: 0 15px;*/
				/* max-height: 135px; */
				width: 17%;
				/* margin: auto; */
			}
			
			#visual .bnrArea img {
				height: 100%;
			}
			
		}