/*general
====================================*/
html{
  -webkit-text-size-adjust: 100%;
}
.body_inner{
  margin:0;
  padding:0;
}
body {
  font-size: 14px;
  line-height: 1.4em;
  color: #000;
  min-width: 1000px;
}
a:active,a:hover,a:link,a:visited {
  color: #674ce6;
  text-decoration: underline
}
a:hover {
  text-decoration: none
}
strong {
  font-weight: 700;
}
.hide-text{
  text-indent: 120%;
  white-space: nowrap;
  overflow: hidden
}
a.btn{
  display:block;
  position: relative;
  overflow:hidden;
}
a.btn:after,
a.btn:before {
  content: "";
  position: absolute;
  width: inherit;
  height: inherit;
  background-repeat: no-repeat;
  transition-property: opacity;
  transition-duration: .3s;
  transition-timing-function: ease-out;
  top:0;
  bottom:0;
  left: 0;
  right: 0
}
a.btn:before {
  background-position: center bottom;
  opacity: 1
}
a.btn:after {
  background-position: center top;
  opacity: 0
}
a.btn:hover:after,
a.btn:hover:before {
  opacity: 1
}
.op{
  transition:0.3s;
}
.op:hover{
  opacity: 0.7;
}
.tab_content {
  display: none;
}
.tab_content.is-active{
  display: block;
  animation: fade 0.5s ease;
}
@keyframes fade {
  from {opacity: 0;}
  to {opacity: 1;}
}
.red{
  color:#ef1d58;
}


/*general
====================================*/
.body_inner {
  background:url(../img/bg_contents.png) top center;
}
.wrapper{
  width:1000px;
}
.pageTop{
  position: relative;
  height: 20px;
  margin:20px 0 50px;
}
.pageTop a{
  position:absolute;
  right:16px;
  color:#000;
  font-weight: bold;
}
.head_arrow{
  position: absolute;
  width: 100%;
  height: 44px;
  top:-22px;
}

/*mainvisual
====================================*/
.mainvisual{
  background:url(../img/mainvisual.png) top center no-repeat,
  url(../img/mainvisual_bg.png) top center repeat-x;
  height: 552px;
}

/*tab
====================================*/
.tab_area{
  display:flex;
  justify-content: space-between;
  margin-top:30px;
}
.tab_area a{
  width:482px;
  height: 210px;
}
.tab_cpn01:before{
  background-image:url(../img/btn_cpn01.png);
}
.tab_cpn01:after{
  background-image:url(../img/btn_cpn01-on.png);
}
.tab_cpn02:before{
  background-image:url(../img/btn_cpn02.png);
}
.tab_cpn02:after{
  background-image:url(../img/btn_cpn02-on.png);
}

/*cpn_contents
====================================*/
.cpn_contents{
  position: relative;
  z-index:2;
  padding:15px 0;
  margin-top:40px;
}
.totpp{
  text-align: right;
  margin-top:0.7em;
}
.totpp a{
  font-weight: bold;
}
#cpn02 .totpp a{
  color:#0155c7;
}

