@charset "utf-8";




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


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

/*  */

.visual__wrap{position:relative;height:100vh;min-height: 700px;}

.visual__wrap .top-news__wrap{position:absolute;top:130px;left:40px;z-index:10;}
.visual__wrap .top-news__wrap .news__wrap{position:relative;background:rgba(0,0,0,0.8);color:#fff;font-size:14px;border:3px solid #4e4128;width:300px;box-sizing: border-box;transition:all 0.5s;box-shadow:0 0 15px rgba(0,0,0,0.8);display:flex;margin-left:0px;opacity:0; margin-bottom:10px;}
.visual__wrap .top-news__wrap .bnr{border:0px solid #000!important;}
.visual__wrap .top-news__wrap .bnr img{width:100%;}
.visual__wrap .top-news__wrap .news__wrap a{display:flex;width:100%;}
.visual__wrap .top-news__wrap .img__wrap{width:160px;margin-right:10px;}
.visual__wrap .top-news__wrap .img__wrap img{width:100%;display:block;}
.visual__wrap .top-news__wrap .info__wrap{padding:5px 7px 5px 0px;width:190px;}
.visual__wrap .top-news__wrap .date{font-size:10px;color:#ba933c;margin-bottom:3px;line-height:1;}
.visual__wrap .top-news__wrap .text{line-height: 1.4;color:#fff;font-size:11px;}
.visual__wrap .top-news__wrap .news__wrap:hover{transform:scale(0.94);}

.visual__wrap .top-news__wrap .news__wrap .animationObj{width:100%;height:100%;position:absolute;top:0;rdisplay:block;background:#4e4128;}

.visual__wrap .top-news__wrap .btn-more{padding:7px 10px;text-align:center;background-color:#000;width:300px;position:relative;box-sizing: border-box;color:#ddd;opacity:0;box-shadow:0 0 3px rgba(0,0,0,0.2);border:0px!important;}
.visual__wrap .top-news__wrap .btn-more a{display: block;}
.visual__wrap .top-news__wrap .btn-more .text{color:#bbb;}

.visual__wrap .top-news__wrap .btn-more.update{border:0px!important;}



.visual__wrap .top-news__wrap .news__wrap:nth-child(4n+1){animation: anime2 0.8s ease ; animation-fill-mode: forwards; animation-delay: 2s;overflow:hidden;}
.visual__wrap .top-news__wrap .news__wrap:nth-child(4n+2){animation: anime2 0.8s ease ; animation-fill-mode: forwards; animation-delay: 2.3s;overflow:hidden;}
.visual__wrap .top-news__wrap .news__wrap:nth-child(4n+3){animation: anime2 0.8s ease ; animation-fill-mode: forwards; animation-delay: 2.6s;overflow:hidden;}
.visual__wrap .top-news__wrap .news__wrap:nth-child(4n+0){animation: anime2 0.8s ease ; animation-fill-mode: forwards; animation-delay: 2.9s;overflow:hidden;}
.visual__wrap .top-news__wrap .news__wrap:nth-child(5n+0){animation: anime2 0.8s ease ; animation-fill-mode: forwards; animation-delay: 3.3s;overflow:hidden;}

.visual__wrap .top-news__wrap .btn-more{animation: anime2 0.8s ease ; animation-fill-mode: forwards; animation-delay: 3.3s;overflow:hidden;margin-bottom:5px;}
.visual__wrap .top-news__wrap .btn-more.update{animation: anime2 0.8s ease ; animation-fill-mode: forwards; animation-delay: 3.5s;margin-top:5px;}
.visual__wrap .top-news__wrap .btn-more.update.icon-new:before{top:10px!important;right:10px!important;}
.visual__wrap .top-news__wrap .btn-more.update.icon-new:after{top:10px!important;right:10px!important;}



.visual__wrap .top-news__wrap .news__wrap:nth-child(4n+1) .animationObj{animation: anime_top-news 0.8s ease ; animation-fill-mode: forwards; animation-delay: 2.5s;}
.visual__wrap .top-news__wrap .news__wrap:nth-child(4n+2) .animationObj{animation: anime_top-news 0.8s ease ; animation-fill-mode: forwards; animation-delay: 2.8s;}
.visual__wrap .top-news__wrap .news__wrap:nth-child(4n+3) .animationObj{animation: anime_top-news 0.8s ease ; animation-fill-mode: forwards; animation-delay: 3.1s;}
.visual__wrap .top-news__wrap .news__wrap:nth-child(4n+0) .animationObj{animation: anime_top-news 0.8s ease ; animation-fill-mode: forwards; animation-delay: 3.3s;}
.visual__wrap .top-news__wrap .news__wrap:nth-child(5n+0) .animationObj{animation: anime_top-news 0.8s ease ; animation-fill-mode: forwards; animation-delay: 3.7s;}

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

/* animations */


.visual__inner{position:relative;width:100%;padding-top:63.7%;opacity:0; animation: anime1 5s ease ;animation-fill-mode: forwards;animation-delay:0.2s;}
.visual-logo{position:absolute;bottom:4vh;left:50%;z-index:3;width:40vw;height:auto;transform: translate(-50%);}
.visual-catch{position:absolute;top:30%;right:20%;z-index:3;width:auto;}
.visual-effect{position:absolute;top:5%;left:-10%;z-index:2;width:60%;}
.visual-chara{position:absolute;top:-7%;left:17%;z-index:1;width:60%;}
.visual-bg{position:absolute;width:110%;top:-7%;left:-5%;z-index:0;;}


.visual-btn_wrap{position:absolute;bottom:4vh;z-index:3;left:50%;transform:translate(-50%,0);}
.visual-btn{padding:6px 60px;border:1px solid #fff;display:inline-block;color:#fff;transition:all 0.5s;position:relative;font-size:14px;}
.visual-btn:after{content:'';display:inline-block;width:16px;background:url(../img/common/direct-w.svg);height:16px;background-size:100%;position:absolute;right:10px;top:50%;transform: translate(0,-50%);}

.visual-btn:hover{background-color:#fff;color:#000;}
.visual-btn:hover:after{content:'';display:inline-block;width:16px;background:url(../img/common/direct-b.svg);height:16px;background-size:100%;position:absolute;right:10px;top:50%;transform: translate(0,-50%);}

.wrap__banner{text-align:center;width:100%;margin-top:80px;}
.wrap__banner:nth-child(2n+1){margin-top:10px;}

.visual__wrap .icon-award__wrap{position:absolute;bottom:30px;left:30px;z-index:3;}
.visual__wrap .icon-award__wrap .icon-award{width:100px;animation: anime_icon-award 0.8s ease; animation-fill-mode: forwards; animation-delay: 3.2s;opacity:0;}

.visual__wrap .banner-tvcm_wrap{z-index: 50;position:absolute;bottom:2vh;right:20px;width:25vw;display:block;}
.visual__wrap .banner-tvcm_wrap_inner{padding-top:64%;}
.visual__wrap .banner-tvcm{transition:all 0.5s;transform-origin: center; animation: anime_banner-tvcm 1s ease; animation-fill-mode: forwards; animation-delay: 2.5s;opacity:0;width:100%;position:absolute;top:0;left:0;}
/* .visual__wrap .banner-tvcm:hover{transform: scale(1.05);} */


/* noload - animation*/

.noload .visual__wrap .top-news__wrap .news__wrap{opacity:0;margin-left:-20px;}
.noload .visual__wrap .top-news__wrap .news__wrap .animationObj{width:100%;height:100%;position:absolute;top:0;right:0%;display:block;background:#4e4128;}
.noload .visual__wrap .icon-award__wrap .icon-award{opacity:0;transform:scale(0.5);}
.noload .visual__wrap .banner-tvcm{opacity:0;}

@keyframes anime2 {
0% {opacity:0;margin-left:-70px;}
100% {opacity:1;margin-left:0px;}
}

@keyframes anime_top-news {
0% {right:0%;}
100% {right:-100%;}
}

@keyframes anime_icon-award {
0% {opacity:0;transform:scale(0.5);}
100% {opacity:1;transform:scale(1);}
}

@keyframes anime_banner-tvcm {
0% {opacity:0;left:20px;}
100% {opacity:1;left:0px}
}



#scrollbar{
  height: 50px;
  width:200px;
  position:fixed;
  z-index: 10;
  transform: translate(-50%);
}

/* #scrollbar:before{
  content:"SCROLL DOWN";
  display: block;
  font-size:13px;
  color:#ddd;
  text-align: center;
} */

#scrollbar:after{
  content:"";
  display: block;
  width: 2px;
  border-left:1px #999 solid;
  animation:scroll 2s ease 0s infinite normal;
  margin: 0 auto 0;
}

@keyframes scroll{
  0%{height: 0;}
  50%{height: 50px;margin-top: 0;}
  100%{height:0;margin-top: 50px;}
}


/*  */

.noload .visual__inner{animation: none;opacity:0;transform:scale(0.95);}

@keyframes anime1 {
0% {opacity:0;transform:scale(0.95);}
100% {opacity:1;transform:scale(1);}
}


.sec01-01__wrap {z-index:5;position:relative;}
.sec01-01__inner {position:relative;padding:44% 0 0;margin-bottom:3%;}
.sec01-01__inner .bgtext {position:absolute;right:5%;top:0;opacity:0;}
.sec01-01__inner .imagebox{width:70%;z-index:1;position:absolute;top:0%;left:0;}
.sec01-01__inner .imagebox .movie__wrap{position:absolute;top:0;left:0;width:100%;height:100%;}
.sec01-01__inner .imagebox .movie__wrap .movie{width:100%;display:block;height:100%;}
.sec01-01__inner .imagebox img{width:100%;display:block;}
.sec01-01__inner .infobox{width:60%;position:absolute;right:20px;width:35%;opacity:0;bottom:150px;z-index:2;}
.sec01-01__inner .infobox .title{display:block;}
.sec01-01__inner .infobox .bar{display:block;margin:30px 0 ;}
.sec01-01__inner .infobox .text{display:block;color:#fff;width:400px;line-height:2;}


.sec01-02__wrap {z-index:4;position:relative;}
.sec01-02__inner {position:relative;padding:26% 0 0;margin-bottom:10%;}
.sec01-02__inner .bgtext {position:absolute;right:5%;top:30px;opacity:0;}
.sec01-02__inner .imagebox{width:70%;padding-top:25%;overflow:hidden;position:absolute;z-index:1;top:0;right:-100px;opacity:0;}
.sec01-02__inner .imagebox img{width:100%;position:absolute;top:0;left:0;}
.sec01-02__inner .infobox{width:60%;position:absolute;top:24%;left:5%;width:35%;opacity:0;z-index:2;}
.sec01-02__inner .infobox .title{display:block;}
.sec01-02__inner .infobox .bar{display:block;margin:30px 0 ;}
.sec01-02__inner .infobox .text{display:block;color:#fff;width:400px;line-height:2;}
.sec01-02__inner .bg{display:block;margin-top:60px;position:absolute;top:-40%;left:0;width:80%;z-index:0;opacity:0;}


.sec02__wrap {z-index:4;position:relative;margin-bottom:0%;}
.sec02__inner {position:relative;padding:0px 0;}
.sec02__inner .bgtext {position:absolute;right:5%;top:30px;opacity:0;}
.sec02__inner .imagebox{width:100%;overflow:hidden;position:relative;z-index:1;height:0;background:url(../img/top/sec02-img.jpg) center center;background-size:100%;}
/* .sec02__inner .imagebox .imagebox__img{height:100%;display:block;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);} */
.sec02__inner .infobox{width:100%;position:absolute;top:26%;z-index:2;text-align:center;opacity:0;}
.sec02__inner .infobox .title{display:block;margin:0 auto;}
.sec02__inner .infobox .bar{display:block;margin:30px auto ;}
.sec02__inner .infobox .text{display:block;color:#fff;width:420px;line-height:2;margin:0 auto;}
#trigger_sec02{position:absolute;top:0;left:0;}


.sec03__wrap {z-index:5;position:relative;}
.sec03__inner {position:relative;padding:0% 0 0;height:80vh;}
.sec03__inner .background-text {position:absolute;right:5%;bottom:20%;opacity:0;z-index:2;}
.sec03__inner .imagebox{width:100%;z-index:1;position:absolute;top:0;left:0;padding-top:35%;}
.sec03__inner .imagebox .iframe__wrap{width:100%;z-index:1;position:absolute;top:-10%;left:0;padding-top:56.6%;}
.sec03__inner .imagebox .iframe__wrap iframe{width:100%;height:100%;top:0;left:0;position:absolute;}
.sec03__inner .infobox{width:50%;position:absolute;right:80px;width:40%;bottom:15%;z-index:2;opacity:0;}
.sec03__inner .infobox .title{display:block;}
.sec03__inner .infobox .bar{display:block;margin:30px 0 ;}
.sec03__inner .infobox .text{display:block;color:#fff;width:100%;line-height:2;max-width:600px;}
#trigger_sec03{position:absolute;top:0;left:0;}


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

.background_sec03{width:100vw;height:100vh;opacity:0;position:absolute;top:0;left:0;}
.background_sec03 .iframe__wrap{width:100vw;height:54.6vw;position:absolute;top:0;left:0;opacity:0.8;display:block;}
.background_sec03 .iframe__wrap iframe{width:100%;height:100%;position:absolute;top:0;left:0;}

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




.topics__wrap{background:url(../img/top/topics_bg.jpg);background-size:cover;box-shadow: 0 0 40px rgba(0,0,0,0.8);z-index:2;opacity:0;position:relative;}
.topics__inner{width:1100px;margin:0 auto;padding:80px 0;}

.topics__inner{display:flex;flex-wrap: wrap;}

.news__wrap{width:50%;}
.news__inner{padding:0 20px;}
.news__wrap .tit{margin:0 auto 30px;display:block;}

.news__wrap .news__list{padding:20px 0;border-bottom:1px solid #888;position:relative;}
.news__wrap .news__list a{display:flex;position:relative;}
.news__wrap .news__list .img__wrap{width:200px;}
.news__wrap .news__list .img__wrap img{width:100%;display:block;}

.news__wrap .news__list .info__wrap{width:400px;padding-left:20px;}
.news__wrap .news__list .text{color:#eee;font-size:14px;line-height:1.5;}
.news__wrap .news__list .date{color:#eee;font-size:12px;margin-bottom:0.4em;color:#dcd0a6;}

.twitter-timeline__wrap{width:50%;}
.twitter-timeline__inner{padding:0 20px;}
.twitter-timeline__wrap .tit{margin:0 auto 30px;display:block;}
.twitter-timeline__wrap .timeline__wrap #twitter-widget-0{margin:0 auto!important;display:block!important;}


.banner_l{width:1000px;margin:0 auto;box-shadow:0 0 10px rgba(0,0,0,0.5);}
.banner_m{width:350px;margin:0 10px;box-shadow:0 0 10px rgba(0,0,0,0.5);}



.spec__wrap{background:url(../img/top/spec_bg.jpg) center center;background-size:cover;z-index:0;opacity:0;position:relative;z-index:1;background-attachment: fixed;}
.spec__inner{width:1200px;margin:0 auto;color:#fff;text-align:center;padding:120px 0;}
.spec__wrap .title{margin-bottom:1em;padding-bottom:0.5em;display:block;margin:0 auto 60px;}
.spec__wrap .name{font-size:24px;line-height:1.4;margin:20px 0 5px;}
.spec__wrap .version{font-size:13px;line-height:1.4;color:#bfae63;}
.spec__wrap .price{font-size:16px;line-height:1.4;}
.spec__wrap .price .num{font-size:40px;font-style: italic;margin:0 5px;}

.spec__wrap .info-exp{box-sizing: border-box;width:800px;margin:30px auto 0;font-size:14px;text-align: left;background-color: rgba(0,0,0,0.3);padding:25px 30px;color:#bfae63;}

.spec__wrap .btn{margin-top:60px;}

.flex__box{margin:0 2%;}
.flex__box:nth-child(2n+1){width:28%;}
.flex__box:nth-child(2n+2){width:60%;}
.flex__box .img{width:100%;}
.flex__box:nth-child(2n+1) .img{width:100%;}
.flex__box:nth-child(2n+2) .img{box-shadow:0 0 10px rgba(0,0,20,0.8);}

.wrap__banner ul{display:flex;justify-content:center;}

.item-wrap__flex{display:flex;justify-content: center;flex-wrap: wrap;}


}


/* IE10以降 */

@media all and (-ms-high-contrast: none) { /* ハイコントラストモードが「オフ」の場合 ie opacityアニメーション効かない*/
    .visual__wrap .top-news__wrap .news__wrap {opacity:1;margin-left:0px;}
    .visual__wrap .top-news__wrap .news__wrap .animationObj{right:-100%;}
    .visual__inner{opacity:1;transform:scale(1);}
    .visual__wrap .icon-award__wrap .icon-award{opacity:1;transform:scale(1);}
}


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

  .visual-logo{position:absolute;bottom:4vh;left:50%;z-index:3;width:37vw;height:auto;transform: translate(-50%);}

  .visual__wrap .top-news__wrap{position:absolute;top:130px;left:40px;z-index:10;}
  .visual__wrap .top-news__wrap .news__wrap{position:relative;background:rgba(0,0,0,0.8);color:#fff;font-size:14px;border:3px solid #4e4128;width:400px;box-sizing: border-box;transition:all 0.5s;box-shadow:0 0 15px rgba(0,0,0,0.8);display:flex;margin-left:0px;opacity:0; margin-bottom:10px;}
  .visual__wrap .top-news__wrap .news__wrap a{display:flex;width:100%;}
  .visual__wrap .top-news__wrap .img__wrap{width:200px;margin-right:15px;}
  .visual__wrap .top-news__wrap .img__wrap img{width:100%;display:block;}
  .visual__wrap .top-news__wrap .info__wrap{padding:10px 20px 15px 0px;width:190px;}
  .visual__wrap .top-news__wrap .date{font-size:12px;color:#ba933c;margin-bottom:8px;}
  .visual__wrap .top-news__wrap .text{line-height: 1.4;color:#fff;font-size:13px;word-break: break-all;}
  .visual__wrap .top-news__wrap .news__wrap:hover{transform:scale(0.94);}

  .visual__wrap .top-news__wrap .news__wrap .animationObj{width:100%;height:100%;position:absolute;top:0;rdisplay:block;background:#4e4128;}

  /* .visual__wrap .top-news__wrap .btn-more{padding:5px 10px;text-align:center;background-color:#534a37;width:300px;margin-right:10px;position:relative;box-sizing: border-box;color:#ddd;opacity:0;} */
  .visual__wrap .top-news__wrap .btn-more a{display:block;text-align: center;}

  .visual__wrap .top-news__wrap .btn-more{position:relative;font-size:14px;border:3px solid #4e4128;width:400px;box-sizing: border-box;transition:all 0.5s;opacity:0;margin-bottom:0px;animation: anime2 0.8s ease ; animation-fill-mode: forwards; animation-delay: 3.3s;overflow:hidden;}
  .visual__wrap .top-news__wrap .btn-more.update.icon-new:before{top:10px!important;right:10px!important;}
  .visual__wrap .top-news__wrap .btn-more.update.icon-new:after{top:10px!important;right:10px!important;}

  .visual-btn_wrap{position:absolute;bottom:3;z-index:3;left:50%;transform:translate(-50%,0);}
  .visual-btn{padding:6px 80px;display:inline-block;color:#fff;transition:all 0.5s;position:relative;font-size:16px;}
  .visual-btn:after{content:'';display:inline-block;width:16px;background:url(../img/common/direct-w.svg);height:16px;background-size:100%;position:absolute;right:10px;top:50%;transform: translate(0,-50%);}


  #scrollbar{
    height: 60px;
    width:200px;
    position:fixed;
    z-index: 10;
    transform: translate(-50%);
  }

  /* #scrollbar:before{
    content:"SCROLL DOWN";
    display: block;
    font-size:14px;
    color:#ddd;
    text-align: center;
  } */

  #scrollbar:after{
    content:"";
    display: block;
    width: 2px;
    border-left:1px #999 solid;
    animation:scroll 2s ease 0s infinite normal;
    margin: 0 auto 0;
  }

  @keyframes scroll{
    0%{height: 0;}
    50%{height: 60px;margin-top: 0;}
    100%{height:0;margin-top: 60px;}
  }

  .visual__wrap .top-news__wrap .news__wrap:nth-child(4n+1){animation: anime2 0.8s ease ; animation-fill-mode: forwards; animation-delay: 2s;overflow:hidden;}
  .visual__wrap .top-news__wrap .news__wrap:nth-child(4n+2){animation: anime2 0.8s ease ; animation-fill-mode: forwards; animation-delay: 2.3s;overflow:hidden;}
  .visual__wrap .top-news__wrap .news__wrap:nth-child(4n+3){animation: anime2 0.8s ease ; animation-fill-mode: forwards; animation-delay: 2.6s;overflow:hidden;}
  .visual__wrap .top-news__wrap .news__wrap:nth-child(4n+0){animation: anime2 0.8s ease ; animation-fill-mode: forwards; animation-delay: 2.9s;overflow:hidden;}
  .visual__wrap .top-news__wrap .news__wrap:nth-child(5n+0){animation: anime2 0.8s ease ; animation-fill-mode: forwards; animation-delay: 3.3s;overflow:hidden;}



  .visual__wrap .top-news__wrap .news__wrap:nth-child(4n+1) .animationObj{animation: anime_top-news 0.8s ease ; animation-fill-mode: forwards; animation-delay: 2.5s;}
  .visual__wrap .top-news__wrap .news__wrap:nth-child(4n+2) .animationObj{animation: anime_top-news 0.8s ease ; animation-fill-mode: forwards; animation-delay: 2.8s;}
  .visual__wrap .top-news__wrap .news__wrap:nth-child(4n+3) .animationObj{animation: anime_top-news 0.8s ease ; animation-fill-mode: forwards; animation-delay: 3.1s;}
  .visual__wrap .top-news__wrap .news__wrap:nth-child(4n+0) .animationObj{animation: anime_top-news 0.8s ease ; animation-fill-mode: forwards; animation-delay: 3.3s;}
  .visual__wrap .top-news__wrap .news__wrap:nth-child(5n+0) .animationObj{animation: anime_top-news 0.8s ease ; animation-fill-mode: forwards; animation-delay: 3.7s;}


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

}




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


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

/* 背景 */

  .background_sec01{width:100%;height:100vh;position:absolute;top:0;left:0;background-color:#000;}
  .background_sec01 .img-bg{width:100%;opacity:1;position:absolute;top:0;left:0;}

  .background_sec03{width:100vw;height:100vh;opacity:0;position:absolute;top:0;left:0;}
  .background_sec03 .iframe__wrap{width:100vw;height:54.6vw;position:absolute;top:0;left:0;opacity:0.8;display:block;}
  .background_sec03 .iframe__wrap iframe{width:100%;height:100%;position:absolute;top:0;left:0;}

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


/* ビジュアル */

  .visual__wrap{position:relative;padding-bottom:230%;background:#000;}
  .banner-tvcm{width:100%;}

  /* ニュース */

  .visual__wrap .top-news__wrap{position:absolute;z-index:10;width:100%;animation: anime1 0.8s ease ;animation-fill-mode: forwards;animation-delay:1.4s;opacity:0;width:92%;left:4%;top:12px;}
  .visual__wrap .top-news__wrap .news__wrap{background:rgb(41, 41, 41);color:#fff;font-size:12px;width:96%;box-sizing: border-box;transition:all 0.2s;box-shadow:0 0 15px rgba(0,0,0,0.8);border:1px solid #666;position: relative;margin:0 4px;}
  .slick-list{overflow: visible!important;}

  .top-news__wrap.view01_sp .news__wrap:first-child{display:block;}
  .top-news__wrap.view02_sp .news__wrap:nth-child(5n+2){display:block;}
  .top-news__wrap.view02_sp .btn-more{display:block;padding-top:30%;width:0;}
  .visual__wrap .top-news__wrap .news__wrap a{display:flex;}
  .visual__wrap .top-news__wrap .date{font-size:7px;color:#ba933c;margin-bottom:4px;line-height:1;}
  .visual__wrap .top-news__wrap .text{line-height: 1.4;color:#fff;font-size:10px;}

  .visual__wrap .top-news__wrap .img__wrap{width:36%;margin-right:10px;}
  .visual__wrap .top-news__wrap .img__wrap img{width:100%;display:block;}
  .visual__wrap .top-news__wrap .info__wrap{padding:10px 20px 10px 0px;width:64%;box-sizing: border-box;}

  /* noload - animation*/

  .noload .visual__wrap .top-news__wrap .news__wrap{opacity:0;margin-top:-70px;}

  @keyframes anime1 {
  0% {opacity:0;margin-top:-70px;}
  100% {opacity:1;margin-top:0px;}
  }


  /* ビジュアル */

  .visual__inner{position:absolute;;width:100%;padding-bottom:230%;top:0;left:0;}
  .visual-logo{position:absolute;bottom:35%;left:50%;z-index:3;width:90%;transform: translate(-50%);transition:all 2s;opacity:1;}
  .visual-catch{position:absolute;top:17%;right:6%;z-index:3;width:10%;}
  .visual-effect{position:absolute;top:5%;left:-10%;z-index:2;width:60%;}
  .visual-chara{position:absolute;top:-5%;left:17%;z-index:1;width:60%;}
  .visual-bg{position:absolute;width:100%;z-index:0;}

.visual-btn_wrap{position:absolute;bottom:3.5%;width:90%;z-index:3;left:5%;}
  .visual-btn{padding:8px 0px;border:1px solid #aaa;display:block;color:#fff;box-sizing: border-box;width:87%;text-align:center;margin:20px auto 30px;position:relative;}
  .visual-btn:after{content:'';display:inline-block;width:16px;background:url(../img/common/direct-w.svg);height:16px;background-size:100%;position:absolute;right:10px;top:50%;transform: translate(0,-50%);}

  .visual__wrap .icon-award__wrap{position:absolute;display:block;right:30px;bottom:30px;z-index:10;display:none;}





  .sec01__wrap{margin-bottom:10%;}

  /* 戦闘 */

  .sec01-01__wrap {z-index:5;position:relative;}
  .sec01-01__inner {position:relative;padding:0% 0 0;margin-bottom:3%;}
  .sec01-01__inner .background-text {position:absolute;right:5%;top:30%;width:28%;z-index:2;}
  .sec01-01__inner .imagebox{width:100%;z-index:1;position:relative;}
  .sec01-01__inner .imagebox .movie__wrap{position:absolute;top:0;left:0;width:100%;height:100%;}
  .sec01-01__inner .imagebox .movie__wrap .movie{width:100%;display:block;height:100%;}
  .sec01-01__inner .imagebox img{width:100%;display:block;}
  .sec01-01__inner .infobox{position:relative;width:80%;z-index:2;margin:0 auto;padding:8% 0;}
  .sec01-01__inner .infobox .title{display:block;width:80%;}
  .sec01-01__inner .infobox .bar{display:block;margin:30px 0 ;width:90%;}
  .sec01-01__inner .infobox .text{display:block;color:#fff;width:100%;line-height:2;}


  /* 妖怪の力 */

  .sec01-02__wrap {z-index:4;position:relative;}
  .sec01-02__inner {position:relative;padding:10% 0 14%;}
  .sec01-02__inner .bgtext {position:absolute;right:5%;top:30px;}
  .sec01-02__inner .imagebox{width:100%;position:absolute;z-index:1;top:0;height:100%;display:block;}
  .sec01-02__inner .imagebox .image{width:80%;display:block;left:0;position:absolute;bottom:0;}
  .sec01-02__inner .infobox{position:relative;width:47%;z-index:2;margin-left:42%;background-color:rgba(105, 0, 0, 0.57);padding:5% 10% 5% 5%;box-shadow: 0 0 20px rgba(0,0,0,0.8);}
  .sec01-02__inner .infobox .title{display:block;width:70%;}
  .sec01-02__inner .infobox .bar{display:block;margin:24px 0 ;width:100%;}
  .sec01-02__inner .infobox .text{display:block;color:#fff;width:100%;line-height:2;font-size:14px;}
  .sec01-02__inner .bg{display:block;margin-top:60px;position:absolute;top:-40%;left:0;width:80%;z-index:0;opacity:0;}


  /* あなただけの主人公 */

  .sec02__wrap {z-index:4;position:relative;margin-bottom:0%;}
  .sec02__inner {position:relative;padding:0px 0;}
  .sec02__inner .bgtext {position:absolute;right:5%;top:30px;opacity:0;}
  .sec02__inner .imagebox{width:100%;overflow:hidden;position:relative;z-index:1;background:url(../img/top/sec02-img-sp.jpg) center top;background-size:100%;padding-top:60%;background-repeat:no-repeat;background-color:#1a2332;}
  .sec02__inner .infobox{width:84%;z-index:2;text-align:center;padding-bottom:12%;margin:0 auto;}
  .sec02__inner .infobox .title{display:block;margin:0 auto;width:88%;}
  .sec02__inner .infobox .bar{display:block;margin:20px auto ;width: 80%;}
  .sec02__inner .infobox .text{display:block;color:#fff;width:100%;line-height:2;margin:0 auto;}
  #trigger_sec02{position:absolute;top:0;left:0;}


  .sec03__wrap {z-index:5;position:relative;}
  .sec03__inner {position:relative;padding:20% 0;}
  .sec03__inner .background-text {position:absolute;right:5%;top:27%;z-index:2;width:40%;}
  .sec03__inner .imagebox{width:100%;z-index:1;position:relative;top:0;left:0;padding-top:35%;}
  .sec03__inner .imagebox .iframe__wrap{width:100%;z-index:1;position:absolute;top:-10%;left:0;padding-top:56.6%;}
  .sec03__inner .imagebox .iframe__wrap iframe{width:100%;height:100%;top:0;left:0;position:absolute;}
  .sec03__inner .infobox{width:80%;position:relative;z-index:2;margin:8% auto;}
  .sec03__inner .infobox .title{display:block;width:100%;}
  .sec03__inner .infobox .bar{display:block;margin:30px 0 ;}
  .sec03__inner .infobox .text{display:block;color:#fff;width:100%;line-height:2;max-width:600px;}
  #trigger_sec03{position:absolute;top:0;left:0;}

  #tgt_movie_sec03_sp{width:100%;}
  #tgt_movie_sec03_sp .movie{width:100%;}
    #tgt_movie_sec03_sp img{width:100%;}


  /* ニュース部分 */

  .topics__wrap{background:url(../img/top/topics_bg.jpg);background-size:cover;box-shadow: 0 0 40px rgba(0,0,0,0.8);z-index:2;position:relative;}
  .topics__inner{margin:0 auto;padding:10% 12%;}

  .news__wrap{width:100%;}
  .news__inner{padding:0 0px;}
  .news__wrap .tit{margin:0 auto 10px;display:block;width:80px;}



  .news__wrap .news__list{padding:20px 0;border-bottom:1px solid #888;position:relative;}
  .news__wrap .news__list a{display:flex;position:relative;}
  .news__wrap .news__list .img__wrap{width:160px;display:none;}
  .news__wrap .news__list .img__wrap img{width:100%;display:block;}

  .news__wrap .news__list .info__wrap{width:400px;}
  .news__wrap .news__list .text{color:#eee;font-size:13px;line-height:1.5;}
  .news__wrap .news__list .date{color:#eee;font-size:11px;margin-bottom:0.2em;color:#dcd0a6;}

  .twitter-timeline__wrap{width:50%;}
  .twitter-timeline__inner{padding:0 20px;}
  .twitter-timeline__wrap .tit{margin:0 auto 30px;display:block;}
  .twitter-timeline__wrap .timeline__wrap #twitter-widget-0{margin:0 auto!important;display:block!important;}

  .banner_l{width:100%;display:block;margin-top:10px;}
  .banner_m{width:100%;display:block;margin-top:10px;}



  .spec__wrap{background:#000 url(../img/top/spec_bg-sp.jpg) center top no-repeat;background-size:150%;z-index:0;position:relative;z-index:1;}
  .spec__inner{width:100%;margin:0 auto;color:#fff;text-align:center;padding:60px 0;}
  .spec__wrap .title{margin-bottom:1em;padding-bottom:0.5em;display:block;margin:0 auto 60px;width:120px;}
  .spec__wrap .name{font-size:20px;line-height:1.4;margin:20px 0 5px;}
  .spec__wrap .version{font-size:12px;line-height:1.4;color:#bfae63;}
  .spec__wrap .price{font-size:14px;line-height:1.4;}
  .spec__wrap .price .num{font-size:38px;font-style: italic;margin:0 5px;}

  .spec__wrap .info-exp{box-sizing: border-box;width:90%;margin:30px auto 0;font-size:11px;text-align: left;background-color: rgba(40,40,40,0.3);padding:8% 5%;color:#bfae63;}

  .spec__wrap .btn img{margin:40px auto 0;width:90%;}

  .flex__box{margin:0 0%;}
  .flex__box:nth-child(2n+1){width:80%;margin:0 auto 14%;}
    .flex__box:nth-child(2n+1) .img{margin-top:-19%;}
  .flex__box:nth-child(2n+1) .name{margin-top:-18%;}
  .flex__box:nth-child(2n+2){width:94%;margin:0 auto;}
  .flex__box .img{width:100%;}
  .flex__box:nth-child(2n+1) .img{width:92%;}
  .flex__box:nth-child(2n+2) .img{box-shadow:0 0 10px rgba(0,0,20,0.8);}




  /* .spec__inner .icon-award-spec{position:absolute;bottom:20px;right:20px;z-index:10;width:50px;} */

}
