@charset "utf-8";

/**
 *【SP】1st Anniversary（専用）@新テニスの王子様 ライジングビート【公式サイト】
 *
 * 1.0 - common
 * 　　|- html, body
 * 　　|- is_ios
 * 　　|- is_device
 * 　　|- a
 *
 * 1.1 - common（Underlayer）
 * 　　|- hd（wrap）
 *  　　|- logo
 *  　　|- gnav-btn（スイッチ）
 *   　　|- gnav-btn（バーガー）
 *    　　|- gnav
 * 　　|- hd
 * 　　|- sns（sp）
 *
 * 2.0 - Top
 * 　　|- hd（wrap）
 *  　　|- crads（tmb）
 *  　　|- confetti
 *   　　|- hd
 *    　　|- logo
 *    　　|- sns
 *    　　|- h1-txt（ありがとう1周年）
 *    　　|- h1-txt（TENIRABI PARADE 2018 1st Anniversary）
 *    　　|- kv（ファーストアクセス時）
 *    　　|- kv
 * 　　|- 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
 * 　　|- h1-txt（出演キャストが選んだ～）
 * 　　|- info（wrap）
 *  　　|- info（毎日テニラビで遊べる～）
 *  　　|- list-first
 *   　　|- bg
 *   　　|- card
 *  　　|- list（wrap）
 *   　　|- list
 *   　　|- bg-shdw
 *   　　|- bg-jacket
 *    　　|- list（box）
 *     　　|- date（○月○日追加！）
 *     　　|- card
 *
 * 5.0 - MESSAGE
 * 　　|- h1-txt（1周年を記念してキャスト全員の～）
 * 　　|- message（wrap）
 *  　　|- bg（テニスの王子様作者の許斐剛先生と～）
 *   　　|- txt（テニスの王子様作者の許斐剛先生と～）
 *  　　|- bg（許斐 剛先生）
 *   　　|- img（許斐 剛先生）
 *  　　|- bg（キャラクター全員のキャスト）
 *   　　|- 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 (max-width:640px) {

/* 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%;
	max-height:99999px;
	color:#333;
	font-size:14px;
	line-height:1.7;
  background:url(../img/common/bg_body-sp.jpg) repeat-y;
  background-size:100% auto;
	-moz-text-size-adjust:none;
	-ms-text-size-adjust:100%;
	-webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}

* {-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_pc {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;}


/* 1.1 - common（Underlayer）
--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* hd（wrap）*/
#ct-hd-wrap {display:none;}
#ct-hd-wrap-sp {
  position:relative;
  overflow:hidden;
  width:100%;
  background:url(../img/common/hd/bg_hnav-sp.png) repeat-x left top, url(../img/common/hd/bg_hnav-spbg.png) no-repeat right top;
  background-size:10% auto, 16% auto;
  background-color:#fff;
}

/* logo */
#ct-hd-logo a {
  display:block;
  width:47%;
  margin:2% auto 1.1%;
}

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

/* gnav-btn（スイッチ） */
#switch-wrap {
  position:fixed;
  top:2%;
  right:0;
	width:16%;
	padding-top:16%;
  background:#ddd;
	z-index:999;
}

/* gnav-btn（スイッチ） */
#switch {
  position:absolute;
  top:0;
	display:block;
	width:100%;
  height:100%;
	cursor:pointer;
	-webkit-tap-highlight-color:rgba(0,0,0,0);
	z-index:9999;
}

