@charset "utf-8";

/* ==================================================
にじよめリニューアル本番ページ SP
================================================== */

/* 構成

・SP共通設定
├ fixedAnimation
├ heroArea
├ intro
├ charactor
├ twitter
├ animation SP/PC

-- media query min 768px

・PC共通設定
├ fixedAnimation
├ fixedAnimation
├ heroArea
├ intro
├ charactor
├ twitter

*/


#article .pc{
  display: none;
}

#article {
  position: relative;
  width: 100%;
  margin: 0 auto;
  background: #fff;
  overflow: hidden;
}

#article .articleInner{
  position: relative;
  top: 0;
  width: 100vw;
  background: #ffdecf;
  transition: 0.25s;
}

#article .articleInner.blueBg{
  background: #9ac7ff;
}

#article img{
  display: block;
  vertical-align: bottom;
  width: 100%;
}

#article .bgAnime{
  position: absolute;
  width: calc(100% + 102px);
  height: calc(100% + 102px);
  background: rgba(0,0,0,0) url(../../../img/contents/lp/article2001_03/bg_pat-20.png) repeat 0 0;
  background-size: 102px 102px;
  -webkit-animation: anime-topBg 5s linear infinite;
  animation: anime-topBg 5s linear infinite;
  top: -102px;
  z-index: 0;
}
@-webkit-keyframes anime-topBg {
  0% {
      -webkit-transform: translate3d(-102px, 0, 0);
      transform: translate3d(-102px, 0, 0)
  }
  100% {
      -webkit-transform: translate3d(0, 102px, 0);
      transform: translate3d(0, 102px, 0)
  }
}
@keyframes anime-topBg {
  0% {
      -webkit-transform: translate3d(-102px, 0, 0);
      transform: translate3d(-102px, 0, 0)
  }
  100% {
      -webkit-transform: translate3d(0, 102px, 0);
      transform: translate3d(0, 102px, 0)
  }
}

#article .articleInner.blueBg .bgAnime{
  background: rgba(0,0,0,0) url(../../../img/contents/lp/article2001_03/bg_pat-10.png) repeat 0 0;
  background-size: 102px 102px;
}


/* ---- fixedAnimation ----- */

/* -- フロントカバー -- */
#article #fixed-animation{
  /* display: none; */
  z-index: 9;
  position: relative;
  top: 0;
  background: #200a00;
  height: 100%;
}

#article #fixed-animation .front-cover{
  position: absolute;
  width: 100vw;
  top: 0;
  z-index: 110;
}

#article #fixed-animation .front-cover .front-cover-img_top{
  position: absolute;
  width: 100vw;
  top:0;
  z-index: 110;
}

#article #fixed-animation .front-cover .front-cover-img_left,
#article #fixed-animation .front-cover .front-cover-img_right{
  position: absolute;
  display: none;
}

/* -- スライド(予定)カーテン -- */
#article #fixed-animation .slide-cover{
  position: absolute;
  width: 100vw;
  top: 0;
}

#article #fixed-animation .slide-cover .slide-cover-img_left,
#article #fixed-animation .slide-cover .slide-cover-img_right{
  position: absolute;
  width: 59.64vw;
}

#article #fixed-animation .slide-cover .slide-cover-img_left{ left: 0;}
#article #fixed-animation .slide-cover .slide-cover-img_right{ right: 0;}


/* キャラシルエット・スポットライト */
#article #fixed-animation .silhouette-wrap{
  position: absolute;
  width: 100vw;
  top: 0;
}

#article #fixed-animation .silhouette-wrap .silhouette-chara{
  position: absolute;
  top: 30vw;
/*   opacity: 0; */
}

#article .silhouette-wrap [class^="silhouette-light"]{
  position: absolute;
  top: 5vw;
  width: 85.16vw;
  left: 0;
  right: 0;
  margin: 0 auto;

}

#article .silhouette-wrap .silhouette-light_01{
  margin-left: -25vw;
}

#article .silhouette-wrap .silhouette-light_03{
  margin-right: -25vw;
}


/* しゃべるにじよめちゃん */
#article .talk-wrap{
  position: absolute;
  width: 100vw;
  top: 30vw;
}

#article #fixed-animation .talk-wrap .chara-nijiyomechang{
  position: absolute;
  width: 42.32vw;
  right: 0;
  top: 33vw;
  z-index: 20;
}

#article #fixed-animation .flash-img{
  position: absolute;
  width: 100vw;
  top: 0;
  z-index: 120;;
}

#article #fixed-animation .flash-img img{
  opacity: 0;
}

