@charset "utf-8";

/* ==================================================================================================================
  妖怪惑星クラリス✕超銀河船団∞コラボ PC
  =====================================================================================================================*/
  #choginga_claris img{
    vertical-align:bottom;
  }
  #choginga_claris {
    background-color: #021245;
    display: none;
    opacity: 0;
  }
  #choginga_claris [class^="box_0"]{
    position:relative;
    width: 1600px;
    left: 50%;
    margin-left: -800px;
  }

  /* FVアニメのため設定 */
  #choginga_claris #footer{
    display: none;
  }
  .footerType03{
    background: #fff;
  }


/* fv
------------------------------------------------------------ */
#fv_animation{
  position: relative;
  background: #fff;
  width: 100%;
  z-index: 100;
}

#fv_animation .inner{
  position: fixed;
  /*background: #000;*/
  width: 1000px;
  height: 900px;
  left: 50%;
  margin-left: -500px;
  top: 80px;
}

/* 共通・ */
#fv_animation .inner p{
  position: absolute;
  left: 50%;
  height: 0;
  text-indent: 100%;
  overflow: hidden;
  opacity: 0;
}

/* ロゴ */
#fv_animation .inner .img_01{
  background: url(../../../img/contents_pc/campaign/april_2017/img_01.png) no-repeat 0 0;
  width: 350px;
  padding-top: 360px;
  top: 220px;
  margin-left: -175px;
}

/* にじよめちゃん */
#fv_animation .inner .img_02{
  background: url(../../../img/contents_pc/campaign/april_2017/img_02.png) no-repeat 0 0;
  width: 450px;
  padding-top: 720px;
  top: 140px;
  margin-left: -225px;
}

/* にじよめちゃん */
#fv_animation .inner .img_03{
  background: url(../../../img/contents_pc/campaign/april_2017/img_02.png) no-repeat 0 -720px;
  width: 450px;
  padding-top: 720px;
  top: 140px;
  margin-left: -225px;
  opacity: 0;
}

/* アイハブゲーム */
#fv_animation .inner .img_04{
  background: url(../../../img/contents_pc/campaign/april_2017/img_03.png) no-repeat 0 -120px;
  width: 500px;
  padding-top: 120px;
  top: 10px;
  margin-left: -250px;
}

/* アイハブア*** */
#fv_animation .inner .img_05{
  background: url(../../../img/contents_pc/campaign/april_2017/img_03.png) no-repeat 0 -240px;
  width: 500px;
  padding-top: 120px;
  top: 10px;
  margin-left: -250px;
}

/* ンンンンン */
#fv_animation .inner .img_06{
  background: url(../../../img/contents_pc/campaign/april_2017/img_03.png) no-repeat 0 0px;
  width: 500px;
  padding-top: 120px;
  top: 10px;
  margin-left: -250px;
}

/* 超銀河ロゴ */
#fv_animation .inner .img_07{
  background: url(../../../img/contents_pc/campaign/april_2017/img_05.png) no-repeat 0 0px;
  width: 278px;
  padding-top: 220px;
  top: 450px;
  margin-left: -355px;
}

/* ？マーク */
#fv_animation .inner .img_08{
  background: url(../../../img/contents_pc/campaign/april_2017/img_05.png) no-repeat 0 -220px;
  width: 278px;
  padding-top: 220px;
  top: 400px;
  margin-left: 35px;
}
/* エフェクト */
#fv_animation .inner .img_09{
  background: url(../../../img/contents_pc/campaign/april_2017/img_04.png) no-repeat 0 0px;
  width: 630px;
  padding-top: 450px;
  top: 290px;
  margin-left: -335px;
  opacity: 0;
}


/* -----JS animation----- */

/* animation_01 ロゴ表示・回転
----------------- */
#fv_animation.animation_01 .inner .img_01{
  -webkit-animation: animation01-01 1.5s ease 0s 1 both;
  animation: animation01-01 1.5s ease 0s 1 both;
}
@-webkit-keyframes animation01-01{
  0%     { -webkit-transform: rotate(0deg);  opacity: 0;}
  49%    { -webkit-transform: rotate(0deg);  opacity: 1;}
  50%,55%{ -webkit-transform: rotate(-30deg);opacity: 1;}
  56%    { -webkit-transform: rotate(0deg);  opacity: 1;}
  100%   { -webkit-transform: rotate(0deg);  opacity: 0;}
}
@keyframes animation01-01{
  0%     { transform: rotate(0deg);  opacity: 0;}
  49%    { transform: rotate(0deg);  opacity: 1;}
  50%,55%{ transform: rotate(-30deg);opacity: 1;}
  56%    { transform: rotate(0deg);  opacity: 1;}
  100%   { transform: rotate(0deg);  opacity: 0;}
}

