@charset "utf-8";

/* ==================================================
お得マラソンキャンペーン SP
================================================== */
#article .pc{
  display: none;
}

#article {
  position: relative;
  width: 100%;
  margin: 0 auto;
  line-height: 1.6;
}

#article .articleInner{
  position: relative;
  /* top: 0; */
  width: 100vw;
  background: url(../../../img/contents/lp/renewalcampaign0129/sp_innerbg.jpg) repeat-y 0 0;
  background-size: contain;
  padding-bottom: 10vw;
  box-shadow: 0px 0px 6px -1px #000;
}


#article img{
  display: block;
  vertical-align: bottom;
  width: 100%;
}

/* -- このキャンペーンについて -- */
#article .cp-intro{

}

/* - ミッション一覧box - */
#article .cp-intro-mission{
  position: relative;
  width: 100%;
  margin-top: -16.5vw;
}

/*  */
#article .cp-intro-mission-list-title{
  position: absolute;
  width: 35.29vw;
  top: -23vw;
  left: 2vw;
}

/* フキダシ */
#article .cp-intro-mission-talk{
  position: absolute;
  width: 22.40vw;
  top: -52vw;
  left: 18vw;
}

/* 一覧リスト */
#article .cp-intro-mission-list{
  width: 91.15vw;
  margin: 0 auto;
}

/* 注意事項 */
#article .cp-intro-mission-notice{
  width: 91.15vw;
  margin: 0 auto;
  background: #ffdc9d;
  border-radius: 5px;;
  margin-top: 2.61vw;
}

#article .cp-intro-mission-notice h3{
  font-size: 1.2em;
  font-weight: bold;
  text-align: center;
  padding-top: 0.5em;
}


#article .cp-intro-mission-notice ul{
  padding: 1em 1em;
}

#article .cp-intro-mission-notice li{
  list-style: disc inside;
}



/* -- キャンペーン対象タイトルリスト -- */
#article .cp-title{
  margin-top: 15vw;
}

/* - 見出し - */
#article .cp-title h2{
  width: 97.66vw;
  margin: 0 auto;
}

/* - タイトル一覧表示 - */
#article .cp-titlelist > ul{
  width: 98%;
  margin:  0 auto;
  display: flex;
  flex-wrap: wrap;
}


/* - 各タイトル枠 - */
#article [class^="cp-titlelist-title_"]{
  width: 45vw;
  margin: 5vw 2vw;
}

#article [class^="cp-titlelist-title_"] a{
  display: block;
  cursor: pointer;
  text-decoration: none;
}

#article [class^="cp-titlelist-title_"] a:hover,
#article [class^="cp-titlelist-title_"] a:active{
  opacity: 0.8;
  transition: 0.25s;
}

/* 作品タイトル */
#article [class^="cp-titlelist-title_"] dt{
  font-size: 1.1em;
  color: #409eff;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* 紹介文(admin紹介文短参照) */
#article [class^="cp-titlelist-title_"] .title-disc{
 font-size: 0.8em;
 color: #333;
 display: -webkit-box;
 -webkit-line-clamp: 2;
 -webkit-box-orient: vertical;
 overflow: hidden;
 margin-top: 0.5em;
 min-height: 3em;
}

/* OGP画像(admin画像を参照) */
#article [class^="cp-titlelist-title_"] .title-ogpimg{
  border-radius: 5px;
  overflow: hidden;
  margin-top: 0.5em;
  position: relative;
  max-height: 24vw;
}

#article [class^="cp-titlelist-title_"] .title-ogpimg:before{
  display:block;
  position: absolute;
  content:"";
  width: 100%;
  height: 6vw;
  bottom: 0;
  background: linear-gradient(0deg,rgba(0,0,0,0.8) 20%,rgba(0,0,0,0) 100%);
}

#article [class^="cp-titlelist-title_"] .title-ogpimg:after{
  display:block;
  position: absolute;
  content:"ミッションを見る▼";
  color: #eee;
  font-size: 3vw;
  right: 0.5em;
  bottom: 0.3em;
}




/* ジャンル(admin参照) */
#article [class^="cp-titlelist-title_"] .title-genre{
  margin-top: 0.8em;
}

#article [class^="cp-titlelist-title_"] .title-genre ul{
  display: flex;
}

#article [class^="cp-titlelist-title_"] .title-genre ul li{
  background: #333;
  color: #eee;
  padding: 0.1em 0.8em;
  border-radius: 1em;
  font-size: 2.5vw;
}

#article [class^="cp-titlelist-title_"] .title-genre ul li:nth-child(n+2){
  margin-left: 0.5em;
}



/* -- キャンペーン対象タイトル内容 -- */
#article .cp-contents {
  margin-top: 10vw;
}

#article .cp-contents > ul > li:nth-child(n+2){
  margin-top: 10vw;
}

/* 背景パターン */
#article .cp-contents .cp-contents-inner{
  background: url(../../../img/contents/lp/renewalcampaign0129/sp_contents_bg_middle.jpg) repeat-y 0 0;
  background-size: contain;
  padding-bottom: 5vw;
}


