@charset "utf-8";

/**
 *【PC】1st Anniversary（専用）@新テニスの王子様 ライジングビート【公式サイト】
 *
 * 1.0 - common
 * 　　|- html, body
 * 　　|- is_ios
 * 　　|- is_device
 * 　　|- a
 * 　　|- wrap
 *
 * 1.1 - common（Underlayer）
 * 　　|- hd（wrap）
 *  　　|- hd
 *   　　|- logo
 *   　　|- sns（pc）
 *
 * 2.0 - Top
 * 　　|- hd（wrap）
 *  　　|- crads（tmb）
 *  　　|- confetti
 *   　　|- hd
 *    　　|- logo
 *    　　|- sns
 *    　　|- h1-txt（ありがとう1周年）
 *    　　|- h1-txt（TENIRABI PARADE 2018 1st Anniversary）
 *    　　|- kv（ファーストアクセス時）
 *    　　|- kv
 * 　　|- gnav（wrap）
 *  　　|- gnav
 * 　　|- movie（wrap）
 *  　　|- movie（box）
 *   　　|- movie
 *   　　|- h2-ttl
 *   　　|- tmb
 *
 * 2.1 - Top @CAMPAIGN
 * 　　|- h2-ttl
 *  　　|- h2-txt（1周年を記念して様々なキャンペーンを開催！）
 *
 * 2.2 - Top @PADADE（cp1）
 * 　　|- campaign1
 *  　　|- h2-ttl
 *  　　|- h2-txt
 *  　　|- btn（詳細はこちら）
 *
 * 2.3 - Top @GACHA（cp2）
 * 　　|- campaign2
 *  　　|- h2-ttl
 *  　　|- ct（FIGHT-ON ガチャ）
 *  　　|- ct（ALL-STAR ガチャ）
 *  　　|- btn（詳細はこちら）
 *
 * 2.4 - Top @BONUS（cp3）
 * 　　|- campaign3
 *  　　|- h2-ttl
 *  　　|- h2-txt
 *  　　|- btn（詳細はこちら）
 *
 * 2.5 - Top @STORY（cp4）
 * 　　|- campaign4
 *  　　|- h2-ttl
 *  　　|- h2-txt
 *  　　|- btn（詳細はこちら）
 *
 * 2.6 - Top @MESSAGE（cp5）
 * 　　|- campaign5
 *
 * 3.0 - CAMPAIGN
 * 　　|- h1-txt（1周年を記念して様々な～）
 * 　　|- campaign01（wrap）
 *  　　|- ct（キャラソンパレード）
 *  　　|- btn（追加された楽曲を見る）
 * 　　|- campaign02（wrap）
 *  　　|- ct（FIGHT-ON ガチャ）
 *  　　|- ct（ALL-STAR ガチャ）
 * 　　|- campaign03（wrap）
 *  　　|- ct（login-bonus）
 *  　　|- ct（mini-story）
 *  　　|- ct（gif）
 *  　　|- txt（ログイン時に、フルボイスのミニストーリーが～）
 * 　　|- campaign04（wrap）
 *  　　|- ct（story）
 *
 * 4.0 - PARADE
 * 　　|- h2-ttl（キャラソンパレード開催中）
 *  　　|- h2-txt（出演キャストが選んだ～）
 * 　　|- info（wrap）
 *  　　|- info（毎日テニラビで遊べる～）
 *  　　|- list-first
 *   　　|- bg
 *   　　|- card
 *   　　|- ttl（本日のキャラソン～）
 *  　　|- list（wrap）
 *   　　|- list
 *   　　|- bg-shdw
 *   　　|- bg-jacket
 *    　　|- list（box）
 *     　　|- flag（CHARA SONG PARADE）
 *     　　|- date（○月○日追加！）
 *     　　|- card
 *
 * 5.0 - MESSAGE
 * 　　|- h1-txt（1周年を記念してキャスト全員の～）
 * 　　|- message（wrap）
 *  　　|- txt（テニスの王子様作者の許斐剛先生と～）
 *   　　|- img（許斐 剛先生）
 *  　　|- txt（すでにテニラビに登場している～）
 *   　　|- img（キャラクター全員のキャスト）
 *
 * 0.0 - footer
 * 　　|- footer（wrap）
 *  　　|- spec（wrap）
 *   　　|- spec
 *    　　|- h2-ttl（ダウンロードはこちら）
 *    　　|- app-icon
 *    　　|- spec
 *    　　|- store-icon
 *  　　|- ft（wrap）
 *   　　|- ft
 *    　　|- nav
 *    　　|- bnr
 *  　　|- copyright
 *  　　|- PageTop
 *
 * ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ */

@media only screen and (min-width:641px) {

/* 1.0 - common
--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
html, body {
	font-family:"メイリオ", verdana, Roboto, "Droid Sans", "游ゴシック", YuGothic, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "Meiryo", Sans-Serif;
	width:100%;
  height:100%;
	min-width:1280px;
  max-width:2560px;
	max-height:99999px;
  background:rgba(0,0,0,0.5) url(../img/common/bg_body-pc.png) repeat-y center top;
	color:#333;
	font-size:14px;
	line-height:1.7;
	-moz-text-size-adjust:none;
	-ms-text-size-adjust:100%;
	-webkit-text-size-adjust:100%;
  text-size-adjust:100%;
  margin:0 auto;
}

* {-webkit-box-sizing:border-box; -moz-box-sizing:border-box; -ms-box-sizing:border-box; -o-box-sizing:border-box; box-sizing:border-box;}
img {display:block;}

/* is_ios */
.is_ios a:hover {opacity:1;}
.is_ios a:hover img {opacity:1;}

/* is_device */
.is_sp {display:none;}

/* a */
a:link {color:#333; text-decoration:none;}
a:visited {color:#333; text-decoration:none;}
a:hover {color:#d9035e; text-decoration:none;}
a:active {color:#333; text-decoration:none;}
a:focus {outline:none;}
a {transition-duration:0.3s;}
a img {border:none; transition-duration:0.3s;}
a:hover img {opacity:0.6;}

#wrap {
  overflow:hidden;
  width:100%;
  max-width:2560px;
  background:url(../img/common/bg_body.jpg) repeat center center;
}


/* 1.1 - common（Underlayer）
--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* hd（wrap）*/
#ct-hd-wrap-sp {display:none;}
#ct-hd-wrap {
  overflow:hidden;
  width:100%;
  height:400px;
  background:url(../img/common/hd/bg_hnav.png) repeat-x left top, url(../img/common/hd/bg_hd.png) repeat-x center bottom;
}

/* hd */
#ct-hd-sp {display:none;}
#ct-hd {
  position:relative;
  width:1280px;
  height:400px;
  margin:0 auto;
}

/* logo */
#ct-hd h1 a {
  position:absolute;
  top:10px;
  left:0;
  display:block;
  width:270px;
}

#ct-hd h1 a img {
  width:100%;
  height:auto;
}

/* sns */
#ct-sns-sp {display:none}
#ct-sns {
  position:absolute;
  top:35px;
  right:0;
  width:230px;
  height:76px;
  padding:6px 0 0 18px;
}

#ct-sns li a {
  float:left;
  display:block;
  width:50px;
  margin:0 7px;
}

#ct-sns li img {
  width:50px;
  height:auto;
}


/* 2.0 - Top
--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* hd（wrap） */
#hd-wrap {
  position:relative;
  overflow:hidden;
  width:100%;
  height:945px;
  background:url(../img/top/hd/bg_kv.png) no-repeat center top;
}

/* crads（tmb）*/
#shuffle-crads {
  overflow:hidden;
  position:absolute;
  top:260px;
  left:50%;
  width:5760px;
  height:630px;
  margin-left:-2880px;
  background:rgba(0,0,0,0.3);
  padding:21px 0 0;
  -webkit-animation:ct-left 0.6s ease both; animation:ct-left 0.6s ease both;
}

#shuffle-crads li {
  float:left;
  margin:14px 10px;
  box-shadow: 0px 5px 20px 0px rgba(0, 0, 0, 0.6);
}

#shuffle-crads li:first-child, #shuffle-crads li:nth-child(37) {
  margin:14px 10px 14px -150px;
}

/* confetti */
#canvas {
  position:absolute;
  top:0;
  width:100%;
  height:945px;
  overflow: hidden;
}

/* hd */
#hd {
  position:relative;
  width:1280px;
  height:945px;
  margin:0 auto;
}

#hd p {
  overflow:hidden;
  text-indent:100%;
  white-space:nowrap;
}

/* logo */
#hd h1 a {
  position:absolute;
  top:18px;
  left:-15px;
  overflow:hidden;
  display:block;
  width:223px;
  -webkit-animation:ct-btm 1.2s ease both; animation:ct-btm 1.2s ease both; animation-delay:2s;
}