#article #fixed-animation .flash-img .white-bg{
  position: absolute;
  width: 100vw;
  height: 100%;
  background: #fff;
  z-index: 110;
  top: 0;
  opacity: 0;
}

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


/* -- heroArea -- */
#article .heroArea{
  position: relative;
}

/* - ロゴテキスト - */
#article .heroArea h1{
  position: absolute;
  top: 50vw;
  left: 0;
  right: 0;
  margin: 0 auto;
  width: 92.84vw;
  z-index: 1;
}

/* 背景アニメーション */
#article .heroArea .bg-stepAnime{
  position: relative;
  background: url(../../../img/contents/lp/article2001_03/heroarea_sp_anime_bg.png) no-repeat 0 0;
  background-size: cover;
  width: 100vw;
  padding-top: 157.69vw;
  height: 0;
  line-height: 200%;
  overflow: hidden;
}


/* キャラクター */
#article .heroArea .chara{
  position: absolute;
  top: 7vw;
  width: 100vw;
}

/* カバーカーテン */
#article .heroArea .cover{
  position: absolute;
  width: 100vw;
  top: 0;
}

/* にじよめちゃん */
#article .heroArea .chara-nijiyomechan{
  position: absolute;
  width: 35.16vw;
  top: 99vw;
  right: -5vw;
}

/* キラキラ */
#article .kiraWrap{
  position: absolute;
  top: 0;
  z-index: 8;
  width: 100vw;
  height: 158vw;
  overflow: hidden;　/* はみ出るのを隠す */
}

/* 画像本体 */
#article .kiraWrap i{
  position: absolute;
  background: url(../../../img/contents/lp/article2001_03/heroarea_kira_01.png) no-repeat 0 0;
  background-size: contain;
  width: 11.2vw;
  padding-top: 12.89vw;
  /* opacity: 0; */
}


#article .kiraWrap i.type-02{
  background: url(../../../img/contents/lp/article2001_03/heroarea_kira_02.png) no-repeat 0 0;
  background-size: contain;
  width: 10.68vw;
  padding-top: 12.37vw;
}

#article .kiraWrap i.type-03{
  background: url(../../../img/contents/lp/article2001_03/heroarea_kira_03.png) no-repeat 0 0;
  background-size: contain;
  width: 12.89vw;
  padding-top: 13.41vw;
}


#article .kiraWrap.start i{
  opacity: 1;
}

#article .kiraWrap i {top: 79vw;left: 90vw;}
#article .kiraWrap i:nth-of-type(2) {top: 5vw;left: 60vw;}
#article .kiraWrap i:nth-of-type(3) {top: 15vw;left: 25vw;}
#article .kiraWrap i:nth-of-type(4) {top: 95vw;left: 64vw;}
#article .kiraWrap i:nth-of-type(5) {top: 90vw;left: 5vw;}
#article .kiraWrap i:nth-of-type(6) {top: 35vw;left: 75vw; }
#article .kiraWrap i:nth-of-type(7) {top: 125vw;left: 20vw;}
#article .kiraWrap i:nth-of-type(8) {top: 35vw;left: 30vw;}
#article .kiraWrap i:nth-of-type(9) {top: 55vw;left: 80vw; }
#article .kiraWrap i:nth-of-type(10) {top: 35vw;left: 10vw; }


/* animation */
#article .kiraWrap i {
  -webkit-animation: float-up 3s ease 0s infinite both;
  animation: float-up 3s ease 0s infinite both;
}

@-webkit-keyframes float-up{
  0%  { opacity: 0; -webkit-transform: translateY(0);}
  50% { opacity: 1;}
  100%{ -webkit-transform: translateY(-15px);}
}

@keyframes float-up{
  0%  { opacity: 0; transform: translateY(0);}
  50% { opacity: 1;}
  100%{ opacity: 0; transform: translateY(-15px);}
}

/* delay */
#article .kiraWrap i { animation-delay: 0s;}
#article .kiraWrap i:nth-of-type(2) { animation-delay: 1.5s;}
#article .kiraWrap i:nth-of-type(3) { animation-delay: 0.5s;}
#article .kiraWrap i:nth-of-type(4) { animation-delay: 0.1s;}
#article .kiraWrap i:nth-of-type(5) { animation-delay: 0.5s;}
#article .kiraWrap i:nth-of-type(6) { animation-delay: 0.8s;}
#article .kiraWrap i:nth-of-type(7) { animation-delay: 1.3s;}
#article .kiraWrap i:nth-of-type(8) { animation-delay: 0.2s;}
#article .kiraWrap i:nth-of-type(9) { animation-delay: 0.4s;}
#article .kiraWrap i:nth-of-type(10){ animation-delay: 1.5s;}



