@charset "utf-8";

/*  top
----------------------------------------------------------------------------------------------------------- */

#customElement { width: 100%; height: 100vh; position: relative; top: 0; left: 0; z-index: 0; background: url("../img/top/mv.jpg?20201212") no-repeat center center;  -moz-background-size:cover; background-size:cover;}
.YTPOverlay.raster{background:url(../img/top/raster.png);}

#play-movie-btn{
  position: absolute;
  width: 160px;
  height: 92px;
  /* top: calc(50% - 80px); */
  top: 50%;
  left: calc(50% - 80px);
  opacity:0.80;
  transition: 1s;
  -webkit-transition: 1s;
}

#play-movie-btn:hover{opacity:1; transform: scale(1.2); }

.load-box{display:block;}

#showloading{display: none;}

@media screen and (max-width: 700px) {
#customElement { width: 100%; height: 100vh; position: relative; top: 0; left: 0; z-index: 0; background: url("/img/top/loding.gif") no-repeat center center #fefef2;  -moz-background-size:cover; background-size:cover;}
#play-movie-btn{
  position: absolute;
  width: 100px;
  height: 92px;
  top: 50%;
  left: calc(50% - 50px);
  opacity:0.80;
  transition: 1s;
  -webkit-transition: 1s;
}

.load-box{display: none;}


#showloading{
       width: 100%;
       height: 100vh;
       background-color: #fefef2;
       position: relative;
       display:block;
   }

   #showloading img{
       position: absolute;
       top: 50%;
       left: 50%;
       transform: translate(-50%, -50%);
   }

}


.bganime{animation-name: fade-inanimebg; animation-duration: 2s; animation-iteration-count:1;}


@keyframes fade-inanimebg {
    0% {opacity: 0;}
    100% {opacity: 1;}
}

@keyframes fade-zoombtn {
    0% {opacity: 0;}
    100% {opacity: 1;}
}



h1{width: 35%; max-width: 620px; padding: 2% 0 0 2%;}
h1 img{width: 100%;}


h2{position: absolute; top:0; left:0; right:0; width: 20%; max-width: 160px;padding: 2% 0 0 0; margin: 0 auto;}
h2 div{padding: 3%;}

@media screen and (max-width: 700px) {
{position: absolute; top:0; left:0; right:0; width: 20%; max-width: 100px;padding: 2% 0 0 0; margin: 0 auto;}
}

.top-banner{position: absolute; bottom: 3%; right:3%; }
.listbanner .banner1{width: 64%; padding:1%;}
.listbanner .banner2{width: 32%; padding:1%;}
.top-icon-box{position: absolute; bottom: 150px; right:3%; width: 100%; max-width: 394px;}
.top-icon-box li{padding:0.5%;}
.scroll-down{position: absolute; bottom: 0; left:3%; animation-name: fade-inanime2; animation-duration: 2s; animation-iteration-count:infinite;}