/* gnav-btn（バーガー） */
.icon_anime span {
	width:66%;
	padding-top:9%;
	background:#fff;
	position:absolute;
	top:45%;
  left:19%;
	-webkit-transition: all 0.4s;
	transition: all 0.4s;
	-webkit-transform: rotate(0deg);
	-ms-transform: rotate(0deg);
	transform: rotate(0deg);
  border-radius:10px;
}
.icon_anime .top {position:absolute; top:29%;}
.icon_anime .bottom {position:absolute; top:62%;}
.icon_anime.active .middle {background: rgba(255, 255, 255, 0);}
.icon_anime.active .top {position:absolute; top:50%; -webkit-transform:rotate(-45deg); -ms-transform:rotate(-45deg); transform:rotate(-45deg); background:#fff;}
.icon_anime.active .bottom {position:absolute; top:50%; -webkit-transform:rotate(45deg); -ms-transform:rotate(45deg); transform:rotate(45deg); background:#fff;}

#switch.active {
	position:fixed;
	right:0;
  top:0;
	width:16%;
  height:100%;
  background:url(../img/common/hd/bg_hnav-sp.png) repeat-x left top;
  background-size:60% auto;
  background-color:#d9035e;
}

/* gnav */
#gnav-sp {
  position:fixed;
  top:0;
	width:100%;
  height:100%;
	overflow-y:scroll;
  display:none;
  background:url(../img/common/hd/bg_hnav-sp.png) repeat-x left top;
  background-size:10% auto;
  background-color:rgba(0,0,0,0.85);
  font-size:7vw;
  letter-spacing:0.1em;
  text-align:center;
	z-index:99;
}

#gnav-sp li {
  border-bottom:1px solid #999;
  padding:6% 0;
}

#gnav-sp li a {
  display:block;
  width:88%;
  color:#fff;
	-webkit-tap-highlight-color:rgba(0,0,0,0);
}

#gnav-sp li:first-child a img {
  width:75%;
  height:auto;
  margin:0 auto;
  padding:4% 0 2% 2%;
  backface-visibility:hidden;
}

#gnav-sp li a img {
  width:48%;
  height:auto;
  margin:1.6% auto 0;
  backface-visibility:hidden;
}

#gnav-sp li a:hover {color:#999}

/* hd */
#ct-hd {display:none;}
#ct-hd-sp {
  position:relative;
  width:100%;
}

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

/* sns（sp） */
#ct-sns {display:none}
#ct-sns-sp {
  overflow:hidden;
  width:100%;
  text-align:center;
  background:rgba(0,0,0,0.75);
  margin:16% 0 0;
}

#ct-sns-sp li {
  display:inline-block;
  margin:4.5% 0.8% 2.6%;
}

#ct-sns-sp li a {
  display:block;
}

#ct-sns-sp li img {
  width:62%;
  height:auto;
  margin:0 auto;
}


/* 2.0 - Top
--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* hd（wrap） */
#hd-wrap {
  position:relative;
  overflow:hidden;
  width:100%;
  padding-top:120%;
  background:url(../img/top/hd/bg_kv-sp.jpg) no-repeat center top;
  background-size:100% auto;
}

/* crads（tmb）*/
#shuffle-crads {
  position:absolute;
  overflow:hidden;
  top:29.6%;
  width:150%;
  margin:0 0 0 -25%;
  background:rgba(0,0,0,0.3);
  padding:4% 0;
  -webkit-animation:ct-left 0.6s ease both; animation:ct-left 0.6s ease both;
}

#shuffle-crads li {
  float:left;
  width:20%;
  margin:1.2% 1%;
}

#shuffle-crads li:first-child, #shuffle-crads li:nth-child(11) {
  margin:1.2% 1% 1.2% -10%;
}

#shuffle-crads li:nth-child(n + 15) {display:none;}

#shuffle-crads li img {
  width:100%;
  height:auto;
  box-shadow: 0px 5px 20px 0px rgba(0, 0, 0, 0.6);
}

/* confetti */
#canvas {
  position:absolute;
  top:0;
  width:100%;
  padding-top:20%;
  overflow: hidden;
}

/* hd */
#hd {
  position:absolute;
  top:0;
  width:100%;
  padding-top:120%;
}

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

/* logo */
#hd h1 a {
  position:absolute;
  top:2.2%;
  left:0;
  width:25%;
  display:block;
  z-index:9;
  -webkit-animation:ct-top 1.2s ease both; animation:ct-top 1.2s ease both; animation-delay:2s;
}

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

/* sns */
#top-sns {display:none;}

