@charset "utf-8";




/*----------------------------------------
	for PC
----------------------------------------*/


@media screen and (min-width: 641px){

.content__wrap{background-color:#151515;background-size:cover;position:relative;}
.content__wrap:before{content:'';display:block;top:0;left:-200px;width:983px;height:481px;position:absolute;background:url(../img/common/bg-dust.png);}
.content__inner{padding-top:125px;}

.iframe_box{width:100%;padding-bottom:56.25%;position:relative;border-radius:14px;overflow:hidden;box-shadow:2px 2px 4px rgba(0,0,0,0.2);}
.iframe_box iframe{position: absolute;top: 0;width: 100%;height: 100%;}
.head-image__img{margin-top:-28vw!important;}

.newarea{background-color:rgba(255, 61, 0, 0.14);z-index:2;position: relative;margin-bottom:40px;padding:20px 0;}
.newarea__inner{width:80%;margin:0 auto;}

.wrap_charaicon{display:flex;flex-wrap:wrap;width:80%;margin:0 auto;}
.chara-i{width:180px;margin:10px;background-color:#24340e;padding:10px;box-shadow:4px 4px 8px rgba(0,0,0,0.5);position:relative;}
.chara-i.new:after{content:'NEW';background:#fffa53;padding:4px 10px 3px;display:block;position:absolute;left:-10px;top:-5px;font-size:14px;line-height:1;border-radius:20px;font-style: italic;box-shadow:0 0 8px rgba(0,0,0,0.6);z-index:10;}
.chara-i img{width:100%;display:block;transition: all 0.5s}
.chara-i-in{position:relative;overflow:hidden;}
.chara-i-in:before{content:'';display:block;position:absolute;bottom:0px;right:0px;  width: 0;height: 0;border-top: 15px solid transparent;border-left: 15px solid transparent;border-right: 15px solid #24340e;border-bottom: 15px solid #24340e;z-index:2;}
.chara-i-in:after{content:'';display:block;position:absolute;top:0px;left:0px;  width: 0;height: 0;border-top: 15px solid #24340e;border-left: 15px solid #24340e;border-right: 15px solid transparent;border-bottom: 15px solid transparent;z-index:2;}
.chara-i-in:hover img{transform:scale(1.1);}

.chara-i.titan{width:267px;margin:10px;background-color:#660000;padding:10px;}
.chara-i.titan img{width:100%;display:block;transition: all 0.5s}
.titan .chara-i-in{position:relative;overflow:hidden;}
.titan .chara-i-in:before{content:'';display:block;position:absolute;bottom:0px;right:0px;  width: 0;height: 0;border-top: 15px solid transparent;border-left: 15px solid transparent;border-right: 15px solid #660000;border-bottom: 15px solid #660000;z-index:2;}
.titan .chara-i-in:after{content:'';display:block;position:absolute;top:0px;left:0px;  width: 0;height: 0;border-top: 15px solid #660000;border-left: 15px solid #660000;border-right: 15px solid transparent;border-bottom: 15px solid transparent;z-index:2;}
.titan .chara-i-in:hover img{transform:scale(1.1);}

.position-relative{position:relative;}

.section-title{width:79%;margin:40px auto 0;color:#fff;font-size:38px;}

#cboxContent{margin:0!important;}

#cboxClose{text-align:-9999px!important;width:100px!important;height:100px!important;background-color:#24340e!important;right:0!important;top:0!important;background:url(../img/common/close.svg) no-repeat!important;background-size:60%!important;background-position:center center!important;position:fixed!important;outline:none!important;}


.plus_fb{color:#de5c19;font-size:30px;position:relative;z-index:0;margin-bottom:17px;}
.plus_fb .text{font-size:34px;position:relative;z-index:20;border-bottom:2px solid #de5c19;font-feature-settings : "palt" 1;font-style: italic;font-weight:800;padding-bottom:5px;}
/* .plus_fb:before{content:'';display:block;width:80px;height:80px;border:2px solid #4f461c;transform:rotate(45deg );top:-30px;left:-50px;z-index:0;position:absolute;}
.plus_fb:after{content:'';display:block;width:60px;height:60px;border:2px solid #7e541d;transform:rotate(45deg );position:absolute;top:-20px;left:-40px;z-index:0;} */

.anim01{width:0;position:relative;animation-name: anime1;animation-duration: 1.5s;animation-timing-function: ease;animation-iteration-count: infinite;}
.anim01:after{content:'';display:block;width:180px;height:180px;border:2px solid rgba(191, 101, 18, 0.5);transform:rotate(45deg );top:-100px;left:-100px;z-index:0;position:absolute;}

.anim02{width:0;position:relative;animation-name: anime2;animation-duration: 1.5s;animation-timing-function: ease;animation-iteration-count: infinite;transform-origin:50% 50%;}
.anim02:after{content:'';display:block;width:120px;height:120px;background-color:rgba(214, 81, 16, 0.8);transform:rotate(45deg);z-index:0;position:absolute;top:-66px;left: -66px;}

@keyframes anime1 {
0% {transform: scale(0,0);opacity:0;}
10% {transform: scale(0,0);opacity:0.2;}
50% {transform: scale(60%,60%);opacity:1;}
100% {transform: scale(100%,100%);opacity:0;}
}

@keyframes anime2 {
0% {transform: scale(0,0);opacity:1;}
50% {transform: scale(90%,90%);opacity:0.2;}
70% {transform: scale(90%,90%);opacity:0;}
100% {transform: scale(90%,90%);opacity:0;}
}

#cboxNext{height:100px!important;top:40%!important;margin-top:-50px!important;right:20px!important;width:50px!important;outline:none!important;}

#cboxNext:before{content: '';
    width: 50px;
    height: 2px;
    background: #fff;
    display: block;
    transform: rotate(45deg);
    top: 35px;
    position: absolute;
    box-shadow: 0 0 10px #000;
    transition: all .3s;}
#cboxNext:after{ content: '';
    width: 50px;
    height: 2px;
    background: #fff;
    display: block;
    transform: rotate(-45deg);
    top: 70px;
    position: absolute;
    box-shadow: 0 0 10px #000;
    transition: all .3s;}


		#cboxPrevious{height:100px!important;top:40%!important;margin-top:-50px!important;left:20px!important;width:50px!important;outline:none!important;}

		#cboxPrevious:before{content: '';
		    width: 50px;
		    height: 2px;
		    background: #fff;
		    display: block;
		    transform: rotate(-45deg);
		    top: 35px;
		    position: absolute;
		    box-shadow: 0 0 10px #000;
		    transition: all .3s;}
		#cboxPrevious:after{ content: '';
		    width: 50px;
		    height: 2px;
		    background: #fff;
		    display: block;
		    transform: rotate(45deg);
		    top: 70px;
		    position: absolute;
		    box-shadow: 0 0 10px #000;
		    transition: all .3s;}



}






@media screen and (min-width: 1551px) {/*大画面用サイズ変更*/
/* #visual{padding-top:40%;width:100%;background-position:center top;position:relative;background-size:100%;} */
/* #visual{padding-top:40%;width:100%;background:#fff url(../img/top/visual_img.jpg) no-repeat;background-position:center top;position:relative;background-size:100%;} */
#content_story_character{background-size:100%;}
}






/*----------------------------------------
	for Tab
----------------------------------------*/

@media screen and (max-width: 1199px) and (min-width: 641px){
	.btn-movie{position:absolute;left:auto;top:30px;right:30px;display:block;width:220px;background-color:#000;border:1px solid #fff;}

	.wrap-banner-lefttop{right:20px;left:auto;top:40px;}
		.banner_lefttop{width:240px;display:block;margin-bottom:8px;}
		.banner_lefttop img{width:100%;display:block;margin-bottom:8px;}

}



/*----------------------------------------
	for SP
----------------------------------------*/


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


  .content__wrap{background-color:#151515;background-size:cover;position:relative;}
  .content__wrap:before{content:'';display:block;top:0;left:-200px;width:983px;height:481px;position:absolute;background:url(../img/common/bg-dust.png);}
  /* .content__inner{padding-top:125px;} */

  .iframe_box{width:100%;padding-bottom:56.25%;position:relative;border-radius:14px;overflow:hidden;box-shadow:2px 2px 4px rgba(0,0,0,0.2);}
  .iframe_box iframe{position: absolute;top: 0;width: 100%;height: 100%;}
  /* .head-image__img{margin-top:-10vw!important;} */

  .newarea{background-color:rgba(255, 61, 0, 0.14);z-index:2;position: relative;margin-bottom:40px;padding:20px 0;}
  .newarea__inner{width:80%;margin:0 auto;}

  .wrap_charaicon{display:flex;flex-wrap:wrap;width:90%;margin:0 auto;}
  .chara-i{width:26%;margin-right:4%;margin-bottom:4%;background-color:#24340e;padding:2%;box-shadow:4px 4px 8px rgba(0,0,0,0.5);position:relative;}
  .chara-i:nth-child(3n+3){margin-right:0;}
  .chara-i img{width:100%;display:block;transition: all 0.5s}
  .chara-i-in{position:relative;overflow:hidden;}
  .chara-i-in:before{content:'';display:block;position:absolute;bottom:0px;right:0px;  width: 0;height: 0;border-top: 10px solid transparent;border-left: 10px solid transparent;border-right: 10px solid #24340e;border-bottom: 10px solid #24340e;z-index:2;}
  .chara-i-in:after{content:'';display:block;position:absolute;top:0px;left:0px;  width: 0;height: 0;border-top: 10px solid #24340e;border-left: 10px solid #24340e;border-right: 10px solid transparent;border-bottom: 10px solid transparent;z-index:2;}
  .chara-i-in:hover img{transform:scale(1.1);}

  .chara-i.titan{width:44%;margin:0;background-color:#660000;padding:2%;margin-right:4%;margin-bottom:4%;}
  .chara-i.titan:nth-child(2n+2){margin-right:0%;}
  .chara-i.titan img{width:100%;display:block;transition: all 0.5s}

  .chara-i.new:after{content:'NEW';background:#fffa53;padding:3px 10px 3px;display:block;position:absolute;left:-10px;top:-5px;font-size:14px;line-height:1;border-radius:20px;font-style: italic;box-shadow:0 0 8px rgba(0,0,0,0.6);z-index:10;color:#333;font-size:10px;}

  .titan .chara-i-in{position:relative;overflow:hidden;}
  .titan .chara-i-in:before{content:'';display:block;position:absolute;bottom:0px;right:0px;  width: 0;height: 0;border-top: 15px solid transparent;border-left: 15px solid transparent;border-right: 15px solid #660000;border-bottom: 15px solid #660000;z-index:2;}
  .titan .chara-i-in:after{content:'';display:block;position:absolute;top:0px;left:0px;  width: 0;height: 0;border-top: 15px solid #660000;border-left: 15px solid #660000;border-right: 15px solid transparent;border-bottom: 15px solid transparent;z-index:2;}
  .titan .chara-i-in:hover img{transform:scale(1.1);}

  .position-relative{position:relative;}

  .section-title{width:90%;margin:40px auto 0;color:#fff;font-size:30px;}

  #cboxContent{margin:0!important;}

  #cboxClose{text-align:-9999px!important;width:60px!important;height:60px!important;background-color:#24340e!important;right:0!important;top:0!important;background:url(../img/common/close.svg) no-repeat!important;background-size:60%!important;background-position:center center!important;position:fixed!important;outline:none!important;}


  .plus_fb{color:#de5c19;font-size:30px;position:relative;z-index:0;margin-bottom:17px;}
  .plus_fb .text{font-size:17px;position:relative;z-index:20;border-bottom:2px solid #de5c19;font-feature-settings : "palt" 1;font-style: italic;font-weight:800;padding-bottom:5px;line-height:1.4;}
  /* .plus_fb:before{content:'';display:block;width:80px;height:80px;border:2px solid #4f461c;transform:rotate(45deg );top:-30px;left:-50px;z-index:0;position:absolute;}
  .plus_fb:after{content:'';display:block;width:60px;height:60px;border:2px solid #7e541d;transform:rotate(45deg );position:absolute;top:-20px;left:-40px;z-index:0;} */

  .anim01{width:0;position:relative;animation-name: anime1;animation-duration: 1.5s;animation-timing-function: ease;animation-iteration-count: infinite;}
  .anim01:after{content:'';display:block;width:180px;height:180px;border:2px solid rgba(191, 101, 18, 0.5);transform:rotate(45deg );top:-100px;left:-100px;z-index:0;position:absolute;}

  .anim02{width:0;position:relative;animation-name: anime2;animation-duration: 1.5s;animation-timing-function: ease;animation-iteration-count: infinite;transform-origin:50% 50%;}
  .anim02:after{content:'';display:block;width:120px;height:120px;background-color:rgba(214, 81, 16, 0.8);transform:rotate(45deg);z-index:0;position:absolute;top:-66px;left: -66px;}

  @keyframes anime1 {
  0% {transform: scale(0,0);opacity:0;}
  10% {transform: scale(0,0);opacity:0.2;}
  50% {transform: scale(60%,60%);opacity:1;}
  100% {transform: scale(100%,100%);opacity:0;}
  }

  @keyframes anime2 {
  0% {transform: scale(0,0);opacity:1;}
  50% {transform: scale(90%,90%);opacity:0.2;}
  70% {transform: scale(90%,90%);opacity:0;}
  100% {transform: scale(90%,90%);opacity:0;}
  }

    #cboxNext{height:100px!important;top:14%!important;margin-top:-50px!important;right:0px!important;width:50px!important;outline:none!important;}

  #cboxNext:before{content: '';
      width: 50px;
      height: 2px;
      background: #fff;
      display: block;
      transform: rotate(45deg);
      top: 35px;
      position: absolute;
      box-shadow: 0 0 10px #000;
      transition: all .3s;}
  #cboxNext:after{ content: '';
      width: 50px;
      height: 2px;
      background: #fff;
      display: block;
      transform: rotate(-45deg);
      top: 70px;
      position: absolute;
      box-shadow: 0 0 10px #000;
      transition: all .3s;}


  		#cboxPrevious{height:100px!important;top:14%!important;margin-top:-50px!important;left:0px!important;width:50px!important;outline:none!important;}

  		#cboxPrevious:before{content: '';
  		    width: 50px;
  		    height: 2px;
  		    background: #fff;
  		    display: block;
  		    transform: rotate(-45deg);
  		    top: 35px;
  		    position: absolute;
  		    box-shadow: 0 0 10px #000;
  		    transition: all .3s;}
  		#cboxPrevious:after{ content: '';
  		    width: 50px;
  		    height: 2px;
  		    background: #fff;
  		    display: block;
  		    transform: rotate(45deg);
  		    top: 70px;
  		    position: absolute;
  		    box-shadow: 0 0 10px #000;
  		    transition: all .3s;}
}