/* -- intro -- */
#article .intro{
  position: relative;
  margin-top: 4vw;
}

#article .intro h2{
  position: relative;
  width: 100vw;
}

/* -- charactor -- */
#article .charactor{
  position: relative;
  margin-top: 7vw;
}

#article .charactor h2{
  position: absolute;
  width: 98.57vw;
  top: 26vw;
  left: 0;
  right: 0;
  margin: 0 auto;
}

#article .charactor .charactor-bg{
  width: 100vw;
}

charactor-bg img{}


#article .charactor .charactor-img{
  position: absolute;
  top: 54vw;
}

/* -- twitter -- */
#article .twitter{
  position: relative;
  margin-top: 9vw;
  padding-bottom: 10vw;
}

#article .twitter h2{
  position: relative;
  width: 62.76vw;
  margin: 0 auto;
}

#article .twitter .box-flex{
  display: flex;
  justify-content: center;
  margin-top: 14vw;
  z-index: 5;
  position: relative;
}

#article .twitter .catch{
  width: 47.14vw;
  margin-left: 3vw;
  margin-top: 2vw;
}

#article .twitter .chara{
  width: 35.55vw;
}


#article .twitter .box-twitter{
  margin-top: 3vw;
}

/* 背景の丸 */

#article .intro::before,
#article .charactor::before,
#article .twitter::before{
  display: block;
  content:"";
  width: 52.09vw;
  padding-top: 52.09vw;
  height: 0;
  background: url(../../../img/contents/lp/article2001_03/circle.png) no-repeat 0 0;
  background-size: cover;
  position: absolute;
  z-index: 0;
}

#article .intro::before{
  top: -12vw;
  left: 54vw;
}

#article .charactor::before{
  top: 13vw;
  left: -20vw;
  opacity: 0.8;
}

#article .twitter::before{
  top: -20vw;
  left: 60vw;
  opacity: 0.8;
}


/* ==================================================
にじよめリニューアル予告ページ　PC
================================================== */
@media screen and (min-width: 767px){
#article .sp{ display: none;}
#article .pc{ display: block;}

#contentsWrap02{
  background: #200a00;
}

#article {
  width: 1920px;
  left: 50%;
  margin-left: -960px;
  /* min-height: 100vh; */
  overflow: hidden;
}

#article .articleInner{
  width: 1920px;
}

#article img{
  width: auto;
}


/* ---- fixedAnimation ----- */
#article #fixed-animation{
  width: 1920px;
  height: 100%;
}


/* -- フロントカバー -- */
#article #fixed-animation .front-cover{
  width: 1920px;
}

#article #fixed-animation .front-cover .front-cover-img_top{
  width: 1920px;
  z-index: 10;
}

#article #fixed-animation .front-cover .front-cover-img_left,
#article #fixed-animation .front-cover .front-cover-img_right{
  display: block;
}

#article #fixed-animation .front-cover .front-cover-img_left{
  width: 569px;
  left: 0;
  top: 20px;
}

#article #fixed-animation .front-cover .front-cover-img_right{
  width: 560px;
  right: 0;
  top: 20px;
}

/* -- スライド(予定)カーテン -- */
#article #fixed-animation .slide-cover{
  width: 1920px;
}


#article #fixed-animation .slide-cover .slide-cover-img_left,
#article #fixed-animation .slide-cover .slide-cover-img_right{
  position: absolute;
  width: auto;
}


/* キャラシルエット・スポットライト */
#article #fixed-animation .silhouette-wrap{
  width: 1920px;
  top: 0;
}

#article #fixed-animation .silhouette-wrap .silhouette-chara{
  top: 240px;
  left: 50%;
  margin-left: -497px;
}

#article .silhouette-wrap [class^="silhouette-light"]{
  top: 50px;
  width: 654px;
  left: 0;
  right: 0;
  margin: 0 auto;
}

#article .silhouette-wrap .silhouette-light_01{
  margin-left: 285px;
}

#article .silhouette-wrap .silhouette-light_03{
  margin-right: 285px;
}


/* しゃべるにじよめちゃん */
#article #fixed-animation .talk-wrap{
  width: 1920px;
  top: 300px;
}

#article #fixed-animation .talk-wrap .chara-nijiyomechang{
  width: 422px;
  right: 280px;
  top: 190px;
}


#article #fixed-animation .flash-img{
  width: 1920px;
}

#article #fixed-animation .flash-img .white-bg{
  width: 1920px;
}


/* キラキラ */
#article #fixed-animation .kiraWrap{
  width: 1920px;
  height: 1020px;
  overflow: hidden;　/* はみ出るのを隠す */
}