/* animation_02 にじよめちゃん出現
----------------- */
#fv_animation.animation_02 .inner .img_02{
  -webkit-animation: animation02-01 1s ease 0s 1 both , animation02-02 0.5s ease 0s infinite both;
  animation: animation02-01 1s ease 0s 1 both , animation02-02 0.5s ease 0s infinite both;
}
@-webkit-keyframes animation02-01{
  0%  { opacity: 0;}
  100%{ opacity: 1;}
}
@keyframes animation02-01{
  0%  { opacity: 0;}
  100%{ opacity: 1;}
}
@-webkit-keyframes animation02-02{
  0%,100%{ -webkit-transform: translateY( 0px);}
  50%    { -webkit-transform: translateY(-5px);}
}
@keyframes animation02-02{
  0%,100%{ transform: translateY( 0px);}
  50%    { transform: translateY(-5px);}
}

/* animation_03 上部テキスト・超銀河フキダシ出現
----------------- */
#fv_animation.animation_03 .inner .img_04{
  -webkit-animation: animation03-01 1s ease 0s 1 both;
  animation: animation03-01 1s ease 0s 1 both;
}
@-webkit-keyframes animation03-01{
  0% { opacity: 0;}
  100%{ opacity: 1;}
}
@keyframes animation03-01{
  0% { opacity: 0;}
  100%{ opacity: 1;}
}

#fv_animation.animation_03 .inner .img_07{
  -webkit-animation: animation03-02 1s ease 0s 1 both;
  animation: animation03-02 1s ease 0s 1 both;
}
@-webkit-keyframes animation03-02{
  0%  { -webkit-transform: translateY(30px); opacity: 0;}
  100%{ -webkit-transform: translateY(0px); opacity: 1;}
}
@keyframes animation03-02{
  0%  { transform: translateY(30px); opacity: 0;}
  100%{ transform: translateY(0px); opacity: 1;}
}

/* animation_04 上部テキスト切り替え/？フキダシ出現
----------------- */
#fv_animation.animation_04 .inner .img_04{
  -webkit-animation: animation04-01 0.8s ease 0s 1 both;
  animation: animation04-01 0.8s ease 0s 1 both;
}
@-webkit-keyframes animation04-01{
  0%  { opacity: 1;}
  100%{ opacity: 0;}
}
@keyframes animation04-01{
  0%  { opacity: 1;}
  100%{ opacity: 0;}
}

#fv_animation.animation_04 .inner .img_05{
  -webkit-animation: animation04-02 1s ease 0.2s 1 both;
  animation: animation04-02 1s ease 0.2s 1 both;
}
@-webkit-keyframes animation04-02{
  0%  { opacity: 0;}
  100%{ opacity: 1;}
}
@keyframes animation04-02{
  0%  { opacity: 0;}
  100%{ opacity: 1;}
}

#fv_animation.animation_04 .inner .img_08{
  -webkit-animation: animation04-03 1s ease 0s 1 both;
  animation: animation04-03 1s ease 0s 1 both;
}
@-webkit-keyframes animation04-03{
  0%  { -webkit-transform: translateY(30px); opacity: 0;}
  100%{ -webkit-transform: translateY(0px); opacity: 1;}
}
@keyframes animation04-03{
  0%  { transform: translateY(30px); opacity: 0;}
  100%{ transform: translateY(0px); opacity: 1;}
}

/* animation_05 上部テキストにじよめ切り替え/両フキダシ出現を移動
----------------- */
#fv_animation.animation_05 .inner .img_05{
  -webkit-animation: animation05-01 0.8s ease 0s 1 both;
  animation: animation05-01 0.8s ease 0s 1 both;
}
@-webkit-keyframes animation05-01{
  0%  { opacity: 1;}
  100%{ opacity: 0;}
}
@keyframes animation05-01{
  0%  { opacity: 1;}
  100%{ opacity: 0;}
}

#fv_animation.animation_05 .inner .img_06{
  -webkit-animation: animation05-02 1s ease 0s 1 both;
  animation: animation05-02 1s ease 0s 1 both;
}
@-webkit-keyframes animation05-02{
  0%  { opacity: 0;}
  100%{ opacity: 1;}
}
@keyframes animation05-02{
  0%  { opacity: 0;}
  100%{ opacity: 1;}
}