/* h1-txt（ありがとう1周年）*/
#top-hd-h1_txt1 {
  position:absolute;
  top:0;
  width:100%;
  padding-top:25.333%;
  background:url(../img/top/hd/h1-ttl-sp.png) no-repeat;
  background-size:100% auto;
  -webkit-animation:ct-left 1.8s ease both; animation:ct-left 1.8s ease both; animation-delay:0.4s;
}

/* h1-txt（TENIRABI PARADE 2018 1st Anniversary）*/
#top-hd-h1_txt2 {
  position:absolute;
  top:0;
  width:100%;
  padding-top:25.333%;
  background:url(../img/top/hd/h1-txt-sp.png) no-repeat;
  background-size:100% auto;
  -webkit-animation:ct-right 1.5s ease both; animation:ct-right 1.5s ease both; animation-delay:0.5s;
}

/* kv（ファーストアクセス時）*/
#top-chara-first li {
  position:absolute;
  top:0;
  width:100%;
  -webkit-animation:ct-cara 1.7s ease both; animation:ct-cara 1.7s ease both; animation-delay:0.8s;
}

#top-chara-first li img {
  width:100%;
  height:auto;
}

/* kv */
#top-chara li {
  position:absolute;
  top:0;
  width:100%;
  -webkit-animation:ct-cara 1.7s ease both; animation:ct-cara 1.7s ease both; animation-delay:0.8s;
}

#top-chara li img {
  width:100%;
  height:auto;
}

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

/* gnav（wrap） */
#gnav-wrap {display:none;}

/* movie（wrap）*/
#top-pv-wrap {
  position:relative;
  width:100%;
  padding-top:84%;
  background:url(../img/top/hd/bg_movie-sp.png);
  background-size:100% auto;
}

/* movie（box）*/
#top-pv-box {
}

/* movie */
#top-pv {
  position:absolute;
  top:0;
  width:100%;
  padding-top:58.666%;
  background:url(../img/top/hd/bg_youtube-sp.png);
  background-size:100% auto;
}

/* h2-ttl */
  #top-pv h2 {
  position:absolute;
  top:7.6%;
  left:3%;
  width:31%;
  padding-top:13%;
  font-size:0;
  background:url(../img/top/hd/h2-ttl_movie.png) no-repeat;
  background-size:contain;
  z-index:9;
}

/* tmb*/
#top-pv img {
  position:absolute;
  top:17.5%;
  right:0;
  left:0;
  bottom:0;
  margin:auto;
  width:77%;
  height:auto;
  backface-visibility:hidden;
}

#top-pv a::after {
	content:'';
	display:block;
	width:100%;
	height:100%;
	background:url(../../img/movie/bt_play.png) no-repeat center center;
  background-size:20% auto;
	position:absolute;
	top:9.5%;
	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 {
  position:relative;
  display:block;
  width:92.6%;
  padding-top:26%;
  font-size:0;
  background:url(../img/top/00_campaign/h2-ttl_campaign.png) no-repeat;
  background-size:100% auto;
  margin:-2.5% auto 0;
  z-index:9;
}

/* h2-txt（1周年を記念して様々なキャンペーンを開催！） */
#top-cp p {
  width:100%;
  padding-top:24%;
  font-size:0;
  background:url(../img/top/00_campaign/h2-txt_campaign-sp.png) no-repeat;
  background-size:100% auto;
  margin:5% 0 6%;
}


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

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

/* h2-txt */
#top-cp1 h3 {
  position:absolute;
  top:0;
  display:block;
  width:100%;
  padding-top:63%;
  background:url(../img/top/01_parade/padade-sp.png) no-repeat center top;
  background-size:100% auto;
  font-size:0;
}

/* btn（詳細はこちら）*/
#top-cp1 p a {
  position:absolute;
  bottom:10%;
  right:0;
  left:0;
  margin:auto;
  display:block;
  width:80%;
  padding-top:11%;
  background:url(../img/top/01_parade/btn_details.png) no-repeat center center;
  background-size:100% auto;
  font-size: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 {
  position:relative;
  overflow:hidden;
  width:100%;
  padding-top:243.2%;
  background:url(../img/top/02_gacha/bg_gacha-sp.jpg) no-repeat center top;
  background-size:100% auto;
  font-size:0;
  box-shadow:0px 4px 6px 0px #ccc;
  margin:0 0 8%;
}

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