/* - ゲームタイトル - */
#article .cp-contents .cp-contents-gametitle{
  display: flex;
  width: 90%;
  margin: 0 auto;
  padding-top: 5vw;
}

#article .cp-contents .cp-contents-gametitle dt{
  width: 20vw;
}

#article .cp-contents .cp-contents-gametitle > div{
  display: flex;
  flex-direction: column;
  margin-left: 3vw;
}

#article .cp-contents .cp-contents-gametitle .title-name{
  font-size: 1.5em;
  color: #fff;
}

#article .cp-contents .cp-contents-gametitle .title-disc{
  font-size: 0.9em;
  color: #eee;
}

/* - バナー背景色 - */
#article .cp-contents .cp-contents-banner{
  padding: 3vw 0;
  margin-top: 5vw;
  background: #454351;
}

#article .cp-contents .cp-contents-banner a{
  display: block;
}


#article .cp-contents .cp-contents-banner a:hover{
  opacity: 0.8;
}



#article .cp-contents .cp-contents-banner img{
  width: 90vw;
  margin: 0 auto;
}

/* - ミッション内容テキスト - */
#article .cp-contents .cp-contents-mission{
  width: 90vw;
  background: #fff;
  margin: 0 auto;
  padding-top: 0.5em;
  margin-top: 5vw;
}

/* - リボン -  */
#article .cp-contents .cp-contents-mission h3{
  display: inline-block;
  position: relative;
  height: 2em;/*高さ*/
  line-height: 2em;/*高さ*/
  text-align: center;
  padding: 0 3em 0 1.5em;/*文字の左右の余白*/
  font-size: 1.1em;/*文字サイズ*/
  background: #67aafd;/*背景色*/
  color: #FFF;/*文字色*/
  box-sizing: border-box;
  margin-left: -0.8em;
}

#article.adult .cp-contents .cp-contents-mission h3{
  background: #fd6767;/*背景色*/
}


#article .cp-contents .cp-contents-mission h3:after{
  position: absolute;
  content: '';
  width: 0px;
  height: 0px;
  z-index: 1;
}

#article .cp-contents .cp-contents-mission h3:after{
  top: 0;
  right: 0;
  border-width: 1em 0.8em 1em 0px;
  border-color: transparent #fff transparent transparent;
  border-style: solid;
}

#article .cp-contents .cp-contents-mission h3:before {
  position: absolute;
  content: '';
  top: 100%;
  left: 0;
  border: none;
  border-bottom: solid 0.5em transparent;
  border-right: solid 0.8em #2563b0;/*折り返し部分*/
}

#article.adult .cp-contents .cp-contents-mission h3:before {
  border-right: solid 0.8em #aa2525;/*折り返し部分*/
}

#article .cp-contents .cp-contents-mission ul{
  padding: 1em;
}

#article .cp-contents .cp-contents-mission ul li{
  list-style: circle inside;
}


/* ボタン */
#article .cp-contents .start-btn{
  display: block;
  background: url(../../../img/contents/lp/renewalcampaign0129/btn_start.png) no-repeat 0 0;
  background-size: contain;
  width: 84.11vw;
  padding-top: 12.89vw;
  height: 0;
  overflow: hidden;
  line-height: 200%;
  margin: 5vw auto 0;
  -webkit-animation: scaling 2.5s ease 2s infinite both;
  animation: scaling 2.5s ease 2s infinite both;
}

#article.adult .cp-contents .start-btn{
  background: url(../../../img/contents/lp/renewalcampaign0129/btn_start_adult.png) no-repeat 0 0;
  background-size: contain;
}

#article .cp-contents .start-btn:hover,
#article .cp-contents .start-btn:active{
  opacity: 0.8;
}

@-webkit-keyframes scaling {
  0% {
    -webkit-transform: scale(1);
  }
  1% {
    -webkit-transform: scale(0.80);
  }
  4% {
    -webkit-transform: scale(1.);
  }
  8% {
    -webkit-transform: scale(0.94);
  }
  13%,
  100% {
    -webkit-transform: scale(1);
  }
}

@keyframes scaling {
  0% {
    transform: scale(1);
  }
  1% {
    transform: scale(0.80);
  }
  4% {
    transform: scale(1);
  }
  8% {
    transform: scale(0.94);
  }
  13%,
  100% {
    transform: scale(1);
  }
}




/* anime
-------------------------------------------------- */

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

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

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