#fv_animation.animation_05 .inner .img_02{
  -webkit-animation: animation05-03 0.8s ease 0s 1 both;
  animation: animation05-03 0.8s ease 0s 1 both;
}
@-webkit-keyframes animation05-03{
  0%  { opacity: 1;}
  100%{ opacity: 0;}
}
@keyframes animation05-03{
  0%  { opacity: 1;}
  100%{ opacity: 0;}
}

#fv_animation.animation_05 .inner .img_03{
  -webkit-animation: animation05-04 1s ease 0s 1 both;
  animation: animation05-04 1s ease 0s 1 both;
}
@-webkit-keyframes animation05-04{
  0%  { opacity: 0;}
  100%{ opacity: 1;}
}
@keyframes animation05-04{
  0%  { opacity: 0;}
  100%{ opacity: 1;}
}

#fv_animation.animation_05 .inner .img_07{
  -webkit-animation: animation05-05 0.5s ease 0s 1 both;
  animation: animation05-05 0.5s ease 0s 1 both;
}
@-webkit-keyframes animation05-05{
  0%  { -webkit-transform: translateX(0); opacity: 1;}
  30% { -webkit-transform: translateX(-50px);}
  100%{ -webkit-transform: translateX(100px); opacity: 1;}
}
@keyframes animation05-05{
  0%  { transform: translateX(0); opacity: 1;}
  30% { transform: translateX(-50px);}
  100%{ transform: translateX(100px); opacity: 1;}
}

#fv_animation.animation_05 .inner .img_08{
  -webkit-animation: animation05-06 0.5s ease 0s 1 both;
  animation: animation05-06 0.5s ease 0s 1 both;
}
@-webkit-keyframes animation05-06{
  0%  { -webkit-transform: translateX(0); opacity: 1;}
  30% { -webkit-transform: translateX(50px);}
  100%{ -webkit-transform: translateX(-100px); opacity: 1;}
}
@keyframes animation05-06{
  0%  { transform: translateX(0); opacity: 1;}
  30% { transform: translateX(50px);}
  100%{ transform: translateX(-100px); opacity: 1;}
}

/* animation_06 エフェクトを広げる
----------------- */
#fv_animation.animation_06 .inner .img_09{
  -webkit-animation: animation06-01 0.3s ease-out 0s 1 both;
  animation: animation06-01 0.3s ease-out 0s 1 both;
}
@-webkit-keyframes animation06-01{
  0%  { -webkit-transform: scale(0); opacity: 1;}
  100%{ -webkit-transform: scale(1); opacity: 1;}
}
@keyframes animation06-01{
  0%  { transform: scale(0); opacity: 1;}
  100%{ transform: scale(1); opacity: 1;}
}


/* animation_07 アニメーションエリアの枠を透明度0に
----------------- */
#fv_animation.animation_07 {
  -webkit-animation: animation07-01 0.3s ease 0s 1 both;
  animation: animation07-01 0.3s ease 0s 1 both;
}
@-webkit-keyframes animation07-01{
  0%  { opacity: 1;}
  100%{ opacity: 0;}
}
@keyframes animation07-01{
  0%  { opacity: 1;}
  100%{ opacity: 0;}
}

/* animation_08 アニメーションエリアを削除、0pxにして上に移動(ベースにdisplayblock追加)
----------------- */
#fv_animation.animation_08 {
  display: none;
  -webkit-transform: scale(0) translateY(-100%);
  transform: scale(0) translateY(-100%);
}

/* animation_08 ベースを表示
----------------- */
#choginga_claris.open{
  -webkit-animation: open 1s ease 0s 1 both;
  animation: open 1s ease 0s 1 both;
}
@-webkit-keyframes open{
  0%  { opacity: 0;}
  100%{ opacity: 1;}
}

/* openbase ベースを表示
----------------- */
@keyframes open{
  0%  { opacity: 0;}
  100%{ opacity: 1;}
}

/* box_01
------------------------------------------------------------ */
#choginga_claris .box_01 h1{
  background:url(../../../img/contents_pc/campaign/april_2017/mainpic_01.jpg) no-repeat 0 0;
  width: 1600px;
  padding-top: 750px;
  height: 0;
  overflow:hidden;
  text-indent: 100%;
  white-space: nowrap;
}

