@charset "utf-8";
/* CSS Document */
.fadein { opacity: 0; transition: all 0.5s; position: relative; top: 2em; }

.fadein.scrollin { opacity: 1; transform: translate(0, 0); top: 0em; }
main{
  color:#231815;
}
main h1{
  margin-bottom:0px;
  position:relative;
  z-index:10;
}
main h1 img{
  opacity:0;
}
main h1.show img{
  animation: scaleIn .8s ease-in forwards; opacity: 1;
}
main h2 img{
  opacity:0;
}
main h2.show img{
  animation: scaleIn .8s ease-in forwards; opacity: 1;
}

@keyframes scaleIn {
  0% { transform: scale(0); }
  60% { transform: scale(1.3); }
  90% { transform: scale(1.4); }
  100% { transform: scale(1); }
}
main h2{
  margin-bottom:0px;
}
main .inner{
  max-width:960px;
  margin:0 auto;
  position:relative;
}
main .bg_red{
  background:url("../img/bg_red.jpg") center top repeat-y;
}
#main_v{
  padding-top:5rem;
  text-align: center;
  padding-bottom:12.5rem;
}
#main_v .chara_left{
  position:absolute;
  left:3%;
  top:10%;
}
#main_v .chara_right{
  position:absolute;
  right:3%;
  top:10%;
}
#main_v h3{
  padding-bottom:3rem;
}
#main_v .gift{
  background:url("../img/bg_yellow.jpg") center top repeat-y;
  text-align: center;
  margin-bottom:8rem;
}
#main_v .gift img{
  position:relative;
  margin-top:-2rem;
  margin-left:-100vw;
  top:auto;
}
#main_v .gift img.scrollin{
  margin-left:0vw;
}

#main_v .btn_oubo{
  margin:7rem 0;
}
#main_v ul{
  display:inline-block;
  padding-bottom:6rem;
}
#main_v ul li{
  background-color:#FFF;
  font-size:3.6rem;
  padding:1em 0.5em;
  border:solid 0.3rem;
  border-bottom:none;
  position:relative;
  font-weight: bold;
}
#main_v ul li p{
  position:absolute;
  top:50%;
  left:3%;
  width:94%;
  background-color: rgba(0, 0, 0, 0.8);
  color:#fff100;
  font-size:3.8rem;
  margin-top:-0.9em;
}
#main_v ul li:last-child{
  border-bottom:solid 0.3rem;
}
#main_v ul li span{
  font-size:3rem;
}
#main_v ul li img{
  position:absolute;
  left:-0.3rem;
  top:-3rem;
}
main .tab-buttons{
  background-color:#FFF;
  padding:2.5rem 0;
}
main .tab-btn {
  width:45.3rem;
  height: 17.5rem;
  background:url("../img/tab_bg.png") 0 0/contain no-repeat;
  cursor: pointer;
  border:none;
  margin:0 0.5rem;
  font-size:4rem;
  color:#FFF;
  color:#231815;
}
main .tab-btn span{
  font-size: 0.6em;
  position: relative;
  top: -0.3em;
}
main .tab-btn:first-child{
  background:url("../img/tab_bg_end.png") 0 0/contain no-repeat;
}
main .tab-btn.active { 
  background:url("../img/tab_bg_hover.png") 0 0/contain no-repeat;
  color:#FFF;
}


main .tab-content { display: none; }
main .tab-content.active { display: block; }
main .bg_yellow{
  background:url("../img/bg_yellow.jpg") center top repeat-y;
  padding-bottom:2rem;
}

#campaign h3{
  text-align: center;
  position:relative;
  top:-8rem;
  z-index:10;
}
#campaign h3 .card{
  position: absolute;
    left: 50%;
    bottom: 0rem;
    margin-left: 13rem;
  transform-origin: center;
  top:auto;
}
#campaign h3 .card.scrollin{
  animation: shrink-bounce 0.8s cubic-bezier(.68,-0.55,.27,1.55) forwards;
}
#campaign #tab2 h3 .card{
        bottom: auto;
    top: 18rem;
    margin-left: 17rem;
}
@keyframes shrink-bounce {
  0% {
    transform: scale(1.3);
  }
  100% {
    transform: scale(1);
  }
}