/* ct（FIGHT-ON ガチャ）*/
#top-cp2-fighton {
  position:absolute;
  top:0;
  display:block;
  width:100%;
  padding-top:140.666%;
  background:url(../img/top/02_gacha/h2-txt_fight-on-sp.png) no-repeat center center;
  background-size:100% auto;
  font-size:0;
}

/* ct（ALL-STAR ガチャ）*/
#top-cp2-allstar {
  position:absolute;
  bottom:9.6%;
  display:block;
  width:100%;
  padding-top:75%;
  background:url(../img/top/02_gacha/h2-txt_all-star-sp.png) no-repeat center center;
  background-size:100% auto;
  font-size:0;
}

/* btn（詳細はこちら）*/
#top-cp2 p a {
  position:absolute;
  bottom:3.1%;
  right:0;
  left:0;
  margin:auto;
  display:block;
  width:80%;
  padding-top:11%;
  background:url(../img/top/02_gacha/btn_details.png) no-repeat center center;
  background-size:100% auto;
  font-size: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 {
  position:relative;
  overflow:hidden;
  width:100%;
  padding-top:113.866%;
  background:url(../img/top/03_bonus/bg_bonus-sp.jpg) no-repeat center top;
  background-size:100% auto;
  font-size:0;
  box-shadow:0px 4px 6px 0px #ccc;
  margin:0 0 8%;
}

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

/* h2-txt */
#top-cp3-bonus {
  position:absolute;
  top:0;
  display:block;
  width:100%;
  padding-top:92%;
  background:url(../img/top/03_bonus/bonus-sp.png) no-repeat center center;
  background-size:100% auto;
  font-size:0;
}

/* btn（詳細はこちら）*/
#top-cp3 p a {
  position:absolute;
  bottom:5.6%;
  right:0;
  left:0;
  margin:auto;
  display:block;
  width:80%;
  padding-top:11%;
  background:url(../img/top/03_bonus/btn_details.png) no-repeat center center;
  background-size:100% auto;
  font-size: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 {
  position:relative;
  overflow:hidden;
  width:100%;
  padding-top:66.666%;
  background:url(../img/top/04_story/bg_story-sp.jpg) no-repeat center center;
  background-size:100% auto;
  font-size:0;
  box-shadow:0px 4px 6px 0px #ccc;
  margin:0 0 8%;
}

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

/* h2-txt */
#top-cp4 h3 {
  position:absolute;
  top:0;
  display:block;
  width:100%;
  padding-top:60.666%;
  background:url(../img/top/04_story/story-sp.png) no-repeat center center;
  background-size:100% auto;
  font-size:0;
}

/* btn（詳細はこちら）*/
#top-cp4 p a {
  position:absolute;
  bottom:19.6%;
  right:0;
  left:0;
  margin:auto;
  display:block;
  width:80%;
  padding-top:11%;
  background:url(../img/top/04_story/btn_details.png) no-repeat center center;
  background-size:100% auto;
  font-size:0;
}

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

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


/* 2.6 - Top @MESSAGE（Campaign6）
--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* campaign5 */
#top-cp5 {
  position:relative;
  overflow:hidden;
  width:100%;
  padding-top:83.733%;
  background:url(../img/top/05_message/bg-sp.jpg) no-repeat center top;
  background-size:100% auto;
  font-size:0;
  box-shadow:0px 4px 6px 0px #ccc;
  margin:0 0 8%;
}

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

/* h2-txt */
#top-cp5 h3 {
  position:absolute;
  top:0;
  display:block;
  width:100%;
  padding-top:62.666%;
  background:url(../img/top/05_message/message-sp.png) no-repeat center center;
  background-size:100% auto;
  font-size:0;
}

/* btn（詳細はこちら）*/
#top-cp5 p a {
  position:absolute;
  bottom:7.2%;
  right:0;
  left:0;
  margin:auto;
  display:block;
  width:80%;
  padding-top:11%;
  background:url(../img/top/05_message/btn_details.png) no-repeat center center;
  background-size:100% auto;
  font-size:0;
}

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

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