/*cpn01
====================================*/
.cpn01:before{
  position:absolute;
  content:'';
  display:block;
  top:0;
  bottom:0;
  left:0;
  right:0;
  background-color:#fff;
  border:5px solid #9882fc;
  z-index:-1;
}
.cpn01 .cpn_head{
  margin-bottom:-110px;
}
.cpn01 .cpn_head h1{
  height: 186px;
  background:url(../img/cpn01_head.png) top center no-repeat;
  margin-top:24px;
}
.cpn01 .cpn_head p{
  height: 308px;
  background:url(../img/cpn01_caption.png) top center no-repeat;
  margin-top:40px;
}
.cpn_broadcast{
  margin-top:22px;
  height: 633px;
}
.broadcast_vtuber{
  height: 286px;
  position: relative;
}
.broadcast_link{
  position:absolute;
  width:654px;
  height:66px;
  overflow: hidden;
  display:flex;
  justify-content: space-between;
}
.broadcast_link a{
  width:320px;
  height: 66px;
}
.broadcast_vtuber-top .broadcast_link{
  top: 159px;
  left: 273px;
}
.broadcast_vtuber-btm .broadcast_link{
  top: 164px;
  left: 69px;
}
.btn_vtuber_channel:before{
  background-image:url(../img/btn_vtuber_channel.png);
}
.btn_vtuber_channel:after{
  background-image:url(../img/btn_vtuber_channel-on.png);
}
.btn_vtuber_twitter:before{
  background-image:url(../img/btn_vtuber_twitter.png);
}
.btn_vtuber_twitter:after{
  background-image:url(../img/btn_vtuber_twitter-on.png);
}
.broadcast_vol1{
  background:url(../img/cpn01_broadcast_vol1.png) bottom center no-repeat,
  url(../img/cpn01_broadcast_bg.png) top center no-repeat;
}
.broadcast_vol1 h1{
  height: 61px;
  background:url(../img/cpn01_broadcast_vol1_date_01.png) no-repeat;
}
.broadcast_vol2{
  background:url(../img/cpn01_broadcast_vol2.png) bottom center no-repeat,
  url(../img/cpn01_broadcast_bg.png) top center no-repeat;
}
.broadcast_vol2 h1{
  height: 61px;
  background:url(../img/cpn01_broadcast_vol1_date_02.png) no-repeat;
}

.cpn_folder{
  position:relative;
  background-color:#dbd2fb;
  background-repeat:no-repeat;
  width:960px;
  margin:62px auto 0;
}
.cpn_folder:before{
  display:block;
  content:'';
  position: absolute;
  width: 100%;
  height: 12px;
  top:-12px;
  background:url(../img/cpn01_folder_bg.png) top right no-repeat;
}
.cpn01 .cpn_entry .head_arrow{
  background:url(../img/cpn01_head_entry.png) top left 15px no-repeat;
}
.cpn01 .cpn_prize .head_arrow{
  background:url(../img/cpn01_head_prize.png) top left 15px no-repeat;
}
.cpn_entry .cpn_folder{
  height: 283px;
  background-image:url(../img/cpn01_entry_img.png);
  background-position:bottom 25px center;
}
.cpn_prize .cpn_folder{
  height: 283px;
  background-image:url(../img/cpn01_prize_img.png);
  background-position:bottom center;
}
.cpn_prize .note{
  font-size:18px;
  text-align: center;
  margin-top:34px;
}
.howto_portal2{
  margin-top:60px;
}
.howto_portal2 h2{
  height: 27px;
  background:url(../img/cpn01_prize_portal2_head.png) top center no-repeat;
}
.howto_portal2_flow{
  width:830px;
  margin:34px auto;
}
.howto_portal2 ol{
  font-size:18px;
  line-height: 1.5;
  color:#404187;
  margin-top:20px;
}
.cpn_attention{
  box-sizing: border-box;
  width:960px;
  margin:0 auto;
  border:1px solid #bdb2f0;
  padding:20px;
}
.cpn_attention h2{
  height: 19px;
  background:url(../img/cpn01_head_attention.png) top left no-repeat;
  margin-bottom:15px;
}
.cpn_attention ul{
  line-height: 1.64;
}
.cpn_contact{
  margin-top:30px;
}
.cpn_contact .head{
  background:url(../img/cpn01_contact.png)top center no-repeat;
  height: 200px;
}
.cpn_contact .link a{
  display:block;
  width:440px;
  height: 60px;
  margin:0 auto;
  background:url(../img/cpn01_contact_link.png)top center no-repeat;
  overflow: hidden;
}
.cpn_steam{
  background:url(../img/cpn_steam_bg.png) top center no-repeat;
  height: 271px;
  padding:35px 0;
  box-sizing: border-box;
  margin-top:35px;
}
.cpn_steam .link_steam{
  width:489px;
  height: 90px;
  margin:0 auto;
}
.cpn_steam .link_prepaid{
  width:653px;
  height:90px;
  margin:21px auto 0;
}
.cpn_steam .link_steam:before{
  background-image:url(../img/btn_steam.png);
}
.cpn_steam .link_steam:after{
  background-image:url(../img/btn_steam-on.png);
}
.cpn_steam .link_prepaid:before{
  background-image:url(../img/btn_prepaidcard_howto.png);
}
.cpn_steam .link_prepaid:after{
  background-image:url(../img/btn_prepaidcard_howto-on.png);
}
/*cpn02
====================================*/
.cpn02:before{
  position:absolute;
  content:'';
  display:block;
  top:0;
  bottom:0;
  left:0;
  right:0;
  background:#fff url(../img/cpn02_head.jpg) top center no-repeat;
  border:5px solid #5585f3;
  z-index:-1;
}
.cpn02 > div{
  margin-top:54px;
}
.cpn02 > div:first-child{
  margin-top:0;
}
.cpn_box{
  position: relative;
  box-sizing: border-box;
  width:960px;
  margin:0 auto;
  border:2px solid #8fe3f8;
  border-top:26px solid #8fe3f8;
  padding:25px 0;
}
.cpn02 .head_arrow{
  top:-48px;
}
.cpn02 .cpn_head{
  height: 420px;
}
.cpn02 .cpn_date .cpn_box{
  padding:0;
}
.cpn02 .cpn_date .head_arrow{
  background:url(../img/cpn02_head_date.png) top left 15px no-repeat;
}
.cpn02 .cpn_date p{
  height: 100px;
  background:url(../img/cpn02_date.png) bottom center no-repeat;
}
.cpn02 .cpn_entry .head_arrow{
  background:url(../img/cpn02_head_entry.png) top left 15px no-repeat;
}
.cpn02 .cpn_entry ol{
  display:flex;
  justify-content:center;
}
.cpn02 .cpn_entry li{
  position: relative;
  width:396px;
  background:#c8f7fe;
  margin:0 20px 30px;
  padding:17px 15px;
  box-sizing: border-box;
  text-align: center;
}
.cpn02 .cpn_entry li:before{
  position: absolute;
  display:block;
  content:'';
  width:50px;
  height: 50px;
}
.cpn02 .cpn_entry li:nth-child(1):before{
  background:#0155c7 url(../img/cpn02_entry_num_1.png) center center no-repeat;
}
.cpn02 .cpn_entry li:nth-child(2):before{
  background:#0155c7 url(../img/cpn02_entry_num_2.png) center center no-repeat;
}