#campaign .judge{
  background-color:#333333;
  text-align: center;
  margin-top: -16rem;
  margin-bottom:18.3rem;
}
#campaign .judge p{
  max-height: 618px;
}
#campaign .judge p img{
  top:auto;
}
#campaign dl{
  position:relative;
  z-index:1;
}
#campaign dl dt{
  background:url("../img/finger.png") 3% top /contain no-repeat;
  background-color:#d62018;
  text-align: center;
  font-size:0px;
  position:relative;
}
#campaign dl dt .card{
      position: absolute;
    right: 21%;
    top: -3rem;
}
#campaign dl dt .chara{
      position: absolute;
    right: 0%;
    top: -16rem;
}
#campaign dl dt.end_text{
  font-size:3.8rem;
  color:#fff100;
  text-align: center;
  background:none;
  background-color:#474020;
  margin-bottom:5rem;
  line-height: 1.2;
  padding:3rem 0;
}
#campaign dl dt.end_text span{
  font-size:0.736em;
}
#campaign dl dt.end_text2{
  position:relative;
      bottom: -19rem;
    margin-top: -19rem;
  z-index:1;
  background-color: rgba(0, 0, 0, 0.8);
}
#campaign dl dd{
  margin-bottom:5rem;
}
#campaign dl dd.kikan{
  font-size:3.6rem;
  background-color:#f8f3f3;
  text-align: center;
  padding:0.8em 0;
  margin-bottom:5rem;
  font-weight: bold;
}
#campaign dl dd.kikan span{
  font-size:3rem;
}
#campaign dl dd.boshu{
  background-color:#d62018;
  padding:2% 3%;
  border-top:0.4rem solid #FFF;
}
#campaign dl dd.boshu ul li{
  display:flex;
  padding:1.5em 0;
  border-bottom:0.3rem dashed;
}
#campaign dl dd.boshu ul li:last-child{
  border-bottom:none;
}
#campaign dl dd.boshu ul li p{
  font-size:2.8rem;
  color:#FFF;
  margin-left:0.5em;
  margin-top:0.3em;
  white-space: nowrap;
  font-weight: bold;
}
#campaign dl dd.text{
  padding:4rem 14% 3rem;
  background-color:#f8f3f3;
}
#campaign dl dd.text ul li{
  font-size:3.4rem;
  display:flex;
  align-items: center;
  margin:0.5em 0;
  font-weight: bold;
  position:relative;
}
#campaign dl dd.text ul li p{
  width:12em;
}
#campaign dl dd.text ul li .number{
  background-color:#080c13;
  color:#FFF;
  border-radius: 50%;
  width:1em;
  height: 1em;
  line-height: 1;
  display:flex;
  align-items: center;
  justify-content: center;
  margin-right:0.3em;
}
#campaign dl dd.text ul li.active{
  background-color:#fff100;
  padding-left:0.5em;
  margin-left:-0.5em;
  color:#d62018;
}
#campaign dl dd.text ul li + .active{
  margin-top:1.5em;
}
#campaign dl dd.text ul li img{
  display:none;
}
#campaign dl dd.text ul li.active img{
  position:absolute;
  left:0px;
  top:-4rem;
  display:block;
}
#campaign dl dd.text ul li.active .number{
  background-color:#d62018;
  color:#fff100;
}
#campaign dl dd.text ul li.active .hiragana{
  font-size:1.47em;
}
#campaign dl dd.text ul.caption{
  padding-top:1em;
}
#campaign dl dd.text ul.caption li{
  font-size:1.8rem;
  padding-left:1em;
  text-indent:-1em;
  margin:0px;
}


#campaign .btn_oubo{
  text-align: center;
  margin-bottom:2rem;
}
#campaign .img{
  text-align: center;
}
#campaign h4{
  background:url("../img/title_bg.png") center top no-repeat;
  height: 9.6rem;
  display:flex;
  justify-content: center;
  align-items: center;
  margin-top:2rem;
  margin-bottom:3rem;
}
#campaign h4 img{
  margin-left:-3rem;
}
#campaign .prize{
  text-align: center;
  margin-bottom:6rem;
}
#campaign .win{
  background-color:#d62018;
  padding:5rem 0;
  text-align: center;
  position:relative;
}
#campaign .win .icon{
  position:absolute;
  top:-2rem;
  right:11%;
}
#campaign .win .text{
  font-size:2.8rem;
  text-align: center;
  color:#FFF;
  font-weight: bold;
  margin-bottom:1em;
}
#campaign .win .text .large{
  font-size:1.57em;
  line-height: 1.1;
}