/* 3.0 - CAMPAIGN
--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* h1-txt（1周年を記念して様々な～） */
.ct-hd-campaign p {
  position:absolute;
  bottom:22%;
  right:0;
  left:0;
  margin:auto;
  overflow:hidden;
  display:block;
  width:97%;
  padding-top:18%;
  background:url(../img/campaign/h1-txt-sp.png) no-repeat center center;
  background-size:contain;
  text-indent:100%;
  white-space:nowrap;
}

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

/* ct（キャラソンパレード） */
#campaign01 h3 {
  position:absolute;
  top:6.8%;
  width:100%;
  padding-top:111%;
  background:url(../img/campaign/campaign1/campaign-sp.png) no-repeat center top;
  background-size:100% auto;
}

/* btn（追加された楽曲を見る）*/
#campaign01 p a {
  position:absolute;
  bottom:12.6%;
  right:0;
  left:0;
  margin:auto;
  display:block;
  width:70%;
  padding-top:16.9%;
  background:url(../img/campaign/campaign1/btn_see-addition.png) no-repeat center center;
  background-size:100% auto;
  font-size:0;
}

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

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

/* campaign02（wrap）*/
#campaign02 {
  position:relative;
  width:100%;
  padding-top:942.133%;
  background:url(../img/campaign/campaign2/bg_gacha-sp.jpg) no-repeat center top;
  background-size:100% auto;
  font-size:0;
  box-shadow:0px 4px 6px 0px #ccc;
  margin:0 0 8%;
}

/* ct（FIGHT-ON ガチャ）*/
#ct-cp2-fighton {
  position:absolute;
  top:0;
  display:block;
  width:100%;
  padding-top:585.333%;
  background:url(../img/campaign/campaign2/fight-on_gacha-sp.png) no-repeat center top;
  background-size:100% auto;
  font-size:0;
}

/* ct（ALL-STAR ガチャ）*/
#ct-cp2-allstar {
  position:absolute;
  bottom:0.65%;
  display:block;
  width:100%;
  padding-top:342.666%;
  background:url(../img/campaign/campaign2/all-star_gacha-sp.png) no-repeat center top;
  background-size:100% auto;
  font-size:0;
}

/* campaign03（wrap）*/
#campaign03 {
  position:relative;
  width:100%;
  padding-top:184%;
  background:url(../img/campaign/campaign3/bg-sp.jpg) no-repeat center top;
  background-size:100% auto;
  font-size:0;
  box-shadow:0px 4px 6px 0px #ccc;
  margin:0 0 8%;
}

/* ct（login-bonus）*/
#ct-cp3-bonus {
  position:absolute;
  top:0;
  display:block;
  width:100%;
  padding-top:180%;
  background:url(../img/campaign/campaign3/login-bonus-sp.png) no-repeat center top;
  background-size:100% auto;
  font-size:0;
}

/* ct（mini-story）*/
#ct-cp3-more {
  position:absolute;
  bottom:3.8%;
  display:block;
  width:100%;
  padding-top:69%;
  background:url(../img/campaign/campaign3/more-sp.png) no-repeat center top;
  background-size:100% auto;
  font-size:0;
}

/* ct（gif）*/
#ct-cp3-story {
  position:absolute;
  bottom:10.4%;
  right:0;
  left:0;
  margin:auto;
  display:block;
  width:70%;
  background:#fff;
  border:2px solid #000;
}
#ct-cp3-story img {
  width:100%;
  height:auto;
  padding:2px;
}

/* txt（ログイン時に、フルボイスのミニストーリーが～）*/
#ct-cp3-story-txt {
  position:absolute;
  bottom:6.2%;
  width:100%;
  padding-top:10%;
  background:url(../img/campaign/campaign3/txt_more-sp.png) no-repeat;
  background-size:100% auto;
  z-index:9;
}

/* campaign04（wrap）*/
#campaign04 {
  position:relative;
  width:100%;
  padding-top:86.666%;
  background:#fff url(../img/campaign/campaign4/bg-sp.jpg) no-repeat center center;
  background-size:100% auto;
  font-size:0;
  box-shadow:0px 4px 6px 0px #ccc;
}

