@charset eUTF-8Œ;



.rec-pink{color: #EE6875;}
.rec-pink-light1{color:#ffb5bd;}
.rec-pink-light2{color:#FBDFD8;}
.aca-red{color:#942535;}

.youtube {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
}
.youtube iframe {
  position: absolute;
  top: 0;
  right: 0;
  width: 100% !important;
  height: 100% !important;
}

.pc-show{display:block;}
.pc-show-inline{display:inline;}
.sp-show{display:none;}
.sp-show-inline{display:none;}


/* layout */

.top-main{
    background: url(../img/con-bg.jpg);
    background-size: cover;
/*    padding:10px 0 30px;*/
    position: relative;
    min-height:500px;
}
.title{
    position:absolute;
    max-width: 100%;
    left:50%;
    top: 50%;
    transform:translate(-50%, -50%);
    z-index: 5000;
}

.c-click-dl{
    position:absolute;
    width:80px;
    right:25px;
    top:30px;
    -webkit-animation: horizontal1 1s ease-in-out infinite alternate;
}
.c-click-oubo{
    position:absolute;
    width:80px;
    right:25px;
    top:10px;
    -webkit-animation: horizontal1 1s ease-in-out infinite alternate;
}

@-webkit-keyframes horizontal1 {
    0% { -webkit-transform:translateY( -8px); }
  100% { -webkit-transform:translateY(  0px); }
}
@-webkit-keyframes horizontal2 {
    0% { -webkit-transform:translateY( -16px); }
  100% { -webkit-transform:translateY(  0px); }
}

.tohyo-btn-c img{
    position: absolute;
    width:70px;
    bottom:-30px;
    right:20px;
    -webkit-animation: horizontal1 1s ease-in-out infinite alternate;
}



.riji img{
    border:4px solid #EE6875;
}
.riji-name{
    border:4px solid #EE6875;
    background:#EE6875;
    font-weight:bold;
    color:#ffffff;
    margin:0px auto;
}

.btn-chara{margin-left: 20px;}
.btn-chara2{margin-left: 20px;}

.btn-chara img{
    max-width: 250px;
    -webkit-animation: horizontal1 1s ease-in-out infinite alternate;
}
.btn-chara2 img{
    max-width: 220px;
    -webkit-animation: horizontal1 1s ease-in-out infinite alternate;
}

/*btn*/

/*** btn ***/
a.btn-beta {
  border-radius: 40px;
  padding:25px 30px;
  display:inline-block;
  background: #EE6875;
  text-align: center;
  font-weight: bold;
  color:#FFF;
}
a.btn-beta:hover {
  opacity:0.6;
}
a.btn-beta100 {
    width:100%;
}


a.btn-border {
  border: 2px solid #EE6875;
  border-radius: 0;
  padding:10px 0px;
  display:block;
  background: #fff;
  text-align: center;
  font-weight: bold;
}

a.btn-border:hover {
  color: #fff;
  background: #EE6875;
}

.s-box-beta-light-pink{
    background:#fee7ea;
    padding:10px 0px;
  display:block;
  text-align: center;
  font-weight: bold;    
}



.s-btn-beta{
    background: #EE6875;
    padding: 5px;
    color:#fff;
    font-weight: bold;
    font-size: 1rem;
}

.s-btn-border-kadomaru{
    border:solid 2px #EE6875;
    padding: 20px 15px;
    border-radius: 15px;
    position: relative;
    font-weight: bold;
    font-size: 1rem;
}

.s-btn-beta-kadomaru{
    background: #EE6875;
    padding: 10px 15px;
    border-radius: 15px;
    color:#fff;
    font-weight: bold;
    font-size: 1rem;
}


#reward div{text-align: center;}
#reward img{width:80%;}


#saishu img{max-width: 70%;}







.zoom{
  animation: zoomIn 0.7s ease-in-out forwards;
  animation-delay: 0.8s;
  transform: scale(0,0);
}

@keyframes zoomIn {
  100% {
    transform: scale(1,1);
  }
}

@media screen and (max-width: 1200px) {
    .top-main{
/*        width:100%;*/
    }
    .title{    
        width:75%;
/*        transform:translate(-50%, -60%);*/
    }
    #reward div{margin-top: 30px;}
    #reward div:last-child;{margin-top: 0px !important;background:red;}
    #reward img{width:70%;}

    .c-click-dl{
        right:15px;
    }
    .c-click-oubo{
        right:20px;
    }
}

@media screen and (max-width: 1000px) {
    .c-click-dl{
        width:70px;
        right:0px;
        top:30px;
    }
    .c-click-oubo{
        width:70px;
        right:0px;
        top:10px;
    }
}


@media screen and (max-width: 800px) {
    #reward img{width:55%;}
    #shinsa img{width:55%;}
    .riji-name{width:55%;font-size:15px;}

    .c-click-dl{
        width:60px;
        right:0px;
        top:30px;
    }
    .c-click-oubo{
        width:60px;
        right:0px;
        top:10px;
    }
.tohyo-btn-c img{
    position: absolute;
    width:60px;
    bottom:-10px;
    right:-10px;
    -webkit-animation: horizontal1 1s ease-in-out infinite alternate;
}

    @keyframes SlideIn {
      0% {
        opacity: 0;
        transform: translate(-50%, -40%);
      }
      100% {
        opacity: 1;
        transform: translate(-50%, -100%);
      }
    }
    
}


@media screen and (max-width: 750px) {
    .c-click-dl{
        width:80px;
        right:150px;
    }
    .c-click-oubo{
        width:80px;
        right:175px;
    }
}

@media screen and (max-width: 700px) {
    .c-click-dl{right:130px;}
    .c-click-oubo{right:150px;}
}

@media screen and (max-width: 650px) {
    .c-click-dl{right:100px;}
    .c-click-oubo{right:120px;}
}

@media screen and (max-width: 600px) {
    .c-click-dl{right:70px;}
    .c-click-oubo{right:90px;}
}