#campaign .win .btn_profile{
  margin:3rem 0;
}
.modal{
  width:717px;
  background-color:#FFF;
  padding:4rem 5%;
  box-sizing: border-box;
}
.modal .title{
  font-size:3rem;
  font-weight: bold;
  text-align: center;
}
.modal .title span{
  font-size:5rem;
  margin-top:0.5em;
  margin-bottom:0.5em;
  display:block;
}
.modal .title span rt{
  font-size:0.4em;
  text-align: center;
  margin-bottom:0.1em;
}
.modal .txt{
  font-size:3rem;
  margin-top:1.5em;
  text-align: left;
  font-weight: bold;
}
.modal .txt span{
  display:inline-block;
  background-color:#000;
  color:#FFF;
  padding:0 0.2em;
  margin-bottom:0.5em;
}

#campaign .win ul.caption{
  display:inline-block;
  margin:1.5em 0 3em;
}
#campaign .win ul.caption li{
  font-size:2.2rem;
  color:#FFF;
  text-align: left;
  padding-left:1em;
  text-indent:-1em;
}
#campaign .win + ul.caption{
  margin:1.5em 0 3em;
}
#campaign .win + ul.caption li{
  font-size:1.8rem;
  padding-left:1em;
  text-indent:-1em;
}
#campaign .win + ul.caption li a:hover{
  text-decoration: underline;
}
#campaign .prize + ul.caption li{
  font-size:1.8rem;
  padding-left:1em;
  text-indent:-1em;
}
#campaign .prize + ul.caption li a:hover{
  text-decoration: underline;
}
#campaign .caption_area{
  background-color:#FFF;
  padding:3rem 0;
}
#campaign .caption_area li{
  font-size:2.4rem;
  padding-left:1em;
  text-indent:-1em;
}
#campaign .ebisen_bg{
  height: 25rem;
  background:url("../img/ebisen_bg.png") center center no-repeat;
}
#campaign dl dd.howto{
  background-color:#f8f3f3;
  padding:3.5%;
}
#campaign dl dd.howto p{
  font-size:2.8rem;
  color:#d62018;
  text-align: center;
  font-weight: bold;
  margin:1.5em 0 0.5em;
}
#campaign dl dd.howto ul li{
  font-size:1.8rem;
  padding-left:1em;
  text-indent:-1em;
  margin-bottom:1em;
}
#campaign dl dd.howto ul li:last-child{
  margin-bottom:0px;
}
#campaign #tab2 dl dd.boshu ul li {
  align-items: center;
}
#campaign #tab2 dl dd.boshu ul li p {
    margin-top: 0em;
}
#campaign #tab2 dl dd.boshu ul li:last-child {
    border-bottom: 0.3rem dashed;
}
#campaign #tab2 dl dd.boshu ul.caption{
  padding:2em 0 1em;
}
#campaign #tab2 dl dd.boshu ul.caption li{
  font-size:1.8rem;
  color:#FFF;
  padding-left:1em;
  text-indent:-1em;
  padding-top:0px;
  padding-bottom:0px;
  border:none!important;
}
#campaign #tab2 .prize {
    margin-bottom: 2rem;
}

#campaign dl dd.kiyaku{
  background-color:#f8f3f3;
  padding:3.5%;
}
#campaign dl dd.kiyaku > p{
  text-align: center;
  margin:0 0 2em;
}
#campaign dl dd.kiyaku > div{
  padding:1.5em;
  height: 40rem;
  box-sizing: border-box;
  overflow-y: scroll;
  background-color:#FFF;
}
.end{
  background:url("../img/footer_bg.jpg") center bottom no-repeat;
  padding:8rem 0 7rem;
  text-align: center;
}
.end .btn_top{
  padding:4rem 0 5rem;
}
.end .end_text{
  font-size:3.8rem;
  color:#fff100;
  text-align: center;
  background:none;
  background-color: rgba(0, 0, 0, 0.8);
  margin-bottom:5rem;
  line-height: 1.2;
  padding:3rem 0;
  position:relative;
  bottom:-19rem;
  margin-top:-20rem;
}
.end .end_text span{
  font-size:0.736em;
}


