@charset 'utf-8';

@media only screen and (max-width:640px) {

/**
 * 【SP】新テニスの王子様 ライジングビート【公式サイト】
 *
 * 【layout】
 * 1.0 - TOP
 * 　　|- キービジュアル
 *  　　|- キービジュアル（BOX）
 * 　　|- 事前登録概要【SP用】
 *  　　|- 【事前登録受付期間】
 *  　　|- バナー
 * 　　|- 2017年配信開始予定
 * 　　|- top-2column_box（NEWS, Twitter-timeline）
 *  　　|- NEWS
 *  　　|- Twitter-timeline
 * 　　|- movie-top
 *  　　|- PVタイトル（PV第一弾公開中！）
 *  　　|- movie-topPV動画（iframe）
 * 　　|- spec-top（BOX）
 *  　　|- スペックリスト
 *
 * 2.0 - NEWS（common）
 * 　　|- h1タイトル
 * 　　|- left-column_wrapper
 *  　　|- left-column
 * 　　|- right-column
 *  　　|- カテゴリーリスト
 * 　　|- カテゴリ,アイコン,日付,タイトル（BOX）
 *  　　|- カテゴリ,アイコン,日付（BOX）
 *   　　|- カテゴリー（アイコン）
 *    　　|- お知らせ
 *    　　|- イベント
 *    　　|- アップデート
 *  　　|- 日付
 *  　　|- NEWアイコン
 *
 * 3.0 - SYSTEM
 * 　　|- 
 * 　　|- 
 *
 * 4.0 - CHARACTER
 * 　　|- h1タイトル
 * 　　|- タブリスト
 * 　　|- キャラクター（wrapper）
 *  　　|- 学校名
 *   　　|- Coming Soon（6/29〜Fixまで）
 *   　　|- NEWアイコン（6/29〜Fixまで）
 *  　　|- キャラクター（詳細 - wrapper）
 *  　　|- キャラクター（詳細）
 *  　　|- キャラクター画像
 *  　　|- キャラクター概要
 *  　　|- プロフィールテキスト（BOX）
 *   　　|- プロフィールテキスト
 *
 * 5.0 - MUSIC
 * 　　|- h1タイトル
 *  　　|- 今後も収録曲続々公開予定！！
 * 　　|- タブリスト
 *  　　|- NEWアイコン
 * 　　|- comingsoon_music-box
 *  　　|- comingsoon（ユニット）
 *  　　|- comingsoon（デュエット）
 * 　　|- ミュージック用ラッパー
 *  　　|- ミュージックコンテンツ
 *   　　|- ミュージック（BOX）
 *    　　|- 画像
 *    　　|- タイトル
 *    　　|- キャラクター名
 *    　　|- NEWアイコン
 * 　　|- コンテンツBOX（ポップアップ）
 *  　　|- コンテンツ
 *   　　|- 画像
 *   　　|- コンテンツ（概要テキスト）
 *    　　|- カテゴリー名
 *    　　|- ソングタイトル（BOX）
 *     　　|- アイコン
 *     　　|- タイトル
 *     　　|- キャラクター名
 *    　　|- ソングタデータ（BOX）
 *     　　|- アイコン
 *     　　|- 項目
 *     　　|- テキスト
 * 　　|- ポップアップ開始
 * 　　|- ポップアップ表示
 * 　　|- ポップアップ終了
 * 　　|- 閉じるボタン
 *
 * 6.0 - MOVIE
 * 　　|- h1タイトル
 * 　　|- 動画リスト
 *  　　|- サムネイル画像
 *  　　|- 動画タイトル（第●●弾）
 *
 * 0.0 - 事前登録（../register）
 * 　　|- キービジュアル
 *  　　|- キービジュアル（BOX）
 *   　　|- logo
 * 　　|- 事前登録キャンペーン開催中！
 * 　　|- 事前登録フォーム（wrapper）
 *  　　|- 事前登録フォーム（box）
 *   　　|- メールアドレスで登録（input[type='email']）
 *    　　|- メールアドレスで登録（ボタン）
 *    　　|- Twitterで登録（ボタン）
 *    　　|- Twitterで登録（注釈）
 * 　　|- 特典（wrapper）
 *  　　|- 事前登録でゲーム内特典が貰える
 *  　　|- 全員にビーストストーンをプレゼント!!
 *  　　|- 報酬一覧
 * 　　|- 事前登録する（wrapper）
 *  　　|- 事前登録する（ボタン）
 *  　　|- 注意事項のテキスト文言
 *  　　|- バリデーション（error）
 *
 * 0.1 - 登録登録（../pre-register/complete）
 * 　　|- 登録完了（wrapper）
 *  　　|- 登録完了
 *  　　|- TOPへ戻る
 *
 * ------------------------------------------------------------------------------------------------------- */


/* 1.0 - TOP
---------------------------------------------------------------------------------------------------------- */
/* キービジュアル */
#kv-top {
	width:100%;
	background:url(../img/top/key-visual-sp.jpg) no-repeat center center;
	background-size:100%;
	padding-top:120.625%;
	font-size:0;
	margin:0 auto;
}

/* キービジュアル（BOX） */
#kv-top_box {display:none;}

/* 事前登録概要【SP用】 */
#release-schedule-sp {
	overflow:hidden;
	width:100%;
	background:url(../img/top/bg_pt-black-sp.png);
	font-size:0;
}

/* 【事前登録受付期間】 */
#release-schedule-sp h2 img {width:96%; height:auto; margin:2.8% auto 1% auto;}