/* ==================================================
お得マラソンキャンペーン PC
================================================== */
@media screen and (min-width: 767px){
  #article .sp{ display: none;}
  #article .pc{ display: block;}

  /* PCのみ背景色指定 */
  #article {
    background: linear-gradient(135deg,#62d2e3 0,#62b1e3 100%) fixed;
  }

  #article.adult{
    background: linear-gradient(135deg,#ffadbb 0,#ffa2a2 100%) fixed;
  }


  #article .scroll-bg{
    background: url(../../../img/contents/lp/renewalcampaign0129/bg_mainbg.png) center repeat;
    position: absolute;
    top: 0;
    left: 0;
    height: calc(100% + 150px);
    width: calc(100% + 75px);
    -webkit-animation: anime-topBg 15s linear infinite;
    animation: anime-topBg 15s linear infinite;
    background-size: 75px 150px;
    opacity: 0.2;
  }

  #article.adult .scroll-bg{
    background: url(../../../img/contents/lp/renewalcampaign0129/bg_mainbg_adult.png) center repeat;
    background-size: 75px 150px;
  }

  @-webkit-keyframes anime-topBg {
    0% {
        -webkit-transform: translate3d(-75px, 0, 0);
        transform: translate3d(-75px, 0, 0)
    }
    100% {
        -webkit-transform: translate3d(0, -150px, 0);
        transform: translate3d(0, -150px, 0)
    }
}
@keyframes anime-topBg {
    0% {
        -webkit-transform: translate3d(-75px, 0, 0);
        transform: translate3d(-75px, 0, 0)
    }
    100% {
        -webkit-transform: translate3d(0, -150px, 0);
        transform: translate3d(0, -150px, 0)
    }
}

  #article .articleInner{
    background: url(../../../img/contents/lp/renewalcampaign0129/pc_innerbg.jpg) repeat-y 0 0;
    background-size: contain;
    padding-bottom: 80px;
    width: 1024px;
    left: 50%;
    margin-left: -512px;
  }

/* - ミッション一覧box - */
#article .cp-intro{

}

#article .cp-intro-mission{
  width: 700px;
  left: 50%;
  margin-left: -350px;
  margin-top: -145px;
}

#article .cp-intro-mission-list-title{
  width: 271px;
  top: -180px;
  left: -20px;
}

/* フキダシ */
#article .cp-intro-mission-talk{
  width: 172px;
  top: -400px;
  left: 110px;
}

/* 一覧リスト */
#article .cp-intro-mission-list{
  width: 700px;
}

/* 注意事項 */
#article .cp-intro-mission-notice{
  width: 700px;
  margin-top: 20px;
}


/* -- キャンペーン対象タイトルリスト -- */
#article .cp-title{
  margin-top: 150px;
}

/* - 見出し - */
#article .cp-title h2{
  width: 750px;
}


/* - タイトル一覧表示 - */
#article .cp-titlelist > ul{
  width: 960px;
  margin-top: 50px;
}

/* - 各タイトル枠 - */
#article [class^="cp-titlelist-title_"]{
  width: 300px;
  margin: 50px 10px 0;
}


/* 作品タイトル */
#article [class^="cp-titlelist-title_"] dt{
  font-size: 1.3em;
}

/* 紹介文(admin紹介文短参照) */
#article [class^="cp-titlelist-title_"] .title-disc{
  font-size: 1em;
}

#article [class^="cp-titlelist-title_"] .title-ogpimg {
  max-height: 157.5px;
}


#article [class^="cp-titlelist-title_"] .title-ogpimg:before{
  height: 3em;
}

#article [class^="cp-titlelist-title_"] .title-ogpimg:after{
  height: 1.2em;
  font-size: 1.2em;
  right: 0.5em;
  bottom: 0.5em;
}

/* ジャンル(admin参照) */
#article [class^="cp-titlelist-title_"] .title-genre{
  font-size: 1em;
}

#article [class^="cp-titlelist-title_"] .title-genre ul li{
  font-size: 1em;
}



/* -- キャンペーン対象タイトル内容 -- */
#article .cp-contents {
  margin-top: 115px;
}

#article .cp-contents > ul > li:nth-child(n+2){
  margin-top: 70px;
}
/* - コンテンツ本体 - */
#article [class^="cp-contents-title_"]{
  width: 906px;
  margin: 0 auto;
}

/* - 背景パターン - */
#article .cp-contents .cp-contents-inner{
  width: 906px;
  background: url(../../../img/contents/lp/renewalcampaign0129/pc_contents_bg_middle.png) repeat-y 0 0;
  background-size: contain;
  padding-bottom: 50px;
}

/* - ゲームタイトル - */
#article .cp-contents .cp-contents-gametitle{
  width: 720px;
  display: flex;
  padding-top: 30px;
}


#article .cp-contents .cp-contents-gametitle dt{
  width: 100px;
}

#article .cp-contents .cp-contents-gametitle > div{
  margin-left: 20px;
}

#article .cp-contents .cp-contents-gametitle .title-name{
  font-size: 2em;
}

#article .cp-contents .cp-contents-gametitle .title-disc{
  font-size: 1.2em;
}

/* - バナー背景色 - */
#article .cp-contents .cp-contents-banner{
  width: 900px;
  padding: 25px 0;
  margin: 0 auto;
  margin-top: 25px;
}

#article .cp-contents .cp-contents-banner img{
  width: 720px;
}

/* - ミッション内容テキスト - */
#article .cp-contents .cp-contents-mission{
  width: 720px;
  margin-top: 35px;
}


/* ボタン */
#article .cp-contents .start-btn{
  width: 646px;
  padding-top: 99px;
  margin-top: 45px;
}


}/* media query */