.cpn02 .cpn_entry li p:first-child{
  padding-left:60px;
  font-size:18px;
  line-height: 1.5;
  min-height: 50px;
  text-align: left;
}
.cpn02 .btn_store{
  width:267px;
  height: 54px;
  margin:0 auto;
}
.cpn02 .btn_store:before{
  background-image:url(../img/btn_store.png);
}
.cpn02 .btn_soon,
.cpn02 .btn_entry{
  width:402px;
  height: 66px;
  margin:0 auto 5px;
}
.cpn02 .btn_entry:before{
  background-image:url(../img/btn_entry.png);
}
.cpn02 .btn_entry:after{
  background-image:url(../img/btn_entry-on.png);
}
.cpn02 .btn_soon{
  pointer-events: none;
}
.cpn02 .btn_soon:before{
  background-image:url(../img/btn_entry-soon.png);
}
.cpn02 .cpn_prize .head_arrow{
  background:url(../img/cpn02_head_entry.png) top left 15px no-repeat;
}
.cpn02 .cpn_prize .cpn_box{
  background:url(../img/cpn02_prize_bg.jpg) bottom center no-repeat;
  padding:35px 0 60px;
}
.cpn02 .prize_steam{
  background:url(../img/cpn02_prize_steam.png) top center no-repeat;
  height: 334px;
}
.cpn02 .prize_goods{
  background:url(../img/cpn02_prize_goods.png) top center no-repeat;
  height: 426px;
}
.cpn02 .cpn_target .head_arrow{
  background:url(../img/cpn02_head_target.png) top left 15px no-repeat;
}
.cpn02 .cpn_target p,
.cpn02 .cpn_store p,
.cpn02 .cpn_announce p{
  padding:0 60px;
  font-size:19px;
  line-height: 30px;
}
.cpn02 .cpn_store .head_arrow{
  background:url(../img/cpn02_head_store.png) top left 15px no-repeat;
}
.cpn02 .cpn_store .note{
  font-size:14px;
}
.cpn02 .cpn_store a{
  display:inline-block;
  color:#fb6709;
  margin-right: 1em;
}
.cpn02 .cpn_announce .head_arrow{
  background:url(../img/cpn02_head_announce.png) top left 15px no-repeat;
}
.cpn02 .cpn_attention{
  border: 1px solid #a6cae2;
}
.cpn02 .cpn_attention h2{
  background:url(../img/cpn02_head_attention.png) top left no-repeat;
}