.all-keyimg-zoom-btn{width: calc(100% - 4px); max-width: 200px; margin: 0 auto; border: solid 2px #0bac9d;}
.all-keyimg-zoom-btn img{width: calc(100% - 4px); border: solid 2px #fefef2;}

/*
a:link { color: #0000ff; text-decoration: none;}
a:visited { color: #000080; }
a:hover { color: #ff0000; text-decoration: underline;}
a:active { color: #ff8000; }
*/


@media screen and (max-width: 700px) {
.top-icon-box{max-width: 300px; bottom: 120px; }
.top-banner{max-width: 300px; }
}


/*  common
----------------------------------------------------------------------------------------------------------- */

h3{width: 80%; max-width: 1208px; margin: 0 auto; padding: 5% 0;}


@media screen and (max-width: 700px) {
h3{width: 95%; max-width: 1208px; margin: 0 auto; padding: 10% 0;}
}




/*  story
----------------------------------------------------------------------------------------------------------- */
.story-box{width: 100%; margin: 0 auto;}
.story-main-box{width: 95%; max-width: 1208px; margin: 0 auto; color: #8a3a1f; line-height:1.61; font-size:18px;}

.story-left-box{width: 54%; padding:0.5%;}
.story-right-box{width: 44%; padding:0.5%;}
.story-catch{padding-bottom: 3%;}

.story-left-txt{width: 95%;}
.story-left-txt p{padding-top: 5%;}

@media screen and (max-width: 700px) {
.story-box{width: 100%; margin: 0 auto;}
.story-main-box{ font-size:3.5vw; text-align:center;}
.story-left-box{width: 100%; padding:2.5%;}
.story-right-box{width: 95%; padding:5% 2.5% 0 2.5%;}
.story-catch{padding-bottom: 1%;}
}






/*  news
----------------------------------------------------------------------------------------------------------- */

.news-box {
  width:100%;
  position: relative;
  z-index: 0;
  padding:10% 0 6% 0;
  bottom:-65px;
  z-index:5;
}
.news-box::after{
  content: '';
  position: absolute;
  left:0;
  top: 15%;
  transform: skewY(-5deg);
  transform-origin: bottom left;
  z-index: -1;
  width:100%;
  height:100%;
  background:#765244;
}


@media screen and (max-width: 1000px) {
.news-box { width:1000px;}
}


@media screen and (max-width: 750px) {
.news-box { width:100%;}
}




.old_news_list_btn{width: 100%; max-width: 227px; margin: 10px auto 0 auto;}

.news_banner_list{width: 95%; max-width: 1000px; margin: 0 auto; padding: 3% 0; justify-content: center;}
.news_banner_list li{width: 47%; padding: 1%;}

.news_banner_list2{width: 95%; max-width: 1000px; margin: 0 auto; padding: 0 0 3% 0; justify-content: center; margin-top:-3%;}
.news_banner_list2 li{width: 31%; padding: 1%;}

.news_text a{ color: #b41c2d; text-decoration: underline;}
.news_text a:visited { color: #b41c2d; }
.news_text a:hover { color: #b41c2d; text-decoration: none;}
.news_text a:active { color: #b41c2d; }

.news-more-btn{width: 95%; max-width: 246px; margin: 0 auto; padding-top:5%; }

.news-more-btn a img:hover{ filter: sepia(100%);}


@media screen and (max-width: 700px) {

.news-box {
  padding:10% 0 10% 0;
  bottom:-70px;
}

.news-box::after{
  top: 5%;
  transform: skewY(-5deg);
  transform-origin: bottom left;
  z-index: -1;
  width:100%;
  height:100%;
  background:#765244;
}




.news_banner_list{width: 95%; max-width: 540px; margin: 0 auto;}
.news_banner_list li{width: 98%; padding: 1%;}

.news_banner_list2 li{width: 48%; padding: 1%;}

.news-more-btn{width: 50%; max-width: 246px; margin: 0 auto; padding-top:5%; }

}



/*  cast
-----------------------------------------------------------------------------------------------------------


h3.cast-title{width: 80%; max-width: 1208px; margin: 0 auto; padding: 25% 0 5% 0;}

h3.cast-title2{width: 80%; max-width: 1208px; margin: 0 auto; padding: 5% 0 5% 0;}

@media screen and (max-width: 700px) {
h3{width: 95%; max-width: 1208px; margin: 0 auto; padding: 10% 0;}
}



.cast-box{width: 70%; max-width: 1000px; margin: 0 auto; padding-bottom: 5%;}

.cast-box li{width: 25%; padding: 2.5% 0;}

.staff-box{width: 70%; max-width: 300px; margin: 0 auto; padding: 1% 0 1.5% 0; text-align: center;}
.staff-box2ver{width: 70%; max-width: 650px; margin: 0 auto; padding: 1% 0 1.5% 0; text-align: center;}

@media screen and (max-width: 700px) {
.staff-box{width: 48%; margin: 0 auto; padding: 1% 0 5% 0; text-align: center;}
.cast-box{width: 90%; max-width: 1000px; margin: 0 auto; padding-bottom: 5%;}
.cast-box li{width: 33%; padding: 2.5% 0;}

.staff-box2ver{width: 95%;}
.staff-box2ver div{width: 95%; max-width: 650px; margin: 0 auto; padding: 2.5%; text-align: center;}

}
 */

/*  chara-map-box
----------------------------------------------------------------------------------------------------------- */

.chara-map-box{
	background-color:rgba(33,33,33,0.40);
	padding: 5% 0 15% 0;
}

.chara-map-box-bg{
	background:url(../img/top/map.png) bottom center no-repeat;
	-moz-background-size:auto 100%;
	background-size:auto 100%;
	padding: 5% 0;
}
.top-chara-list{width: 95%; max-width: 1300px; margin: 0 auto;}
.top-chara-list li{width: 21%; margin:2%;}



.top-chara-list li{
	overflow:hidden;
	position:relative;
}
.top-chara-list li .chara-icon{
	font-size:130%;
	color:#fefef2;
}
.top-chara-list li .ad-uptxt{
	width:100%;
	height:100%;
	position:absolute;
	top:0;
	left:0;
	opacity:0;
	
	-webkit-transition:all 0.6s ease;
	transition:all 0.6s ease;
	display: -webkit-flex;
 	display: flex;
	-webkit-align-items: center;
	align-items: center;
	-webkit-justify-content: center;
	justify-content: center;
}
.top-chara-list li:hover .ad-uptxt{
	opacity:1;
}

.chara-ad01{background-color:rgba(74,91,197,0.8);}
.chara-ad02{background-color:rgba(46,95,100,0.8);}
.chara-ad03{background-color:rgba(218,97,128,0.8);}
.chara-ad04{background-color:rgba(216,136,56,0.8);}
.chara-ad05{background-color:rgba(56,169,103,0.8);}
.chara-ad06{background-color:rgba(136,31,35,0.8);}
.chara-ad07{background-color:rgba(194,193,191,0.8);}
.chara-ad08{background-color:rgba(21,20,16,0.8);}





/*  chara-tw-box
----------------------------------------------------------------------------------------------------------- */

.chara-tw-box {
  position: relative;
  z-index: 0;
  padding:20% 0 0 0;
  bottom:-65px;
  background:url(../img/top/chara-bg.jpg) #1faeff bottom center no-repeat;
-moz-background-size:100% auto;
background-size:100% auto;

}


@media screen and (max-width: 1000px) {
.chara-tw-box {
   width:1000px;
  background:url(../img/top/chara-bg.jpg) #1faeff bottom center no-repeat;
-moz-background-size:100% auto;
background-size:100% auto;
}
}


.chara-tw-box::after{
  content: '';
  position: absolute;
  left:0;
  top: 0;
  transform: skewY(-5deg);
  transform-origin: bottom left;
  z-index: -1;
  width:100%;
  height:100%;
}




.chara-map{width: 80%; max-width: 1208px; margin: 0 auto;}


.tw-box{
padding: 10% 0;
background: -moz-linear-gradient(top,  rgba(33,33,33,0) 18%, rgba(33,33,33,0) 19%, rgba(33,33,33,0.7) 100%);
background: -webkit-linear-gradient(top,  rgba(33,33,33,0) 18%,rgba(33,33,33,0) 19%,rgba(33,33,33,0.7) 100%);
background: linear-gradient(to bottom,  rgba(33,33,33,0) 18%,rgba(33,33,33,0) 19%,rgba(33,33,33,0.7) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00212121', endColorstr='#b3212121',GradientType=0 );
z-index: 5;
}

.tw-list{width: 80%; max-width: 600px; margin: 0 auto;}




@media screen and (max-width: 700px) {
.tw-box{padding: 10% 0 20% 0;}

.chara-tw-box {
  bottom:-32px;
  background:url(../img/top/chara-bg.jpg) #1faeff bottom center no-repeat;
-moz-background-size:auto 150%;
background-size: auto 150%;
width:100%;

}


}

.news-more-btn{width: 95%; max-width: 246px; margin: 0 auto; padding-top:5%; }

.news-more-btn a img:hover{ filter: sepia(100%);}






/*  pre-box
----------------------------------------------------------------------------------------------------------- */




.pre-box{
	width:100%;
	padding: 5% 0;
	background:url(/img/pre/main-bg.jpg) top center no-repeat;
	-moz-background-size:200% auto; background-size:200% auto;
}



.pre-title{text-align: right;}
.pre-read-txt{text-align: right; color: #fefef2; font-size: 18px; padding: 5% 2%;}


.pre-cont-box{width:100%;}
.pre-bottan-box{width:30%;}
.pre-list-box{width:65%; margin-left: auto; text-align:right;}
.pre-list{margin-bottom:2%; position: relative;}


@media screen and (max-width: 1000px) {
.pre-box{ width:1000px;}
}



.clear-icon {
    width: 10%;
    position: absolute;
    top: -5px;
    right: 90%;
}



@media screen and (min-width: 1050px) {
.pre-list-box{ max-width:1050px;}
.clear-icon {width: 10%; right: 91%;}


}


@media screen and (min-width: 1051px and max-width: 1000px) {
.pre-box{ width:1000px;}
.clear-icon { right: 960px; }
.pre-list-box{width:1050px; margin-left: auto; text-align:right;}


}






.pre-bottan-box{align-items:flex-end;}
.pre-bottan-title{width: 20%; background:#212121;}


.pre-bottan-list{width: 80%;}
.pre-bottan-list li{width: 100%;margin-top: 8px; }
.pre-bottan-list li a{ width: 94%; display: block;  background:#0bac9d; padding: 30px 3%; font-size: 20px;}
.pre-bottan-list li.prenolink{width: 94%; display: block;  background:#7f7f7f; padding: 30px 3%; font-size: 20px; color :#212121;}

.pre-bottan-list li a { color: #fefef2; text-decoration: none;}
.pre-bottan-list li a:visited { color: #fefef2; }
.pre-bottan-list li a:hover { color: #fefef2; background:#b28778;}
.pre-bottan-list li a:active { color: #fefef2; }



@media screen and (min-width: 701px and max-width: 1000px) {
.pre-bottan-list li{ borde: solid 1px #f00;}
.pre-bottan-list li a{ padding: 15px 3%; font-size: 20px;}

}




@media screen and (max-width: 700px) {
.pre-read-txt{text-align: center; font-size: 16px;}
.pre-box{
	width:100%;
	padding: 10% 0;
	background:url(/img/pre/main-bg.jpg) top center no-repeat;
	-moz-background-size: auto 100%; background-size:auto 100%;
}
.pre-bottan-title{width: 100%; background:#212121;}
.pre-bottan-box{width:100%; padding-bottom: 5%;}
.pre-list-box{width:98%; margin-left: auto; text-align:right; padding-left: 2%;}
.pre-bottan-list{width:100%; }

.pre-bottan-list ul{display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; flex-wrap: wrap;}

.pre-bottan-list li{width: 48%; margin: 1%;  text-align: center;}
.pre-bottan-list li a{font-size: 3vw;}
.pre-bottan-list li.prenolink{width: 42%; margin: 1%; font-size: 3vw; text-align: center;}
}