#choginga_claris .social_box{
  position: absolute;
  width: 330px;
  top: 8px;
  left: 50%;
  margin-left: -455px;
}

#choginga_claris .social_box a{
  display: block;
  background: url(../../../img/contents_pc/campaign/april_2017/btn_01.png) no-repeat 0 0;
  background-size: cover;
  width: 110px;
  padding-top: 50px;
  height: 0;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
  float: left;
}

#choginga_claris .social_box li:nth-of-type(1) a{background-position: 0 0;}
#choginga_claris .social_box li:nth-of-type(2) a{background-position: 0 -50px;}
#choginga_claris .social_box li:nth-of-type(3) a{background-position: 0 -100px;}

/* 02
------------------------------------------------------------ */
#choginga_claris .box_02 h2{
  background:url(../../../img/contents_pc/campaign/april_2017/mainpic_05.jpg) no-repeat 0 0;
  width: 1600px;
  padding-top: 750px;
  height: 0;
  overflow:hidden;
  text-indent: 100%;
  white-space: nowrap;
}

/* コラボ枠 */
#choginga_claris .collabo_container{
  position: absolute;
  top: 450px;
  width: 900px;
  left: 50%;
  margin-left: -450px;
}

#choginga_claris .claris_box{
  float: left;
  width: 420px;
  margin: 0 15px;
}
#choginga_claris .choginga_box{
  float: right;
  width: 420px;
  margin: 0px 15px;
}

/* ムービー */
#choginga_claris .choginga_box .movie,
#choginga_claris .claris_box .movie{
  position: relative;
  width: 380px;
  padding-top: 200px;
  text-align: center;
  border : 1px solid #fff;
  margin: 0 auto;
  margin-bottom: 5%;
}

#choginga_claris .choginga_box .movie iframe,
#choginga_claris .claris_box .movie iframe{
  position: absolute;
  top: 0;
  right: 0;
  width: 100% !important;
  height: 100% !important;
}


/* ボタン */
#choginga_claris .claris_box li,
#choginga_claris .choginga_box li{
  float: left;
}

#choginga_claris .claris_box a,
#choginga_claris .choginga_box a{
  display: block;
  background: url(../../../img/contents_pc/campaign/april_2017/btn_02.png) no-repeat 0 0;
  background-size: cover;
  width: 140px;
  padding-top: 40px;
  height: 0;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
  margin: 0 auto;
}

/* 表示 */
#choginga_claris .claris_box li:nth-of-type(1) a{ background-position: 0 0;}
#choginga_claris .claris_box li:nth-of-type(2) a{background-position: 0 25%;}
#choginga_claris .claris_box li:nth-of-type(3) a{ background-position: 0 50%;}

#choginga_claris .choginga_box li:nth-of-type(1) a{ background-position: 0 0;}
#choginga_claris .choginga_box li:nth-of-type(2) a{ background-position: 0 75%;}
#choginga_claris .choginga_box li:nth-of-type(3) a{ background-position: 0 100%;}

/* 03
------------------------------------------------------------ */
#choginga_claris .box_03 h2{
  background:url(../../../img/contents_pc/campaign/april_2017/mainpic_06.jpg) no-repeat 0 0;
  width: 1600px;
  padding-top: 780px;
  height: 0;
  overflow:hidden;
  text-indent: 100%;
  white-space: nowrap;
}

/* アカウント */
#choginga_claris .twitter_account_container{
  position: absolute;
  top: 310px;
  left: 50%;
  width: 900px;
  margin-left: -450px;
}
#choginga_claris .tramp_box       {width: 300px; float: left;}
#choginga_claris .nijiyomechan_box{width: 300px; float: left;}
#choginga_claris .nipako_box      {width: 300px; float: left;}

/* twitter画像レイアウト */
#choginga_claris .tramp_box .tw_img,
#choginga_claris .nijiyomechan_box .tw_img,
#choginga_claris .nipako_box .tw_img{
  float: left;
  width: 123px;
  padding-top: 123px;
  height: 0;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
  border: 1px solid #000033;
  box-shadow:0px 2px 8px 3px #3391c8;
  -moz-box-shadow:0px 2px 8px 3px #3391c8;
  -webkit-box-shadow:0px 2px 8px 3px #3391c8;
  margin: 0 4%;
}