/*footer
====================================*/
.footer{
  margin-top:100px;
  background:#154a91;
  color:#fff;
  text-align:center;
  padding:30px 0;
}
.footer_contact p{
  font-weight: bold;
  line-height: 1.7;
}
.footer_contact a{
  color:#f2fd3b;
}
.footer_copy{
  margin-top:24px;
}
.footer_copy .copyright{
  font-size:12px;
  line-height: 1.5;
  margin:1.4em 0;
}

/*====================================
  SP
====================================*/
@media screen and (max-width:480px) {
  /*reset*/
  body{
    min-width:100%;
    font-size:2.421875vw;
  }
  .headerWrapper,
  .wrapper,
  .cpn_folder,
  .cpn_attention,
  .cpn_box,
  .howto_portal2_flow,
  .cpn_steam .link_steam,
  .cpn_steam .link_prepaid,
  .cpn_contact .link a,
  .cpn02 .btn_soon,
  .cpn02 .btn_entry,
  .cpn02 .cpn_entry li img,
  .cpn02 .btn_store,
  .tab_area a{
    width:100%;
    margin:0 auto;
  }
  .cpn02 .cpn_entry li{
    width:auto;
    margin:0;
  }
  .a.btn:after, a.btn:before{
    background-size:100% auto;
  }
  .body_inner a.btn:after{
    background-image:none;
  }
  /*main*/
  .mainvisual {
    background:
    url(../img/sp/mainvisual.png) top center /100% auto no-repeat,
    url(../img/sp/mainvisual_bg.png) top center /100% auto no-repeat;
    height: 75.3125vw;
  }
  /*tab*/
  .tab_area{
    margin-top:5vw;
  }
  .tab_area a{
    height: 20.9375vw;
  }
  .tab_cpn01:before{
    background-image: url(../img/sp/btn_cpn01.png);
  }
  .tab_cpn02:before{
    background-image: url(../img/sp/btn_cpn02.png);
  }
  /*totop*/
  .totpp{
    display:none;
  }
  /*cpn01*/
  .cpn_contents{
    margin-top:6.25vw;
    padding:0 0 7.8125vw;
  }
  .cpn01:before{
    border:none;
    border-top:5px solid #9882fc;
    border-bottom:5px solid #9882fc;
  }
  .cpn01 .cpn_head {
    margin-bottom: -12.5vw;
  }
  .cpn01 .cpn_head h1 {
    height: 23.75vw;
    background: url(../img/sp/cpn01_head.png) top center /100% auto no-repeat;
    margin-top: 0;
  }
  .cpn01 .cpn_head p{
    height: 50vw;
    background: url(../img/sp/cpn01_caption.png) top center /100% auto no-repeat;
    margin-top: 0;
  }
  .cpn_broadcast {
    margin-top: 1.875vw;
    height: 73.125vw;
  }
  .broadcast_vol1 {
    background:
    url(../img/sp/cpn01_broadcast_vol1.png) bottom center /100% auto no-repeat,
    url(../img/sp/cpn01_broadcast_bg.png) top center /100% auto no-repeat;
  }
  .broadcast_vol1 h1 {
    height: 7.8125vw;
    background: url(../img/sp/cpn01_broadcast_vol1_date_01.png) top left /100% auto no-repeat;
  }
  .broadcast_vol2 {
    background:
    url(../img/sp/cpn01_broadcast_vol2.png) bottom center /100% auto no-repeat,
    url(../img/sp/cpn01_broadcast_bg.png) top center /100% auto no-repeat;
  }
  .broadcast_vol2 h1 {
    height: 7.8125vw;
    background: url(../img/sp/cpn01_broadcast_vol1_date_02.png) top left /100% auto no-repeat;
  }
  .broadcast_vtuber{
    height: 32.65625vw;
  }
  .broadcast_link {
    width: 57.5vw;
    height: 7.8125vw;
  }
  .broadcast_link a {
    width: 28.125vw;
    height: 7.8125vw;
    overflow: hidden;
  }
  .broadcast_vtuber-top .broadcast_link {
    top: 19vw;
    left: 32.7vw;
  }
  .broadcast_vtuber-btm .broadcast_link {
    top: 19vw;
    left: 9.4vw;
  }
  .btn_vtuber_channel:before {
    background-image: url(../img/sp/btn_vtuber_channel.png);
  }
  .btn_vtuber_twitter:before {
    background-image: url(../img/sp/btn_vtuber_twitter.png);
  }
  .cpn_entry{
    margin-top:2.34375vw;
  }
  .cpn_folder:before{
    display:none;
  }
  .cpn01 .cpn_entry .head_arrow,
  .cpn01 .cpn_prize .head_arrow{
    background:none;
    height: auto;
    top:0;
  }
  .cpn_entry .cpn_folder {
    height: 32.8125vw;
    background: url(../img/sp/cpn01_entry_img.png) top center /100% auto no-repeat;
  }
  .cpn_prize{
    margin-top:6.25vw;
  }
  .cpn_prize .cpn_folder {
    height: 32.1875vw;
    background: url(../img/sp/cpn01_prize_img.png) top center /100% auto no-repeat;
  }
  .cpn_prize .note {
    font-size:1em;
    margin-top:2.34375vw;
  }
  .howto_portal2{
    margin-top:6.25vw;
  }
  .howto_portal2 h2 {
    height: 3.28125vw;
    background: url(../img/sp/cpn01_prize_portal2_head.png) top center /auto 100% no-repeat;
  }
  .howto_portal2_flow img{
    display:block;
    width:87.5%;
    margin:3.125vw auto;
  }
  .cpn_contents .cpn_attention {
    width: 95%;
    margin: 3.75vw auto 0;
    padding: 3.125vw;
  }
  .howto_portal2 ol{
    font-size:1em;
    width:95%;
    margin:0 auto;
  }
  .cpn_attention h2 {
    height: 2.1875vw;
    background: url(../img/sp/cpn01_head_attention.png) top left /auto 100% no-repeat;
    margin-bottom: 1.5625vw;
  }
  .cpn_attention ul{
    overflow:hidden;
    font-size:0.87em;
    line-height:1.5;
  }
  .cpn_contact{
    margin-top:3.125vw;
  }

  .cpn_contact .head{
    background: url(../img/sp/cpn01_contact.png)top center /100% auto no-repeat;
    height: 23.75vw;
  }
  .cpn_contact .link a {
    height: 13.125vw;
    background: url(../img/sp/cpn01_contact_link.png)top center /100% auto no-repeat;
  }
  .cpn_contents .cpn_steam {
    background: url(../img/sp/cpn_steam_bg.png) top center /cover no-repeat;
    padding:3.125vw 0;
    margin-top:3.125vw;
    height: auto;
  }
  .cpn_steam .link_steam {
    width: 49.0625vw;
    height: 9.21875vw;
  }
  .cpn_steam .link_steam:before {
    background-image: url(../img/sp/btn_steam.png);
  }
  .cpn_steam .link_prepaid {
    width: 65.46875vw;
    height: 9.0625vw;
    margin: 2vw auto 0;
  }
  /*cpn02*/
  .cpn_contents.cpn02{
    margin-top:12.5vw;
  }
  .cpn02:before{
    border:none;
    border-top:5px solid #5585f3;
    border-bottom:5px solid #5585f3;
    background-image:url(../img/sp/cpn02_head.png);
    background-size:100% auto;
  }
  .cpn02 > div{
    margin-top:6.25vw;
    padding: 0 2.5%;
  }
  .cpn02 .cpn_head {
    height: 51.5625vw;
  }
  .cpn_box {
    border: 2px solid #8fe3f8;
    border-top: 2.8125vw solid #8fe3f8;
    padding: 3.125vw 0;
  }
  .cpn02 .head_arrow {
    top: -5vw;
    height: 4.375vw;
  }
  .cpn02 .cpn_date{
    margin-top:3.125vw;
  }
  .cpn02 .cpn_date .head_arrow {
    background: url(../img/sp/cpn02_head_date.png) top left 1vw /auto 100% no-repeat;
  }
  .cpn02 .cpn_date p {
    height: 12.5vw;
    background: url(../img/sp/cpn02_date.png) left center /100% auto no-repeat;
  }
  .cpn02 .cpn_entry .head_arrow {
    background: url(../img/sp/cpn02_head_entry.png) top left 1vw /auto 100% no-repeat;
  }
  .cpn02 .cpn_entry li {
    width: 42.1875vw;
    padding: 1.5625vw;
    margin:0 1.5625vw;
  }
  .cpn02 .cpn_entry li:before{
    width:5vw;
    height: 5vw;
  }
  .cpn02 .cpn_entry li:nth-child(1):before,
  .cpn02 .cpn_entry li:nth-child(2):before{
    background-size:auto 60%;
  }
  .cpn02 .cpn_entry li p:first-child {
    padding-left: 6vw;
    font-size: 1em;
    min-height: 5vw;
    text-align: left;
  }
  .cpn02 .cpn_entry li:nth-child(1) img{
    margin-top:0.5em;
  }
  .cpn02 .cpn_entry li:nth-child(1) img{
    width:33.125vw;
  }
  .cpn02 .btn_store {
    width: 26.71875vw;
    height: 6.40625vw;
  }
  .cpn02 .btn_store:before {
    background-image: url(../img/sp/btn_store.png);
    background-size:100% auto;
  }
  .cpn02 .btn_soon, .cpn02 .btn_entry {
    width: 40.3125vw;
    height: 7.8125vw;
    margin: 3.125vw auto 0;
  }
  .cpn02 .btn_soon:before{
    background-image: url(../img/sp/btn_entry-soon.png);
    background-size:100% auto;
  }
  .cpn02 .btn_entry:before{
    background-image: url(../img/sp/btn_entry.png);
    background-size:100% auto;
  }
  .cpn02 .cpn_prize{
    position: relative;
  }
  .cpn02 .cpn_prize .head_arrow{
    background: url(../img/sp/cpn02_head_prize.png) top left 1vw /auto 100% no-repeat;
    width:93.75vw;
    top: -2.0vw;
  }
  .cpn02 .cpn_prize .cpn_box{
    position: static;
    background: url(../img/sp/cpn02_prize_bg.png) bottom center /100% auto no-repeat;
    padding: 0;
    height: 92.65625vw;
  }
  .cpn02 .prize_steam,.prize_goods{
    position: absolute;
    left:0;
    width:100%;
  }
  .cpn02 .prize_steam{
    background: url(../img/sp/cpn02_prize_steam.png) top center /100% auto no-repeat;
    height: 42.34375vw;
  }
  .cpn02 .prize_goods{
    background: url(../img/sp/cpn02_prize_goods.png) top center /100% auto no-repeat;
    top:42.34375vw;
    height: 50.3125vw;
  }
  .cpn02 .cpn_target p,
  .cpn02 .cpn_store p,
  .cpn02 .cpn_announce p {
    padding: 0 3.75vw 0 3.75vw;
    font-size: 1em;
    line-height: 1.57;
  }
  .cpn02 .cpn_target .head_arrow {
    background: url(../img/sp/cpn02_head_target.png) top left 1vw /auto 100% no-repeat;
  }
  .cpn02 .cpn_store .head_arrow {
    background: url(../img/sp/cpn02_head_store.png) top left 1vw /auto 100% no-repeat;
  }
  .cpn02 .cpn_store p{
    font-size:1.26em;
    line-height: 2.2;
  }
  .cpn02 .cpn_store .note{
    font-size:1em;
    line-height: 1.5;
  }
  .cpn02 .cpn_announce .head_arrow {
    background: url(../img/sp/cpn02_head_announce.png) top left 1vw /auto 100% no-repeat;
  }
  .cpn02 .cpn_attention h2 {
    background: url(../img/sp/cpn02_head_attention.png) top left /auto 100% no-repeat;
  }

  /*footer*/
  .footer {
      margin-top: 12.5vw;
      padding: 3.75vw 2.5%;
  }
  .footer_copy .copyright {
      font-size: 0.8em;
      line-height: 1.5;
      margin: 1.4em 0;
  }
}