/* バナー */
#release-schedule-sp_img a {
	display:block;
	width:96%;
	padding-top:24.731%;
	background:url(../img/top/bnr_pre-register.jpg) no-repeat center center;
	background-size:100%;
	margin:0 auto 3% auto;
}
#release-schedule-sp_img a:hover {opacity:0.7;}
.is_ios #release-schedule-sp_img a:hover {opacity:1;}

/* 2017年配信開始予定 */
#release-schedule {width:100%; font-size:0;}
#release-schedule h2 {width:100%; padding-top:15.625%; background:url(../img/top/h2_ttl-release-sp.png) no-repeat; background-size:100%;}

/* top-2column_box */
.top-2column_box {
	position:relative;
	width:96%;
	height:356px;
	background:rgba(255,255,255,0.7);
	background-size:100% 356px;
	border:2px solid #454545;
	border-bottom:4px solid #454545;
	border-radius:6px;
}

/* news-top */
#news-top {margin:60px auto 0 auto; padding:28px 10px 10px 10px;}
#news-top h2 {position:absolute; top:-32px; left:-2px; width:170px; height:58px; font-size:0; background:url(../img/top/h2_ttl-news.png) no-repeat; background-size:100%;}
#news-top p {font-size:0; transition-duration:0.3s;}
#news-top p:hover {opacity:0.7;}
.news-ar-top {overflow-y:scroll; height:305px;}

/* ニュース一覧へ */
.top-news-btn {display:none;}
.top-news-btn-sp {display:block; width:80%; max-width:400px; margin:0 auto !important;}
.top-news-btn-sp a img {width:100%; max-width:400px; height:auto; margin:30px auto 0px auto;}

/* tw-top */
#tw-top {margin:70px auto 0 auto; padding:28px 0 10px 3%;}
#tw-top h2 {position:absolute; top:-32px; left:-2px; width:170px; height:58px; font-size:0; background:url(../img/top/h2_ttl-twitter.png) no-repeat; background-size:100%;}
#tw-top p {font-size:0; transition-duration:0.3s;}
#tw-top p:hover {opacity:0.7;}
.twitter-timeline {margin-left:0 !important; width:97% !important;}
.is_ios .twitter-timeline {margin-left:-6px!important;  width:100% !important;}
.is_ios .twitter-box{
	margin: 0 0 0 -5px;
	overflow: hidden;
}

/* twフォローボタン */
#top-tw-btn, #top-tw-btn a {display:none; font-size:0;}
#top-tw-btn-sp {display:block; width:80%; max-width:400px; margin:0 auto !important;}
#top-tw-btn-sp a img {width:100%; max-width:400px; height:auto; margin:30px auto 70px auto;}

/* movie-top */
#movie-top {
	clear:both;
	position:relative;
	width:96%;
	padding-top:61%;
	margin:0 auto 74px auto;
	border:2px solid #7a7a7a;
	border-radius:6px;
	background:url(../img/top/bg_movie-sp.png) repeat center center;
	background-size:100%;
	box-shadow:0px 0px 6px 2px rgba(0, 0, 0, 0.52);
}

#movie-top h2 {position:absolute; top:-30px; left:0%; width:170px; height:58px; font-size:0; background:url(../img/top/h2_ttl-pv.png) no-repeat; background-size:100%;}

/* PVタイトル（PV第一弾公開中） */
#movie-top p {
	display:inline-block;
	position:absolute;
	top:10%;
	left:0;
	right:0;
	margin:auto;
	width:100%;
	max-width:500px;
	height:40px;
	background:url(../img/top/ttl-pv.png) no-repeat center center, url(../img/top/bg_ttl-pv.png) no-repeat center center;
	background-size:30%, 58%;
	font-size:0;
}

/* PV動画（iframe） */
#movie-top iframe {position:absolute; bottom:8%; left:0; right:0; margin:auto; width:72%; height:63.5%;}

/* spec-top（BOX） */
#spec-top {
	clear:both;
	position:relative;
	width:96%;
	background:url(../img/top/bg_spec-sp.png) no-repeat center bottom;
	background-size:1030px 644px;
	border:2px solid #454545;
	border-bottom:4px solid #454545;
	border-radius:6px;
	margin:0 auto;
}

#spec-top h2 {position:absolute; top:-30px; left:-3px; width:180px; height:58px; font-size:0; background:url(../img/top/h2_ttl-spec.png) no-repeat; background-size:100%;}

/* スペックリスト */
#spec-top dl {font-size:14px; letter-spacing:-1px; line-height:2;}
#spec-list_left {margin:0 0 0 5%; padding:40px 0 0 0;}
#spec-list_left dt {float:left;}
#spec-list_right {margin:0 0 0 5%; padding:0 0 36px 0;}
#spec-list_right dt {float:left;}


/* 2.0 - NEWS（common）
---------------------------------------------------------------------------------------------------------- */
/* h1タイトル */
#h1_news {background:url(../img/news/h1_ttl.png) no-repeat left; background-size:180px 58px;}

/* left-column_wrapper */
#left-column_wrapper {}

/* left-column */
#left-column {position:relative; width:97%; padding:8px 10px 6px 10px; background-color:rgba(255,255,255,0.7); border:2px solid #707070; border-radius:4px; margin:14px auto 20px auto;}

/* right-column */
#right-column {position:relative; width:97%; background:rgba(255,255,255,0.7) url(../img/news/bg_cat-top-sp.png) no-repeat center top; background-size:auto 42px; border:2px solid #707070; border-radius:4px; margin:30px auto 8px auto; padding:0 10px;}

