@charset "utf-8";




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


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


/* noload */

.background_sec01{position:absolute;top:0;left:0;z-index: 0;}

.background_sec02{width:100%;height:100vh;position:absolute;top:0;left:0;z-index: 1;opacity:0;}
.background_sec02 .img-bg{width:100%;position:absolute;top:0;left:0;z-index: 0;}

.background_sec03{width:100%;height:100vh;position:absolute;top:0;left:0;z-index: 1;opacity:0;}
.background_sec03 .img-bg{width:100%;position:absolute;top:0;left:0;z-index: 0;}

.sec01__wrap{margin:0 auto 0px;width:100vw;position:relative;}
.sec01__inner{padding:250px 0 100px;}
.sec01__inner .text{color:#fff;text-align:center;line-height:2.5;font-size:20px;}
.sec01__wrap .background-text{position:absolute;right:40px;top:30px;}


.sec02__wrap{margin-top:150px;}
.sec02__inner{padding:0px 0 100px;position:relative;background-color:#000;}
.sec02__inner .wrap__list{display:flex;justify-content:center;}
.wrap__list{position:relative;z-index: 1;top:-100px;}
.wrap__list li{width:292px;margin:0 20px}
.sec02__inner .text{color:#ddd;position:relative;font-size:14px!important;}

.wrap_img{display:block;position:relative;width:292px;box-shadow:0 0 30px rgba(0,0,0,0.5);}
.wrap_img .icon-plus{display:block;position:absolute;right:-10px;bottom:-10px;opacity:0.8;transition:all 0.2s;transform:scale(0.8);}
.wrap_img:hover .icon-plus{transform:scale(1);opacity:1;}

.wrap_img .icon-plus.icon-new:before{top:-10px;right:-10px;}
.wrap_img .icon-plus.icon-new:after{top:-10px;right:-10px;}

.wrap_img .img{display:block;position:relative;width:100%;}
.wrap_img .title{display:block;position:absolute;left:-10px;bottom:-10px;z-index:2;width:50px;line-height:1;}
.wrap_img .title img{display:block;width:100%;}

.wrap_img{margin-bottom:25px;}

.sec01_bg{width:100%;position:absolute;top:0;left:0;z-index:0;}
.sec01_bg img{display:block;}


/* 妖怪の力 */

.sec03__wrap {z-index:5;position:relative;padding:200px 0 0;}


/* 妖怪化 */

.sec03__wrap .effect{position:absolute;top:0;right:-130px;}

.sec03-01__inner {position:relative;padding:39% 0 0;margin-bottom:3%;}
.sec03-01__inner .background-text {position:absolute;right:5%;top:0;opacity:0;}
.sec03-01__inner .imagebox{width:70%;z-index:1;position:absolute;top:0%;left:0;}
.sec03-01__inner .imagebox .movie__wrap{position:absolute;top:0;left:0;width:100%;height:100%;}
.sec03-01__inner .imagebox .movie__wrap .movie{width:100%;display:block;height:100%;}
.sec03-01__inner .imagebox img{width:100%;display:block;}
.sec03-01__inner .infobox{width:50%;position:absolute;right:4%;width:35%;opacity:0;bottom:39%;z-index:2;}
.sec03-01__inner .infobox .title{display:block;font-size:50px;color:#fff;text-align:left;margin-bottom:0;}
.sec03-01__inner .infobox .text{display:block;color:#fff;width:100%;line-height:2;width:400px;}
#trigger_sec03{position:absolute;top:0;left:0;}

/* 特技 */

.sec03-02__inner{padding-top:20%;margin-bottom:20px;z-index:10;position:relative;}
.sec03-02__inner .imagebox {width:80%;display:block;background-color:rgb(0,0,0);position:absolute;right:-100px;margin-top:-6%;opacity:0;padding-top:22%;top:0;}
.sec03-02__inner .imagebox .img{position:absolute;right:0;height:100%;display:block;top:0;}
.sec03-02__inner .infobox{position:absolute;left:25%;top:46%;transform:translate(-50%,-50%);width:38%;opacity:0;z-index:2;}
.sec03-02__inner .infobox .title{display:block;font-size:40px;color:#fff;text-align:left;margin-bottom:0;line-height:1;padding-bottom:0.3em;}
.sec03-02__inner .infobox .text{display:block;color:#fff;width:100%;line-height:2;width:450px;}


.sec03-03__inner{padding-top:33%;margin-bottom:80px;z-index:10;position:relative;}
.sec03-03__inner .imagebox {width:58%;display:block;background-color:rgb(0,0,0);position:absolute;left:-100px;opacity:0;top:0;}
.sec03-03__inner .imagebox .movie__wrap{position:absolute;top:0;left:0;width:100%;height:100%;}
.sec03-03__inner .imagebox .movie__wrap .movie{width:100%;display:block;height:100%;}
.sec03-03__inner .imagebox img{display:block;width:100%;}

.sec03-03__inner .infobox{width:40%;position:absolute;right:50px;width:35%;opacity:0;bottom:50%;transform: translate(0,-50%);z-index:2;}
.sec03-03__inner .infobox .title{display:block;font-size:40px;color:#fff;text-align:left;margin-bottom:0;}
.sec03-03__inner .infobox .text{display:block;color:#fff;width:400px;line-height:2;}


.infobox .icon-plus{border:1px solid #fff;background-color:#fff;height:24px;display:inline-block;margin:0 auto;padding:0 20px;line-height:1;opacity:0.8;font-size:16px;margin-top:1.4em;position:absolute;opacity:0.6;transition:all 0.3s;}
.infobox .icon-plus .icon-plus__text{display:inline-block;vertical-align: middle;color:#000;font-size:14px;}
.infobox .icon-plus .icon-plus__icon{width:24px;display:inline-block;vertical-align: middle;margin-left:10px;}

.infobox .icon-plus:hover{opacity:1;}

.infobox .icon-plus.icon-new:before{top:-10px;right:-10px;}
.infobox .icon-plus.icon-new:after{top:-10px;right:-10px;}


/* #contents{padding-top:200px;} */

.background__wrap .cover-noclick{width:100vw;height:100vh;z-index:2;position:absolute;top:0;left:0;background:url(../img/top/cover-pattern.png);}


}




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


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


  /* noload */

  .background_sec01{width:100%;position:absolute;top:0;left:0;z-index: 0;}
  .background_sec01 .img-bg{width:100%;position:absolute;top:0;left:0;z-index: 0;}

  .background_sec02{width:100%;height:100vh;position:absolute;top:0;left:0;z-index: 1;opacity:0;}
  .background_sec02 .img-bg{width:100%;position:absolute;top:0;left:0;z-index: 0;}

  .background_sec03{width:100%;height:100vh;position:absolute;top:0;left:0;z-index: 1;opacity:0;}
  .background_sec03 .img-bg{width:100%;position:absolute;top:0;left:0;z-index: 0;}

  .sec01__wrap{margin:0 auto 0px;width:100vw;position:relative;}
  .sec01__inner{padding:90px 0 60px;position:relative;z-index:2;}
  .sec01__inner .text{color:#fff;text-align:left;line-height:1.8;font-size:14px;width:80%;margin:0 auto;}
  .sec01__wrap .background-text{position:absolute;right:40px;top:30px;}

  .headline-catch{font-size:24px;line-height:1.5;}


  .sec02__wrap{margin-top:0px;}
  .sec02__inner{padding:0px 5% 60px;position:relative;background-color:#000;}
  .sec02__inner .wrap__list{}
  .wrap__list{position:relative;z-index: 1;display:flex;justify-content: space-between;top:-30px;}
  .wrap__list li{width:30%;margin:0 auto 20px;display:block;}
  .sec02__inner .text{color:#ddd;position:relative;font-size:10px!important;}

  .wrap_img{display:block;position:relative;width:100%;box-shadow:0 0 30px rgba(0,0,0,0.5);margin:0 auto;}
  .wrap_img .img{display:block;position:relative;width:100%;}
  .wrap_img .title{display:block;position:absolute;left:0px;top:0px;z-index:2;width:30px;}
  .wrap_img .title img{display:block;width:80%;}

  .wrap_img .icon-plus{display:block;position:absolute;right:-4px;bottom:-4px;opacity:0.8;transition:all 0.2s;transform:scale(0.8);transform-origin: right bottom;width:30px;}
  .wrap_img .icon-plus img{display:block;width:100%;}
  .wrap_img:hover .icon-plus{transform:scale(1);opacity:1;}

  .wrap_img{margin-bottom:25px;}

  .wrap_img .icon-plus.icon-new:before{top:-10px;right:-10px;}
  .wrap_img .icon-plus.icon-new:after{top:-10px;right:-10px;}

  .sec01_bg{width:100%;position:absolute;top:0;left:0;z-index:0;}
  .sec01_bg img{display:block;}


  /* 妖怪の力 */

  .sec03__wrap {z-index:5;position:relative;padding:20px 0 100px;}


  /* 妖怪化 */

  .sec03__wrap .effect{position:absolute;top:0;right:-130px;width:100%;}

  .sec03-01__inner {position:relative;padding:4% 0 0;margin-bottom:10%;}
  .sec03-01__inner .background-text {position:absolute;right:5%;top:0;}
  .sec03-01__inner .imagebox{width:100%;z-index:1;position:relative;}
  .sec03-01__inner .imagebox .movie__wrap{position:absolute;top:0;left:0;width:100%;height:100%;}
  .sec03-01__inner .imagebox .movie__wrap .movie{width:100%;display:block;height:100%;}
  .sec03-01__inner .imagebox img{width:100%;display:block;}
  .sec03-01__inner .infobox{width:80%;position:relative;z-index:2;margin:0 auto;padding:10px 0;}
  .sec03-01__inner .infobox .title{display:block;font-size:30px;color:#fff;text-align:left;margin-bottom:0;}
  .sec03-01__inner .infobox .text{display:block;color:#fff;width:100%;line-height:2;}
  #trigger_sec03{position:absolute;top:0;left:0;}

  /* 特技 */

  .sec03-02__inner{margin-bottom:20px;z-index:10;position:relative;}
  .sec03-02__inner .imagebox {width:90%;display:block;background-color:rgba(88, 1, 1, 0.58);margin-left:10%;}
  .sec03-02__inner .imagebox .img{position:relative;right:0;height:100%;display:none;top:0;}
  .sec03-02__inner .infobox{width:auto;z-index:2;padding:6% 10% 10%;}
  .sec03-02__inner .infobox .title{display:block;font-size:22px;color:#fff;text-align:left;margin-bottom:0;}
  .sec03-02__inner .infobox .text{display:block;color:#fff;width:100%;line-height:2;font-size:12px;}


  .sec03-03__inner {position:relative;padding:10% 0 0;margin-bottom:3%;}
  .sec03-03__inner .background-text {position:absolute;right:5%;top:0;}
  .sec03-03__inner .imagebox{width:100%;z-index:1;position:relative;}
  .sec03-03__inner .imagebox .movie__wrap{position:absolute;top:0;left:0;width:100%;height:100%;}
  .sec03-03__inner .imagebox .movie__wrap .movie{width:100%;display:block;height:100%;}
  .sec03-03__inner .imagebox img{width:100%;display:block;}
  .sec03-03__inner .infobox{width:80%;position:relative;z-index:2;margin:0 auto;padding:10px 0;}
  .sec03-03__inner .infobox .title{display:block;font-size:30px;color:#fff;text-align:left;margin-bottom:0;}
  .sec03-03__inner .infobox .text{display:block;color:#fff;width:100%;line-height:2;}


  .infobox .icon-plus{border:1px solid #fff;background-color:#fff;height:20px;display:inline-block;margin:0 auto;padding:0 20px;line-height:1;opacity:0.8;font-size:14px;margin-top:1em;position:relative;opacity:0.8;}
  .infobox .icon-plus .icon-plus__text{display:inline-block;vertical-align: middle;color:#000;font-size:12px;}
  .infobox .icon-plus .icon-plus__icon{width:20px;display:inline-block;vertical-align: middle;margin-left:10px;}

  /* .infobox .icon-plus:hover{opacity:1;} */

  .infobox .icon-plus.icon-new:before{top:-10px;right:-10px;}
  .infobox .icon-plus.icon-new:after{top:-10px;right:-10px;}


  /* #contents{padding-top:200px;} */

  .background__wrap .cover-noclick{width:100vw;height:100vh;z-index:2;position:absolute;top:0;left:0;background:url(../img/top/cover-pattern.png);background-size:100px;}



}