#hd h1 a::before {
  display:block;
  position:absolute;
  top:0;
  content: "";
  width:223px;
  height:223px;
  background-image:-webkit-gradient(linear, left bottom, right bottom, color-stop(20%,rgba(255,255,255,0)), color-stop(50%,rgba(255,255,255,0.7)),color-stop(80%,rgba(255,255,255,0)));
  background-image:linear-gradient(left, rgba(255,255,255,0) 20%, rgba(255,255,255,0.7) 50%,rgba(255,255,255,0) 80%);
  -webkit-animation:ct-shiny 0.5s linear both; animation:ct-shiny 0.5s linear both; animation-delay:4s;
}

#hd h1 a img {
  width:100%;
  height:auto;
  backface-visibility:hidden;
}

/* sns */
#top-sns {
  position:absolute;
  top:0;
  right:39px;
  width:230px;
  height:76px;
  background:url(../img/top/hd/bg_sns.png) no-repeat;
  padding:6px 0 0 18px;
  -webkit-animation:ct-top 1.2s ease both; animation:ct-top 1.2s ease both; animation-delay:2.2s;
}

#top-sns li a {
  float:left;
  display:block;
  width:50px;
  margin:0 7px;
}

#top-sns li img {
  width:50px;
  height:auto;
}

/* h1-txt（ありがとう1周年）*/
#top-hd-h1_txt1 {
  position:absolute;
  left:251px;
  top:35px;
  width:650px;
  height:157px;
  background:url(../img/top/hd/h1-ttl.png) no-repeat;
  -webkit-animation:ct-left 1.6s ease both; animation:ct-left 1.6s ease both; animation-delay:0.4s;
}

/* h1-txt（TENIRABI PARADE 2018 1st Anniversary）*/
#top-hd-h1_txt2 {
  position:absolute;
  left:194px;
  top:179px;
  width:700px;
  height:54px;
  background:url(../img/top/hd/h1-txt.png) no-repeat;
  -webkit-animation:ct-right 1.2s ease both; animation:ct-right 1.2s ease both; animation-delay:0.5s;
}

/* kv（ファーストアクセス時）*/
#top-chara-first li {
  position:absolute;
  right:-300px;
  bottom:0;
  -webkit-animation:ct-cara 1.5s ease both; animation:ct-cara 1.5s ease both; animation-delay:1.2s;
}

/* kv */
#top-chara li {
  position:absolute;
  right:-300px;
  bottom:0;
  -webkit-animation:ct-cara 1.5s ease both; animation:ct-cara 1.5s ease both; animation-delay:1.2s;
}

/* kv */
#top-chara li:not(:first-child) {
  display:none !important;
}

/* gnav（wrap） */
#gnav-top {display:none !important;}
#gnav-wrap {
  height:100%;
  height:190px;
  background:url(../img/common/hd/gnav/bg_gnav.png) repeat-x center top;
  margin:0 auto;
}

/* gnav */
#gnav {
  overflow:hidden;
  width:1268px;
  height:190px;
  margin:0 auto;
}

#gnav li a {
  float:left;
  overflow:hidden;
  display:block;
  text-indent:100%;
  white-space:nowrap;
}

#gnav li:nth-child(1) a {
  width:315px;
  height:140px;
  background:url(../img/common/hd/gnav/btn_campaign.png);
  margin:28px 0 0;
}

#gnav li:nth-child(2) a {
  width:320px;
  height:168px;
  background:url(../img/common/hd/gnav/btn_parade.png);
}

#gnav li:nth-child(3) a {
  width:318px;
  height:168px;
  background:url(../img/common/hd/gnav/btn_message.png);
}

#gnav li:nth-child(4) a {
  width:315px;
  height:140px;
  background:url(../img/common/hd/gnav/btn_shop.png);
  margin:28px 0 0;
}

#gnav li a:hover {
  opacity:0.7;
}

.is_ios #gnav li a:hover {
  opacity:1;
}

/* movie（wrap）*/
#top-pv-wrap {
  overflow:hidden;
  width:100%;
  height:690px;
  background:url(../img/top/hd/bg_movie-deco.png) no-repeat center bottom;
}

/* movie（box）*/
#top-pv-box {
  height:560px;
  background:url(../img/top/hd/bg_movie.png);
  border-bottom-right-radius:100% 560px;
  border-bottom-left-radius:100% 560px;
  margin-left:-150px;
  margin-right:-150px;
  padding-left:150px;
  padding-right:150px;
  padding-top:60px;
  box-shadow:0px 0px 10px 4px #999;
}

/* movie */
#top-pv {
  position:relative;
  width:700px;
  height:410px;
  background:url(../img/top/hd/bg_youtube.png);
  margin:0 auto;
}

/* h2-ttl */
  #top-pv h2 {
  position:absolute;
  top:-25px;
  left:-32px;
  width:220px;
  height:70px;
  font-size:0;
  background:url(../img/top/hd/h2-ttl_movie.png);
  margin:0 auto;
  z-index:9;
}