@media screen and (min-width: 768px) and (max-width: 960px) {
  main img{
    max-width:100%;
  }
  #main_v .chara_left {
    width: 23%;
}
  #main_v .chara_right {
    width: 23%;
}
  main .tab-btn {
    width: 40%;
    height: 15vw;
  }
  #campaign .judge p {
    height: 46vw;
}
  
  #campaign dl dt .card {
    right: 16%;
        top: 0rem;
        width: 15%;
}
  #campaign dl dt .chara {
    top: -5rem;
    width:15%;
}
  
  #campaign dl dd.boshu ul li span{
    min-width:9vw;
    width:9vw;
    
  }
  #campaign dl dd.boshu ul li p {
    font-size: 2.5vw;
}
  #campaign dl dd.text {
    padding: 3rem 5%;
}
  #campaign dl dd.text ul li{
    font-size:4vw;
  }
  #campaign .win .icon {
    right: 2%;
}
  
  
  
  
}

@media screen and (max-width: 767px) {
  
  main .bg_red {
    background: url(../img/bg_red_sp.jpg) center top/100% repeat-y;
}
  main h1{
    padding:0 28vw;
  }
  #main_v {
    padding-top: 2rem;
    padding-bottom: 5.5rem;
}
  #main_v .chara_left {
        left: 4%;
        top: 9%;
        width: 30vw;
}
  #main_v .chara_right {
    right: 4%;
    top: 9%;
    width: 30vw;
}
  main h2{
    padding:5vw 6vw 0;
  }
  #main_v .gift{
    padding:0 5vw;
  }
  #main_v .gift img {
    margin-top: 2rem;
    margin-bottom:-7rem;
}
  #main_v .btn_oubo {
    padding:0 10vw;
}
  #main_v ul {
    width:95%;
    margin:0 auto;
    padding-bottom: 6rem;
}
  #main_v ul li{
    font-size:3.8vw;
    padding: 1.5em 0em;
    white-space: nowrap;
  }
  #main_v ul li span {
    font-size: 0.9em;
}
  #main_v ul li img {
    left: -0.3rem;
        top: -1.6rem;
        width: 33vw;
}
  #main_v ul li p {
    font-size: 5vw;
}
  main .tab-buttons {
    padding: 2rem 0;
}
  main .tab-btn {
    width: 46vw;
    height: 23vw;
    background: url(../img/tab_bg_sp.png) 0 0 / contain no-repeat;
    margin: 0 0.2rem;
    font-size: 2rem;
}
  main .tab-btn:first-child {
    background: url(../img/tab_bg_sp_end.png) 0 0 / contain no-repeat;
}
  main .tab-btn.active {
    background: url(../img/tab_bg_sp_hover.png) 0 0 / contain no-repeat;
}
  #campaign h3 {
    top: -5rem;
    padding:0 2vw 0 7vw;
}
  #campaign h3 .card {
    left: 47%;
    bottom: 1rem;
    margin-left: 9rem;
    width: 28vw;
}
  #campaign #tab2 h3 .card {
    bottom: auto;
    top: 9rem;
        margin-left: 9rem;
}
  
  #campaign .judge {
    background-color: #333333;
    margin-top: -9rem;
    margin-bottom: 16.3rem;
}
  #campaign .judge p {
    max-height: 79vw;
}
  #campaign .judge p img{
    width:140vw;
    margin-left:-20vw;
}
  #campaign dl dt .chara {
    top: -15rem;
    width: 30vw;
}
  #campaign dl dt .card {
    right: 9%;
    top: -2rem;
    width: 21vw;
}
  #campaign dl dt img:first-child{
    height: 15vw;
    width:auto;
  }
  #campaign dl dt.end_text {
    font-size: 5.5vw;
    padding: 0.5em 0;
    margin-bottom: 3rem;
}
  #campaign dl dt.end_text2 {
    bottom: -26vw;
    margin-top: -26vw;
}
  #campaign dl dd {
    margin-bottom: 3rem;
}
  #campaign dl dd.kikan {
    font-size: 3.8vw;
    padding: 1em 0;
    margin-bottom: 3rem;
    white-space: nowrap;
}
  #campaign dl dd.kikan span {
    font-size: 1.5rem;
}
  #campaign dl dd.boshu ul li span{
    min-width:9vw;
    width:9vw;
    
  }
  #campaign dl dd.boshu ul li p {
    font-size: 2.5vw;
}
  #campaign dl dd.text {
    padding: 3rem 5% 1rem;
}
  #campaign dl dd.text ul li{
    font-size:3.8vw;
  }
  #campaign .win .icon {
    right: 2%;
}
  #campaign dl dd.boshu {
    border-top: 0.2rem solid #FFF;
}
  #campaign dl dd.boshu ul li{
    position:relative;
  }
  #campaign dl dd.boshu ul li:nth-of-type(2){
    height: 87vw;
  }
  #campaign dl dd.boshu ul li span {
        min-width: 15vw;
        width: 15vw;
    }
      #campaign dl dd.boshu ul li p {
        font-size: 3.8vw;
        white-space: inherit;
    }
  #campaign dl dd.boshu ul li p + img{
    position:absolute;
    top:24vw;
    left:0px;
  }
  #campaign dl dd.text ul li.active img {
    top: -2rem;
    width: 23%;
}
  #campaign dl dd.text ul li .number{
    box-sizing: border-box;
    padding-top:0.2em;
        width: 1.2em;
    height: 1.2em;
  }
  #campaign dl dd.text ul li p {
    margin-top: 0.2em;
    white-space: nowrap;
    width:13em;
}
  #campaign dl dd.text ul.caption li {
    font-size: 1.2rem;
}
  #campaign .btn_oubo {
    padding:0 10vw;
    margin-bottom: 2em;
}
      #campaign h4 {
        background: url(../img/title_bg.png) 49% top / 258% no-repeat;
        height: 5.3rem;
        margin-top: 1rem;
        margin-bottom: 2rem;
    }
  #campaign h4 img {
        height: 10vw;
        width: auto;
        margin-left: 0rem;
    }
  #campaign .img.play {
}
  #campaign .img.play img{
    width:73vw;
    margin-left:-10vw;
  }
  #campaign .prize{
    padding:0 2.5%;
  }
  #campaign .win .icon {
        right: -2%;
        width: 24vw;
    }
  #campaign .win {
    padding: 3rem 3%;
}
  #campaign .win img:first-child{
    width:40vw;
  }