/* ct（story）*/
#campaign04 h3 {
  position:absolute;
  top:0;
  display:block;
  width:100%;
  padding-top:86.666%;
  background:url(../img/campaign/campaign4/story-sp.png) no-repeat center top;
  background-size:100% auto;
  font-size:0;
}


/* 4.0 - PARADE
--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* h1-txt（出演キャストが選んだ～）*/
.ct-hd-parade p {
  position:absolute;
  bottom:7.5%;
  right:0;
  left:0;
  margin:auto;
  overflow:hidden;
  display:block;
  width:97%;
  padding-top:28%;
  background:url(../img/parade/h1-txt-sp.png) no-repeat center center;
  background-size:contain;
  text-indent:100%;
  white-space:nowrap;
}

/* info（wrap）*/
#ct-parade-info {
  position:relative;
  width:100%;
  padding-top:42.2%;
  background:url(../img/parade/bg_info-sp.png) no-repeat center top;
  background-size:100% auto;
}

/* info（毎日テニラビで遊べる～）*/
#ct-parade-info p {
  position:absolute;
  top:27%;
  width:100%;
  padding-top:21.25%;
  background:url(../img/parade/info.png) no-repeat center top;
  background-size:97% auto;
  font-size:0;
}

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

#ct-parade-list-first li {
  display:block;
  width:100%;
  font-size:0;
  box-shadow:0px 0px 5px 1px #ccc;
  margin:10% 0 0;
  padding:0 0 2%;
}

/* bg */
#ct-parade-list-bg-first img {
  width:100%;
  height:auto;
}

/* card */
#ct-parade-list-card-first img {
  position:absolute;
  bottom:12%;
  left:0;
  right:0;
  margin:auto;
  width:90%;
  height:auto;
}

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

/* list */
#ct-parade-list li {
  position:relative;
  display:block;
  width:100%;
  padding-top:76%;
  font-size:0;
  margin:0 0 4.5%;
}

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

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

/* list（box）*/
.ct-parade-list-box {
  position:absolute;
  top:0;
  right:0;
  left:0;
  margin:auto;
  width:100%;
  padding-top:76%;
}

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

/* card */
.ct-parade-list-card img {
  position:absolute;
  top:13%;
  right:0;
  left:0;
  margin:auto;
  width:100%;
  height:auto;
}


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

/* message（wrap） */
#ct-message {
  font-size:0;
}

/* bg（テニスの王子様作者の許斐剛先生と～）*/
#ct-message-txt01-bg {
  position:relative;
  display:block;
  width:100%;
  padding-top:40%;
  background:url(../img/message/bg_txt-01-sp.jpg) no-repeat center top;
  background-size:100% auto;
}

/* txt（テニスの王子様作者の許斐剛先生と～）*/
#ct-message-txt01 {
  position:absolute;
  top:37%;
  display:block;
  width:100%;
  padding-top:20%;
  background:url(../img/message/txt-01-sp.png) no-repeat center top;
  background-size:100% auto;
}

/* bg（許斐 剛先生）*/
#ct-message-img01-bg {
  position:relative;
  display:block;
  width:100%;
  padding-top:146.4%;
  background:url(../img/message/bg_sign-sp.jpg) no-repeat center top;
  background-size:100% auto;
}

/* img（許斐 剛先生）*/
#ct-message-img01 {
  position:absolute;
  top:9%;
  right:0;
  left:0;
  margin:auto;
  display:block;
  width:100%;
  padding-top:120%;
  background:url(../img/message/sign-sp.png) no-repeat center top;
  background-size:100% auto;
}

/* bg（キャラクター全員のキャスト）*/
#ct-message-02-bg {
  position:relative;
  display:block;
  width:100%;
  padding-top:166%;
  background:url(../img/message/bg_sign-cast-sp.jpg) no-repeat center top;
  background-size:100% auto;
  margin:14.8% 0 0;
}