/* tmb*/
#top-pv img {
  position:absolute;
  top:0;
  right:0;
  left:0;
  bottom:0;
  margin:auto;
  width:auto;
  height:360px;
}

#top-pv a::after {
	content:'';
	display:block;
	width:100%;
	height:100%;
	background:url(../../img/movie/bt_play.png) no-repeat center center;
	position:absolute;
	top:0;
	transition-duration:0.3s;
}

#top-pv a:hover::after {
  opacity:0.8;
}

.is_ios #top-pv a:hover::after {
  opacity:1;
}


/* 2.1 - Top @CAMPAIGN
--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* h2-ttl */
#top-cp h2 {
  display:block;
  width:700px;
  height:190px;
  font-size:0;
  background:url(../img/top/00_campaign/h2-ttl_campaign.png) no-repeat;
  margin:-37px auto 0;
}

/* h2-txt（1周年を記念して様々なキャンペーンを開催！） */
#top-cp p {
  width:100%;
  height:183px;
  font-size:0;
  background:url(../img/top/00_campaign/h2-txt_campaign.png) no-repeat, url(../img/top/00_campaign/bg_campaign.png) repeat-x;
  background-position:center center, left top;
  margin:25px 0 0;
}


/* 2.2 - Top @PADADE（Campaign1）
--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* campaign1 */
#top-cp1 {
  overflow:hidden;
  width:100%;
  height:800px;
  background:url(../img/top/01_parade/bg_parade.jpg) no-repeat center center;
  font-size:0;
  margin:45px 0 0;
  box-shadow:0px 4px 6px 0px #ccc;
}

/* h2-ttl */
#top-cp1 h2 {
  display:block;
  width:562px;
  height:67px;
  background:url(../img/top/01_parade/h2-ttl.png) no-repeat center center;
  font-size:0;
  margin:68px auto 0;
}

/* h2-txt */
#top-cp1 h3 {
  display:block;
  width:1010px;
  height:450px;
  background:url(../img/top/01_parade/h2-txt.png) no-repeat center center;
  font-size:0;
  margin:28px auto 0;
}

/* btn（詳細はこちら）*/
#top-cp1 p a {
  display:block;
  width:800px;
  height:100px;
  background:url(../img/top/01_parade/btn_details.png) no-repeat center center;
  font-size:0;
  margin:43px auto 0;
}

#top-cp1 p a:hover {
  opacity:0.9;
}

.is_ios #top-cp1 p a:hover {
  opacity:1;
}


/* 2.3 - Top @GACHA（Campaign2）
--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* campaign2 */
#top-cp2 {
  overflow:hidden;
  width:100%;
  height:2300px;
  background:url(../img/top/02_gacha/bg_gacha-chara.png) no-repeat center top, url(../img/top/02_gacha/bg_gacha-cloud-min.png) no-repeat center center, url(../img/top/02_gacha/bg_gacha-cloud.png) repeat-x center center, url(../img/top/02_gacha/bg_gacha-rainbow.png) no-repeat center center, url(../img/top/02_gacha/bg_gacha.png) repeat-x center center;
  font-size:0;
  margin:95px 0 0;
  box-shadow:0px 4px 6px 0px #ccc;
}

/* h2-ttl */
#top-cp2 h2 {
  display:block;
  width:562px;
  height:67px;
  background:url(../img/top/02_gacha/h2-ttl.png) no-repeat center center;
  font-size:0;
  margin:84px auto 0;
}

/* ct（FIGHT-ON ガチャ）*/
#top-cp2-fighton {
  display:block;
  width:1000px;
  height:1125px;
  background:url(../img/top/02_gacha/h2-txt_fight-on.png) no-repeat center center;
  font-size:0;
  margin:30px auto 0;
}

/* ct（ALL-STAR ガチャ）*/
#top-cp2-allstar {
  display:block;
  width:1010px;
  height:760px;
  background:url(../img/top/02_gacha/h2-txt_all-star.png) no-repeat center center;
  font-size:0;
  margin:35px auto 0;
}

/* btn（詳細はこちら）*/
#top-cp2 p a {
  display:block;
  width:800px;
  height:100px;
  background:url(../img/top/02_gacha/btn_details.png) no-repeat center center;
  font-size:0;
  margin:45px auto 0;
}

#top-cp2 p a:hover {
  opacity:0.7;
}

.is_ios #top-cp2 p a:hover {
  opacity:1;
}


