@charset "UTF-8";

/* ページ構成
---------------------------------------------------------- */
#nyf_2018 {
  overflow: hidden;
  width: 100%;
  position: relative;
  background: #e4398d;
  background: url(../../../img/contents_pc/campaign/nyf_2018/pc_bg.png) no-repeat;
  background-attachment: fixed;
  background-position: 50% 0;
}

#nyf_2018 div[class^="box0"] > img {
  vertical-align: bottom;
}


/* 各box
---------------------------------------------------------- */

#nyf_2018 .topWrap {
  width: 100%;
}

#nyf_2018 div.box01,
#nyf_2018 div.box02,
#nyf_2018 div.box03,
#nyf_2018 div.box04,
#nyf_2018 div.box05,
#nyf_2018 div.box06 {
  position: relative;
  left: 50%;
  margin-left: -800px;
  text-align: center;
  width: 1600px;
}

#nyf_2018 div.box01 {
	height:856px;
}

#nyf_2018 div.box01 i.app01{
	position: absolute;
	top: 0;
	left: -30px;
	height: 566px;
	width: 710px;
	background: url(../../../img/contents_pc/campaign/nyf_2018/pc_sprite_app02.png) -130px 0px no-repeat;
   animation: fadeInFv01 1.5s ease-out 0s 1 normal;
   -webkit-animation: fadeInFv01 1.5s ease-out 0s 1 normal;
}

#nyf_2018 div.box01 i.app02{
	position: absolute;
	top: 360px;
	left: 60px;
	height: 566px;
	width: 710px;
	background: url(../../../img/contents_pc/campaign/nyf_2018/pc_sprite_app02.png) -220px -600px no-repeat;
	z-index: 100;
   animation: fadeInFv02 1s ease-out 0s 1 normal;
   -webkit-animation: fadeInFv02 1s ease-out 0s 1 normal;
}

#nyf_2018 div.box01 i.app03{
	position: absolute;
	top: 0;
	left: 770px;
	height: 436px;
	width: 790px;
	background: url(../../../img/contents_pc/campaign/nyf_2018/pc_sprite_app02.png) -880px 0px no-repeat;
   animation: fadeInFv03 1s ease-out 0s 1 normal;
   -webkit-animation: fadeInFv03 1s ease-out 0s 1 normal;
}

#nyf_2018 div.box01 i.app04{
	position: absolute;
	top: 200px;
	left: 1000px;
	height: 896px;
	width: 710px;
	background: url(../../../img/contents_pc/campaign/nyf_2018/pc_sprite_app02.png) -1080px -500px no-repeat;
   animation: fadeInFv04 1.5s ease-out 0s 1 normal;
   -webkit-animation: fadeInFv04 1.5s ease-out 0s 1 normal;
}

#nyf_2018 div.box01 i.niji{
	position: absolute;
	top: 120px;
	left: 660px;
	height: 1066px;
	width: 520px;
	background: url(../../../img/contents_pc/campaign/nyf_2018/pc_sprite_app02.png) -310px -1250px no-repeat;
	z-index: 110;
	animation: fadeInFv05 2s ease-out 0s 1 normal;
	-webkit-animation: fadeInFv05 2s ease-out 0s 1 normal;
}

#nyf_2018 div.box01 i.logo{
	position: absolute;
	top: 390px;
	left: 210px;
	height: 466px;
	width: 810px;
	background: url(../../../img/contents_pc/campaign/nyf_2018/pc_sprite02.png) -400px -390px no-repeat;
	z-index: 120;
   animation: fadeInFv06 2s ease-out 0s 1 normal;
   -webkit-animation: fadeInFv06 2s ease-out 0s 1 normal;
}

#nyf_2018 div.box02 {
	height: 687px;
	background: url(../../../img/contents_pc/campaign/nyf_2018/pc_sprite02.png) -190px -866px no-repeat;
	z-index: 200;
}

#nyf_2018 div.box02 {
	height: 167px;
	background: url(../../../img/contents_pc/campaign/nyf_2018/pc_sprite02.png) -190px -866px no-repeat;
	z-index: 200;
}

#nyf_2018 div.box03 {
	height: 495px;
	background: url(../../../img/contents_pc/campaign/nyf_2018/pc_sprite02.png) -190px -1056px no-repeat;
	z-index: 200;
}

#nyf_2018 div.box04 {
	height: 1905px;
	background: url(../../../img/contents_pc/campaign/nyf_2018/pc_sprite02.png) -160px -1542px no-repeat;
}

#nyf_2018 div.box05 {
	height: 2800px;
	background: url(../../../img/contents_pc/campaign/nyf_2018/pc_sprite02.png) -149px -3454px no-repeat;
}

#nyf_2018 div.box06 {
	height: 520px;
	background: url(../../../img/contents_pc/campaign/nyf_2018/pc_sprite02.png) -119px -6334px no-repeat;
}
/*
	-webkit-animation: spin 1.5s linear infinite;
	animation: spin 1.5s linear infinite;
*/

@-webkit-keyframes spin {
	0%,90% {-webkit-transform: rotate(0deg);}
	100% {-webkit-transform: rotate(5deg);}
}

@keyframes spin {
	0%,90% {transform: rotate(0deg);}
	100% {transform: rotate(5deg);}
}

/* 注意 */
#nyf_2018 .box05 .attn {
    position: absolute;
    bottom: 95px;
    margin-left: 370px;
    width: 940px;
    height: 120px;
    padding: 10px;
}

#nyf_2018 .box05 .attn li{
    text-align:left;
    color:#fff;
    list-style:  disc;
}

/* テキスト画像
---------------------------------------------------------- */