/* twitter画像 */
#choginga_claris .tramp_box .tw_img{
  background: url("http://furyu.nazo.cc/twicon/POTUS/original") no-repeat 0 0;
  background-size: contain;
}
#choginga_claris .nijiyomechan_box .tw_img{
  background: url("http://furyu.nazo.cc/twicon/nijiyomechan/original") no-repeat 0 0;
  background-size: contain;
}
#choginga_claris .nipako_box .tw_img{
  background: url("http://furyu.nazo.cc/twicon/godhandtool/original") no-repeat 0 0;
  background-size: contain;
}

/* ドナルドトランプ
---------------------------------------------- */
#choginga_claris .tramp_box .btn_wrap li{
  float: left;
}

#choginga_claris .tramp_box .btn_wrap a,
#choginga_claris .nijiyomechan_box .btn_wrap a,
#choginga_claris .nipako_box .btn_wrap a{
  display: block;
  background: url(../../../img/contents_pc/campaign/april_2017/btn_03.png) no-repeat 0 0;
  background-size: cover;
  width: 150px;
  padding-top: 45px;
  height: 0;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
}
#choginga_claris .tramp_box .btn_wrap,
#choginga_claris .nijiyomechan_box .btn_wrap,
#choginga_claris .nipako_box .btn_wrap{
  margin-top: -4px;
}

/* ボタン画像表示 */
#choginga_claris .tramp_box .btn_wrap li:nth-of-type(1) a{ background-position: 0 0;}
#choginga_claris .tramp_box .btn_wrap li:nth-of-type(2) a{ background-position: 0 -270px;}
#choginga_claris .tramp_box .btn_wrap li:nth-of-type(3) a{ background-position: 0 -45px;}
/* ボタン画像表示 */
#choginga_claris .nijiyomechan_box .btn_wrap li:nth-of-type(1) a{ background-position: 0 0;}
#choginga_claris .nijiyomechan_box .btn_wrap li:nth-of-type(2) a{ background-position: 0 -225px;}
#choginga_claris .nijiyomechan_box .btn_wrap li:nth-of-type(3) a{background-position: 0 -180px;}
/* ボタン画像表示 */
#choginga_claris .nipako_box .btn_wrap li:nth-of-type(1) a{ background-position: 0 0;}
#choginga_claris .nipako_box .btn_wrap li:nth-of-type(2) a{background-position: 0 -90px;}
#choginga_claris .nipako_box .btn_wrap li:nth-of-type(3) a{ background-position: 0 -135px;}


#choginga_claris .box_03 .btn_mixi{
  position: absolute;
  display: block;
  background: url(../../../img/contents_pc/campaign/april_2017/btn_04.png) no-repeat 0 100%;
  background-size: contain;
  width: 200px;
  padding-top: 40px;
  top: 710px;
  left: 50%;
  margin-left: -210px;
  height: 0;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
}

/* 04
------------------------------------------------------------ */
#choginga_claris .box_04 h2{
  background:url(../../../img/contents_pc/campaign/april_2017/mainpic_07.jpg) no-repeat 0 0;
  width: 1600px;
  padding-top: 400px;
  height: 0;
  overflow:hidden;
  text-indent: 100%;
  white-space: nowrap;
}

/* footer
------------------------------------------------------------ */
#choginga_claris .footer{
  background: #000;
  width: 100%;
  padding: 20px 0;
}

#choginga_claris .footerInner{
  width: 500px;
  margin: 0 auto;
  margin-top: 5px;
}
#choginga_claris .footerInner:after{
  content: "";
  clear: both;
  display: block;
}

#choginga_claris .footerInner a{
  display: block;
  background:url(../../../img/contents_pc/campaign/april_2017/logo.jpg) no-repeat 0 0;
  /* background-size: cover; */
  width: 140px;
  padding-top: 40px;
  height: 0;
  overflow: hidden;
  text-indent: 100%;
  margin: 0 10px;
  white-space: nowrap;
  float: left;
}

#choginga_claris .footerInner li:nth-of-type(1) a{ background-position: 0 0;}
#choginga_claris .footerInner li:nth-of-type(2) a{background-position: 0 -40px; width: 120px;}
#choginga_claris .footerInner li:nth-of-type(3) a{background-position: 0 -80px; width: 85px;}
#choginga_claris .footerInner li:nth-of-type(4) a{background-position: 0 -120px; width: 70px;}


/* ボタン効果 */
#choginga_claris a:hover{ transition:all 0.3s ease; opacity: 0.8; filter: alpha(opacity=80);  }