/* 2.4 - Top @BONUS（Campaign3）
--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* campaign3 */
#top-cp3 {
  overflow:hidden;
  width:100%;
  height:1050px;
  background:url(../img/top/03_bonus/bg_star.png) no-repeat center top, url(../img/top/03_bonus/bg_bonus.jpg) no-repeat center top;
  font-size:0;
  margin:82px 0 0;
  box-shadow:0px 4px 6px 0px #ccc;
}

/* h2-ttl */
#top-cp3 h2 {
  display:block;
  width:562px;
  height:67px;
  background:url(../img/top/03_bonus/h2-ttl.png) no-repeat center center;
  font-size:0;
  margin:45px auto 0;
}

/* h2-txt */
#top-cp3-bonus {
  display:block;
  width:1020px;
  height:740px;
  background:url(../img/top/03_bonus/h2-txt_bonus.png) no-repeat center center;
  font-size:0;
  margin:28px auto 0;
}

/* btn（詳細はこちら）*/
#top-cp3 p a {
  display:block;
  width:800px;
  height:100px;
  background:url(../img/top/03_bonus/btn_details.png) no-repeat center center;
  font-size:0;
  margin:28px auto 0;
}

#top-cp3 p a:hover {
  opacity:0.7;
}

.is_ios #top-cp3 p a:hover {
  opacity:1;
}


/* 2.5 - Top @STORY（Campaign4）
--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* campaign4 */
#top-cp4 {
  overflow:hidden;
  width:100%;
  height:600px;
  background:url(../img/top/04_story/bg_stroy.png) no-repeat center center;
  background-size:cover;
  font-size:0;
  box-shadow:0px 4px 6px 0px #ccc;
  margin:100px 0 0;
}

/* h2-ttl */
#top-cp4 h2 {
  position:relative;
  display:block;
  width:562px;
  height:67px;
  background:url(../img/top/04_story/h2-ttl.png) no-repeat center center;
  font-size:0;
  margin:62px auto 0;
  z-index:9;
}

/* h2-txt */
#top-cp4 h3 {
  display:block;
  width:1010px;
  height:450px;
  background:url(../img/top/04_story/h2-txt_story.png) no-repeat center center;
  font-size:0;
  margin:-36px auto 0;
}

/* btn（詳細はこちら）*/
#top-cp4 p a {
  display:block;
  width:800px;
  height:100px;
  background:url(../img/top/04_story/btn_details.png) no-repeat center center;
  font-size:0;
  margin:-155px auto 0;
}

#top-cp4 p a:hover {
  opacity:0.8;
}

.is_ios #top-cp4 p a:hover {
  opacity:1;
}


/* 2.6 - Top @MESSAGE（Campaign5）
--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* campaign5 */
#top-cp5-wrap {
  position:relative;
  width:100%;
  font-size:0;
}

#top-cp5-box {
  position:absolute;
  top:0;
  right:0;
  left:0;
  margin:auto;
  overflow:hidden;
  width:100%;
  height:700px;
  background:url(../img/top/05_message/bg_curtain.png) no-repeat center top;
}

@media only screen and (min-width:1921px) {
  #top-cp5-box {
    position:absolute;
    top:0;
    right:0;
    left:0;
    margin:auto;
    overflow:hidden;
    min-width:1920px;
    max-width:2560px;
    height:700px;
    background:url(../img/top/05_message/bg_ctl.png) no-repeat left top, url(../img/top/05_message/bg_ctr.png) no-repeat right top;
  }
}

#top-cp5 {
  overflow:hidden;
  width:100%;
  height:700px;
  background:url(../img/top/05_message/bg.jpg) no-repeat center top;
  box-shadow:0px 4px 6px 0px #ccc;
  margin:45px 0 0;
}

/* h2-ttl */
#top-cp5 h2 {
  display:none;
}

/* h2-txt */
#top-cp5 h3 {
  display:block;
  width:1170px;
  height:480px;
  background:url(../img/top/05_message/h2-txt_message.png) no-repeat center center;
  font-size:0;
  margin:54px auto 0;
}

/* btn（詳細はこちら）*/
#top-cp5 p a {
  position:relative;
  display:block;
  width:800px;
  height:100px;
  background:url(../img/top/05_message/btn_details.png) no-repeat center center;
  font-size:0;
  margin:18px auto 0;
  z-index:9;
}

#top-cp5 p a:hover {
  opacity:0.85;
}

.is_ios #top-cp5 p a:hover {
  opacity:1;
}


/* 3.0 - CAMPAIGN
--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* h1-txt（1周年を記念して様々な～） */
.ct-hd-campaign p {
  position:absolute;
  top:187px;
  right:0;
  left:0;
  margin:auto;
  overflow:hidden;
  display:block;
  width:580px;
  height:140px;
  background:url(../img/campaign/h1-txt.png);
  text-indent:100%;
  white-space:nowrap;
}