#campaign .win .text {
    font-size: 1.5rem;
    margin-bottom: 1em;
  line-height: 2;
}
  #campaign .win .btn_profile img{
    width:60vw;
  }
  .modal {
    width: 90vw;
    padding: 4rem 5%;
}
  
  .modal .title {
    font-size: 1.6rem;
}
  .modal .title span {
    font-size: 3rem;
}
  .modal .title + img{
    width:100%;
  }
  .modal .txt {
    font-size: 1.5rem;
}
  
#campaign .win ul.caption {
    margin: 1.5em 0 2em;
}
  #campaign .win ul.caption li {
    font-size: 1.2rem;
}
  #campaign .win + ul.caption {
    margin: 1em 0 1.5em;
    padding-bottom: 0em;
}
  #campaign .win + ul.caption li {
    font-size: 1.2rem;
}
  #campaign .caption_area {
    padding: 2rem 0;
}
  #campaign .caption_area li {
    font-size: 1.4rem;
}
  #campaign .ebisen_bg {
    height: 15rem;
    background: url(../img/ebisen_bg.png) 0% center / 257% no-repeat;
}
  #campaign dl dd.howto {
    padding: 5%;
}
  #campaign dl dd.howto p {
    font-size: 1.8rem;
}
  #campaign dl dd.howto ul li {
    font-size: 1.2rem;
}
  #campaign dl dd.kiyaku {
    padding: 5%;
    padding-top:0.5em;
}
  #campaign dl dd.kiyaku > div {
    font-size:1.2rem;
}
  #campaign dl dd.kiyaku > p {
    margin: 1em 0 1em;
}
  #campaign #tab2 h3 {
        padding: 0 2vw 0 4vw;
    margin-bottom: -4rem;
    }
  #campaign #tab2 dl dd.boshu ul li:nth-of-type(2) {
        height: auto;
    }
  #campaign #tab2 dl dd.boshu ul.caption li {
    font-size: 1.2rem;
  }
  #campaign .prize + ul.caption li {
    font-size: 1.2rem;
}
  
  
  .end {
    background: url("../img/footer_bg_sp.jpg") center bottom/cover no-repeat;
    padding: 4rem 0 3rem;
}
  .end .btn_oubo{
    padding:0 10vw;
  }
  .end .btn_top{
    padding:3rem 25vw 4rem;
  }
  .end .btn_top + img{
    width:30%;
  }
  .end .end_text {
    font-size: 5.5vw;
    padding: 0.5em 0;
        bottom: -30vw;
    margin-top: -30vw;
}

  
  
  
}