/* txt（すでにテニラビに登場している～）*/
#ct-message-txt02 {
  position:absolute;
  top:8%;
  right:0;
  left:0;
  margin:auto;
  display:block;
  width:100%;
  padding-top:27%;
  background:url(../img/message/txt-02-sp.png) no-repeat center top;
  background-size:100% auto;
}

/* img（キャラクター全員のキャスト）*/
#ct-message-img02 {
  position:absolute;
  top:24.5%;
  right:0;
  left:0;
  margin:auto;
  display:block;
  width:100%;
  padding-top:110%;
  background:url(../img/message/sign-cast-sp.png) no-repeat center top;
  background-size:100% auto;
}


/* 0.0 - footer
--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* footer（wrapper） */
footer {
  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;
  background-size:25% auto;
}

/* spec（wrap） */
#ft-spec {
  position:relative;
  width:94%;
  background:#fff url(../img/common/ft/bg_spec.jpg) left bottom repeat-x;
  border-radius:10px;
  box-shadow:3px 3px 5px 2px #cccccc;
  padding:0 0 7.5%;
  margin:21.5% auto 19.5%;
}

/* h2-ttl（ダウンロードはこちら） */
#ft-spec h2 {
  position:absolute;
  top:-43px;
  left:0;
  right:0;
  margin:auto;
  overflow:hidden;
  width:94%;
  padding-top:9.5%;
  background:url(../img/common/ft/h2-ttl_store.png) no-repeat;
  background-size:contain;
  background-position:center center;
  text-indent:100%;
  white-space:nowrap;
}

/* app-icon */
#ft-spec p {
  padding:11.5% 0 0;
}

#ft-spec p img {
  width:30%;
  height:auto;
  margin:0 auto 8.5%;
}

/* spec */
#ft-spec dl {
  display:block;
  width:91.6%;
  font-size:12px;
  font-weight:bold;
	line-height:1.9;
  margin:0 auto;
}

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

#ft-spec dd {
  margin:0 0 0 102px;
}

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

/* store-icon */
#ft-spec ul {
  margin:9% 0 0;
  overflow:hidden;
  padding:0 3%;
}

#ft-spec li a {
  display:block;
  width:48%;
  float:left;
  height:auto;
  margin:0 1% 5.5%;
}

#ft-spec li a img {
  width:100%;
  height:auto;
  backface-visibility:hidden;
}

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

/* ft */
#ft {
  font-size:3.4vw;
}

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

/* nav */
#ft-nav {
  overflow:hidden;
  width:96%;
  text-align:center;
  margin:6% auto 4%;
}

#ft-nav li:not(:first-child) {
  display:inline-block;
  margin:4% 2.5% 0 2.5%;
}

#ft-nav li:nth-child(1) {
  text-align:center;
}

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

/* bnr */
#ft-bnr {width:100%; overflow:hidden; text-indent:100%; white-space:nowrap; padding:2.6% 2% 3.3%;}
#ft-bnr li {transition-duration:0.3s;}
#ft-bnr li a {overflow:hidden; display:block;}
#ft_bnr li a:hover {opacity:0.7;}
.is_ios #ft-bnr li a:hover {opacity:1;}
#ft-bnr li:nth-child(1) a {float:left; width:20%; padding-top:6.5%; background:url(../img/common/ft/bushiroad.png) no-repeat center; background-size:100%; margin:0 4.7% 0 0;}
#ft-bnr li:nth-child(2) a {float:left; width:27%; padding-top:7%; background:url(../img/common/ft/akatsuki.png) no-repeat center; background-size:contain;}
#ft-bnr li:nth-child(3) a {float:right !important; width:41%; padding-top:7%; background:url(../img/common/ft/official_banner.png) no-repeat center; background-size:contain;}

/* copyright */
#ft p {
  clear:both;
  font-size:10px;
  text-align:center;
  margin:0 0 10px;
  padding:5px 0 0
}

/* PageTop */
#pagetop {position:fixed; z-index:9; transition:0.3s; -webkit-tap-highlight-color:rgba(0,0,0,0);}
#pagetop a {display:block; width:76px; height:76px; 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;}
.is_ios #pagetop a:hover {opacity:1;}



}