/* campaign01（wrap）*/
#campaign01 {
  width:100%;
  height:1000px;
  font-size:0;
  background:url(../img/campaign/campaign1/bg.jpg) no-repeat center top;
  box-shadow:0px 4px 6px 0px #ccc;
  margin:41px 0 0;
  padding:51px 0 0;
}

/* ct（キャラソンパレード） */
#campaign01 h3 {
  width:1088px;
  height:878px;
  background:url(../img/campaign/campaign1/campaign.png) no-repeat center top;
  margin:0 auto;
}

/* btn（追加された楽曲を見る）*/
#campaign01 p a {
  display:block;
  width:404px;
  height:68px;
  background:url(../img/campaign/campaign1/btn_see-addition.png) no-repeat center center;
  font-size:0;
  margin:-121px auto 0;
}

#campaign01 p a:hover {
  opacity:0.8;
}

.is_ios #campaign01 p a:hover {
  opacity:1;
}

/* campaign02（wrap）*/
#campaign02 {
  overflow:hidden;
  width:100%;
  height:4120px;
  background:url(../img/campaign/campaign2/bg_gacha.jpg) no-repeat center top;
  font-size:0;
  box-shadow:0px 4px 6px 0px #ccc;
  margin:99px 0 0;
}

/* ct（FIGHT-ON ガチャ）*/
#ct-cp2-fighton {
  display:block;
  width:1090px;
  height:2151px;
  background:url(../img/campaign/campaign2/fight-on_gacha.png) no-repeat center top;
  font-size:0;
  margin:18px auto 0;
}

/* ct（ALL-STAR ガチャ）*/
#ct-cp2-allstar {
  display:block;
  width:1090px;
  height:1813px;
  background:url(../img/campaign/campaign2/all-star_gacha.png) no-repeat center top;
  font-size:0;
  margin:40px auto 0;
}

/* campaign03（wrap）*/
#campaign03 {
  overflow:hidden;
  width:100%;
  height:1578px;
  background:url(../img/campaign/campaign3/bg_star.png) no-repeat center top, url(../img/campaign/campaign3/bg.jpg) no-repeat center top;
  background-size:1920px 850px,cover;
  font-size:0;
  margin:82px 0 0;
  box-shadow:0px 4px 6px 0px #ccc;
}

/* ct（login-bonus）*/
#ct-cp3-bonus {
  display:block;
  width:1030px;
  height:1000px;
  background:url(../img/campaign/campaign3/login-bonus.png) no-repeat center top;
  font-size:0;
  margin:5px auto 0;
}

/* ct（mini-story）*/
#ct-cp3-more {
  display:block;
  width:1030px;
  height:520px;
  background:url(../img/campaign/campaign3/more.png) no-repeat center top;
  font-size:0;
  margin:25px auto 0;
}

/* ct（gif）*/
#ct-cp3-story {
  display:block;
  width:534px;
  background:#fff;
  border:2px solid #000;
  margin:-397px auto 0;
}
#ct-cp3-story img {
  width:530px;
  height:auto;
  padding:2px;
}

/* txt（ログイン時に、フルボイスのミニストーリーが～）*/
#ct-cp3-story-txt {
  position:relative;
  width:640px;
  height:67px;
  background:url(../img/campaign/campaign3/txt_more.png) no-repeat;
  margin:-21px auto 0;
  z-index:9;
}

/* campaign04（wrap）*/
#campaign04 {
  overflow:hidden;
  width:100%;
  height:850px;
  background:#fff url(../img/campaign/campaign4/bg.png) no-repeat center center;
  background-size:cover;
  font-size:0;
  box-shadow:0px 4px 6px 0px #ccc;
  margin:93px 0 0;
}

/* ct（story）*/
#campaign04 h3 {
  display:block;
  width:1050px;
  height:780px;
  background:url(../img/campaign/campaign4/story.png) no-repeat center top;
  font-size:0;
  margin:25px auto 0;
}


/* 4.0 - PARADE
--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* h2-ttl（キャラソンパレード開催中）*/
.ct-hd-parade h2 {
  position:absolute;
  top:192px;
  right:0;
  left:0;
  margin:auto;
  overflow:hidden;
  display:block;
  width:400px;
  height:48px;
  background:url(../img/parade/h2-ttl.png);
  text-indent:100%;
  white-space:nowrap;
}