/* カテゴリーリスト */
#right-column ul {position:relative; padding:42px 0 75px 0; font-size:15px; font-weight:bold;}
#right-column li {border-bottom:1px dashed #aaa; background:url(../img/news/icon_arrow.png) no-repeat 6px 24px; background-size:12px 17px;}
#right-column li a {display:block; padding:20px 0 8px 26px;}
#right-column li:hover {background:url(../img/news/icon_arrow_over.png) no-repeat 6px 24px; background-size:12px 17px;}

#right-column ul::before {
	content: '';
	background:url(../img/news/icon_ball.png) no-repeat;
	background-size:contain;
	position:absolute;
	bottom:-8px;
	right:-18px;
	width:54px;
	height:35px;
	z-index:999;
}

#right-column ul::after {
	content: '';
	background:url(../img/news/icon_racket.png) no-repeat;
	background-size:contain;
	position:absolute;
	bottom:-16px;
	left:-16px;
	width:50px;
	height:61px;
	z-index:999;
}

/* カテゴリ,アイコン,日付,タイトル（BOX） */
.news-common {border-bottom:1px dashed #aaa;}

/* カテゴリ,アイコン,日付（BOX） */
.news-common dt {padding:5px 0; height:54px; padding:22px 0 0 0; line-height:1;}

/* カテゴリー（アイコン） */
.news_cat-icon {float:left; display:inline-block; width:97px; height:21px; font-size:11px; line-height:21px; text-align:center; color:#fff;}

/* お知らせ */
.info {background:url(../img/news/icon_info.png) no-repeat center; background-size:100%;}

/* イベント */
.event {background:url(../img/news/icon_event.png) no-repeat center; background-size:100%;}

/* アップデート */
.update {background:url(../img/news/icon_update.png) no-repeat center; background-size:100%;}

/* 日付 */
.news_date {float:left; font-size:15px; margin:3px 0 0 13px; font-weight:bold;}

/* NEWアイコン */
.news-common dt img {display:inline; margin:-14px 0 0 13px; width:40px; height:auto}


/* 2.1 - NEWS（一覧）
---------------------------------------------------------------------------------------------------------- */
/* 記事一覧（wrapper） */
#news-ar {padding:0 0 26px 0;}

#news-ar dl {background:url(../img/news/icon_arrow.png) no-repeat; background-size:16px 23px; background-position:right 80%;}
#news-ar dl:hover {background:url(../img/news/icon_arrow_over.png) no-repeat; background-size:16px 23px; background-position:right 80%;}

/* タイトル */
.news-ar_ttl {font-size:14px; padding:6px 40px 12px 0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}

/* ページャー */
#pagenavi_pc {width:100%; margin:30px 0 0 0; line-height:17px;}
.wp-pagenavi {text-align:center; margin:}

/* 最初,最後 */
.wp-pagenavi .first {display:inline-block; width:17px; height:19px; background:url(../img/news/icon_pre-top.png) no-repeat; background-size:100%;}
.wp-pagenavi .last {display:inline-block; width:17px; height:19px; background:url(../img/news/icon_next-top.png) no-repeat; background-size:100%;}
.wp-pagenavi .first:hover {display:inline-block; width:17px; height:19px; background:url(../img/news/icon_pre-top_over.png) no-repeat; background-size:100%;}
.wp-pagenavi .last:hover {display:inline-block; width:17px; height:19px; background:url(../img/news/icon_next-top_over.png) no-repeat; background-size:100%;}

/* 次,前 */
.wp-pagenavi .previouspostslink {display:inline-block; width:17px; height:19px; background:url(../img/news/icon_pre.png) no-repeat; background-size:100%;}
.wp-pagenavi .nextpostslink {display:inline-block; width:17px; height:19px; background:url(../img/news/icon_next.png) no-repeat; background-size:100%;}
.wp-pagenavi .previouspostslink:hover {display:inline-block; width:17px; height:19px; background:url(../img/news/icon_pre_over.png) no-repeat; background-size:100%;}
.wp-pagenavi .nextpostslink:hover {display:inline-block; width:17px; height:19px; background:url(../img/news/icon_next_over.png) no-repeat; background-size:100%;}

.wp-pagenavi .first,
.wp-pagenavi .last,
.wp-pagenavi .previouspostslink,
.wp-pagenavi .nextpostslink {font-size:0; vertical-align:middle;}

/* ナンバー,カレント */
.wp-pagenavi a {display:inline-block; width:27px; height:19px; background:url(../img/news/icon_num.png) no-repeat; background-size:100%; margin:0 1.6%; color:#fff; font-size:11px; font-weight:bold;}
.wp-pagenavi .current {display:inline-block; width:27px; height:19px; background:url(../img/news/icon_num-current.png) no-repeat; background-size:100%; margin:0 10px; color:#fff; font-size:11px; font-weight:bold;}
.wp-pagenavi a:hover {display:inline-block; width:27px; height:19px; background:url(../img/news/icon_num-current.png) no-repeat; background-size:100%;}


/* 2.2 - NEWS（詳細）
---------------------------------------------------------------------------------------------------------- */
/* 記事詳細（wrapper） */
#news-single {padding:0 0 30px 0;}

/* タイトル */
.news-single_ttl {font-size:14px; padding:5px 0 14px 0; font-weight:bold; line-height:1.6}

/* コンテンツ */
#news-content {padding:18px 0 0 0;}
#news-content p {padding:0 0 20px 0;}
#news-content p a {color:#00a8ff; text-decoration:underline;}
#news-content p a:hover {opacity:0.7;}
#news-content img {max-width:100%; height:auto;}
#news-content a img {display:inline-block;}
#news-content iframe {max-width:100%;}

/* エディター用のクラス */
#news-content h3 {color:#cc006e;}
#news-content .orange {color:#f60;}

/* ページャー（BOX） */
#pagenavi-single_pc {position:relative; width:94%; max-width:410px; height:58px; overflow:hidden; text-indent:100%; white-space:nowrap; margin:0 auto;}

/* 前の記事 */
#pagenavi-single_pc #next a {position:absolute; left:0; bottom:10px; margin:auto; display:block; width:76px; height:33px; background:url(../img/news/bt_prev.png) no-repeat; background-size:contain;}

/* ニュース一覧へ戻る */
#pagenavi-single_pc #back a {position:absolute; left:0; right:0; bottom:10px; margin:auto; display:block; width:130px; height:33px; background:url(../img/news/bt_back.png) no-repeat; background-size:contain;}

/* 次の記事 */
#pagenavi-single_pc #prev a {position:absolute; right:0; bottom:10px; margin:auto; display:block; width:76px; height:33px; background:url(../img/news/bt_next.png) no-repeat; background-size:contain;}

#pagenavi-single_pc #next a:hover,
#pagenavi-single_pc #back a:hover,
#pagenavi-single_pc #prev a:hover {opacity:0.7;}


/* 3.0 - SYSTEM
---------------------------------------------------------------------------------------------------------- */
/*  */


/* 4.0 - CHARACTER
---------------------------------------------------------------------------------------------------------- */
/* h1タイトル */
#h1_character {background:url(../img/character/h1_ttl.png) no-repeat left; background-size:320px 58px;}

/* タブリスト */
.character_tab {overflow:hidden; width:96%; background:url(../img/character/bg_tab.png) repeat-x center bottom; margin:0 auto 28px auto; padding:4% 0 2% 0;}
.character_tab li {position:relative; display:block; float:left; width:46%; margin:0 2% 4% 2%; background:url(../img/character/icon/bg_school-list-sp.png); background-size:100% 100%; cursor:pointer; transition-duration:0.3s;}
.character_tab li img {width:100%; height:auto;}
.character_tab li.select, .character_tab li:hover {background:url(../img/character/icon/bg_school-list_select-sp.png); background-size:100% 100%;}

/* Coming Soon（6/29〜Fixまで）*/
#next-school_comingsoon {pointer-events:none; position:relative;}
/* #next-school_comingsoon::after {content:''; display:block; width:100%; height:100%; background:rgba(0,0,0,0.5); position:absolute; top:0;} */

/* NEWアイコン（6/29〜Fixまで）*/
.chara_new {position:absolute; top:0; left:0;}

/* キャラクター（wrapper） */
.character_content {overflow:hidden; width:96%; margin:0 auto; }
.character_content-hide {display:none;}

/* 学校名 */
.character_content h2 {
	position:relative;
	width:100%;
	height:44px;
	border:2px solid #b51121;
	background:url(../img/character/bg_school-ttl_left.png) left no-repeat, url(../img/character/bg_school-ttl_right.png) right no-repeat;
	background-size:46% 100%, 46% 100%;
	background-color:#404040;
	line-height:43px;
	text-align:center;
	font-size:14px;
	letter-spacing:1px;
	color:#fff;
	text-shadow:2px 2px 0px #222222;
	margin:0 0 28px 0;
}
.character_content h2::before {
	content: '';
	border:1px solid #fff;
	position:absolute;
	top:0;
	left:0px;
	right:0;
	bottom:0;
	margin:auto;
}

/* キャラクター（詳細 - wrapper） */
.character_info {width:94%; margin:0 auto 25px auto; background-color:#222; padding:2px;}

/* キャラクター（詳細） */
.character_info-box {position:relative; overflow:hidden; width:100%; background:#fff url(../img/character/bg_chara.png) no-repeat; background-size:100% auto; border:2px solid #b51121;}

/* キャラクター画像 */
.character_info-box img {width:100%; height:auto; margin:-6px 0 0 0;}

/* キャラクター概要 */
.character_txt {
	position:absolute;
	top:14%;
	right:-4.5%;
	width:64%;
	height:45%;
	font-size:3vw;
	line-height:1.4;
	text-align:right;
	color:#fff;
	text-shadow:2px 1px 1px #222222;
	-webkit-transform:scale(0.9);
    -webkit-transform-origin:0 0;
	-moz-transform: scale(0.9);
    -moz-transform-origin:0 0;
	-o-transform: scale(0.9);
	-o-transform-origin:0 0;
	-ms-transform: scale(0.9);
    -ms-transform-origin:0 0;
}
.character_txt h3 {font-size:6vw;}

/* プロフィールテキスト（BOX） */
.character_info-txt {
	position:absolute;
	right:4px;
	bottom:4px;
	width:45%;
	height:44%;
	background:#404040;
	border:1px solid #b51121;
	-moz-box-shadow:0px 0px 0px 2px rgba(0,0,0,0.5);
	-webkit-box-shadow:0px 0px 0px 2px rgba(0,0,0,0.5);
	box-shadow:0px 0px 0px 2px rgba(0,0,0,0.5);
}

/* プロフィールテキスト */
.character_info-txt p {
	height:110%;
	width:110%;
	border:1px solid #fff;
	font-size:8px;
	color:#fff;
	line-height:1.5;
	padding:5px;
	-webkit-transform:scale(0.9);
    -webkit-transform-origin:0 0;
	-moz-transform: scale(0.9);
    -moz-transform-origin:0 0;
	-o-transform: scale(0.9);
	-o-transform-origin:0 0;
	-ms-transform: scale(0.9);
    -ms-transform-origin:0 0;
	display: -webkit-flex;
	display: flex;
	-webkit-align-items: center;
	align-items: center;
	-webkit-justify-content: left;
	justify-content: left;
}

/* Coming Soon */
#chara-hyotei, #chara-rikkai, #chara-higa, #chara-shitenhoji, #chara-fudomine, #chara-rokkaku, #chara-yamabuki, #chara-rudolf, #chara-seitoku, #chara-u-17,
#chara-coach {pointer-events:none; position:relative;}
#chara-hyotei::after, #chara-rikkai::after, #chara-higa::after, #chara-shitenhoji::after, #chara-fudomine::after, #chara-rokkaku::after, #chara-yamabuki::after, #chara-rudolf::after, #chara-seitoku::after, #chara-u-17::after,
#chara-coach::after {content:''; display:block; width:100%; height:100%; background:rgba(0,0,0,0.5); position:absolute; top:0;}


/* 5.0 - MUSIC
---------------------------------------------------------------------------------------------------------- */
/* h1タイトル */
#h1_music {background:url(../img/music/h1_ttl.png) no-repeat left; background-size:220px 58px;}

/* 今後も収録曲続々公開予定！！（PC）*/
#h1_music-txt {display:none;}

/* 今後も収録曲続々公開予定！！（パターン２タイトルの下ver）*/
#h1_music-txt-2 {width:100%; padding-top:23.5%; background:url(../img/music/h1_txt-music.png) no-repeat center center; background-size:auto 86%; overflow:hidden; text-indent:100%; white-space:nowrap; margin:-24px auto 20px auto;}

/* タブリスト */
.music_tab {position:relative; overflow:hidden; width:96%; margin:-18px auto -0.7%; text-indent:100%; white-space:nowrap; padding:0 0 0 4%;}
.music_tab li {position:relative; display:block; float:left; width:32%; padding-top:6%; cursor:pointer; transition-duration:0.5s;}
.music_tab li:nth-child(1) {background:url(../img/music/bg_tab-solo.png) no-repeat center bottom; background-size:100%;}
.music_tab li:nth-child(2) {background:url(../img/music/bg_tab-duet.png) no-repeat center bottom; background-size:100%;}
.music_tab li:nth-child(3) {background:url(../img/music/bg_tab-unit.png) no-repeat center bottom; background-size:100%;}

/* NEWアイコン */
.music_tab li img {position:absolute; bottom:43%; right:12%; width:38%; height:auto;}

/* ▼公開後は丸ごと消す（cssとテンプレートファイルの<div class="comingsoon_music-box">） */
/* comingsoon_music-box */
#comingsoon_music-box {position:relative; text-indent:100%; white-space:nowrap;}
/* comingsoon（ユニット） */
.comingsoon_music-unit {display:block; width:30%; padding-top:6%; background:url(../img/common/gnav/comingsoon.png) no-repeat 36% bottom; background-size:50%; position:absolute; top:0; left:35%;}
/* comingsoon（デュエット） */
.comingsoon_music-duet {display:block; width:30%; padding-top:6%; background:url(../img/common/gnav/comingsoon.png) no-repeat 30% bottom; background-size:50%; position:absolute; top:0; left:65%;}
/* ▲公開後は丸ごと消す（cssとテンプレートファイルの<div class="comingsoon_music-box">） */

.music_tab li.select:nth-child(1), .music_tab li:hover:nth-child(1) {background:url(../img/music/bg_tab-solo_select.png) no-repeat center bottom; background-size:100%;}
.music_tab li.select:nth-child(2), .music_tab li:hover:nth-child(2) {background:url(../img/music/bg_tab-duet_select.png) no-repeat center bottom; background-size:100%;}
.music_tab li.select:nth-child(3), .music_tab li:hover:nth-child(3) {background:url(../img/music/bg_tab-unit_select.png) no-repeat center bottom; background-size:100%;}

/* ミュージック用wrapper */
#music_wrapper {position:relative; z-index:999;}

/* ミュージックコンテンツ */
.music_content {text-align:center;}
.music_content #music_solo {overflow:hidden; width:96%; border:3px solid #507422; border-radius:8px; background:#efffda; margin:0 auto; padding:0 1% 48px 1%;}
.music_content #music_unit {overflow:hidden; width:96%; border:3px solid #ed9b03; border-radius:8px; background:#fff1da; margin:0 auto; padding:0 1% 48px 1%;}
.music_content #music_duet {overflow:hidden; width:96%; border:3px solid #1994c1; border-radius:8px; background:#f0fafc; margin:0 auto; padding:0 1% 48px 1%;}
.music_content-hide {display:none;}

/* ミュージック（BOX） */
.music_box {
	display:inline-block;
	float:left;
	position:relative;
	width:48%;
	border-radius:6px;
	margin:4.5% 1% 0 1%;
	color:#fff;
	background:-webkit-gradient(linear, left top, left bottom, color-stop(1.00, #000), color-stop(0.00, #45494d));
	background:-webkit-linear-gradient(#45494d, #000);
	background:-moz-linear-gradient(#45494d, #000);
	background:-o-linear-gradient(#45494d, #000);
	background:-ms-linear-gradient(#45494d, #000);
	background:linear-gradient(#45494d, #000);
}

.music_box-inside {
	background:url(../img/music/bg_content.png) repeat-y;
	border:1px solid #fff;
	border-radius:6px;
	margin:2px;
	transition-duration:0.4s;
	font-size:12px;
}

.music_box-inside:hover {border:1px solid #d90360;}

/* 画像 */
.music_img_box {position:relative; width:110px; height:110px; display:block; margin:24px auto 16px auto;}
.music_box img {position:absolute; top:0; right:0; bottom:0; left:0; margin:auto; max-width:110px; height:auto; max-height:110px; width:auto; box-shadow:0px 0px 6px 2px rgba(0, 0, 0, 0.52);}

/* タイトル */
.music_box h2 {text-align:center; padding:0 5px 5px 5px; background:url(../img/music/border_ttl.png) no-repeat center bottom; background-size:90% 2px;}

/* キャラクター名 */
.music_box p {text-align:center; padding:5px 5px 1em 5px;}

/* NEWアイコン */
.music_icon-new {
	overflow:hidden;
	position:absolute;
	top:3px;
	left:3px;
	width:50px;
	height:50px;
	background:url(../img/music/icon_new.png) no-repeat left top;
	background-size:50px auto;
	-webkit-border-radius:5px 0 0 0 / 5px 0 0 0;
	-moz-border-radius:5px 0 0 0 / 5px 0 0 0;
	border-radius:5px 0 0 0 / 5px 0 0 0;
	text-indent:100%;
	white-space:nowrap;
	font-size:0;
}

/* コンテンツBOX（ポップアップ） */
.popup-music_box {
	position:relative;
	width:92%;
	background:#fff;
	border:2px solid #454545;
	margin:20px auto;
}

/* コンテンツ */
.popup-music_content {
	overflow:hidden;
	display:block;
	border:3px solid #d90360;
	position:relative;
	background:url(../img/music/bg_content.jpg) no-repeat center top;
	background-size:640px ;
	margin:2px;
	padding:35px 10px 12px 10px;
}

/* 画像 */
.popup-music_img img {width:55%; max-width:150px; height:auto; margin:0 auto; box-shadow:0px 0px 6px 2px rgba(0, 0, 0, 0.52);}

/* コンテンツ（概要テキスト） */
.popup-music_content-right {margin:0 0 0 0;}

/* カテゴリー名（ソロ） */
.popup-music_content-cat-solo {position:absolute; top:2%; left:30px; display:inline-block; height:19px; background:url(../img/music/bg_cat.png) no-repeat right; background-size:auto 100%; font-size:12px; line-height:18px; padding:0 20px 0 10px;}
.popup-music_content-cat-solo::before {content:''; height:19px; width:23px; background:url(../img/music/icon_cat_solo.png) no-repeat right; background-size:100%; position:absolute; top:0px; left:-23px;}

/* カテゴリー名（デュエット） */
.popup-music_content-cat-duet {position:absolute; top:2%; left:30px; display:inline-block; height:19px; background:url(../img/music/bg_cat.png) no-repeat right; background-size:auto 100%; font-size:12px; line-height:18px; padding:0 20px 0 10px;}
.popup-music_content-cat-duet::before {content:''; height:19px; width:23px; background:url(../img/music/icon_cat_duet.png) no-repeat right; background-size:100%; position:absolute; top:0px; left:-23px;}

/* カテゴリー名（ユニット） */
.popup-music_content-cat-unit {position:absolute; top:2%; left:30px; display:inline-block; height:19px; background:url(../img/music/bg_cat.png) no-repeat right; background-size:auto 100%; font-size:12px; line-height:18px; padding:0 20px 0 10px;}
.popup-music_content-cat-unit::before {content:''; height:19px; width:23px; background:url(../img/music/icon_cat_unit.png) no-repeat right; background-size:100%; position:absolute; top:0px; left:-23px;}

/* ソングタイトル（BOX） */
.popup-music_content-ttl {
	position:relative;
	display:inline-block;
	width:100%;
	border-radius:6px;
	color:#fff;
	font-size:12px;
	background:-webkit-gradient(linear, left top, left bottom, color-stop(1.00, #000), color-stop(0.00, #45494d));
	background:-webkit-linear-gradient(#45494d, #000);
	background:-moz-linear-gradient(#45494d, #000);
	background:-o-linear-gradient(#45494d, #000);
	background:-ms-linear-gradient(#45494d, #000);
	background:linear-gradient(#45494d, #000);
	margin:22px 0 0 0;
}

.popup-music_content-ttl-inside {
	background:url(../img/music/bg_content.png) repeat-y;
	border:1px solid #fff;
	border-radius:6px;
	margin:2px;
}

/* アイコン */
.popup-music_content-ttl h3 {position:absolute; width:98px; height:34px; top:-11px; left:-6px; background:url(../img/music/icon_song-ttl.png) no-repeat center; background-size:100%; overflow:hidden; text-indent:100%; white-space:nowrap;}

/* タイトル */
.popup-music_content-ttl h4 {position:relative; text-align:center; padding:18px 6px 7px 6px; background:url(../img/music/border_ttl-popup.png) no-repeat center bottom; background-size:98% 2px;}

/* キャラクター名 */
.popup-music_content-ttl p {position:relative; text-align:center; padding:8px 6px 10px 6px;}

/* ソングデータ（BOX） */
.popup-music_content-data {
	position:relative;
	width:100%;
	font-size:14px;
	margin:23px 0 0 0;
	background:#434343 ;
}

/* アイコン */
.popup-music_content-data h3 {position:absolute; width:98px; height:34px; top:-16px; left:-6px; background:url(../img/music/icon_song-data.png) no-repeat center; background-size:100%; overflow:hidden; text-indent:100%; white-space:nowrap;}

/* 項目 */
.popup-music_content-data dt {
	float:left;
	width:100px;
	min-height:36px;
	color:#fff;
	overflow:hidden;
	text-indent:100%;
	white-space:nowrap;
	border-top:1px solid #fff;
}

.data-icon_lyrics {background:url(../img/music/icon_lyrics.png) no-repeat center bottom; background-size:67px auto ;}
.data-icon_compose {background:url(../img/music/icon_compose.png) no-repeat center center; background-size:67px auto ;}


/* テキスト */
.popup-music_content-data dd {
	min-height:36px;
	line-height:1.4;
	background:#efefef;
	padding:12px 1em 10px 16px;
	margin:0 0 0 100px;
	font-size:12px;
	border-top:1px solid #fff;
	border-left:1px solid #fff;
}

/* ポップアップ開始 */
.mfp-fade.mfp-wrap .mfp-content .popup-music_box {
	opacity:0;
	transform:scale(0.1);
	-webkit-transition:all 0.5s ease-out;
	-moz-transition:all 0.5s ease-out;
	transition:all 0.5s ease-out;
}

/* ポップアップ表示 */
.mfp-fade.mfp-wrap.mfp-ready .mfp-content .popup-music_box {transform:scale(1); opacity:1;}

/* ポップアップ終了 */
.mfp-fade.mfp-wrap.mfp-removing .mfp-content .popup-music_box {opacity:0;}

/* 閉じるボタン */
.popup-music_box .mfp-close {
	width:36px;
	height:36px;
	position:absolute;
	right:-18px !important;
	top:-18px !important;
	opacity:1;
	background:url(../img/common/bt_close.png) no-repeat center;
	background-size:100%;
	transition-duration:0.3s;
	font-size:0;
}
.popup-music_box .mfp-close:hover {opacity:0.8;}
.popup-music_box .mfp-close:active {top:-25px;}
.is_ios .popup-music_box .mfp-close:hover {opacity:1;}

/* 6.0 - MOVIE
---------------------------------------------------------------------------------------------------------- */
/* h1タイトル */
#h1_movie {background:url(../img/movie/h1_ttl.png) no-repeat left; background-size:180px 58px;}

/* 動画リスト */
#movie-list {width:96%; margin:0 auto;}

#movie-list li {
	position:relative;
	overflow:hidden;
	width:100%;
	background:#d9015e;
	margin:0 auto 40px auto;
}


/* サムネイル画像 */
.movie-thumbnail {overflow:hidden; width:98%; transition-duration:0.3s; margin:1% auto 0 auto;}
.movie-thumbnail img {width:100%; height:auto; border-top:2px solid #454545; border-right:2px solid #454545; border-left:2px solid #454545;}
.movie-thumbnail:hover img {opacity:0.9;}
.is_ios .movie-thumbnail:hover img {opacity:1;}

.movie-thumbnail::after {
	content:'';
	display:block;
	width:100%;
	height:100%;
	background:url(../img/movie/bt_play.png) no-repeat center 43%;
	position:absolute;
	top:0;
	margin:auto;
	transition-duration:0.3s;
}
.movie-thumbnail:hover::after {opacity:0.6;}
.is_ios .movie-thumbnail:hover::after {opacity:1;}

/* 動画タイトル（第●●弾） */
.movie-ttl {
	display:block;
	width:100%;
	min-height:30px;
	text-align:center;
	font-size:15px;
	color:#fff;
	line-height:1.4;
	background:#d9015e;
	letter-spacing:1px;
	text-shadow:#333 3px 1px 2px, #333 -1px 1px 0px, #333 1px -1px 0px, #333 -1px -1px 0px;
	padding:11px 1em 14px 1em;
}


/* 0.0 - 事前登録（../register）
---------------------------------------------------------------------------------------------------------- */
/* キービジュアル */
#kv {
	position:relative;
	width:100%;
	padding-top:70.625%;
	background:url(../img/register/key-visual-sp.jpg);
	background-size:100%;
	font-size:0;
}

/* キービジュアル（BOX） */
/* logo */
#kv_box {display:none;}

/* 事前登録キャンペーン開催中！ */
#campaign {
	width:100%;
	padding-top:22.0833%;
	background:url(../img/register/campaign-sp.png) no-repeat center;
	background-size:100%;
	font-size:0;
}

/* 事前登録フォーム（wrapper） */
#register {
	width:100%;
	background:url(../img/register/bg_register.jpg) repeat-x;
	background-size:80px;
	padding:16px 0;
}

/* 事前登録フォーム（box） */
#form_box {
	position:relative;
	width:100%;
	background:url(../img/register/register-sp.png) no-repeat;
	background-size:100%;
	padding:0 0 5% ;
}

.error{
	width: 80%;
	margin: 10px auto;
	background: #F00;
	color: #FFF;
	text-align: center;
	padding: 10px 0;
	font-weight: bold;
}

#form_box::after {display:block; content:""; padding-top:53.125%;}

/* メールアドレスで登録（input[type='email']） */
input[type='email'] {margin:0; padding:0; background:#fff; border:none; border-radius:0; outline:none; -webkit-appearance:none; -moz-appearance:none; appearance:none;}
#form_email:-ms-input-placeholder {color:#666; font-weight:bold; padding:2px 0 0 0;}
#form_email::-moz-placeholder {color:#666; font-weight:bold; padding:2px 0 0 0;}
#form_email::-webkit-input-placeholder {color:#666; font-weight:bold; padding:2px 0 0 0;}
#form_email {position:absolute; top:12%; left:0; right:0; margin:auto; width:88%; height:18.5%; font-size:16px; line-height:1; padding:0 6px; border:2px solid #ccc;}
#form_email:focus {outline:none; border:2px solid #d9035e;}

/* メールアドレスで登録（ボタン） */
#mail_submit {
	position:absolute;
	bottom:40.8%;
	left:0;
	right:0;
	margin:auto;
	width:70%;
	padding-top:13%;
	background:url(../img/register/bt_mail-sp.png) no-repeat;
	background-size:100%;
	font-size:0;
	border:none;
	border-radius:0;
	outline:none;
	transition-duration:0.3s;
}
#mail_submit:hover {cursor:pointer; opacity:0.7;}
.is_ios #mail_submit:hover {opacity:1;}

/* Twitterで登録（ボタン） */
#twitter_submit a {
	position:absolute;
	bottom:16.6%;
	left:0;
	right:0;
	margin:auto;
	width:70%;
	padding-top:13%;
	background:url(../img/register/bt_tw-sp.png) no-repeat;
	background-size:100%;
	font-size:0;
	border:none;
	transition-duration:0.3s;
}
#twitter_submit a:hover {cursor:pointer; opacity:0.7;}
.is_ios #twitter_submit a:hover {opacity:1;}

/* Twitterで登録（注釈） */
#twitter_submit-annotation {position:absolute; bottom:6.5%; right:0; left:0; margin:auto; text-align:center; font-size:12px; font-weight:bold; color:#454545;}

/* 特典（wrapper） */
#bonus {
	width:100%;
	font-size:0;
	background:url(../img/common/bg_content-sp.jpg) repeat-y;
	background-size:100%;
	background-position:center -2px;
}

/* 事前登録でゲーム内特典が貰える */
#bonus h2 {width:100%; padding-top:10.625%; background:url(../img/register/bonus-sp.png) no-repeat; background-size:100%;}

/* 全員にビーストストーンをプレゼント!! */
#bonus_txt {width:100; padding-top:36%; background:url(../img/register/bonus_txt.png) no-repeat center; background-size:100%; margin:12px auto;}

/* 報酬一覧 */
#bonus ul {width:100%; margin:10px auto 40px auto; font-size:0;}
#bonus li {position:relative; margin:0 auto;}
#bonus li:nth-child(1) {width:96%; padding-top:25%; background:url(../img/register/bonus_10th-sp.png) no-repeat center; background-size:100%;}
#bonus li:nth-child(3) {width:96%; padding-top:25%; background:url(../img/register/bonus_30th-sp.png) no-repeat center; background-size:100%;}
#bonus li:nth-child(5) {width:96%; padding-top:25%; background:url(../img/register/bonus_50th-sp.png) no-repeat center; background-size:100%;}
#bonus li:nth-child(7) {width:96%; padding-top:25%; background:url(../img/register/bonus_70th-sp.png) no-repeat center; background-size:100%;}
#bonus li:nth-child(9) {width:96%; padding-top:25%; background:url(../img/register/bonus_100th-sp.png) no-repeat center; background-size:100%;}
#bonus li:nth-child(11) {width:96%; padding-top:25%; background:url(../img/register/bonus_150th-sp.png) no-repeat center; background-size:100%;}
#bonus li:nth-child(even) {width:10%; padding-top:7%; background:url(../img/register/icon_arrow.png) no-repeat center center; background-size:90%; margin:-1% auto -3% auto;}
#bonus li:nth-child(odd) p {position:absolute; top:-12%; right:1.5%; display:block; width:22.5%; padding-top:22.5%; background:url(../img/register/bt_stamp.png) no-repeat center center; background-size:100%;}

/* 事前登録する（wrapper） */
#register-entry {
	overflow:hidden;
	width:100%;
	background:url(../img/register/bg_entry.jpg);
	background-repeat:no-repeat;
	background-position:center 390px;
	background-size:138%;
}

/* 事前登録する（ボタン） */
#register-entry h2 {position:relative;}
#register-entry h2 a {
	position:absolute;
	top:-4%; 
	left:0;
	right:0;
	bottom:0;
	margin:auto;
	overflow:hidden;
	display:block;
	width:76%;
	padding-top:20%;
	background:url(../img/register/bt_entry.png) no-repeat center center;
	background-size:100%;
	font-size:0;
	transition-duration:0.3s;
}
#register-entry h2::after {display:block; content:""; padding-top:27%; background:url(../img/register/bg_entry-lp.png); background-size:2px 100%;}
#register-entry h2 a:hover {opacity:0.7;}

/* 事前登録する（テキスト） */
#register-entry {padding-bottom:110px;}
#register-entry h3 {width:100%; margin:20px 0 0 0; padding:0 1em;}
#register-entry dl {width:100%; margin:0 auto; padding:0 1em;}
#register-entry dt {margin:30px 0 10px 0; font-weight:bold;}
#register-entry dd {margin:0 0 10px 0; font-weight:normal;}

/* バリデーション */
#error{
	width: 90%;
	margin: 0 auto;
	background: #F00;
	color: #FFF;
	padding: 15px 0;
	font-weight: bold;
	text-align: center;
}


/* 0.1 - 登録登録（../pre-register/complete）
---------------------------------------------------------------------------------------------------------- */
/* 登録完了（wrapper） */
#register-complete-wrapper {width:94%; background:rgba(0,0,0,0.8); margin:3% auto 40px auto; padding:8px;}

/* 登録完了 */
#register-complete {text-align:center; font-size:14px; color:#fff; padding:42px 1em 58px 1em; border:2px solid #cc006e;}
#register-complete h1 {margin:0 0 38px 0; font-size:18px; letter-spacing:1px;}

/* TOPへ戻る */
#register-complete-back {text-indent:100%; white-space:nowrap; overflow:hidden;}
#register-complete-back a {display:block; width:290px; height:70px; background:url(../img/register/bt_top-back.png) no-repeat center center; background-size:100%; margin:0 auto 100px auto;}
#register-complete-back a:hover {opacity:0.7;}
.is_ios #register-complete-back a:hover {opacity:1;}

.twitter-link{
	color: #FFF !important;
}
.twitter-link:hover{
	color: #cc006e !important;
}


}