/* 画像本体 */
#article .kiraWrap i{
  position: absolute;
  background: url(../../../img/contents/lp/article2001_03/heroarea_kira_01.png) no-repeat 0 0;
  background-size: contain;
  width: 86px;
  padding-top: 99px;
  /* opacity: 0; */
}

#article .kiraWrap i.type-02{
  background: url(../../../img/contents/lp/article2001_03/heroarea_kira_02.png) no-repeat 0 0;
  background-size: contain;
  width: 82px;
  padding-top: 95px;
}

#article .kiraWrap i.type-03{
  background: url(../../../img/contents/lp/article2001_03/heroarea_kira_03.png) no-repeat 0 0;
  background-size: contain;
  width: 99px;
  padding-top: 103px;
}


#article #fixed-animation .kiraWrap.start i{
  opacity: 1;
}

#article .kiraWrap i {top: 150px;left: 480px;}
#article .kiraWrap i:nth-of-type(2) {top: 80px;left : 50%;margin-left: -30px;}
#article .kiraWrap i:nth-of-type(3) {top: 850px;left : 50%;margin-left: 20px;}
#article .kiraWrap i:nth-of-type(4) {top: 830px;left : 50%;margin-left: -570px;}
#article .kiraWrap i:nth-of-type(5) {top: 700px;left : 50%;margin-left: 430px;}
#article .kiraWrap i:nth-of-type(6) {top: 390px;left : 50%;margin-left: 510px;}
#article .kiraWrap i:nth-of-type(7) {top: 710px;left : 50%;margin-left: -410px;}
#article .kiraWrap i:nth-of-type(8) {top: 550px; left : 50%; margin-left: 200px;}
#article .kiraWrap i:nth-of-type(9) {top: 550px;left : 50%;margin-left: -530px;}
#article .kiraWrap i:nth-of-type(10) {top: 250px;left : 50%;margin-left: 100px;}






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

/* -- heroArea -- */

/* - ロゴテキスト - */
#article .heroArea h1{
  position: absolute;
  top: 430px;
  left: 0;
  right: 0;
  margin: 0 auto;
  width: 713px;
}


/* 背景アニメーション */
#article .heroArea .bg-stepAnime{
  background: url(../../../img/contents/lp/article2001_03/heroarea_pc_anime_bg.png) no-repeat 0 0;
  background-size: cover;
  width: 1920px;
  padding-top: 1305px;
  text-indent: 100%;
  white-space: nowrap;
}

/* キャラクター */
#article .heroArea .chara{
  top: 70px;
  left: 50%;
  margin-left: -700px;
  width: 1300px;
}


#article .heroArea .chara-nijiyomechan {
  position: absolute;
  width: 270px;
  top: 760px;
  left: 50%;
  margin-left: 430px;
}


#article .heroArea .cover{
  width: 1920px;
}

/* キラキラ */
#article .kiraWrap{
  width: 1920px;
  height: 1300px;
}


/* -- intro -- */
#article .intro{
  margin-top: 0px;
}

#article .intro h2{
  position: relative;
  width: 1462px;
  margin: 0 auto;
  z-index: 1;
}/* media query */

#article .intro .screenshot{
  position: absolute;
  top: 30px;
  left: 50%;
  margin-left: -847px;
}


/* -- charactor -- */
#article .charactor{
  margin-top: 50px;
}

#article .charactor h2{
  width: 757px;
  top: 310px;
}

#article .charactor .charactor-img{
  width: 1403px;
  top: 490px;
  left: 0;
  right: 0;
  margin: 0 auto;
}


/* -- twitter -- */
#article .twitter{
  margin-top: 0px;
  padding-bottom: 100px;
}

#article .twitter h2{
  width: 428px;
}

#article .twitter .box-flex{
  width: 800px;
  margin: 0 auto;
  margin-top: 100px;
}

#article .twitter .catch{
  width: 362px;
  margin-left: 10px;
  margin-top: 10px;
}

#article .twitter .chara{
  width: 273px;
}


#article .twitter .box-twitter{
  margin: 0 auto;
  margin-top: 30px;
  width: 768px;
}


/* 背景の丸 */

#article .intro::before,
#article .charactor::before,
#article .twitter::before{
  width: 400px;
  padding-top: 400px;
}

#article .intro::before{
  top: -90px;
  left: 50%;
  margin-left: 90px;
}

#article .charactor::before{
  top: 180px;
  left: 50%;
  margin-left: -450px;
}

#article .twitter::before{
  top: -180px;
  left: 50%;
  margin-left: 60px;
}