/* h2-txt（出演キャストが選んだ～）*/
.ct-hd-parade p {
  position:absolute;
  top:266px;
  right:0;
  left:0;
  margin:auto;
  overflow:hidden;
  display:block;
  width:1120px;
  height:60px;
  background:url(../img/parade/h2-txt.png);
  text-indent:100%;
  white-space:nowrap;
}

/* info（wrap）*/
#ct-parade-info {
  width:100%;
  height:334px;
  background:url(../img/parade/bg_star.png) no-repeat center top, url(../img/parade/bg_color.png) repeat-x left bottom;
  background-color:rgba(255,255,255,0.75);
  padding:79px 0 0;
}

/* info（毎日テニラビで遊べる～）*/
#ct-parade-info p {
  display:block;
  width:800px;
  height:170px;
  background:url(../img/parade/info.png) no-repeat center top;
  font-size:0;
  margin:0 auto;
}

/* list-first */
#ct-parade-list-first {
  position:relative;
  display:block;
  width:100%;
  height:730px;
  font-size:0;
  margin:0 auto 130px;
}

#ct-parade-list-first li {
  position:absolute;
  bottom:0;
  display:block;
  width:100%;
  height:625px;
  font-size:0;
  box-shadow:0px 0px 5px 1px #ccc;
  margin:0 auto;
}

/* bg */
#ct-parade-list-bg-first {
  width:100%;
  height:760px;
  background:url(../img/parade/bg_parade-today.png) no-repeat center top -105px;
}

#ct-parade-list-bg-first img {
  position:absolute;
  top:-105px;
  right:0;
  left:0;
  margin:auto;
}

/* card */
#ct-parade-list-card-first img {
  position:absolute;
  right:0;
  left:0;
  bottom:40px;
  margin:auto;
}

/* ttl（本日のキャラソン～）*/
#ct-parade-list-today img {
  position:absolute;
  top:-20px;
  right:0;
  left:0;
  margin:auto;
}

/* list（wrap）*/
#ct-parade-list {
  display:block;
  width:100%;
  font-size:0;
  margin:115px auto 0;
}

/* list */
#ct-parade-list li {
  position:relative;
  display:block;
  width:100%;
  height:575px;
  font-size:0;
  margin:0 0 75px;
}

/* bg-shdw */
.ct-parade-list-bg-shdw {
  position:absolute;
  top:0;
  display:block;
  width:100%;
  height:575px;
  transform:skew(0deg, 5deg);
  background:#333;
}

/* bg-jacket */
.ct-parade-list-bg {
  position:absolute;
  top:0;
  display:block;
  width:100%;
  height:575px;
  transform:skew(0deg, 4deg);
}

/* list（box）*/
.ct-parade-list-box {
  position:absolute;
  top:0;
  right:0;
  left:0;
  margin:auto;
  width:1280px;
  height:575px;
}

/* flag（CHARA SONG PARADE）*/
.ct-parade-list-flag img {
  position:absolute;
  top:-108px;
  right:21px;
}

/* date（○月○日追加！）*/
.ct-parade-list-date img {
  position:absolute;
  top:-41px;
  right:0;
  left:0;
  margin:auto;
}

/* card */
.ct-parade-list-card img {
  position:absolute;
  top:29px;
  right:0;
  left:0;
  margin:auto;
}


/* 5.0 - MESSAGE
--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* h1-txt（1周年を記念してキャスト全員の～）*/
.ct-hd-message p {
  position:absolute;
  top:189px;
  right:0;
  left:0;
  margin:auto;
  overflow:hidden;
  display:block;
  width:716px;
  height:150px;
  background:url(../img/message/h1-txt.png);
  text-indent:100%;
  white-space:nowrap;
}

#ct-message-wrap {
  position:relative;
  width:100%;
  font-size:0;
}

#ct-message-box {
  position:absolute;
  top:0;
  right:0;
  left:0;
  margin:auto;
  overflow:hidden;
  width:100%;
  height:2990px;
  background:url(../img/message/bg_curtain.png) no-repeat center top;
}

@media only screen and (min-width:1921px) {
  #ct-message-box {
    position:absolute;
    top:0;
    right:0;
    left:0;
    margin:auto;
    overflow:hidden;
    min-width:1920px;
    max-width:2560px;
    height:2990px;
    background:url(../img/message/bg_ctl.png) no-repeat left top, url(../img/message/bg_ctr.png) no-repeat right top;
  }
}

/* message（wrap） */
#ct-message {
  width:100%;
  height:2990px;
  font-size:0;
  background:url(../img/message/bg.png) no-repeat center top;
  padding:150px 0 0;
}

/* txt（テニスの王子様作者の許斐剛先生と～）*/
#ct-message-txt01 {
  display:block;
  width:927px;
  height:168px;
  background:url(../img/message/txt-01.png) no-repeat;
  margin:0 auto;
}