/* ボタン
---------------------------------------------------------- */
#nyf_2018 .box01 a,
#nyf_2018 .box02 a,
#nyf_2018 .box03 a,
#nyf_2018 .box04 a,
#nyf_2018 .box05 a,
#nyf_2018 .box06 a {
  position: absolute;
  z-index: 100;
  left: 50%;
  opacity: 0;
  background: white;
}

#nyf_2018 .box01 a:hover,
#nyf_2018 .box02 a:hover,
#nyf_2018 .box03 a:hover,
#nyf_2018 .box04 a:hover,
#nyf_2018 .box05 a:hover,
#nyf_2018 .box06 a:hover {
  opacity: 0.2;
  cursol: pointer;
}

#nyf_2018 .box01 .btn_twt {
  width: 80px;
  height: 80px;
  margin-left: -508px;
  top: 430px;
  border-radius: 50px;
  z-index: 500;
}

#nyf_2018 .box03 .btn_tora {
  width: 860px;
  height: 50px;
  margin-left: -428px;
  top: 360px;
  border-radius: 50px;
  z-index: 500;
  /* background: aqua; */
}

#nyf_2018 .box02 .navi {
    position: absolute;
    width: 1320px;
    height: 120px;
    /* background: antiquewhite; */
    top: 33px;
    left: 110px;
}

#nyf_2018 .box02 .btn_navi01 {
    position: absolute;
    margin-left: -401px;
    top: 11px;
    width: 240px;
    height: 103px;
}

#nyf_2018 .box02 .btn_navi02 {
    position: absolute;
    margin-left: -149px;
    top: 11px;
    width: 140px;
    height: 103px;
}

#nyf_2018 .box02 .btn_navi03 {
    position: absolute;
    margin-left: 1px;
    top: 11px;
    width: 220px;
    height: 103px;
}

#nyf_2018 .box02 .btn_navi04 {
    position: absolute;
    margin-left: 234px;
    top: 11px;
    width: 270px;
    height: 103px;
}

#nyf_2018 .box02 .btn_navi01:hover,
#nyf_2018 .box02 .btn_navi02:hover,
#nyf_2018 .box02 .btn_navi03:hover,
#nyf_2018 .box02 .btn_navi04:hover {
	opacity:0;
}

#nyf_2018 .box04 .btn_nico {
    position: absolute;
    width: 280px;
    height: 50px;
    bottom: 177px;
    margin-left: -320px;
}

#nyf_2018 .box05 .btn_item {
    position: absolute;
    width: 390px;
    height: 50px;
    top: 939px;
    margin-left: -183px;
}

#nyf_2018 .box06 .btn_tora {
  width: 860px;
  height: 50px;
  margin-left: -380px;
  top: 331px;
  border-radius: 50px;
  z-index: 500;
  /* background: aqua; */
}


.scrolltop a{
	width:200px;
	height: 160px;
	background: url(../../../img/contents_pc/campaign/nyf_2018/btn_top.png) no-repeat;
		-webkit-animation: spin 1.5s linear infinite;
	animation: spin 1.5s linear infinite;
}

/* 注意事項
---------------------------------------------------------- */


/* アニメ
---------------------------------------------------------- */

@keyframes fadeInFv01 { 0%,15% {opacity: 0; transform: translateX(-50px);}30% {opacity: 1; translateX(0px);}}
@-webkit-keyframes fadeInFv01 {  0%,15% {opacity: 0; transform: translateX(-500px);}30% {opacity: 1; translateX(0px);}}

@keyframes fadeInFv02 { 0%,5% {opacity: 0; transform: translateX(-30px);}20% {opacity: 1; translateX(0px);}}
@-webkit-keyframes fadeInFv02 {  0%,5% {opacity: 0; transform: translateX(-300px);}20% {opacity: 1; translateX(0px);}}

@keyframes fadeInFv03 { 0%,30% {opacity: 0; transform: translateX(50px);}45% {opacity: 1; translateX(0px);}}
@-webkit-keyframes fadeInFv031 {  0%,30% {opacity: 0; transform: translateX(500px);}45% {opacity: 1; translateX(0px);}}

@keyframes fadeInFv04 { 0%,45% {opacity: 0; transform: translateX(50px);}60% {opacity: 1; translateX(0px);}}
@-webkit-keyframes fadeInFv01 {  0%,45% {opacity: 0; transform: translateX(500px);}60% {opacity: 1; translateX(0px);}}

@keyframes fadeInFv05 { 0%,60% {opacity: 0; transform: translateX(20px);}75% {opacity: 1; translateX(0px);}}
@-webkit-keyframes fadeInFv01 {  0%,60% {opacity: 0; transform: translateX(20px);}75% {opacity: 1; translateX(0px);}}

@keyframes fadeInFv06 { 0%,75% {opacity: 0; transform: translateX(20px);}100% {opacity: 1; translateX(0px);}}
@-webkit-keyframes fadeInFv01 {  0%,75% {opacity: 0; transform: translateX(20px);}100% {opacity: 1; translateX(0px);}}

#nyf_2018 img.fadein {
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-name: fadein;
  animation-name: fadein;
}

@-webkit-keyframes fadein {
  0%,70% {
    opacity: 0;
    -webkit-transform: translateY(0px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
  }
}

@keyframes fadein {
  0%,70% {
    opacity: 0;
    transform: translateY(0px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}


#nyf_2018 {
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-name: fadeInDown;
  animation-name: fadeInDown;
}

@-webkit-keyframes fadeInDown {
  0% {
    opacity: 0;
    -webkit-transform: translateY(0px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
  }
}

@keyframes fadeInDown {
  0% {
    opacity: 0;
    transform: translateY(0px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.fadeInDown {
  -webkit-animation-name: fadeInDown;
  animation-name: fadeInDown;
}