/* img（許斐 剛先生）*/
#ct-message-img01 {
  display:block;
  width:800px;
  height:920px;
  background:url(../img/message/sign.png) no-repeat;
  margin:50px auto 0;
}

/* txt（すでにテニラビに登場している～）*/
#ct-message-txt02 {
  display:block;
  width:1178px;
  height:168px;
  background:url(../img/message/txt-02.png) no-repeat;
  margin:112px auto 0;
}

/* img（キャラクター全員のキャスト）*/
#ct-message-img02 {
  display:block;
  width:1220px;
  height:1280px;
  background:url(../img/message/sign-cast.png) no-repeat;
  margin:52px auto 0;
}


/* 0.0 - footer
--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* footer（wrap） */
footer {
  overflow:hidden;
  width:100%;
}

/* spec（wrap） */
#ft-spec-wrap {
  overflow:hidden;
  width:100%;
  background:url(../img/common/ft/icon_triangle.png) repeat-x;
  background-position:left bottom;
}

/* spec */
#ft-spec {
  position:relative;
  width:900px;
  height:225px;
  background:url(../img/common/ft/bg_spec.jpg);
  background-position:left top;
  border-radius:10px;
  box-shadow:3px 3px 5px 2px #cccccc;
  margin:165px auto 110px;
}

/* h2-ttl（ダウンロードはこちら） */
#ft-spec h2 {
  position:absolute;
  top:-43px;
  left:-25px;
  overflow:hidden;
  width:493px;
  height:69px;
  background:url(../img/common/ft/h2-ttl_store.png);
  text-indent:100%;
  white-space:nowrap;
}

/* app-icon */
#ft-spec p {
  padding:46px 0 0 37px;
}

#ft-spec p img {
  width:120px;
  height:auto;
}

/* spec */
#ft-spec dl {
  position:absolute;
  top:51px;
  left:192px;
  width:450px;
  font-size:16px;
  font-weight:bold;
	line-height:1.9;
}

#ft-spec dt {
  float:left;
  width:143px;
}

#ft-spec dd::before {
  content:"：";
}

/* store-icon */
#ft-spec ul {
  position:absolute;
  top:45px;
  right:52px;
  width:184px;
}

#ft-spec li a {
  display:block;
  width:184px;
  height:55px;
  margin:0 0 25px 0;
}

#ft-spec li a img {
  width:184px;
  height:auto;
}

/* ft（wrap） */
#ft-wrap {
  clear:both;
  overflow:hidden;
  width:100%;
  background:#fefefe;
}

/* ft */
#ft {
  width:1000px;
  font-size:13px;
  margin:0 auto;
}

#ft a:hover {
  color:#d9035e;
}

/* nav */
#ft-nav {
  overflow:hidden;
  float:left;
  width:200px;
  margin:34px 0 0;
}

#ft-nav li:first-child {
  font-weight:bold;
}

#ft-nav li:not(:first-child) {
  float:left;
  margin:3px 0 0 0;
}

#ft-nav li:nth-child(even) {
  width:100px;
}

#ft-nav li:not(:first-child)::before {
  content:"- ";
  color:#e20087 !important;
}

/* bnr */
#ft-bnr {
  overflow:hidden;
  float:right;
  width:770px;
  text-indent:100%;
  white-space:nowrap;
}

#ft-bnr li {
  float:left;
  transition-duration:0.3s;
}

#ft-bnr li a {
  overflow:hidden;
  display:block;
}

#ft-bnr li a:hover {
  opacity:0.7;
}

#ft-bnr li:nth-child(1) a {width:190px; height:37px; background:url(../img/common/ft/bushiroad.png) no-repeat; background-size:contain; margin:38px 31px 0 0;}
#ft-bnr li:nth-child(2) a {width:190px; height:37px; background:url(../img/common/ft/akatsuki.png) no-repeat; background-size:contain; margin:44px 37px 0 0;}
#ft-bnr li:nth-child(3) a {width:322px; height:80px; background:url(../img/common/ft/official_banner.png) no-repeat; background-size:contain; margin:23px 0 0 0;}

/* copyright */
#ft p {
  clear:both;
  text-align:center;
  margin:0 0 7px;
  padding:18px 0 0;
}

/* PageTop */
#pagetop {position:fixed; z-index:999; transition:0.3s;}
#pagetop a {display:block; width:112px; height:112px; background:url(../img/common/page-top.png) no-repeat; background-size:contain; overflow:hidden; text-indent:100%; white-space:nowrap;}
#pagetop a:hover {opacity:0.8;}



}